@ui5/webcomponents 2.5.0-rc.0 → 2.5.0-rc.2

package/dist/generated/themes/FormLabelSpan.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormLabelSpan.css.js","sourceRoot":"","sources":["../../../src/generated/themes/FormLabelSpan.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,4BAA4B,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACzG,6BAA6B,CAAC,oBAAoB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAE7F,MAAM,SAAS,GAAc,EAAC,WAAW,EAAC,oBAAoB,EAAC,QAAQ,EAAC,6BAA6B,EAAC,OAAO,EAAC;CAC7G,EAAC,CAAC;AACH,eAAe,SAAS,CAAC","sourcesContent":["import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@ui5/webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@ui5/webcomponents\", \"sap_horizon\", async () => defaultTheme);\n\nconst styleData: StyleData = {packageName:\"@ui5/webcomponents\",fileName:\"themes/FormLabelSpan.css.ts\",content:`@container (max-width: 600px){:host([label-span-s=\"1\"]) .ui5-form-item,:host([label-span-s=\"1\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span1)}:host([label-span-s=\"2\"]) .ui5-form-item,:host([label-span-s=\"2\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span2)}:host([label-span-s=\"3\"]) .ui5-form-item,:host([label-span-s=\"3\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span3)}:host([label-span-s=\"4\"]) .ui5-form-item,:host([label-span-s=\"4\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span4)}:host([label-span-s=\"5\"]) .ui5-form-item,:host([label-span-s=\"5\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span5)}:host([label-span-s=\"6\"]) .ui5-form-item,:host([label-span-s=\"6\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span6)}:host([label-span-s=\"7\"]) .ui5-form-item,:host([label-span-s=\"7\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span7)}:host([label-span-s=\"8\"]) .ui5-form-item,:host([label-span-s=\"8\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span8)}:host([label-span-s=\"9\"]) .ui5-form-item,:host([label-span-s=\"9\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span9)}:host([label-span-s=\"10\"]) .ui5-form-item,:host([label-span-s=\"10\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span10)}:host([label-span-s=\"11\"]) .ui5-form-item,:host([label-span-s=\"11\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span11)}:host(:not([label-span-s])) .ui5-form-item,:host(:not([label-span-s])) .ui5-form-group,:host([label-span-s=\"12\"]) .ui5-form-item,:host([label-span-s=\"12\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span12);--ui5-v2-5-0-rc-0-form-item-label-justify: var(--ui5-v2-5-0-rc-0-form-item-label-justify-span12);--ui5-v2-5-0-rc-0-form-item-label-padding: var(--ui5-v2-5-0-rc-0-form-item-label-padding-span12)}}@container (width > 600px) and (width <= 1024px){:host([label-span-m=\"1\"]) .ui5-form-item,:host([label-span-m=\"1\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span1)}:host([label-span-m=\"2\"]) .ui5-form-item,:host([label-span-m=\"2\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span2)}:host([label-span-m=\"3\"]) .ui5-form-item,:host([label-span-m=\"3\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span3)}:host([label-span-m=\"4\"]) .ui5-form-item,:host([label-span-m=\"4\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span4)}:host([label-span-m=\"5\"]) .ui5-form-item,:host([label-span-m=\"5\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span5)}:host([label-span-m=\"6\"]) .ui5-form-item,:host([label-span-m=\"6\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span6)}:host([label-span-m=\"7\"]) .ui5-form-item,:host([label-span-m=\"7\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span7)}:host([label-span-m=\"8\"]) .ui5-form-item,:host([label-span-m=\"8\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span8)}:host([label-span-m=\"9\"]) .ui5-form-item,:host([label-span-m=\"9\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span9)}:host([label-span-m=\"10\"]) .ui5-form-item,:host([label-span-m=\"10\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span10)}:host([label-span-m=\"11\"]) .ui5-form-item,:host([label-span-m=\"11\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span11)}:host([label-span-m=\"12\"]) .ui5-form-item,:host([label-span-m=\"12\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span12);--ui5-v2-5-0-rc-0-form-item-label-justify: var(--ui5-v2-5-0-rc-0-form-item-label-justify-span12);--ui5-v2-5-0-rc-0-form-item-label-padding: var(--ui5-v2-5-0-rc-0-form-item-label-padding-span12)}}@container (width > 1024px) and (width <= 1440px){:host([label-span-l=\"1\"]) .ui5-form-item,:host([label-span-l=\"1\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span1)}:host([label-span-l=\"2\"]) .ui5-form-item,:host([label-span-l=\"2\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span2)}:host([label-span-l=\"3\"]) .ui5-form-item,:host([label-span-l=\"3\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span3)}:host([label-span-l=\"4\"]) .ui5-form-item,:host([label-span-l=\"4\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span4)}:host([label-span-l=\"5\"]) .ui5-form-item,:host([label-span-l=\"5\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span5)}:host([label-span-l=\"6\"]) .ui5-form-item,:host([label-span-l=\"6\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span6)}:host([label-span-l=\"7\"]) .ui5-form-item,:host([label-span-l=\"7\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span7)}:host([label-span-l=\"8\"]) .ui5-form-item,:host([label-span-l=\"8\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span8)}:host([label-span-l=\"9\"]) .ui5-form-item,:host([label-span-l=\"9\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span9)}:host([label-span-l=\"10\"]) .ui5-form-item,:host([label-span-l=\"10\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span10)}:host([label-span-l=\"11\"]) .ui5-form-item,:host([label-span-l=\"11\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span11)}:host([label-span-l=\"12\"]) .ui5-form-item,:host([label-span-l=\"12\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span12);--ui5-v2-5-0-rc-0-form-item-label-justify: var(--ui5-v2-5-0-rc-0-form-item-label-justify-span12);--ui5-v2-5-0-rc-0-form-item-label-padding: var(--ui5-v2-5-0-rc-0-form-item-label-padding-span12)}}@container (min-width: 1441px){:host([label-span-xl=\"1\"]) .ui5-form-item,:host([label-span-xl=\"1\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span1)}:host([label-span-xl=\"2\"]) .ui5-form-item,:host([label-span-xl=\"2\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span2)}:host([label-span-xl=\"3\"]) .ui5-form-item,:host([label-span-xl=\"3\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span3)}:host([label-span-xl=\"4\"]) .ui5-form-item,:host([label-span-xl=\"4\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span4)}:host([label-span-xl=\"5\"]) .ui5-form-item,:host([label-span-xl=\"5\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span5)}:host([label-span-xl=\"6\"]) .ui5-form-item,:host([label-span-xl=\"6\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span6)}:host([label-span-xl=\"7\"]) .ui5-form-item,:host([label-span-xl=\"7\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span7)}:host([label-span-xl=\"8\"]) .ui5-form-item,:host([label-span-xl=\"8\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span8)}:host([label-span-xl=\"9\"]) .ui5-form-item,:host([label-span-xl=\"9\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span9)}:host([label-span-xl=\"10\"]) .ui5-form-item,:host([label-span-xl=\"10\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span10)}:host([label-span-xl=\"11\"]) .ui5-form-item,:host([label-span-xl=\"11\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span11)}:host([label-span-xl=\"12\"]) .ui5-form-item,:host([label-span-xl=\"12\"]) .ui5-form-group{--ui5-v2-5-0-rc-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span12);--ui5-v2-5-0-rc-0-form-item-label-justify: var(--ui5-v2-5-0-rc-0-form-item-label-justify-span12);--ui5-v2-5-0-rc-0-form-item-label-padding: var(--ui5-v2-5-0-rc-0-form-item-label-padding-span12)}}\n`};\nexport default styleData;\n\t"]}

package/src/themes/FormLabelSpan.css

@@ -1,267 +0,0 @@
-/* 
-* The Form's labels take 4 cells out 12 in M, L ans XL sizes,
-* and 12 cells (whole row) in S size.
-* The ratio can be changed trough the labelSpan property.
-*/
-
-/* S - 12 cells */
-@container (max-width: 600px) {
-	:host([label-span-s="1"]) .ui5-form-item,
-	:host([label-span-s="1"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span1);
-	}
-
-	:host([label-span-s="2"]) .ui5-form-item,
-	:host([label-span-s="2"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span2);
-	}
-
-	:host([label-span-s="3"]) .ui5-form-item,
-	:host([label-span-s="3"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span3);
-	}
-
-	:host([label-span-s="4"]) .ui5-form-item,
-	:host([label-span-s="4"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span4);
-	}
-
-	:host([label-span-s="5"]) .ui5-form-item,
-	:host([label-span-s="5"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span5);
-	}
-
-	:host([label-span-s="6"]) .ui5-form-item,
-	:host([label-span-s="6"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span6);
-	}
-
-	:host([label-span-s="7"]) .ui5-form-item,
-	:host([label-span-s="7"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span7);
-	}
-
-	:host([label-span-s="8"]) .ui5-form-item,
-	:host([label-span-s="8"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span8);
-	}
-
-	:host([label-span-s="9"]) .ui5-form-item,
-	:host([label-span-s="9"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span9);
-	}
-
-	:host([label-span-s="10"]) .ui5-form-item,
-	:host([label-span-s="10"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span10);
-	}
-
-	:host([label-span-s="11"]) .ui5-form-item,
-	:host([label-span-s="11"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span11);
-	}
-
-	:host(:not([label-span-s])) .ui5-form-item,
-	:host(:not([label-span-s])) .ui5-form-group,
-	:host([label-span-s="12"]) .ui5-form-item,
-	:host([label-span-s="12"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span12);
-		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
-		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
-	}
-}
-
-/* M  - 4 cells by default, up to 12 cells */
-@container (width > 600px) and (width <= 1024px) {
-	:host([label-span-m="1"]) .ui5-form-item,
-	:host([label-span-m="1"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span1);
-	}
-
-	:host([label-span-m="2"]) .ui5-form-item,
-	:host([label-span-m="2"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span2);
-	}
-
-	:host([label-span-m="3"]) .ui5-form-item,
-	:host([label-span-m="3"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span3);
-	}
-
-	:host([label-span-m="4"]) .ui5-form-item,
-	:host([label-span-m="4"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span4);
-	}
-
-	:host([label-span-m="5"]) .ui5-form-item,
-	:host([label-span-m="5"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span5);
-	}
-
-	:host([label-span-m="6"]) .ui5-form-item,
-	:host([label-span-m="6"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span6);
-	}
-
-	:host([label-span-m="7"]) .ui5-form-item,
-	:host([label-span-m="7"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span7);
-	}
-
-	:host([label-span-m="8"]) .ui5-form-item,
-	:host([label-span-m="8"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span8);
-	}
-
-	:host([label-span-m="9"]) .ui5-form-item,
-	:host([label-span-m="9"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span9);
-	}
-
-	:host([label-span-m="10"]) .ui5-form-item,
-	:host([label-span-m="10"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span10);
-	}
-
-	:host([label-span-m="11"]) .ui5-form-item,
-	:host([label-span-m="11"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span11);
-	}
-
-	:host([label-span-m="12"]) .ui5-form-item,
-	:host([label-span-m="12"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span12);
-		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
-		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
-	}
-}
-
-/* L - 4 cells by default, up to 12 cells */
-@container (width > 1024px) and (width <= 1440px) {
-	:host([label-span-l="1"]) .ui5-form-item,
-	:host([label-span-l="1"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span1);
-	}
-
-	:host([label-span-l="2"]) .ui5-form-item,
-	:host([label-span-l="2"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span2);
-	}
-
-	:host([label-span-l="3"]) .ui5-form-item,
-	:host([label-span-l="3"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span3);
-	}
-
-	:host([label-span-l="4"]) .ui5-form-item,
-	:host([label-span-l="4"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span4);
-	}
-
-	:host([label-span-l="5"]) .ui5-form-item,
-	:host([label-span-l="5"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span5);
-	}
-
-	:host([label-span-l="6"]) .ui5-form-item,
-	:host([label-span-l="6"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span6);
-	}
-
-	:host([label-span-l="7"]) .ui5-form-item,
-	:host([label-span-l="7"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span7);
-	}
-
-	:host([label-span-l="8"]) .ui5-form-item,
-	:host([label-span-l="8"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span8);
-	}
-
-	:host([label-span-l="9"]) .ui5-form-item,
-	:host([label-span-l="9"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span9);
-	}
-
-	:host([label-span-l="10"]) .ui5-form-item,
-	:host([label-span-l="10"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span10);
-	}
-
-	:host([label-span-l="11"]) .ui5-form-item,
-	:host([label-span-l="11"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span11);
-	}
-
-	:host([label-span-l="12"]) .ui5-form-item,
-	:host([label-span-l="12"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span12);
-		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
-		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
-	}
-}
-
-/* XL - 4 cells by default, up to 12 cells */
-@container (min-width: 1441px) {
-	:host([label-span-xl="1"]) .ui5-form-item,
-	:host([label-span-xl="1"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span1);
-	}
-
-	:host([label-span-xl="2"]) .ui5-form-item,
-	:host([label-span-xl="2"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span2);
-	}
-
-	:host([label-span-xl="3"]) .ui5-form-item,
-	:host([label-span-xl="3"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span3);
-	}
-
-	:host([label-span-xl="4"]) .ui5-form-item,
-	:host([label-span-xl="4"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span4);
-	}
-
-	:host([label-span-xl="5"]) .ui5-form-item,
-	:host([label-span-xl="5"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span5);
-	}
-
-	:host([label-span-xl="6"]) .ui5-form-item,
-	:host([label-span-xl="6"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span6);
-	}
-
-	:host([label-span-xl="7"]) .ui5-form-item,
-	:host([label-span-xl="7"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span7);
-	}
-
-	:host([label-span-xl="8"]) .ui5-form-item,
-	:host([label-span-xl="8"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span8);
-	}
-
-	:host([label-span-xl="9"]) .ui5-form-item,
-	:host([label-span-xl="9"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span9);
-	}
-
-	:host([label-span-xl="10"]) .ui5-form-item,
-	:host([label-span-xl="10"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span10);
-	}
-
-	:host([label-span-xl="11"]) .ui5-form-item,
-	:host([label-span-xl="11"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span11);
-	}
-
-	:host([label-span-xl="12"]) .ui5-form-item,
-	:host([label-span-xl="12"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span12);
-		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
-		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
-	}
-}