@lucca-front/scss 22.1.0-rc.1 → 22.1.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "22.1.0-rc.1",
+  "version": "22.1.0-rc.2",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -24,7 +24,7 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "22.1.0-rc.1",
-    "@lucca/prisme": "22.1.0-rc.1"
+    "@lucca-front/icons": "22.1.0-rc.2",
+    "@lucca/prisme": "22.1.0-rc.2"
   }
 }

package/src/commons/base.scss

@@ -24,11 +24,29 @@
 @mixin base($atRoot: namespace.$defaultAtRoot) {
 	@at-root ($atRoot) {
 		@if config.$fontFamily {
-			@include core.fontFace(config.$fontFamily, config.$fontWeights, config.$fontStyles);
+			@include core.fontFace(
+				config.$fontFamily,
+				config.$fontWeights,
+				config.$fontStyles,
+				$unicodeRange: config.$fontCoreRange
+			);
+			@include core.fontFace(
+				config.$fontFamily,
+				config.$fontWeights,
+				config.$fontStyles,
+				$unicodeRange: config.$fontExtendedRange,
+				$filenameSuffix: '-extended'
+			);
 		}
 
 		@if config.$fontFamilyBrand {
-			@include core.fontFace(config.$fontFamilyBrand, config.$fontWeightsBrand, config.$fontStylesBrand);
+			@include core.fontFace(
+				config.$fontFamilyBrand,
+				config.$fontWeightsBrand,
+				config.$fontStylesBrand,
+				$path: config.$fontPathBrand,
+				$unicodeRangeFolder: config.$fontUnicodeRangeFolderBrand
+			);
 		}
 
 		@if config.$fontFamilyCursive {

package/src/commons/config.scss

@@ -13,6 +13,35 @@ $deprecatedUtilityPrefix: false !default;
 $prefersContrast: 'no-preference' !default;
 
 $fontFamily: 'SourceSans' !default;
+
+$fontPath: '//cdn.lucca.fr/transverse/fonts' !default;
+
+$fontPathBrand: $fontPath !default;
+
+$fontUnicodeRangeFolder: 'unicode-range' !default;
+
+$fontUnicodeRangeFolderBrand: $fontUnicodeRangeFolder !default;
+
+// Covers fr/en/de/es/it/nl/pt/ca on their own: ASCII
+// + Latin-1 Supplement (letters/punctuation/currency), Œ œ Ÿ,
+// and common typographic punctuation.
+
+// ¡ ¢ £ ¥ ¨ © ª « ® ° ± ´ · ¸ º » ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý ß à á â ã ä å æ ç è
+// é ê ë ì í î ï ñ ò ó ô õ ö ÷ ø ù ú û ü ý ÿ Œ œ Ÿ – — ‘ ’ ‚ “ ” „ • … ‰ ‹ › ⁄ € ™ − fi fl (+ a thin space, U+2009)
+
+$fontCoreRange: 'U+0020-007E, U+00A0-00A3, U+00A5, U+00A8-00AB, U+00AE, U+00B0-00B1, U+00B4, U+00B7-00B8, U+00BA-00BB, U+00BF-00CF, U+00D1-00DD, U+00DF-00EF, U+00F1-00FD, U+00FF, U+0152-0153, U+0178, U+2009, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+202F-2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02' !default;
+
+// Only fetched by the browser when a page actually renders one of these glyphs:
+// Central/Eastern European Latin
+// Extended-A/B (pl/cs/hr/ro/hu/tr),
+// Vietnamese-style tilde/grave vowels and ẞ found in LuccaSans,
+// spacing modifiers, and arrows.
+
+// Ă ă Ą ą Ć ć Č č Ď ď Đ đ Ę ę Ě ě Ğ ğ Ĩ ĩ İ ı Ł ł Ń ń Ň ň Ő ő Ř ř Ś ś Ş ş Š š Ť ť Ũ ũ Ů ů Ű ű Ŷ ŷ Ź ź Ż ż Ž ž Ș ș
+// Ț ț ˆ ˜ ô ẞ Ẽ ẽ Ỳ ỳ Ỹ ỹ ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ≈ ≠ ≤ ≥
+
+$fontExtendedRange: 'U+0102-0107, U+010C-0111, U+0118-011B, U+011E-011F, U+0128-0129, U+0130-0131, U+0141-0144, U+0147-0148, U+0150-0151, U+0158-015B, U+015E-0161, U+0164-0165, U+0168-0169, U+016E-0171, U+0176-0177, U+0179-017E, U+0218-021B, U+02C6, U+02DC, U+0302, U+1E9E, U+1EBC-1EBD, U+1EF2-1EF3, U+1EF8-1EF9, U+2190-2199, U+2248, U+2260, U+2264-2265' !default;
+
 $fontFamilyBrand: 'LuccaSans' !default;
 $fontWeights: (
 	'regular': 400,
@@ -155,7 +184,7 @@ $palettesAssets: (
 	'timmi': ('brand': 'brand', 'secondary': 'glacier')
 );
 
-$fieldsWidth: 20, 30, 40, 50, 60 !default;
+$fieldsWidth: 10, 20, 30, 40, 50, 60 !default;
 
 // Palettes
 

package/src/commons/core.scss

@@ -157,28 +157,46 @@ $cursor: 'pointer', 'auto', 'default', 'text';
 	}
 }
 
-@mixin fontFace($family, $weights, $styles, $path: '//cdn.lucca.fr/transverse/fonts') {
+@mixin fontFace(
+	$family,
+	$weights,
+	$styles,
+	$path: config.$fontPath,
+	$unicodeRange: null,
+	$filenameSuffix: '',
+	$unicodeRangeFolder: config.$fontUnicodeRangeFolder
+) {
+	$familyPath: '#{$path}/#{$family}';
+
+	@if $unicodeRange {
+		$familyPath: '#{$familyPath}/#{$unicodeRangeFolder}';
+	}
+
 	@each $keyword, $number in $weights {
 		@each $style in $styles {
 			@if $style == 'normal' {
 				@font-face {
 					font-family: '#{$family}';
-					src:
-						url('#{$path}/#{$family}/#{$keyword}.woff2') format('woff2'),
-						url('#{$path}/#{$family}/#{$keyword}.woff') format('woff');
+					src: url('#{$familyPath}/#{$keyword}#{$filenameSuffix}.woff2') format('woff2');
 					font-weight: #{$number};
 					font-style: #{$style};
 					font-display: swap;
+
+					@if $unicodeRange {
+						unicode-range: #{$unicodeRange};
+					}
 				}
 			} @else {
 				@font-face {
 					font-family: '#{$family}';
-					src:
-						url('#{$path}/#{$family}/#{$keyword}-#{$style}.woff2') format('woff2'),
-						url('#{$path}/#{$family}/#{$keyword}-#{$style}.woff') format('woff');
+					src: url('#{$familyPath}/#{$keyword}#{$filenameSuffix}-#{$style}.woff2') format('woff2');
 					font-weight: #{$number};
 					font-style: #{$style};
 					font-display: swap;
+
+					@if $unicodeRange {
+						unicode-range: #{$unicodeRange};
+					}
 				}
 			}
 		}

package/src/commons/utils/highlight-prisme.scss

@@ -13,7 +13,6 @@
 	.bubbleIcon,
 	.softwareIcon,
 	.lucca-icon,
-	.icon,
 
 	// Texts
 	.code,
@@ -21,6 +20,7 @@
 	.newBadge,
 	.numericBadge,
 	.plgPush,
+	.priorityLevels,
 	.readMore,
 	.statusBadge,
 	.tag,
@@ -148,7 +148,7 @@
 	lu-bubble-illustration .bubbleIllustration,
 	lu-bubble-icon,
 	lu-software-icon .softwareIcon,
-	lu-icon .icon,
+	lu-icon .lucca-icon,
 
 	// Texts
 	lu-code .code,
@@ -156,6 +156,7 @@
 	lu-new-badge,
 	lu-numeric-badge,
 	lu-plg-push .plgPush,
+	lu-priority-levels,
 	lu-read-more,
 	lu-status-badge,
 	lu-tag .tag,

package/src/commons/vars.scss

@@ -11,7 +11,17 @@
 	// TOKENS : TYPO
 
 	--pr-t-font-family: '#{config.$fontFamily}', Tahoma, sans-serif;
-	--pr-t-font-family-brand: '#{config.$fontFamilyBrand}', Tahoma, sans-serif;
+	--pr-t-font-family-brand: var(--pr-t-font-family);
+
+	&:lang(fr),
+	&:lang(en),
+	&:lang(de),
+	&:lang(nl),
+	&:lang(it),
+	&:lang(pt),
+	&:lang(es) {
+		--pr-t-font-family-brand: '#{config.$fontFamilyBrand}', Tahoma, sans-serif;
+	}
 
 	@if (config.$fontFamilyCursive) {
 		--pr-t-font-family-cursive: '#{config.$fontFamilyCursive}', cursive;

package/src/components/activityFeed/component.scss

@@ -1,5 +1,6 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/commons/utils/reset';
+@use '@lucca-front/icons/src/icon/exports' as icons;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	list-style-type: '';
@@ -32,9 +33,15 @@
 		.activityFeed-step-state,
 		.activityFeed-step-avatar {
 			margin-block: var(--pr-t-spacings-75);
+			flex-shrink: 0;
 		}
 
 		.activityFeed-step-state {
+			@include icons.S;
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			inline-size: var(--pr-t-spacings-400);
 			block-size: var(--pr-t-spacings-400);
 			border-radius: var(--pr-t-border-radius-full);
@@ -43,12 +50,8 @@
 
 			&::before {
 				color: var(--palettes-700, var(--palettes-neutral-700));
-				font-size: calc(1.5 * var(--pr-t-font-body-M-fontSize));
+				font-size: var(--icon-size);
 				block-size: var(--pr-t-font-body-M-lineHeight);
-				inset: 0;
-				margin: auto;
-				position: absolute;
-				text-align: center;
 			}
 		}
 
@@ -84,8 +87,9 @@
 		.activityFeed-content-update-item {
 			display: var(--components-activityFeed-content-update-item-display);
 			align-items: center;
-			gap: var(--pr-t-spacings-75);
+			gap: 0 var(--pr-t-spacings-75);
 			min-block-size: var(--pr-t-spacings-300);
+			flex-wrap: wrap;
 		}
 
 		.activityFeed-content-update-item-object {

package/src/components/activityFeed/index.scss

@@ -34,6 +34,10 @@
 		@include critical;
 	}
 
+	.activityFeed-step-state.mod-icon {
+		@include withIcon;
+	}
+
 	.activityFeed-content-update-item {
 		&:has(.activityFeed-content-update-item-before:empty, .activityFeed-content-update-item-after:empty) {
 			@include single;

package/src/components/activityFeed/states.scss

@@ -24,3 +24,9 @@
 		@include icon.generate('sign_close');
 	}
 }
+
+@mixin withIcon {
+	@include color.palette('product');
+
+	color: var(--palettes-product-700);
+}

package/src/components/bubbleIcon/mods.scss

@@ -3,19 +3,25 @@
 @mixin XS {
 	--components-bubbleIcon-size: var(--pr-t-spacings-300);
 
-	@include icon.XS;
+	.lucca-icon {
+		@include icon.XS;
+	}
 }
 
 @mixin S {
 	--components-bubbleIcon-size: var(--pr-t-spacings-400);
 
-	@include icon.S;
+	.lucca-icon {
+		@include icon.S;
+	}
 }
 
 @mixin L {
 	--components-bubbleIcon-size: var(--pr-t-spacings-600);
 
-	@include icon.L;
+	.lucca-icon {
+		@include icon.L;
+	}
 }
 
 @mixin left {

package/src/components/button/mods.scss

@@ -1,12 +1,11 @@
-@use '@lucca-front/icons/src/icon/exports' as luccaIcon;
-@use '@lucca-front/icons/src/commons/utils/icon' as utilsIcon;
-@use '@lucca-front/scss/src/components/icon/exports' as icon;
+@use '@lucca-front/icons/src/icon/exports' as icons;
+@use '@lucca-front/icons/src/commons/utils/icon';
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;
 
 @mixin M {
-	@include luccaIcon.M;
+	@include icons.M;
 
 	--components-button-font: var(--pr-t-font-body-M);
 	--components-button-paddingBlock: var(--pr-t-spacings-100);
@@ -23,7 +22,7 @@
 }
 
 @mixin S {
-	@include luccaIcon.S;
+	@include icons.S;
 
 	--components-button-font: var(--pr-t-font-body-S);
 	--components-button-paddingBlock: var(--pr-t-spacings-75);
@@ -46,7 +45,7 @@
 }
 
 @mixin XS {
-	@include luccaIcon.XS;
+	@include icons.XS;
 
 	--components-button-font: var(--pr-t-font-body-XS);
 	--components-button-paddingBlock: var(--pr-t-spacings-50);
@@ -151,7 +150,7 @@
 	--components-button-padding: 0;
 
 	&::after {
-		@include utilsIcon.generate('arrow_chevron_bottom');
+		@include icon.generate('arrow_chevron_bottom');
 
 		block-size: 0;
 		order: -1;
@@ -284,12 +283,8 @@
 		@include color.borderGradient($gradient: var(--pr-t-color-border-ai));
 
 		&:not(.mod-invert) {
-			@include icon.whenRawIcon {
-				@include luccaIcon.AI;
-			}
-
-			@include icon.whenIconComponent {
-				@include icon.AI;
+			.lucca-icon {
+				@include icons.AI;
 			}
 		}
 	}

package/src/components/calendar/component.scss

@@ -28,11 +28,7 @@
 			}
 
 			&.mod-day {
-				max-block-size: 19.25rem;
-
-				&:has(+ .calendarWrapper .calendar-todayLink) {
-					max-block-size: 21.75rem;
-				}
+				max-block-size: 20rem;
 			}
 
 			&.mod-month,
@@ -154,6 +150,7 @@
 
 			border-radius: var(--pr-t-border-radius-default);
 			text-align: inherit;
+			text-transform: inherit;
 			inline-size: fit-content;
 			display: inline-block;
 			padding: var(--pr-t-spacings-50);

package/src/components/callout/mods.scss

@@ -1,5 +1,4 @@
 @use '@lucca-front/icons/src/icon/exports' as icons;
-@use '@lucca-front/scss/src/components/icon/exports' as icon;
 @use '@lucca-front/scss/src/commons/utils/color';
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/components/button/exports' as button;
@@ -38,13 +37,9 @@
 	@include color.borderGradient($gradient: var(--pr-t-color-border-ai));
 
 	.callout-icon {
-		@include icon.whenRawIcon {
+		.lucca-icon {
 			@include icons.AI;
 		}
-
-		@include icon.whenIconComponent {
-			@include icon.AI;
-		}
 	}
 }
 

package/src/components/dataTable/component.scss

@@ -160,6 +160,8 @@
 
 	.statusBadge,
 	.tag,
+	lu-tag,
+	pr-tag,
 	.avatar {
 		vertical-align: top;
 	}

package/src/components/dataTableSticked/mods.scss

@@ -53,6 +53,12 @@
 		flex-direction: column;
 		flex-grow: 1;
 
+		.dataTable {
+			// override required for Safari
+			block-size: auto;
+			flex-grow: 1;
+		}
+
 		&::before,
 		&::after {
 			content: '';
@@ -149,6 +155,12 @@
 			}
 		}
 	}
+
+	.dataTable-body-row.mod-group .dataTable-body-row-cell-expand {
+		position: sticky;
+		inset-inline-start: var(--components-dataTable-cell-padding-inline);
+		inline-size: fit-content;
+	}
 }
 
 @mixin stickyColumnBorder {

package/src/components/dialog/component.scss

@@ -6,7 +6,7 @@
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	animation-name: var(--components-dialog-animationOpening);
-	animation-duration: var(--commons-animations-durations-standard);
+	animation-duration: var(--components-dialog-animationDuration);
 	inset: var(--components-dialog-inset);
 	inline-size: var(--components-dialog-width);
 	block-size: var(--components-dialog-height);
@@ -21,7 +21,7 @@
 	max-inline-size: var(--components-dialog-maxWidth) !important;
 	max-block-size: var(--components-dialog-maxHeight) !important;
 	transition-property: scale, translate, inline-size, block-size, inset;
-	transition-duration: var(--commons-animations-durations-standard);
+	transition-duration: var(--components-dialog-animationDuration);
 	overflow: hidden;
 	translate: var(--components-dialog-translateX) var(--components-dialog-translateY);
 	scale: var(--components-dialog-scale);
@@ -108,6 +108,7 @@
 		}
 
 		.dialog-inside-header-actionOptional {
+			grid-area: action;
 			margin-inline-end: calc(var(--pr-t-spacings-100) * -1);
 
 			&:empty {
@@ -146,10 +147,12 @@
 			position: var(--components-dialog-inside-header-button-position);
 			inset-block-start: var(--components-dialog-inside-header-button-insetBlockStart);
 			inset-inline-end: var(--components-dialog-inside-header-button-insetInlineEnd);
+			justify-self: var(--components-dialog-inside-header-button-justifySelf);
 		}
 
 		.dialog-inside-header-content {
 			grid-area: content;
+			padding-block-start: var(--components-dialog-inside-header-content-paddingBlockStart);
 
 			&:empty {
 				display: none;
@@ -165,6 +168,7 @@
 			flex-grow: var(--components-dialog-insideContent-flexGrow);
 			display: block;
 			outline: none;
+			isolation: isolate;
 
 			&:empty {
 				display: none;
@@ -176,7 +180,7 @@
 		}
 
 		.dialog-inside-header-container-title {
-			font: var(--pr-t-font-heading-2);
+			font: var(--components-dialog-insideHeaderTitleFont);
 			padding: var(--components-dialog-insideHeaderTitlePadding);
 			text-align: var(--components-dialog-insideHeaderTitleAlign);
 			margin: 0;

package/src/components/dialog/mods.scss

@@ -79,10 +79,10 @@
 @mixin sheet {
 	--components-dialog-width: 100%;
 	--components-dialog-maxWidth: none;
-	--components-dialog-maxHeight: calc(100% - var(--pr-t-spacings-150));
+	--components-dialog-maxHeight: min(calc(100% - var(--pr-t-spacings-150)), calc(var(--components-dialog-visibleViewportBlockSize) - var(--pr-t-spacings-150)));
 	--components-dialog-maxHeightFallback: var(--components-dialog-maxHeight);
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure) var(--pr-t-border-radius-structure) 0 0;
-	--components-dialog-inset: auto 0 0;
+	--components-dialog-inset: auto 0 var(--components-dialog-insetBlockEnd) 0;
 }
 
 @mixin sheetNarrow {

package/src/components/dialog/vars.scss

@@ -8,11 +8,15 @@
 	--components-dialog-maxHeightFallback: calc(100vh - (var(--pr-t-spacings-200) * 2));
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
 	--components-dialog-inset: 0 var(--commons-pushPanel-inlineSize) 0 0;
+	--components-dialog-insetBlockEnd: 0px;
+	--components-dialog-visibleViewportBlockSize: 100%;
 	--components-dialog-animationOpening: scaleIn;
+	--components-dialog-animationDuration: var(--commons-animations-durations-standard);
 	--components-dialog-insideHeaderAreas:
 		'container close'
 		'content content';
 	--components-dialog-insideHeaderTitleAlign: left;
+	--components-dialog-insideHeaderTitleFont: var(--pr-t-font-heading-2);
 	--components-dialog-insideHeaderTitlePadding: calc(var(--pr-t-spacings-50) / 2) 0;
 	--components-dialog-insideHeaderButtonDisplay: flex;
 	--components-dialog-insideHeaderLinkDisplay: none;
@@ -32,6 +36,7 @@
 	--components-dialog-inside-header-position: relative;
 	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200);
 	--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-300);
+	--components-dialog-inside-header-content-paddingBlockStart: 0px;
 	--components-dialog-inside-header-button-position: static;
 	--components-dialog-inside-backgroundImage: none;
 	--components-dialog-minBlockSize: 0px;
@@ -41,6 +46,7 @@
 	--components-dialog-inside-fancyIllustrations-inlineSize: var(--components-dialog-inside-paddingInlineEnd);
 	--components-dialog-inside-header-button-insetBlockStart: var(--pr-t-spacings-200);
 	--components-dialog-inside-header-button-insetInlineEnd: var(--pr-t-spacings-300);
+	--components-dialog-inside-header-button-justifySelf: auto;
 	--components-dialog-inside-header-marginBlock: 0px;
 	--components-dialog-inside-footer-marginBlock: 0px;
 	--components-dialog-inside-footer-actions-button-icon-menuDots-display: block;

package/src/components/fancyBox/component.scss

@@ -9,7 +9,91 @@
 	margin-inline: var(--components-fancyBox-marginInline);
 	contain: layout;
 
+	&:has(.fancyBox-content-backgroundEndStart),
+	&:has(.fancyBox-content-backgroundStartEnd),
+	&:has(.fancyBox-content-foregroundStartEnd),
+	&:has(.fancyBox-content-foregroundEndStart) {
+		.fancyBox-content {
+			&::before,
+			&::after {
+				content: none;
+			}
+		}
+	}
+
 	@at-root ($atRoot) {
+		:is(
+			.fancyBox-content-backgroundEndStart,
+			.fancyBox-content-backgroundStartEnd,
+			.fancyBox-content-foregroundStartEnd,
+			.fancyBox-content-foregroundEndStart
+		) {
+			position: absolute;
+			transition-duration: var(--commons-animations-durations-slow);
+			pointer-events: none;
+			transition-property: inline-size, block-size, inset;
+
+			svg {
+				display: block;
+				inline-size: 100%;
+				block-size: auto;
+			}
+		}
+
+		.fancyBox-content-backgroundEndStart,
+		.fancyBox-content-backgroundStartEnd {
+			z-index: -1;
+		}
+
+		.fancyBox-content-backgroundEndStart {
+			inset-block-end: var(--components-fancyBox-content-backgroundEndStart-insetBlockEnd);
+			inset-inline-start: var(--components-fancyBox-content-backgroundEndStart-insetInlineStart);
+			inline-size: var(--components-fancyBox-content-backgroundEndStart-inlineSize);
+			block-size: var(--components-fancyBox-content-backgroundEndStart-blockSize);
+		}
+
+		.fancyBox-content-backgroundStartEnd {
+			inset-block-start: var(--components-fancyBox-content-backgroundStartEnd-insetBlockStart);
+			inset-inline-end: var(--components-fancyBox-content-backgroundStartEnd-insetInlineEnd);
+			inline-size: var(--components-fancyBox-content-backgroundStartEnd-inlineSize);
+			block-size: var(--components-fancyBox-content-backgroundStartEnd-blockSize);
+		}
+
+		.fancyBox-content-foregroundStartEnd {
+			inset-block-start: var(--components-fancyBox-content-foregroundStartEnd-insetBlockStart);
+			inset-inline-end: var(--components-fancyBox-content-foregroundStartEnd-insetInlineEnd);
+			inline-size: var(--components-fancyBox-content-foregroundStartEnd-inlineSize);
+			block-size: var(--components-fancyBox-content-foregroundStartEnd-blockSize);
+		}
+
+		.fancyBox-content-foregroundEndStart {
+			inset-block-end: var(--components-fancyBox-content-foregroundEndStart-insetBlockEnd);
+			inset-inline-start: var(--components-fancyBox-content-foregroundEndStart-insetInlineStart);
+			inline-size: var(--components-fancyBox-content-foregroundEndStart-inlineSize);
+			block-size: var(--components-fancyBox-content-foregroundEndStart-blockSize);
+		}
+
+		// deprecated
+		.fancyBox-content-foreground {
+			inset-block-start: var(--components-fancyBox-content-foregroundStartEnd-insetBlockStart);
+			inset-inline-end: var(--components-fancyBox-content-foregroundStartEnd-insetInlineEnd);
+			inline-size: var(--components-fancyBox-content-foregroundStartEnd-inlineSize);
+			block-size: var(--components-fancyBox-content-foregroundStartEnd-blockSize);
+			background-repeat: no-repeat;
+			background-image: var(--components-fancyBox-foreground);
+			background-size: contain;
+			position: absolute;
+			transition-duration: var(--commons-animations-durations-slow);
+			pointer-events: none;
+			transition-property: inline-size, block-size, inset;
+
+			svg {
+				display: block;
+				inline-size: 100%;
+				block-size: auto;
+			}
+		}
+
 		.fancyBox-content {
 			position: relative;
 			min-block-size: var(--components-fancyBox-contentMinBlockSize);
@@ -25,6 +109,7 @@
 			align-items: center;
 			justify-content: center;
 
+			// deprecated
 			&::before,
 			&::after {
 				content: '';
@@ -38,6 +123,7 @@
 				pointer-events: none;
 			}
 
+			// deprecated
 			&::before {
 				transition-property: inline-size, block-size, inset-block-end, inset-inline-start;
 				inset-block-end: var(--components-fancyBox-offsetBlock);
@@ -45,6 +131,7 @@
 				background-image: var(--components-fancyBox-background-left);
 			}
 
+			// deprecated
 			&::after {
 				transition-property: inline-size, block-size, inset-block-start, inset-inline-end;
 				inset-block-start: var(--components-fancyBox-offsetBlock);
@@ -52,19 +139,5 @@
 				background-image: var(--components-fancyBox-background-right);
 			}
 		}
-
-		.fancyBox-content-foreground {
-			position: absolute;
-			inline-size: var(--components-fancyBox-imageWidth);
-			block-size: var(--components-fancyBox-imageHeight);
-			background-repeat: no-repeat;
-			inset-block-start: var(--components-fancyBox-offsetBlock);
-			inset-inline-end: var(--components-fancyBox-offsetInline);
-			background-image: var(--components-fancyBox-foreground);
-			background-size: contain;
-			transition-property: inline-size, block-size, inset-block-start, inset-inline-end;
-			transition-duration: var(--commons-animations-durations-slow);
-			pointer-events: none;
-		}
 	}
 }