@lucca-front/scss 21.3.0-rc.5 → 21.3.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "21.3.0-rc.5",
+  "version": "21.3.0-rc.6",
   "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": "21.3.0-rc.5",
-    "@lucca/prisme": "21.3.0-rc.5"
+    "@lucca-front/icons": "21.3.0-rc.6",
+    "@lucca/prisme": "21.3.0-rc.6"
   }
 }

package/src/components/color/index.scss

@@ -23,8 +23,7 @@
 			@include selected;
 		}
 
-		.optionItem.is-highlighted &,
-		[role='listbox'] .optionItem:hover & {
+		.lu-picker-panel .optionItem.is-highlighted & {
 			@include highlighted;
 		}
 	}

package/src/components/fieldset/index.scss

@@ -21,6 +21,10 @@
 			@include expandable;
 		}
 
+		&.mod-hiddenLegend {
+			@include hiddenLegend;
+		}
+
 		&:has(.fieldset-title-content[aria-expanded='true']) {
 			@include expanded;
 		}

package/src/components/fieldset/mods.scss

@@ -20,10 +20,6 @@
 		&:focus-visible {
 			@include a11y.focusVisible;
 		}
-
-		.lucca-icon {
-			margin-block-start: var(--pr-t-spacings-50);
-		}
 	}
 }
 
@@ -39,3 +35,11 @@
 @mixin narrow {
 	--components-fieldset-title-content-flexWrap: wrap;
 }
+
+@mixin hiddenLegend {
+	--components-fieldset-gap: 0;
+
+	.fieldset-title-content-text {
+		@include a11y.mask;
+	}
+}

package/src/components/popover/component.scss

@@ -33,6 +33,16 @@
 	}
 
 	@at-root ($atRoot) {
+		.popover-content {
+			overflow: auto;
+			max-block-size: min(var(--components-popover-content-maxBlockSize), calc(100dvh - var(--pr-t-spacings-200)));
+			max-inline-size: min(var(--components-popover-content-maxInlineSize), calc(100dvw - var(--pr-t-spacings-400)));
+
+			&:focus-visible {
+				@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-default));
+			}
+		}
+
 		.popover-contentOptional {
 			padding: var(--components-popover-padding);
 		}

package/src/components/popover/vars.scss

@@ -1,3 +1,5 @@
 @mixin vars {
 	--components-popover-padding: var(--pr-t-spacings-100);
+	--components-popover-content-maxBlockSize: 9999px;
+	--components-popover-content-maxInlineSize: 9999px;
 }

package/src/components/textField/component.scss

@@ -130,6 +130,22 @@
 			}
 		}
 
+		.textField-prefix-lang {
+			min-inline-size: calc(var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
+			position: relative;
+
+			&::after {
+				content: '';
+				position: absolute;
+				inset: var(--pr-t-spacings-25) 0;
+				border-right: 1px solid var(--palettes-neutral-200);
+			}
+
+			&:has(.formLabel-required) {
+				min-inline-size: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-50));
+			}
+		}
+
 		.textField-suffix {
 			display: inline-flex;
 			padding-inline-end: var(--component-textField-padding);

package/src/components/textField/index.scss

@@ -13,6 +13,10 @@
 
 		&.mod-S {
 			@include S;
+
+			&.mod-multilanguage {
+				@include multilanguageS;
+			}
 		}
 
 		&.mod-XS {
@@ -23,6 +27,10 @@
 			@include valueAlignRight;
 		}
 
+		&.mod-multilanguage {
+			@include multilanguage;
+		}
+
 		&.is-invalid,
 		&:has(.textField-input-value[aria-invalid='true']) {
 			@include invalid;
@@ -35,6 +43,10 @@
 		&.is-disabled,
 		&:has(.textField-input-value:disabled) {
 			@include disabled;
+
+			&.mod-multilanguage {
+				@include multilanguageDisabled;
+			}
 		}
 
 		&.mod-autoResize {

package/src/components/textField/mods.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/components/clear/exports' as clear;
+@use '@lucca-front/scss/src/components/button/exports' as button;
 @use '@lucca-front/icons/src/icon/exports' as icon;
 
 @mixin S {
@@ -90,3 +91,25 @@
 
 	@include S;
 }
+
+@mixin multilanguage {
+	.textField-input-affix-toggle {
+		@include button.outlined;
+		@include button.S;
+
+		pointer-events: auto;
+		padding: var(--pr-t-spacings-50);
+		color: var(--palettes-product-700);
+
+		&:hover {
+			--components-button-backgroundColor: var(--palettes-product-50);
+			--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-product-300);
+		}
+	}
+}
+
+@mixin multilanguageS {
+	.textField-input-affix-toggle {
+		@include button.XS;
+	}
+}

package/src/components/textField/states.scss

@@ -21,3 +21,9 @@
 	--component-textField-color: var(--pr-t-color-text-subtle);
 	--component-textField-textDecoration: line-through;
 }
+
+@mixin multilanguageDisabled {
+	.textField-input-affix-toggle {
+		color: var(--pr-t-color-text-disabled);
+	}
+}