@lucca-front/scss 19.1.6 → 19.2.0

package/src/components/tableSortable/component.scss

@@ -3,7 +3,6 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	@include button.text;
 	@include button.withIcon;
 
 	--components-button-padding: 0 var(--pr-t-spacings-50);
@@ -14,19 +13,21 @@
 	vertical-align: top;
 	align-items: flex-end;
 	white-space: wrap;
-	left: var(--components-sortable-offset);
+	inset-inline-start: var(--components-sortable-offset);
 	text-align: inherit;
 	flex-direction: var(--components-sortable-direction);
 	font-size: var(--components-sortable-fontSize);
 	line-height: var(--components-sortable-lineHeight);
 	color: currentColor;
 
+	@include button.text;
+
 	@at-root ($atRoot) {
 		.tableSortable-arrows {
-			margin-bottom: var(--components-sortable-arrowsOffset);
+			margin-block-end: var(--components-sortable-arrowsOffset);
 			position: relative;
-			width: 1rem;
-			height: 1rem;
+			inline-size: 1rem;
+			block-size: 1rem;
 		}
 
 		.tableSortable-arrows-ascending,

package/src/components/tableSortable/mods.scss

@@ -49,22 +49,22 @@
 	&:is(button) {
 		@include reset.button;
 
-		text-align: left;
+		text-align: start;
 
 		.indexTable & {
 			display: inline-flex;
-			width: fit-content;
+			inline-size: fit-content;
 		}
 
 		&::after {
-			margin-left: var(--pr-t-spacings-50);
+			margin-inline-start: var(--pr-t-spacings-50);
 		}
 	}
 }
 
 @mixin sortableLegacyS {
 	&::after {
-		margin-top: 0;
+		margin-block-start: 0;
 	}
 }
 
@@ -85,8 +85,8 @@
 		}
 
 		&::after {
-			margin-left: 0;
-			margin-right: var(--pr-t-spacings-50);
+			margin-inline-start: 0;
+			margin-inline-end: var(--pr-t-spacings-50);
 		}
 	}
 
@@ -96,7 +96,7 @@
 		border-radius: var(--commons-borderRadius-M);
 		opacity: 0;
 		margin: 0;
-		margin-right: var(--pr-t-spacings-50);
+		margin-inline-end: var(--pr-t-spacings-50);
 		transform: translateY(var(--pr-t-spacings-50));
 		transition-duration: var(--commons-animations-durations-fast);
 		transition-property: opacity, transform;
@@ -118,13 +118,13 @@
 	}
 
 	&:is(button) {
-		text-align: right;
+		text-align: end;
 	}
 }
 
 @mixin sortableLegacy2AlignRight {
 	&::before {
-		margin-right: 0;
+		margin-inline-end: 0;
 	}
 }
 

package/src/components/tableSortable/states.scss

@@ -29,7 +29,7 @@
 
 @mixin sortedAlignRight {
 	.table-head-row-cell-sortableButton {
-		text-align: right;
+		text-align: end;
 
 		&::before {
 			@include icon.generate('arrow_bottom');

package/src/components/tableSticked/mods.scss

@@ -5,8 +5,8 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
 
 @mixin stickyColumn {
-	width: auto;
-	min-width: 100%;
+	inline-size: auto;
+	min-inline-size: 100%;
 	background-color: var(--palettes-neutral-0);
 
 	//All stickies columns
@@ -17,35 +17,39 @@
 
 	//Left sticked columns
 	[class*='mod-stickyColumn-left'] {
-		left: var(--components-tableSticked-column-sticky-offset);
+		inset-inline-start: var(--components-tableSticked-column-sticky-offset);
 
 		//left sticked columns shadow
 		&.mod-stickyColumn-shadow,
 		.stickyColumn-shadow-wrapper::before {
-			left: calc(var(--components-tableSticked-column-sticky-offset) - var(--components-tableSticked-column-sticky-shadow-width));
+			inset-inline-start: calc(
+				var(--components-tableSticked-column-sticky-offset) - var(--components-tableSticked-column-sticky-shadow-width)
+			);
 		}
 		.stickyColumn-shadow-wrapper::after {
-			left: var(--components-tableSticked-column-sticky-offset);
+			inset-inline-start: var(--components-tableSticked-column-sticky-offset);
 			background-image: linear-gradient(to right, var(--components-tableSticked-column-sticky-shadow-color), transparent);
 		}
 	}
 
 	//Right sticked columns
 	[class*='mod-stickyColumn-right'] {
-		right: var(--components-tableSticked-column-sticky-offset);
+		inset-inline-end: var(--components-tableSticked-column-sticky-offset);
 
 		//right sticked columns shadow
 		.stickyColumn-shadow-wrapper {
 			justify-items: end;
-			width: calc(var(--components-tableSticked-column-sticky-shadow-width) * 3);
-			right: calc(var(--components-tableSticked-column-sticky-shadow-width) * -1);
+			inline-size: calc(var(--components-tableSticked-column-sticky-shadow-width) * 3);
+			inset-inline-end: calc(var(--components-tableSticked-column-sticky-shadow-width) * -1);
 		}
 		&.mod-stickyColumn-shadow,
 		.stickyColumn-shadow-wrapper::before {
-			right: calc(var(--components-tableSticked-column-sticky-offset) - var(--components-tableSticked-column-sticky-shadow-width));
+			inset-inline-end: calc(
+				var(--components-tableSticked-column-sticky-offset) - var(--components-tableSticked-column-sticky-shadow-width)
+			);
 		}
 		.stickyColumn-shadow-wrapper::after {
-			right: var(--components-tableSticked-column-sticky-offset);
+			inset-inline-end: var(--components-tableSticked-column-sticky-offset);
 			background-image: linear-gradient(to left, var(--components-tableSticked-column-sticky-shadow-color), transparent);
 		}
 	}
@@ -53,19 +57,18 @@
 	//Sticky columns drop shadow
 	.mod-stickyColumn-shadow {
 		display: none;
-		width: 0;
-		min-width: 0;
+		inline-size: 0;
+		min-inline-size: 0;
 		padding: 0;
 	}
 
 	.stickyColumn-shadow-wrapper {
 		position: absolute;
-		top: 0;
-		bottom: 0;
+		inset-block: 0;
 		display: grid;
 		grid-template-columns: calc(var(--components-tableSticked-column-sticky-shadow-width) * 2);
 		grid-template-areas: 'cell';
-		width: calc(var(--components-tableSticked-column-sticky-shadow-width) * 2);
+		inline-size: calc(var(--components-tableSticked-column-sticky-shadow-width) * 2);
 
 		&::before,
 		&::after {
@@ -74,11 +77,11 @@
 			grid-area: cell;
 		}
 		&::after {
-			width: var(--components-tableSticked-column-sticky-shadow-width);
+			inline-size: var(--components-tableSticked-column-sticky-shadow-width);
 		}
 		&::before {
 			z-index: 1;
-			width: var(--components-tableSticked-column-sticky-shadow-width);
+			inline-size: var(--components-tableSticked-column-sticky-shadow-width);
 			background-color: var(--palettes-neutral-0);
 		}
 	}
@@ -101,26 +104,26 @@
 
 @mixin stickyHeader {
 	.table-head-row-cell {
-		top: 0;
+		inset-block-start: 0;
 	}
 	.mod-stickyHeader-shadow .table-body-row-cell {
-		top: calc(var(--table-stickyHeader-shadow-offset) + var(--components-tableSticked-column-sticky-shadow-width));
+		inset-block-start: calc(var(--table-stickyHeader-shadow-offset) + var(--components-tableSticked-column-sticky-shadow-width));
 	}
 }
 
 @mixin stickyHeaderBanner {
 	.table-head-row-cell {
-		top: var(--commons-banner-height);
+		inset-block-start: var(--commons-banner-height);
 	}
 	.mod-stickyHeader-shadow .table-body-row-cell {
-		top: calc(
+		inset-block-start: calc(
 			var(--table-stickyHeader-shadow-offset) + var(--commons-banner-height) + var(--components-tableSticked-column-sticky-shadow-width)
 		);
 	}
 }
 
 @mixin stickyHeaderCommon {
-	margin-top: var(--components-tableSticked-column-sticky-shadow-width);
+	margin-block-start: var(--components-tableSticked-column-sticky-shadow-width);
 	.table-head-row-cell {
 		background-color: var(--palettes-neutral-0);
 		position: sticky;
@@ -138,9 +141,9 @@
 @mixin stickyHeaderShadow {
 	[class*='row-cell'] {
 		position: sticky;
-		top: var(--table-stickyHeader-shadow-offset);
+		inset-block-start: var(--table-stickyHeader-shadow-offset);
 		z-index: 4;
-		height: 0;
+		block-size: 0;
 		padding: 0;
 		border: 0;
 		background: transparent;
@@ -148,16 +151,16 @@
 
 	.stickyHeader-shadow-wrapper {
 		position: absolute;
-		top: calc(var(--components-tableSticked-column-sticky-shadow-width) * -1);
-		width: 100%;
-		height: 0;
+		inset-block-start: calc(var(--components-tableSticked-column-sticky-shadow-width) * -1);
+		inline-size: 100%;
+		block-size: 0;
 		border: 0;
 
 		&::after {
 			content: '';
 			display: block;
-			height: var(--components-tableSticked-column-sticky-shadow-width);
-			width: 100%;
+			block-size: var(--components-tableSticked-column-sticky-shadow-width);
+			inline-size: 100%;
 			background-image: linear-gradient(to bottom, var(--components-tableSticked-column-sticky-shadow-color), transparent);
 		}
 	}
@@ -165,7 +168,7 @@
 	+ .table-body-row,
 	+ .table-foot-row {
 		[class*='row-cell'] {
-			border-top: 0;
+			border-block-start: 0;
 		}
 	}
 }

package/src/components/tableStickedDeprecated/mods.scss

@@ -4,8 +4,8 @@
 @use '@lucca-front/scss/src/commons/utils/reset';
 
 @mixin stickyColumn($shadowColor: #2a3551) {
-	width: auto;
-	min-width: 100%;
+	inline-size: auto;
+	min-inline-size: 100%;
 	background-color: var(--pr-t-elevation-surface-raised);
 
 	.table-head-row-cell,
@@ -19,9 +19,9 @@
 
 		&.mod-stickyColumn-shadow {
 			z-index: 1;
-			min-width: var(--components-tableFixed-column-sticky-shadow-width);
-			max-width: var(--components-tableFixed-column-sticky-shadow-width);
-			width: var(--components-tableFixed-column-sticky-shadow-width);
+			min-inline-size: var(--components-tableFixed-column-sticky-shadow-width);
+			max-inline-size: var(--components-tableFixed-column-sticky-shadow-width);
+			inline-size: var(--components-tableFixed-column-sticky-shadow-width);
 			padding: 0;
 			background: transparent;
 		}
@@ -33,7 +33,7 @@
 
 	[class*='mod-stickyColumn-left'] {
 		.stickyColumn-shadow-wrapper {
-			left: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);
+			inset-inline-start: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);
 
 			&::after {
 				background-image: linear-gradient(to right, color.adjust($shadowColor, $alpha: -0.75), color.adjust($shadowColor, $alpha: -1));
@@ -43,7 +43,7 @@
 
 	[class*='mod-stickyColumn-right'] {
 		.stickyColumn-shadow-wrapper {
-			right: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);
+			inset-inline-end: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);
 
 			&::after {
 				background-image: linear-gradient(to left, color.adjust($shadowColor, $alpha: -0.75), color.adjust($shadowColor, $alpha: -1));
@@ -66,11 +66,10 @@
 				&.mod-stickyColumn-shadowMask,
 				&.mod-columnSticky-shadowMask {
 					&::before {
-						width: var(--components-tableFixed-column-sticky-shadow-width);
-						left: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);
+						inline-size: var(--components-tableFixed-column-sticky-shadow-width);
+						inset-inline-start: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);
 						background: var(--pr-t-elevation-surface-raised);
-						top: 0;
-						bottom: 0;
+						inset-block: 0;
 						z-index: 4;
 						position: absolute;
 						content: '';
@@ -85,8 +84,8 @@
 						+ .mod-stickyColumn-shadowMask,
 						+ .mod-columnSticky-shadowMask {
 							&::before {
-								left: auto;
-								right: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);
+								inset-inline-start: auto;
+								inset-inline-end: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);
 							}
 						}
 					}
@@ -97,44 +96,44 @@
 }
 
 @mixin shadow {
-	width: 0;
+	inline-size: 0;
 	position: static;
 }
 
 @mixin leftOffset($i) {
-	left: calc(#{$i} * var(--pr-t-spacings-200));
+	inset-inline-start: calc(#{$i} * var(--pr-t-spacings-200));
 
 	&.mod-stickyColumn-shadow,
 	.stickyColumn-shadow-wrapper::after {
-		left: calc(#{$i} * var(--pr-t-spacings-200) + var(--components-tableFixed-column-sticky-shadow-width));
+		inset-inline-start: calc(#{$i} * var(--pr-t-spacings-200) + var(--components-tableFixed-column-sticky-shadow-width));
 	}
 }
 
 @mixin rightOffset($i) {
-	right: calc(#{$i} * var(--pr-t-spacings-200));
+	inset-inline-end: calc(#{$i} * var(--pr-t-spacings-200));
 
 	&.mod-stickyColumn-shadow,
 	.stickyColumn-shadow-wrapper::after {
-		right: calc(#{$i} * var(--pr-t-spacings-200) + var(--components-tableFixed-column-sticky-shadow-width));
+		inset-inline-end: calc(#{$i} * var(--pr-t-spacings-200) + var(--components-tableFixed-column-sticky-shadow-width));
 	}
 }
 
 @mixin wrapper {
-	bottom: calc(var(--commons-divider-width) * -1);
-	width: var(--components-tableFixed-column-sticky-shadow-width);
-	border-bottom-width: var(--commons-divider-width);
-	border-bottom-color: var(--commons-divider-color);
-	border-bottom-style: solid;
+	inset-block-end: calc(var(--commons-divider-width) * -1);
+	inline-size: var(--components-tableFixed-column-sticky-shadow-width);
+	border-block-end-width: var(--commons-divider-width);
+	border-block-end-color: var(--commons-divider-color);
+	border-block-end-style: solid;
 	display: flex;
 	position: absolute;
-	top: 0;
+	inset-block-start: 0;
 
 	&::after {
-		width: var(--components-tableFixed-column-sticky-shadow-width);
+		inline-size: var(--components-tableFixed-column-sticky-shadow-width);
 		position: sticky;
 		display: block;
 		background-color: transparent;
-		height: 100%;
+		block-size: 100%;
 		content: '';
 	}
 }
@@ -149,17 +148,16 @@
 
 @mixin stickyColumnBreakpoint {
 	.table-head-row-cell {
-		left: auto !important;
-		right: auto !important;
+		inset-inline: auto !important;
 	}
 }
 
 @mixin stickyHeaderShadow($shadowColor: #2a3551) {
 	.table-body-row-cell,
 	.table-foot-row-cell {
-		top: calc(var(--sticky-header-shadow-offset-top) + var(--components-tableFixed-column-sticky-shadow-width));
+		inset-block-start: calc(var(--sticky-header-shadow-offset-top) + var(--components-tableFixed-column-sticky-shadow-width));
 		z-index: 4;
-		height: 0;
+		block-size: 0;
 		padding: 0;
 		border: 0;
 		position: sticky;
@@ -167,16 +165,16 @@
 	}
 
 	.stickyHeader-shadow-wrapper {
-		top: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);
-		width: 100%;
-		height: 0;
+		inset-block-start: calc(var(--components-tableFixed-column-sticky-shadow-width) * -1);
+		inline-size: 100%;
+		block-size: 0;
 		border: 0;
 
 		&::after {
-			top: calc(var(--sticky-header-shadow-offset-top) + var(--components-tableFixed-column-sticky-shadow-width));
-			height: var(--components-tableFixed-column-sticky-shadow-width);
+			inset-block-start: calc(var(--sticky-header-shadow-offset-top) + var(--components-tableFixed-column-sticky-shadow-width));
+			block-size: var(--components-tableFixed-column-sticky-shadow-width);
 			background-image: linear-gradient(to bottom, color.adjust($shadowColor, $alpha: -0.75), color.adjust($shadowColor, $alpha: -1));
-			width: 100%;
+			inline-size: 100%;
 			opacity: 0.5;
 		}
 	}
@@ -185,31 +183,31 @@
 	+ .table-foot-row {
 		.table-body-row-cell,
 		.table-foot-row-cell {
-			border-top: 0;
+			border-block-start: 0;
 		}
 	}
 }
 
 @mixin stickyHeader {
 	.table-head-row-cell {
-		top: 0;
+		inset-block-start: 0;
 	}
 }
 
 @mixin stickyHeaderBanner {
 	.table-head-row-cell {
-		top: var(commons-banner-height);
+		inset-block-start: var(commons-banner-height);
 	}
 
 	.table-body-row-cell,
 	.table-foot-row-cell {
-		top: calc(
+		inset-block-start: calc(
 			var(commons-banner-height) + var(--sticky-header-shadow-offset-top) + var(--components-tableFixed-column-sticky-shadow-width)
 		);
 
 		.stickyHeader-shadow-wrapper {
 			&::after {
-				top: calc(
+				inset-block-start: calc(
 					var(commons-banner-height) + var(--sticky-header-shadow-offset-top) + var(--components-tableFixed-column-sticky-shadow-width)
 				);
 			}

package/src/components/tag/component.scss

@@ -6,7 +6,8 @@
 	border-radius: var(--commons-borderRadius-M);
 	font-size: var(--components-tag-fontSize);
 	line-height: var(--components-tag-lineHeight);
-	padding: 0 var(--pr-t-spacings-50);
+	padding-block: 0;
+	padding-inline: var(--pr-t-spacings-50);
 	text-decoration: var(--components-tag-decoration);
 	box-shadow: 0 0 0 1px var(--components-tag-shadow);
 	gap: var(--pr-t-spacings-50);

package/src/components/textField/component.scss

@@ -7,12 +7,13 @@
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	display: flex;
 	align-items: stretch;
-	border-radius: var(--commons-borderRadius-M);
+	border-radius: var(--component-textField-borderRadius);
 	background-color: var(--component-textField-background);
 	box-shadow: 0 0 0 1px var(--component-textField-border);
+	width: var(--component-textField-width);
 
 	&:hover {
-		--component-textField-border: var(--pr-t-color-input-border-hover);
+		box-shadow: 0 0 0 1px var(--component-textField-borderHover);
 	}
 
 	&:has(.textField-input-value:focus-visible) {
@@ -21,8 +22,8 @@
 
 	.textField-input-affix-toggle {
 		pointer-events: auto;
-		width: var(--component-textField-affix-size);
-		height: var(--component-textField-affix-size);
+		inline-size: var(--component-textField-affix-size);
+		block-size: var(--component-textField-affix-size);
 		color: var(--pr-t-color-input-icon);
 	}
 
@@ -30,8 +31,8 @@
 		.textField-input {
 			display: flex;
 			align-items: center;
-			width: 100%;
-			border-radius: var(--commons-borderRadius-M);
+			inline-size: 100%;
+			border-radius: var(--component-textField-borderRadius);
 			background-color: var(--component-textField-background);
 			position: relative;
 
@@ -62,14 +63,14 @@
 			outline: 0;
 			line-height: var(--component-textField-lineHeight);
 			font-size: var(--component-textField-fontSize);
-			width: 100%;
-			padding: var(--component-textField-padding) var(--component-textField-affix-padding) var(--component-textField-padding)
-				var(--component-textField-padding);
+			inline-size: 100%;
+			padding-block: var(--component-textField-padding) var(--component-textField-padding);
+			padding-inline: var(--component-textField-padding) var(--component-textField-affix-padding);
 			background-color: transparent;
 			color: var(--component-textField-color);
 
 			&:is(textarea, div) {
-				max-height: var(--component-textField-maxHeight);
+				max-block-size: var(--component-textField-maxHeight);
 
 				@supports not (height: 1dvh) {
 					--component-textField-maxHeight: var(--component-textField-maxHeightFallback);
@@ -81,15 +82,15 @@
 			}
 
 			&:is(textarea) {
-				resize: vertical;
-				min-height: calc(2lh + var(--component-textField-padding) * 2);
+				resize: block;
+				min-block-size: calc(2lh + var(--component-textField-padding) * 2);
 
 				&:not([rows]) {
-					height: calc(3lh + var(--component-textField-padding) * 2);
+					block-size: calc(3lh + var(--component-textField-padding) * 2);
 				}
 
 				&[rows='1'] {
-					min-height: calc(1lh + var(--component-textField-padding) * 2);
+					min-block-size: calc(1lh + var(--component-textField-padding) * 2);
 				}
 			}
 		}
@@ -99,7 +100,7 @@
 			align-items: center;
 			gap: var(--pr-t-spacings-100);
 			position: absolute;
-			right: var(--pr-t-spacings-100);
+			inset-inline-end: var(--pr-t-spacings-100);
 			pointer-events: none;
 		}
 
@@ -115,36 +116,36 @@
 
 		.textField-prefix {
 			display: flex;
-			padding-left: var(--component-textField-padding);
+			padding-inline-start: var(--component-textField-padding);
 			align-items: center;
 			color: var(--pr-t-color-input-text-suffix);
 			line-height: var(--component-textField-lineHeight);
 			font-size: var(--component-textField-fontSize);
-			border-top-left-radius: var(--commons-borderRadius-M);
-			border-bottom-left-radius: var(--commons-borderRadius-M);
+			border-start-start-radius: var(--commons-borderRadius-M);
+			border-end-start-radius: var(--commons-borderRadius-M);
 			flex-shrink: 0;
 
 			~ .textField-input {
-				border-top-left-radius: 0;
-				border-bottom-left-radius: 0;
+				border-start-start-radius: 0;
+				border-end-start-radius: 0;
 			}
 		}
 
 		.textField-suffix {
 			display: flex;
-			padding-right: var(--component-textField-padding);
+			padding-inline-end: var(--component-textField-padding);
 			align-items: center;
 			color: var(--pr-t-color-input-text-suffix);
 			line-height: var(--component-textField-lineHeight);
 			font-size: var(--component-textField-fontSize);
-			border-top-right-radius: var(--commons-borderRadius-M);
-			border-bottom-right-radius: var(--commons-borderRadius-M);
+			border-start-end-radius: var(--commons-borderRadius-M);
+			border-end-end-radius: var(--commons-borderRadius-M);
 			order: 1;
 			flex-shrink: 0;
 
 			~ .textField-input {
-				border-top-right-radius: 0;
-				border-bottom-right-radius: 0;
+				border-start-end-radius: 0;
+				border-end-end-radius: 0;
 			}
 		}
 	}

package/src/components/textField/index.scss

@@ -29,4 +29,8 @@
 	&.mod-autoResize {
 		@include autoResize;
 	}
+
+	&.mod-filterPill {
+		@include filterPill;
+	}
 }

package/src/components/textField/mods.scss

@@ -51,7 +51,7 @@
 
 @mixin valueAlignRight {
 	.textField-input-value {
-		text-align: right;
+		text-align: end;
 	}
 }
 
@@ -60,8 +60,8 @@
 	.textField-input {
 		display: grid;
 		align-items: normal;
-		min-width: 0;
-		scroll-margin-bottom: var(--component-textField-scrollMargin);
+		min-inline-size: 0;
+		scroll-margin-block-end: var(--component-textField-scrollMargin);
 	}
 
 	.textField-input-valueClone,
@@ -70,7 +70,7 @@
 		overflow-wrap: break-word;
 		grid-area: 1 / 1 / 2 / 2;
 		resize: none;
-		min-width: 0;
+		min-inline-size: 0;
 		overflow: auto;
 	}
 
@@ -82,3 +82,12 @@
 		}
 	}
 }
+
+@mixin filterPill {
+	--component-textField-borderRadius: var(--commons-borderRadius-L);
+	--component-textField-border: var(--palettes-neutral-100);
+	--component-textField-borderHover: var(--palettes-product-400);
+	--component-textField-width: 15rem;
+
+	@include S;
+}