@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/src/themes/Breadcrumbs.css

@@ -6,7 +6,7 @@
 .ui5-breadcrumbs-root {
     white-space: nowrap;
     outline: none;
-    margin: 0 0 0.5rem 0;
+    margin:var(--_ui5_breadcrumbs_margin);
 }
 
 .ui5-breadcrumbs-root > ol {
@@ -22,21 +22,6 @@
     display: inline;
 }
 
-.ui5-breadcrumbs-current-location {
-    min-width: 1%;
-    -webkit-flex: 1;
-    -webkit-box-flex: 1;
-    flex: 1 1 auto;
-    /* Fix extra height in ul -> li element */
-    font-size: 0;
-    align-self: center;
-}
-
-.ui5-breadcrumbs-current-location > span:focus {
-    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-    border-radius: var(--_ui5_breadcrumbs_current_location_focus_border_radius);
-}
-
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
     display: none
 }
@@ -73,40 +58,40 @@
     right: 0;
 }
 
-/* links separator */
-li:not(.ui5-breadcrumbs-current-location)::after {
-    content: "/"; /* default separator is "Slash" */
-    padding: 0 .25rem;
-    cursor: auto;
-    color: var(--sapContent_LabelColor);
-    display: inline-block;
-    font-family: "72override",var(--sapFontFamily);
-    font-size: var(--sapFontSize);
-}
-
 .ui5-breadcrumbs-popover-footer {
     display: flex;
     justify-content: flex-end;
     width: 100%;
 }
 
-/* separator styles */
-:host([separator-style="BackSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
-    content: "\\";
+/* links separator */
+.ui5-breadcrumbs-separator::after {
+	content: "/"; /* default separator is "Slash" */
+	padding: 0 .25rem;
+	cursor: auto;
+	color: var(--sapContent_LabelColor);
+	display: inline-block;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
 }
 
-:host([separator-style="DoubleBackSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
-    content: "\\\\";
+/* separator styles */
+:host([separators="DoubleSlash"]) .ui5-breadcrumbs-separator::after {
+	content: "//";
 }
 
-:host([separator-style="DoubleGreaterThan"]) li:not(.ui5-breadcrumbs-current-location)::after {
-    content: ">>";
+:host([separators="BackSlash"]) .ui5-breadcrumbs-separator::after {
+	content: "\\\\";
 }
 
-:host([separator-style="DoubleSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
-    content: "//";
+:host([separators="DoubleBackSlash"]) .ui5-breadcrumbs-separator::after {
+	content: "\\\\\\\\";
 }
 
-:host([separator-style="GreaterThan"]) li:not(.ui5-breadcrumbs-current-location)::after {
-    content: ">";
+:host([separators="GreaterThan"]) .ui5-breadcrumbs-separator::after {
+	content: ">";
 }
+
+:host([separators="DoubleGreaterThan"]) .ui5-breadcrumbs-separator::after {
+	content: ">>";
+}

package/src/themes/BusyIndicator.css

@@ -6,62 +6,62 @@
 	color: var(--_ui5_busy_indicator_color);
 }
 
-:host([size="Small"]) .ui5-busy-indicator-root {
+:host([size="S"]) .ui5-busy-indicator-root {
 	min-width: 1.625rem; /*width of the dots plus the gap between them*/
 	min-height: .5rem;
 }
 
-:host([size="Small"][text]:not([text=""])) .ui5-busy-indicator-root {
+:host([size="S"][text]:not([text=""])) .ui5-busy-indicator-root {
 	min-height: 1.75rem;
 }
 
-:host([size="Small"]) .ui5-busy-indicator-circle {
+:host([size="S"]) .ui5-busy-indicator-circle {
 	width: .5rem;
 	height: .5rem;
 }
 
-:host([size="Small"]) .ui5-busy-indicator-circle:first-child,
-:host([size="Small"]) .ui5-busy-indicator-circle:nth-child(2) {
+:host([size="S"]) .ui5-busy-indicator-circle:first-child,
+:host([size="S"]) .ui5-busy-indicator-circle:nth-child(2) {
 	margin-inline-end: 0.0625rem;
 }
 
 :host(:not([size])) .ui5-busy-indicator-root,
-:host([size="Medium"]) .ui5-busy-indicator-root {
+:host([size="M"]) .ui5-busy-indicator-root {
 	min-width: 3.375rem; /*width of the dots plus the gap between them*/
 	min-height: 1rem;
 }
 
-:host([size="Medium"]) .ui5-busy-indicator-circle:first-child,
-:host([size="Medium"]) .ui5-busy-indicator-circle:nth-child(2) {
+:host([size="M"]) .ui5-busy-indicator-circle:first-child,
+:host([size="M"]) .ui5-busy-indicator-circle:nth-child(2) {
 	margin-inline-end: 0.1875rem;
 }
 
 :host(:not([size])[text]:not([text=""])) .ui5-busy-indicator-root,
-:host([size="Medium"][text]:not([text=""])) .ui5-busy-indicator-root {
+:host([size="M"][text]:not([text=""])) .ui5-busy-indicator-root {
 	min-height: 2.25rem;
 }
 
 :host(:not([size])) .ui5-busy-indicator-circle,
-:host([size="Medium"])  .ui5-busy-indicator-circle {
+:host([size="M"])  .ui5-busy-indicator-circle {
 	width: 1rem;
 	height: 1rem;
 }
 
-:host([size="Large"]) .ui5-busy-indicator-root {
+:host([size="L"]) .ui5-busy-indicator-root {
 	min-width: 6.5rem; /*width of the dots plus the gap between them*/
 	min-height: 2rem;
 }
 
-:host([size="Large"]) .ui5-busy-indicator-circle:first-child,
-:host([size="Large"]) .ui5-busy-indicator-circle:nth-child(2) {
+:host([size="L"]) .ui5-busy-indicator-circle:first-child,
+:host([size="L"]) .ui5-busy-indicator-circle:nth-child(2) {
 	margin-inline-end: 0.25rem;
 }
 
-:host([size="Large"][text]:not([text=""])) .ui5-busy-indicator-root {
+:host([size="L"][text]:not([text=""])) .ui5-busy-indicator-root {
 	min-height: 3.25rem;
 }
 
-:host([size="Large"]) .ui5-busy-indicator-circle {
+:host([size="L"]) .ui5-busy-indicator-circle {
 	width: 2rem;
 	height: 2rem;
 }
@@ -89,10 +89,11 @@
 	flex-direction: column;
 }
 
-.ui5-busy-indicator-busy-area:focus {
+:host([desktop]) .ui5-busy-indicator-busy-area:focus,
+.ui5-busy-indicator-busy-area:focus-visible {
 	outline: var(--_ui5_busy_indicator_focus_outline);
 	outline-offset: -2px;
-    border-radius: var(--_ui5_busy_indicator_focus_border_radius);
+	border-radius: var(--_ui5_busy_indicator_focus_border_radius);
 }
 
 .ui5-busy-indicator-circles-wrapper {
@@ -128,10 +129,18 @@
 
 .ui5-busy-indicator-text {
 	width: 100%;
-	margin-top: .25rem;
 	text-align: center;
 }
 
+:host([text-placement="Top"]) .ui5-busy-indicator-text {
+	margin-bottom: 0.5rem
+ }
+ 
+ :host(:not([text-placement])) .ui5-busy-indicator-text,
+ :host([text-placement="Bottom"]) .ui5-busy-indicator-text {
+	  margin-top: 0.5rem;
+ }
+
 @keyframes grow {
 	0%, 50%, 100% {
 		-webkit-transform: scale(0.5);
@@ -140,7 +149,7 @@
 	}
 	25% {
 		-webkit-transform: scale(1);
-		-moz-transform: scale(1);
+		-moz-transform: scale(1);   
 		transform: scale(1);
 	}
 }

package/src/themes/Button.css

@@ -58,20 +58,17 @@
 	color: var(--sapButton_Hover_TextColor);
 }
 
-.ui5-button-icon {
+.ui5-button-icon,
+.ui5-button-end-icon {
 	color: inherit;
 	flex-shrink: 0;
 }
 
-:host([icon-end]) .ui5-button-root {
-	flex-direction: row-reverse;
-}
-
-:host([icon-end]) .ui5-button-icon {
+.ui5-button-end-icon {
 	margin-inline-start: var(--_ui5_button_base_icon_margin);
 }
 
-:host([icon-only]) .ui5-button-root {
+:host([icon-only]:not([has-end-icon])) .ui5-button-root {
 	min-width: auto;
 	padding: 0;
 }
@@ -88,11 +85,11 @@
 	text-overflow: inherit;
 }
 
-:host([has-icon]:not([icon-end])) .ui5-button-text {
+:host([has-icon]:not(:empty)) .ui5-button-text {
 	margin-inline-start: var(--_ui5_button_base_icon_margin);
 }
 
-:host([has-icon][icon-end]) .ui5-button-text {
+:host([has-end-icon]:not([has-icon]):empty) .ui5-button-end-icon {
 	margin-inline-start: 0;
 }
 
@@ -102,7 +99,7 @@
 	cursor: default;
 }
 
-:host([has-icon]:not([icon-only])) .ui5-button-text{
+:host([has-icon]:not([icon-only]):not([has-end-icon])) .ui5-button-text{
 	/* calculating the minimum width by removing the icon size  */
 	min-width: calc(var(--_ui5_button_base_min_width) - var(--_ui5_button_base_icon_margin) - 1rem);
 }
@@ -110,7 +107,12 @@
 	pointer-events: none;
 }
 
-:host([focused]) .ui5-button-root:after {
+:host([desktop]:not([active])) .ui5-button-root:focus-within:after,
+:host(:not([active])) .ui5-button-root:focus-visible:after,
+:host([desktop][active][design="Emphasized"]) .ui5-button-root:focus-within:after,
+:host([active][design="Emphasized"]) .ui5-button-root:focus-visible:after,
+:host([desktop][active]) .ui5-button-root:focus-within:before,
+:host([active]) .ui5-button-root:focus-visible:before {
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
@@ -122,11 +124,18 @@
 	border-radius: var(--_ui5_button_focused_border_radius);
 }
 
-:host([design="Emphasized"][focused]) .ui5-button-root:after {
+:host([desktop][active]) .ui5-button-root:focus-within:before,
+:host([active]) .ui5-button-root:focus-visible:before {
+	border-color: var(--_ui5_button_pressed_focused_border_color);
+}
+
+:host([design="Emphasized"][desktop]) .ui5-button-root:focus-within:after,
+:host([design="Emphasized"]) .ui5-button-root:focus-visible:after {
 	border-color: var(--_ui5_button_emphasized_focused_border_color);
 }
 
-:host([design="Emphasized"][focused]) .ui5-button-root:before {
+:host([design="Emphasized"][desktop]) .ui5-button-root:focus-within:before,
+:host([design="Emphasized"]) .ui5-button-root:focus-visible:before {
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
@@ -221,7 +230,7 @@ bdi {
 	border-color: var(--sapButton_Emphasized_BorderColor);
 	border-width: var(--_ui5_button_emphasized_border_width);
 	color: var(--sapButton_Emphasized_TextColor);
-	font-weight: var(--sapButton_Emphasized_FontWeight);
+	font-family: var(--sapFontBoldFamily );
 }
 
 /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
@@ -239,13 +248,15 @@ bdi {
 	color: var(--sapButton_Emphasized_Active_TextColor);
 }
 
-:host([design="Emphasized"][focused]) .ui5-button-root:after {
+:host([design="Emphasized"][desktop]) .ui5-button-root:focus-within:after,
+:host([design="Emphasized"]) .ui5-button-root:focus-visible:after {
 	border-color: var(--_ui5_button_emphasized_focused_border_color);
 	outline: none;
 }
 
 /* Belize related */
-:host([design="Emphasized"][focused][active]:not([non-interactive])) .ui5-button-root:after {
+:host([design="Emphasized"][desktop][active]:not([non-interactive])) .ui5-button-root:focus-within:after,
+:host([design="Emphasized"][active]:not([non-interactive])) .ui5-button-root:focus-visible:after  {
 	border-color: var(--_ui5_button_emphasized_focused_active_border_color);
 }
 
@@ -270,18 +281,22 @@ bdi {
 }
 
 /* SegmentedButton and ToggleButton */
-:host([ui5-segmented-button-item][active][focused]) .ui5-button-root:after,
-:host([pressed][focused]) .ui5-button-root:after {
+:host([ui5-segmented-button-item][active][desktop]) .ui5-button-root:focus-within:after,
+:host([ui5-segmented-button-item][active]) .ui5-button-root:focus-visible:after,
+:host([pressed][desktop]) .ui5-button-root:focus-within:after,
+:host([pressed]) .ui5-button-root:focus-visible:after {
 	border-color: var(--_ui5_button_pressed_focused_border_color);
 	outline: none;
 }
 
-:host([ui5-segmented-button-item][focused]:not(:last-child)) .ui5-button-root:after {
+:host([ui5-segmented-button-item][desktop]:not(:last-child)) .ui5-button-root:focus-within:after,
+:host([ui5-segmented-button-item]:not(:last-child)) .ui5-button-root:focus-visible:after  {
 	border-top-right-radius: var(--_ui5_button_focused_inner_border_radius);
 	border-bottom-right-radius: var(--_ui5_button_focused_inner_border_radius);
 }
 
-:host([ui5-segmented-button-item][focused]:not(:first-child)) .ui5-button-root:after {
+:host([ui5-segmented-button-item][desktop]:not(:first-child)) .ui5-button-root:focus-within:after,
+:host([ui5-segmented-button-item]:not(:first-child)) .ui5-button-root:focus-visible:after {
 	border-top-left-radius: var(--_ui5_button_focused_inner_border_radius);
 	border-bottom-left-radius: var(--_ui5_button_focused_inner_border_radius);
 }

package/src/themes/Calendar.css

@@ -11,6 +11,7 @@
     display: flex;
     flex-direction: column-reverse;
     justify-content: flex-end;
+    overflow: hidden;
 }
 
 .ui5-cal-root [ui5-calendar-header] {

package/src/themes/CalendarLegend.css

@@ -0,0 +1,8 @@
+.ui5-calendar-legend-root {
+	column-width: 7.5rem;
+	gap: 0.5rem;
+	padding: var(--_ui5-calendar-legend-root-padding);
+	margin: 1rem 0;
+	width: var(--_ui5-calendar-legend-root-width);
+	background-color: var(--sapList_Background);
+}

package/src/themes/CalendarLegendItem.css

@@ -0,0 +1,161 @@
+.ui5-calendar-legend-item-root {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	width: var(--_ui5-calendar-legend-item-root-width);
+	white-space: pre-line;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	cursor: default;
+	margin: 0.0625rem 0;
+}
+
+.ui5-calendar-legend-item-box {
+	display: inline-block;
+	box-sizing: border-box;
+	height: 1rem;
+	width: 1rem;
+	margin: var(--_ui5-calendar-legend-item-box-margin);
+	margin-inline-end: var(--_ui5-calendar-legend-item-box-inner-margin);
+	background: var(--sapLegend_WorkingBackground);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+.ui5-calendar-legend-item-text {
+	display: flex;
+	align-items: center;
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	color: var(--sapContent_LabelColor);
+	font-weight: normal;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
+	white-space: pre-line;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	cursor: default;
+}
+
+:host([type="Today"]) .ui5-calendar-legend-item-box {
+	border-color: var(--sapLegend_CurrentDateTime);
+	border: 0.125rem solid var(--sapLegend_CurrentDateTime);
+}
+
+:host([type="Selected"]) .ui5-calendar-legend-item-box {
+	background: var(--sapContent_Selected_Background);
+	border: 0.0625rem solid var(--sapContent_FocusColor);
+}
+
+:host([type="NonWorking"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegend_NonWorkingBackground);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+/* Special days */
+
+:host([type="Type01"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor1);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type02"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor2);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type03"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor3);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type04"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor4);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type05"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor5);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type06"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor6);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type07"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor7);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type08"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor8);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type09"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor9);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type10"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor10);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type11"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor11);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type12"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor12);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type13"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor13);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type14"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor14);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type15"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor15);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type16"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor16);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type17"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor17);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type18"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor18);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type19"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor19);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+:host([type="Type20"]) .ui5-calendar-legend-item-box {
+	background: var(--sapLegendColor20);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+}
+
+.ui5-calendar-legend-item-root:focus {
+	outline: var(--_ui5-calendar-legend-item-root-focus-border);
+	outline-offset: var(--_ui5-calendar-legend-item-root-focus-offset);
+	border-radius: var(--_ui5-calendar-legend-item-root-focus-border-radius);
+	margin: 0.0625rem 0;
+}

package/src/themes/CardHeader.css

@@ -12,7 +12,8 @@
 	align-items: flex-start;
 }
 
-.ui5-card-header.ui5-card-header-ff:not(.ui5-card-header-hide-focus):focus-within:before {
+:host([desktop]) .ui5-card-header.ui5-card-header-ff:not(.ui5-card-header-hide-focus):focus-within:before,
+.ui5-card-header.ui5-card-header-ff:not(.ui5-card-header-hide-focus):focus-visible:before {
 	outline: none;
 	content: "";
 	position: absolute;
@@ -29,7 +30,8 @@
 }
 
 /* cannot be combined with the above style, because :has selector breaks the whole style if FF */
-.ui5-card-header:not(.ui5-card-header-ff):not(.ui5-card-header-hide-focus):has(.ui5-card-header-focusable-element:focus):before {
+:host([desktop]) .ui5-card-header:not(.ui5-card-header-ff):not(.ui5-card-header-hide-focus):has(.ui5-card-header-focusable-element:focus):before,
+.ui5-card-header:not(.ui5-card-header-ff):not(.ui5-card-header-hide-focus):has(.ui5-card-header-focusable-element:focus-visible):before {
 	outline: none;
 	content: "";
 	position: absolute;
@@ -53,6 +55,7 @@
 	display: inherit;
 	align-items: inherit;
 	flex: 1;
+	min-width: 0;
 }
 
 .ui5-card-header.ui5-card-header--interactive:hover {
@@ -67,6 +70,7 @@
 
 .ui5-card-header .ui5-card-header-text {
 	flex: 1;
+	min-width: 0;
 	pointer-events: none;
 }
 
@@ -76,7 +80,7 @@
 	justify-content: space-between;
 }
 
-.ui5-card-header-status {
+.ui5-card-header-additionalText {
 	flex: none;
 }
 
@@ -103,7 +107,7 @@
 	border-radius: 50%;
 }
 
-.ui5-card-header .ui5-card-header-status {
+.ui5-card-header .ui5-card-header-additionalText {
 	display: inline-block;
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);

package/src/themes/Carousel.css

@@ -8,7 +8,8 @@
     height: 100%;
 }
 
-.ui5-carousel-root:focus {
+:host([desktop]) .ui5-carousel-root:focus,
+.ui5-carousel-root:focus-visible {
     outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }