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

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 +446 -36
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -23596,7 +23596,7 @@ var EMPTY_COMPLETION_RESULT = {
23596
23596
  // package.json
23597
23597
  var package_default = {
23598
23598
  name: "@db-ux/mcp-server",
23599
- version: "4.6.1",
23599
+ version: "4.7.0",
23600
23600
  type: "module",
23601
23601
  description: "MCP server for DB UX Design System \u2013 gives LLMs access to UI components and code examples",
23602
23602
  repository: {
@@ -23643,7 +23643,7 @@ var package_default = {
23643
23643
  "npm-run-all2": "8.0.4",
23644
23644
  tsx: "4.21.0",
23645
23645
  typescript: "5.9.3",
23646
- vitest: "4.1.3"
23646
+ vitest: "4.1.5"
23647
23647
  },
23648
23648
  publishConfig: {
23649
23649
  registry: "https://registry.npmjs.org/",
@@ -23747,7 +23747,7 @@ function resolveSafePath(baseDir, userPath) {
23747
23747
  }
23748
23748
 
23749
23749
  // src/manifest.json
23750
- var manifest_default = { icons: ["add_option", "air_condition", "air_condition_disabled", "airplane", "aisle", "aisle_not_available", "alarm_clock", "alarm_clock_plus", "alternative_connection", "arrow_down", "arrow_left", "arrow_right", "arrow_up", "arrow_up_right", "arrows_horizontal", "arrows_vertical", "artificial_intelligence", "artificial_intelligence_agent", "artificial_intelligence_text", "audio_description", "augmented_reality", "bahnbonus", "bahnbonus_card", "bahncard", "bahncards", "bar_chart", "battery", "battery_empty", "battery_full", "battery_half_empty", "bed", "bell", "bell_disabled", "beverage", "bicycle_reservation_required", "bicycle_space_not_determined", "bicycle_transport_not_available", "bike", "bike_trailer", "bin", "block", "boat", "booking", "bookmark", "brand", "breakfast", "bug", "bus", "calendar", "call_a_bike", "call_in_bus", "camera", "capacity_indicator_fully_booked", "capacity_indicator_high", "capacity_indicator_low", "capacity_indicator_moderate", "car", "car_sharing", "cargo_bike", "cash", "changeover", "chat", "check", "check_circle", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "childrens_compartment", "childrens_compartment_disabled", "cigarette_disabled", "circle", "circle_small", "circular_arrows", "circular_arrows_with_plus", "clapperboard", "clock", "clothes_hanger", "cloud", "cloud_download", "cloud_upload", "coach", "coach_sequence", "compass", "computer", "connection_path", "construction_sign", "copy", "couchette", "counter_clockwise_clock", "credit_card", "cross", "cross_circle", "crown", "cup", "database", "db", "db_wheelchair", "detachable_wheelchair", "devices", "discount", "discount_card", "discount_cards", "document", "document_check", "document_cross", "dog", "dots_drag_and_drop", "double_chevron_down", "double_chevron_left", "double_chevron_right", "double_chevron_up", "download", "ear", "ear_disabled", "electric_bike", "electric_car", "electric_cargo_bike", "electric_locomotive", "electric_scooter", "electric_wheelchair", "envelope", "euro_sign", "exclamation_mark_circle", "exclamation_mark_triangle", "eye", "eye_disabled", "face_delighted", "face_disappointed", "face_neutral", "face_sad", "face_smiling", "family_compartment", "family_compartment_disabled", "fast_backward", "fast_backward_10", "fast_backward_30", "fast_backward_empty", "fast_forward", "fast_forward_10", "fast_forward_30", "fast_forward_empty", "fax_machine", "finger_pushing_button", "fingerprint", "first_class", "folder", "folder_open", "fullscreen", "fullscreen_exit", "funnel", "gear_wheel", "generic_card", "gift", "globe", "grid", "hand_washing", "handcart", "head", "heart", "house", "ic_and_ec", "ice_portal", "ice_side_view", "id_card", "image", "information_circle", "key", "knife_and_fork", "knife_and_fork_disabled", "komfort_check_in", "komfort_check_in_check", "komfort_check_in_circle", "laptop", "leaf", "light_bulb", "line_chart", "link_chain", "list", "local_train", "location_arrow", "location_arrow_north", "location_crosshairs", "location_pin", "lock_closed", "lock_open", "log_in", "log_out", "long_distance_bus", "luggage_compartment", "luggage_rack", "magnifying_glass", "map", "map_pin", "market", "mask", "medical_cross", "megaphone", "menu", "microphone", "minus", "mixed_class", "mixed_class_reversed", "mobile_phone", "mobile_phone_disabled", "mobility_service_meeting_point", "monitor", "moon", "more_horizontal", "more_vertical", "my_journey", "navigation_straight", "navigation_to_left", "navigation_to_right", "navigation_u_turn", "nfc", "no_driving_zone", "no_parking", "notebook", "outward_journey", "paper_clip", "paper_plane", "paragraph_mark", "parking", "pause", "pedestrian", "pen", "person", "person_with_blind_cane", "person_with_rollator", "person_with_wheelchair", "persons", "pie_chart", "piggy_bank", "pin", "platform", "play", "plus", "power_socket", "printer", "profile_card", "pulse_wave", "qr_code", "qr_code_scan", "question_mark_circle", "quiet_zone", "quiet_zone_disabled", "rail_and_fly", "receive_item", "redo", "regio_guide", "reha_buggy", "remove_option", "replacement_service", "reservation", "resize", "resize_handle_corner", "restricted_mobility_toilet", "restricted_mobility_toilet_disabled", "return_journey", "road_sign", "round_trip", "s_bahn", "save", "scooter", "seat_not_determined", "seat_reservation_required", "seat_table", "seat_window", "second_class", "sepa", "share", "share_item", "shield", "shield_check", "ship", "shopping_bag", "shopping_basket", "shopping_basket_disabled", "shopping_cart", "shopping_cart_disabled", "shower", "shower_men", "shower_women", "single_trip", "skip_backward", "skip_forward", "sliders_horizontal", "snow_flake", "sort_down", "sort_up", "special_bike", "speech_bubble", "speech_bubble_exclamation_mark", "speech_bubble_question_mark", "speech_bubbles", "speedometer", "sprinter", "standing_room", "star", "start", "station", "stepless_entry", "stop", "stroller", "stroller_disabled", "subtitles", "subway", "suitcase", "sun", "support_dog", "tablet", "taxi", "telephone", "thumbs_down", "thumbs_up", "ticket", "ticket_commuter", "ticket_discount", "ticket_horizontal", "ticket_subscription", "tickets", "time_outward_journey", "time_return_journey", "timetable", "toilet_men", "toilet_women", "toilets", "toys", "toys_disabled", "train", "train_and_car", "train_station", "tram", "translation", "traveler_with_reduced_mobility", "undo", "unlink_chain", "upload", "vehicle_entry_aid", "vehicle_entry_aid_disabled", "volume_disabled", "volume_down", "volume_silent", "volume_up", "voucher", "walking_fast", "water_drop", "wc_sign", "wc_sign_disabled", "wheelchair_reservation_required", "wheelchair_space_not_available", "wheelchair_space_not_determined", "wifi", "wifi_disabled", "wrench", "x_placeholder", "zoom_in", "zoom_out"], components: { accordion: { props: `import { GlobalProps, InitializedState } from '../../shared/model';
23750
+ var manifest_default = { icons: ["add_option", "air_condition", "air_condition_disabled", "airplane", "aisle", "aisle_not_available", "alarm_clock", "alarm_clock_plus", "alternative_connection", "arrow_down", "arrow_left", "arrow_right", "arrow_up", "arrow_up_right", "arrows_horizontal", "arrows_vertical", "artificial_intelligence", "artificial_intelligence_agent", "artificial_intelligence_text", "audio_description", "augmented_reality", "bahnbonus", "bahnbonus_card", "bahncard", "bahncards", "bar_chart", "battery", "battery_empty", "battery_full", "battery_half_empty", "bed", "bell", "bell_disabled", "beverage", "bicycle_reservation_required", "bicycle_space_not_determined", "bicycle_transport_not_available", "bike", "bike_trailer", "bin", "block", "boat", "booking", "bookmark", "bordlift", "brand", "breakfast", "bug", "bus", "calendar", "call_a_bike", "call_in_bus", "camera", "capacity_indicator_fully_booked", "capacity_indicator_high", "capacity_indicator_low", "capacity_indicator_moderate", "car", "car_sharing", "cargo_bike", "cash", "changeover", "chat", "check", "check_circle", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "childrens_compartment", "childrens_compartment_disabled", "cigarette_disabled", "circle", "circle_small", "circular_arrows", "circular_arrows_with_plus", "clapperboard", "clock", "clothes_hanger", "cloud", "cloud_download", "cloud_upload", "coach", "coach_sequence", "compass", "computer", "connection_path", "construction_sign", "copy", "couchette", "counter_clockwise_clock", "credit_card", "cross", "cross_circle", "crown", "cup", "database", "db", "db_wheelchair", "detachable_wheelchair", "devices", "discount", "discount_card", "discount_cards", "document", "document_check", "document_cross", "dog", "dots_drag_and_drop", "double_chevron_down", "double_chevron_left", "double_chevron_right", "double_chevron_up", "download", "ear", "ear_disabled", "electric_bike", "electric_car", "electric_cargo_bike", "electric_locomotive", "electric_scooter", "electric_wheelchair", "envelope", "euro_sign", "exclamation_mark_circle", "exclamation_mark_triangle", "eye", "eye_disabled", "face_delighted", "face_disappointed", "face_neutral", "face_sad", "face_smiling", "family_compartment", "family_compartment_disabled", "fast_backward", "fast_backward_10", "fast_backward_30", "fast_backward_empty", "fast_forward", "fast_forward_10", "fast_forward_30", "fast_forward_empty", "fax_machine", "finger_pushing_button", "fingerprint", "first_class", "flashlight", "folder", "folder_open", "fullscreen", "fullscreen_exit", "funnel", "gear_wheel", "generic_card", "gift", "globe", "grid", "hand_washing", "handcart", "head", "heart", "house", "ic_and_ec", "ice_portal", "ice_side_view", "id_card", "image", "information_circle", "key", "knife_and_fork", "knife_and_fork_disabled", "komfort_check_in", "komfort_check_in_check", "komfort_check_in_circle", "laptop", "leaf", "light_bulb", "line_chart", "link_chain", "list", "local_train", "location_arrow", "location_arrow_north", "location_crosshairs", "location_pin", "lock_closed", "lock_open", "log_in", "log_out", "long_distance_bus", "luggage_compartment", "luggage_rack", "magnifying_glass", "map", "map_pin", "market", "mask", "medical_cross", "megaphone", "menu", "microphone", "minus", "mixed_class", "mixed_class_reversed", "mobile_phone", "mobile_phone_disabled", "mobility_service_meeting_point", "monitor", "moon", "more_horizontal", "more_vertical", "my_journey", "navigation_straight", "navigation_to_left", "navigation_to_right", "navigation_u_turn", "nfc", "no_driving_zone", "no_parking", "notebook", "outward_journey", "paper_clip", "paper_plane", "paragraph_mark", "parking", "pause", "pedestrian", "pen", "person", "person_with_blind_cane", "person_with_rollator", "person_with_wheelchair", "persons", "pie_chart", "piggy_bank", "pin", "platform", "play", "plus", "power_socket", "printer", "profile_card", "pulse_wave", "qr_code", "qr_code_scan", "question_mark_circle", "quiet_zone", "quiet_zone_disabled", "rail_and_fly", "receive_item", "redo", "regio_guide", "reha_buggy", "remove_option", "replacement_service", "reservation", "resize", "resize_handle_corner", "restricted_mobility_toilet", "restricted_mobility_toilet_disabled", "return_journey", "road_sign", "round_trip", "s_bahn", "save", "scooter", "seat_not_determined", "seat_reservation_required", "seat_table", "seat_window", "second_class", "sepa", "share", "share_item", "shield", "shield_check", "ship", "shopping_bag", "shopping_basket", "shopping_basket_disabled", "shopping_cart", "shopping_cart_disabled", "shower", "shower_men", "shower_women", "single_trip", "skip_backward", "skip_forward", "sliders_horizontal", "snow_flake", "sort_down", "sort_up", "special_bike", "speech_bubble", "speech_bubble_exclamation_mark", "speech_bubble_question_mark", "speech_bubbles", "speedometer", "sprinter", "standing_room", "star", "start", "station", "stepless_entry", "stop", "stroller", "stroller_disabled", "subtitles", "subway", "suitcase", "sun", "support_dog", "tablet", "taxi", "telephone", "thumbs_down", "thumbs_up", "ticket", "ticket_commuter", "ticket_discount", "ticket_horizontal", "ticket_subscription", "tickets", "time_outward_journey", "time_return_journey", "timetable", "toilet_men", "toilet_women", "toilets", "toys", "toys_disabled", "train", "train_and_car", "train_station", "tram", "translation", "traveler_with_reduced_mobility", "undo", "unlink_chain", "upload", "vehicle_entry_aid", "vehicle_entry_aid_disabled", "volume_disabled", "volume_down", "volume_silent", "volume_up", "voucher", "walking_fast", "water_drop", "wc_sign", "wc_sign_disabled", "wheelchair_reservation_required", "wheelchair_space_not_available", "wheelchair_space_not_determined", "wifi", "wifi_disabled", "wrench", "x_placeholder", "zoom_in", "zoom_out"], components: { accordion: { props: `import { GlobalProps, InitializedState } from '../../shared/model';
23751
23751
  import { DBAccordionItemDefaultProps } from '../accordion-item/model';
23752
23752
 
23753
23753
  export const AccordionVariantList = ['divider', 'card'] as const;
@@ -33806,7 +33806,7 @@ import DBSection from "../section.vue";
33806
33806
  <script setup lang="ts">
33807
33807
  import DBCard from "../../card/card.vue";
33808
33808
  import DBSection from "../section.vue";
33809
- </script>` }, "web-components": { "density.example.tsx": 'import { DBCard } from "../../card/card";\nimport { DBSection } from "../section";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "section-density",\n})\nexport class SectionDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "section-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n data-density="functional"\n id="test-id-123"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n data-density="regular"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n data-density="expressive"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n </db-section>\n </Fragment>\n );\n }\n}\n', "spacing.example.tsx": 'import { DBCard } from "../../card/card";\nimport { DBSection } from "../section";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "section-spacing",\n})\nexport class SectionSpacing {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "section-spacing");\n }\n\n render() {\n return (\n <Fragment>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="medium"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="large"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="small"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="none"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n </db-section>\n </Fragment>\n );\n }\n}\n', "width.example.tsx": 'import { DBCard } from "../../card/card";\nimport { DBSection } from "../section";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "section-width",\n})\nexport class SectionWidth {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "section-width");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n </db-section>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n width="small"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n </db-section>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n width="medium"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n </db-section>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n width="large"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n </db-section>\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>DBSection</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <section class="db-section">\n <div data-variant="full">Section</div>\n </section>\n </body>\n</html>\n' } } }, select: { props: "import {\n ChangeEventProps,\n ChangeEventState,\n ClickEventProps,\n ClickEventState,\n FocusEventProps,\n FocusEventState,\n FormMessageProps,\n FormProps,\n FormSizeProps,\n FormState,\n FromValidState,\n GlobalProps,\n GlobalState,\n IconProps,\n InitializedState,\n InputEventProps,\n InputEventState,\n ShowIconProps\n} from '../../shared/model';\n\nexport type DBSelectDefaultProps = {\n /**\n * @deprecated\n * Enables multiple select, but it isn't styled, please use DBCustomSelect/db-custom-select instead\n */\n multiple?: boolean;\n\n /**\n * If you don't/can't use children/slots you can pass in the options as an array.\n */\n options?: DBSelectOptionType[];\n\n /**\n * Controls whether the empty placeholder option is shown in the dropdown after the user's selection of another option.\n * By default, it is shown for non-required selects and hidden for required selects.\n * Set to `true` to always show or `false` to always hide the empty option.\n *\n * Note: The empty option is only rendered when `variant === 'floating'` or a `placeholder` is set.\n * Setting `showEmptyOption` alone has no effect if neither of these conditions is met.\n */\n showEmptyOption?: boolean;\n};\n\nexport type DBSelectOptionType = {\n /**\n * Identifier for option\n */\n id?: string;\n\n /**\n * Disables this option\n */\n disabled?: boolean;\n\n /**\n * Selects this option\n */\n selected?: boolean;\n\n /**\n * If the value is different from the label you want to show to the user.\n */\n label?: string;\n\n /**\n * If you want to use optgroup you can nest options here.\n */\n options?: DBSelectOptionType[];\n\n /**\n * The main value you select, will be shown as default label if no label is set.\n */\n value: string | string[] | number;\n};\n\nexport type DBSelectProps = GlobalProps &\n ClickEventProps<HTMLSelectElement> &\n ChangeEventProps<HTMLSelectElement> &\n FocusEventProps<HTMLSelectElement> &\n InputEventProps<HTMLSelectElement> &\n FormProps &\n IconProps &\n FormMessageProps &\n DBSelectDefaultProps &\n ShowIconProps &\n FormSizeProps;\n\nexport type DBSelectDefaultState = {\n _placeholderId: string;\n getOptionLabel: (option: DBSelectOptionType) => string;\n shouldShowEmptyOption: () => boolean;\n};\n\nexport type DBSelectState = DBSelectDefaultState &\n GlobalState &\n ClickEventState<HTMLSelectElement> &\n ChangeEventState<HTMLSelectElement> &\n FocusEventState<HTMLSelectElement> &\n InputEventState<HTMLSelectElement> &\n FormState &\n InitializedState &\n FromValidState;\n", examples: ["Density", "Variant", "Show Label", "Show Message", "State", "Validation", "Disabled", "Content", "Required", "Show Required Asterisk", "Option Groups", "Examples Floating Label"], exampleCode: { react: { "content.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectContent(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) Text"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n icon="x_placeholder"\n placeholder="Text - Leading Icon"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectContent;\n', "density.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectDensity(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n data-density="functional"\n label="Label"\n placeholder="Functional"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n data-density="regular"\n label="Label"\n placeholder="(Default) Regular"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n data-density="expressive"\n label="Label"\n placeholder="Expressive"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectDensity;\n', "disabled.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectDisabled(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled={false}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled\n />\n </div>\n </>\n );\n}\n\nexport default SelectDisabled;\n', "examples-floating-label.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectExamplesFloatingLabel(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n variant="floating"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n value="Filled"\n variant="floating"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n variant="floating"\n value="Disabled"\n placeholder="Disabled"\n options={[\n {\n value: "Disabled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n disabled\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="Invalid"\n variant="floating"\n validation="invalid"\n invalidMessage="Invalid Message"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectExamplesFloatingLabel;\n', "option-groups.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectOptionGroups(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="Using optgroups"\n options={[\n {\n label: "Group 1",\n value: "",\n options: [\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n ],\n },\n {\n label: "Group 2",\n value: "",\n options: [\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n ],\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="Mixed options and groups"\n options={[\n {\n value: "Single Option",\n },\n {\n label: "Grouped Options",\n value: "",\n options: [\n {\n value: "Group Option 1",\n },\n {\n value: "Group Option 2",\n },\n ],\n },\n {\n value: "Another Single Option",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectOptionGroups;\n', "required.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectRequired(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={false}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required\n />\n </div>\n </>\n );\n}\n\nexport default SelectRequired;\n', "show-label.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectShowLabel(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel={false}\n />\n </div>\n </>\n );\n}\n\nexport default SelectShowLabel;\n', "show-message.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectShowMessage(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n message="Message"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage={false}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n message="Message"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage\n />\n </div>\n </>\n );\n}\n\nexport default SelectShowMessage;\n', "show-required-asterisk.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectShowRequiredAsterisk(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required\n showRequiredAsterisk\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required\n showRequiredAsterisk={false}\n />\n </div>\n </>\n );\n}\n\nexport default SelectShowRequiredAsterisk;\n', "state.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBSelect from "../select";\n\nfunction SelectState(props: any) {\n const [example, setExample] = useState(() => null);\n\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n value="Filled"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectState;\n', "validation.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectValidation(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n validation="no-validation"\n placeholder="(Default) No validation"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n validation="invalid"\n invalidMessage="Invalid Message"\n placeholder="Invalid"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n validation="valid"\n validMessage="Valid message"\n placeholder="Valid"\n options={[\n {\n value: "Valid",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectValidation;\n', "variant.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectVariant(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) Above"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n variant="floating"\n value="Floating"\n placeholder="Floating"\n options={[\n {\n value: "Floating",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectVariant;\n' }, angular: { "content.example.ts": `import {
33809
+ </script>` }, "web-components": { "density.example.tsx": 'import { DBCard } from "../../card/card";\nimport { DBSection } from "../section";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "section-density",\n})\nexport class SectionDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "section-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n data-density="functional"\n id="test-id-123"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n data-density="regular"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n data-density="expressive"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n </db-section>\n </Fragment>\n );\n }\n}\n', "spacing.example.tsx": 'import { DBCard } from "../../card/card";\nimport { DBSection } from "../section";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "section-spacing",\n})\nexport class SectionSpacing {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "section-spacing");\n }\n\n render() {\n return (\n <Fragment>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="medium"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="large"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="small"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="none"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n </db-section>\n </Fragment>\n );\n }\n}\n', "width.example.tsx": 'import { DBCard } from "../../card/card";\nimport { DBSection } from "../section";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "section-width",\n})\nexport class SectionWidth {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "section-width");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n </db-section>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n width="small"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n </db-section>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n width="medium"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n </db-section>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n width="large"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n </db-section>\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>DBSection</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <section class="db-section">\n <div data-variant="full">Section</div>\n </section>\n </body>\n</html>\n' } } }, select: { props: "import {\n ChangeEventProps,\n ChangeEventState,\n ClickEventProps,\n ClickEventState,\n FocusEventProps,\n FocusEventState,\n FormMessageProps,\n FormProps,\n FormSizeProps,\n FormState,\n FromValidState,\n GlobalProps,\n GlobalState,\n IconProps,\n InitializedState,\n InputEventProps,\n InputEventState,\n ShowIconProps\n} from '../../shared/model';\n\nexport type DBSelectDefaultProps = {\n /**\n * @deprecated\n * Enables multiple select, but it isn't styled, please use DBCustomSelect/db-custom-select instead\n */\n multiple?: boolean;\n\n /**\n * If you don't/can't use children/slots you can pass in the options as an array.\n */\n options?: DBSelectOptionType[];\n\n /**\n * Controls whether the empty placeholder option is shown in the dropdown after the user's selection of another option.\n * By default, it is shown for non-required selects and hidden for required selects.\n * Set to `true` to always show or `false` to always hide the empty option.\n *\n * Note: The empty option is only rendered when `variant === 'floating'` or a `placeholder` is set.\n * Setting `showEmptyOption` alone has no effect if neither of these conditions is met.\n */\n showEmptyOption?: boolean;\n};\n\nexport type DBSelectOptionType = {\n /**\n * Identifier for option\n */\n id?: string;\n\n /**\n * Disables this option\n */\n disabled?: boolean;\n\n /**\n * Selects this option\n */\n selected?: boolean;\n\n /**\n * If the value is different from the label you want to show to the user.\n */\n label?: string;\n\n /**\n * If you want to use optgroup you can nest options here.\n */\n options?: DBSelectOptionType[];\n\n /**\n * The main value you select, will be shown as default label if no label is set.\n */\n value: string | string[] | number;\n};\n\nexport type DBSelectProps = GlobalProps &\n ClickEventProps<HTMLSelectElement> &\n ChangeEventProps<HTMLSelectElement> &\n FocusEventProps<HTMLSelectElement> &\n InputEventProps<HTMLSelectElement> &\n FormProps &\n IconProps &\n FormMessageProps &\n DBSelectDefaultProps &\n ShowIconProps &\n FormSizeProps;\n\nexport type DBSelectDefaultState = {\n _placeholderId: string;\n getOptionLabel: (option: DBSelectOptionType) => string;\n shouldShowEmptyOption: () => boolean;\n};\n\nexport type DBSelectState = DBSelectDefaultState &\n GlobalState &\n ClickEventState<HTMLSelectElement> &\n ChangeEventState<HTMLSelectElement> &\n FocusEventState<HTMLSelectElement> &\n InputEventState<HTMLSelectElement> &\n FormState &\n InitializedState &\n FromValidState;\n", examples: ["Density", "Variant", "Show Label", "Show Message", "State", "Validation", "Disabled", "Content", "Required", "Show Required Asterisk", "Option Groups", "Examples Floating Label", "Examples showEmptyOption property"], exampleCode: { react: { "content.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectContent(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) Text"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n icon="x_placeholder"\n placeholder="Text - Leading Icon"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectContent;\n', "density.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectDensity(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n data-density="functional"\n label="Label"\n placeholder="Functional"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n data-density="regular"\n label="Label"\n placeholder="(Default) Regular"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n data-density="expressive"\n label="Label"\n placeholder="Expressive"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectDensity;\n', "disabled.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectDisabled(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled={false}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled\n />\n </div>\n </>\n );\n}\n\nexport default SelectDisabled;\n', "examples-floating-label.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectExamplesFloatingLabel(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n variant="floating"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n value="Filled"\n variant="floating"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n variant="floating"\n value="Disabled"\n placeholder="Disabled"\n options={[\n {\n value: "Disabled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n disabled\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="Invalid"\n variant="floating"\n validation="invalid"\n invalidMessage="Invalid Message"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectExamplesFloatingLabel;\n', "examples-show-empty-option.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectExamplesShowEmptyOption(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default)"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="showEmptyOption=false"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showEmptyOption={false}\n />\n </div>\n </>\n );\n}\n\nexport default SelectExamplesShowEmptyOption;\n', "option-groups.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectOptionGroups(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="Using optgroups"\n options={[\n {\n label: "Group 1",\n value: "",\n options: [\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n ],\n },\n {\n label: "Group 2",\n value: "",\n options: [\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n ],\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="Mixed options and groups"\n options={[\n {\n value: "Single Option",\n },\n {\n label: "Grouped Options",\n value: "",\n options: [\n {\n value: "Group Option 1",\n },\n {\n value: "Group Option 2",\n },\n ],\n },\n {\n value: "Another Single Option",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectOptionGroups;\n', "required.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectRequired(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={false}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required\n />\n </div>\n </>\n );\n}\n\nexport default SelectRequired;\n', "show-label.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectShowLabel(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel={false}\n />\n </div>\n </>\n );\n}\n\nexport default SelectShowLabel;\n', "show-message.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectShowMessage(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n message="Message"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage={false}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n message="Message"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage\n />\n </div>\n </>\n );\n}\n\nexport default SelectShowMessage;\n', "show-required-asterisk.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectShowRequiredAsterisk(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required\n showRequiredAsterisk\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required\n showRequiredAsterisk={false}\n />\n </div>\n </>\n );\n}\n\nexport default SelectShowRequiredAsterisk;\n', "state.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBSelect from "../select";\n\nfunction SelectState(props: any) {\n const [example, setExample] = useState(() => null);\n\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n value="Filled"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectState;\n', "validation.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectValidation(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n validation="no-validation"\n placeholder="(Default) No validation"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n validation="invalid"\n invalidMessage="Invalid Message"\n placeholder="Invalid"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n validation="valid"\n validMessage="Valid message"\n placeholder="Valid"\n options={[\n {\n value: "Valid",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectValidation;\n', "variant.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectVariant(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) Above"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n variant="floating"\n value="Floating"\n placeholder="Floating"\n options={[\n {\n value: "Floating",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectVariant;\n' }, angular: { "content.example.ts": `import {
33810
33810
  Component,
33811
33811
  viewChild,
33812
33812
  ElementRef,
@@ -34338,6 +34338,123 @@ export class SelectExamplesFloatingLabel implements AfterViewInit {
34338
34338
  }
34339
34339
  }
34340
34340
  }
34341
+ `, "examples-show-empty-option.example.ts": `import {
34342
+ Component,
34343
+ viewChild,
34344
+ ElementRef,
34345
+ effect,
34346
+ AfterViewInit,
34347
+ } from "@angular/core";
34348
+ import { CommonModule } from "@angular/common";
34349
+
34350
+ import { DBSelect } from "../select";
34351
+
34352
+ @Component({
34353
+ selector: "select-examples-show-empty-option",
34354
+ standalone: true,
34355
+ imports: [CommonModule, DBSelect],
34356
+ template: \`<ng-container
34357
+ ><div
34358
+ [ngStyle]="{
34359
+ width: '300px'
34360
+ }"
34361
+ >
34362
+ <db-select
34363
+ label="Label"
34364
+ placeholder="(Default)"
34365
+ [options]="[{
34366
+ value: 'Option 1'
34367
+ }, {
34368
+ value: 'Option 2'
34369
+ }, {
34370
+ value: 'Option 3'
34371
+ }, {
34372
+ value: 'Option 4'
34373
+ }, {
34374
+ value: 'Option 5'
34375
+ }]"
34376
+ ></db-select>
34377
+ </div>
34378
+ <div
34379
+ [ngStyle]="{
34380
+ width: '300px'
34381
+ }"
34382
+ >
34383
+ <db-select
34384
+ label="Label"
34385
+ placeholder="showEmptyOption=false"
34386
+ [options]="[{
34387
+ value: 'Option 1'
34388
+ }, {
34389
+ value: 'Option 2'
34390
+ }, {
34391
+ value: 'Option 3'
34392
+ }, {
34393
+ value: 'Option 4'
34394
+ }, {
34395
+ value: 'Option 5'
34396
+ }]"
34397
+ [showEmptyOption]="false"
34398
+ ></db-select></div
34399
+ ></ng-container> \`,
34400
+ styles: \`:host { display: contents; }\`,
34401
+ })
34402
+ export class SelectExamplesShowEmptyOption implements AfterViewInit {
34403
+ _ref = viewChild<ElementRef>("_ref");
34404
+
34405
+ constructor() {}
34406
+
34407
+ /**
34408
+ * Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
34409
+ * @param element the ref for the component
34410
+ * @param customElementSelector the custom element like \`my-component\`
34411
+ */
34412
+ private enableAttributePassing(
34413
+ element: HTMLElement | null,
34414
+ customElementSelector: string
34415
+ ) {
34416
+ const parent = element?.closest(customElementSelector);
34417
+ if (element && parent) {
34418
+ const attributes = parent.attributes;
34419
+ for (let i = 0; i < attributes.length; i++) {
34420
+ const attr = attributes.item(i);
34421
+ if (
34422
+ attr && attr.name !== 'data-density' &&
34423
+ (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))
34424
+ ) {
34425
+ element.setAttribute(attr.name, attr.value);
34426
+ parent.removeAttribute(attr.name);
34427
+ }
34428
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
34429
+ element.setAttribute(attr.name, attr.value);
34430
+ parent.removeAttribute(attr.name);
34431
+ }
34432
+ else if (attr && attr.name === "class") {
34433
+ const isWebComponent = attr.value.includes("hydrated");
34434
+ const value = attr.value.replace("hydrated", "").trim();
34435
+ const currentClass = element.getAttribute("class");
34436
+ element.setAttribute(
34437
+ attr.name,
34438
+ \`\${currentClass ? \`\${currentClass} \` : ""}\${value}\`
34439
+ );
34440
+ if (isWebComponent) {
34441
+ // Stencil is using this class for lazy loading component
34442
+ parent.setAttribute("class", "hydrated");
34443
+ } else {
34444
+ parent.removeAttribute(attr.name);
34445
+ }
34446
+ }
34447
+ }
34448
+ }
34449
+ }
34450
+
34451
+ ngAfterViewInit() {
34452
+ if (typeof window !== "undefined") {
34453
+ const element: HTMLElement | null = this._ref()?.nativeElement;
34454
+ this.enableAttributePassing(element, "select-examples-show-empty-option");
34455
+ }
34456
+ }
34457
+ }
34341
34458
  `, "option-groups.example.ts": `import {
34342
34459
  Component,
34343
34460
  viewChild,
@@ -35614,6 +35731,66 @@ import DBSelect from "../select.vue";
35614
35731
  </div>
35615
35732
  </template>
35616
35733
 
35734
+ <script setup lang="ts">
35735
+ import DBSelect from "../select.vue";
35736
+ </script>`, "examples-show-empty-option.example.vue": `<template>
35737
+ <div
35738
+ :style="{
35739
+ width: '300px',
35740
+ }"
35741
+ >
35742
+ <DBSelect
35743
+ label="Label"
35744
+ placeholder="(Default)"
35745
+ :options="[
35746
+ {
35747
+ value: 'Option 1',
35748
+ },
35749
+ {
35750
+ value: 'Option 2',
35751
+ },
35752
+ {
35753
+ value: 'Option 3',
35754
+ },
35755
+ {
35756
+ value: 'Option 4',
35757
+ },
35758
+ {
35759
+ value: 'Option 5',
35760
+ },
35761
+ ]"
35762
+ ></DBSelect>
35763
+ </div>
35764
+ <div
35765
+ :style="{
35766
+ width: '300px',
35767
+ }"
35768
+ >
35769
+ <DBSelect
35770
+ label="Label"
35771
+ placeholder="showEmptyOption=false"
35772
+ :options="[
35773
+ {
35774
+ value: 'Option 1',
35775
+ },
35776
+ {
35777
+ value: 'Option 2',
35778
+ },
35779
+ {
35780
+ value: 'Option 3',
35781
+ },
35782
+ {
35783
+ value: 'Option 4',
35784
+ },
35785
+ {
35786
+ value: 'Option 5',
35787
+ },
35788
+ ]"
35789
+ :showEmptyOption="false"
35790
+ ></DBSelect>
35791
+ </div>
35792
+ </template>
35793
+
35617
35794
  <script setup lang="ts">
35618
35795
  import DBSelect from "../select.vue";
35619
35796
  </script>`, "option-groups.example.vue": `<template>
@@ -36123,7 +36300,7 @@ import DBSelect from "../select.vue";
36123
36300
 
36124
36301
  <script setup lang="ts">
36125
36302
  import DBSelect from "../select.vue";
36126
- </script>` }, "web-components": { "content.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-content",\n})\nexport class SelectContent {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-content");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) Text"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n icon="x_placeholder"\n placeholder="Text - Leading Icon"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-density",\n})\nexport class SelectDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-density");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n data-density="functional"\n label="Label"\n placeholder="Functional"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n data-density="regular"\n label="Label"\n placeholder="(Default) Regular"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n data-density="expressive"\n label="Label"\n placeholder="Expressive"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-disabled",\n})\nexport class SelectDisabled {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled={false}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled={true}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "examples-floating-label.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-examples-floating-label",\n})\nexport class SelectExamplesFloatingLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-examples-floating-label");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n variant="floating"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n value="Filled"\n variant="floating"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n variant="floating"\n value="Disabled"\n placeholder="Disabled"\n options={[\n {\n value: "Disabled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n disabled={true}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="Invalid"\n variant="floating"\n validation="invalid"\n invalidMessage="Invalid Message"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "option-groups.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-option-groups",\n})\nexport class SelectOptionGroups {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-option-groups");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="Using optgroups"\n options={[\n {\n label: "Group 1",\n value: "",\n options: [\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n ],\n },\n {\n label: "Group 2",\n value: "",\n options: [\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n ],\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="Mixed options and groups"\n options={[\n {\n value: "Single Option",\n },\n {\n label: "Grouped Options",\n value: "",\n options: [\n {\n value: "Group Option 1",\n },\n {\n value: "Group Option 2",\n },\n ],\n },\n {\n value: "Another Single Option",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "required.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-required",\n})\nexport class SelectRequired {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-required");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={false}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={true}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-label.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-show-label",\n})\nexport class SelectShowLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-show-label");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel={true}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel={false}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-message.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-show-message",\n})\nexport class SelectShowMessage {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-show-message");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n message="Message"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage={false}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n message="Message"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage={true}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-required-asterisk.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-show-required-asterisk",\n})\nexport class SelectShowRequiredAsterisk {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-show-required-asterisk");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={true}\n showRequiredAsterisk={true}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={true}\n showRequiredAsterisk={false}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "state.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-state",\n})\nexport class SelectState {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-state");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n value="Filled"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "validation.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-validation",\n})\nexport class SelectValidation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-validation");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n validation="no-validation"\n placeholder="(Default) No validation"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n validation="invalid"\n invalidMessage="Invalid Message"\n placeholder="Invalid"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n validation="valid"\n validMessage="Valid message"\n placeholder="Valid"\n options={[\n {\n value: "Valid",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-variant",\n})\nexport class SelectVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-variant");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) Above"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n variant="floating"\n value="Floating"\n placeholder="Floating"\n options={[\n {\n value: "Floating",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-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>DBSelect</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-select">\n <label for="test1">Label</label>\n <select id="test1" aria-describedby="db-infotext-01">\n <option class="placeholder" value=""></option>\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 <span class="db-infotext" id="db-infotext-01">No Icon</span>\n </div>\n <div class="db-select">\n <label for="test2">Label</label>\n <select id="test2" aria-describedby="db-infotext-02">\n <option class="placeholder" value=""></option>\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 <span\n class="db-infotext"\n data-semantic="informational"\n id="db-infotext-02"\n >\n informational\n </span>\n </div>\n <div class="db-select">\n <label for="test3">With optgroups</label>\n <select id="test3" aria-describedby="db-infotext-03">\n <optgroup label="Group 1">\n <option value="group1-option1">Group 1 Option 1</option>\n <option value="group1-option2">Group 1 Option 2</option>\n </optgroup>\n <optgroup label="Group 2">\n <option value="group2-option1">Group 2 Option 1</option>\n <option value="group2-option2">Group 2 Option 2</option>\n </optgroup>\n </select>\n <span class="db-infotext" id="db-infotext-03">With optgroups</span>\n </div>\n </body>\n</html>\n' } } }, stack: { props: `import { GapSpacingProps, GlobalProps, GlobalState } from '../../shared/model';
36303
+ </script>` }, "web-components": { "content.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-content",\n})\nexport class SelectContent {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-content");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) Text"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n icon="x_placeholder"\n placeholder="Text - Leading Icon"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-density",\n})\nexport class SelectDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-density");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n data-density="functional"\n label="Label"\n placeholder="Functional"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n data-density="regular"\n label="Label"\n placeholder="(Default) Regular"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n data-density="expressive"\n label="Label"\n placeholder="Expressive"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-disabled",\n})\nexport class SelectDisabled {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled={false}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled={true}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "examples-floating-label.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-examples-floating-label",\n})\nexport class SelectExamplesFloatingLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-examples-floating-label");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n variant="floating"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n value="Filled"\n variant="floating"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n variant="floating"\n value="Disabled"\n placeholder="Disabled"\n options={[\n {\n value: "Disabled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n disabled={true}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="Invalid"\n variant="floating"\n validation="invalid"\n invalidMessage="Invalid Message"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "examples-show-empty-option.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-examples-show-empty-option",\n})\nexport class SelectExamplesShowEmptyOption {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-examples-show-empty-option");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default)"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="showEmptyOption=false"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showEmptyOption={false}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "option-groups.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-option-groups",\n})\nexport class SelectOptionGroups {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-option-groups");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="Using optgroups"\n options={[\n {\n label: "Group 1",\n value: "",\n options: [\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n ],\n },\n {\n label: "Group 2",\n value: "",\n options: [\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n ],\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="Mixed options and groups"\n options={[\n {\n value: "Single Option",\n },\n {\n label: "Grouped Options",\n value: "",\n options: [\n {\n value: "Group Option 1",\n },\n {\n value: "Group Option 2",\n },\n ],\n },\n {\n value: "Another Single Option",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "required.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-required",\n})\nexport class SelectRequired {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-required");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={false}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={true}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-label.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-show-label",\n})\nexport class SelectShowLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-show-label");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel={true}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel={false}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-message.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-show-message",\n})\nexport class SelectShowMessage {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-show-message");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n message="Message"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage={false}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n message="Message"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage={true}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-required-asterisk.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-show-required-asterisk",\n})\nexport class SelectShowRequiredAsterisk {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-show-required-asterisk");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={true}\n showRequiredAsterisk={true}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={true}\n showRequiredAsterisk={false}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "state.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-state",\n})\nexport class SelectState {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-state");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n value="Filled"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "validation.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-validation",\n})\nexport class SelectValidation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-validation");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n validation="no-validation"\n placeholder="(Default) No validation"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n validation="invalid"\n invalidMessage="Invalid Message"\n placeholder="Invalid"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n validation="valid"\n validMessage="Valid message"\n placeholder="Valid"\n options={[\n {\n value: "Valid",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-variant",\n})\nexport class SelectVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-variant");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) Above"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n variant="floating"\n value="Floating"\n placeholder="Floating"\n options={[\n {\n value: "Floating",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-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>DBSelect</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-select">\n <label for="test1">Label</label>\n <select id="test1" aria-describedby="db-infotext-01">\n <option class="placeholder" value=""></option>\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 <span class="db-infotext" id="db-infotext-01">No Icon</span>\n </div>\n <div class="db-select">\n <label for="test2">Label</label>\n <select id="test2" aria-describedby="db-infotext-02">\n <option class="placeholder" value=""></option>\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 <span\n class="db-infotext"\n data-semantic="informational"\n id="db-infotext-02"\n >\n informational\n </span>\n </div>\n <div class="db-select">\n <label for="test3">With optgroups</label>\n <select id="test3" aria-describedby="db-infotext-03">\n <optgroup label="Group 1">\n <option value="group1-option1">Group 1 Option 1</option>\n <option value="group1-option2">Group 1 Option 2</option>\n </optgroup>\n <optgroup label="Group 2">\n <option value="group2-option1">Group 2 Option 1</option>\n <option value="group2-option2">Group 2 Option 2</option>\n </optgroup>\n </select>\n <span class="db-infotext" id="db-infotext-03">With optgroups</span>\n </div>\n </body>\n</html>\n' } } }, stack: { props: `import { GapSpacingProps, GlobalProps, GlobalState } from '../../shared/model';
36127
36304
 
36128
36305
  export const StackVariantList = ['simple', 'divider'] as const;
36129
36306
  export type StackVariantType = (typeof StackVariantList)[number];
@@ -38733,7 +38910,7 @@ import DBStack from "../stack.vue";
38733
38910
  <script setup lang="ts">
38734
38911
  import DBInfotext from "../../infotext/infotext.vue";
38735
38912
  import DBStack from "../stack.vue";
38736
- </script>` }, "web-components": { "alignment-column.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-alignment-column",\n})\nexport class StackAlignmentColumn {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-alignment-column");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Stretch\n </db-infotext>\n <db-stack\n alignment="stretch"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Start\n </db-infotext>\n <db-stack\n alignment="start"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n alignment="center"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n alignment="end"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "alignment-row.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-alignment-row",\n})\nexport class StackAlignmentRow {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-alignment-row");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Stretch\n </db-infotext>\n <db-stack\n alignment="stretch"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Start\n </db-infotext>\n <db-stack\n alignment="start"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n alignment="center"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n alignment="end"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-density",\n})\nexport class StackDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-density");\n }\n\n render() {\n return (\n <Fragment>\n <div\n data-density="functional"\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Functional\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Regular\n </db-infotext>\n <db-stack\n data-density="regular"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n data-density="expressive"\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Expressive\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "direction.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-direction",\n})\nexport class StackDirection {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-direction");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Column\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Row\n </db-infotext>\n <db-stack\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "gap.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-gap",\n})\nexport class StackGap {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-gap");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n none\n </db-infotext>\n <db-stack\n gap="none"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 3x-small\n </db-infotext>\n <db-stack\n gap="3x-small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 2x-small\n </db-infotext>\n <db-stack\n gap="2x-small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n x-small\n </db-infotext>\n <db-stack\n gap="x-small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) small\n </db-infotext>\n <db-stack\n gap="small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n medium\n </db-infotext>\n <db-stack\n gap="medium"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n large\n </db-infotext>\n <db-stack\n gap="large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n x-large\n </db-infotext>\n <db-stack\n gap="x-large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 2x-large\n </db-infotext>\n <db-stack\n gap="2x-large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 3x-large\n </db-infotext>\n <db-stack\n gap="3x-large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "justify-content-column.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-justify-content-column",\n})\nexport class StackJustifyContentColumn {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-justify-content-column");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Start\n </db-infotext>\n <db-stack\n justifyContent="start"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n justifyContent="center"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n justifyContent="end"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Space-Between\n </db-infotext>\n <db-stack\n justifyContent="space-between"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "justify-content-row.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-justify-content-row",\n})\nexport class StackJustifyContentRow {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-justify-content-row");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Start\n </db-infotext>\n <db-stack\n justifyContent="start"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n justifyContent="center"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n justifyContent="end"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Space-Between\n </db-infotext>\n <db-stack\n justifyContent="space-between"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBDivider } from "../../divider/divider";\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-variant",\n})\nexport class StackVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-variant");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Simple\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Divider\n </db-infotext>\n <db-stack\n variant="divider"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <db-divider></db-divider>\n <span class="dummy-component">Content 2</span>\n <db-divider></db-divider>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "wrap.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-wrap",\n})\nexport class StackWrap {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-wrap");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "160px",\n height: "88px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) No Wrap: Column\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "160px",\n height: "88px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n No Wrap: Row\n </db-infotext>\n <db-stack\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "160px",\n height: "120px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Wrap: Column\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n wrap={true}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "180px",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Wrap: Row\n </db-infotext>\n <db-stack\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n wrap={true}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBStack</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-stack">Test</div>\n </body>\n</html>\n' } } }, switch: { props: "import {\n ChangeEventProps,\n ChangeEventState,\n FocusEventProps,\n FocusEventState,\n FormCheckProps,\n FormMessageProps,\n FormProps,\n FormState,\n FromValidState,\n GeneralKeyboardEvent,\n GlobalProps,\n GlobalState,\n IconLeadingProps,\n IconProps,\n IconTrailingProps,\n LabelVariantHorizontalType,\n SizeProps\n} from '../../shared/model';\n\nexport type DBSwitchDefaultProps = {\n /**\n * Add additional icons to indicate active/inactive state.\n */\n visualAid?: boolean | string;\n\n /**\n * Change the variant of the label to `trailing` or `leading`. Defaults to `trailing`\n */\n variant?: LabelVariantHorizontalType;\n};\n\nexport type DBSwitchProps = GlobalProps &\n ChangeEventProps<HTMLInputElement> &\n FocusEventProps<HTMLInputElement> &\n FormProps &\n FormCheckProps &\n Omit<FormMessageProps, 'variant'> &\n SizeProps &\n IconProps &\n IconTrailingProps &\n IconLeadingProps &\n DBSwitchDefaultProps;\n\nexport type DBSwitchDefaultState = {\n handleKeyDown: (event: GeneralKeyboardEvent<HTMLInputElement>) => void;\n};\n\nexport type DBSwitchState = DBSwitchDefaultState &\n GlobalState &\n ChangeEventState<HTMLInputElement> &\n FocusEventState<HTMLInputElement> &\n FormState &\n FromValidState;\n", examples: ["Density", "Checked", "Disabled", "Visual Aid", "Size", "Variant", "Show Label", "Required", "Show Required Asterisk", "Validation", "Show Message", "Examples"], exampleCode: { react: { "checked.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchChecked(props: any) {\n const [checked, setChecked] = useState<boolean>(() => true);\n\n return (\n <>\n <DBSwitch checked={false}>(Default) False</DBSwitch>\n <DBSwitch\n checked={checked}\n {...{\n onChange: (event: any) =>\n setChecked((event.target as HTMLInputElement).checked),\n }}\n >\n True\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchChecked;\n', "density.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchDensity(props: any) {\n return (\n <>\n <DBSwitch data-density="functional">functional</DBSwitch>\n <DBSwitch data-density="regular">regular (Default)</DBSwitch>\n <DBSwitch data-density="expressive">expressive</DBSwitch>\n </>\n );\n}\n\nexport default SwitchDensity;\n', "disabled.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchDisabled(props: any) {\n return (\n <>\n <DBSwitch disabled={false}>(Default) False</DBSwitch>\n <DBSwitch disabled>True</DBSwitch>\n </>\n );\n}\n\nexport default SwitchDisabled;\n', "examples.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchExamples(props: any) {\n return (\n <>\n <DBSwitch icon="cross_circle" iconTrailing="clock" visualAid>\n Custom Icons\n </DBSwitch>\n <DBSwitch validMessage="Valid" visualAid required>\n Required + Visual Aid\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchExamples;\n', "required.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchRequired(props: any) {\n return (\n <>\n <DBSwitch required={false}>(Default) False</DBSwitch>\n <DBSwitch required>True</DBSwitch>\n </>\n );\n}\n\nexport default SwitchRequired;\n', "show-label.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBSwitch from "../switch";\n\nfunction SwitchShowLabel(props: any) {\n return (\n <>\n <DBSwitch showLabel>(Default) True</DBSwitch>\n <div>\n <DBSwitch showLabel={false}>False</DBSwitch>\n <DBInfotext semantic="informational" icon="none">\n False\n </DBInfotext>\n </div>\n </>\n );\n}\n\nexport default SwitchShowLabel;\n', "show-message.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchShowMessage(props: any) {\n return (\n <>\n <DBSwitch>(Default) False</DBSwitch>\n <DBSwitch message="Message" showMessage>\n True\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchShowMessage;\n', "show-required-asterisk.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchShowRequiredAsterisk(props: any) {\n return (\n <>\n <DBSwitch required showRequiredAsterisk>\n (Default) True\n </DBSwitch>\n <DBSwitch required showRequiredAsterisk={false}>\n False\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchShowRequiredAsterisk;\n', "size.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchSize(props: any) {\n return (\n <>\n <DBSwitch>(Default) Medium</DBSwitch>\n <DBSwitch size="small">Small</DBSwitch>\n </>\n );\n}\n\nexport default SwitchSize;\n', "validation.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchValidation(props: any) {\n return (\n <>\n <DBSwitch>(Default) No validation</DBSwitch>\n <DBSwitch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </DBSwitch>\n <DBSwitch validation="valid" validMessage="Valid message" checked>\n Valid\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchValidation;\n', "variant.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchVariant(props: any) {\n return (\n <>\n <DBSwitch label="(Default) Trailing">(Default) Trailing</DBSwitch>\n <DBSwitch label="Leading" variant="leading">\n Leading\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchVariant;\n', "visual-aid.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchVisualAid(props: any) {\n const [checked, setChecked] = useState<boolean>(() => true);\n\n const [checked2, setChecked2] = useState<boolean>(() => true);\n\n return (\n <>\n <DBSwitch visualAid={false}>(Default) False (Unchecked)</DBSwitch>\n <DBSwitch\n visualAid={false}\n checked={checked}\n {...{\n onChange: (event: any) =>\n setChecked((event.target as HTMLInputElement).checked),\n }}\n >\n (Default) False (Checked)\n </DBSwitch>\n <DBSwitch iconLeading="moon" iconTrailing="sun" visualAid>\n True (Unchecked)\n </DBSwitch>\n <DBSwitch\n iconLeading="moon"\n iconTrailing="sun"\n visualAid\n checked={checked2}\n {...{\n onChange: (event: any) =>\n setChecked((event.target as HTMLInputElement).checked),\n }}\n >\n True (Checked)\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchVisualAid;\n' }, angular: { "checked.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-checked",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [checked]="false">(Default) False</db-switch>\n <db-switch [checked]="checked()"> True </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchChecked implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n checked = signal<boolean>(true);\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-checked");\n }\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-density",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch data-density="functional">functional</db-switch>\n <db-switch data-density="regular">regular (Default)</db-switch>\n <db-switch data-density="expressive">expressive</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-density");\n }\n }\n}\n', "disabled.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-disabled",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [disabled]="false">(Default) False</db-switch>\n <db-switch [disabled]="true">True</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchDisabled implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-disabled");\n }\n }\n}\n', "examples.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-examples",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch icon="cross_circle" iconTrailing="clock" [visualAid]="true">\n Custom Icons\n </db-switch>\n <db-switch validMessage="Valid" [visualAid]="true" [required]="true">\n Required + Visual Aid\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchExamples implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-examples");\n }\n }\n}\n', "required.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-required",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [required]="false">(Default) False</db-switch>\n <db-switch [required]="true">True</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchRequired implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-required");\n }\n }\n}\n', "show-label.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-show-label",\n standalone: true,\n imports: [CommonModule, DBSwitch, DBInfotext],\n template: `<ng-container\n ><db-switch [showLabel]="true">(Default) True</db-switch>\n <div>\n <db-switch [showLabel]="false">False</db-switch>\n <db-infotext semantic="informational" icon="none"> False </db-infotext>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchShowLabel implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-show-label");\n }\n }\n}\n', "show-message.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-show-message",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch>(Default) False</db-switch>\n <db-switch message="Message" [showMessage]="true">\n True\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchShowMessage implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-show-message");\n }\n }\n}\n', "show-required-asterisk.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-show-required-asterisk",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [required]="true" [showRequiredAsterisk]="true">\n (Default) True\n </db-switch>\n <db-switch [required]="true" [showRequiredAsterisk]="false">\n False\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchShowRequiredAsterisk implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-show-required-asterisk");\n }\n }\n}\n', "size.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-size",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch>(Default) Medium</db-switch>\n <db-switch size="small">Small</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchSize implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-size");\n }\n }\n}\n', "validation.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-validation",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch>(Default) No validation</db-switch>\n <db-switch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </db-switch>\n <db-switch validation="valid" validMessage="Valid message" [checked]="true">\n Valid\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchValidation implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-validation");\n }\n }\n}\n', "variant.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-variant",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch label="(Default) Trailing">(Default) Trailing</db-switch>\n <db-switch label="Leading" variant="leading">\n Leading\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchVariant implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-variant");\n }\n }\n}\n', "visual-aid.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-visual-aid",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [visualAid]="false">(Default) False (Unchecked)</db-switch>\n <db-switch [visualAid]="false" [checked]="checked()">\n (Default) False (Checked)\n </db-switch>\n <db-switch iconLeading="moon" iconTrailing="sun" [visualAid]="true">\n True (Unchecked)\n </db-switch>\n <db-switch\n iconLeading="moon"\n iconTrailing="sun"\n [visualAid]="true"\n [checked]="checked2()"\n >\n True (Checked)\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchVisualAid implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n checked = signal<boolean>(true);\n checked2 = signal<boolean>(true);\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-visual-aid");\n }\n }\n}\n' }, vue: { "checked.example.vue": '<template>\n <DBSwitch :checked="false">(Default) False</DBSwitch>\n <DBSwitch :checked="checked" v-bind="{}"> True </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBSwitch from "../switch.vue";\n\nconst checked = ref<boolean>(true);\n</script>', "density.example.vue": '<template>\n <DBSwitch data-density="functional">functional</DBSwitch>\n <DBSwitch data-density="regular">regular (Default)</DBSwitch>\n <DBSwitch data-density="expressive">expressive</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "disabled.example.vue": '<template>\n <DBSwitch :disabled="false">(Default) False</DBSwitch>\n <DBSwitch :disabled="true">True</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "examples.example.vue": '<template>\n <DBSwitch icon="cross_circle" iconTrailing="clock" :visualAid="true">\n Custom Icons\n </DBSwitch>\n <DBSwitch validMessage="Valid" :visualAid="true" :required="true">\n Required + Visual Aid\n </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "required.example.vue": '<template>\n <DBSwitch :required="false">(Default) False</DBSwitch>\n <DBSwitch :required="true">True</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "show-label.example.vue": '<template>\n <DBSwitch :showLabel="true">(Default) True</DBSwitch>\n <div>\n <DBSwitch :showLabel="false">False</DBSwitch\n ><DBInfotext semantic="informational" icon="none"> False </DBInfotext>\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBSwitch from "../switch.vue";\n</script>', "show-message.example.vue": '<template>\n <DBSwitch>(Default) False</DBSwitch>\n <DBSwitch message="Message" :showMessage="true"> True </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "show-required-asterisk.example.vue": '<template>\n <DBSwitch :required="true" :showRequiredAsterisk="true">\n (Default) True\n </DBSwitch>\n <DBSwitch :required="true" :showRequiredAsterisk="false"> False </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "size.example.vue": '<template>\n <DBSwitch>(Default) Medium</DBSwitch>\n <DBSwitch size="small">Small</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "validation.example.vue": '<template>\n <DBSwitch>(Default) No validation</DBSwitch>\n <DBSwitch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </DBSwitch>\n <DBSwitch validation="valid" validMessage="Valid message" :checked="true">\n Valid\n </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "variant.example.vue": '<template>\n <DBSwitch label="(Default) Trailing">(Default) Trailing</DBSwitch>\n <DBSwitch label="Leading" variant="leading"> Leading </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "visual-aid.example.vue": '<template>\n <DBSwitch :visualAid="false">(Default) False (Unchecked)</DBSwitch>\n <DBSwitch :visualAid="false" :checked="checked" v-bind="{}">\n (Default) False (Checked)\n </DBSwitch>\n <DBSwitch iconLeading="moon" iconTrailing="sun" :visualAid="true">\n True (Unchecked)\n </DBSwitch>\n <DBSwitch\n iconLeading="moon"\n iconTrailing="sun"\n :visualAid="true"\n :checked="checked2"\n v-bind="{}"\n >\n True (Checked)\n </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBSwitch from "../switch.vue";\n\nconst checked = ref<boolean>(true);\nconst checked2 = ref<boolean>(true);\n</script>' }, "web-components": { "checked.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment, State } from "@stencil/core";\n\n@Component({\n tag: "switch-checked",\n})\nexport class SwitchChecked {\n private _ref!: HTMLElement;\n\n @State() checked = true;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-checked");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch checked={false}>(Default) False</db-switch>\n <db-switch checked={this.checked} {...{}}>\n True\n </db-switch>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-density",\n})\nexport class SwitchDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch data-density="functional">functional</db-switch>\n <db-switch data-density="regular">regular (Default)</db-switch>\n <db-switch data-density="expressive">expressive</db-switch>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-disabled",\n})\nexport class SwitchDisabled {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch disabled={false}>(Default) False</db-switch>\n <db-switch disabled={true}>True</db-switch>\n </Fragment>\n );\n }\n}\n', "examples.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-examples",\n})\nexport class SwitchExamples {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-examples");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch icon="cross_circle" iconTrailing="clock" visualAid={true}>\n Custom Icons\n </db-switch>\n <db-switch validMessage="Valid" visualAid={true} required={true}>\n Required + Visual Aid\n </db-switch>\n </Fragment>\n );\n }\n}\n', "required.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-required",\n})\nexport class SwitchRequired {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-required");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch required={false}>(Default) False</db-switch>\n <db-switch required={true}>True</db-switch>\n </Fragment>\n );\n }\n}\n', "show-label.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-show-label",\n})\nexport class SwitchShowLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-show-label");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch showLabel={true}>(Default) True</db-switch>\n <div>\n <db-switch showLabel={false}>False</db-switch>\n <db-infotext semantic="informational" icon="none">\n False\n </db-infotext>\n </div>\n </Fragment>\n );\n }\n}\n', "show-message.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-show-message",\n})\nexport class SwitchShowMessage {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-show-message");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch>(Default) False</db-switch>\n <db-switch message="Message" showMessage={true}>\n True\n </db-switch>\n </Fragment>\n );\n }\n}\n', "show-required-asterisk.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-show-required-asterisk",\n})\nexport class SwitchShowRequiredAsterisk {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-show-required-asterisk");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch required={true} showRequiredAsterisk={true}>\n (Default) True\n </db-switch>\n <db-switch required={true} showRequiredAsterisk={false}>\n False\n </db-switch>\n </Fragment>\n );\n }\n}\n', "size.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-size",\n})\nexport class SwitchSize {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-size");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch>(Default) Medium</db-switch>\n <db-switch size="small">Small</db-switch>\n </Fragment>\n );\n }\n}\n', "validation.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-validation",\n})\nexport class SwitchValidation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-validation");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch>(Default) No validation</db-switch>\n <db-switch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </db-switch>\n <db-switch\n validation="valid"\n validMessage="Valid message"\n checked={true}\n >\n Valid\n </db-switch>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-variant",\n})\nexport class SwitchVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-variant");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch label="(Default) Trailing">(Default) Trailing</db-switch>\n <db-switch label="Leading" variant="leading">\n Leading\n </db-switch>\n </Fragment>\n );\n }\n}\n', "visual-aid.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment, State } from "@stencil/core";\n\n@Component({\n tag: "switch-visual-aid",\n})\nexport class SwitchVisualAid {\n private _ref!: HTMLElement;\n\n @State() checked = true;\n @State() checked2 = true;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-visual-aid");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch visualAid={false}>(Default) False (Unchecked)</db-switch>\n <db-switch visualAid={false} checked={this.checked} {...{}}>\n (Default) False (Checked)\n </db-switch>\n <db-switch iconLeading="moon" iconTrailing="sun" visualAid={true}>\n True (Unchecked)\n </db-switch>\n <db-switch\n iconLeading="moon"\n iconTrailing="sun"\n visualAid={true}\n checked={this.checked2}\n {...{}}\n >\n True (Checked)\n </db-switch>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBSwitch</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-switch">Test</div>\n </body>\n</html>\n' } } }, "tab-item": { props: "import {\n ActiveProps,\n ChangeEventProps,\n ChangeEventState,\n GlobalProps,\n GlobalState,\n IconLeadingProps,\n IconProps,\n IconTrailingProps,\n InitializedState,\n NameProps,\n NameState,\n ShowIconLeadingProps,\n ShowIconProps,\n ShowIconTrailingProps\n} from '../../shared/model';\n\nexport type DBTabItemDefaultProps = {\n /**\n * To control the component\n */\n checked?: boolean | string;\n\n /**\n * The disabled attribute can be set to keep a user from clicking on the tab-item.\n */\n disabled?: boolean | string;\n /**\n * The label of the tab-item, if you don't want to use children.\n */\n label?: string;\n /**\n * Define the text next to the icon specified via the icon Property to get hidden.\n */\n noText?: boolean | string;\n};\n\nexport type DBTabItemProps = GlobalProps &\n DBTabItemDefaultProps &\n IconProps &\n IconTrailingProps &\n IconLeadingProps &\n ShowIconLeadingProps &\n ShowIconTrailingProps &\n ActiveProps &\n ChangeEventProps<HTMLInputElement> &\n ShowIconProps &\n NameProps;\n\nexport type DBTabItemDefaultState = {\n _selected: boolean;\n _listenerAdded: boolean;\n boundSetSelectedOnChange?: (event: any) => void;\n setSelectedOnChange: (event: any) => void;\n};\n\nexport type DBTabItemState = DBTabItemDefaultState &\n GlobalState &\n ChangeEventState<HTMLInputElement> &\n InitializedState &\n NameState;\n", examples: ["Density", "States", "Show Icon Leading", "Show Icon Trailing", "Behavior", "Content Alignment Full Width"], exampleCode: { react: { "behavior.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemBehavior(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem label="(Default) Auto Width" />\n </DBTabList>\n <DBTabList\n style={{\n blockSize: "100%",\n }}\n >\n <DBTabItem label="Width full" />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemBehavior;\n', "content-alignment-full-width.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemContentAlignmentFullWidth(props: any) {\n return (\n <>\n <DBTabList\n style={{\n blockSize: "100%",\n }}\n >\n <DBTabItem label="Left" />\n </DBTabList>\n <DBTabList\n style={{\n blockSize: "100%",\n }}\n >\n <DBTabItem label="Centered" />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemContentAlignmentFullWidth;\n', "density.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemDensity(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem data-density="functional" label="Functional" />\n </DBTabList>\n <DBTabList>\n <DBTabItem data-density="regular" label="(Default) Regular" />\n </DBTabList>\n <DBTabList>\n <DBTabItem data-density="expressive" label="Expressive" />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemDensity;\n', "show-icon-leading.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemShowIconLeading(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem\n label="(Default) False"\n icon="x_placeholder"\n showIcon={false}\n />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="True" icon="x_placeholder" showIcon />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemShowIconLeading;\n', "show-icon-trailing.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemShowIconTrailing(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem\n label="(Default) False"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n showIcon={false}\n showIconTrailing={false}\n />\n </DBTabList>\n <DBTabList>\n <DBTabItem\n label="True"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n showIcon\n showIconTrailing\n />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemShowIconTrailing;\n', "states.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemStates(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem label="(Default) Enabled" />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="active" active />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="disabled" disabled />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemStates;\n' }, angular: { "behavior.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-behavior",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item label="(Default) Auto Width"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n [ngStyle]="{\n blockSize: \'100%\'\n }"\n ><db-tab-item label="Width full"></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemBehavior implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-behavior");\n }\n }\n}\n', "content-alignment-full-width.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-content-alignment-full-width",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n [ngStyle]="{\n blockSize: \'100%\'\n }"\n ><db-tab-item label="Left"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n [ngStyle]="{\n blockSize: \'100%\'\n }"\n ><db-tab-item label="Centered"></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemContentAlignmentFullWidth implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(\n element,\n "tab-item-content-alignment-full-width"\n );\n }\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-density",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item data-density="functional" label="Functional"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n data-density="regular"\n label="(Default) Regular"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n data-density="expressive"\n label="Expressive"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-density");\n }\n }\n}\n', "show-icon-leading.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-show-icon-leading",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item\n label="(Default) False"\n icon="x_placeholder"\n [showIcon]="false"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n label="True"\n icon="x_placeholder"\n [showIcon]="true"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemShowIconLeading implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-show-icon-leading");\n }\n }\n}\n', "show-icon-trailing.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-show-icon-trailing",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item\n label="(Default) False"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n [showIcon]="false"\n [showIconTrailing]="false"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n label="True"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n [showIcon]="true"\n [showIconTrailing]="true"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemShowIconTrailing implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-show-icon-trailing");\n }\n }\n}\n', "states.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-states",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item label="(Default) Enabled"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item label="active" [active]="true"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n label="disabled"\n [disabled]="true"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemStates implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-states");\n }\n }\n}\n' }, vue: { "behavior.example.vue": `<template>
38913
+ </script>` }, "web-components": { "alignment-column.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-alignment-column",\n})\nexport class StackAlignmentColumn {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-alignment-column");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Stretch\n </db-infotext>\n <db-stack\n alignment="stretch"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Start\n </db-infotext>\n <db-stack\n alignment="start"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n alignment="center"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n alignment="end"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "alignment-row.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-alignment-row",\n})\nexport class StackAlignmentRow {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-alignment-row");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Stretch\n </db-infotext>\n <db-stack\n alignment="stretch"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Start\n </db-infotext>\n <db-stack\n alignment="start"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n alignment="center"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n alignment="end"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-density",\n})\nexport class StackDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-density");\n }\n\n render() {\n return (\n <Fragment>\n <div\n data-density="functional"\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Functional\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Regular\n </db-infotext>\n <db-stack\n data-density="regular"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n data-density="expressive"\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Expressive\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "direction.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-direction",\n})\nexport class StackDirection {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-direction");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Column\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Row\n </db-infotext>\n <db-stack\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "gap.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-gap",\n})\nexport class StackGap {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-gap");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n none\n </db-infotext>\n <db-stack\n gap="none"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 3x-small\n </db-infotext>\n <db-stack\n gap="3x-small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 2x-small\n </db-infotext>\n <db-stack\n gap="2x-small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n x-small\n </db-infotext>\n <db-stack\n gap="x-small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) small\n </db-infotext>\n <db-stack\n gap="small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n medium\n </db-infotext>\n <db-stack\n gap="medium"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n large\n </db-infotext>\n <db-stack\n gap="large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n x-large\n </db-infotext>\n <db-stack\n gap="x-large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 2x-large\n </db-infotext>\n <db-stack\n gap="2x-large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 3x-large\n </db-infotext>\n <db-stack\n gap="3x-large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "justify-content-column.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-justify-content-column",\n})\nexport class StackJustifyContentColumn {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-justify-content-column");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Start\n </db-infotext>\n <db-stack\n justifyContent="start"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n justifyContent="center"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n justifyContent="end"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Space-Between\n </db-infotext>\n <db-stack\n justifyContent="space-between"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "justify-content-row.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-justify-content-row",\n})\nexport class StackJustifyContentRow {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-justify-content-row");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Start\n </db-infotext>\n <db-stack\n justifyContent="start"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n justifyContent="center"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n justifyContent="end"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Space-Between\n </db-infotext>\n <db-stack\n justifyContent="space-between"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBDivider } from "../../divider/divider";\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-variant",\n})\nexport class StackVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-variant");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Simple\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Divider\n </db-infotext>\n <db-stack\n variant="divider"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <db-divider></db-divider>\n <span class="dummy-component">Content 2</span>\n <db-divider></db-divider>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "wrap.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-wrap",\n})\nexport class StackWrap {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-wrap");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "160px",\n height: "88px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) No Wrap: Column\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "160px",\n height: "88px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n No Wrap: Row\n </db-infotext>\n <db-stack\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "160px",\n height: "120px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Wrap: Column\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n wrap={true}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "180px",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Wrap: Row\n </db-infotext>\n <db-stack\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n wrap={true}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBStack</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-stack">Test</div>\n </body>\n</html>\n' } } }, switch: { props: "import {\n ChangeEventProps,\n ChangeEventState,\n FocusEventProps,\n FocusEventState,\n FormCheckProps,\n FormMessageProps,\n FormProps,\n FormState,\n FromValidState,\n GeneralKeyboardEvent,\n GlobalProps,\n GlobalState,\n IconLeadingProps,\n IconProps,\n IconTrailingProps,\n LabelVariantHorizontalType,\n SizeProps\n} from '../../shared/model';\n\nexport type DBSwitchDefaultProps = {\n /**\n * Add additional icons to indicate active/inactive state.\n */\n visualAid?: boolean | string;\n\n /**\n * Change the variant of the label to `trailing` or `leading`. Defaults to `trailing`\n */\n variant?: LabelVariantHorizontalType;\n};\n\nexport type DBSwitchProps = GlobalProps &\n ChangeEventProps<HTMLInputElement> &\n FocusEventProps<HTMLInputElement> &\n FormProps &\n FormCheckProps &\n Omit<FormMessageProps, 'variant'> &\n SizeProps &\n IconProps &\n IconTrailingProps &\n IconLeadingProps &\n DBSwitchDefaultProps;\n\nexport type DBSwitchDefaultState = {\n handleKeyDown: (event: GeneralKeyboardEvent<HTMLInputElement>) => void;\n};\n\nexport type DBSwitchState = DBSwitchDefaultState &\n GlobalState &\n ChangeEventState<HTMLInputElement> &\n FocusEventState<HTMLInputElement> &\n FormState &\n FromValidState;\n", examples: ["Density", "Checked", "Disabled", "Visual Aid", "Size", "Variant", "Show Label", "Required", "Show Required Asterisk", "Validation", "Show Message", "Examples"], exampleCode: { react: { "checked.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchChecked(props: any) {\n const [checked, setChecked] = useState<boolean>(() => true);\n\n return (\n <>\n <DBSwitch checked={false}>(Default) False</DBSwitch>\n <DBSwitch\n checked={checked}\n {...{\n onChange: (event: any) =>\n setChecked((event.target as HTMLInputElement).checked),\n }}\n >\n True\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchChecked;\n', "density.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchDensity(props: any) {\n return (\n <>\n <DBSwitch data-density="functional">functional</DBSwitch>\n <DBSwitch data-density="regular">regular (Default)</DBSwitch>\n <DBSwitch data-density="expressive">expressive</DBSwitch>\n </>\n );\n}\n\nexport default SwitchDensity;\n', "disabled.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchDisabled(props: any) {\n return (\n <>\n <DBSwitch disabled={false}>(Default) False</DBSwitch>\n <DBSwitch disabled>True</DBSwitch>\n </>\n );\n}\n\nexport default SwitchDisabled;\n', "examples.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchExamples(props: any) {\n return (\n <>\n <DBSwitch icon="cross_circle" iconTrailing="clock" visualAid>\n Custom Icons\n </DBSwitch>\n <DBSwitch validMessage="Valid" visualAid required>\n Required + Visual Aid\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchExamples;\n', "required.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchRequired(props: any) {\n return (\n <>\n <DBSwitch required={false}>(Default) False</DBSwitch>\n <DBSwitch required>True</DBSwitch>\n </>\n );\n}\n\nexport default SwitchRequired;\n', "show-label.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBSwitch from "../switch";\n\nfunction SwitchShowLabel(props: any) {\n return (\n <>\n <DBSwitch showLabel>(Default) True</DBSwitch>\n <div>\n <DBSwitch showLabel={false}>False</DBSwitch>\n <DBInfotext semantic="informational" icon="none">\n False\n </DBInfotext>\n </div>\n </>\n );\n}\n\nexport default SwitchShowLabel;\n', "show-message.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchShowMessage(props: any) {\n return (\n <>\n <DBSwitch>(Default) False</DBSwitch>\n <DBSwitch message="Message" showMessage>\n True\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchShowMessage;\n', "show-required-asterisk.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchShowRequiredAsterisk(props: any) {\n return (\n <>\n <DBSwitch required showRequiredAsterisk>\n (Default) True\n </DBSwitch>\n <DBSwitch required showRequiredAsterisk={false}>\n False\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchShowRequiredAsterisk;\n', "size.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchSize(props: any) {\n return (\n <>\n <DBSwitch>(Default) Medium</DBSwitch>\n <DBSwitch size="small">Small</DBSwitch>\n </>\n );\n}\n\nexport default SwitchSize;\n', "validation.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchValidation(props: any) {\n return (\n <>\n <DBSwitch>(Default) No validation</DBSwitch>\n <DBSwitch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </DBSwitch>\n <DBSwitch validation="valid" validMessage="Valid message" checked>\n Valid\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchValidation;\n', "variant.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchVariant(props: any) {\n return (\n <>\n <DBSwitch label="(Default) Trailing">(Default) Trailing</DBSwitch>\n <DBSwitch label="Leading" variant="leading">\n Leading\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchVariant;\n', "visual-aid.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchVisualAid(props: any) {\n const [checked, setChecked] = useState<boolean>(() => true);\n\n const [checked2, setChecked2] = useState<boolean>(() => true);\n\n return (\n <>\n <DBSwitch visualAid={false}>(Default) False (Unchecked)</DBSwitch>\n <DBSwitch\n visualAid={false}\n checked={checked}\n {...{\n onChange: (event: any) =>\n setChecked((event.target as HTMLInputElement).checked),\n }}\n >\n (Default) False (Checked)\n </DBSwitch>\n <DBSwitch iconLeading="moon" iconTrailing="sun" visualAid>\n True (Unchecked)\n </DBSwitch>\n <DBSwitch\n iconLeading="moon"\n iconTrailing="sun"\n visualAid\n checked={checked2}\n {...{\n onChange: (event: any) =>\n setChecked((event.target as HTMLInputElement).checked),\n }}\n >\n True (Checked)\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchVisualAid;\n' }, angular: { "checked.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-checked",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [checked]="false">(Default) False</db-switch>\n <db-switch [checked]="checked()"> True </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchChecked implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n checked = signal<boolean>(true);\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-checked");\n }\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-density",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch data-density="functional">functional</db-switch>\n <db-switch data-density="regular">regular (Default)</db-switch>\n <db-switch data-density="expressive">expressive</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-density");\n }\n }\n}\n', "disabled.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-disabled",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [disabled]="false">(Default) False</db-switch>\n <db-switch [disabled]="true">True</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchDisabled implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-disabled");\n }\n }\n}\n', "examples.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-examples",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch icon="cross_circle" iconTrailing="clock" [visualAid]="true">\n Custom Icons\n </db-switch>\n <db-switch validMessage="Valid" [visualAid]="true" [required]="true">\n Required + Visual Aid\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchExamples implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-examples");\n }\n }\n}\n', "required.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-required",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [required]="false">(Default) False</db-switch>\n <db-switch [required]="true">True</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchRequired implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-required");\n }\n }\n}\n', "show-label.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-show-label",\n standalone: true,\n imports: [CommonModule, DBSwitch, DBInfotext],\n template: `<ng-container\n ><db-switch [showLabel]="true">(Default) True</db-switch>\n <div>\n <db-switch [showLabel]="false">False</db-switch>\n <db-infotext semantic="informational" icon="none"> False </db-infotext>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchShowLabel implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-show-label");\n }\n }\n}\n', "show-message.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-show-message",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch>(Default) False</db-switch>\n <db-switch message="Message" [showMessage]="true">\n True\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchShowMessage implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-show-message");\n }\n }\n}\n', "show-required-asterisk.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-show-required-asterisk",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [required]="true" [showRequiredAsterisk]="true">\n (Default) True\n </db-switch>\n <db-switch [required]="true" [showRequiredAsterisk]="false">\n False\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchShowRequiredAsterisk implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-show-required-asterisk");\n }\n }\n}\n', "size.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-size",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch>(Default) Medium</db-switch>\n <db-switch size="small">Small</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchSize implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-size");\n }\n }\n}\n', "validation.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-validation",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch>(Default) No validation</db-switch>\n <db-switch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </db-switch>\n <db-switch validation="valid" validMessage="Valid message" [checked]="true">\n Valid\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchValidation implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-validation");\n }\n }\n}\n', "variant.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-variant",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch label="(Default) Trailing">(Default) Trailing</db-switch>\n <db-switch label="Leading" variant="leading">\n Leading\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchVariant implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-variant");\n }\n }\n}\n', "visual-aid.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-visual-aid",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [visualAid]="false">(Default) False (Unchecked)</db-switch>\n <db-switch [visualAid]="false" [checked]="checked()">\n (Default) False (Checked)\n </db-switch>\n <db-switch iconLeading="moon" iconTrailing="sun" [visualAid]="true">\n True (Unchecked)\n </db-switch>\n <db-switch\n iconLeading="moon"\n iconTrailing="sun"\n [visualAid]="true"\n [checked]="checked2()"\n >\n True (Checked)\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchVisualAid implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n checked = signal<boolean>(true);\n checked2 = signal<boolean>(true);\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-visual-aid");\n }\n }\n}\n' }, vue: { "checked.example.vue": '<template>\n <DBSwitch :checked="false">(Default) False</DBSwitch>\n <DBSwitch :checked="checked" v-bind="{}"> True </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBSwitch from "../switch.vue";\n\nconst checked = ref<boolean>(true);\n</script>', "density.example.vue": '<template>\n <DBSwitch data-density="functional">functional</DBSwitch>\n <DBSwitch data-density="regular">regular (Default)</DBSwitch>\n <DBSwitch data-density="expressive">expressive</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "disabled.example.vue": '<template>\n <DBSwitch :disabled="false">(Default) False</DBSwitch>\n <DBSwitch :disabled="true">True</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "examples.example.vue": '<template>\n <DBSwitch icon="cross_circle" iconTrailing="clock" :visualAid="true">\n Custom Icons\n </DBSwitch>\n <DBSwitch validMessage="Valid" :visualAid="true" :required="true">\n Required + Visual Aid\n </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "required.example.vue": '<template>\n <DBSwitch :required="false">(Default) False</DBSwitch>\n <DBSwitch :required="true">True</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "show-label.example.vue": '<template>\n <DBSwitch :showLabel="true">(Default) True</DBSwitch>\n <div>\n <DBSwitch :showLabel="false">False</DBSwitch\n ><DBInfotext semantic="informational" icon="none"> False </DBInfotext>\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBSwitch from "../switch.vue";\n</script>', "show-message.example.vue": '<template>\n <DBSwitch>(Default) False</DBSwitch>\n <DBSwitch message="Message" :showMessage="true"> True </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "show-required-asterisk.example.vue": '<template>\n <DBSwitch :required="true" :showRequiredAsterisk="true">\n (Default) True\n </DBSwitch>\n <DBSwitch :required="true" :showRequiredAsterisk="false"> False </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "size.example.vue": '<template>\n <DBSwitch>(Default) Medium</DBSwitch>\n <DBSwitch size="small">Small</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "validation.example.vue": '<template>\n <DBSwitch>(Default) No validation</DBSwitch>\n <DBSwitch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </DBSwitch>\n <DBSwitch validation="valid" validMessage="Valid message" :checked="true">\n Valid\n </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "variant.example.vue": '<template>\n <DBSwitch label="(Default) Trailing">(Default) Trailing</DBSwitch>\n <DBSwitch label="Leading" variant="leading"> Leading </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "visual-aid.example.vue": '<template>\n <DBSwitch :visualAid="false">(Default) False (Unchecked)</DBSwitch>\n <DBSwitch :visualAid="false" :checked="checked" v-bind="{}">\n (Default) False (Checked)\n </DBSwitch>\n <DBSwitch iconLeading="moon" iconTrailing="sun" :visualAid="true">\n True (Unchecked)\n </DBSwitch>\n <DBSwitch\n iconLeading="moon"\n iconTrailing="sun"\n :visualAid="true"\n :checked="checked2"\n v-bind="{}"\n >\n True (Checked)\n </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBSwitch from "../switch.vue";\n\nconst checked = ref<boolean>(true);\nconst checked2 = ref<boolean>(true);\n</script>' }, "web-components": { "checked.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment, State } from "@stencil/core";\n\n@Component({\n tag: "switch-checked",\n})\nexport class SwitchChecked {\n private _ref!: HTMLElement;\n\n @State() checked = true;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-checked");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch checked={false}>(Default) False</db-switch>\n <db-switch checked={this.checked} {...{}}>\n True\n </db-switch>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-density",\n})\nexport class SwitchDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch data-density="functional">functional</db-switch>\n <db-switch data-density="regular">regular (Default)</db-switch>\n <db-switch data-density="expressive">expressive</db-switch>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-disabled",\n})\nexport class SwitchDisabled {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch disabled={false}>(Default) False</db-switch>\n <db-switch disabled={true}>True</db-switch>\n </Fragment>\n );\n }\n}\n', "examples.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-examples",\n})\nexport class SwitchExamples {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-examples");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch icon="cross_circle" iconTrailing="clock" visualAid={true}>\n Custom Icons\n </db-switch>\n <db-switch validMessage="Valid" visualAid={true} required={true}>\n Required + Visual Aid\n </db-switch>\n </Fragment>\n );\n }\n}\n', "required.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-required",\n})\nexport class SwitchRequired {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-required");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch required={false}>(Default) False</db-switch>\n <db-switch required={true}>True</db-switch>\n </Fragment>\n );\n }\n}\n', "show-label.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-show-label",\n})\nexport class SwitchShowLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-show-label");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch showLabel={true}>(Default) True</db-switch>\n <div>\n <db-switch showLabel={false}>False</db-switch>\n <db-infotext semantic="informational" icon="none">\n False\n </db-infotext>\n </div>\n </Fragment>\n );\n }\n}\n', "show-message.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-show-message",\n})\nexport class SwitchShowMessage {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-show-message");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch>(Default) False</db-switch>\n <db-switch message="Message" showMessage={true}>\n True\n </db-switch>\n </Fragment>\n );\n }\n}\n', "show-required-asterisk.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-show-required-asterisk",\n})\nexport class SwitchShowRequiredAsterisk {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-show-required-asterisk");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch required={true} showRequiredAsterisk={true}>\n (Default) True\n </db-switch>\n <db-switch required={true} showRequiredAsterisk={false}>\n False\n </db-switch>\n </Fragment>\n );\n }\n}\n', "size.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-size",\n})\nexport class SwitchSize {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-size");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch>(Default) Medium</db-switch>\n <db-switch size="small">Small</db-switch>\n </Fragment>\n );\n }\n}\n', "validation.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-validation",\n})\nexport class SwitchValidation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-validation");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch>(Default) No validation</db-switch>\n <db-switch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </db-switch>\n <db-switch\n validation="valid"\n validMessage="Valid message"\n checked={true}\n >\n Valid\n </db-switch>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-variant",\n})\nexport class SwitchVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-variant");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch label="(Default) Trailing">(Default) Trailing</db-switch>\n <db-switch label="Leading" variant="leading">\n Leading\n </db-switch>\n </Fragment>\n );\n }\n}\n', "visual-aid.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment, State } from "@stencil/core";\n\n@Component({\n tag: "switch-visual-aid",\n})\nexport class SwitchVisualAid {\n private _ref!: HTMLElement;\n\n @State() checked = true;\n @State() checked2 = true;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-visual-aid");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch visualAid={false}>(Default) False (Unchecked)</db-switch>\n <db-switch visualAid={false} checked={this.checked} {...{}}>\n (Default) False (Checked)\n </db-switch>\n <db-switch iconLeading="moon" iconTrailing="sun" visualAid={true}>\n True (Unchecked)\n </db-switch>\n <db-switch\n iconLeading="moon"\n iconTrailing="sun"\n visualAid={true}\n checked={this.checked2}\n {...{}}\n >\n True (Checked)\n </db-switch>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBSwitch</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-switch">Test</div>\n </body>\n</html>\n' } } }, "tab-item": { props: "import {\n ActiveProps,\n ClickEventProps,\n GlobalProps,\n GlobalState,\n IconLeadingProps,\n IconProps,\n IconTrailingProps,\n InitializedState,\n ShowIconLeadingProps,\n ShowIconProps,\n ShowIconTrailingProps,\n WidthProps\n} from '../../shared/model';\n\nexport type DBTabItemDefaultProps = {\n /**\n * The disabled attribute can be set to keep a user from clicking on the tab-item.\n */\n disabled?: boolean | string;\n /**\n * The label of the tab-item, if you don't want to use children.\n */\n label?: string;\n /**\n * Define the text next to the icon specified via the icon Property to get hidden.\n */\n noText?: boolean | string;\n /**\n * Set the tabIndex manually (internal use for roving tabindex).\n */\n tabIndex?: number | string;\n /**\n * The id of the panel this tab controls (WAI-ARIA).\n */\n ariaControls?: string;\n /**\n * Semantic value of this tab item. When set, onIndexChange will emit this value\n * (via the onValueChange event) instead of only the numeric index.\n * Useful for form binding (e.g. Angular FormControl, React useState).\n */\n value?: string;\n};\n\nexport type DBTabItemProps = DBTabItemDefaultProps &\n GlobalProps &\n ClickEventProps<HTMLButtonElement> &\n IconProps &\n ShowIconProps &\n IconTrailingProps &\n IconLeadingProps &\n ShowIconTrailingProps &\n ShowIconLeadingProps &\n ActiveProps &\n WidthProps;\n\nexport type DBTabItemDefaultState = {\n internalActive: boolean | undefined;\n internalTabIndex: number;\n getCurrentTabIndex: () => number;\n _resizeObserver: ResizeObserver | null | undefined;\n _ariaSelectedListener: { fn: (event: any) => void } | null;\n handleClick: (event: any) => void;\n isTruncated: boolean;\n checkTruncation: () => void;\n tooltipText: string;\n};\n\nexport type DBTabItemState = DBTabItemDefaultState &\n GlobalState &\n InitializedState;\n", examples: ["Density", "States", "Show Icon Leading", "Show Icon Trailing", "Behavior", "Slot with Badge", "Content Alignment Full Width"], exampleCode: { react: { "behavior.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemBehavior(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem label="(Default) Auto Width" />\n </DBTabList>\n <DBTabList\n style={{\n blockSize: "100%",\n }}\n >\n <DBTabItem label="Width full" />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemBehavior;\n', "density.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemDensity(props: any) {\n return (\n <>\n <DBTabList data-density="functional">\n <DBTabItem label="Functional" />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="(Default) Regular" />\n </DBTabList>\n <DBTabList data-density="expressive">\n <DBTabItem label="Expressive" />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemDensity;\n', "show-icon-leading.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemShowIconLeading(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem\n label="(Default) False"\n icon="x_placeholder"\n showIcon={false}\n />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="True" icon="x_placeholder" showIcon />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemShowIconLeading;\n', "show-icon-trailing.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemShowIconTrailing(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem\n label="(Default) False"\n iconTrailing="x_placeholder"\n showIconTrailing={false}\n />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="True" iconTrailing="x_placeholder" showIconTrailing />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemShowIconTrailing;\n', "slot-with-badge.example.tsx": 'import * as React from "react";\nimport DBBadge from "../../badge/badge";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemSlotWithBadge(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Messages\n <DBBadge semantic="informational">134</DBBadge>\n </span>\n </DBTabItem>\n </DBTabList>\n <DBTabList>\n <DBTabItem>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Notifications\n <DBBadge semantic="neutral">433</DBBadge>\n </span>\n </DBTabItem>\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemSlotWithBadge;\n', "states.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemStates(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem label="(Default) Enabled" />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="active" active />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="disabled" disabled />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemStates;\n', "tab-item-alignment-full-width.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemAlignmentFullWidth(props: any) {\n return (\n <>\n <DBTabList\n style={{\n blockSize: "100%",\n }}\n >\n <DBTabItem label="Left" />\n </DBTabList>\n <DBTabList\n style={{\n blockSize: "100%",\n }}\n >\n <DBTabItem label="Centered" />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemAlignmentFullWidth;\n' }, angular: { "behavior.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-behavior",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item label="(Default) Auto Width"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n [ngStyle]="{\n blockSize: \'100%\'\n }"\n ><db-tab-item label="Width full"></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemBehavior implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-behavior");\n }\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-density",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list data-density="functional"\n ><db-tab-item label="Functional"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item label="(Default) Regular"></db-tab-item\n ></db-tab-list>\n <db-tab-list data-density="expressive"\n ><db-tab-item label="Expressive"></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-density");\n }\n }\n}\n', "show-icon-leading.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-show-icon-leading",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item\n label="(Default) False"\n icon="x_placeholder"\n [showIcon]="false"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n label="True"\n icon="x_placeholder"\n [showIcon]="true"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemShowIconLeading implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-show-icon-leading");\n }\n }\n}\n', "show-icon-trailing.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-show-icon-trailing",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item\n label="(Default) False"\n iconTrailing="x_placeholder"\n [showIconTrailing]="false"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n label="True"\n iconTrailing="x_placeholder"\n [showIconTrailing]="true"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemShowIconTrailing implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-show-icon-trailing");\n }\n }\n}\n', "slot-with-badge.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBBadge } from "../../badge/badge";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-slot-with-badge",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem, DBBadge],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item\n ><span\n [ngStyle]="{\n display: \'flex\',\n alignItems: \'center\',\n gap: \'8px\'\n }"\n >\n Messages\n\n <db-badge semantic="informational">134</db-badge></span\n ></db-tab-item\n ></db-tab-list\n >\n <db-tab-list\n ><db-tab-item\n ><span\n [ngStyle]="{\n display: \'flex\',\n alignItems: \'center\',\n gap: \'8px\'\n }"\n >\n Notifications\n\n <db-badge semantic="neutral">433</db-badge></span\n ></db-tab-item\n ></db-tab-list\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemSlotWithBadge implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-slot-with-badge");\n }\n }\n}\n', "states.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-states",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item label="(Default) Enabled"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item label="active" [active]="true"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n label="disabled"\n [disabled]="true"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemStates implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-states");\n }\n }\n}\n', "tab-item-alignment-full-width.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-alignment-full-width",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n [ngStyle]="{\n blockSize: \'100%\'\n }"\n ><db-tab-item label="Left"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n [ngStyle]="{\n blockSize: \'100%\'\n }"\n ><db-tab-item label="Centered"></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemAlignmentFullWidth implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-alignment-full-width");\n }\n }\n}\n' }, vue: { "behavior.example.vue": `<template>
38737
38914
  <DBTabList><DBTabItem label="(Default) Auto Width"></DBTabItem></DBTabList>
38738
38915
  <DBTabList
38739
38916
  :style="{
@@ -38746,7 +38923,42 @@ import DBStack from "../stack.vue";
38746
38923
  <script setup lang="ts">
38747
38924
  import DBTabList from "../../tab-list/tab-list.vue";
38748
38925
  import DBTabItem from "../tab-item.vue";
38749
- </script>`, "content-alignment-full-width.example.vue": `<template>
38926
+ </script>`, "density.example.vue": '<template>\n <DBTabList data-density="functional"\n ><DBTabItem label="Functional"></DBTabItem\n ></DBTabList>\n <DBTabList><DBTabItem label="(Default) Regular"></DBTabItem></DBTabList>\n <DBTabList data-density="expressive"\n ><DBTabItem label="Expressive"></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "show-icon-leading.example.vue": '<template>\n <DBTabList\n ><DBTabItem\n label="(Default) False"\n icon="x_placeholder"\n :showIcon="false"\n ></DBTabItem\n ></DBTabList>\n <DBTabList\n ><DBTabItem label="True" icon="x_placeholder" :showIcon="true"></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "show-icon-trailing.example.vue": '<template>\n <DBTabList\n ><DBTabItem\n label="(Default) False"\n iconTrailing="x_placeholder"\n :showIconTrailing="false"\n ></DBTabItem\n ></DBTabList>\n <DBTabList\n ><DBTabItem\n label="True"\n iconTrailing="x_placeholder"\n :showIconTrailing="true"\n ></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "slot-with-badge.example.vue": `<template>
38927
+ <DBTabList
38928
+ ><DBTabItem
38929
+ ><span
38930
+ :style="{
38931
+ display: 'flex',
38932
+ alignItems: 'center',
38933
+ gap: '8px',
38934
+ }"
38935
+ >
38936
+ Messages
38937
+ <DBBadge semantic="informational">134</DBBadge></span
38938
+ ></DBTabItem
38939
+ ></DBTabList
38940
+ >
38941
+ <DBTabList
38942
+ ><DBTabItem
38943
+ ><span
38944
+ :style="{
38945
+ display: 'flex',
38946
+ alignItems: 'center',
38947
+ gap: '8px',
38948
+ }"
38949
+ >
38950
+ Notifications
38951
+ <DBBadge semantic="neutral">433</DBBadge></span
38952
+ ></DBTabItem
38953
+ ></DBTabList
38954
+ >
38955
+ </template>
38956
+
38957
+ <script setup lang="ts">
38958
+ import DBBadge from "../../badge/badge.vue";
38959
+ import DBTabList from "../../tab-list/tab-list.vue";
38960
+ import DBTabItem from "../tab-item.vue";
38961
+ </script>`, "states.example.vue": '<template>\n <DBTabList><DBTabItem label="(Default) Enabled"></DBTabItem></DBTabList>\n <DBTabList><DBTabItem label="active" :active="true"></DBTabItem></DBTabList>\n <DBTabList\n ><DBTabItem label="disabled" :disabled="true"></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "tab-item-alignment-full-width.example.vue": `<template>
38750
38962
  <DBTabList
38751
38963
  :style="{
38752
38964
  blockSize: '100%',
@@ -38764,13 +38976,12 @@ import DBTabItem from "../tab-item.vue";
38764
38976
  <script setup lang="ts">
38765
38977
  import DBTabList from "../../tab-list/tab-list.vue";
38766
38978
  import DBTabItem from "../tab-item.vue";
38767
- </script>`, "density.example.vue": '<template>\n <DBTabList\n ><DBTabItem data-density="functional" label="Functional"></DBTabItem\n ></DBTabList>\n <DBTabList\n ><DBTabItem data-density="regular" label="(Default) Regular"></DBTabItem\n ></DBTabList>\n <DBTabList\n ><DBTabItem data-density="expressive" label="Expressive"></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "show-icon-leading.example.vue": '<template>\n <DBTabList\n ><DBTabItem\n label="(Default) False"\n icon="x_placeholder"\n :showIcon="false"\n ></DBTabItem\n ></DBTabList>\n <DBTabList\n ><DBTabItem label="True" icon="x_placeholder" :showIcon="true"></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "show-icon-trailing.example.vue": '<template>\n <DBTabList\n ><DBTabItem\n label="(Default) False"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n :showIcon="false"\n :showIconTrailing="false"\n ></DBTabItem\n ></DBTabList>\n <DBTabList\n ><DBTabItem\n label="True"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n :showIcon="true"\n :showIconTrailing="true"\n ></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "states.example.vue": '<template>\n <DBTabList><DBTabItem label="(Default) Enabled"></DBTabItem></DBTabList>\n <DBTabList><DBTabItem label="active" :active="true"></DBTabItem></DBTabList>\n <DBTabList\n ><DBTabItem label="disabled" :disabled="true"></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>' }, "web-components": { "behavior.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-behavior",\n})\nexport class TabItemBehavior {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tab-item-behavior");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item label="(Default) Auto Width"></db-tab-item>\n </db-tab-list>\n <db-tab-list\n style={{\n blockSize: "100%",\n }}\n >\n <db-tab-item label="Width full"></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "content-alignment-full-width.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-content-alignment-full-width",\n})\nexport class TabItemContentAlignmentFullWidth {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(\n this._ref,\n "tab-item-content-alignment-full-width"\n );\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list\n style={{\n blockSize: "100%",\n }}\n >\n <db-tab-item label="Left"></db-tab-item>\n </db-tab-list>\n <db-tab-list\n style={{\n blockSize: "100%",\n }}\n >\n <db-tab-item label="Centered"></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-density",\n})\nexport class TabItemDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tab-item-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item\n data-density="functional"\n label="Functional"\n ></db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item\n data-density="regular"\n label="(Default) Regular"\n ></db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item\n data-density="expressive"\n label="Expressive"\n ></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "show-icon-leading.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-show-icon-leading",\n})\nexport class TabItemShowIconLeading {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tab-item-show-icon-leading");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item\n label="(Default) False"\n icon="x_placeholder"\n showIcon={false}\n ></db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item\n label="True"\n icon="x_placeholder"\n showIcon={true}\n ></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "show-icon-trailing.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-show-icon-trailing",\n})\nexport class TabItemShowIconTrailing {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tab-item-show-icon-trailing");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item\n label="(Default) False"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n showIcon={false}\n showIconTrailing={false}\n ></db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item\n label="True"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n showIcon={true}\n showIconTrailing={true}\n ></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "states.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-states",\n})\nexport class TabItemStates {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tab-item-states");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item label="(Default) Enabled"></db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item label="active" active={true}></db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item label="disabled" disabled={true}></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabItem</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <label class="db-tab-item" htmlFor="test1" role="tab">\n <input type="radio" name="test" id="test1" />\n label 1\n </label>\n\n <label class="db-tab-item" htmlFor="test2" role="tab">\n <input type="radio" name="test" id="test2" checked />\n active\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test3"\n role="tab"\n data-icon="x_placeholder"\n >\n <input type="radio" name="test" id="test3" />\n icon - text (leading)\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test4"\n role="tab"\n data-icon-trailing="x_placeholder"\n >\n <input type="radio" name="test" id="test4" />\n text - icon (trailing)\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test5"\n role="tab"\n data-icon="x_placeholder"\n data-no-text="true"\n >\n <input type="radio" name="test" id="test5" />\n </label>\n\n <label class="db-tab-item" htmlFor="test6" role="tab" data-width="full">\n <input type="radio" name="test" id="test6" />\n width (full)\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test7"\n role="tab"\n data-width="full"\n data-alignment="center"\n >\n <input type="radio" name="test" id="test7" />\n width full (centered)\n </label>\n </body>\n</html>\n' } } }, "tab-list": { props: "import { GlobalProps } from '../../shared/model';\n\nexport type DBTabListDefaultProps = {};\n\nexport type DBTabListProps = DBTabListDefaultProps & GlobalProps;\n\nexport type DBTabListDefaultState = {};\n\nexport type DBTabListState = DBTabListDefaultState;\n", examples: [], exampleCode: { react: {}, angular: {}, vue: {}, "web-components": {}, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabList</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <h1>Horizontal</h1>\n <div\n class="db-tab-list"\n data-orientation="horizontal"\n aria-orientation="horizontal"\n >\n <label class="db-tab" htmlFor="test1" role="tab">\n <input type="radio" name="test" id="test1" />\n label 1\n </label>\n\n <label class="db-tab" htmlFor="test2" role="tab">\n <input type="radio" name="test" id="test2" checked />\n active\n </label>\n\n <label\n class="db-tab"\n htmlFor="test3"\n role="tab"\n data-icon="x_placeholder"\n >\n <input type="radio" name="test" id="test3" />\n icon - text (leading)\n </label>\n\n <label\n class="db-tab"\n htmlFor="test4"\n role="tab"\n data-icon-trailing="x_placeholder"\n >\n <input type="radio" name="test" id="test4" />\n text - icon (trailing)\n </label>\n </div>\n\n <h1>Vertical</h1>\n <div\n class="db-tab-list"\n data-orientation="vertical"\n aria-orientation="vertical"\n >\n <label class="db-tab" htmlFor="test1v" role="tab">\n <input type="radio" name="testv" id="test1v" />\n label 1\n </label>\n\n <label class="db-tab" htmlFor="test2v" role="tab">\n <input type="radio" name="testv" id="test2v" checked />\n active\n </label>\n\n <label\n class="db-tab"\n htmlFor="test3v"\n role="tab"\n data-icon="x_placeholder"\n >\n <input type="radio" name="testv" id="test3v" />\n icon - text (leading)\n </label>\n\n <label\n class="db-tab"\n htmlFor="test4v"\n role="tab"\n data-icon-trailing="x_placeholder"\n >\n <input type="radio" name="testv" id="test4v" />\n text - icon (trailing)\n </label>\n </div>\n </body>\n</html>\n' } } }, "tab-panel": { props: "import { GlobalProps, GlobalState } from '../../shared/model';\n\nexport type DBTabPanelDefaultProps = {\n /**\n * The content if you don't want to use children.\n */\n content?: string;\n};\n\nexport type DBTabPanelProps = DBTabPanelDefaultProps & GlobalProps;\n\nexport type DBTabPanelDefaultState = {};\n\nexport type DBTabPanelState = DBTabPanelDefaultState & GlobalState;\n", examples: [], exampleCode: { react: {}, angular: {}, vue: {}, "web-components": {}, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabPanel</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <article class="db-tab-panel" role="tabpanel">Test</article>\n </body>\n</html>\n' } } }, tabs: { props: `import {
38768
- AlignmentProps,
38979
+ </script>` }, "web-components": { "behavior.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-behavior",\n})\nexport class TabItemBehavior {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tab-item-behavior");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item label="(Default) Auto Width"></db-tab-item>\n </db-tab-list>\n <db-tab-list\n style={{\n blockSize: "100%",\n }}\n >\n <db-tab-item label="Width full"></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-density",\n})\nexport class TabItemDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tab-item-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list data-density="functional">\n <db-tab-item label="Functional"></db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item label="(Default) Regular"></db-tab-item>\n </db-tab-list>\n <db-tab-list data-density="expressive">\n <db-tab-item label="Expressive"></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "show-icon-leading.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-show-icon-leading",\n})\nexport class TabItemShowIconLeading {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tab-item-show-icon-leading");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item\n label="(Default) False"\n icon="x_placeholder"\n showIcon={false}\n ></db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item\n label="True"\n icon="x_placeholder"\n showIcon={true}\n ></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "show-icon-trailing.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-show-icon-trailing",\n})\nexport class TabItemShowIconTrailing {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tab-item-show-icon-trailing");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item\n label="(Default) False"\n iconTrailing="x_placeholder"\n showIconTrailing={false}\n ></db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item\n label="True"\n iconTrailing="x_placeholder"\n showIconTrailing={true}\n ></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "slot-with-badge.example.tsx": 'import { DBBadge } from "../../badge/badge";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-slot-with-badge",\n})\nexport class TabItemSlotWithBadge {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tab-item-slot-with-badge");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Messages\n <db-badge semantic="informational">134</db-badge>\n </span>\n </db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Notifications\n <db-badge semantic="neutral">433</db-badge>\n </span>\n </db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "states.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-states",\n})\nexport class TabItemStates {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tab-item-states");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item label="(Default) Enabled"></db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item label="active" active={true}></db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item label="disabled" disabled={true}></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "tab-item-alignment-full-width.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-alignment-full-width",\n})\nexport class TabItemAlignmentFullWidth {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tab-item-alignment-full-width");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list\n style={{\n blockSize: "100%",\n }}\n >\n <db-tab-item label="Left"></db-tab-item>\n </db-tab-list>\n <db-tab-list\n style={{\n blockSize: "100%",\n }}\n >\n <db-tab-item label="Centered"></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabItem</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <label class="db-tab-item" htmlFor="test1" role="tab">\n <input type="radio" name="test" id="test1" />\n label 1\n </label>\n\n <label class="db-tab-item" htmlFor="test2" role="tab">\n <input type="radio" name="test" id="test2" checked />\n active\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test3"\n role="tab"\n data-icon="x_placeholder"\n >\n <input type="radio" name="test" id="test3" />\n icon - text (leading)\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test4"\n role="tab"\n data-icon-trailing="x_placeholder"\n >\n <input type="radio" name="test" id="test4" />\n text - icon (trailing)\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test5"\n role="tab"\n data-icon="x_placeholder"\n data-no-text="true"\n >\n <input type="radio" name="test" id="test5" />\n </label>\n\n <label class="db-tab-item" htmlFor="test6" role="tab" data-width="full">\n <input type="radio" name="test" id="test6" />\n width (full)\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test7"\n role="tab"\n data-width="full"\n data-alignment="center"\n >\n <input type="radio" name="test" id="test7" />\n width full (centered)\n </label>\n </body>\n</html>\n' } } }, "tab-list": { props: "import { GlobalProps, GlobalState, OrientationProps } from '../../shared/model';\n\nexport type DBTabListDefaultProps = {\n /**\n * Defines a string value that labels the current element (WAI-ARIA).\n */\n ariaLabel?: string;\n\n /**\n * Identifies the element (or elements) that labels the current element (WAI-ARIA).\n */\n ariaLabelledby?: string;\n};\n\nexport type DBTabListProps = DBTabListDefaultProps &\n GlobalProps &\n OrientationProps;\n\nexport interface DBTabListState extends GlobalState {\n _id?: string;\n}\n", examples: [], exampleCode: { react: {}, angular: {}, vue: {}, "web-components": {}, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabList</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <h1>Horizontal</h1>\n <div\n class="db-tab-list"\n data-orientation="horizontal"\n aria-orientation="horizontal"\n >\n <label class="db-tab" htmlFor="test1" role="tab">\n <input type="radio" name="test" id="test1" />\n label 1\n </label>\n\n <label class="db-tab" htmlFor="test2" role="tab">\n <input type="radio" name="test" id="test2" checked />\n active\n </label>\n\n <label\n class="db-tab"\n htmlFor="test3"\n role="tab"\n data-icon="x_placeholder"\n >\n <input type="radio" name="test" id="test3" />\n icon - text (leading)\n </label>\n\n <label\n class="db-tab"\n htmlFor="test4"\n role="tab"\n data-icon-trailing="x_placeholder"\n >\n <input type="radio" name="test" id="test4" />\n text - icon (trailing)\n </label>\n </div>\n\n <h1>Vertical</h1>\n <div\n class="db-tab-list"\n data-orientation="vertical"\n aria-orientation="vertical"\n >\n <label class="db-tab" htmlFor="test1v" role="tab">\n <input type="radio" name="testv" id="test1v" />\n label 1\n </label>\n\n <label class="db-tab" htmlFor="test2v" role="tab">\n <input type="radio" name="testv" id="test2v" checked />\n active\n </label>\n\n <label\n class="db-tab"\n htmlFor="test3v"\n role="tab"\n data-icon="x_placeholder"\n >\n <input type="radio" name="testv" id="test3v" />\n icon - text (leading)\n </label>\n\n <label\n class="db-tab"\n htmlFor="test4v"\n role="tab"\n data-icon-trailing="x_placeholder"\n >\n <input type="radio" name="testv" id="test4v" />\n text - icon (trailing)\n </label>\n </div>\n </body>\n</html>\n' } } }, "tab-panel": { props: "import { GlobalProps } from '../../shared/model';\n\nexport type DBTabPanelDefaultProps = {\n /**\n * The content if you don't want to use children.\n */\n content?: string;\n /**\n * If the panel is hidden.\n */\n hidden?: boolean;\n /**\n * The id of the tab that labels this panel (WAI-ARIA).\n */\n ariaLabelledby?: string;\n /**\n * Accessible label for the panel, overrides ariaLabelledby for the accessible name.\n */\n ariaLabel?: string;\n};\n\nexport type DBTabPanelProps = DBTabPanelDefaultProps & GlobalProps;\n", examples: [], exampleCode: { react: {}, angular: {}, vue: {}, "web-components": {}, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabPanel</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <article class="db-tab-panel" role="tabpanel">Test</article>\n </body>\n</html>\n' } } }, tabs: { props: `import {
38769
38980
  GlobalProps,
38770
38981
  InitializedState,
38771
- InputEvent,
38772
38982
  OrientationProps,
38773
- WidthProps
38983
+ TabItemAlignmentProps,
38984
+ WidthType
38774
38985
  } from '../../shared/model';
38775
38986
  import { DBTabItemProps } from '../tab-item/model';
38776
38987
  import { DBTabPanelProps } from '../tab-panel/model';
@@ -38798,6 +39009,13 @@ export type DBTabsDefaultProps = {
38798
39009
  */
38799
39010
  initialSelectedIndex?: number | string;
38800
39011
 
39012
+ /**
39013
+ * Controlled active tab index. When set, the component becomes controlled:
39014
+ * the consumer is responsible for updating this value in the onIndexChange handler.
39015
+ * Takes precedence over initialSelectedIndex after mount.
39016
+ */
39017
+ activeIndex?: number | string;
39018
+
38801
39019
  /**
38802
39020
  * Default behavior is auto selecting the first tab, disable it with 'manually'
38803
39021
  */
@@ -38812,6 +39030,21 @@ export type DBTabsDefaultProps = {
38812
39030
  * Provide simple tabs with label + text as content
38813
39031
  */
38814
39032
  tabs?: DBSimpleTabProps[] | string;
39033
+
39034
+ /**
39035
+ * Width of the tab-items. Auto width based on tab-item size, full width based on parent elements width.
39036
+ */
39037
+ tabItemWidth?: WidthType | string;
39038
+
39039
+ /**
39040
+ * Accessible label for the "scroll towards start" button (i18n). Only used with behavior="arrows".
39041
+ */
39042
+ scrollStartLabel?: string;
39043
+
39044
+ /**
39045
+ * Accessible label for the "scroll towards end" button (i18n). Only used with behavior="arrows".
39046
+ */
39047
+ scrollEndLabel?: string;
38815
39048
  };
38816
39049
 
38817
39050
  export type DBTabsEventProps = {
@@ -38824,40 +39057,99 @@ export type DBTabsEventProps = {
38824
39057
  * Informs the user if the current tab index has changed.
38825
39058
  */
38826
39059
  onIndexChange?: (index?: number) => void;
38827
- /**
38828
- * Informs the user if another tab has been selected.
38829
- */
38830
- onTabSelect?: (event?: InputEvent<HTMLElement>) => void;
38831
39060
 
38832
39061
  /**
38833
- * Informs the user if another tab has been selected.
39062
+ * Fires when the active tab changes and a \`value\` prop is set on the tab items.
39063
+ * Payload is the \`value\` string of the newly active tab item, or undefined
39064
+ * if the tab item has no \`value\` prop set.
39065
+ * Use this for form binding (e.g. Angular FormControl, React controlled state).
38834
39066
  */
38835
- tabSelect?: (event?: InputEvent<HTMLElement>) => void;
39067
+ onValueChange?: (value?: string) => void;
38836
39068
  };
38837
39069
 
38838
39070
  export type DBTabsProps = DBTabsDefaultProps &
38839
39071
  GlobalProps &
38840
39072
  OrientationProps &
38841
- WidthProps &
38842
- AlignmentProps &
39073
+ TabItemAlignmentProps &
38843
39074
  DBTabsEventProps;
38844
39075
 
38845
39076
  export type DBTabsDefaultState = {
38846
- _name: string;
38847
- scrollContainer?: Element | null;
38848
- scroll: (left?: boolean) => void;
38849
- showScrollLeft?: boolean;
38850
- showScrollRight?: boolean;
39077
+ _generatedId: string;
39078
+ _generatedName: string;
39079
+ _id: () => string;
39080
+ _name: () => string;
39081
+ _getScrollContainer: () => Element | null;
39082
+ scroll: (toStart?: boolean) => void;
39083
+ showScrollStart?: boolean;
39084
+ showScrollEnd?: boolean;
39085
+ _isRtl: () => boolean;
38851
39086
  evaluateScrollButtons: (tabList: Element) => void;
38852
- convertTabs: () => DBSimpleTabProps[];
39087
+ _cachedTabs: DBSimpleTabProps[];
39088
+ _updateCachedTabs: () => void;
38853
39089
  initTabList: () => void;
38854
- initTabs: (init?: boolean) => void;
38855
- handleChange: (event: InputEvent<HTMLElement>) => void;
38856
- _resizeObserver?: ResizeObserver;
39090
+ initTabs: (activeIndex?: number) => void;
39091
+ _resizeObserver?: ResizeObserver | null;
39092
+ _observer?: MutationObserver | null;
39093
+ _pendingRafId: number | null;
39094
+ _scrollListener: { fn: () => void } | null;
39095
+ activeTabIndex: number;
39096
+ activateTab: (index: number) => void;
39097
+ getTabId: (index: number | string) => string;
39098
+ getPanelId: (index: number | string) => string;
39099
+ handleClick: (event: any) => void;
39100
+ handleKeyDown: (event: any) => void;
39101
+ isIndexActive: (index: number | string) => boolean;
39102
+ getTabItemTabIndex: (index: number | string) => 0 | -1;
38857
39103
  };
38858
39104
 
38859
39105
  export type DBTabsState = DBTabsDefaultState & InitializedState;
38860
- `, examples: ["Density", "Orientation", "Width", "Overflow", "Examples"], exampleCode: { react: { "density.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsDensity(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Functional:\n </DBInfotext>\n <DBTabs data-density="functional">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n (Default) Regular:\n </DBInfotext>\n <DBTabs data-density="regular">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Expressive:\n </DBInfotext>\n <DBTabs data-density="expressive">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabsDensity;\n', "examples.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsExamples(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n 2nd tab selected:\n </DBInfotext>\n <DBTabs initialSelectedIndex={1}>\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n nothing selected:\n </DBInfotext>\n <DBTabs initialSelectedMode="manually">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabsExamples;\n', "orientation.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsOrientation(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n horizontal:\n </DBInfotext>\n <DBTabs orientation="horizontal">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n vertical:\n </DBInfotext>\n <DBTabs orientation="vertical">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabsOrientation;\n', "overflow.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsOverflow(props: any) {\n return (\n <>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n no overflow:\n </DBInfotext>\n <DBTabs width="auto">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n with overflow - behavior: arrows:\n </DBInfotext>\n <DBTabs behavior="arrows">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n <DBTabItem>Test 4</DBTabItem>\n <DBTabItem>Test 5</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n <DBTabPanel>Tab Panel 4</DBTabPanel>\n <DBTabPanel>Tab Panel 5</DBTabPanel>\n </DBTabs>\n </div>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n with overflow - behavior: scrollbar:\n </DBInfotext>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n <DBTabItem>Test 4</DBTabItem>\n <DBTabItem>Test 5</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n <DBTabPanel>Tab Panel 4</DBTabPanel>\n <DBTabPanel>Tab Panel 5</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabsOverflow;\n', "width.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsWidth(props: any) {\n return (\n <>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n auto:\n </DBInfotext>\n <DBTabs width="auto">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n full - alignment: start:\n </DBInfotext>\n <DBTabs width="full">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n full - alignment: center:\n </DBInfotext>\n <DBTabs width="full" alignment="center">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabsWidth;\n' }, angular: { "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-density",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Functional:\n </db-infotext>\n <db-tabs data-density="functional"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n (Default) Regular:\n </db-infotext>\n <db-tabs data-density="regular"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Expressive:\n </db-infotext>\n <db-tabs data-density="expressive"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-density");\n }\n }\n}\n', "examples.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-examples",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 2nd tab selected:\n </db-infotext>\n <db-tabs [initialSelectedIndex]="1"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n nothing selected:\n </db-infotext>\n <db-tabs initialSelectedMode="manually"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsExamples implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-examples");\n }\n }\n}\n', "orientation.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-orientation",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n horizontal:\n </db-infotext>\n <db-tabs orientation="horizontal"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n vertical:\n </db-infotext>\n <db-tabs orientation="vertical"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsOrientation implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-orientation");\n }\n }\n}\n', "overflow.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-overflow",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n no overflow:\n </db-infotext>\n <db-tabs width="auto"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: arrows:\n </db-infotext>\n <db-tabs behavior="arrows"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n <db-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: scrollbar:\n </db-infotext>\n <db-tabs\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n <db-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsOverflow implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-overflow");\n }\n }\n}\n', "width.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-width",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n auto:\n </db-infotext>\n <db-tabs width="auto"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: start:\n </db-infotext>\n <db-tabs width="full"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: center:\n </db-infotext>\n <db-tabs width="full" alignment="center"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsWidth implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-width");\n }\n }\n}\n' }, vue: { "density.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Functional: </DBInfotext\n ><DBTabs data-density="functional"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n (Default) Regular: </DBInfotext\n ><DBTabs data-density="regular"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Expressive: </DBInfotext\n ><DBTabs data-density="expressive"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "examples.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n 2nd tab selected: </DBInfotext\n ><DBTabs :initialSelectedIndex="1"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n nothing selected: </DBInfotext\n ><DBTabs initialSelectedMode="manually"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "orientation.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n horizontal: </DBInfotext\n ><DBTabs orientation="horizontal"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n vertical: </DBInfotext\n ><DBTabs orientation="vertical"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "overflow.example.vue": `<template>
39106
+ `, examples: ["Density", "Orientation", "Width", "Overflow", "Truncation", "Icons", "Disabled", "Slot with Badge", "URL Sync", "Nested Tabs", "Examples"], exampleCode: { react: { "density.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsDensity(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Functional:\n </DBInfotext>\n <DBTabs data-density="functional">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n (Default) Regular:\n </DBInfotext>\n <DBTabs data-density="regular">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Expressive:\n </DBInfotext>\n <DBTabs data-density="expressive">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabsDensity;\n', "disabled.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsDisabled(props: any) {\n return (\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n with disabled tab in the middle:\n </DBInfotext>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Active Tab</DBTabItem>\n <DBTabItem disabled>Disabled Tab</DBTabItem>\n <DBTabItem>Another Tab</DBTabItem>\n </DBTabList>\n <DBTabPanel>Panel for active tab</DBTabPanel>\n <DBTabPanel>Panel for disabled tab</DBTabPanel>\n <DBTabPanel>Panel for another tab</DBTabPanel>\n </DBTabs>\n </div>\n );\n}\n\nexport default TabsDisabled;\n', "examples.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsExamples(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n 2nd tab selected:\n </DBInfotext>\n <DBTabs initialSelectedIndex={1}>\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n nothing selected:\n </DBInfotext>\n <DBTabs initialSelectedMode="manually">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabsExamples;\n', "icons.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsIcons(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n with leading icons:\n </DBInfotext>\n <DBTabs>\n <DBTabList>\n <DBTabItem icon="house" showIcon>\n Home\n </DBTabItem>\n <DBTabItem icon="magnifying_glass" showIcon>\n Search\n </DBTabItem>\n <DBTabItem icon="calendar" showIcon>\n Calendar\n </DBTabItem>\n </DBTabList>\n <DBTabPanel>Home content</DBTabPanel>\n <DBTabPanel>Search content</DBTabPanel>\n <DBTabPanel>Calendar content</DBTabPanel>\n </DBTabs>\n </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n with trailing icons:\n </DBInfotext>\n <DBTabs>\n <DBTabList>\n <DBTabItem iconTrailing="exclamation_mark_circle" showIconTrailing>\n Notifications\n </DBTabItem>\n <DBTabItem iconTrailing="information_circle" showIconTrailing>\n Info\n </DBTabItem>\n <DBTabItem iconTrailing="circular_arrows" showIconTrailing>\n Settings\n </DBTabItem>\n </DBTabList>\n <DBTabPanel>Notifications content</DBTabPanel>\n <DBTabPanel>Info content</DBTabPanel>\n <DBTabPanel>Settings content</DBTabPanel>\n </DBTabs>\n </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n icon-only (noText):\n </DBInfotext>\n <DBTabs>\n <DBTabList>\n <DBTabItem label="Home" icon="house" showIcon noText />\n <DBTabItem label="Search" icon="magnifying_glass" showIcon noText />\n <DBTabItem label="Calendar" icon="calendar" showIcon noText />\n </DBTabList>\n <DBTabPanel>Home content</DBTabPanel>\n <DBTabPanel>Search content</DBTabPanel>\n <DBTabPanel>Calendar content</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabsIcons;\n', "nested.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsNested(props: any) {\n return (\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Nested Tabs:\n </DBInfotext>\n <DBTabs name="outer-tabs">\n <DBTabList>\n <DBTabItem>Overview</DBTabItem>\n <DBTabItem>Details</DBTabItem>\n <DBTabItem>Settings</DBTabItem>\n </DBTabList>\n <DBTabPanel>\n <p>Overview content without nested tabs.</p>\n </DBTabPanel>\n <DBTabPanel>\n <DBTabs name="inner-tabs">\n <DBTabList>\n <DBTabItem>Sub-Tab A</DBTabItem>\n <DBTabItem>Sub-Tab B</DBTabItem>\n </DBTabList>\n <DBTabPanel>Content of inner Sub-Tab A</DBTabPanel>\n <DBTabPanel>Content of inner Sub-Tab B</DBTabPanel>\n </DBTabs>\n </DBTabPanel>\n <DBTabPanel>\n <p>Settings content without nested tabs.</p>\n </DBTabPanel>\n </DBTabs>\n </div>\n );\n}\n\nexport default TabsNested;\n', "orientation.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsOrientation(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n horizontal:\n </DBInfotext>\n <DBTabs orientation="horizontal">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n vertical:\n </DBInfotext>\n <DBTabs orientation="vertical">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabsOrientation;\n', "overflow.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsOverflow(props: any) {\n return (\n <>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n no overflow:\n </DBInfotext>\n <DBTabs tabItemWidth="auto">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n with overflow - behavior: arrows:\n </DBInfotext>\n <DBTabs behavior="arrows">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n <DBTabItem>Test 4</DBTabItem>\n <DBTabItem>Test 5</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n <DBTabPanel>Tab Panel 4</DBTabPanel>\n <DBTabPanel>Tab Panel 5</DBTabPanel>\n </DBTabs>\n </div>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n with overflow - behavior: scrollbar:\n </DBInfotext>\n <DBTabs behavior="scrollbar">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n <DBTabItem>Test 4</DBTabItem>\n <DBTabItem>Test 5</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n <DBTabPanel>Tab Panel 4</DBTabPanel>\n <DBTabPanel>Tab Panel 5</DBTabPanel>\n </DBTabs>\n </div>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n arrows heavy load (12 tabs, custom distance 250px):\n </DBInfotext>\n <DBTabs behavior="arrows" arrowScrollDistance={250}>\n <DBTabList>\n <DBTabItem>Berlin</DBTabItem>\n <DBTabItem>M\xFCnchen</DBTabItem>\n <DBTabItem>Hamburg</DBTabItem>\n <DBTabItem>Frankfurt</DBTabItem>\n <DBTabItem>K\xF6ln</DBTabItem>\n <DBTabItem>Stuttgart</DBTabItem>\n <DBTabItem>D\xFCsseldorf</DBTabItem>\n <DBTabItem>Leipzig</DBTabItem>\n <DBTabItem>Hannover</DBTabItem>\n <DBTabItem>N\xFCrnberg</DBTabItem>\n <DBTabItem>Dresden</DBTabItem>\n <DBTabItem>Bremen</DBTabItem>\n </DBTabList>\n <DBTabPanel>Berlin</DBTabPanel>\n <DBTabPanel>M\xFCnchen</DBTabPanel>\n <DBTabPanel>Hamburg</DBTabPanel>\n <DBTabPanel>Frankfurt</DBTabPanel>\n <DBTabPanel>K\xF6ln</DBTabPanel>\n <DBTabPanel>Stuttgart</DBTabPanel>\n <DBTabPanel>D\xFCsseldorf</DBTabPanel>\n <DBTabPanel>Leipzig</DBTabPanel>\n <DBTabPanel>Hannover</DBTabPanel>\n <DBTabPanel>N\xFCrnberg</DBTabPanel>\n <DBTabPanel>Dresden</DBTabPanel>\n <DBTabPanel>Bremen</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabsOverflow;\n', "slotWithBadge.example.tsx": 'import * as React from "react";\nimport DBBadge from "../../badge/badge";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsSlotWithBadge(props: any) {\n return (\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n tab-items with badges:\n </DBInfotext>\n <DBTabs>\n <DBTabList>\n <DBTabItem>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Messages\n <DBBadge semantic="informational">134</DBBadge>\n </span>\n </DBTabItem>\n <DBTabItem>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Notifications\n <DBBadge semantic="neutral">433</DBBadge>\n </span>\n </DBTabItem>\n <DBTabItem>Settings</DBTabItem>\n </DBTabList>\n <DBTabPanel>Messages content</DBTabPanel>\n <DBTabPanel>Notifications content</DBTabPanel>\n <DBTabPanel>Settings content</DBTabPanel>\n </DBTabs>\n </div>\n );\n}\n\nexport default TabsSlotWithBadge;\n', "tabItemWidth.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabItemWidth(props: any) {\n return (\n <>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n auto:\n </DBInfotext>\n <DBTabs tabItemWidth="auto">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n full - alignment: start:\n </DBInfotext>\n <DBTabs tabItemWidth="full">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n full - alignment: center:\n </DBInfotext>\n <DBTabs tabItemWidth="full" tabItemAlignment="center">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n full - alignment: end:\n </DBInfotext>\n <DBTabs tabItemWidth="full" tabItemAlignment="end">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabItemWidth;\n', "truncation.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsTruncation(props: any) {\n return (\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n truncated tab label (vertical only):\n </DBInfotext>\n <DBTabs orientation="vertical" tabItemWidth="auto">\n <DBTabList>\n <DBTabItem label="Very long tab label that gets truncated" />\n <DBTabItem label="Another long label" />\n <DBTabItem label="Short" />\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n );\n}\n\nexport default TabsTruncation;\n', "urlSync.example.tsx": `import * as React from "react";
39107
+ import DBInfotext from "../../infotext/infotext";
39108
+ import DBTabItem from "../../tab-item/tab-item";
39109
+ import DBTabList from "../../tab-list/tab-list";
39110
+ import DBTabPanel from "../../tab-panel/tab-panel";
39111
+ import DBTabs from "../tabs";
39112
+
39113
+ function TabsUrlSync(props: any) {
39114
+ return (
39115
+ <>
39116
+ <div className="fit-content-container">
39117
+ <DBInfotext icon="none" size="small" semantic="informational">
39118
+ 3rd tab pre-selected via initialSelectedIndex with a value parsed from
39119
+ URL parameter:
39120
+ </DBInfotext>
39121
+ <DBTabs name="url-sync-index" initialSelectedIndex={2}>
39122
+ <DBTabList>
39123
+ <DBTabItem>Overview</DBTabItem>
39124
+ <DBTabItem>Details</DBTabItem>
39125
+ <DBTabItem>Settings</DBTabItem>
39126
+ </DBTabList>
39127
+ <DBTabPanel>Overview content</DBTabPanel>
39128
+ <DBTabPanel>Details content</DBTabPanel>
39129
+ <DBTabPanel>Settings content</DBTabPanel>
39130
+ </DBTabs>
39131
+ </div>
39132
+ <div className="fit-content-container">
39133
+ <DBInfotext icon="none" size="small" semantic="informational">
39134
+ 2nd tab pre-selected with value props and 'onValueChange':
39135
+ </DBInfotext>
39136
+ <DBTabs name="url-sync-value" initialSelectedIndex={1}>
39137
+ <DBTabList>
39138
+ <DBTabItem value="overview">Overview</DBTabItem>
39139
+ <DBTabItem value="details">Details</DBTabItem>
39140
+ <DBTabItem value="settings">Settings</DBTabItem>
39141
+ </DBTabList>
39142
+ <DBTabPanel>Overview content</DBTabPanel>
39143
+ <DBTabPanel>Details content</DBTabPanel>
39144
+ <DBTabPanel>Settings content</DBTabPanel>
39145
+ </DBTabs>
39146
+ </div>
39147
+ </>
39148
+ );
39149
+ }
39150
+
39151
+ export default TabsUrlSync;
39152
+ ` }, angular: { "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-density",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Functional:\n </db-infotext>\n <db-tabs data-density="functional"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n (Default) Regular:\n </db-infotext>\n <db-tabs data-density="regular"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Expressive:\n </db-infotext>\n <db-tabs data-density="expressive"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-density");\n }\n }\n}\n', "disabled.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-disabled",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n with disabled tab in the middle:\n </db-infotext>\n <db-tabs\n ><db-tab-list\n ><db-tab-item>Active Tab</db-tab-item>\n <db-tab-item [disabled]="true">Disabled Tab</db-tab-item>\n <db-tab-item>Another Tab</db-tab-item></db-tab-list\n >\n <db-tab-panel>Panel for active tab</db-tab-panel>\n <db-tab-panel>Panel for disabled tab</db-tab-panel>\n <db-tab-panel>Panel for another tab</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsDisabled implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-disabled");\n }\n }\n}\n', "examples.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-examples",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 2nd tab selected:\n </db-infotext>\n <db-tabs [initialSelectedIndex]="1"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n nothing selected:\n </db-infotext>\n <db-tabs initialSelectedMode="manually"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsExamples implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-examples");\n }\n }\n}\n', "icons.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-icons",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n with leading icons:\n </db-infotext>\n <db-tabs\n ><db-tab-list\n ><db-tab-item icon="house" [showIcon]="true"> Home </db-tab-item>\n <db-tab-item icon="magnifying_glass" [showIcon]="true">\n Search\n </db-tab-item>\n <db-tab-item icon="calendar" [showIcon]="true">\n Calendar\n </db-tab-item></db-tab-list\n >\n <db-tab-panel>Home content</db-tab-panel>\n <db-tab-panel>Search content</db-tab-panel>\n <db-tab-panel>Calendar content</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n with trailing icons:\n </db-infotext>\n <db-tabs\n ><db-tab-list\n ><db-tab-item\n iconTrailing="exclamation_mark_circle"\n [showIconTrailing]="true"\n >\n Notifications\n </db-tab-item>\n <db-tab-item\n iconTrailing="information_circle"\n [showIconTrailing]="true"\n >\n Info\n </db-tab-item>\n <db-tab-item iconTrailing="circular_arrows" [showIconTrailing]="true">\n Settings\n </db-tab-item></db-tab-list\n >\n <db-tab-panel>Notifications content</db-tab-panel>\n <db-tab-panel>Info content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n icon-only (noText):\n </db-infotext>\n <db-tabs\n ><db-tab-list\n ><db-tab-item\n label="Home"\n icon="house"\n [showIcon]="true"\n [noText]="true"\n ></db-tab-item>\n <db-tab-item\n label="Search"\n icon="magnifying_glass"\n [showIcon]="true"\n [noText]="true"\n ></db-tab-item>\n <db-tab-item\n label="Calendar"\n icon="calendar"\n [showIcon]="true"\n [noText]="true"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-panel>Home content</db-tab-panel>\n <db-tab-panel>Search content</db-tab-panel>\n <db-tab-panel>Calendar content</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsIcons implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-icons");\n }\n }\n}\n', "nested.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-nested",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Nested Tabs:\n </db-infotext>\n <db-tabs name="outer-tabs"\n ><db-tab-list\n ><db-tab-item>Overview</db-tab-item>\n <db-tab-item>Details</db-tab-item>\n <db-tab-item>Settings</db-tab-item></db-tab-list\n >\n <db-tab-panel><p>Overview content without nested tabs.</p></db-tab-panel>\n <db-tab-panel\n ><db-tabs name="inner-tabs"\n ><db-tab-list\n ><db-tab-item>Sub-Tab A</db-tab-item>\n <db-tab-item>Sub-Tab B</db-tab-item></db-tab-list\n >\n <db-tab-panel>Content of inner Sub-Tab A</db-tab-panel>\n <db-tab-panel>Content of inner Sub-Tab B</db-tab-panel></db-tabs\n ></db-tab-panel\n >\n <db-tab-panel\n ><p>Settings content without nested tabs.</p></db-tab-panel\n ></db-tabs\n >\n </div> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsNested implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-nested");\n }\n }\n}\n', "orientation.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-orientation",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n horizontal:\n </db-infotext>\n <db-tabs orientation="horizontal"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n vertical:\n </db-infotext>\n <db-tabs orientation="vertical"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsOrientation implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-orientation");\n }\n }\n}\n', "overflow.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-overflow",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n no overflow:\n </db-infotext>\n <db-tabs tabItemWidth="auto"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: arrows:\n </db-infotext>\n <db-tabs behavior="arrows"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n <db-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: scrollbar:\n </db-infotext>\n <db-tabs behavior="scrollbar"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n <db-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n arrows heavy load (12 tabs, custom distance 250px):\n </db-infotext>\n <db-tabs behavior="arrows" [arrowScrollDistance]="250"\n ><db-tab-list\n ><db-tab-item>Berlin</db-tab-item>\n <db-tab-item>M\xFCnchen</db-tab-item>\n <db-tab-item>Hamburg</db-tab-item>\n <db-tab-item>Frankfurt</db-tab-item>\n <db-tab-item>K\xF6ln</db-tab-item>\n <db-tab-item>Stuttgart</db-tab-item>\n <db-tab-item>D\xFCsseldorf</db-tab-item>\n <db-tab-item>Leipzig</db-tab-item>\n <db-tab-item>Hannover</db-tab-item>\n <db-tab-item>N\xFCrnberg</db-tab-item>\n <db-tab-item>Dresden</db-tab-item>\n <db-tab-item>Bremen</db-tab-item></db-tab-list\n >\n <db-tab-panel>Berlin</db-tab-panel>\n <db-tab-panel>M\xFCnchen</db-tab-panel>\n <db-tab-panel>Hamburg</db-tab-panel>\n <db-tab-panel>Frankfurt</db-tab-panel>\n <db-tab-panel>K\xF6ln</db-tab-panel>\n <db-tab-panel>Stuttgart</db-tab-panel>\n <db-tab-panel>D\xFCsseldorf</db-tab-panel>\n <db-tab-panel>Leipzig</db-tab-panel>\n <db-tab-panel>Hannover</db-tab-panel>\n <db-tab-panel>N\xFCrnberg</db-tab-panel>\n <db-tab-panel>Dresden</db-tab-panel>\n <db-tab-panel>Bremen</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsOverflow implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-overflow");\n }\n }\n}\n', "slotWithBadge.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBBadge } from "../../badge/badge";\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-slot-with-badge",\n standalone: true,\n imports: [\n CommonModule,\n DBInfotext,\n DBTabs,\n DBTabList,\n DBTabItem,\n DBBadge,\n DBTabPanel,\n ],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n tab-items with badges:\n </db-infotext>\n <db-tabs\n ><db-tab-list\n ><db-tab-item\n ><span\n [ngStyle]="{\n display: \'flex\',\n alignItems: \'center\',\n gap: \'8px\'\n }"\n >\n Messages\n\n <db-badge semantic="informational">134</db-badge></span\n ></db-tab-item\n >\n <db-tab-item\n ><span\n [ngStyle]="{\n display: \'flex\',\n alignItems: \'center\',\n gap: \'8px\'\n }"\n >\n Notifications\n\n <db-badge semantic="neutral">433</db-badge></span\n ></db-tab-item\n >\n <db-tab-item>Settings</db-tab-item></db-tab-list\n >\n <db-tab-panel>Messages content</db-tab-panel>\n <db-tab-panel>Notifications content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsSlotWithBadge implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-slot-with-badge");\n }\n }\n}\n', "tabItemWidth.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tab-item-width",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n auto:\n </db-infotext>\n <db-tabs tabItemWidth="auto"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: start:\n </db-infotext>\n <db-tabs tabItemWidth="full"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: center:\n </db-infotext>\n <db-tabs tabItemWidth="full" tabItemAlignment="center"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: end:\n </db-infotext>\n <db-tabs tabItemWidth="full" tabItemAlignment="end"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemWidth implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-width");\n }\n }\n}\n', "truncation.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-truncation",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n truncated tab label (vertical only):\n </db-infotext>\n <db-tabs orientation="vertical" tabItemWidth="auto"\n ><db-tab-list\n ><db-tab-item\n label="Very long tab label that gets truncated"\n ></db-tab-item>\n <db-tab-item label="Another long label"></db-tab-item>\n <db-tab-item label="Short"></db-tab-item\n ></db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsTruncation implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-truncation");\n }\n }\n}\n', "urlSync.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-url-sync",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 3rd tab pre-selected via initialSelectedIndex with a value parsed from\n URL parameter:\n </db-infotext>\n <db-tabs name="url-sync-index" [initialSelectedIndex]="2"\n ><db-tab-list\n ><db-tab-item>Overview</db-tab-item>\n <db-tab-item>Details</db-tab-item>\n <db-tab-item>Settings</db-tab-item></db-tab-list\n >\n <db-tab-panel>Overview content</db-tab-panel>\n <db-tab-panel>Details content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 2nd tab pre-selected with value props and \'onValueChange\':\n </db-infotext>\n <db-tabs name="url-sync-value" [initialSelectedIndex]="1"\n ><db-tab-list\n ><db-tab-item value="overview">Overview</db-tab-item>\n <db-tab-item value="details">Details</db-tab-item>\n <db-tab-item value="settings">Settings</db-tab-item></db-tab-list\n >\n <db-tab-panel>Overview content</db-tab-panel>\n <db-tab-panel>Details content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsUrlSync implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tabs-url-sync");\n }\n }\n}\n' }, vue: { "density.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Functional: </DBInfotext\n ><DBTabs data-density="functional"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n (Default) Regular: </DBInfotext\n ><DBTabs data-density="regular"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Expressive: </DBInfotext\n ><DBTabs data-density="expressive"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "disabled.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n with disabled tab in the middle: </DBInfotext\n ><DBTabs\n ><DBTabList\n ><DBTabItem>Active Tab</DBTabItem\n ><DBTabItem :disabled="true">Disabled Tab</DBTabItem\n ><DBTabItem>Another Tab</DBTabItem></DBTabList\n ><DBTabPanel>Panel for active tab</DBTabPanel\n ><DBTabPanel>Panel for disabled tab</DBTabPanel\n ><DBTabPanel>Panel for another tab</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "examples.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n 2nd tab selected: </DBInfotext\n ><DBTabs :initialSelectedIndex="1"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n nothing selected: </DBInfotext\n ><DBTabs initialSelectedMode="manually"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "icons.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n with leading icons: </DBInfotext\n ><DBTabs\n ><DBTabList\n ><DBTabItem icon="house" :showIcon="true"> Home </DBTabItem\n ><DBTabItem icon="magnifying_glass" :showIcon="true"> Search </DBTabItem\n ><DBTabItem icon="calendar" :showIcon="true">\n Calendar\n </DBTabItem></DBTabList\n ><DBTabPanel>Home content</DBTabPanel\n ><DBTabPanel>Search content</DBTabPanel\n ><DBTabPanel>Calendar content</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n with trailing icons: </DBInfotext\n ><DBTabs\n ><DBTabList\n ><DBTabItem\n iconTrailing="exclamation_mark_circle"\n :showIconTrailing="true"\n >\n Notifications </DBTabItem\n ><DBTabItem iconTrailing="information_circle" :showIconTrailing="true">\n Info </DBTabItem\n ><DBTabItem iconTrailing="circular_arrows" :showIconTrailing="true">\n Settings\n </DBTabItem></DBTabList\n ><DBTabPanel>Notifications content</DBTabPanel\n ><DBTabPanel>Info content</DBTabPanel\n ><DBTabPanel>Settings content</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n icon-only (noText): </DBInfotext\n ><DBTabs\n ><DBTabList\n ><DBTabItem\n label="Home"\n icon="house"\n :showIcon="true"\n :noText="true"\n ></DBTabItem\n ><DBTabItem\n label="Search"\n icon="magnifying_glass"\n :showIcon="true"\n :noText="true"\n ></DBTabItem\n ><DBTabItem\n label="Calendar"\n icon="calendar"\n :showIcon="true"\n :noText="true"\n ></DBTabItem></DBTabList\n ><DBTabPanel>Home content</DBTabPanel\n ><DBTabPanel>Search content</DBTabPanel\n ><DBTabPanel>Calendar content</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "nested.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Nested Tabs: </DBInfotext\n ><DBTabs name="outer-tabs"\n ><DBTabList\n ><DBTabItem>Overview</DBTabItem><DBTabItem>Details</DBTabItem\n ><DBTabItem>Settings</DBTabItem></DBTabList\n ><DBTabPanel><p>Overview content without nested tabs.</p></DBTabPanel\n ><DBTabPanel\n ><DBTabs name="inner-tabs"\n ><DBTabList\n ><DBTabItem>Sub-Tab A</DBTabItem\n ><DBTabItem>Sub-Tab B</DBTabItem></DBTabList\n ><DBTabPanel>Content of inner Sub-Tab A</DBTabPanel\n ><DBTabPanel>Content of inner Sub-Tab B</DBTabPanel></DBTabs\n ></DBTabPanel\n ><DBTabPanel\n ><p>Settings content without nested tabs.</p></DBTabPanel\n ></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "orientation.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n horizontal: </DBInfotext\n ><DBTabs orientation="horizontal"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n vertical: </DBInfotext\n ><DBTabs orientation="vertical"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "overflow.example.vue": `<template>
38861
39153
  <div
38862
39154
  class="fit-content-container"
38863
39155
  :style="{
@@ -38866,7 +39158,7 @@ export type DBTabsState = DBTabsDefaultState & InitializedState;
38866
39158
  >
38867
39159
  <DBInfotext icon="none" size="small" semantic="informational">
38868
39160
  no overflow: </DBInfotext
38869
- ><DBTabs width="auto"
39161
+ ><DBTabs tabItemWidth="auto"
38870
39162
  ><DBTabList
38871
39163
  ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem
38872
39164
  ><DBTabItem>Test 3</DBTabItem></DBTabList
@@ -38900,7 +39192,7 @@ export type DBTabsState = DBTabsDefaultState & InitializedState;
38900
39192
  >
38901
39193
  <DBInfotext icon="none" size="small" semantic="informational">
38902
39194
  with overflow - behavior: scrollbar: </DBInfotext
38903
- ><DBTabs
39195
+ ><DBTabs behavior="scrollbar"
38904
39196
  ><DBTabList
38905
39197
  ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem
38906
39198
  ><DBTabItem>Test 3</DBTabItem><DBTabItem>Test 4</DBTabItem
@@ -38910,6 +39202,30 @@ export type DBTabsState = DBTabsDefaultState & InitializedState;
38910
39202
  ><DBTabPanel>Tab Panel 5</DBTabPanel></DBTabs
38911
39203
  >
38912
39204
  </div>
39205
+ <div
39206
+ class="fit-content-container"
39207
+ :style="{
39208
+ width: '300px',
39209
+ }"
39210
+ >
39211
+ <DBInfotext icon="none" size="small" semantic="informational">
39212
+ arrows heavy load (12 tabs, custom distance 250px): </DBInfotext
39213
+ ><DBTabs behavior="arrows" :arrowScrollDistance="250"
39214
+ ><DBTabList
39215
+ ><DBTabItem>Berlin</DBTabItem><DBTabItem>M\xFCnchen</DBTabItem
39216
+ ><DBTabItem>Hamburg</DBTabItem><DBTabItem>Frankfurt</DBTabItem
39217
+ ><DBTabItem>K\xF6ln</DBTabItem><DBTabItem>Stuttgart</DBTabItem
39218
+ ><DBTabItem>D\xFCsseldorf</DBTabItem><DBTabItem>Leipzig</DBTabItem
39219
+ ><DBTabItem>Hannover</DBTabItem><DBTabItem>N\xFCrnberg</DBTabItem
39220
+ ><DBTabItem>Dresden</DBTabItem><DBTabItem>Bremen</DBTabItem></DBTabList
39221
+ ><DBTabPanel>Berlin</DBTabPanel><DBTabPanel>M\xFCnchen</DBTabPanel
39222
+ ><DBTabPanel>Hamburg</DBTabPanel><DBTabPanel>Frankfurt</DBTabPanel
39223
+ ><DBTabPanel>K\xF6ln</DBTabPanel><DBTabPanel>Stuttgart</DBTabPanel
39224
+ ><DBTabPanel>D\xFCsseldorf</DBTabPanel><DBTabPanel>Leipzig</DBTabPanel
39225
+ ><DBTabPanel>Hannover</DBTabPanel><DBTabPanel>N\xFCrnberg</DBTabPanel
39226
+ ><DBTabPanel>Dresden</DBTabPanel><DBTabPanel>Bremen</DBTabPanel></DBTabs
39227
+ >
39228
+ </div>
38913
39229
  </template>
38914
39230
 
38915
39231
  <script setup lang="ts">
@@ -38918,7 +39234,50 @@ import DBTabItem from "../../tab-item/tab-item.vue";
38918
39234
  import DBTabList from "../../tab-list/tab-list.vue";
38919
39235
  import DBTabPanel from "../../tab-panel/tab-panel.vue";
38920
39236
  import DBTabs from "../tabs.vue";
38921
- </script>`, "width.example.vue": `<template>
39237
+ </script>`, "slotWithBadge.example.vue": `<template>
39238
+ <div class="fit-content-container">
39239
+ <DBInfotext icon="none" size="small" semantic="informational">
39240
+ tab-items with badges: </DBInfotext
39241
+ ><DBTabs
39242
+ ><DBTabList
39243
+ ><DBTabItem
39244
+ ><span
39245
+ :style="{
39246
+ display: 'flex',
39247
+ alignItems: 'center',
39248
+ gap: '8px',
39249
+ }"
39250
+ >
39251
+ Messages
39252
+ <DBBadge semantic="informational">134</DBBadge></span
39253
+ ></DBTabItem
39254
+ ><DBTabItem
39255
+ ><span
39256
+ :style="{
39257
+ display: 'flex',
39258
+ alignItems: 'center',
39259
+ gap: '8px',
39260
+ }"
39261
+ >
39262
+ Notifications
39263
+ <DBBadge semantic="neutral">433</DBBadge></span
39264
+ ></DBTabItem
39265
+ ><DBTabItem>Settings</DBTabItem></DBTabList
39266
+ ><DBTabPanel>Messages content</DBTabPanel
39267
+ ><DBTabPanel>Notifications content</DBTabPanel
39268
+ ><DBTabPanel>Settings content</DBTabPanel></DBTabs
39269
+ >
39270
+ </div>
39271
+ </template>
39272
+
39273
+ <script setup lang="ts">
39274
+ import DBBadge from "../../badge/badge.vue";
39275
+ import DBInfotext from "../../infotext/infotext.vue";
39276
+ import DBTabItem from "../../tab-item/tab-item.vue";
39277
+ import DBTabList from "../../tab-list/tab-list.vue";
39278
+ import DBTabPanel from "../../tab-panel/tab-panel.vue";
39279
+ import DBTabs from "../tabs.vue";
39280
+ </script>`, "tabItemWidth.example.vue": `<template>
38922
39281
  <div
38923
39282
  class="fit-content-container"
38924
39283
  :style="{
@@ -38927,7 +39286,7 @@ import DBTabs from "../tabs.vue";
38927
39286
  >
38928
39287
  <DBInfotext icon="none" size="small" semantic="informational">
38929
39288
  auto: </DBInfotext
38930
- ><DBTabs width="auto"
39289
+ ><DBTabs tabItemWidth="auto"
38931
39290
  ><DBTabList
38932
39291
  ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem
38933
39292
  ><DBTabItem>Test 3</DBTabItem></DBTabList
@@ -38943,7 +39302,7 @@ import DBTabs from "../tabs.vue";
38943
39302
  >
38944
39303
  <DBInfotext icon="none" size="small" semantic="informational">
38945
39304
  full - alignment: start: </DBInfotext
38946
- ><DBTabs width="full"
39305
+ ><DBTabs tabItemWidth="full"
38947
39306
  ><DBTabList
38948
39307
  ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem
38949
39308
  ><DBTabItem>Test 3</DBTabItem></DBTabList
@@ -38959,7 +39318,23 @@ import DBTabs from "../tabs.vue";
38959
39318
  >
38960
39319
  <DBInfotext icon="none" size="small" semantic="informational">
38961
39320
  full - alignment: center: </DBInfotext
38962
- ><DBTabs width="full" alignment="center"
39321
+ ><DBTabs tabItemWidth="full" tabItemAlignment="center"
39322
+ ><DBTabList
39323
+ ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem
39324
+ ><DBTabItem>Test 3</DBTabItem></DBTabList
39325
+ ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
39326
+ ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
39327
+ >
39328
+ </div>
39329
+ <div
39330
+ class="fit-content-container"
39331
+ :style="{
39332
+ width: '100%',
39333
+ }"
39334
+ >
39335
+ <DBInfotext icon="none" size="small" semantic="informational">
39336
+ full - alignment: end: </DBInfotext
39337
+ ><DBTabs tabItemWidth="full" tabItemAlignment="end"
38963
39338
  ><DBTabList
38964
39339
  ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem
38965
39340
  ><DBTabItem>Test 3</DBTabItem></DBTabList
@@ -38975,7 +39350,42 @@ import DBTabItem from "../../tab-item/tab-item.vue";
38975
39350
  import DBTabList from "../../tab-list/tab-list.vue";
38976
39351
  import DBTabPanel from "../../tab-panel/tab-panel.vue";
38977
39352
  import DBTabs from "../tabs.vue";
38978
- </script>` }, "web-components": { "density.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-density",\n})\nexport class TabsDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-density");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Functional:\n </db-infotext>\n <db-tabs data-density="functional">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n (Default) Regular:\n </db-infotext>\n <db-tabs data-density="regular">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Expressive:\n </db-infotext>\n <db-tabs data-density="expressive">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "examples.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-examples",\n})\nexport class TabsExamples {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-examples");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 2nd tab selected:\n </db-infotext>\n <db-tabs initialSelectedIndex={1}>\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n nothing selected:\n </db-infotext>\n <db-tabs initialSelectedMode="manually">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "orientation.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-orientation",\n})\nexport class TabsOrientation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-orientation");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n horizontal:\n </db-infotext>\n <db-tabs orientation="horizontal">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n vertical:\n </db-infotext>\n <db-tabs orientation="vertical">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "overflow.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-overflow",\n})\nexport class TabsOverflow {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-overflow");\n }\n\n render() {\n return (\n <Fragment>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n no overflow:\n </db-infotext>\n <db-tabs width="auto">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: arrows:\n </db-infotext>\n <db-tabs behavior="arrows">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n <db-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel>\n </db-tabs>\n </div>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: scrollbar:\n </db-infotext>\n <db-tabs>\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n <db-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "width.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-width",\n})\nexport class TabsWidth {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-width");\n }\n\n render() {\n return (\n <Fragment>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n auto:\n </db-infotext>\n <db-tabs width="auto">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: start:\n </db-infotext>\n <db-tabs width="full">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: center:\n </db-infotext>\n <db-tabs width="full" alignment="center">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabs</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <h2>Angular Example</h2>\n <db-tabs ng-_reflect-arrow-scroll-distance="75">\n <div class="db-tabs">\n <db-tab-list>\n <div\n role="tablist"\n class="db-tab-list"\n id="tab-list-d1abe676-4c30-4219-b957-f1a397d54a0b"\n aria-orientation="horizontal"\n >\n <db-tab\n ng-_reflect-name="functional"\n ng-_reflect-index="0"\n >\n <label\n role="tab"\n class="db-tab"\n for="functional-tab-0"\n aria-controls="functional-tab-panel-0"\n data-width="auto"\n data-alignment="start"\n >\n <input\n type="radio"\n name="functional"\n id="functional-tab-0"\n />Test 1</label\n >\n </db-tab>\n <db-tab\n ng-_reflect-name="functional"\n ng-_reflect-index="1"\n >\n <label\n role="tab"\n class="db-tab"\n for="functional-tab-1"\n aria-controls="functional-tab-panel-1"\n data-width="auto"\n data-alignment="start"\n >\n <input\n type="radio"\n name="functional"\n id="functional-tab-1"\n />\n Test 2\n </label>\n </db-tab>\n <db-tab\n ng-_reflect-name="functional"\n ng-_reflect-index="2"\n >\n <label\n role="tab"\n class="db-tab"\n for="functional-tab-2"\n aria-controls="functional-tab-panel-2"\n data-width="auto"\n data-alignment="start"\n >\n <input\n type="radio"\n name="functional"\n id="functional-tab-2"\n />\n Test 3\n </label>\n </db-tab>\n </div>\n </db-tab-list>\n <db-tab-panel\n ng-_reflect-name="functional"\n ng-_reflect-index="0"\n >\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="functional-tab-panel-0"\n aria-labelledby="functional-tab-0"\n >\n Tab Panel 1\n </article>\n </db-tab-panel>\n <db-tab-panel\n ng-_reflect-name="functional"\n ng-_reflect-index="1"\n >\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="functional-tab-panel-1"\n aria-labelledby="functional-tab-1"\n >\n Tab Panel 2\n </article>\n </db-tab-panel>\n <db-tab-panel\n ng-_reflect-name="functional"\n ng-_reflect-index="2"\n >\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="functional-tab-panel-2"\n aria-labelledby="functional-tab-2"\n >\n Tab Panel 3\n </article>\n </db-tab-panel>\n </div>\n </db-tabs>\n </body>\n</html>\n' } } }, tag: { props: `import {
39353
+ </script>`, "truncation.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n truncated tab label (vertical only): </DBInfotext\n ><DBTabs orientation="vertical" tabItemWidth="auto"\n ><DBTabList\n ><DBTabItem label="Very long tab label that gets truncated"></DBTabItem\n ><DBTabItem label="Another long label"></DBTabItem\n ><DBTabItem label="Short"></DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "urlSync.example.vue": `<template>
39354
+ <div class="fit-content-container">
39355
+ <DBInfotext icon="none" size="small" semantic="informational">
39356
+ 3rd tab pre-selected via initialSelectedIndex with a value parsed from URL
39357
+ parameter: </DBInfotext
39358
+ ><DBTabs name="url-sync-index" :initialSelectedIndex="2"
39359
+ ><DBTabList
39360
+ ><DBTabItem>Overview</DBTabItem><DBTabItem>Details</DBTabItem
39361
+ ><DBTabItem>Settings</DBTabItem></DBTabList
39362
+ ><DBTabPanel>Overview content</DBTabPanel
39363
+ ><DBTabPanel>Details content</DBTabPanel
39364
+ ><DBTabPanel>Settings content</DBTabPanel></DBTabs
39365
+ >
39366
+ </div>
39367
+ <div class="fit-content-container">
39368
+ <DBInfotext icon="none" size="small" semantic="informational">
39369
+ 2nd tab pre-selected with value props and 'onValueChange': </DBInfotext
39370
+ ><DBTabs name="url-sync-value" :initialSelectedIndex="1"
39371
+ ><DBTabList
39372
+ ><DBTabItem value="overview">Overview</DBTabItem
39373
+ ><DBTabItem value="details">Details</DBTabItem
39374
+ ><DBTabItem value="settings">Settings</DBTabItem></DBTabList
39375
+ ><DBTabPanel>Overview content</DBTabPanel
39376
+ ><DBTabPanel>Details content</DBTabPanel
39377
+ ><DBTabPanel>Settings content</DBTabPanel></DBTabs
39378
+ >
39379
+ </div>
39380
+ </template>
39381
+
39382
+ <script setup lang="ts">
39383
+ import DBInfotext from "../../infotext/infotext.vue";
39384
+ import DBTabItem from "../../tab-item/tab-item.vue";
39385
+ import DBTabList from "../../tab-list/tab-list.vue";
39386
+ import DBTabPanel from "../../tab-panel/tab-panel.vue";
39387
+ import DBTabs from "../tabs.vue";
39388
+ </script>` }, "web-components": { "density.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-density",\n})\nexport class TabsDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-density");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Functional:\n </db-infotext>\n <db-tabs data-density="functional">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n (Default) Regular:\n </db-infotext>\n <db-tabs data-density="regular">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Expressive:\n </db-infotext>\n <db-tabs data-density="expressive">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-disabled",\n})\nexport class TabsDisabled {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n with disabled tab in the middle:\n </db-infotext>\n <db-tabs>\n <db-tab-list>\n <db-tab-item>Active Tab</db-tab-item>\n <db-tab-item disabled={true}>Disabled Tab</db-tab-item>\n <db-tab-item>Another Tab</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Panel for active tab</db-tab-panel>\n <db-tab-panel>Panel for disabled tab</db-tab-panel>\n <db-tab-panel>Panel for another tab</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "examples.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-examples",\n})\nexport class TabsExamples {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-examples");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 2nd tab selected:\n </db-infotext>\n <db-tabs initialSelectedIndex={1}>\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n nothing selected:\n </db-infotext>\n <db-tabs initialSelectedMode="manually">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "icons.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-icons",\n})\nexport class TabsIcons {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-icons");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n with leading icons:\n </db-infotext>\n <db-tabs>\n <db-tab-list>\n <db-tab-item icon="house" showIcon={true}>\n Home\n </db-tab-item>\n <db-tab-item icon="magnifying_glass" showIcon={true}>\n Search\n </db-tab-item>\n <db-tab-item icon="calendar" showIcon={true}>\n Calendar\n </db-tab-item>\n </db-tab-list>\n <db-tab-panel>Home content</db-tab-panel>\n <db-tab-panel>Search content</db-tab-panel>\n <db-tab-panel>Calendar content</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n with trailing icons:\n </db-infotext>\n <db-tabs>\n <db-tab-list>\n <db-tab-item\n iconTrailing="exclamation_mark_circle"\n showIconTrailing={true}\n >\n Notifications\n </db-tab-item>\n <db-tab-item\n iconTrailing="information_circle"\n showIconTrailing={true}\n >\n Info\n </db-tab-item>\n <db-tab-item\n iconTrailing="circular_arrows"\n showIconTrailing={true}\n >\n Settings\n </db-tab-item>\n </db-tab-list>\n <db-tab-panel>Notifications content</db-tab-panel>\n <db-tab-panel>Info content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n icon-only (noText):\n </db-infotext>\n <db-tabs>\n <db-tab-list>\n <db-tab-item\n label="Home"\n icon="house"\n showIcon={true}\n noText={true}\n ></db-tab-item>\n <db-tab-item\n label="Search"\n icon="magnifying_glass"\n showIcon={true}\n noText={true}\n ></db-tab-item>\n <db-tab-item\n label="Calendar"\n icon="calendar"\n showIcon={true}\n noText={true}\n ></db-tab-item>\n </db-tab-list>\n <db-tab-panel>Home content</db-tab-panel>\n <db-tab-panel>Search content</db-tab-panel>\n <db-tab-panel>Calendar content</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "nested.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-nested",\n})\nexport class TabsNested {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-nested");\n }\n\n render() {\n return (\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Nested Tabs:\n </db-infotext>\n <db-tabs name="outer-tabs">\n <db-tab-list>\n <db-tab-item>Overview</db-tab-item>\n <db-tab-item>Details</db-tab-item>\n <db-tab-item>Settings</db-tab-item>\n </db-tab-list>\n <db-tab-panel>\n <p>Overview content without nested tabs.</p>\n </db-tab-panel>\n <db-tab-panel>\n <db-tabs name="inner-tabs">\n <db-tab-list>\n <db-tab-item>Sub-Tab A</db-tab-item>\n <db-tab-item>Sub-Tab B</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Content of inner Sub-Tab A</db-tab-panel>\n <db-tab-panel>Content of inner Sub-Tab B</db-tab-panel>\n </db-tabs>\n </db-tab-panel>\n <db-tab-panel>\n <p>Settings content without nested tabs.</p>\n </db-tab-panel>\n </db-tabs>\n </div>\n );\n }\n}\n', "orientation.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-orientation",\n})\nexport class TabsOrientation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-orientation");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n horizontal:\n </db-infotext>\n <db-tabs orientation="horizontal">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n vertical:\n </db-infotext>\n <db-tabs orientation="vertical">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "overflow.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-overflow",\n})\nexport class TabsOverflow {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-overflow");\n }\n\n render() {\n return (\n <Fragment>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n no overflow:\n </db-infotext>\n <db-tabs tabItemWidth="auto">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: arrows:\n </db-infotext>\n <db-tabs behavior="arrows">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n <db-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel>\n </db-tabs>\n </div>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: scrollbar:\n </db-infotext>\n <db-tabs behavior="scrollbar">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n <db-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel>\n </db-tabs>\n </div>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n arrows heavy load (12 tabs, custom distance 250px):\n </db-infotext>\n <db-tabs behavior="arrows" arrowScrollDistance={250}>\n <db-tab-list>\n <db-tab-item>Berlin</db-tab-item>\n <db-tab-item>M\xFCnchen</db-tab-item>\n <db-tab-item>Hamburg</db-tab-item>\n <db-tab-item>Frankfurt</db-tab-item>\n <db-tab-item>K\xF6ln</db-tab-item>\n <db-tab-item>Stuttgart</db-tab-item>\n <db-tab-item>D\xFCsseldorf</db-tab-item>\n <db-tab-item>Leipzig</db-tab-item>\n <db-tab-item>Hannover</db-tab-item>\n <db-tab-item>N\xFCrnberg</db-tab-item>\n <db-tab-item>Dresden</db-tab-item>\n <db-tab-item>Bremen</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Berlin</db-tab-panel>\n <db-tab-panel>M\xFCnchen</db-tab-panel>\n <db-tab-panel>Hamburg</db-tab-panel>\n <db-tab-panel>Frankfurt</db-tab-panel>\n <db-tab-panel>K\xF6ln</db-tab-panel>\n <db-tab-panel>Stuttgart</db-tab-panel>\n <db-tab-panel>D\xFCsseldorf</db-tab-panel>\n <db-tab-panel>Leipzig</db-tab-panel>\n <db-tab-panel>Hannover</db-tab-panel>\n <db-tab-panel>N\xFCrnberg</db-tab-panel>\n <db-tab-panel>Dresden</db-tab-panel>\n <db-tab-panel>Bremen</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "slotWithBadge.example.tsx": 'import { DBBadge } from "../../badge/badge";\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-slot-with-badge",\n})\nexport class TabsSlotWithBadge {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-slot-with-badge");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n tab-items with badges:\n </db-infotext>\n <db-tabs>\n <db-tab-list>\n <db-tab-item>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Messages\n <db-badge semantic="informational">134</db-badge>\n </span>\n </db-tab-item>\n <db-tab-item>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Notifications\n <db-badge semantic="neutral">433</db-badge>\n </span>\n </db-tab-item>\n <db-tab-item>Settings</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Messages content</db-tab-panel>\n <db-tab-panel>Notifications content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "tabItemWidth.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-width",\n})\nexport class TabItemWidth {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tab-item-width");\n }\n\n render() {\n return (\n <Fragment>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n auto:\n </db-infotext>\n <db-tabs tabItemWidth="auto">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: start:\n </db-infotext>\n <db-tabs tabItemWidth="full">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: center:\n </db-infotext>\n <db-tabs tabItemWidth="full" tabItemAlignment="center">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: end:\n </db-infotext>\n <db-tabs tabItemWidth="full" tabItemAlignment="end">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "truncation.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-truncation",\n})\nexport class TabsTruncation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-truncation");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n truncated tab label (vertical only):\n </db-infotext>\n <db-tabs orientation="vertical" tabItemWidth="auto">\n <db-tab-list>\n <db-tab-item label="Very long tab label that gets truncated"></db-tab-item>\n <db-tab-item label="Another long label"></db-tab-item>\n <db-tab-item label="Short"></db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "urlSync.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-url-sync",\n})\nexport class TabsUrlSync {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tabs-url-sync");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 3rd tab pre-selected via initialSelectedIndex with a value parsed\n from URL parameter:\n </db-infotext>\n <db-tabs name="url-sync-index" initialSelectedIndex={2}>\n <db-tab-list>\n <db-tab-item>Overview</db-tab-item>\n <db-tab-item>Details</db-tab-item>\n <db-tab-item>Settings</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Overview content</db-tab-panel>\n <db-tab-panel>Details content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 2nd tab pre-selected with value props and \'onValueChange\':\n </db-infotext>\n <db-tabs name="url-sync-value" initialSelectedIndex={1}>\n <db-tab-list>\n <db-tab-item value="overview">Overview</db-tab-item>\n <db-tab-item value="details">Details</db-tab-item>\n <db-tab-item value="settings">Settings</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Overview content</db-tab-panel>\n <db-tab-panel>Details content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabs</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <h2>Angular Example</h2>\n <db-tabs ng-_reflect-arrow-scroll-distance="75">\n <div class="db-tabs">\n <db-tab-list>\n <div\n role="tablist"\n class="db-tab-list"\n id="tab-list-d1abe676-4c30-4219-b957-f1a397d54a0b"\n aria-orientation="horizontal"\n >\n <db-tab\n ng-_reflect-name="functional"\n ng-_reflect-index="0"\n >\n <label\n role="tab"\n class="db-tab"\n for="functional-tab-0"\n aria-controls="functional-tab-panel-0"\n data-width="auto"\n data-alignment="start"\n >\n <input\n type="radio"\n name="functional"\n id="functional-tab-0"\n />Test 1</label\n >\n </db-tab>\n <db-tab\n ng-_reflect-name="functional"\n ng-_reflect-index="1"\n >\n <label\n role="tab"\n class="db-tab"\n for="functional-tab-1"\n aria-controls="functional-tab-panel-1"\n data-width="auto"\n data-alignment="start"\n >\n <input\n type="radio"\n name="functional"\n id="functional-tab-1"\n />\n Test 2\n </label>\n </db-tab>\n <db-tab\n ng-_reflect-name="functional"\n ng-_reflect-index="2"\n >\n <label\n role="tab"\n class="db-tab"\n for="functional-tab-2"\n aria-controls="functional-tab-panel-2"\n data-width="auto"\n data-alignment="start"\n >\n <input\n type="radio"\n name="functional"\n id="functional-tab-2"\n />\n Test 3\n </label>\n </db-tab>\n </div>\n </db-tab-list>\n <db-tab-panel\n ng-_reflect-name="functional"\n ng-_reflect-index="0"\n >\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="functional-tab-panel-0"\n aria-labelledby="functional-tab-0"\n >\n Tab Panel 1\n </article>\n </db-tab-panel>\n <db-tab-panel\n ng-_reflect-name="functional"\n ng-_reflect-index="1"\n >\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="functional-tab-panel-1"\n aria-labelledby="functional-tab-1"\n >\n Tab Panel 2\n </article>\n </db-tab-panel>\n <db-tab-panel\n ng-_reflect-name="functional"\n ng-_reflect-index="2"\n >\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="functional-tab-panel-2"\n aria-labelledby="functional-tab-2"\n >\n Tab Panel 3\n </article>\n </db-tab-panel>\n </div>\n </db-tabs>\n </body>\n</html>\n' } } }, tag: { props: `import {
38979
39389
  ClickEvent,
38980
39390
  ContentSlotProps,
38981
39391
  EmphasisProps,