@scania/tegel 0.0.5 → 0.0.7

package/dist/collection/patterns-stories/navigation/navigation-manyitems.stories.js

@@ -0,0 +1,245 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Patterns/Navigation',
+  parameters: {
+    notes: {
+      Readme: readme,
+    },
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    dummyHtml: {
+      name: 'Dummy content',
+      description: 'Some html to try out in the main section.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: { summary: null },
+      },
+    },
+  },
+  args: {
+    dummyHtml: `<br /><p style="color:#f3f3f3">"I have seen the will of the deceased wife," said he. "To determine its exact meaning I have been obliged to work out the present prices of the investments with which it is concerned. The total income, which at the time of the wife's death was little short of 1100 pounds, is now, through the fall in agricultural prices, not more than 750 pounds. Each daughter can claim an income of 250 pounds, in case of marriage. It is evident, therefore, that if both girls had married, this beauty would have had a mere pittance, while even one of them would cripple him to a very serious extent. My morning's work has not been wasted, since it has proved that he has the very strongest motives for standing in the way of anything of the sort. And now, Watson, this is too serious for dawdling, especially as the old man is aware that we are interesting ourselves in his affairs; so if you are ready, we shall call a cab and drive to Waterloo. I should be very much obliged if you would slip your revolver into your pocket. An Eley's No. 2 is an excellent argument with gentlemen who can twist steel pokers into knots. That and a tooth-brush are, I think, all that we need."</p><p style="color:#f3f3f3">At Waterloo we were fortunate in catching a train for Leatherhead, where we hired a trap at the station inn and drove for four or five miles through the lovely Surrey lanes. It was a perfect day, with a bright sun and a few fleecy clouds in the heavens. The trees and wayside hedges were just throwing out their first green shoots, and the air was full of the pleasant smell of the moist earth. To me at least there was a strange contrast between the sweet promise of the spring and this sinister quest upon which we were engaged. My companion sat in the front of the trap, his arms folded, his hat pulled down over his eyes, and his chin sunk upon his breast, buried in the deepest thought. Suddenly, however, he started, tapped me on the shoulder, and pointed over the meadows.</p><p style="color:#f3f3f3">"Look there!" said he.</p><p style="color:#f3f3f3">A heavily timbered park stretched up in a gentle slope, thickening into a grove at the highest point. From amid the branches there jutted out the grey gables and high roof-tree of a very old mansion.</p><p style="color:#f3f3f3">"Stoke Moran?" said he.</p><p style="color:#f3f3f3">"Yes, sir, that be the house of Dr. Grimesby Roylott," remarked the driver.</p><p style="color:#f3f3f3">"There is some building going on there," said Holmes; "that is where we are going."</p><p style="color:#f3f3f3">"There's the village," said the driver, pointing to a cluster of roofs some distance to the left; "but if you want to get to the house, you'll find it shorter to get over this stile, and so by the foot-path over the fields. There it is, where the lady is walking."</p><p style="color:#f3f3f3">"And the lady, I fancy, is Miss Stoner," observed Holmes, shading his eyes. "Yes, I think we had better do as you suggest."</p><p style="color:#f3f3f3">We got off, paid our fare, and the trap rattled back on its way to Leatherhead.</p><p style="color:#f3f3f3">"I thought it as well," said Holmes as we climbed the stile, "that this fellow should think we had come here as architects, or on some definite business. It may stop his gossip. Good-afternoon, Miss Stoner. You see that we have been as good as our word."</p><p style="color:#f3f3f3">Our client of the morning had hurried forward to meet us with a face which spoke her joy. "I have been waiting so eagerly for you," she cried, shaking hands with us warmly. "All has turned out splendidly. Dr. Roylott has gone to town, and it is unlikely that he will be back before evening."</p><p style="color:#f3f3f3">"We have had the pleasure of making the doctor's acquaintance," said Holmes, and in a few words he sketched out what had occurred. Miss Stoner turned white to the lips as she listened.</p><p style="color:#f3f3f3">"I have seen the will of the deceased wife," said he. "To determine its exact meaning I have been obliged to work out the present prices of the investments with which it is concerned. The total income, which at the time of the wife's death was little short of 1100 pounds, is now, through the fall in agricultural prices, not more than 750 pounds. Each daughter can claim an income of 250 pounds, in case of marriage. It is evident, therefore, that if both girls had married, this beauty would have had a mere pittance, while even one of them would cripple him to a very serious extent. My morning's work has not been wasted, since it has proved that he has the very strongest motives for standing in the way of anything of the sort. And now, Watson, this is too serious for dawdling, especially as the old man is aware that we are interesting ourselves in his affairs; so if you are ready, we shall call a cab and drive to Waterloo. I should be very much obliged if you would slip your revolver into your pocket. An Eley's No. 2 is an excellent argument with gentlemen who can twist steel pokers into knots. That and a tooth-brush are, I think, all that we need."</p><p style="color:#f3f3f3">At Waterloo we were fortunate in catching a train for Leatherhead, where we hired a trap at the station inn and drove for four or five miles through the lovely Surrey lanes. It was a perfect day, with a bright sun and a few fleecy clouds in the heavens. The trees and wayside hedges were just throwing out their first green shoots, and the air was full of the pleasant smell of the moist earth. To me at least there was a strange contrast between the sweet promise of the spring and this sinister quest upon which we were engaged. My companion sat in the front of the trap, his arms folded, his hat pulled down over his eyes, and his chin sunk upon his breast, buried in the deepest thought. Suddenly, however, he started, tapped me on the shoulder, and pointed over the meadows.</p><p style="color:#f3f3f3">"Look there!" said he.</p><p style="color:#f3f3f3">A heavily timbered park stretched up in a gentle slope, thickening into a grove at the highest point. From amid the branches there jutted out the grey gables and high roof-tree of a very old mansion.</p><p style="color:#f3f3f3">"Stoke Moran?" said he.</p><p style="color:#f3f3f3">"Yes, sir, that be the house of Dr. Grimesby Roylott," remarked the driver.</p><p style="color:#f3f3f3">"There is some building going on there," said Holmes; "that is where we are going."</p><p style="color:#f3f3f3">"There's the village," said the driver, pointing to a cluster of roofs some distance to the left; "but if you want to get to the house, you'll find it shorter to get over this stile, and so by the foot-path over the fields. There it is, where the lady is walking."</p><p style="color:#f3f3f3">"And the lady, I fancy, is Miss Stoner," observed Holmes, shading his eyes. "Yes, I think we had better do as you suggest."</p><p style="color:#f3f3f3">We got off, paid our fare, and the trap rattled back on its way to Leatherhead.</p><p style="color:#f3f3f3">"I thought it as well," said Holmes as we climbed the stile, "that this fellow should think we had come here as architects, or on some definite business. It may stop his gossip. Good-afternoon, Miss Stoner. You see that we have been as good as our word."</p><p style="color:#f3f3f3">Our client of the morning had hurried forward to meet us with a face which spoke her joy. "I have been waiting so eagerly for you," she cried, shaking hands with us warmly. "All has turned out splendidly. Dr. Roylott has gone to town, and it is unlikely that he will be back before evening."</p><p style="color:#f3f3f3">"We have had the pleasure of making the doctor's acquaintance," said Holmes, and in a few words he sketched out what had occurred. Miss Stoner turned white to the lips as she listened.</p>`,
+  },
+};
+const Template = ({ dummyHtml }) => formatHtmlPreview(`
+    <script>
+      /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
+      window.demoSideMenu = document.querySelector('#demo-side-menu');
+      window.demoHamburger = document.querySelector('#demo-hamburger');
+    </script>
+    <style>
+      :root {
+        --app-bar-height: 64px;
+      }
+      /* Note: to make the layout fill the entire viewport height you'll need to set the */
+      /* height of the parent element and all of its ancestors to 100%. */
+      /* Please note that using 'vh' for this can cause issues on some mobile browsers. */
+      .demo-layout {
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+      .demo-header {
+        position: sticky;
+        top: 0;
+      }
+      .demo-wrap-side-menu-and-main {
+        display: flex;
+        flex-grow: 1;
+      }
+
+      /* The lg breakpoint is used here to match the breakpoint used in the header & sidemenu. */
+      @media (min-width: 992px) {
+        #demo-side-menu {
+          /* We suggest you attach the persistent side menu to your layout like this: */
+          height: calc(100vh - var(--app-bar-height));
+          position: sticky;
+          top: var(--app-bar-height);
+          left: 0px;
+        }
+      }
+
+      /* If an extra button in the header is required except on */
+      /* very narrow screens, you can use classes like these: */
+      .demo-hide {
+        display: none;
+      }
+
+      @media (min-width: 375px) {
+        .demo-xs-hide {
+          display: none;
+        }
+        .demo-xs-show {
+          display: block;
+        }
+      }
+    </style>
+
+  <div class="demo-layout">
+    <sdds-header class="demo-header">
+      <sdds-header-hamburger onclick="demoSideMenu.open = true;demoHamburger.setAttribute('aria-expanded', true);" aria-label="Open application drawer" aria-haspopup="true" aria-expanded="false"></sdds-header-hamburger>
+
+      <sdds-header-title>
+        Example: Many items
+      </sdds-header-title>
+
+      <sdds-header-item slot="end">
+        <button onclick="alert('clicked')">
+          <sdds-icon name="calendar" size="20px"></sdds-icon>
+        </button>
+      </sdds-header-item>
+
+      <sdds-header-launcher slot="end">
+        <sdds-header-launcher-list-title>Good</sdds-header-launcher-list-title>
+        <sdds-header-launcher-list>
+          <sdds-header-launcher-list-item>
+            <a href="https://tegel.scania.com">Spider-Man</a>
+          </sdds-header-launcher-list-item>
+          <sdds-header-launcher-list-item>
+            <a href="https://tegel.scania.com">Groot</a>
+          </sdds-header-launcher-list-item>
+        </sdds-header-launcher-list>
+        <sdds-header-launcher-list-title>Evil</sdds-header-launcher-list-title>
+        <sdds-header-launcher-list>
+          <sdds-header-launcher-list-item>
+            <a href="https://tegel.scania.com">Dr Octopus</a>
+          </sdds-header-launcher-list-item>
+          <sdds-header-launcher-list-item>
+            <a href="https://tegel.scania.com">Apocalypse</a>
+          </sdds-header-launcher-list-item>
+          <sdds-header-launcher-list-item>
+            <a href="https://tegel.scania.com">Scarlet Witch</a>
+          </sdds-header-launcher-list-item>
+        </sdds-header-launcher-list>
+      </sdds-header-launcher>
+      
+      <sdds-header-dropdown slot="end" placement="end" no-dropdown-icon class="demo-hide demo-xs-show">
+        <img slot="button-icon" src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" alt="User menu."/>
+        <sdds-header-dropdown-list type="lg">
+          <sdds-header-dropdown-list-user
+            heading="Name Nameson"
+            subheading="Company name">
+          </sdds-header-dropdown-list-user>
+          <sdds-header-dropdown-list-item>
+            <a href="https://www.scania.com">Link here</a>
+          </sdds-header-dropdown-list-item>
+          <sdds-header-dropdown-list-item>
+            <a href="https://www.scania.com">Link there</a>
+          </sdds-header-dropdown-list-item>
+        </sdds-header-dropdown-list>
+      </sdds-header-dropdown>
+      
+      
+      <sdds-header-brand-symbol slot="end" link-href="https://design.scania.com" aria-label="Scania - red gryphon on blue shield">
+      </sdds-header-brand-symbol>
+
+    </sdds-header>
+
+    <div class="demo-wrap-side-menu-and-main">
+      <!-- Note: the "persistent" property keeps the menu open on desktop -->
+      <sdds-side-menu id="demo-side-menu" aria-label="Side menu" persistent>
+        <sdds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></sdds-side-menu-overlay>
+
+        <sdds-side-menu-close-button slot="close-button" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></sdds-side-menu-close-button>
+
+        <sdds-side-menu-item>
+          <button>
+            <sdds-icon name="timer" size="24"></sdds-icon>
+            About us
+          </button>
+        </sdds-side-menu-item>
+
+        <sdds-side-menu-item>
+          <a href="https://www.scania.com">
+            <sdds-icon name="truck" size="24"></sdds-icon>
+            Trucks
+          </a>
+        </sdds-side-menu-item>
+
+        <sdds-side-menu-item>
+          <button>
+            <sdds-icon name="wifi" size="24"></sdds-icon>
+            Our services
+          </button>
+        </sdds-side-menu-item>
+
+        <sdds-side-menu-dropdown default-open selected>
+          <sdds-icon slot="button-icon" name="profile" size="24"></sdds-icon>
+          <span slot="button-label">
+            Wheel types
+          </span>
+          <sdds-side-menu-dropdown-list>
+            <sdds-side-menu-dropdown-list-item>
+              <a href="https://www.scania.com">Hub-centric wheel</a>
+            </sdds-side-menu-dropdown-list-item>
+            <sdds-side-menu-dropdown-list-item selected>
+              <a href="https://www.scania.com">Rim wheel</a>
+            </sdds-side-menu-dropdown-list-item>
+          </sdds-side-menu-dropdown-list>
+        </sdds-side-menu-dropdown>
+
+        <sdds-side-menu-item>
+          <button>
+            <sdds-icon name="star" size="24"></sdds-icon>
+            Values
+          </button>
+        </sdds-side-menu-item>
+
+
+        <sdds-side-menu-item slot="end">
+          <button>
+            <sdds-icon name="calendar" size="24"></sdds-icon>
+            My Calendar
+          </button>
+        </sdds-side-menu-item>
+
+        <sdds-side-menu-item slot="end" class="demo-xs-hide">
+          <button>
+            <sdds-side-menu-user heading="Name Namesson" subheading="Company name">
+              <img
+                slot="image"
+                src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg"
+                alt="User menu."
+              />
+            </sdds-side-menu-user>
+          </button>
+        </sdds-side-menu-item>
+
+        <sdds-side-menu-collapse-button slot="sticky-end" onclick="demoSideMenu.collapsed = !demoSideMenu.collapsed;"></sdds-side-menu-collapse-button>
+
+      </sdds-side-menu>
+
+      <main class="sdds-u-h-100 sdds-u-p3" style="box-sizing: border-box;">
+        <p>If there are more than a few buttons and/or links in the header, they might not fit on medium size screens. 
+        <br/>In that case they should be placed in a persistent side menu — which is always visible on large screens.</p>
+
+        <p><i>Note: The side menu is sticky, and should not scroll with the main content of the page.</i></p>
+
+        <p><i>Note: The collapse button is optional.</i></p>
+
+        ${dummyHtml}
+      </main>
+    </div>
+  </div>
+  `);
+export const ManyNavigationItems = Template.bind({});

package/dist/collection/patterns-stories/navigation/navigation-user-menu.stories.js

@@ -0,0 +1,139 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Patterns/Navigation',
+  parameters: {
+    notes: {
+      Readme: readme,
+    },
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    siteName: {
+      name: 'Site name',
+      description: 'Set a custom title for the header',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    siteName: 'Application',
+  },
+};
+const Template = () => formatHtmlPreview(`
+    <script>
+      /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
+      window.demoSideMenu = document.querySelector('#demo-side-menu');
+      window.demoHamburger = document.querySelector('#demo-hamburger');
+    </script>
+    <style>
+      /* If an extra button in the header is required except on 
+      very narrow screens, you can use classes like these: */
+      .demo-hide {
+        display: none;
+      }
+
+      @media (min-width: 375px) {
+        .demo-xs-hide {
+          display: none;
+        }
+        .demo-xs-show {
+          display: block;
+        }
+      }
+    </style>
+
+
+    <div class="demo-layout">
+      <sdds-header>
+        <sdds-header-hamburger class="demo-xs-hide" onclick="demoSideMenu.open = true;demoHamburger.setAttribute('aria-expanded', true);" aria-label="Open application drawer" aria-haspopup="true" aria-expanded="false"></sdds-header-hamburger>
+
+        <sdds-header-title>
+          Example: User menu
+        </sdds-header-title>
+
+        <sdds-header-launcher slot="end">
+          <sdds-header-launcher-list-title>Sustainable tools</sdds-header-launcher-list-title>
+          <sdds-header-launcher-list>
+            <sdds-header-launcher-list-item>
+              <a href="https://tegel.scania.com">Button</a>
+            </sdds-header-launcher-list-item>
+            <sdds-header-launcher-list-item>
+              <a href="https://tegel.scania.com">Button</a>
+            </sdds-header-launcher-list-item>
+          </sdds-header-launcher-list>
+        </sdds-header-launcher>
+        
+        <sdds-header-dropdown slot="end" class="demo-hide demo-xs-show" no-dropdown-icon selected>
+          <img slot="button-icon" src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" alt="User menu."/>
+          <sdds-header-dropdown-list type="lg">
+            <sdds-header-dropdown-list-user
+              heading="Name Nameson"
+              subheading="Company name">
+            </sdds-header-dropdown-list-user>
+            <sdds-header-dropdown-list-item selected>
+              <a href="https://www.scania.com">My Instructions</a>
+            </sdds-header-dropdown-list-item>
+            <sdds-header-dropdown-list-item>
+              <a href="https://www.scania.com">Task List</a>
+            </sdds-header-dropdown-list-item>
+          </sdds-header-dropdown-list>
+        </sdds-header-dropdown>
+
+        <sdds-header-brand-symbol slot="end" link-href="https://design.scania.com" aria-label="Scania - red gryphon on blue shield">
+        </sdds-header-brand-symbol>
+
+      </sdds-header>
+
+      <sdds-side-menu id="demo-side-menu" aria-label="Side menu">
+        <sdds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></sdds-side-menu-overlay>
+
+        <sdds-side-menu-close-button slot="close-button" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></sdds-side-menu-close-button>
+
+        <sdds-side-menu-dropdown slot="end" class="demo-xs-hide" selected default-open>
+          <sdds-side-menu-user 
+            slot="button-label" 
+            heading="Name Namesson" 
+            subheading="Company name" 
+            img-src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" 
+            img-alt="">
+          </sdds-side-menu-user>
+          <sdds-side-menu-dropdown-list type="lg">
+            <sdds-side-menu-dropdown-list-item selected>
+              <a href="https://www.scania.com">My Instructions</a>
+            </sdds-side-menu-dropdown-list-item>
+            <sdds-side-menu-dropdown-list-item>
+              <a href="https://www.scania.com">Task List</a>
+            </sdds-side-menu-dropdown-list-item>
+          </sdds-side-menu-dropdown-list>
+        </sdds-side-menu-dropdown>
+
+
+      </sdds-side-menu>
+
+      <main class="demo-main sdds-u-p3" style="box-sizing: border-box;">
+        <p>If you display a user menu, a side menu is needed to show it on extra small screens.</p>
+        <br/>
+        <p><i>Tip: Resize the window to see the user menu move in to a side menu drawer.</i></p>
+      </main>
+    </div>
+  `);
+export const UserMenu = Template.bind({});

package/dist/collection/utils/utils.js

@@ -10,4 +10,276 @@ export const formatHtmlPreview = (htmlStr) => prettier.format(htmlStr, Object.as
 export function demoFormat(first, middle, last) {
   return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
-//# sourceMappingURL=utils.js.map
+/** reference: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts#L346
+ *
+ * Appends a hidden input element to allow the component
+ * work within and get picked up by a <form>.
+ * @param element The element on which the input with be appended.
+ * @param name Name of the input.
+ * @param value The value of the input.
+ * @param disabled Disables the input if true.
+ * @param additionalAttributes Additional attributes that should be passed to the input.
+ */
+export const appendHiddenInput = (element, name, value, disabled, additionalAttributes) => {
+  const input = element.ownerDocument.createElement('input');
+  input.type = 'hidden';
+  element.appendChild(input);
+  input.disabled = disabled;
+  input.name = name;
+  input.value = value || '';
+  if (additionalAttributes) {
+    additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));
+  }
+};
+/**
+ * Elements inside of web components sometimes need to inherit global attributes
+ * set on the host. For example, the inner input in `ion-input` should inherit
+ * the `title` attribute that developers set directly on `ion-input`. This
+ * helper function should be called in componentWillLoad and assigned to a variable
+ * that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+export const inheritAttributes = (el, attributes = []) => {
+  const attributeObject = {};
+  attributes.forEach((attr) => {
+    if (el.hasAttribute(attr)) {
+      const value = el.getAttribute(attr);
+      if (value !== null) {
+        attributeObject[attr] = el.getAttribute(attr);
+      }
+      el.removeAttribute(attr);
+    }
+  });
+  return attributeObject;
+};
+/**
+ * List of available ARIA attributes + `role`.
+ * Removed deprecated attributes.
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+ */
+const ariaAttributes = [
+  'role',
+  'aria-activedescendant',
+  'aria-atomic',
+  'aria-autocomplete',
+  'aria-braillelabel',
+  'aria-brailleroledescription',
+  'aria-busy',
+  'aria-checked',
+  'aria-colcount',
+  'aria-colindex',
+  'aria-colindextext',
+  'aria-colspan',
+  'aria-controls',
+  'aria-current',
+  'aria-describedby',
+  'aria-description',
+  'aria-details',
+  'aria-disabled',
+  'aria-errormessage',
+  'aria-expanded',
+  'aria-flowto',
+  'aria-haspopup',
+  'aria-hidden',
+  'aria-invalid',
+  'aria-keyshortcuts',
+  'aria-label',
+  'aria-labelledby',
+  'aria-level',
+  'aria-live',
+  'aria-multiline',
+  'aria-multiselectable',
+  'aria-orientation',
+  'aria-owns',
+  'aria-placeholder',
+  'aria-posinset',
+  'aria-pressed',
+  'aria-readonly',
+  'aria-relevant',
+  'aria-required',
+  'aria-roledescription',
+  'aria-rowcount',
+  'aria-rowindex',
+  'aria-rowindextext',
+  'aria-rowspan',
+  'aria-selected',
+  'aria-setsize',
+  'aria-sort',
+  'aria-valuemax',
+  'aria-valuemin',
+  'aria-valuenow',
+  'aria-valuetext',
+];
+/**
+ * Returns an array of aria attributes that should be copied from
+ * the shadow host element to a target within the light DOM.
+ * @param el The element that the attributes should be copied from.
+ * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
+ * Use this in instances where we manually specify aria attributes on the `<Host>` element.
+ */
+export const inheritAriaAttributes = (el, ignoreList) => {
+  let attributesToInherit = ariaAttributes;
+  if (ignoreList && ignoreList.length > 0) {
+    attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
+  }
+  return inheritAttributes(el, attributesToInherit);
+};
+/**
+ * Recursively finds the first matching element or child based on a provided condition.
+ *
+ * @param {ParentNode} parentNode - The starting element or shadow root to search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - The condition to match the element, receives an HTMLElement and returns a boolean.
+ * @param {boolean} [pierceShadow=false] - Whether to pierce through shadow DOM boundaries.
+ * @returns {HTMLElement | null} - The first matching element or child, or null if none is found.
+ */
+export function dfs(parentNode, searchPredicate, pierceShadow = false) {
+  if (parentNode instanceof HTMLElement && searchPredicate(parentNode)) {
+    return parentNode;
+  }
+  const childElements = parentNode instanceof HTMLSlotElement
+    ? parentNode.assignedElements({ flatten: true })
+    : Array.from(parentNode.children);
+  if (pierceShadow && parentNode instanceof HTMLElement && parentNode.shadowRoot) {
+    childElements.push(...Array.from(parentNode.shadowRoot.children));
+  }
+  let foundElement = null;
+  childElements.some((child) => {
+    foundElement = dfs(child, searchPredicate, pierceShadow);
+    return foundElement !== null;
+  });
+  return foundElement;
+}
+// A higher-order function to find the nested child of siblings matching a predicate,
+// based on a sibling traversal function (getNextSibling or getPreviousSibling).
+function getNestedChildOfSiblingsMatching(element, searchPredicate, siblingTraversalFn) {
+  // Start with the sibling of the provided element.
+  let sibling = siblingTraversalFn(element);
+  // Iterate through the siblings until there are no more siblings.
+  while (sibling) {
+    // Use the dfs helper function to find the deeply nested child
+    // that matches the given criteria within the current sibling.
+    const nestedChild = dfs(sibling, searchPredicate);
+    // If a matching deeply nested child is found, return it.
+    if (nestedChild) {
+      return nestedChild;
+    }
+    // Move on to the next sibling.
+    sibling = siblingTraversalFn(sibling);
+  }
+  // If no matching deeply nested child is found, return null.
+  return null;
+}
+// Functions to get the next and previous sibling elements.
+const getNextSibling = (element) => element.nextElementSibling;
+const getPreviousSibling = (element) => element.previousElementSibling;
+/**
+ * Searches for a next sibling element that has a nested child element matching the provided search predicate.
+ * The search starts from the given element and proceeds to its next siblings, diving deep into each sibling's descendants.
+ *
+ * @param {HTMLElement} element - The starting element to begin the search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.
+ * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.
+ *
+ * @example
+ * // HTML structure:
+ * // <div>
+ * //   <h1>Heading 1</h1>
+ * //   <ul role="list">
+ * //     <li>Item 1</li>
+ * //   </ul>
+ * // </div>
+ * // <div>
+ * //   <h2>Heading 2</h2>
+ * //   <ul role="list">
+ * //     <li>Item 2</li>
+ * //   </ul>
+ * // </div>
+ *
+ * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';
+ * const startingElement = document.querySelector('[role="list"]');
+ * const headingEl = getNextNestedChildOfSiblingsMatching(startingElement, searchPredicate);
+ * console.log(headingEl); // Logs the <h2>Heading 2</h2> element
+ */
+export const getNextNestedChildOfSiblingsMatching = (element, searchPredicate) => getNestedChildOfSiblingsMatching(element, searchPredicate, getNextSibling);
+/**
+ * Searches for a previous sibling element that has a nested child element matching the provided search predicate.
+ * The search starts from the given element and proceeds to its previous siblings, diving deep into each sibling's descendants.
+ *
+ * @param {HTMLElement} element - The starting element to begin the search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.
+ * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.
+ *
+ * @example
+ * // HTML structure:
+ * // <div>
+ * //   <h1>Heading 1</h1>
+ * //   <ul role="list">
+ * //     <li>Item 1</li>
+ * //   </ul>
+ * // </div>
+ * // <div>
+ * //   <h2>Heading 2</h2>
+ * //   <ul role="list">
+ * //     <li>Item 2</li>
+ * //   </ul>
+ * // </div>
+ *
+ * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';
+ * const startingElement = document.querySelector('[role="list"]');
+ * const headingEl = getPreviousNestedChildOfSiblingsMatching(startingElement, searchPredicate);
+ * console.log(headingEl); // Logs the <h2>Heading 2</h2> element
+ */
+export const getPreviousNestedChildOfSiblingsMatching = (element, searchPredicate) => getNestedChildOfSiblingsMatching(element, searchPredicate, getPreviousSibling);
+/**
+ * Checks if the given element is a heading element (h1-h6) or has a role of "heading".
+ *
+ * @param {HTMLElement} el - The element to check.
+ * @returns {boolean} - True if the element is a heading element, false otherwise.
+ */
+export const isHeadingElement = (el) => {
+  const tagName = el.tagName.toLowerCase();
+  const role = el.getAttribute('role');
+  return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName) || role === 'heading';
+};
+/**
+ * Loop through the children and add the 'listitem' role if needed.
+ * @param {Node} targetNode The node being updated.
+ * */
+export const updateListChildrenRoles = (targetNode) => {
+  targetNode.childNodes.forEach((node) => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node;
+      if (element.tagName.toLowerCase() !== 'li' && element.getAttribute('role') !== 'listitem') {
+        element.setAttribute('role', 'listitem');
+      }
+    }
+  });
+};
+export function isFocusable(element) {
+  if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+  const focusableSelectors = [
+    'a[href]',
+    'area[href]',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'button:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+  ];
+  // Check if the element matches any of the focusable elements selectors
+  if (focusableSelectors.some((selector) => element.matches(selector))) {
+    return true;
+  }
+  // Check if the element is contenteditable
+  if (element.hasAttribute('contenteditable')) {
+    const contentEditableValue = element.getAttribute('contenteditable').toLowerCase();
+    if (contentEditableValue === 'true' || contentEditableValue === '') {
+      return true;
+    }
+  }
+  return false;
+}