@scania/tegel 1.0.1 → 1.0.3

package/dist/collection/stories/foundations/typography/typography-headline.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 export default {
   title: 'Foundations/Typography',
   parameters: {

package/dist/collection/stories/foundations/typography/typography-paragraph.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 export default {
   title: 'Foundations/Typography',
   parameters: {

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 import readme from "./readme.md";
 export default {
   title: 'Patterns/Navigation',

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 import readme from "./readme.md";
 export default {
   title: 'Patterns/Navigation',

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 import readme from "./readme.md";
 export default {
   title: 'Patterns/Navigation',

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 import readme from "./readme.md";
 export default {
   title: 'Patterns/Navigation',

package/dist/collection/stories/utility/color/background-color.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 export default {
   title: 'Utilities/Colors',
   parameters: {

package/dist/collection/stories/utility/color/text-color.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 export default {
   title: 'Utilities/Colors',
   parameters: {

package/dist/collection/types/Attributes.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/appendHiddenInput.js

@@ -0,0 +1,25 @@
+/** 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.
+ */
+const appendHiddenInput = (element, name, value, disabled, additionalAttributes) => {
+  let input = element.querySelector('input');
+  if (!element.querySelector('input')) {
+    input = element.ownerDocument.createElement('input');
+    input.type = 'hidden';
+    if (additionalAttributes) {
+      additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));
+    }
+    element.appendChild(input);
+  }
+  input.disabled = disabled;
+  input.name = name;
+  input.value = value || '';
+};
+export default appendHiddenInput;

package/dist/collection/utils/dfs.js

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+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;
+}
+export default dfs;

package/dist/collection/utils/findNextFocusableElement.js

@@ -0,0 +1,16 @@
+/**
+ * Find the next focusable element index in a list of focusable elements.
+ * @param items List of focusable elements, element with a attribute of disabled that is true will be skipped over.
+ * @param nextItemIndex The index in the list to start the search on.
+ */
+const findNextFocusableElement = (items, nextItemIndex) => {
+  if (items[nextItemIndex] === undefined) {
+    return 0;
+  }
+  for (let index = nextItemIndex; index < items.length; index++) {
+    if (!items[index].disabled) {
+      return index;
+    }
+  }
+};
+export default findNextFocusableElement;

package/dist/collection/utils/findPreviousFocusableElement.js

@@ -0,0 +1,17 @@
+/**
+ * Find the previous focusable element index in a list of focusable elements.
+ *
+ * @param items List of focusable elements, element with a attribute of disabled that is true will be skipped over.
+ * @param nextItemIndex The index in the list to start the search on.
+ */
+const findPreviousFocusableElement = (items, previousItemIndex) => {
+  if (items[previousItemIndex] === undefined) {
+    return items.length - 1;
+  }
+  for (let index = previousItemIndex; index >= 0; index--) {
+    if (!items[index].disabled) {
+      return index;
+    }
+  }
+};
+export default findPreviousFocusableElement;

package/dist/collection/utils/generateUniqueId.js

@@ -0,0 +1,25 @@
+/**
+ * Generates a reasonably unique string ID based on current time (minutes, seconds, milliseconds) and random numbers.
+ *
+ * This function combines the current time and random numbers to generate
+ * a unique string ID. The function assumes that it won't be called frequently
+ * enough to generate two identical IDs within a millisecond, or that the random
+ * number generator will produce the same value twice in quick succession.
+ *
+ * Note: The IDs generated by this function are not globally unique and their length may vary.
+ * For truly unique and fixed-length IDs, consider using a more robust method such as UUID.
+ *
+ * @returns {string} A unique string ID.
+ */
+function generateUniqueId() {
+  const now = new Date();
+  const timeInMilliseconds = now.getMinutes() * 60000 + now.getSeconds() * 1000 + now.getMilliseconds(); // Get current time in milliseconds from the start of the hour
+  const randomNum1 = Math.floor(Math.random() * 1000000); // Random number between 0 and 999999
+  const randomNum2 = Math.floor(Math.random() * 1000000); // Another random number
+  // Convert to base 36 (using numbers and letters) and remove '0.' from the random number
+  const uniqueString = randomNum1.toString(36).substring(2) +
+    timeInMilliseconds.toString(36) +
+    randomNum2.toString(36).substring(2);
+  return uniqueString;
+}
+export default generateUniqueId;

package/dist/collection/utils/getNestedChildOfSiblingsMatching.js

@@ -0,0 +1,22 @@
+// A higher-order function to find the nested child of siblings matching a predicate,
+import dfs from "./dfs";
+// 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;
+}
+export default getNestedChildOfSiblingsMatching;

package/dist/collection/utils/getNextNestedChildOfSiblingsMatching.js

@@ -0,0 +1,32 @@
+import getNestedChildOfSiblingsMatching from "./getNestedChildOfSiblingsMatching";
+import getNextSibling from "./getNextSibling";
+/**
+ * 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
+ */
+const getNextNestedChildOfSiblingsMatching = (element, searchPredicate) => getNestedChildOfSiblingsMatching(element, searchPredicate, getNextSibling);
+export default getNextNestedChildOfSiblingsMatching;

package/dist/collection/utils/getNextSibling.js

@@ -0,0 +1,2 @@
+const getNextSibling = (element) => element.nextElementSibling;
+export default getNextSibling;

package/dist/collection/utils/getPreviousNestedChildOfSiblingsMatching.js

@@ -0,0 +1,32 @@
+import getNestedChildOfSiblingsMatching from "./getNestedChildOfSiblingsMatching";
+import getPreviousSibling from "./getPreviousSibling";
+/**
+ * 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
+ */
+const getPreviousNestedChildOfSiblingsMatching = (element, searchPredicate) => getNestedChildOfSiblingsMatching(element, searchPredicate, getPreviousSibling);
+export default getPreviousNestedChildOfSiblingsMatching;

package/dist/collection/utils/getPreviousSibling.js

@@ -0,0 +1,2 @@
+const getPreviousSibling = (element) => element.previousElementSibling;
+export default getPreviousSibling;

package/dist/collection/utils/hasSlot.js

@@ -0,0 +1,8 @@
+/**
+ * Checks if the provided element has a slotted element
+ * in the slot with the corresponding slotName
+ * @param slotName the name of the slot.
+ * @param element the element to look for the slot within.
+ */
+const hasSlot = (slotName, element) => !!element.querySelector(`[slot="${slotName}"]`);
+export default hasSlot;

package/dist/collection/utils/inheritAriaAttributes.js

@@ -0,0 +1,74 @@
+import inheritAttributes from "./inheritAttributes";
+/**
+ * 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.
+ */
+const inheritAriaAttributes = (el, ignoreList) => {
+  let attributesToInherit = ariaAttributes;
+  if (ignoreList && ignoreList.length > 0) {
+    attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
+  }
+  return inheritAttributes(el, attributesToInherit);
+};
+export default inheritAriaAttributes;

package/dist/collection/utils/inheritAttributes.js

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+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;
+};
+export default inheritAttributes;

package/dist/collection/utils/isHeadingElement.js

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+const isHeadingElement = (el) => {
+  const tagName = el.tagName.toLowerCase();
+  const role = el.getAttribute('role');
+  return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName) || role === 'heading';
+};
+export default isHeadingElement;

package/dist/collection/utils/updateListChildrenRoles.js

@@ -0,0 +1,15 @@
+/**
+ * Loop through the children and add the 'listitem' role if needed.
+ * @param {Node} targetNode The node being updated.
+ * */
+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 default updateListChildrenRoles;

package/{components → dist/components}/checkbox.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { g as generateUniqueId } from './utils.js';
+import { g as generateUniqueId } from './generateUniqueId.js';
 
 const checkboxCss = ".sc-tds-checkbox-h{align-items:center;position:relative;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.tds-checkbox.sc-tds-checkbox *.sc-tds-checkbox{box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-checkbox-color);padding-left:var(--tds-spacing-element-4);padding-top:var(--tds-spacing-element-4);padding-bottom:var(--tds-spacing-element-4);cursor:pointer;display:flex;align-items:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox::before{content:\"\";position:absolute;width:100%;height:100%;left:0;top:0}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{border:1px solid var(--tds-checkbox-interaction-01);background-color:var(--tds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:focus::before{background-color:var(--tds-checkbox-background-focus);opacity:var(--tds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox{cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox::after{border-color:var(--tds-checkbox-border-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled+label.sc-tds-checkbox,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-grey-600);cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox:hover::before{display:none}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked::after{background-image:var(--tds-checkbox-background-img);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::after{background-image:var(--tds-checkbox-background-img-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}";
 

package/dist/components/dfs.js

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+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;
+}
+
+export { dfs as d };

package/dist/components/generateUniqueId.js

@@ -0,0 +1,26 @@
+/**
+ * Generates a reasonably unique string ID based on current time (minutes, seconds, milliseconds) and random numbers.
+ *
+ * This function combines the current time and random numbers to generate
+ * a unique string ID. The function assumes that it won't be called frequently
+ * enough to generate two identical IDs within a millisecond, or that the random
+ * number generator will produce the same value twice in quick succession.
+ *
+ * Note: The IDs generated by this function are not globally unique and their length may vary.
+ * For truly unique and fixed-length IDs, consider using a more robust method such as UUID.
+ *
+ * @returns {string} A unique string ID.
+ */
+function generateUniqueId() {
+  const now = new Date();
+  const timeInMilliseconds = now.getMinutes() * 60000 + now.getSeconds() * 1000 + now.getMilliseconds(); // Get current time in milliseconds from the start of the hour
+  const randomNum1 = Math.floor(Math.random() * 1000000); // Random number between 0 and 999999
+  const randomNum2 = Math.floor(Math.random() * 1000000); // Another random number
+  // Convert to base 36 (using numbers and letters) and remove '0.' from the random number
+  const uniqueString = randomNum1.toString(36).substring(2) +
+    timeInMilliseconds.toString(36) +
+    randomNum2.toString(36).substring(2);
+  return uniqueString;
+}
+
+export { generateUniqueId as g };

package/dist/components/getPreviousNestedChildOfSiblingsMatching.js

@@ -0,0 +1,68 @@
+import { d as dfs } from './dfs.js';
+
+/**
+ * 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.
+ */
+const isHeadingElement = (el) => {
+  const tagName = el.tagName.toLowerCase();
+  const role = el.getAttribute('role');
+  return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName) || role === 'heading';
+};
+
+// 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;
+}
+
+const getPreviousSibling = (element) => element.previousElementSibling;
+
+/**
+ * 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
+ */
+const getPreviousNestedChildOfSiblingsMatching = (element, searchPredicate) => getNestedChildOfSiblingsMatching(element, searchPredicate, getPreviousSibling);
+
+export { getPreviousNestedChildOfSiblingsMatching as g, isHeadingElement as i };

package/dist/components/hasSlot.js

@@ -0,0 +1,9 @@
+/**
+ * Checks if the provided element has a slotted element
+ * in the slot with the corresponding slotName
+ * @param slotName the name of the slot.
+ * @param element the element to look for the slot within.
+ */
+const hasSlot = (slotName, element) => !!element.querySelector(`[slot="${slotName}"]`);
+
+export { hasSlot as h };

package/{components → dist/components}/header-dropdown-list.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { e as getPreviousNestedChildOfSiblingsMatching, j as isHeadingElement } from './utils.js';
+import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './getPreviousNestedChildOfSiblingsMatching.js';
 
 const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:unset;background-color:var(--tds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([size=lg]){width:320px}";
 

package/{components → dist/components}/header-item.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as dfs } from './utils.js';
+import { d as dfs } from './dfs.js';
 import { d as defineCustomElement$1 } from './core-header-item.js';
 
 const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--tds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--tds-nav-item-border-color-active)}";

package/{components → dist/components}/header-launcher-button.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { i as inheritAriaAttributes } from './utils.js';
+import { i as inheritAriaAttributes } from './inheritAriaAttributes.js';
 import { d as defineCustomElement$3 } from './core-header-item.js';
 import { d as defineCustomElement$2 } from './header-item.js';
 import { d as defineCustomElement$1 } from './icon.js';

package/{components → dist/components}/icon.js

@@ -11,12 +11,14 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.setIcons = () => this.arrayOfIcons.map((element) => {
+      var _a;
       if (element.name === this.name) {
-        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, h("title", null, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, h("title", null, (_a = this.svgTitle) !== null && _a !== void 0 ? _a : `${element.name} icon`), h("path", { fill: "currentColor", d: element.definition })));
       }
     });
     this.name = 'truck';
     this.size = '16px';
+    this.svgTitle = undefined;
     this.icons_object = iconsCollection;
     this.arrayOfIcons = [];
   }
@@ -39,6 +41,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
 }, [1, "tds-icon", {
     "name": [513],
     "size": [513],
+    "svgTitle": [1, "svg-title"],
     "icons_object": [32],
     "arrayOfIcons": [32]
   }]);