@duetds/components 4.28.0 → 4.31.0

package/lib/esm/duet-collapsible.entry.js

@@ -1,12 +1,462 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-aaa7610e.js';
-import { c as createID } from './create-id-124e0fc4.js';
-import { i as inheritGlobalTheme } from './themeable-component-2a857b64.js';
-import { a as actionArrowDownSmall } from './action-arrow-down-small-c24d2c7f.js';
-import { i as isKeyboardClick } from './keyboard-utils-956f0d36.js';
+/*!
+ * Built with Duet Design System
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6e246691.js';
+import { a as actionArrowDownSmall } from './action-arrow-down-small-82273dc8.js';
+import { c as createID } from './create-id-981107da.js';
+import { i as isKeyboardClick } from './keyboard-utils-584cedd7.js';
+import { s as sanitizeString } from './string-utils-2f1793b8.js';
+import { i as inheritGlobalTheme } from './themeable-component-572685dd.js';
+
+const color_warning = "rgb(247, 178, 40)";
+const color_gray_darker = "rgb(101, 119, 135)";
+const color_gray_lighter = "rgb(245, 248, 250)";
+const color_category_home = "rgb(211, 36, 131)";
+const color_primary = "rgb(0, 119, 179)";
+const color_category_vehicle = "rgb(54, 74, 129)";
+const color_success = "rgb(0, 135, 90)";
+const color_category_family = "rgb(11, 114, 136)";
+const color_primary_lightest = "rgb(243, 249, 252)";
+const color_primary_lighter = "rgb(230, 242, 248)";
+const color_brand_blue = "rgb(0, 161, 212)";
+const color_primary_dark = "rgb(0, 77, 128)";
+const color_gray_lightest = "rgb(255, 255, 255)";
+const color_category_finance = "rgb(122, 1, 196)";
+const color_gray_dark = "rgb(144, 149, 153)";
+const color_gray_light = "rgb(225, 227, 230)";
+const color_secondary = "rgb(0, 41, 77)";
+const color_category_pet = "rgb(168, 1, 78)";
+const color_primary_light = "rgb(205, 229, 241)";
+const color_category_travel = "rgb(213, 66, 3)";
+const color_gray = "rgb(207, 210, 212)";
+const color_danger = "rgb(222, 35, 98)";
+const color_gray_darker_turva = "rgb(68, 68, 69)";
+const color_gray_lighter_turva = "rgb(245, 245, 247)";
+const color_category_home_turva = "rgb(161, 10, 78)";
+const color_primary_turva = "rgb(198, 12, 48)";
+const color_category_vehicle_turva = "rgb(23, 28, 58)";
+const color_success_turva = "rgb(8, 135, 78)";
+const color_primary_lightest_turva = "rgb(252, 243, 244)";
+const color_category_family_turva = "rgb(199, 12, 112)";
+const color_category_union_turva = "rgb(169, 69, 124)";
+const color_primary_lighter_turva = "rgb(249, 230, 234)";
+const color_primary_dark_turva = "rgb(148, 9, 37)";
+const color_gray_lightest_turva = "rgb(255, 255, 255)";
+const color_gray_dark_turva = "rgb(116, 116, 117)";
+const color_gray_light_turva = "rgb(228, 228, 230)";
+const color_brand_gray_turva = "rgb(178, 180, 179)";
+const color_secondary_turva = "rgb(23, 28, 58)";
+const color_primary_light_turva = "rgb(244, 207, 214)";
+const color_category_travel_turva = "rgb(9, 129, 148)";
+const color_gray_turva = "rgb(207, 207, 209)";
+const color_danger_turva = "rgb(224, 42, 13)";
+const color_warning_turva = "rgb(250, 164, 15)";
+const color_data_07 = "rgb(192, 101, 247)";
+const color_data_08 = "rgb(0, 105, 191)";
+const color_data_09 = "rgb(19, 120, 53)";
+const color_data_10 = "rgb(179, 60, 24)";
+const color_data_11 = "rgb(13, 163, 166)";
+const color_data_01 = "rgb(122, 1, 196)";
+const color_data_12 = "rgb(11, 114, 136)";
+const color_data_02 = "rgb(0, 155, 204)";
+const color_data_13 = "rgb(179, 137, 24)";
+const color_data_03 = "rgb(27, 171, 75)";
+const color_data_14 = "rgb(128, 98, 17)";
+const color_data_04 = "rgb(255, 86, 34)";
+const color_data_15 = "rgb(0, 41, 77)";
+const color_data_05 = "rgb(245, 76, 154)";
+const color_data_06 = "rgb(194, 21, 101)";
+const font_weight_extra_bold = "800";
+const letter_spacing_heading = "-0.01rem";
+const font_family_heading_turva = "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const font_family_text_turva = "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const font_family_heading = "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const font_family_text = "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const font_weight_bold = "700";
+const font_weight_normal = "400";
+const font_weight_semi_bold = "600";
+const font_size_xxxx_large = "4.5rem";
+const font_size_xxx_large = "3rem";
+const font_size_xx_large = "2.25rem";
+const font_size_x_large = "1.5rem";
+const font_size_large = "1.25rem";
+const font_size_medium = "1rem";
+const font_size_small = "0.875rem";
+const font_size_x_small = "0.75rem";
+const radius_sharp = "0";
+const radius_default = "4px";
+const radius_circle = "50%";
+const radius_pill = "20rem";
+const shadow_tooltip_turva = "0 2px 10px 0 rgba(117, 117, 117, 0.13)";
+const shadow_default = "0 2px 6px 0 rgba(0, 41, 77, 0.07)";
+const shadow_tooltip = "0 2px 10px 0 rgba(0, 41, 77, 0.07)";
+const shadow_card_turva = "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)";
+const shadow_modal = "0 2px 20px 0 rgba(0, 0, 0, 0.2)";
+const shadow_card = "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)";
+const shadow_hover_turva = "0 2px 10px 0 rgba(117, 117, 117, 0.15)";
+const shadow_hover = "0 2px 10px 0 rgba(0, 41, 77, 0.1)";
+const shadow_default_turva = "0 2px 6px 0 rgba(117, 117, 117, 0.13)";
+const space_xx_small = "4px";
+const space_large = "20px";
+const space_x_small = "8px";
+const space_xxx_small = "2px";
+const space_small = "12px";
+const space_medium = "16px";
+const space_xx_large = "36px";
+const space_xxxx_large = "72px";
+const space_xxxxx_large = "94px";
+const space_xxx_large = "48px";
+const space_x_large = "28px";
+const size_icon_xx_large = "48px";
+const size_form_border = "1px";
+const size_step_medium = "40px";
+const size_button_min_width = "8rem";
+const size_header = "4rem";
+const size_icon_xxx_large = "72px";
+const size_icon_x_large = "36px";
+const size_icon_xx_small = "10px";
+const size_step_small = "30px";
+const size_navigation = "3rem";
+const size_icon_large = "30px";
+const size_layout_max_width = "1110px";
+const size_tappable_square = "48px";
+const size_icon_x_small = "16px";
+const size_icon_xxx_small = "7px";
+const size_button_border = "2px";
+const size_icon_medium = "24px";
+const size_icon_small = "20px";
+const opacity_85 = "0.85";
+const opacity_75 = "0.75";
+const opacity_50 = "0.50";
+const opacity_30 = "0.30";
+const z_index_dropdown = "600";
+const z_index_spinner = "800";
+const z_index_default = "1";
+const z_index_toast = "500";
+const z_index_popup = "950";
+const z_index_modal = "900";
+const z_index_sticky = "300";
+const z_index_masked = "100";
+const z_index_deep = "-999999";
+const z_index_overlay = "700";
+const z_index_mask = "200";
+const z_index_header = "400";
+const line_height_medium = "1.5";
+const line_height_small = "1.25";
+const line_height_x_small = "1.1";
+const transition_quickly = "300ms ease";
+const transition_slowly = "600ms ease";
+const media_query_xx_small = "'(max-width: 22.5em)'";
+const media_query_x_small = "'(max-width: 35.9375em)'";
+const media_query_small = "'(min-width: 36em)'";
+const media_query_medium = "'(min-width: 48em)'";
+const media_query_large = "'(min-width: 62em)'";
+const media_query_x_large = "'(min-width: 64.0625em)'";
+const media_query_xx_large = "'(min-width: 76.25em)'";
+const media_query_xxx_large = "'(min-width: 106.25em)'";
+const tokens = {
+	color_warning: color_warning,
+	color_gray_darker: color_gray_darker,
+	color_gray_lighter: color_gray_lighter,
+	color_category_home: color_category_home,
+	color_primary: color_primary,
+	color_category_vehicle: color_category_vehicle,
+	color_success: color_success,
+	color_category_family: color_category_family,
+	color_primary_lightest: color_primary_lightest,
+	color_primary_lighter: color_primary_lighter,
+	color_brand_blue: color_brand_blue,
+	color_primary_dark: color_primary_dark,
+	color_gray_lightest: color_gray_lightest,
+	color_category_finance: color_category_finance,
+	color_gray_dark: color_gray_dark,
+	color_gray_light: color_gray_light,
+	color_secondary: color_secondary,
+	color_category_pet: color_category_pet,
+	color_primary_light: color_primary_light,
+	color_category_travel: color_category_travel,
+	color_gray: color_gray,
+	color_danger: color_danger,
+	color_gray_darker_turva: color_gray_darker_turva,
+	color_gray_lighter_turva: color_gray_lighter_turva,
+	color_category_home_turva: color_category_home_turva,
+	color_primary_turva: color_primary_turva,
+	color_category_vehicle_turva: color_category_vehicle_turva,
+	color_success_turva: color_success_turva,
+	color_primary_lightest_turva: color_primary_lightest_turva,
+	color_category_family_turva: color_category_family_turva,
+	color_category_union_turva: color_category_union_turva,
+	color_primary_lighter_turva: color_primary_lighter_turva,
+	color_primary_dark_turva: color_primary_dark_turva,
+	color_gray_lightest_turva: color_gray_lightest_turva,
+	color_gray_dark_turva: color_gray_dark_turva,
+	color_gray_light_turva: color_gray_light_turva,
+	color_brand_gray_turva: color_brand_gray_turva,
+	color_secondary_turva: color_secondary_turva,
+	color_primary_light_turva: color_primary_light_turva,
+	color_category_travel_turva: color_category_travel_turva,
+	color_gray_turva: color_gray_turva,
+	color_danger_turva: color_danger_turva,
+	color_warning_turva: color_warning_turva,
+	color_data_07: color_data_07,
+	color_data_08: color_data_08,
+	color_data_09: color_data_09,
+	color_data_10: color_data_10,
+	color_data_11: color_data_11,
+	color_data_01: color_data_01,
+	color_data_12: color_data_12,
+	color_data_02: color_data_02,
+	color_data_13: color_data_13,
+	color_data_03: color_data_03,
+	color_data_14: color_data_14,
+	color_data_04: color_data_04,
+	color_data_15: color_data_15,
+	color_data_05: color_data_05,
+	color_data_06: color_data_06,
+	font_weight_extra_bold: font_weight_extra_bold,
+	letter_spacing_heading: letter_spacing_heading,
+	font_family_heading_turva: font_family_heading_turva,
+	font_family_text_turva: font_family_text_turva,
+	font_family_heading: font_family_heading,
+	font_family_text: font_family_text,
+	font_weight_bold: font_weight_bold,
+	font_weight_normal: font_weight_normal,
+	font_weight_semi_bold: font_weight_semi_bold,
+	font_size_xxxx_large: font_size_xxxx_large,
+	font_size_xxx_large: font_size_xxx_large,
+	font_size_xx_large: font_size_xx_large,
+	font_size_x_large: font_size_x_large,
+	font_size_large: font_size_large,
+	font_size_medium: font_size_medium,
+	font_size_small: font_size_small,
+	font_size_x_small: font_size_x_small,
+	radius_sharp: radius_sharp,
+	radius_default: radius_default,
+	radius_circle: radius_circle,
+	radius_pill: radius_pill,
+	shadow_tooltip_turva: shadow_tooltip_turva,
+	shadow_default: shadow_default,
+	shadow_tooltip: shadow_tooltip,
+	shadow_card_turva: shadow_card_turva,
+	shadow_modal: shadow_modal,
+	shadow_card: shadow_card,
+	shadow_hover_turva: shadow_hover_turva,
+	shadow_hover: shadow_hover,
+	shadow_default_turva: shadow_default_turva,
+	space_xx_small: space_xx_small,
+	space_large: space_large,
+	space_x_small: space_x_small,
+	space_xxx_small: space_xxx_small,
+	space_small: space_small,
+	space_medium: space_medium,
+	space_xx_large: space_xx_large,
+	space_xxxx_large: space_xxxx_large,
+	space_xxxxx_large: space_xxxxx_large,
+	space_xxx_large: space_xxx_large,
+	space_x_large: space_x_large,
+	size_icon_xx_large: size_icon_xx_large,
+	size_form_border: size_form_border,
+	size_step_medium: size_step_medium,
+	size_button_min_width: size_button_min_width,
+	size_header: size_header,
+	size_icon_xxx_large: size_icon_xxx_large,
+	size_icon_x_large: size_icon_x_large,
+	size_icon_xx_small: size_icon_xx_small,
+	size_step_small: size_step_small,
+	size_navigation: size_navigation,
+	size_icon_large: size_icon_large,
+	size_layout_max_width: size_layout_max_width,
+	size_tappable_square: size_tappable_square,
+	size_icon_x_small: size_icon_x_small,
+	size_icon_xxx_small: size_icon_xxx_small,
+	size_button_border: size_button_border,
+	size_icon_medium: size_icon_medium,
+	size_icon_small: size_icon_small,
+	opacity_85: opacity_85,
+	opacity_75: opacity_75,
+	opacity_50: opacity_50,
+	opacity_30: opacity_30,
+	z_index_dropdown: z_index_dropdown,
+	z_index_spinner: z_index_spinner,
+	z_index_default: z_index_default,
+	z_index_toast: z_index_toast,
+	z_index_popup: z_index_popup,
+	z_index_modal: z_index_modal,
+	z_index_sticky: z_index_sticky,
+	z_index_masked: z_index_masked,
+	z_index_deep: z_index_deep,
+	z_index_overlay: z_index_overlay,
+	z_index_mask: z_index_mask,
+	z_index_header: z_index_header,
+	line_height_medium: line_height_medium,
+	line_height_small: line_height_small,
+	line_height_x_small: line_height_x_small,
+	transition_quickly: transition_quickly,
+	transition_slowly: transition_slowly,
+	media_query_xx_small: media_query_xx_small,
+	media_query_x_small: media_query_x_small,
+	media_query_small: media_query_small,
+	media_query_medium: media_query_medium,
+	media_query_large: media_query_large,
+	media_query_x_large: media_query_x_large,
+	media_query_xx_large: media_query_xx_large,
+	media_query_xxx_large: media_query_xxx_large
+};
+
+const tokens$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  color_warning: color_warning,
+  color_gray_darker: color_gray_darker,
+  color_gray_lighter: color_gray_lighter,
+  color_category_home: color_category_home,
+  color_primary: color_primary,
+  color_category_vehicle: color_category_vehicle,
+  color_success: color_success,
+  color_category_family: color_category_family,
+  color_primary_lightest: color_primary_lightest,
+  color_primary_lighter: color_primary_lighter,
+  color_brand_blue: color_brand_blue,
+  color_primary_dark: color_primary_dark,
+  color_gray_lightest: color_gray_lightest,
+  color_category_finance: color_category_finance,
+  color_gray_dark: color_gray_dark,
+  color_gray_light: color_gray_light,
+  color_secondary: color_secondary,
+  color_category_pet: color_category_pet,
+  color_primary_light: color_primary_light,
+  color_category_travel: color_category_travel,
+  color_gray: color_gray,
+  color_danger: color_danger,
+  color_gray_darker_turva: color_gray_darker_turva,
+  color_gray_lighter_turva: color_gray_lighter_turva,
+  color_category_home_turva: color_category_home_turva,
+  color_primary_turva: color_primary_turva,
+  color_category_vehicle_turva: color_category_vehicle_turva,
+  color_success_turva: color_success_turva,
+  color_primary_lightest_turva: color_primary_lightest_turva,
+  color_category_family_turva: color_category_family_turva,
+  color_category_union_turva: color_category_union_turva,
+  color_primary_lighter_turva: color_primary_lighter_turva,
+  color_primary_dark_turva: color_primary_dark_turva,
+  color_gray_lightest_turva: color_gray_lightest_turva,
+  color_gray_dark_turva: color_gray_dark_turva,
+  color_gray_light_turva: color_gray_light_turva,
+  color_brand_gray_turva: color_brand_gray_turva,
+  color_secondary_turva: color_secondary_turva,
+  color_primary_light_turva: color_primary_light_turva,
+  color_category_travel_turva: color_category_travel_turva,
+  color_gray_turva: color_gray_turva,
+  color_danger_turva: color_danger_turva,
+  color_warning_turva: color_warning_turva,
+  color_data_07: color_data_07,
+  color_data_08: color_data_08,
+  color_data_09: color_data_09,
+  color_data_10: color_data_10,
+  color_data_11: color_data_11,
+  color_data_01: color_data_01,
+  color_data_12: color_data_12,
+  color_data_02: color_data_02,
+  color_data_13: color_data_13,
+  color_data_03: color_data_03,
+  color_data_14: color_data_14,
+  color_data_04: color_data_04,
+  color_data_15: color_data_15,
+  color_data_05: color_data_05,
+  color_data_06: color_data_06,
+  font_weight_extra_bold: font_weight_extra_bold,
+  letter_spacing_heading: letter_spacing_heading,
+  font_family_heading_turva: font_family_heading_turva,
+  font_family_text_turva: font_family_text_turva,
+  font_family_heading: font_family_heading,
+  font_family_text: font_family_text,
+  font_weight_bold: font_weight_bold,
+  font_weight_normal: font_weight_normal,
+  font_weight_semi_bold: font_weight_semi_bold,
+  font_size_xxxx_large: font_size_xxxx_large,
+  font_size_xxx_large: font_size_xxx_large,
+  font_size_xx_large: font_size_xx_large,
+  font_size_x_large: font_size_x_large,
+  font_size_large: font_size_large,
+  font_size_medium: font_size_medium,
+  font_size_small: font_size_small,
+  font_size_x_small: font_size_x_small,
+  radius_sharp: radius_sharp,
+  radius_default: radius_default,
+  radius_circle: radius_circle,
+  radius_pill: radius_pill,
+  shadow_tooltip_turva: shadow_tooltip_turva,
+  shadow_default: shadow_default,
+  shadow_tooltip: shadow_tooltip,
+  shadow_card_turva: shadow_card_turva,
+  shadow_modal: shadow_modal,
+  shadow_card: shadow_card,
+  shadow_hover_turva: shadow_hover_turva,
+  shadow_hover: shadow_hover,
+  shadow_default_turva: shadow_default_turva,
+  space_xx_small: space_xx_small,
+  space_large: space_large,
+  space_x_small: space_x_small,
+  space_xxx_small: space_xxx_small,
+  space_small: space_small,
+  space_medium: space_medium,
+  space_xx_large: space_xx_large,
+  space_xxxx_large: space_xxxx_large,
+  space_xxxxx_large: space_xxxxx_large,
+  space_xxx_large: space_xxx_large,
+  space_x_large: space_x_large,
+  size_icon_xx_large: size_icon_xx_large,
+  size_form_border: size_form_border,
+  size_step_medium: size_step_medium,
+  size_button_min_width: size_button_min_width,
+  size_header: size_header,
+  size_icon_xxx_large: size_icon_xxx_large,
+  size_icon_x_large: size_icon_x_large,
+  size_icon_xx_small: size_icon_xx_small,
+  size_step_small: size_step_small,
+  size_navigation: size_navigation,
+  size_icon_large: size_icon_large,
+  size_layout_max_width: size_layout_max_width,
+  size_tappable_square: size_tappable_square,
+  size_icon_x_small: size_icon_x_small,
+  size_icon_xxx_small: size_icon_xxx_small,
+  size_button_border: size_button_border,
+  size_icon_medium: size_icon_medium,
+  size_icon_small: size_icon_small,
+  opacity_85: opacity_85,
+  opacity_75: opacity_75,
+  opacity_50: opacity_50,
+  opacity_30: opacity_30,
+  z_index_dropdown: z_index_dropdown,
+  z_index_spinner: z_index_spinner,
+  z_index_default: z_index_default,
+  z_index_toast: z_index_toast,
+  z_index_popup: z_index_popup,
+  z_index_modal: z_index_modal,
+  z_index_sticky: z_index_sticky,
+  z_index_masked: z_index_masked,
+  z_index_deep: z_index_deep,
+  z_index_overlay: z_index_overlay,
+  z_index_mask: z_index_mask,
+  z_index_header: z_index_header,
+  line_height_medium: line_height_medium,
+  line_height_small: line_height_small,
+  line_height_x_small: line_height_x_small,
+  transition_quickly: transition_quickly,
+  transition_slowly: transition_slowly,
+  media_query_xx_small: media_query_xx_small,
+  media_query_x_small: media_query_x_small,
+  media_query_small: media_query_small,
+  media_query_medium: media_query_medium,
+  media_query_large: media_query_large,
+  media_query_x_large: media_query_x_large,
+  media_query_xx_large: media_query_xx_large,
+  media_query_xxx_large: media_query_xxx_large,
+  'default': tokens
+});
 
 const duetCollapsibleCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:#00294d}:host(.duet-theme-turva){font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}:host(.duet-m-0){margin:0 !important}.duet-collapsible-content{display:none;padding-left:18px;margin-top:8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:#00294d}@media (max-width: 35.9375em){.duet-collapsible-content{font-size:0.875rem}}.duet-collapsible-content.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}:host([open]) .duet-collapsible-content{display:block}.duet-collapsible-heading{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:#00294d;cursor:pointer;border-radius:4px}.duet-collapsible-heading.duet-collapsible-normal-weight{font-weight:400}.duet-collapsible-heading.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-collapsible-heading .duet-collapsible-heading-content{flex:1}.duet-collapsible-heading:focus{outline:0}:host(.user-is-tabbing) .duet-collapsible-heading:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing.duet-theme-turva) .duet-collapsible-heading:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-collapsible-heading-icon{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:#00294d;transition:transform 300ms ease}.duet-collapsible-heading-icon:last-child,.duet-collapsible-heading-icon:last-of-type{margin-right:0 !important}[aria-expanded=true] .duet-collapsible-heading-icon{transform:rotate(180deg)}";
 
-const DuetCollapsible = class {
+let DuetCollapsible = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.duetToggle = createEvent(this, "duetToggle", 7);
@@ -23,6 +473,26 @@ const DuetCollapsible = class {
      * The font weight of the heading
      */
     this.headingWeight = "semibold";
+    /**
+     * Custom headingSize to be used for font size of heading, as a design token entered
+     * in kebab-case x-small -> font-size-x-small.
+     * Example:
+     * # 12px (0.75rem)  ------  +2px   (x-small)
+     * # 14px (0.875rem) ------  +2px   (small)
+     * # 16px (1rem)     ------  +2px   (medium)
+     * # 20px (1.25rem)  ------  +4px   (large)
+     * # 24px (1.5rem)   ------  +4px   (x-large)
+     * # 36px (2.25rem)  ------  +12px  (xx-large)
+     * # 48px (3rem)     ------  +12px  (xxx-large)
+     * # 72px (4.5rem)   ------  +24px  (xxxx-large)
+     */
+    this.headingSize = undefined;
+    /**
+     * The actual heading level used for the heading in html markup. This setting
+     * exists for accessibility reasons. It doesn’t change the style visually.
+     * only variations of h1-h6 area accepted
+     */
+    this.headingLevel = undefined;
     /**
      * Controls the margin of the component.
      */
@@ -36,6 +506,39 @@ const DuetCollapsible = class {
         this.handleClick(e);
       }
     };
+    this.getFontSizeFromTokens = (fontSize = this.headingSize) => {
+      if (!fontSize) {
+        return font_size_medium;
+      }
+      else {
+        const searchRegExp = /-/g;
+        const fontSizeReplaced = fontSize.replace(searchRegExp, "_");
+        return tokens$1[`font_size_${fontSizeReplaced}`];
+      }
+    };
+    this.getEquivalentIconSize = (fontSize = this.headingSize) => {
+      switch (fontSize) {
+        case "x-small":
+          return "xx-small";
+        case "small":
+          return "xx-small";
+        case "medium":
+          return "xx-small";
+        case "large":
+          return "x-small";
+        case "x-large":
+          return "small";
+        case "xx-large":
+          return "medium";
+        case "xxx-large":
+          return "x-large";
+        case "xxxx-large":
+          return "xxx-large";
+        default:
+          // default size
+          return "xx-small";
+      }
+    };
     this.handleClick = (e) => {
       e.preventDefault();
       this.open = !this.open;
@@ -66,11 +569,12 @@ const DuetCollapsible = class {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("div", { class: {
+    const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h(HeadingTagName, { class: {
         "duet-collapsible-heading": true,
         "duet-theme-turva": this.theme === "turva",
         "duet-collapsible-normal-weight": this.headingWeight === "normal",
-      }, role: "button", tabindex: "0", ref: button => (this.nativeButton = button), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "duet-collapsible-heading-icon" }, h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: "xx-small", icon: actionArrowDownSmall.svg })), h("div", { class: "duet-collapsible-heading-content" }, this.heading)), h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", null))));
+      }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", tabindex: "0", ref: button => (this.nativeButton = button), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "duet-collapsible-heading-icon" }, h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.svg })), h("div", { class: "duet-collapsible-heading-content" }, this.heading)), h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", null))));
   }
   get element() { return getElement(this); }
 };

package/lib/esm/duet-cookie-consent.entry.js

@@ -1,9 +1,12 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-aaa7610e.js';
-import { i as inheritGlobalTheme } from './themeable-component-2a857b64.js';
+/*!
+ * Built with Duet Design System
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6e246691.js';
+import { i as inheritGlobalTheme } from './themeable-component-572685dd.js';
 
 const duetCookieConsentCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:fixed;right:0;bottom:0;left:0;z-index:950;display:block;width:100%;box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@media (min-width: 48em){:host{right:28px;bottom:28px;left:auto;width:25rem}}:host(:focus){outline:0}:host(.user-is-tabbing:focus){border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing.duet-theme-turva:focus){box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-cookie-consent{padding:20px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;color:white !important;background-color:rgba(0, 21, 39, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent{background:rgba(0, 21, 39, 0.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.duet-cookie-consent.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";background-color:rgba(12, 14, 29, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent.duet-theme-turva{background:rgba(12, 14, 29, 0.8)}}@media (min-width: 48em){.duet-cookie-consent{padding:20px;border-radius:4px}}.duet-cookie-consent-content{display:flex;align-items:center;max-width:1110px;margin:0 auto}.duet-cookie-consent-content .expand{flex:1}::slotted(a){font-weight:600;color:white !important;text-decoration:underline;white-space:nowrap}::slotted(a[target=_blank]){padding-right:16px;background:url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjUgMmExLjUgMS41IDAgMDEuMTQgM0gzLjc1Yy0uMzggMC0uNy4yOC0uNzQuNjVsLS4wMS4xdjE0LjVjMCAuMzguMjguNy42NS43NGwuMS4wMWgxNC41Yy4zOCAwIC43LS4yOC43NC0uNjVsLjAxLS4xdi02Ljg5YTEuNSAxLjUgMCAwMTMgMHY2Ljg5QTMuNzUgMy43NSAwIDAxMTguMjUgMjRIMy43NUEzLjc1IDMuNzUgMCAwMTAgMjAuMjVWNS43NUEzLjc1IDMuNzUgMCAwMTMuNzUgMnptMTItMmMuNzggMCAxLjQyLjYgMS41IDEuMzZWNy41YTEuNSAxLjUgMCAwMS0zIC4xNFY1LjEybC01LjQ0IDUuNDRhMS41IDEuNSAwIDAxLTIuMjItMmwuMS0uMTJMMTguODggM0gxNi41QTEuNSAxLjUgMCAwMTE1IDEuNjRWMS41YzAtLjc4LjYtMS40MiAxLjM2LTEuNWguMTR6Ii8+PC9zdmc+\") no-repeat right 50%;background-size:12px 10px}::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva ::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
 
-const DuetCookieConsent = class {
+let DuetCookieConsent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.duetCookieConsent = createEvent(this, "duetCookieConsent", 7);