@sapui5/sap.fe.placeholder 1.146.0 → 1.147.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sapui5/sap.fe.placeholder",
-	"version": "1.146.0",
+	"version": "1.147.0",
 	"description": "SAPUI5 Library sap.fe.placeholder",
 	"keywords": [
 		"sapui5",

package/src/sap/fe/placeholder/.library

@@ -6,7 +6,7 @@
 		SAP UI development toolkit for HTML5 (SAPUI5)
         (c) Copyright 2009-2026 SAP SE. All rights reserved
 	</copyright>
-	<version>1.146.0</version>
+	<version>1.147.0</version>
 
 	<documentation>UI5 library: sap.fe.placeholder</documentation>
 

package/src/sap/fe/placeholder/library.js

@@ -30,7 +30,7 @@ sap.ui.define(
 			controls: [],
 			elements: [],
 			// eslint-disable-next-line no-template-curly-in-string
-			version: "1.146.0",
+			version: "1.147.0",
 			noLibraryCSS: false,
 			extensions: {}
 		});

package/src/sap/fe/placeholder/themes/base/Placeholder.less

@@ -1,47 +1,65 @@
+/* =============================================== */
+/* CSS for control sap.fe.placeholder/Placeholder  */
+/* Base theme                                      */
+/* =============================================== */
+
 .sapFePlaceholderContainer {
-	background-color: @sapUiBaseColor;
+	background-color: var(--sapBaseColor);
 	position: absolute;
 	width: 100%;
 	height: 100%;
 }
+
 .sapFeNoAnimation .sapFePlaceholderContainer * {
-	-webkit-animation: none !important;
+	animation: none !important;
 }
+
 .sapFeResponsivePadding {
 	width: calc(~"100% - 6rem");
 	padding-left: 3rem;
 	padding-right: 3rem;
 }
+
 .sapFeCols4 > * {
 	width: calc(~"25% - 2rem");
 }
+
 .sapFePaddingTop {
 	padding-top: 1rem;
 }
+
 .sapFeTextAlignStart {
 	text-align: start;
 }
+
 .sapFeTextAlignCenter {
 	text-align: center;
 }
+
 .sapFeTextAlignEnd {
 	text-align: end;
 }
+
 .sapFeTextAlignInherit {
 	text-align: inherit;
 }
+
 .sapFeVerticalAlignTop {
 	vertical-align: top;
 }
+
 .sapFeVerticalAlignInherit {
 	vertical-align: inherit;
 }
+
 .sapFeVerticalAlignMiddle {
 	vertical-align: middle;
 }
+
 .sapFeVerticalAlignBottom {
 	vertical-align: bottom;
 }
+
 .sapFeVerticalRepeater {
 	display: flex;
 	flex-direction: column;
@@ -49,73 +67,96 @@
 	align-content: flex-start;
 	width: fit-content;
 }
+
 .sapFeVerticalRepeater.sapFeTextAlignCenter {
 	align-items: center;
 }
+
 .sapFeVerticalRepeater.sapFeTextAlignEnd {
 	align-items: flex-end;
 }
+
 .sapFeVerticalRepeater.sapFeVerticalAlignMiddle {
 	align-content: center;
 }
+
 .sapFeVerticalRepeater.sapFeVerticalAlignBottom {
 	align-content: flex-end;
 }
+
 .sapFeHorizontalContent > * {
 	display: inline-block;
 }
+
 .sapFeHorizontalContent > .sapFeVerticalRepeater,
 .sapFeHorizontalContent > .sapFeHorizontalRepeater {
 	display: flex;
 }
+
 .sapFeHorizontalContent > *:not(:last-child) {
 	margin-left: 0;
 }
+
 .sapFeHorizontalContent > *:not(:last-child) {
 	margin-right: 2rem;
 }
+
 .sapFeHorizontalContent.sapFeTextAlignEnd > *:not(:last-child) {
 	margin-right: 0;
 }
+
 .sapFeHorizontalContent.sapFeTextAlignEnd > *:not(:first-child) {
 	margin-left: 2rem;
 }
+
 .sapFeVerticalContent > * {
 	display: block;
 }
+
 .sapFeVerticalContent > *:not(:last-child) {
 	margin-bottom: 1rem;
 }
+
 .sapFeVerticalContent.sapFeVerticalAlignBottom > *:not(:first-child) {
 	margin-top: 1rem;
 }
+
 .sapFeText {
 	border-radius: 0.25rem;
 }
+
 .sapFeTextWeightS {
 	height: 0.5rem;
 }
+
 .sapFeTextWeightM {
 	height: 0.75rem;
 }
+
 .sapFeTextWeightL {
 	height: 0.875rem;
 }
+
 .sapFeTextWidthS {
 	width: 75px;
 }
+
 .sapFeTextWidthM {
 	width: 120px;
 }
+
 .sapFeTextWidthL {
 	width: 225px;
 }
+
 .sapFeTextWidthXL {
 	width: 275px;
 }
+
 .sapFeTextWidth30PX {
 	width: 30px;
 }
+
 .sapFeTextWidth50perct {
 	width: 50%;
 }
@@ -123,18 +164,23 @@
 .sapFeTextWidth50PX {
 	width: 50px;
 }
+
 .sapFeTextWidth80PX {
 	width: 80px;
 }
+
 .sapFeTextWidth90PX {
 	width: 90px;
 }
+
 .sapFeTextWidth100PX {
 	width: 100px;
 }
+
 .sapFeTextWidth120PX {
 	width: 120px !important;
 }
+
 .sapFeTextWidth160PX {
 	width: 160px;
 }
@@ -142,95 +188,121 @@
 .sapFeTextHeight20 {
 	height: 20px;
 }
+
 .sapFeTextHeight90PX {
 	height: 90px !important;
 }
 
 .sapFeTextWidth0 {
-	width: 0px;
+	width: 0;
 }
+
 .sapFeTextWidth140 {
 	width: 140px;
 }
+
 .sapFeTextWidth160 {
 	width: 160px;
 }
+
 .sapFeAction {
 	width: 1.5rem;
 	height: 1.5rem;
 	border-radius: 50%;
 }
+
 .sapFeAvatarSizeS {
 	width: 2rem;
 	height: 2rem;
 }
+
 .sapFeAvatarSizeM {
 	width: 5rem;
 	height: 5rem;
 }
+
 .sapFeOVPCardHeaderAvatar {
 	width: 40px;
 	height: 40px;
 	background-size: 900px 900px;
 }
+
 .sapFeAvatarShapeCircle {
 	border-radius: 50%;
 }
+
 .sapFeBarChart {
 	display: inline-block;
 }
+
 .sapFeVerticalBarChart,
 .sapFeHorizontalBarChart {
 	padding-right: 1rem;
 	white-space: nowrap;
 }
+
 .sapFeBarChartWithMeasure .sapFeVerticalBarChart,
 .sapFeBarChartWithMeasure .sapFeHorizontalBarChart {
 	padding-right: 3rem;
 }
+
 .sapFeBarChart .sapFeHorizontalRepeaterItem,
 .sapFeHorizontalBarChart .sapFeVerticalRepeaterItem {
 	border-radius: 0.25rem;
 }
+
 .sapFeHorizontalContent > .sapFeVerticalBar {
 	margin: 0 0.55rem;
 }
+
 .sapFeVerticalBarWeightS {
 	width: 0.5rem;
 }
+
 .sapFeVerticalBarWeightM {
 	width: 0.75rem;
 }
+
 .sapFeVerticalBarWeight15 {
 	width: 1.5rem;
 }
+
 .sapFeVerticalBarWeightL {
 	width: 0.875rem;
 }
+
 .sapFeVerticalBarHeightS {
 	height: 75px;
 }
+
 .sapFeVerticalBarHeight0 {
-	height: 0px;
+	height: 0;
 }
+
 .sapFeVerticalBarHeight20 {
 	height: 20px;
 }
+
 .sapFeVerticalBarHeight30 {
 	height: 30px;
 }
+
 .sapFeVerticalBarHeight40 {
 	height: 40px;
 }
+
 .sapFeVerticalBarHeight60 {
 	height: 60px;
 }
+
 .sapFeVerticalBarHeight70 {
 	height: 60px;
 }
+
 .sapFeVerticalBarHeight80 {
 	height: 80px;
 }
+
 .sapFeVerticalBarHeight100 {
 	height: 100px;
 }
@@ -238,334 +310,414 @@
 .sapFeVerticalBarHeightM {
 	height: 120px;
 }
+
 .sapFeVerticalBarHeightL {
 	height: 225px;
 }
+
 .sapFeVerticalBarHeightXL {
 	height: 275px;
 }
+
 .sapFeBarChartLegendContainer {
 	padding-bottom: 2rem;
 }
+
 .sapFeBarChartLegendItem:not(:last-child) {
 	margin-bottom: 0.25rem;
 }
+
 .sapFeChartSum {
 	line-height: 0.125rem;
 }
+
 .sapFeChartHorMeasure,
 .sapFeChartVertMeasure {
 	position: relative;
 }
-.sapFeChartVertMeasure:before {
-	content: "";
+
+.sapFeChartVertMeasure::before {
+	content: '';
 	position: absolute;
 	top: 0;
 	bottom: 2px;
 	left: 0;
 	width: 2px;
 }
-.sapFeChartHorMeasure:after {
-	content: "";
+
+.sapFeChartHorMeasure::after {
+	content: '';
 	position: absolute;
 	bottom: 2px;
 	right: 0.5rem;
 	left: 0;
 	height: 2px;
 }
-.sapFeBarChartWithMeasure .sapFeChartHorMeasure:after {
+
+.sapFeBarChartWithMeasure .sapFeChartHorMeasure::after {
 	right: 2.5rem;
 }
+
 .sapFeVerticalBarChart.sapFeChartVertMeasure {
 	margin-top: 0.5rem;
 }
+
 .sapFeBarChartWithMeasure .sapFeVerticalBarChart.sapFeChartVertMeasure {
 	margin-right: 1rem;
 }
+
 .sapFeVerticalBarChart.sapFeVAlignInline.sapFeChartHorMeasure {
 	margin-top: 0;
 }
-.sapFeVerticalBarChart.sapFeChartVertMeasure:before {
+
+.sapFeVerticalBarChart.sapFeChartVertMeasure::before {
 	top: -0.5rem;
 }
+
 .sapFeHorizontalBarChart.sapFeChartHorMeasure {
 	padding-bottom: 0.5rem;
 	margin-top: 0.5rem;
 }
+
 .sapFeHorizontalBarChart.sapFeVAlignInline.sapFeChartHorMeasure {
 	margin-top: 0;
 }
+
 .sapFeHorizontalBarChart.sapFeChartVertMeasure {
 	padding-left: 0.5rem;
 	margin-right: 1rem;
 }
-.sapFeHorizontalBarChart.sapFeChartVertMeasure:before {
+
+.sapFeHorizontalBarChart.sapFeChartVertMeasure::before {
 	top: -0.5rem;
 }
-.sapFeHorizontalBarChart.sapFeChartHorMeasure:after {
+
+.sapFeHorizontalBarChart.sapFeChartHorMeasure::after {
 	right: 0;
 }
-.sapFeBarChartWithMeasure .sapFeHorizontalBarChart.sapFeChartHorMeasure:after {
+
+.sapFeBarChartWithMeasure .sapFeHorizontalBarChart.sapFeChartHorMeasure::after {
 	right: 2rem;
 }
+
 .sapFeChartSum .sapFeHorizontalRepeaterItem {
 	height: 5px !important;
 }
+
 .sapFeDonutChart {
 	width: 4rem;
 	height: 4rem;
 	border-radius: 50%;
 	position: relative;
 }
+
 .sapFeDonutChartInnerCircle {
 	width: 2rem;
 	height: 2rem;
 	margin: 1rem;
 	border-radius: 50%;
-	background: @sapUiBaseColor;
+	background: var(--sapBaseColor);
 	position: absolute;
 	top: 0;
 	left: 0;
 }
+
 .sapFeDonutChartCutOut {
 	width: 2rem;
 	height: 2rem;
 	border-radius: 50% 0 0 0;
-	background: @sapUiBaseColor;
+	background: var(--sapBaseColor);
 	position: absolute;
 	top: 0;
 	left: 0;
 }
+
 .sapFeOVPCardContainer {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
 }
+
 .sapFeOVPCard {
 	width: calc(~"20rem - 2rem");
 	margin: 0 2rem 2rem 0;
-	border: 1px solid @sapUiContentPlaceholderloadingBackground;
+	border: 1px solid var(--sapContent_Placeholderloading_Background);
 }
+
 .sapFeOVPCardVersion2 {
 	width: calc(~"20rem - 2rem + 20rem");
 }
+
 .sapFeOVPCardHeader {
 	padding: 1rem;
-	border-bottom: 1px solid @sapUiContentPlaceholderloadingBackground;
+	border-bottom: 1px solid var(--sapContent_Placeholderloading_Background);
 }
+
 .sapFeOVPCardHeader .sapFeHorizontalContent > *:not(:last-child) {
 	margin-right: 1rem;
 }
+
 .sapFeOVPCardContent {
 	padding: 1rem;
 }
+
 .sapFeOVPCardContentContainer {
 	width: 100%;
 }
+
 .sapFeOVPCardVersion2 .sapFeOVPCardContent > .sapFeHorizontalLayout > * {
 	width: calc(~"50% - 1rem");
 }
+
 .sapFeHeader {
 	padding-top: 1rem;
 	padding-bottom: 2rem;
-	background: @sapUiBaseColor;
+	background: var(--sapBaseColor);
 }
+
 .sapFeHeaderTitle {
 	height: 3rem;
 	line-height: 2.825rem;
 	display: flex;
 	justify-content: space-between;
 }
+
 .sapFeHeaderTitle > * > * {
 	display: inline-block;
 	vertical-align: middle;
 }
+
 .sapFeHeaderTitleWithSubtitle {
 	height: 4.25rem;
 }
+
 .sapFeHeaderSubTitleText {
 	display: block;
 }
+
 .sapFeHeaderContent {
 	padding-top: 2rem;
 	padding-bottom: 2rem;
 }
+
 .sapFeAnchorBar {
 	padding-top: 1rem;
 	padding-bottom: 1px;
 }
+
 .sapFeContent {
-	background: @sapUiBaseColor;
+	background: var(--sapBaseColor);
 }
+
 .sapFeObjectPageSection {
 	padding-top: 1rem;
 	position: relative;
 }
+
 .sapFeVerticalContent > *:not(:last-child).sapFeObjectPageSectionTitle {
 	margin-bottom: 3rem;
 }
-.sapFeObjectPageSectionTitle:after {
-	content: ".";
+
+.sapFeObjectPageSectionTitle::after {
+	content: '.';
 	color: transparent;
 	position: absolute;
 	top: 3rem;
 	left: -1rem;
 	right: -1rem;
 	height: 2px;
-	background: @sapUiListHeaderBackground;
+	background: var(--sapList_HeaderBackground);
 }
+
 .sapFeTable {
 	padding: 2rem 0;
 }
+
 .sapFeTableTitle {
-	background: @sapUiContentPlaceholderloadingBackground;
+	background: var(--sapContent_Placeholderloading_Background);
 	opacity: 0.66;
 }
+
 .sapFeTableColmnHeaderRow {
-	background: @sapUiListHeaderBackground;
+	background: var(--sapList_HeaderBackground);
 	margin-left: -1rem;
 	margin-right: -1rem;
 	padding-left: 1rem;
 	padding-right: 1rem;
 }
+
 .sapFeTableCell {
 	height: 2rem;
 	line-height: 2rem;
 	width: calc(~"100% / 8");
 }
+
 .sapFeTableColmnHeaderCell {
 	height: 2.5rem;
 	line-height: 2.5rem;
 	width: calc(~"100% / 8");
 }
+
 .sapFeTableText {
 	display: inline-block;
 }
+
 .sapFeHorizontalContent > *:not(:last-child).sapFeTableColmnHeaderCell,
 .sapFeHorizontalContent > *:not(:last-child).sapFeTableCell {
 	margin: 0;
 }
+
 .sapFeText,
 .sapFeAction,
 .sapFeVerticalBar,
-.sapFeChartVertMeasure:before,
-.sapFeChartHorMeasure:after,
+.sapFeChartVertMeasure::before,
+.sapFeChartHorMeasure::after,
 .sapFeAvatar,
 .sapFeDonutChart {
-	background: @sapUiContentPlaceholderloadingBackground;
-	-webkit-animation-duration: 2s;
-	-webkit-animation-fill-mode: forwards;
-	-webkit-animation-iteration-count: infinite;
-	-webkit-animation-name: placeHolderShimmer;
-	-webkit-animation-timing-function: linear;
-	background-image: @sapUiContentPlaceholderloadingGradient;
+	background: var(--sapContent_Placeholderloading_Background);
+	animation-duration: 2s;
+	animation-fill-mode: forwards;
+	animation-iteration-count: infinite;
+	animation-name: placeHolderShimmer;
+	animation-timing-function: linear;
+	background-image: var(--sapContent_Placeholderloading_Gradient);
 	background-repeat: no-repeat;
 	background-size: 900px 104px;
 }
-.sapFeChartVertMeasure:before {
+
+.sapFeChartVertMeasure::before {
 	background-size: 104px 900px;
 }
+
 .sapFeVerticalBar {
 	background-size: 104px 900px;
 }
+
 @keyframes placeHolderShimmer {
+
 	0% {
 		background-position-x: 100%;
 	}
+
 	100% {
 		background-position-x: 0%;
 	}
 }
+
 @media (min-width: 2560px) and (max-width: 3839px) {
+
 	.sapFeSmallestVisibleSizeXXL {
 		display: none;
 	}
+
 	.sapFeCols4 > * {
 		width: calc(~"(100% / 3) - 2rem");
 	}
+
 	.sapFeTableColmnHeaderCell,
 	.sapFeTableCell {
 		width: calc(~"100% / 6");
 	}
 }
+
 .sapUiContainer-Wide .sapFeSmallestVisibleSizeXXL,
 .sapUiContainer-Wide .sapFeSmallestVisibleSizeXL {
 	display: none;
 }
+
 .sapUiContainer-Wide .sapFeCols4 > * {
 	width: calc(~"(100% / 2) - 2rem");
 }
+
 .sapUiContainer-Wide .sapFeTableColmnHeaderCell,
 .sapUiContainer-Wide .sapFeTableCell {
 	width: calc(~"100% / 4");
 }
+
 @media (min-width: 1024px) and (max-width: 2559px) {
+
 	.sapFeSmallestVisibleSizeXXL,
 	.sapFeSmallestVisibleSizeXL {
 		display: none;
 	}
+
 	.sapFeCols4 > * {
 		width: calc(~"(100% / 2) - 2rem");
 	}
+
 	.sapFeTableColmnHeaderCell,
 	.sapFeTableCell {
 		width: calc(~"100% / 4");
 	}
 }
+
 .sapUiContainer-Medium .sapFeSmallestVisibleSizeXXL,
 .sapUiContainer-Medium .sapFeSmallestVisibleSizeXL,
 .sapUiContainer-Medium .sapFeSmallestVisibleSizeL {
 	display: none;
 }
+
 .sapUiContainer-Medium .sapFeResponsivePadding {
 	width: calc(~"100% - 4rem~");
 	padding-left: 2rem;
 	padding-right: 2rem;
 }
+
 .sapUiContainer-Medium .sapFeCols4 > * {
 	width: calc(~"(100% / 2) - 2rem");
 }
+
 .sapUiContainer-Medium .sapFeTableColmnHeaderCell,
 .sapUiContainer-Medium .sapFeTableCell {
 	width: calc(~"100% / 3");
 }
+
 @media (min-width: 600px) and (max-width: 1023px) {
+
 	.sapFeSmallestVisibleSizeXXL,
 	.sapFeSmallestVisibleSizeXL,
 	.sapFeSmallestVisibleSizeL {
 		display: none;
 	}
+
 	.sapFeResponsivePadding {
 		width: calc(~"100% - 4rem");
 		padding-left: 2rem;
 		padding-right: 2rem;
 	}
+
 	.sapFeCols4 > * {
 		width: calc(~"(100% / 2) - 2rem");
 	}
+
 	.sapFeTableColmnHeaderCell,
 	.sapFeTableCell {
 		width: calc(~"100% / 3");
 	}
 }
+
 .sapUiContainer-Narrow .sapFeSmallestVisibleSizeXXL,
 .sapUiContainer-Narrow .sapFeSmallestVisibleSizeXL,
 .sapUiContainer-Narrow .sapFeSmallestVisibleSizeL,
 .sapUiContainer-Narrow .sapFeSmallestVisibleSizeM {
 	display: none;
 }
+
 .sapUiContainer-Narrow .sapFeResponsivePadding {
 	width: calc(~"100% - 2rem");
 	padding-left: 1rem;
 	padding-right: 1rem;
 }
+
 .sapUiContainer-Narrow .sapFeCols4 > * {
 	width: calc(~"100% - 1rem");
 }
+
 .sapUiContainer-Narrow .sapFeTableColmnHeaderCell,
 .sapUiContainer-Narrow .sapFeTableCell {
 	width: 100%;
 }
+
 @media (max-width: 599px) {
 	.sapFeSmallestVisibleSizeXXL,
 	.sapFeSmallestVisibleSizeXL,
@@ -573,16 +725,19 @@
 	.sapFeSmallestVisibleSizeM {
 		display: none;
 	}
+
 	.sapFeResponsivePadding {
 		width: calc(~"100% - 2rem");
 		padding-left: 1rem;
 		padding-right: 1rem;
 	}
+
 	.sapFeCols4 > * {
 		width: calc(~"100% - 1rem");
 	}
+
 	.sapFeTableColmnHeaderCell,
 	.sapFeTableCell {
 		width: 100%;
 	}
-}
+}