@db-ux/mcp-server 4.12.0 → 4.12.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 +400 -5
  2. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -22378,7 +22378,7 @@ var EMPTY_COMPLETION_RESULT = {
22378
22378
  // package.json
22379
22379
  var package_default = {
22380
22380
  name: "@db-ux/mcp-server",
22381
- version: "4.12.0",
22381
+ version: "4.12.1",
22382
22382
  type: "module",
22383
22383
  description: "MCP server for DB UX Design System \u2013 gives LLMs access to UI components and code examples",
22384
22384
  repository: {
@@ -23304,7 +23304,7 @@ export type DBCustomSelectState = DBCustomSelectDefaultState &
23304
23304
  FromValidState &
23305
23305
  CloseEventState<InteractionEvent<HTMLDetailsElement>> &
23306
23306
  DocumentScrollState;
23307
- `, examples: ["Density", "Multiple", "Variant", "Show Label", "Show Message", "Show Icon", "Validation", "Required", "Show Required Asterisk", "Disabled", "Form Field Width", "Dropdown Width", "Placement", "Selected type", "Show No Result", "Show Loading", "Show Search", "Show Select All", "Show Clear Selection", "Examples Single", "Examples Multiple", "Example tags", "Example: Other configuration", "Examples Floating label"], exampleCode: { react: { "density.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectDensity(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n data-density="functional"\n placeholder="Placeholder"\n label="Functional"\n listLabel="id-10206-Functional"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil2",\n },\n {\n value: "Option 3",\n id: "10dqnhil3",\n },\n {\n value: "Option 4",\n id: "10dqnhil4",\n },\n {\n value: "Option 5",\n id: "10dqnhil5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n data-density="regular"\n placeholder="Placeholder"\n label="(Default) Regular"\n listLabel="id-10207-(Default) Regular"\n options={[\n {\n value: "Option 1",\n id: "ok5olto18",\n },\n {\n value: "Option 2",\n id: "mzepnlbp4",\n },\n {\n value: "Option 3",\n id: "10dqnhil3",\n },\n {\n value: "Option 4",\n id: "10dqnhil2",\n },\n {\n value: "Option 5",\n id: "10dqnhil1",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n data-density="expressive"\n placeholder="Placeholder"\n label="Expressive"\n listLabel="id-10208-Expressive"\n options={[\n {\n value: "Option 1",\n id: "ixtyk8z9j",\n },\n {\n value: "Option 2",\n id: "k8kvx3fm8",\n },\n {\n value: "Option 3",\n id: "k8kvx3fm5",\n },\n {\n value: "Option 4",\n id: "k8kvx3fm6",\n },\n {\n value: "Option 5",\n id: "k8kvx3fm7",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectDensity;\n', "disabled.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectDisabled(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) False"\n listLabel="id-10221-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "dlysh2quv",\n },\n {\n value: "Option 2",\n id: "ygm3c9msn",\n },\n {\n value: "Option 3",\n id: "ygm4c9msn",\n },\n {\n value: "Option 4",\n id: "ygm5c9msn",\n },\n {\n value: "Option 5",\n id: "ygm6c9msn",\n },\n ]}\n multiple\n disabled={false}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="True"\n listLabel="id-10222-True"\n options={[\n {\n value: "Option 1",\n id: "z445a00hf",\n },\n {\n value: "Option 2",\n id: "wji97jfsg",\n },\n {\n value: "Option 3",\n id: "wji96jfsg",\n },\n {\n value: "Option 4",\n id: "wji95jfsg",\n },\n {\n value: "Option 5",\n id: "wji94jfsg",\n },\n ]}\n disabled\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectDisabled;\n', "dropdown-width.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectDropdownWidth(props: any) {\n return (\n <>\n <DBInfotext data-sb-ignore="true" size="small" semantic="informational">\n Form Field Width: Full\n </DBInfotext>\n <i className="line-break" data-sb-ignore="true" />\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="(Default) Fixed"\n formFieldWidth="full"\n dropdownWidth="fixed"\n listLabel="id-10227-(Default) Fixed"\n options={[\n {\n value: "Option 1",\n id: "99pgkheyw",\n },\n {\n value: "Option 2",\n id: "qc908rx6z",\n },\n {\n value: "Option 3",\n id: "qc908rx5z",\n },\n {\n value: "Option 4",\n id: "qc908rx4z",\n },\n {\n value: "Option 5",\n id: "qc908rx3z",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="Auto"\n formFieldWidth="full"\n dropdownWidth="auto"\n listLabel="id-10228-Auto"\n options={[\n {\n value: "1",\n id: "2smv303zl",\n },\n {\n value: "2",\n id: "dstvsee1m",\n },\n {\n value: "3",\n id: "dstvsee2m",\n },\n {\n value: "4",\n id: "dstvsee3m",\n },\n {\n value: "5",\n id: "dstvsee4m",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="Full"\n formFieldWidth="full"\n dropdownWidth="full"\n listLabel="id-10229-Full"\n options={[\n {\n value: "1",\n id: "8fb4evl87",\n },\n {\n value: "2",\n id: "0iiu59zbg",\n },\n {\n value: "3",\n id: "0iiu69zbg",\n },\n {\n value: "4",\n id: "0iiu79zbg",\n },\n {\n value: "5",\n id: "0iiu89zbg",\n },\n ]}\n />\n </div>\n <i className="line-break" data-sb-ignore="true" />\n <DBInfotext data-sb-ignore="true" size="small" semantic="informational">\n Form Field Width: Auto\n </DBInfotext>\n <i className="line-break" data-sb-ignore="true" />\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="(Default) Fixed"\n formFieldWidth="auto"\n dropdownWidth="fixed"\n listLabel="id-10233-(Default) Fixed"\n options={[\n {\n value: "Option 1",\n id: "gniy079gw",\n },\n {\n value: "Option 2",\n id: "kr0v4jgxl",\n },\n {\n value: "Option 3",\n id: "kr0v3jgxl",\n },\n {\n value: "Option 4",\n id: "kr0v2jgxl",\n },\n {\n value: "Option 5",\n id: "kr0v1jgxl",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="Auto"\n formFieldWidth="auto"\n dropdownWidth="auto"\n listLabel="id-10234-Auto"\n options={[\n {\n value: "1",\n id: "mmc6lfzsy",\n },\n {\n value: "2",\n id: "wr6elxyf4",\n },\n {\n value: "3",\n id: "wr6elxyf5",\n },\n {\n value: "4",\n id: "wr6elxyf6",\n },\n {\n value: "5",\n id: "wr6elxyf7",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="Full"\n formFieldWidth="auto"\n dropdownWidth="full"\n listLabel="id-10235-Full"\n options={[\n {\n value: "1",\n id: "q0iyxp9kq",\n },\n {\n value: "2",\n id: "mzo80txs4",\n },\n {\n value: "3",\n id: "mzo80txs5",\n },\n {\n value: "4",\n id: "mzo80txs6",\n },\n {\n value: "5",\n id: "mzo80txs7",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectDropdownWidth;\n', "example-other-configuration.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\nimport type { CustomSelectOptionType } from "../model";\n\nfunction CustomSelectExampleOtherConfiguration(props: any) {\n function getTransformSelectedLabels(selectedOptions?: any) {\n return selectedOptions.map((option: any) => option.value.at(-1)).join(", ");\n }\n\n function getSearchFilter(option: CustomSelectOptionType) {\n return option.value === "Option 1";\n }\n\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n searchValue="1"\n searchLabel="Search"\n label="Search Value"\n listLabel="id-10as4-Search Value"\n options={[\n {\n value: "Option 1",\n id: "09nursdao",\n },\n {\n value: "Option 2",\n id: "74n9csdc14",\n },\n {\n value: "Option 3",\n id: "64n9csdc14",\n },\n {\n value: "Option 4",\n id: "54n9csdc14",\n },\n {\n value: "Option 5",\n id: "44n9csdc14",\n },\n ]}\n showSearch\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectedLabels="Selected: Label controlled"\n label="Custom Selected Label"\n listLabel="id-10aasds4-Custom Selected Label"\n options={[\n {\n value: "Option 1",\n id: "09nurdscsdao",\n },\n {\n value: "Option 2",\n id: "74n9ccsddc14",\n },\n {\n value: "Option 3",\n id: "73n9ccsddc14",\n },\n {\n value: "Option 4",\n id: "72n9ccsddc14",\n },\n {\n value: "Option 5",\n id: "71n9ccsddc14",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="Transform Selected Label"\n listLabel="id-10aasds4-Transform Selected Label"\n options={[\n {\n value: "Option 1",\n id: "09nurdscsdao",\n },\n {\n value: "Option 2",\n id: "74n9ccsddc14",\n },\n {\n value: "Option 3",\n id: "73n9ccsddc14",\n },\n {\n value: "Option 4",\n id: "72n9ccsddc14",\n },\n {\n value: "Option 5",\n id: "71n9ccsddc14",\n },\n ]}\n {...{\n transformSelectedLabels: (selectedOptions: any) =>\n // @ts-ignore\n getTransformSelectedLabels(selectedOptions),\n }}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="Custom Search Filter"\n listLabel="id-10aasds4-Custom Search Filter"\n options={[\n {\n value: "Option 1",\n id: "09nurdscsdao",\n },\n {\n value: "Option 2",\n id: "74n9ccsddc14",\n },\n {\n value: "Option 3",\n id: "73n9ccsddc14",\n },\n {\n value: "Option 4",\n id: "72n9ccsddc14",\n },\n {\n value: "Option 5",\n id: "71n9ccsddc14",\n },\n ]}\n {...{\n searchFilter: (option: any) =>\n // @ts-ignore\n getSearchFilter(option),\n }}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectExampleOtherConfiguration;\n', "example-tags.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectExampletags(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectedType="tag"\n label="Tag grow"\n listLabel="id-10271-Tag grow"\n options={[\n {\n value: "Option 1",\n id: "53xbfd1o6",\n },\n {\n value: "Option 2",\n id: "fq8ypeiz2",\n },\n {\n value: "Option 3",\n id: "jtd3wevz2",\n },\n {\n value: "Option 4",\n id: "srr1toi8f",\n },\n {\n value: "Option 5",\n id: "srr1toi7f",\n },\n ]}\n multiple\n removeTagsTexts={[\n "Remove Option entry 1",\n "Remove Option entry 2",\n "Remove Option entry 3",\n "Remove Option entry 4",\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectedType="tag"\n formFieldWidth="auto"\n label="Tag grow + auto"\n listLabel="id-10272-Tag grow + auto"\n options={[\n {\n value: "Option 1",\n id: "jn3s5kl9t",\n },\n {\n value: "Option 2",\n id: "iesayujhy",\n },\n {\n value: "Option 3",\n id: "55kavoeem",\n },\n {\n value: "Option 4",\n id: "xi4qhrdg8",\n },\n {\n value: "Option 5",\n id: "xi4qhrdg7",\n },\n ]}\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectExampletags;\n', "examples-floating-label.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectExamplesFloatinglabel(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n variant="floating"\n label="Floating"\n listLabel="id-10300-Floating"\n options={[\n {\n value: "Option 1",\n id: "otbjunoyx",\n },\n {\n value: "Option 2",\n id: "ju53v02yg",\n },\n {\n value: "Option 3",\n id: "ju53v03yg",\n },\n {\n value: "Option 4",\n id: "ju53v04yg",\n },\n {\n value: "Option 5",\n id: "ju53v05yg",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n variant="floating"\n validation="invalid"\n invalidMessage="Invalid Message"\n label="Floating"\n listLabel="id-10301-Floating"\n options={[\n {\n value: "Option 1",\n id: "otbjunoyx",\n },\n {\n value: "Option 2",\n id: "ju53v02yg",\n },\n {\n value: "Option 3",\n id: "ju53v03yg",\n },\n {\n value: "Option 4",\n id: "ju53v04yg",\n },\n {\n value: "Option 5",\n id: "ju53v05yg",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectExamplesFloatinglabel;\n', "examples-multiple.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectExamplesMultiple(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Less than 6"\n listLabel="id-10266-Less than 6"\n options={[\n {\n value: "Option 1",\n id: "20twpdi3j",\n },\n {\n value: "Option 2",\n id: "0uwpufkvw",\n },\n {\n value: "Option 3",\n id: "xmvmr8dws",\n },\n {\n value: "Option 4",\n id: "yv5v4q9ew",\n },\n {\n value: "Option 5",\n id: "6bjfubtz4",\n },\n ]}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Option Group Title"\n listLabel="id-10267-Option Group Title"\n options={[\n {\n label: "Option group 1",\n isGroupTitle: true,\n id: "qcvwaejkk",\n },\n {\n value: "G1:Option 1",\n id: "jgnlzpm6q",\n },\n {\n value: "G1:Option 2",\n id: "n75b2qd9t",\n },\n {\n label: "Option group 2",\n isGroupTitle: true,\n id: "bcx8u0ke9",\n },\n {\n value: "G2:Option 1",\n id: "zgmc2tyn4",\n },\n {\n value: "G2:Option 2",\n id: "sw7l6jpoj",\n },\n ]}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Option Groups"\n listLabel="id-10268-Option Groups"\n options={[\n {\n value: "G1:Option 1",\n id: "y5iukyovr",\n },\n {\n value: "G1:Option 2",\n showDivider: true,\n id: "0ton8ii8v",\n },\n {\n value: "G2:Option 1",\n id: "9c4cgirv2",\n },\n {\n value: "G2:Option 2",\n showDivider: true,\n id: "740m4a61n",\n },\n ]}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n selectAllLabel="Select all"\n label="More than 6"\n listLabel="id-10269-More than 6"\n options={[\n {\n value: "Option 1",\n id: "3zjiay7k4",\n },\n {\n value: "Option 2",\n id: "s52x89xrz",\n },\n {\n value: "Option 3",\n id: "2u5nocjfo",\n },\n {\n value: "Option 4",\n id: "0ibok60su",\n },\n {\n value: "Option 5",\n id: "kdd8w27oh",\n },\n {\n value: "Option 6",\n id: "1qn5w4113",\n },\n {\n value: "Option 7",\n id: "eopg7tn9q",\n },\n ]}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectAllLabel="Select all"\n searchLabel="Search"\n searchPlaceholder="Search"\n placeholder="Placeholder"\n label="More than 10"\n listLabel="id-10270-More than 10"\n options={[\n {\n value: "Option 1",\n id: "wg5f7ycm8",\n },\n {\n value: "Option 2",\n id: "3viv9gxlp",\n },\n {\n value: "Option 3",\n id: "4wtnn5nwh",\n },\n {\n value: "Option 4",\n id: "r4amvgigg",\n },\n {\n value: "Option 5",\n id: "pcmqabmuy",\n },\n {\n value: "Option 6",\n id: "u8nify3n9",\n },\n {\n value: "Option 7",\n id: "rcmpselej",\n },\n {\n value: "Option 8",\n id: "ln43k984l",\n },\n {\n value: "Option 9",\n id: "j8squjd5i",\n },\n {\n value: "Option 10 very long item with may break into a new line",\n id: "b84ie8otk",\n },\n ]}\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectExamplesMultiple;\n', "examples-single.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectExamplesSingle(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Icons"\n listLabel="id-10260-Icons"\n options={[\n {\n value: "Option 1",\n icon: "x_placeholder",\n id: "fvdhawk3a",\n },\n {\n value: "Option 2",\n icon: "x_placeholder",\n id: "i0pey2syc",\n },\n {\n value: "Option 3",\n icon: "x_placeholder",\n id: "i0pey3syc",\n },\n {\n value: "Option 4",\n icon: "x_placeholder",\n id: "i0pey4syc",\n },\n {\n value: "Option 5",\n icon: "x_placeholder",\n id: "i0pey5syc",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Less than 6"\n listLabel="id-10261-Less than 6"\n options={[\n {\n value: "Option 1",\n id: "6zthubswi",\n },\n {\n value: "Option 2",\n id: "fh93iyp7w",\n },\n {\n value: "Option 3",\n id: "1cbtid79q",\n },\n {\n value: "Option 4",\n id: "5w9s57s9k",\n },\n {\n value: "Option 5",\n id: "ixclh8p8n",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Option Group Title"\n listLabel="id-10262-Option Group Title"\n options={[\n {\n label: "Option group 1",\n isGroupTitle: true,\n id: "f48zp673q",\n },\n {\n value: "G1:Option 1",\n id: "8291mu3qc",\n },\n {\n value: "G1:Option 2",\n id: "4duvelxc8",\n },\n {\n label: "Option group 2",\n isGroupTitle: true,\n id: "g4ti9lrc7",\n },\n {\n value: "G2:Option 1",\n id: "gqhv3u61k",\n },\n {\n value: "G2:Option 2",\n id: "8yx3v6yii",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Option Groups"\n listLabel="id-10263-Option Groups"\n options={[\n {\n value: "G1:Option 1",\n id: "q4h9435ye",\n },\n {\n value: "G1:Option 2",\n showDivider: true,\n id: "7tzwcbeln",\n },\n {\n value: "G2:Option 1",\n id: "zjmir6142",\n },\n {\n value: "G2:Option 2",\n showDivider: true,\n id: "hwqps1347",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="More than 6"\n listLabel="id-10264-More than 6"\n options={[\n {\n value: "Option 1",\n id: "ghsxrti0t",\n },\n {\n value: "Option 2",\n id: "5hj8rz3h6",\n },\n {\n value: "Option 3",\n id: "kvyjps1ai",\n },\n {\n value: "Option 4",\n id: "31ncem9lt",\n },\n {\n value: "Option 5",\n id: "0fwgqufql",\n },\n {\n value: "Option 6",\n id: "okz955pi7",\n },\n {\n value: "Option 7",\n id: "ihbjcr0lo",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n searchLabel="Search"\n label="More than 10"\n listLabel="id-10265-More than 10"\n options={[\n {\n value: "Option 1",\n id: "o9docf7sw",\n },\n {\n value: "Option 2",\n id: "ttwfqxw26",\n },\n {\n value: "Option 3",\n id: "0c5sgzfag",\n },\n {\n value: "Option 4",\n id: "c8knaskj6",\n },\n {\n value: "Option 5",\n id: "2z5uhqdmr",\n },\n {\n value: "Option 6",\n id: "y2tlf2fnf",\n },\n {\n value: "Option 7",\n id: "q9hdifmw7",\n },\n {\n value: "Option 8",\n id: "vqz28zphb",\n },\n {\n value: "Option 9",\n id: "j2amckmwh",\n },\n {\n value: "Option 10",\n id: "zdi31d2lu",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectExamplesSingle;\n', "form-field-width.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectFormFieldWidth(props: any) {\n return (\n <>\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="(Default) Full"\n formFieldWidth="full"\n listLabel="id-10223-(Default) Full"\n options={[\n {\n value: "Option 1",\n id: "z0ispy7ls",\n },\n {\n value: "Option 2",\n id: "ngl1p4pxn",\n },\n {\n value: "Option 3",\n id: "ngl1p3pxn",\n },\n {\n value: "Option 4",\n id: "ngl1p2pxn",\n },\n {\n value: "Option 5",\n id: "ngl1p1pxn",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="Auto"\n formFieldWidth="auto"\n listLabel="id-10224-Auto"\n options={[\n {\n value: "Option 1",\n id: "klxyvobwn",\n },\n {\n value: "Option 2",\n id: "7oag2a4fj",\n },\n {\n value: "Option 3",\n id: "7oag2a3fj",\n },\n {\n value: "Option 4",\n id: "7oag2a2fj",\n },\n {\n value: "Option 5",\n id: "7oag2a1fj",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectFormFieldWidth;\n', "multiple.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectMultiple(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) False"\n listLabel="id-10209-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "ykzqfs8oa",\n },\n {\n value: "Option 2",\n id: "kcndx1xog",\n },\n {\n value: "Option 3",\n id: "kcndx2xog",\n },\n {\n value: "Option 4",\n id: "kcndx3xog",\n },\n {\n value: "Option 5",\n id: "kcndx4xog",\n },\n ]}\n multiple={false}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n searchLabel="Search"\n label="True"\n listLabel="id-10210-True"\n options={[\n {\n value: "Option 1",\n id: "34540enzm",\n },\n {\n value: "Option 2",\n id: "3a4ml34c8",\n },\n {\n value: "Option 3",\n id: "3a4ml34c7",\n },\n {\n value: "Option 4",\n id: "3a4ml34c6",\n },\n {\n value: "Option 5",\n id: "3a4ml34c5",\n },\n ]}\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectMultiple;\n', "placement.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectPlacement(props: any) {\n return (\n <>\n <DBInfotext data-sb-ignore="true" size="small" semantic="informational">\n Form Field Width: Full\n </DBInfotext>\n <i className="line-break" data-sb-ignore="true" />\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) Bottom"\n formFieldWidth="full"\n placement="bottom"\n listLabel="id-10238-(Default) Bottom"\n options={[\n {\n value: "Option 1",\n id: "aryeycu23",\n },\n {\n value: "Option 2",\n id: "qrf3x6gdq",\n },\n {\n value: "Option 3",\n id: "qrf4x6gdq",\n },\n {\n value: "Option 4",\n id: "qrf5x6gdq",\n },\n {\n value: "Option 5",\n id: "qrf6x6gdq",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="Top"\n formFieldWidth="full"\n placement="top"\n listLabel="id-10239-Top"\n options={[\n {\n value: "Option 1",\n id: "mmfg4zco7",\n },\n {\n value: "Option 2",\n id: "52zkxb05u",\n },\n {\n value: "Option 3",\n id: "52zkxb04u",\n },\n {\n value: "Option 4",\n id: "52zkxb03u",\n },\n {\n value: "Option 5",\n id: "52zkxb02u",\n },\n ]}\n />\n </div>\n <i className="line-break" data-sb-ignore="true" />\n <DBInfotext data-sb-ignore="true" size="small" semantic="informational">\n Form Field Width: Auto\n </DBInfotext>\n <i className="line-break" data-sb-ignore="true" />\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) Bottom-Start"\n formFieldWidth="auto"\n placement="bottom-start"\n listLabel="id-10243-(Default) Bottom-Start"\n options={[\n {\n value: "Option 1",\n id: "fhczoz28b",\n },\n {\n value: "Option 2",\n id: "k8zcxfb4x",\n },\n {\n value: "Option 3",\n id: "k8zcxfb3x",\n },\n {\n value: "Option 4",\n id: "k8zcxfb2x",\n },\n {\n value: "Option 5",\n id: "k8zcxfb1x",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="Bottom-End"\n formFieldWidth="auto"\n placement="bottom-end"\n listLabel="id-10244-Bottom-End"\n options={[\n {\n value: "Option 1",\n id: "ukchupevr",\n },\n {\n value: "Option 2",\n id: "ts0jwdqxj",\n },\n {\n value: "Option 3",\n id: "ts1jwdqxj",\n },\n {\n value: "Option 4",\n id: "ts2jwdqxj",\n },\n {\n value: "Option 5",\n id: "ts3jwdqxj",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="Top-Start"\n formFieldWidth="auto"\n placement="top-start"\n listLabel="id-10245-Top-Start"\n options={[\n {\n value: "Option 1",\n id: "zhuaneo1w",\n },\n {\n value: "Option 2",\n id: "5mwz7pmcr",\n },\n {\n value: "Option 3",\n id: "4mwz7pmcr",\n },\n {\n value: "Option 4",\n id: "3mwz7pmcr",\n },\n {\n value: "Option 5",\n id: "2mwz7pmcr",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="Top-End"\n formFieldWidth="auto"\n placement="top-end"\n listLabel="id-10246-Top-End"\n options={[\n {\n value: "Option 1",\n id: "6uq8tv3e8",\n },\n {\n value: "Option 2",\n id: "iz30t1pce",\n },\n {\n value: "Option 3",\n id: "iz40t1pce",\n },\n {\n value: "Option 4",\n id: "iz50t1pce",\n },\n {\n value: "Option 5",\n id: "iz60t1pce",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectPlacement;\n', "required.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectRequired(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) False"\n listLabel="id-10219-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "drpx8im88",\n },\n {\n value: "Option 2",\n id: "211e6zox5",\n },\n {\n value: "Option 3",\n id: "211e6zox4",\n },\n {\n value: "Option 4",\n id: "211e6zox3",\n },\n {\n value: "Option 5",\n id: "211e6zox2",\n },\n ]}\n multiple\n required={false}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="True"\n listLabel="id-10220-True"\n options={[\n {\n value: "Option 1",\n id: "2v0zw8afc",\n },\n {\n value: "Option 2",\n id: "308308w5z",\n },\n {\n value: "Option 3",\n id: "308308w4z",\n },\n {\n value: "Option 4",\n id: "308308w3z",\n },\n {\n value: "Option 5",\n id: "308308w2z",\n },\n ]}\n required\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectRequired;\n', "selected-type.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectSelectedtype(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) Text"\n listLabel="id-10247-(Default) Text"\n options={[\n {\n value: "Option 1",\n id: "d9n3d2z13",\n },\n {\n value: "Option 2",\n id: "vq1c6xw05",\n },\n {\n value: "Option 3",\n id: "73eppj8rp",\n },\n {\n value: "Option 4",\n id: "yy82mda4v",\n },\n {\n value: "Option 5",\n id: "yy82mda5v",\n },\n ]}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectedType="amount"\n label="Amount"\n listLabel="id-10248-Amount"\n options={[\n {\n value: "Option 1",\n id: "la3wbcr7z",\n },\n {\n value: "Option 2",\n id: "wz2u3a4q1",\n },\n {\n value: "Option 3",\n id: "fcd4tiqlr",\n },\n {\n value: "Option 4",\n id: "riz9ea0ox",\n },\n {\n value: "Option 5",\n id: "riz9ea1ox",\n },\n ]}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectedType="tag"\n label="Tag"\n listLabel="id-10249-Tag"\n options={[\n {\n value: "Option 1",\n id: "q23x2uflo",\n },\n {\n value: "Option 2",\n id: "au07iy2il",\n },\n {\n value: "Option 3",\n id: "ig0l3rruj",\n },\n {\n value: "Option 4",\n id: "4m2gbzu2q",\n },\n {\n value: "Option 5",\n id: "4m2gbzu3q",\n },\n ]}\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectSelectedtype;\n', "show-clear-selection.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowClearSelection(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) True"\n listLabel="id-10258-(Default) True"\n options={[\n {\n value: "Option 1",\n id: "9zfvu9noy",\n },\n {\n value: "Option 2",\n id: "cox90a0q8",\n },\n {\n value: "Option 3",\n id: "cox80a0q8",\n },\n {\n value: "Option 4",\n id: "cox70a0q8",\n },\n {\n value: "Option 5",\n id: "cox60a0q8",\n },\n ]}\n showClearSelection\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="False"\n listLabel="id-10259-False"\n options={[\n {\n value: "Option 1",\n id: "ln9ms4fjy",\n },\n {\n value: "Option 2",\n id: "dta90rteq",\n },\n {\n value: "Option 3",\n id: "dta80rteq",\n },\n {\n value: "Option 4",\n id: "dta70rteq",\n },\n {\n value: "Option 5",\n id: "dta60rteq",\n },\n ]}\n showClearSelection={false}\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowClearSelection;\n', "show-icon.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowIcon(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n icon="x_placeholder"\n label="(Default) False"\n listLabel="id-10217-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "637sjglg5",\n },\n {\n value: "Option 2",\n id: "s529jnpj0",\n },\n {\n value: "Option 3",\n id: "s429jnpj0",\n },\n {\n value: "Option 4",\n id: "s329jnpj0",\n },\n {\n value: "Option 5",\n id: "s229jnpj0",\n },\n ]}\n showIcon={false}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n icon="x_placeholder"\n label="True"\n listLabel="id-10218-True"\n options={[\n {\n value: "Option 1",\n id: "0b998bbgw",\n },\n {\n value: "Option 2",\n id: "a37n10lfh",\n },\n {\n value: "Option 3",\n id: "a47n10lfh",\n },\n {\n value: "Option 4",\n id: "a57n10lfh",\n },\n {\n value: "Option 5",\n id: "a67n10lfh",\n },\n ]}\n showIcon\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowIcon;\n', "show-label.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowLabel(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) True"\n listLabel="id-10213-(Default) True"\n options={[\n {\n value: "Option 1",\n id: "09a47p13k",\n },\n {\n value: "Option 2",\n id: "ya0ahf4od",\n },\n {\n value: "Option 3",\n id: "ya0ahf3od",\n },\n {\n value: "Option 4",\n id: "ya0ahf2od",\n },\n {\n value: "Option 5",\n id: "ya0ahf1od",\n },\n ]}\n showLabel\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="False"\n listLabel="id-10214-False"\n options={[\n {\n value: "Option 1",\n id: "h8apm2qse",\n },\n {\n value: "Option 2",\n id: "vop8vkb8q",\n },\n {\n value: "Option 3",\n id: "vop8vkb7q",\n },\n {\n value: "Option 4",\n id: "vop8vkb6q",\n },\n {\n value: "Option 5",\n id: "vop8vkb5q",\n },\n ]}\n showLabel={false}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowLabel;\n', "show-loading.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowLoading(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n loadingText="Loading"\n label="(Default) False"\n listLabel="id-10252-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "glkscvbn5",\n },\n {\n value: "Option 2",\n id: "13cmgddkr",\n },\n {\n value: "Option 3",\n id: "14cmgddkr",\n },\n {\n value: "Option 4",\n id: "15cmgddkr",\n },\n {\n value: "Option 5",\n id: "16cmgddkr",\n },\n ]}\n showLoading={false}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n loadingText="Loading"\n label="True"\n listLabel="id-10253-True"\n options={[\n {\n value: "Option 1",\n id: "e6wvfkv27",\n },\n {\n value: "Option 2",\n id: "afg1mqolj",\n },\n {\n value: "Option 3",\n id: "afg2mqolj",\n },\n {\n value: "Option 4",\n id: "afg3mqolj",\n },\n {\n value: "Option 5",\n id: "afg4mqolj",\n },\n ]}\n showLoading\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowLoading;\n', "show-message.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowMessage(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n message="Helper Message"\n label="(Default) False"\n listLabel="id-10215-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "m88qjifb3",\n },\n {\n value: "Option 2",\n id: "4et40d885",\n },\n {\n value: "Option 3",\n id: "4et40d884",\n },\n {\n value: "Option 4",\n id: "4et40d883",\n },\n {\n value: "Option 5",\n id: "4et40d882",\n },\n ]}\n showMessage={false}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n message="Helper Message"\n label="True"\n listLabel="id-10216-True"\n options={[\n {\n value: "Option 1",\n id: "tm65in30k",\n },\n {\n value: "Option 2",\n id: "hujnrn5vk",\n },\n {\n value: "Option 3",\n id: "hujnrn4vk",\n },\n {\n value: "Option 4",\n id: "hujnrn3vk",\n },\n {\n value: "Option 5",\n id: "hujnrn2vk",\n },\n ]}\n showMessage\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowMessage;\n', "show-no-result.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowNoResult(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n noResultsText="Nothing found"\n label="(Default) False"\n listLabel="id-10250-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "wc5wcgjam",\n },\n {\n value: "Option 2",\n id: "lx4cydggt",\n },\n {\n value: "Option 3",\n id: "lx3cydggt",\n },\n {\n value: "Option 4",\n id: "lx2cydggt",\n },\n {\n value: "Option 5",\n id: "lx1cydggt",\n },\n ]}\n showNoResults={false}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n noResultsText="Nothing found"\n label="True"\n listLabel="id-10251-True"\n options={[\n {\n value: "Option 1",\n id: "waa0gfjab",\n },\n {\n value: "Option 2",\n id: "v48umf0qp",\n },\n {\n value: "Option 3",\n id: "v58umf0qp",\n },\n {\n value: "Option 4",\n id: "v68umf0qp",\n },\n {\n value: "Option 5",\n id: "v78umf0qp",\n },\n ]}\n showNoResults\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowNoResult;\n', "show-required-asterisk.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowRequiredAsterisk(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) True"\n listLabel="id-1021s9-(Default) True"\n options={[\n {\n value: "Option 1",\n id: "drpxs8im88",\n },\n {\n value: "Option 2",\n id: "211ed6zox5",\n },\n {\n value: "Option 3",\n id: "211ed6zox4",\n },\n {\n value: "Option 4",\n id: "211ed6zox3",\n },\n {\n value: "Option 5",\n id: "211ed6zox2",\n },\n ]}\n multiple\n required\n showRequiredAsterisk\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="False"\n listLabel="id-10s220-False"\n options={[\n {\n value: "Option 1",\n id: "2v0zfw8afc",\n },\n {\n value: "Option 2",\n id: "30830f8w5z",\n },\n {\n value: "Option 3",\n id: "30830f8w4z",\n },\n {\n value: "Option 4",\n id: "30830f8w3z",\n },\n {\n value: "Option 5",\n id: "30830f8w2z",\n },\n ]}\n required\n showRequiredAsterisk={false}\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowRequiredAsterisk;\n', "show-search.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowSearch(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) False"\n selectAllLabel="Select all"\n searchLabel="Search"\n listLabel="id-10254-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "09nure8co",\n },\n {\n value: "Option 2",\n id: "74n91hp14",\n },\n {\n value: "Option 3",\n id: "74n91hp15",\n },\n {\n value: "Option 4",\n id: "74n91hp16",\n },\n {\n value: "Option 5",\n id: "74n91hp17",\n },\n {\n value: "Option 6",\n id: "74n91hp18",\n },\n {\n value: "Option 7",\n id: "74n91hp19",\n },\n {\n value: "Option 8",\n id: "74n91hp24",\n },\n {\n value: "Option 9",\n id: "74n91hp34",\n },\n {\n value: "Option 10",\n id: "74n91hp44",\n },\n ]}\n showSearch={false}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectAllLabel="Select all"\n searchLabel="Search"\n label="True"\n listLabel="id-10255-True"\n options={[\n {\n value: "Option 1",\n id: "ktmbve0k2",\n },\n {\n value: "Option 2",\n id: "uf9wakkc1",\n },\n {\n value: "Option 3",\n id: "uf9wakkc2",\n },\n {\n value: "Option 4",\n id: "uf9wakkc3",\n },\n {\n value: "Option 5",\n id: "uf9wakkc4",\n },\n ]}\n showSearch\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowSearch;\n', "show-select-all.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowSelectAll(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectAllLabel="Select all"\n label="(Default) False"\n listLabel="id-10256-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "p6l2dpiea",\n },\n {\n value: "Option 2",\n id: "jh7pczno4",\n },\n {\n value: "Option 3",\n id: "jh7pczno5",\n },\n {\n value: "Option 4",\n id: "jh7pczno6",\n },\n {\n value: "Option 5",\n id: "jh7pczno7",\n },\n {\n value: "Option 6",\n id: "jh7pczno8",\n },\n ]}\n showSelectAll={false}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectAllLabel="Select all"\n label="True"\n listLabel="id-10257-True"\n options={[\n {\n value: "Option 1",\n id: "zcim85pqg",\n },\n {\n value: "Option 2",\n id: "kg6gvbwru",\n },\n {\n value: "Option 3",\n id: "kg5gvbwru",\n },\n {\n value: "Option 4",\n id: "kg4gvbwru",\n },\n {\n value: "Option 5",\n id: "kg3gvbwru",\n },\n ]}\n showSelectAll\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowSelectAll;\n', "validation.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectValidation(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n validation="no-validation"\n label="(Default) No Validation"\n listLabel="id-102061-(Default) No Validation"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil5",\n },\n {\n value: "Option 3",\n id: "10dqnhil4",\n },\n {\n value: "Option 4",\n id: "10dqnhil3",\n },\n {\n value: "Option 5",\n id: "10dqnhil2",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n validation="invalid"\n invalidMessage="Invalid Message"\n label="Invalid"\n listLabel="id-102062-Invalid"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil5",\n },\n {\n value: "Option 3",\n id: "10dqnhil4",\n },\n {\n value: "Option 4",\n id: "10dqnhil3",\n },\n {\n value: "Option 5",\n id: "10dqnhil2",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n validation="valid"\n invalidMessage="Valid Message"\n label="Valid"\n listLabel="id-102063-Valid"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil5",\n },\n {\n value: "Option 3",\n id: "10dqnhil4",\n },\n {\n value: "Option 4",\n id: "10dqnhil3",\n },\n {\n value: "Option 5",\n id: "10dqnhil2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectValidation;\n', "variant.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectVariant(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) Above"\n listLabel="id-10211-(Default) Above"\n options={[\n {\n value: "Option 1",\n id: "4lj8zr5b1",\n },\n {\n value: "Option 2",\n id: "uurfm7y2y",\n },\n {\n value: "Option 3",\n id: "uurfm7y3y",\n },\n {\n value: "Option 4",\n id: "uurfm7y4y",\n },\n {\n value: "Option 5",\n id: "uurfm7y5y",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n variant="floating"\n label="Floating"\n listLabel="id-10212-Floating"\n options={[\n {\n value: "Option 1",\n id: "otbjunoyx",\n },\n {\n value: "Option 2",\n id: "ju53v02yg",\n },\n {\n value: "Option 3",\n id: "ju53v03yg",\n },\n {\n value: "Option 4",\n id: "ju53v04yg",\n },\n {\n value: "Option 5",\n id: "ju53v05yg",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectVariant;\n' }, angular: { "density.example.ts": `import {
23307
+ `, examples: ["Density", "Multiple", "Variant", "Show Label", "Show Message", "Show Icon", "Validation", "Required", "Show Required Asterisk", "Disabled", "Form Field Width", "Dropdown Width", "Dropdown Width Auto Edge Cases", "Placement", "Selected type", "Show No Result", "Show Loading", "Show Search", "Show Select All", "Show Clear Selection", "Examples Single", "Examples Multiple", "Example tags", "Example: Other configuration", "Examples Floating label"], exampleCode: { react: { "density.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectDensity(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n data-density="functional"\n placeholder="Placeholder"\n label="Functional"\n listLabel="id-10206-Functional"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil2",\n },\n {\n value: "Option 3",\n id: "10dqnhil3",\n },\n {\n value: "Option 4",\n id: "10dqnhil4",\n },\n {\n value: "Option 5",\n id: "10dqnhil5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n data-density="regular"\n placeholder="Placeholder"\n label="(Default) Regular"\n listLabel="id-10207-(Default) Regular"\n options={[\n {\n value: "Option 1",\n id: "ok5olto18",\n },\n {\n value: "Option 2",\n id: "mzepnlbp4",\n },\n {\n value: "Option 3",\n id: "10dqnhil3",\n },\n {\n value: "Option 4",\n id: "10dqnhil2",\n },\n {\n value: "Option 5",\n id: "10dqnhil1",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n data-density="expressive"\n placeholder="Placeholder"\n label="Expressive"\n listLabel="id-10208-Expressive"\n options={[\n {\n value: "Option 1",\n id: "ixtyk8z9j",\n },\n {\n value: "Option 2",\n id: "k8kvx3fm8",\n },\n {\n value: "Option 3",\n id: "k8kvx3fm5",\n },\n {\n value: "Option 4",\n id: "k8kvx3fm6",\n },\n {\n value: "Option 5",\n id: "k8kvx3fm7",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectDensity;\n', "disabled.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectDisabled(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) False"\n listLabel="id-10221-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "dlysh2quv",\n },\n {\n value: "Option 2",\n id: "ygm3c9msn",\n },\n {\n value: "Option 3",\n id: "ygm4c9msn",\n },\n {\n value: "Option 4",\n id: "ygm5c9msn",\n },\n {\n value: "Option 5",\n id: "ygm6c9msn",\n },\n ]}\n multiple\n disabled={false}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="True"\n listLabel="id-10222-True"\n options={[\n {\n value: "Option 1",\n id: "z445a00hf",\n },\n {\n value: "Option 2",\n id: "wji97jfsg",\n },\n {\n value: "Option 3",\n id: "wji96jfsg",\n },\n {\n value: "Option 4",\n id: "wji95jfsg",\n },\n {\n value: "Option 5",\n id: "wji94jfsg",\n },\n ]}\n disabled\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectDisabled;\n', "dropdown-width-auto.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectDropdownWidthAuto(props: any) {\n return (\n <>\n <DBInfotext data-sb-ignore="true" size="small" semantic="informational">\n Long option text with dropdownWidth=&quot;auto&quot; \u2014 the dropdown\n grows to the longest option and the text stays on a single line (no\n wrapping, no truncation)\n </DBInfotext>\n <i className="line-break" data-sb-ignore="true" />\n <div\n style={{\n width: "300px",\n }}\n >\n <DBCustomSelect\n label="Auto: Long Options"\n formFieldWidth="full"\n dropdownWidth="auto"\n listLabel="auto-long-options"\n options={[\n {\n value: "long-1",\n label:\n "Dieser extrem lange Optionstext bleibt im Auto-Modus in einer Zeile und das Dropdown waechst mit",\n id: "auto-long-1",\n },\n {\n value: "long-2",\n label:\n "Ein weiterer viel zu langer Text der die Dropdown-Breite im Auto-Modus bestimmt",\n id: "auto-long-2",\n },\n {\n value: "long-3",\n label: "Kurz",\n id: "auto-long-3",\n },\n {\n value: "long-4",\n label:\n "Frankfurt(Main)Hbf - Berlin Hauptbahnhof (tief) via Erfurt Hbf",\n id: "auto-long-4",\n },\n {\n value: "long-5",\n label:\n "Muenchen Hbf Gleis 15 Abfahrt Richtung Stuttgart mit Umstieg in Augsburg",\n id: "auto-long-5",\n },\n ]}\n />\n </div>\n <i className="line-break" data-sb-ignore="true" />\n <DBInfotext data-sb-ignore="true" size="small" semantic="informational">\n Wide trigger (400px) with short options and\n dropdownWidth=&quot;auto&quot; \u2014 dropdown should be at least as wide as\n the trigger\n </DBInfotext>\n <i className="line-break" data-sb-ignore="true" />\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="Auto: Wide Trigger, Short Options"\n formFieldWidth="full"\n dropdownWidth="auto"\n listLabel="auto-wide-trigger-short-options"\n options={[\n {\n value: "A",\n id: "auto-short-1",\n },\n {\n value: "B",\n id: "auto-short-2",\n },\n {\n value: "C",\n id: "auto-short-3",\n },\n ]}\n />\n </div>\n <i className="line-break" data-sb-ignore="true" />\n <DBInfotext data-sb-ignore="true" size="small" semantic="informational">\n Narrow trigger (150px) with long options and\n dropdownWidth=&quot;auto&quot; \u2014 dropdown should grow to fit content but\n not exceed viewport\n </DBInfotext>\n <i className="line-break" data-sb-ignore="true" />\n <div\n style={{\n width: "150px",\n }}\n >\n <DBCustomSelect\n label="Auto: Narrow Trigger"\n formFieldWidth="full"\n dropdownWidth="auto"\n listLabel="auto-narrow-trigger-long-options"\n options={[\n {\n value: "narrow-long-1",\n label: "Frankfurt(Main)Hbf nach Berlin Hbf",\n id: "auto-narrow-long-1",\n },\n {\n value: "narrow-long-2",\n label: "Hamburg-Altona via Hannover Hbf",\n id: "auto-narrow-long-2",\n },\n {\n value: "narrow-long-3",\n label: "Koeln Messe/Deutz (tief)",\n id: "auto-narrow-long-3",\n },\n ]}\n />\n </div>\n <i className="line-break" data-sb-ignore="true" />\n <DBInfotext data-sb-ignore="true" size="small" semantic="informational">\n Mixed option lengths with dropdownWidth=&quot;auto&quot; \u2014 dropdown\n width should accommodate the longest option\n </DBInfotext>\n <i className="line-break" data-sb-ignore="true" />\n <div\n style={{\n width: "250px",\n }}\n >\n <DBCustomSelect\n label="Auto: Mixed Lengths"\n formFieldWidth="full"\n dropdownWidth="auto"\n listLabel="auto-mixed-lengths"\n options={[\n {\n value: "mix-1",\n label: "OK",\n id: "auto-mix-1",\n },\n {\n value: "mix-2",\n label: "Mittellanger Optionstext hier",\n id: "auto-mix-2",\n },\n {\n value: "mix-3",\n label:\n "Dieser Optionstext ist deutlich laenger als alle anderen und sollte die Breite bestimmen",\n id: "auto-mix-3",\n },\n {\n value: "mix-4",\n label: "Kurz",\n id: "auto-mix-4",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectDropdownWidthAuto;\n', "dropdown-width.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectDropdownWidth(props: any) {\n return (\n <>\n <DBInfotext data-sb-ignore="true" size="small" semantic="informational">\n Form Field Width: Full\n </DBInfotext>\n <i className="line-break" data-sb-ignore="true" />\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="(Default) Fixed"\n formFieldWidth="full"\n dropdownWidth="fixed"\n listLabel="id-10227-(Default) Fixed"\n options={[\n {\n value: "Option 1",\n id: "99pgkheyw",\n },\n {\n value: "Option 2",\n id: "qc908rx6z",\n },\n {\n value: "Option 3",\n id: "qc908rx5z",\n },\n {\n value: "Option 4",\n id: "qc908rx4z",\n },\n {\n value: "Option 5",\n id: "qc908rx3z",\n },\n {\n value: "long",\n label:\n "Frankfurt(Main)Hbf - Berlin Hauptbahnhof (tief) via Erfurt Hbf und Halle (Saale) Hbf",\n id: "qc908rx2z",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="Auto"\n formFieldWidth="full"\n dropdownWidth="auto"\n listLabel="id-10228-Auto"\n options={[\n {\n value: "1",\n id: "2smv303zl",\n },\n {\n value: "2",\n id: "dstvsee1m",\n },\n {\n value: "3",\n id: "dstvsee2m",\n },\n {\n value: "4",\n id: "dstvsee3m",\n },\n {\n value: "5",\n id: "dstvsee4m",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="Full"\n formFieldWidth="full"\n dropdownWidth="full"\n listLabel="id-10229-Full"\n options={[\n {\n value: "1",\n id: "8fb4evl87",\n },\n {\n value: "2",\n id: "0iiu59zbg",\n },\n {\n value: "3",\n id: "0iiu69zbg",\n },\n {\n value: "4",\n id: "0iiu79zbg",\n },\n {\n value: "5",\n id: "0iiu89zbg",\n },\n {\n value: "long",\n label:\n "Frankfurt(Main)Hbf - Berlin Hauptbahnhof (tief) via Erfurt Hbf und Halle (Saale) Hbf",\n id: "0iiu99zbg",\n },\n ]}\n />\n </div>\n <i className="line-break" data-sb-ignore="true" />\n <DBInfotext data-sb-ignore="true" size="small" semantic="informational">\n Form Field Width: Auto\n </DBInfotext>\n <i className="line-break" data-sb-ignore="true" />\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="(Default) Fixed"\n formFieldWidth="auto"\n dropdownWidth="fixed"\n listLabel="id-10233-(Default) Fixed"\n options={[\n {\n value: "Option 1",\n id: "gniy079gw",\n },\n {\n value: "Option 2",\n id: "kr0v4jgxl",\n },\n {\n value: "Option 3",\n id: "kr0v3jgxl",\n },\n {\n value: "Option 4",\n id: "kr0v2jgxl",\n },\n {\n value: "Option 5",\n id: "kr0v1jgxl",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="Auto"\n formFieldWidth="auto"\n dropdownWidth="auto"\n listLabel="id-10234-Auto"\n options={[\n {\n value: "1",\n id: "mmc6lfzsy",\n },\n {\n value: "2",\n id: "wr6elxyf4",\n },\n {\n value: "3",\n id: "wr6elxyf5",\n },\n {\n value: "4",\n id: "wr6elxyf6",\n },\n {\n value: "5",\n id: "wr6elxyf7",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="Full"\n formFieldWidth="auto"\n dropdownWidth="full"\n listLabel="id-10235-Full"\n options={[\n {\n value: "1",\n id: "q0iyxp9kq",\n },\n {\n value: "2",\n id: "mzo80txs4",\n },\n {\n value: "3",\n id: "mzo80txs5",\n },\n {\n value: "4",\n id: "mzo80txs6",\n },\n {\n value: "5",\n id: "mzo80txs7",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectDropdownWidth;\n', "example-other-configuration.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\nimport type { CustomSelectOptionType } from "../model";\n\nfunction CustomSelectExampleOtherConfiguration(props: any) {\n function getTransformSelectedLabels(selectedOptions?: any) {\n return selectedOptions.map((option: any) => option.value.at(-1)).join(", ");\n }\n\n function getSearchFilter(option: CustomSelectOptionType) {\n return option.value === "Option 1";\n }\n\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n searchValue="1"\n searchLabel="Search"\n label="Search Value"\n listLabel="id-10as4-Search Value"\n options={[\n {\n value: "Option 1",\n id: "09nursdao",\n },\n {\n value: "Option 2",\n id: "74n9csdc14",\n },\n {\n value: "Option 3",\n id: "64n9csdc14",\n },\n {\n value: "Option 4",\n id: "54n9csdc14",\n },\n {\n value: "Option 5",\n id: "44n9csdc14",\n },\n ]}\n showSearch\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectedLabels="Selected: Label controlled"\n label="Custom Selected Label"\n listLabel="id-10aasds4-Custom Selected Label"\n options={[\n {\n value: "Option 1",\n id: "09nurdscsdao",\n },\n {\n value: "Option 2",\n id: "74n9ccsddc14",\n },\n {\n value: "Option 3",\n id: "73n9ccsddc14",\n },\n {\n value: "Option 4",\n id: "72n9ccsddc14",\n },\n {\n value: "Option 5",\n id: "71n9ccsddc14",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="Transform Selected Label"\n listLabel="id-10aasds4-Transform Selected Label"\n options={[\n {\n value: "Option 1",\n id: "09nurdscsdao",\n },\n {\n value: "Option 2",\n id: "74n9ccsddc14",\n },\n {\n value: "Option 3",\n id: "73n9ccsddc14",\n },\n {\n value: "Option 4",\n id: "72n9ccsddc14",\n },\n {\n value: "Option 5",\n id: "71n9ccsddc14",\n },\n ]}\n {...{\n transformSelectedLabels: (selectedOptions: any) =>\n // @ts-ignore\n getTransformSelectedLabels(selectedOptions),\n }}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="Custom Search Filter"\n listLabel="id-10aasds4-Custom Search Filter"\n options={[\n {\n value: "Option 1",\n id: "09nurdscsdao",\n },\n {\n value: "Option 2",\n id: "74n9ccsddc14",\n },\n {\n value: "Option 3",\n id: "73n9ccsddc14",\n },\n {\n value: "Option 4",\n id: "72n9ccsddc14",\n },\n {\n value: "Option 5",\n id: "71n9ccsddc14",\n },\n ]}\n {...{\n searchFilter: (option: any) =>\n // @ts-ignore\n getSearchFilter(option),\n }}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectExampleOtherConfiguration;\n', "example-tags.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectExampletags(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectedType="tag"\n label="Tag grow"\n listLabel="id-10271-Tag grow"\n options={[\n {\n value: "Option 1",\n id: "53xbfd1o6",\n },\n {\n value: "Option 2",\n id: "fq8ypeiz2",\n },\n {\n value: "Option 3",\n id: "jtd3wevz2",\n },\n {\n value: "Option 4",\n id: "srr1toi8f",\n },\n {\n value: "Option 5",\n id: "srr1toi7f",\n },\n ]}\n multiple\n removeTagsTexts={[\n "Remove Option entry 1",\n "Remove Option entry 2",\n "Remove Option entry 3",\n "Remove Option entry 4",\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectedType="tag"\n formFieldWidth="auto"\n label="Tag grow + auto"\n listLabel="id-10272-Tag grow + auto"\n options={[\n {\n value: "Option 1",\n id: "jn3s5kl9t",\n },\n {\n value: "Option 2",\n id: "iesayujhy",\n },\n {\n value: "Option 3",\n id: "55kavoeem",\n },\n {\n value: "Option 4",\n id: "xi4qhrdg8",\n },\n {\n value: "Option 5",\n id: "xi4qhrdg7",\n },\n ]}\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectExampletags;\n', "examples-floating-label.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectExamplesFloatinglabel(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n variant="floating"\n label="Floating"\n listLabel="id-10300-Floating"\n options={[\n {\n value: "Option 1",\n id: "otbjunoyx",\n },\n {\n value: "Option 2",\n id: "ju53v02yg",\n },\n {\n value: "Option 3",\n id: "ju53v03yg",\n },\n {\n value: "Option 4",\n id: "ju53v04yg",\n },\n {\n value: "Option 5",\n id: "ju53v05yg",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n variant="floating"\n validation="invalid"\n invalidMessage="Invalid Message"\n label="Floating"\n listLabel="id-10301-Floating"\n options={[\n {\n value: "Option 1",\n id: "otbjunoyx",\n },\n {\n value: "Option 2",\n id: "ju53v02yg",\n },\n {\n value: "Option 3",\n id: "ju53v03yg",\n },\n {\n value: "Option 4",\n id: "ju53v04yg",\n },\n {\n value: "Option 5",\n id: "ju53v05yg",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectExamplesFloatinglabel;\n', "examples-multiple.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectExamplesMultiple(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Less than 6"\n listLabel="id-10266-Less than 6"\n options={[\n {\n value: "Option 1",\n id: "20twpdi3j",\n },\n {\n value: "Option 2",\n id: "0uwpufkvw",\n },\n {\n value: "Option 3",\n id: "xmvmr8dws",\n },\n {\n value: "Option 4",\n id: "yv5v4q9ew",\n },\n {\n value: "Option 5",\n id: "6bjfubtz4",\n },\n ]}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Option Group Title"\n listLabel="id-10267-Option Group Title"\n options={[\n {\n label: "Option group 1",\n isGroupTitle: true,\n id: "qcvwaejkk",\n },\n {\n value: "G1:Option 1",\n id: "jgnlzpm6q",\n },\n {\n value: "G1:Option 2",\n id: "n75b2qd9t",\n },\n {\n label: "Option group 2",\n isGroupTitle: true,\n id: "bcx8u0ke9",\n },\n {\n value: "G2:Option 1",\n id: "zgmc2tyn4",\n },\n {\n value: "G2:Option 2",\n id: "sw7l6jpoj",\n },\n ]}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Option Groups"\n listLabel="id-10268-Option Groups"\n options={[\n {\n value: "G1:Option 1",\n id: "y5iukyovr",\n },\n {\n value: "G1:Option 2",\n showDivider: true,\n id: "0ton8ii8v",\n },\n {\n value: "G2:Option 1",\n id: "9c4cgirv2",\n },\n {\n value: "G2:Option 2",\n showDivider: true,\n id: "740m4a61n",\n },\n ]}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n selectAllLabel="Select all"\n label="More than 6"\n listLabel="id-10269-More than 6"\n options={[\n {\n value: "Option 1",\n id: "3zjiay7k4",\n },\n {\n value: "Option 2",\n id: "s52x89xrz",\n },\n {\n value: "Option 3",\n id: "2u5nocjfo",\n },\n {\n value: "Option 4",\n id: "0ibok60su",\n },\n {\n value: "Option 5",\n id: "kdd8w27oh",\n },\n {\n value: "Option 6",\n id: "1qn5w4113",\n },\n {\n value: "Option 7",\n id: "eopg7tn9q",\n },\n ]}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectAllLabel="Select all"\n searchLabel="Search"\n searchPlaceholder="Search"\n placeholder="Placeholder"\n label="More than 10"\n listLabel="id-10270-More than 10"\n options={[\n {\n value: "Option 1",\n id: "wg5f7ycm8",\n },\n {\n value: "Option 2",\n id: "3viv9gxlp",\n },\n {\n value: "Option 3",\n id: "4wtnn5nwh",\n },\n {\n value: "Option 4",\n id: "r4amvgigg",\n },\n {\n value: "Option 5",\n id: "pcmqabmuy",\n },\n {\n value: "Option 6",\n id: "u8nify3n9",\n },\n {\n value: "Option 7",\n id: "rcmpselej",\n },\n {\n value: "Option 8",\n id: "ln43k984l",\n },\n {\n value: "Option 9",\n id: "j8squjd5i",\n },\n {\n value: "Option 10 very long item with may break into a new line",\n id: "b84ie8otk",\n },\n ]}\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectExamplesMultiple;\n', "examples-single.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectExamplesSingle(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Icons"\n listLabel="id-10260-Icons"\n options={[\n {\n value: "Option 1",\n icon: "x_placeholder",\n id: "fvdhawk3a",\n },\n {\n value: "Option 2",\n icon: "x_placeholder",\n id: "i0pey2syc",\n },\n {\n value: "Option 3",\n icon: "x_placeholder",\n id: "i0pey3syc",\n },\n {\n value: "Option 4",\n icon: "x_placeholder",\n id: "i0pey4syc",\n },\n {\n value: "Option 5",\n icon: "x_placeholder",\n id: "i0pey5syc",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Less than 6"\n listLabel="id-10261-Less than 6"\n options={[\n {\n value: "Option 1",\n id: "6zthubswi",\n },\n {\n value: "Option 2",\n id: "fh93iyp7w",\n },\n {\n value: "Option 3",\n id: "1cbtid79q",\n },\n {\n value: "Option 4",\n id: "5w9s57s9k",\n },\n {\n value: "Option 5",\n id: "ixclh8p8n",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Option Group Title"\n listLabel="id-10262-Option Group Title"\n options={[\n {\n label: "Option group 1",\n isGroupTitle: true,\n id: "f48zp673q",\n },\n {\n value: "G1:Option 1",\n id: "8291mu3qc",\n },\n {\n value: "G1:Option 2",\n id: "4duvelxc8",\n },\n {\n label: "Option group 2",\n isGroupTitle: true,\n id: "g4ti9lrc7",\n },\n {\n value: "G2:Option 1",\n id: "gqhv3u61k",\n },\n {\n value: "G2:Option 2",\n id: "8yx3v6yii",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="Option Groups"\n listLabel="id-10263-Option Groups"\n options={[\n {\n value: "G1:Option 1",\n id: "q4h9435ye",\n },\n {\n value: "G1:Option 2",\n showDivider: true,\n id: "7tzwcbeln",\n },\n {\n value: "G2:Option 1",\n id: "zjmir6142",\n },\n {\n value: "G2:Option 2",\n showDivider: true,\n id: "hwqps1347",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n label="More than 6"\n listLabel="id-10264-More than 6"\n options={[\n {\n value: "Option 1",\n id: "ghsxrti0t",\n },\n {\n value: "Option 2",\n id: "5hj8rz3h6",\n },\n {\n value: "Option 3",\n id: "kvyjps1ai",\n },\n {\n value: "Option 4",\n id: "31ncem9lt",\n },\n {\n value: "Option 5",\n id: "0fwgqufql",\n },\n {\n value: "Option 6",\n id: "okz955pi7",\n },\n {\n value: "Option 7",\n id: "ihbjcr0lo",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n placeholder="Placeholder"\n searchLabel="Search"\n label="More than 10"\n listLabel="id-10265-More than 10"\n options={[\n {\n value: "Option 1",\n id: "o9docf7sw",\n },\n {\n value: "Option 2",\n id: "ttwfqxw26",\n },\n {\n value: "Option 3",\n id: "0c5sgzfag",\n },\n {\n value: "Option 4",\n id: "c8knaskj6",\n },\n {\n value: "Option 5",\n id: "2z5uhqdmr",\n },\n {\n value: "Option 6",\n id: "y2tlf2fnf",\n },\n {\n value: "Option 7",\n id: "q9hdifmw7",\n },\n {\n value: "Option 8",\n id: "vqz28zphb",\n },\n {\n value: "Option 9",\n id: "j2amckmwh",\n },\n {\n value: "Option 10",\n id: "zdi31d2lu",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectExamplesSingle;\n', "form-field-width.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectFormFieldWidth(props: any) {\n return (\n <>\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="(Default) Full"\n formFieldWidth="full"\n listLabel="id-10223-(Default) Full"\n options={[\n {\n value: "Option 1",\n id: "z0ispy7ls",\n },\n {\n value: "Option 2",\n id: "ngl1p4pxn",\n },\n {\n value: "Option 3",\n id: "ngl1p3pxn",\n },\n {\n value: "Option 4",\n id: "ngl1p2pxn",\n },\n {\n value: "Option 5",\n id: "ngl1p1pxn",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <DBCustomSelect\n label="Auto"\n formFieldWidth="auto"\n listLabel="id-10224-Auto"\n options={[\n {\n value: "Option 1",\n id: "klxyvobwn",\n },\n {\n value: "Option 2",\n id: "7oag2a4fj",\n },\n {\n value: "Option 3",\n id: "7oag2a3fj",\n },\n {\n value: "Option 4",\n id: "7oag2a2fj",\n },\n {\n value: "Option 5",\n id: "7oag2a1fj",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectFormFieldWidth;\n', "multiple.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectMultiple(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) False"\n listLabel="id-10209-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "ykzqfs8oa",\n },\n {\n value: "Option 2",\n id: "kcndx1xog",\n },\n {\n value: "Option 3",\n id: "kcndx2xog",\n },\n {\n value: "Option 4",\n id: "kcndx3xog",\n },\n {\n value: "Option 5",\n id: "kcndx4xog",\n },\n ]}\n multiple={false}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n searchLabel="Search"\n label="True"\n listLabel="id-10210-True"\n options={[\n {\n value: "Option 1",\n id: "34540enzm",\n },\n {\n value: "Option 2",\n id: "3a4ml34c8",\n },\n {\n value: "Option 3",\n id: "3a4ml34c7",\n },\n {\n value: "Option 4",\n id: "3a4ml34c6",\n },\n {\n value: "Option 5",\n id: "3a4ml34c5",\n },\n ]}\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectMultiple;\n', "placement.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectPlacement(props: any) {\n return (\n <>\n <DBInfotext data-sb-ignore="true" size="small" semantic="informational">\n Form Field Width: Full\n </DBInfotext>\n <i className="line-break" data-sb-ignore="true" />\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) Bottom"\n formFieldWidth="full"\n placement="bottom"\n listLabel="id-10238-(Default) Bottom"\n options={[\n {\n value: "Option 1",\n id: "aryeycu23",\n },\n {\n value: "Option 2",\n id: "qrf3x6gdq",\n },\n {\n value: "Option 3",\n id: "qrf4x6gdq",\n },\n {\n value: "Option 4",\n id: "qrf5x6gdq",\n },\n {\n value: "Option 5",\n id: "qrf6x6gdq",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="Top"\n formFieldWidth="full"\n placement="top"\n listLabel="id-10239-Top"\n options={[\n {\n value: "Option 1",\n id: "mmfg4zco7",\n },\n {\n value: "Option 2",\n id: "52zkxb05u",\n },\n {\n value: "Option 3",\n id: "52zkxb04u",\n },\n {\n value: "Option 4",\n id: "52zkxb03u",\n },\n {\n value: "Option 5",\n id: "52zkxb02u",\n },\n ]}\n />\n </div>\n <i className="line-break" data-sb-ignore="true" />\n <DBInfotext data-sb-ignore="true" size="small" semantic="informational">\n Form Field Width: Auto\n </DBInfotext>\n <i className="line-break" data-sb-ignore="true" />\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) Bottom-Start"\n formFieldWidth="auto"\n placement="bottom-start"\n listLabel="id-10243-(Default) Bottom-Start"\n options={[\n {\n value: "Option 1",\n id: "fhczoz28b",\n },\n {\n value: "Option 2",\n id: "k8zcxfb4x",\n },\n {\n value: "Option 3",\n id: "k8zcxfb3x",\n },\n {\n value: "Option 4",\n id: "k8zcxfb2x",\n },\n {\n value: "Option 5",\n id: "k8zcxfb1x",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="Bottom-End"\n formFieldWidth="auto"\n placement="bottom-end"\n listLabel="id-10244-Bottom-End"\n options={[\n {\n value: "Option 1",\n id: "ukchupevr",\n },\n {\n value: "Option 2",\n id: "ts0jwdqxj",\n },\n {\n value: "Option 3",\n id: "ts1jwdqxj",\n },\n {\n value: "Option 4",\n id: "ts2jwdqxj",\n },\n {\n value: "Option 5",\n id: "ts3jwdqxj",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="Top-Start"\n formFieldWidth="auto"\n placement="top-start"\n listLabel="id-10245-Top-Start"\n options={[\n {\n value: "Option 1",\n id: "zhuaneo1w",\n },\n {\n value: "Option 2",\n id: "5mwz7pmcr",\n },\n {\n value: "Option 3",\n id: "4mwz7pmcr",\n },\n {\n value: "Option 4",\n id: "3mwz7pmcr",\n },\n {\n value: "Option 5",\n id: "2mwz7pmcr",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="Top-End"\n formFieldWidth="auto"\n placement="top-end"\n listLabel="id-10246-Top-End"\n options={[\n {\n value: "Option 1",\n id: "6uq8tv3e8",\n },\n {\n value: "Option 2",\n id: "iz30t1pce",\n },\n {\n value: "Option 3",\n id: "iz40t1pce",\n },\n {\n value: "Option 4",\n id: "iz50t1pce",\n },\n {\n value: "Option 5",\n id: "iz60t1pce",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectPlacement;\n', "required.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectRequired(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) False"\n listLabel="id-10219-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "drpx8im88",\n },\n {\n value: "Option 2",\n id: "211e6zox5",\n },\n {\n value: "Option 3",\n id: "211e6zox4",\n },\n {\n value: "Option 4",\n id: "211e6zox3",\n },\n {\n value: "Option 5",\n id: "211e6zox2",\n },\n ]}\n multiple\n required={false}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="True"\n listLabel="id-10220-True"\n options={[\n {\n value: "Option 1",\n id: "2v0zw8afc",\n },\n {\n value: "Option 2",\n id: "308308w5z",\n },\n {\n value: "Option 3",\n id: "308308w4z",\n },\n {\n value: "Option 4",\n id: "308308w3z",\n },\n {\n value: "Option 5",\n id: "308308w2z",\n },\n ]}\n required\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectRequired;\n', "selected-type.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectSelectedtype(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) Text"\n listLabel="id-10247-(Default) Text"\n options={[\n {\n value: "Option 1",\n id: "d9n3d2z13",\n },\n {\n value: "Option 2",\n id: "vq1c6xw05",\n },\n {\n value: "Option 3",\n id: "73eppj8rp",\n },\n {\n value: "Option 4",\n id: "yy82mda4v",\n },\n {\n value: "Option 5",\n id: "yy82mda5v",\n },\n ]}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectedType="amount"\n label="Amount"\n listLabel="id-10248-Amount"\n options={[\n {\n value: "Option 1",\n id: "la3wbcr7z",\n },\n {\n value: "Option 2",\n id: "wz2u3a4q1",\n },\n {\n value: "Option 3",\n id: "fcd4tiqlr",\n },\n {\n value: "Option 4",\n id: "riz9ea0ox",\n },\n {\n value: "Option 5",\n id: "riz9ea1ox",\n },\n ]}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectedType="tag"\n label="Tag"\n listLabel="id-10249-Tag"\n options={[\n {\n value: "Option 1",\n id: "q23x2uflo",\n },\n {\n value: "Option 2",\n id: "au07iy2il",\n },\n {\n value: "Option 3",\n id: "ig0l3rruj",\n },\n {\n value: "Option 4",\n id: "4m2gbzu2q",\n },\n {\n value: "Option 5",\n id: "4m2gbzu3q",\n },\n ]}\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectSelectedtype;\n', "show-clear-selection.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowClearSelection(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) True"\n listLabel="id-10258-(Default) True"\n options={[\n {\n value: "Option 1",\n id: "9zfvu9noy",\n },\n {\n value: "Option 2",\n id: "cox90a0q8",\n },\n {\n value: "Option 3",\n id: "cox80a0q8",\n },\n {\n value: "Option 4",\n id: "cox70a0q8",\n },\n {\n value: "Option 5",\n id: "cox60a0q8",\n },\n ]}\n showClearSelection\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="False"\n listLabel="id-10259-False"\n options={[\n {\n value: "Option 1",\n id: "ln9ms4fjy",\n },\n {\n value: "Option 2",\n id: "dta90rteq",\n },\n {\n value: "Option 3",\n id: "dta80rteq",\n },\n {\n value: "Option 4",\n id: "dta70rteq",\n },\n {\n value: "Option 5",\n id: "dta60rteq",\n },\n ]}\n showClearSelection={false}\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowClearSelection;\n', "show-icon.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowIcon(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n icon="x_placeholder"\n label="(Default) False"\n listLabel="id-10217-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "637sjglg5",\n },\n {\n value: "Option 2",\n id: "s529jnpj0",\n },\n {\n value: "Option 3",\n id: "s429jnpj0",\n },\n {\n value: "Option 4",\n id: "s329jnpj0",\n },\n {\n value: "Option 5",\n id: "s229jnpj0",\n },\n ]}\n showIcon={false}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n icon="x_placeholder"\n label="True"\n listLabel="id-10218-True"\n options={[\n {\n value: "Option 1",\n id: "0b998bbgw",\n },\n {\n value: "Option 2",\n id: "a37n10lfh",\n },\n {\n value: "Option 3",\n id: "a47n10lfh",\n },\n {\n value: "Option 4",\n id: "a57n10lfh",\n },\n {\n value: "Option 5",\n id: "a67n10lfh",\n },\n ]}\n showIcon\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowIcon;\n', "show-label.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowLabel(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) True"\n listLabel="id-10213-(Default) True"\n options={[\n {\n value: "Option 1",\n id: "09a47p13k",\n },\n {\n value: "Option 2",\n id: "ya0ahf4od",\n },\n {\n value: "Option 3",\n id: "ya0ahf3od",\n },\n {\n value: "Option 4",\n id: "ya0ahf2od",\n },\n {\n value: "Option 5",\n id: "ya0ahf1od",\n },\n ]}\n showLabel\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="False"\n listLabel="id-10214-False"\n options={[\n {\n value: "Option 1",\n id: "h8apm2qse",\n },\n {\n value: "Option 2",\n id: "vop8vkb8q",\n },\n {\n value: "Option 3",\n id: "vop8vkb7q",\n },\n {\n value: "Option 4",\n id: "vop8vkb6q",\n },\n {\n value: "Option 5",\n id: "vop8vkb5q",\n },\n ]}\n showLabel={false}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowLabel;\n', "show-loading.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowLoading(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n loadingText="Loading"\n label="(Default) False"\n listLabel="id-10252-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "glkscvbn5",\n },\n {\n value: "Option 2",\n id: "13cmgddkr",\n },\n {\n value: "Option 3",\n id: "14cmgddkr",\n },\n {\n value: "Option 4",\n id: "15cmgddkr",\n },\n {\n value: "Option 5",\n id: "16cmgddkr",\n },\n ]}\n showLoading={false}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n loadingText="Loading"\n label="True"\n listLabel="id-10253-True"\n options={[\n {\n value: "Option 1",\n id: "e6wvfkv27",\n },\n {\n value: "Option 2",\n id: "afg1mqolj",\n },\n {\n value: "Option 3",\n id: "afg2mqolj",\n },\n {\n value: "Option 4",\n id: "afg3mqolj",\n },\n {\n value: "Option 5",\n id: "afg4mqolj",\n },\n ]}\n showLoading\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowLoading;\n', "show-message.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowMessage(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n message="Helper Message"\n label="(Default) False"\n listLabel="id-10215-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "m88qjifb3",\n },\n {\n value: "Option 2",\n id: "4et40d885",\n },\n {\n value: "Option 3",\n id: "4et40d884",\n },\n {\n value: "Option 4",\n id: "4et40d883",\n },\n {\n value: "Option 5",\n id: "4et40d882",\n },\n ]}\n showMessage={false}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n message="Helper Message"\n label="True"\n listLabel="id-10216-True"\n options={[\n {\n value: "Option 1",\n id: "tm65in30k",\n },\n {\n value: "Option 2",\n id: "hujnrn5vk",\n },\n {\n value: "Option 3",\n id: "hujnrn4vk",\n },\n {\n value: "Option 4",\n id: "hujnrn3vk",\n },\n {\n value: "Option 5",\n id: "hujnrn2vk",\n },\n ]}\n showMessage\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowMessage;\n', "show-no-result.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowNoResult(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n noResultsText="Nothing found"\n label="(Default) False"\n listLabel="id-10250-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "wc5wcgjam",\n },\n {\n value: "Option 2",\n id: "lx4cydggt",\n },\n {\n value: "Option 3",\n id: "lx3cydggt",\n },\n {\n value: "Option 4",\n id: "lx2cydggt",\n },\n {\n value: "Option 5",\n id: "lx1cydggt",\n },\n ]}\n showNoResults={false}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n noResultsText="Nothing found"\n label="True"\n listLabel="id-10251-True"\n options={[\n {\n value: "Option 1",\n id: "waa0gfjab",\n },\n {\n value: "Option 2",\n id: "v48umf0qp",\n },\n {\n value: "Option 3",\n id: "v58umf0qp",\n },\n {\n value: "Option 4",\n id: "v68umf0qp",\n },\n {\n value: "Option 5",\n id: "v78umf0qp",\n },\n ]}\n showNoResults\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowNoResult;\n', "show-required-asterisk.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowRequiredAsterisk(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) True"\n listLabel="id-1021s9-(Default) True"\n options={[\n {\n value: "Option 1",\n id: "drpxs8im88",\n },\n {\n value: "Option 2",\n id: "211ed6zox5",\n },\n {\n value: "Option 3",\n id: "211ed6zox4",\n },\n {\n value: "Option 4",\n id: "211ed6zox3",\n },\n {\n value: "Option 5",\n id: "211ed6zox2",\n },\n ]}\n multiple\n required\n showRequiredAsterisk\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="False"\n listLabel="id-10s220-False"\n options={[\n {\n value: "Option 1",\n id: "2v0zfw8afc",\n },\n {\n value: "Option 2",\n id: "30830f8w5z",\n },\n {\n value: "Option 3",\n id: "30830f8w4z",\n },\n {\n value: "Option 4",\n id: "30830f8w3z",\n },\n {\n value: "Option 5",\n id: "30830f8w2z",\n },\n ]}\n required\n showRequiredAsterisk={false}\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowRequiredAsterisk;\n', "show-search.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowSearch(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) False"\n selectAllLabel="Select all"\n searchLabel="Search"\n listLabel="id-10254-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "09nure8co",\n },\n {\n value: "Option 2",\n id: "74n91hp14",\n },\n {\n value: "Option 3",\n id: "74n91hp15",\n },\n {\n value: "Option 4",\n id: "74n91hp16",\n },\n {\n value: "Option 5",\n id: "74n91hp17",\n },\n {\n value: "Option 6",\n id: "74n91hp18",\n },\n {\n value: "Option 7",\n id: "74n91hp19",\n },\n {\n value: "Option 8",\n id: "74n91hp24",\n },\n {\n value: "Option 9",\n id: "74n91hp34",\n },\n {\n value: "Option 10",\n id: "74n91hp44",\n },\n ]}\n showSearch={false}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectAllLabel="Select all"\n searchLabel="Search"\n label="True"\n listLabel="id-10255-True"\n options={[\n {\n value: "Option 1",\n id: "ktmbve0k2",\n },\n {\n value: "Option 2",\n id: "uf9wakkc1",\n },\n {\n value: "Option 3",\n id: "uf9wakkc2",\n },\n {\n value: "Option 4",\n id: "uf9wakkc3",\n },\n {\n value: "Option 5",\n id: "uf9wakkc4",\n },\n ]}\n showSearch\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowSearch;\n', "show-select-all.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectShowSelectAll(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectAllLabel="Select all"\n label="(Default) False"\n listLabel="id-10256-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "p6l2dpiea",\n },\n {\n value: "Option 2",\n id: "jh7pczno4",\n },\n {\n value: "Option 3",\n id: "jh7pczno5",\n },\n {\n value: "Option 4",\n id: "jh7pczno6",\n },\n {\n value: "Option 5",\n id: "jh7pczno7",\n },\n {\n value: "Option 6",\n id: "jh7pczno8",\n },\n ]}\n showSelectAll={false}\n multiple\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n selectAllLabel="Select all"\n label="True"\n listLabel="id-10257-True"\n options={[\n {\n value: "Option 1",\n id: "zcim85pqg",\n },\n {\n value: "Option 2",\n id: "kg6gvbwru",\n },\n {\n value: "Option 3",\n id: "kg5gvbwru",\n },\n {\n value: "Option 4",\n id: "kg4gvbwru",\n },\n {\n value: "Option 5",\n id: "kg3gvbwru",\n },\n ]}\n showSelectAll\n multiple\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectShowSelectAll;\n', "validation.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectValidation(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n validation="no-validation"\n label="(Default) No Validation"\n listLabel="id-102061-(Default) No Validation"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil5",\n },\n {\n value: "Option 3",\n id: "10dqnhil4",\n },\n {\n value: "Option 4",\n id: "10dqnhil3",\n },\n {\n value: "Option 5",\n id: "10dqnhil2",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n validation="invalid"\n invalidMessage="Invalid Message"\n label="Invalid"\n listLabel="id-102062-Invalid"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil5",\n },\n {\n value: "Option 3",\n id: "10dqnhil4",\n },\n {\n value: "Option 4",\n id: "10dqnhil3",\n },\n {\n value: "Option 5",\n id: "10dqnhil2",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n validation="valid"\n invalidMessage="Valid Message"\n label="Valid"\n listLabel="id-102063-Valid"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil5",\n },\n {\n value: "Option 3",\n id: "10dqnhil4",\n },\n {\n value: "Option 4",\n id: "10dqnhil3",\n },\n {\n value: "Option 5",\n id: "10dqnhil2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectValidation;\n', "variant.example.tsx": 'import * as React from "react";\nimport DBCustomSelect from "../custom-select";\n\nfunction CustomSelectVariant(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n label="(Default) Above"\n listLabel="id-10211-(Default) Above"\n options={[\n {\n value: "Option 1",\n id: "4lj8zr5b1",\n },\n {\n value: "Option 2",\n id: "uurfm7y2y",\n },\n {\n value: "Option 3",\n id: "uurfm7y3y",\n },\n {\n value: "Option 4",\n id: "uurfm7y4y",\n },\n {\n value: "Option 5",\n id: "uurfm7y5y",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBCustomSelect\n variant="floating"\n label="Floating"\n listLabel="id-10212-Floating"\n options={[\n {\n value: "Option 1",\n id: "otbjunoyx",\n },\n {\n value: "Option 2",\n id: "ju53v02yg",\n },\n {\n value: "Option 3",\n id: "ju53v03yg",\n },\n {\n value: "Option 4",\n id: "ju53v04yg",\n },\n {\n value: "Option 5",\n id: "ju53v05yg",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default CustomSelectVariant;\n' }, angular: { "density.example.ts": `import {
23308
23308
  Component,
23309
23309
  viewChild,
23310
23310
  ElementRef,
@@ -23598,6 +23598,218 @@ export class CustomSelectDisabled implements AfterViewInit {
23598
23598
  this.enableAttributePassing(element, "custom-select-disabled");
23599
23599
  }
23600
23600
  }
23601
+ `, "dropdown-width-auto.example.ts": `import {
23602
+ Component,
23603
+ viewChild,
23604
+ ElementRef,
23605
+ effect,
23606
+ VERSION,
23607
+ AfterViewInit,
23608
+ } from "@angular/core";
23609
+ import { CommonModule } from "@angular/common";
23610
+
23611
+ import { DBInfotext } from "../../infotext/infotext";
23612
+ import { DBCustomSelect } from "../custom-select";
23613
+
23614
+ @Component({
23615
+ selector: "custom-select-dropdown-width-auto",
23616
+ standalone: true,
23617
+ imports: [CommonModule, DBInfotext, DBCustomSelect],
23618
+ template: \`<ng-container
23619
+ ><db-infotext data-sb-ignore="true" size="small" semantic="informational">
23620
+ Long option text with dropdownWidth=&quot;auto&quot; \u2014 the dropdown grows
23621
+ to the longest option and the text stays on a single line (no wrapping, no
23622
+ truncation)
23623
+ </db-infotext>
23624
+ <i class="line-break" data-sb-ignore="true"></i>
23625
+ <div
23626
+ [ngStyle]="{
23627
+ width: '300px'
23628
+ }"
23629
+ >
23630
+ <db-custom-select
23631
+ label="Auto: Long Options"
23632
+ formFieldWidth="full"
23633
+ dropdownWidth="auto"
23634
+ listLabel="auto-long-options"
23635
+ [options]="[{
23636
+ value: 'long-1',
23637
+ label: 'Dieser extrem lange Optionstext bleibt im Auto-Modus in einer Zeile und das Dropdown waechst mit',
23638
+ id: 'auto-long-1'
23639
+ }, {
23640
+ value: 'long-2',
23641
+ label: 'Ein weiterer viel zu langer Text der die Dropdown-Breite im Auto-Modus bestimmt',
23642
+ id: 'auto-long-2'
23643
+ }, {
23644
+ value: 'long-3',
23645
+ label: 'Kurz',
23646
+ id: 'auto-long-3'
23647
+ }, {
23648
+ value: 'long-4',
23649
+ label: 'Frankfurt(Main)Hbf - Berlin Hauptbahnhof (tief) via Erfurt Hbf',
23650
+ id: 'auto-long-4'
23651
+ }, {
23652
+ value: 'long-5',
23653
+ label: 'Muenchen Hbf Gleis 15 Abfahrt Richtung Stuttgart mit Umstieg in Augsburg',
23654
+ id: 'auto-long-5'
23655
+ }]"
23656
+ ></db-custom-select>
23657
+ </div>
23658
+ <i class="line-break" data-sb-ignore="true"></i>
23659
+ <db-infotext data-sb-ignore="true" size="small" semantic="informational">
23660
+ Wide trigger (400px) with short options and dropdownWidth=&quot;auto&quot;
23661
+ \u2014 dropdown should be at least as wide as the trigger
23662
+ </db-infotext>
23663
+ <i class="line-break" data-sb-ignore="true"></i>
23664
+ <div
23665
+ [ngStyle]="{
23666
+ width: '400px'
23667
+ }"
23668
+ >
23669
+ <db-custom-select
23670
+ label="Auto: Wide Trigger, Short Options"
23671
+ formFieldWidth="full"
23672
+ dropdownWidth="auto"
23673
+ listLabel="auto-wide-trigger-short-options"
23674
+ [options]="[{
23675
+ value: 'A',
23676
+ id: 'auto-short-1'
23677
+ }, {
23678
+ value: 'B',
23679
+ id: 'auto-short-2'
23680
+ }, {
23681
+ value: 'C',
23682
+ id: 'auto-short-3'
23683
+ }]"
23684
+ ></db-custom-select>
23685
+ </div>
23686
+ <i class="line-break" data-sb-ignore="true"></i>
23687
+ <db-infotext data-sb-ignore="true" size="small" semantic="informational">
23688
+ Narrow trigger (150px) with long options and
23689
+ dropdownWidth=&quot;auto&quot; \u2014 dropdown should grow to fit content but
23690
+ not exceed viewport
23691
+ </db-infotext>
23692
+ <i class="line-break" data-sb-ignore="true"></i>
23693
+ <div
23694
+ [ngStyle]="{
23695
+ width: '150px'
23696
+ }"
23697
+ >
23698
+ <db-custom-select
23699
+ label="Auto: Narrow Trigger"
23700
+ formFieldWidth="full"
23701
+ dropdownWidth="auto"
23702
+ listLabel="auto-narrow-trigger-long-options"
23703
+ [options]="[{
23704
+ value: 'narrow-long-1',
23705
+ label: 'Frankfurt(Main)Hbf nach Berlin Hbf',
23706
+ id: 'auto-narrow-long-1'
23707
+ }, {
23708
+ value: 'narrow-long-2',
23709
+ label: 'Hamburg-Altona via Hannover Hbf',
23710
+ id: 'auto-narrow-long-2'
23711
+ }, {
23712
+ value: 'narrow-long-3',
23713
+ label: 'Koeln Messe/Deutz (tief)',
23714
+ id: 'auto-narrow-long-3'
23715
+ }]"
23716
+ ></db-custom-select>
23717
+ </div>
23718
+ <i class="line-break" data-sb-ignore="true"></i>
23719
+ <db-infotext data-sb-ignore="true" size="small" semantic="informational">
23720
+ Mixed option lengths with dropdownWidth=&quot;auto&quot; \u2014 dropdown width
23721
+ should accommodate the longest option
23722
+ </db-infotext>
23723
+ <i class="line-break" data-sb-ignore="true"></i>
23724
+ <div
23725
+ [ngStyle]="{
23726
+ width: '250px'
23727
+ }"
23728
+ >
23729
+ <db-custom-select
23730
+ label="Auto: Mixed Lengths"
23731
+ formFieldWidth="full"
23732
+ dropdownWidth="auto"
23733
+ listLabel="auto-mixed-lengths"
23734
+ [options]="[{
23735
+ value: 'mix-1',
23736
+ label: 'OK',
23737
+ id: 'auto-mix-1'
23738
+ }, {
23739
+ value: 'mix-2',
23740
+ label: 'Mittellanger Optionstext hier',
23741
+ id: 'auto-mix-2'
23742
+ }, {
23743
+ value: 'mix-3',
23744
+ label: 'Dieser Optionstext ist deutlich laenger als alle anderen und sollte die Breite bestimmen',
23745
+ id: 'auto-mix-3'
23746
+ }, {
23747
+ value: 'mix-4',
23748
+ label: 'Kurz',
23749
+ id: 'auto-mix-4'
23750
+ }]"
23751
+ ></db-custom-select></div
23752
+ ></ng-container> \`,
23753
+ styles: \`:host { display: contents; }\`,
23754
+ })
23755
+ export class CustomSelectDropdownWidthAuto implements AfterViewInit {
23756
+ _ref = viewChild<ElementRef>("_ref");
23757
+
23758
+ constructor() {}
23759
+
23760
+ /**
23761
+ * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
23762
+ * @param element the ref for the component
23763
+ * @param customElementSelector the custom element like \`my-component\`
23764
+ */
23765
+ private enableAttributePassing(
23766
+ element: HTMLElement | null,
23767
+ customElementSelector: string
23768
+ ) {
23769
+ const parent = element?.closest(customElementSelector);
23770
+ if (element && parent) {
23771
+ const attributes = parent.attributes;
23772
+ for (let i = 0; i < attributes.length; i++) {
23773
+ const attr = attributes.item(i);
23774
+ if (
23775
+ attr && attr.name !== 'data-density' &&
23776
+ (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))
23777
+ ) {
23778
+ if (attr.value) {
23779
+ element.setAttribute(attr.name, attr.value);
23780
+ } else {
23781
+ element.removeAttribute(attr.name);
23782
+ }
23783
+ parent.removeAttribute(attr.name);
23784
+ }
23785
+ else if (attr && ["style"].includes(attr.name)) {
23786
+ element.setAttribute(attr.name, attr.value);
23787
+ parent.removeAttribute(attr.name);
23788
+ }
23789
+ else if (attr && attr.name === "class") {
23790
+ const isWebComponent = attr.value.includes("hydrated");
23791
+ const value = attr.value.replace("hydrated", "").trim();
23792
+ const currentClass = element.getAttribute("class");
23793
+ element.setAttribute(
23794
+ attr.name,
23795
+ \`\${currentClass ? currentClass : ""}\${value ? \` \${value}\`: ""}\`
23796
+ );
23797
+ if (isWebComponent) {
23798
+ // Stencil is using this class for lazy loading component
23799
+ parent.setAttribute("class", "hydrated");
23800
+ } else {
23801
+ parent.removeAttribute(attr.name);
23802
+ }
23803
+ }
23804
+ }
23805
+ }
23806
+ }
23807
+
23808
+ ngAfterViewInit() {
23809
+ const element: HTMLElement | null = this._ref()?.nativeElement;
23810
+ this.enableAttributePassing(element, "custom-select-dropdown-width-auto");
23811
+ }
23812
+ }
23601
23813
  `, "dropdown-width.example.ts": `import {
23602
23814
  Component,
23603
23815
  viewChild,
@@ -23645,6 +23857,10 @@ import { DBCustomSelect } from "../custom-select";
23645
23857
  }, {
23646
23858
  value: 'Option 5',
23647
23859
  id: 'qc908rx3z'
23860
+ }, {
23861
+ value: 'long',
23862
+ label: 'Frankfurt(Main)Hbf - Berlin Hauptbahnhof (tief) via Erfurt Hbf und Halle (Saale) Hbf',
23863
+ id: 'qc908rx2z'
23648
23864
  }]"
23649
23865
  ></db-custom-select>
23650
23866
  </div>
@@ -23701,6 +23917,10 @@ import { DBCustomSelect } from "../custom-select";
23701
23917
  }, {
23702
23918
  value: '5',
23703
23919
  id: '0iiu89zbg'
23920
+ }, {
23921
+ value: 'long',
23922
+ label: 'Frankfurt(Main)Hbf - Berlin Hauptbahnhof (tief) via Erfurt Hbf und Halle (Saale) Hbf',
23923
+ id: '0iiu99zbg'
23704
23924
  }]"
23705
23925
  ></db-custom-select>
23706
23926
  </div>
@@ -27346,6 +27566,169 @@ import DBCustomSelect from "../custom-select.vue";
27346
27566
 
27347
27567
  <script setup lang="ts">
27348
27568
  import DBCustomSelect from "../custom-select.vue";
27569
+ </script>`, "dropdown-width-auto.example.vue": `<template>
27570
+ <DBInfotext data-sb-ignore="true" size="small" semantic="informational">
27571
+ Long option text with dropdownWidth=&quot;auto&quot; \u2014 the dropdown grows to
27572
+ the longest option and the text stays on a single line (no wrapping, no
27573
+ truncation)
27574
+ </DBInfotext>
27575
+ <i class="line-break" data-sb-ignore="true"></i>
27576
+ <div
27577
+ :style="{
27578
+ width: '300px',
27579
+ }"
27580
+ >
27581
+ <DBCustomSelect
27582
+ label="Auto: Long Options"
27583
+ formFieldWidth="full"
27584
+ dropdownWidth="auto"
27585
+ listLabel="auto-long-options"
27586
+ :options="[
27587
+ {
27588
+ value: 'long-1',
27589
+ label:
27590
+ 'Dieser extrem lange Optionstext bleibt im Auto-Modus in einer Zeile und das Dropdown waechst mit',
27591
+ id: 'auto-long-1',
27592
+ },
27593
+ {
27594
+ value: 'long-2',
27595
+ label:
27596
+ 'Ein weiterer viel zu langer Text der die Dropdown-Breite im Auto-Modus bestimmt',
27597
+ id: 'auto-long-2',
27598
+ },
27599
+ {
27600
+ value: 'long-3',
27601
+ label: 'Kurz',
27602
+ id: 'auto-long-3',
27603
+ },
27604
+ {
27605
+ value: 'long-4',
27606
+ label:
27607
+ 'Frankfurt(Main)Hbf - Berlin Hauptbahnhof (tief) via Erfurt Hbf',
27608
+ id: 'auto-long-4',
27609
+ },
27610
+ {
27611
+ value: 'long-5',
27612
+ label:
27613
+ 'Muenchen Hbf Gleis 15 Abfahrt Richtung Stuttgart mit Umstieg in Augsburg',
27614
+ id: 'auto-long-5',
27615
+ },
27616
+ ]"
27617
+ ></DBCustomSelect>
27618
+ </div>
27619
+ <i class="line-break" data-sb-ignore="true"></i>
27620
+ <DBInfotext data-sb-ignore="true" size="small" semantic="informational">
27621
+ Wide trigger (400px) with short options and dropdownWidth=&quot;auto&quot; \u2014
27622
+ dropdown should be at least as wide as the trigger
27623
+ </DBInfotext>
27624
+ <i class="line-break" data-sb-ignore="true"></i>
27625
+ <div
27626
+ :style="{
27627
+ width: '400px',
27628
+ }"
27629
+ >
27630
+ <DBCustomSelect
27631
+ label="Auto: Wide Trigger, Short Options"
27632
+ formFieldWidth="full"
27633
+ dropdownWidth="auto"
27634
+ listLabel="auto-wide-trigger-short-options"
27635
+ :options="[
27636
+ {
27637
+ value: 'A',
27638
+ id: 'auto-short-1',
27639
+ },
27640
+ {
27641
+ value: 'B',
27642
+ id: 'auto-short-2',
27643
+ },
27644
+ {
27645
+ value: 'C',
27646
+ id: 'auto-short-3',
27647
+ },
27648
+ ]"
27649
+ ></DBCustomSelect>
27650
+ </div>
27651
+ <i class="line-break" data-sb-ignore="true"></i>
27652
+ <DBInfotext data-sb-ignore="true" size="small" semantic="informational">
27653
+ Narrow trigger (150px) with long options and dropdownWidth=&quot;auto&quot;
27654
+ \u2014 dropdown should grow to fit content but not exceed viewport
27655
+ </DBInfotext>
27656
+ <i class="line-break" data-sb-ignore="true"></i>
27657
+ <div
27658
+ :style="{
27659
+ width: '150px',
27660
+ }"
27661
+ >
27662
+ <DBCustomSelect
27663
+ label="Auto: Narrow Trigger"
27664
+ formFieldWidth="full"
27665
+ dropdownWidth="auto"
27666
+ listLabel="auto-narrow-trigger-long-options"
27667
+ :options="[
27668
+ {
27669
+ value: 'narrow-long-1',
27670
+ label: 'Frankfurt(Main)Hbf nach Berlin Hbf',
27671
+ id: 'auto-narrow-long-1',
27672
+ },
27673
+ {
27674
+ value: 'narrow-long-2',
27675
+ label: 'Hamburg-Altona via Hannover Hbf',
27676
+ id: 'auto-narrow-long-2',
27677
+ },
27678
+ {
27679
+ value: 'narrow-long-3',
27680
+ label: 'Koeln Messe/Deutz (tief)',
27681
+ id: 'auto-narrow-long-3',
27682
+ },
27683
+ ]"
27684
+ ></DBCustomSelect>
27685
+ </div>
27686
+ <i class="line-break" data-sb-ignore="true"></i>
27687
+ <DBInfotext data-sb-ignore="true" size="small" semantic="informational">
27688
+ Mixed option lengths with dropdownWidth=&quot;auto&quot; \u2014 dropdown width
27689
+ should accommodate the longest option
27690
+ </DBInfotext>
27691
+ <i class="line-break" data-sb-ignore="true"></i>
27692
+ <div
27693
+ :style="{
27694
+ width: '250px',
27695
+ }"
27696
+ >
27697
+ <DBCustomSelect
27698
+ label="Auto: Mixed Lengths"
27699
+ formFieldWidth="full"
27700
+ dropdownWidth="auto"
27701
+ listLabel="auto-mixed-lengths"
27702
+ :options="[
27703
+ {
27704
+ value: 'mix-1',
27705
+ label: 'OK',
27706
+ id: 'auto-mix-1',
27707
+ },
27708
+ {
27709
+ value: 'mix-2',
27710
+ label: 'Mittellanger Optionstext hier',
27711
+ id: 'auto-mix-2',
27712
+ },
27713
+ {
27714
+ value: 'mix-3',
27715
+ label:
27716
+ 'Dieser Optionstext ist deutlich laenger als alle anderen und sollte die Breite bestimmen',
27717
+ id: 'auto-mix-3',
27718
+ },
27719
+ {
27720
+ value: 'mix-4',
27721
+ label: 'Kurz',
27722
+ id: 'auto-mix-4',
27723
+ },
27724
+ ]"
27725
+ ></DBCustomSelect>
27726
+ </div>
27727
+ </template>
27728
+
27729
+ <script setup lang="ts">
27730
+ import DBInfotext from "../../infotext/infotext.vue";
27731
+ import DBCustomSelect from "../custom-select.vue";
27349
27732
  </script>`, "dropdown-width.example.vue": `<template>
27350
27733
  <DBInfotext data-sb-ignore="true" size="small" semantic="informational">
27351
27734
  Form Field Width: Full
@@ -27382,6 +27765,12 @@ import DBCustomSelect from "../custom-select.vue";
27382
27765
  value: 'Option 5',
27383
27766
  id: 'qc908rx3z',
27384
27767
  },
27768
+ {
27769
+ value: 'long',
27770
+ label:
27771
+ 'Frankfurt(Main)Hbf - Berlin Hauptbahnhof (tief) via Erfurt Hbf und Halle (Saale) Hbf',
27772
+ id: 'qc908rx2z',
27773
+ },
27385
27774
  ]"
27386
27775
  ></DBCustomSelect>
27387
27776
  </div>
@@ -27450,6 +27839,12 @@ import DBCustomSelect from "../custom-select.vue";
27450
27839
  value: '5',
27451
27840
  id: '0iiu89zbg',
27452
27841
  },
27842
+ {
27843
+ value: 'long',
27844
+ label:
27845
+ 'Frankfurt(Main)Hbf - Berlin Hauptbahnhof (tief) via Erfurt Hbf und Halle (Saale) Hbf',
27846
+ id: '0iiu99zbg',
27847
+ },
27453
27848
  ]"
27454
27849
  ></DBCustomSelect>
27455
27850
  </div>
@@ -29734,7 +30129,7 @@ import DBCustomSelect from "../custom-select.vue";
29734
30129
 
29735
30130
  <script setup lang="ts">
29736
30131
  import DBCustomSelect from "../custom-select.vue";
29737
- </script>` }, "web-components": { "density.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-density",\n})\nexport class CustomSelectDensity {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-density");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n data-density="functional"\n placeholder="Placeholder"\n label="Functional"\n listLabel="id-10206-Functional"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil2",\n },\n {\n value: "Option 3",\n id: "10dqnhil3",\n },\n {\n value: "Option 4",\n id: "10dqnhil4",\n },\n {\n value: "Option 5",\n id: "10dqnhil5",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n data-density="regular"\n placeholder="Placeholder"\n label="(Default) Regular"\n listLabel="id-10207-(Default) Regular"\n options={[\n {\n value: "Option 1",\n id: "ok5olto18",\n },\n {\n value: "Option 2",\n id: "mzepnlbp4",\n },\n {\n value: "Option 3",\n id: "10dqnhil3",\n },\n {\n value: "Option 4",\n id: "10dqnhil2",\n },\n {\n value: "Option 5",\n id: "10dqnhil1",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n data-density="expressive"\n placeholder="Placeholder"\n label="Expressive"\n listLabel="id-10208-Expressive"\n options={[\n {\n value: "Option 1",\n id: "ixtyk8z9j",\n },\n {\n value: "Option 2",\n id: "k8kvx3fm8",\n },\n {\n value: "Option 3",\n id: "k8kvx3fm5",\n },\n {\n value: "Option 4",\n id: "k8kvx3fm6",\n },\n {\n value: "Option 5",\n id: "k8kvx3fm7",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-disabled",\n})\nexport class CustomSelectDisabled {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) False"\n listLabel="id-10221-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "dlysh2quv",\n },\n {\n value: "Option 2",\n id: "ygm3c9msn",\n },\n {\n value: "Option 3",\n id: "ygm4c9msn",\n },\n {\n value: "Option 4",\n id: "ygm5c9msn",\n },\n {\n value: "Option 5",\n id: "ygm6c9msn",\n },\n ]}\n multiple={true}\n disabled={false}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="True"\n listLabel="id-10222-True"\n options={[\n {\n value: "Option 1",\n id: "z445a00hf",\n },\n {\n value: "Option 2",\n id: "wji97jfsg",\n },\n {\n value: "Option 3",\n id: "wji96jfsg",\n },\n {\n value: "Option 4",\n id: "wji95jfsg",\n },\n {\n value: "Option 5",\n id: "wji94jfsg",\n },\n ]}\n disabled={true}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "dropdown-width.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-dropdown-width",\n})\nexport class CustomSelectDropdownWidth {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-dropdown-width");\n }\n\n render() {\n return (\n <Fragment>\n <db-infotext\n data-sb-ignore="true"\n size="small"\n semantic="informational"\n >\n Form Field Width: Full\n </db-infotext>\n <i class="line-break" data-sb-ignore="true"></i>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="(Default) Fixed"\n formFieldWidth="full"\n dropdownWidth="fixed"\n listLabel="id-10227-(Default) Fixed"\n options={[\n {\n value: "Option 1",\n id: "99pgkheyw",\n },\n {\n value: "Option 2",\n id: "qc908rx6z",\n },\n {\n value: "Option 3",\n id: "qc908rx5z",\n },\n {\n value: "Option 4",\n id: "qc908rx4z",\n },\n {\n value: "Option 5",\n id: "qc908rx3z",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="Auto"\n formFieldWidth="full"\n dropdownWidth="auto"\n listLabel="id-10228-Auto"\n options={[\n {\n value: "1",\n id: "2smv303zl",\n },\n {\n value: "2",\n id: "dstvsee1m",\n },\n {\n value: "3",\n id: "dstvsee2m",\n },\n {\n value: "4",\n id: "dstvsee3m",\n },\n {\n value: "5",\n id: "dstvsee4m",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="Full"\n formFieldWidth="full"\n dropdownWidth="full"\n listLabel="id-10229-Full"\n options={[\n {\n value: "1",\n id: "8fb4evl87",\n },\n {\n value: "2",\n id: "0iiu59zbg",\n },\n {\n value: "3",\n id: "0iiu69zbg",\n },\n {\n value: "4",\n id: "0iiu79zbg",\n },\n {\n value: "5",\n id: "0iiu89zbg",\n },\n ]}\n ></db-custom-select>\n </div>\n <i class="line-break" data-sb-ignore="true"></i>\n <db-infotext\n data-sb-ignore="true"\n size="small"\n semantic="informational"\n >\n Form Field Width: Auto\n </db-infotext>\n <i class="line-break" data-sb-ignore="true"></i>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="(Default) Fixed"\n formFieldWidth="auto"\n dropdownWidth="fixed"\n listLabel="id-10233-(Default) Fixed"\n options={[\n {\n value: "Option 1",\n id: "gniy079gw",\n },\n {\n value: "Option 2",\n id: "kr0v4jgxl",\n },\n {\n value: "Option 3",\n id: "kr0v3jgxl",\n },\n {\n value: "Option 4",\n id: "kr0v2jgxl",\n },\n {\n value: "Option 5",\n id: "kr0v1jgxl",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="Auto"\n formFieldWidth="auto"\n dropdownWidth="auto"\n listLabel="id-10234-Auto"\n options={[\n {\n value: "1",\n id: "mmc6lfzsy",\n },\n {\n value: "2",\n id: "wr6elxyf4",\n },\n {\n value: "3",\n id: "wr6elxyf5",\n },\n {\n value: "4",\n id: "wr6elxyf6",\n },\n {\n value: "5",\n id: "wr6elxyf7",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="Full"\n formFieldWidth="auto"\n dropdownWidth="full"\n listLabel="id-10235-Full"\n options={[\n {\n value: "1",\n id: "q0iyxp9kq",\n },\n {\n value: "2",\n id: "mzo80txs4",\n },\n {\n value: "3",\n id: "mzo80txs5",\n },\n {\n value: "4",\n id: "mzo80txs6",\n },\n {\n value: "5",\n id: "mzo80txs7",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "example-other-configuration.example.tsx": 'import { DBCustomSelect } from "../custom-select";\nimport type { CustomSelectOptionType } from "../model";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-example-other-configuration",\n})\nexport class CustomSelectExampleOtherConfiguration {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n getTransformSelectedLabels(selectedOptions?: any) {\n return selectedOptions.map((option: any) => option.value.at(-1)).join(", ");\n }\n getSearchFilter(option: CustomSelectOptionType) {\n return option.value === "Option 1";\n }\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(\n this._ref,\n "custom-select-example-other-configuration"\n );\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n searchValue="1"\n searchLabel="Search"\n label="Search Value"\n listLabel="id-10as4-Search Value"\n options={[\n {\n value: "Option 1",\n id: "09nursdao",\n },\n {\n value: "Option 2",\n id: "74n9csdc14",\n },\n {\n value: "Option 3",\n id: "64n9csdc14",\n },\n {\n value: "Option 4",\n id: "54n9csdc14",\n },\n {\n value: "Option 5",\n id: "44n9csdc14",\n },\n ]}\n showSearch={true}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectedLabels="Selected: Label controlled"\n label="Custom Selected Label"\n listLabel="id-10aasds4-Custom Selected Label"\n options={[\n {\n value: "Option 1",\n id: "09nurdscsdao",\n },\n {\n value: "Option 2",\n id: "74n9ccsddc14",\n },\n {\n value: "Option 3",\n id: "73n9ccsddc14",\n },\n {\n value: "Option 4",\n id: "72n9ccsddc14",\n },\n {\n value: "Option 5",\n id: "71n9ccsddc14",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="Transform Selected Label"\n listLabel="id-10aasds4-Transform Selected Label"\n options={[\n {\n value: "Option 1",\n id: "09nurdscsdao",\n },\n {\n value: "Option 2",\n id: "74n9ccsddc14",\n },\n {\n value: "Option 3",\n id: "73n9ccsddc14",\n },\n {\n value: "Option 4",\n id: "72n9ccsddc14",\n },\n {\n value: "Option 5",\n id: "71n9ccsddc14",\n },\n ]}\n {...{\n transformSelectedLabels: undefined,\n }}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="Custom Search Filter"\n listLabel="id-10aasds4-Custom Search Filter"\n options={[\n {\n value: "Option 1",\n id: "09nurdscsdao",\n },\n {\n value: "Option 2",\n id: "74n9ccsddc14",\n },\n {\n value: "Option 3",\n id: "73n9ccsddc14",\n },\n {\n value: "Option 4",\n id: "72n9ccsddc14",\n },\n {\n value: "Option 5",\n id: "71n9ccsddc14",\n },\n ]}\n {...{\n searchFilter: undefined,\n }}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "example-tags.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-exampletags",\n})\nexport class CustomSelectExampletags {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-exampletags");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectedType="tag"\n label="Tag grow"\n listLabel="id-10271-Tag grow"\n options={[\n {\n value: "Option 1",\n id: "53xbfd1o6",\n },\n {\n value: "Option 2",\n id: "fq8ypeiz2",\n },\n {\n value: "Option 3",\n id: "jtd3wevz2",\n },\n {\n value: "Option 4",\n id: "srr1toi8f",\n },\n {\n value: "Option 5",\n id: "srr1toi7f",\n },\n ]}\n multiple={true}\n removeTagsTexts={[\n "Remove Option entry 1",\n "Remove Option entry 2",\n "Remove Option entry 3",\n "Remove Option entry 4",\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectedType="tag"\n formFieldWidth="auto"\n label="Tag grow + auto"\n listLabel="id-10272-Tag grow + auto"\n options={[\n {\n value: "Option 1",\n id: "jn3s5kl9t",\n },\n {\n value: "Option 2",\n id: "iesayujhy",\n },\n {\n value: "Option 3",\n id: "55kavoeem",\n },\n {\n value: "Option 4",\n id: "xi4qhrdg8",\n },\n {\n value: "Option 5",\n id: "xi4qhrdg7",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "examples-floating-label.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-examples-floatinglabel",\n})\nexport class CustomSelectExamplesFloatinglabel {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(\n this._ref,\n "custom-select-examples-floatinglabel"\n );\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n variant="floating"\n label="Floating"\n listLabel="id-10300-Floating"\n options={[\n {\n value: "Option 1",\n id: "otbjunoyx",\n },\n {\n value: "Option 2",\n id: "ju53v02yg",\n },\n {\n value: "Option 3",\n id: "ju53v03yg",\n },\n {\n value: "Option 4",\n id: "ju53v04yg",\n },\n {\n value: "Option 5",\n id: "ju53v05yg",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n variant="floating"\n validation="invalid"\n invalidMessage="Invalid Message"\n label="Floating"\n listLabel="id-10301-Floating"\n options={[\n {\n value: "Option 1",\n id: "otbjunoyx",\n },\n {\n value: "Option 2",\n id: "ju53v02yg",\n },\n {\n value: "Option 3",\n id: "ju53v03yg",\n },\n {\n value: "Option 4",\n id: "ju53v04yg",\n },\n {\n value: "Option 5",\n id: "ju53v05yg",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "examples-multiple.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-examples-multiple",\n})\nexport class CustomSelectExamplesMultiple {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-examples-multiple");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Less than 6"\n listLabel="id-10266-Less than 6"\n options={[\n {\n value: "Option 1",\n id: "20twpdi3j",\n },\n {\n value: "Option 2",\n id: "0uwpufkvw",\n },\n {\n value: "Option 3",\n id: "xmvmr8dws",\n },\n {\n value: "Option 4",\n id: "yv5v4q9ew",\n },\n {\n value: "Option 5",\n id: "6bjfubtz4",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Option Group Title"\n listLabel="id-10267-Option Group Title"\n options={[\n {\n label: "Option group 1",\n isGroupTitle: true,\n id: "qcvwaejkk",\n },\n {\n value: "G1:Option 1",\n id: "jgnlzpm6q",\n },\n {\n value: "G1:Option 2",\n id: "n75b2qd9t",\n },\n {\n label: "Option group 2",\n isGroupTitle: true,\n id: "bcx8u0ke9",\n },\n {\n value: "G2:Option 1",\n id: "zgmc2tyn4",\n },\n {\n value: "G2:Option 2",\n id: "sw7l6jpoj",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Option Groups"\n listLabel="id-10268-Option Groups"\n options={[\n {\n value: "G1:Option 1",\n id: "y5iukyovr",\n },\n {\n value: "G1:Option 2",\n showDivider: true,\n id: "0ton8ii8v",\n },\n {\n value: "G2:Option 1",\n id: "9c4cgirv2",\n },\n {\n value: "G2:Option 2",\n showDivider: true,\n id: "740m4a61n",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n selectAllLabel="Select all"\n label="More than 6"\n listLabel="id-10269-More than 6"\n options={[\n {\n value: "Option 1",\n id: "3zjiay7k4",\n },\n {\n value: "Option 2",\n id: "s52x89xrz",\n },\n {\n value: "Option 3",\n id: "2u5nocjfo",\n },\n {\n value: "Option 4",\n id: "0ibok60su",\n },\n {\n value: "Option 5",\n id: "kdd8w27oh",\n },\n {\n value: "Option 6",\n id: "1qn5w4113",\n },\n {\n value: "Option 7",\n id: "eopg7tn9q",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectAllLabel="Select all"\n searchLabel="Search"\n searchPlaceholder="Search"\n placeholder="Placeholder"\n label="More than 10"\n listLabel="id-10270-More than 10"\n options={[\n {\n value: "Option 1",\n id: "wg5f7ycm8",\n },\n {\n value: "Option 2",\n id: "3viv9gxlp",\n },\n {\n value: "Option 3",\n id: "4wtnn5nwh",\n },\n {\n value: "Option 4",\n id: "r4amvgigg",\n },\n {\n value: "Option 5",\n id: "pcmqabmuy",\n },\n {\n value: "Option 6",\n id: "u8nify3n9",\n },\n {\n value: "Option 7",\n id: "rcmpselej",\n },\n {\n value: "Option 8",\n id: "ln43k984l",\n },\n {\n value: "Option 9",\n id: "j8squjd5i",\n },\n {\n value:\n "Option 10 very long item with may break into a new line",\n id: "b84ie8otk",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "examples-single.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-examples-single",\n})\nexport class CustomSelectExamplesSingle {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-examples-single");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Icons"\n listLabel="id-10260-Icons"\n options={[\n {\n value: "Option 1",\n icon: "x_placeholder",\n id: "fvdhawk3a",\n },\n {\n value: "Option 2",\n icon: "x_placeholder",\n id: "i0pey2syc",\n },\n {\n value: "Option 3",\n icon: "x_placeholder",\n id: "i0pey3syc",\n },\n {\n value: "Option 4",\n icon: "x_placeholder",\n id: "i0pey4syc",\n },\n {\n value: "Option 5",\n icon: "x_placeholder",\n id: "i0pey5syc",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Less than 6"\n listLabel="id-10261-Less than 6"\n options={[\n {\n value: "Option 1",\n id: "6zthubswi",\n },\n {\n value: "Option 2",\n id: "fh93iyp7w",\n },\n {\n value: "Option 3",\n id: "1cbtid79q",\n },\n {\n value: "Option 4",\n id: "5w9s57s9k",\n },\n {\n value: "Option 5",\n id: "ixclh8p8n",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Option Group Title"\n listLabel="id-10262-Option Group Title"\n options={[\n {\n label: "Option group 1",\n isGroupTitle: true,\n id: "f48zp673q",\n },\n {\n value: "G1:Option 1",\n id: "8291mu3qc",\n },\n {\n value: "G1:Option 2",\n id: "4duvelxc8",\n },\n {\n label: "Option group 2",\n isGroupTitle: true,\n id: "g4ti9lrc7",\n },\n {\n value: "G2:Option 1",\n id: "gqhv3u61k",\n },\n {\n value: "G2:Option 2",\n id: "8yx3v6yii",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Option Groups"\n listLabel="id-10263-Option Groups"\n options={[\n {\n value: "G1:Option 1",\n id: "q4h9435ye",\n },\n {\n value: "G1:Option 2",\n showDivider: true,\n id: "7tzwcbeln",\n },\n {\n value: "G2:Option 1",\n id: "zjmir6142",\n },\n {\n value: "G2:Option 2",\n showDivider: true,\n id: "hwqps1347",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="More than 6"\n listLabel="id-10264-More than 6"\n options={[\n {\n value: "Option 1",\n id: "ghsxrti0t",\n },\n {\n value: "Option 2",\n id: "5hj8rz3h6",\n },\n {\n value: "Option 3",\n id: "kvyjps1ai",\n },\n {\n value: "Option 4",\n id: "31ncem9lt",\n },\n {\n value: "Option 5",\n id: "0fwgqufql",\n },\n {\n value: "Option 6",\n id: "okz955pi7",\n },\n {\n value: "Option 7",\n id: "ihbjcr0lo",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n searchLabel="Search"\n label="More than 10"\n listLabel="id-10265-More than 10"\n options={[\n {\n value: "Option 1",\n id: "o9docf7sw",\n },\n {\n value: "Option 2",\n id: "ttwfqxw26",\n },\n {\n value: "Option 3",\n id: "0c5sgzfag",\n },\n {\n value: "Option 4",\n id: "c8knaskj6",\n },\n {\n value: "Option 5",\n id: "2z5uhqdmr",\n },\n {\n value: "Option 6",\n id: "y2tlf2fnf",\n },\n {\n value: "Option 7",\n id: "q9hdifmw7",\n },\n {\n value: "Option 8",\n id: "vqz28zphb",\n },\n {\n value: "Option 9",\n id: "j2amckmwh",\n },\n {\n value: "Option 10",\n id: "zdi31d2lu",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "form-field-width.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-form-field-width",\n})\nexport class CustomSelectFormFieldWidth {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-form-field-width");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="(Default) Full"\n formFieldWidth="full"\n listLabel="id-10223-(Default) Full"\n options={[\n {\n value: "Option 1",\n id: "z0ispy7ls",\n },\n {\n value: "Option 2",\n id: "ngl1p4pxn",\n },\n {\n value: "Option 3",\n id: "ngl1p3pxn",\n },\n {\n value: "Option 4",\n id: "ngl1p2pxn",\n },\n {\n value: "Option 5",\n id: "ngl1p1pxn",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="Auto"\n formFieldWidth="auto"\n listLabel="id-10224-Auto"\n options={[\n {\n value: "Option 1",\n id: "klxyvobwn",\n },\n {\n value: "Option 2",\n id: "7oag2a4fj",\n },\n {\n value: "Option 3",\n id: "7oag2a3fj",\n },\n {\n value: "Option 4",\n id: "7oag2a2fj",\n },\n {\n value: "Option 5",\n id: "7oag2a1fj",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "multiple.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-multiple",\n})\nexport class CustomSelectMultiple {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-multiple");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) False"\n listLabel="id-10209-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "ykzqfs8oa",\n },\n {\n value: "Option 2",\n id: "kcndx1xog",\n },\n {\n value: "Option 3",\n id: "kcndx2xog",\n },\n {\n value: "Option 4",\n id: "kcndx3xog",\n },\n {\n value: "Option 5",\n id: "kcndx4xog",\n },\n ]}\n multiple={false}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n searchLabel="Search"\n label="True"\n listLabel="id-10210-True"\n options={[\n {\n value: "Option 1",\n id: "34540enzm",\n },\n {\n value: "Option 2",\n id: "3a4ml34c8",\n },\n {\n value: "Option 3",\n id: "3a4ml34c7",\n },\n {\n value: "Option 4",\n id: "3a4ml34c6",\n },\n {\n value: "Option 5",\n id: "3a4ml34c5",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "placement.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-placement",\n})\nexport class CustomSelectPlacement {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-placement");\n }\n\n render() {\n return (\n <Fragment>\n <db-infotext\n data-sb-ignore="true"\n size="small"\n semantic="informational"\n >\n Form Field Width: Full\n </db-infotext>\n <i class="line-break" data-sb-ignore="true"></i>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) Bottom"\n formFieldWidth="full"\n placement="bottom"\n listLabel="id-10238-(Default) Bottom"\n options={[\n {\n value: "Option 1",\n id: "aryeycu23",\n },\n {\n value: "Option 2",\n id: "qrf3x6gdq",\n },\n {\n value: "Option 3",\n id: "qrf4x6gdq",\n },\n {\n value: "Option 4",\n id: "qrf5x6gdq",\n },\n {\n value: "Option 5",\n id: "qrf6x6gdq",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="Top"\n formFieldWidth="full"\n placement="top"\n listLabel="id-10239-Top"\n options={[\n {\n value: "Option 1",\n id: "mmfg4zco7",\n },\n {\n value: "Option 2",\n id: "52zkxb05u",\n },\n {\n value: "Option 3",\n id: "52zkxb04u",\n },\n {\n value: "Option 4",\n id: "52zkxb03u",\n },\n {\n value: "Option 5",\n id: "52zkxb02u",\n },\n ]}\n ></db-custom-select>\n </div>\n <i class="line-break" data-sb-ignore="true"></i>\n <db-infotext\n data-sb-ignore="true"\n size="small"\n semantic="informational"\n >\n Form Field Width: Auto\n </db-infotext>\n <i class="line-break" data-sb-ignore="true"></i>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) Bottom-Start"\n formFieldWidth="auto"\n placement="bottom-start"\n listLabel="id-10243-(Default) Bottom-Start"\n options={[\n {\n value: "Option 1",\n id: "fhczoz28b",\n },\n {\n value: "Option 2",\n id: "k8zcxfb4x",\n },\n {\n value: "Option 3",\n id: "k8zcxfb3x",\n },\n {\n value: "Option 4",\n id: "k8zcxfb2x",\n },\n {\n value: "Option 5",\n id: "k8zcxfb1x",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="Bottom-End"\n formFieldWidth="auto"\n placement="bottom-end"\n listLabel="id-10244-Bottom-End"\n options={[\n {\n value: "Option 1",\n id: "ukchupevr",\n },\n {\n value: "Option 2",\n id: "ts0jwdqxj",\n },\n {\n value: "Option 3",\n id: "ts1jwdqxj",\n },\n {\n value: "Option 4",\n id: "ts2jwdqxj",\n },\n {\n value: "Option 5",\n id: "ts3jwdqxj",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="Top-Start"\n formFieldWidth="auto"\n placement="top-start"\n listLabel="id-10245-Top-Start"\n options={[\n {\n value: "Option 1",\n id: "zhuaneo1w",\n },\n {\n value: "Option 2",\n id: "5mwz7pmcr",\n },\n {\n value: "Option 3",\n id: "4mwz7pmcr",\n },\n {\n value: "Option 4",\n id: "3mwz7pmcr",\n },\n {\n value: "Option 5",\n id: "2mwz7pmcr",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="Top-End"\n formFieldWidth="auto"\n placement="top-end"\n listLabel="id-10246-Top-End"\n options={[\n {\n value: "Option 1",\n id: "6uq8tv3e8",\n },\n {\n value: "Option 2",\n id: "iz30t1pce",\n },\n {\n value: "Option 3",\n id: "iz40t1pce",\n },\n {\n value: "Option 4",\n id: "iz50t1pce",\n },\n {\n value: "Option 5",\n id: "iz60t1pce",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "required.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-required",\n})\nexport class CustomSelectRequired {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-required");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) False"\n listLabel="id-10219-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "drpx8im88",\n },\n {\n value: "Option 2",\n id: "211e6zox5",\n },\n {\n value: "Option 3",\n id: "211e6zox4",\n },\n {\n value: "Option 4",\n id: "211e6zox3",\n },\n {\n value: "Option 5",\n id: "211e6zox2",\n },\n ]}\n multiple={true}\n required={false}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="True"\n listLabel="id-10220-True"\n options={[\n {\n value: "Option 1",\n id: "2v0zw8afc",\n },\n {\n value: "Option 2",\n id: "308308w5z",\n },\n {\n value: "Option 3",\n id: "308308w4z",\n },\n {\n value: "Option 4",\n id: "308308w3z",\n },\n {\n value: "Option 5",\n id: "308308w2z",\n },\n ]}\n required={true}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "selected-type.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-selectedtype",\n})\nexport class CustomSelectSelectedtype {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-selectedtype");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) Text"\n listLabel="id-10247-(Default) Text"\n options={[\n {\n value: "Option 1",\n id: "d9n3d2z13",\n },\n {\n value: "Option 2",\n id: "vq1c6xw05",\n },\n {\n value: "Option 3",\n id: "73eppj8rp",\n },\n {\n value: "Option 4",\n id: "yy82mda4v",\n },\n {\n value: "Option 5",\n id: "yy82mda5v",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectedType="amount"\n label="Amount"\n listLabel="id-10248-Amount"\n options={[\n {\n value: "Option 1",\n id: "la3wbcr7z",\n },\n {\n value: "Option 2",\n id: "wz2u3a4q1",\n },\n {\n value: "Option 3",\n id: "fcd4tiqlr",\n },\n {\n value: "Option 4",\n id: "riz9ea0ox",\n },\n {\n value: "Option 5",\n id: "riz9ea1ox",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectedType="tag"\n label="Tag"\n listLabel="id-10249-Tag"\n options={[\n {\n value: "Option 1",\n id: "q23x2uflo",\n },\n {\n value: "Option 2",\n id: "au07iy2il",\n },\n {\n value: "Option 3",\n id: "ig0l3rruj",\n },\n {\n value: "Option 4",\n id: "4m2gbzu2q",\n },\n {\n value: "Option 5",\n id: "4m2gbzu3q",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-clear-selection.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-clear-selection",\n})\nexport class CustomSelectShowClearSelection {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(\n this._ref,\n "custom-select-show-clear-selection"\n );\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) True"\n listLabel="id-10258-(Default) True"\n options={[\n {\n value: "Option 1",\n id: "9zfvu9noy",\n },\n {\n value: "Option 2",\n id: "cox90a0q8",\n },\n {\n value: "Option 3",\n id: "cox80a0q8",\n },\n {\n value: "Option 4",\n id: "cox70a0q8",\n },\n {\n value: "Option 5",\n id: "cox60a0q8",\n },\n ]}\n showClearSelection={true}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="False"\n listLabel="id-10259-False"\n options={[\n {\n value: "Option 1",\n id: "ln9ms4fjy",\n },\n {\n value: "Option 2",\n id: "dta90rteq",\n },\n {\n value: "Option 3",\n id: "dta80rteq",\n },\n {\n value: "Option 4",\n id: "dta70rteq",\n },\n {\n value: "Option 5",\n id: "dta60rteq",\n },\n ]}\n showClearSelection={false}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-icon.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-icon",\n})\nexport class CustomSelectShowIcon {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-icon");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n icon="x_placeholder"\n label="(Default) False"\n listLabel="id-10217-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "637sjglg5",\n },\n {\n value: "Option 2",\n id: "s529jnpj0",\n },\n {\n value: "Option 3",\n id: "s429jnpj0",\n },\n {\n value: "Option 4",\n id: "s329jnpj0",\n },\n {\n value: "Option 5",\n id: "s229jnpj0",\n },\n ]}\n showIcon={false}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n icon="x_placeholder"\n label="True"\n listLabel="id-10218-True"\n options={[\n {\n value: "Option 1",\n id: "0b998bbgw",\n },\n {\n value: "Option 2",\n id: "a37n10lfh",\n },\n {\n value: "Option 3",\n id: "a47n10lfh",\n },\n {\n value: "Option 4",\n id: "a57n10lfh",\n },\n {\n value: "Option 5",\n id: "a67n10lfh",\n },\n ]}\n showIcon={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-label.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-label",\n})\nexport class CustomSelectShowLabel {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-label");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) True"\n listLabel="id-10213-(Default) True"\n options={[\n {\n value: "Option 1",\n id: "09a47p13k",\n },\n {\n value: "Option 2",\n id: "ya0ahf4od",\n },\n {\n value: "Option 3",\n id: "ya0ahf3od",\n },\n {\n value: "Option 4",\n id: "ya0ahf2od",\n },\n {\n value: "Option 5",\n id: "ya0ahf1od",\n },\n ]}\n showLabel={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="False"\n listLabel="id-10214-False"\n options={[\n {\n value: "Option 1",\n id: "h8apm2qse",\n },\n {\n value: "Option 2",\n id: "vop8vkb8q",\n },\n {\n value: "Option 3",\n id: "vop8vkb7q",\n },\n {\n value: "Option 4",\n id: "vop8vkb6q",\n },\n {\n value: "Option 5",\n id: "vop8vkb5q",\n },\n ]}\n showLabel={false}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-loading.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-loading",\n})\nexport class CustomSelectShowLoading {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-loading");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n loadingText="Loading"\n label="(Default) False"\n listLabel="id-10252-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "glkscvbn5",\n },\n {\n value: "Option 2",\n id: "13cmgddkr",\n },\n {\n value: "Option 3",\n id: "14cmgddkr",\n },\n {\n value: "Option 4",\n id: "15cmgddkr",\n },\n {\n value: "Option 5",\n id: "16cmgddkr",\n },\n ]}\n showLoading={false}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n loadingText="Loading"\n label="True"\n listLabel="id-10253-True"\n options={[\n {\n value: "Option 1",\n id: "e6wvfkv27",\n },\n {\n value: "Option 2",\n id: "afg1mqolj",\n },\n {\n value: "Option 3",\n id: "afg2mqolj",\n },\n {\n value: "Option 4",\n id: "afg3mqolj",\n },\n {\n value: "Option 5",\n id: "afg4mqolj",\n },\n ]}\n showLoading={true}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-message.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-message",\n})\nexport class CustomSelectShowMessage {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-message");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n message="Helper Message"\n label="(Default) False"\n listLabel="id-10215-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "m88qjifb3",\n },\n {\n value: "Option 2",\n id: "4et40d885",\n },\n {\n value: "Option 3",\n id: "4et40d884",\n },\n {\n value: "Option 4",\n id: "4et40d883",\n },\n {\n value: "Option 5",\n id: "4et40d882",\n },\n ]}\n showMessage={false}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n message="Helper Message"\n label="True"\n listLabel="id-10216-True"\n options={[\n {\n value: "Option 1",\n id: "tm65in30k",\n },\n {\n value: "Option 2",\n id: "hujnrn5vk",\n },\n {\n value: "Option 3",\n id: "hujnrn4vk",\n },\n {\n value: "Option 4",\n id: "hujnrn3vk",\n },\n {\n value: "Option 5",\n id: "hujnrn2vk",\n },\n ]}\n showMessage={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-no-result.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-no-result",\n})\nexport class CustomSelectShowNoResult {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-no-result");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n noResultsText="Nothing found"\n label="(Default) False"\n listLabel="id-10250-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "wc5wcgjam",\n },\n {\n value: "Option 2",\n id: "lx4cydggt",\n },\n {\n value: "Option 3",\n id: "lx3cydggt",\n },\n {\n value: "Option 4",\n id: "lx2cydggt",\n },\n {\n value: "Option 5",\n id: "lx1cydggt",\n },\n ]}\n showNoResults={false}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n noResultsText="Nothing found"\n label="True"\n listLabel="id-10251-True"\n options={[\n {\n value: "Option 1",\n id: "waa0gfjab",\n },\n {\n value: "Option 2",\n id: "v48umf0qp",\n },\n {\n value: "Option 3",\n id: "v58umf0qp",\n },\n {\n value: "Option 4",\n id: "v68umf0qp",\n },\n {\n value: "Option 5",\n id: "v78umf0qp",\n },\n ]}\n showNoResults={true}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-required-asterisk.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-required-asterisk",\n})\nexport class CustomSelectShowRequiredAsterisk {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(\n this._ref,\n "custom-select-show-required-asterisk"\n );\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) True"\n listLabel="id-1021s9-(Default) True"\n options={[\n {\n value: "Option 1",\n id: "drpxs8im88",\n },\n {\n value: "Option 2",\n id: "211ed6zox5",\n },\n {\n value: "Option 3",\n id: "211ed6zox4",\n },\n {\n value: "Option 4",\n id: "211ed6zox3",\n },\n {\n value: "Option 5",\n id: "211ed6zox2",\n },\n ]}\n multiple={true}\n required={true}\n showRequiredAsterisk={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="False"\n listLabel="id-10s220-False"\n options={[\n {\n value: "Option 1",\n id: "2v0zfw8afc",\n },\n {\n value: "Option 2",\n id: "30830f8w5z",\n },\n {\n value: "Option 3",\n id: "30830f8w4z",\n },\n {\n value: "Option 4",\n id: "30830f8w3z",\n },\n {\n value: "Option 5",\n id: "30830f8w2z",\n },\n ]}\n required={true}\n showRequiredAsterisk={false}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-search.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-search",\n})\nexport class CustomSelectShowSearch {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-search");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) False"\n selectAllLabel="Select all"\n searchLabel="Search"\n listLabel="id-10254-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "09nure8co",\n },\n {\n value: "Option 2",\n id: "74n91hp14",\n },\n {\n value: "Option 3",\n id: "74n91hp15",\n },\n {\n value: "Option 4",\n id: "74n91hp16",\n },\n {\n value: "Option 5",\n id: "74n91hp17",\n },\n {\n value: "Option 6",\n id: "74n91hp18",\n },\n {\n value: "Option 7",\n id: "74n91hp19",\n },\n {\n value: "Option 8",\n id: "74n91hp24",\n },\n {\n value: "Option 9",\n id: "74n91hp34",\n },\n {\n value: "Option 10",\n id: "74n91hp44",\n },\n ]}\n showSearch={false}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectAllLabel="Select all"\n searchLabel="Search"\n label="True"\n listLabel="id-10255-True"\n options={[\n {\n value: "Option 1",\n id: "ktmbve0k2",\n },\n {\n value: "Option 2",\n id: "uf9wakkc1",\n },\n {\n value: "Option 3",\n id: "uf9wakkc2",\n },\n {\n value: "Option 4",\n id: "uf9wakkc3",\n },\n {\n value: "Option 5",\n id: "uf9wakkc4",\n },\n ]}\n showSearch={true}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-select-all.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-select-all",\n})\nexport class CustomSelectShowSelectAll {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-select-all");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectAllLabel="Select all"\n label="(Default) False"\n listLabel="id-10256-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "p6l2dpiea",\n },\n {\n value: "Option 2",\n id: "jh7pczno4",\n },\n {\n value: "Option 3",\n id: "jh7pczno5",\n },\n {\n value: "Option 4",\n id: "jh7pczno6",\n },\n {\n value: "Option 5",\n id: "jh7pczno7",\n },\n {\n value: "Option 6",\n id: "jh7pczno8",\n },\n ]}\n showSelectAll={false}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectAllLabel="Select all"\n label="True"\n listLabel="id-10257-True"\n options={[\n {\n value: "Option 1",\n id: "zcim85pqg",\n },\n {\n value: "Option 2",\n id: "kg6gvbwru",\n },\n {\n value: "Option 3",\n id: "kg5gvbwru",\n },\n {\n value: "Option 4",\n id: "kg4gvbwru",\n },\n {\n value: "Option 5",\n id: "kg3gvbwru",\n },\n ]}\n showSelectAll={true}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "validation.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-validation",\n})\nexport class CustomSelectValidation {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-validation");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n validation="no-validation"\n label="(Default) No Validation"\n listLabel="id-102061-(Default) No Validation"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil5",\n },\n {\n value: "Option 3",\n id: "10dqnhil4",\n },\n {\n value: "Option 4",\n id: "10dqnhil3",\n },\n {\n value: "Option 5",\n id: "10dqnhil2",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n validation="invalid"\n invalidMessage="Invalid Message"\n label="Invalid"\n listLabel="id-102062-Invalid"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil5",\n },\n {\n value: "Option 3",\n id: "10dqnhil4",\n },\n {\n value: "Option 4",\n id: "10dqnhil3",\n },\n {\n value: "Option 5",\n id: "10dqnhil2",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n validation="valid"\n invalidMessage="Valid Message"\n label="Valid"\n listLabel="id-102063-Valid"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil5",\n },\n {\n value: "Option 3",\n id: "10dqnhil4",\n },\n {\n value: "Option 4",\n id: "10dqnhil3",\n },\n {\n value: "Option 5",\n id: "10dqnhil2",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-variant",\n})\nexport class CustomSelectVariant {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-variant");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) Above"\n listLabel="id-10211-(Default) Above"\n options={[\n {\n value: "Option 1",\n id: "4lj8zr5b1",\n },\n {\n value: "Option 2",\n id: "uurfm7y2y",\n },\n {\n value: "Option 3",\n id: "uurfm7y3y",\n },\n {\n value: "Option 4",\n id: "uurfm7y4y",\n },\n {\n value: "Option 5",\n id: "uurfm7y5y",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n variant="floating"\n label="Floating"\n listLabel="id-10212-Floating"\n options={[\n {\n value: "Option 1",\n id: "otbjunoyx",\n },\n {\n value: "Option 2",\n id: "ju53v02yg",\n },\n {\n value: "Option 3",\n id: "ju53v03yg",\n },\n {\n value: "Option 4",\n id: "ju53v04yg",\n },\n {\n value: "Option 5",\n id: "ju53v05yg",\n },\n ]}\n ></db-custom-select>\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>DBCustomSelect</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-custom-select">Test</div>\n </body>\n</html>\n' } } }, "custom-select-dropdown": { props: "import type { GlobalProps, GlobalState } from '../../shared/model';\n\nexport const CustomSelectDropdownWidthList = ['fixed', 'auto', 'full'] as const;\nexport type CustomSelectDropdownWidthType =\n (typeof CustomSelectDropdownWidthList)[number];\n\nexport type DBCustomSelectDropdownDefaultProps = {\n /**\n * Changes the behavior of the dropdown with.\n * Default: fixed 328px\n * Full: Based on the size of the form-field\n * Auto: Based on the size of the largest list item\n */\n width?: CustomSelectDropdownWidthType | string;\n};\n\nexport type DBCustomSelectDropdownProps = DBCustomSelectDropdownDefaultProps &\n GlobalProps;\n\nexport type DBCustomSelectDropdownDefaultState = {};\n\nexport type DBCustomSelectDropdownState = DBCustomSelectDropdownDefaultState &\n 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>DBCustomSelectDropdown</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-custom-select-dropdown">Test</div>\n </body>\n</html>\n' } } }, "custom-select-form-field": { props: "import type { GlobalProps, GlobalState } from '../../shared/model';\n\nexport type DBCustomSelectFormFieldDefaultProps = {};\n\nexport type DBCustomSelectFormFieldProps = DBCustomSelectFormFieldDefaultProps &\n GlobalProps;\n\nexport type DBCustomSelectFormFieldDefaultState = {};\n\nexport type DBCustomSelectFormFieldState = DBCustomSelectFormFieldDefaultState &\n 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>DBCustomSelectFormField</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-custom-select-form-field">Test</div>\n </body>\n</html>\n' } } }, "custom-select-list": { props: "import type { GlobalProps, GlobalState } from '../../shared/model';\n\nexport type DBCustomSelectListDefaultProps = {\n label?: string;\n multiple?: boolean;\n};\n\nexport type DBCustomSelectListProps = DBCustomSelectListDefaultProps &\n GlobalProps;\n\nexport type DBCustomSelectListDefaultState = {};\n\nexport type DBCustomSelectListState = DBCustomSelectListDefaultState &\n GlobalState;\n", examples: [], exampleCode: { react: {}, angular: {}, vue: {}, "web-components": {}, html: {} } }, "custom-select-list-item": { props: "import type {\n BaseFormProps,\n ChangeEventProps,\n ChangeEventState,\n FormCheckProps,\n GlobalProps,\n IconProps,\n ShowIconProps,\n ValueProps\n} from '../../shared/model';\n\nexport const CustomSelectListItemTypeList = ['checkbox', 'radio'] as const;\nexport type CustomSelectListItemTypeType =\n (typeof CustomSelectListItemTypeList)[number];\n\nexport type DBCustomSelectListItemExtraProps = {\n /**\n * If the item is a group title (only text)\n */\n isGroupTitle?: boolean;\n /**\n * Show a divider on the bottom of the list item for visual grouping (don't use it on every item)\n */\n showDivider?: boolean;\n} & IconProps &\n ShowIconProps;\n\nexport type DBCustomSelectListItemDefaultProps = {\n /**\n * Set the title of a group of items - disables radio/checkbox behavior\n */\n groupTitle?: string;\n /**\n * Change the behavior of the item single(radio) or multiple(checkbox)\n */\n type?: CustomSelectListItemTypeType;\n};\n\nexport type DBCustomSelectListItemProps = DBCustomSelectListItemDefaultProps &\n GlobalProps &\n BaseFormProps &\n ValueProps &\n FormCheckProps &\n ChangeEventProps<HTMLInputElement> &\n DBCustomSelectListItemExtraProps;\n\nexport type DBCustomSelectListItemDefaultState = {\n getIconTrailing: () => string | undefined;\n hasDivider?: boolean;\n};\n\nexport type DBCustomSelectListItemState = DBCustomSelectListItemDefaultState &\n ChangeEventState<HTMLInputElement>;\n", examples: [], exampleCode: { react: {}, angular: {}, vue: {}, "web-components": {}, html: {} } }, divider: { props: "import type {\n EmphasisProps,\n GlobalProps,\n GlobalState,\n MarginProps,\n WidthProps\n} from '../../shared/model';\n\nexport const DividerMarginList = ['none', '_'] as const;\nexport type DividerMarginType = (typeof DividerMarginList)[number];\n\nexport const DividerVariantList = ['horizontal', 'vertical'] as const;\nexport type DividerVariantType = (typeof DividerVariantList)[number];\n\nexport type DBDividerDefaultProps = {\n /**\n * Removes the margin of the divider.\n */\n margin?: DividerMarginType;\n /**\n * Changes the orientation of the divider.\n */\n variant?: DividerVariantType;\n};\n\nexport type DBDividerProps = DBDividerDefaultProps &\n GlobalProps &\n EmphasisProps &\n MarginProps &\n WidthProps;\n\nexport type DBDividerDefaultState = {};\n\nexport type DBDividerState = DBDividerDefaultState & GlobalState;\n", examples: ["Density", "Variant", "Emphasis"], exampleCode: { react: { "density.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBDivider from "../divider";\n\nfunction DividerDensity(props: any) {\n return (\n <>\n <div\n data-density="functional"\n style={{\n width: "200px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n Functional\n </DBInfotext>\n <DBDivider width="full" />\n </div>\n <div\n data-density="regular"\n style={{\n width: "200px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n (Default) Regular\n </DBInfotext>\n <DBDivider width="full" />\n </div>\n <div\n data-density="expressive"\n style={{\n width: "200px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n Expressive\n </DBInfotext>\n <DBDivider width="full" />\n </div>\n </>\n );\n}\n\nexport default DividerDensity;\n', "emphasis.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBDivider from "../divider";\n\nfunction DividerEmphasis(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n (Default) Weak\n </DBInfotext>\n <DBDivider width="full" />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n Strong\n </DBInfotext>\n <DBDivider emphasis="strong" width="full" />\n </div>\n </>\n );\n}\n\nexport default DividerEmphasis;\n', "variant.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBDivider from "../divider";\n\nfunction DividerVariant(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n (Default) Adaptive - Horizontal\n </DBInfotext>\n <DBDivider width="full" />\n </div>\n <div\n style={{\n height: "100px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n Adaptive - Vertical\n </DBInfotext>\n <DBDivider variant="vertical" width="full" />\n </div>\n </>\n );\n}\n\nexport default DividerVariant;\n' }, angular: { "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBDivider } from "../divider";\n\n@Component({\n selector: "divider-density",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBDivider],\n template: `<ng-container\n ><div\n data-density="functional"\n [ngStyle]="{\n width: \'200px\'\n }"\n >\n <db-infotext size="small" semantic="informational">\n Functional\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n data-density="regular"\n [ngStyle]="{\n width: \'200px\'\n }"\n >\n <db-infotext size="small" semantic="informational">\n (Default) Regular\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n data-density="expressive"\n [ngStyle]="{\n width: \'200px\'\n }"\n >\n <db-infotext size="small" semantic="informational">\n Expressive\n </db-infotext>\n <db-divider width="full"></db-divider></div\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class DividerDensity 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "divider-density");\n }\n}\n', "emphasis.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBDivider } from "../divider";\n\n@Component({\n selector: "divider-emphasis",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBDivider],\n template: `<ng-container\n ><div\n [ngStyle]="{\n width: \'200px\'\n }"\n >\n <db-infotext size="small" semantic="informational">\n (Default) Weak\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n [ngStyle]="{\n width: \'200px\'\n }"\n >\n <db-infotext size="small" semantic="informational"> Strong </db-infotext>\n <db-divider emphasis="strong" width="full"></db-divider></div\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class DividerEmphasis 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "divider-emphasis");\n }\n}\n', "variant.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBDivider } from "../divider";\n\n@Component({\n selector: "divider-variant",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBDivider],\n template: `<ng-container\n ><div\n [ngStyle]="{\n width: \'200px\'\n }"\n >\n <db-infotext size="small" semantic="informational">\n (Default) Adaptive - Horizontal\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n [ngStyle]="{\n height: \'100px\'\n }"\n >\n <db-infotext size="small" semantic="informational">\n Adaptive - Vertical\n </db-infotext>\n <db-divider variant="vertical" width="full"></db-divider></div\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class DividerVariant 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "divider-variant");\n }\n}\n' }, vue: { "density.example.vue": `<template>
30132
+ </script>` }, "web-components": { "density.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-density",\n})\nexport class CustomSelectDensity {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-density");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n data-density="functional"\n placeholder="Placeholder"\n label="Functional"\n listLabel="id-10206-Functional"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil2",\n },\n {\n value: "Option 3",\n id: "10dqnhil3",\n },\n {\n value: "Option 4",\n id: "10dqnhil4",\n },\n {\n value: "Option 5",\n id: "10dqnhil5",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n data-density="regular"\n placeholder="Placeholder"\n label="(Default) Regular"\n listLabel="id-10207-(Default) Regular"\n options={[\n {\n value: "Option 1",\n id: "ok5olto18",\n },\n {\n value: "Option 2",\n id: "mzepnlbp4",\n },\n {\n value: "Option 3",\n id: "10dqnhil3",\n },\n {\n value: "Option 4",\n id: "10dqnhil2",\n },\n {\n value: "Option 5",\n id: "10dqnhil1",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n data-density="expressive"\n placeholder="Placeholder"\n label="Expressive"\n listLabel="id-10208-Expressive"\n options={[\n {\n value: "Option 1",\n id: "ixtyk8z9j",\n },\n {\n value: "Option 2",\n id: "k8kvx3fm8",\n },\n {\n value: "Option 3",\n id: "k8kvx3fm5",\n },\n {\n value: "Option 4",\n id: "k8kvx3fm6",\n },\n {\n value: "Option 5",\n id: "k8kvx3fm7",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-disabled",\n})\nexport class CustomSelectDisabled {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) False"\n listLabel="id-10221-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "dlysh2quv",\n },\n {\n value: "Option 2",\n id: "ygm3c9msn",\n },\n {\n value: "Option 3",\n id: "ygm4c9msn",\n },\n {\n value: "Option 4",\n id: "ygm5c9msn",\n },\n {\n value: "Option 5",\n id: "ygm6c9msn",\n },\n ]}\n multiple={true}\n disabled={false}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="True"\n listLabel="id-10222-True"\n options={[\n {\n value: "Option 1",\n id: "z445a00hf",\n },\n {\n value: "Option 2",\n id: "wji97jfsg",\n },\n {\n value: "Option 3",\n id: "wji96jfsg",\n },\n {\n value: "Option 4",\n id: "wji95jfsg",\n },\n {\n value: "Option 5",\n id: "wji94jfsg",\n },\n ]}\n disabled={true}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "dropdown-width-auto.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-dropdown-width-auto",\n})\nexport class CustomSelectDropdownWidthAuto {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-dropdown-width-auto");\n }\n\n render() {\n return (\n <Fragment>\n <db-infotext\n data-sb-ignore="true"\n size="small"\n semantic="informational"\n >\n Long option text with dropdownWidth=&quot;auto&quot; \u2014 the dropdown\n grows to the longest option and the text stays on a single line (no\n wrapping, no truncation)\n </db-infotext>\n <i class="line-break" data-sb-ignore="true"></i>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-custom-select\n label="Auto: Long Options"\n formFieldWidth="full"\n dropdownWidth="auto"\n listLabel="auto-long-options"\n options={[\n {\n value: "long-1",\n label:\n "Dieser extrem lange Optionstext bleibt im Auto-Modus in einer Zeile und das Dropdown waechst mit",\n id: "auto-long-1",\n },\n {\n value: "long-2",\n label:\n "Ein weiterer viel zu langer Text der die Dropdown-Breite im Auto-Modus bestimmt",\n id: "auto-long-2",\n },\n {\n value: "long-3",\n label: "Kurz",\n id: "auto-long-3",\n },\n {\n value: "long-4",\n label:\n "Frankfurt(Main)Hbf - Berlin Hauptbahnhof (tief) via Erfurt Hbf",\n id: "auto-long-4",\n },\n {\n value: "long-5",\n label:\n "Muenchen Hbf Gleis 15 Abfahrt Richtung Stuttgart mit Umstieg in Augsburg",\n id: "auto-long-5",\n },\n ]}\n ></db-custom-select>\n </div>\n <i class="line-break" data-sb-ignore="true"></i>\n <db-infotext\n data-sb-ignore="true"\n size="small"\n semantic="informational"\n >\n Wide trigger (400px) with short options and\n dropdownWidth=&quot;auto&quot; \u2014 dropdown should be at least as wide\n as the trigger\n </db-infotext>\n <i class="line-break" data-sb-ignore="true"></i>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="Auto: Wide Trigger, Short Options"\n formFieldWidth="full"\n dropdownWidth="auto"\n listLabel="auto-wide-trigger-short-options"\n options={[\n {\n value: "A",\n id: "auto-short-1",\n },\n {\n value: "B",\n id: "auto-short-2",\n },\n {\n value: "C",\n id: "auto-short-3",\n },\n ]}\n ></db-custom-select>\n </div>\n <i class="line-break" data-sb-ignore="true"></i>\n <db-infotext\n data-sb-ignore="true"\n size="small"\n semantic="informational"\n >\n Narrow trigger (150px) with long options and\n dropdownWidth=&quot;auto&quot; \u2014 dropdown should grow to fit content\n but not exceed viewport\n </db-infotext>\n <i class="line-break" data-sb-ignore="true"></i>\n <div\n style={{\n width: "150px",\n }}\n >\n <db-custom-select\n label="Auto: Narrow Trigger"\n formFieldWidth="full"\n dropdownWidth="auto"\n listLabel="auto-narrow-trigger-long-options"\n options={[\n {\n value: "narrow-long-1",\n label: "Frankfurt(Main)Hbf nach Berlin Hbf",\n id: "auto-narrow-long-1",\n },\n {\n value: "narrow-long-2",\n label: "Hamburg-Altona via Hannover Hbf",\n id: "auto-narrow-long-2",\n },\n {\n value: "narrow-long-3",\n label: "Koeln Messe/Deutz (tief)",\n id: "auto-narrow-long-3",\n },\n ]}\n ></db-custom-select>\n </div>\n <i class="line-break" data-sb-ignore="true"></i>\n <db-infotext\n data-sb-ignore="true"\n size="small"\n semantic="informational"\n >\n Mixed option lengths with dropdownWidth=&quot;auto&quot; \u2014 dropdown\n width should accommodate the longest option\n </db-infotext>\n <i class="line-break" data-sb-ignore="true"></i>\n <div\n style={{\n width: "250px",\n }}\n >\n <db-custom-select\n label="Auto: Mixed Lengths"\n formFieldWidth="full"\n dropdownWidth="auto"\n listLabel="auto-mixed-lengths"\n options={[\n {\n value: "mix-1",\n label: "OK",\n id: "auto-mix-1",\n },\n {\n value: "mix-2",\n label: "Mittellanger Optionstext hier",\n id: "auto-mix-2",\n },\n {\n value: "mix-3",\n label:\n "Dieser Optionstext ist deutlich laenger als alle anderen und sollte die Breite bestimmen",\n id: "auto-mix-3",\n },\n {\n value: "mix-4",\n label: "Kurz",\n id: "auto-mix-4",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "dropdown-width.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-dropdown-width",\n})\nexport class CustomSelectDropdownWidth {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-dropdown-width");\n }\n\n render() {\n return (\n <Fragment>\n <db-infotext\n data-sb-ignore="true"\n size="small"\n semantic="informational"\n >\n Form Field Width: Full\n </db-infotext>\n <i class="line-break" data-sb-ignore="true"></i>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="(Default) Fixed"\n formFieldWidth="full"\n dropdownWidth="fixed"\n listLabel="id-10227-(Default) Fixed"\n options={[\n {\n value: "Option 1",\n id: "99pgkheyw",\n },\n {\n value: "Option 2",\n id: "qc908rx6z",\n },\n {\n value: "Option 3",\n id: "qc908rx5z",\n },\n {\n value: "Option 4",\n id: "qc908rx4z",\n },\n {\n value: "Option 5",\n id: "qc908rx3z",\n },\n {\n value: "long",\n label:\n "Frankfurt(Main)Hbf - Berlin Hauptbahnhof (tief) via Erfurt Hbf und Halle (Saale) Hbf",\n id: "qc908rx2z",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="Auto"\n formFieldWidth="full"\n dropdownWidth="auto"\n listLabel="id-10228-Auto"\n options={[\n {\n value: "1",\n id: "2smv303zl",\n },\n {\n value: "2",\n id: "dstvsee1m",\n },\n {\n value: "3",\n id: "dstvsee2m",\n },\n {\n value: "4",\n id: "dstvsee3m",\n },\n {\n value: "5",\n id: "dstvsee4m",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="Full"\n formFieldWidth="full"\n dropdownWidth="full"\n listLabel="id-10229-Full"\n options={[\n {\n value: "1",\n id: "8fb4evl87",\n },\n {\n value: "2",\n id: "0iiu59zbg",\n },\n {\n value: "3",\n id: "0iiu69zbg",\n },\n {\n value: "4",\n id: "0iiu79zbg",\n },\n {\n value: "5",\n id: "0iiu89zbg",\n },\n {\n value: "long",\n label:\n "Frankfurt(Main)Hbf - Berlin Hauptbahnhof (tief) via Erfurt Hbf und Halle (Saale) Hbf",\n id: "0iiu99zbg",\n },\n ]}\n ></db-custom-select>\n </div>\n <i class="line-break" data-sb-ignore="true"></i>\n <db-infotext\n data-sb-ignore="true"\n size="small"\n semantic="informational"\n >\n Form Field Width: Auto\n </db-infotext>\n <i class="line-break" data-sb-ignore="true"></i>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="(Default) Fixed"\n formFieldWidth="auto"\n dropdownWidth="fixed"\n listLabel="id-10233-(Default) Fixed"\n options={[\n {\n value: "Option 1",\n id: "gniy079gw",\n },\n {\n value: "Option 2",\n id: "kr0v4jgxl",\n },\n {\n value: "Option 3",\n id: "kr0v3jgxl",\n },\n {\n value: "Option 4",\n id: "kr0v2jgxl",\n },\n {\n value: "Option 5",\n id: "kr0v1jgxl",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="Auto"\n formFieldWidth="auto"\n dropdownWidth="auto"\n listLabel="id-10234-Auto"\n options={[\n {\n value: "1",\n id: "mmc6lfzsy",\n },\n {\n value: "2",\n id: "wr6elxyf4",\n },\n {\n value: "3",\n id: "wr6elxyf5",\n },\n {\n value: "4",\n id: "wr6elxyf6",\n },\n {\n value: "5",\n id: "wr6elxyf7",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="Full"\n formFieldWidth="auto"\n dropdownWidth="full"\n listLabel="id-10235-Full"\n options={[\n {\n value: "1",\n id: "q0iyxp9kq",\n },\n {\n value: "2",\n id: "mzo80txs4",\n },\n {\n value: "3",\n id: "mzo80txs5",\n },\n {\n value: "4",\n id: "mzo80txs6",\n },\n {\n value: "5",\n id: "mzo80txs7",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "example-other-configuration.example.tsx": 'import { DBCustomSelect } from "../custom-select";\nimport type { CustomSelectOptionType } from "../model";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-example-other-configuration",\n})\nexport class CustomSelectExampleOtherConfiguration {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n getTransformSelectedLabels(selectedOptions?: any) {\n return selectedOptions.map((option: any) => option.value.at(-1)).join(", ");\n }\n getSearchFilter(option: CustomSelectOptionType) {\n return option.value === "Option 1";\n }\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(\n this._ref,\n "custom-select-example-other-configuration"\n );\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n searchValue="1"\n searchLabel="Search"\n label="Search Value"\n listLabel="id-10as4-Search Value"\n options={[\n {\n value: "Option 1",\n id: "09nursdao",\n },\n {\n value: "Option 2",\n id: "74n9csdc14",\n },\n {\n value: "Option 3",\n id: "64n9csdc14",\n },\n {\n value: "Option 4",\n id: "54n9csdc14",\n },\n {\n value: "Option 5",\n id: "44n9csdc14",\n },\n ]}\n showSearch={true}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectedLabels="Selected: Label controlled"\n label="Custom Selected Label"\n listLabel="id-10aasds4-Custom Selected Label"\n options={[\n {\n value: "Option 1",\n id: "09nurdscsdao",\n },\n {\n value: "Option 2",\n id: "74n9ccsddc14",\n },\n {\n value: "Option 3",\n id: "73n9ccsddc14",\n },\n {\n value: "Option 4",\n id: "72n9ccsddc14",\n },\n {\n value: "Option 5",\n id: "71n9ccsddc14",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="Transform Selected Label"\n listLabel="id-10aasds4-Transform Selected Label"\n options={[\n {\n value: "Option 1",\n id: "09nurdscsdao",\n },\n {\n value: "Option 2",\n id: "74n9ccsddc14",\n },\n {\n value: "Option 3",\n id: "73n9ccsddc14",\n },\n {\n value: "Option 4",\n id: "72n9ccsddc14",\n },\n {\n value: "Option 5",\n id: "71n9ccsddc14",\n },\n ]}\n {...{\n transformSelectedLabels: undefined,\n }}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="Custom Search Filter"\n listLabel="id-10aasds4-Custom Search Filter"\n options={[\n {\n value: "Option 1",\n id: "09nurdscsdao",\n },\n {\n value: "Option 2",\n id: "74n9ccsddc14",\n },\n {\n value: "Option 3",\n id: "73n9ccsddc14",\n },\n {\n value: "Option 4",\n id: "72n9ccsddc14",\n },\n {\n value: "Option 5",\n id: "71n9ccsddc14",\n },\n ]}\n {...{\n searchFilter: undefined,\n }}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "example-tags.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-exampletags",\n})\nexport class CustomSelectExampletags {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-exampletags");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectedType="tag"\n label="Tag grow"\n listLabel="id-10271-Tag grow"\n options={[\n {\n value: "Option 1",\n id: "53xbfd1o6",\n },\n {\n value: "Option 2",\n id: "fq8ypeiz2",\n },\n {\n value: "Option 3",\n id: "jtd3wevz2",\n },\n {\n value: "Option 4",\n id: "srr1toi8f",\n },\n {\n value: "Option 5",\n id: "srr1toi7f",\n },\n ]}\n multiple={true}\n removeTagsTexts={[\n "Remove Option entry 1",\n "Remove Option entry 2",\n "Remove Option entry 3",\n "Remove Option entry 4",\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectedType="tag"\n formFieldWidth="auto"\n label="Tag grow + auto"\n listLabel="id-10272-Tag grow + auto"\n options={[\n {\n value: "Option 1",\n id: "jn3s5kl9t",\n },\n {\n value: "Option 2",\n id: "iesayujhy",\n },\n {\n value: "Option 3",\n id: "55kavoeem",\n },\n {\n value: "Option 4",\n id: "xi4qhrdg8",\n },\n {\n value: "Option 5",\n id: "xi4qhrdg7",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "examples-floating-label.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-examples-floatinglabel",\n})\nexport class CustomSelectExamplesFloatinglabel {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(\n this._ref,\n "custom-select-examples-floatinglabel"\n );\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n variant="floating"\n label="Floating"\n listLabel="id-10300-Floating"\n options={[\n {\n value: "Option 1",\n id: "otbjunoyx",\n },\n {\n value: "Option 2",\n id: "ju53v02yg",\n },\n {\n value: "Option 3",\n id: "ju53v03yg",\n },\n {\n value: "Option 4",\n id: "ju53v04yg",\n },\n {\n value: "Option 5",\n id: "ju53v05yg",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n variant="floating"\n validation="invalid"\n invalidMessage="Invalid Message"\n label="Floating"\n listLabel="id-10301-Floating"\n options={[\n {\n value: "Option 1",\n id: "otbjunoyx",\n },\n {\n value: "Option 2",\n id: "ju53v02yg",\n },\n {\n value: "Option 3",\n id: "ju53v03yg",\n },\n {\n value: "Option 4",\n id: "ju53v04yg",\n },\n {\n value: "Option 5",\n id: "ju53v05yg",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "examples-multiple.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-examples-multiple",\n})\nexport class CustomSelectExamplesMultiple {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-examples-multiple");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Less than 6"\n listLabel="id-10266-Less than 6"\n options={[\n {\n value: "Option 1",\n id: "20twpdi3j",\n },\n {\n value: "Option 2",\n id: "0uwpufkvw",\n },\n {\n value: "Option 3",\n id: "xmvmr8dws",\n },\n {\n value: "Option 4",\n id: "yv5v4q9ew",\n },\n {\n value: "Option 5",\n id: "6bjfubtz4",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Option Group Title"\n listLabel="id-10267-Option Group Title"\n options={[\n {\n label: "Option group 1",\n isGroupTitle: true,\n id: "qcvwaejkk",\n },\n {\n value: "G1:Option 1",\n id: "jgnlzpm6q",\n },\n {\n value: "G1:Option 2",\n id: "n75b2qd9t",\n },\n {\n label: "Option group 2",\n isGroupTitle: true,\n id: "bcx8u0ke9",\n },\n {\n value: "G2:Option 1",\n id: "zgmc2tyn4",\n },\n {\n value: "G2:Option 2",\n id: "sw7l6jpoj",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Option Groups"\n listLabel="id-10268-Option Groups"\n options={[\n {\n value: "G1:Option 1",\n id: "y5iukyovr",\n },\n {\n value: "G1:Option 2",\n showDivider: true,\n id: "0ton8ii8v",\n },\n {\n value: "G2:Option 1",\n id: "9c4cgirv2",\n },\n {\n value: "G2:Option 2",\n showDivider: true,\n id: "740m4a61n",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n selectAllLabel="Select all"\n label="More than 6"\n listLabel="id-10269-More than 6"\n options={[\n {\n value: "Option 1",\n id: "3zjiay7k4",\n },\n {\n value: "Option 2",\n id: "s52x89xrz",\n },\n {\n value: "Option 3",\n id: "2u5nocjfo",\n },\n {\n value: "Option 4",\n id: "0ibok60su",\n },\n {\n value: "Option 5",\n id: "kdd8w27oh",\n },\n {\n value: "Option 6",\n id: "1qn5w4113",\n },\n {\n value: "Option 7",\n id: "eopg7tn9q",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectAllLabel="Select all"\n searchLabel="Search"\n searchPlaceholder="Search"\n placeholder="Placeholder"\n label="More than 10"\n listLabel="id-10270-More than 10"\n options={[\n {\n value: "Option 1",\n id: "wg5f7ycm8",\n },\n {\n value: "Option 2",\n id: "3viv9gxlp",\n },\n {\n value: "Option 3",\n id: "4wtnn5nwh",\n },\n {\n value: "Option 4",\n id: "r4amvgigg",\n },\n {\n value: "Option 5",\n id: "pcmqabmuy",\n },\n {\n value: "Option 6",\n id: "u8nify3n9",\n },\n {\n value: "Option 7",\n id: "rcmpselej",\n },\n {\n value: "Option 8",\n id: "ln43k984l",\n },\n {\n value: "Option 9",\n id: "j8squjd5i",\n },\n {\n value:\n "Option 10 very long item with may break into a new line",\n id: "b84ie8otk",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "examples-single.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-examples-single",\n})\nexport class CustomSelectExamplesSingle {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-examples-single");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Icons"\n listLabel="id-10260-Icons"\n options={[\n {\n value: "Option 1",\n icon: "x_placeholder",\n id: "fvdhawk3a",\n },\n {\n value: "Option 2",\n icon: "x_placeholder",\n id: "i0pey2syc",\n },\n {\n value: "Option 3",\n icon: "x_placeholder",\n id: "i0pey3syc",\n },\n {\n value: "Option 4",\n icon: "x_placeholder",\n id: "i0pey4syc",\n },\n {\n value: "Option 5",\n icon: "x_placeholder",\n id: "i0pey5syc",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Less than 6"\n listLabel="id-10261-Less than 6"\n options={[\n {\n value: "Option 1",\n id: "6zthubswi",\n },\n {\n value: "Option 2",\n id: "fh93iyp7w",\n },\n {\n value: "Option 3",\n id: "1cbtid79q",\n },\n {\n value: "Option 4",\n id: "5w9s57s9k",\n },\n {\n value: "Option 5",\n id: "ixclh8p8n",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Option Group Title"\n listLabel="id-10262-Option Group Title"\n options={[\n {\n label: "Option group 1",\n isGroupTitle: true,\n id: "f48zp673q",\n },\n {\n value: "G1:Option 1",\n id: "8291mu3qc",\n },\n {\n value: "G1:Option 2",\n id: "4duvelxc8",\n },\n {\n label: "Option group 2",\n isGroupTitle: true,\n id: "g4ti9lrc7",\n },\n {\n value: "G2:Option 1",\n id: "gqhv3u61k",\n },\n {\n value: "G2:Option 2",\n id: "8yx3v6yii",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="Option Groups"\n listLabel="id-10263-Option Groups"\n options={[\n {\n value: "G1:Option 1",\n id: "q4h9435ye",\n },\n {\n value: "G1:Option 2",\n showDivider: true,\n id: "7tzwcbeln",\n },\n {\n value: "G2:Option 1",\n id: "zjmir6142",\n },\n {\n value: "G2:Option 2",\n showDivider: true,\n id: "hwqps1347",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n label="More than 6"\n listLabel="id-10264-More than 6"\n options={[\n {\n value: "Option 1",\n id: "ghsxrti0t",\n },\n {\n value: "Option 2",\n id: "5hj8rz3h6",\n },\n {\n value: "Option 3",\n id: "kvyjps1ai",\n },\n {\n value: "Option 4",\n id: "31ncem9lt",\n },\n {\n value: "Option 5",\n id: "0fwgqufql",\n },\n {\n value: "Option 6",\n id: "okz955pi7",\n },\n {\n value: "Option 7",\n id: "ihbjcr0lo",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n placeholder="Placeholder"\n searchLabel="Search"\n label="More than 10"\n listLabel="id-10265-More than 10"\n options={[\n {\n value: "Option 1",\n id: "o9docf7sw",\n },\n {\n value: "Option 2",\n id: "ttwfqxw26",\n },\n {\n value: "Option 3",\n id: "0c5sgzfag",\n },\n {\n value: "Option 4",\n id: "c8knaskj6",\n },\n {\n value: "Option 5",\n id: "2z5uhqdmr",\n },\n {\n value: "Option 6",\n id: "y2tlf2fnf",\n },\n {\n value: "Option 7",\n id: "q9hdifmw7",\n },\n {\n value: "Option 8",\n id: "vqz28zphb",\n },\n {\n value: "Option 9",\n id: "j2amckmwh",\n },\n {\n value: "Option 10",\n id: "zdi31d2lu",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "form-field-width.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-form-field-width",\n})\nexport class CustomSelectFormFieldWidth {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-form-field-width");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="(Default) Full"\n formFieldWidth="full"\n listLabel="id-10223-(Default) Full"\n options={[\n {\n value: "Option 1",\n id: "z0ispy7ls",\n },\n {\n value: "Option 2",\n id: "ngl1p4pxn",\n },\n {\n value: "Option 3",\n id: "ngl1p3pxn",\n },\n {\n value: "Option 4",\n id: "ngl1p2pxn",\n },\n {\n value: "Option 5",\n id: "ngl1p1pxn",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "400px",\n }}\n >\n <db-custom-select\n label="Auto"\n formFieldWidth="auto"\n listLabel="id-10224-Auto"\n options={[\n {\n value: "Option 1",\n id: "klxyvobwn",\n },\n {\n value: "Option 2",\n id: "7oag2a4fj",\n },\n {\n value: "Option 3",\n id: "7oag2a3fj",\n },\n {\n value: "Option 4",\n id: "7oag2a2fj",\n },\n {\n value: "Option 5",\n id: "7oag2a1fj",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "multiple.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-multiple",\n})\nexport class CustomSelectMultiple {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-multiple");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) False"\n listLabel="id-10209-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "ykzqfs8oa",\n },\n {\n value: "Option 2",\n id: "kcndx1xog",\n },\n {\n value: "Option 3",\n id: "kcndx2xog",\n },\n {\n value: "Option 4",\n id: "kcndx3xog",\n },\n {\n value: "Option 5",\n id: "kcndx4xog",\n },\n ]}\n multiple={false}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n searchLabel="Search"\n label="True"\n listLabel="id-10210-True"\n options={[\n {\n value: "Option 1",\n id: "34540enzm",\n },\n {\n value: "Option 2",\n id: "3a4ml34c8",\n },\n {\n value: "Option 3",\n id: "3a4ml34c7",\n },\n {\n value: "Option 4",\n id: "3a4ml34c6",\n },\n {\n value: "Option 5",\n id: "3a4ml34c5",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "placement.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-placement",\n})\nexport class CustomSelectPlacement {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-placement");\n }\n\n render() {\n return (\n <Fragment>\n <db-infotext\n data-sb-ignore="true"\n size="small"\n semantic="informational"\n >\n Form Field Width: Full\n </db-infotext>\n <i class="line-break" data-sb-ignore="true"></i>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) Bottom"\n formFieldWidth="full"\n placement="bottom"\n listLabel="id-10238-(Default) Bottom"\n options={[\n {\n value: "Option 1",\n id: "aryeycu23",\n },\n {\n value: "Option 2",\n id: "qrf3x6gdq",\n },\n {\n value: "Option 3",\n id: "qrf4x6gdq",\n },\n {\n value: "Option 4",\n id: "qrf5x6gdq",\n },\n {\n value: "Option 5",\n id: "qrf6x6gdq",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="Top"\n formFieldWidth="full"\n placement="top"\n listLabel="id-10239-Top"\n options={[\n {\n value: "Option 1",\n id: "mmfg4zco7",\n },\n {\n value: "Option 2",\n id: "52zkxb05u",\n },\n {\n value: "Option 3",\n id: "52zkxb04u",\n },\n {\n value: "Option 4",\n id: "52zkxb03u",\n },\n {\n value: "Option 5",\n id: "52zkxb02u",\n },\n ]}\n ></db-custom-select>\n </div>\n <i class="line-break" data-sb-ignore="true"></i>\n <db-infotext\n data-sb-ignore="true"\n size="small"\n semantic="informational"\n >\n Form Field Width: Auto\n </db-infotext>\n <i class="line-break" data-sb-ignore="true"></i>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) Bottom-Start"\n formFieldWidth="auto"\n placement="bottom-start"\n listLabel="id-10243-(Default) Bottom-Start"\n options={[\n {\n value: "Option 1",\n id: "fhczoz28b",\n },\n {\n value: "Option 2",\n id: "k8zcxfb4x",\n },\n {\n value: "Option 3",\n id: "k8zcxfb3x",\n },\n {\n value: "Option 4",\n id: "k8zcxfb2x",\n },\n {\n value: "Option 5",\n id: "k8zcxfb1x",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="Bottom-End"\n formFieldWidth="auto"\n placement="bottom-end"\n listLabel="id-10244-Bottom-End"\n options={[\n {\n value: "Option 1",\n id: "ukchupevr",\n },\n {\n value: "Option 2",\n id: "ts0jwdqxj",\n },\n {\n value: "Option 3",\n id: "ts1jwdqxj",\n },\n {\n value: "Option 4",\n id: "ts2jwdqxj",\n },\n {\n value: "Option 5",\n id: "ts3jwdqxj",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="Top-Start"\n formFieldWidth="auto"\n placement="top-start"\n listLabel="id-10245-Top-Start"\n options={[\n {\n value: "Option 1",\n id: "zhuaneo1w",\n },\n {\n value: "Option 2",\n id: "5mwz7pmcr",\n },\n {\n value: "Option 3",\n id: "4mwz7pmcr",\n },\n {\n value: "Option 4",\n id: "3mwz7pmcr",\n },\n {\n value: "Option 5",\n id: "2mwz7pmcr",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="Top-End"\n formFieldWidth="auto"\n placement="top-end"\n listLabel="id-10246-Top-End"\n options={[\n {\n value: "Option 1",\n id: "6uq8tv3e8",\n },\n {\n value: "Option 2",\n id: "iz30t1pce",\n },\n {\n value: "Option 3",\n id: "iz40t1pce",\n },\n {\n value: "Option 4",\n id: "iz50t1pce",\n },\n {\n value: "Option 5",\n id: "iz60t1pce",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "required.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-required",\n})\nexport class CustomSelectRequired {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-required");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) False"\n listLabel="id-10219-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "drpx8im88",\n },\n {\n value: "Option 2",\n id: "211e6zox5",\n },\n {\n value: "Option 3",\n id: "211e6zox4",\n },\n {\n value: "Option 4",\n id: "211e6zox3",\n },\n {\n value: "Option 5",\n id: "211e6zox2",\n },\n ]}\n multiple={true}\n required={false}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="True"\n listLabel="id-10220-True"\n options={[\n {\n value: "Option 1",\n id: "2v0zw8afc",\n },\n {\n value: "Option 2",\n id: "308308w5z",\n },\n {\n value: "Option 3",\n id: "308308w4z",\n },\n {\n value: "Option 4",\n id: "308308w3z",\n },\n {\n value: "Option 5",\n id: "308308w2z",\n },\n ]}\n required={true}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "selected-type.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-selectedtype",\n})\nexport class CustomSelectSelectedtype {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-selectedtype");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) Text"\n listLabel="id-10247-(Default) Text"\n options={[\n {\n value: "Option 1",\n id: "d9n3d2z13",\n },\n {\n value: "Option 2",\n id: "vq1c6xw05",\n },\n {\n value: "Option 3",\n id: "73eppj8rp",\n },\n {\n value: "Option 4",\n id: "yy82mda4v",\n },\n {\n value: "Option 5",\n id: "yy82mda5v",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectedType="amount"\n label="Amount"\n listLabel="id-10248-Amount"\n options={[\n {\n value: "Option 1",\n id: "la3wbcr7z",\n },\n {\n value: "Option 2",\n id: "wz2u3a4q1",\n },\n {\n value: "Option 3",\n id: "fcd4tiqlr",\n },\n {\n value: "Option 4",\n id: "riz9ea0ox",\n },\n {\n value: "Option 5",\n id: "riz9ea1ox",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectedType="tag"\n label="Tag"\n listLabel="id-10249-Tag"\n options={[\n {\n value: "Option 1",\n id: "q23x2uflo",\n },\n {\n value: "Option 2",\n id: "au07iy2il",\n },\n {\n value: "Option 3",\n id: "ig0l3rruj",\n },\n {\n value: "Option 4",\n id: "4m2gbzu2q",\n },\n {\n value: "Option 5",\n id: "4m2gbzu3q",\n },\n ]}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-clear-selection.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-clear-selection",\n})\nexport class CustomSelectShowClearSelection {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(\n this._ref,\n "custom-select-show-clear-selection"\n );\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) True"\n listLabel="id-10258-(Default) True"\n options={[\n {\n value: "Option 1",\n id: "9zfvu9noy",\n },\n {\n value: "Option 2",\n id: "cox90a0q8",\n },\n {\n value: "Option 3",\n id: "cox80a0q8",\n },\n {\n value: "Option 4",\n id: "cox70a0q8",\n },\n {\n value: "Option 5",\n id: "cox60a0q8",\n },\n ]}\n showClearSelection={true}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="False"\n listLabel="id-10259-False"\n options={[\n {\n value: "Option 1",\n id: "ln9ms4fjy",\n },\n {\n value: "Option 2",\n id: "dta90rteq",\n },\n {\n value: "Option 3",\n id: "dta80rteq",\n },\n {\n value: "Option 4",\n id: "dta70rteq",\n },\n {\n value: "Option 5",\n id: "dta60rteq",\n },\n ]}\n showClearSelection={false}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-icon.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-icon",\n})\nexport class CustomSelectShowIcon {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-icon");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n icon="x_placeholder"\n label="(Default) False"\n listLabel="id-10217-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "637sjglg5",\n },\n {\n value: "Option 2",\n id: "s529jnpj0",\n },\n {\n value: "Option 3",\n id: "s429jnpj0",\n },\n {\n value: "Option 4",\n id: "s329jnpj0",\n },\n {\n value: "Option 5",\n id: "s229jnpj0",\n },\n ]}\n showIcon={false}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n icon="x_placeholder"\n label="True"\n listLabel="id-10218-True"\n options={[\n {\n value: "Option 1",\n id: "0b998bbgw",\n },\n {\n value: "Option 2",\n id: "a37n10lfh",\n },\n {\n value: "Option 3",\n id: "a47n10lfh",\n },\n {\n value: "Option 4",\n id: "a57n10lfh",\n },\n {\n value: "Option 5",\n id: "a67n10lfh",\n },\n ]}\n showIcon={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-label.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-label",\n})\nexport class CustomSelectShowLabel {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-label");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) True"\n listLabel="id-10213-(Default) True"\n options={[\n {\n value: "Option 1",\n id: "09a47p13k",\n },\n {\n value: "Option 2",\n id: "ya0ahf4od",\n },\n {\n value: "Option 3",\n id: "ya0ahf3od",\n },\n {\n value: "Option 4",\n id: "ya0ahf2od",\n },\n {\n value: "Option 5",\n id: "ya0ahf1od",\n },\n ]}\n showLabel={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="False"\n listLabel="id-10214-False"\n options={[\n {\n value: "Option 1",\n id: "h8apm2qse",\n },\n {\n value: "Option 2",\n id: "vop8vkb8q",\n },\n {\n value: "Option 3",\n id: "vop8vkb7q",\n },\n {\n value: "Option 4",\n id: "vop8vkb6q",\n },\n {\n value: "Option 5",\n id: "vop8vkb5q",\n },\n ]}\n showLabel={false}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-loading.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-loading",\n})\nexport class CustomSelectShowLoading {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-loading");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n loadingText="Loading"\n label="(Default) False"\n listLabel="id-10252-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "glkscvbn5",\n },\n {\n value: "Option 2",\n id: "13cmgddkr",\n },\n {\n value: "Option 3",\n id: "14cmgddkr",\n },\n {\n value: "Option 4",\n id: "15cmgddkr",\n },\n {\n value: "Option 5",\n id: "16cmgddkr",\n },\n ]}\n showLoading={false}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n loadingText="Loading"\n label="True"\n listLabel="id-10253-True"\n options={[\n {\n value: "Option 1",\n id: "e6wvfkv27",\n },\n {\n value: "Option 2",\n id: "afg1mqolj",\n },\n {\n value: "Option 3",\n id: "afg2mqolj",\n },\n {\n value: "Option 4",\n id: "afg3mqolj",\n },\n {\n value: "Option 5",\n id: "afg4mqolj",\n },\n ]}\n showLoading={true}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-message.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-message",\n})\nexport class CustomSelectShowMessage {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-message");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n message="Helper Message"\n label="(Default) False"\n listLabel="id-10215-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "m88qjifb3",\n },\n {\n value: "Option 2",\n id: "4et40d885",\n },\n {\n value: "Option 3",\n id: "4et40d884",\n },\n {\n value: "Option 4",\n id: "4et40d883",\n },\n {\n value: "Option 5",\n id: "4et40d882",\n },\n ]}\n showMessage={false}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n message="Helper Message"\n label="True"\n listLabel="id-10216-True"\n options={[\n {\n value: "Option 1",\n id: "tm65in30k",\n },\n {\n value: "Option 2",\n id: "hujnrn5vk",\n },\n {\n value: "Option 3",\n id: "hujnrn4vk",\n },\n {\n value: "Option 4",\n id: "hujnrn3vk",\n },\n {\n value: "Option 5",\n id: "hujnrn2vk",\n },\n ]}\n showMessage={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-no-result.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-no-result",\n})\nexport class CustomSelectShowNoResult {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-no-result");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n noResultsText="Nothing found"\n label="(Default) False"\n listLabel="id-10250-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "wc5wcgjam",\n },\n {\n value: "Option 2",\n id: "lx4cydggt",\n },\n {\n value: "Option 3",\n id: "lx3cydggt",\n },\n {\n value: "Option 4",\n id: "lx2cydggt",\n },\n {\n value: "Option 5",\n id: "lx1cydggt",\n },\n ]}\n showNoResults={false}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n noResultsText="Nothing found"\n label="True"\n listLabel="id-10251-True"\n options={[\n {\n value: "Option 1",\n id: "waa0gfjab",\n },\n {\n value: "Option 2",\n id: "v48umf0qp",\n },\n {\n value: "Option 3",\n id: "v58umf0qp",\n },\n {\n value: "Option 4",\n id: "v68umf0qp",\n },\n {\n value: "Option 5",\n id: "v78umf0qp",\n },\n ]}\n showNoResults={true}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-required-asterisk.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-required-asterisk",\n})\nexport class CustomSelectShowRequiredAsterisk {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(\n this._ref,\n "custom-select-show-required-asterisk"\n );\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) True"\n listLabel="id-1021s9-(Default) True"\n options={[\n {\n value: "Option 1",\n id: "drpxs8im88",\n },\n {\n value: "Option 2",\n id: "211ed6zox5",\n },\n {\n value: "Option 3",\n id: "211ed6zox4",\n },\n {\n value: "Option 4",\n id: "211ed6zox3",\n },\n {\n value: "Option 5",\n id: "211ed6zox2",\n },\n ]}\n multiple={true}\n required={true}\n showRequiredAsterisk={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="False"\n listLabel="id-10s220-False"\n options={[\n {\n value: "Option 1",\n id: "2v0zfw8afc",\n },\n {\n value: "Option 2",\n id: "30830f8w5z",\n },\n {\n value: "Option 3",\n id: "30830f8w4z",\n },\n {\n value: "Option 4",\n id: "30830f8w3z",\n },\n {\n value: "Option 5",\n id: "30830f8w2z",\n },\n ]}\n required={true}\n showRequiredAsterisk={false}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-search.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-search",\n})\nexport class CustomSelectShowSearch {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-search");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) False"\n selectAllLabel="Select all"\n searchLabel="Search"\n listLabel="id-10254-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "09nure8co",\n },\n {\n value: "Option 2",\n id: "74n91hp14",\n },\n {\n value: "Option 3",\n id: "74n91hp15",\n },\n {\n value: "Option 4",\n id: "74n91hp16",\n },\n {\n value: "Option 5",\n id: "74n91hp17",\n },\n {\n value: "Option 6",\n id: "74n91hp18",\n },\n {\n value: "Option 7",\n id: "74n91hp19",\n },\n {\n value: "Option 8",\n id: "74n91hp24",\n },\n {\n value: "Option 9",\n id: "74n91hp34",\n },\n {\n value: "Option 10",\n id: "74n91hp44",\n },\n ]}\n showSearch={false}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectAllLabel="Select all"\n searchLabel="Search"\n label="True"\n listLabel="id-10255-True"\n options={[\n {\n value: "Option 1",\n id: "ktmbve0k2",\n },\n {\n value: "Option 2",\n id: "uf9wakkc1",\n },\n {\n value: "Option 3",\n id: "uf9wakkc2",\n },\n {\n value: "Option 4",\n id: "uf9wakkc3",\n },\n {\n value: "Option 5",\n id: "uf9wakkc4",\n },\n ]}\n showSearch={true}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-select-all.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-show-select-all",\n})\nexport class CustomSelectShowSelectAll {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-show-select-all");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectAllLabel="Select all"\n label="(Default) False"\n listLabel="id-10256-(Default) False"\n options={[\n {\n value: "Option 1",\n id: "p6l2dpiea",\n },\n {\n value: "Option 2",\n id: "jh7pczno4",\n },\n {\n value: "Option 3",\n id: "jh7pczno5",\n },\n {\n value: "Option 4",\n id: "jh7pczno6",\n },\n {\n value: "Option 5",\n id: "jh7pczno7",\n },\n {\n value: "Option 6",\n id: "jh7pczno8",\n },\n ]}\n showSelectAll={false}\n multiple={true}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n selectAllLabel="Select all"\n label="True"\n listLabel="id-10257-True"\n options={[\n {\n value: "Option 1",\n id: "zcim85pqg",\n },\n {\n value: "Option 2",\n id: "kg6gvbwru",\n },\n {\n value: "Option 3",\n id: "kg5gvbwru",\n },\n {\n value: "Option 4",\n id: "kg4gvbwru",\n },\n {\n value: "Option 5",\n id: "kg3gvbwru",\n },\n ]}\n showSelectAll={true}\n multiple={true}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "validation.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-validation",\n})\nexport class CustomSelectValidation {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-validation");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n validation="no-validation"\n label="(Default) No Validation"\n listLabel="id-102061-(Default) No Validation"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil5",\n },\n {\n value: "Option 3",\n id: "10dqnhil4",\n },\n {\n value: "Option 4",\n id: "10dqnhil3",\n },\n {\n value: "Option 5",\n id: "10dqnhil2",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n validation="invalid"\n invalidMessage="Invalid Message"\n label="Invalid"\n listLabel="id-102062-Invalid"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil5",\n },\n {\n value: "Option 3",\n id: "10dqnhil4",\n },\n {\n value: "Option 4",\n id: "10dqnhil3",\n },\n {\n value: "Option 5",\n id: "10dqnhil2",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n validation="valid"\n invalidMessage="Valid Message"\n label="Valid"\n listLabel="id-102063-Valid"\n options={[\n {\n value: "Option 1",\n id: "miouzc0ec",\n },\n {\n value: "Option 2",\n id: "10dqnhil5",\n },\n {\n value: "Option 3",\n id: "10dqnhil4",\n },\n {\n value: "Option 4",\n id: "10dqnhil3",\n },\n {\n value: "Option 5",\n id: "10dqnhil2",\n },\n ]}\n ></db-custom-select>\n </div>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBCustomSelect } from "../custom-select";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "custom-select-variant",\n})\nexport class CustomSelectVariant {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "custom-select-variant");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n label="(Default) Above"\n listLabel="id-10211-(Default) Above"\n options={[\n {\n value: "Option 1",\n id: "4lj8zr5b1",\n },\n {\n value: "Option 2",\n id: "uurfm7y2y",\n },\n {\n value: "Option 3",\n id: "uurfm7y3y",\n },\n {\n value: "Option 4",\n id: "uurfm7y4y",\n },\n {\n value: "Option 5",\n id: "uurfm7y5y",\n },\n ]}\n ></db-custom-select>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-custom-select\n variant="floating"\n label="Floating"\n listLabel="id-10212-Floating"\n options={[\n {\n value: "Option 1",\n id: "otbjunoyx",\n },\n {\n value: "Option 2",\n id: "ju53v02yg",\n },\n {\n value: "Option 3",\n id: "ju53v03yg",\n },\n {\n value: "Option 4",\n id: "ju53v04yg",\n },\n {\n value: "Option 5",\n id: "ju53v05yg",\n },\n ]}\n ></db-custom-select>\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>DBCustomSelect</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-custom-select">Test</div>\n </body>\n</html>\n' } } }, "custom-select-dropdown": { props: "import type { GlobalProps, GlobalState } from '../../shared/model';\n\nexport const CustomSelectDropdownWidthList = ['fixed', 'auto', 'full'] as const;\nexport type CustomSelectDropdownWidthType =\n (typeof CustomSelectDropdownWidthList)[number];\n\nexport type DBCustomSelectDropdownDefaultProps = {\n /**\n * Changes the behavior of the dropdown with.\n * Default: fixed 328px\n * Full: Based on the size of the form-field\n * Auto: Based on the size of the largest list item\n */\n width?: CustomSelectDropdownWidthType | string;\n};\n\nexport type DBCustomSelectDropdownProps = DBCustomSelectDropdownDefaultProps &\n GlobalProps;\n\nexport type DBCustomSelectDropdownDefaultState = {};\n\nexport type DBCustomSelectDropdownState = DBCustomSelectDropdownDefaultState &\n 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>DBCustomSelectDropdown</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-custom-select-dropdown">Test</div>\n </body>\n</html>\n' } } }, "custom-select-form-field": { props: "import type { GlobalProps, GlobalState } from '../../shared/model';\n\nexport type DBCustomSelectFormFieldDefaultProps = {};\n\nexport type DBCustomSelectFormFieldProps = DBCustomSelectFormFieldDefaultProps &\n GlobalProps;\n\nexport type DBCustomSelectFormFieldDefaultState = {};\n\nexport type DBCustomSelectFormFieldState = DBCustomSelectFormFieldDefaultState &\n 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>DBCustomSelectFormField</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-custom-select-form-field">Test</div>\n </body>\n</html>\n' } } }, "custom-select-list": { props: "import type { GlobalProps, GlobalState } from '../../shared/model';\n\nexport type DBCustomSelectListDefaultProps = {\n label?: string;\n multiple?: boolean;\n};\n\nexport type DBCustomSelectListProps = DBCustomSelectListDefaultProps &\n GlobalProps;\n\nexport type DBCustomSelectListDefaultState = {};\n\nexport type DBCustomSelectListState = DBCustomSelectListDefaultState &\n GlobalState;\n", examples: [], exampleCode: { react: {}, angular: {}, vue: {}, "web-components": {}, html: {} } }, "custom-select-list-item": { props: "import type {\n BaseFormProps,\n ChangeEventProps,\n ChangeEventState,\n FormCheckProps,\n GlobalProps,\n IconProps,\n ShowIconProps,\n ValueProps\n} from '../../shared/model';\n\nexport const CustomSelectListItemTypeList = ['checkbox', 'radio'] as const;\nexport type CustomSelectListItemTypeType =\n (typeof CustomSelectListItemTypeList)[number];\n\nexport type DBCustomSelectListItemExtraProps = {\n /**\n * If the item is a group title (only text)\n */\n isGroupTitle?: boolean;\n /**\n * Show a divider on the bottom of the list item for visual grouping (don't use it on every item)\n */\n showDivider?: boolean;\n} & IconProps &\n ShowIconProps;\n\nexport type DBCustomSelectListItemDefaultProps = {\n /**\n * Set the title of a group of items - disables radio/checkbox behavior\n */\n groupTitle?: string;\n /**\n * Change the behavior of the item single(radio) or multiple(checkbox)\n */\n type?: CustomSelectListItemTypeType;\n};\n\nexport type DBCustomSelectListItemProps = DBCustomSelectListItemDefaultProps &\n GlobalProps &\n BaseFormProps &\n ValueProps &\n FormCheckProps &\n ChangeEventProps<HTMLInputElement> &\n DBCustomSelectListItemExtraProps;\n\nexport type DBCustomSelectListItemDefaultState = {\n getIconTrailing: () => string | undefined;\n hasDivider?: boolean;\n};\n\nexport type DBCustomSelectListItemState = DBCustomSelectListItemDefaultState &\n ChangeEventState<HTMLInputElement>;\n", examples: [], exampleCode: { react: {}, angular: {}, vue: {}, "web-components": {}, html: {} } }, divider: { props: "import type {\n EmphasisProps,\n GlobalProps,\n GlobalState,\n MarginProps,\n WidthProps\n} from '../../shared/model';\n\nexport const DividerMarginList = ['none', '_'] as const;\nexport type DividerMarginType = (typeof DividerMarginList)[number];\n\nexport const DividerVariantList = ['horizontal', 'vertical'] as const;\nexport type DividerVariantType = (typeof DividerVariantList)[number];\n\nexport type DBDividerDefaultProps = {\n /**\n * Removes the margin of the divider.\n */\n margin?: DividerMarginType;\n /**\n * Changes the orientation of the divider.\n */\n variant?: DividerVariantType;\n};\n\nexport type DBDividerProps = DBDividerDefaultProps &\n GlobalProps &\n EmphasisProps &\n MarginProps &\n WidthProps;\n\nexport type DBDividerDefaultState = {};\n\nexport type DBDividerState = DBDividerDefaultState & GlobalState;\n", examples: ["Density", "Variant", "Emphasis"], exampleCode: { react: { "density.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBDivider from "../divider";\n\nfunction DividerDensity(props: any) {\n return (\n <>\n <div\n data-density="functional"\n style={{\n width: "200px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n Functional\n </DBInfotext>\n <DBDivider width="full" />\n </div>\n <div\n data-density="regular"\n style={{\n width: "200px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n (Default) Regular\n </DBInfotext>\n <DBDivider width="full" />\n </div>\n <div\n data-density="expressive"\n style={{\n width: "200px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n Expressive\n </DBInfotext>\n <DBDivider width="full" />\n </div>\n </>\n );\n}\n\nexport default DividerDensity;\n', "emphasis.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBDivider from "../divider";\n\nfunction DividerEmphasis(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n (Default) Weak\n </DBInfotext>\n <DBDivider width="full" />\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n Strong\n </DBInfotext>\n <DBDivider emphasis="strong" width="full" />\n </div>\n </>\n );\n}\n\nexport default DividerEmphasis;\n', "variant.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBDivider from "../divider";\n\nfunction DividerVariant(props: any) {\n return (\n <>\n <div\n style={{\n width: "200px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n (Default) Adaptive - Horizontal\n </DBInfotext>\n <DBDivider width="full" />\n </div>\n <div\n style={{\n height: "100px",\n }}\n >\n <DBInfotext size="small" semantic="informational">\n Adaptive - Vertical\n </DBInfotext>\n <DBDivider variant="vertical" width="full" />\n </div>\n </>\n );\n}\n\nexport default DividerVariant;\n' }, angular: { "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBDivider } from "../divider";\n\n@Component({\n selector: "divider-density",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBDivider],\n template: `<ng-container\n ><div\n data-density="functional"\n [ngStyle]="{\n width: \'200px\'\n }"\n >\n <db-infotext size="small" semantic="informational">\n Functional\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n data-density="regular"\n [ngStyle]="{\n width: \'200px\'\n }"\n >\n <db-infotext size="small" semantic="informational">\n (Default) Regular\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n data-density="expressive"\n [ngStyle]="{\n width: \'200px\'\n }"\n >\n <db-infotext size="small" semantic="informational">\n Expressive\n </db-infotext>\n <db-divider width="full"></db-divider></div\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class DividerDensity 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "divider-density");\n }\n}\n', "emphasis.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBDivider } from "../divider";\n\n@Component({\n selector: "divider-emphasis",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBDivider],\n template: `<ng-container\n ><div\n [ngStyle]="{\n width: \'200px\'\n }"\n >\n <db-infotext size="small" semantic="informational">\n (Default) Weak\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n [ngStyle]="{\n width: \'200px\'\n }"\n >\n <db-infotext size="small" semantic="informational"> Strong </db-infotext>\n <db-divider emphasis="strong" width="full"></db-divider></div\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class DividerEmphasis 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "divider-emphasis");\n }\n}\n', "variant.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBDivider } from "../divider";\n\n@Component({\n selector: "divider-variant",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBDivider],\n template: `<ng-container\n ><div\n [ngStyle]="{\n width: \'200px\'\n }"\n >\n <db-infotext size="small" semantic="informational">\n (Default) Adaptive - Horizontal\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n [ngStyle]="{\n height: \'100px\'\n }"\n >\n <db-infotext size="small" semantic="informational">\n Adaptive - Vertical\n </db-infotext>\n <db-divider variant="vertical" width="full"></db-divider></div\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class DividerVariant 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "divider-variant");\n }\n}\n' }, vue: { "density.example.vue": `<template>
29738
30133
  <div
29739
30134
  data-density="functional"
29740
30135
  :style="{
@@ -29815,7 +30210,7 @@ import DBDivider from "../divider.vue";
29815
30210
  <script setup lang="ts">
29816
30211
  import DBInfotext from "../../infotext/infotext.vue";
29817
30212
  import DBDivider from "../divider.vue";
29818
- </script>` }, "web-components": { "density.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBDivider } from "../divider";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "divider-density",\n})\nexport class DividerDensity {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "divider-density");\n }\n\n render() {\n return (\n <Fragment>\n <div\n data-density="functional"\n style={{\n width: "200px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n Functional\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n data-density="regular"\n style={{\n width: "200px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n (Default) Regular\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n data-density="expressive"\n style={{\n width: "200px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n Expressive\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n </Fragment>\n );\n }\n}\n', "emphasis.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBDivider } from "../divider";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "divider-emphasis",\n})\nexport class DividerEmphasis {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "divider-emphasis");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n (Default) Weak\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n Strong\n </db-infotext>\n <db-divider emphasis="strong" width="full"></db-divider>\n </div>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBDivider } from "../divider";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "divider-variant",\n})\nexport class DividerVariant {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "divider-variant");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n (Default) Adaptive - Horizontal\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n style={{\n height: "100px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n Adaptive - Vertical\n </db-infotext>\n <db-divider variant="vertical" width="full"></db-divider>\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>DBDivider</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-divider"></div>\n </body>\n</html>\n' } } }, drawer: { props: "import type {\n ClickEvent,\n CloseEventProps,\n CloseEventState,\n GeneralKeyboardEvent,\n GlobalProps,\n GlobalState,\n InitializedState,\n InnerCloseButtonProps,\n SpacingProps,\n WidthProps\n} from '../../shared/model';\n\nexport const DrawerBackdropList = [\n 'none',\n 'strong',\n 'weak',\n 'invisible'\n] as const;\nexport type DrawerBackdropType = (typeof DrawerBackdropList)[number];\n\nexport const DrawerDirectionList = ['left', 'right', 'up', 'down'] as const;\nexport type DrawerDirectionType = (typeof DrawerDirectionList)[number];\n\nexport const DrawerVariantList = ['modal', 'inside'] as const;\nexport type DrawerVariantType = (typeof DrawerVariantList)[number];\n\nexport const DrawerPositionList = ['fixed', 'absolute'] as const;\nexport type DrawerPositionType = (typeof DrawerPositionList)[number];\n\nexport type DBDrawerDefaultProps = {\n /**\n * The backdrop attribute changes the opacity of the backdrop.\n * The backdrop 'none' will use `dialog.show()` instead of `dialog.showModal()`\n */\n backdrop?: DrawerBackdropType;\n /**\n * The direction attribute changes the position & animation of the drawer.\n * E.g. \"left\" slides from left screen border to the right.\n */\n direction?: DrawerDirectionType;\n\n /**\n * Slot for changing the header of the drawer.\n */\n drawerHeader?: any;\n\n /**\n * The open attribute opens or closes the drawer based on the state.\n */\n open?: boolean | string;\n /**\n * The rounded attribute changes the border radius of the corners on the \"end\" of the drawer.\n * The \"end\" depends on which direction you use.\n */\n rounded?: boolean | string;\n /**\n * Set the variant modal|inside. Defaults to modal.\n */\n variant?: DrawerVariantType;\n /**\n * The position attribute changes the css-position (fixed or absolute) of the drawer.\n *\n * - `fixed` (default): Renders with `showModal()`, creating a true modal with a focus trap.\n * - `absolute`: Renders with `show()`, acting as a simple overlay **without** a focus trap.\n */\n position?: DrawerPositionType;\n};\n\nexport type DBDrawerProps = DBDrawerDefaultProps &\n GlobalProps &\n CloseEventProps<\n | ClickEvent<HTMLButtonElement | HTMLDialogElement>\n | GeneralKeyboardEvent<HTMLDialogElement>\n > &\n InnerCloseButtonProps &\n WidthProps &\n SpacingProps;\n\nexport type DBDrawerDefaultState = {\n handleDialogOpen: () => void;\n};\n\nexport type DBDrawerState = DBDrawerDefaultState &\n GlobalState &\n CloseEventState<\n | ClickEvent<HTMLButtonElement | HTMLDialogElement>\n | GeneralKeyboardEvent<HTMLDialogElement>\n > &\n InitializedState;\n", examples: ["Density", "Size", "Rounded", "Spacing", "Backdrop", "Direction", "Example"], exampleCode: { react: { "backdrop.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerBackdrop(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: (Default) Strong\n </DBButton>\n <DBDrawer\n backdrop="strong"\n open={openIndex === 0}\n onClose={(event) => setOpenIndex(-1)}\n >\n (Default) Strong\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: Weak\n </DBButton>\n <DBDrawer\n backdrop="weak"\n open={openIndex === 1}\n onClose={(event) => setOpenIndex(-1)}\n >\n Weak\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(2)}\n >\n Open: Invisible\n </DBButton>\n <DBDrawer\n backdrop="invisible"\n open={openIndex === 2}\n onClose={(event) => setOpenIndex(-1)}\n >\n Invisible\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(3)}\n >\n Open: No Backdrop\n </DBButton>\n <DBDrawer\n backdrop="none"\n open={openIndex === 3}\n onClose={(event) => setOpenIndex(-1)}\n >\n No Backdrop\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerBackdrop;\n', "density.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerDensity(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div data-density="functional">\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: Functional\n </DBButton>\n <DBDrawer open={openIndex === 0} onClose={(event) => setOpenIndex(-1)}>\n Functional\n </DBDrawer>\n </div>\n <div data-density="regular">\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: (Default) Regular\n </DBButton>\n <DBDrawer open={openIndex === 1} onClose={(event) => setOpenIndex(-1)}>\n (Default) Regular\n </DBDrawer>\n </div>\n <div data-density="expressive">\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(2)}\n >\n Open: Expressive\n </DBButton>\n <DBDrawer open={openIndex === 2} onClose={(event) => setOpenIndex(-1)}>\n Expressive\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerDensity;\n', "direction.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerDirection(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: (Default) Right\n </DBButton>\n <DBDrawer open={openIndex === 0} onClose={(event) => setOpenIndex(-1)}>\n (Default) Right\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: Left\n </DBButton>\n <DBDrawer\n direction="left"\n open={openIndex === 1}\n onClose={(event) => setOpenIndex(-1)}\n >\n Left\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(2)}\n >\n Open: Up\n </DBButton>\n <DBDrawer\n direction="up"\n open={openIndex === 2}\n onClose={(event) => setOpenIndex(-1)}\n >\n Up\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(3)}\n >\n Open: Down\n </DBButton>\n <DBDrawer\n direction="down"\n open={openIndex === 3}\n onClose={(event) => setOpenIndex(-1)}\n >\n Down\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerDirection;\n', "example.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerExample(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: (Default) As modal\n </DBButton>\n <DBDrawer\n variant="modal"\n open={openIndex === 0}\n onClose={(event) => setOpenIndex(-1)}\n >\n (Default) As modal\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: Inside\n </DBButton>\n <DBDrawer\n variant="inside"\n open={openIndex === 1}\n onClose={(event) => setOpenIndex(-1)}\n >\n Inside\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerExample;\n', "rounded.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerRounded(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: (Default) False\n </DBButton>\n <DBDrawer\n rounded={false}\n open={openIndex === 0}\n onClose={(event) => setOpenIndex(-1)}\n >\n (Default) False\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: True\n </DBButton>\n <DBDrawer\n rounded\n open={openIndex === 1}\n onClose={(event) => setOpenIndex(-1)}\n >\n True\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerRounded;\n', "size.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerSize(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: (Default) Medium\n </DBButton>\n <DBDrawer open={openIndex === 0} onClose={(event) => setOpenIndex(-1)}>\n (Default) Medium\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: Full\n </DBButton>\n <DBDrawer\n width="full"\n open={openIndex === 1}\n onClose={(event) => setOpenIndex(-1)}\n >\n Full\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerSize;\n', "spacing.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerSpacing(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: (Default) Medium\n </DBButton>\n <DBDrawer open={openIndex === 0} onClose={(event) => setOpenIndex(-1)}>\n (Default) Medium\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: Small\n </DBButton>\n <DBDrawer\n spacing="small"\n open={openIndex === 1}\n onClose={(event) => setOpenIndex(-1)}\n >\n Small\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(2)}\n >\n Open: Large\n </DBButton>\n <DBDrawer\n spacing="large"\n open={openIndex === 2}\n onClose={(event) => setOpenIndex(-1)}\n >\n Large\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(3)}\n >\n Open: None\n </DBButton>\n <DBDrawer\n spacing="none"\n open={openIndex === 3}\n onClose={(event) => setOpenIndex(-1)}\n >\n None\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerSpacing;\n' }, angular: { "backdrop.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-backdrop",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: (Default) Strong\n </db-button>\n <db-drawer\n backdrop="strong"\n [open]="openIndex() === 0"\n (close)="openIndex.set(-1)"\n >\n (Default) Strong\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: Weak\n </db-button>\n <db-drawer\n backdrop="weak"\n [open]="openIndex() === 1"\n (close)="openIndex.set(-1)"\n >\n Weak\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(2)"\n >\n Open: Invisible\n </db-button>\n <db-drawer\n backdrop="invisible"\n [open]="openIndex() === 2"\n (close)="openIndex.set(-1)"\n >\n Invisible\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(3)"\n >\n Open: No Backdrop\n </db-button>\n <db-drawer\n backdrop="none"\n [open]="openIndex() === 3"\n (close)="openIndex.set(-1)"\n >\n No Backdrop\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerBackdrop implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-backdrop");\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-density",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div data-density="functional">\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: Functional\n </db-button>\n <db-drawer [open]="openIndex() === 0" (close)="openIndex.set(-1)">\n Functional\n </db-drawer>\n </div>\n <div data-density="regular">\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: (Default) Regular\n </db-button>\n <db-drawer [open]="openIndex() === 1" (close)="openIndex.set(-1)">\n (Default) Regular\n </db-drawer>\n </div>\n <div data-density="expressive">\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(2)"\n >\n Open: Expressive\n </db-button>\n <db-drawer [open]="openIndex() === 2" (close)="openIndex.set(-1)">\n Expressive\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-density");\n }\n}\n', "direction.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-direction",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: (Default) Right\n </db-button>\n <db-drawer [open]="openIndex() === 0" (close)="openIndex.set(-1)">\n (Default) Right\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: Left\n </db-button>\n <db-drawer\n direction="left"\n [open]="openIndex() === 1"\n (close)="openIndex.set(-1)"\n >\n Left\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(2)"\n >\n Open: Up\n </db-button>\n <db-drawer\n direction="up"\n [open]="openIndex() === 2"\n (close)="openIndex.set(-1)"\n >\n Up\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(3)"\n >\n Open: Down\n </db-button>\n <db-drawer\n direction="down"\n [open]="openIndex() === 3"\n (close)="openIndex.set(-1)"\n >\n Down\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerDirection implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-direction");\n }\n}\n', "example.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-example",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: (Default) As modal\n </db-button>\n <db-drawer\n variant="modal"\n [open]="openIndex() === 0"\n (close)="openIndex.set(-1)"\n >\n (Default) As modal\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: Inside\n </db-button>\n <db-drawer\n variant="inside"\n [open]="openIndex() === 1"\n (close)="openIndex.set(-1)"\n >\n Inside\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerExample implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-example");\n }\n}\n', "rounded.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-rounded",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: (Default) False\n </db-button>\n <db-drawer\n [rounded]="false"\n [open]="openIndex() === 0"\n (close)="openIndex.set(-1)"\n >\n (Default) False\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: True\n </db-button>\n <db-drawer\n [rounded]="true"\n [open]="openIndex() === 1"\n (close)="openIndex.set(-1)"\n >\n True\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerRounded implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-rounded");\n }\n}\n', "size.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-size",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: (Default) Medium\n </db-button>\n <db-drawer [open]="openIndex() === 0" (close)="openIndex.set(-1)">\n (Default) Medium\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: Full\n </db-button>\n <db-drawer\n width="full"\n [open]="openIndex() === 1"\n (close)="openIndex.set(-1)"\n >\n Full\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerSize implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-size");\n }\n}\n', "spacing.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-spacing",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: (Default) Medium\n </db-button>\n <db-drawer [open]="openIndex() === 0" (close)="openIndex.set(-1)">\n (Default) Medium\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: Small\n </db-button>\n <db-drawer\n spacing="small"\n [open]="openIndex() === 1"\n (close)="openIndex.set(-1)"\n >\n Small\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(2)"\n >\n Open: Large\n </db-button>\n <db-drawer\n spacing="large"\n [open]="openIndex() === 2"\n (close)="openIndex.set(-1)"\n >\n Large\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(3)"\n >\n Open: None\n </db-button>\n <db-drawer\n spacing="none"\n [open]="openIndex() === 3"\n (close)="openIndex.set(-1)"\n >\n None\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerSpacing implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-spacing");\n }\n}\n' }, vue: { "backdrop.example.vue": '<template>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: (Default) Strong </DBButton\n ><DBDrawer\n backdrop="strong"\n :open="openIndex === 0"\n :onClose="(event) => (openIndex = -1)"\n >\n (Default) Strong\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: Weak </DBButton\n ><DBDrawer\n backdrop="weak"\n :open="openIndex === 1"\n :onClose="(event) => (openIndex = -1)"\n >\n Weak\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 2)"\n >\n Open: Invisible </DBButton\n ><DBDrawer\n backdrop="invisible"\n :open="openIndex === 2"\n :onClose="(event) => (openIndex = -1)"\n >\n Invisible\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 3)"\n >\n Open: No Backdrop </DBButton\n ><DBDrawer\n backdrop="none"\n :open="openIndex === 3"\n :onClose="(event) => (openIndex = -1)"\n >\n No Backdrop\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>', "density.example.vue": '<template>\n <div data-density="functional">\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: Functional </DBButton\n ><DBDrawer :open="openIndex === 0" :onClose="(event) => (openIndex = -1)">\n Functional\n </DBDrawer>\n </div>\n <div data-density="regular">\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: (Default) Regular </DBButton\n ><DBDrawer :open="openIndex === 1" :onClose="(event) => (openIndex = -1)">\n (Default) Regular\n </DBDrawer>\n </div>\n <div data-density="expressive">\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 2)"\n >\n Open: Expressive </DBButton\n ><DBDrawer :open="openIndex === 2" :onClose="(event) => (openIndex = -1)">\n Expressive\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>', "direction.example.vue": '<template>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: (Default) Right </DBButton\n ><DBDrawer :open="openIndex === 0" :onClose="(event) => (openIndex = -1)">\n (Default) Right\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: Left </DBButton\n ><DBDrawer\n direction="left"\n :open="openIndex === 1"\n :onClose="(event) => (openIndex = -1)"\n >\n Left\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 2)"\n >\n Open: Up </DBButton\n ><DBDrawer\n direction="up"\n :open="openIndex === 2"\n :onClose="(event) => (openIndex = -1)"\n >\n Up\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 3)"\n >\n Open: Down </DBButton\n ><DBDrawer\n direction="down"\n :open="openIndex === 3"\n :onClose="(event) => (openIndex = -1)"\n >\n Down\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>', "example.example.vue": '<template>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: (Default) As modal </DBButton\n ><DBDrawer\n variant="modal"\n :open="openIndex === 0"\n :onClose="(event) => (openIndex = -1)"\n >\n (Default) As modal\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: Inside </DBButton\n ><DBDrawer\n variant="inside"\n :open="openIndex === 1"\n :onClose="(event) => (openIndex = -1)"\n >\n Inside\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>', "rounded.example.vue": '<template>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: (Default) False </DBButton\n ><DBDrawer\n :rounded="false"\n :open="openIndex === 0"\n :onClose="(event) => (openIndex = -1)"\n >\n (Default) False\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: True </DBButton\n ><DBDrawer\n :rounded="true"\n :open="openIndex === 1"\n :onClose="(event) => (openIndex = -1)"\n >\n True\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>', "size.example.vue": '<template>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: (Default) Medium </DBButton\n ><DBDrawer :open="openIndex === 0" :onClose="(event) => (openIndex = -1)">\n (Default) Medium\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: Full </DBButton\n ><DBDrawer\n width="full"\n :open="openIndex === 1"\n :onClose="(event) => (openIndex = -1)"\n >\n Full\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>', "spacing.example.vue": '<template>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: (Default) Medium </DBButton\n ><DBDrawer :open="openIndex === 0" :onClose="(event) => (openIndex = -1)">\n (Default) Medium\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: Small </DBButton\n ><DBDrawer\n spacing="small"\n :open="openIndex === 1"\n :onClose="(event) => (openIndex = -1)"\n >\n Small\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 2)"\n >\n Open: Large </DBButton\n ><DBDrawer\n spacing="large"\n :open="openIndex === 2"\n :onClose="(event) => (openIndex = -1)"\n >\n Large\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 3)"\n >\n Open: None </DBButton\n ><DBDrawer\n spacing="none"\n :open="openIndex === 3"\n :onClose="(event) => (openIndex = -1)"\n >\n None\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>' }, "web-components": { "backdrop.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-backdrop",\n})\nexport class DrawerBackdrop {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-backdrop");\n }\n\n render() {\n return (\n <Fragment>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: (Default) Strong\n </db-button>\n <db-drawer\n backdrop="strong"\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) Strong\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: Weak\n </db-button>\n <db-drawer\n backdrop="weak"\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n Weak\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 2)}\n >\n Open: Invisible\n </db-button>\n <db-drawer\n backdrop="invisible"\n open={this.openIndex === 2}\n onClose={() => (this.openIndex = -1)}\n >\n Invisible\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 3)}\n >\n Open: No Backdrop\n </db-button>\n <db-drawer\n backdrop="none"\n open={this.openIndex === 3}\n onClose={() => (this.openIndex = -1)}\n >\n No Backdrop\n </db-drawer>\n </div>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-density",\n})\nexport class DrawerDensity {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-density");\n }\n\n render() {\n return (\n <Fragment>\n <div data-density="functional">\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: Functional\n </db-button>\n <db-drawer\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n Functional\n </db-drawer>\n </div>\n <div data-density="regular">\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: (Default) Regular\n </db-button>\n <db-drawer\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) Regular\n </db-drawer>\n </div>\n <div data-density="expressive">\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 2)}\n >\n Open: Expressive\n </db-button>\n <db-drawer\n open={this.openIndex === 2}\n onClose={() => (this.openIndex = -1)}\n >\n Expressive\n </db-drawer>\n </div>\n </Fragment>\n );\n }\n}\n', "direction.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-direction",\n})\nexport class DrawerDirection {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-direction");\n }\n\n render() {\n return (\n <Fragment>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: (Default) Right\n </db-button>\n <db-drawer\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) Right\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: Left\n </db-button>\n <db-drawer\n direction="left"\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n Left\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 2)}\n >\n Open: Up\n </db-button>\n <db-drawer\n direction="up"\n open={this.openIndex === 2}\n onClose={() => (this.openIndex = -1)}\n >\n Up\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 3)}\n >\n Open: Down\n </db-button>\n <db-drawer\n direction="down"\n open={this.openIndex === 3}\n onClose={() => (this.openIndex = -1)}\n >\n Down\n </db-drawer>\n </div>\n </Fragment>\n );\n }\n}\n', "example.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-example",\n})\nexport class DrawerExample {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-example");\n }\n\n render() {\n return (\n <Fragment>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: (Default) As modal\n </db-button>\n <db-drawer\n variant="modal"\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) As modal\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: Inside\n </db-button>\n <db-drawer\n variant="inside"\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n Inside\n </db-drawer>\n </div>\n </Fragment>\n );\n }\n}\n', "rounded.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-rounded",\n})\nexport class DrawerRounded {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-rounded");\n }\n\n render() {\n return (\n <Fragment>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: (Default) False\n </db-button>\n <db-drawer\n rounded={false}\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) False\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: True\n </db-button>\n <db-drawer\n rounded={true}\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n True\n </db-drawer>\n </div>\n </Fragment>\n );\n }\n}\n', "size.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-size",\n})\nexport class DrawerSize {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-size");\n }\n\n render() {\n return (\n <Fragment>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: (Default) Medium\n </db-button>\n <db-drawer\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) Medium\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: Full\n </db-button>\n <db-drawer\n width="full"\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n Full\n </db-drawer>\n </div>\n </Fragment>\n );\n }\n}\n', "spacing.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-spacing",\n})\nexport class DrawerSpacing {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-spacing");\n }\n\n render() {\n return (\n <Fragment>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: (Default) Medium\n </db-button>\n <db-drawer\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) Medium\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: Small\n </db-button>\n <db-drawer\n spacing="small"\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n Small\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 2)}\n >\n Open: Large\n </db-button>\n <db-drawer\n spacing="large"\n open={this.openIndex === 2}\n onClose={() => (this.openIndex = -1)}\n >\n Large\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 3)}\n >\n Open: None\n </db-button>\n <db-drawer\n spacing="none"\n open={this.openIndex === 3}\n onClose={() => (this.openIndex = -1)}\n >\n None\n </db-drawer>\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>DBDrawer</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <dialog class="db-drawer" data-backdrop="true" open>\n <article class="db-drawer-container">\n <header class="db-drawer-header">\n <button\n class="db-button button-close-drawer is-icon-text-replace"\n data-icon="cross"\n data-variant="ghost"\n >\n Close Button\n </button>\n </header>\n <div class="db-drawer-content">My Drawer content</div>\n </article>\n </dialog>\n </body>\n</html>\n' } } }, header: { props: "import type {\n ContainerWidthProps,\n GlobalProps,\n GlobalState,\n InitializedState,\n InnerCloseButtonProps,\n NavigationBehaviorState,\n ToggleEventProps,\n ToggleEventState\n} from '../../shared/model';\n\nexport type DBHeaderDefaultProps = {\n /**\n * Slot to pass in the DBBrand component\n */\n brand?: any;\n /**\n * Slot to pass in a meta navigation.\n * - Desktop: Above the regular header\n * - Mobile: Inside the drawer\n */\n metaNavigation?: any;\n /**\n * Slot to pass one or more elements like DBButton (e.g. search) as primary action.\n * - Desktop: Shown next to the main-navigation\n * - Mobile: Shown next to the brand\n */\n primaryAction?: any;\n /**\n * Slot to pass one or more elements like DBButton (e.g. profile, language, etc.) as secondary action.\n * - Desktop: Shown separated by divider at the end of the header\n * - Mobile: Shown inside the drawer at the bottom.\n */\n secondaryAction?: any;\n\n /**\n * Open/closes the drawer for mobile header or if `forceMobile` is true.\n */\n drawerOpen?: boolean | string;\n\n /**\n * Forces the header to use mobile layout for desktop as well.\n * You should only use this setting if you really can't provide a smaller navigation.\n * Overwrite size of the drawer with '--db-drawer-max-width: xxx'\n */\n forceMobile?: boolean | string;\n\n /**\n * This attribute sets the label for the burger menu button for mobile headers.\n */\n burgerMenuLabel?: string;\n};\n\nexport type DBHeaderProps = DBHeaderDefaultProps &\n InnerCloseButtonProps &\n GlobalProps &\n ToggleEventProps &\n ContainerWidthProps;\n\nexport type DBHeaderDefaultState = {\n forcedToMobile?: boolean;\n};\n\nexport type DBHeaderState = DBHeaderDefaultState &\n GlobalState &\n ToggleEventState<HTMLElement> &\n InitializedState &\n NavigationBehaviorState;\n", examples: ["Density", "Width", "Behavior", "Examples"], exampleCode: { react: { "behavior.example.tsx": 'import * as React from "react";\nimport DBBrand from "../../brand/brand";\nimport DBButton from "../../button/button";\nimport DBLink from "../../link/link";\nimport DBNavigationItem from "../../navigation-item/navigation-item";\nimport DBNavigation from "../../navigation/navigation";\nimport DBHeader from "../header";\n\nfunction HeaderBehavior(props: any) {\n return (\n <>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Desktop (full width)" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Desktop (full width)</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Desktop (full width) disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n forceMobile="true"\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Mobile" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Mobile</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Mobile disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n </>\n );\n}\n\nexport default HeaderBehavior;\n', "density.example.tsx": 'import * as React from "react";\nimport DBBrand from "../../brand/brand";\nimport DBButton from "../../button/button";\nimport DBLink from "../../link/link";\nimport DBNavigationItem from "../../navigation-item/navigation-item";\nimport DBNavigation from "../../navigation/navigation";\nimport DBHeader from "../header";\n\nfunction HeaderDensity(props: any) {\n return (\n <>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n data-density="functional"\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Functional" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Functional</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Functional disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n data-density="regular"\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="(Default) Regular" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">(Default) Regular</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">(Default) Regular disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n data-density="expressive"\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Expressive" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Expressive</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Expressive disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n </>\n );\n}\n\nexport default HeaderDensity;\n', "examples.example.tsx": 'import * as React from "react";\nimport DBBrand from "../../brand/brand";\nimport DBNavigationItem from "../../navigation-item/navigation-item";\nimport DBNavigation from "../../navigation/navigation";\nimport DBHeader from "../header";\n\nfunction HeaderExamples(props: any) {\n return (\n <>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader brand={<DBBrand>DBHeader</DBBrand>}>\n <DBNavigation aria-label="With Application Name + Navigation" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">With Application Name + Navigation</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">With Application Name + Navigation disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader brand={<DBBrand>DBHeader</DBBrand>} />\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader brand={<DBBrand />}>\n <DBNavigation aria-label="Without Application Name" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Without Application Name</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Without Application Name disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader brand={<DBBrand />} />\n </div>\n </>\n );\n}\n\nexport default HeaderExamples;\n', "width.example.tsx": 'import * as React from "react";\nimport DBBrand from "../../brand/brand";\nimport DBButton from "../../button/button";\nimport DBLink from "../../link/link";\nimport DBNavigationItem from "../../navigation-item/navigation-item";\nimport DBNavigation from "../../navigation/navigation";\nimport DBHeader from "../header";\n\nfunction HeaderWidth(props: any) {\n return (\n <>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Full" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Full</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Full disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n width="medium"\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Medium" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Medium</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Medium disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n width="large"\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Large" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Large</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Large disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n </>\n );\n}\n\nexport default HeaderWidth;\n' }, angular: { "behavior.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBBrand } from "../../brand/brand";\nimport { DBButton } from "../../button/button";\nimport { DBLink } from "../../link/link";\nimport { DBNavigationItem } from "../../navigation-item/navigation-item";\nimport { DBNavigation } from "../../navigation/navigation";\nimport { DBHeader } from "../header";\nimport { MetaNavigationDirective } from "../MetaNavigation.directive";\nimport { NavigationDirective } from "../Navigation.directive";\nimport { SecondaryActionDirective } from "../SecondaryAction.directive";\nimport { NavigationContentDirective } from "../../navigation-item/NavigationContent.directive";\n\n@Component({\n selector: "header-behavior",\n standalone: true,\n imports: [\n NavigationContentDirective,\n MetaNavigationDirective,NavigationDirective,SecondaryActionDirective,\n CommonModule,\n DBHeader,\n DBNavigation,\n DBNavigationItem,\n DBBrand,\n DBLink,\n DBButton,\n ],\n template: `<ng-container\n ><div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header\n ><db-navigation *dbNavigation aria-label="Desktop (full width)"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Desktop (full width)</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Desktop (full width) disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header forceMobile="true"\n ><db-navigation *dbNavigation aria-label="Mobile"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Mobile</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Mobile disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class HeaderBehavior 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "header-behavior");\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBBrand } from "../../brand/brand";\nimport { DBButton } from "../../button/button";\nimport { DBLink } from "../../link/link";\nimport { DBNavigationItem } from "../../navigation-item/navigation-item";\nimport { DBNavigation } from "../../navigation/navigation";\nimport { DBHeader } from "../header";\nimport { MetaNavigationDirective } from "../MetaNavigation.directive";\nimport { NavigationDirective } from "../Navigation.directive";\nimport { SecondaryActionDirective } from "../SecondaryAction.directive";\nimport { NavigationContentDirective } from "../../navigation-item/NavigationContent.directive";\n\n@Component({\n selector: "header-density",\n standalone: true,\n imports: [\n NavigationContentDirective,\n MetaNavigationDirective,NavigationDirective,SecondaryActionDirective,\n CommonModule,\n DBHeader,\n DBNavigation,\n DBNavigationItem,\n DBBrand,\n DBLink,\n DBButton,\n ],\n template: `<ng-container\n ><div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header data-density="functional"\n ><db-navigation *dbNavigation aria-label="Functional"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Functional</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Functional disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header data-density="regular"\n ><db-navigation *dbNavigation aria-label="(Default) Regular"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>(Default) Regular</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>(Default) Regular disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header data-density="expressive"\n ><db-navigation *dbNavigation aria-label="Expressive"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Expressive</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Expressive disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class HeaderDensity 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "header-density");\n }\n}\n', "examples.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBBrand } from "../../brand/brand";\nimport { DBNavigationItem } from "../../navigation-item/navigation-item";\nimport { DBNavigation } from "../../navigation/navigation";\nimport { DBHeader } from "../header";\nimport { MetaNavigationDirective } from "../MetaNavigation.directive";\nimport { NavigationDirective } from "../Navigation.directive";\nimport { SecondaryActionDirective } from "../SecondaryAction.directive";\nimport { NavigationContentDirective } from "../../navigation-item/NavigationContent.directive";\n\n@Component({\n selector: "header-examples",\n standalone: true,\n imports: [\n NavigationContentDirective,\n MetaNavigationDirective,NavigationDirective,SecondaryActionDirective,CommonModule, DBHeader, DBNavigation, DBNavigationItem, DBBrand],\n template: `<ng-container\n ><div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header\n ><db-navigation *dbNavigation aria-label="With Application Name + Navigation"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent\n >With Application Name + Navigation</a\n ></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>\n With Application Name + Navigation disabled\n </a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand\n ><db-brand>DBHeader</db-brand></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header\n ><ng-container brand\n ><db-brand>DBHeader</db-brand></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header\n ><db-navigation *dbNavigation aria-label="Without Application Name"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Without Application Name</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent\n >Without Application Name disabled</a\n ></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand></db-brand></ng-container\n ></db-header>\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header\n ><ng-container brand><db-brand></db-brand></ng-container\n ></db-header></div\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class HeaderExamples 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "header-examples");\n }\n}\n', "width.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBBrand } from "../../brand/brand";\nimport { DBButton } from "../../button/button";\nimport { DBLink } from "../../link/link";\nimport { DBNavigationItem } from "../../navigation-item/navigation-item";\nimport { DBNavigation } from "../../navigation/navigation";\nimport { DBHeader } from "../header";\nimport { MetaNavigationDirective } from "../MetaNavigation.directive";\nimport { NavigationDirective } from "../Navigation.directive";\nimport { SecondaryActionDirective } from "../SecondaryAction.directive";\nimport { NavigationContentDirective } from "../../navigation-item/NavigationContent.directive";\n\n@Component({\n selector: "header-width",\n standalone: true,\n imports: [\n NavigationContentDirective,\n MetaNavigationDirective,NavigationDirective,SecondaryActionDirective,\n CommonModule,\n DBHeader,\n DBNavigation,\n DBNavigationItem,\n DBBrand,\n DBLink,\n DBButton,\n ],\n template: `<ng-container\n ><div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header\n ><db-navigation *dbNavigation aria-label="Full"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Full</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Full disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header width="medium"\n ><db-navigation *dbNavigation aria-label="Medium"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Medium</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Medium disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header width="large"\n ><db-navigation *dbNavigation aria-label="Large"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Large</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Large disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class HeaderWidth 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "header-width");\n }\n}\n' }, vue: { "behavior.example.vue": `<template>
30213
+ </script>` }, "web-components": { "density.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBDivider } from "../divider";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "divider-density",\n})\nexport class DividerDensity {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "divider-density");\n }\n\n render() {\n return (\n <Fragment>\n <div\n data-density="functional"\n style={{\n width: "200px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n Functional\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n data-density="regular"\n style={{\n width: "200px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n (Default) Regular\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n data-density="expressive"\n style={{\n width: "200px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n Expressive\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n </Fragment>\n );\n }\n}\n', "emphasis.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBDivider } from "../divider";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "divider-emphasis",\n})\nexport class DividerEmphasis {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "divider-emphasis");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n (Default) Weak\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n Strong\n </db-infotext>\n <db-divider emphasis="strong" width="full"></db-divider>\n </div>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBDivider } from "../divider";\n\nimport { Component, h, Fragment , Element } from "@stencil/core";\n\n@Component({\n tag: "divider-variant",\n})\nexport class DividerVariant {\n @Element() rootElement: HTMLElement;\nprivate _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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "divider-variant");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "200px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n (Default) Adaptive - Horizontal\n </db-infotext>\n <db-divider width="full"></db-divider>\n </div>\n <div\n style={{\n height: "100px",\n }}\n >\n <db-infotext size="small" semantic="informational">\n Adaptive - Vertical\n </db-infotext>\n <db-divider variant="vertical" width="full"></db-divider>\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>DBDivider</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-divider"></div>\n </body>\n</html>\n' } } }, drawer: { props: "import type {\n ClickEvent,\n CloseEventProps,\n CloseEventState,\n GeneralKeyboardEvent,\n GlobalProps,\n GlobalState,\n InitializedState,\n InnerCloseButtonProps,\n SpacingProps,\n WidthProps\n} from '../../shared/model';\n\nexport const DrawerBackdropList = [\n 'none',\n 'strong',\n 'weak',\n 'invisible'\n] as const;\nexport type DrawerBackdropType = (typeof DrawerBackdropList)[number];\n\nexport const DrawerDirectionList = ['left', 'right', 'up', 'down'] as const;\nexport type DrawerDirectionType = (typeof DrawerDirectionList)[number];\n\nexport const DrawerVariantList = ['modal', 'inside'] as const;\nexport type DrawerVariantType = (typeof DrawerVariantList)[number];\n\nexport const DrawerPositionList = ['fixed', 'absolute'] as const;\nexport type DrawerPositionType = (typeof DrawerPositionList)[number];\n\nexport type DBDrawerDefaultProps = {\n /**\n * The backdrop attribute changes the opacity of the backdrop.\n * The backdrop 'none' will use `dialog.show()` instead of `dialog.showModal()`\n */\n backdrop?: DrawerBackdropType;\n /**\n * The direction attribute changes the position & animation of the drawer.\n * E.g. \"left\" slides from left screen border to the right.\n */\n direction?: DrawerDirectionType;\n\n /**\n * Slot for changing the header of the drawer.\n */\n drawerHeader?: any;\n\n /**\n * The open attribute opens or closes the drawer based on the state.\n */\n open?: boolean | string;\n /**\n * The rounded attribute changes the border radius of the corners on the \"end\" of the drawer.\n * The \"end\" depends on which direction you use.\n */\n rounded?: boolean | string;\n /**\n * Set the variant modal|inside. Defaults to modal.\n */\n variant?: DrawerVariantType;\n /**\n * The position attribute changes the css-position (fixed or absolute) of the drawer.\n *\n * - `fixed` (default): Renders with `showModal()`, creating a true modal with a focus trap.\n * - `absolute`: Renders with `show()`, acting as a simple overlay **without** a focus trap.\n */\n position?: DrawerPositionType;\n};\n\nexport type DBDrawerProps = DBDrawerDefaultProps &\n GlobalProps &\n CloseEventProps<\n | ClickEvent<HTMLButtonElement | HTMLDialogElement>\n | GeneralKeyboardEvent<HTMLDialogElement>\n > &\n InnerCloseButtonProps &\n WidthProps &\n SpacingProps;\n\nexport type DBDrawerDefaultState = {\n handleDialogOpen: () => void;\n isNotModal: () => boolean;\n handleBackdropPointerDown: (event: any) => void;\n backdropPointerDown: boolean;\n};\n\nexport type DBDrawerState = DBDrawerDefaultState &\n GlobalState &\n CloseEventState<\n | ClickEvent<HTMLButtonElement | HTMLDialogElement>\n | GeneralKeyboardEvent<HTMLDialogElement>\n > &\n InitializedState;\n", examples: ["Density", "Size", "Rounded", "Spacing", "Backdrop", "Direction", "Example"], exampleCode: { react: { "backdrop.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerBackdrop(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: (Default) Strong\n </DBButton>\n <DBDrawer\n backdrop="strong"\n open={openIndex === 0}\n onClose={(event) => setOpenIndex(-1)}\n >\n (Default) Strong\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: Weak\n </DBButton>\n <DBDrawer\n backdrop="weak"\n open={openIndex === 1}\n onClose={(event) => setOpenIndex(-1)}\n >\n Weak\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(2)}\n >\n Open: Invisible\n </DBButton>\n <DBDrawer\n backdrop="invisible"\n open={openIndex === 2}\n onClose={(event) => setOpenIndex(-1)}\n >\n Invisible\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(3)}\n >\n Open: No Backdrop\n </DBButton>\n <DBDrawer\n backdrop="none"\n open={openIndex === 3}\n onClose={(event) => setOpenIndex(-1)}\n >\n No Backdrop\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerBackdrop;\n', "density.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerDensity(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div data-density="functional">\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: Functional\n </DBButton>\n <DBDrawer open={openIndex === 0} onClose={(event) => setOpenIndex(-1)}>\n Functional\n </DBDrawer>\n </div>\n <div data-density="regular">\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: (Default) Regular\n </DBButton>\n <DBDrawer open={openIndex === 1} onClose={(event) => setOpenIndex(-1)}>\n (Default) Regular\n </DBDrawer>\n </div>\n <div data-density="expressive">\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(2)}\n >\n Open: Expressive\n </DBButton>\n <DBDrawer open={openIndex === 2} onClose={(event) => setOpenIndex(-1)}>\n Expressive\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerDensity;\n', "direction.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerDirection(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: (Default) Right\n </DBButton>\n <DBDrawer open={openIndex === 0} onClose={(event) => setOpenIndex(-1)}>\n (Default) Right\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: Left\n </DBButton>\n <DBDrawer\n direction="left"\n open={openIndex === 1}\n onClose={(event) => setOpenIndex(-1)}\n >\n Left\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(2)}\n >\n Open: Up\n </DBButton>\n <DBDrawer\n direction="up"\n open={openIndex === 2}\n onClose={(event) => setOpenIndex(-1)}\n >\n Up\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(3)}\n >\n Open: Down\n </DBButton>\n <DBDrawer\n direction="down"\n open={openIndex === 3}\n onClose={(event) => setOpenIndex(-1)}\n >\n Down\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerDirection;\n', "example.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerExample(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: (Default) As modal\n </DBButton>\n <DBDrawer\n variant="modal"\n open={openIndex === 0}\n onClose={(event) => setOpenIndex(-1)}\n >\n (Default) As modal\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: Inside\n </DBButton>\n <DBDrawer\n variant="inside"\n open={openIndex === 1}\n onClose={(event) => setOpenIndex(-1)}\n >\n Inside\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerExample;\n', "rounded.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerRounded(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: (Default) False\n </DBButton>\n <DBDrawer\n rounded={false}\n open={openIndex === 0}\n onClose={(event) => setOpenIndex(-1)}\n >\n (Default) False\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: True\n </DBButton>\n <DBDrawer\n rounded\n open={openIndex === 1}\n onClose={(event) => setOpenIndex(-1)}\n >\n True\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerRounded;\n', "size.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerSize(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: (Default) Medium\n </DBButton>\n <DBDrawer open={openIndex === 0} onClose={(event) => setOpenIndex(-1)}>\n (Default) Medium\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: Full\n </DBButton>\n <DBDrawer\n width="full"\n open={openIndex === 1}\n onClose={(event) => setOpenIndex(-1)}\n >\n Full\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerSize;\n', "spacing.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBButton from "../../button/button";\nimport DBDrawer from "../drawer";\n\nfunction DrawerSpacing(props: any) {\n const [openIndex, setOpenIndex] = useState<number>(() => -1);\n\n return (\n <>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(0)}\n >\n Open: (Default) Medium\n </DBButton>\n <DBDrawer open={openIndex === 0} onClose={(event) => setOpenIndex(-1)}>\n (Default) Medium\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(1)}\n >\n Open: Small\n </DBButton>\n <DBDrawer\n spacing="small"\n open={openIndex === 1}\n onClose={(event) => setOpenIndex(-1)}\n >\n Small\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(2)}\n >\n Open: Large\n </DBButton>\n <DBDrawer\n spacing="large"\n open={openIndex === 2}\n onClose={(event) => setOpenIndex(-1)}\n >\n Large\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={(event) => setOpenIndex(3)}\n >\n Open: None\n </DBButton>\n <DBDrawer\n spacing="none"\n open={openIndex === 3}\n onClose={(event) => setOpenIndex(-1)}\n >\n None\n </DBDrawer>\n </div>\n </>\n );\n}\n\nexport default DrawerSpacing;\n' }, angular: { "backdrop.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-backdrop",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: (Default) Strong\n </db-button>\n <db-drawer\n backdrop="strong"\n [open]="openIndex() === 0"\n (close)="openIndex.set(-1)"\n >\n (Default) Strong\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: Weak\n </db-button>\n <db-drawer\n backdrop="weak"\n [open]="openIndex() === 1"\n (close)="openIndex.set(-1)"\n >\n Weak\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(2)"\n >\n Open: Invisible\n </db-button>\n <db-drawer\n backdrop="invisible"\n [open]="openIndex() === 2"\n (close)="openIndex.set(-1)"\n >\n Invisible\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(3)"\n >\n Open: No Backdrop\n </db-button>\n <db-drawer\n backdrop="none"\n [open]="openIndex() === 3"\n (close)="openIndex.set(-1)"\n >\n No Backdrop\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerBackdrop implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-backdrop");\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-density",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div data-density="functional">\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: Functional\n </db-button>\n <db-drawer [open]="openIndex() === 0" (close)="openIndex.set(-1)">\n Functional\n </db-drawer>\n </div>\n <div data-density="regular">\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: (Default) Regular\n </db-button>\n <db-drawer [open]="openIndex() === 1" (close)="openIndex.set(-1)">\n (Default) Regular\n </db-drawer>\n </div>\n <div data-density="expressive">\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(2)"\n >\n Open: Expressive\n </db-button>\n <db-drawer [open]="openIndex() === 2" (close)="openIndex.set(-1)">\n Expressive\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-density");\n }\n}\n', "direction.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-direction",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: (Default) Right\n </db-button>\n <db-drawer [open]="openIndex() === 0" (close)="openIndex.set(-1)">\n (Default) Right\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: Left\n </db-button>\n <db-drawer\n direction="left"\n [open]="openIndex() === 1"\n (close)="openIndex.set(-1)"\n >\n Left\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(2)"\n >\n Open: Up\n </db-button>\n <db-drawer\n direction="up"\n [open]="openIndex() === 2"\n (close)="openIndex.set(-1)"\n >\n Up\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(3)"\n >\n Open: Down\n </db-button>\n <db-drawer\n direction="down"\n [open]="openIndex() === 3"\n (close)="openIndex.set(-1)"\n >\n Down\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerDirection implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-direction");\n }\n}\n', "example.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-example",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: (Default) As modal\n </db-button>\n <db-drawer\n variant="modal"\n [open]="openIndex() === 0"\n (close)="openIndex.set(-1)"\n >\n (Default) As modal\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: Inside\n </db-button>\n <db-drawer\n variant="inside"\n [open]="openIndex() === 1"\n (close)="openIndex.set(-1)"\n >\n Inside\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerExample implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-example");\n }\n}\n', "rounded.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-rounded",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: (Default) False\n </db-button>\n <db-drawer\n [rounded]="false"\n [open]="openIndex() === 0"\n (close)="openIndex.set(-1)"\n >\n (Default) False\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: True\n </db-button>\n <db-drawer\n [rounded]="true"\n [open]="openIndex() === 1"\n (close)="openIndex.set(-1)"\n >\n True\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerRounded implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-rounded");\n }\n}\n', "size.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-size",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: (Default) Medium\n </db-button>\n <db-drawer [open]="openIndex() === 0" (close)="openIndex.set(-1)">\n (Default) Medium\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: Full\n </db-button>\n <db-drawer\n width="full"\n [open]="openIndex() === 1"\n (close)="openIndex.set(-1)"\n >\n Full\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerSize implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-size");\n }\n}\n', "spacing.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\n@Component({\n selector: "drawer-spacing",\n standalone: true,\n imports: [CommonModule, DBButton, DBDrawer],\n template: `<ng-container\n ><div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(0)"\n >\n Open: (Default) Medium\n </db-button>\n <db-drawer [open]="openIndex() === 0" (close)="openIndex.set(-1)">\n (Default) Medium\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(1)"\n >\n Open: Small\n </db-button>\n <db-drawer\n spacing="small"\n [open]="openIndex() === 1"\n (close)="openIndex.set(-1)"\n >\n Small\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(2)"\n >\n Open: Large\n </db-button>\n <db-drawer\n spacing="large"\n [open]="openIndex() === 2"\n (close)="openIndex.set(-1)"\n >\n Large\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n (click)="openIndex.set(3)"\n >\n Open: None\n </db-button>\n <db-drawer\n spacing="none"\n [open]="openIndex() === 3"\n (close)="openIndex.set(-1)"\n >\n None\n </db-drawer>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class DrawerSpacing implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n openIndex = signal<number>(-1);\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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "drawer-spacing");\n }\n}\n' }, vue: { "backdrop.example.vue": '<template>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: (Default) Strong </DBButton\n ><DBDrawer\n backdrop="strong"\n :open="openIndex === 0"\n :onClose="(event) => (openIndex = -1)"\n >\n (Default) Strong\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: Weak </DBButton\n ><DBDrawer\n backdrop="weak"\n :open="openIndex === 1"\n :onClose="(event) => (openIndex = -1)"\n >\n Weak\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 2)"\n >\n Open: Invisible </DBButton\n ><DBDrawer\n backdrop="invisible"\n :open="openIndex === 2"\n :onClose="(event) => (openIndex = -1)"\n >\n Invisible\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 3)"\n >\n Open: No Backdrop </DBButton\n ><DBDrawer\n backdrop="none"\n :open="openIndex === 3"\n :onClose="(event) => (openIndex = -1)"\n >\n No Backdrop\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>', "density.example.vue": '<template>\n <div data-density="functional">\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: Functional </DBButton\n ><DBDrawer :open="openIndex === 0" :onClose="(event) => (openIndex = -1)">\n Functional\n </DBDrawer>\n </div>\n <div data-density="regular">\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: (Default) Regular </DBButton\n ><DBDrawer :open="openIndex === 1" :onClose="(event) => (openIndex = -1)">\n (Default) Regular\n </DBDrawer>\n </div>\n <div data-density="expressive">\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 2)"\n >\n Open: Expressive </DBButton\n ><DBDrawer :open="openIndex === 2" :onClose="(event) => (openIndex = -1)">\n Expressive\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>', "direction.example.vue": '<template>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: (Default) Right </DBButton\n ><DBDrawer :open="openIndex === 0" :onClose="(event) => (openIndex = -1)">\n (Default) Right\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: Left </DBButton\n ><DBDrawer\n direction="left"\n :open="openIndex === 1"\n :onClose="(event) => (openIndex = -1)"\n >\n Left\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 2)"\n >\n Open: Up </DBButton\n ><DBDrawer\n direction="up"\n :open="openIndex === 2"\n :onClose="(event) => (openIndex = -1)"\n >\n Up\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 3)"\n >\n Open: Down </DBButton\n ><DBDrawer\n direction="down"\n :open="openIndex === 3"\n :onClose="(event) => (openIndex = -1)"\n >\n Down\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>', "example.example.vue": '<template>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: (Default) As modal </DBButton\n ><DBDrawer\n variant="modal"\n :open="openIndex === 0"\n :onClose="(event) => (openIndex = -1)"\n >\n (Default) As modal\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: Inside </DBButton\n ><DBDrawer\n variant="inside"\n :open="openIndex === 1"\n :onClose="(event) => (openIndex = -1)"\n >\n Inside\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>', "rounded.example.vue": '<template>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: (Default) False </DBButton\n ><DBDrawer\n :rounded="false"\n :open="openIndex === 0"\n :onClose="(event) => (openIndex = -1)"\n >\n (Default) False\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: True </DBButton\n ><DBDrawer\n :rounded="true"\n :open="openIndex === 1"\n :onClose="(event) => (openIndex = -1)"\n >\n True\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>', "size.example.vue": '<template>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: (Default) Medium </DBButton\n ><DBDrawer :open="openIndex === 0" :onClose="(event) => (openIndex = -1)">\n (Default) Medium\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: Full </DBButton\n ><DBDrawer\n width="full"\n :open="openIndex === 1"\n :onClose="(event) => (openIndex = -1)"\n >\n Full\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>', "spacing.example.vue": '<template>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 0)"\n >\n Open: (Default) Medium </DBButton\n ><DBDrawer :open="openIndex === 0" :onClose="(event) => (openIndex = -1)">\n (Default) Medium\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 1)"\n >\n Open: Small </DBButton\n ><DBDrawer\n spacing="small"\n :open="openIndex === 1"\n :onClose="(event) => (openIndex = -1)"\n >\n Small\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 2)"\n >\n Open: Large </DBButton\n ><DBDrawer\n spacing="large"\n :open="openIndex === 2"\n :onClose="(event) => (openIndex = -1)"\n >\n Large\n </DBDrawer>\n </div>\n <div>\n <DBButton\n data-sb-replace="Open DBDrawer by switching open property"\n :onClick="(event) => (openIndex = 3)"\n >\n Open: None </DBButton\n ><DBDrawer\n spacing="none"\n :open="openIndex === 3"\n :onClose="(event) => (openIndex = -1)"\n >\n None\n </DBDrawer>\n </div>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBButton from "../../button/button.vue";\nimport DBDrawer from "../drawer.vue";\n\nconst openIndex = ref<number>(-1);\n</script>' }, "web-components": { "backdrop.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-backdrop",\n})\nexport class DrawerBackdrop {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-backdrop");\n }\n\n render() {\n return (\n <Fragment>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: (Default) Strong\n </db-button>\n <db-drawer\n backdrop="strong"\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) Strong\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: Weak\n </db-button>\n <db-drawer\n backdrop="weak"\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n Weak\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 2)}\n >\n Open: Invisible\n </db-button>\n <db-drawer\n backdrop="invisible"\n open={this.openIndex === 2}\n onClose={() => (this.openIndex = -1)}\n >\n Invisible\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 3)}\n >\n Open: No Backdrop\n </db-button>\n <db-drawer\n backdrop="none"\n open={this.openIndex === 3}\n onClose={() => (this.openIndex = -1)}\n >\n No Backdrop\n </db-drawer>\n </div>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-density",\n})\nexport class DrawerDensity {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-density");\n }\n\n render() {\n return (\n <Fragment>\n <div data-density="functional">\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: Functional\n </db-button>\n <db-drawer\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n Functional\n </db-drawer>\n </div>\n <div data-density="regular">\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: (Default) Regular\n </db-button>\n <db-drawer\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) Regular\n </db-drawer>\n </div>\n <div data-density="expressive">\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 2)}\n >\n Open: Expressive\n </db-button>\n <db-drawer\n open={this.openIndex === 2}\n onClose={() => (this.openIndex = -1)}\n >\n Expressive\n </db-drawer>\n </div>\n </Fragment>\n );\n }\n}\n', "direction.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-direction",\n})\nexport class DrawerDirection {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-direction");\n }\n\n render() {\n return (\n <Fragment>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: (Default) Right\n </db-button>\n <db-drawer\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) Right\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: Left\n </db-button>\n <db-drawer\n direction="left"\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n Left\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 2)}\n >\n Open: Up\n </db-button>\n <db-drawer\n direction="up"\n open={this.openIndex === 2}\n onClose={() => (this.openIndex = -1)}\n >\n Up\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 3)}\n >\n Open: Down\n </db-button>\n <db-drawer\n direction="down"\n open={this.openIndex === 3}\n onClose={() => (this.openIndex = -1)}\n >\n Down\n </db-drawer>\n </div>\n </Fragment>\n );\n }\n}\n', "example.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-example",\n})\nexport class DrawerExample {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-example");\n }\n\n render() {\n return (\n <Fragment>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: (Default) As modal\n </db-button>\n <db-drawer\n variant="modal"\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) As modal\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: Inside\n </db-button>\n <db-drawer\n variant="inside"\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n Inside\n </db-drawer>\n </div>\n </Fragment>\n );\n }\n}\n', "rounded.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-rounded",\n})\nexport class DrawerRounded {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-rounded");\n }\n\n render() {\n return (\n <Fragment>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: (Default) False\n </db-button>\n <db-drawer\n rounded={false}\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) False\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: True\n </db-button>\n <db-drawer\n rounded={true}\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n True\n </db-drawer>\n </div>\n </Fragment>\n );\n }\n}\n', "size.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-size",\n})\nexport class DrawerSize {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-size");\n }\n\n render() {\n return (\n <Fragment>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: (Default) Medium\n </db-button>\n <db-drawer\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) Medium\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: Full\n </db-button>\n <db-drawer\n width="full"\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n Full\n </db-drawer>\n </div>\n </Fragment>\n );\n }\n}\n', "spacing.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBDrawer } from "../drawer";\n\nimport { Component, h, Fragment, State , Element } from "@stencil/core";\n\n@Component({\n tag: "drawer-spacing",\n})\nexport class DrawerSpacing {\n @Element() rootElement: HTMLElement;\nprivate _ref!: HTMLElement;\n\n @State() openIndex = -1;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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() {if(typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect){\nconst connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);\nif (connectedElement){\nconnectedElement.remove();\n}\n}\n\n this.enableAttributePassing(this._ref, "drawer-spacing");\n }\n\n render() {\n return (\n <Fragment>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 0)}\n >\n Open: (Default) Medium\n </db-button>\n <db-drawer\n open={this.openIndex === 0}\n onClose={() => (this.openIndex = -1)}\n >\n (Default) Medium\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 1)}\n >\n Open: Small\n </db-button>\n <db-drawer\n spacing="small"\n open={this.openIndex === 1}\n onClose={() => (this.openIndex = -1)}\n >\n Small\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 2)}\n >\n Open: Large\n </db-button>\n <db-drawer\n spacing="large"\n open={this.openIndex === 2}\n onClose={() => (this.openIndex = -1)}\n >\n Large\n </db-drawer>\n </div>\n <div>\n <db-button\n data-sb-replace="Open DBDrawer by switching open property"\n onClick={() => (this.openIndex = 3)}\n >\n Open: None\n </db-button>\n <db-drawer\n spacing="none"\n open={this.openIndex === 3}\n onClose={() => (this.openIndex = -1)}\n >\n None\n </db-drawer>\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>DBDrawer</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <dialog class="db-drawer" data-backdrop="true" open>\n <article class="db-drawer-container">\n <header class="db-drawer-header">\n <button\n class="db-button button-close-drawer is-icon-text-replace"\n data-icon="cross"\n data-variant="ghost"\n >\n Close Button\n </button>\n </header>\n <div class="db-drawer-content">My Drawer content</div>\n </article>\n </dialog>\n </body>\n</html>\n' } } }, header: { props: "import type {\n ContainerWidthProps,\n GlobalProps,\n GlobalState,\n InitializedState,\n InnerCloseButtonProps,\n NavigationBehaviorState,\n ToggleEventProps,\n ToggleEventState\n} from '../../shared/model';\n\nexport type DBHeaderDefaultProps = {\n /**\n * Slot to pass in the DBBrand component\n */\n brand?: any;\n /**\n * Slot to pass in a meta navigation.\n * - Desktop: Above the regular header\n * - Mobile: Inside the drawer\n */\n metaNavigation?: any;\n /**\n * Slot to pass one or more elements like DBButton (e.g. search) as primary action.\n * - Desktop: Shown next to the main-navigation\n * - Mobile: Shown next to the brand\n */\n primaryAction?: any;\n /**\n * Slot to pass one or more elements like DBButton (e.g. profile, language, etc.) as secondary action.\n * - Desktop: Shown separated by divider at the end of the header\n * - Mobile: Shown inside the drawer at the bottom.\n */\n secondaryAction?: any;\n\n /**\n * Open/closes the drawer for mobile header or if `forceMobile` is true.\n */\n drawerOpen?: boolean | string;\n\n /**\n * Forces the header to use mobile layout for desktop as well.\n * You should only use this setting if you really can't provide a smaller navigation.\n * Overwrite size of the drawer with '--db-drawer-max-width: xxx'\n */\n forceMobile?: boolean | string;\n\n /**\n * This attribute sets the label for the burger menu button for mobile headers.\n */\n burgerMenuLabel?: string;\n};\n\nexport type DBHeaderProps = DBHeaderDefaultProps &\n InnerCloseButtonProps &\n GlobalProps &\n ToggleEventProps &\n ContainerWidthProps;\n\nexport type DBHeaderDefaultState = {\n forcedToMobile?: boolean;\n};\n\nexport type DBHeaderState = DBHeaderDefaultState &\n GlobalState &\n ToggleEventState<HTMLElement> &\n InitializedState &\n NavigationBehaviorState;\n", examples: ["Density", "Width", "Behavior", "Examples"], exampleCode: { react: { "behavior.example.tsx": 'import * as React from "react";\nimport DBBrand from "../../brand/brand";\nimport DBButton from "../../button/button";\nimport DBLink from "../../link/link";\nimport DBNavigationItem from "../../navigation-item/navigation-item";\nimport DBNavigation from "../../navigation/navigation";\nimport DBHeader from "../header";\n\nfunction HeaderBehavior(props: any) {\n return (\n <>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Desktop (full width)" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Desktop (full width)</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Desktop (full width) disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n forceMobile="true"\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Mobile" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Mobile</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Mobile disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n </>\n );\n}\n\nexport default HeaderBehavior;\n', "density.example.tsx": 'import * as React from "react";\nimport DBBrand from "../../brand/brand";\nimport DBButton from "../../button/button";\nimport DBLink from "../../link/link";\nimport DBNavigationItem from "../../navigation-item/navigation-item";\nimport DBNavigation from "../../navigation/navigation";\nimport DBHeader from "../header";\n\nfunction HeaderDensity(props: any) {\n return (\n <>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n data-density="functional"\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Functional" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Functional</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Functional disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n data-density="regular"\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="(Default) Regular" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">(Default) Regular</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">(Default) Regular disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n data-density="expressive"\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Expressive" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Expressive</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Expressive disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n </>\n );\n}\n\nexport default HeaderDensity;\n', "examples.example.tsx": 'import * as React from "react";\nimport DBBrand from "../../brand/brand";\nimport DBNavigationItem from "../../navigation-item/navigation-item";\nimport DBNavigation from "../../navigation/navigation";\nimport DBHeader from "../header";\n\nfunction HeaderExamples(props: any) {\n return (\n <>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader brand={<DBBrand>DBHeader</DBBrand>}>\n <DBNavigation aria-label="With Application Name + Navigation" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">With Application Name + Navigation</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">With Application Name + Navigation disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader brand={<DBBrand>DBHeader</DBBrand>} />\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader brand={<DBBrand />}>\n <DBNavigation aria-label="Without Application Name" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Without Application Name</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Without Application Name disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader brand={<DBBrand />} />\n </div>\n </>\n );\n}\n\nexport default HeaderExamples;\n', "width.example.tsx": 'import * as React from "react";\nimport DBBrand from "../../brand/brand";\nimport DBButton from "../../button/button";\nimport DBLink from "../../link/link";\nimport DBNavigationItem from "../../navigation-item/navigation-item";\nimport DBNavigation from "../../navigation/navigation";\nimport DBHeader from "../header";\n\nfunction HeaderWidth(props: any) {\n return (\n <>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Full" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Full</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Full disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n width="medium"\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Medium" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Medium</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Medium disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <DBHeader\n width="large"\n brand={<DBBrand>DBHeader</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation aria-label="Large" {...{}}>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Large</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Large disabled</a>\n </DBNavigationItem>\n </DBNavigation>\n </DBHeader>\n </div>\n </>\n );\n}\n\nexport default HeaderWidth;\n' }, angular: { "behavior.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBBrand } from "../../brand/brand";\nimport { DBButton } from "../../button/button";\nimport { DBLink } from "../../link/link";\nimport { DBNavigationItem } from "../../navigation-item/navigation-item";\nimport { DBNavigation } from "../../navigation/navigation";\nimport { DBHeader } from "../header";\nimport { MetaNavigationDirective } from "../MetaNavigation.directive";\nimport { NavigationDirective } from "../Navigation.directive";\nimport { SecondaryActionDirective } from "../SecondaryAction.directive";\nimport { NavigationContentDirective } from "../../navigation-item/NavigationContent.directive";\n\n@Component({\n selector: "header-behavior",\n standalone: true,\n imports: [\n NavigationContentDirective,\n MetaNavigationDirective,NavigationDirective,SecondaryActionDirective,\n CommonModule,\n DBHeader,\n DBNavigation,\n DBNavigationItem,\n DBBrand,\n DBLink,\n DBButton,\n ],\n template: `<ng-container\n ><div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header\n ><db-navigation *dbNavigation aria-label="Desktop (full width)"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Desktop (full width)</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Desktop (full width) disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header forceMobile="true"\n ><db-navigation *dbNavigation aria-label="Mobile"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Mobile</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Mobile disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class HeaderBehavior 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "header-behavior");\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBBrand } from "../../brand/brand";\nimport { DBButton } from "../../button/button";\nimport { DBLink } from "../../link/link";\nimport { DBNavigationItem } from "../../navigation-item/navigation-item";\nimport { DBNavigation } from "../../navigation/navigation";\nimport { DBHeader } from "../header";\nimport { MetaNavigationDirective } from "../MetaNavigation.directive";\nimport { NavigationDirective } from "../Navigation.directive";\nimport { SecondaryActionDirective } from "../SecondaryAction.directive";\nimport { NavigationContentDirective } from "../../navigation-item/NavigationContent.directive";\n\n@Component({\n selector: "header-density",\n standalone: true,\n imports: [\n NavigationContentDirective,\n MetaNavigationDirective,NavigationDirective,SecondaryActionDirective,\n CommonModule,\n DBHeader,\n DBNavigation,\n DBNavigationItem,\n DBBrand,\n DBLink,\n DBButton,\n ],\n template: `<ng-container\n ><div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header data-density="functional"\n ><db-navigation *dbNavigation aria-label="Functional"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Functional</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Functional disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header data-density="regular"\n ><db-navigation *dbNavigation aria-label="(Default) Regular"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>(Default) Regular</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>(Default) Regular disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header data-density="expressive"\n ><db-navigation *dbNavigation aria-label="Expressive"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Expressive</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Expressive disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class HeaderDensity 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "header-density");\n }\n}\n', "examples.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBBrand } from "../../brand/brand";\nimport { DBNavigationItem } from "../../navigation-item/navigation-item";\nimport { DBNavigation } from "../../navigation/navigation";\nimport { DBHeader } from "../header";\nimport { MetaNavigationDirective } from "../MetaNavigation.directive";\nimport { NavigationDirective } from "../Navigation.directive";\nimport { SecondaryActionDirective } from "../SecondaryAction.directive";\nimport { NavigationContentDirective } from "../../navigation-item/NavigationContent.directive";\n\n@Component({\n selector: "header-examples",\n standalone: true,\n imports: [\n NavigationContentDirective,\n MetaNavigationDirective,NavigationDirective,SecondaryActionDirective,CommonModule, DBHeader, DBNavigation, DBNavigationItem, DBBrand],\n template: `<ng-container\n ><div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header\n ><db-navigation *dbNavigation aria-label="With Application Name + Navigation"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent\n >With Application Name + Navigation</a\n ></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>\n With Application Name + Navigation disabled\n </a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand\n ><db-brand>DBHeader</db-brand></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header\n ><ng-container brand\n ><db-brand>DBHeader</db-brand></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header\n ><db-navigation *dbNavigation aria-label="Without Application Name"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Without Application Name</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent\n >Without Application Name disabled</a\n ></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand></db-brand></ng-container\n ></db-header>\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header\n ><ng-container brand><db-brand></db-brand></ng-container\n ></db-header></div\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class HeaderExamples 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "header-examples");\n }\n}\n', "width.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n VERSION,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBBrand } from "../../brand/brand";\nimport { DBButton } from "../../button/button";\nimport { DBLink } from "../../link/link";\nimport { DBNavigationItem } from "../../navigation-item/navigation-item";\nimport { DBNavigation } from "../../navigation/navigation";\nimport { DBHeader } from "../header";\nimport { MetaNavigationDirective } from "../MetaNavigation.directive";\nimport { NavigationDirective } from "../Navigation.directive";\nimport { SecondaryActionDirective } from "../SecondaryAction.directive";\nimport { NavigationContentDirective } from "../../navigation-item/NavigationContent.directive";\n\n@Component({\n selector: "header-width",\n standalone: true,\n imports: [\n NavigationContentDirective,\n MetaNavigationDirective,NavigationDirective,SecondaryActionDirective,\n CommonModule,\n DBHeader,\n DBNavigation,\n DBNavigationItem,\n DBBrand,\n DBLink,\n DBButton,\n ],\n template: `<ng-container\n ><div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header\n ><db-navigation *dbNavigation aria-label="Full"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Full</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Full disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header width="medium"\n ><db-navigation *dbNavigation aria-label="Medium"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Medium</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Medium disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div>\n <div\n [ngStyle]="{\n width: \'100%\',\n display: \'block\'\n }"\n >\n <db-header width="large"\n ><db-navigation *dbNavigation aria-label="Large"\n ><db-navigation-item icon="x_placeholder"\n ><a href="#" *dbNavigationContent>Large</a></db-navigation-item\n >\n <db-navigation-item [disabled]="true"\n ><a href="#" *dbNavigationContent>Large disabled</a></db-navigation-item\n ></db-navigation\n >\n <ng-container brand><db-brand>DBHeader</db-brand></ng-container>\n <ng-container *dbMetaNavigation\n ><ng-container\n ><db-link href="#">Imprint</db-link>\n <db-link href="#">Help</db-link></ng-container\n ></ng-container\n >\n <ng-container primary-action\n ><db-button icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </db-button></ng-container\n >\n <ng-container *dbSecondaryAction\n ><ng-container\n ><db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Notification\n </db-button>\n <db-button icon="x_placeholder" variant="ghost" [noText]="true">\n Help\n </db-button></ng-container\n ></ng-container\n ></db-header\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class HeaderWidth 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 if (attr.value) {\n element.setAttribute(attr.name, attr.value);\n } else {\n element.removeAttribute(attr.name);\n }\n parent.removeAttribute(attr.name);\n }\n else if (attr && ["style"].includes(attr.name)) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? currentClass : ""}${value ? ` ${value}`: ""}`\n );\n if (isWebComponent) {\n // Stencil is using this 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 const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "header-width");\n }\n}\n' }, vue: { "behavior.example.vue": `<template>
29819
30214
  <div
29820
30215
  :style="{
29821
30216
  width: '100%',
@@ -42393,7 +42788,7 @@ import { DBCustomSelect } from "@db-ui/v-components";
42393
42788
  />
42394
42789
  </template>
42395
42790
  \`\`\`
42396
- `, "packages/components/src/components/divider/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBDivider } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBDivider],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-divider></db-divider>\n```\n", "packages/components/src/components/divider/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-divider"></div>\n</body>\n```\n', "packages/components/src/components/divider/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/divider/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBDivider } from "@db-ux/react-core-components";\n\nconst App = () => <DBDivider />;\n\nexport default App;\n```\n', "packages/components/src/components/divider/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBDivider } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBDivider></DBDivider>\n</template>\n```\n', "packages/components/src/components/drawer/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBDrawer } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBDrawer],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-button (click)="toggleDrawer(true)"> Open me </db-button>\n<db-drawer [open]="openDrawer" (onClose)="toggleDrawer(false)">\n <header drawer-header>Optional drawer header</header>\n My Drawer content\n</db-drawer>\n```\n\n```ts app.component.ts\n// app.component.ts\nexport class AppComponent {\n openDrawer: boolean = false;\n toggleDrawer = (open: boolean) => {\n this.openDrawer = open;\n };\n}\n```\n', "packages/components/src/components/drawer/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Use component\n\nUse [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) (`command` and `commandfor` HTML attributes) to declaratively connect buttons with the `<dialog>` element. Supported built-in commands for `<dialog>` are `show-modal` and `close`.\n\nIf you do need to provide support for [browser versions that haven\'t implemented Invoker Commands](https://caniuse.com/wf-invoker-commands), add a feature detection fallback in JavaScript (see example below) or the [polyfill `invokers-polyfill`](https://github.com/keithamus/invokers-polyfill).\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <button class="db-button" command="show-modal" commandfor="my-drawer">\n Open Drawer\n </button>\n <dialog id="my-drawer" class="db-drawer" data-backdrop="true">\n <article class="db-drawer-container">\n <header class="db-drawer-header">\n <button\n class="db-button button-close-drawer is-icon-text-replace"\n data-icon="cross"\n data-variant="ghost"\n command="close"\n commandfor="my-drawer"\n >\n Close Button\n </button>\n </header>\n <div class="db-drawer-content">My Drawer content</div>\n </article>\n </dialog>\n\n <script>\n /*\n * Feature detection for Invoker Commands:\n * If the browser does not support the `command` and `commandfor`\n * HTML attributes, we fall back to JavaScript event handlers.\n */\n if (\n !("command" in HTMLButtonElement.prototype) ||\n !("commandFor" in HTMLButtonElement.prototype)\n ) {\n const openButton = document.querySelector(\n \'[commandfor="my-drawer"][command="show-modal"]\'\n );\n const closeButton = document.querySelector(\n \'[commandfor="my-drawer"][command="close"]\'\n );\n const drawer = document.getElementById("my-drawer");\n\n openButton?.addEventListener("click", () => {\n drawer?.showModal?.();\n });\n closeButton?.addEventListener("click", () => {\n drawer?.close?.();\n });\n }\n </script>\n</body>\n```\n', "packages/components/src/components/drawer/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/drawer/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBButton, DBDrawer } from "@db-ux/react-core-components";\n\nconst App = () => {\n const [open, setOpen] = useState<boolean>(false);\n return (\n <div>\n <DBButton\n onClick={() => {\n setOpen(true);\n }}\n >\n Open Me\n </DBButton>\n <DBDrawer\n open={open}\n onClose={() => {\n setOpen(false);\n }}\n drawerHeader={<header>Optional drawer header</header>}\n >\n My Drawer content\n </DBDrawer>\n </div>\n );\n};\n\nexport default App;\n```\n', "packages/components/src/components/drawer/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { _ref } from "vue";\nimport { DBDrawer } from "@db-ux/v-core-components";\n\nconst openDrawer = _ref<boolean>(false);\n\nconst toggleDrawer = (open: boolean) => {\n openDrawer.value = open;\n};\n</script>\n\n<template>\n <DBButton @click="toggleDrawer(true)">Open me</DBButton>\n <DBDrawer :open="openDrawer" @close="toggleDrawer(false)">\n <header v-slot:drawer-header>Optional drawer header</header>\n My Drawer content\n </DBDrawer>\n</template>\n```\n', "packages/components/src/components/header/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport {\n DBHeader,\n NavigationDirective,\n SecondaryActionDirective,\n MetaNavigationDirective\n} from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBHeader,\n NavigationDirective, // Optional: If you want to use a Navigation\n SecondaryActionDirective, // Optional: If you want to use ActionBar\n MetaNavigationDirective, // Optional: If you want to use MetaNavigation\n ],\n // ...\n})\n```\n\n### Use component\n\n#### Simple\n\n```html app.component.html\n<!-- app.component.html -->\n<db-header>\n <db-brand brand>Header</db-brand>\n</db-header>\n```\n\n#### Full\n\n```ts app.component.ts\n// File: app.component.ts\n\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-root",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n drawerOpen = false;\n\n toggleDrawer = (open: boolean) => {\n this.drawerOpen = open;\n };\n}\n```\n\n```html app.component.html\n<!-- app.component.html -->\n<db-header [drawerOpen]="drawerOpen" (onToggle)="toggleDrawer($event)">\n <db-brand brand>My Awesome App</db-brand>\n <db-navigation *dbNavigation>\n <!-- https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/navigation/docs/Angular.md -->\n </db-navigation>\n <ng-container *dbMetaNavigation>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </ng-container>\n <ng-container primary-action>\n <DBButton icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </DBButton>\n </ng-container>\n <ng-container *dbSecondaryAction>\n <DBButton icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </DBButton>\n <DBButton icon="alert" variant="ghost" [noText]="true">\n Notification\n </DBButton>\n <DBButton icon="help" variant="ghost" [noText]="true"> Help </DBButton>\n </ng-container>\n</db-header>\n```\n', "packages/components/src/components/header/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\nUse [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) (`command` and `commandfor` HTML attributes) to declaratively connect the burger menu button with the drawer `<dialog>` element, and the close button inside the drawer. Supported built-in commands for `<dialog>` are `show-modal` and `close`.\n\nIf you do need to provide support for [browser versions that haven\'t implemented Invoker Commands](https://caniuse.com/wf-invoker-commands), add a feature detection fallback in JavaScript (see example below) or the [polyfill `invokers-polyfill`](https://github.com/keithamus/invokers-polyfill).\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <header class="db-header">\n <dialog id="header-drawer" class="db-drawer">\n <article\n class="db-drawer-container db-header-drawer"\n data-spacing="small"\n data-rounded="true"\n >\n <header class="db-drawer-header">\n <div class="db-drawer-header-text"></div>\n <button\n class="db-button button-close-drawer is-icon-text-replace"\n data-icon="cross"\n data-variant="text"\n command="close"\n commandfor="header-drawer"\n >\n Close Button\n </button>\n </header>\n <div class="db-drawer-content">\n <div class="db-header-drawer-navigation">\n <div class="db-header-navigation">\n <nav class="db-main-navigation">\n <menu>\n <li\n class="db-navigation-item"\n data-icon="x_placeholder"\n >\n <a href="#">Regular (Default)</a>\n </li>\n <li\n class="db-navigation-item"\n aria-disabled="true"\n >\n <a href="#"\n >Regular (Default) disabled</a\n >\n </li>\n </menu>\n </nav>\n </div>\n <div class="db-header-meta-navigation">\n <a\n class="db-link"\n href="#"\n tabindex="0"\n data-content="internal"\n >Imprint</a\n ><a\n class="db-link"\n href="#"\n tabindex="0"\n data-content="internal"\n >Help</a\n >\n </div>\n </div>\n <div class="db-header-secondary-action">\n <button\n class="db-button is-icon-text-replace"\n data-icon="x_placeholder"\n data-variant="text"\n >\n Profile</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="alert"\n data-variant="text"\n >\n Notification</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="help"\n data-variant="text"\n >\n Help\n </button>\n </div>\n </div>\n </article>\n </dialog>\n <div class="db-header-meta-navigation">\n <a class="db-link" href="#" tabindex="0" data-content="internal"\n >Imprint</a\n ><a class="db-link" href="#" tabindex="0" data-content="internal"\n >Help</a\n >\n </div>\n <div class="db-header-navigation-bar">\n <div class="db-header-brand-container">\n <div class="db-brand">\n <a href="/"\n ><img\n class="db-logo"\n src="https://design-system.deutschebahn.com/images/db_logo.svg"\n alt=""\n height="24"\n width="34" /></a\n >DBHeader\n </div>\n </div>\n <div class="db-header-navigation-container">\n <div class="db-header-navigation">\n <nav class="db-navigation">\n <menu>\n <li\n class="db-navigation-item"\n data-icon="x_placeholder"\n >\n <a href="#">Regular (Default)</a>\n </li>\n <li class="db-navigation-item" aria-disabled="true">\n <a href="#">Regular (Default) disabled</a>\n </li>\n </menu>\n </nav>\n </div>\n <div class="db-header-primary-action">\n <button\n class="db-button is-icon-text-replace"\n data-icon="magnifying_glass"\n data-variant="text"\n >\n Search\n </button>\n </div>\n </div>\n <div class="db-header-action-container">\n <div class="db-header-burger-menu-container">\n <button\n class="db-button is-icon-text-replace"\n data-icon="menu"\n data-variant="text"\n command="show-modal"\n commandfor="header-drawer"\n >\n BurgerMenu\n </button>\n </div>\n <div class="db-header-secondary-action">\n <button\n class="db-button is-icon-text-replace"\n data-icon="x_placeholder"\n data-variant="text"\n >\n Profile</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="alert"\n data-variant="text"\n >\n Notification</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="help"\n data-variant="text"\n >\n Help\n </button>\n </div>\n </div>\n </div>\n </header>\n\n <script>\n /*\n * Feature detection for Invoker Commands:\n * If the browser does not support the `command` and `commandfor`\n * HTML attributes, we fall back to JavaScript event handlers.\n */\n if (\n !("command" in HTMLButtonElement.prototype) ||\n !("commandFor" in HTMLButtonElement.prototype)\n ) {\n const burgerMenuButton = document.querySelector(\n \'[commandfor="header-drawer"][command="show-modal"]\'\n );\n const closeButton = document.querySelector(\n \'[commandfor="header-drawer"][command="close"]\'\n );\n const drawer = document.getElementById("header-drawer");\n\n burgerMenuButton?.addEventListener("click", () => {\n drawer?.showModal?.();\n });\n closeButton?.addEventListener("click", () => {\n drawer?.close?.();\n });\n }\n </script>\n</body>\n```\n', "packages/components/src/components/header/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `rea-header` | \u{1F501} | `db-header` | |\n\n### mobile\n\n| Before | Status | After | Description |\n| -------- | :----: | ------------- | ---------------------------------- |\n| `mobile` | \u{1F501} | `forceMobile` | forces the burger menu for desktop |\n", "packages/components/src/components/header/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n#### Simple\n\n```tsx App.tsx\n// App.tsx\nimport { DBHeader, DBBrand } from "@db-ux/react-core-components";\n\nconst App = () => <DBHeader brand={<DBBrand>Header</DBBrand>} />;\n\nexport default App;\n```\n\n#### Full\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBHeader, DBBrand, DBLink } from "@db-ux/react-core-components";\n\nconst [drawerOpen, setDrawerOpen] = useState<boolean>(false);\n\nconst App = () => (\n <DBHeader\n drawerOpen={drawerOpen}\n onToggle={setDrawerOpen}\n brand={<DBBrand>My Awesome App</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="alert" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="help" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation>\n //\n https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/navigation/docs/React.md\n </DBNavigation>\n </DBHeader>\n);\n\nexport default App;\n```\n', "packages/components/src/components/header/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n#### Simple\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBHeader, DBBrand } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBHeader>\n <DBBrand slot="brand">Header</DBBrand>\n </DBHeader>\n</template>\n```\n\n#### Full\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { _ref } from "vue";\nimport { DBHeader, DBBrand, DBLink, DBButton } from "@db-ux/v-core-components";\n\nconst drawerOpen = _ref(false);\n\nconst toggleDrawer = (open: boolean) => {\n drawerOpen.value = open;\n};\n</script>\n\n<template>\n <DBHeader :drawerOpen="drawerOpen" :onToggle="toggleDrawer">\n <template v-slot:brand>\n <DBBrand> My Awesome App </DBBrand>\n </template>\n <template v-slot:primary-action>\n <DBButton icon="magnifying_glass" variant="ghost" :no-text="true">\n Search\n </DBButton>\n </template>\n <template v-slot:secondary-action>\n <DBButton icon="x_placeholder" variant="ghost" :no-text="true">\n Profile\n </DBButton>\n <DBButton icon="alert" variant="ghost" :no-text="true">\n Notification\n </DBButton>\n <DBButton icon="help" variant="ghost" :no-text="true">\n Help\n </DBButton>\n </template>\n <template v-slot:meta-navigation>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </template>\n\n <DBNavigation>\n //\n https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/navigation/docs/Vue.md\n </DBNavigation>\n </DBHeader>\n</template>\n```\n', "packages/components/src/components/icon/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBIcon } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBIcon],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-icon icon=\"x_placeholder\">Icon</db-icon>\n```\n", "packages/components/src/components/icon/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\nYou could use the `data-icon` or `data-icon-trailing` attributes on any HTML tag:\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <span data-icon="x_placeholder"> Icon </span>\n</body>\n```\n', "packages/components/src/components/icon/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------ | :----: | --------- | ----------- |\n| | \u{1F501} | `db-icon` | |\n\n### variant\n\n| Before | Status | After | Description |\n| --------- | :----: | ----- | ----------------------------------------------------------------------------------------------------------------------- |\n| `variant` | \u{1F501} | \u274C | icon variants are controlled by `font-family:var(--db-icon-font-family)` and `font-weight: var(--db-icon-font-weight);` |\n", "packages/components/src/components/icon/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBIcon } from "@db-ux/react-core-components";\n\nconst App = () => <DBIcon icon="x_placeholder">Icon</DBIcon>;\n\nexport default App;\n```\n', "packages/components/src/components/icon/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBIcon } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBIcon icon="x_placeholder">Icon</DBIcon>\n</template>\n```\n', "packages/components/src/components/infotext/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBInfotext } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBInfotext],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-infotext>Infotext</db-infotext>\n```\n", "packages/components/src/components/infotext/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <span class="db-infotext"> Infotext </span>\n</body>\n```\n', "packages/components/src/components/infotext/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/infotext/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBInfotext } from "@db-ux/react-core-components";\n\nconst App = () => <DBInfotext>Infotext</DBInfotext>;\n\nexport default App;\n```\n', "packages/components/src/components/infotext/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBInfotext } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBInfotext>Infotext</DBInfotext>\n</template>\n```\n', "packages/components/src/components/input/docs/Angular.md": '## Angular\n\nLoad SCSS globally within `styles.scss` in your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/rollup";\n```\n\nLoad component within `app.component.ts`:\n\n```ts app.component.ts\n//app.component.ts\nimport { DBInput } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBInput\n ],\n // ...\n})\n```\n\nUse component in template:\n\n```html\n<DBInput\n label="Label"\n placeholder="placeholder"\n description="Description"\n (change)="onInputChange()"\n></DBInput>\n```\n\n## How to use with Reactive Forms\n\nThird party controls require a ControlValueAccessor to function with angular forms.\nOur input component implements this interface so you can use it like any other native element with reactive Forms:\n\n> Currently we do not support onTouch/touched and native validation via FormControl. If your interested in contributing, you\'re very welcome ;)\n\n```ts app.component.ts\n//app.component.ts\nimport { ReactiveFormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n ReactiveFormsModule\n ],\n // ...\n})\n```\n\n```html\n<!-- form.component.html-->\n<form [formGroup]="form" (submit)="onFormSubmit()">\n <db-input label="Input" placeholder="Placeholder" formControlName="input">\n </db-input>\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>input\'s value</dt>\n <dd>\n {{ form.get("input")?.value ? form.get("input")?.value : "No Input set"\n }}\n </dd>\n</dl>\n```\n\n```typescript\n// form.component.ts\nexport class FormComponent {\n form = new FormGroup({\n input: new FormControl("Filled with formControl")\n });\n\n onFormSubmit(): void {\n alert(JSON.stringify(this.form.value));\n }\n}\n```\n\n## How to use with Template driven Forms\n\nThird party controls require a ControlValueAccessor to function with angular forms.\nOur input component implements this interface so you can use it like any other native element with ngModel:\n\n```ts app.component.ts\n//app.component.ts\nimport { FormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n FormsModule\n ],\n // ...\n})\n```\n\n```html\n<!-- form.component.html-->\n<form>\n <DBInput\n ngDefaultControl\n [(ngModel)]="input"\n label="Text Input"\n placeholder="Placeholder"\n description="Description"\n ></DBInput>\n <DBButton type="button" variant="brand" (click)="showValues()"\n >Get input value</DBButton\n >\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>input\'s value</dt>\n <dd>{{ input ? input : "No Input set" }}</dd>\n</dl>\n```\n\n```typescript\n// form.component.ts\nexport class FormComponent {\n input = "";\n showValues(): void {\n alert(JSON.stringify({ input: this.input }));\n }\n}\n```\n', "packages/components/src/components/input/docs/HTML.md": '## HTML\n\nLoad SCSS globally somewhere in your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/relative";\n```\n\nUse it:\n\n```html\n<div class="db-input">\n <label for="username">Label</label>\n <input type="text" name="username" id="username" />\n</div>\n```\n', "packages/components/src/components/input/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ----------- | :----: | ---------- | ----------- |\n| `elm-input` | \u{1F501} | `db-input` | |\n\n### variants\n\n| Before | Status | After | Description |\n| ----------------- | :----: | --------------- | ---------------------------------------------------------------------------------------------------- |\n| `semitransparent` | \u274C | \u274C | old variants are removed a semi-transparent look is the default, new variants are changing the color |\n| `white` | \u274C | \u274C | |\n| `solid` | \u274C | \u274C | |\n| `outline` | \u274C | \u274C | |\n| | \u{1F195} | `adaptive` | |\n| | \u{1F195} | `neutral` | |\n| | \u{1F195} | `critical` | |\n| | \u{1F195} | `informational` | |\n| | \u{1F195} | `warning` | |\n| | \u{1F195} | `successful` | |\n", "packages/components/src/components/input/docs/React.md": '## React\n\nWarning: Date input is not working with iOS Voiceover currently, compare to [React issue](https://github.com/facebook/react/issues/33541) and [WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=294649).\n\nLoad SCSS globally in a `index.scss` file inside `main.tsx`/`main.jsx` within your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/rollup";\n```\n\nImport component:\n\n```typescript\nimport { DBInput } from "@db-ux/react-core-components";\n\n<DBInput\n label={label}\n placeholder={description}\n description={description}\n onChange={handleChange}\n></DBInput>;\n```\n', "packages/components/src/components/input/docs/Vue.md": '## Vue\n\nLoad SCSS globally in a `index.scss` file and import it in your `main.ts`/`main.js` file in your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/rollup";\n```\n\nUse component:\n\n```vue\n<script>\nimport { DBInput } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBInput\n label="Label"\n placeholder="Placeholder"\n @change="onChange($event)"\n ></DBInput>\n</template>\n```\n\nTo get DBInput work with `v-model` you have to use v-model argument syntax:\n\n```typescript\n<DBInput\n label="Text Label"\n placeholder="Start typing"\n v-model:value="value"\n></DBInput>\n```\n\nor using on-change listener:\n\n```typescript\n<DBInput label="Text Label" placeholder="Start" :value="modelAndChange" @change="($event) => { modelAndChange = $event.target.value;\n}"/> {{ modelAndChange }}\n```\n', "packages/components/src/components/link/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBLink } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBLink],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-link href="#" variant="brand">Link</db-link>\n```\n', "packages/components/src/components/link/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <a class="db-link" href="#">Link</a>\n</body>\n```\n', "packages/components/src/components/link/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ---------- | :----: | --------- | ----------- |\n| `elm-link` | \u{1F501} | `db-link` | |\n\n### icons\n\n| Before | Status | After | Description |\n| ------------- | :----: | ----- | ----------------------------------------------------------------------- |\n| `icon` | \u274C | \u274C | not valid anymore use `content` to show internal or external arrow icon |\n| `icononly` | \u274C | \u274C | |\n| `iconVariant` | \u274C | \u274C | |\n", "packages/components/src/components/link/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBLink } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBLink href="#" variant="brand">\n Link\n </DBLink>\n);\n\nexport default App;\n```\n', "packages/components/src/components/link/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBLink } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBLink href="#" variant="brand">Link</DBLink>\n</template>\n```\n', "packages/components/src/components/navigation/docs/Accessibility.md": '## Accessibility\n\n### Active item / current page\n\nTo implicitly set a `NavigationItem` to **active**, the attribute `aria-current="page"` is applied to the contained anchor.\nSome frameworks (vue, angular) offer internal, automatic solutions for this. These should preferably be used.\n\nThis leads to:\n\n- the `NavigationItem` and all parent `NavigationItems` are displayed as **active** via `css` (bold, if necessary with DB pulse)\n- accessibility is granted correctly. see: [MDN aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\nFor other purposes, `NavigationItems` can also be set to active with their prop `active`. However, this does not guarantee correct a11y.\n', "packages/components/src/components/navigation/docs/Angular.md": '## Angular\n\nFor general installation and configuration look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBNavigation } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBNavigation, DBNavigationItem, NavigationContentDirective],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-navigation>\n <db-navigation-item>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n Sub-Navi-Item 1\n </ng-container>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a href="#" aria-current="page"\n >Sub-Sub-Navi-Item 1</a\n >\n </ng-container>\n </db-navigation-item>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n </db-navigation-item>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a href="#">Sub-Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n <ng-container *dbNavigationContent> Navi-Item 1 </ng-container>\n </db-navigation-item>\n <db-navigation-item icon="x_placeholder">\n <ng-container *dbNavigationContent>\n <a href="#">Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n <db-navigation-item [disabled]="true">\n <ng-container *dbNavigationContent>\n <a href="#">Navi-Item 3</a>\n </ng-container>\n </db-navigation-item>\n</db-navigation>\n```\n\n### Angular Router and active state handling\n\nWe recommend using the automatic [integration with the Angular Router](https://angular.dev/best-practices/a11y#active-links-identification). This is way more elegant than setting the aria attribute to the anchor yourself.\n\nThe component first needs to import the `RouterLink` and `RouterLinkActive` directives.\n\nFor other purposes, `NavigationItems` themselves can also be set to active with their prop `[active]="true"`. However, this does not guarantee correct a11y.\n\n```ts app.component.ts\n// app.component.ts\nimport { RouterLink, RouterLinkActive } from \'@angular/router\';\nimport { DBMainNavigation } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [\n // ...\n RouterLink,\n RouterLinkActive,\n DBMainNavigation\n ],\n // ...\n})\n```\n\nNow you can use the Angular Routers `routerLink` directive to define your targets.\nThe active style is automatically set once an item receives the `aria-current="page"` attribute.\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a\n routerLink="/"\n ariaCurrentWhenActive="page"\n [routerLinkActiveOptions]="{ exact: true }"\n >\n Home\n </a>\n </ng-container>\n </db-navigation-item>\n <db-navigation-item>\n <ng-container *dbNavigationContent> Demo Pages </ng-container>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="/demo/1" ariaCurrentWhenActive="page">\n Demo Page 1\n </a>\n </ng-container>\n <ng-container *dbNavigationContent>\n <a routerLink="/demo/2" ariaCurrentWhenActive="page">\n Demo Page 2\n </a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n </db-navigation-item>\n</db-navigation>\n```\n', "packages/components/src/components/navigation/docs/HTML.md": '## HTML\n\nFor general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <nav class="db-navigation">\n <menu>\n <li class="db-navigation-item">\n <button\n class="db-navigation-item-expand-button"\n aria-haspopup="true"\n >\n Navi-Item 1\n </button>\n <menu class="db-sub-navigation">\n <li class="db-navigation-item">\n <button\n class="db-navigation-item-expand-button"\n aria-haspopup="true"\n >\n Sub-Navi-Item 1\n </button>\n <menu class="db-sub-navigation">\n <li class="db-navigation-item">\n <a href="#" aria-current="page"\n >Sub-Sub-Navi-Item 1</a\n >\n </li>\n\n <li class="db-navigation-item">\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </li>\n </menu>\n </li>\n\n <li class="db-navigation-item">\n <a href="#">Sub-Navi-Item 2</a>\n </li>\n </menu>\n </li>\n\n <li class="db-navigation-item" data-icon="x_placeholder">\n <a href="#">Navi-Item 2</a>\n </li>\n\n <li class="db-navigation-item" aria-disabled="true">\n <a href="#">Navi-Item 3</a>\n </li>\n </menu>\n </nav>\n</body>\n```\n', "packages/components/src/components/navigation/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| -------------------- | :----: | --------------- | ----------- |\n| `cmp-mainnavigation` | \u{1F501} | `db-navigation` | |\n\n### children\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | ----------------------------------------------------------------------------- |\n| `data` | \u274C | \u274C | pass data via `children` / `slot`, moved a lot of the features to `db-header` |\n| `siteName` | \u274C | \u274C | |\n", "packages/components/src/components/navigation/docs/React.md": '## React\n\nFor general installation and configuration look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBNavigation, DBNavigationItem } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBNavigation>\n <DBNavigationItem\n subNavigation={\n <>\n <DBNavigationItem\n subNavigation={\n <>\n <DBNavigationItem>\n <a href="#" aria-current="page">\n Sub-Sub-Navi-Item 1\n </a>\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </>\n }\n >\n Sub-Navi-Item 1\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </>\n }\n >\n Navi-Item 1\n </DBNavigationItem>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Navi-Item 2</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Navi-Item 3</a>\n </DBNavigationItem>\n </DBNavigation>\n);\n\nexport default App;\n```\n\n### Active handling\n\nUsually, a `NavigationItem` is implicitly set to active by setting the attribute `aria-current="page"` to the anchor it contains.\n\nFor other purposes, `NavigationItems` themselves can also be set to active with their prop `active`. However, this does not guarantee correct a11y.\n', "packages/components/src/components/navigation/docs/Vue.md": '## Vue\n\nFor general installation and configuration look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBNavigation, DBNavigationItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBNavigation>\n <DBNavigationItem>\n Navi-Item 1\n <template v-slot:sub-navigation>\n <DBNavigationItem>\n Sub-Navi-Item 1\n\n <template v-slot:sub-navigation>\n <DBNavigationItem>\n <a href="#" aria-current="page"\n >Sub-Sub-Navi-Item 1</a\n >\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </template>\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </template>\n </DBNavigationItem>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Navi-Item 2</a>\n </DBNavigationItem>\n <DBNavigationItem :disabled="true">\n <a href="#">Navi-Item 3</a>\n </DBNavigationItem>\n </DBNavigation>\n</template>\n```\n\n### Vue Router and active state handling\n\nWe recommend using the automatic [integration with the Vue Router](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#ariaCurrentValue). This is way more elegant than setting the aria attribute to the anchor yourself.\n\nYou can use Vue Routers `RouterLink` component to define your targets.\nThe active style is automatically set once an item receives the `aria-current="page"` attribute.\n\nFor other purposes, `NavigationItems` themselves can also be set to active with their prop `:active="true"`. However, this does not guarantee correct a11y.\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBMainNavigation, DBNavigationItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBMainNavigation>\n <DBNavigationItem>\n <RouterLink to="/" ariaCurrentValue="page">Home</RouterLink>\n </DBNavigationItem>\n <DBNavigationItem>\n <template> Demo Pages </template>\n <template #subnavigation>\n <DBNavigationItem>\n <RouterLink to="/demo/1" ariaCurrentValue="page">\n Demo Page 1\n </RouterLink>\n </DBNavigationItem>\n <DBNavigationItem>\n <RouterLink to="/demo/2" ariaCurrentValue="page">\n Demo Page 2\n </RouterLink>\n </DBNavigationItem>\n </template>\n </DBNavigationItem>\n </DBMainNavigation>\n</template>\n```\n', "packages/components/src/components/navigation-item/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport { DBNavigationItem, NavigationContentDirective } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [..., DBNavigationItem, NavigationContentDirective],\n // ...\n})\n\n```\n\n### Use component\n\nWe try to set `areaPopup` (has/hasn\'t sub-navigation) inside the component, but this doesn\'t work in all frameworks. If you encounter some problems you have the set `areaPopup` with `true/false` for sub-navigation or link\n\n```html app.component.html\n<!-- app.component.html -->\n\n<!-- Only link -->\n<db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="mypath">NavigationItem</a>\n </ng-container>\n</db-navigation-item>\n\n<!-- With Sub-Navigation -->\n\n<db-navigation-item>\n <ng-container *dbNavigationContent>Navi-Item 1</ng-container>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="mypath">Sub-Navi-Item 1</a>\n </ng-container>\n </db-navigation-item>\n\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="mypath">Sub-Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n</db-navigation-item>\n```\n', "packages/components/src/components/navigation-item/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\nIf you want to use sub-navigations for mobile you need to add a `eventListener:click` on the `db-navigation-item-expand-button`. This eventListener should set `aria-expanded` to `true` for the `button`. This will open a static overlay for mobile/tablet devices with your `db-sub-navigation`. For desktop devices it works by default with `:hover`.\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <!-- Only link -->\n <li class="db-navigation-item">\n <a href="mypath">NavigationItem</a>\n </li>\n\n <!-- With Sub-Navigation -->\n <li class="db-navigation-item">\n <button class="db-navigation-item-expand-button" aria-haspopup="true">\n Navi-Item 1\n </button>\n <menu class="db-sub-navigation">\n <a href="mypath">Sub-Navi-Item 1</a>\n <a href="mypath">Sub-Navi-Item 2</a>\n </menu>\n </li>\n</body>\n```\n', "packages/components/src/components/navigation-item/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/navigation-item/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\nWe try to set `areaPopup` (has/hasn\'t sub-navigation) inside the component, but this doesn\'t work in all frameworks. If you encounter some problems you have the set `areaPopup` with `true/false` for sub-navigation or link\n\n```tsx App.tsx\n// App.tsx\nimport { Link } from "react-router-dom";\nimport { DBNavigationItem } from "@db-ux/react-core-components";\n\nconst App = () => (\n <>\n {/* Only link */}\n <DBNavigationItem>\n <Link to="mypath">NavigationItem</Link>\n </DBNavigationItem>\n\n {/* With Sub-Navigation */}\n <DBNavigationItem\n subNavigation={\n <>\n <DBNavigationItem>\n <Link to="mypath">Sub-Navi-Item 1</Link>\n </DBNavigationItem>\n <DBNavigationItem>\n <Link to="mypath">Sub-Navi-Item 2</Link>\n </DBNavigationItem>\n </>\n }\n >\n Navi-Item 1\n </DBNavigationItem>\n </>\n);\n\nexport default App;\n```\n', "packages/components/src/components/navigation-item/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\nWe try to set `areaPopup` (has/hasn\'t sub-navigation) inside the component, but this doesn\'t work in all frameworks. If you encounter some problems you have the set `areaPopup` with `true/false` for sub-navigation or link\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBNavigationItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <!-- Only link -->\n <DBNavigationItem>\n <router-link to="mypath">NavigationItem</router-link>\n </DBNavigationItem>\n\n <!-- With Sub-Navigation -->\n <DBNavigationItem>\n <template #subnavigation>\n <DBNavigationItem>\n <router-link to="mypath">Sub-Navi-Item 1</router-link>\n </DBNavigationItem>\n <DBNavigationItem>\n <router-link to="mypath">Sub-Navi-Item 2</router-link>\n </DBNavigationItem>\n </template>\n Navi-Item 1\n </DBNavigationItem>\n</template>\n```\n', "packages/components/src/components/notification/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBNotification } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBNotification],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-notification headline=\"Headline\">Notification</db-notification>\n```\n", "packages/components/src/components/notification/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-notification" data-icon="information_circle">\n <h6>Headline</h6>\n <p>Notification</p>\n <button\n class="db-button is-icon-text-replace"\n data-size="small"\n data-variant="ghost"\n data-icon="cross"\n >\n Close Button\n </button>\n </div>\n</body>\n```\n', "packages/components/src/components/notification/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------------ | :----: | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `elm-notification` | \u{1F501} | `db-notification` | The old notification component has been split into 2 different components [Notification](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system-v3/components/feedback/notification) and [Notification](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system-v3/components/feedback/notification) for more information (when and how to use it). |\n\n### variant \u27A1 type\n\n| Before | Status | After | Description |\n| -------------- | :----: | -------------- | ------------------------------------------------------- |\n| `notification` | \u{1F501} | `notification` | Default notification with different look |\n| `status` | \u274C | \u274C | Status can be changed by `variants` |\n| | \u{1F195} | `inline` | New styling with shadow and rounded corners (like card) |\n\n### type \u27A1 variants\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------------- | -------------------------------------------------------- |\n| | \u{1F195} | `adaptive` | Default: change colors based on background |\n| `error` | \u{1F501} | `critical` | 'Red' colored notification to show error messages |\n| `informative` | \u{1F501} | `informational` | 'Blue' colored notification to show information messages |\n| `warning` | \u{1F501} | `warning` | 'Yellow' colored notification to show warning messages |\n| `success` | \u{1F501} | `successful` | 'Green' colored notification to show success messages |\n", "packages/components/src/components/notification/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBNotification } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBNotification headline="Headline">Notification</DBNotification>\n);\n\nexport default App;\n```\n', "packages/components/src/components/notification/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBNotification } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBNotification headline="Headline">Notification</DBNotification>\n</template>\n```\n', "packages/components/src/components/page/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport { DBPage, DBHeader } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBPage, DBHeader\n ],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-page>\n <db-header header>...</db-header>\n <main class=\"db-main\">Main Page</main>\n</db-page>\n```\n", "packages/components/src/components/page/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-page">\n <header class="db-header">...</header>\n <main class="db-main">Main Page</main>\n </div>\n</body>\n```\n', "packages/components/src/components/page/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ---------- | :----: | --------- | ----------- |\n| `rea-page` | \u{1F501} | `db-page` | |\n", "packages/components/src/components/page/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBPage, DBHeader } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBPage header={<DBHeader>...</DBHeader>}>\n <main className="db-main">Main Page</main>\n </DBPage>\n);\n\nexport default App;\n```\n', "packages/components/src/components/page/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBPage, DBHeader } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBPage>\n <DBHeader slot="header">...</DBHeader>\n <main class="db-main">Main Page</main>\n </DBPage>\n</template>\n```\n', "packages/components/src/components/popover/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBPopover } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBPopover],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-popover>\n <db-button trigger> Hover on me to open Popover </db-button>\n Use any html code here like e.g. a <code>button</code>:\n <button type=\"button\">Test</button>\n</db-popover>\n```\n", "packages/components/src/components/popover/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-popover">\n <button aria-haspopup="true" class="db-button" type="button">\n Hover on me to open Popover\n </button>\n <article class="db-popover-content">\n Use any html code here like e.g. a <code>button</code>:\n <button type="button">Test</button>\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/popover/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/popover/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBPopover, DBButton } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBPopover trigger={<DBButton>Hover on me to open Popover</DBButton>}>\n Use any html code here like e.g. a <code>button</code>:\n <button type="button">Test</button>\n </DBPopover>\n);\n\nexport default App;\n```\n', "packages/components/src/components/popover/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBPopover, DBButton } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBPopover>\n <template v-slot:trigger>\n <DBButton> Hover on me to open Popover </DBButton>\n </template>\n Use any html code here like e.g. a <code>button</code>:\n <button type="button">Test</button>\n </DBPopover>\n</template>\n```\n', "packages/components/src/components/radio/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBRadio } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBRadio],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<ul>\n @for (radioName of radioNames; track radioName) {\n <li>\n <db-radio\n (change)="radio = radioName"\n [label]="\'Radio \' + radioName"\n [value]="radioName"\n name="RadioGroup"\n ></db-radio>\n </li>\n }\n</ul>\n```\n\n```ts app.component.ts\n// app.component.ts\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-app",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n radioNames = ["X", "Y", "Z"];\n radio = "";\n}\n```\n\n## How to use with Template Driven Forms\n\nThird party controls require a `ControlValueAccessor` to function with angular forms. Adding an `ngDefaultControl` attribute will allow them to use that directive.\n[Further information](https://stackoverflow.com/a/46465959)\n\n```ts app.component.ts\n//app.component.ts\nimport { FormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n FormsModule\n ],\n // ...\n})\n```\n\n```html form.component.html\n<!-- form.component.html -->\n<form>\n <DBRadio ngDefaultControl [(ngModel)]="radio">Label</DBRadio>\n <DBButton type="button" variant="brand" (click)="showValues()"\n >Get radio value</DBButton\n >\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>radio\'s value</dt>\n <dd>{{ radio ? radio : "No radio set" }}</dd>\n</dl>\n```\n\n```ts form.component.ts\n// form.component.ts\nexport class FormComponent {\n radio = "";\n showValues(): void {\n alert(JSON.stringify({ radio: this.radio }));\n }\n}\n```\n\n## How to use with Reactive Forms\n\ncoming soon \u2026 if your interested in contributing, you\'re very welcome ;)\n', "packages/components/src/components/radio/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <label class="db-radio" for="radio-element">\n <input type="radio" id="radio-element" name="States" value="Y" />\n Label\n </label>\n</body>\n```\n\n### Group multiple radio buttons\n\nWhen grouping multiple radio buttons, use `fieldset` and `legend` elements for proper accessibility:\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <fieldset>\n <legend>Choose an option</legend>\n <label class="db-radio" for="radio-option-1">\n <input\n type="radio"\n id="radio-option-1"\n name="options"\n value="option1"\n />\n Option 1\n </label>\n <label class="db-radio" for="radio-option-2">\n <input\n type="radio"\n id="radio-option-2"\n name="options"\n value="option2"\n />\n Option 2\n </label>\n <label class="db-radio" for="radio-option-3">\n <input\n type="radio"\n id="radio-option-3"\n name="options"\n value="option3"\n />\n Option 3\n </label>\n </fieldset>\n</body>\n```\n', "packages/components/src/components/radio/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ----------- | :----: | ---------- | ----------- |\n| `elm-radio` | \u{1F501} | `db-radio` | |\n\n### id\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | ----------- |\n| `input_id` | \u{1F501} | `id` | |\n", "packages/components/src/components/radio/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBRadio } from "@db-ux/react-core-components";\n\nconst App = () => {\n const [radio, setRadio] = useState("");\n\n return (\n <fieldset>\n <legend>Radio group example</legend>\n {["X", "Y", "Z"].map((radioName) => (\n <DBRadio\n key={radioName}\n name="radio-group"\n value={radioName}\n checked={radio === radioName}\n onChange={() => {\n setRadio(radioName);\n }}\n >\n Radio {radioName}\n </DBRadio>\n ))}\n </fieldset>\n );\n};\n\nexport default App;\n```\n', "packages/components/src/components/radio/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { DBRadio } from "@db-ux/v-core-components";\nimport { _ref } from "vue";\nconst radio = _ref("");\n\nconst radioNames = ["X", "Y", "Z"];\n</script>\n\n<template>\n <fieldset>\n <legend>Radio group example</legend>\n <DBRadio\n v-for="radioName in radioNames"\n :key="radioName"\n @change="radio = radioName"\n name="radio-group"\n :value="radioName"\n :checked="radio === radioName"\n >\n Radio {{ radioName }}\n </DBRadio>\n </fieldset>\n</template>\n```\n', "packages/components/src/components/section/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBSection } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBSection],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-section variant=\"full\">Section</db-section>\n```\n", "packages/components/src/components/section/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <section class="db-section">\n <div data-variant="full">Section</div>\n </section>\n</body>\n```\n', "packages/components/src/components/section/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/section/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBSection } from "@db-ux/react-core-components";\n\nconst App = () => <DBSection variant="full">Section</DBSection>;\n\nexport default App;\n```\n', "packages/components/src/components/section/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBSection } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBSection variant="full">Section</DBSection>\n</template>\n```\n', "packages/components/src/components/select/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBSelect } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBSelect],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-select>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n</db-select>\n```\n', "packages/components/src/components/select/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-select">\n <label for="test">Label</label>\n <select id="test">\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </select>\n </div>\n</body>\n```\n', "packages/components/src/components/select/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `elm-select` | \u{1F501} | `db-select` | |\n\n### select\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | -------------------------------------------------------------------------------- |\n| `multiple` | \u274C | | We removed this attribute for now, there are no valid designs for this use case. |\n| `size` | \u274C | | We removed this attribute for now, there are no valid designs for this use case. |\n", "packages/components/src/components/select/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBSelect } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBSelect>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </DBSelect>\n);\n\nexport default App;\n```\n', "packages/components/src/components/select/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBSelect } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBSelect>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </DBSelect>\n</template>\n```\n', "packages/components/src/components/stack/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBStack } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBStack],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-stack>\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n</db-stack>\n```\n", "packages/components/src/components/stack/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-stack">\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n </div>\n</body>\n```\n', "packages/components/src/components/stack/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/stack/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBStack } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBStack>\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n </DBStack>\n);\n\nexport default App;\n```\n', "packages/components/src/components/stack/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBStack } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBStack>\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n </DBStack>\n</template>\n```\n', "packages/components/src/components/switch/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBSwitch } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBSwitch],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-switch>Switch</db-switch>\n```\n", "packages/components/src/components/switch/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <label for="my-id" class="db-switch">\n <input type="checkbox" role="switch" id="my-id" />\n Switch\n </label>\n</body>\n```\n', "packages/components/src/components/switch/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `elm-toggle` | \u{1F501} | `db-switch` | |\n\n### id\n\n| Before | Status | After | Description |\n| -------- | :----: | :---: | ----------- |\n| `htmlid` | \u{1F501} | `id` | |\n", "packages/components/src/components/switch/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBSwitch } from "@db-ux/react-core-components";\n\nconst App = () => <DBSwitch>Switch</DBSwitch>;\n\nexport default App;\n```\n', "packages/components/src/components/switch/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBSwitch } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBSwitch>Switch</DBSwitch>\n</template>\n```\n', "packages/components/src/components/tab-item/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tab-item/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div role="tablist" class="db-tab-list" aria-orientation="horizontal">\n <div class="db-tab-list-scroll-container">\n <label\n role="tab"\n for="my-tabs-tab-0"\n class="db-tab-item"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-0"\n ><input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1</label\n ><label\n role="tab"\n for="my-tabs-tab-1"\n class="db-tab-item"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-1"\n ><input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2</label\n ><label\n role="tab"\n for="my-tabs-tab-2"\n class="db-tab-item"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-2"\n ><input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3</label\n >\n </div>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tab-item/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ------------- | ----------- |\n| `cmp-db-tab` | \u{1F501} | `db-tab-item` | |\n\n### name\n\n| Before | Status | After | Description |\n| ------ | :----: | :---: | --------------------------------------------------------------------------------------------------- |\n| `name` | \u274C | \u274C | It should be used with `db-tabs` which will add a the `name` from `db-tabs` to all tabs all at one. |\n", "packages/components/src/components/tab-item/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tab-item/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tab-list/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tab-list/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div role="tablist" class="db-tab-list" aria-orientation="horizontal">\n <div class="db-tab-list-scroll-container">\n <label\n role="tab"\n for="my-tabs-tab-0"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-0"\n ><input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1</label\n ><label\n role="tab"\n for="my-tabs-tab-1"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-1"\n ><input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2</label\n ><label\n role="tab"\n for="my-tabs-tab-2"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-2"\n ><input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3</label\n >\n </div>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tab-list/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/tab-list/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tab-list/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tab-panel/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tab-panel/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div role="tablist" class="db-tab-list" aria-orientation="horizontal">\n <div class="db-tab-list-scroll-container">\n <label\n role="tab"\n for="my-tabs-tab-0"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-0"\n ><input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1</label\n ><label\n role="tab"\n for="my-tabs-tab-1"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-1"\n ><input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2</label\n ><label\n role="tab"\n for="my-tabs-tab-2"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-2"\n ><input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3</label\n >\n </div>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tab-panel/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/tab-panel/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tab-panel/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/table/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport {\n DBTable,\n DBTableHead,\n DBTableBody,\n DBTableRow,\n DBTableHeaderCell,\n DBTableDataCell\n} from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTable, DBTableHead, DBTableBody, DBTableRow, DBTableHeaderCell, DBTableDataCell],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-table captionPlain="Table Caption">\n <db-table-head>\n <db-table-row>\n <db-table-header-cell scope="col">A</db-table-header-cell>\n <db-table-header-cell scope="col">B</db-table-header-cell>\n <db-table-header-cell scope="col">C</db-table-header-cell>\n </db-table-row>\n </db-table-head>\n <db-table-body>\n <db-table-row>\n <db-table-header-cell scope="row">1</db-table-header-cell>\n <db-table-data-cell>2</db-table-data-cell>\n <db-table-data-cell>3</db-table-data-cell>\n </db-table-row>\n <db-table-row>\n <db-table-header-cell scope="row">4</db-table-header-cell>\n <db-table-data-cell>5</db-table-data-cell>\n <db-table-data-cell>6</db-table-data-cell>\n </db-table-row>\n </db-table-body>\n</db-table>\n```\n', "packages/components/src/components/table/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-table">\n <table>\n <caption>\n Table Caption\n </caption>\n <thead>\n <tr class="db-table-row">\n <th class="db-table-header-cell" scope="col">A</th>\n <th class="db-table-header-cell" scope="col">B</th>\n <th class="db-table-header-cell" scope="col">C</th>\n </tr>\n </thead>\n <tbody>\n <tr class="db-table-row">\n <th class="db-table-header-cell" scope="row">1</th>\n <td class="db-table-data-cell">2</td>\n <td class="db-table-data-cell">3</td>\n </tr>\n <tr class="db-table-row">\n <th class="db-table-header-cell" scope="row">4</th>\n <td class="db-table-data-cell">5</td>\n <td class="db-table-data-cell">6</td>\n </tr>\n </tbody>\n <tfoot>\n <tr class="db-table-row">\n <th class="db-table-header-cell" scope="row">Footer 1</th>\n <td class="db-table-data-cell" colspan="2">Footer 2</td>\n </tr>\n </tfoot>\n </table>\n </div>\n</body>\n```\n', "packages/components/src/components/table/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ----------- | :----: | ---------- | --------------------------------------------------------------------------------------------------------- |\n| `elm-table` | \u{1F501} | `db-table` | The table component has been redesigned with new sub-components for header, body, footer, rows, and cells |\n\n## DB UI Elements \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ---------- | :----: | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `db-table` | \u{1F501} | `db-table` | The table component has been restructured with dedicated sub-components (`db-table-head`, `db-table-body`, `db-table-footer`, `db-table-row`, `db-table-header-cell`, `db-table-data-cell`) for better composability |\n", "packages/components/src/components/table/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTable,\n DBTableHead,\n DBTableBody,\n DBTableRow,\n DBTableHeaderCell,\n DBTableDataCell\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTable captionPlain="Table Caption">\n <DBTableHead>\n <DBTableRow>\n <DBTableHeaderCell scope="col">A</DBTableHeaderCell>\n <DBTableHeaderCell scope="col">B</DBTableHeaderCell>\n <DBTableHeaderCell scope="col">C</DBTableHeaderCell>\n </DBTableRow>\n </DBTableHead>\n <DBTableBody>\n <DBTableRow>\n <DBTableHeaderCell scope="row">1</DBTableHeaderCell>\n <DBTableDataCell>2</DBTableDataCell>\n <DBTableDataCell>3</DBTableDataCell>\n </DBTableRow>\n <DBTableRow>\n <DBTableHeaderCell scope="row">4</DBTableHeaderCell>\n <DBTableDataCell>5</DBTableDataCell>\n <DBTableDataCell>6</DBTableDataCell>\n </DBTableRow>\n </DBTableBody>\n </DBTable>\n);\n\nexport default App;\n```\n', "packages/components/src/components/table/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTable,\n DBTableHead,\n DBTableBody,\n DBTableRow,\n DBTableHeaderCell,\n DBTableDataCell\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTable captionPlain="Table Caption">\n <DBTableHead>\n <DBTableRow>\n <DBTableHeaderCell scope="col">A</DBTableHeaderCell>\n <DBTableHeaderCell scope="col">B</DBTableHeaderCell>\n <DBTableHeaderCell scope="col">C</DBTableHeaderCell>\n </DBTableRow>\n </DBTableHead>\n <DBTableBody>\n <DBTableRow>\n <DBTableHeaderCell scope="row">1</DBTableHeaderCell>\n <DBTableDataCell>2</DBTableDataCell>\n <DBTableDataCell>3</DBTableDataCell>\n </DBTableRow>\n <DBTableRow>\n <DBTableHeaderCell scope="row">4</DBTableHeaderCell>\n <DBTableDataCell>5</DBTableDataCell>\n <DBTableDataCell>6</DBTableDataCell>\n </DBTableRow>\n </DBTableBody>\n </DBTable>\n</template>\n```\n', "packages/components/src/components/tabs/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tabs/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div\n role="tablist"\n class="db-tab-list"\n data-alignment="start"\n data-width="auto"\n >\n <ul>\n <li role="tab" class="db-tab-item">\n <label\n for="my-tabs-tab-0"\n aria-controls="my-tabs-tab-panel-0"\n >\n <input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1\n </label>\n </li>\n <li role="tab" class="db-tab-item">\n <label\n for="my-tabs-tab-1"\n aria-controls="my-tabs-tab-panel-1"\n >\n <input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2\n </label>\n </li>\n <li role="tab" class="db-tab-item">\n <label\n for="my-tabs-tab-2"\n aria-controls="my-tabs-tab-panel-2"\n >\n <input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3\n </label>\n </li>\n </ul>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tabs/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------- | ----------- |\n| `cmp-tab-bar` | \u{1F501} | `db-tabs` | |\n", "packages/components/src/components/tabs/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tabs/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tag/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBTag } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTag],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tag><db-button>Tag as Button</db-button></db-tag>\n<db-tag>\n <db-link> Tag as Link </db-link>\n</db-tag>\n<db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>\n<db-tag><db-radio>Tag as Radio</db-radio></db-tag>\n<db-tag>Static Tag</db-tag>\n<db-tag [overflow]=\"true\"><span>Static Tag with overflow</span></db-tag>\n```\n", "packages/components/src/components/tag/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tag">\n <span class="tag-label">Regular (Default)</span>\n </div>\n</body>\n```\n', "packages/components/src/components/tag/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### tag vs. chip\n\nWe simplified the components by reducing the amount from tag + chip to only tag.\n\nYou can use different types of tags by adding another component into it:\n\n```html\n<db-tag><db-button>Tag as Button</db-button></db-tag>\n<db-tag><db-link>Tag as Link</db-link></db-tag>\n<db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>\n<db-tag><db-radio>Tag as Radio</db-radio></db-tag>\n<db-tag>Static Tag</db-tag>\n```\n\n### class\n\n| Before | Status | After | Description |\n| --------- | :----: | -------- | ----------- |\n| `elm-tag` | \u{1F501} | `db-tag` | |\n\n### sizes\n\n| Before | Status | After | Description |\n| ------- | :----: | :---: | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `small` | \u274C | \u274C | We removed small tags because of density. But you can use `type` property with value `strong` to emphasize a tag for a differentiation. |\n\n### variants\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------------- | ------------------------------------------------ |\n| `poi-*` | \u274C | \u274C | We removed all point of interest colors for now. |\n| `track` | \u274C | \u274C | We removed track for now. |\n| `error` | \u{1F501} | `critical` | |\n| `informative` | \u{1F501} | `informational` | |\n| `success` | \u{1F501} | `successful` | |\n\n### icons\n\n| Before | Status | After | Description |\n| ----------- | :----: | ----- | -------------------------------------------------------------- |\n| `iconAfter` | \u274C | \u274C | not valid anymore, for tags only icons before text are allowed |\n", "packages/components/src/components/tag/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBTag } from "@db-ux/react-core-components";\n\nconst App = () => (\n <>\n <DBTag>\n <DBButton>Tag as Button</DBButton>\n </DBTag>\n <DBTag>\n <DBLink>Tag as Link</DBLink>\n </DBTag>\n <DBTag>\n <DBCheckbox>Tag as Checkbox</DBCheckbox>\n </DBTag>\n <DBTag>\n <DBRadio>Tag as Radio</DBRadio>\n </DBTag>\n <DBTag>Static Tag</DBTag>\n <DBTag overflow={true}>\n <span>Static Tag with overflow</span>\n </DBTag>\n </>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tag/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBTag } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTag><DBButton>Tag as Button</DBButton></DBTag>\n <DBTag>\n <DBLink> Tag as Link </DBLink>\n </DBTag>\n <DBTag><DBCheckbox>Tag as Checkbox</DBCheckbox></DBTag>\n <DBTag><DBRadio>Tag as Radio</DBRadio></DBTag>\n <DBTag>Static Tag</DBTag>\n <DBTag :overflow="true">\n <span>Static Tag with overflow</span>\n </DBTag>\n</template>\n```\n', "packages/components/src/components/textarea/docs/Angular.md": '## Angular\n\nFor general installation and configuration look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBTextarea } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTextarea],\n // ...\n})\n```\n\n### Use component\n\n```ts app.component.ts\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-root",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n textarea = "default value";\n}\n```\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-textarea\n name="textarea"\n label="Textarea Controlled"\n placeholder="Placeholder"\n message="Message"\n icon="x_placeholder"\n [value]="textarea"\n (change)="textarea = $event.target.value"\n></db-textarea>\n```\n', "packages/components/src/components/textarea/docs/HTML.md": '## HTML\n\nFor general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-textarea">\n <label for="textarea">Label</label>\n <textarea id="textarea" rows="2" cols="33" placeholder=" "></textarea>\n </div>\n</body>\n```\n', "packages/components/src/components/textarea/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out\n> this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| -------------- | :----: | ------------- | ----------- |\n| `elm-textarea` | \u{1F501} | `db-textarea` | |\n\n### variants\n\n| Before | Status | After | Description |\n| ----------------- | :----: | --------------- | ----------- |\n| `semitransparent` | \u274C | | |\n| `white` | \u274C | | |\n| `solid` | \u274C | | |\n| `outline` | \u274C | | |\n| | \u{1F195} | `adaptive` | |\n| | \u{1F195} | `critical` | |\n| | \u{1F195} | `informational` | |\n| | \u{1F195} | `warning` | |\n| | \u{1F195} | `successful` | |\n\n### other\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------- | ----------- |\n| `description` | \u{1F501} | `message` | |\n", "packages/components/src/components/textarea/docs/React.md": '## React\n\nFor general installation and configuration look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBTextarea } from "@db-ux/react-core-components";\n\nconst App = () => {\n const [textarea, setTextarea] = useState("default textarea");\n return (\n <DBTextarea\n label="Textarea Controlled"\n message="Message"\n value={textarea}\n onChange={(event) => {\n setTextarea(event.target.value);\n }}\n />\n );\n};\n\nexport default App;\n```\n', "packages/components/src/components/textarea/docs/Vue.md": '## Vue\n\nFor general installation and configuration look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### General\n\nYou cannot use a default value for [textarea in vue](https://vuejs.org/guide/essentials/forms.html#multiline-text).\nUse `v-model:value` or `:value` instead with a `_ref("My default value")`.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { _ref } from "vue";\nimport { DBTextarea } from "@db-ux/v-core-components";\n\nconst textarea = _ref("default value");\n</script>\n\n<template>\n <DBTextarea\n label="Textarea value"\n placeholder="Placeholder"\n message="Message"\n icon="x_placeholder"\n name="textarevalue-name"\n v-model:value="textarea"\n />\n</template>\n```\n', "packages/components/src/components/tooltip/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBTooltip } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTooltip],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-button aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <db-tooltip id="tooltip-01">Tooltip</db-tooltip>\n</db-button>\n```\n', "packages/components/src/components/tooltip/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <button class="db-button" aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <i class="db-tooltip" id="tooltip-01">Tooltip</i>\n </button>\n</body>\n```\n', "packages/components/src/components/tooltip/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/tooltip/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBTooltip, DBButton } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBButton aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <DBTooltip id="tooltip-01">Tooltip</DBTooltip>\n </DBButton>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tooltip/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBTooltip, DBButton } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBButton aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <DBTooltip id="tooltip-01">Tooltip</DBTooltip>\n </DBButton>\n</template>\n```\n', "packages/foundations/docs/BrowserSupport.md": '# Browser Support\n\nWe\'re [testing our components with playwright](../../foundations/test-table) on the latest browser versions of Google Chrome, Mozilla Firefox and Apple Safari. Since all of these browsers are supposed to be evergreen, we\'re using some newer browser features that have been added specifically as part of the [interop initiative](https://web.dev/blog/interop-2025), partly as progressive enhancements, but some may not even offer graceful degradation.\n\nThis may leave some older browser versions behind. If you need to take care of these older browsers, you may not want to migrate to DB UX Design System v3 right now, but stay with DB UI Core or Elements for a little longer. In particular, the following features we use may be related to an evaluation of your browser strategy:\n\n## Stable in evergreen browsers\n\nThese are the features that we use or plan to integrate, which are stable in the Stable channel, including the ESR versions of Evergreen browsers.\n\n| Web Feature | Google Chrome | Mozilla Firefox | Apple Safari |\n| ----------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------- | ----------------- |\n| [Multiple named disclosure boxes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details#multiple_named_disclosure_boxes) | 120 (05.12.2023) | 130 (03.09.2024) | 17.2 (11.12.2023) |\n| [`scrollbar-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-color) (planned) | 121 (13.01.2024) | 64 (11.12.2018) | 26.2 (12.12.2025) |\n| [Popover](https://caniuse.com/mdn-api_htmlelement_popover) (planned) | 114 (30.05.2023) | 125 (16.04.2024) | 17 (26.09.2023) |\n| [`requestClose()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/requestClose#browser_compatibility) (planned) | 134 (04.03.2025) | 139 (27.05.2025) | 18.4 (31.03.2025) |\n| [`:open` CSS pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:open#browser_compatibility) | 133 (04.02.2025) | 136 (04.03.2025) | 26.5 |\n\nPopover is loosely depending on Anchor Positioning.\n\n## Progressive enhancement\n\n| Web Feature | Google Chrome | Mozilla Firefox | Apple Safari |\n| --------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------- | -------------------------------------------------------------------------------------------------------- |\n| [CSS `field-sizing: content` property](https://caniuse.com/mdn-css_properties_field-sizing_content) | 123 (19.03.2024) | 152 | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [`hidden="until-found"`-HTML-attribute](https://caniuse.com/mdn-html_global_attributes_hidden_until-found) (planned) | 102 (24.05.2022) | 139 (27.05.2025) | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [`dialog[closedby="closerequest"]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closerequest) (planned) | 134 (19.03.2024) | 141 (22.07.2025) | [Technology Preview 242](https://webkit.org/blog/category/safari-technology-preview/) |\n| [Customizable `select` elements](https://caniuse.com/selectlist) (planned) | 134 (19.03.2024) | tbd | [Technology Preview 238](https://webkit.org/blog/17848/release-notes-for-safari-technology-preview-238/) |\n| [`select[multiple][size="1"]` UI optimization on Desktop browsers](https://chromestatus.com/feature/5412736871825408) (planned) | 142 (28.10.2025) | tbd | tbd |\n\n## Without graceful degradation\n\nThe following functionality relies on JavaScript for support in browsers that do not support it yet. Other solutions would be PostCSS preprocessing (planned) and declaring CSS declarations twice, both in the new and old ways (e.g., semantic overflow).\n\n| Web Feature | Google Chrome | Mozilla Firefox | Apple Safari |\n| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------------------------------- | ------------------------------------------------------------------------------------- |\n| [semantic overflow (`overflow-block` and `overflow-inline`)](https://caniuse.com/mdn-css_properties_overflow-block) | 135 (01.04.2025) | 69 (03.09.2019) | 26 |\n| [`@property` / typed CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) | 85 (25.08.2022) | 128 (09.07.2024) | 16.4 (27.03.2023) |\n| [`light-dark()` CSS function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) | 123 (19.03.2024) | 120 (21.11.2023) | 17.5 (13.05.2024) |\n| [`style()` container queries for custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries#container_style_queries) (planned) | 111 (07.03.2023) | 151 | 18 (16.09.2024) |\n| [Anchor Positioning](https://caniuse.com/css-anchor-positioning) (planned) | 125 (14.05.2024) | 147 (13.01.2026) | 26 (15.09.2025) |\n| [Invoker Commands](https://caniuse.com/mdn-html_elements_button_commandfor) (planned) | 135 (01.04.2025) | 144 (14.10.2025) | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [`attr()` CSS Values 5 extensions](https://developer.mozilla.org/en-US/docs/Web/CSS/attr) (planned) | 133 (04.02.2025) | Firefox 149 (behind a config preference) | [Technology Preview 242](https://webkit.org/blog/category/safari-technology-preview/) |\n| [CSS Custom Functions](https://www.bram.us/2025/02/09/css-custom-functions-teaser/) (planned) | 139 (30.07.2025) | tbd | tbd |\n| [CSS `sibling-count()` and `sibling-index()`](https://caniuse.com/wf-sibling-count) (planned) | 138 (24.06.2025) | tbd | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [CSS `@scope`](https://caniuse.com/css-cascade-scope) (planned) | 118 (10.10.2023) | 146 (09.12.2025) | 17.4 (05.03.2024) |\n', "packages/foundations/docs/Colors.md": '# Colors\n\n- You use **Colors** to highlight an area with a specific color.\n- You can also use it to change the text color for components with the `*-transparent-semi` colors.\n- Most classes/placeholders will change `color` and `background-color` and will set properties, which will be passed down to adaptive components.\n\n## How to use\n\n1. First, you can use our **[color usage guide](./color-usage-guide)** to find out which method is best for coloring your layouts or components.\n2. The colors of layouts can be easily set using the predefined **[color schemes](./color-schemes)**.\n3. When developing your own components, `SCSS` variables or `CSS Custom Properties` should be used.\n\n**\u{1F6A7} The overview of our color variables is still in the making. Please come back soon.**\n\n## How to include colors\n\nFor **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/colors/classes/all.css";` in your root `.css` file.\nOr if you only want a single variant e.g. **informational** you can import `@import "@db-ux/core-foundations/build/styles/colors/classes/informational.css";`.\n\nIn case that you\'re either using a bundler (recommended) or importing the CSS within your JavaScript files, please adapt this `@import` syntax accordingly.\n\nFor **SCSS** you need to use the import `@use "@db-ux/core-foundations/build/styles/colors/placeholder"` in your `.scss` file, where you need to reference the specific variable.\nThen you can use e.g. **informational** color by extending our SCSS placeholders like this: `@extend %db-informational-bg-1`.\n\n## Dark- & Light-Mode\n\nWe provide tokens for both dark- and light-mode. If you include the **relative** style you get a media query `@media (prefers-color-scheme: dark)` with the relevant tokens. You can [emulate](https://developer.chrome.com/docs/devtools/rendering/emulate-css/) the modes inside the devtools.\n\nIt\'s [recommended to set a `meta`-HTML-tag](https://web.dev/articles/color-scheme#the_color-scheme_meta_tag) to provide a signal to the browser on your accepted color schemes previous to loading the CSS:\n\n```html\n<meta name="color-scheme" content="dark light" />\n```\n\nWe recommend using the default media query based on the user preference, but if you want to force a mode for your page, you could set the `color-scheme` `meta`-HTML-tag to either [`only light`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#only_light), [`dark` or `light`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#light).\n\nIf you want to set it on a specific container as e.g. shown on the documentation page "Color schemes" you can do that by adding the HTML-attributes `data-mode="dark"` or `data-mode="light"`:\n\n### HTML\n\n```html\n<div data-mode="dark">...</div>\n```\n\nWe\'re providing an example in our [color schemes documentation](./color-schemes).\n\nWe need to set the **base** background to the element with `[data-mode]` so if you want to change the background to another color, make sure to use a wrapping tag like `<div>` with the `[data-mode]` to avoid issues.\n', "packages/foundations/docs/CustomIcons.md": "# Custom Icons\n\nIf you have custom icons and want to use them for [foundations](https://www.npmjs.com/package/@db-ux/core-foundations) and/or in [components](https://www.npmjs.com/package/@db-ux/core-components), you need to generate a **woff2** file.\n\nCheck out the `icon-font-tools` [documentation](https://github.com/db-ux-design-system/icon-font-tools/blob/main/docs/GenerateIconFonts.md) to generate a **woff2** file.\n\n## Foundation Developer\n\nIf you update a **svg** inside `assets/icons/functional/images` you need to recreate the **woff2** file.\n\nFor this you just need to run the following command from root:\n\n```shell\nnpm run update:icon-fonts\n```\n\nYour new icon should be inside `assets/icons/functional/fonts/**/info.json` and you should see it inside `assets/icons/functional/fonts/**/index.html` in the browser.\n", "packages/foundations/docs/Densities.md": '# Densities\n\n- You could use **Densities** to create visual "volume levels"\n- You could change the appearance of a container rather than a component\n- Best example is the navigation on our [main page](https://design-system.deutschebahn.com/core-web/review/main/). Above the navigation is a smaller meta-navigation and even the component inside is smaller as well as all the spacings. The meta-navigation is above the real navigation, but focus of the user is on the real navigation, because the meta-navigation has less "volume"\n\nThere are three different **Densities**, you can use them to change the volume of a specific container or even the entire page based on the use-case, so change the default **density** when:\n\n1. **functional**: e.g. use this for business apps with large tables\n2. **regular**: e.g. use this for normal consumer apps\n3. **expressive**: e.g. use this for marketing apps/ single pages\n\n## How to include\n\nFor **CSS**, **SCSS** and **Tailwind** you don\'t have to include a specific file, just follow the documentation for [foundations](../README.md).\n\n### How to use\n\nWe\'re providing [examples](./examples) to see the differences.\n\nWe set the `data-density` on a container like a `<div>`:\n\n```html\n<div data-density="functional">\n <!-- Everything inside here will be smaller -->\n <DBButton>Test</DBButton>\n <DBInput label="Test" />\n</div>\n```\n\nVariants:\n\n| Variant | CSS/SCSS/Tailwind |\n| :-----------------: | --------------------------- |\n| `functional` | `data-density="functional"` |\n| `regular` (default) | `data-density="regular"` |\n| `expressive` | `data-density="expressive"` |\n\nTo change the **density** of the entire page use:\n\n```html\n<body data-density="functional">\n ...\n</body>\n```\n', "packages/foundations/docs/FontsSizes.md": '# DB Font Sizes\n\nThe font sizes of foundations consist of [two different sets](./overview) (9 sizes each) for general texts (**Body Font Sizes**) and headlines (**Headline Font Sizes**).\nAll sizes of both sets are automatically adjusted by the selected [density](./../densities/readme).\n\n## Body Font Sizes\n\n- By default, the Body Font Size `md` is set to the body tag.\n- These 9 Body Font Sizes can also be explicitly set as classes on elements in order to change their font size.\n\n## Headline Font Sizes\n\n- 9 Headline Sizes are available and are usable by custom properties\n- 6 Headline Sizes are mapped to native headline tags (`h1` to `h6`) by default. Headlines can therefore be used directly.\n\n## Available variants / sizes\n\n`3xl` | `2xl` | `xl` | `lg` | `md` | `sm` | `xs` | `2xs` | `3xs`\n\n## When to use\n\n- Use our provided **Body Font Sizes** to explicitly change the size of text elements like `<p>`, `<span>` etc.\n- Use a **Body Font Size** for a container and all text elements in it (does not affect components font-sizes) .\n- **Headline Font Sizes** can be used to override the default mapping of the `h1` - `h6` tags.\n- _Advanced: use standardised *custom properties* to define `font-size` and `line-height` in your own components._\n\n### Notes\n\n> - Some sizes may stay the same because of screen width or density.\n> - Elements such as `<p>` and all headings (`h1` - `h6`) as well as **DB UX Design System Core components** have font sizes assigned by default so that they can be used without further customisation.\n\n### How to include\n\nFor **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/fonts/classes/all.css";` in your root `.css` file.\n\nFor **SCSS** you can use the `.css` file, or you can use a placeholder by importing `@use "@db-ux/core-foundations/build/styles/fonts"` in your `.scss` file, where you need to reference the specific font size.\nThen you can use e.g. `sm` font-size by extending our SCSS placeholders like this: `@extend %db-overwrite-font-size-sm`.\n\n> **_NOTE:_** Make sure that you import the file after all other **foundation** css files, otherwise you should overwrite a specific `font-size` with the global selector\n\n```css\n/* Global selector */\n* {\n font-size: inherit;\n line-height: inherit;\n}\n```\n\n### How to use\n\nThe following options are recommended for applying **Body Font Sizes**:\n\n- CSS classes\n- CSS `data-`attributes\n- SCSS placeholders\n- Tailwind classes\n\nAll options (except the last one) set `font-size`, `line-height` and some **CSS Custom Properties** for an element. These custom properties are internally required by some components to be displayed correctly.\n\n> All available variants / sizes, [see also the detailed overview](./overview):\n>\n> `3xl` | `2xl` | `xl` | `lg` | `md` | `sm` | `xs` | `2xs` | `3xs`\n\n**Note: We use `XX` here. You should replace it with a size from above.**\n\n| CSS class | CSS data-attribute | SCSS | Tailwind |\n| :---------------------------: | ------------------------- | ---------------------------------------- | ----------------------------- |\n| `class="db-font-size-XX"` | `data-font-size="XX"` | `@extend %db-overwrite-font-size-XX` | `class="db-font-size-XX"` |\n| `class="db-headline-size-XX"` | `data-headline-size="XX"` | `@extend %db-overwrite-headline-size-XX` | `class="db-headline-size-XX"` |\n\n#### Advanced use: CSS Custom Properties\n\n> **_Note:_** The direct use of custom properties to set font sizes should be avoided if possible. If this is unavoidable, existing restrictions should be taken into account.\n\nAll of the above options are available for applying the **Body Font Sizes** to HTML elements within custom components.\nIn some cases it may make sense to set the `font-size` and `line-height` manually in the css.\n\n**Please replace `XX` in the custom-properties with one of the sizes:**\n\n```css\n.text-element {\n font: var(--db-type-body-XX);\n}\n```\n', "packages/foundations/docs/IDESupport.md": '# IDE Support\n\nWe try to support those IDEs:\n\n- [JetBrain](https://www.jetbrains.com/) IDEs (like. IntelliJ IDEA, WebStorm, etc.)\n- [Visual Studio Code (VSCode)](https://code.visualstudio.com/)\n\nMost use cases of the Design System might work in other IDEs as well.\n\n## Autocomplete for CSS classes and CSS Custom Properties (Variables)\n\nYou can enable auto-complete of CSS classes (like e.g. `db-color-cyan`) for `HTML` or `JSX` and CSS Custom Properties (like e.g. `var(--db-bg-basic-level-1-default)`) in `.css` or `.scss` files by including `@db-ux/core-foundations/build/ide`.\n\n> **Note:** The contents of this directory shouldn\'t be included/referenced inside your app. It\'s only serving as a file containing declarations for autocompletion inside your IDE. All values for classes and properties don\'t reflect the real values, and neither does the CSS selector. The correct values my differ based on multiple circumstances like light-/dark-mode or screen-size etc. Therefore, there isn\'t a 1:1 mapping.\n\n### JetBrain IDEs (like. IntelliJ IDEA, WebStorm, etc.)\n\n1. Goto `File/Settings/Languages & Frameworks/JavaScript/Libraries`\n2. Press the `Add` button and write `db-ux` into the "name" input. This name will be shown in the auto-complete popup during coding. You can change the name if you want to. Keep the rest of the settings as default: `Framework type: <Custom>` and `Visibility: Project`.\n3. Next press the \u2795 button below `Visibility` and select `Attach Directories...`\n4. This will open a file manager. Navigate to your current projects `node_modules/@db-ux/core-foundations/build/ide` and select the `ide` folder. Press `OK`.\n5. The folder should be included in the list below the \u2795 button. Press `Apply` on the bottom.\n6. Everything should work now. Close the settings and move to a `html` or `jsx/tsx` file and write `class="db-` as attribute to an element. You should see all `db-*` classes for auto-completion. Furthermore, you can go to a `.css` file and write inside a selector `color: db-`. You should see the autocomplete for CSS Custom Properties. By pressing `ENTER` this will automatically add `var(--db-xxx)`.\n\n### VS Code\n\n1. Install [the CSS Variable Autocomplete extension](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables).\n2. If it doesn\'t exist, create a new file `.vscode/settings.json` in your project\n3. Add this to `settings.json`:\n\n```json settings.json\n{\n "cssVariables.lookupFiles": [\n "**/*.css",\n "**/*.scss",\n "**/*.sass",\n "**/*.less",\n "node_modules/@db-ux/core-foundations/build/ide/db.ide.css"\n ]\n}\n```\n\n4. Go to a `.css` file and write inside a selector `color: db-`. You should see the autocomplete for CSS Custom Properties. By pressing `ENTER` this will automatically add `var(--db-xxx)`.\n\n> **Note:** We couldn\'t find a good extension to work properly with the classes you could try out [the SCSS Everywhere extension](https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion). But we encountered some issues with this one.\n', "packages/foundations/docs/Icons.md": '# Icons\n\n- We use icon fonts as **woff2** files for all our icons.\n- We auto generate these files out of `.svg` files.\n- A lot of our [components](../../components/readme) have an `icon` property you can pass in.\n- Use the CSS Custom Property `--db-icon-color` to overwrite the icons color.\n\n## How to include icons\n\nFor **CSS**, **SCSS** and **Tailwind** you don\'t have to include a specific file, just follow the documentation for [foundations](../README.md).\n\nIf you only want to use the icons from this library and not the full CSS, take a look at the "Edge case: Using only icons without the full CSS" section of this page.\n\n### How to use\n\nWe\'re providing an [overview for all of our icons](./overview).\n\nYou can add an icon before or after a tag, by adding an `data-` attribute to your HTML code, like for example:\n\n| Variant | Data |\n| -------- | :---------------------------------------: |\n| `before` | `data-icon="icon-from-overview"` |\n| `after` | `data-icon-trailing="icon-from-overview"` |\n\n### Icon weight\n\nYou can control the size/weight of icons by using the `data-icon-weight` attribute. Available weights are: `16`, `20`, `24`, `32`, `48`, `64`.\n\n| Position | Data attribute | Example |\n| -------- | :----------------------------: | ------------------------------------------------------------------------- |\n| `before` | `data-icon-weight="24"` | `<span data-icon="user" data-icon-weight="24">Text</span>` |\n| `before` | `data-icon-weight-before="32"` | `<span data-icon="user" data-icon-weight-before="32">Text</span>` |\n| `after` | `data-icon-weight-after="20"` | `<span data-icon-trailing="user" data-icon-weight-after="20">Text</span>` |\n\nIf you need to adjust the size of the icons more precisely, you can also set the `--db-icon-font-size` CSS custom property. Please bear in mind that you need to select an `icon-weight` to go with this icon font size from the available options, as each weight includes more or fewer details depending on the resulting size.\n\n### Icon variant (family)\n\nYou can control the variant/family of icons by using the `data-icon-variant` attribute. Available variants are: `default`, `filled`.\n\n| Position | Data attribute | Example |\n| -------- | :---------------------------------: | ------------------------------------------------------------------------------ |\n| `before` | `data-icon-variant="filled"` | `<span data-icon="user" data-icon-variant="filled">Text</span>` |\n| `before` | `data-icon-variant-before="filled"` | `<span data-icon="user" data-icon-variant-before="filled">Text</span>` |\n| `after` | `data-icon-variant-after="filled"` | `<span data-icon-trailing="user" data-icon-variant-after="filled">Text</span>` |\n\n### Combining weight and variant\n\nYou can combine both weight and variant attributes for precise icon control:\n\n```html\n<!-- 32px filled icon before text -->\n<span data-icon="user" data-icon-weight="32" data-icon-variant="filled"\n >User Profile</span\n>\n\n<!-- 24px default icon after text -->\n<span\n data-icon-trailing="arrow_right"\n data-icon-weight-after="24"\n data-icon-variant-after="default"\n >Next</span\n>\n\n<!-- Different styling for before and after icons -->\n<span\n data-icon="star"\n data-icon-weight-before="20"\n data-icon-variant-before="filled"\n data-icon-trailing="arrow_right"\n data-icon-weight-after="16"\n data-icon-variant-after="default"\n>\n Favorite Item\n</span>\n```\n\n### Icons color\n\nYou could use the CSS Custom Property `--db-icon-color` to overwrite the icons color, be it icon fonts or when using the SVG files directly. Or `--db-icon-pulse-color` for the illustrative icons pulse color.\n\n## Custom Icons\n\nIf you have custom icons and want to use them for foundations and/or in components, you need to generate a **woff2** file.\n\n[More information](./CustomIcons.md)\n\n## Additional functionality\n\n### TypeScript Autocomplete\n\nTo get TypeScript autocomplete you need to include a `*.d.ts` file, where you add some icons to the whitelabel base icons:\n\n```ts\n//\nimport "@db-ux/core-foundations";\nimport { BaseIconTypes } from "@db-ux/core-foundations";\n\ndeclare module "@db-ux/core-foundations" {\n interface OverwriteIcons {\n types: BaseIconTypes | "my-custom-icon1" | "my-custom-icon2";\n }\n}\n```\n\n_**OR:**_ If you use another library which provides some overwrite you can do it like this:\n\n```ts\n//\nimport "@db-ux/core-foundations";\nimport "@db-ux/db-theme-icons";\nimport { IconTypes } from "@db-ux/db-theme-icons";\n\ndeclare module "@db-ux/core-foundations" {\n interface OverwriteIcons {\n types: IconTypes;\n }\n}\n```\n\nYou can combine it as well like this:\n\n```ts\n//\nimport "@db-ux/core-foundations";\nimport "@db-ux/db-theme-icons";\nimport { IconTypes } from "@db-ux/db-theme-icons";\n\ndeclare module "@db-ux/core-foundations" {\n interface OverwriteIcons {\n types: IconTypes | "my-custom-icon1" | "my-custom-icon2";\n }\n}\n```\n\n### Edge case: Using only icons without the full CSS\n\nIf you want to use only the icons from this library without including the complete CSS, you can copy or reference just the icon-related files:\n\n```css\n/* bundler.css */\n@import "@db-ux/core-foundations/build/styles/defaults/default-icons.css";\n@import "@db-ux/db-theme-icons/build/styles/default-font.css";\n@import "@db-ux/db-theme-icons/build/styles/[rollup|webpack|relative].css";\n```\n\nor\n\n```bash\ncp "node_modules/@db-ux/core-foundations/build/styles/defaults/default-icons.css" \u2026;\ncp "node_modules/@db-ux/db-theme-icons/build/styles/default-font.css" \u2026;\ncp "node_modules/@db-ux/db-theme-icons/build/styles/[relative|absolute].css" \u2026;\n```\n\nYou need to copy or reference the correct `.css` file out of your project. There are multiple files depending on the bundler you use:\n\n- `relative.css`: No bundler (as shown in the previous code block)\n- `absolute.css`: No bundler\n- `rollup.css`: vite, rollup\n- `webpack.css`: webpack\n\n**Important for non-bundlers usage:** If you\'re moving `relative.css` CSS file to your project, you need to copy the `fonts` folder from `node_modules/@db-ux/db-theme-icons/build/fonts` to the same directory next to the folder where you store the `relative.css` file (e.g., next to your `styles` folder), because we\'re using the reference to e.g. `src: url("../fonts/default_12/db.woff2")` out of the `relative.css` CSS file.\n', "packages/foundations/docs/Performance.md": '# Performance\n\nIf you need to improve the performance of your application, you can use the following tips:\n\n## Minify with PurgeCSS and CSSO\n\nWhen you use the full bundled `.css` file we provide, you could easily reduce the file size by removing unused CSS classes. This can be done with [PurgeCSS](https://purgecss.com/) and [CSSO](https://github.com/css/csso).\n\nInstall both with:\n\n```shell\nnpm i purgecss csso --save-dev\n```\n\nNext you should create a file, e.g. `purgecss.js` in your project root with the following content:\n\n```javascript\nimport { writeFileSync } from "node:fs";\n\nimport { PurgeCSS } from "purgecss";\nimport { minify } from "csso";\n\nconst distFolder = "dist"; // TODO: Change me if you need another folder\n\nnew PurgeCSS()\n .purge({\n content: [`${distFolder}/**/*.html`, `${distFolder}/**/*.js`],\n css: [`${distFolder}/**/*.css`],\n defaultExtractor: (content) => content.match(/[\\w-/:]+(?<!:)/g) || [],\n variables: true,\n rejectedCss: true,\n safelist: {\n variables: [\n /* TODO: Keep only the densities you need */\n /-functional-/,\n /-regular-/,\n /-expressive-/,\n /* Keep density & all color properties/variables */\n /-default$/,\n /-hovered$/,\n /-pressed$/\n ],\n /* Some components require a safelist */\n greedy: [\n /db-tabs/ // TODO: Add more components if necessary\n ]\n }\n })\n .then((purgeCSSResult) => {\n for (const result of purgeCSSResult) {\n writeFileSync(result.file, minify(result.css).css);\n\n /* Optional: for debugging */\n // writeFileSync(`rejected.css`, result.rejectedCss || "");\n }\n });\n```\n\nYou can run this script with `node purgecss.js` and it will minify your CSS files. You can also add this script to your `package.json` to run after your regular build process:\n\n```json\n{\n "scripts": {\n "postbuild": "node purgecss.js"\n }\n}\n```\n', "packages/foundations/docs/Variables.md": "# Variables\n\n- You use Variables to style your pages and custom components.\n- The Variables are primarily for paddings, margins and all kinds of sizes.\n- All variables are automatically predefined with the correct variable based on the [density](../densities/readme).\n- Based on the density and the selected theme, the \"real\" value behind the variable can change.\n\n## How to include variables\n\nFor **CSS** and **Tailwind** you don't have to include a specific file, just follow the documentation for [foundations](../README.md).\n\nFor **SCSS** you need to use the import `@use \"@db-ux/core-foundations/build/styles/variables\"` in your `.scss` file, where you want to reference the specific variable.\n\n## Simple overview for advanced\n\n| Variable type | T-Shirts \u{1F455} | Base |\n| ---------------------- | ------------------------------------------ | ---- |\n| **spacing fixed** | `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl` | `md` |\n| **spacing responsive** | `xs`, `sm`, `md`, `lg`, `xl` | `md` |\n| **sizing** | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | `md` |\n\n## Spacing fixed\n\n- We use **spacing fixed** to add margins, paddings, gaps, etc.\n- We don't use them for `width` or `height`.\n- Those are the main variables you use all the time to build your page or component.\n\n### How to use\n\nWe use **padding** as an example for this variable.\n\nYou can see a visual preview [spacings fixed examples page](./examples).\n\n| T-Shirt \u{1F455} | CSS | SCSS | Tailwind |\n| :--------: | -------------------------------------- | ------------------------------------------ | ----------- |\n| `3xs` | `padding: var(--db-spacing-fixed-3xs)` | `padding: variables.$db-spacing-fixed-3xs` | `p-fix-3xs` |\n| `2xs` | `padding: var(--db-spacing-fixed-2xs)` | `padding: variables.$db-spacing-fixed-2xs` | `p-fix-2xs` |\n| `xs` | `padding: var(--db-spacing-fixed-xs)` | `padding: variables.$db-spacing-fixed-xs` | `p-fix-xs` |\n| `sm` | `padding: var(--db-spacing-fixed-sm)` | `padding: variables.$db-spacing-fixed-sm` | `p-fix-sm` |\n| `md` | `padding: var(--db-spacing-fixed-md)` | `padding: variables.$db-spacing-fixed-md` | `p-fix-md` |\n| `lg` | `padding: var(--db-spacing-fixed-lg)` | `padding: variables.$db-spacing-fixed-lg` | `p-fix-lg` |\n| `xl` | `padding: var(--db-spacing-fixed-xl)` | `padding: variables.$db-spacing-fixed-xl` | `p-fix-xl` |\n\n## Spacing responsive\n\n- We use **spacing responsive** to add spacings which should change based on the users' device.\n- We don't use them for `width` or `height`.\n- Best example would be the padding for your `main` region which should be larger on a desktop device than mobile.\n- We recommend using `DBSection` from our [components library](../../components/readme). The component handles the responsive Layout for your app, you don't have to struggle which spacing would be the correct one.\n\n### How to use\n\nWe use **padding** as an example for this variable.\n\nYou can see a visual preview [spacings responsive examples page](./examples).\n\n| T-Shirt \u{1F455} | CSS | SCSS | Tailwind |\n| :--------: | ------------------------------------------ | ---------------------------------------------- | ---------- |\n| `xs` | `padding: var(--db-spacing-responsive-xs)` | `padding: variables.$db-spacing-responsive-xs` | `p-res-xs` |\n| `sm` | `padding: var(--db-spacing-responsive-sm)` | `padding: variables.$db-spacing-responsive-sm` | `p-res-sm` |\n| `md` | `padding: var(--db-spacing-responsive-md)` | `padding: variables.$db-spacing-responsive-md` | `p-res-md` |\n| `lg` | `padding: var(--db-spacing-responsive-lg)` | `padding: variables.$db-spacing-responsive-lg` | `p-res-lg` |\n| `xl` | `padding: var(--db-spacing-responsive-xl)` | `padding: variables.$db-spacing-responsive-xl` | `p-res-xl` |\n\n## Sizing\n\n- We use **sizing** to set a fixed height to components (Button, Input, ...).\n- We don't use them for `padding` or `margin` except for absolute elements inside a component with a fixed height.\n- You should use a sizing variable if you want to align a custom component with another component, which has a fixed height.\n\n### How to use\n\nWe use **height** as an example for this variable.\n\nYou can see a visual preview [sizings examples page](./examples).\n\n| T-Shirt \u{1F455} | CSS | SCSS | Tailwind |\n| :--------: | ------------------------------ | ---------------------------------- | ----------- |\n| `xs` | `height: var(--db-sizing-xs)` | `height: variables.$db-sizing-xs` | `h-siz-xs` |\n| `sm` | `height: var(--db-sizing-sm)` | `height: variables.$db-sizing-sm` | `h-siz-sm` |\n| `md` | `height: var(--db-sizing-md)` | `height: variables.$db-sizing-md` | `h-siz-md` |\n| `lg` | `height: var(--db-sizing-lg)` | `height: variables.$db-sizing-lg` | `h-siz-lg` |\n| `xl` | `height: var(--db-sizing-xl)` | `height: variables.$db-sizing-xl` | `h-siz-xl` |\n| `2xl` | `height: var(--db-sizing-2xl)` | `height: variables.$db-sizing-2xl` | `h-siz-2xl` |\n| `3xl` | `height: var(--db-sizing-3xl)` | `height: variables.$db-sizing-3xl` | `h-siz-3xl` |\n" }, migrationGuides: { README: "# Migration from DB UI to DB UX Design System v3\n\nThis folder contains the documentation on how to migrate from DB UI to DB UX Design System v3.\n\nIf you are even already on our current Design System generation, have a look at the [GitHub Releases page](https://github.com/db-ux-design-system/core-web/releases) for the `CHANGELOG.md` file in each Node package for detailed information on changes.\n", "color-migration": "# DB UI \u2192 DB UX Color Migration\n\nUse the **BG** column for `background-color` / `background`. Use the **FG** column for `color` / `border-color` / `outline-color` / `fill` / `stroke` / `caret-color`. For `box-shadow`, use `--db-elevation-*` tokens instead.\n\n| DB UI v2 Token | Background (BG) | Foreground (FG) |\n| --------------------------------- | ------------------------------------------------------ | ---------------------------------------------------- |\n| `db-color-yellow-100` | `--db-yellow-bg-basic-level-2-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-yellow-200` | `--db-yellow-bg-basic-level-3-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-yellow-300` | `--db-yellow-bg-basic-level-3-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-400` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-500` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-600` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-700` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-yellow-800` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-yellow-900` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-orange-100` | `--db-yellow-bg-basic-level-2-default` | `--db-yellow-on-bg-inverted-default` |\n| `db-color-orange-200` | `--db-yellow-bg-basic-level-3-default` | `--db-yellow-on-bg-inverted-default` |\n| `db-color-orange-300` | `--db-yellow-bg-basic-level-3-default` | `--db-warning-on-bg-basic-emphasis-60-default` |\n| `db-color-orange-400` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-orange-500` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-orange-600` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-orange-700` | `--db-warning-bg-inverted-contrast-low-default` | `--db-warning-on-bg-basic-emphasis-70-default` |\n| `db-color-orange-800` | `--db-warning-bg-inverted-contrast-high-default` | `--db-warning-on-bg-basic-emphasis-80-default` |\n| `db-color-red-100` | `--db-brand-bg-basic-level-3-default` | `--db-brand-on-bg-inverted-default` |\n| `db-color-red-200` | `--db-brand-bg-basic-level-3-default` | `--db-burgundy-on-bg-basic-emphasis-60-default` |\n| `db-color-red-300` | `--db-brand-bg-vibrant-default` | `--db-brand-on-bg-basic-emphasis-50-default` |\n| `db-color-red-400` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-red-500` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-red-600` | `--db-brand-bg-inverted-contrast-high-default` | `--db-brand-on-bg-basic-emphasis-80-default` |\n| `db-color-red-700` | `--db-brand-bg-inverted-contrast-high-default` | `--db-brand-on-bg-basic-emphasis-90-default` |\n| `db-color-red-800` | `--db-brand-bg-inverted-contrast-max-default` | `--db-brand-on-bg-basic-emphasis-90-default` |\n| `db-color-burgundy-100` | `--db-burgundy-bg-basic-level-3-default` | `--db-pink-on-bg-inverted-default` |\n| `db-color-burgundy-200` | `--db-pink-bg-basic-level-3-default` | `--db-burgundy-on-bg-basic-emphasis-60-default` |\n| `db-color-burgundy-300` | `--db-burgundy-bg-vibrant-default` | `--db-burgundy-on-bg-basic-emphasis-50-default` |\n| `db-color-burgundy-400` | `--db-burgundy-bg-inverted-contrast-low-default` | `--db-burgundy-on-bg-basic-emphasis-70-default` |\n| `db-color-burgundy-500` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-burgundy-600` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-burgundy-700` | `--db-pink-bg-inverted-contrast-max-default` | `--db-burgundy-on-bg-basic-emphasis-90-default` |\n| `db-color-burgundy-800` | `--db-pink-bg-inverted-contrast-max-default` | `--db-pink-on-bg-basic-emphasis-100-default` |\n| `db-color-pink-100` | `--db-pink-bg-basic-level-3-default` | `--db-pink-on-bg-inverted-default` |\n| `db-color-pink-200` | `--db-pink-bg-basic-level-3-default` | `--db-burgundy-on-bg-basic-emphasis-60-default` |\n| `db-color-pink-300` | `--db-pink-bg-vibrant-default` | `--db-pink-on-bg-basic-emphasis-60-default` |\n| `db-color-pink-400` | `--db-pink-bg-vibrant-default` | `--db-pink-on-bg-basic-emphasis-50-default` |\n| `db-color-pink-500` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-pink-600` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-pink-700` | `--db-pink-bg-inverted-contrast-high-default` | `--db-pink-on-bg-basic-emphasis-80-default` |\n| `db-color-pink-800` | `--db-pink-bg-inverted-contrast-high-default` | `--db-pink-on-bg-basic-emphasis-80-default` |\n| `db-color-violett-100` | `--db-violet-bg-basic-level-3-default` | `--db-violet-on-bg-inverted-default` |\n| `db-color-violett-200` | `--db-violet-bg-basic-level-3-default` | `--db-violet-on-bg-basic-emphasis-60-default` |\n| `db-color-violett-300` | `--db-violet-bg-vibrant-default` | `--db-violet-on-bg-basic-emphasis-50-default` |\n| `db-color-violett-400` | `--db-violet-bg-inverted-contrast-low-default` | `--db-violet-on-bg-basic-emphasis-70-default` |\n| `db-color-violett-500` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-violett-600` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-violett-700` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-90-default` |\n| `db-color-violett-800` | `--db-violet-bg-inverted-contrast-max-default` | `--db-violet-on-bg-basic-emphasis-90-default` |\n| `db-color-blue-100` | `--db-informational-bg-basic-level-3-default` | `--db-informational-on-bg-inverted-default` |\n| `db-color-blue-200` | `--db-informational-bg-basic-level-3-default` | `--db-informational-on-bg-basic-emphasis-60-default` |\n| `db-color-blue-300` | `--db-blue-bg-vibrant-default` | `--db-blue-on-bg-basic-emphasis-50-default` |\n| `db-color-blue-400` | `--db-blue-bg-inverted-contrast-low-default` | `--db-blue-on-bg-basic-emphasis-70-default` |\n| `db-color-blue-500` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-80-default` |\n| `db-color-blue-600` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-90-default` |\n| `db-color-blue-700` | `--db-blue-bg-inverted-contrast-max-default` | `--db-blue-on-bg-basic-emphasis-90-default` |\n| `db-color-blue-800` | `--db-blue-bg-inverted-contrast-max-default` | `--db-blue-on-bg-basic-emphasis-100-default` |\n| `db-color-cyan-100` | `--db-turquoise-bg-basic-level-1-default` | `--db-turquoise-on-bg-inverted-default` |\n| `db-color-cyan-200` | `--db-informational-bg-basic-level-3-default` | `--db-informational-on-bg-basic-emphasis-60-default` |\n| `db-color-cyan-300` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-60-default` |\n| `db-color-cyan-400` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-cyan-500` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-cyan-600` | `--db-informational-bg-inverted-contrast-low-default` | `--db-informational-on-bg-basic-emphasis-70-default` |\n| `db-color-cyan-700` | `--db-informational-bg-inverted-contrast-high-default` | `--db-informational-on-bg-basic-emphasis-80-default` |\n| `db-color-cyan-800` | `--db-informational-bg-inverted-contrast-high-default` | `--db-informational-on-bg-basic-emphasis-90-default` |\n| `db-color-turquoise-100` | `--db-turquoise-bg-basic-level-1-default` | `--db-turquoise-on-bg-inverted-default` |\n| `db-color-turquoise-200` | `--db-turquoise-bg-basic-level-1-default` | `--db-turquoise-on-bg-inverted-default` |\n| `db-color-turquoise-300` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-turquoise-400` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-turquoise-500` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-turquoise-600` | `--db-turquoise-bg-inverted-contrast-low-default` | `--db-turquoise-on-bg-basic-emphasis-70-default` |\n| `db-color-turquoise-700` | `--db-turquoise-bg-inverted-contrast-high-default` | `--db-turquoise-on-bg-basic-emphasis-80-default` |\n| `db-color-turquoise-800` | `--db-turquoise-bg-inverted-contrast-high-default` | `--db-turquoise-on-bg-basic-emphasis-90-default` |\n| `db-color-green-100` | `--db-green-bg-basic-level-1-default` | `--db-green-on-bg-inverted-default` |\n| `db-color-green-200` | `--db-green-bg-basic-level-2-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-green-300` | `--db-green-bg-vibrant-default` | `--db-green-on-bg-basic-emphasis-50-default` |\n| `db-color-green-400` | `--db-green-bg-vibrant-default` | `--db-green-on-bg-basic-emphasis-50-default` |\n| `db-color-green-500` | `--db-green-bg-inverted-contrast-low-default` | `--db-green-on-bg-basic-emphasis-70-default` |\n| `db-color-green-600` | `--db-green-bg-inverted-contrast-high-default` | `--db-green-on-bg-basic-emphasis-80-default` |\n| `db-color-green-700` | `--db-green-bg-inverted-contrast-high-default` | `--db-green-on-bg-basic-emphasis-80-default` |\n| `db-color-green-800` | `--db-green-bg-inverted-contrast-high-default` | `--db-green-on-bg-basic-emphasis-90-default` |\n| `db-color-light-green-100` | `--db-successful-bg-basic-level-1-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-light-green-200` | `--db-successful-bg-basic-level-3-default` | `--db-green-on-bg-basic-emphasis-60-default` |\n| `db-color-light-green-300` | `--db-successful-bg-vibrant-default` | `--db-successful-on-bg-basic-emphasis-60-default` |\n| `db-color-light-green-400` | `--db-successful-bg-vibrant-default` | `--db-successful-on-bg-basic-emphasis-50-default` |\n| `db-color-light-green-500` | `--db-successful-bg-vibrant-default` | `--db-successful-on-bg-basic-emphasis-50-default` |\n| `db-color-light-green-600` | `--db-successful-bg-inverted-contrast-low-default` | `--db-successful-on-bg-basic-emphasis-70-default` |\n| `db-color-light-green-700` | `--db-successful-bg-inverted-contrast-high-default` | `--db-successful-on-bg-basic-emphasis-80-default` |\n| `db-color-light-green-800` | `--db-successful-bg-inverted-contrast-high-default` | `--db-successful-on-bg-basic-emphasis-80-default` |\n| `db-color-warm-gray-100` | `--db-adaptive-bg-basic-level-2-default` | `--db-adaptive-on-bg-inverted-default` |\n| `db-color-warm-gray-200` | `--db-adaptive-bg-basic-level-3-default` | `--db-yellow-on-bg-inverted-default` |\n| `db-color-warm-gray-300` | `--db-adaptive-bg-vibrant-default` | `--db-adaptive-on-bg-basic-emphasis-60-default` |\n| `db-color-warm-gray-400` | `--db-adaptive-bg-vibrant-default` | `--db-adaptive-on-bg-basic-emphasis-50-default` |\n| `db-color-warm-gray-500` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-warm-gray-600` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-warm-gray-700` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-warm-gray-800` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-cool-gray-100` | `--db-adaptive-bg-basic-level-3-default` | `--db-informational-on-bg-inverted-default` |\n| `db-color-cool-gray-200` | `--db-adaptive-bg-basic-level-3-default` | `--db-adaptive-on-bg-basic-emphasis-60-default` |\n| `db-color-cool-gray-300` | `--db-adaptive-bg-vibrant-default` | `--db-adaptive-on-bg-basic-emphasis-50-default` |\n| `db-color-cool-gray-400` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-cool-gray-500` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-80-default` |\n| `db-color-cool-gray-600` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-cool-gray-700` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-cool-gray-800` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-100-default` |\n| `db-color-red` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-white` | `--db-adaptive-bg-basic-level-1-default` | `--db-adaptive-on-bg-inverted-default` |\n| `db-color-black` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-100-default` |\n| `db-color-success` | `--db-successful-bg-inverted-contrast-low-default` | `--db-successful-on-bg-basic-emphasis-70-default` |\n| `db-color-success-small-font` | `--db-successful-bg-inverted-contrast-low-default` | `--db-successful-on-bg-basic-emphasis-70-default` |\n| `db-color-error` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-error-small-font` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-warning` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-warning-small-font` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-informative` | `--db-informational-bg-inverted-contrast-low-default` | `--db-informational-on-bg-basic-emphasis-70-default` |\n| `db-color-informative-small-font` | `--db-informational-bg-inverted-contrast-high-default` | `--db-informational-on-bg-basic-emphasis-80-default` |\n| `db-color-food-drink` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-health` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-things-to-know` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-community-facilities` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-db-services-facilities` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-90-default` |\n| `db-color-shopping` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-arts-culture` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-leisure` | `--db-green-bg-inverted-contrast-low-default` | `--db-green-on-bg-basic-emphasis-70-default` |\n| `db-color-services` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-guidance` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-ice` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-ic` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-80-default` |\n| `db-color-ec` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-80-default` |\n| `db-color-re` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-rb` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-s-bahn` | `--db-green-bg-inverted-contrast-low-default` | `--db-green-on-bg-basic-emphasis-70-default` |\n| `db-color-u-bahn` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-80-default` |\n| `db-color-tram` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-bus` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-intercity-bus` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-call-bus` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-ev-bus` | `--db-pink-bg-inverted-contrast-high-default` | `--db-pink-on-bg-basic-emphasis-80-default` |\n| `db-color-ship` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-airplane` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-carsharing` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-taxi` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-bikesharing` | `--db-brand-bg-inverted-contrast-high-default` | `--db-brand-on-bg-basic-emphasis-80-default` |\n| `db-color-walk` | `--db-adaptive-bg-basic-level-3-default` | `--db-adaptive-on-bg-basic-emphasis-60-default` |\n", "component-migration": '# DB UI to DB UX v3 Component Migration\n\nPrefer JS framework packages: Angular `@db-ux/ngx-core-components` (`<db-button>`), React `@db-ux/react-core-components` (`<DBButton>`), Vue `@db-ux/v-core-components` (`<DBButton>`) in case that the user wants to build a JavaScript application with one of these frameworks. If it\'s still a JavaScript framework, but none of these apply, use `@db-ux/core-components` node package. In all other cases, use the HTML and CSS basis: `@db-ux/core-components`.\n\nLegend: [replacement]=replacement exists, [new]=new component, [removed]=removed, [planned]=planned\n\n## Direct Equivalents\n\n**accordion** \u2014 New component\n\n**accordion-item** \u2014 `cmp-accordion`->`db-accordion-item` (was single item, now multiple items in one accordion). Props: `summary`->`headline`, `emphasis`->[removed], `size`->[removed] (use density). New: `disabled`, `content`.\n\n**badge** \u2014 New component\n\n**brand** \u2014 `cmp-brand`->`db-brand`. All anchor-related props removed (`siteNameLink`,`alt`,`anchorRef`,`anchorTitle`,`anchorRelation`,`src`->[removed]). Wrap with your own `<a>` if needed. New: `hideLogo`.\n\n**button** \u2014 `elm-button`->`db-button`. Sizes: `large`->[removed], `regular`->[removed] (default is `medium`, use density). Variants: `primary`->[removed] (use `outlined`), `brand-primary`->`primary`, `secondary-outline`->`outlined`, `secondary-solid`->`solid`, `tertiary-plain`->`text`. Icons: `iconTrailing`->[removed] (only leading icons), `iconOnly`->`noText`.\n\n**card** \u2014 `cmp-card`->`db-card`. Variant: `header`->[removed], `content`->[removed] (use children/slot), `variant="interactive"` makes it act like a button. Image: `alt`->`imgAlt`, `image`->`imgSrc`. New: `imgWidth`, `imgHeight`. Removed: `illustration`, `uiCoreIllustrationPath`.\n\n**checkbox** \u2014 `elm-checkbox`->`db-checkbox`. Map `input_id` to `id` (for React/Vue), but use `propOverrides` for Web Components and Angular.\n\n**divider** \u2014 New component\n\n**drawer** \u2014 New component\n\n**header** \u2014 `rea-header`->`db-header`. `mobile`->`forceMobile`.\n\n**icon** \u2014 ->`db-icon`. `variant`->[removed] (controlled by `font-family:var(--db-icon-font-family)` and `font-weight:var(--db-icon-font-weight)`).\n\n**infotext** \u2014 New component\n\n**input** \u2014 `elm-input`->`db-input`. Old variants removed: `semitransparent`,`white`,`solid`,`outline`->[removed]. New variants: `adaptive`,`neutral`,`critical`,`informational`,`warning`,`successful`. `description`->`message`. \u26A0\uFE0F Behavior change: In v2, `description` was hidden by default (tooltip/hint). In v3, `message` is ALWAYS visible by default. To restore v2 hidden behavior, set `showMessage={false}` explicitly.\n\n**link** \u2014 `elm-link`->`db-link`. `icon`,`icononly`,`iconVariant`->[removed] (use `content` for arrow icon).\n\n**navigation** \u2014 `cmp-mainnavigation`->`db-navigation`. `data`,`siteName`->[removed] (use children/slot, features moved to `db-header`).\n\n**navigation-item** \u2014 New component\n\n**notification** \u2014 `elm-notification`->`db-notification`. Type: `notification`->`notification`, `status`->[removed] (use variants). New type: `inline`. Variants: `error`->`critical`, `informative`->`informational`, `warning`->`warning`, `success`->`successful`. New: `adaptive`.\n\n**page** \u2014 `rea-page`->`db-page`.\n\n**popover** \u2014 New component\n\n**radio** \u2014 `elm-radio`->`db-radio`. Map `input_id` to `id` (for React/Vue), but use `propOverrides` for Web Components and Angular.\n\n**section** \u2014 New component\n\n**select** \u2014 `elm-select`->`db-select`. `multiple`->[removed], `size`->[removed].\n\n**stack** \u2014 New component\n\n**switch** \u2014 `elm-toggle`->`db-switch`. `htmlid`->`id`.\n\n**tab-item** \u2014 `cmp-db-tab`->`db-tab-item`. `name`->[removed] (handled by parent `db-tabs`).\n\n**tab-list** \u2014 New component\n\n**tab-panel** \u2014 New component\n\n**tabs** \u2014 `cmp-tab-bar`->`db-tabs`.\n\n**tag** \u2014 `elm-tag`->`db-tag`. Chip+tag merged into tag only. Interactive tags: wrap `db-button`,`db-link`,`db-checkbox`,`db-radio` inside `db-tag`. `small`->[removed] (use density, `type="strong"` for emphasis). Variants: `poi-*`->[removed], `track`->[removed], `error`->`critical`, `informative`->`informational`, `success`->`successful`. `iconAfter`->[removed] (only leading icons).\n\n**textarea** \u2014 `elm-textarea`->`db-textarea`. Old variants removed: `semitransparent`,`white`,`solid`,`outline`->[removed]. New: `adaptive`,`critical`,`informational`,`warning`,`successful`. `description`->`message`. \u26A0\uFE0F Behavior change: In v2, `description` was hidden by default (tooltip/hint). In v3, `message` is ALWAYS visible by default. To restore v2 hidden behavior, set `showMessage={false}` explicitly.\n\n**tooltip** \u2014 New component\n\n## No Direct Equivalent\n\n| Old | Status | Replacement |\n| ---------------------- | :-----------: | ----------------------------------------------------------------- |\n| `rea-main` | [removed] | `db-page` (includes `<main>`) |\n| `rea-grid` | [removed] | CSS Grid or `db-stack` |\n| `rea-footer` | [planned] | Semantic `<footer>` + `db-link`, planned Q4/2025 |\n| `elm-headline` | [replacement] | Semantic headings + `db-infotext` for subtitles |\n| `elm-headline` (pulse) | [removed] | Heading + CSS animation |\n| `elm-loadingindicator` | [planned] | Planned Q4/2025, use CSS spinner + `aria-live` |\n| `elm-progress` | [planned] | Planned Q4/2025, use `<progress>` |\n| `elm-chip` | [replacement] | `db-tag` with `db-button`/`db-checkbox`/`db-radio` inside |\n| `cmp-breadcrumb` | [planned] | Planned Q4/2025, use `db-link` in `<nav aria-label="Breadcrumb">` |\n| `cmp-pagination` | [planned] | Planned Q4/2025, use `db-button` with ARIA labels |\n| `cmp-table` | [planned] | Under research, use semantic `<table>` |\n| `cmp-sidenavi` | [replacement] | `db-navigation` inside `db-drawer` |\n| `cmp-dialog` | [replacement] | `db-drawer` or custom modal, planned Q4/2025 |\n\n## Key Migration Examples\n\n`rea-main` -> `<db-page>Content</db-page>`\n\n`rea-grid` -> CSS Grid with `gap: var(--db-spacing-fixed-md)`\n\n`elm-chip` -> `<db-tag><db-button variant="ghost">Text</db-button></db-tag>`\n\n`elm-headline` -> `<h1>Title</h1>` + `<db-infotext>Subtitle</db-infotext>`\n\n`cmp-sidenavi` -> `<db-drawer><db-navigation><db-navigation-item><db-link href="/page">Item</db-link></db-navigation-item></db-navigation></db-drawer>`\n\n## A11y for Custom Solutions\n\nUse semantic HTML, ARIA labels/roles/states, keyboard navigation, focus management, screen reader support.\n\nTemporary patterns: loading -> `<div role="status"><span class="visually-hidden">Loading...</span></div>`, progress -> `<progress value="70" max="100" aria-label="Upload progress: 70%">`, breadcrumb -> `<nav aria-label="Breadcrumb"><ol>...</ol></nav>`.\n', "general-migration": '# DB UI \u2192 DB UX General Migration\n\nScan files: `.css`, `.scss`, `.html`, `.tsx`, `.jsx`, `.ts`, `.js`, `.vue`\n\n## Typography\n\nReplace hardcoded `font-size` with `font` shorthand using `--db-type-*` tokens. Use `font:` not `font-size:`. Remove redundant `line-height`/`font-weight`/`font-family` \u2014 the token sets all four.\n\nBody tokens: `--db-type-body-3xs` through `--db-type-body-3xl`. Headline tokens: `--db-type-headline-3xs` through `--db-type-headline-3xl`. SCSS: `$db-type-body-md`, etc.\n\nSize mapping: `10px`/`0.625rem`\u2192`body-3xs`, `12px`/`0.75rem`\u2192`body-2xs`, `14px`/`0.875rem`/`small`\u2192`body-sm`, `16px`/`1rem`/`medium`\u2192`body-md`, `18px`/`1.125rem`\u2192`body-lg`, `20px`/`1.25rem`/`large`\u2192`body-xl`, `24px`/`1.5rem`\u2192`headline-sm`, `32px`/`2rem`\u2192`headline-md`, `40px`/`2.5rem`\u2192`headline-lg`, `48px`/`3rem`\u2192`headline-xl`.\n\n## Colors\n\nSee `db-ui-color-migration.md` for full mapping. Token names are bare (no `var(--)` / `$`). CSS: `var(--token)`, SCSS: `$token`.\n\nBG column for: `background-color`, `background`. FG column for: `color`, `border-color`, `border`, `outline-color`, `text-decoration-color`, `fill`, `stroke`, `caret-color`, `column-rule-color`.\n\nNEVER use `opacity` to simulate lighter colors. NEVER use `--db-elevation-*` as color values.\n\n## box-shadow \u2192 elevation tokens\n\nDo NOT use color tokens for `box-shadow`. Use: `--db-elevation-sm` (subtle/pressed), `--db-elevation-md` (default/cards), `--db-elevation-lg` (prominent/hover). SCSS: `$db-elevation-sm`/`md`/`lg`. Interactive: `data-interactive="elevation"` or `.db-interactive-elevation` (auto `md`\u2192`lg` hover\u2192`sm` active).\n\n## Inline Styles\n\nReplace all inline `style` attributes, as they bypass theming, density, and dark mode. Follow this strict priority: 1) use component props, 2) use external CSS/SCSS classes with tokens, 3) use inline styles with tokens only as an absolute last resort.\n\n## Required CSS Imports & Token Architecture\n\nv3 uses a layered CSS architecture. All four imports are required in this exact order:\n\n```tsx\n// main.tsx \u2014 order matters!\nimport "@db-ux/core-foundations/build/styles/theme/rollup.css"; // Layer 1: Palette tokens (@property definitions, e.g. #16181b)\nimport "@db-ux/core-foundations/build/styles/bundle.css"; // Layer 2: Semantic tokens (light-dark mappings on :root)\nimport "@db-ux/core-foundations/build/styles/icons/rollup.css"; // Layer 3: Icon fonts (@font-face declarations)\nimport "@db-ux/core-components/build/styles/rollup.css"; // Layer 4: Component styling\n```\n\n**Layer 1 \u2013 Palette tokens:** Defines raw color values as CSS `@property` registrations. These are the primitive building blocks (hex values, numeric scales).\n\n**Layer 2 \u2013 Semantic tokens:** Maps palette tokens to semantic meanings using `light-dark()` on `:root`. Provides spacing, typography, elevation, and color intent tokens.\n\n**Layer 3 \u2013 Icon fonts:** Registers `@font-face` declarations for the icon font. Without this, icon names render as plain text instead of symbols.\n\n**Layer 4 \u2013 Component styling:** The actual component CSS rules. Depends on all three foundation layers above.\n\nMissing any layer causes specific failures:\n\n- No Layer 1/2 \u2192 components render without colors/spacing (broken layout)\n- No Layer 3 \u2192 icons display as text strings\n- No Layer 4 \u2192 components have no styling at all\n\n## Spacing\n\nReplace hardcoded `px`/`rem` in `padding`, `margin`, `gap`, `inset`, `top`/`right`/`bottom`/`left` with `--db-spacing-fixed-*` tokens. For responsive spacing use `--db-spacing-responsive-*`.\n\nFixed tokens (regular density): `3xs`=2px, `2xs`=4px, `xs`=8px, `sm`=12px, `md`=16px, `lg`=24px, `xl`=32px, `2xl`=48px, `3xl`=80px. Values adapt to active density automatically. SCSS: `$db-spacing-fixed-md`, etc.\n', "icon-migration": "# DB UI \u2192 DB UX Icon Migration\n\n<!-- cSpell:ignore steppless -->\n\n`account`\u2192`person`, `add`\u2192`plus`, `add-circle`\u2192`add_option`, `add-link`\u2192`link_chain`, `alarm`\u2192`alarm_clock`, `alarm-add`\u2192`alarm_clock_plus`, `alert`\u2192`bell`, `alert-off`\u2192`bell_disabled`, `artificial-intelligence`\u2192`artificial_intelligence`, `attachment`\u2192`paper_clip`, `augmented-reality`\u2192`augmented_reality`, `block`\u2192`block`, `bookmark`\u2192`bookmark`, `bug`\u2192`bug`, `build`\u2192`wrench`, `calendar`\u2192`calendar`, `camera`\u2192`camera`, `cash`\u2192`cash`, `check-circle`\u2192`check_circle`, `cloud`\u2192`cloud`, `cloud-download`\u2192`cloud_download`, `cloud-upload`\u2192`cloud_upload`, `copy`\u2192`copy`, `credit-card`\u2192`credit_card`, `dashboard`\u2192`speedometer`, `delete`\u2192`bin`, `discount`\u2192`discount`, `document`\u2192`document`, `document-check`\u2192`document_check`, `document-cross`\u2192`document_cross`, `done`\u2192`check`, `download`\u2192`download`, `drag-and-drop`\u2192`dots_drag_and_drop`, `edit`\u2192`pen`, `euro-sign`\u2192`euro_sign`, `face-delighted`\u2192`face_delighted`, `face-disappointed`\u2192`face_disappointed`, `face-neutral`\u2192`face_neutral`, `face-sad`\u2192`face_sad`, `face-smiling`\u2192`face_smiling`, `filter`\u2192`sliders_horizontal`, `fingerprint`\u2192`fingerprint`, `folder`\u2192`folder`, `folder-open`\u2192`folder_open`, `generic-card`\u2192`generic_card`, `giftcard`\u2192`gift`, `hearing`\u2192`ear`, `hearing-disabled`\u2192`ear_disabled`, `heart`\u2192`heart`, `help`\u2192`question_mark_circle`, `id-card`\u2192`id_card`, `image`\u2192`image`, `info`\u2192`information_circle`, `key`\u2192`key`, `legal`\u2192`paragraph_mark`, `lightbulb`\u2192`light_bulb`, `lock-close`\u2192`lock_closed`, `lock-open`\u2192`lock_open`, `log-out`\u2192`log_out`, `logbook`\u2192`notebook`, `minus`\u2192`minus`, `piggybank`\u2192`piggy_bank`, `pin`\u2192`pin`, `print`\u2192`printer`, `pulse-wave`\u2192`pulse_wave`, `push-button`\u2192`finger_pushing_button`, `remove`\u2192`minus`, `resize`\u2192`resize`, `resize-handle-corner`\u2192`resize_handle_corner`, `save`\u2192`save`, `schedule`\u2192`clock`, `search`\u2192`magnifying_glass`, `send`\u2192`paper_plane`, `sepa`\u2192`sepa`, `settings`\u2192`gear_wheel`, `share`\u2192`share`, `shopping-bag`\u2192`shopping_bag`, `shopping-basket`\u2192`shopping_basket`, `shopping-basket-disabled`\u2192`shopping_basket_disabled`, `shopping-cart`\u2192`shopping_cart`, `shopping-cart-disabled`\u2192`shopping_cart_disabled`, `sort-down`\u2192`sort_down`, `sort-up`\u2192`sort_up`, `star`\u2192`star`, `swap-horizontal`\u2192`arrows_horizontal`, `swap-vertical`\u2192`arrows_vertical`, `thumb-up`\u2192`thumbs_up`, `thumb-up-down`\u2192`thumbs_down`, `translation`\u2192`translation`, `undo`\u2192`undo`, `upload`\u2192`upload`, `visibility-off`\u2192`eye_disabled`, `visibility`\u2192`eye`, `voucher`\u2192`voucher`, `website`\u2192`globe`, `zoom-in`\u2192`zoom_in`, `zoom-out`\u2192`zoom_out`, `clapperboard`\u2192`clapperboard`, `fast-backward`\u2192`fast_backward`, `fast-backward-10`\u2192`fast_backward_10`, `fast-backward-30`\u2192`fast_backward_30`, `fast-backward-empty`\u2192`fast_backward_empty`, `fast-forward`\u2192`fast_forward`, `fast-forward-10`\u2192`fast_forward_10`, `fast-forward-30`\u2192`fast_forward_30`, `fast-forward-empty`\u2192`fast_forward_empty`, `microphone`\u2192`microphone`, `pause`\u2192`pause`, `play`\u2192`play`, `skip-backward`\u2192`skip_backward`, `skip-forward`\u2192`skip_forward`, `stop`\u2192`stop`, `subtitles`\u2192`subtitles`, `volume-down`\u2192`volume_down`, `volume-mute`\u2192`volume_silent`, `volume-off`\u2192`volume_disabled`, `volume-up`\u2192`volume_up`, `logo`\u2192`db`, `call`\u2192`telephone`, `chat`\u2192`chat`, `conversation`\u2192`speech_bubbles`, `fax`\u2192`fax_machine`, `feedback`\u2192`speech_bubble_exclamation_mark`, `mail`\u2192`envelope`, `mobile-off`\u2192`mobile_phone_disabled`, `mobile-phone`\u2192`mobile_phone`, `question`\u2192`speech_bubble_question_mark`, `receive-item`\u2192`receive_item`, `share-item`\u2192`share_item`, `wifi`\u2192`wifi`, `wifi-off`\u2192`wifi_disabled`, `mask`\u2192`mask`, `playground`\u2192`toys`, `restricted-mobility-toilet`\u2192`restricted_mobility_toilet`, `shower`\u2192`shower`, `shower-men`\u2192`shower_men`, `shower-women`\u2192`shower_women`, `sink`\u2192`hand_washing`, `wc`\u2192`toilets`, `wc-men`\u2192`toilet_men`, `wc-sign`\u2192`wc_sign`, `wc-women`\u2192`toilet_women`, `air-condition`\u2192`air_condition`, `buggy`\u2192`stroller`, `clothing-hanger`\u2192`clothes_hanger`, `day`\u2192`sun`, `dog`\u2192`dog`, `entry-aid`\u2192`vehicle_entry_aid`, `environmental-mobility-check`\u2192`mobility_service_meeting_point`, `hydrogen`\u2192`water_drop`, `iceportal`\u2192`ice_portal`, `luggage-compartment`\u2192`luggage_compartment`, `luggage-rack`\u2192`luggage_rack`, `marketplace`\u2192`market`, `medical`\u2192`medical_cross`, `night`\u2192`moon`, `no-smoking`\u2192`cigarette_disabled`, `person-with-cane`\u2192`person_with_blind_cane`, `person-with-rollator`\u2192`person_with_rollator`, `platform`\u2192`platform`, `power-outlet`\u2192`power_socket`, `regioguide`\u2192`regio_guide`, `reservation`\u2192`reservation`, `standing-room`\u2192`standing_room`, `steppless-entry`\u2192`stepless_entry`, `support-dog`\u2192`support_dog`, `breakfast`\u2192`breakfast`, `coffee-cup`\u2192`cup`, `drink`\u2192`beverage`, `restaurant`\u2192`knife_and_fork`, `database`\u2192`database`, `1st-class`\u2192`first_class`, `2nd-class`\u2192`second_class`, `alternative-connection`\u2192`alternative_connection`, `booking`\u2192`booking`, `capacity-indicator`\u2192`capacity_indicator_moderate`, `capacity-indicator-fully-booked`\u2192`capacity_indicator_fully_booked`, `capacity-indicator-high`\u2192`capacity_indicator_high`, `capacity-indicator-low`\u2192`capacity_indicator_low`, `destination`\u2192`map_pin`, `intermediary-stop`\u2192`circle_small`, `mixed-class`\u2192`mixed_class`, `monochrome-capacity-indicator-high`\u2192`capacity_indicator_high`, `monochrome-capacity-indicator-low`\u2192`capacity_indicator_low`, `monochrome-capacity-indicator-moderate`\u2192`capacity_indicator_moderate`, `round-trip`\u2192`round_trip`, `single-trip`\u2192`single_trip`, `start`\u2192`start`, `compass`\u2192`compass`, `gps`\u2192`location_arrow`, `gps-north`\u2192`location_arrow_north`, `home`\u2192`house`, `map`\u2192`map`, `navigation-straight`\u2192`navigation_straight`, `navigation-to-left`\u2192`navigation_to_left`, `navigation-to-right`\u2192`navigation_to_right`, `navigation-u-turn`\u2192`navigation_u_turn`, `parking`\u2192`parking`, `place`\u2192`location_pin`, `set-position`\u2192`location_crosshairs`, `station`\u2192`station`, `stop-sign`\u2192`road_sign`, `train-station`\u2192`train_station`, `arrow-back`\u2192`arrow_left`, `arrow-down`\u2192`arrow_down`, `arrow-forward`\u2192`arrow_right`, `arrow-up`\u2192`arrow_up`, `cancel`\u2192`cross`, `chevron-left`\u2192`chevron_left`, `chevron-right`\u2192`chevron_right`, `close`\u2192`cross`, `expand-less`\u2192`chevron_up`, `expand-more`\u2192`chevron_down`, `fullscreen`\u2192`fullscreen`, `fullscreen-exit`\u2192`fullscreen_exit`, `grid-view`\u2192`grid`, `link`\u2192`link_chain`, `link-external`\u2192`arrow_up_right`, `list`\u2192`list`, `menu`\u2192`menu`, `more-horizontal`\u2192`more_horizontal`, `more-vertical`\u2192`more_vertical`, `refresh`\u2192`circular_arrows`, `error`\u2192`exclamation_mark_circle`, `notify`\u2192`bell`, `notify-cutoff`\u2192`bell`, `warning`\u2192`exclamation_mark_triangle`, `aisle`\u2192`aisle`, `aisle-not-available`\u2192`aisle_not_available`, `bed`\u2192`bed`, `childrens-compartment`\u2192`childrens_compartment`, `couchette`\u2192`couchette`, `elderly`\u2192`person_with_wheelchair`, `handicapped`\u2192`person_with_wheelchair`, `parent-child-compartment`\u2192`family_compartment`, `priority`\u2192`traveler_with_reduced_mobility`, `quiet-zone`\u2192`quiet_zone`, `table`\u2192`seat_table`, `traveler-with-reduced-mobility`\u2192`traveler_with_reduced_mobility`, `window`\u2192`seat_window`, `bahnbonus`\u2192`bahnbonus`, `bahnbonus-card`\u2192`bahnbonus_card`, `bahncard`\u2192`bahncard`, `best-price`\u2192`crown`, `commuter-ticket`\u2192`ticket_commuter`, `komfort-check-in`\u2192`komfort_check_in`, `komfort-check-in-check`\u2192`komfort_check_in_check`, `komfort-check-in-circle`\u2192`komfort_check_in_circle`, `multiple-cards`\u2192`bahncards`, `multiple-passenger`\u2192`persons`, `my-travel`\u2192`my_journey`, `outward-journey`\u2192`outward_journey`, `qr-code`\u2192`qr_code`, `qr-code-scan`\u2192`qr_code_scan`, `return-journey`\u2192`return_journey`, `ticket`\u2192`ticket`, `ticket-discount`\u2192`ticket_discount`, `ticket-subscription`\u2192`ticket_subscription`, `ticket-multiple`\u2192`tickets`, `time-outward-journey`\u2192`time_outward_journey`, `time-return-journey`\u2192`time_return_journey`, `timetable`\u2192`timetable`, `travel-insurance`\u2192`shield_check`, `airplane`\u2192`airplane`, `bicycle`\u2192`bike`, `bicycle-trailer`\u2192`bike_trailer`, `call-a-bike`\u2192`call_a_bike`, `car`\u2192`car`, `car-sequence`\u2192`coach_sequence`, `carsharing`\u2192`car_sharing`, `electric-locomotive`\u2192`electric_locomotive`, `electric-scooter`\u2192`electric_scooter`, `ev-bus`\u2192`bus`, `ev-car`\u2192`electric_car`, `ev-train`\u2192`train`, `ferry`\u2192`ship`, `handcart`\u2192`handcart`, `ice`\u2192`train`, `ice-side-view`\u2192`ice_side_view`, `intercity-train`\u2192`ic_and_ec`, `local-bus`\u2192`bus`, `local-train`\u2192`local_train`, `long-distance-bus`\u2192`long_distance_bus`, `rail-and-fly`\u2192`rail_and_fly`, `railroad-car`\u2192`coach`, `s-bahn`\u2192`s_bahn`, `scooter`\u2192`scooter`, `sev`\u2192`replacement_service`, `speedboat`\u2192`boat`, `sprinter`\u2192`sprinter`, `subway`\u2192`subway`, `taxi`\u2192`taxi`, `train-and-car`\u2192`train_and_car`, `tram`\u2192`tram`, `walking`\u2192`pedestrian`, `walking-fast`\u2192`walking_fast`\n" } };
42791
+ `, "packages/components/src/components/divider/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBDivider } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBDivider],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-divider></db-divider>\n```\n", "packages/components/src/components/divider/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-divider"></div>\n</body>\n```\n', "packages/components/src/components/divider/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/divider/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBDivider } from "@db-ux/react-core-components";\n\nconst App = () => <DBDivider />;\n\nexport default App;\n```\n', "packages/components/src/components/divider/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBDivider } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBDivider></DBDivider>\n</template>\n```\n', "packages/components/src/components/drawer/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBDrawer } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBDrawer],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-button (click)="toggleDrawer(true)"> Open me </db-button>\n<db-drawer [open]="openDrawer" (onClose)="toggleDrawer(false)">\n <header drawer-header>Optional drawer header</header>\n My Drawer content\n</db-drawer>\n```\n\n```ts app.component.ts\n// app.component.ts\nexport class AppComponent {\n openDrawer: boolean = false;\n toggleDrawer = (open: boolean) => {\n this.openDrawer = open;\n };\n}\n```\n', "packages/components/src/components/drawer/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Use component\n\nUse [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) (`command` and `commandfor` HTML attributes) to declaratively connect buttons with the `<dialog>` element. Supported built-in commands for `<dialog>` are `show-modal` and `close`.\n\nIf you do need to provide support for [browser versions that haven\'t implemented Invoker Commands](https://caniuse.com/wf-invoker-commands), add a feature detection fallback in JavaScript (see example below) or the [polyfill `invokers-polyfill`](https://github.com/keithamus/invokers-polyfill).\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <button class="db-button" command="show-modal" commandfor="my-drawer">\n Open Drawer\n </button>\n <dialog id="my-drawer" class="db-drawer" data-backdrop="true">\n <article class="db-drawer-container">\n <header class="db-drawer-header">\n <button\n class="db-button button-close-drawer is-icon-text-replace"\n data-icon="cross"\n data-variant="ghost"\n command="close"\n commandfor="my-drawer"\n >\n Close Button\n </button>\n </header>\n <div class="db-drawer-content">My Drawer content</div>\n </article>\n </dialog>\n\n <script>\n /*\n * Feature detection for Invoker Commands:\n * If the browser does not support the `command` and `commandfor`\n * HTML attributes, we fall back to JavaScript event handlers.\n */\n if (\n !("command" in HTMLButtonElement.prototype) ||\n !("commandFor" in HTMLButtonElement.prototype)\n ) {\n const openButton = document.querySelector(\n \'[commandfor="my-drawer"][command="show-modal"]\'\n );\n const closeButton = document.querySelector(\n \'[commandfor="my-drawer"][command="close"]\'\n );\n const drawer = document.getElementById("my-drawer");\n\n openButton?.addEventListener("click", () => {\n drawer?.showModal?.();\n });\n closeButton?.addEventListener("click", () => {\n drawer?.close?.();\n });\n }\n </script>\n</body>\n```\n', "packages/components/src/components/drawer/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/drawer/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBButton, DBDrawer } from "@db-ux/react-core-components";\n\nconst App = () => {\n const [open, setOpen] = useState<boolean>(false);\n return (\n <div>\n <DBButton\n onClick={() => {\n setOpen(true);\n }}\n >\n Open Me\n </DBButton>\n <DBDrawer\n open={open}\n onClose={() => {\n setOpen(false);\n }}\n drawerHeader={<header>Optional drawer header</header>}\n >\n My Drawer content\n </DBDrawer>\n </div>\n );\n};\n\nexport default App;\n```\n', "packages/components/src/components/drawer/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { _ref } from "vue";\nimport { DBDrawer } from "@db-ux/v-core-components";\n\nconst openDrawer = _ref<boolean>(false);\n\nconst toggleDrawer = (open: boolean) => {\n openDrawer.value = open;\n};\n</script>\n\n<template>\n <DBButton @click="toggleDrawer(true)">Open me</DBButton>\n <DBDrawer :open="openDrawer" @close="toggleDrawer(false)">\n <header v-slot:drawer-header>Optional drawer header</header>\n My Drawer content\n </DBDrawer>\n</template>\n```\n', "packages/components/src/components/header/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport {\n DBHeader,\n NavigationDirective,\n SecondaryActionDirective,\n MetaNavigationDirective\n} from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBHeader,\n NavigationDirective, // Optional: If you want to use a Navigation\n SecondaryActionDirective, // Optional: If you want to use ActionBar\n MetaNavigationDirective, // Optional: If you want to use MetaNavigation\n ],\n // ...\n})\n```\n\n### Use component\n\n#### Simple\n\n```html app.component.html\n<!-- app.component.html -->\n<db-header>\n <db-brand brand>Header</db-brand>\n</db-header>\n```\n\n#### Full\n\n```ts app.component.ts\n// File: app.component.ts\n\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-root",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n drawerOpen = false;\n\n toggleDrawer = (open: boolean) => {\n this.drawerOpen = open;\n };\n}\n```\n\n```html app.component.html\n<!-- app.component.html -->\n<db-header [drawerOpen]="drawerOpen" (onToggle)="toggleDrawer($event)">\n <db-brand brand>My Awesome App</db-brand>\n <db-navigation *dbNavigation>\n <!-- https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/navigation/docs/Angular.md -->\n </db-navigation>\n <ng-container *dbMetaNavigation>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </ng-container>\n <ng-container primary-action>\n <DBButton icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </DBButton>\n </ng-container>\n <ng-container *dbSecondaryAction>\n <DBButton icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </DBButton>\n <DBButton icon="alert" variant="ghost" [noText]="true">\n Notification\n </DBButton>\n <DBButton icon="help" variant="ghost" [noText]="true"> Help </DBButton>\n </ng-container>\n</db-header>\n```\n', "packages/components/src/components/header/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\nUse [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) (`command` and `commandfor` HTML attributes) to declaratively connect the burger menu button with the drawer `<dialog>` element, and the close button inside the drawer. Supported built-in commands for `<dialog>` are `show-modal` and `close`.\n\nIf you do need to provide support for [browser versions that haven\'t implemented Invoker Commands](https://caniuse.com/wf-invoker-commands), add a feature detection fallback in JavaScript (see example below) or the [polyfill `invokers-polyfill`](https://github.com/keithamus/invokers-polyfill).\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <header class="db-header">\n <dialog id="header-drawer" class="db-drawer">\n <article\n class="db-drawer-container db-header-drawer"\n data-spacing="small"\n data-rounded="true"\n >\n <header class="db-drawer-header">\n <div class="db-drawer-header-text"></div>\n <button\n class="db-button button-close-drawer is-icon-text-replace"\n data-icon="cross"\n data-variant="text"\n command="close"\n commandfor="header-drawer"\n >\n Close Button\n </button>\n </header>\n <div class="db-drawer-content">\n <div class="db-header-drawer-navigation">\n <div class="db-header-navigation">\n <nav class="db-main-navigation">\n <menu>\n <li\n class="db-navigation-item"\n data-icon="x_placeholder"\n >\n <a href="#">Regular (Default)</a>\n </li>\n <li\n class="db-navigation-item"\n aria-disabled="true"\n >\n <a href="#"\n >Regular (Default) disabled</a\n >\n </li>\n </menu>\n </nav>\n </div>\n <div class="db-header-meta-navigation">\n <a\n class="db-link"\n href="#"\n tabindex="0"\n data-content="internal"\n >Imprint</a\n ><a\n class="db-link"\n href="#"\n tabindex="0"\n data-content="internal"\n >Help</a\n >\n </div>\n </div>\n <div class="db-header-secondary-action">\n <button\n class="db-button is-icon-text-replace"\n data-icon="x_placeholder"\n data-variant="text"\n >\n Profile</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="alert"\n data-variant="text"\n >\n Notification</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="help"\n data-variant="text"\n >\n Help\n </button>\n </div>\n </div>\n </article>\n </dialog>\n <div class="db-header-meta-navigation">\n <a class="db-link" href="#" tabindex="0" data-content="internal"\n >Imprint</a\n ><a class="db-link" href="#" tabindex="0" data-content="internal"\n >Help</a\n >\n </div>\n <div class="db-header-navigation-bar">\n <div class="db-header-brand-container">\n <div class="db-brand">\n <a href="/"\n ><img\n class="db-logo"\n src="https://design-system.deutschebahn.com/images/db_logo.svg"\n alt=""\n height="24"\n width="34" /></a\n >DBHeader\n </div>\n </div>\n <div class="db-header-navigation-container">\n <div class="db-header-navigation">\n <nav class="db-navigation">\n <menu>\n <li\n class="db-navigation-item"\n data-icon="x_placeholder"\n >\n <a href="#">Regular (Default)</a>\n </li>\n <li class="db-navigation-item" aria-disabled="true">\n <a href="#">Regular (Default) disabled</a>\n </li>\n </menu>\n </nav>\n </div>\n <div class="db-header-primary-action">\n <button\n class="db-button is-icon-text-replace"\n data-icon="magnifying_glass"\n data-variant="text"\n >\n Search\n </button>\n </div>\n </div>\n <div class="db-header-action-container">\n <div class="db-header-burger-menu-container">\n <button\n class="db-button is-icon-text-replace"\n data-icon="menu"\n data-variant="text"\n command="show-modal"\n commandfor="header-drawer"\n >\n BurgerMenu\n </button>\n </div>\n <div class="db-header-secondary-action">\n <button\n class="db-button is-icon-text-replace"\n data-icon="x_placeholder"\n data-variant="text"\n >\n Profile</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="alert"\n data-variant="text"\n >\n Notification</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="help"\n data-variant="text"\n >\n Help\n </button>\n </div>\n </div>\n </div>\n </header>\n\n <script>\n /*\n * Feature detection for Invoker Commands:\n * If the browser does not support the `command` and `commandfor`\n * HTML attributes, we fall back to JavaScript event handlers.\n */\n if (\n !("command" in HTMLButtonElement.prototype) ||\n !("commandFor" in HTMLButtonElement.prototype)\n ) {\n const burgerMenuButton = document.querySelector(\n \'[commandfor="header-drawer"][command="show-modal"]\'\n );\n const closeButton = document.querySelector(\n \'[commandfor="header-drawer"][command="close"]\'\n );\n const drawer = document.getElementById("header-drawer");\n\n burgerMenuButton?.addEventListener("click", () => {\n drawer?.showModal?.();\n });\n closeButton?.addEventListener("click", () => {\n drawer?.close?.();\n });\n }\n </script>\n</body>\n```\n', "packages/components/src/components/header/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `rea-header` | \u{1F501} | `db-header` | |\n\n### mobile\n\n| Before | Status | After | Description |\n| -------- | :----: | ------------- | ---------------------------------- |\n| `mobile` | \u{1F501} | `forceMobile` | forces the burger menu for desktop |\n", "packages/components/src/components/header/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n#### Simple\n\n```tsx App.tsx\n// App.tsx\nimport { DBHeader, DBBrand } from "@db-ux/react-core-components";\n\nconst App = () => <DBHeader brand={<DBBrand>Header</DBBrand>} />;\n\nexport default App;\n```\n\n#### Full\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBHeader, DBBrand, DBLink } from "@db-ux/react-core-components";\n\nconst [drawerOpen, setDrawerOpen] = useState<boolean>(false);\n\nconst App = () => (\n <DBHeader\n drawerOpen={drawerOpen}\n onToggle={setDrawerOpen}\n brand={<DBBrand>My Awesome App</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="alert" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="help" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation>\n //\n https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/navigation/docs/React.md\n </DBNavigation>\n </DBHeader>\n);\n\nexport default App;\n```\n', "packages/components/src/components/header/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n#### Simple\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBHeader, DBBrand } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBHeader>\n <DBBrand slot="brand">Header</DBBrand>\n </DBHeader>\n</template>\n```\n\n#### Full\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { _ref } from "vue";\nimport { DBHeader, DBBrand, DBLink, DBButton } from "@db-ux/v-core-components";\n\nconst drawerOpen = _ref(false);\n\nconst toggleDrawer = (open: boolean) => {\n drawerOpen.value = open;\n};\n</script>\n\n<template>\n <DBHeader :drawerOpen="drawerOpen" :onToggle="toggleDrawer">\n <template v-slot:brand>\n <DBBrand> My Awesome App </DBBrand>\n </template>\n <template v-slot:primary-action>\n <DBButton icon="magnifying_glass" variant="ghost" :no-text="true">\n Search\n </DBButton>\n </template>\n <template v-slot:secondary-action>\n <DBButton icon="x_placeholder" variant="ghost" :no-text="true">\n Profile\n </DBButton>\n <DBButton icon="alert" variant="ghost" :no-text="true">\n Notification\n </DBButton>\n <DBButton icon="help" variant="ghost" :no-text="true">\n Help\n </DBButton>\n </template>\n <template v-slot:meta-navigation>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </template>\n\n <DBNavigation>\n //\n https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/navigation/docs/Vue.md\n </DBNavigation>\n </DBHeader>\n</template>\n```\n', "packages/components/src/components/icon/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBIcon } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBIcon],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-icon icon=\"x_placeholder\">Icon</db-icon>\n```\n", "packages/components/src/components/icon/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\nYou could use the `data-icon` or `data-icon-trailing` attributes on any HTML tag:\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <span data-icon="x_placeholder"> Icon </span>\n</body>\n```\n', "packages/components/src/components/icon/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------ | :----: | --------- | ----------- |\n| | \u{1F501} | `db-icon` | |\n\n### variant\n\n| Before | Status | After | Description |\n| --------- | :----: | ----- | ----------------------------------------------------------------------------------------------------------------------- |\n| `variant` | \u{1F501} | \u274C | icon variants are controlled by `font-family:var(--db-icon-font-family)` and `font-weight: var(--db-icon-font-weight);` |\n", "packages/components/src/components/icon/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBIcon } from "@db-ux/react-core-components";\n\nconst App = () => <DBIcon icon="x_placeholder">Icon</DBIcon>;\n\nexport default App;\n```\n', "packages/components/src/components/icon/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBIcon } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBIcon icon="x_placeholder">Icon</DBIcon>\n</template>\n```\n', "packages/components/src/components/infotext/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBInfotext } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBInfotext],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-infotext>Infotext</db-infotext>\n```\n", "packages/components/src/components/infotext/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <span class="db-infotext"> Infotext </span>\n</body>\n```\n', "packages/components/src/components/infotext/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/infotext/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBInfotext } from "@db-ux/react-core-components";\n\nconst App = () => <DBInfotext>Infotext</DBInfotext>;\n\nexport default App;\n```\n', "packages/components/src/components/infotext/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBInfotext } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBInfotext>Infotext</DBInfotext>\n</template>\n```\n', "packages/components/src/components/input/docs/Angular.md": '## Angular\n\nLoad SCSS globally within `styles.scss` in your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/rollup";\n```\n\nLoad component within `app.component.ts`:\n\n```ts app.component.ts\n//app.component.ts\nimport { DBInput } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBInput\n ],\n // ...\n})\n```\n\nUse component in template:\n\n```html\n<DBInput\n label="Label"\n placeholder="placeholder"\n description="Description"\n (change)="onInputChange()"\n></DBInput>\n```\n\n## How to use with Reactive Forms\n\nThird party controls require a ControlValueAccessor to function with angular forms.\nOur input component implements this interface so you can use it like any other native element with reactive Forms:\n\n> Currently we do not support onTouch/touched and native validation via FormControl. If your interested in contributing, you\'re very welcome ;)\n\n```ts app.component.ts\n//app.component.ts\nimport { ReactiveFormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n ReactiveFormsModule\n ],\n // ...\n})\n```\n\n```html\n<!-- form.component.html-->\n<form [formGroup]="form" (submit)="onFormSubmit()">\n <db-input label="Input" placeholder="Placeholder" formControlName="input">\n </db-input>\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>input\'s value</dt>\n <dd>\n {{ form.get("input")?.value ? form.get("input")?.value : "No Input set"\n }}\n </dd>\n</dl>\n```\n\n```typescript\n// form.component.ts\nexport class FormComponent {\n form = new FormGroup({\n input: new FormControl("Filled with formControl")\n });\n\n onFormSubmit(): void {\n alert(JSON.stringify(this.form.value));\n }\n}\n```\n\n## How to use with Template driven Forms\n\nThird party controls require a ControlValueAccessor to function with angular forms.\nOur input component implements this interface so you can use it like any other native element with ngModel:\n\n```ts app.component.ts\n//app.component.ts\nimport { FormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n FormsModule\n ],\n // ...\n})\n```\n\n```html\n<!-- form.component.html-->\n<form>\n <DBInput\n ngDefaultControl\n [(ngModel)]="input"\n label="Text Input"\n placeholder="Placeholder"\n description="Description"\n ></DBInput>\n <DBButton type="button" variant="brand" (click)="showValues()"\n >Get input value</DBButton\n >\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>input\'s value</dt>\n <dd>{{ input ? input : "No Input set" }}</dd>\n</dl>\n```\n\n```typescript\n// form.component.ts\nexport class FormComponent {\n input = "";\n showValues(): void {\n alert(JSON.stringify({ input: this.input }));\n }\n}\n```\n', "packages/components/src/components/input/docs/HTML.md": '## HTML\n\nLoad SCSS globally somewhere in your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/relative";\n```\n\nUse it:\n\n```html\n<div class="db-input">\n <label for="username">Label</label>\n <input type="text" name="username" id="username" />\n</div>\n```\n', "packages/components/src/components/input/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ----------- | :----: | ---------- | ----------- |\n| `elm-input` | \u{1F501} | `db-input` | |\n\n### variants\n\n| Before | Status | After | Description |\n| ----------------- | :----: | --------------- | ---------------------------------------------------------------------------------------------------- |\n| `semitransparent` | \u274C | \u274C | old variants are removed a semi-transparent look is the default, new variants are changing the color |\n| `white` | \u274C | \u274C | |\n| `solid` | \u274C | \u274C | |\n| `outline` | \u274C | \u274C | |\n| | \u{1F195} | `adaptive` | |\n| | \u{1F195} | `neutral` | |\n| | \u{1F195} | `critical` | |\n| | \u{1F195} | `informational` | |\n| | \u{1F195} | `warning` | |\n| | \u{1F195} | `successful` | |\n", "packages/components/src/components/input/docs/React.md": '## React\n\nWarning: Date input is not working with iOS Voiceover currently, compare to [React issue](https://github.com/facebook/react/issues/33541) and [WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=294649).\n\nLoad SCSS globally in a `index.scss` file inside `main.tsx`/`main.jsx` within your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/rollup";\n```\n\nImport component:\n\n```typescript\nimport { DBInput } from "@db-ux/react-core-components";\n\n<DBInput\n label={label}\n placeholder={description}\n description={description}\n onChange={handleChange}\n></DBInput>;\n```\n', "packages/components/src/components/input/docs/Vue.md": '## Vue\n\nLoad SCSS globally in a `index.scss` file and import it in your `main.ts`/`main.js` file in your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/rollup";\n```\n\nUse component:\n\n```vue\n<script>\nimport { DBInput } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBInput\n label="Label"\n placeholder="Placeholder"\n @change="onChange($event)"\n ></DBInput>\n</template>\n```\n\nTo get DBInput work with `v-model` you have to use v-model argument syntax:\n\n```typescript\n<DBInput\n label="Text Label"\n placeholder="Start typing"\n v-model:value="value"\n></DBInput>\n```\n\nor using on-change listener:\n\n```typescript\n<DBInput label="Text Label" placeholder="Start" :value="modelAndChange" @change="($event) => { modelAndChange = $event.target.value;\n}"/> {{ modelAndChange }}\n```\n', "packages/components/src/components/link/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBLink } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBLink],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-link href="#" variant="brand">Link</db-link>\n```\n', "packages/components/src/components/link/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <a class="db-link" href="#">Link</a>\n</body>\n```\n', "packages/components/src/components/link/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ---------- | :----: | --------- | ----------- |\n| `elm-link` | \u{1F501} | `db-link` | |\n\n### icons\n\n| Before | Status | After | Description |\n| ------------- | :----: | ----- | ----------------------------------------------------------------------- |\n| `icon` | \u274C | \u274C | not valid anymore use `content` to show internal or external arrow icon |\n| `icononly` | \u274C | \u274C | |\n| `iconVariant` | \u274C | \u274C | |\n", "packages/components/src/components/link/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBLink } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBLink href="#" variant="brand">\n Link\n </DBLink>\n);\n\nexport default App;\n```\n', "packages/components/src/components/link/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBLink } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBLink href="#" variant="brand">Link</DBLink>\n</template>\n```\n', "packages/components/src/components/navigation/docs/Accessibility.md": '## Accessibility\n\n### Active item / current page\n\nTo implicitly set a `NavigationItem` to **active**, the attribute `aria-current="page"` is applied to the contained anchor.\nSome frameworks (vue, angular) offer internal, automatic solutions for this. These should preferably be used.\n\nThis leads to:\n\n- the `NavigationItem` and all parent `NavigationItems` are displayed as **active** via `css` (bold, if necessary with DB pulse)\n- accessibility is granted correctly. see: [MDN aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\nFor other purposes, `NavigationItems` can also be set to active with their prop `active`. However, this does not guarantee correct a11y.\n', "packages/components/src/components/navigation/docs/Angular.md": '## Angular\n\nFor general installation and configuration look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBNavigation } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBNavigation, DBNavigationItem, NavigationContentDirective],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-navigation>\n <db-navigation-item>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n Sub-Navi-Item 1\n </ng-container>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a href="#" aria-current="page"\n >Sub-Sub-Navi-Item 1</a\n >\n </ng-container>\n </db-navigation-item>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n </db-navigation-item>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a href="#">Sub-Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n <ng-container *dbNavigationContent> Navi-Item 1 </ng-container>\n </db-navigation-item>\n <db-navigation-item icon="x_placeholder">\n <ng-container *dbNavigationContent>\n <a href="#">Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n <db-navigation-item [disabled]="true">\n <ng-container *dbNavigationContent>\n <a href="#">Navi-Item 3</a>\n </ng-container>\n </db-navigation-item>\n</db-navigation>\n```\n\n### Angular Router and active state handling\n\nWe recommend using the automatic [integration with the Angular Router](https://angular.dev/best-practices/a11y#active-links-identification). This is way more elegant than setting the aria attribute to the anchor yourself.\n\nThe component first needs to import the `RouterLink` and `RouterLinkActive` directives.\n\nFor other purposes, `NavigationItems` themselves can also be set to active with their prop `[active]="true"`. However, this does not guarantee correct a11y.\n\n```ts app.component.ts\n// app.component.ts\nimport { RouterLink, RouterLinkActive } from \'@angular/router\';\nimport { DBMainNavigation } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [\n // ...\n RouterLink,\n RouterLinkActive,\n DBMainNavigation\n ],\n // ...\n})\n```\n\nNow you can use the Angular Routers `routerLink` directive to define your targets.\nThe active style is automatically set once an item receives the `aria-current="page"` attribute.\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a\n routerLink="/"\n ariaCurrentWhenActive="page"\n [routerLinkActiveOptions]="{ exact: true }"\n >\n Home\n </a>\n </ng-container>\n </db-navigation-item>\n <db-navigation-item>\n <ng-container *dbNavigationContent> Demo Pages </ng-container>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="/demo/1" ariaCurrentWhenActive="page">\n Demo Page 1\n </a>\n </ng-container>\n <ng-container *dbNavigationContent>\n <a routerLink="/demo/2" ariaCurrentWhenActive="page">\n Demo Page 2\n </a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n </db-navigation-item>\n</db-navigation>\n```\n', "packages/components/src/components/navigation/docs/HTML.md": '## HTML\n\nFor general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <nav class="db-navigation">\n <menu>\n <li class="db-navigation-item">\n <button\n class="db-navigation-item-expand-button"\n aria-haspopup="true"\n >\n Navi-Item 1\n </button>\n <menu class="db-sub-navigation">\n <li class="db-navigation-item">\n <button\n class="db-navigation-item-expand-button"\n aria-haspopup="true"\n >\n Sub-Navi-Item 1\n </button>\n <menu class="db-sub-navigation">\n <li class="db-navigation-item">\n <a href="#" aria-current="page"\n >Sub-Sub-Navi-Item 1</a\n >\n </li>\n\n <li class="db-navigation-item">\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </li>\n </menu>\n </li>\n\n <li class="db-navigation-item">\n <a href="#">Sub-Navi-Item 2</a>\n </li>\n </menu>\n </li>\n\n <li class="db-navigation-item" data-icon="x_placeholder">\n <a href="#">Navi-Item 2</a>\n </li>\n\n <li class="db-navigation-item" aria-disabled="true">\n <a href="#">Navi-Item 3</a>\n </li>\n </menu>\n </nav>\n</body>\n```\n', "packages/components/src/components/navigation/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| -------------------- | :----: | --------------- | ----------- |\n| `cmp-mainnavigation` | \u{1F501} | `db-navigation` | |\n\n### children\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | ----------------------------------------------------------------------------- |\n| `data` | \u274C | \u274C | pass data via `children` / `slot`, moved a lot of the features to `db-header` |\n| `siteName` | \u274C | \u274C | |\n", "packages/components/src/components/navigation/docs/React.md": '## React\n\nFor general installation and configuration look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBNavigation, DBNavigationItem } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBNavigation>\n <DBNavigationItem\n subNavigation={\n <>\n <DBNavigationItem\n subNavigation={\n <>\n <DBNavigationItem>\n <a href="#" aria-current="page">\n Sub-Sub-Navi-Item 1\n </a>\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </>\n }\n >\n Sub-Navi-Item 1\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </>\n }\n >\n Navi-Item 1\n </DBNavigationItem>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Navi-Item 2</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Navi-Item 3</a>\n </DBNavigationItem>\n </DBNavigation>\n);\n\nexport default App;\n```\n\n### Active handling\n\nUsually, a `NavigationItem` is implicitly set to active by setting the attribute `aria-current="page"` to the anchor it contains.\n\nFor other purposes, `NavigationItems` themselves can also be set to active with their prop `active`. However, this does not guarantee correct a11y.\n', "packages/components/src/components/navigation/docs/Vue.md": '## Vue\n\nFor general installation and configuration look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBNavigation, DBNavigationItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBNavigation>\n <DBNavigationItem>\n Navi-Item 1\n <template v-slot:sub-navigation>\n <DBNavigationItem>\n Sub-Navi-Item 1\n\n <template v-slot:sub-navigation>\n <DBNavigationItem>\n <a href="#" aria-current="page"\n >Sub-Sub-Navi-Item 1</a\n >\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </template>\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </template>\n </DBNavigationItem>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Navi-Item 2</a>\n </DBNavigationItem>\n <DBNavigationItem :disabled="true">\n <a href="#">Navi-Item 3</a>\n </DBNavigationItem>\n </DBNavigation>\n</template>\n```\n\n### Vue Router and active state handling\n\nWe recommend using the automatic [integration with the Vue Router](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#ariaCurrentValue). This is way more elegant than setting the aria attribute to the anchor yourself.\n\nYou can use Vue Routers `RouterLink` component to define your targets.\nThe active style is automatically set once an item receives the `aria-current="page"` attribute.\n\nFor other purposes, `NavigationItems` themselves can also be set to active with their prop `:active="true"`. However, this does not guarantee correct a11y.\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBMainNavigation, DBNavigationItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBMainNavigation>\n <DBNavigationItem>\n <RouterLink to="/" ariaCurrentValue="page">Home</RouterLink>\n </DBNavigationItem>\n <DBNavigationItem>\n <template> Demo Pages </template>\n <template #subnavigation>\n <DBNavigationItem>\n <RouterLink to="/demo/1" ariaCurrentValue="page">\n Demo Page 1\n </RouterLink>\n </DBNavigationItem>\n <DBNavigationItem>\n <RouterLink to="/demo/2" ariaCurrentValue="page">\n Demo Page 2\n </RouterLink>\n </DBNavigationItem>\n </template>\n </DBNavigationItem>\n </DBMainNavigation>\n</template>\n```\n', "packages/components/src/components/navigation-item/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport { DBNavigationItem, NavigationContentDirective } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [..., DBNavigationItem, NavigationContentDirective],\n // ...\n})\n\n```\n\n### Use component\n\nWe try to set `areaPopup` (has/hasn\'t sub-navigation) inside the component, but this doesn\'t work in all frameworks. If you encounter some problems you have the set `areaPopup` with `true/false` for sub-navigation or link\n\n```html app.component.html\n<!-- app.component.html -->\n\n<!-- Only link -->\n<db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="mypath">NavigationItem</a>\n </ng-container>\n</db-navigation-item>\n\n<!-- With Sub-Navigation -->\n\n<db-navigation-item>\n <ng-container *dbNavigationContent>Navi-Item 1</ng-container>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="mypath">Sub-Navi-Item 1</a>\n </ng-container>\n </db-navigation-item>\n\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="mypath">Sub-Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n</db-navigation-item>\n```\n', "packages/components/src/components/navigation-item/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\nIf you want to use sub-navigations for mobile you need to add a `eventListener:click` on the `db-navigation-item-expand-button`. This eventListener should set `aria-expanded` to `true` for the `button`. This will open a static overlay for mobile/tablet devices with your `db-sub-navigation`. For desktop devices it works by default with `:hover`.\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <!-- Only link -->\n <li class="db-navigation-item">\n <a href="mypath">NavigationItem</a>\n </li>\n\n <!-- With Sub-Navigation -->\n <li class="db-navigation-item">\n <button class="db-navigation-item-expand-button" aria-haspopup="true">\n Navi-Item 1\n </button>\n <menu class="db-sub-navigation">\n <a href="mypath">Sub-Navi-Item 1</a>\n <a href="mypath">Sub-Navi-Item 2</a>\n </menu>\n </li>\n</body>\n```\n', "packages/components/src/components/navigation-item/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/navigation-item/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\nWe try to set `areaPopup` (has/hasn\'t sub-navigation) inside the component, but this doesn\'t work in all frameworks. If you encounter some problems you have the set `areaPopup` with `true/false` for sub-navigation or link\n\n```tsx App.tsx\n// App.tsx\nimport { Link } from "react-router-dom";\nimport { DBNavigationItem } from "@db-ux/react-core-components";\n\nconst App = () => (\n <>\n {/* Only link */}\n <DBNavigationItem>\n <Link to="mypath">NavigationItem</Link>\n </DBNavigationItem>\n\n {/* With Sub-Navigation */}\n <DBNavigationItem\n subNavigation={\n <>\n <DBNavigationItem>\n <Link to="mypath">Sub-Navi-Item 1</Link>\n </DBNavigationItem>\n <DBNavigationItem>\n <Link to="mypath">Sub-Navi-Item 2</Link>\n </DBNavigationItem>\n </>\n }\n >\n Navi-Item 1\n </DBNavigationItem>\n </>\n);\n\nexport default App;\n```\n', "packages/components/src/components/navigation-item/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\nWe try to set `areaPopup` (has/hasn\'t sub-navigation) inside the component, but this doesn\'t work in all frameworks. If you encounter some problems you have the set `areaPopup` with `true/false` for sub-navigation or link\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBNavigationItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <!-- Only link -->\n <DBNavigationItem>\n <router-link to="mypath">NavigationItem</router-link>\n </DBNavigationItem>\n\n <!-- With Sub-Navigation -->\n <DBNavigationItem>\n <template #subnavigation>\n <DBNavigationItem>\n <router-link to="mypath">Sub-Navi-Item 1</router-link>\n </DBNavigationItem>\n <DBNavigationItem>\n <router-link to="mypath">Sub-Navi-Item 2</router-link>\n </DBNavigationItem>\n </template>\n Navi-Item 1\n </DBNavigationItem>\n</template>\n```\n', "packages/components/src/components/notification/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBNotification } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBNotification],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-notification headline=\"Headline\">Notification</db-notification>\n```\n", "packages/components/src/components/notification/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-notification" data-icon="information_circle">\n <h6>Headline</h6>\n <p>Notification</p>\n <button\n class="db-button is-icon-text-replace"\n data-size="small"\n data-variant="ghost"\n data-icon="cross"\n >\n Close Button\n </button>\n </div>\n</body>\n```\n', "packages/components/src/components/notification/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------------ | :----: | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `elm-notification` | \u{1F501} | `db-notification` | The old notification component has been split into 2 different components [Notification](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system-v3/components/feedback/notification) and [Notification](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system-v3/components/feedback/notification) for more information (when and how to use it). |\n\n### variant \u27A1 type\n\n| Before | Status | After | Description |\n| -------------- | :----: | -------------- | ------------------------------------------------------- |\n| `notification` | \u{1F501} | `notification` | Default notification with different look |\n| `status` | \u274C | \u274C | Status can be changed by `variants` |\n| | \u{1F195} | `inline` | New styling with shadow and rounded corners (like card) |\n\n### type \u27A1 variants\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------------- | -------------------------------------------------------- |\n| | \u{1F195} | `adaptive` | Default: change colors based on background |\n| `error` | \u{1F501} | `critical` | 'Red' colored notification to show error messages |\n| `informative` | \u{1F501} | `informational` | 'Blue' colored notification to show information messages |\n| `warning` | \u{1F501} | `warning` | 'Yellow' colored notification to show warning messages |\n| `success` | \u{1F501} | `successful` | 'Green' colored notification to show success messages |\n", "packages/components/src/components/notification/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBNotification } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBNotification headline="Headline">Notification</DBNotification>\n);\n\nexport default App;\n```\n', "packages/components/src/components/notification/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBNotification } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBNotification headline="Headline">Notification</DBNotification>\n</template>\n```\n', "packages/components/src/components/page/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport { DBPage, DBHeader } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBPage, DBHeader\n ],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-page>\n <db-header header>...</db-header>\n <main class=\"db-main\">Main Page</main>\n</db-page>\n```\n", "packages/components/src/components/page/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-page">\n <header class="db-header">...</header>\n <main class="db-main">Main Page</main>\n </div>\n</body>\n```\n', "packages/components/src/components/page/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ---------- | :----: | --------- | ----------- |\n| `rea-page` | \u{1F501} | `db-page` | |\n", "packages/components/src/components/page/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBPage, DBHeader } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBPage header={<DBHeader>...</DBHeader>}>\n <main className="db-main">Main Page</main>\n </DBPage>\n);\n\nexport default App;\n```\n', "packages/components/src/components/page/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBPage, DBHeader } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBPage>\n <DBHeader slot="header">...</DBHeader>\n <main class="db-main">Main Page</main>\n </DBPage>\n</template>\n```\n', "packages/components/src/components/popover/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBPopover } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBPopover],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-popover>\n <db-button trigger> Hover on me to open Popover </db-button>\n Use any html code here like e.g. a <code>button</code>:\n <button type=\"button\">Test</button>\n</db-popover>\n```\n", "packages/components/src/components/popover/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-popover">\n <button aria-haspopup="true" class="db-button" type="button">\n Hover on me to open Popover\n </button>\n <article class="db-popover-content">\n Use any html code here like e.g. a <code>button</code>:\n <button type="button">Test</button>\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/popover/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/popover/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBPopover, DBButton } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBPopover trigger={<DBButton>Hover on me to open Popover</DBButton>}>\n Use any html code here like e.g. a <code>button</code>:\n <button type="button">Test</button>\n </DBPopover>\n);\n\nexport default App;\n```\n', "packages/components/src/components/popover/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBPopover, DBButton } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBPopover>\n <template v-slot:trigger>\n <DBButton> Hover on me to open Popover </DBButton>\n </template>\n Use any html code here like e.g. a <code>button</code>:\n <button type="button">Test</button>\n </DBPopover>\n</template>\n```\n', "packages/components/src/components/radio/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBRadio } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBRadio],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<ul>\n @for (radioName of radioNames; track radioName) {\n <li>\n <db-radio\n (change)="radio = radioName"\n [label]="\'Radio \' + radioName"\n [value]="radioName"\n name="RadioGroup"\n ></db-radio>\n </li>\n }\n</ul>\n```\n\n```ts app.component.ts\n// app.component.ts\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-app",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n radioNames = ["X", "Y", "Z"];\n radio = "";\n}\n```\n\n## How to use with Template Driven Forms\n\nThird party controls require a `ControlValueAccessor` to function with angular forms. Adding an `ngDefaultControl` attribute will allow them to use that directive.\n[Further information](https://stackoverflow.com/a/46465959)\n\n```ts app.component.ts\n//app.component.ts\nimport { FormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n FormsModule\n ],\n // ...\n})\n```\n\n```html form.component.html\n<!-- form.component.html -->\n<form>\n <DBRadio ngDefaultControl [(ngModel)]="radio">Label</DBRadio>\n <DBButton type="button" variant="brand" (click)="showValues()"\n >Get radio value</DBButton\n >\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>radio\'s value</dt>\n <dd>{{ radio ? radio : "No radio set" }}</dd>\n</dl>\n```\n\n```ts form.component.ts\n// form.component.ts\nexport class FormComponent {\n radio = "";\n showValues(): void {\n alert(JSON.stringify({ radio: this.radio }));\n }\n}\n```\n\n## How to use with Reactive Forms\n\ncoming soon \u2026 if your interested in contributing, you\'re very welcome ;)\n', "packages/components/src/components/radio/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <label class="db-radio" for="radio-element">\n <input type="radio" id="radio-element" name="States" value="Y" />\n Label\n </label>\n</body>\n```\n\n### Group multiple radio buttons\n\nWhen grouping multiple radio buttons, use `fieldset` and `legend` elements for proper accessibility:\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <fieldset>\n <legend>Choose an option</legend>\n <label class="db-radio" for="radio-option-1">\n <input\n type="radio"\n id="radio-option-1"\n name="options"\n value="option1"\n />\n Option 1\n </label>\n <label class="db-radio" for="radio-option-2">\n <input\n type="radio"\n id="radio-option-2"\n name="options"\n value="option2"\n />\n Option 2\n </label>\n <label class="db-radio" for="radio-option-3">\n <input\n type="radio"\n id="radio-option-3"\n name="options"\n value="option3"\n />\n Option 3\n </label>\n </fieldset>\n</body>\n```\n', "packages/components/src/components/radio/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ----------- | :----: | ---------- | ----------- |\n| `elm-radio` | \u{1F501} | `db-radio` | |\n\n### id\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | ----------- |\n| `input_id` | \u{1F501} | `id` | |\n", "packages/components/src/components/radio/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBRadio } from "@db-ux/react-core-components";\n\nconst App = () => {\n const [radio, setRadio] = useState("");\n\n return (\n <fieldset>\n <legend>Radio group example</legend>\n {["X", "Y", "Z"].map((radioName) => (\n <DBRadio\n key={radioName}\n name="radio-group"\n value={radioName}\n checked={radio === radioName}\n onChange={() => {\n setRadio(radioName);\n }}\n >\n Radio {radioName}\n </DBRadio>\n ))}\n </fieldset>\n );\n};\n\nexport default App;\n```\n', "packages/components/src/components/radio/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { DBRadio } from "@db-ux/v-core-components";\nimport { _ref } from "vue";\nconst radio = _ref("");\n\nconst radioNames = ["X", "Y", "Z"];\n</script>\n\n<template>\n <fieldset>\n <legend>Radio group example</legend>\n <DBRadio\n v-for="radioName in radioNames"\n :key="radioName"\n @change="radio = radioName"\n name="radio-group"\n :value="radioName"\n :checked="radio === radioName"\n >\n Radio {{ radioName }}\n </DBRadio>\n </fieldset>\n</template>\n```\n', "packages/components/src/components/section/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBSection } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBSection],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-section variant=\"full\">Section</db-section>\n```\n", "packages/components/src/components/section/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <section class="db-section">\n <div data-variant="full">Section</div>\n </section>\n</body>\n```\n', "packages/components/src/components/section/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/section/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBSection } from "@db-ux/react-core-components";\n\nconst App = () => <DBSection variant="full">Section</DBSection>;\n\nexport default App;\n```\n', "packages/components/src/components/section/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBSection } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBSection variant="full">Section</DBSection>\n</template>\n```\n', "packages/components/src/components/select/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBSelect } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBSelect],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-select>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n</db-select>\n```\n', "packages/components/src/components/select/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-select">\n <label for="test">Label</label>\n <select id="test">\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </select>\n </div>\n</body>\n```\n', "packages/components/src/components/select/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `elm-select` | \u{1F501} | `db-select` | |\n\n### select\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | -------------------------------------------------------------------------------- |\n| `multiple` | \u274C | | We removed this attribute for now, there are no valid designs for this use case. |\n| `size` | \u274C | | We removed this attribute for now, there are no valid designs for this use case. |\n", "packages/components/src/components/select/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBSelect } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBSelect>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </DBSelect>\n);\n\nexport default App;\n```\n', "packages/components/src/components/select/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBSelect } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBSelect>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </DBSelect>\n</template>\n```\n', "packages/components/src/components/stack/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBStack } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBStack],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-stack>\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n</db-stack>\n```\n", "packages/components/src/components/stack/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-stack">\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n </div>\n</body>\n```\n', "packages/components/src/components/stack/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/stack/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBStack } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBStack>\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n </DBStack>\n);\n\nexport default App;\n```\n', "packages/components/src/components/stack/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBStack } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBStack>\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n </DBStack>\n</template>\n```\n', "packages/components/src/components/switch/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBSwitch } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBSwitch],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-switch>Switch</db-switch>\n```\n", "packages/components/src/components/switch/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <label for="my-id" class="db-switch">\n <input type="checkbox" role="switch" id="my-id" />\n Switch\n </label>\n</body>\n```\n', "packages/components/src/components/switch/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `elm-toggle` | \u{1F501} | `db-switch` | |\n\n### id\n\n| Before | Status | After | Description |\n| -------- | :----: | :---: | ----------- |\n| `htmlid` | \u{1F501} | `id` | |\n", "packages/components/src/components/switch/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBSwitch } from "@db-ux/react-core-components";\n\nconst App = () => <DBSwitch>Switch</DBSwitch>;\n\nexport default App;\n```\n', "packages/components/src/components/switch/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBSwitch } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBSwitch>Switch</DBSwitch>\n</template>\n```\n', "packages/components/src/components/tab-item/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tab-item/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div role="tablist" class="db-tab-list" aria-orientation="horizontal">\n <div class="db-tab-list-scroll-container">\n <label\n role="tab"\n for="my-tabs-tab-0"\n class="db-tab-item"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-0"\n ><input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1</label\n ><label\n role="tab"\n for="my-tabs-tab-1"\n class="db-tab-item"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-1"\n ><input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2</label\n ><label\n role="tab"\n for="my-tabs-tab-2"\n class="db-tab-item"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-2"\n ><input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3</label\n >\n </div>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tab-item/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ------------- | ----------- |\n| `cmp-db-tab` | \u{1F501} | `db-tab-item` | |\n\n### name\n\n| Before | Status | After | Description |\n| ------ | :----: | :---: | --------------------------------------------------------------------------------------------------- |\n| `name` | \u274C | \u274C | It should be used with `db-tabs` which will add a the `name` from `db-tabs` to all tabs all at one. |\n", "packages/components/src/components/tab-item/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tab-item/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tab-list/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tab-list/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div role="tablist" class="db-tab-list" aria-orientation="horizontal">\n <div class="db-tab-list-scroll-container">\n <label\n role="tab"\n for="my-tabs-tab-0"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-0"\n ><input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1</label\n ><label\n role="tab"\n for="my-tabs-tab-1"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-1"\n ><input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2</label\n ><label\n role="tab"\n for="my-tabs-tab-2"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-2"\n ><input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3</label\n >\n </div>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tab-list/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/tab-list/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tab-list/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tab-panel/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tab-panel/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div role="tablist" class="db-tab-list" aria-orientation="horizontal">\n <div class="db-tab-list-scroll-container">\n <label\n role="tab"\n for="my-tabs-tab-0"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-0"\n ><input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1</label\n ><label\n role="tab"\n for="my-tabs-tab-1"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-1"\n ><input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2</label\n ><label\n role="tab"\n for="my-tabs-tab-2"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-2"\n ><input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3</label\n >\n </div>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tab-panel/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/tab-panel/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tab-panel/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/table/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport {\n DBTable,\n DBTableHead,\n DBTableBody,\n DBTableRow,\n DBTableHeaderCell,\n DBTableDataCell\n} from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTable, DBTableHead, DBTableBody, DBTableRow, DBTableHeaderCell, DBTableDataCell],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-table captionPlain="Table Caption">\n <db-table-head>\n <db-table-row>\n <db-table-header-cell scope="col">A</db-table-header-cell>\n <db-table-header-cell scope="col">B</db-table-header-cell>\n <db-table-header-cell scope="col">C</db-table-header-cell>\n </db-table-row>\n </db-table-head>\n <db-table-body>\n <db-table-row>\n <db-table-header-cell scope="row">1</db-table-header-cell>\n <db-table-data-cell>2</db-table-data-cell>\n <db-table-data-cell>3</db-table-data-cell>\n </db-table-row>\n <db-table-row>\n <db-table-header-cell scope="row">4</db-table-header-cell>\n <db-table-data-cell>5</db-table-data-cell>\n <db-table-data-cell>6</db-table-data-cell>\n </db-table-row>\n </db-table-body>\n</db-table>\n```\n', "packages/components/src/components/table/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-table">\n <table>\n <caption>\n Table Caption\n </caption>\n <thead>\n <tr class="db-table-row">\n <th class="db-table-header-cell" scope="col">A</th>\n <th class="db-table-header-cell" scope="col">B</th>\n <th class="db-table-header-cell" scope="col">C</th>\n </tr>\n </thead>\n <tbody>\n <tr class="db-table-row">\n <th class="db-table-header-cell" scope="row">1</th>\n <td class="db-table-data-cell">2</td>\n <td class="db-table-data-cell">3</td>\n </tr>\n <tr class="db-table-row">\n <th class="db-table-header-cell" scope="row">4</th>\n <td class="db-table-data-cell">5</td>\n <td class="db-table-data-cell">6</td>\n </tr>\n </tbody>\n <tfoot>\n <tr class="db-table-row">\n <th class="db-table-header-cell" scope="row">Footer 1</th>\n <td class="db-table-data-cell" colspan="2">Footer 2</td>\n </tr>\n </tfoot>\n </table>\n </div>\n</body>\n```\n', "packages/components/src/components/table/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ----------- | :----: | ---------- | --------------------------------------------------------------------------------------------------------- |\n| `elm-table` | \u{1F501} | `db-table` | The table component has been redesigned with new sub-components for header, body, footer, rows, and cells |\n\n## DB UI Elements \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ---------- | :----: | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `db-table` | \u{1F501} | `db-table` | The table component has been restructured with dedicated sub-components (`db-table-head`, `db-table-body`, `db-table-footer`, `db-table-row`, `db-table-header-cell`, `db-table-data-cell`) for better composability |\n", "packages/components/src/components/table/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTable,\n DBTableHead,\n DBTableBody,\n DBTableRow,\n DBTableHeaderCell,\n DBTableDataCell\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTable captionPlain="Table Caption">\n <DBTableHead>\n <DBTableRow>\n <DBTableHeaderCell scope="col">A</DBTableHeaderCell>\n <DBTableHeaderCell scope="col">B</DBTableHeaderCell>\n <DBTableHeaderCell scope="col">C</DBTableHeaderCell>\n </DBTableRow>\n </DBTableHead>\n <DBTableBody>\n <DBTableRow>\n <DBTableHeaderCell scope="row">1</DBTableHeaderCell>\n <DBTableDataCell>2</DBTableDataCell>\n <DBTableDataCell>3</DBTableDataCell>\n </DBTableRow>\n <DBTableRow>\n <DBTableHeaderCell scope="row">4</DBTableHeaderCell>\n <DBTableDataCell>5</DBTableDataCell>\n <DBTableDataCell>6</DBTableDataCell>\n </DBTableRow>\n </DBTableBody>\n </DBTable>\n);\n\nexport default App;\n```\n', "packages/components/src/components/table/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTable,\n DBTableHead,\n DBTableBody,\n DBTableRow,\n DBTableHeaderCell,\n DBTableDataCell\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTable captionPlain="Table Caption">\n <DBTableHead>\n <DBTableRow>\n <DBTableHeaderCell scope="col">A</DBTableHeaderCell>\n <DBTableHeaderCell scope="col">B</DBTableHeaderCell>\n <DBTableHeaderCell scope="col">C</DBTableHeaderCell>\n </DBTableRow>\n </DBTableHead>\n <DBTableBody>\n <DBTableRow>\n <DBTableHeaderCell scope="row">1</DBTableHeaderCell>\n <DBTableDataCell>2</DBTableDataCell>\n <DBTableDataCell>3</DBTableDataCell>\n </DBTableRow>\n <DBTableRow>\n <DBTableHeaderCell scope="row">4</DBTableHeaderCell>\n <DBTableDataCell>5</DBTableDataCell>\n <DBTableDataCell>6</DBTableDataCell>\n </DBTableRow>\n </DBTableBody>\n </DBTable>\n</template>\n```\n', "packages/components/src/components/tabs/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tabs/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div\n role="tablist"\n class="db-tab-list"\n data-alignment="start"\n data-width="auto"\n >\n <ul>\n <li role="tab" class="db-tab-item">\n <label\n for="my-tabs-tab-0"\n aria-controls="my-tabs-tab-panel-0"\n >\n <input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1\n </label>\n </li>\n <li role="tab" class="db-tab-item">\n <label\n for="my-tabs-tab-1"\n aria-controls="my-tabs-tab-panel-1"\n >\n <input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2\n </label>\n </li>\n <li role="tab" class="db-tab-item">\n <label\n for="my-tabs-tab-2"\n aria-controls="my-tabs-tab-panel-2"\n >\n <input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3\n </label>\n </li>\n </ul>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tabs/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------- | ----------- |\n| `cmp-tab-bar` | \u{1F501} | `db-tabs` | |\n", "packages/components/src/components/tabs/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tabs/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tag/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBTag } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTag],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tag><db-button>Tag as Button</db-button></db-tag>\n<db-tag>\n <db-link> Tag as Link </db-link>\n</db-tag>\n<db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>\n<db-tag><db-radio>Tag as Radio</db-radio></db-tag>\n<db-tag>Static Tag</db-tag>\n<db-tag [overflow]=\"true\"><span>Static Tag with overflow</span></db-tag>\n```\n", "packages/components/src/components/tag/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tag">\n <span class="tag-label">Regular (Default)</span>\n </div>\n</body>\n```\n', "packages/components/src/components/tag/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### tag vs. chip\n\nWe simplified the components by reducing the amount from tag + chip to only tag.\n\nYou can use different types of tags by adding another component into it:\n\n```html\n<db-tag><db-button>Tag as Button</db-button></db-tag>\n<db-tag><db-link>Tag as Link</db-link></db-tag>\n<db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>\n<db-tag><db-radio>Tag as Radio</db-radio></db-tag>\n<db-tag>Static Tag</db-tag>\n```\n\n### class\n\n| Before | Status | After | Description |\n| --------- | :----: | -------- | ----------- |\n| `elm-tag` | \u{1F501} | `db-tag` | |\n\n### sizes\n\n| Before | Status | After | Description |\n| ------- | :----: | :---: | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `small` | \u274C | \u274C | We removed small tags because of density. But you can use `type` property with value `strong` to emphasize a tag for a differentiation. |\n\n### variants\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------------- | ------------------------------------------------ |\n| `poi-*` | \u274C | \u274C | We removed all point of interest colors for now. |\n| `track` | \u274C | \u274C | We removed track for now. |\n| `error` | \u{1F501} | `critical` | |\n| `informative` | \u{1F501} | `informational` | |\n| `success` | \u{1F501} | `successful` | |\n\n### icons\n\n| Before | Status | After | Description |\n| ----------- | :----: | ----- | -------------------------------------------------------------- |\n| `iconAfter` | \u274C | \u274C | not valid anymore, for tags only icons before text are allowed |\n", "packages/components/src/components/tag/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBTag } from "@db-ux/react-core-components";\n\nconst App = () => (\n <>\n <DBTag>\n <DBButton>Tag as Button</DBButton>\n </DBTag>\n <DBTag>\n <DBLink>Tag as Link</DBLink>\n </DBTag>\n <DBTag>\n <DBCheckbox>Tag as Checkbox</DBCheckbox>\n </DBTag>\n <DBTag>\n <DBRadio>Tag as Radio</DBRadio>\n </DBTag>\n <DBTag>Static Tag</DBTag>\n <DBTag overflow={true}>\n <span>Static Tag with overflow</span>\n </DBTag>\n </>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tag/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBTag } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTag><DBButton>Tag as Button</DBButton></DBTag>\n <DBTag>\n <DBLink> Tag as Link </DBLink>\n </DBTag>\n <DBTag><DBCheckbox>Tag as Checkbox</DBCheckbox></DBTag>\n <DBTag><DBRadio>Tag as Radio</DBRadio></DBTag>\n <DBTag>Static Tag</DBTag>\n <DBTag :overflow="true">\n <span>Static Tag with overflow</span>\n </DBTag>\n</template>\n```\n', "packages/components/src/components/textarea/docs/Angular.md": '## Angular\n\nFor general installation and configuration look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBTextarea } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTextarea],\n // ...\n})\n```\n\n### Use component\n\n```ts app.component.ts\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-root",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n textarea = "default value";\n}\n```\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-textarea\n name="textarea"\n label="Textarea Controlled"\n placeholder="Placeholder"\n message="Message"\n icon="x_placeholder"\n [value]="textarea"\n (change)="textarea = $event.target.value"\n></db-textarea>\n```\n', "packages/components/src/components/textarea/docs/HTML.md": '## HTML\n\nFor general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-textarea">\n <label for="textarea">Label</label>\n <textarea id="textarea" rows="2" cols="33" placeholder=" "></textarea>\n </div>\n</body>\n```\n', "packages/components/src/components/textarea/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out\n> this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| -------------- | :----: | ------------- | ----------- |\n| `elm-textarea` | \u{1F501} | `db-textarea` | |\n\n### variants\n\n| Before | Status | After | Description |\n| ----------------- | :----: | --------------- | ----------- |\n| `semitransparent` | \u274C | | |\n| `white` | \u274C | | |\n| `solid` | \u274C | | |\n| `outline` | \u274C | | |\n| | \u{1F195} | `adaptive` | |\n| | \u{1F195} | `critical` | |\n| | \u{1F195} | `informational` | |\n| | \u{1F195} | `warning` | |\n| | \u{1F195} | `successful` | |\n\n### other\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------- | ----------- |\n| `description` | \u{1F501} | `message` | |\n", "packages/components/src/components/textarea/docs/React.md": '## React\n\nFor general installation and configuration look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBTextarea } from "@db-ux/react-core-components";\n\nconst App = () => {\n const [textarea, setTextarea] = useState("default textarea");\n return (\n <DBTextarea\n label="Textarea Controlled"\n message="Message"\n value={textarea}\n onChange={(event) => {\n setTextarea(event.target.value);\n }}\n />\n );\n};\n\nexport default App;\n```\n', "packages/components/src/components/textarea/docs/Vue.md": '## Vue\n\nFor general installation and configuration look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### General\n\nYou cannot use a default value for [textarea in vue](https://vuejs.org/guide/essentials/forms.html#multiline-text).\nUse `v-model:value` or `:value` instead with a `_ref("My default value")`.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { _ref } from "vue";\nimport { DBTextarea } from "@db-ux/v-core-components";\n\nconst textarea = _ref("default value");\n</script>\n\n<template>\n <DBTextarea\n label="Textarea value"\n placeholder="Placeholder"\n message="Message"\n icon="x_placeholder"\n name="textarevalue-name"\n v-model:value="textarea"\n />\n</template>\n```\n', "packages/components/src/components/tooltip/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBTooltip } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTooltip],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-button aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <db-tooltip id="tooltip-01">Tooltip</db-tooltip>\n</db-button>\n```\n', "packages/components/src/components/tooltip/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <button class="db-button" aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <i class="db-tooltip" id="tooltip-01">Tooltip</i>\n </button>\n</body>\n```\n', "packages/components/src/components/tooltip/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/tooltip/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBTooltip, DBButton } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBButton aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <DBTooltip id="tooltip-01">Tooltip</DBTooltip>\n </DBButton>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tooltip/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBTooltip, DBButton } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBButton aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <DBTooltip id="tooltip-01">Tooltip</DBTooltip>\n </DBButton>\n</template>\n```\n', "packages/foundations/docs/BrowserSupport.md": '# Browser Support\n\nWe\'re [testing our components with playwright](../../foundations/test-table) on the latest browser versions of Google Chrome, Mozilla Firefox and Apple Safari. Since all of these browsers are supposed to be evergreen, we\'re using some newer browser features that have been added specifically as part of the [interop initiative](https://web.dev/blog/interop-2025), partly as progressive enhancements, but some may not even offer graceful degradation.\n\nThis may leave some older browser versions behind. If you need to take care of these older browsers, you may not want to migrate to DB UX Design System v3 right now, but stay with DB UI Core or Elements for a little longer. In particular, the following features we use may be related to an evaluation of your browser strategy:\n\n## Stable in evergreen browsers\n\nThese are the features that we use or plan to integrate, which are stable in the Stable channel, including the ESR versions of Evergreen browsers.\n\n| Web Feature | Google Chrome | Mozilla Firefox | Apple Safari |\n| ----------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------- | ----------------- |\n| [Multiple named disclosure boxes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details#multiple_named_disclosure_boxes) | 120 (05.12.2023) | 130 (03.09.2024) | 17.2 (11.12.2023) |\n| [`scrollbar-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-color) (planned) | 121 (13.01.2024) | 64 (11.12.2018) | 26.2 (12.12.2025) |\n| [Popover](https://caniuse.com/mdn-api_htmlelement_popover) (planned) | 114 (30.05.2023) | 125 (16.04.2024) | 17 (26.09.2023) |\n| [`requestClose()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/requestClose#browser_compatibility) (planned) | 134 (04.03.2025) | 139 (27.05.2025) | 18.4 (31.03.2025) |\n| [`:open` CSS pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:open#browser_compatibility) | 133 (04.02.2025) | 136 (04.03.2025) | 26.5 |\n\nPopover is loosely depending on Anchor Positioning.\n\n## Progressive enhancement\n\n| Web Feature | Google Chrome | Mozilla Firefox | Apple Safari |\n| ------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------- | -------------------------------------------------------------------------------------------------------- |\n| [CSS `field-sizing: content` property](https://caniuse.com/mdn-css_properties_field-sizing_content) | 123 (19.03.2024) | 152 | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [`hidden="until-found"`-HTML-attribute](https://caniuse.com/mdn-html_global_attributes_hidden_until-found) (planned) | 102 (24.05.2022) | 139 (27.05.2025) | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [`dialog[closedby="closerequest"]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closerequest) | 134 (19.03.2024) | 141 (22.07.2025) | [Technology Preview 242](https://webkit.org/blog/category/safari-technology-preview/) |\n| [Customizable `select` elements](https://caniuse.com/selectlist) (planned) | 134 (19.03.2024) | tbd | [Technology Preview 238](https://webkit.org/blog/17848/release-notes-for-safari-technology-preview-238/) |\n| [`select[multiple][size="1"]` UI optimization on Desktop browsers](https://chromestatus.com/feature/5412736871825408) (planned) | 142 (28.10.2025) | tbd | tbd |\n\n## Without graceful degradation\n\nThe following functionality relies on JavaScript for support in browsers that do not support it yet. Other solutions would be PostCSS preprocessing (planned) and declaring CSS declarations twice, both in the new and old ways (e.g., semantic overflow).\n\n| Web Feature | Google Chrome | Mozilla Firefox | Apple Safari |\n| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------------------------------- | ------------------------------------------------------------------------------------- |\n| [semantic overflow (`overflow-block` and `overflow-inline`)](https://caniuse.com/mdn-css_properties_overflow-block) | 135 (01.04.2025) | 69 (03.09.2019) | 26 |\n| [`@property` / typed CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) | 85 (25.08.2022) | 128 (09.07.2024) | 16.4 (27.03.2023) |\n| [`light-dark()` CSS function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) | 123 (19.03.2024) | 120 (21.11.2023) | 17.5 (13.05.2024) |\n| [`style()` container queries for custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries#container_style_queries) (planned) | 111 (07.03.2023) | 151 | 18 (16.09.2024) |\n| [Anchor Positioning](https://caniuse.com/css-anchor-positioning) (planned) | 125 (14.05.2024) | 147 (13.01.2026) | 26 (15.09.2025) |\n| [Invoker Commands](https://caniuse.com/mdn-html_elements_button_commandfor) (planned) | 135 (01.04.2025) | 144 (14.10.2025) | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [`attr()` CSS Values 5 extensions](https://developer.mozilla.org/en-US/docs/Web/CSS/attr) (planned) | 133 (04.02.2025) | Firefox 149 (behind a config preference) | [Technology Preview 242](https://webkit.org/blog/category/safari-technology-preview/) |\n| [CSS Custom Functions](https://www.bram.us/2025/02/09/css-custom-functions-teaser/) (planned) | 139 (30.07.2025) | tbd | tbd |\n| [CSS `sibling-count()` and `sibling-index()`](https://caniuse.com/wf-sibling-count) (planned) | 138 (24.06.2025) | tbd | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [CSS `@scope`](https://caniuse.com/css-cascade-scope) (planned) | 118 (10.10.2023) | 146 (09.12.2025) | 17.4 (05.03.2024) |\n', "packages/foundations/docs/Colors.md": '# Colors\n\n- You use **Colors** to highlight an area with a specific color.\n- You can also use it to change the text color for components with the `*-transparent-semi` colors.\n- Most classes/placeholders will change `color` and `background-color` and will set properties, which will be passed down to adaptive components.\n\n## How to use\n\n1. First, you can use our **[color usage guide](./color-usage-guide)** to find out which method is best for coloring your layouts or components.\n2. The colors of layouts can be easily set using the predefined **[color schemes](./color-schemes)**.\n3. When developing your own components, `SCSS` variables or `CSS Custom Properties` should be used.\n\n**\u{1F6A7} The overview of our color variables is still in the making. Please come back soon.**\n\n## How to include colors\n\nFor **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/colors/classes/all.css";` in your root `.css` file.\nOr if you only want a single variant e.g. **informational** you can import `@import "@db-ux/core-foundations/build/styles/colors/classes/informational.css";`.\n\nIn case that you\'re either using a bundler (recommended) or importing the CSS within your JavaScript files, please adapt this `@import` syntax accordingly.\n\nFor **SCSS** you need to use the import `@use "@db-ux/core-foundations/build/styles/colors/placeholder"` in your `.scss` file, where you need to reference the specific variable.\nThen you can use e.g. **informational** color by extending our SCSS placeholders like this: `@extend %db-informational-bg-1`.\n\n## Dark- & Light-Mode\n\nWe provide tokens for both dark- and light-mode. If you include the **relative** style you get a media query `@media (prefers-color-scheme: dark)` with the relevant tokens. You can [emulate](https://developer.chrome.com/docs/devtools/rendering/emulate-css/) the modes inside the devtools.\n\nIt\'s [recommended to set a `meta`-HTML-tag](https://web.dev/articles/color-scheme#the_color-scheme_meta_tag) to provide a signal to the browser on your accepted color schemes previous to loading the CSS:\n\n```html\n<meta name="color-scheme" content="dark light" />\n```\n\nWe recommend using the default media query based on the user preference, but if you want to force a mode for your page, you could set the `color-scheme` `meta`-HTML-tag to either [`only light`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#only_light), [`dark` or `light`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#light).\n\nIf you want to set it on a specific container as e.g. shown on the documentation page "Color schemes" you can do that by adding the HTML-attributes `data-mode="dark"` or `data-mode="light"`:\n\n### HTML\n\n```html\n<div data-mode="dark">...</div>\n```\n\nWe\'re providing an example in our [color schemes documentation](./color-schemes).\n\nWe need to set the **base** background to the element with `[data-mode]` so if you want to change the background to another color, make sure to use a wrapping tag like `<div>` with the `[data-mode]` to avoid issues.\n', "packages/foundations/docs/CustomIcons.md": "# Custom Icons\n\nIf you have custom icons and want to use them for [foundations](https://www.npmjs.com/package/@db-ux/core-foundations) and/or in [components](https://www.npmjs.com/package/@db-ux/core-components), you need to generate a **woff2** file.\n\nCheck out the `icon-font-tools` [documentation](https://github.com/db-ux-design-system/icon-font-tools/blob/main/docs/GenerateIconFonts.md) to generate a **woff2** file.\n\n## Foundation Developer\n\nIf you update a **svg** inside `assets/icons/functional/images` you need to recreate the **woff2** file.\n\nFor this you just need to run the following command from root:\n\n```shell\nnpm run update:icon-fonts\n```\n\nYour new icon should be inside `assets/icons/functional/fonts/**/info.json` and you should see it inside `assets/icons/functional/fonts/**/index.html` in the browser.\n", "packages/foundations/docs/Densities.md": '# Densities\n\n- You could use **Densities** to create visual "volume levels"\n- You could change the appearance of a container rather than a component\n- Best example is the navigation on our [main page](https://design-system.deutschebahn.com/core-web/review/main/). Above the navigation is a smaller meta-navigation and even the component inside is smaller as well as all the spacings. The meta-navigation is above the real navigation, but focus of the user is on the real navigation, because the meta-navigation has less "volume"\n\nThere are three different **Densities**, you can use them to change the volume of a specific container or even the entire page based on the use-case, so change the default **density** when:\n\n1. **functional**: e.g. use this for business apps with large tables\n2. **regular**: e.g. use this for normal consumer apps\n3. **expressive**: e.g. use this for marketing apps/ single pages\n\n## How to include\n\nFor **CSS**, **SCSS** and **Tailwind** you don\'t have to include a specific file, just follow the documentation for [foundations](../README.md).\n\n### How to use\n\nWe\'re providing [examples](./examples) to see the differences.\n\nWe set the `data-density` on a container like a `<div>`:\n\n```html\n<div data-density="functional">\n <!-- Everything inside here will be smaller -->\n <DBButton>Test</DBButton>\n <DBInput label="Test" />\n</div>\n```\n\nVariants:\n\n| Variant | CSS/SCSS/Tailwind |\n| :-----------------: | --------------------------- |\n| `functional` | `data-density="functional"` |\n| `regular` (default) | `data-density="regular"` |\n| `expressive` | `data-density="expressive"` |\n\nTo change the **density** of the entire page use:\n\n```html\n<body data-density="functional">\n ...\n</body>\n```\n', "packages/foundations/docs/FontsSizes.md": '# DB Font Sizes\n\nThe font sizes of foundations consist of [two different sets](./overview) (9 sizes each) for general texts (**Body Font Sizes**) and headlines (**Headline Font Sizes**).\nAll sizes of both sets are automatically adjusted by the selected [density](./../densities/readme).\n\n## Body Font Sizes\n\n- By default, the Body Font Size `md` is set to the body tag.\n- These 9 Body Font Sizes can also be explicitly set as classes on elements in order to change their font size.\n\n## Headline Font Sizes\n\n- 9 Headline Sizes are available and are usable by custom properties\n- 6 Headline Sizes are mapped to native headline tags (`h1` to `h6`) by default. Headlines can therefore be used directly.\n\n## Available variants / sizes\n\n`3xl` | `2xl` | `xl` | `lg` | `md` | `sm` | `xs` | `2xs` | `3xs`\n\n## When to use\n\n- Use our provided **Body Font Sizes** to explicitly change the size of text elements like `<p>`, `<span>` etc.\n- Use a **Body Font Size** for a container and all text elements in it (does not affect components font-sizes) .\n- **Headline Font Sizes** can be used to override the default mapping of the `h1` - `h6` tags.\n- _Advanced: use standardised *custom properties* to define `font-size` and `line-height` in your own components._\n\n### Notes\n\n> - Some sizes may stay the same because of screen width or density.\n> - Elements such as `<p>` and all headings (`h1` - `h6`) as well as **DB UX Design System Core components** have font sizes assigned by default so that they can be used without further customisation.\n\n### How to include\n\nFor **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/fonts/classes/all.css";` in your root `.css` file.\n\nFor **SCSS** you can use the `.css` file, or you can use a placeholder by importing `@use "@db-ux/core-foundations/build/styles/fonts"` in your `.scss` file, where you need to reference the specific font size.\nThen you can use e.g. `sm` font-size by extending our SCSS placeholders like this: `@extend %db-overwrite-font-size-sm`.\n\n> **_NOTE:_** Make sure that you import the file after all other **foundation** css files, otherwise you should overwrite a specific `font-size` with the global selector\n\n```css\n/* Global selector */\n* {\n font-size: inherit;\n line-height: inherit;\n}\n```\n\n### How to use\n\nThe following options are recommended for applying **Body Font Sizes**:\n\n- CSS classes\n- CSS `data-`attributes\n- SCSS placeholders\n- Tailwind classes\n\nAll options (except the last one) set `font-size`, `line-height` and some **CSS Custom Properties** for an element. These custom properties are internally required by some components to be displayed correctly.\n\n> All available variants / sizes, [see also the detailed overview](./overview):\n>\n> `3xl` | `2xl` | `xl` | `lg` | `md` | `sm` | `xs` | `2xs` | `3xs`\n\n**Note: We use `XX` here. You should replace it with a size from above.**\n\n| CSS class | CSS data-attribute | SCSS | Tailwind |\n| :---------------------------: | ------------------------- | ---------------------------------------- | ----------------------------- |\n| `class="db-font-size-XX"` | `data-font-size="XX"` | `@extend %db-overwrite-font-size-XX` | `class="db-font-size-XX"` |\n| `class="db-headline-size-XX"` | `data-headline-size="XX"` | `@extend %db-overwrite-headline-size-XX` | `class="db-headline-size-XX"` |\n\n#### Advanced use: CSS Custom Properties\n\n> **_Note:_** The direct use of custom properties to set font sizes should be avoided if possible. If this is unavoidable, existing restrictions should be taken into account.\n\nAll of the above options are available for applying the **Body Font Sizes** to HTML elements within custom components.\nIn some cases it may make sense to set the `font-size` and `line-height` manually in the css.\n\n**Please replace `XX` in the custom-properties with one of the sizes:**\n\n```css\n.text-element {\n font: var(--db-type-body-XX);\n}\n```\n', "packages/foundations/docs/IDESupport.md": '# IDE Support\n\nWe try to support those IDEs:\n\n- [JetBrain](https://www.jetbrains.com/) IDEs (like. IntelliJ IDEA, WebStorm, etc.)\n- [Visual Studio Code (VSCode)](https://code.visualstudio.com/)\n\nMost use cases of the Design System might work in other IDEs as well.\n\n## Autocomplete for CSS classes and CSS Custom Properties (Variables)\n\nYou can enable auto-complete of CSS classes (like e.g. `db-color-cyan`) for `HTML` or `JSX` and CSS Custom Properties (like e.g. `var(--db-bg-basic-level-1-default)`) in `.css` or `.scss` files by including `@db-ux/core-foundations/build/ide`.\n\n> **Note:** The contents of this directory shouldn\'t be included/referenced inside your app. It\'s only serving as a file containing declarations for autocompletion inside your IDE. All values for classes and properties don\'t reflect the real values, and neither does the CSS selector. The correct values my differ based on multiple circumstances like light-/dark-mode or screen-size etc. Therefore, there isn\'t a 1:1 mapping.\n\n### JetBrain IDEs (like. IntelliJ IDEA, WebStorm, etc.)\n\n1. Goto `File/Settings/Languages & Frameworks/JavaScript/Libraries`\n2. Press the `Add` button and write `db-ux` into the "name" input. This name will be shown in the auto-complete popup during coding. You can change the name if you want to. Keep the rest of the settings as default: `Framework type: <Custom>` and `Visibility: Project`.\n3. Next press the \u2795 button below `Visibility` and select `Attach Directories...`\n4. This will open a file manager. Navigate to your current projects `node_modules/@db-ux/core-foundations/build/ide` and select the `ide` folder. Press `OK`.\n5. The folder should be included in the list below the \u2795 button. Press `Apply` on the bottom.\n6. Everything should work now. Close the settings and move to a `html` or `jsx/tsx` file and write `class="db-` as attribute to an element. You should see all `db-*` classes for auto-completion. Furthermore, you can go to a `.css` file and write inside a selector `color: db-`. You should see the autocomplete for CSS Custom Properties. By pressing `ENTER` this will automatically add `var(--db-xxx)`.\n\n### VS Code\n\n1. Install [the CSS Variable Autocomplete extension](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables).\n2. If it doesn\'t exist, create a new file `.vscode/settings.json` in your project\n3. Add this to `settings.json`:\n\n```json settings.json\n{\n "cssVariables.lookupFiles": [\n "**/*.css",\n "**/*.scss",\n "**/*.sass",\n "**/*.less",\n "node_modules/@db-ux/core-foundations/build/ide/db.ide.css"\n ]\n}\n```\n\n4. Go to a `.css` file and write inside a selector `color: db-`. You should see the autocomplete for CSS Custom Properties. By pressing `ENTER` this will automatically add `var(--db-xxx)`.\n\n> **Note:** We couldn\'t find a good extension to work properly with the classes you could try out [the SCSS Everywhere extension](https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion). But we encountered some issues with this one.\n', "packages/foundations/docs/Icons.md": '# Icons\n\n- We use icon fonts as **woff2** files for all our icons.\n- We auto generate these files out of `.svg` files.\n- A lot of our [components](../../components/readme) have an `icon` property you can pass in.\n- Use the CSS Custom Property `--db-icon-color` to overwrite the icons color.\n\n## How to include icons\n\nFor **CSS**, **SCSS** and **Tailwind** you don\'t have to include a specific file, just follow the documentation for [foundations](../README.md).\n\nIf you only want to use the icons from this library and not the full CSS, take a look at the "Edge case: Using only icons without the full CSS" section of this page.\n\n### How to use\n\nWe\'re providing an [overview for all of our icons](./overview).\n\nYou can add an icon before or after a tag, by adding an `data-` attribute to your HTML code, like for example:\n\n| Variant | Data |\n| -------- | :---------------------------------------: |\n| `before` | `data-icon="icon-from-overview"` |\n| `after` | `data-icon-trailing="icon-from-overview"` |\n\n### Icon weight\n\nYou can control the size/weight of icons by using the `data-icon-weight` attribute. Available weights are: `16`, `20`, `24`, `32`, `48`, `64`.\n\n| Position | Data attribute | Example |\n| -------- | :----------------------------: | ------------------------------------------------------------------------- |\n| `before` | `data-icon-weight="24"` | `<span data-icon="user" data-icon-weight="24">Text</span>` |\n| `before` | `data-icon-weight-before="32"` | `<span data-icon="user" data-icon-weight-before="32">Text</span>` |\n| `after` | `data-icon-weight-after="20"` | `<span data-icon-trailing="user" data-icon-weight-after="20">Text</span>` |\n\nIf you need to adjust the size of the icons more precisely, you can also set the `--db-icon-font-size` CSS custom property. Please bear in mind that you need to select an `icon-weight` to go with this icon font size from the available options, as each weight includes more or fewer details depending on the resulting size.\n\n### Icon variant (family)\n\nYou can control the variant/family of icons by using the `data-icon-variant` attribute. Available variants are: `default`, `filled`.\n\n| Position | Data attribute | Example |\n| -------- | :---------------------------------: | ------------------------------------------------------------------------------ |\n| `before` | `data-icon-variant="filled"` | `<span data-icon="user" data-icon-variant="filled">Text</span>` |\n| `before` | `data-icon-variant-before="filled"` | `<span data-icon="user" data-icon-variant-before="filled">Text</span>` |\n| `after` | `data-icon-variant-after="filled"` | `<span data-icon-trailing="user" data-icon-variant-after="filled">Text</span>` |\n\n### Combining weight and variant\n\nYou can combine both weight and variant attributes for precise icon control:\n\n```html\n<!-- 32px filled icon before text -->\n<span data-icon="user" data-icon-weight="32" data-icon-variant="filled"\n >User Profile</span\n>\n\n<!-- 24px default icon after text -->\n<span\n data-icon-trailing="arrow_right"\n data-icon-weight-after="24"\n data-icon-variant-after="default"\n >Next</span\n>\n\n<!-- Different styling for before and after icons -->\n<span\n data-icon="star"\n data-icon-weight-before="20"\n data-icon-variant-before="filled"\n data-icon-trailing="arrow_right"\n data-icon-weight-after="16"\n data-icon-variant-after="default"\n>\n Favorite Item\n</span>\n```\n\n### Icons color\n\nYou could use the CSS Custom Property `--db-icon-color` to overwrite the icons color, be it icon fonts or when using the SVG files directly. Or `--db-icon-pulse-color` for the illustrative icons pulse color.\n\n## Custom Icons\n\nIf you have custom icons and want to use them for foundations and/or in components, you need to generate a **woff2** file.\n\n[More information](./CustomIcons.md)\n\n## Additional functionality\n\n### TypeScript Autocomplete\n\nTo get TypeScript autocomplete you need to include a `*.d.ts` file, where you add some icons to the whitelabel base icons:\n\n```ts\n//\nimport "@db-ux/core-foundations";\nimport { BaseIconTypes } from "@db-ux/core-foundations";\n\ndeclare module "@db-ux/core-foundations" {\n interface OverwriteIcons {\n types: BaseIconTypes | "my-custom-icon1" | "my-custom-icon2";\n }\n}\n```\n\n_**OR:**_ If you use another library which provides some overwrite you can do it like this:\n\n```ts\n//\nimport "@db-ux/core-foundations";\nimport "@db-ux/db-theme-icons";\nimport { IconTypes } from "@db-ux/db-theme-icons";\n\ndeclare module "@db-ux/core-foundations" {\n interface OverwriteIcons {\n types: IconTypes;\n }\n}\n```\n\nYou can combine it as well like this:\n\n```ts\n//\nimport "@db-ux/core-foundations";\nimport "@db-ux/db-theme-icons";\nimport { IconTypes } from "@db-ux/db-theme-icons";\n\ndeclare module "@db-ux/core-foundations" {\n interface OverwriteIcons {\n types: IconTypes | "my-custom-icon1" | "my-custom-icon2";\n }\n}\n```\n\n### Edge case: Using only icons without the full CSS\n\nIf you want to use only the icons from this library without including the complete CSS, you can copy or reference just the icon-related files:\n\n```css\n/* bundler.css */\n@import "@db-ux/core-foundations/build/styles/defaults/default-icons.css";\n@import "@db-ux/db-theme-icons/build/styles/default-font.css";\n@import "@db-ux/db-theme-icons/build/styles/[rollup|webpack|relative].css";\n```\n\nor\n\n```bash\ncp "node_modules/@db-ux/core-foundations/build/styles/defaults/default-icons.css" \u2026;\ncp "node_modules/@db-ux/db-theme-icons/build/styles/default-font.css" \u2026;\ncp "node_modules/@db-ux/db-theme-icons/build/styles/[relative|absolute].css" \u2026;\n```\n\nYou need to copy or reference the correct `.css` file out of your project. There are multiple files depending on the bundler you use:\n\n- `relative.css`: No bundler (as shown in the previous code block)\n- `absolute.css`: No bundler\n- `rollup.css`: vite, rollup\n- `webpack.css`: webpack\n\n**Important for non-bundlers usage:** If you\'re moving `relative.css` CSS file to your project, you need to copy the `fonts` folder from `node_modules/@db-ux/db-theme-icons/build/fonts` to the same directory next to the folder where you store the `relative.css` file (e.g., next to your `styles` folder), because we\'re using the reference to e.g. `src: url("../fonts/default_12/db.woff2")` out of the `relative.css` CSS file.\n', "packages/foundations/docs/Performance.md": '# Performance\n\nIf you need to improve the performance of your application, you can use the following tips:\n\n## Minify with PurgeCSS and CSSO\n\nWhen you use the full bundled `.css` file we provide, you could easily reduce the file size by removing unused CSS classes. This can be done with [PurgeCSS](https://purgecss.com/) and [CSSO](https://github.com/css/csso).\n\nInstall both with:\n\n```shell\nnpm i purgecss csso --save-dev\n```\n\nNext you should create a file, e.g. `purgecss.js` in your project root with the following content:\n\n```javascript\nimport { writeFileSync } from "node:fs";\n\nimport { PurgeCSS } from "purgecss";\nimport { minify } from "csso";\n\nconst distFolder = "dist"; // TODO: Change me if you need another folder\n\nnew PurgeCSS()\n .purge({\n content: [`${distFolder}/**/*.html`, `${distFolder}/**/*.js`],\n css: [`${distFolder}/**/*.css`],\n defaultExtractor: (content) => content.match(/[\\w-/:]+(?<!:)/g) || [],\n variables: true,\n rejectedCss: true,\n safelist: {\n variables: [\n /* TODO: Keep only the densities you need */\n /-functional-/,\n /-regular-/,\n /-expressive-/,\n /* Keep density & all color properties/variables */\n /-default$/,\n /-hovered$/,\n /-pressed$/\n ],\n /* Some components require a safelist */\n greedy: [\n /db-tabs/ // TODO: Add more components if necessary\n ]\n }\n })\n .then((purgeCSSResult) => {\n for (const result of purgeCSSResult) {\n writeFileSync(result.file, minify(result.css).css);\n\n /* Optional: for debugging */\n // writeFileSync(`rejected.css`, result.rejectedCss || "");\n }\n });\n```\n\nYou can run this script with `node purgecss.js` and it will minify your CSS files. You can also add this script to your `package.json` to run after your regular build process:\n\n```json\n{\n "scripts": {\n "postbuild": "node purgecss.js"\n }\n}\n```\n', "packages/foundations/docs/Variables.md": "# Variables\n\n- You use Variables to style your pages and custom components.\n- The Variables are primarily for paddings, margins and all kinds of sizes.\n- All variables are automatically predefined with the correct variable based on the [density](../densities/readme).\n- Based on the density and the selected theme, the \"real\" value behind the variable can change.\n\n## How to include variables\n\nFor **CSS** and **Tailwind** you don't have to include a specific file, just follow the documentation for [foundations](../README.md).\n\nFor **SCSS** you need to use the import `@use \"@db-ux/core-foundations/build/styles/variables\"` in your `.scss` file, where you want to reference the specific variable.\n\n## Simple overview for advanced\n\n| Variable type | T-Shirts \u{1F455} | Base |\n| ---------------------- | ------------------------------------------ | ---- |\n| **spacing fixed** | `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl` | `md` |\n| **spacing responsive** | `xs`, `sm`, `md`, `lg`, `xl` | `md` |\n| **sizing** | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | `md` |\n\n## Spacing fixed\n\n- We use **spacing fixed** to add margins, paddings, gaps, etc.\n- We don't use them for `width` or `height`.\n- Those are the main variables you use all the time to build your page or component.\n\n### How to use\n\nWe use **padding** as an example for this variable.\n\nYou can see a visual preview [spacings fixed examples page](./examples).\n\n| T-Shirt \u{1F455} | CSS | SCSS | Tailwind |\n| :--------: | -------------------------------------- | ------------------------------------------ | ----------- |\n| `3xs` | `padding: var(--db-spacing-fixed-3xs)` | `padding: variables.$db-spacing-fixed-3xs` | `p-fix-3xs` |\n| `2xs` | `padding: var(--db-spacing-fixed-2xs)` | `padding: variables.$db-spacing-fixed-2xs` | `p-fix-2xs` |\n| `xs` | `padding: var(--db-spacing-fixed-xs)` | `padding: variables.$db-spacing-fixed-xs` | `p-fix-xs` |\n| `sm` | `padding: var(--db-spacing-fixed-sm)` | `padding: variables.$db-spacing-fixed-sm` | `p-fix-sm` |\n| `md` | `padding: var(--db-spacing-fixed-md)` | `padding: variables.$db-spacing-fixed-md` | `p-fix-md` |\n| `lg` | `padding: var(--db-spacing-fixed-lg)` | `padding: variables.$db-spacing-fixed-lg` | `p-fix-lg` |\n| `xl` | `padding: var(--db-spacing-fixed-xl)` | `padding: variables.$db-spacing-fixed-xl` | `p-fix-xl` |\n\n## Spacing responsive\n\n- We use **spacing responsive** to add spacings which should change based on the users' device.\n- We don't use them for `width` or `height`.\n- Best example would be the padding for your `main` region which should be larger on a desktop device than mobile.\n- We recommend using `DBSection` from our [components library](../../components/readme). The component handles the responsive Layout for your app, you don't have to struggle which spacing would be the correct one.\n\n### How to use\n\nWe use **padding** as an example for this variable.\n\nYou can see a visual preview [spacings responsive examples page](./examples).\n\n| T-Shirt \u{1F455} | CSS | SCSS | Tailwind |\n| :--------: | ------------------------------------------ | ---------------------------------------------- | ---------- |\n| `xs` | `padding: var(--db-spacing-responsive-xs)` | `padding: variables.$db-spacing-responsive-xs` | `p-res-xs` |\n| `sm` | `padding: var(--db-spacing-responsive-sm)` | `padding: variables.$db-spacing-responsive-sm` | `p-res-sm` |\n| `md` | `padding: var(--db-spacing-responsive-md)` | `padding: variables.$db-spacing-responsive-md` | `p-res-md` |\n| `lg` | `padding: var(--db-spacing-responsive-lg)` | `padding: variables.$db-spacing-responsive-lg` | `p-res-lg` |\n| `xl` | `padding: var(--db-spacing-responsive-xl)` | `padding: variables.$db-spacing-responsive-xl` | `p-res-xl` |\n\n## Sizing\n\n- We use **sizing** to set a fixed height to components (Button, Input, ...).\n- We don't use them for `padding` or `margin` except for absolute elements inside a component with a fixed height.\n- You should use a sizing variable if you want to align a custom component with another component, which has a fixed height.\n\n### How to use\n\nWe use **height** as an example for this variable.\n\nYou can see a visual preview [sizings examples page](./examples).\n\n| T-Shirt \u{1F455} | CSS | SCSS | Tailwind |\n| :--------: | ------------------------------ | ---------------------------------- | ----------- |\n| `xs` | `height: var(--db-sizing-xs)` | `height: variables.$db-sizing-xs` | `h-siz-xs` |\n| `sm` | `height: var(--db-sizing-sm)` | `height: variables.$db-sizing-sm` | `h-siz-sm` |\n| `md` | `height: var(--db-sizing-md)` | `height: variables.$db-sizing-md` | `h-siz-md` |\n| `lg` | `height: var(--db-sizing-lg)` | `height: variables.$db-sizing-lg` | `h-siz-lg` |\n| `xl` | `height: var(--db-sizing-xl)` | `height: variables.$db-sizing-xl` | `h-siz-xl` |\n| `2xl` | `height: var(--db-sizing-2xl)` | `height: variables.$db-sizing-2xl` | `h-siz-2xl` |\n| `3xl` | `height: var(--db-sizing-3xl)` | `height: variables.$db-sizing-3xl` | `h-siz-3xl` |\n" }, migrationGuides: { README: "# Migration from DB UI to DB UX Design System v3\n\nThis folder contains the documentation on how to migrate from DB UI to DB UX Design System v3.\n\nIf you are even already on our current Design System generation, have a look at the [GitHub Releases page](https://github.com/db-ux-design-system/core-web/releases) for the `CHANGELOG.md` file in each Node package for detailed information on changes.\n", "color-migration": "# DB UI \u2192 DB UX Color Migration\n\nUse the **BG** column for `background-color` / `background`. Use the **FG** column for `color` / `border-color` / `outline-color` / `fill` / `stroke` / `caret-color`. For `box-shadow`, use `--db-elevation-*` tokens instead.\n\n| DB UI v2 Token | Background (BG) | Foreground (FG) |\n| --------------------------------- | ------------------------------------------------------ | ---------------------------------------------------- |\n| `db-color-yellow-100` | `--db-yellow-bg-basic-level-2-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-yellow-200` | `--db-yellow-bg-basic-level-3-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-yellow-300` | `--db-yellow-bg-basic-level-3-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-400` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-500` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-600` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-700` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-yellow-800` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-yellow-900` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-orange-100` | `--db-yellow-bg-basic-level-2-default` | `--db-yellow-on-bg-inverted-default` |\n| `db-color-orange-200` | `--db-yellow-bg-basic-level-3-default` | `--db-yellow-on-bg-inverted-default` |\n| `db-color-orange-300` | `--db-yellow-bg-basic-level-3-default` | `--db-warning-on-bg-basic-emphasis-60-default` |\n| `db-color-orange-400` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-orange-500` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-orange-600` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-orange-700` | `--db-warning-bg-inverted-contrast-low-default` | `--db-warning-on-bg-basic-emphasis-70-default` |\n| `db-color-orange-800` | `--db-warning-bg-inverted-contrast-high-default` | `--db-warning-on-bg-basic-emphasis-80-default` |\n| `db-color-red-100` | `--db-brand-bg-basic-level-3-default` | `--db-brand-on-bg-inverted-default` |\n| `db-color-red-200` | `--db-brand-bg-basic-level-3-default` | `--db-burgundy-on-bg-basic-emphasis-60-default` |\n| `db-color-red-300` | `--db-brand-bg-vibrant-default` | `--db-brand-on-bg-basic-emphasis-50-default` |\n| `db-color-red-400` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-red-500` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-red-600` | `--db-brand-bg-inverted-contrast-high-default` | `--db-brand-on-bg-basic-emphasis-80-default` |\n| `db-color-red-700` | `--db-brand-bg-inverted-contrast-high-default` | `--db-brand-on-bg-basic-emphasis-90-default` |\n| `db-color-red-800` | `--db-brand-bg-inverted-contrast-max-default` | `--db-brand-on-bg-basic-emphasis-90-default` |\n| `db-color-burgundy-100` | `--db-burgundy-bg-basic-level-3-default` | `--db-pink-on-bg-inverted-default` |\n| `db-color-burgundy-200` | `--db-pink-bg-basic-level-3-default` | `--db-burgundy-on-bg-basic-emphasis-60-default` |\n| `db-color-burgundy-300` | `--db-burgundy-bg-vibrant-default` | `--db-burgundy-on-bg-basic-emphasis-50-default` |\n| `db-color-burgundy-400` | `--db-burgundy-bg-inverted-contrast-low-default` | `--db-burgundy-on-bg-basic-emphasis-70-default` |\n| `db-color-burgundy-500` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-burgundy-600` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-burgundy-700` | `--db-pink-bg-inverted-contrast-max-default` | `--db-burgundy-on-bg-basic-emphasis-90-default` |\n| `db-color-burgundy-800` | `--db-pink-bg-inverted-contrast-max-default` | `--db-pink-on-bg-basic-emphasis-100-default` |\n| `db-color-pink-100` | `--db-pink-bg-basic-level-3-default` | `--db-pink-on-bg-inverted-default` |\n| `db-color-pink-200` | `--db-pink-bg-basic-level-3-default` | `--db-burgundy-on-bg-basic-emphasis-60-default` |\n| `db-color-pink-300` | `--db-pink-bg-vibrant-default` | `--db-pink-on-bg-basic-emphasis-60-default` |\n| `db-color-pink-400` | `--db-pink-bg-vibrant-default` | `--db-pink-on-bg-basic-emphasis-50-default` |\n| `db-color-pink-500` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-pink-600` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-pink-700` | `--db-pink-bg-inverted-contrast-high-default` | `--db-pink-on-bg-basic-emphasis-80-default` |\n| `db-color-pink-800` | `--db-pink-bg-inverted-contrast-high-default` | `--db-pink-on-bg-basic-emphasis-80-default` |\n| `db-color-violett-100` | `--db-violet-bg-basic-level-3-default` | `--db-violet-on-bg-inverted-default` |\n| `db-color-violett-200` | `--db-violet-bg-basic-level-3-default` | `--db-violet-on-bg-basic-emphasis-60-default` |\n| `db-color-violett-300` | `--db-violet-bg-vibrant-default` | `--db-violet-on-bg-basic-emphasis-50-default` |\n| `db-color-violett-400` | `--db-violet-bg-inverted-contrast-low-default` | `--db-violet-on-bg-basic-emphasis-70-default` |\n| `db-color-violett-500` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-violett-600` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-violett-700` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-90-default` |\n| `db-color-violett-800` | `--db-violet-bg-inverted-contrast-max-default` | `--db-violet-on-bg-basic-emphasis-90-default` |\n| `db-color-blue-100` | `--db-informational-bg-basic-level-3-default` | `--db-informational-on-bg-inverted-default` |\n| `db-color-blue-200` | `--db-informational-bg-basic-level-3-default` | `--db-informational-on-bg-basic-emphasis-60-default` |\n| `db-color-blue-300` | `--db-blue-bg-vibrant-default` | `--db-blue-on-bg-basic-emphasis-50-default` |\n| `db-color-blue-400` | `--db-blue-bg-inverted-contrast-low-default` | `--db-blue-on-bg-basic-emphasis-70-default` |\n| `db-color-blue-500` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-80-default` |\n| `db-color-blue-600` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-90-default` |\n| `db-color-blue-700` | `--db-blue-bg-inverted-contrast-max-default` | `--db-blue-on-bg-basic-emphasis-90-default` |\n| `db-color-blue-800` | `--db-blue-bg-inverted-contrast-max-default` | `--db-blue-on-bg-basic-emphasis-100-default` |\n| `db-color-cyan-100` | `--db-turquoise-bg-basic-level-1-default` | `--db-turquoise-on-bg-inverted-default` |\n| `db-color-cyan-200` | `--db-informational-bg-basic-level-3-default` | `--db-informational-on-bg-basic-emphasis-60-default` |\n| `db-color-cyan-300` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-60-default` |\n| `db-color-cyan-400` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-cyan-500` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-cyan-600` | `--db-informational-bg-inverted-contrast-low-default` | `--db-informational-on-bg-basic-emphasis-70-default` |\n| `db-color-cyan-700` | `--db-informational-bg-inverted-contrast-high-default` | `--db-informational-on-bg-basic-emphasis-80-default` |\n| `db-color-cyan-800` | `--db-informational-bg-inverted-contrast-high-default` | `--db-informational-on-bg-basic-emphasis-90-default` |\n| `db-color-turquoise-100` | `--db-turquoise-bg-basic-level-1-default` | `--db-turquoise-on-bg-inverted-default` |\n| `db-color-turquoise-200` | `--db-turquoise-bg-basic-level-1-default` | `--db-turquoise-on-bg-inverted-default` |\n| `db-color-turquoise-300` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-turquoise-400` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-turquoise-500` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-turquoise-600` | `--db-turquoise-bg-inverted-contrast-low-default` | `--db-turquoise-on-bg-basic-emphasis-70-default` |\n| `db-color-turquoise-700` | `--db-turquoise-bg-inverted-contrast-high-default` | `--db-turquoise-on-bg-basic-emphasis-80-default` |\n| `db-color-turquoise-800` | `--db-turquoise-bg-inverted-contrast-high-default` | `--db-turquoise-on-bg-basic-emphasis-90-default` |\n| `db-color-green-100` | `--db-green-bg-basic-level-1-default` | `--db-green-on-bg-inverted-default` |\n| `db-color-green-200` | `--db-green-bg-basic-level-2-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-green-300` | `--db-green-bg-vibrant-default` | `--db-green-on-bg-basic-emphasis-50-default` |\n| `db-color-green-400` | `--db-green-bg-vibrant-default` | `--db-green-on-bg-basic-emphasis-50-default` |\n| `db-color-green-500` | `--db-green-bg-inverted-contrast-low-default` | `--db-green-on-bg-basic-emphasis-70-default` |\n| `db-color-green-600` | `--db-green-bg-inverted-contrast-high-default` | `--db-green-on-bg-basic-emphasis-80-default` |\n| `db-color-green-700` | `--db-green-bg-inverted-contrast-high-default` | `--db-green-on-bg-basic-emphasis-80-default` |\n| `db-color-green-800` | `--db-green-bg-inverted-contrast-high-default` | `--db-green-on-bg-basic-emphasis-90-default` |\n| `db-color-light-green-100` | `--db-successful-bg-basic-level-1-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-light-green-200` | `--db-successful-bg-basic-level-3-default` | `--db-green-on-bg-basic-emphasis-60-default` |\n| `db-color-light-green-300` | `--db-successful-bg-vibrant-default` | `--db-successful-on-bg-basic-emphasis-60-default` |\n| `db-color-light-green-400` | `--db-successful-bg-vibrant-default` | `--db-successful-on-bg-basic-emphasis-50-default` |\n| `db-color-light-green-500` | `--db-successful-bg-vibrant-default` | `--db-successful-on-bg-basic-emphasis-50-default` |\n| `db-color-light-green-600` | `--db-successful-bg-inverted-contrast-low-default` | `--db-successful-on-bg-basic-emphasis-70-default` |\n| `db-color-light-green-700` | `--db-successful-bg-inverted-contrast-high-default` | `--db-successful-on-bg-basic-emphasis-80-default` |\n| `db-color-light-green-800` | `--db-successful-bg-inverted-contrast-high-default` | `--db-successful-on-bg-basic-emphasis-80-default` |\n| `db-color-warm-gray-100` | `--db-adaptive-bg-basic-level-2-default` | `--db-adaptive-on-bg-inverted-default` |\n| `db-color-warm-gray-200` | `--db-adaptive-bg-basic-level-3-default` | `--db-yellow-on-bg-inverted-default` |\n| `db-color-warm-gray-300` | `--db-adaptive-bg-vibrant-default` | `--db-adaptive-on-bg-basic-emphasis-60-default` |\n| `db-color-warm-gray-400` | `--db-adaptive-bg-vibrant-default` | `--db-adaptive-on-bg-basic-emphasis-50-default` |\n| `db-color-warm-gray-500` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-warm-gray-600` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-warm-gray-700` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-warm-gray-800` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-cool-gray-100` | `--db-adaptive-bg-basic-level-3-default` | `--db-informational-on-bg-inverted-default` |\n| `db-color-cool-gray-200` | `--db-adaptive-bg-basic-level-3-default` | `--db-adaptive-on-bg-basic-emphasis-60-default` |\n| `db-color-cool-gray-300` | `--db-adaptive-bg-vibrant-default` | `--db-adaptive-on-bg-basic-emphasis-50-default` |\n| `db-color-cool-gray-400` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-cool-gray-500` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-80-default` |\n| `db-color-cool-gray-600` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-cool-gray-700` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-cool-gray-800` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-100-default` |\n| `db-color-red` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-white` | `--db-adaptive-bg-basic-level-1-default` | `--db-adaptive-on-bg-inverted-default` |\n| `db-color-black` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-100-default` |\n| `db-color-success` | `--db-successful-bg-inverted-contrast-low-default` | `--db-successful-on-bg-basic-emphasis-70-default` |\n| `db-color-success-small-font` | `--db-successful-bg-inverted-contrast-low-default` | `--db-successful-on-bg-basic-emphasis-70-default` |\n| `db-color-error` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-error-small-font` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-warning` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-warning-small-font` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-informative` | `--db-informational-bg-inverted-contrast-low-default` | `--db-informational-on-bg-basic-emphasis-70-default` |\n| `db-color-informative-small-font` | `--db-informational-bg-inverted-contrast-high-default` | `--db-informational-on-bg-basic-emphasis-80-default` |\n| `db-color-food-drink` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-health` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-things-to-know` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-community-facilities` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-db-services-facilities` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-90-default` |\n| `db-color-shopping` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-arts-culture` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-leisure` | `--db-green-bg-inverted-contrast-low-default` | `--db-green-on-bg-basic-emphasis-70-default` |\n| `db-color-services` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-guidance` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-ice` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-ic` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-80-default` |\n| `db-color-ec` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-80-default` |\n| `db-color-re` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-rb` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-s-bahn` | `--db-green-bg-inverted-contrast-low-default` | `--db-green-on-bg-basic-emphasis-70-default` |\n| `db-color-u-bahn` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-80-default` |\n| `db-color-tram` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-bus` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-intercity-bus` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-call-bus` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-ev-bus` | `--db-pink-bg-inverted-contrast-high-default` | `--db-pink-on-bg-basic-emphasis-80-default` |\n| `db-color-ship` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-airplane` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-carsharing` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-taxi` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-bikesharing` | `--db-brand-bg-inverted-contrast-high-default` | `--db-brand-on-bg-basic-emphasis-80-default` |\n| `db-color-walk` | `--db-adaptive-bg-basic-level-3-default` | `--db-adaptive-on-bg-basic-emphasis-60-default` |\n", "component-migration": '# DB UI to DB UX v3 Component Migration\n\nPrefer JS framework packages: Angular `@db-ux/ngx-core-components` (`<db-button>`), React `@db-ux/react-core-components` (`<DBButton>`), Vue `@db-ux/v-core-components` (`<DBButton>`) in case that the user wants to build a JavaScript application with one of these frameworks. If it\'s still a JavaScript framework, but none of these apply, use `@db-ux/core-components` node package. In all other cases, use the HTML and CSS basis: `@db-ux/core-components`.\n\nLegend: [replacement]=replacement exists, [new]=new component, [removed]=removed, [planned]=planned\n\n## Direct Equivalents\n\n**accordion** \u2014 New component\n\n**accordion-item** \u2014 `cmp-accordion`->`db-accordion-item` (was single item, now multiple items in one accordion). Props: `summary`->`headline`, `emphasis`->[removed], `size`->[removed] (use density). New: `disabled`, `content`.\n\n**badge** \u2014 New component\n\n**brand** \u2014 `cmp-brand`->`db-brand`. All anchor-related props removed (`siteNameLink`,`alt`,`anchorRef`,`anchorTitle`,`anchorRelation`,`src`->[removed]). Wrap with your own `<a>` if needed. New: `hideLogo`.\n\n**button** \u2014 `elm-button`->`db-button`. Sizes: `large`->[removed], `regular`->[removed] (default is `medium`, use density). Variants: `primary`->[removed] (use `outlined`), `brand-primary`->`primary`, `secondary-outline`->`outlined`, `secondary-solid`->`solid`, `tertiary-plain`->`text`. Icons: `iconTrailing`->[removed] (only leading icons), `iconOnly`->`noText`.\n\n**card** \u2014 `cmp-card`->`db-card`. Variant: `header`->[removed], `content`->[removed] (use children/slot), `variant="interactive"` makes it act like a button. Image: `alt`->`imgAlt`, `image`->`imgSrc`. New: `imgWidth`, `imgHeight`. Removed: `illustration`, `uiCoreIllustrationPath`.\n\n**checkbox** \u2014 `elm-checkbox`->`db-checkbox`. Map `input_id` to `id` (for React/Vue), but use `propOverrides` for Web Components and Angular.\n\n**divider** \u2014 New component\n\n**drawer** \u2014 New component\n\n**header** \u2014 `rea-header`->`db-header`. `mobile`->`forceMobile`.\n\n**icon** \u2014 ->`db-icon`. `variant`->[removed] (controlled by `font-family:var(--db-icon-font-family)` and `font-weight:var(--db-icon-font-weight)`).\n\n**infotext** \u2014 New component\n\n**input** \u2014 `elm-input`->`db-input`. Old variants removed: `semitransparent`,`white`,`solid`,`outline`->[removed]. New variants: `adaptive`,`neutral`,`critical`,`informational`,`warning`,`successful`. `description`->`message`. \u26A0\uFE0F Behavior change: In v2, `description` was hidden by default (tooltip/hint). In v3, `message` is ALWAYS visible by default. To restore v2 hidden behavior, set `showMessage={false}` explicitly.\n\n**link** \u2014 `elm-link`->`db-link`. `icon`,`icononly`,`iconVariant`->[removed] (use `content` for arrow icon).\n\n**navigation** \u2014 `cmp-mainnavigation`->`db-navigation`. `data`,`siteName`->[removed] (use children/slot, features moved to `db-header`).\n\n**navigation-item** \u2014 New component\n\n**notification** \u2014 `elm-notification`->`db-notification`. Type: `notification`->`notification`, `status`->[removed] (use variants). New type: `inline`. Variants: `error`->`critical`, `informative`->`informational`, `warning`->`warning`, `success`->`successful`. New: `adaptive`.\n\n**page** \u2014 `rea-page`->`db-page`.\n\n**popover** \u2014 New component\n\n**radio** \u2014 `elm-radio`->`db-radio`. Map `input_id` to `id` (for React/Vue), but use `propOverrides` for Web Components and Angular.\n\n**section** \u2014 New component\n\n**select** \u2014 `elm-select`->`db-select`. `multiple`->[removed], `size`->[removed].\n\n**stack** \u2014 New component\n\n**switch** \u2014 `elm-toggle`->`db-switch`. `htmlid`->`id`.\n\n**tab-item** \u2014 `cmp-db-tab`->`db-tab-item`. `name`->[removed] (handled by parent `db-tabs`).\n\n**tab-list** \u2014 New component\n\n**tab-panel** \u2014 New component\n\n**tabs** \u2014 `cmp-tab-bar`->`db-tabs`.\n\n**tag** \u2014 `elm-tag`->`db-tag`. Chip+tag merged into tag only. Interactive tags: wrap `db-button`,`db-link`,`db-checkbox`,`db-radio` inside `db-tag`. `small`->[removed] (use density, `type="strong"` for emphasis). Variants: `poi-*`->[removed], `track`->[removed], `error`->`critical`, `informative`->`informational`, `success`->`successful`. `iconAfter`->[removed] (only leading icons).\n\n**textarea** \u2014 `elm-textarea`->`db-textarea`. Old variants removed: `semitransparent`,`white`,`solid`,`outline`->[removed]. New: `adaptive`,`critical`,`informational`,`warning`,`successful`. `description`->`message`. \u26A0\uFE0F Behavior change: In v2, `description` was hidden by default (tooltip/hint). In v3, `message` is ALWAYS visible by default. To restore v2 hidden behavior, set `showMessage={false}` explicitly.\n\n**tooltip** \u2014 New component\n\n## No Direct Equivalent\n\n| Old | Status | Replacement |\n| ---------------------- | :-----------: | ----------------------------------------------------------------- |\n| `rea-main` | [removed] | `db-page` (includes `<main>`) |\n| `rea-grid` | [removed] | CSS Grid or `db-stack` |\n| `rea-footer` | [planned] | Semantic `<footer>` + `db-link`, planned Q4/2025 |\n| `elm-headline` | [replacement] | Semantic headings + `db-infotext` for subtitles |\n| `elm-headline` (pulse) | [removed] | Heading + CSS animation |\n| `elm-loadingindicator` | [planned] | Planned Q4/2025, use CSS spinner + `aria-live` |\n| `elm-progress` | [planned] | Planned Q4/2025, use `<progress>` |\n| `elm-chip` | [replacement] | `db-tag` with `db-button`/`db-checkbox`/`db-radio` inside |\n| `cmp-breadcrumb` | [planned] | Planned Q4/2025, use `db-link` in `<nav aria-label="Breadcrumb">` |\n| `cmp-pagination` | [planned] | Planned Q4/2025, use `db-button` with ARIA labels |\n| `cmp-table` | [planned] | Under research, use semantic `<table>` |\n| `cmp-sidenavi` | [replacement] | `db-navigation` inside `db-drawer` |\n| `cmp-dialog` | [replacement] | `db-drawer` or custom modal, planned Q4/2025 |\n\n## Key Migration Examples\n\n`rea-main` -> `<db-page>Content</db-page>`\n\n`rea-grid` -> CSS Grid with `gap: var(--db-spacing-fixed-md)`\n\n`elm-chip` -> `<db-tag><db-button variant="ghost">Text</db-button></db-tag>`\n\n`elm-headline` -> `<h1>Title</h1>` + `<db-infotext>Subtitle</db-infotext>`\n\n`cmp-sidenavi` -> `<db-drawer><db-navigation><db-navigation-item><db-link href="/page">Item</db-link></db-navigation-item></db-navigation></db-drawer>`\n\n## A11y for Custom Solutions\n\nUse semantic HTML, ARIA labels/roles/states, keyboard navigation, focus management, screen reader support.\n\nTemporary patterns: loading -> `<div role="status"><span class="visually-hidden">Loading...</span></div>`, progress -> `<progress value="70" max="100" aria-label="Upload progress: 70%">`, breadcrumb -> `<nav aria-label="Breadcrumb"><ol>...</ol></nav>`.\n', "general-migration": '# DB UI \u2192 DB UX General Migration\n\nScan files: `.css`, `.scss`, `.html`, `.tsx`, `.jsx`, `.ts`, `.js`, `.vue`\n\n## Typography\n\nReplace hardcoded `font-size` with `font` shorthand using `--db-type-*` tokens. Use `font:` not `font-size:`. Remove redundant `line-height`/`font-weight`/`font-family` \u2014 the token sets all four.\n\nBody tokens: `--db-type-body-3xs` through `--db-type-body-3xl`. Headline tokens: `--db-type-headline-3xs` through `--db-type-headline-3xl`. SCSS: `$db-type-body-md`, etc.\n\nSize mapping: `10px`/`0.625rem`\u2192`body-3xs`, `12px`/`0.75rem`\u2192`body-2xs`, `14px`/`0.875rem`/`small`\u2192`body-sm`, `16px`/`1rem`/`medium`\u2192`body-md`, `18px`/`1.125rem`\u2192`body-lg`, `20px`/`1.25rem`/`large`\u2192`body-xl`, `24px`/`1.5rem`\u2192`headline-sm`, `32px`/`2rem`\u2192`headline-md`, `40px`/`2.5rem`\u2192`headline-lg`, `48px`/`3rem`\u2192`headline-xl`.\n\n## Colors\n\nSee `db-ui-color-migration.md` for full mapping. Token names are bare (no `var(--)` / `$`). CSS: `var(--token)`, SCSS: `$token`.\n\nBG column for: `background-color`, `background`. FG column for: `color`, `border-color`, `border`, `outline-color`, `text-decoration-color`, `fill`, `stroke`, `caret-color`, `column-rule-color`.\n\nNEVER use `opacity` to simulate lighter colors. NEVER use `--db-elevation-*` as color values.\n\n## box-shadow \u2192 elevation tokens\n\nDo NOT use color tokens for `box-shadow`. Use: `--db-elevation-sm` (subtle/pressed), `--db-elevation-md` (default/cards), `--db-elevation-lg` (prominent/hover). SCSS: `$db-elevation-sm`/`md`/`lg`. Interactive: `data-interactive="elevation"` or `.db-interactive-elevation` (auto `md`\u2192`lg` hover\u2192`sm` active).\n\n## Inline Styles\n\nReplace all inline `style` attributes, as they bypass theming, density, and dark mode. Follow this strict priority: 1) use component props, 2) use external CSS/SCSS classes with tokens, 3) use inline styles with tokens only as an absolute last resort.\n\n## Required CSS Imports & Token Architecture\n\nv3 uses a layered CSS architecture. All four imports are required in this exact order:\n\n```tsx\n// main.tsx \u2014 order matters!\nimport "@db-ux/core-foundations/build/styles/theme/rollup.css"; // Layer 1: Palette tokens (@property definitions, e.g. #16181b)\nimport "@db-ux/core-foundations/build/styles/bundle.css"; // Layer 2: Semantic tokens (light-dark mappings on :root)\nimport "@db-ux/core-foundations/build/styles/icons/rollup.css"; // Layer 3: Icon fonts (@font-face declarations)\nimport "@db-ux/core-components/build/styles/rollup.css"; // Layer 4: Component styling\n```\n\n**Layer 1 \u2013 Palette tokens:** Defines raw color values as CSS `@property` registrations. These are the primitive building blocks (hex values, numeric scales).\n\n**Layer 2 \u2013 Semantic tokens:** Maps palette tokens to semantic meanings using `light-dark()` on `:root`. Provides spacing, typography, elevation, and color intent tokens.\n\n**Layer 3 \u2013 Icon fonts:** Registers `@font-face` declarations for the icon font. Without this, icon names render as plain text instead of symbols.\n\n**Layer 4 \u2013 Component styling:** The actual component CSS rules. Depends on all three foundation layers above.\n\nMissing any layer causes specific failures:\n\n- No Layer 1/2 \u2192 components render without colors/spacing (broken layout)\n- No Layer 3 \u2192 icons display as text strings\n- No Layer 4 \u2192 components have no styling at all\n\n## Spacing\n\nReplace hardcoded `px`/`rem` in `padding`, `margin`, `gap`, `inset`, `top`/`right`/`bottom`/`left` with `--db-spacing-fixed-*` tokens. For responsive spacing use `--db-spacing-responsive-*`.\n\nFixed tokens (regular density): `3xs`=2px, `2xs`=4px, `xs`=8px, `sm`=12px, `md`=16px, `lg`=24px, `xl`=32px, `2xl`=48px, `3xl`=80px. Values adapt to active density automatically. SCSS: `$db-spacing-fixed-md`, etc.\n', "icon-migration": "# DB UI \u2192 DB UX Icon Migration\n\n<!-- cSpell:ignore steppless -->\n\n`account`\u2192`person`, `add`\u2192`plus`, `add-circle`\u2192`add_option`, `add-link`\u2192`link_chain`, `alarm`\u2192`alarm_clock`, `alarm-add`\u2192`alarm_clock_plus`, `alert`\u2192`bell`, `alert-off`\u2192`bell_disabled`, `artificial-intelligence`\u2192`artificial_intelligence`, `attachment`\u2192`paper_clip`, `augmented-reality`\u2192`augmented_reality`, `block`\u2192`block`, `bookmark`\u2192`bookmark`, `bug`\u2192`bug`, `build`\u2192`wrench`, `calendar`\u2192`calendar`, `camera`\u2192`camera`, `cash`\u2192`cash`, `check-circle`\u2192`check_circle`, `cloud`\u2192`cloud`, `cloud-download`\u2192`cloud_download`, `cloud-upload`\u2192`cloud_upload`, `copy`\u2192`copy`, `credit-card`\u2192`credit_card`, `dashboard`\u2192`speedometer`, `delete`\u2192`bin`, `discount`\u2192`discount`, `document`\u2192`document`, `document-check`\u2192`document_check`, `document-cross`\u2192`document_cross`, `done`\u2192`check`, `download`\u2192`download`, `drag-and-drop`\u2192`dots_drag_and_drop`, `edit`\u2192`pen`, `euro-sign`\u2192`euro_sign`, `face-delighted`\u2192`face_delighted`, `face-disappointed`\u2192`face_disappointed`, `face-neutral`\u2192`face_neutral`, `face-sad`\u2192`face_sad`, `face-smiling`\u2192`face_smiling`, `filter`\u2192`sliders_horizontal`, `fingerprint`\u2192`fingerprint`, `folder`\u2192`folder`, `folder-open`\u2192`folder_open`, `generic-card`\u2192`generic_card`, `giftcard`\u2192`gift`, `hearing`\u2192`ear`, `hearing-disabled`\u2192`ear_disabled`, `heart`\u2192`heart`, `help`\u2192`question_mark_circle`, `id-card`\u2192`id_card`, `image`\u2192`image`, `info`\u2192`information_circle`, `key`\u2192`key`, `legal`\u2192`paragraph_mark`, `lightbulb`\u2192`light_bulb`, `lock-close`\u2192`lock_closed`, `lock-open`\u2192`lock_open`, `log-out`\u2192`log_out`, `logbook`\u2192`notebook`, `minus`\u2192`minus`, `piggybank`\u2192`piggy_bank`, `pin`\u2192`pin`, `print`\u2192`printer`, `pulse-wave`\u2192`pulse_wave`, `push-button`\u2192`finger_pushing_button`, `remove`\u2192`minus`, `resize`\u2192`resize`, `resize-handle-corner`\u2192`resize_handle_corner`, `save`\u2192`save`, `schedule`\u2192`clock`, `search`\u2192`magnifying_glass`, `send`\u2192`paper_plane`, `sepa`\u2192`sepa`, `settings`\u2192`gear_wheel`, `share`\u2192`share`, `shopping-bag`\u2192`shopping_bag`, `shopping-basket`\u2192`shopping_basket`, `shopping-basket-disabled`\u2192`shopping_basket_disabled`, `shopping-cart`\u2192`shopping_cart`, `shopping-cart-disabled`\u2192`shopping_cart_disabled`, `sort-down`\u2192`sort_down`, `sort-up`\u2192`sort_up`, `star`\u2192`star`, `swap-horizontal`\u2192`arrows_horizontal`, `swap-vertical`\u2192`arrows_vertical`, `thumb-up`\u2192`thumbs_up`, `thumb-up-down`\u2192`thumbs_down`, `translation`\u2192`translation`, `undo`\u2192`undo`, `upload`\u2192`upload`, `visibility-off`\u2192`eye_disabled`, `visibility`\u2192`eye`, `voucher`\u2192`voucher`, `website`\u2192`globe`, `zoom-in`\u2192`zoom_in`, `zoom-out`\u2192`zoom_out`, `clapperboard`\u2192`clapperboard`, `fast-backward`\u2192`fast_backward`, `fast-backward-10`\u2192`fast_backward_10`, `fast-backward-30`\u2192`fast_backward_30`, `fast-backward-empty`\u2192`fast_backward_empty`, `fast-forward`\u2192`fast_forward`, `fast-forward-10`\u2192`fast_forward_10`, `fast-forward-30`\u2192`fast_forward_30`, `fast-forward-empty`\u2192`fast_forward_empty`, `microphone`\u2192`microphone`, `pause`\u2192`pause`, `play`\u2192`play`, `skip-backward`\u2192`skip_backward`, `skip-forward`\u2192`skip_forward`, `stop`\u2192`stop`, `subtitles`\u2192`subtitles`, `volume-down`\u2192`volume_down`, `volume-mute`\u2192`volume_silent`, `volume-off`\u2192`volume_disabled`, `volume-up`\u2192`volume_up`, `logo`\u2192`db`, `call`\u2192`telephone`, `chat`\u2192`chat`, `conversation`\u2192`speech_bubbles`, `fax`\u2192`fax_machine`, `feedback`\u2192`speech_bubble_exclamation_mark`, `mail`\u2192`envelope`, `mobile-off`\u2192`mobile_phone_disabled`, `mobile-phone`\u2192`mobile_phone`, `question`\u2192`speech_bubble_question_mark`, `receive-item`\u2192`receive_item`, `share-item`\u2192`share_item`, `wifi`\u2192`wifi`, `wifi-off`\u2192`wifi_disabled`, `mask`\u2192`mask`, `playground`\u2192`toys`, `restricted-mobility-toilet`\u2192`restricted_mobility_toilet`, `shower`\u2192`shower`, `shower-men`\u2192`shower_men`, `shower-women`\u2192`shower_women`, `sink`\u2192`hand_washing`, `wc`\u2192`toilets`, `wc-men`\u2192`toilet_men`, `wc-sign`\u2192`wc_sign`, `wc-women`\u2192`toilet_women`, `air-condition`\u2192`air_condition`, `buggy`\u2192`stroller`, `clothing-hanger`\u2192`clothes_hanger`, `day`\u2192`sun`, `dog`\u2192`dog`, `entry-aid`\u2192`vehicle_entry_aid`, `environmental-mobility-check`\u2192`mobility_service_meeting_point`, `hydrogen`\u2192`water_drop`, `iceportal`\u2192`ice_portal`, `luggage-compartment`\u2192`luggage_compartment`, `luggage-rack`\u2192`luggage_rack`, `marketplace`\u2192`market`, `medical`\u2192`medical_cross`, `night`\u2192`moon`, `no-smoking`\u2192`cigarette_disabled`, `person-with-cane`\u2192`person_with_blind_cane`, `person-with-rollator`\u2192`person_with_rollator`, `platform`\u2192`platform`, `power-outlet`\u2192`power_socket`, `regioguide`\u2192`regio_guide`, `reservation`\u2192`reservation`, `standing-room`\u2192`standing_room`, `steppless-entry`\u2192`stepless_entry`, `support-dog`\u2192`support_dog`, `breakfast`\u2192`breakfast`, `coffee-cup`\u2192`cup`, `drink`\u2192`beverage`, `restaurant`\u2192`knife_and_fork`, `database`\u2192`database`, `1st-class`\u2192`first_class`, `2nd-class`\u2192`second_class`, `alternative-connection`\u2192`alternative_connection`, `booking`\u2192`booking`, `capacity-indicator`\u2192`capacity_indicator_moderate`, `capacity-indicator-fully-booked`\u2192`capacity_indicator_fully_booked`, `capacity-indicator-high`\u2192`capacity_indicator_high`, `capacity-indicator-low`\u2192`capacity_indicator_low`, `destination`\u2192`map_pin`, `intermediary-stop`\u2192`circle_small`, `mixed-class`\u2192`mixed_class`, `monochrome-capacity-indicator-high`\u2192`capacity_indicator_high`, `monochrome-capacity-indicator-low`\u2192`capacity_indicator_low`, `monochrome-capacity-indicator-moderate`\u2192`capacity_indicator_moderate`, `round-trip`\u2192`round_trip`, `single-trip`\u2192`single_trip`, `start`\u2192`start`, `compass`\u2192`compass`, `gps`\u2192`location_arrow`, `gps-north`\u2192`location_arrow_north`, `home`\u2192`house`, `map`\u2192`map`, `navigation-straight`\u2192`navigation_straight`, `navigation-to-left`\u2192`navigation_to_left`, `navigation-to-right`\u2192`navigation_to_right`, `navigation-u-turn`\u2192`navigation_u_turn`, `parking`\u2192`parking`, `place`\u2192`location_pin`, `set-position`\u2192`location_crosshairs`, `station`\u2192`station`, `stop-sign`\u2192`road_sign`, `train-station`\u2192`train_station`, `arrow-back`\u2192`arrow_left`, `arrow-down`\u2192`arrow_down`, `arrow-forward`\u2192`arrow_right`, `arrow-up`\u2192`arrow_up`, `cancel`\u2192`cross`, `chevron-left`\u2192`chevron_left`, `chevron-right`\u2192`chevron_right`, `close`\u2192`cross`, `expand-less`\u2192`chevron_up`, `expand-more`\u2192`chevron_down`, `fullscreen`\u2192`fullscreen`, `fullscreen-exit`\u2192`fullscreen_exit`, `grid-view`\u2192`grid`, `link`\u2192`link_chain`, `link-external`\u2192`arrow_up_right`, `list`\u2192`list`, `menu`\u2192`menu`, `more-horizontal`\u2192`more_horizontal`, `more-vertical`\u2192`more_vertical`, `refresh`\u2192`circular_arrows`, `error`\u2192`exclamation_mark_circle`, `notify`\u2192`bell`, `notify-cutoff`\u2192`bell`, `warning`\u2192`exclamation_mark_triangle`, `aisle`\u2192`aisle`, `aisle-not-available`\u2192`aisle_not_available`, `bed`\u2192`bed`, `childrens-compartment`\u2192`childrens_compartment`, `couchette`\u2192`couchette`, `elderly`\u2192`person_with_wheelchair`, `handicapped`\u2192`person_with_wheelchair`, `parent-child-compartment`\u2192`family_compartment`, `priority`\u2192`traveler_with_reduced_mobility`, `quiet-zone`\u2192`quiet_zone`, `table`\u2192`seat_table`, `traveler-with-reduced-mobility`\u2192`traveler_with_reduced_mobility`, `window`\u2192`seat_window`, `bahnbonus`\u2192`bahnbonus`, `bahnbonus-card`\u2192`bahnbonus_card`, `bahncard`\u2192`bahncard`, `best-price`\u2192`crown`, `commuter-ticket`\u2192`ticket_commuter`, `komfort-check-in`\u2192`komfort_check_in`, `komfort-check-in-check`\u2192`komfort_check_in_check`, `komfort-check-in-circle`\u2192`komfort_check_in_circle`, `multiple-cards`\u2192`bahncards`, `multiple-passenger`\u2192`persons`, `my-travel`\u2192`my_journey`, `outward-journey`\u2192`outward_journey`, `qr-code`\u2192`qr_code`, `qr-code-scan`\u2192`qr_code_scan`, `return-journey`\u2192`return_journey`, `ticket`\u2192`ticket`, `ticket-discount`\u2192`ticket_discount`, `ticket-subscription`\u2192`ticket_subscription`, `ticket-multiple`\u2192`tickets`, `time-outward-journey`\u2192`time_outward_journey`, `time-return-journey`\u2192`time_return_journey`, `timetable`\u2192`timetable`, `travel-insurance`\u2192`shield_check`, `airplane`\u2192`airplane`, `bicycle`\u2192`bike`, `bicycle-trailer`\u2192`bike_trailer`, `call-a-bike`\u2192`call_a_bike`, `car`\u2192`car`, `car-sequence`\u2192`coach_sequence`, `carsharing`\u2192`car_sharing`, `electric-locomotive`\u2192`electric_locomotive`, `electric-scooter`\u2192`electric_scooter`, `ev-bus`\u2192`bus`, `ev-car`\u2192`electric_car`, `ev-train`\u2192`train`, `ferry`\u2192`ship`, `handcart`\u2192`handcart`, `ice`\u2192`train`, `ice-side-view`\u2192`ice_side_view`, `intercity-train`\u2192`ic_and_ec`, `local-bus`\u2192`bus`, `local-train`\u2192`local_train`, `long-distance-bus`\u2192`long_distance_bus`, `rail-and-fly`\u2192`rail_and_fly`, `railroad-car`\u2192`coach`, `s-bahn`\u2192`s_bahn`, `scooter`\u2192`scooter`, `sev`\u2192`replacement_service`, `speedboat`\u2192`boat`, `sprinter`\u2192`sprinter`, `subway`\u2192`subway`, `taxi`\u2192`taxi`, `train-and-car`\u2192`train_and_car`, `tram`\u2192`tram`, `walking`\u2192`pedestrian`, `walking-fast`\u2192`walking_fast`\n" } };
42397
42792
 
42398
42793
  // src/utils/manifest.ts
42399
42794
  var _manifest = null;