feat(accordion-item): add css variable for meta-data custom max-inlin…

…e-size (VIV-1951) (#1865)

libs/components/src/lib/accordion-item/README.md

@@ -163,6 +163,28 @@ If set, the `icon` attribute is ignored.
 </vwc-accordion>
 ```
 
+## CSS Variables
+
+### Meta-data Max-inline-size
+
+Use `--accordion-item-meta-inline-size` to set a custom inline-size to the meta-data text.
+
+- Default: `20%`
+
+```html preview full
+<vwc-accordion
+	expand-mode="multi"
+	style="--accordion-item-meta-inline-size: 230px;"
+>
+	<vwc-accordion-item
+		heading="Accordion item"
+		meta="meta-data with custom width"
+	>
+		Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+	</vwc-accordion-item>
+</vwc-accordion>
+```
+
 ## Events
 
 <div class="table-wrapper">

libs/components/src/lib/accordion-item/accordion-item.scss

@@ -1,3 +1,4 @@
+@use 'partials/variables' as variables;
 @use '../../../../../dist/libs/tokens/scss/tokens.constants' as constants;
 @use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
 	$connotations: accent,
@@ -66,7 +67,7 @@
 
 .meta {
 	overflow: hidden;
-	max-width: 20%;
+	max-width: var(#{variables.$accordion-item-meta-inline-size}, 20%);
 	flex-shrink: 0;
 	color: var(#{constants.$vvd-color-neutral-600});
 	text-align: end;

libs/components/src/lib/accordion-item/partials/variables.scss

@@ -0,0 +1 @@
+$accordion-item-meta-inline-size: --accordion-item-meta-inline-size;