@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/src/themes/sap_horizon_hcw/Switch-parameters.css

@@ -1,21 +1,20 @@
 @import "../base/Switch-parameters.css";
 :root {
 	/* Switch */
-	--_ui5_switch_width: 3.5rem;
+	--_ui5_switch_width: 2.5rem;
 	--_ui5_switch_min_width: none;
 
-	--_ui5_switch_with_label_width: 3.875rem;
+	--_ui5_switch_with_label_width: 2.875rem;
 
 	--_ui5_switch_focus_outline: none;
 	--_ui5_switch_root_after_outline: 0.125rem solid var(--sapContent_FocusColor);
 
-	--_ui5_switch_root_after_boreder: none;
 	--_ui5_switch_root_after_boreder_radius: 1rem;
 
 	--_ui5_switch_root_outline_top: 0.5rem;
 	--_ui5_switch_root_outline_bottom: 0.5rem;
-	--_ui5_switch_root_outline_left: 0.375rem;
-	--_ui5_switch_root_outline_right: 0.375rem;
+	--_ui5_switch_root_outline_left: -0.125rem;
+	--_ui5_switch_root_outline_right: -0.125rem;
 
 
 	--_ui5_switch_disabled_opacity: var(--sapContent_DisabledOpacity);
@@ -108,7 +107,6 @@
 	--_ui5_switch_text_inactive_right: auto;
 	--_ui5_switch_text_active_left: 0.1875rem;
 	--_ui5_switch_text_active_left_alternate: 0.0625rem;
-	--_ui5_switch_text_active_right: auto;
 
 	--_ui5_switch_text_active_color: var(--sapButton_Handle_Selected_TextColor);
 	--_ui5_switch_text_inactive_color: var(--sapButton_Handle_TextColor);
@@ -128,16 +126,16 @@
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
-	--_ui5_switch_width: 3rem;
+	--_ui5_switch_width: 2.75rem;
 	--_ui5_switch_min_width: none;
-	--_ui5_switch_with_label_width: 3.75rem;
+	--_ui5_switch_with_label_width: 2.75rem;
 	--_ui5_switch_root_outline_top: 0.25rem;
 	--_ui5_switch_root_outline_bottom: 0.25rem;
 	--_ui5_switch_transform: translateX(100%) translateX(-1.375rem);
 	--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);
 	--_ui5_switch_rtl_transform: translateX(1.375rem) translateX(-100%);
 	--_ui5_switch_rtl_transform_with_label: translateX(1.875rem) translateX(-100%);
-	--_ui5_switch_track_width: 2rem;
+	--_ui5_switch_track_width: 2.75rem;
 	--_ui5_switch_track_height: 1.25rem;
 	--_ui5_switch_track_with_label_width: 2.75rem;
 	--_ui5_switch_track_with_label_height: 1.25rem;

package/src/themes/sap_horizon_hcw/TabContainer-parameters.css

@@ -4,37 +4,18 @@
 	--_ui5_tc_header_border_bottom: 0.125rem solid var(--sapPageHeader_BorderColor);
 
 	/* Header Item */
-	--_ui5_tc_headerItemContent_border_bottom: 0.3125rem solid var(--sapPageHeader_BorderColor);
+	--_ui5_tc_headerItem_color: var(--sapTab_TextColor);
+	--_ui5_tc_overflowItem_default_color: var(--sapTab_TextColor);
 	--_ui5_tc_headerItem_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
-	--_ui5_tc_headerItem_text_selected_color: var(--sapPageHeader_BorderColor);
 	--_ui5_tc_headerItem_text_selected_hover_color: var(--sapPageHeader_BorderColor);
-	--_ui5_tc_headerItem_neutral_color: var(--sapTextColor);
-	--_ui5_tc_headerItem_positive_color: var(--sapTextColor);
-	--_ui5_tc_headerItem_negative_color: var(--sapTextColor);
-	--_ui5_tc_headerItem_critical_color: var(--sapTextColor);
-	--_ui5_tc_headerItem_neutral_border_color: var(--_ui5_tc_headerItem_neutral_color);
-	--_ui5_tc_headerItem_positive_border_color: var(--_ui5_tc_headerItem_positive_color);
-	--_ui5_tc_headerItem_negative_border_color: var(--_ui5_tc_headerItem_negative_color);
-	--_ui5_tc_headerItem_critical_border_color: var(--_ui5_tc_headerItem_critical_color);
-	--_ui5_tc_headerItem_neutral_selected_border_color: var(--_ui5_tc_headerItem_neutral_color);
-	--_ui5_tc_headerItem_positive_selected_border_color: var(--_ui5_tc_headerItem_positive_color);
-	--_ui5_tc_headerItem_negative_selected_border_color: var(--_ui5_tc_headerItem_negative_color);
-	--_ui5_tc_headerItem_critical_selected_border_color: var(--_ui5_tc_headerItem_critical_color);
 	--_ui5_tc_headerItemSemanticIcon_display: inline-block;
 	--_ui5_tc_headerItem_expand_button_margin_inline_start: 0rem;
 	--_ui5_tc_headerItem_single_click_expand_button_margin_inline_start: 0.25rem;
 	--_ui5_tc_headerItem_expand_button_border_radius: 0.25rem;
+	--_ui5_tc_headerItem_text_hover_color: var(--sapTab_Selected_TextColor);
 
 	/* Header Item icons */
-	--_ui5_tc_headerItemIcon_border: 1px solid var(--sapPageHeader_BorderColor);
-	--_ui5_tc_headerItemIcon_color: var(--sapPageHeader_BorderColor);
-	--_ui5_tc_headerItemIcon_selected_background: var(--sapSelectedColor);
-	--_ui5_tc_headerItemIcon_selected_color: var(--sapContent_IconColor);
-	--_ui5_tc_headerItemIcon_positive_selected_background: var(--sapSelectedColor);
-	--_ui5_tc_headerItemIcon_negative_selected_background: var(--sapSelectedColor);
-	--_ui5_tc_headerItemIcon_critical_selected_background: var(--sapSelectedColor);
-	--_ui5_tc_headerItemIcon_neutral_selected_background: var(--sapSelectedColor);
-	--_ui5_tc_headerItemIcon_semantic_selected_color: var(--sapContent_IconColor);
+	--_ui5_tc_headerItemIcon_border: 0.125rem solid var(--sapTab_ForegroundColor);
 
 	/* Overflow Item */
 	--_ui5_tc_overflowItem_positive_color: var(--sapTextColor);
@@ -42,7 +23,8 @@
 	--_ui5_tc_overflowItem_critical_color: var(--sapTextColor);
 	--_ui5_tc_overflowItem_default_color: var(--sapTextColor);
 	--_ui5_tc_overflowItem_current_color: var(--_ui5_tc_overflowItem_default_color);
-	--_ui5_tc_overflowItem_extraIndent: 1rem;
+	--_ui5_tc_overflowItem_extra_indent: 1rem;
+	--_ui5_tc_overflowItem_additional: 1;
 
 	/* Overflow Buttons*/
 	--_ui5_tc_overflow_text_color: var(--sapTextColor);

package/src/themes/sap_horizon_hcw/Tag-parameters.css

@@ -5,10 +5,7 @@
 	--_ui5-tag-padding-inline-icon-only: 0.313rem;
 	--_ui5-tag-text-transform: none;
 	--_ui5-tag-icon-gap: 0.25rem;
-	--_ui5-tag-font-size: var(--sapFontSize);
-	--_ui5-tag-font: var(--sapFontSemiboldDuplexFamily);
 	--_ui5-tag-font-weight: normal;
-	--_ui5-tag-default-border-color: transparent;
 	--_ui5-tag-letter-spacing: normal;
 
 	--ui5-tag-text-shadow: none;
@@ -16,8 +13,8 @@
 
 	/* set 2 */
 
-	--ui5-tag-set2-color-scheme-1-color: var(--sapIndicationColor_1_TextColor);
-	--ui5-tag-set2-color-scheme-1-background: var(--sapIndicationColor_1_Background);
+	--ui5-tag-set2-color-scheme-1-color: var(--sapIndicationColor_1b_TextColor);
+	--ui5-tag-set2-color-scheme-1-background: var(--sapIndicationColor_1b_Background);
 	--ui5-tag-set2-color-scheme-1-border: var(--sapIndicationColor_1_BorderColor);
 
 	--ui5-tag-set2-color-scheme-1-hover-background: var(--sapIndicationColor_1_Hover_Background);
@@ -26,8 +23,8 @@
 	--ui5-tag-set2-color-scheme-1-active-background: var(--sapIndicationColor_1_Active_Background);
 	--ui5-tag-set2-color-scheme-1-active-border: var(--sapIndicationColor_1_Active_BorderColor);
 
-	--ui5-tag-set2-color-scheme-2-color: var(--sapIndicationColor_2_TextColor);
-	--ui5-tag-set2-color-scheme-2-background: var(--sapIndicationColor_2_Background);
+	--ui5-tag-set2-color-scheme-2-color: var(--sapIndicationColor_2b_TextColor);
+	--ui5-tag-set2-color-scheme-2-background: var(--sapIndicationColor_2b_Background);
 	--ui5-tag-set2-color-scheme-2-border: var(--sapIndicationColor_2_BorderColor);
 
 	--ui5-tag-set2-color-scheme-2-hover-background: var(--sapIndicationColor_2_Hover_Background);
@@ -36,8 +33,8 @@
 	--ui5-tag-set2-color-scheme-2-active-background: var(--sapIndicationColor_2_Active_Background);
 	--ui5-tag-set2-color-scheme-2-active-border: var(--sapIndicationColor_2_Active_BorderColor);
 
-	--ui5-tag-set2-color-scheme-3-color: var(--sapIndicationColor_3_TextColor);
-	--ui5-tag-set2-color-scheme-3-background: var(--sapIndicationColor_3_Background);
+	--ui5-tag-set2-color-scheme-3-color: var(--sapIndicationColor_3b_TextColor);
+	--ui5-tag-set2-color-scheme-3-background: var(--sapIndicationColor_3b_Background);
 	--ui5-tag-set2-color-scheme-3-border: var(--sapIndicationColor_3_BorderColor);
 
 	--ui5-tag-set2-color-scheme-3-hover-background: var(--sapIndicationColor_3_Hover_Background);
@@ -46,8 +43,8 @@
 	--ui5-tag-set2-color-scheme-3-active-background: var(--sapIndicationColor_3_Active_Background);
 	--ui5-tag-set2-color-scheme-3-active-border: var(--sapIndicationColor_3_Active_BorderColor);
 
-	--ui5-tag-set2-color-scheme-4-color: var(--sapIndicationColor_4_TextColor);
-	--ui5-tag-set2-color-scheme-4-background: var(--sapIndicationColor_4_Background);
+	--ui5-tag-set2-color-scheme-4-color: var(--sapIndicationColor_4b_TextColor);
+	--ui5-tag-set2-color-scheme-4-background: var(--sapIndicationColor_4b_Background);
 	--ui5-tag-set2-color-scheme-4-border: var(--sapIndicationColor_4_BorderColor);
 
 	--ui5-tag-set2-color-scheme-4-hover-background: var(--sapIndicationColor_4_Hover_Background);
@@ -56,8 +53,8 @@
 	--ui5-tag-set2-color-scheme-4-active-background: var(--sapIndicationColor_4_Active_Background);
 	--ui5-tag-set2-color-scheme-4-active-border: var(--sapIndicationColor_4_Active_BorderColor);
 
-	--ui5-tag-set2-color-scheme-5-color: var(--sapIndicationColor_5_TextColor);
-	--ui5-tag-set2-color-scheme-5-background: var(--sapIndicationColor_5_Background);
+	--ui5-tag-set2-color-scheme-5-color: var(--sapIndicationColor_5b_TextColor);
+	--ui5-tag-set2-color-scheme-5-background: var(--sapIndicationColor_5b_Background);
 	--ui5-tag-set2-color-scheme-5-border: var(--sapIndicationColor_5_BorderColor);
 
 	--ui5-tag-set2-color-scheme-5-hover-background: var(--sapIndicationColor_5_Hover_Background);
@@ -66,8 +63,8 @@
 	--ui5-tag-set2-color-scheme-5-active-background: var(--sapIndicationColor_5_Active_Background);
 	--ui5-tag-set2-color-scheme-5-active-border: var(--sapIndicationColor_5_Active_BorderColor);
 
-	--ui5-tag-set2-color-scheme-6-color: var(--sapIndicationColor_6_TextColor);
-	--ui5-tag-set2-color-scheme-6-background: var(--sapIndicationColor_6_Background);
+	--ui5-tag-set2-color-scheme-6-color: var(--sapIndicationColor_6b_TextColor);
+	--ui5-tag-set2-color-scheme-6-background: var(--sapIndicationColor_6b_Background);
 	--ui5-tag-set2-color-scheme-6-border: var(--sapIndicationColor_6_BorderColor);
 
 	--ui5-tag-set2-color-scheme-6-hover-background: var(--sapIndicationColor_6_Hover_Background);
@@ -76,8 +73,8 @@
 	--ui5-tag-set2-color-scheme-6-active-background: var(--sapIndicationColor_6_Active_Background);
 	--ui5-tag-set2-color-scheme-6-active-border: var(--sapIndicationColor_6_Active_BorderColor);
 
-	--ui5-tag-set2-color-scheme-7-color: var(--sapIndicationColor_7_TextColor);
-	--ui5-tag-set2-color-scheme-7-background: var(--sapIndicationColor_7_Background);
+	--ui5-tag-set2-color-scheme-7-color: var(--sapIndicationColor_7b_TextColor);
+	--ui5-tag-set2-color-scheme-7-background: var(--sapIndicationColor_7b_Background);
 	--ui5-tag-set2-color-scheme-7-border: var(--sapIndicationColor_7_BorderColor);
 
 	--ui5-tag-set2-color-scheme-7-hover-background: var(--sapIndicationColor_7_Hover_Background);
@@ -86,8 +83,8 @@
 	--ui5-tag-set2-color-scheme-7-active-background: var(--sapIndicationColor_7_Active_Background);
 	--ui5-tag-set2-color-scheme-7-active-border: var(--sapIndicationColor_7_Active_BorderColor);
 
-	--ui5-tag-set2-color-scheme-8-color: var(--sapIndicationColor_8_TextColor);
-	--ui5-tag-set2-color-scheme-8-background: var(--sapIndicationColor_8_Background);
+	--ui5-tag-set2-color-scheme-8-color: var(--sapIndicationColor_8b_TextColor);
+	--ui5-tag-set2-color-scheme-8-background: var(--sapIndicationColor_8b_Background);
 	--ui5-tag-set2-color-scheme-8-border: var(--sapIndicationColor_8_BorderColor);
 
 	--ui5-tag-set2-color-scheme-8-hover-background: var(--sapIndicationColor_8_Hover_Background);
@@ -96,14 +93,14 @@
 	--ui5-tag-set2-color-scheme-8-active-background: var(--sapIndicationColor_8_Active_Background);
 	--ui5-tag-set2-color-scheme-8-active-border: var(--sapIndicationColor_8_Active_BorderColor);
 
-	--ui5-tag-set2-color-scheme-9-color: var(--sapIndicationColor_9_TextColor);
-	--ui5-tag-set2-color-scheme-9-background: var(--sapIndicationColor_9_Background);
+	--ui5-tag-set2-color-scheme-9-color: var(--sapIndicationColor_9b_TextColor);
+	--ui5-tag-set2-color-scheme-9-background: var(--sapIndicationColor_9b_Background);
 	--ui5-tag-set2-color-scheme-9-border: var(--sapIndicationColor_9_BorderColor);
 
 	--ui5-tag-set2-color-scheme-9-hover-background: var(--sapIndicationColor_9_Hover_Background);
 
-	--ui5-tag-set2-color-scheme-10-color: var(--sapIndicationColor_10_TextColor);
-	--ui5-tag-set2-color-scheme-10-background: var(--sapIndicationColor_10_Background);
+	--ui5-tag-set2-color-scheme-10-color: var(--sapIndicationColor_10b_TextColor);
+	--ui5-tag-set2-color-scheme-10-background: var(--sapIndicationColor_10b_Background);
 	--ui5-tag-set2-color-scheme-10-border: var(--sapIndicationColor_10_BorderColor);
 
 	--ui5-tag-set2-color-scheme-10-hover-background: var(--sapIndicationColor_10_Hover_Background);

package/src/themes/sap_horizon_hcw/parameters-bundle.css

@@ -4,6 +4,7 @@
 @import "../base/Bar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
+@import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "../base/CalendarLegendItem-parameters.css";
 @import "./CalendarHeader-parameters.css";
@@ -12,7 +13,7 @@
 @import "./CheckBox-parameters.css";
 @import "./ColorPalette-parameters.css";
 @import "./ColorPicker-parameters.css";
-@import "./DatePicker-parameters.css";
+@import "../base/DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "./Dialog-parameters.css";
 @import "./FileUploader-parameters.css";
@@ -43,14 +44,13 @@
 @import "./GrowingButton-parameters.css";
 @import "../base/Text-parameters.css";
 @import "./TextArea-parameters.css";
-@import "./TimePicker-parameters.css";
+@import "../base/TimePicker-parameters.css";
 @import "../base/Toast-parameters.css";
-@import "./ToggleButton-parameters.css";
+@import "../base/ToggleButton-parameters.css";
 @import "./YearPicker-parameters.css";
 @import "./Token-parameters.css";
 @import "../base/Tokenizer-parameters.css";
 @import "./ValueStateMessage-parameters.css";
-@import "../base/MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
 @import "../base/StepInput-parameters.css";
 @import "./sizes-parameters.css";

package/src/themes/sap_horizon_hcw/sizes-parameters.css

@@ -3,9 +3,8 @@
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
-	/* SplitButton */
-	--_ui5_split_button_text_button_width: 2.25rem;
-	--_ui5_color_picker_slider_container_margin_top: -10px;
+	/* ColorPicker */
+	--_ui5_color_picker_slider_handle_container_margin_top: 0.0625rem;
 
 	/* CheckBox */
 	--_ui5_checkbox_focus_position: 0.25rem;

package/vitest.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    include: ['test/unit/**.test.js'],
+    globals: true,
+    environment: 'jsdom',
+  },
+});

package/cypress/specs/ColorPalette.cy.ts

@@ -1,47 +0,0 @@
-import { html } from "lit";
-import "../../src/ColorPalette.js";
-import "../../src/ColorPaletteItem.js";
-import "../../src/features/ColorPaletteMoreColors.js";
-
-describe("Color Palette tests", () => {
-	it("internal color picker should have selected color set on open", () => {
-		cy.mount(html`<ui5-color-palette show-more-colors show-recent-colors>
-<ui5-color-palette-item id="named" value="red"></ui5-color-palette-item>
-<ui5-color-palette-item id="rgba" value="rgba(0, 255, 0, 0.5)"></ui5-color-palette-item>
-<ui5-color-palette-item id="rgb" value="rgb(0,0,255)"></ui5-color-palette-item>
-<ui5-color-palette-item id="hex" value="#C0FFEE"></ui5-color-palette-item>
-</ui5-color-palette>`);
-
-		cy.get("ui5-color-palette")
-			.ui5ColorPaletteCheckSelectedColor("#named", {
-				r: "255",
-				g: "0",
-				b: "0",
-				a: "1",
-			});
-
-		cy.get("ui5-color-palette")
-			.ui5ColorPaletteCheckSelectedColor("#rgba", {
-				r: "0",
-				g: "255",
-				b: "0",
-				a: "0.5",
-			});
-
-		cy.get("ui5-color-palette")
-			.ui5ColorPaletteCheckSelectedColor("#rgb", {
-				r: "0",
-				g: "0",
-				b: "255",
-				a: "1",
-			});
-
-		cy.get("ui5-color-palette")
-			.ui5ColorPaletteCheckSelectedColor("#hex", {
-				r: "192",
-				g: "255",
-				b: "238",
-				a: "1",
-			});
-	});
-});

package/cypress/specs/ColorPicker.cy.ts

@@ -1,27 +0,0 @@
-import { html } from "lit";
-import "../../src/ColorPicker.js";
-import type ColorPicker from "../../src/ColorPicker.js";
-
-describe("Color Picker tests", () => {
-	it("should not display color channel inputs and alpha slider in simplified mode", () => {
-		cy.mount(html`<ui5-color-picker simplified></ui5-color-picker>`);
-
-		cy.get("ui5-color-picker")
-			.as("colorPicker");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find(".ui5-color-picker-hex-input")
-			.should("exist");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#red")
-			.should("not.exist");
-
-		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#alpha")
-			.should("not.exist");
-	});
-});

package/cypress/specs/ComboBox.cy.ts

@@ -1,22 +0,0 @@
-import { html } from "lit";
-import "../../src/ComboBox.js";
-import "../../src/ComboBoxItem.js";
-
-describe("Security", () => {
-	it("tests setting malicious text to items", () => {
-		cy.mount(html`
-			<ui5-combobox>
-				<ui5-cb-item text="<script>alert('XSS')</script>"></ui5-cb-item>
-				<ui5-cb-item text="<b onmouseover=alert('XSS')></b>"></ui5-cb-item>
-				<ui5-cb-item text="Albania<button onClick='alert(1)'>alert</button>"></ui5-cb-item>
-			</ui5-combobox>
-		`);
-
-		cy.get("ui5-cb-item").eq(0).shadow().find(".ui5-li-title")
-			.should("have.text", "<script>alert('XSS')</script>");
-		cy.get("ui5-cb-item").eq(1).shadow().find(".ui5-li-title")
-			.should("have.text", "<b onmouseover=alert('XSS')></b>");
-		cy.get("ui5-cb-item").eq(2).shadow().find(".ui5-li-title")
-			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
-	});
-});