fix(ui5-label): fix required label in safari (#3182)

Author: fifoosid

packages/main/src/Label.hbs

@@ -4,7 +4,7 @@
 		@click={{_onclick}}
 		for="{{for}}"
 	>
-	<span class="ui5-label-text-wrapper">
+	<span class="{{classes.textWrapper}}">
 		<bdi id="{{_id}}-bdi">
 			<slot></slot>
 		</bdi>

packages/main/src/Label.js

@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 
 // Template
 import LabelTemplate from "./generated/templates/LabelTemplate.lit.js";
@@ -124,6 +125,15 @@ class Label extends UI5Element {
 		return labelCss;
 	}
 
+	get classes() {
+		return {
+			textWrapper: {
+				"ui5-label-text-wrapper": true,
+				"ui5-label-text-wrapper-safari": isSafari(),
+			},
+		};
+	}
+
 	_onclick() {
 		const elementToFocus = document.getElementById(this.for);
 		if (elementToFocus) {

packages/main/src/themes/Label.css

@@ -36,16 +36,21 @@ bdi {
 	max-width: 100%;
 }
 
-:host(:not([wrap])[required][show-colon]) .ui5-label-text-wrapper {
-	max-width: calc(100% - .85rem);
+:host(:not([wrap])[required][show-colon]) .ui5-label-text-wrapper,
+:host(:not([wrap])[required][show-colon]) .ui5-label-text-wrapper.ui5-label-text-wrapper-safari {
+	max-width: calc(100% - .8rem);
 }
 
 :host(:not([wrap])[required]) .ui5-label-text-wrapper {
-	max-width: calc(100% - 0.475rem);
+	max-width: calc(100% - .475rem);
+}
+
+:host(:not([wrap])[required]) .ui5-label-text-wrapper.ui5-label-text-wrapper-safari {
+	max-width: calc(100% - .425rem);
 }
 
 :host(:not([wrap])[show-colon]) .ui5-label-text-wrapper {
-	max-width: calc(100% - 0.2rem);
+	max-width: calc(100% - .2rem);
 }
 
 :host([show-colon]) .ui5-label-required-colon:before {