From 74e18a36c590a64b073953036c715308d970ee43 Mon Sep 17 00:00:00 2001
From: "Caraveo Cabrera, Luis Humberto"
 <Luis.CaraveoCabrera+teradata@Teradata.com>
Date: Fri, 27 Mar 2026 15:03:45 -0600
Subject: [PATCH 1/2] feat(storybook): updated stories to csf3 matching from
 knapsack

---
 .../src/side-sheet/side-sheet.stories.js      | 152 +++++----
 .../src/skeleton/skeleton.stories.js          | 102 ++++--
 libs/components/src/slider/slider.stories.js  |  72 ++--
 .../src/snackbar/snackbar.stories.js          |  26 +-
 .../status-dialog/status-dialog.stories.js    | 165 ++++++---
 .../status-header/status-header.stories.js    | 108 +++---
 libs/components/src/switch/switch.stories.js  |  61 +++-
 libs/components/src/tab/tab.stories.js        | 104 +++++-
 .../src/text-lockup/text-lockup.stories.js    |  54 +--
 .../src/textarea/textarea.stories.js          | 127 +++++--
 .../src/textfield/textfield.stories.js        | 208 +++++++++---
 .../components/src/toolbar/toolbar.stories.js |  30 +-
 .../components/src/tooltip/tooltip.stories.js |  92 ++---
 .../src/top-app-bar/top-app-bar.stories.js    |  19 +-
 .../src/tree-list/tree-list.stories.js        | 313 +++++++++++-------
 .../src/typography/typography.stories.js      |  15 +-
 .../stories/demos/top-app-bar.component.js    |   6 +-
 17 files changed, 1127 insertions(+), 527 deletions(-)

diff --git a/libs/components/src/side-sheet/side-sheet.stories.js b/libs/components/src/side-sheet/side-sheet.stories.js
index 5a2d7b45f0..ccdcfe0d35 100644
--- a/libs/components/src/side-sheet/side-sheet.stories.js
+++ b/libs/components/src/side-sheet/side-sheet.stories.js
@@ -4,57 +4,31 @@ import { Active as ActiveStatusHeader } from '../status-header/status-header.sto
 import tableRowSelectionContent from '../../stories/demos/table-row-selection.content.html?raw';
 import '../data-table/data-table.stories.scss';
 
-export default {
-  title: 'Components/Side sheet',
-  argTypes: {
-    onClick: { action: 'clicked' },
-    width: { control: { type: 'number' } },
-  },
-  args: {
-    width: 800,
-  },
-  parameters: {
-    actions: {
-      handles: ['click cv-button'],
-    },
-  },
-  tags: ['autodocs'],
-};
-
-export const Basic = ({ width }) => {
+const attachSideSheetToggle = ({
+  triggerSelector,
+  sideSheetSelector,
+  childTriggerSelector,
+  childSideSheetSelector,
+}) => {
   document.addEventListener(
     'DOMContentLoaded',
     () => {
-      const sideSheet = document.querySelector('cv-side-sheet');
+      const sideSheet = document.querySelector(sideSheetSelector);
+
       document
-        .querySelector('cv-button')
+        .querySelector(triggerSelector)
         ?.addEventListener('click', () =>
           sideSheet?.open ? sideSheet.close() : sideSheet?.show(),
         );
-    },
-    { once: true },
-  );
-  return `
-        <cv-button raised>Open side sheet</cv-button>
-        <cv-side-sheet heading="Sample side sheet" width="${width}">
-        </cv-side-sheet>
-    `;
-};
 
-export const Multiple = ({ width }) => {
-  document.addEventListener(
-    'DOMContentLoaded',
-    () => {
-      const sideSheet = document.querySelector('#parentSideSheet');
-      const childSideSheet = document.querySelector('#childSideSheet');
+      if (!childTriggerSelector || !childSideSheetSelector) {
+        return;
+      }
+
+      const childSideSheet = document.querySelector(childSideSheetSelector);
 
       document
-        .querySelector('#parentTarget')
-        ?.addEventListener('click', () =>
-          sideSheet?.open ? sideSheet.close() : sideSheet?.show(),
-        );
-      document
-        .querySelector('#childTarget')
+        .querySelector(childTriggerSelector)
         ?.addEventListener('click', () =>
           childSideSheet?.open
             ? childSideSheet.close()
@@ -63,38 +37,84 @@ export const Multiple = ({ width }) => {
     },
     { once: true },
   );
+};
+
+const renderSingleSideSheet = ({
+  heading = 'Sample side sheet',
+  open = false,
+  pushed = false,
+  noPadding = false,
+  width,
+  content = '',
+}) => {
+  attachSideSheetToggle({
+    triggerSelector: 'cv-button',
+    sideSheetSelector: 'cv-side-sheet',
+  });
+
+  return `
+        ${
+          width
+            ? `<style>
+            cv-side-sheet {
+                --cv-side-sheet-width: ${width};
+            }
+        </style>`
+            : ''
+        }
+        <cv-button raised>Open side sheet</cv-button>
+        <cv-side-sheet ${heading ? `heading="${heading}"` : ''} ${open ? 'open' : ''} ${pushed ? 'pushed' : ''} ${noPadding ? 'noPadding' : ''}>
+          ${content}
+        </cv-side-sheet>
+    `;
+};
+
+const renderMultipleSideSheets = () => {
+  attachSideSheetToggle({
+    triggerSelector: '#parentTarget',
+    sideSheetSelector: '#parentSideSheet',
+    childTriggerSelector: '#childTarget',
+    childSideSheetSelector: '#childSideSheet',
+  });
+
   return `
         <cv-button id="parentTarget" raised>Open side sheet</cv-button>
-        <cv-side-sheet id="parentSideSheet" heading="Sample side sheet" width="${width}">
+        <cv-side-sheet id="parentSideSheet" heading="Sample side sheet">
             <cv-button id="childTarget" raised>Open child</cv-button>
         </cv-side-sheet>
-        <cv-side-sheet id="childSideSheet" heading="Child side sheet" width="${width}">
+        <cv-side-sheet id="childSideSheet" heading="Child side sheet">
         </cv-side-sheet>
     `;
 };
 
-export const StatusHeader = ({ width }) => {
-  document.addEventListener(
-    'DOMContentLoaded',
-    () => {
-      const sideSheet = document.querySelector('cv-side-sheet');
-      console.log(sideSheet);
-      document
-        .querySelector('cv-button')
-        ?.addEventListener('click', () =>
-          sideSheet?.open ? sideSheet.close() : sideSheet?.show(),
-        );
+export default {
+  title: 'Components/Side sheet',
+  argTypes: { onClick: { action: 'clicked' } },
+  parameters: {
+    actions: {
+      handles: ['click cv-button'],
     },
-    { once: true },
-  );
-  return `
-        <cv-button raised>Open side sheet</cv-button>
-        <cv-side-sheet noPadding width="${width}">
-          ${ActiveStatusHeader({
-            state: 'active',
-            title: 'Example status from a side sheet',
-          })}
-          ${tableRowSelectionContent}
-        </cv-side-sheet>
-    `;
+  },
+  tags: ['autodocs'],
+};
+
+export const Basic = {
+  render: renderSingleSideSheet,
+};
+
+export const Multiple = {
+  render: renderMultipleSideSheets,
+};
+
+export const StatusHeader = {
+  render: renderSingleSideSheet,
+  args: {
+    noPadding: true,
+    width: '800px',
+    content: `${ActiveStatusHeader({
+      state: 'active',
+      title: 'Example status from a side sheet',
+    })}
+          ${tableRowSelectionContent}`,
+  },
 };
diff --git a/libs/components/src/skeleton/skeleton.stories.js b/libs/components/src/skeleton/skeleton.stories.js
index 4a5cfbbc95..2621f935bc 100644
--- a/libs/components/src/skeleton/skeleton.stories.js
+++ b/libs/components/src/skeleton/skeleton.stories.js
@@ -7,47 +7,47 @@ import tableProgressContent from '../../stories/demos/table-progress-indicator.c
 
 import 'skeleton-elements/css';
 
-export default {
-  title: 'Components/Skeleton',
-  tags: ['autodocs'],
+const applySkeletonClasses = (elements) => {
+  Array.from(elements).forEach((element) => {
+    element.classList.add(skeletonClsName);
+    element.classList.add(skeletonEffect);
+  });
 };
 
-const skeletonClsName = 'skeleton-text';
-const skeletonEffect = 'skeleton-effect-fade';
-
-export const DataTable = () => {
+const createSkeletonContainer = (content, applySkeleton) => {
   const container = document.createElement('div');
-  container.innerHTML = tableProgressContent;
-  const tableCell = container.getElementsByClassName('mdc-data-table__cell');
-  Array.from(tableCell).forEach((cell) => {
-    cell.classList.add(skeletonClsName);
-    cell.classList.add(skeletonEffect);
-  });
+  container.innerHTML = content;
+  applySkeleton?.(container);
 
   return container;
 };
 
-export const Typography = () => {
-  const container = document.createElement('div');
-  container.classList.add(skeletonClsName);
-  container.classList.add(skeletonEffect);
-  container.innerHTML = `${Basic()}`;
+const renderSkeletonContent = (content) => {
+  return createSkeletonContainer(content, (container) => {
+    container.classList.add(skeletonClsName);
+    container.classList.add(skeletonEffect);
+  });
+};
 
-  return container;
+const renderDataTable = () => {
+  return createSkeletonContainer(tableProgressContent, (container) => {
+    applySkeletonClasses(
+      container.getElementsByClassName('mdc-data-table__cell'),
+    );
+  });
 };
 
-export const Content = () => {
-  const container = document.createElement('div');
-  container.classList.add(skeletonClsName);
-  container.classList.add(skeletonEffect);
-  container.innerHTML = loremIpsumContent;
+const renderTypography = () => {
+  return renderSkeletonContent(`${Basic()}`);
+};
 
-  return container;
+const renderContent = () => {
+  return renderSkeletonContent(loremIpsumContent);
 };
 
-export const Checkbox = ({ label = 'Bananas', indeterminate }) => {
-  const container = document.createElement('div');
-  container.innerHTML = `
+const renderCheckbox = ({ label = 'Bananas', indeterminate }) => {
+  const container = createSkeletonContainer(
+    `
       <style>
           cv-formfield {
               display: block;
@@ -66,13 +66,45 @@ export const Checkbox = ({ label = 'Bananas', indeterminate }) => {
       
       <cv-formfield label="${label}">
           <cv-checkbox class="child" checked></cv-checkbox>
-      </cv-formfield>`;
-
-  const labels = container.getElementsByTagName('cv-formfield');
-  Array.from(labels).forEach((label) => {
-    label.classList.add(skeletonClsName);
-    label.classList.add(skeletonEffect);
-  });
+      </cv-formfield>`,
+    (checkboxContainer) => {
+      applySkeletonClasses(
+        checkboxContainer.getElementsByTagName('cv-formfield'),
+      );
+    },
+  );
 
   return container;
 };
+
+export default {
+  title: 'Components/Skeleton',
+  argTypes: {
+    label: { control: 'text' },
+    indeterminate: { control: 'boolean' },
+  },
+  tags: ['autodocs'],
+};
+
+const skeletonClsName = 'skeleton-text';
+const skeletonEffect = 'skeleton-effect-fade';
+
+export const DataTable = {
+  render: renderDataTable,
+};
+
+export const Typography = {
+  render: renderTypography,
+};
+
+export const Content = {
+  render: renderContent,
+};
+
+export const Checkbox = {
+  render: renderCheckbox,
+  args: {
+    label: 'Bananas',
+    indeterminate: false,
+  },
+};
diff --git a/libs/components/src/slider/slider.stories.js b/libs/components/src/slider/slider.stories.js
index 328bf712ba..861a28826b 100644
--- a/libs/components/src/slider/slider.stories.js
+++ b/libs/components/src/slider/slider.stories.js
@@ -1,6 +1,36 @@
 import './slider';
 import './slider-range';
 
+const createSliderElement = (tagName, { discrete, disabled, markers }) => {
+  const slider = document.createElement(tagName);
+  slider.discrete = discrete;
+  slider.disabled = disabled;
+  slider.markers = markers;
+  slider.max = 50;
+  slider.min = 5;
+
+  if (markers) {
+    slider.step = 5;
+  }
+
+  return slider;
+};
+
+const renderSingleSlider = ({ value = 10, ...args }) => {
+  const slider = createSliderElement('cv-slider', args);
+  slider.value = value;
+
+  return slider;
+};
+
+const renderRangeSlider = ({ value = 10, ...args }) => {
+  const slider = createSliderElement('cv-slider-range', args);
+  slider.valueStart = value;
+  slider.valueEnd = value + 10;
+
+  return slider;
+};
+
 export default {
   title: 'Components/Slider',
   parameters: {
@@ -12,44 +42,14 @@ export default {
     markers: false,
   },
   tags: ['autodocs'],
+  render: renderSingleSlider,
 };
 
-const SingleTemplate = ({ discrete, disabled, markers, value = 10 }) => {
-  const progressBar = document.createElement('cv-slider');
-  progressBar.discrete = discrete;
-  progressBar.disabled = disabled;
-  progressBar.markers = markers;
-  progressBar.value = value;
-  progressBar.max = 50;
-  progressBar.min = 5;
-
-  if (markers) {
-    progressBar.step = 5;
-  }
-
-  return progressBar;
+export const Basic = {
+  args: {},
 };
 
-const RangeTemplate = ({ discrete, disabled, markers, value = 10 }) => {
-  const progressBar = document.createElement('cv-slider-range');
-  progressBar.discrete = discrete;
-  progressBar.disabled = disabled;
-  progressBar.markers = markers;
-  progressBar.valueStart = value;
-  progressBar.valueEnd = value + 10;
-
-  progressBar.max = 50;
-  progressBar.min = 5;
-
-  if (markers) {
-    progressBar.step = 5;
-  }
-
-  return progressBar;
+export const Range = {
+  args: {},
+  render: renderRangeSlider,
 };
-
-export const Basic = SingleTemplate.bind({});
-Basic.args = {};
-
-export const Range = RangeTemplate.bind({});
-Range.args = {};
diff --git a/libs/components/src/snackbar/snackbar.stories.js b/libs/components/src/snackbar/snackbar.stories.js
index 0e48432f03..9231a4d52e 100644
--- a/libs/components/src/snackbar/snackbar.stories.js
+++ b/libs/components/src/snackbar/snackbar.stories.js
@@ -5,14 +5,24 @@ import '../icon-button/icon-button';
 export default {
   title: 'Components/Snackbar',
   args: {
+    open: true,
     stacked: false,
     leading: false,
-    label: "Can't send photo. Retry in 5 seconds.",
+    closeOnEscape: false,
+    timeoutMs: '5000',
+    labelText: "Can't send photo. Retry in 5 seconds.",
   },
   tags: ['autodocs'],
 };
 
-const Template = ({ label, leading, stacked }) => {
+const renderSnackbar = ({
+  open,
+  labelText,
+  leading,
+  stacked,
+  closeOnEscape,
+  timeoutMs,
+}) => {
   document.addEventListener(
     'DOMContentLoaded',
     () => {
@@ -30,14 +40,18 @@ const Template = ({ label, leading, stacked }) => {
     <cv-button class="show-snackbar-button">Toggle snackbar</cv-button>
     <cv-snackbar
        class="my-snackbar"
-       labelText="${label}"
+       labelText="${labelText}"
        ${leading ? 'leading' : ''}
        ${stacked ? 'stacked' : ''}
-       open>
+       ${closeOnEscape ? 'closeOnEscape' : ''}
+       ${timeoutMs ? `timeoutMs="${timeoutMs}"` : ''}
+       ${open ? 'open' : ''}>
       <cv-button slot="action">Retry</cv-button>
       <cv-icon-button icon="close" slot="dismiss"></cv-icon-button>
     </cv-snackbar>`;
 };
 
-export const Basic = Template.bind({});
-Basic.args = {};
+export const Basic = {
+  render: renderSnackbar,
+  args: {},
+};
diff --git a/libs/components/src/status-dialog/status-dialog.stories.js b/libs/components/src/status-dialog/status-dialog.stories.js
index c52d3b9617..0ac10040bb 100644
--- a/libs/components/src/status-dialog/status-dialog.stories.js
+++ b/libs/components/src/status-dialog/status-dialog.stories.js
@@ -42,65 +42,146 @@ SELECT * FROM load_to_teradata (
 export default {
   title: 'Components/Status Dialog',
   argTypes: {
+    open: { control: { type: 'boolean' } },
     state: {
       options: ['error', 'positive', 'warning'],
       control: { type: 'select' },
     },
+    heading: { control: { type: 'text' } },
+    hideActions: { control: { type: 'boolean' } },
+    stacked: { control: { type: 'boolean' } },
+    scrimClickAction: { control: { type: 'text' } },
+    escapeKeyAction: { control: { type: 'text' } },
+    defaultAction: { control: { type: 'text' } },
+    actionAttribute: { control: { type: 'text' } },
+    initialFocusAttribute: { control: { type: 'text' } },
   },
   args: {
     state: 'error',
     open: false,
     hideActions: false,
+    stacked: false,
     heading: 'Basic heading for the dialog',
+    scrimClickAction: '',
+    escapeKeyAction: 'close',
+    defaultAction: 'close',
+    actionAttribute: 'dialogAction',
+    initialFocusAttribute: 'dialogInitialFocus',
   },
   tags: ['autodocs'],
 };
 
-const Template = ({ state, hideActions, heading }) => {
+const setupDialogTrigger = (buttonSelector, dialogSelector) => {
   document.addEventListener(
     'DOMContentLoaded',
     () => {
-      const button = document.body.querySelector('#dialog-button');
+      const button = document.body.querySelector(buttonSelector);
       button.addEventListener('click', () => {
-        const dialog = document.body.querySelector('#dialog');
+        const dialog = document.body.querySelector(dialogSelector);
         dialog.open = true;
       });
     },
     { once: true },
   );
+};
+
+const getDialogAttributes = ({
+  state,
+  open,
+  heading,
+  hideActions,
+  stacked,
+  scrimClickAction,
+  escapeKeyAction,
+  defaultAction,
+  actionAttribute,
+  initialFocusAttribute,
+}) => {
+  return [
+    `state="${state}"`,
+    `heading="${heading}"`,
+    open ? 'open' : '',
+    hideActions ? 'hideActions' : '',
+    stacked ? 'stacked' : '',
+    `scrimClickAction="${scrimClickAction}"`,
+    `escapeKeyAction="${escapeKeyAction}"`,
+    `defaultAction="${defaultAction}"`,
+    `actionAttribute="${actionAttribute}"`,
+    `initialFocusAttribute="${initialFocusAttribute}"`,
+  ]
+    .filter(Boolean)
+    .join(' ');
+};
+
+const renderStatusDialog = ({
+  state,
+  open,
+  hideActions,
+  heading,
+  stacked,
+  scrimClickAction,
+  escapeKeyAction,
+  defaultAction,
+  actionAttribute,
+  initialFocusAttribute,
+}) => {
+  setupDialogTrigger('#dialog-button', '#dialog');
 
   const buttonName = `${heading}`.includes('Basic')
     ? 'Open basic dialog'
     : `${`${state[0]}`.toUpperCase()}${`${state}`.substring(1)}`;
 
+  const dialogAttributes = getDialogAttributes({
+    state,
+    open,
+    heading,
+    hideActions,
+    stacked,
+    scrimClickAction,
+    escapeKeyAction,
+    defaultAction,
+    actionAttribute,
+    initialFocusAttribute,
+  });
+
   return `
     <cv-button id="dialog-button" raised>${buttonName}</cv-button>
-    <cv-status-dialog id="dialog" state="${state}" heading="${heading}" ${
-      hideActions ? 'hideActions' : ''
-    } scrimClickAction="" >
+    <cv-status-dialog id="dialog" ${dialogAttributes}>
       ${dialogContent[state]}
       <cv-button raised slot="primaryAction" dialogAction="close">Close</cv-button>
     </cv-status-dialog>`;
 };
 
-const TemplateWithDetails = ({ state, hideActions, heading }) => {
-  document.addEventListener(
-    'DOMContentLoaded',
-    () => {
-      const button = document.body.querySelector('#dialog-button-2');
-      button.addEventListener('click', () => {
-        const dialog = document.body.querySelector('#dialog-2');
-        dialog.open = true;
-      });
-    },
-    { once: true },
-  );
+const renderStatusDialogWithDetails = ({
+  state,
+  open,
+  hideActions,
+  heading,
+  stacked,
+  scrimClickAction,
+  escapeKeyAction,
+  defaultAction,
+  actionAttribute,
+  initialFocusAttribute,
+}) => {
+  setupDialogTrigger('#dialog-button-2', '#dialog-2');
+
+  const dialogAttributes = getDialogAttributes({
+    state,
+    open,
+    heading,
+    hideActions,
+    stacked,
+    scrimClickAction,
+    escapeKeyAction,
+    defaultAction,
+    actionAttribute,
+    initialFocusAttribute,
+  });
 
   return `
     <cv-button id="dialog-button-2" raised>Open dialog with details</cv-button>
-    <cv-status-dialog id="dialog-2" state="${state}" heading="${heading}" ${
-      hideActions ? 'hideActions' : ''
-    } scrimClickAction="" >
+    <cv-status-dialog id="dialog-2" ${dialogAttributes}>
       ${dialogContent[state]}
       <div slot="details">
         <cv-code-snippet language="sql" hideHeader=true>
@@ -111,27 +192,37 @@ const TemplateWithDetails = ({ state, hideActions, heading }) => {
     </cv-status-dialog>`;
 };
 
-export const Basic = Template.bind({});
+export const Basic = {
+  render: renderStatusDialog,
+};
 
-export const Positive = Template.bind({});
-Positive.args = {
-  state: 'positive',
-  heading: 'Data sharing users added',
+export const Positive = {
+  render: renderStatusDialog,
+  args: {
+    state: 'positive',
+    heading: 'Data sharing users added',
+  },
 };
 
-export const Warning = Template.bind({});
-Warning.args = {
-  state: 'warning',
-  heading: 'Warning',
+export const Warning = {
+  render: renderStatusDialog,
+  args: {
+    state: 'warning',
+    heading: 'Warning',
+  },
 };
 
-export const Error = Template.bind({});
-Error.args = {
-  state: 'error',
-  heading: 'Couldn’t add data sharing users',
+export const Error = {
+  render: renderStatusDialog,
+  args: {
+    state: 'error',
+    heading: 'Couldn’t add data sharing users',
+  },
 };
 
-export const WithDetails = TemplateWithDetails.bind({});
-WithDetails.args = {
-  heading: 'Couldn’t add data sharing users',
+export const WithDetails = {
+  render: renderStatusDialogWithDetails,
+  args: {
+    heading: 'Couldn’t add data sharing users',
+  },
 };
diff --git a/libs/components/src/status-header/status-header.stories.js b/libs/components/src/status-header/status-header.stories.js
index 2f3233e969..9424473941 100644
--- a/libs/components/src/status-header/status-header.stories.js
+++ b/libs/components/src/status-header/status-header.stories.js
@@ -9,15 +9,25 @@ export default {
     layout: 'fullscreen',
   },
   argTypes: {
+    statusText: {
+      control: { type: 'text' },
+    },
+    statusHelper: {
+      control: { type: 'text' },
+    },
+    titleText: {
+      control: { type: 'text' },
+    },
     state: {
-      options: ['active', 'caution', 'error', 'positive', 'neutral'],
+      options: ['active', 'caution', 'error', 'positive', 'neutral', 'pending'],
       control: { type: 'select' },
     },
   },
   args: {
     state: 'neutral',
-    title: 'Item details',
-    status: 'Status',
+    titleText: 'Item details',
+    statusText: 'Status',
+    statusHelper: 'secondary text',
     icon: 'Status',
   },
   tags: ['autodocs'],
@@ -33,14 +43,15 @@ const renderIcon = (state, icon) => {
   }
 };
 
-const HeaderWithTabs = ({
+const renderStatusHeader = ({
   state = 'neutral',
-  status = 'status',
-  title = 'title',
+  statusText = 'status',
+  statusHelper = 'secondary text',
+  titleText = 'title',
   icon,
 }) => {
   return `
-    <cv-status-header state="${state}" statusText="${status}" statusHelper="secondary text" titleText="${title}">
+    <cv-status-header state="${state}" statusText="${statusText}" statusHelper="${statusHelper}" titleText="${titleText}">
       ${renderIcon(state, icon)}
 
       <cv-icon-button slot="status-header-actions" icon="close" dialogAction="close" ></cv-icon-button>
@@ -74,42 +85,59 @@ const HeaderWithTabs = ({
     </cv-status-header>`;
 };
 
-export const Active = HeaderWithTabs.bind({});
-Active.args = {
-  state: 'active',
-  status: 'Running',
-  title: 'Active item details',
+export const Active = {
+  render: renderStatusHeader,
+  args: {
+    state: 'active',
+    statusText: 'Running',
+    titleText: 'Active item details',
+  },
 };
-export const Caution = HeaderWithTabs.bind({});
-Caution.args = {
-  state: 'caution',
-  icon: 'warning',
-  status: 'Caution',
-  title: 'Caution item details',
+
+export const Caution = {
+  render: renderStatusHeader,
+  args: {
+    state: 'caution',
+    icon: 'warning',
+    statusText: 'Caution',
+    titleText: 'Caution item details',
+  },
 };
-export const Error = HeaderWithTabs.bind({});
-Error.args = {
-  state: 'error',
-  icon: 'error',
-  status: 'Error',
-  title: 'Error item details',
+
+export const Error = {
+  render: renderStatusHeader,
+  args: {
+    state: 'error',
+    icon: 'error',
+    statusText: 'Error',
+    titleText: 'Error item details',
+  },
 };
-export const Positive = HeaderWithTabs.bind({});
-Positive.args = {
-  state: 'positive',
-  icon: 'done',
-  status: 'Positive',
-  title: 'Positive item details',
+
+export const Positive = {
+  render: renderStatusHeader,
+  args: {
+    state: 'positive',
+    icon: 'done',
+    statusText: 'Positive',
+    titleText: 'Positive item details',
+  },
 };
-export const Paused = HeaderWithTabs.bind({});
-Paused.args = {
-  icon: 'pause',
-  status: 'Paused',
-  title: 'Paused item details',
+
+export const Paused = {
+  render: renderStatusHeader,
+  args: {
+    icon: 'pause',
+    statusText: 'Paused',
+    titleText: 'Paused item details',
+  },
 };
-export const Pending = HeaderWithTabs.bind({});
-Pending.args = {
-  state: 'pending',
-  status: 'Pending',
-  title: 'Pending item details',
+
+export const Pending = {
+  render: renderStatusHeader,
+  args: {
+    state: 'pending',
+    statusText: 'Pending',
+    titleText: 'Pending item details',
+  },
 };
diff --git a/libs/components/src/switch/switch.stories.js b/libs/components/src/switch/switch.stories.js
index 0e1cef33ae..4991893ca2 100644
--- a/libs/components/src/switch/switch.stories.js
+++ b/libs/components/src/switch/switch.stories.js
@@ -1,27 +1,27 @@
 import './switch';
 import '../formfield/formfield';
 
-export default {
-  title: 'Components/Switch',
-  argTypes: {
-    disabled: {
-      control: 'boolean',
-    },
-    checked: {
-      control: 'boolean',
-    },
-    label: { control: 'text' },
-    onChange: { action: 'onChange' },
-  },
-  tags: ['autodocs'],
-};
-
-const Template = ({ disabled, label = 'On/Off', checked, onChange }) => {
+const renderSwitch = ({
+  disabled,
+  label = 'On/Off',
+  selected,
+  name,
+  value,
+  onChange,
+}) => {
   const switchInput = document.createElement('cv-switch');
-  switchInput.checked = checked;
+  switchInput.selected = selected;
   switchInput.disabled = disabled;
   switchInput.ariaLabel = label;
 
+  if (name !== undefined) {
+    switchInput.name = name;
+  }
+
+  if (value !== undefined) {
+    switchInput.value = value;
+  }
+
   switchInput.addEventListener('change', onChange);
 
   if (label) {
@@ -39,4 +39,29 @@ const Template = ({ disabled, label = 'On/Off', checked, onChange }) => {
   `;
 };
 
-export const Basic = Template.bind({});
+export default {
+  title: 'Components/Switch',
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+    selected: {
+      control: 'boolean',
+    },
+    name: { control: 'text' },
+    value: { control: 'text' },
+    label: { control: 'text' },
+    onChange: { action: 'onChange' },
+  },
+  args: {
+    disabled: false,
+    selected: false,
+    name: '',
+    value: '',
+    label: 'On/Off',
+  },
+  render: renderSwitch,
+  tags: ['autodocs'],
+};
+
+export const Basic = {};
diff --git a/libs/components/src/tab/tab.stories.js b/libs/components/src/tab/tab.stories.js
index b5c85c7064..71524c9475 100644
--- a/libs/components/src/tab/tab.stories.js
+++ b/libs/components/src/tab/tab.stories.js
@@ -3,29 +3,105 @@ import './tab';
 
 export default {
   title: 'Components/Tabs',
+  args: {
+    label: 'Tab',
+    activeIndex: 0,
+    icon: undefined,
+    indicatorIcon: undefined,
+    hasImageIcon: false,
+    isFadingIndicator: false,
+    minWidth: false,
+    isMinWidthIndicator: false,
+    stacked: false,
+    active: false,
+  },
   tags: ['autodocs'],
 };
 
-const Template = ({ icon, activeIndex = 0 }) => {
+const renderBooleanAttribute = (name, value) => (value ? ` ${name}` : '');
+
+const renderStringAttribute = (name, value) =>
+  value ? ` ${name}="${value}"` : '';
+
+const renderTab = ({
+  label,
+  icon,
+  indicatorIcon,
+  hasImageIcon,
+  isFadingIndicator,
+  minWidth,
+  isMinWidthIndicator,
+  stacked,
+  active,
+}) => {
+  return `<cv-tab label="${label}"${renderStringAttribute('icon', icon)}${renderStringAttribute('indicatorIcon', indicatorIcon)}${renderBooleanAttribute('hasImageIcon', hasImageIcon)}${renderBooleanAttribute('isFadingIndicator', isFadingIndicator)}${renderBooleanAttribute('minWidth', minWidth)}${renderBooleanAttribute('isMinWidthIndicator', isMinWidthIndicator)}${renderBooleanAttribute('stacked', stacked)}${renderBooleanAttribute('active', active)}>
+            </cv-tab>`;
+};
+
+const Template = ({
+  label = 'Tab',
+  icon,
+  indicatorIcon,
+  hasImageIcon = false,
+  isFadingIndicator = false,
+  minWidth = false,
+  isMinWidthIndicator = false,
+  stacked = false,
+  active = false,
+  activeIndex = 0,
+}) => {
   return `
         <cv-tab-bar activeIndex="${activeIndex}">
-            <cv-tab${icon ? ` icon="${icon}"` : ``} label="Tab one">
-            </cv-tab>
-            <cv-tab${icon ? ` icon="${icon}"` : ``} label="Tab two">
-            </cv-tab>
-            <cv-tab${icon ? ` icon="${icon}"` : ``} label="Tab three">
-            </cv-tab>
+            ${renderTab({
+              label: `${label} one`,
+              icon,
+              indicatorIcon,
+              hasImageIcon,
+              isFadingIndicator,
+              minWidth,
+              isMinWidthIndicator,
+              stacked,
+              active,
+            })}
+            ${renderTab({
+              label: `${label} two`,
+              icon,
+              indicatorIcon,
+              hasImageIcon,
+              isFadingIndicator,
+              minWidth,
+              isMinWidthIndicator,
+              stacked,
+              active: false,
+            })}
+            ${renderTab({
+              label: `${label} three`,
+              icon,
+              indicatorIcon,
+              hasImageIcon,
+              isFadingIndicator,
+              minWidth,
+              isMinWidthIndicator,
+              stacked,
+              active: false,
+            })}
         </cv-tab-bar>`;
 };
 
-export const Basic = Template.bind({});
+export const Basic = {
+  render: Template,
+};
 
-export const Icon = Template.bind({});
-Icon.args = {
-  icon: 'houseboat',
+export const Icon = {
+  render: Template,
+  args: {
+    icon: 'houseboat',
+  },
 };
 
-export const Preselected = Template.bind({});
-Preselected.args = {
-  activeIndex: 1,
+export const Preselected = {
+  render: Template,
+  args: {
+    activeIndex: 1,
+  },
 };
diff --git a/libs/components/src/text-lockup/text-lockup.stories.js b/libs/components/src/text-lockup/text-lockup.stories.js
index 61dd3cecce..573e35d1c8 100644
--- a/libs/components/src/text-lockup/text-lockup.stories.js
+++ b/libs/components/src/text-lockup/text-lockup.stories.js
@@ -14,7 +14,7 @@ export default {
       options: MAT_ICON_LIST,
       control: { type: 'select' },
     },
-    subTextState: {
+    state: {
       options: ['active', 'positive', 'negative', 'caution'],
       control: { type: 'select' },
     },
@@ -23,17 +23,17 @@ export default {
     scale: 'small',
     text: 'TDICAM-8523411',
     subText: 'environment Id',
-    subTextTrailing: false,
+    trailingSubText: false,
   },
   tags: ['autodocs'],
 };
 
-export const textLockup = ({
+const renderTextLockup = ({
   icon,
   scale,
+  state,
   subText,
-  subTextState,
-  subTextTrailing,
+  trailingSubText,
   text,
 }) => {
   return `
@@ -41,28 +41,38 @@ export const textLockup = ({
       subtext="${subText}"
       scale="${scale}"
       ${icon ? `icon="${icon}"` : ''}
-      ${subTextState ? `state="${subTextState}"` : ''}
-      ${subTextTrailing ? 'trailingSubText' : ''}>${text}</cv-text-lockup>
+      ${state ? `state="${state}"` : ''}
+      ${trailingSubText ? 'trailingSubText' : ''}>${text}</cv-text-lockup>
   `;
 };
 
-export const textLockupLarge = textLockup.bind({});
-textLockupLarge.args = {
-  scale: 'large',
+export const textLockup = {
+  render: renderTextLockup,
 };
 
-export const textLockupTrailing = textLockup.bind({});
-textLockupTrailing.args = {
-  text: 'Jan 12th, 2022 at 5:10pm',
-  subText: 'Date last ran successfully',
-  subTextTrailing: true,
+export const textLockupLarge = {
+  render: renderTextLockup,
+  args: {
+    scale: 'large',
+  },
+};
+
+export const textLockupTrailing = {
+  render: renderTextLockup,
+  args: {
+    text: 'Jan 12th, 2022 at 5:10pm',
+    subText: 'Date last ran successfully',
+    trailingSubText: true,
+  },
 };
 
-export const textLockupWithIcon = textLockup.bind({});
-textLockupWithIcon.args = {
-  icon: 'warning',
-  text: 'Daily production backup job',
-  subText: 'completed with issues',
-  subTextState: 'caution',
-  subTextTrailing: true,
+export const textLockupWithIcon = {
+  render: renderTextLockup,
+  args: {
+    icon: 'warning',
+    text: 'Daily production backup job',
+    subText: 'completed with issues',
+    state: 'caution',
+    trailingSubText: true,
+  },
 };
diff --git a/libs/components/src/textarea/textarea.stories.js b/libs/components/src/textarea/textarea.stories.js
index 4130dfefad..6712699fd9 100644
--- a/libs/components/src/textarea/textarea.stories.js
+++ b/libs/components/src/textarea/textarea.stories.js
@@ -1,40 +1,129 @@
 import './textarea';
 
+const TEXTAREA_TYPES = [
+  'text',
+  'search',
+  'tel',
+  'url',
+  'email',
+  'password',
+  'date',
+  'month',
+  'week',
+  'time',
+  'datetime-local',
+  'number',
+  'color',
+];
+
+const renderBooleanAttribute = (name, value) => (value ? ` ${name}` : '');
+
+const renderStringAttribute = (name, value) =>
+  value ? ` ${name}="${value}"` : '';
+
+const renderNumberAttribute = (name, value) =>
+  Number.isFinite(value) ? ` ${name}="${value}"` : '';
+
 export default {
   title: 'Components/Text area',
   argTypes: {
-    style: {
-      options: ['outlined', 'filled'],
-      control: { type: 'radio' },
+    type: {
+      options: TEXTAREA_TYPES,
+      control: { type: 'select' },
     },
+    outlined: { control: { type: 'boolean' } },
+    rows: { control: { type: 'number' } },
+    cols: { control: { type: 'number' } },
+    value: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    name: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    helper: { control: { type: 'text' } },
+    helperPersistent: { control: { type: 'boolean' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    icon: { control: { type: 'text' } },
+    iconTrailing: { control: { type: 'text' } },
+    maxLength: { control: { type: 'number' } },
+    charCounter: { control: { type: 'boolean' } },
+    validationMessage: { control: { type: 'text' } },
+    validityState: { control: false },
+    willValidate: { control: false },
+    validityTransform: { control: false },
+    validateOnInitialRender: { control: { type: 'boolean' } },
   },
   args: {
-    style: 'outlined',
+    outlined: true,
     disabled: false,
+    helperPersistent: false,
+    required: false,
+    charCounter: false,
+    validateOnInitialRender: false,
   },
   tags: ['autodocs'],
 };
 
-const Template = ({ label, style, disabled, required, helper }) => {
+const renderTextarea = ({
+  rows,
+  cols,
+  value,
+  type,
+  label,
+  name,
+  placeholder,
+  helper,
+  helperPersistent,
+  outlined,
+  required,
+  disabled,
+  icon,
+  iconTrailing,
+  maxLength,
+  charCounter,
+  validationMessage,
+  validateOnInitialRender,
+}) => {
   return `
-        <cv-textarea 
-            label="${label ?? style}"
-            ${style}
-            ${helper ? `helper="${helper}"` : null}
-            ${disabled ? `disabled` : null}
-            ${required ? `required` : null}>
+        <cv-textarea
+            ${renderNumberAttribute('rows', rows)}
+            ${renderNumberAttribute('cols', cols)}
+            ${renderStringAttribute('value', value)}
+            ${renderStringAttribute('type', type)}
+            ${renderStringAttribute('label', label ?? (outlined ? 'outlined' : 'filled'))}
+            ${renderStringAttribute('name', name)}
+            ${renderStringAttribute('placeholder', placeholder)}
+            ${renderStringAttribute('helper', helper)}
+            ${renderBooleanAttribute('helperPersistent', helperPersistent)}
+            ${renderBooleanAttribute('outlined', outlined)}
+            ${renderBooleanAttribute('required', required)}
+            ${renderBooleanAttribute('disabled', disabled)}
+            ${renderStringAttribute('icon', icon)}
+            ${renderStringAttribute('iconTrailing', iconTrailing)}
+            ${renderNumberAttribute('maxLength', maxLength)}
+            ${renderBooleanAttribute('charCounter', charCounter)}
+            ${renderStringAttribute('validationMessage', validationMessage)}
+            ${renderBooleanAttribute(
+              'validateOnInitialRender',
+              validateOnInitialRender,
+            )}>
         </cv-textarea>`;
 };
 
-export const Basic = Template.bind({});
+export const Basic = {
+  render: renderTextarea,
+};
 
-export const Required = Template.bind({});
-Required.args = {
-  required: true,
+export const Required = {
+  render: renderTextarea,
+  args: {
+    required: true,
+  },
 };
 
-export const HelperText = Template.bind({});
-HelperText.args = {
-  label: 'Click to see helper text',
-  helper: 'Helper Text',
+export const HelperText = {
+  render: renderTextarea,
+  args: {
+    label: 'Click to see helper text',
+    helper: 'Helper Text',
+  },
 };
diff --git a/libs/components/src/textfield/textfield.stories.js b/libs/components/src/textfield/textfield.stories.js
index 216a1acf4f..11ca0ab665 100644
--- a/libs/components/src/textfield/textfield.stories.js
+++ b/libs/components/src/textfield/textfield.stories.js
@@ -1,94 +1,202 @@
 import './textfield';
 
+const TEXTFIELD_TYPES = [
+  'text',
+  'search',
+  'tel',
+  'url',
+  'email',
+  'password',
+  'date',
+  'month',
+  'week',
+  'time',
+  'datetime-local',
+  'number',
+  'color',
+];
+
+const renderBooleanAttribute = (name, value) => (value ? ` ${name}` : '');
+
+const renderStringAttribute = (name, value) =>
+  value ? ` ${name}="${value}"` : '';
+
+const renderNumberAttribute = (name, value) =>
+  Number.isFinite(value) ? ` ${name}="${value}"` : '';
+
 export default {
   title: 'Components/Text field',
   argTypes: {
-    style: {
-      options: ['outlined', 'filled'],
-      control: { type: 'radio' },
+    type: {
+      options: TEXTFIELD_TYPES,
+      control: { type: 'select' },
     },
+    outlined: { control: { type: 'boolean' } },
+    value: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    name: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    helper: { control: { type: 'text' } },
+    helperPersistent: { control: { type: 'boolean' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    dense: { control: { type: 'boolean' } },
+    prefix: { control: { type: 'text' } },
+    suffix: { control: { type: 'text' } },
+    pattern: { control: { type: 'text' } },
+    min: { control: { type: 'text' } },
+    max: { control: { type: 'text' } },
+    size: { control: { type: 'number' } },
+    step: { control: { type: 'number' } },
+    icon: { control: { type: 'text' } },
+    iconTrailing: { control: { type: 'text' } },
+    maxLength: { control: { type: 'number' } },
+    charCounter: { control: { type: 'boolean' } },
+    validity: { control: false },
+    autoValidate: { control: { type: 'boolean' } },
+    validationMessage: { control: { type: 'text' } },
+    willValidate: { control: false },
+    validityTransform: { control: false },
+    validateOnInitialRender: { control: { type: 'boolean' } },
+    loading: { control: { type: 'boolean' } },
+    loaderDensity: { control: { type: 'number' } },
   },
   args: {
-    style: 'outlined',
+    outlined: true,
     disabled: false,
+    helperPersistent: false,
+    required: false,
+    dense: false,
+    charCounter: false,
+    autoValidate: false,
+    validateOnInitialRender: false,
     loading: false,
     loaderDensity: -6,
   },
   tags: ['autodocs'],
 };
 
-const Template = ({
+const renderTextfield = ({
+  value,
+  type,
   icon,
   iconTrailing,
   label,
-  style,
+  name,
+  placeholder,
+  helperPersistent,
+  outlined,
   disabled,
   required,
   helper,
+  dense,
   loading,
   loaderDensity,
   prefix,
   suffix,
+  pattern,
+  min,
+  max,
+  size,
+  step,
+  maxLength,
+  charCounter,
+  autoValidate,
+  validationMessage,
+  validateOnInitialRender,
 }) => {
   return `
         <cv-textfield 
-            label="${label ?? style}"
-            ${style}
-            ${
-              iconTrailing && icon
-                ? `iconTrailing="${icon}"`
-                : icon
-                  ? `icon="${icon}"`
-                  : null
-            }
-            ${helper ? `helper="${helper}"` : null}
-            ${disabled ? `disabled` : null}
-            ${required ? `required` : null}
-            ${loading ? 'loading' : null}
-            ${loaderDensity ? `loaderDensity="${loaderDensity}"` : ''}
-            ${prefix ? `prefix="${prefix}"` : ''}
-            ${suffix ? `suffix="${suffix}"` : ''}
+            ${renderStringAttribute('value', value)}
+            ${renderStringAttribute('type', type)}
+            ${renderStringAttribute('label', label ?? (outlined ? 'outlined' : 'filled'))}
+            ${renderStringAttribute('name', name)}
+            ${renderStringAttribute('placeholder', placeholder)}
+            ${renderStringAttribute('helper', helper)}
+            ${renderBooleanAttribute('helperPersistent', helperPersistent)}
+            ${renderBooleanAttribute('outlined', outlined)}
+            ${renderBooleanAttribute('required', required)}
+            ${renderBooleanAttribute('disabled', disabled)}
+            ${renderBooleanAttribute('dense', dense)}
+            ${renderStringAttribute('prefix', prefix)}
+            ${renderStringAttribute('suffix', suffix)}
+            ${renderStringAttribute('pattern', pattern)}
+            ${renderStringAttribute('min', min)}
+            ${renderStringAttribute('max', max)}
+            ${renderNumberAttribute('size', size)}
+            ${renderNumberAttribute('step', step)}
+            ${renderStringAttribute('icon', icon)}
+            ${renderStringAttribute('iconTrailing', iconTrailing)}
+            ${renderNumberAttribute('maxLength', maxLength)}
+            ${renderBooleanAttribute('charCounter', charCounter)}
+            ${renderBooleanAttribute('autoValidate', autoValidate)}
+            ${renderStringAttribute('validationMessage', validationMessage)}
+            ${renderBooleanAttribute(
+              'validateOnInitialRender',
+              validateOnInitialRender,
+            )}
+            ${renderBooleanAttribute('loading', loading)}
+            ${renderNumberAttribute('loaderDensity', loaderDensity)}
             >
         </cv-textfield>`;
 };
 
-export const Basic = Template.bind({});
+export const Basic = {
+  render: renderTextfield,
+};
 
-export const Required = Template.bind({});
-Required.args = {
-  required: true,
+export const Required = {
+  render: renderTextfield,
+  args: {
+    required: true,
+  },
+};
+
+export const Icon = {
+  render: renderTextfield,
+  args: {
+    icon: 'houseboat',
+  },
 };
 
-export const Icon = Template.bind({});
-Icon.args = {
-  icon: 'houseboat',
-  iconTrailing: false,
+export const TrailingIcon = {
+  render: renderTextfield,
+  args: {
+    iconTrailing: 'houseboat',
+  },
 };
 
-export const HelperText = Template.bind({});
-HelperText.args = {
-  label: 'Click to see helper text',
-  helper: 'Helper Text',
+export const HelperText = {
+  render: renderTextfield,
+  args: {
+    label: 'Click to see helper text',
+    helper: 'Helper Text',
+  },
 };
 
-export const Loading = Template.bind({});
-Loading.args = {
-  label: 'Loading state',
-  icon: 'person',
-  loading: true,
-  loaderDensity: -6,
-  iconTrailing: false,
+export const Loading = {
+  render: renderTextfield,
+  args: {
+    label: 'Loading state',
+    icon: 'person',
+    loading: true,
+    loaderDensity: -6,
+  },
 };
 
-export const WithSuffix = Template.bind({});
-WithSuffix.args = {
-  label: 'Price',
-  suffix: 'USD',
+export const WithSuffix = {
+  render: renderTextfield,
+  args: {
+    label: 'Price',
+    suffix: 'USD',
+  },
 };
 
-export const PrefixAndSuffix = Template.bind({});
-PrefixAndSuffix.args = {
-  label: '',
-  prefix: '$',
-  suffix: 'USD',
+export const PrefixAndSuffix = {
+  render: renderTextfield,
+  args: {
+    label: '',
+    prefix: '$',
+    suffix: 'USD',
+  },
 };
diff --git a/libs/components/src/toolbar/toolbar.stories.js b/libs/components/src/toolbar/toolbar.stories.js
index 628cc4cc1d..6eec6cf971 100644
--- a/libs/components/src/toolbar/toolbar.stories.js
+++ b/libs/components/src/toolbar/toolbar.stories.js
@@ -7,7 +7,11 @@ export default {
   title: 'Components/Toolbar',
   args: {
     title: 'Page title',
+    centerTitle: false,
     dense: false,
+    prominent: false,
+    scrollTarget: '',
+    sticky: false,
     filter: true,
     search: true,
     add: true,
@@ -20,8 +24,12 @@ export default {
   tags: ['autodocs'],
 };
 
-export const Toolbar = ({
+const toolbarTemplate = ({
+  centerTitle,
   dense,
+  prominent,
+  scrollTarget,
+  sticky,
   title,
   filter,
   search,
@@ -30,7 +38,13 @@ export const Toolbar = ({
   action,
 }) => {
   return `
-    <cv-toolbar ${dense ? 'dense' : ''}>
+    <cv-toolbar
+      ${centerTitle ? 'centerTitle' : ''}
+      ${dense ? 'dense' : ''}
+      ${prominent ? 'prominent' : ''}
+      ${scrollTarget ? `scrollTarget="${scrollTarget}"` : ''}
+      ${sticky ? 'sticky' : ''}
+    >
       <span slot="title">${title}</span> 
       ${
         filter
@@ -61,7 +75,13 @@ export const Toolbar = ({
   `;
 };
 
-export const denseToolbar = Toolbar.bind({});
-denseToolbar.args = {
-  dense: 'true',
+export const Toolbar = {
+  render: toolbarTemplate,
+};
+
+export const denseToolbar = {
+  args: {
+    dense: true,
+  },
+  render: toolbarTemplate,
 };
diff --git a/libs/components/src/tooltip/tooltip.stories.js b/libs/components/src/tooltip/tooltip.stories.js
index a7572e3c5f..ed7279c928 100644
--- a/libs/components/src/tooltip/tooltip.stories.js
+++ b/libs/components/src/tooltip/tooltip.stories.js
@@ -1,32 +1,14 @@
 import './tooltip';
 import '../icon/icon';
 
-export default {
-  title: 'Components/Tooltip',
-  argTypes: {
-    showDelayInMs: {
-      control: 'number',
-      label: 'show delay in milliseconds',
-    },
-    hideDelayInMs: {
-      control: 'number',
-      label: 'hide delay in milliseconds',
-    },
-  },
-  args: {
-    content: "I'm a tooltip!",
-  },
-  tags: ['autodocs'],
-};
-
-const Template = ({
+function renderTooltip({
   richTitle,
-  isRich,
-  isPersistent,
+  rich,
+  persistent,
   content,
-  showDelayInMs,
-  hideDelayInMs,
-}) => {
+  showDelay,
+  hidedelay,
+}) {
   document.addEventListener('DOMContentLoaded', () => {
     window.tooltip.anchor = window.button;
   });
@@ -41,33 +23,65 @@ const Template = ({
     <cv-tooltip
       id="tooltip"
       ${richTitle ? `richTitle="${richTitle}"` : ''}
-      ${showDelayInMs >= 0 ? `showDelay="${showDelayInMs}"` : ''}
-      ${hideDelayInMs >= 0 ? `hideDelay="${hideDelayInMs}"` : ''}
-      ${isRich ? 'rich' : ''}
-      ${isPersistent ? 'persistent' : ''}>
+      ${showDelay >= 0 ? `showDelay="${showDelay}"` : ''}
+      ${hidedelay >= 0 ? `hideDelay="${hidedelay}"` : ''}
+      ${rich ? 'rich' : ''}
+      ${persistent ? 'persistent' : ''}>
       ${content}
     </cv-tooltip>
   `;
+}
+
+export default {
+  title: 'Components/Tooltip',
+  argTypes: {
+    rich: {
+      control: 'boolean',
+    },
+    persistent: {
+      control: 'boolean',
+    },
+    richTitle: {
+      control: 'text',
+    },
+    showDelay: {
+      control: 'number',
+      label: 'show delay in milliseconds',
+    },
+    hidedelay: {
+      control: 'number',
+      label: 'hide delay in milliseconds',
+    },
+  },
+  args: {
+    content: "I'm a tooltip!",
+  },
+  tags: ['autodocs'],
+  render: renderTooltip,
 };
 
-export const Basic = Template.bind({});
+export const Basic = {
+  args: {},
+};
 
-export const Rich = Template.bind({});
-Rich.args = {
-  isRich: true,
-  isPersistent: true,
-  richTitle: 'This is the rich title!',
-  content: `
+export const Rich = {
+  args: {
+    rich: true,
+    persistent: true,
+    richTitle: 'This is the rich title!',
+    content: `
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
       pretium vitae est et dapibus. Aenean sit amet felis eu lorem fermentum
       aliquam sit amet sit amet eros.
       <a class="mdc-tooltip__content-link" href="http://teradata.com" target="_blank">Learn more</a>.
       <cv-button slot="actionItems" label="Action"></button>
   `,
+  },
 };
 
-export const NoDelay = Template.bind({});
-NoDelay.args = {
-  showDelayInMs: 0,
-  hideDelayInMs: 0,
+export const NoDelay = {
+  args: {
+    showDelay: 0,
+    hidedelay: 0,
+  },
 };
diff --git a/libs/components/src/top-app-bar/top-app-bar.stories.js b/libs/components/src/top-app-bar/top-app-bar.stories.js
index ddbc20510c..0833046790 100644
--- a/libs/components/src/top-app-bar/top-app-bar.stories.js
+++ b/libs/components/src/top-app-bar/top-app-bar.stories.js
@@ -5,6 +5,7 @@ import '../data-table/data-table.stories.scss';
 
 export default {
   title: 'Components/Top App Bar',
+  render: topAppBarComponent,
   argTypes: {
     showContent: {
       options: ['table', 'tableWithSelection', 'loremIpsum'],
@@ -19,6 +20,7 @@ export default {
     centerTitle: false,
     dense: false,
     prominent: false,
+    scrollTarget: '',
     showContent: 'table',
     showActionItems: 'icons',
   },
@@ -28,15 +30,16 @@ export default {
   tags: ['autodocs'],
 };
 
-export const Basic = topAppBarComponent.bind({});
-Basic.args = {};
+export const Basic = {};
 
-export const BasicWithButtons = topAppBarComponent.bind({});
-BasicWithButtons.args = {
-  showActionItems: 'buttons',
+export const BasicWithButtons = {
+  args: {
+    showActionItems: 'buttons',
+  },
 };
 
-export const Fixed = topAppBarComponent.bind({});
-Fixed.parameters = {
-  fixed: true,
+export const Fixed = {
+  parameters: {
+    fixed: true,
+  },
 };
diff --git a/libs/components/src/tree-list/tree-list.stories.js b/libs/components/src/tree-list/tree-list.stories.js
index a16014d406..fb2c1565ae 100644
--- a/libs/components/src/tree-list/tree-list.stories.js
+++ b/libs/components/src/tree-list/tree-list.stories.js
@@ -1,9 +1,13 @@
 import './tree-list';
 import './tree-list-item';
+
 export default {
   title: 'Components/Tree List',
   args: {
     icon: 'description',
+    isOpen: true,
+    indentLevel: 1,
+    indentMultiple: 16,
   },
   parameters: {
     layout: 'centered',
@@ -11,179 +15,240 @@ export default {
   tags: ['autodocs'],
 };
 
-export const TreeList = ({ icon }) => {
-  return `
-        <cv-tree-list>
-            <cv-tree-list-item icon="${icon}">
+const buildTreeListItemAttrs = ({
+  icon,
+  isOpen,
+  indentLevel,
+  indentMultiple,
+} = {}) =>
+  [
+    icon ? `icon="${icon}"` : '',
+    isOpen ? 'isOpen="true"' : '',
+    typeof indentLevel === 'number' ? `indentLevel="${indentLevel}"` : '',
+    typeof indentMultiple === 'number'
+      ? `indentMultiple="${indentMultiple}"`
+      : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+const buildNestedItemAttrs = (
+  { icon, isOpen, indentLevel, indentMultiple },
+  levelOffset = 0,
+  options = {},
+) =>
+  buildTreeListItemAttrs({
+    icon,
+    isOpen: options.isOpen ?? isOpen,
+    indentLevel:
+      typeof indentLevel === 'number' ? indentLevel + levelOffset : undefined,
+    indentMultiple,
+  });
+
+const wrapTreeList = (content) => `
+    <cv-tree-list>
+        ${content}
+    </cv-tree-list>
+`;
+
+const wrapInContainer = (content, style) => `
+    <div style="${style}">
+        ${content}
+    </div>
+`;
+
+const renderTreeList = (args) =>
+  wrapTreeList(`
+        <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })}>
+            <div slot="label">PDCRAdmin</div>
+        </cv-tree-list-item>
+        <cv-tree-list-item ${buildTreeListItemAttrs({
+          icon: args.icon,
+          isOpen: args.isOpen,
+        })}>
+            <div slot="label">PDCRAdmin</div>
+            <cv-tree-list-item ${buildNestedItemAttrs(args, 0, { isOpen: false })} slot="nest">
                 <div slot="label">PDCRAdmin</div>
             </cv-tree-list-item>
-            <cv-tree-list-item icon="${icon}" isOpen="true">
+            <cv-tree-list-item ${buildNestedItemAttrs(args, 0)} slot="nest">
                 <div slot="label">PDCRAdmin</div>
-                <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="1">
+                <cv-tree-list-item ${buildNestedItemAttrs(args, 1, { isOpen: false })} slot="nest">
                     <div slot="label">PDCRAdmin</div>
                 </cv-tree-list-item>
-                <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="1">
+                <cv-tree-list-item ${buildNestedItemAttrs(args, 1, { isOpen: false })} slot="nest">
                     <div slot="label">PDCRAdmin</div>
-                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2">
-                        <div slot="label">PDCRAdmin</div>
-                    </cv-tree-list-item>
-                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2">
+                    <cv-tree-list-item ${buildNestedItemAttrs(args, 2, { isOpen: false })} slot="nest">
                         <div slot="label">PDCRAdmin</div>
-                        <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="3">
+                        <cv-tree-list-item ${buildNestedItemAttrs(args, 3, { isOpen: false })} slot="nest">
                             <div slot="label">PDCRAdmin</div>
-                            <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="4">
-                                <div slot="label">PDCRAdmin</div>
-                            </cv-tree-list-item>
                         </cv-tree-list-item>
                     </cv-tree-list-item>
                 </cv-tree-list-item>
             </cv-tree-list-item>
-            <cv-tree-list-item icon="${icon}">
-                <div slot="label">PDCRAdmin</div>
-            </cv-tree-list-item>
-            <cv-tree-list-item icon="${icon}">
-                <div slot="label">PDCRAdmin</div>
-            </cv-tree-list-item>
-        </cv-tree-list>
-    `;
-};
+        </cv-tree-list-item>
+        <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })}>
+            <div slot="label">PDCRAdmin</div>
+        </cv-tree-list-item>
+        <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })}>
+            <div slot="label">PDCRAdmin</div>
+        </cv-tree-list-item>
+    `);
 
-export const TwoLineItems = ({ icon }) => {
-  return `
-        <cv-tree-list>
-            <cv-tree-list-item icon="${icon}">
+const renderTwoLineItems = (args) =>
+  wrapTreeList(`
+        <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })}>
+            <div slot="label">PDCRAdmin</div>
+        </cv-tree-list-item>
+        <cv-tree-list-item ${buildTreeListItemAttrs({
+          icon: args.icon,
+          isOpen: args.isOpen,
+        })}>
+            <div slot="label">PDCRAdmin</div>
+            <cv-tree-list-item ${buildNestedItemAttrs(args, 0, { isOpen: false })} slot="nest">
                 <div slot="label">PDCRAdmin</div>
             </cv-tree-list-item>
-            <cv-tree-list-item icon="${icon}" isOpen="true">
+            <cv-tree-list-item ${buildNestedItemAttrs(args, 0)} slot="nest">
                 <div slot="label">PDCRAdmin</div>
-                <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="1">
+                <cv-tree-list-item ${buildNestedItemAttrs(args, 1, { isOpen: false })} slot="nest">
                     <div slot="label">PDCRAdmin</div>
+                    <div slot="extraContent">VARCHAR(8)</div>
                 </cv-tree-list-item>
-                <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="1">
+                <cv-tree-list-item ${buildNestedItemAttrs(args, 1, { isOpen: false })} slot="nest">
                     <div slot="label">PDCRAdmin</div>
-                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2">
-                        <div slot="label">PDCRAdmin</div>
-                        <div slot="extraContent">VARCHAR(8)</div>
-                    </cv-tree-list-item>
-                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2">
-                        <div slot="label">PDCRAdmin</div>
-                        <div slot="extraContent">VARCHAR(8)</div>
-                    </cv-tree-list-item>
+                    <div slot="extraContent">VARCHAR(8)</div>
                 </cv-tree-list-item>
             </cv-tree-list-item>
-            <cv-tree-list-item icon="${icon}">
-                <div slot="label">PDCRAdmin</div>
-            </cv-tree-list-item>
-            <cv-tree-list-item icon="${icon}">
-                <div slot="label">PDCRAdmin</div>
-            </cv-tree-list-item>
-        </cv-tree-list>
-    `;
-};
+        </cv-tree-list-item>
+        <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })}>
+            <div slot="label">PDCRAdmin</div>
+        </cv-tree-list-item>
+        <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })}>
+            <div slot="label">PDCRAdmin</div>
+        </cv-tree-list-item>
+    `);
 
-export const EmptyState = ({ icon }) => {
-  return `
-        <cv-tree-list>
-            <cv-tree-list-item icon="${icon}">
+const renderEmptyState = (args) =>
+  wrapTreeList(`
+        <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })}>
+            <div slot="label">PDCRAdmin</div>
+        </cv-tree-list-item>
+        <cv-tree-list-item ${buildTreeListItemAttrs({
+          icon: args.icon,
+          isOpen: args.isOpen,
+        })}>
+            <div slot="label">PDCRAdmin</div>
+            <cv-tree-list-item ${buildNestedItemAttrs(args, 0, { isOpen: false })} slot="nest">
                 <div slot="label">PDCRAdmin</div>
             </cv-tree-list-item>
-            <cv-tree-list-item icon="${icon}" isOpen="true">
+            <cv-tree-list-item ${buildNestedItemAttrs(args, 0)} slot="nest">
                 <div slot="label">PDCRAdmin</div>
-                <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="1">
+                <cv-tree-list-item ${buildNestedItemAttrs(args, 1)} slot="nest">
                     <div slot="label">PDCRAdmin</div>
                 </cv-tree-list-item>
-                <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="1">
+                <cv-tree-list-item ${buildNestedItemAttrs(args, 1, { isOpen: false })} slot="nest">
                     <div slot="label">PDCRAdmin</div>
-                    <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="2">
-                        <div slot="label">PDCRAdmin</div>
-                    </cv-tree-list-item>
-                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2">
-                        <div slot="label">PDCRAdmin</div>
-                    </cv-tree-list-item>
                 </cv-tree-list-item>
             </cv-tree-list-item>
-            <cv-tree-list-item icon="${icon}">
+        </cv-tree-list-item>
+        <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })}>
+            <div slot="label">PDCRAdmin</div>
+        </cv-tree-list-item>
+        <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })}>
+            <div slot="label">PDCRAdmin</div>
+        </cv-tree-list-item>
+    `);
+
+// Putting the tree list into a container that has a set width.
+const renderOverflowTest = (args) =>
+  wrapInContainer(
+    wrapTreeList(`
+            <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })}>
                 <div slot="label">PDCRAdmin</div>
             </cv-tree-list-item>
-            <cv-tree-list-item icon="${icon}">
+            <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })}>
                 <div slot="label">PDCRAdmin</div>
-            </cv-tree-list-item>
-        </cv-tree-list>
-    `;
-};
-// Putting the tree list into a container that has a set width.
-export const OverflowTest = ({ icon }) => {
-  return `
-        <div style="width: 300px; border-left: solid white 1px; border-right: solid white 1px">
-            <cv-tree-list>
-                <cv-tree-list-item icon="${icon}">
+                <cv-tree-list-item ${buildNestedItemAttrs(args, 0, { isOpen: false })} slot="nest">
                     <div slot="label">PDCRAdmin</div>
                 </cv-tree-list-item>
-                <cv-tree-list-item icon="${icon}">
+                <cv-tree-list-item ${buildNestedItemAttrs(args, 0)} slot="nest">
                     <div slot="label">PDCRAdmin</div>
-                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="1">
+                    <cv-tree-list-item ${buildNestedItemAttrs(args, 1, { isOpen: false })} slot="nest">
                         <div slot="label">PDCRAdmin</div>
                     </cv-tree-list-item>
-                    <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="1">
+                    <cv-tree-list-item ${buildNestedItemAttrs(args, 1)} slot="nest">
                         <div slot="label">PDCRAdmin</div>
-                        <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2">
-                            <div slot="label">PDCRAdmin</div>
-                        </cv-tree-list-item>
-                        <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="2">
+                        <cv-tree-list-item ${buildNestedItemAttrs(args, 2)} slot="nest">
                             <div slot="label">PDCRAdmin</div>
-                            <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="3">
-                                <div slot="label">PDCRAdmin</div>
-                                <cv-tree-list-item icon="${icon}" slot="nest" isOpen="true" indentLevel="4">
-                                    <div slot="label">AReallyLongLabelAReallyLongLabelAReallyLongLabelAReallyLongLabelAReallyLongLabelAReallyLongLabelAReallyLongLabel</div>
-                                </cv-tree-list-item>
+                            <cv-tree-list-item ${buildNestedItemAttrs(args, 3)} slot="nest">
+                                <div slot="label">AReallyLongLabelAReallyLongLabelAReallyLongLabelAReallyLongLabelAReallyLongLabelAReallyLongLabelAReallyLongLabel</div>
                             </cv-tree-list-item>
                         </cv-tree-list-item>
                     </cv-tree-list-item>
                 </cv-tree-list-item>
-                <cv-tree-list-item icon="${icon}">
-                    <div slot="label">PDCRAdmin</div>
+            </cv-tree-list-item>
+            <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })}>
+                <div slot="label">PDCRAdmin</div>
+            </cv-tree-list-item>
+            <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })}>
+                <div slot="label">PDCRAdmin</div>
+            </cv-tree-list-item>
+        `),
+    'width: 300px; border-left: solid white 1px; border-right: solid white 1px',
+  );
+
+const renderWithLeafItems = (args) =>
+  wrapTreeList(`
+        <cv-tree-list-item ${buildTreeListItemAttrs({
+          icon: args.icon,
+          isOpen: args.isOpen,
+        })}>
+            <div slot="label">Folders</div>
+            <cv-tree-list-item ${buildNestedItemAttrs(args, 0)} slot="nest">
+                <div slot="label">Documents</div>
+                <cv-tree-list-item ${buildNestedItemAttrs(args, 1, { isOpen: false })} slot="nest" isLeafItem="true">
+                    <div slot="label">Resume.pdf</div>
                 </cv-tree-list-item>
-                <cv-tree-list-item icon="${icon}">
-                    <div slot="label">PDCRAdmin</div>
+                <cv-tree-list-item ${buildNestedItemAttrs(args, 1, { isOpen: false })} slot="nest" isLeafItem="true">
+                    <div slot="label">Cover Letter.docx</div>
                 </cv-tree-list-item>
-            </cv-tree-list>
-        </div>
-    `;
-};
-
-export const WithLeafItems = ({ icon }) => {
-  return `
-        <cv-tree-list>
-            <cv-tree-list-item icon="${icon}" isOpen="true">
-                <div slot="label">Folders</div>
-                <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="1" isOpen="true">
-                    <div slot="label">Documents</div>
-                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2" isLeafItem="true">
-                        <div slot="label">Resume.pdf</div>
-                    </cv-tree-list-item>
-                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2" isLeafItem="true">
-                        <div slot="label">Cover Letter.docx</div>
-                    </cv-tree-list-item>
+            </cv-tree-list-item>
+            <cv-tree-list-item ${buildNestedItemAttrs(args, 0)} slot="nest">
+                <div slot="label">Images</div>
+                <cv-tree-list-item ${buildNestedItemAttrs(args, 1, { isOpen: false })} slot="nest" isLeafItem="true">
+                    <div slot="label">photo1.jpg</div>
                 </cv-tree-list-item>
-                <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="1" isOpen="true">
-                    <div slot="label">Images</div>
-                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2" isLeafItem="true">
-                        <div slot="label">photo1.jpg</div>
-                    </cv-tree-list-item>
-                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2" isLeafItem="true">
-                        <div slot="label">photo2.png</div>
-                    </cv-tree-list-item>
-                    <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="2" isLeafItem="true">
-                        <div slot="label">photo3.gif</div>
-                    </cv-tree-list-item>
+                <cv-tree-list-item ${buildNestedItemAttrs(args, 1, { isOpen: false })} slot="nest" isLeafItem="true">
+                    <div slot="label">photo2.png</div>
                 </cv-tree-list-item>
-                <cv-tree-list-item icon="${icon}" slot="nest" indentLevel="1" isLeafItem="true">
-                    <div slot="label">README.md</div>
+                <cv-tree-list-item ${buildNestedItemAttrs(args, 1, { isOpen: false })} slot="nest" isLeafItem="true">
+                    <div slot="label">photo3.gif</div>
                 </cv-tree-list-item>
             </cv-tree-list-item>
-            <cv-tree-list-item icon="${icon}" isLeafItem="true">
-                <div slot="label">Empty File.txt</div>
+            <cv-tree-list-item ${buildNestedItemAttrs(args, 0, { isOpen: false })} slot="nest" isLeafItem="true">
+                <div slot="label">README.md</div>
             </cv-tree-list-item>
-        </cv-tree-list>
-    `;
+        </cv-tree-list-item>
+        <cv-tree-list-item ${buildTreeListItemAttrs({ icon: args.icon })} isLeafItem="true">
+            <div slot="label">Empty File.txt</div>
+        </cv-tree-list-item>
+    `);
+
+export const TreeList = {
+  render: renderTreeList,
+};
+
+export const TwoLineItems = {
+  render: renderTwoLineItems,
+};
+
+export const EmptyState = {
+  render: renderEmptyState,
+};
+
+export const OverflowTest = {
+  render: renderOverflowTest,
+};
+
+export const WithLeafItems = {
+  render: renderWithLeafItems,
 };
diff --git a/libs/components/src/typography/typography.stories.js b/libs/components/src/typography/typography.stories.js
index a3cf8160ec..5ff7362ca6 100644
--- a/libs/components/src/typography/typography.stories.js
+++ b/libs/components/src/typography/typography.stories.js
@@ -1,11 +1,6 @@
 import './typography';
 
-export default {
-  title: 'Components/Text',
-  tags: ['autodocs'],
-};
-
-export const Basic = () => {
+const renderTypography = () => {
   return `
     <cv-typography scale="headline1">Headline 1</cv-typography>
     <cv-typography scale="headline2">Headline 2</cv-typography>
@@ -22,3 +17,11 @@ export const Basic = () => {
     <cv-typography scale="body2">Body 2</cv-typography>
   `;
 };
+
+export default {
+  title: 'Components/Text',
+  render: renderTypography,
+  tags: ['autodocs'],
+};
+
+export const Basic = {};
diff --git a/libs/components/stories/demos/top-app-bar.component.js b/libs/components/stories/demos/top-app-bar.component.js
index 6a49f3bb6b..f4151e968b 100644
--- a/libs/components/stories/demos/top-app-bar.component.js
+++ b/libs/components/stories/demos/top-app-bar.component.js
@@ -20,10 +20,11 @@ export default (
     centerTitle,
     dense,
     prominent,
+    scrollTarget,
     showContent,
     showActionItems,
   } = {},
-  { parameters } = {}
+  { parameters } = {},
 ) => {
   const AppBarComponentElem = parameters?.fixed
     ? 'cv-top-app-bar-fixed'
@@ -47,7 +48,8 @@ export default (
       <${AppBarComponentElem}
           ${centerTitle ? 'centerTitle' : null}
           ${dense ? 'dense' : null}
-          ${prominent ? 'prominent' : null}>
+          ${prominent ? 'prominent' : null}
+          ${scrollTarget ? `scrollTarget="${scrollTarget}"` : ''}>
         <cv-icon-button slot="navigationIcon" icon="menu_open"></cv-icon-button>
         <div slot="title">${title}</div>
         ${actionItems}

From 748dc484ded0e7cb78d381484d34ec8f7d90968e Mon Sep 17 00:00:00 2001
From: Luis Caraveo <luis.caraveocabrera@teradata.com>
Date: Tue, 14 Apr 2026 12:24:47 -0600
Subject: [PATCH 2/2] fix(storybook): fixed errors in different stories

---
 .../src/side-sheet/side-sheet.stories.js      |  7 ++++--
 .../src/skeleton/skeleton.stories.js          | 23 +++++++++++++++----
 .../src/snackbar/snackbar.stories.js          |  2 +-
 libs/components/src/switch/switch.stories.js  |  8 +++----
 4 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/libs/components/src/side-sheet/side-sheet.stories.js b/libs/components/src/side-sheet/side-sheet.stories.js
index ccdcfe0d35..18c23664ae 100644
--- a/libs/components/src/side-sheet/side-sheet.stories.js
+++ b/libs/components/src/side-sheet/side-sheet.stories.js
@@ -4,6 +4,9 @@ import { Active as ActiveStatusHeader } from '../status-header/status-header.sto
 import tableRowSelectionContent from '../../stories/demos/table-row-selection.content.html?raw';
 import '../data-table/data-table.stories.scss';
 
+const renderStory = (story, args = {}) =>
+  story.render({ ...(story.args ?? {}), ...args });
+
 const attachSideSheetToggle = ({
   triggerSelector,
   sideSheetSelector,
@@ -111,9 +114,9 @@ export const StatusHeader = {
   args: {
     noPadding: true,
     width: '800px',
-    content: `${ActiveStatusHeader({
+    content: `${renderStory(ActiveStatusHeader, {
       state: 'active',
-      title: 'Example status from a side sheet',
+      titleText: 'Example status from a side sheet',
     })}
           ${tableRowSelectionContent}`,
   },
diff --git a/libs/components/src/skeleton/skeleton.stories.js b/libs/components/src/skeleton/skeleton.stories.js
index 2621f935bc..c7513ed824 100644
--- a/libs/components/src/skeleton/skeleton.stories.js
+++ b/libs/components/src/skeleton/skeleton.stories.js
@@ -1,12 +1,26 @@
 import '../checkbox/checkbox';
 import '../formfield/formfield';
 
-import { Basic } from '../typography/typography.stories';
+import typographyMeta, { Basic } from '../typography/typography.stories';
 import loremIpsumContent from '../../stories/demos/lorem-ipsum.content.html?raw';
 import tableProgressContent from '../../stories/demos/table-progress-indicator.content.html?raw';
 
 import 'skeleton-elements/css';
 
+const renderStory = (story, meta, args = {}) => {
+  if (typeof story === 'function') {
+    return story(args);
+  }
+
+  const render = story.render ?? meta?.render;
+
+  if (typeof render !== 'function') {
+    throw new Error('Story render function is not available');
+  }
+
+  return render({ ...(story.args ?? {}), ...args });
+};
+
 const applySkeletonClasses = (elements) => {
   Array.from(elements).forEach((element) => {
     element.classList.add(skeletonClsName);
@@ -24,8 +38,9 @@ const createSkeletonContainer = (content, applySkeleton) => {
 
 const renderSkeletonContent = (content) => {
   return createSkeletonContainer(content, (container) => {
-    container.classList.add(skeletonClsName);
-    container.classList.add(skeletonEffect);
+    applySkeletonClasses(
+      container.children.length ? container.children : [container],
+    );
   });
 };
 
@@ -38,7 +53,7 @@ const renderDataTable = () => {
 };
 
 const renderTypography = () => {
-  return renderSkeletonContent(`${Basic()}`);
+  return renderSkeletonContent(renderStory(Basic, typographyMeta));
 };
 
 const renderContent = () => {
diff --git a/libs/components/src/snackbar/snackbar.stories.js b/libs/components/src/snackbar/snackbar.stories.js
index 9231a4d52e..5eff01c43a 100644
--- a/libs/components/src/snackbar/snackbar.stories.js
+++ b/libs/components/src/snackbar/snackbar.stories.js
@@ -10,7 +10,7 @@ export default {
     leading: false,
     closeOnEscape: false,
     timeoutMs: '5000',
-    labelText: "Can't send photo. Retry in 5 seconds.",
+    label: "Can't send photo. Retry in 5 seconds.",
   },
   tags: ['autodocs'],
 };
diff --git a/libs/components/src/switch/switch.stories.js b/libs/components/src/switch/switch.stories.js
index 4991893ca2..49327b8a7e 100644
--- a/libs/components/src/switch/switch.stories.js
+++ b/libs/components/src/switch/switch.stories.js
@@ -4,13 +4,13 @@ import '../formfield/formfield';
 const renderSwitch = ({
   disabled,
   label = 'On/Off',
-  selected,
+  checked,
   name,
   value,
   onChange,
 }) => {
   const switchInput = document.createElement('cv-switch');
-  switchInput.selected = selected;
+  switchInput.checked = checked;
   switchInput.disabled = disabled;
   switchInput.ariaLabel = label;
 
@@ -45,7 +45,7 @@ export default {
     disabled: {
       control: 'boolean',
     },
-    selected: {
+    checked: {
       control: 'boolean',
     },
     name: { control: 'text' },
@@ -55,7 +55,7 @@ export default {
   },
   args: {
     disabled: false,
-    selected: false,
+    checked: false,
     name: '',
     value: '',
     label: 'On/Off',