@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-918b4fbe7

package/src/themes/StepInput.css

@@ -0,0 +1,280 @@
+@import "./InvisibleTextStyles.css";
+@import "./InputIcon.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+	width: 100%;
+	line-height: normal;
+	letter-spacing: normal;
+	word-spacing: normal;
+}
+
+:host {
+	--ui5_input_focus_pseudo_element_content: none;
+	color: var(--sapField_TextColor);
+	background-color: var(--sapField_Background);
+	border: var(--_ui5_step_input_border_style);
+	border-radius: var(--sapField_BorderCornerRadius);
+	box-sizing: border-box;
+	height: var(--_ui5_input_height);
+	position: relative;
+	min-width: var(--_ui5_step_input_min_width);
+}
+
+:host .ui5-step-input-input {
+	text-align: inherit;
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled])){
+	box-shadow: none;
+}
+
+:host([value-state="Success"]:not([readonly]):not([disabled])) {
+	background-color: var(--sapField_SuccessBackground);
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled])) {
+	background-color: var(--sapField_InvalidBackground);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+	background-color: var(--sapField_InformationBackground);
+}
+
+:host([value-state="Warning"]:not([readonly]):not([disabled])) {
+	background-color: var(--sapField_WarningBackground);
+}
+:host(:not([value-state]):not([readonly]):not([disabled]):hover),
+:host([value-state="None"]:not([readonly]):not([disabled]):hover) {
+	background-color: var(--_ui5_step_input_border_color_hover);
+	border: var(--_ui5_step_input_border_hover);
+}
+:host(:not([value-state]):not([readonly]):not([disabled]):not([focused]):hover),
+:host([value-state="None"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	border: var(--_ui5_step_input_border_style_hover);
+	box-shadow: var(--_ui5_input_hover_box_shadow);
+}
+
+:host([value-state="Success"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--_ui5_input_value_state_success_hover_box_shadow);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--_ui5_input_value_state_information_hover_box_shadow);
+}
+
+:host([value-state="Warning"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--_ui5_input_value_state_warning_hover_box_shadow);
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--_ui5_input_value_state_error_hover_box_shadow);
+}
+
+:host([value-state="Success"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Error"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Information"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Warning"]:not([readonly]):not([disabled]):hover) {
+	background-color: var(--_ui5-step_input_button_state_hover_background_color);
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled])[focused]),
+:host([value-state="None"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Success"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Error"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Information"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Warning"]:not([readonly]):not([disabled])[focused]){
+	background-color: var(--sapField_Focus_Background);
+} 
+
+:host([value-state="Success"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Error"]:not([readonly]):not([disabled]))::after,
+:host([value-state="None"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Information"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Warning"]:not([readonly]):not([disabled]))::after {
+	position: absolute;
+	content: "";
+	top: -1px;
+	right: -1px;
+	bottom: -1px;
+	left: -1px;
+	outline: none;
+	pointer-events: none;
+	border-radius: var(--sapField_BorderCornerRadius);
+	border-style: var(--_ui5_input_error_warning_border_style);
+	z-index: 3;
+	border-width: 0px;
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_InformationColor);
+	border-width: var(--_ui5_input_information_border_width);
+}
+
+:host([value-state="Warning"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_WarningColor);
+	border-width: 2px;
+}
+
+:host([value-state="Success"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_SuccessColor);
+	border-width: 1px;
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_InvalidColor);
+	border-width: var(--_ui5_input_information_border_width);
+}
+
+:host([value-state])::after {
+	border-width: var(--_ui5_input_state_border_width);
+}
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input {
+	background-color: var(--_ui5_input_input_background_color);
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input:hover {
+	background-color: var(--_ui5_step_input_input_error_background_color);
+}
+:host([value-state]:not([value-state="None"]) .ui5-step-input-input[focused]) {
+		outline: none;
+}
+
+:host .ui5-step-input-input {
+	width: 100%;
+	color: inherit;
+	background-color: inherit;
+	border: var(--_ui5_step_input_input_border);
+	box-sizing: border-box;
+	vertical-align: top;
+	margin-top: var(--_ui5_step_input_input_margin_top);
+	min-width: var(--_ui5_step_input_min_width);
+	position: relative;
+	padding: 0px 2.5rem 0px 2.4375rem;
+	outline: none;
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+}
+
+:host .ui5-step-input-input[readonly] { 
+	padding: 0;
+}
+
+:host .ui5-step-input-input:hover,
+:host .ui5-step-input-input[focused]{
+	box-shadow: none;
+}
+
+:host .ui5-step-input-root {
+	white-space: nowrap;
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+}
+
+:host .ui5-step-input-input[text-align=left] {
+	text-align: left;
+}
+
+:host .ui5-step-input-input[text-align=center] {
+	text-align: center;
+}
+
+:host .ui5-step-input-input[text-align=right] {
+	text-align: right;
+}
+
+:host .ui5-step-icon {
+	position: absolute;
+	display: var(--_ui5_step_input_button_display);
+	height: 2rem;
+	height: 100%;
+	background-color: var(--_ui5_step_input_button_background_color);
+	z-index: 2;
+}
+
+:host .ui5-step-icon[focused] {
+	border: none;
+	outline: none;
+}
+
+:host .ui5-step-icon.ui5-step-dec {
+	left: var(--_ui5_step_input_button_left);
+}
+
+:host .ui5-step-icon.ui5-step-inc {
+	right: var(--_ui5_step_input_button_right);
+}
+
+:host .ui5-step-icon *:not([clickable]),
+:host .ui5-step-icon *:not([clickable]):active,
+:host .ui5-step-icon *:not([clickable]):hover {
+	opacity: 0.5;
+	background-color: transparent;
+	color: var(--sapContent_IconColor);
+}
+
+:host .ui5-step-icon :not([clickable]) *:hover,
+:host .ui5-step-icon :not([clickable]) *:active {
+	background-color: var(--sapField_Background);
+	color: var(--sapContent_IconColor);
+}
+
+:host .ui5-step-input-input[focused]::after {
+	position: absolute;
+	content: "";
+	border: var(--_ui5_step_input_input_border_focused_after);
+	top: var(--_ui5_step_input_input_border_top_bottom_focused_after);
+	right: 0px;
+	bottom: var(--_ui5_step_input_input_border_top_bottom_focused_after);
+	border-radius: var(--_ui5_step_input_input_border_radius_focused_after);
+	left: 0px;
+	outline: none;
+	pointer-events: none;
+	z-index: 3;
+}
+
+:host .ui5-step-input-input[focused] {
+	outline: none;
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+	border-color: var(--_ui5_step_input_input_information_border_color_focused_after);
+}
+
+:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+	border-color: var(--_ui5_step_input_input_warning_border_color_focused_after);
+}
+
+:host([value-state="Success"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+	border-color: var(--_ui5_step_input_input_success_border_color_focused_after);
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+	border-color: var(--_ui5_step_input_input_error_border_color_focused_after);
+}
+
+/* Disable spin buttons in Chrome, Safari, Edge, Opera */
+:host .ui5-step-input-input::-webkit-outer-spin-button,
+:host .ui5-step-input-input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+:host([disabled]) {
+	opacity: var(--_ui5_input_disabled_opacity);
+	cursor: default;
+	pointer-events: none;
+	background: var(--sapField_ReadOnly_Background);
+	border-color: var(--sapField_ReadOnly_BorderColor);
+}
+
+:host([disabled]) .ui5-step-icon {
+	background-color: var(--_ui5_step_input_disabled_button_background);
+}
+
+:host([disabled]) .ui5-step-icon [ui5-icon] {
+	color: var(--sapField_ReadOnly_BorderColor);
+}

package/src/themes/Suggestions.css

@@ -0,0 +1,17 @@
+.ui5-suggestions-popover {
+	box-shadow: var(--sapContent_Shadow1);
+}
+
+.ui5-suggestions-popover::part(header),
+.ui5-suggestions-popover::part(content) {
+	padding: 0;
+}
+
+.ui5-suggestions-popover::part(footer) {
+	padding: 0 1rem;
+}
+
+.ui5-suggestions-popover [ui5-li],
+.ui5-suggestions-popover [ui5-li-suggestion-item] {
+	height: var(--_ui5_list_item_dropdown_base_height);
+}

package/src/themes/Switch.css

@@ -0,0 +1,377 @@
+@import "./InvisibleTextStyles.css";
+@import "./TapHighlightColor.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+.ui5-switch-root {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: var(--_ui5_switch_width);
+	height: var(--_ui5_switch_height);
+	min-width: var(--_ui5_switch_min_width);
+	cursor: pointer;
+	outline: none;
+	border-radius: var(--_ui5-switch-root-border-radius);
+}
+
+.ui5-switch-root:not(.ui5-switch--no-label):not(.ui5-switch--semantic) {
+	width: var(--_ui5_switch_with_label_width);
+	height: var(--_ui5_switch_height);
+}
+
+.ui5-switch-root.ui5-switch--no-label {
+	min-width: var(--_ui5_switch_width);
+}
+
+.ui5-switch-inner {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	width: 100%;
+	min-width: inherit;
+	overflow: hidden;
+	pointer-events: none;
+	will-change: transform;
+}
+
+:host([checked]) .ui5-switch-inner {
+	border-radius: 6.25rem;
+	box-shadow: var(--_ui5-switch-root-box-shadow);
+}
+
+.ui5-switch-track {
+	display: flex;
+	align-items: center;
+	height: var(--_ui5_switch_track_height);
+	width: var(--_ui5_switch_track_width);
+	border: var(--_ui5-switch-track-border);
+	border-radius: var(--_ui5_switch_track_border_radius);
+	box-sizing: border-box;
+	transition: var(--_ui5_switch_track_transition);
+}
+
+.ui5-switch-root:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-track {
+	height: var(--_ui5_switch_track_with_label_height);
+	width: var(--_ui5_switch_track_with_label_width);
+}
+
+.ui5-switch-slider {
+	position: relative;
+	height: var(--_ui5_switch_height);
+	width: 100%;
+	transition: transform 0.1s ease-in;
+	transform-origin: top left;
+}
+
+.ui5-switch-slider > *:not(.ui5-switch-handle) {
+	display: var(--_ui5-switch-slider-texts-display);
+}
+
+.ui5-switch-handle {
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: var(--_ui5_switch_handle_width);
+	height: var(--_ui5_switch_handle_height);
+	border: var(--_ui5_switch_handle_border);
+	border-radius: var(--_ui5_switch_handle_border_radius);
+	box-sizing: border-box;
+}
+
+.ui5-switch-root:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-handle {
+	height: var(--_ui5_switch_handle_with_label_height);
+	width: var(--_ui5_switch_handle_with_label_width);
+}
+
+.ui5-switch-handle-icon {
+	display: var(--_ui5-switch-handle-icon-display);
+	transition: var(--_ui5_switch_track_transition);
+}
+
+:host([checked]) .ui5-switch-handle-icon {
+	color: var(--_ui5-switch_track-on-background)
+}
+
+.ui5-switch-text {
+	display: flex;
+	justify-content: center;
+	position: absolute;
+	z-index: var(--_ui5_switch_text_z_index);
+	min-width: var(--_ui5_switch_text_min_width);
+	font-size: var(--_ui5_switch_text_font_size);
+	font-family: var(--_ui5-switch-text_font_family);
+	text-transform: uppercase;
+	text-align: center;
+	white-space: nowrap;
+	user-select: none;
+	-webkit-user-select: none;
+}
+
+.ui5-switch-handle,
+.ui5-switch-text {
+	left: var(--_ui5_switch_handle_left);
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+/* switch focused */
+.ui5-switch-desktop.ui5-switch-root:focus::after {
+	content: "";
+	position: absolute;
+	left: var(--_ui5_switch_root_outline_left);
+	right: var(--_ui5_switch_root_outline_right);
+	top: var(--_ui5_switch_root_outline_top);
+	bottom: var(--_ui5_switch_root_outline_bottom);
+	border: var(--_ui5_switch_focus_outline);
+	border-radius: var(--_ui5_switch_root_after_boreder_radius);
+	pointer-events: none;
+	transition: var(--_ui5_switch_track_transition);
+	outline: var(--_ui5_switch_root_after_outline);
+}
+
+/* switch hidden input */
+.ui5-switch-root .ui5-switch-input {
+	position: absolute;
+	left: 0;
+	width: 0;
+	height: 0;
+	margin: 0;
+	visibility: hidden;
+	-webkit-appearance: none;
+}
+
+/* switch disabled */
+.ui5-switch-root.ui5-switch--disabled {
+	opacity: var(--_ui5_switch_disabled_opacity);
+	cursor: default;
+}
+
+.ui5-switch-root.ui5-switch--checked .ui5-switch-text--off {
+	visibility: var(--_ui5_switch_text_hidden);
+}
+.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--on {
+	visibility: var(--_ui5_switch_text_hidden);
+}
+
+.ui5-switch-root.ui5-switch--checked .ui5-switch-text--on {
+	left: var(--_ui5_switch_text_active_left);
+}
+.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--off {
+	left: var(--_ui5_switch_text_inactive_left);
+	right: var(--_ui5_switch_text_inactive_right)
+}
+
+/* handle */
+.ui5-switch-root.ui5-switch--checked .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_active_background_color);
+	border-color: var(--_ui5_switch_handle_active_border_color);
+}
+.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_inactive_background_color);
+	border-color: var(--_ui5_switch_handle_inactive_border_color);
+}
+
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_hover_active_background_color);
+	border-color: var(--_ui5_switch_handle_hover_active_border_color);
+}
+.ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled):not(.ui5-switch--checked):hover .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_hover_inactive_background_color);
+	border-color: var(--_ui5_switch_handle_hover_inactive_border_color);
+}
+
+/* handle semantic */
+.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_semantic_accept_background_color);
+	border-color: var(--_ui5_switch_handle_semantic_accept_border_color);
+}
+.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_semantic_reject_background_color);
+	border-color: var(--_ui5_switch_handle_semantic_reject_border_color);
+}
+
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_semantic_hover_accept_background_color);
+	border-color: var(--_ui5_switch_handle_semantic_hover_accept_border_color);
+}
+.ui5-switch-desktop.ui5-switch--semantic.ui5-switch-root:not(.ui5-switch--checked):not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_semantic_hover_reject_background_color);
+	border-color: var(--_ui5_switch_handle_semantic_hover_reject_border_color);
+}
+
+
+/* track */
+.ui5-switch-root.ui5-switch--checked .ui5-switch-track {
+	background: var(--_ui5_switch_track_active_background_color);
+	border-color: var(--_ui5_switch_track_active_border_color);
+}
+.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-track {
+	background: var(--_ui5_switch_track_inactive_background_color);
+	border-color: var(--_ui5_switch_track_inactive_border_color);
+}
+
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
+	background: var(--_ui5_switch_track_hover_active_background_color);
+	border-color: var(--_ui5_switch_track_hover_active_border_color);
+}
+.ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--checked):not(.ui5-switch--disabled):hover .ui5-switch-track {
+	background: var(--_ui5_switch_track_hover_inactive_background_color);
+	border-color: var(--_ui5_switch_track_hover_inactive_border_color);
+}
+
+/* track semantic*/
+.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked .ui5-switch-track {
+	background: var(--_ui5_switch_track_semantic_accept_background_color);
+	border-color: var(--_ui5_switch_track_semantic_accept_border_color);
+}
+.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-track {
+	background: var(--_ui5_switch_track_semantic_reject_background_color);
+	border-color: var(--_ui5_switch_track_semantic_reject_border_color);
+}
+
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
+	background: var(--_ui5_switch_track_semantic_hover_accept_background_color);
+	border-color: var(--_ui5_switch_track_semantic_hover_accept_border_color);
+}
+.ui5-switch-desktop.ui5-switch--semantic.ui5-switch-root:not(.ui5-switch--checked):not(.ui5-switch--disabled):hover .ui5-switch-track {
+	background: var(--_ui5_switch_track_semantic_hover_reject_background_color);
+	border-color: var(--_ui5_switch_track_semantic_hover_reject_border_color);
+}
+
+.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider {
+	/* Move slider to oposite end, taking into account the handle as an offset. */
+	/* Note: translate(calc()) does not work in IE11 */
+	transform: var(--_ui5_switch_transform_with_label);
+}
+
+.ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
+	/* Move slider to oposite end, taking into account the handle as an offset. */
+	/* Note: translate(calc()) does not work in IE11 */
+	transform: var(--_ui5_switch_transform);
+}
+
+/* switch semantic icon and type noLabel icon in horizon theme */
+.ui5-switch-text .ui5-switch-text--on .ui5-switch-no-label-icon,
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-text,
+.ui5-switch-root.ui5-switch--no-label .ui5-switch-text {
+	display: flex;
+	justify-content: center;
+
+}
+
+.ui5-switch--no-label .ui5-switch-no-label-icon-on,
+.ui5-switch--no-label .ui5-switch-no-label-icon-off {
+	width: var(--_ui5_switch_icon_width);
+	height: var(--_ui5_switch_icon_height);
+	display: var(--_ui5_switch_track_icon_display);
+}
+
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-on,
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-off {
+	width: var(--_ui5_switch_icon_width);
+	height: var(--_ui5_switch_icon_height)
+}
+
+.ui5-switch-root .ui5-switch-text {
+	font-family: var(--_ui5_switch_text_font_family);
+	font-size: var(--_ui5_switch_text_font_size);
+	width: var(--_ui5_switch_text_width);
+}
+
+.ui5-switch-root:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-text {
+	font-family: var(--_ui5_switch_text_with_label_font_family);
+	font-size: var(--_ui5_switch_text_with_label_font_size);
+	width: var(--_ui5_switch_text_with_label_width);
+}
+
+/* switch active effects */
+/* active & off */
+
+:host([active]) .ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled) .ui5-switch-track {
+	background: var( --_ui5-switch_track-off-active-background);
+}
+
+/* active & on */
+
+:host([active]) .ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
+	background: var(--_ui5-switch_track-on-active-background);
+}
+
+.ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	box-shadow: var(--_ui5_switch_handle_off_hover_box_shadow);
+}
+
+ /* switch on hover, when switched on */
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	box-shadow: var(--_ui5_switch_handle_on_hover_box_shadow);
+}
+
+/* semantic switch on hover, when switched off */
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	box-shadow: var(--_ui5_switch_handle_semantic_off_hover_box_shadow);
+}
+
+/* semantic switch on hover, when switched on */
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	box-shadow: var(--_ui5_switch_handle_semantic_on_hover_box_shadow);
+}
+
+/* Text */
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-on,
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-text--on {
+	color: var(--_ui5_switch_text_semantic_accept_color);
+}
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-off,
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-text--off {
+	color: var(--_ui5_switch_text_semantic_reject_color);
+}
+
+.ui5-switch-root .ui5-switch-text--on {
+	color: var(--_ui5_switch_text_active_color);
+	overflow: var(--_ui5_switch_text_overflow);
+	text-overflow: ellipsis;
+}
+.ui5-switch-root .ui5-switch-text--off {
+	color: var(--_ui5_switch_text_inactive_color);
+	overflow: var(--_ui5_switch_text_overflow);
+	text-overflow: ellipsis;
+}
+
+.ui5-switch-root .ui5-switch-no-label-icon-on,
+.ui5-switch-root .ui5-switch-icon-on {
+	color: var(--_ui5_switch_text_active_color);
+}
+
+.ui5-switch-root .ui5-switch-no-label-icon-off,
+.ui5-switch-root .ui5-switch-icon-off {
+	color: var(--_ui5_switch_text_inactive_color);
+}
+
+/* RTL */
+[dir="rtl"].ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider {
+	transform: var(--_ui5_switch_rtl_transform_with_label);
+}
+
+[dir="rtl"].ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
+	transform: var(--_ui5_switch_rtl_transform);
+}
+
+[dir="rtl"].ui5-switch-root .ui5-switch-handle {
+	left: auto;
+	right: var(--_ui5_switch_handle_left);
+}
+
+[dir="rtl"].ui5-switch-root .ui5-switch-text--on {
+	right: var(--_ui5_switch_text_active_left);
+	left: var(--_ui5_switch_text_active_right);
+}
+
+[dir="rtl"].ui5-switch-root .ui5-switch-text--off {
+	right: var(--_ui5_switch_text_inactive_left);
+	left: var(--_ui5_switch_text_inactive_right);
+}

package/src/themes/Tab.css

@@ -0,0 +1,9 @@
+:host {
+	display: inline-block;
+	width: 100%;
+}
+
+.ui5-tab-root {
+	width: 100%;
+	height: 100%;
+}