fix: storybook extended

packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx

@@ -27,6 +27,7 @@ export const Template = (args, { argTypes }) => ({
       :value="value"
       :input-id="inputId"
       :required="required"
+      :aria-details-id="ariaDetailsId"
       @scaleChange="action('scaleChange')($event)"
       @scale-change="action('scale-change')($event)"
     ></scale-checkbox>
@@ -68,8 +69,9 @@ export const Template = (args, { argTypes }) => ({
 ```css
 scale-checkbox {
   --spacing-x: var(--telekom-spacing-composition-space-04);
-  --transition: all var(--telekom-motion-duration-transition)
-    var(--telekom-motion-easing-standard);
+  --transition: all var(--telekom-motion-duration-transition) var(
+      --telekom-motion-easing-standard
+    );
   --color-text: var(--telekom-color-text-and-icon-standard);
   --color-error: var(--telekom-color-functional-danger-standard);
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
@@ -254,4 +256,4 @@ scale-checkbox {
     ></scale-icon-alert-imprint-dataprivacy>
   </span>
 </scale-checkbox>
-```
+```

packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue

@@ -11,6 +11,7 @@
     :input-id="inputId"
     :required="required"
     :aria-label-checkbox="ariaLabelCheckbox"
+    :aria-details-id="ariaDetailsId"
     @scaleChange="scaleChange"
   >
   </scale-checkbox>
@@ -31,7 +32,7 @@ export default {
     value: { type: String },
     inputId: { type: String },
     required: { type: Boolean },
-    ariaLabelCheckbox: { type: String}
+    ariaLabelCheckbox: { type: String },
   },
   methods: {
     scaleChange($event) {

packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx

@@ -45,6 +45,7 @@ export const Template = (args, { argTypes }) => ({
             :helper-text="helperText"
             :invalid="invalid"
             :placeholder="placeholder"
+            :aria-details-id="ariaDetailsId"
             @scaleChange="scaleChange"
             @scale-change="scale-change"
             @scaleFocus="scaleFocus"
@@ -204,7 +205,7 @@ export const RangeTemplate = (args, { argTypes }) => ({
     args={{
       value: '2020-12-31',
       label: 'Standard',
-      placeholder: 'Select date'
+      placeholder: 'Select date',
     }}
   >
     {Template.bind({})}
@@ -251,8 +252,9 @@ duet-date-picker {
   --font-size-day: var(--telekom-typography-font-size-body);
   --font-size-table-header: var(--telekom-typography-font-size-caption);
   --font-weight-table-header: var(--telekom-typography-font-weight-extra-bold);
-  --focus-outline: var(--telekom-line-weight-highlight) solid
-    var(--telekom-color-functional-focus-standard);
+  --focus-outline: var(--telekom-line-weight-highlight) solid var(
+      --telekom-color-functional-focus-standard
+    );
 
   --z-index-label: 10;
 }
@@ -290,7 +292,7 @@ duet-date-picker {
       label: 'With Error',
       invalid: true,
       helperText: 'something is wrong',
-      placeholder: 'select date'
+      placeholder: 'select date',
     }}
   >
     {Template.bind({})}

packages/storybook-vue/stories/components/date-picker/ScaleDatePicker.vue

@@ -19,6 +19,7 @@
     :popup-title="popupTitle"
     :placeholder="placeholder"
     :styles="styles"
+    :aria-details-id="ariaDetailsId"
     @scaleChange="scaleChange"
     @scaleFocus="scaleFocus"
     @scaleBlur="scaleBlur"

packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx

@@ -13,8 +13,8 @@ import { action } from '@storybook/addon-actions';
 export const Template = (args, { argTypes }) => ({
   components: { ScaleDropdownSelect },
   props: {
-  itemProps: { default: {} },
-  ...ScaleDropdownSelect.props,
+    itemProps: { default: {} },
+    ...ScaleDropdownSelect.props,
   },
   data() {
     return {
@@ -38,6 +38,7 @@ export const Template = (args, { argTypes }) => ({
         :combobox-id="comboboxId"
         :hide-label-visually="hideLabelVisually"
         :floating-strategy="floatingStrategy"
+        :aria-details-id="ariaDetailsId"
         @scaleChange="['scale-change']"
         @scaleFocus="['scale-focus']"
         @scaleBlur="['scale-blur']"
@@ -106,18 +107,22 @@ export const Template = (args, { argTypes }) => ({
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
   --background-disabled: none;
   --background-hover: var(--telekom-color-ui-state-fill-hovered);
-  --border: var(--telekom-spacing-composition-space-01) solid
-    var(--telekom-color-ui-border-standard);
+  --border: var(--telekom-spacing-composition-space-01) solid var(
+      --telekom-color-ui-border-standard
+    );
   --border-color-hover: var(--telekom-color-ui-border-hovered);
   --border-color-focus: var(--telekom-color-ui-border-hovered);
   --border-color-disabled: var(--telekom-color-ui-border-disabled);
-  --border-invalid: var(--telekom-spacing-composition-space-02) solid
-    var(--telekom-color-functional-danger-hovered);
-  --focus-outline: var(--telekom-line-weight-highlight) solid
-    var(--telekom-color-functional-focus-standard);
+  --border-invalid: var(--telekom-spacing-composition-space-02) solid var(
+      --telekom-color-functional-danger-hovered
+    );
+  --focus-outline: var(--telekom-line-weight-highlight) solid var(
+      --telekom-color-functional-focus-standard
+    );
   --spacing-x: var(--telekom-spacing-composition-space-05);
-  --transition: all var(--telekom-motion-duration-transition)
-    var(--telekom-motion-easing-standard);
+  --transition: all var(--telekom-motion-duration-transition) var(
+      --telekom-motion-easing-standard
+    );
   --radius: var(--telekom-radius-standard);
   --spacing-x-for-helper-text: var(--telekom-spacing-composition-space-03);
 
@@ -128,9 +133,9 @@ export const Template = (args, { argTypes }) => ({
     18px 32px 4px 12px
     (subtracting 1px from border)
   */
-  --spacing-combobox: 1.125rem
-    calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem
-    calc(0.75rem - var(--telekom-spacing-composition-space-01));
+  --spacing-combobox: 1.125rem calc(
+      2rem - var(--telekom-spacing-composition-space-01)
+    ) 0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01));
 
   /*meta*/
   --spacing-y-meta: var(--telekom-spacing-composition-space-03);
@@ -155,17 +160,16 @@ export const Template = (args, { argTypes }) => ({
 
   /*listbox*/
   --background-listbox: var(--telekom-color-background-surface);
-  --box-shadow-listbox: 0 2px 4px 0 rgba(0, 0, 0, 0.1),
-    0 4px 16px 0 rgba(0, 0, 0, 0.1);
+  --box-shadow-listbox: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 16px 0 rgba(0, 0, 0, 0.1);
   --max-height-listbox: 300px;
   --z-index-listbox: 99;
 }
-
 ```
 
 ## Disabled
 
 ### Whole Dropdown Select disabled
+
 <Canvas withSource="none">
   <Story
     name="Disabled"
@@ -187,6 +191,7 @@ export const Template = (args, { argTypes }) => ({
 ```
 
 ### Individual items disabled
+
 <Canvas withSource="none">
   <Story
     name="Disabled items"
@@ -204,8 +209,12 @@ export const Template = (args, { argTypes }) => ({
 
 ```html
 <scale-dropdown-select label="Disabled items">
-  <scale-dropdown-select-item value="caspar" disabled>Caspar</scale-dropdown-select-item>
-  <scale-dropdown-select-item value="cedric" disabled>Cedric</scale-dropdown-select-item>
+  <scale-dropdown-select-item value="caspar" disabled
+    >Caspar</scale-dropdown-select-item
+  >
+  <scale-dropdown-select-item value="cedric" disabled
+    >Cedric</scale-dropdown-select-item
+  >
   <scale-dropdown-select-item value="cem">Cem</scale-dropdown-select-item>
 </scale-dropdown-select>
 ```

packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue

@@ -10,6 +10,7 @@
     :combobox-id="comboboxId"
     :hide-label-visually="hideLabelVisually"
     :floating-strategy="floatingStrategy"
+    :aria-details-id="ariaDetailsId"
     @scaleChange="['scale-change']"
     @scaleFocus="['scale-focus']"
     @scaleBlur="['scale-blur']"

packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx

@@ -32,6 +32,7 @@ export const Template = (args, { argTypes }) => ({
       :input-id="inputId"
       :visible-size="visibleSize"
       :controlled="controlled"
+      :aria-details-id="ariaDetailsId"
       @scaleChange="scaleChange"
       @scaleFocus="scaleFocus"
       @scaleBlur="scaleBlur"
@@ -97,24 +98,31 @@ export const Template = (args, { argTypes }) => ({
   --font-weight: var(--telekom-typography-font-weight-bold);
   --height: var(--telekom-spacing-composition-space-13);
   --spacing-x: var(--telekom-spacing-composition-space-05);
-  --spacing-dropdown: 18px var(--telekom-spacing-composition-space-12) 5px
-    calc(var(--spacing-x) - 1px);
-  --transition: all var(--telekom-motion-duration-transition)
-    var(--telekom-motion-easing-standard);
+  --spacing-dropdown: 18px var(--telekom-spacing-composition-space-12) 5px calc(
+      var(--spacing-x) - 1px
+    );
+  --transition: all var(--telekom-motion-duration-transition) var(
+      --telekom-motion-easing-standard
+    );
   --radius: var(--telekom-radius-standard);
-  --border: var(--telekom-spacing-composition-space-01) solid
-    var(--telekom-color-ui-border-standard);
-  --border-danger: var(--telekom-spacing-composition-space-02) solid
-    var(--telekom-color-functional-danger-standard);
-  --border-success: var(--telekom-spacing-composition-space-02) solid
-    var(--telekom-color-functional-success-standard);
-  --border-warning: var(--telekom-spacing-composition-space-02) solid
-    var(--telekom-color-functional-warning-standard);
+  --border: var(--telekom-spacing-composition-space-01) solid var(
+      --telekom-color-ui-border-standard
+    );
+  --border-danger: var(--telekom-spacing-composition-space-02) solid var(
+      --telekom-color-functional-danger-standard
+    );
+  --border-success: var(--telekom-spacing-composition-space-02) solid var(
+      --telekom-color-functional-success-standard
+    );
+  --border-warning: var(--telekom-spacing-composition-space-02) solid var(
+      --telekom-color-functional-warning-standard
+    );
   --border-color-hover: var(--telekom-color-ui-border-hovered);
   --border-color-focus: var(--telekom-color-ui-border-hovered);
   --border-color-disabled: var(--telekom-color-ui-border-disabled);
-  --focus-outline: var(--telekom-line-weight-highlight) solid
-    var(--telekom-color-functional-focus-standard);
+  --focus-outline: var(--telekom-line-weight-highlight) solid var(
+      --telekom-color-functional-focus-standard
+    );
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
   --background-disabled: none;
   --color: var(--telekom-color-text-and-icon-standard);
@@ -267,6 +275,9 @@ The display error is on the browser side.
   <option value="1">item 1</option>
   <option value="2" selected>item 2</option>
   <option value="3">item 3</option>
-  <scale-icon-content-calendar size="20" slot="icon"></scale-icon-content-calendar>
+  <scale-icon-content-calendar
+    size="20"
+    slot="icon"
+  ></scale-icon-content-calendar>
 </scale-dropdown>
 ```

packages/storybook-vue/stories/components/dropdown/ScaleDropDown.vue

@@ -12,6 +12,7 @@
     :input-id="inputId"
     :visible-size="visibleSize"
     :controlled="controlled"
+    :aria-details-id="ariaDetailsId"
     @scaleInput="scaleInput"
     @scaleChange="scaleChange"
     @scaleFocus="scaleFocus"