@ui5/webcomponents 1.0.0 → 1.0.1

package/src/themes/TabInStrip.css

@@ -0,0 +1,350 @@
+.ui5-tab-strip-item {
+    color: var(--_ui5_tc_headerItem_color);
+    cursor: pointer;
+    flex-shrink: 0;
+    padding: var(--_ui5_tc_headeritem_padding);
+    font-size: var(--sapFontSmallSize);
+	font-weight: var(--_ui5_tc_headeritem_text_font_weight);
+    text-shadow: var(--sapContent_TextShadow);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+	justify-content: center;
+	min-width: 2rem;
+	height: var(--_ui5_tc_header_height);
+}
+
+.ui5-tab-strip-itemContent {
+	padding: var(--_ui5_tc_headerItemContent_padding);
+	border: var(--_ui5_tc_headerItemContent_default_focus_border);
+	border-radius: var(--_ui5_tc_headerItemContent_focus_border_radius);
+    pointer-events: none;
+	transition: var(--_ui5_tc_headerItem_transition);
+}
+
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
+    color: var(--_ui5_tc_headeritem_text_selected_color);
+}
+
+.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected).ui5-tab-strip-item--textOnly {
+    color: var(--_ui5_tc_headerItem_text_hover_color);
+}
+
+.ui5-tab-strip-item:hover.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
+    color: var(--_ui5_tc_headeritem_text_selected_hover_color);
+}
+
+/* the outline when hover or selected */
+.ui5-tab-strip-item--textOnly:hover .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--mixedMode:hover .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item-icon-outer:hover .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
+	content: "";
+    position: absolute;
+    bottom: 1px;
+    left: 0;
+    right: 0;
+	border-bottom: var(--_ui5_tc_headerItemContent_border_bottom);
+	border-radius: var(--_ui5_tc_headerItemContent_border_radius);
+	background-color: var(--_ui5_tc_headerItemContent_border_bg);
+    height: var(--_ui5_tc_headerItemContent_border_height);
+}
+
+/* the outline when hover and not selected */
+.ui5-tab-strip-item--textOnly:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--mixedMode:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item-icon-outer:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after {
+	border-color: var(--_ui5_tc_headerItem_hover_border_bg);
+	background-color: var(--_ui5_tc_headerItem_hover_border_bg);
+}
+
+/* the outline when hover and selected */
+.ui5-tab-strip-item--textOnly:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--mixedMode:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item-icon-outer:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after {
+	background-color: var(--_ui5_tc_headerItem_hover_selected_hover_border_bg);
+}
+
+/* the outline offset when hover and selected */
+.ui5-tab-strip-item--textOnly:hover .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--mixedMode:hover .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item-icon-outer:hover .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after {
+    left: var(--_ui5_tc_headerItemContent_offset);
+    right: var(--_ui5_tc_headerItemContent_offset);
+}
+
+/* the outline offset when focused */
+.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item-icon-outer:focus .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::after {
+    left: var(--_ui5_tc_headerItemContent_focus_offset);
+    right: var(--_ui5_tc_headerItemContent_focus_offset);
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
+    bottom: -0.875rem;
+}
+
+.ui5-tab-strip-item--disabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
+.ui5-tab-strip-item:focus {
+    outline: none;
+}
+
+.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--inline):focus .ui5-tab-strip-itemText,
+.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent,
+.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent {
+    outline: var(--_ui5_tc_headerItem_focus_border);
+	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
+	outline-offset: var(--_ui5_tc_headerItem_focus_offset);
+}
+
+.ui5-tab-strip-item--withIcon:focus .ui5-tab-strip-item-icon-outer::before {
+	content: "";
+	pointer-events: none;
+	position: absolute;
+	border: var(--_ui5_tc_headerItem_focus_border);
+	left: var(--_ui5_tc_headerItem_focus_border_offset);
+	right: var(--_ui5_tc_headerItem_focus_border_offset);
+	top: var(--_ui5_tc_headerItem_focus_border_offset);
+	bottom: var(--_ui5_tc_headerItem_focus_border_offset);
+	border-radius: var(--_ui5_tc_headerItemIcon_focus_border_radius);
+}
+
+
+/* focused */
+.ui5-tab-strip-item--withIcon:focus .ui5-tab-strip-item-icon-outer .ui5-tab-strip-itemContent,
+.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--inline):focus .ui5-tab-strip-itemContent,
+.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent,
+.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent {
+	border: var(--_ui5_tc_headerItemContent_focus_border);
+}
+
+.ui5-tab-strip-item-semanticIcon::before {
+    display: var(--_ui5_tc_headerItemSemanticIcon_display);
+    font-family: "SAP-icons";
+    font-size: 0.75rem;
+    margin-right: 0.25rem;
+    speak: none;
+    -webkit-font-smoothing: antialiased;
+}
+
+.ui5-tab-strip-item-semanticIcon--positive::before {
+    content: "\e1ab";
+}
+
+.ui5-tab-strip-item-semanticIcon--negative::before {
+    content: "\e1ac";
+}
+
+.ui5-tab-strip-item-semanticIcon--critical::before {
+    content: "\e1ae";
+}
+
+/*** Icon and text Tab styles ***/
+
+.ui5-tab-strip-item-icon-outer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    border: var(--_ui5_tc_headerItemIcon_border);
+    border-radius: 50%;
+    margin-right: 0.25rem;
+    height: var(--_ui5_tc_item_icon_circle_size);
+    width: var(--_ui5_tc_item_icon_circle_size);
+    pointer-events: none;
+}
+
+.ui5-tab-strip-item-icon {
+    width: var(--_ui5_tc_item_icon_size);
+    height: var(--_ui5_tc_item_icon_size);
+    color: var(--_ui5_tc_headerItemIcon_color);
+    text-shadow: var(--sapContent_TextShadow);
+    pointer-events: none;
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
+    background-color: var(--_ui5_tc_headerItemIcon_selected_background);
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItemIcon_selected_color);
+    text-shadow: none;
+}
+
+.ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
+    display: block;
+}
+
+.ui5-tab-strip-item--inline .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
+    display: inline;
+}
+
+.ui5-tab-strip-item--withIcon .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
+    margin-top: var(--_ui5_tc_item_add_text_margin_top);
+}
+
+/*** END Icon and text Tab styles ***/
+
+/*** TextOnly Tab styles ***/
+.ui5-tab-strip-item--textOnly,
+.ui5-tab-strip-item.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--inline {
+    font-size: var(--sapFontSize);
+    height: var(--_ui5_tc_item_text_only_height);
+    display: flex;
+    align-items: center;
+    line-height: var(--_ui5_tc_item_text_line_height);
+}
+
+.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--withAddionalText) .ui5-tab-strip-itemText {
+	padding: 0 0.188rem;
+}
+
+.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--withAddionalText {
+	justify-content: flex-start;
+	height: var(--_ui5_tc_item_text_only_with_additional_text_height);
+}
+
+/*** END TextOnly Tab styles ***/
+
+/*** Mixed Mode Tab styles ***/
+.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemText,
+.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+}
+
+/*** Semantic states ***/
+.ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly,
+.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer,
+.ui5-tab-strip-item-semanticIcon--positive::before {
+    color: var(--sapPositiveColor);
+    border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
+}
+
+.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItem_positive_color);
+}
+
+.ui5-tab-strip-item--positive.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
+    background-color: var(--_ui5_tc_headerItemIcon_positive_selected_background);
+    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+}
+
+.ui5-tab-strip-item--positive.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+}
+
+.ui5-tab-strip-item.ui5-tab-strip-item--positive .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer::after {
+    border-color: var(--_ui5_tc_headerItem_positive_border_color);
+	background-color: var(--_ui5_tc_headerItem_positive_border_bg);
+}
+
+.ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly,
+.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer,
+.ui5-tab-strip-item-semanticIcon--negative::before {
+    color: var(--sapNegativeColor);
+    border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
+}
+
+.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItem_negative_color);
+}
+
+.ui5-tab-strip-item--negative.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
+    background-color: var(--_ui5_tc_headerItemIcon_negative_selected_background);
+}
+
+.ui5-tab-strip-item--negative.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+}
+
+.ui5-tab-strip-item.ui5-tab-strip-item--negative .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer::after {
+    border-color: var(--_ui5_tc_headerItem_negative_border_color);
+    background-color: var(--_ui5_tc_headerItem_negative_border_bg);
+}
+
+.ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly,
+.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer,
+.ui5-tab-strip-item-semanticIcon--critical::before {
+    color: var(--sapCriticalColor);
+    border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
+}
+
+.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItem_critical_color);
+}
+
+.ui5-tab-strip-item--critical.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
+    background-color: var(--_ui5_tc_headerItemIcon_critical_selected_background);
+}
+
+.ui5-tab-strip-item--critical.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+}
+
+.ui5-tab-strip-item.ui5-tab-strip-item--critical .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer::after {
+    border-color: var(--_ui5_tc_headerItem_critical_border_color);
+	background-color: var(--_ui5_tc_headerItem_critical_border_bg);
+}
+
+.ui5-tab-strip-item--nutral.ui5-tab-strip-item--textOnly,
+.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer {
+    color: var(--sapNeutralColor);
+    border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
+}
+
+.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItem_neutral_color);
+}
+
+.ui5-tab-strip-item--neutral.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
+    background-color: var(--_ui5_tc_headerItemIcon_neutral_selected_background);
+}
+
+.ui5-tab-strip-item--neutral.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+}
+
+.ui5-tab-strip-item.ui5-tab-strip-item--neutral .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon::after {
+    border-color: var(--_ui5_tc_headerItem_neutral_border_color);
+	background-color: var(--_ui5_tc_headerItem_neutral_border_bg);
+}
+.ui5-tab-strip-item .ui5-tab-strip-itemAdditionalText {
+	font-weight: var(--_ui5_tc_headeritem_additional_text_font_weight);
+}
+/*** RTL ***/
+
+[dir=rtl] .ui5-tab-strip-item-semanticIcon::before {
+    margin-left: 0.25rem;
+    margin-right: 0;
+}
+
+[dir=rtl] .ui5-tab-strip-item-icon-outer {
+    margin-left: 0.25rem;
+    margin-right: 0;
+}
+
+[dir=rtl] .ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
+    margin-right: 0;
+    margin-left: 0.5rem;
+}

package/src/themes/Table.css

@@ -0,0 +1,91 @@
+@import "./GrowingButton.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+	width: 100%;
+}
+
+.ui5-table-root {
+	position: relative;
+	border-bottom: var(--ui5_table_bottom_border);
+}
+
+table {
+	width: 100%;
+	border-spacing: 0;
+	border-collapse: collapse;
+}
+
+.ui5-table-header-row {
+	color: var(--sapTextColor);
+	height: 3rem;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	font-weight: var(--ui5_table_header_row_font_weight);
+}
+
+.ui5-table-header-row:focus {
+	outline: var(--ui5_table_header_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: -0.125rem;
+}
+
+tr {
+	height: 3rem;
+}
+
+.ui5-table-no-data-row {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: auto;
+	justify-content: center;
+	text-align: center;
+	padding: 0.5rem 1rem;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: 0.875rem;
+	box-sizing: border-box;
+	color: var(--sapTextColor);
+	min-height: 3rem;
+	background-color: var(--sapList_Background);
+	border-top: 1px solid var(--sapList_BorderColor);
+}
+
+.ui5-table-end-row {
+	height: 0px;
+}
+
+:host([busy]) .ui5-table-busy-row {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
+	outline: none;
+}
+
+:host([busy]) .ui5-table-busy-ind {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 1;
+}
+
+:host([busy]) [growing-button] {
+	opacity: 0.72;
+}
+
+.ui5-table-select-all-column {
+	width: var(--ui5_table_multiselect_column_width);
+	text-align: center;
+}
+
+:host([sticky-column-header]) .ui5-table-header-row {
+	position: sticky;
+	top: 0;
+	z-index: 99;
+}
+
+th {
+	background: var(--sapList_HeaderBackground);
+}

package/src/themes/TableCell.css

@@ -0,0 +1,28 @@
+:host {
+	display: table-cell;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: 0.875rem;
+	height: 100%;
+	box-sizing: border-box;
+	overflow: hidden;
+	color: var(--sapContent_LabelColor);
+	word-break: break-word;
+	vertical-align: middle;
+}
+
+td {
+	display: contents;
+}
+
+.ui5-table-popin-row td {
+	padding-left: 1rem;
+
+}
+
+:host([popined]) td {
+	padding-left: 0;
+}
+
+::slotted([ui5-label]) {
+	color: inherit;
+}

package/src/themes/TableColumn.css

@@ -0,0 +1,30 @@
+:host {
+	display: contents;
+}
+
+th {
+	background: var(--sapList_HeaderBackground);
+	border: none;
+	border-bottom: 1px solid var(--sapList_BorderColor);
+	width: inherit;
+	font-weight: var(--ui5_table_header_row_font_weight);
+	font-size: var(--sapFontMediumSize);
+	padding: 0.25rem;
+	box-sizing: border-box;
+	height: 3rem;
+	text-align: left;
+	vertical-align: middle;
+}
+
+th[dir="rtl"] {
+	text-align: right;
+}
+
+:host([first]) th {
+	padding-left: 1rem;
+}
+
+th ::slotted([ui5-label]) {
+	font-weight: var(--ui5_table_header_row_font_weight);
+	font-size: var(--sapFontMediumSize);
+}

package/src/themes/TableGroupRow.css

@@ -0,0 +1,34 @@
+:host {
+    display: contents;
+}
+
+:host([_busy]) .ui5-table-group-row-root {
+	opacity: 0.72;
+	pointer-events: none;
+}
+
+.ui5-table-group-row-root {
+	height: 2rem;
+	border-bottom: 1px solid var(--sapList_TableGroupHeaderBorderColor);
+	background-color: var(--sapList_TableGroupHeaderBackground);
+	color: var(--sapList_TableGroupHeaderTextColor);
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	font-weight: normal;
+}
+
+.ui5-table-group-row-root:focus {
+	outline: var(--ui5_table_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: -0.0625rem;
+}
+
+td {
+	word-break: break-word;
+	vertical-align: middle;
+	padding: .5rem .25rem .5rem 1rem;
+	text-align: left;
+}
+
+:host [dir="rtl"] td {
+	text-align: right;
+}

package/src/themes/TableRow.css

@@ -0,0 +1,84 @@
+:host {
+	display: contents;
+}
+
+:host([_busy]) .ui5-table-row-root {
+	opacity: 0.72;
+	pointer-events: none;
+}
+
+.ui5-table-row-root {
+	background-color: var(--sapList_Background);
+	color: var(--sapList_TextColor);
+	border-top: 1px solid var(--sapList_BorderColor);
+}
+
+.ui5-table-row-root:focus {
+	outline: var(--ui5_table_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: -0.0625rem;
+}
+
+.ui5-table-popin-row {
+	background-color: var(--sapList_Background);
+}
+
+.ui5-table-popin-row.all-columns-popped-in.popin-header {
+	border-top: 1px solid var(--sapList_BorderColor);
+}
+
+.ui5-table-popin-row td {
+	padding: .25rem;
+	padding-left: 1rem;
+}
+
+.ui5-table-row-popin-title {
+	color: var(--sapContent_LabelColor);
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+}
+
+.ui5-table-multi-select-cell {
+	padding: .25rem 0;
+	box-sizing: border-box;
+	text-align: center;
+}
+
+:host([mode="SingleSelect"]) .ui5-table-row-root {
+	cursor: pointer;
+}
+:host([mode="MultiSelect"]) .ui5-table-row-root .ui5-table-multi-select-cell {
+	cursor: pointer;
+}
+
+:host([type="Active"]) .ui5-table-row-root:hover,
+:host([mode="SingleSelect"]) .ui5-table-row-root:hover,
+:host([mode="SingleSelect"]) .ui5-table-row-root:active {
+	background-color: var(--sapList_Hover_Background);
+}
+
+:host([type="Active"][active]) .ui5-table-row-root,
+:host([selected][type="Active"][active]) .ui5-table-row-root:hover {
+	background-color: var(--sapList_Active_Background);
+}
+
+:host([selected]) .ui5-table-row-root {
+	background: var(--sapList_SelectionBackgroundColor);
+	border-bottom: 1px solid var(--sapList_SelectionBorderColor);
+}
+
+:host([selected][type="Active"]) .ui5-table-row-root:hover,
+:host([selected][mode="SingleSelect"]) .ui5-table-row-root:hover {
+	background: var(--sapList_Hover_SelectionBackground);
+}
+
+:host([type="Active"][active]) .ui5-table-row-root ::slotted([ui5-table-cell]) {
+	color: var(--sapList_Active_TextColor);
+}
+
+:host ::slotted([ui5-table-cell]) {
+	padding: .5rem .25rem;
+}
+
+:host ::slotted([ui5-table-cell]:first-child) {
+	padding-left: 1rem;
+}

package/src/themes/TapHighlightColor.css

@@ -0,0 +1,3 @@
+:host {
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+}