From 6e198ee30093769893a1b4a0a62d51796c4f3065 Mon Sep 17 00:00:00 2001
From: Gammel <max.gammel@telekom.de>
Date: Thu, 21 Nov 2024 13:14:25 +0100
Subject: [PATCH 1/3] feat(storybook-vue): added multiple props to component
 documentation in storybook

---
 .../components/breadcrumb/ScaleBreadcrumb.vue |  3 +--
 .../stories/components/button/ScaleButton.vue |  2 ++
 .../checkbox-group/CheckboxGroup.stories.mdx  | 24 ++++++++++++++++++-
 .../checkbox-group/ScaleCheckboxGroup.vue     | 20 ++++++++++++----
 .../components/checkbox/Checkbox.stories.mdx  | 20 ++++++++++++----
 .../components/checkbox/ScaleCheckbox.vue     |  6 +++++
 .../stories/components/chip/Chip.stories.mdx  |  3 +++
 .../stories/components/chip/ScaleChip.vue     |  4 ++++
 .../components/data-grid/DataGrid.stories.mdx |  8 +++++++
 .../date-picker/DatePicker.stories.mdx        |  9 +++++++
 .../date-picker/ScaleDatePicker.vue           |  6 +++++
 .../DropdownSelect.stories.mdx                |  4 ++++
 .../dropdown-select/ScaleDropdownSelect.vue   |  8 +++++++
 .../components/dropdown/DropDown.stories.mdx  |  5 +---
 .../flyout-menu/MenuFlyout.stories.mdx        |  7 ++++++
 .../flyout-menu/ScaleMenuFlyout.vue           |  1 +
 .../stories/components/icon/Icon.stories.mdx  |  5 +---
 .../stories/components/icon/ScaleIcon.vue     |  2 --
 .../stories/components/logo/ScaleLogo.vue     |  3 +++
 .../components/modal/Modal.stories.mdx        |  1 -
 .../stories/components/modal/ScaleModal.vue   |  2 --
 .../NotificationBadge.stories.mdx             |  2 ++
 .../ScaleNotificationBadge.vue                |  9 ++++++-
 .../progress-bar/ProgressBar.stories.mdx      | 10 +++++++-
 .../progress-bar/ScaleProgressBar.vue         | 10 +++++++-
 .../RadioButtonGroup.stories.mdx              | 10 ++++++--
 .../radio-button-group/ScaleRadioButton.vue   |  1 +
 .../ScaleRadioButtonGroup.vue                 |  1 +
 .../rating-stars/RatingStars.stories.mdx      | 10 ++++----
 .../segmented-button/ScaleSegmentedButton.vue |  6 +++++
 .../SegmentedButton.stories.mdx               |  3 +++
 .../sidebar-navigation/SidebarNav.stories.mdx |  3 ++-
 .../sidebar-navigation/SidebarNav.vue         |  5 ++--
 .../stories/components/slider/ScaleSlider.vue |  4 ++++
 .../components/slider/Slider.stories.mdx      | 13 ++++++++++
 .../stories/components/switch/ScaleSwitch.vue |  2 ++
 .../components/switch/switch.stories.mdx      |  1 +
 .../components/tab-navigation/ScaleTabNav.vue |  7 ++----
 .../tab-navigation/TabNav.stories.mdx         | 13 +---------
 .../components/tab-navigation/TabPanel.vue    | 14 ++++-------
 .../stories/components/table/ScaleTable.vue   |  5 ++--
 .../components/table/Table.stories.mdx        |  2 +-
 .../TelekomBrandHeader.stories.mdx            |  1 +
 .../TelekomHeader.vue                         |  4 +++-
 .../components/telekom-footer/Footer.vue      |  2 +-
 .../components/text-area/ScaleTextArea.vue    |  3 +++
 .../components/text-area/TextArea.stories.mdx |  2 ++
 .../components/text-field/ScaleTextField.vue  |  8 +++++++
 .../text-field/TextField.stories.mdx          |  3 +++
 .../components/tooltip/ScaleTooltip.vue       |  4 ++++
 .../stories/setup_and_info/ScaleAndVue_de.md  |  2 +-
 51 files changed, 231 insertions(+), 72 deletions(-)

diff --git a/packages/storybook-vue/stories/components/breadcrumb/ScaleBreadcrumb.vue b/packages/storybook-vue/stories/components/breadcrumb/ScaleBreadcrumb.vue
index e2de5ef757..ba6d337d49 100644
--- a/packages/storybook-vue/stories/components/breadcrumb/ScaleBreadcrumb.vue
+++ b/packages/storybook-vue/stories/components/breadcrumb/ScaleBreadcrumb.vue
@@ -4,14 +4,13 @@
     :styles="styles"
   >
     <slot></slot>
-    <slot name="separator"></slot>
   </scale-breadcrumb>
 </template>
 
 <script>
 export default {
   props: {
-    separator: String,
+    separator: { type: String},
     styles: { type: String }
   },
 }
diff --git a/packages/storybook-vue/stories/components/button/ScaleButton.vue b/packages/storybook-vue/stories/components/button/ScaleButton.vue
index 9a9c7bb692..a697e7cd32 100644
--- a/packages/storybook-vue/stories/components/button/ScaleButton.vue
+++ b/packages/storybook-vue/stories/components/button/ScaleButton.vue
@@ -10,6 +10,7 @@
     :value="value"
     :variant="variant"
     :icon-only="iconOnly"
+    :icon-position="iconPosition"
     :inner-tabindex="innerTabindex"
     :inner-aria-label="innerAriaLabel"
     :styles="styles"
@@ -36,6 +37,7 @@ export default {
     variant: String,
     size: String,
     iconOnly: Boolean,
+    iconPosition: String,
     innerTabindex: Number,
     innerAriaLabel: String,
     styles: String,
diff --git a/packages/storybook-vue/stories/components/checkbox-group/CheckboxGroup.stories.mdx b/packages/storybook-vue/stories/components/checkbox-group/CheckboxGroup.stories.mdx
index 3633e88920..bce7bcdca3 100644
--- a/packages/storybook-vue/stories/components/checkbox-group/CheckboxGroup.stories.mdx
+++ b/packages/storybook-vue/stories/components/checkbox-group/CheckboxGroup.stories.mdx
@@ -13,6 +13,26 @@ import ScaleCheckboxGroup from './ScaleCheckboxGroup.vue';
   argTypes={{}}
 />
 
+export const Template = (args, { argTypes }) => ({
+  components: { ScaleCheckboxGroup },
+  props: ScaleCheckboxGroup.props,
+  template: `
+    <scale-checkbox-group
+      :name="name"
+      :label="label"
+      :helper-text="helperText"
+      :aria-label-checkbox-group="ariaLabelCheckboxGroup"
+      :invalid="invalid"
+      :select-text="selectText"
+      :unselect-text="unselectText"
+      :value="value"
+      :input-id="inputId"
+      :styles="styles"
+      :status="status"
+    ></scale-checkbox-group>
+  `,
+});
+
 <div
   style={{
     display: 'inline-flex',
@@ -28,7 +48,9 @@ import ScaleCheckboxGroup from './ScaleCheckboxGroup.vue';
 ## Standard
 
 <Canvas withSource="none">
-  <Story name="Standard" args={{}}>
+  <Story 
+    name="Standard" 
+    args={{}}>
     {() => ({
       template: `
         <scale-checkbox-group label="Group Label" name="group" value="">
diff --git a/packages/storybook-vue/stories/components/checkbox-group/ScaleCheckboxGroup.vue b/packages/storybook-vue/stories/components/checkbox-group/ScaleCheckboxGroup.vue
index 443e9c3fd0..d0414a6d17 100644
--- a/packages/storybook-vue/stories/components/checkbox-group/ScaleCheckboxGroup.vue
+++ b/packages/storybook-vue/stories/components/checkbox-group/ScaleCheckboxGroup.vue
@@ -1,8 +1,18 @@
 <template>
-  <div>
-    <!-- this has the slots show up in ArgsTable -->
+  <scale-checkbox-group>
+    :name="name"
+    :label="label"
+    :helper-text="helperText"
+    :aria-label-checkbox-group="ariaLabelCheckboxGroup"
+    :invalid="invalid"
+    :select-text="selectText"
+    :unselect-text="unselectText"
+    :value="value"
+    :input-id="inputId"
+    :styles="styles"
+    :status="status"
     <slot></slot>
-  </div>
+  </scale-checkbox-group>
 </template>
 
 <script>
@@ -11,14 +21,14 @@ export default {
     name: { type: String },
     label: { type: String, default: '' },
     helperText: { type: String },
-    ariaLabelCheckboxGroup: { type: String },
+    ariaLabelCheckboxGroup: { type: String, default: 'COMMENT: ariaLabelCheckboxGroup should replace ariaLabel' },
     invalid: { type: Boolean },
     selectText: { type: String, default: 'Select all' },
     unselectText: { type: String, default: 'Unselect all' },
     value: { type: String, default: '' },
     inputId: { type: String },
     styles: { type: String },
+    status: { type: String, default: 'COMMENT: DEPRECATED - invalid should replace status'}
   },
 };
 </script>
-‚
diff --git a/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx b/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx
index 61b9b7c4fc..1ae99acf90 100644
--- a/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx
+++ b/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx
@@ -8,7 +8,15 @@ import {
 import ScaleCheckbox from './ScaleCheckbox.vue';
 import { action } from '@storybook/addon-actions';
 
-<Meta title="Components/Checkbox" component={ScaleCheckbox} argTypes={{}} />
+<Meta 
+  title="Components/Checkbox" 
+  component={ScaleCheckbox} 
+  argTypes={{
+    status: {
+      description: 'DEPRECATED - invalid should replace status'
+    }
+  }} 
+/>
 
 export const Template = (args, { argTypes }) => ({
   props: {
@@ -27,6 +35,9 @@ export const Template = (args, { argTypes }) => ({
       :value="value"
       :input-id="inputId"
       :required="required"
+      :hide-label="hideLabel"
+      :status="status"
+      :styles="styles"
       @scaleChange="action('scaleChange')($event)"
       @scale-change="action('scale-change')($event)"
     ></scale-checkbox>
@@ -68,9 +79,8 @@ 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);
@@ -255,4 +265,4 @@ scale-checkbox {
     ></scale-icon-alert-imprint-dataprivacy>
   </span>
 </scale-checkbox>
-```
+```
\ No newline at end of file
diff --git a/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue b/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue
index 99353851b7..321754de6f 100644
--- a/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue
+++ b/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue
@@ -11,6 +11,9 @@
     :input-id="inputId"
     :required="required"
     :aria-label-checkbox="ariaLabelCheckbox"
+    :hide-label="hideLabel"
+    :status="status"
+    :styles="styles"
     @scaleChange="scaleChange"
   >
   </scale-checkbox>
@@ -33,6 +36,9 @@ export default {
     required: { type: Boolean },
     ariaLabelCheckbox: { type: String },
     ariaDetailsId: { type: String },
+    hideLabel: { type: Boolean},
+    status: { type: String },
+    styles: { type: String },
   },
   methods: {
     scaleChange($event) {
diff --git a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx
index 2b36cfcb87..00a778eae9 100644
--- a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx
+++ b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx
@@ -27,6 +27,9 @@ import { action } from '@storybook/addon-actions';
     disabled: {
       description: `only valid for persistent type`,
     },
+    ariaCheckedState :{
+      description: ' DEPRECATED - (optional) chip aria-checked - should be derived from selected state attribute'
+    }
   }}
 />
 
diff --git a/packages/storybook-vue/stories/components/chip/ScaleChip.vue b/packages/storybook-vue/stories/components/chip/ScaleChip.vue
index e6cb20023c..2d33388e56 100644
--- a/packages/storybook-vue/stories/components/chip/ScaleChip.vue
+++ b/packages/storybook-vue/stories/components/chip/ScaleChip.vue
@@ -7,6 +7,8 @@
     :aria-role-title="ariaRoleTitle"
     :disabled="disabled"
     :styles="styles"
+    :label="label"
+    :dismiss-text="dismissText"
     @scaleChange="scaleChange"
     @scaleClose="scaleClose"
   >
@@ -26,6 +28,8 @@ export default {
     styles: { type: 'switch' | 'radio' | 'option' | 'menuitemreadio' | 'menuitemcheckbox' | 'checkbox', default: 'switch'},
     ariaRoleTitle: { type: String },
     ariaCheckedState: { type: Boolean },
+    label: { type: String }, 
+    dismissText: { type: String },
   },
   methods: {
     scaleChange($event) {
diff --git a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
index db35d26a9d..1f08f59b10 100644
--- a/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
+++ b/packages/storybook-vue/stories/components/data-grid/DataGrid.stories.mdx
@@ -27,6 +27,14 @@ import ScaleDataGrid from './ScaleDataGrid.vue';
       description: `(optional) Freeze header row from scrolling`,
       control: { type: null },
     },
+    visible: {
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+      description: `(optional) Set to false to hide table, used for nested tables to re-render upon toggle`,
+      control: { type: null },
+    },
     heading: {
       table: {
         type: { summary: 'string' },
diff --git a/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx b/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx
index 4ae56bf53e..e57c3163b7 100644
--- a/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx
+++ b/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx
@@ -19,6 +19,12 @@ import { action } from '@storybook/addon-actions';
       description: `(optional) DEPRECATED - css overwrite should replace size`,
       control: { type: null },
     },
+    popupTitle: {
+      description: 'DEPRECATED - in v3 in favor of localization.calendarHeading'
+    },
+    status: {
+      description: 'DEPRECATED - invalid should replace status'
+    },
   }}
 />
 
@@ -45,6 +51,9 @@ export const Template = (args, { argTypes }) => ({
             :helper-text="helperText"
             :invalid="invalid"
             :placeholder="placeholder"
+            :inner-role="innerRole"
+            :status="status"
+            :variant="variant"
             @scaleChange="scaleChange"
             @scale-change="scale-change"
             @scaleFocus="scaleFocus"
diff --git a/packages/storybook-vue/stories/components/date-picker/ScaleDatePicker.vue b/packages/storybook-vue/stories/components/date-picker/ScaleDatePicker.vue
index 087eaeda1c..145c8e04f9 100644
--- a/packages/storybook-vue/stories/components/date-picker/ScaleDatePicker.vue
+++ b/packages/storybook-vue/stories/components/date-picker/ScaleDatePicker.vue
@@ -19,6 +19,9 @@
     :popup-title="popupTitle"
     :placeholder="placeholder"
     :styles="styles"
+    :inner-role="innerRole"
+    :status="status"
+    :variant="variant"
     @scaleChange="scaleChange"
     @scaleFocus="scaleFocus"
     @scaleBlur="scaleBlur"
@@ -51,6 +54,9 @@ export default {
     placeholder: { type: String },
     size: { type: String },
     ariaDetailsId: { type: String },
+    innerRole: { type: String },
+    status: { type: String },
+    variant: { type: 'informational' | 'warning' | 'danger' | 'success' | 'informational'},
   },
   methods: {
     scaleChange($event) {
diff --git a/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx b/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx
index ee7c61bec7..57b6626d1d 100644
--- a/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx
+++ b/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx
@@ -38,6 +38,10 @@ export const Template = (args, { argTypes }) => ({
         :combobox-id="comboboxId"
         :hide-label-visually="hideLabelVisually"
         :floating-strategy="floatingStrategy"
+        :read-only="readOnly"
+        :transparent="transparent"
+        :aria-label-selected="ariaLabelSelected"
+        :hcm-label-disabled="hcmLabelDisabled"
         @scaleChange="['scale-change']"
         @scaleFocus="['scale-focus']"
         @scaleBlur="['scale-blur']"
diff --git a/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue b/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue
index 9b63c21bb4..2d3b4d42cb 100644
--- a/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue
+++ b/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue
@@ -10,6 +10,10 @@
     :combobox-id="comboboxId"
     :hide-label-visually="hideLabelVisually"
     :floating-strategy="floatingStrategy"
+    :read-only="readOnly"
+    :transparent="transparent"
+    :aria-label-selected="ariaLabelSelected"
+    :hcm-label-disabled="hcmLabelDisabled"
     @scaleChange="['scale-change']"
     @scaleFocus="['scale-focus']"
     @scaleBlur="['scale-blur']"
@@ -36,6 +40,10 @@ export default {
     hideLabelVisually: { type: Boolean, default: false },
     floatingStrategy: { type: String },
     ariaDetailsId: { type: String },
+    readOnly: { type: Boolean }, 
+    transparent: { type: Boolean }, 
+    ariaLabelSelected: { type: String },
+    hcmLabelDisabled: { type: String },
   },
   methods: {
     'scale-change'($event) {
diff --git a/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx b/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx
index 39fee2f627..d7f6736029 100644
--- a/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx
+++ b/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx
@@ -274,9 +274,6 @@ 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>
 ```
diff --git a/packages/storybook-vue/stories/components/flyout-menu/MenuFlyout.stories.mdx b/packages/storybook-vue/stories/components/flyout-menu/MenuFlyout.stories.mdx
index aa21675fc8..94efb9b418 100644
--- a/packages/storybook-vue/stories/components/flyout-menu/MenuFlyout.stories.mdx
+++ b/packages/storybook-vue/stories/components/flyout-menu/MenuFlyout.stories.mdx
@@ -28,6 +28,13 @@ import ScaleMenuFlyout from './ScaleMenuFlyout.vue';
       description:
         'Determines whether the dropdown should close when a menu item is selected',
     },
+    triggerHasPopup: {
+      control: {
+        type: 'boolean',
+      },
+      description:
+        'Determines whether the flyout trigger should get the aria-haspopup attribute ',
+    },
   }}
 />
 
diff --git a/packages/storybook-vue/stories/components/flyout-menu/ScaleMenuFlyout.vue b/packages/storybook-vue/stories/components/flyout-menu/ScaleMenuFlyout.vue
index 66e97452eb..261ee72c33 100644
--- a/packages/storybook-vue/stories/components/flyout-menu/ScaleMenuFlyout.vue
+++ b/packages/storybook-vue/stories/components/flyout-menu/ScaleMenuFlyout.vue
@@ -11,6 +11,7 @@
       closeOnSelect: { type: Boolean, default: true },
       direction: { type: String, default: 'bottom-right' },
       styles: { type: String },
+      triggerHasPopup: { type: Boolean, default: true}
     },
     methods: {
       emit() {
diff --git a/packages/storybook-vue/stories/components/icon/Icon.stories.mdx b/packages/storybook-vue/stories/components/icon/Icon.stories.mdx
index 6a091a0081..321d5ae219 100644
--- a/packages/storybook-vue/stories/components/icon/Icon.stories.mdx
+++ b/packages/storybook-vue/stories/components/icon/Icon.stories.mdx
@@ -46,10 +46,7 @@ export const PATH =
       control: {
         type: 'text',
       },
-    },
-    styles: {
-      control: { disable: true },
-    },
+    }
   }}
 />
 
diff --git a/packages/storybook-vue/stories/components/icon/ScaleIcon.vue b/packages/storybook-vue/stories/components/icon/ScaleIcon.vue
index 9514edcbd6..3765b47211 100644
--- a/packages/storybook-vue/stories/components/icon/ScaleIcon.vue
+++ b/packages/storybook-vue/stories/components/icon/ScaleIcon.vue
@@ -39,7 +39,6 @@
       :focusable="focusable"
       :decorative="decorative"
       :accessibility-title="accessibilityTitle"
-      :styles="styles"
     />
   </div>
 </template>
@@ -55,7 +54,6 @@ export default {
     focusable: { type: Boolean, default: false },
     decorative: { type: Boolean, default: false },
     accessibilityTitle: { type: String },
-    styles: { type: String }
   }
 }
 </script>
diff --git a/packages/storybook-vue/stories/components/logo/ScaleLogo.vue b/packages/storybook-vue/stories/components/logo/ScaleLogo.vue
index 04b07c9188..8f9f20331e 100644
--- a/packages/storybook-vue/stories/components/logo/ScaleLogo.vue
+++ b/packages/storybook-vue/stories/components/logo/ScaleLogo.vue
@@ -9,6 +9,7 @@
     :logo-title="logoTitle"
     :logo-hide-title="logoHideTitle"
     :logo-aria-described-by="logoAriaDescribedBy"
+    :logo-aria-hidden="logoAriaHidden"
     :accessibility-title="accessibilityTitle"
     :focusable="focusable"
     :scroll-into-view-on-focus="scrollIntoViewOnFocus"
@@ -42,8 +43,10 @@ export default {
     href: { type: String },
     styles: { type: String },
     logoAriaDescribedBy: { type: String },
+    logoAriaHidden: { type: Boolean },
     logoTitle: { type: String },
     logoHideTitle: { type: Boolean },
+    accessibilityTitle: { type: String },
   },
 };
 </script>
diff --git a/packages/storybook-vue/stories/components/modal/Modal.stories.mdx b/packages/storybook-vue/stories/components/modal/Modal.stories.mdx
index 277ab75439..d465372e96 100644
--- a/packages/storybook-vue/stories/components/modal/Modal.stories.mdx
+++ b/packages/storybook-vue/stories/components/modal/Modal.stories.mdx
@@ -76,7 +76,6 @@ export const Template = (args, context) => ({
       <scale-modal
         :heading="heading"
         :size="size"
-        :variant="size"
         :opened="isOpen"
         :duration="duration"
         :close-button-label="closeButtonLabel"
diff --git a/packages/storybook-vue/stories/components/modal/ScaleModal.vue b/packages/storybook-vue/stories/components/modal/ScaleModal.vue
index cfa4f0da55..4ff4de1962 100644
--- a/packages/storybook-vue/stories/components/modal/ScaleModal.vue
+++ b/packages/storybook-vue/stories/components/modal/ScaleModal.vue
@@ -2,7 +2,6 @@
   <scale-modal
     :heading="heading"
     :size="size"
-    :variant="size"
     :opened="opened"
     :duration="duration"
     :close-button-label="closeButtonLabel"
@@ -30,7 +29,6 @@ export default {
   props: {
     heading: { type: String, default: 'Today is your lucky day' },
     size: String,
-    variant: String,
     opened: Boolean,
     duration: { type: Number, default: 200 },
     closeButtonLabel: String,
diff --git a/packages/storybook-vue/stories/components/notification-badge/NotificationBadge.stories.mdx b/packages/storybook-vue/stories/components/notification-badge/NotificationBadge.stories.mdx
index 927bb7b9a7..7eb4c158e4 100644
--- a/packages/storybook-vue/stories/components/notification-badge/NotificationBadge.stories.mdx
+++ b/packages/storybook-vue/stories/components/notification-badge/NotificationBadge.stories.mdx
@@ -52,6 +52,8 @@ export const TextTemplate = (args, { argTypes }) => ({
     <scale-notification-badge
       :type="type"
       :label="label"
+      :max-characters="maxCharacters"
+      :click-handler="clickHandler"
     ><b>Service</b></scale-notification-badge>
   `,
   methods: {
diff --git a/packages/storybook-vue/stories/components/notification-badge/ScaleNotificationBadge.vue b/packages/storybook-vue/stories/components/notification-badge/ScaleNotificationBadge.vue
index de9c02089e..e5769aded3 100644
--- a/packages/storybook-vue/stories/components/notification-badge/ScaleNotificationBadge.vue
+++ b/packages/storybook-vue/stories/components/notification-badge/ScaleNotificationBadge.vue
@@ -1,5 +1,10 @@
 <template>
-  <scale-notification-badge :label="label" :type="type">
+  <scale-notification-badge 
+    :label="label" 
+    :type="type"
+    :max-characters="maxCharacters"
+    :click-handler="clickHandler"
+    >
     <!-- this has the slots show up in ArgsTable -->
     <slot></slot>
   </scale-notification-badge>
@@ -10,6 +15,8 @@ export default {
   props: {
     label: { type: String },
     type: { type: 'icon' | 'text', default: 'icon' },
+    maxCharacters: { type: Number},
+    clickHandler: { type: Function }
   },
 };
 </script>
diff --git a/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx b/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx
index 26e5d4b641..2b70d3f63b 100644
--- a/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx
+++ b/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx
@@ -15,7 +15,11 @@ import ScaleProgressBar from './ScaleProgressBar.vue';
       sort: 'alpha'
     }
   }}
-  argTypes={{}}
+  argTypes={{
+    customColor :{
+      description: ' DEPRECATED - (optional) Progress bar customColor'
+    }
+  }}
 />
 
 export const Template = (args, { argTypes }) => ({
@@ -34,6 +38,10 @@ export const Template = (args, { argTypes }) => ({
         :percentageStart="percentageStart"
         :percentage="percentage"
         :styles="styles"
+        :busy="busy"
+        :icon="icon"
+        :progress-bar-id="progressBarId"
+        :mute="mute"
       >
       </scale-progress-bar>
   `,
diff --git a/packages/storybook-vue/stories/components/progress-bar/ScaleProgressBar.vue b/packages/storybook-vue/stories/components/progress-bar/ScaleProgressBar.vue
index c733cc91c9..32c6ff61cd 100644
--- a/packages/storybook-vue/stories/components/progress-bar/ScaleProgressBar.vue
+++ b/packages/storybook-vue/stories/components/progress-bar/ScaleProgressBar.vue
@@ -9,6 +9,10 @@
     :percentage="percentage"
     :percentageStart="percentageStart"
     :styles="styles"
+    :busy="busy"
+    :icon="icon"
+    :progress-bar-id="progressBarId"
+    :mute="mute"
   >
   </scale-progress-bar>
 </template>
@@ -24,7 +28,11 @@ export default {
     styles: String,
     showStatus: Boolean,
     percentage: Number,
-    percentageStart: {type: Number, default: 0} 
+    percentageStart: {type: Number, default: 0},
+    busy: Boolean,
+    icon: String,
+    progressBarId: String,
+    mute: Boolean,
   },
 };
 </script>
diff --git a/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx b/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx
index 3cc4a0ac29..d1592d87c4 100644
--- a/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx
+++ b/packages/storybook-vue/stories/components/radio-button-group/RadioButtonGroup.stories.mdx
@@ -13,7 +13,11 @@ import { action } from '@storybook/addon-actions';
   title="Components/Radio Button Group"
   component={ScaleRadioButtonGroup}
   subcomponents={{ 'Radio Button': ScaleRadioButton }}
-  argTypes={{}}
+  argTypes={{
+    status: {
+      description: 'DEPRECATED - invalid should replace status'
+    }
+  }}
 />
 
 export const Template = (args, context) => ({
@@ -39,6 +43,7 @@ export const Template = (args, context) => ({
       :label="label"
       :invalid="invalid"
       :helper-text="helperText"
+      :status="status"
       @scale-change="emitChange"
     >
       <scale-radio-button
@@ -52,6 +57,7 @@ export const Template = (args, context) => ({
         :invalid="itemProps[index]?.invalid"
         :helper-text="itemProps[index]?.helperText"
         :disabled="itemProps[index]?.disabled"
+        :status="status"
       ></scale-radio-button>
     </scale-radio-button-group>
   `,
@@ -327,7 +333,7 @@ scale-radio-button {
         0: {
           disabled: true,
         },
-      },
+      }
     }}
   >
     {Template.bind({})}
diff --git a/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButton.vue b/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButton.vue
index 9404f7ed18..2ca5af1ae8 100644
--- a/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButton.vue
+++ b/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButton.vue
@@ -12,6 +12,7 @@ export default {
     inputId: { type: String },
     styles: { type: String },
     ariaDetailsId: { type: String },
+    status: { type: String , default: 'COMMENT: DEPRECATED - invalid should replace status'}
   },
   methods: {
     fireEvents() {
diff --git a/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButtonGroup.vue b/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButtonGroup.vue
index 5b798e9680..e6a2f3d83c 100644
--- a/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButtonGroup.vue
+++ b/packages/storybook-vue/stories/components/radio-button-group/ScaleRadioButtonGroup.vue
@@ -5,6 +5,7 @@ export default {
     helperText: { type: String },
     label: { type: String },
     invalid: { type: Boolean },
+    status: { type: String }, 
   },
   render() {
     return this.$slots.default;
diff --git a/packages/storybook-vue/stories/components/rating-stars/RatingStars.stories.mdx b/packages/storybook-vue/stories/components/rating-stars/RatingStars.stories.mdx
index a877b5aff5..aec2d77bc8 100644
--- a/packages/storybook-vue/stories/components/rating-stars/RatingStars.stories.mdx
+++ b/packages/storybook-vue/stories/components/rating-stars/RatingStars.stories.mdx
@@ -10,7 +10,7 @@ import ScaleRatingStars from './ScaleRatingStars.vue';
         type: { summary: 'string' },
         defaultValue: { summary: 'large' },
       },
-      description: `(optional) Deprecated; size should be used instead of starSize`,
+      description: `(optional) DEPRECATED; size should be used instead of starSize`,
       control: { type: 'select', options: ['large', 'small'] },
     },
     size: {
@@ -20,7 +20,7 @@ import ScaleRatingStars from './ScaleRatingStars.vue';
           summary: 'large',
         },
       },
-      description: `(optional) size of the stars. Overwritten by deprecated starSize`,
+      description: `(optional) size of the stars. Overwritten by DEPRECATED starSize`,
       control: { type: 'select', options: ['large', 'small'] },
     },
     minRating: {
@@ -30,7 +30,7 @@ import ScaleRatingStars from './ScaleRatingStars.vue';
           summary: 0,
         },
       },
-      description: `(optional) Deprecated; minimum rating value. Will be dropped on next release`,
+      description: `(optional) DEPRECATED; minimum rating value. Will be dropped on next release`,
       control: { type: 'number' },
     },
     maxRating: {
@@ -40,7 +40,7 @@ import ScaleRatingStars from './ScaleRatingStars.vue';
           summary: 5,
         },
       },
-      description: `(optional) Deprecated; max should be used instead of maxRating`,
+      description: `(optional) DEPRECATED; max should be used instead of maxRating`,
       control: { type: 'number' },
     },
     max: {
@@ -50,7 +50,7 @@ import ScaleRatingStars from './ScaleRatingStars.vue';
           summary: 5,
         },
       },
-      description: `(optional) The upper limit of the rating. Overwritten by deprecated maxRating`,
+      description: `(optional) The upper limit of the rating. Overwritten by DEPRECATED maxRating`,
       control: { type: 'number' },
     },
     rating: {
diff --git a/packages/storybook-vue/stories/components/segmented-button/ScaleSegmentedButton.vue b/packages/storybook-vue/stories/components/segmented-button/ScaleSegmentedButton.vue
index a0e3c4aa54..9bec51ac10 100644
--- a/packages/storybook-vue/stories/components/segmented-button/ScaleSegmentedButton.vue
+++ b/packages/storybook-vue/stories/components/segmented-button/ScaleSegmentedButton.vue
@@ -8,6 +8,9 @@
     :helper-text="helperText"
     :full-width="fullWidth"
     :styles="styles"
+    :selected-index="selectedIndex"
+    :aria-label-translation="ariaLabelTranslation"
+    :longest-button-width="longestButtonWidth"
     @scaleChange="scaleChange"
   >
     <slot></slot>
@@ -26,6 +29,9 @@ export default {
     helperText: { type: String },
     fullWidth: { type: Boolean, default: false },
     styles: { type: String },
+    selectedIndex: { type: Number },
+    ariaLabelTranslation: { type: `segment button with $slottedSegments` },
+    longestButtonWidth: { type: String },
   },
   methods: {
     scaleChange($event) {
diff --git a/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx b/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx
index 6e52838578..7b4c05f6ef 100644
--- a/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx
+++ b/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx
@@ -28,6 +28,9 @@ export const Template = (args, { argTypes }) => ({
       :helper-text="helperText"
       :full-width="fullWidth"
       :label="label"
+      :selected-index="selectedIndex"
+      :aria-label-translation="ariaLabelTranslation"
+      :longest-button-width="longestButtonWidth"
     >
       <scale-segment selected>Apple</scale-segment>
       <scale-segment>One+</scale-segment>
diff --git a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx b/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx
index 56b197d87a..5220124232 100644
--- a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx
+++ b/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx
@@ -32,11 +32,12 @@ export const Template = (args, { argTypes }) => ({
   template: `
     <div :style="wrapperStyles">
       <scale-sidebar-nav
-        :arial-label="ariaLabel"
+        :arial-label-sidebar-nav="ariaLabelSiderbarNav"
         :collapsible="collapsible"
         :collapsible-label="collapsibleLabel"
         :collapsible-media-query="collapsibleMediaQuery"
         :styles="styles"
+        :collapsed="collapsed"
       >
         <scale-sidebar-nav-item>
           <a href="#">Overview</a>
diff --git a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue b/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue
index bb1cd6f039..f00fbfea6e 100644
--- a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue
+++ b/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue
@@ -2,11 +2,12 @@
 export default {
   name: 'scale-sidebar-nav',
   props: {
-    ariaLabel: { type: String },
+    ariaLabelSiderbarNav: { type: String },
     collapsible: { type: Boolean, default: false },
     collapsibleMediaQuery: { type: String },
     collapsibleLabel: { type: String, default: 'Menu' },
-    styles: { type: String }
+    styles: { type: String },
+    collapsed: { type : Boolean }
   }
 }
 </script>
diff --git a/packages/storybook-vue/stories/components/slider/ScaleSlider.vue b/packages/storybook-vue/stories/components/slider/ScaleSlider.vue
index 27052bc48f..e8259ba293 100644
--- a/packages/storybook-vue/stories/components/slider/ScaleSlider.vue
+++ b/packages/storybook-vue/stories/components/slider/ScaleSlider.vue
@@ -20,6 +20,10 @@ export default {
     helperText: String,
     platform: { type: 'ios' | 'android' },
     styles: { type: String },
+    customColor: { type: String },
+    trackSmall: { type: Boolean },
+    thumbLarge: { type: Boolean },
+    innerAriaValueText: { type: '$from to $to'}
   },
   render() {
     return this.$slots.default;
diff --git a/packages/storybook-vue/stories/components/slider/Slider.stories.mdx b/packages/storybook-vue/stories/components/slider/Slider.stories.mdx
index fc3a3dbc2e..6cef44d448 100644
--- a/packages/storybook-vue/stories/components/slider/Slider.stories.mdx
+++ b/packages/storybook-vue/stories/components/slider/Slider.stories.mdx
@@ -18,6 +18,15 @@ import { action } from '@storybook/addon-actions';
     styles: {
       control: { disable: true },
     },
+    customColor :{
+      description: ' DEPRECATED - (optional) slider custom color',
+    },
+    trackSmall :{
+      description: ' DEPRECATED - (optional) smaller track',
+    },
+    thumbLarge :{
+      description: ' DEPRECATED - (optional) larger thumb ',
+    }
   }}
 />
 
@@ -45,6 +54,10 @@ export const Template = (args, { argTypes }) => ({
       :slider-id="sliderId"
       :helper-text="helperText"
       :platform="platform"
+      :custom-color="customColor"
+      :track-small="trackSmall"
+      :thumb-large="thumbLarge"
+      :inner-aria-value-text="innerAriaValueText"
       @scale-change="handleScaleChange"
       @scale-input="handleScaleInput"
       >
diff --git a/packages/storybook-vue/stories/components/switch/ScaleSwitch.vue b/packages/storybook-vue/stories/components/switch/ScaleSwitch.vue
index 1a0661a71f..29fe6e412e 100644
--- a/packages/storybook-vue/stories/components/switch/ScaleSwitch.vue
+++ b/packages/storybook-vue/stories/components/switch/ScaleSwitch.vue
@@ -6,6 +6,7 @@
     :input-id="inputId"
     :checked="checked"
     :size="size"
+    :styles="styles"
     @scaleChange="scaleChange"
     style="--color-on: blue"
   >
@@ -23,6 +24,7 @@ export default {
     label: String,
     size: String,
     name: String,
+    styles: String,
   },
   methods: {
     scaleChange($event) {
diff --git a/packages/storybook-vue/stories/components/switch/switch.stories.mdx b/packages/storybook-vue/stories/components/switch/switch.stories.mdx
index 1e5bebfefa..44998e3317 100644
--- a/packages/storybook-vue/stories/components/switch/switch.stories.mdx
+++ b/packages/storybook-vue/stories/components/switch/switch.stories.mdx
@@ -21,6 +21,7 @@ export const Template = (args, { argTypes }) => ({
       :label="label"
       :size="size"
       :name="name"
+      :styles="styles"
       @scaleChange="scaleChange"
     >
     </scale-switch>
diff --git a/packages/storybook-vue/stories/components/tab-navigation/ScaleTabNav.vue b/packages/storybook-vue/stories/components/tab-navigation/ScaleTabNav.vue
index 5313d2d49c..c05dce65bf 100644
--- a/packages/storybook-vue/stories/components/tab-navigation/ScaleTabNav.vue
+++ b/packages/storybook-vue/stories/components/tab-navigation/ScaleTabNav.vue
@@ -54,11 +54,8 @@
 export default {
   props: {
     styles: { type: String },
-    disabled: { type: Boolean, default: false },
-    preselected: { type: Boolean, default: false },
-    withIcon: { type: Boolean, default: true },
-    size: { type: String, default: 'small' },
-    small: { type: Boolean, default: false },
+    small: { type: Boolean, default: false},
+    size: { type: 'small' | 'large' , default: 'small' },
   },
 };
 </script>
diff --git a/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx b/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx
index bc5660a73f..94c6885221 100644
--- a/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx
+++ b/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx
@@ -12,7 +12,7 @@ import TabPanel from './TabPanel.vue';
 <Meta
   title="Components/Tab Navigation"
   component={ScaleTabNav}
-  subcomponents={{ 'Scale Tab Header': TabHeader, 'Scale Tab Panel': TabPanel }}
+  subcomponents={{ 'Scale Tab Panel': TabPanel }}
   argTypes={{
     styles: {
       table: {
@@ -22,10 +22,6 @@ import TabPanel from './TabPanel.vue';
       control: { type: null },
     },
     size: {
-      table: {
-        type: { summary: 'string' },
-      },
-      description: `(optional) size`,
       control: { type: 'select', options: ['large', 'small'] },
     },
     small: {
@@ -35,13 +31,6 @@ import TabPanel from './TabPanel.vue';
       description: `(optional) DEPRECATED - size should replace small`,
       control: { type: null },
     },
-    preselected: {
-      table: {
-        disable: true,
-      },
-      description: '',
-      control: { type: null },
-    },
   }}
 />
 
diff --git a/packages/storybook-vue/stories/components/tab-navigation/TabPanel.vue b/packages/storybook-vue/stories/components/tab-navigation/TabPanel.vue
index 6f2be1d972..700b8ce1fa 100644
--- a/packages/storybook-vue/stories/components/tab-navigation/TabPanel.vue
+++ b/packages/storybook-vue/stories/components/tab-navigation/TabPanel.vue
@@ -3,15 +3,9 @@
     name: 'Tab Panel',
     props: {
         styles: { type: String },
-        tabbable: { type: Boolean, default: 'true',
-          argTypes:{
-            table: {
-              type: { summary: 'string' },
-            },
-            description: `(optional) Injected styles`,
-            control: { type: null },
-          },
-        },
-      }
+        tabbablePanel: { type: Boolean, default: 'true'},
+        size: { type: 'small' | 'large' , default: 'COMMENT: DEPRECATED - no more size difference ' },
+        small: { type: Boolean , default: 'COMMENT: DEPRECATED - no more size difference ' },
+    }
   };
 </script>
diff --git a/packages/storybook-vue/stories/components/table/ScaleTable.vue b/packages/storybook-vue/stories/components/table/ScaleTable.vue
index 1a162d79f4..2d5b20bd34 100644
--- a/packages/storybook-vue/stories/components/table/ScaleTable.vue
+++ b/packages/storybook-vue/stories/components/table/ScaleTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <scale-table :show-sort="showSort" :size="size" :striped="striped ? true : false">
+  <scale-table :show-sort="showSort" :styles="styles" :size="size" :striped="striped ? true : false">
     <slot></slot>
   </scale-table>
 </template>
@@ -9,7 +9,8 @@ export default {
   props: {
     showSort: Boolean,
     size: String,
-    striped: Boolean
+    striped: Boolean,
+    styles: String,
   },
 };
 </script>
diff --git a/packages/storybook-vue/stories/components/table/Table.stories.mdx b/packages/storybook-vue/stories/components/table/Table.stories.mdx
index dc72ef02e6..eec1b48af7 100644
--- a/packages/storybook-vue/stories/components/table/Table.stories.mdx
+++ b/packages/storybook-vue/stories/components/table/Table.stories.mdx
@@ -17,7 +17,7 @@ export const ICON =
       table: {
         type: 'select',
       },
-      description: `(optional) DEPRECATED - size should replace small`,
+      description: `(optional) DEPRECATED - css overwrite should replace size`,
       control: { type: null },
     },
   }}
diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx
index 53d025a5d5..6165b77c07 100644
--- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx
+++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx
@@ -108,6 +108,7 @@ export const TemplateProfileMenu = (args, { argTypes }) => ({
               :login-settings-url="loginSettingsUrl"
               :hide-login-settings="hideLoginSettings"
               :logout-url="logoutUrl"
+              :type="type"
             ></telekom-profile-menu>
           </scale-telekom-nav-list>
         </scale-telekom-header>
diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeader.vue b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeader.vue
index cfc737b6bc..786d1cefb5 100644
--- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeader.vue
+++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeader.vue
@@ -10,6 +10,7 @@
     :meta-nav-external-aria-label="metaNavExternalAriaLabel"
     :lang-switcher-aria-label="langSwitcherAriaLabel"
     :main-nav-aria-label="mainNavAriaLabel"      
+    :type="type"
   >
     <slot name="logo"></slot>
     <slot name="meta-nav-external"></slot>
@@ -32,7 +33,8 @@ export default {
     metaNavAriaLabel: String,
     metaNavExternalAriaLabel: String,
     langSwitcherAriaLabel: String,
-    mainNavAriaLabel: String,    
+    mainNavAriaLabel: String,   
+    type: String, 
   },
 };
 </script>
diff --git a/packages/storybook-vue/stories/components/telekom-footer/Footer.vue b/packages/storybook-vue/stories/components/telekom-footer/Footer.vue
index 216b1289a7..1b3b8b2d19 100644
--- a/packages/storybook-vue/stories/components/telekom-footer/Footer.vue
+++ b/packages/storybook-vue/stories/components/telekom-footer/Footer.vue
@@ -41,7 +41,7 @@
   <script>
   export default {
     props: {
-        type: { type: String, default: 'standard'}
+        type: { type: 'standard' | 'minimal' , default: 'standard'}
     }
   };
   </script>
diff --git a/packages/storybook-vue/stories/components/text-area/ScaleTextArea.vue b/packages/storybook-vue/stories/components/text-area/ScaleTextArea.vue
index ac9931bec1..c50f283527 100644
--- a/packages/storybook-vue/stories/components/text-area/ScaleTextArea.vue
+++ b/packages/storybook-vue/stories/components/text-area/ScaleTextArea.vue
@@ -18,6 +18,7 @@
     :input-id="inputId"
     :transparent="transparent"
     :input-autofocus="inputAutofocus"
+    :status="status"    :variant="variant"
     @scaleInput="scaleInput"
     @scaleChange="scaleChange"
     @scaleFocus="scaleFocus"
@@ -53,6 +54,8 @@ export default {
     inputAutofocus: { type: Boolean },
     styles: { type: String },
     ariaDetailsId: { type: String },
+    status: { type: String },
+    variant: { type: 'informational' | 'warning' | 'danger' | 'success', default: 'informational'},
   },
   methods: {
     scaleInput($event) {
diff --git a/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx b/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx
index a815809d15..c2eb9b062a 100644
--- a/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx
+++ b/packages/storybook-vue/stories/components/text-area/TextArea.stories.mdx
@@ -38,6 +38,8 @@ export const Template = (args, { argTypes }) => ({
       :input-id="inputId"
       :transparent="transparent"
       :input-autofocus="inputAutofocus"
+      :status="status"
+      :variant="variant"
       @scaleChange="scaleChange"
       @scaleFocus="scaleFocus"
       @scaleBlur="scaleBlur"
diff --git a/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue b/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue
index 740f57ff13..f5c5526cd7 100644
--- a/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue
+++ b/packages/storybook-vue/stories/components/text-field/ScaleTextField.vue
@@ -24,6 +24,10 @@
     :input-autocomplete="inputAutocomplete"
     :experimental-controlled="experimentalControlled"
     :hide-label-visually="hideLabelVisually"
+    :status="status"
+    :transparent="transparent"
+    :step="step"
+    :list="list"
     @scaleInput="scaleInput"
     @scaleChange="scaleChange"
     @scaleFocus="scaleFocus"
@@ -64,6 +68,10 @@ export default {
     experimentalControlled: { type: Boolean },
     hideLabelVisually: { type: Boolean, default: false },
     styles: { type: String },
+    status: { type: String },
+    transparent: { type: Boolean },
+    step: { type: String, default: '1' },
+    list: { type: String },
   },
   methods: {
     scaleInput($event) {
diff --git a/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx b/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx
index 1a2f740c47..a462f2c378 100644
--- a/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx
+++ b/packages/storybook-vue/stories/components/text-field/TextField.stories.mdx
@@ -67,6 +67,9 @@ export const ICON =
       description: `(optional) Id of the element with additional information, will be used as aria-details. In case helperText is not provided, will be used as aria-describedBy`,
       control: { type: null },
     },
+    status: {
+      description: 'DEPRECATED - invalid should replace status '
+    }
   }}
 />
 
diff --git a/packages/storybook-vue/stories/components/tooltip/ScaleTooltip.vue b/packages/storybook-vue/stories/components/tooltip/ScaleTooltip.vue
index 38182953db..a4e58ba387 100644
--- a/packages/storybook-vue/stories/components/tooltip/ScaleTooltip.vue
+++ b/packages/storybook-vue/stories/components/tooltip/ScaleTooltip.vue
@@ -8,6 +8,8 @@
       :opened="opened"
       :trigger="trigger"
       :flip="flip"
+      :arrow-offset="arrowOffset"
+      :arrow-padding="arrowPadding"
     >
       <slot name="content"></slot>
       <scale-button :disabled="disabled">Hover me</scale-button>
@@ -25,6 +27,8 @@ export default {
     opened: { type: Boolean },
     trigger: { type: String },
     flip: { type: Boolean },
+    arrowOffset: { type: Number },
+    arrowPadding: { type: Number },
     styles: String,
   },
   methods: {
diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md
index ec71e1bc7c..5d7dbdffdc 100644
--- a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md
+++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md
@@ -117,7 +117,7 @@ Du kannst ganz einfach die gleichen Ergebnisse erzielen:
 ```html
 <scale-text-field
   :value="example"
-  @scale-change="example = $event.target.value"
+  @scaleChange="example = $event.target.value"
 ></scale-text-field>
 ```
 

From 519e7e18ea465d0af48c941c3f0ee29061e1fa4f Mon Sep 17 00:00:00 2001
From: Gammel <max.gammel@telekom.de>
Date: Thu, 21 Nov 2024 15:05:27 +0100
Subject: [PATCH 2/3] feat(storybook-vue): added types to logged out and logged
 in in telekom brand header component

---
 .../TelekomBrandHeader.stories.mdx                            | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx
index 6165b77c07..38f17866e4 100644
--- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx
+++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx
@@ -340,6 +340,7 @@ Set the profile menu's `logged-in` property to `true` or `false` to switch betwe
       loginHelpLabel: "Help logging in",
       registerHeadline: "Need an account?",
       registerLabel: "Register now",
+      type: "standard",
       userInfo: JSON.stringify({
         name: 'Firstname Lastname',
         email: 'example@example.com',
@@ -433,7 +434,8 @@ Set the profile menu's `logged-in` property to `true` or `false` to switch betwe
       accessibilityLabel: "open user menu: Alexander",
       closeMenuAccessibilityLabel: "close menu",
       loginSettingsLabel: "Login Settings",
-      logoutLabel: "Log out",
+      logoutLabel: "Log out",   
+      type: "standard",
       userInfo: JSON.stringify({
         name: 'Alexander Dreyer',
         email: 'alexander.dreyer@t-online.de',

From c7d08562bf87bf087c572e11778b089fe0805540 Mon Sep 17 00:00:00 2001
From: Gammel <max.gammel@telekom.de>
Date: Thu, 28 Nov 2024 12:44:56 +0100
Subject: [PATCH 3/3] docs(storybook-vue): refactors props for multiple
 component documentation in storybook

---
 .../DropdownSelect.stories.mdx                | 18 +++++-
 .../dropdown-select/ScaleDropdownSelect.vue   |  2 +-
 .../stories/components/icon/ScaleIcon.vue     |  2 +
 .../SegmentedButton.stories.mdx               |  3 +
 .../sidebar-navigation/SidebarNav.stories.mdx |  6 +-
 .../sidebar-navigation/SidebarNav.vue         | 14 +++-
 .../components/slider/Slider.stories.mdx      | 64 +++++++++++++++++--
 .../tab-navigation/TabNav.stories.mdx         |  9 ++-
 8 files changed, 107 insertions(+), 11 deletions(-)

diff --git a/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx b/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx
index 57b6626d1d..a6e51fd31f 100644
--- a/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx
+++ b/packages/storybook-vue/stories/components/dropdown-select/DropdownSelect.stories.mdx
@@ -7,7 +7,23 @@ import { action } from '@storybook/addon-actions';
   title="Components/Dropdown Select"
   component={ScaleDropdownSelect}
   subcomponents={{ 'Dropdown Select Item': ScaleDropdownSelectItem }}
-  argTypes={{}}
+  argTypes={{
+    hideLabelVisually: {
+      description: "(optional) to hide the label."
+    },
+    ariaLabelSelected: {
+      description: "(optional) Screen reader text appended to the selected element."
+    },
+    hcmLabelDisabled: {
+      description: "(optional) Text displayed in high contrast mode only to indicate disabled state."
+    },
+    ariaDetailsId: {
+      description: "(optional) id or space separated list of ids of elements that provide or link to additional related information."
+    },
+    value: {
+      description: "see https://floating-ui.com/docs/computePosition#strategy "
+    },
+  }}
 />
 
 export const Template = (args, { argTypes }) => ({
diff --git a/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue b/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue
index 2d3b4d42cb..7de29d3a45 100644
--- a/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue
+++ b/packages/storybook-vue/stories/components/dropdown-select/ScaleDropdownSelect.vue
@@ -34,7 +34,7 @@ export default {
     invalid: { type: Boolean },
     disabled: { type: Boolean },
     size: { type: String },
-    value: { type: String },
+    value: { type: 'absolute' | 'fixed' , default: 'absolute' },
     variant: { type: String },
     comboboxId: { type: String },
     hideLabelVisually: { type: Boolean, default: false },
diff --git a/packages/storybook-vue/stories/components/icon/ScaleIcon.vue b/packages/storybook-vue/stories/components/icon/ScaleIcon.vue
index 3765b47211..9514edcbd6 100644
--- a/packages/storybook-vue/stories/components/icon/ScaleIcon.vue
+++ b/packages/storybook-vue/stories/components/icon/ScaleIcon.vue
@@ -39,6 +39,7 @@
       :focusable="focusable"
       :decorative="decorative"
       :accessibility-title="accessibilityTitle"
+      :styles="styles"
     />
   </div>
 </template>
@@ -54,6 +55,7 @@ export default {
     focusable: { type: Boolean, default: false },
     decorative: { type: Boolean, default: false },
     accessibilityTitle: { type: String },
+    styles: { type: String }
   }
 }
 </script>
diff --git a/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx b/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx
index 7b4c05f6ef..bab8609050 100644
--- a/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx
+++ b/packages/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx
@@ -8,6 +8,9 @@ import ScaleSegmentedButton from './ScaleSegmentedButton.vue';
     size: {
       control: { type: 'select', options: ['small', 'medium', 'large'] },
     },
+    ariaLabelTranslation: {
+      description: "(optional) aria-label attribute needed for icon-only buttons"
+    }
   }}
 />
 
diff --git a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx b/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx
index 5220124232..44ee9e3703 100644
--- a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx
+++ b/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.stories.mdx
@@ -11,9 +11,9 @@ import ScaleSidebarNavItem from './SidebarNavItem.vue';
     'scale-sidebar-nav-item': ScaleSidebarNavItem,
   }}
   argTypes={{
-    styles: {
-      control: { disable: true },
-    },
+    collapsible: { description: "Set to `true` to make the sidebar toggleable (useful for small screens)"},
+    collapsibleMediaQuery: { description: "Automatically set `collapsible` based on this media query"},
+    collapsibleLabel: { description: "Label for toggle button"},
   }}
 />
 
diff --git a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue b/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue
index f00fbfea6e..75567c7944 100644
--- a/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue
+++ b/packages/storybook-vue/stories/components/sidebar-navigation/SidebarNav.vue
@@ -1,8 +1,20 @@
+<template>
+  <scale-sidebar-nav>
+    :arial-label-sidebar-nav="ariaLabelSiderbarNav"
+    :collapsible="collapsible"
+    :collapsible-label="collapsibleLabel"
+    :collapsible-media-query="collapsibleMediaQuery"
+    :styles="styles"
+    :collapsed="collapsed"
+    >
+  </scale-sidebar-nav>
+</template>
+
 <script>
 export default {
   name: 'scale-sidebar-nav',
   props: {
-    ariaLabelSiderbarNav: { type: String },
+    ariaLabelSiderbarNav: { type: String, default: "COMMENT: A brief description of the purpose of the navigation, omitting the term navigation, as the screen reader will read both the role and the contents of the label." },
     collapsible: { type: Boolean, default: false },
     collapsibleMediaQuery: { type: String },
     collapsibleLabel: { type: String, default: 'Menu' },
diff --git a/packages/storybook-vue/stories/components/slider/Slider.stories.mdx b/packages/storybook-vue/stories/components/slider/Slider.stories.mdx
index 6cef44d448..7d319a0fe1 100644
--- a/packages/storybook-vue/stories/components/slider/Slider.stories.mdx
+++ b/packages/storybook-vue/stories/components/slider/Slider.stories.mdx
@@ -14,19 +14,75 @@ import { action } from '@storybook/addon-actions';
   argTypes={{
     platform: {
       control: { type: 'text' },
+      description: '(optional) adapt styles for a specific platform. Ideally done via a global `data-platform` attribute (e.g. data-platform="ios" on `body`) but browser support is not yet sufficient.',
     },
     styles: {
       control: { disable: true },
+      description: '(optional) Injected CSS styles ',
     },
     customColor :{
-      description: ' DEPRECATED - (optional) slider custom color',
+      description: ' <span style="color:red">**[DEPRECATED]**</span> (optional) slider custom color<br/><br/>',
     },
     trackSmall :{
-      description: ' DEPRECATED - (optional) smaller track',
+      description: ' <span style="color:red">**[DEPRECATED]**</span> (optional) smaller track<br/><br/>',
     },
     thumbLarge :{
-      description: ' DEPRECATED - (optional) larger thumb ',
-    }
+      description: ' <span style="color:red">**[DEPRECATED]**</span> (optional) larger thumb<br/><br/> ',
+    },
+    decimals :{
+      description: ' (optional) number of decimal places  ',
+    },
+    innerAriaValueText :{
+      description: ' (optional) Aria label for range slider',
+    },
+    label :{
+      description: ' (optional) slider label',
+    },
+    max :{
+      description: ' (optional) the maximal value of the slider',
+    },
+    min :{
+      description: ' (optional) he minimal value of the slider',
+    },
+    name :{
+      description: ' (optional) the name of the slider',
+    },
+    range :{
+      description: ' (optional) multi-thumb',
+    },
+    showStepMarks :{
+      description: ' (optional) show a mark for each step',
+    },
+    showValue :{
+      description: ' (optional) slider display value',
+    },
+    sliderId :{
+      description: ' (optional) Slider id',
+    },
+    step :{
+      description: ' (optional) the step size to increase or decrease when dragging slider',
+    },
+    unit :{
+      description: ' (optional) slider value unit',
+    },
+    unitPosition :{
+      description: ' (optional) unit position',
+    },
+    helperText :{
+      description: ' (optional) helper text',
+    },
+    disabled :{
+      description: ' (optional) disabled',
+    },
+    value :{
+      description: ' (optional) the value of the slider',
+    },
+    valueTo :{
+      description: ' (optional) when `range` is true, the "from" value',
+    },
+    valueFrom :{
+      description: ' (optional) when `range` is true, the "to" value',
+    },
   }}
 />
 
diff --git a/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx b/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx
index 94c6885221..0c4b8a6b4d 100644
--- a/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx
+++ b/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx
@@ -12,7 +12,7 @@ import TabPanel from './TabPanel.vue';
 <Meta
   title="Components/Tab Navigation"
   component={ScaleTabNav}
-  subcomponents={{ 'Scale Tab Panel': TabPanel }}
+  subcomponents={{ 'Scale Tab Header': TabHeader, 'Scale Tab Panel': TabPanel }}
   argTypes={{
     styles: {
       table: {
@@ -36,6 +36,13 @@ import TabPanel from './TabPanel.vue';
 
 export const Template = (args, { argTypes }) => ({
   components: { ScaleTabNav },
+    preselected: {
+      table: {
+        disable: true,
+      },
+      description: '',
+      control: { type: null },
+    },
   props: ScaleTabNav.props,
   template: `
     <scale-tab-nav :disabled="disabled ? true : false" :preselected="preselected ? true : false" :size="size" :with-icon="withIcon"></scale-tab-nav>