@ukic/canary-web-components 3.0.0-canary.25 → 3.0.0-canary.27

package/dist/collection/components/ic-table-of-contents/ic-table-of-contents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-table-of-contents.js","sourceRoot":"","sources":["../../../../../src/components/ic-table-of-contents/ic-table-of-contents.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { IcPositionTopOrRight, IcSizes, IcThemeMode } from \"../../utils/types\";\nimport { TableOfContentsItem } from \"./ic-table-of-contents-item\";\nimport { DEVICE_SIZES } from \"../../utils/helpers\";\n\nconst TOC_CONTENT_CLASS = \"table-of-contents-content\";\nconst TOC_LIST_ITEMS_CLASS = \"table-of-contents-list-items\";\nconst TOC_ITEM_CLASS = \"table-of-contents-item-content\";\nconst TOC_CONTAINER_CLASS = \"table-of-contents-section-container\";\n\ninterface RankedElement extends Element {\n  rank: string;\n  textLabel: string;\n  treeChildren: RankedElement[];\n  trueIndex: number;\n}\n\n@Component({\n  tag: \"ic-table-of-contents\",\n  styleUrl: \"ic-table-of-contents.css\",\n  shadow: true,\n})\nexport class TableOfContents {\n  @Element() el: HTMLIcTableOfContentsElement;\n\n  /**\n   * Heading text of the table of contents.\n   */\n  @Prop() heading: string = \"Contents\";\n\n  /**\n   * Maximum heading level of child content that will generate an item in the table of contents. E.g. when set to '3', headings of <h4> and <h5> will not appear.\n   */\n  @Prop() maximumHeadingLevel: number = 3;\n\n  /**\n   * If `true`, the table of contents will display as black in the light theme, and white in dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * Whether the table of contents will appear on the right of or above child content on large viewport widths.\n   */\n  @Prop({ mutable: true }) position: IcPositionTopOrRight = \"right\";\n\n  /**\n   * Vertical offset to page scroll (in percent) when table of contents item is selected, to account for other page components like headers.\n   */\n  @Prop() setScrollHeight: number = 50;\n\n  /**\n   * The size of the table of contents items.\n   */\n  @Prop() size: IcSizes = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * If `true`, the table of contents item label will be truncated.\n   */\n  @Prop() truncate: boolean = true;\n\n  @State() focusedElement: number = 0;\n\n  // heading items\n  private referenceElements: HTMLElement[] = [];\n\n  // heights of heading items\n  private currentTargetHeights: number[] = [];\n\n  private resizeObserver: ResizeObserver;\n  // header height if present\n  private headerHeight: number = 0;\n  // holds initial position to allow for responsive changes\n  private initialPosition: IcPositionTopOrRight = this.position;\n\n  // suppress scroll listener to allow for click selection without scroll listener firing\n  @State() suppressListener: boolean = false;\n\n  @Watch(\"suppressListener\")\n  suppressListenerHandler(): void {\n    window.scrollTo(0, window.scrollY - this.headerHeight - 50);\n  }\n\n  /**\n   * Generate a TOC Item.\n   * These items are wrapped in empty tooltips that will be populated by addTooltip()\n   * @param tocHeading heading element to refer item information from\n   * @param children\n   * @returns TocItem ready to be rendered, with nested children if applicable\n   */\n  private createTocItem = (\n    tocHeading: RankedElement,\n    children?: HTMLElement[]\n  ): HTMLElement => {\n    const tocId = `toc_${tocHeading.id}`;\n\n    const tocItem = (\n      <TableOfContentsItem\n        id={tocId}\n        className={TOC_ITEM_CLASS}\n        variant={tocHeading.tagName.toLowerCase()}\n        label={tocHeading.textLabel}\n        target={tocHeading.id}\n        truncate={this.truncate}\n        selected={this.focusedElement}\n        updateSelected={this.updateOnSelection}\n        position={tocHeading.trueIndex}\n        size={this.size}\n      />\n    );\n\n    const wrappedToc = this.truncate ? (\n      <ic-tooltip target={tocId} label={tocHeading.innerHTML}>\n        {tocItem}\n      </ic-tooltip>\n    ) : (\n      tocItem\n    );\n    return (\n      <li\n        class={`table-of-contents-item  ${\n          this.monochrome && \"table-of-contents-item-monochrome\"\n        }`}\n      >\n        {wrappedToc}\n        {children ? <ol>{children}</ol> : null}\n      </li>\n    );\n  };\n\n  /**\n   * Render TocItems and recursively render children items if they exist\n   * @param listItem\n   * @returns HTML Element array to be rendered\n   */\n  private renderTocTree = (listItem: RankedElement): HTMLElement => {\n    let results;\n    if (listItem.treeChildren.length > 0) {\n      const children = listItem.treeChildren.map((i) => this.renderTocTree(i));\n      results = this.createTocItem(listItem, children);\n    } else {\n      results = this.createTocItem(listItem);\n    }\n    return results;\n  };\n\n  /**\n   * Scrape for heading elements on the page content within TOC, down to the maximumHeadingLevel.\n   * From this, generate an array of Elements with lower rank headings inserted as treeChildren on top level headings.\n   * @returns RankedElement[] array of HTML elements with additional props for rank, trueIndex and treeChildren array\n   */\n  private generateHeadingTree(): RankedElement[] {\n    const resultArray: RankedElement[] = [];\n\n    const headingDepth =\n      this.maximumHeadingLevel < 5\n        ? [\"h2\", \"h3\", \"h4\", \"h5\"]\n            .slice(\n              0,\n              (this.maximumHeadingLevel < 2 ? 2 : this.maximumHeadingLevel) - 1\n            )\n            .join(\",\")\n        : \"h2, h3, h4, h5\";\n    const headingList = this.el.querySelectorAll(headingDepth);\n\n    if (headingList) {\n      const headingArray = Array.from(headingList) as RankedElement[];\n      headingArray.forEach((item, index) => {\n        this.referenceElements.push(item as unknown as HTMLElement);\n        item.trueIndex = index;\n        item.rank = item.tagName.toLowerCase().slice(1, 2);\n        item.textLabel = item.textContent\n          ? item.textContent.trimStart().split(\"\\n\")[0]\n          : `${item.rank}-${index}`;\n        item.treeChildren = [];\n      });\n\n      let currentRank = headingArray[0]?.rank || 2;\n\n      headingArray.reverse().forEach((h, i) => {\n        if (!h.id) {\n          h.setAttribute(\"id\", h.textLabel.replace(/\\s+/g, \"-\").toLowerCase());\n        }\n        if (h.rank > currentRank && h.trueIndex > 0) {\n          if (headingArray[i] && headingArray[i].rank < h.rank) {\n            headingArray[i].treeChildren.unshift(h);\n          } else {\n            resultArray.push(h);\n          }\n        } else {\n          currentRank = h.rank;\n          resultArray.push(h);\n        }\n      });\n    }\n    return resultArray.reverse();\n  }\n\n  //container orientation logic\n  private containerPosition(): void {\n    if (this.position) {\n      const container = this.el.shadowRoot?.querySelector(\n        `.${TOC_CONTAINER_CLASS}`\n      ) as HTMLIcSectionContainerElement;\n      switch (this.position) {\n        case \"right\":\n          container.style.flexDirection = \"row-reverse\";\n          break;\n        case \"top\":\n          container.style.flexDirection = \"column\";\n          break;\n      }\n    }\n  }\n\n  /**\n   * Move the sidebar to the provided position on the page.\n   * Also, resize the sidebar to stretch the height of the selected heading.\n   * @param newPosition\n   */\n  private sidebarTranslation(newPosition: number): void {\n    const sidebar = this.el.shadowRoot?.querySelector(\n      \".table-of-contents-sidebar\"\n    ) as HTMLIcSectionContainerElement;\n\n    const itemHeights: number[] = [];\n    let previousItemsHeight = 0;\n    this.el.shadowRoot\n      ?.querySelectorAll(`.${TOC_ITEM_CLASS}`)\n      ?.forEach((item: any) => {\n        if (item !== null) itemHeights.push(item.offsetHeight);\n      });\n    itemHeights\n      .slice(0, newPosition)\n      .forEach((i) => (previousItemsHeight += i));\n\n    sidebar.style.transform = `translateY(${previousItemsHeight}px)`;\n    sidebar.style.height = `${itemHeights[newPosition]}px`;\n  }\n\n  // list item clicked logic\n  private updateOnSelection = (position: number) => {\n    this.suppressListener = true;\n    this.focusedElement = position;\n    this.sidebarTranslation(this.focusedElement);\n  };\n\n  // find element heights to be used to determine focused item from scroll position\n  private findElementsHeights() {\n    const contentBounds: number[] = [];\n    this.referenceElements.forEach((element) => {\n      contentBounds.push(element.getBoundingClientRect().top);\n    });\n    this.currentTargetHeights = contentBounds;\n  }\n\n  //resize window logic\n  private handleResizeBounds() {\n    if (window.innerWidth < DEVICE_SIZES.XL && this.initialPosition !== \"top\") {\n      this.position = \"top\";\n      this.containerPosition();\n    } else if (\n      window.innerWidth > DEVICE_SIZES.XL &&\n      this.position === \"top\" &&\n      this.initialPosition === \"right\"\n    ) {\n      this.position = \"right\";\n      this.containerPosition();\n    }\n    this.findElementsHeights();\n    this.truncateText();\n  }\n\n  // scroll logic\n  private updateSelectedItemFromScroll() {\n    const targetHeight =\n      window.scrollY + window.innerHeight * (this.setScrollHeight / 100);\n    if (window.scrollY === 0) {\n      this.focusedElement = 0;\n      this.sidebarTranslation(this.focusedElement);\n    } else if (targetHeight < this.currentTargetHeights[this.focusedElement]) {\n      const previousItems = this.currentTargetHeights.slice(\n        0,\n        this.focusedElement\n      );\n      const closestItem = previousItems.reduce((newValue, curr, index) => {\n        if (\n          Math.abs(curr - targetHeight) <\n          Math.abs(previousItems[newValue] - targetHeight)\n        )\n          return index;\n        return newValue;\n      }, 0);\n      this.focusedElement = closestItem;\n      this.sidebarTranslation(this.focusedElement);\n    } else if (\n      targetHeight > this.currentTargetHeights[this.focusedElement] &&\n      this.focusedElement !== this.currentTargetHeights.length\n    ) {\n      const relevantItems = this.currentTargetHeights.slice(\n        this.focusedElement\n      );\n\n      const closestItem = relevantItems.reduce((newValue, curr, index) => {\n        if (\n          Math.abs(curr - targetHeight) <\n            Math.abs(relevantItems[newValue] - targetHeight) &&\n          curr < targetHeight\n        )\n          return index;\n        return newValue;\n      }, 0);\n      if (closestItem + this.focusedElement !== this.focusedElement) {\n        this.focusedElement += closestItem;\n        this.sidebarTranslation(this.focusedElement);\n      }\n    }\n  }\n\n  // find header element height\n  private findHeaderElement(): number {\n    const element = document.querySelector(\"ic-page-header\");\n    if (element) {\n      return element.clientHeight;\n    }\n    const header = document.querySelector(\"header\");\n    if (header) {\n      return header.clientHeight;\n    }\n    return 0;\n  }\n\n  // add margin to the list based off the header element height\n  private addListMargin(): void {\n    const content = this.el.shadowRoot?.querySelector(\n      `.${TOC_CONTENT_CLASS}`\n    ) as HTMLDivElement;\n    content?.style.setProperty(\"top\", `${this.headerHeight}px`);\n  }\n\n  // add tooltip to the item if it is too wide\n  private addTooltip(item: any, widthBreakpoint: number) {\n    const itemLabel = item.querySelector(\".table-of-contents-item-label\");\n    if (item.parentNode?.tagName == \"IC-TOOLTIP\") {\n      const tooltip = item.parentNode;\n      if (itemLabel?.offsetWidth < itemLabel?.scrollWidth) {\n        const tooltipPosition =\n          window.innerWidth < widthBreakpoint\n            ? \"bottom\"\n            : this.position === \"right\"\n            ? \"left\"\n            : \"right\";\n        //Modify the ic-tooltip wrapped around the list item\n        tooltip.setAttribute(\"disable-click\", false);\n        tooltip.setAttribute(\"disable-hover\", false);\n        tooltip.setAttribute(\"placement\", tooltipPosition);\n        tooltip.setAttribute(\"target\", item.id);\n        tooltip.setAttribute(\"style\", \"overflow:hidden\");\n      } else {\n        //disable the tooltip if the item does not need to truncate\n        tooltip.setAttribute(\"disable-click\", true);\n        tooltip.setAttribute(\"disable-hover\", true);\n      }\n    }\n  }\n\n  // truncate text if it goes out of bounds of the container\n  private truncateText = () => {\n    const links = this.el.shadowRoot?.querySelectorAll(`.${TOC_ITEM_CLASS}`);\n    const contentList = this.el.shadowRoot?.querySelector(\n      `.${TOC_LIST_ITEMS_CLASS}`\n    );\n    if (contentList)\n      links?.forEach((item) => {\n        this.addTooltip(item, DEVICE_SIZES.S);\n      });\n  };\n\n  // initialise resize observer\n  componentWillLoad(): void {\n    this.resizeObserver = new ResizeObserver(() => this.handleResizeBounds());\n    this.resizeObserver.observe(this.el);\n  }\n\n  // initialise scroll listener\n  componentDidRender(): void {\n    document.addEventListener(\"scroll\", () => {\n      if (!this.suppressListener) this.updateSelectedItemFromScroll();\n      else this.suppressListener = false;\n    });\n    this.containerPosition();\n    this.findElementsHeights();\n    this.sidebarTranslation(this.focusedElement);\n  }\n\n  // after component has loaded modify the list based of position, size and surrounding elements\n  async componentDidLoad(): Promise<void> {\n    this.focusedElement = 0;\n    this.headerHeight = this.findHeaderElement();\n    this.addListMargin();\n    this.truncateText();\n    this.findElementsHeights();\n    this.sidebarTranslation(this.focusedElement);\n  }\n\n  // Component is a wrapper for page contents, and will build list from heading items\n  render() {\n    const { heading, monochrome, position, size, theme } = this;\n    return (\n      <Host class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}>\n        <ic-section-container class={TOC_CONTAINER_CLASS} aligned=\"full-width\">\n          <div\n            role=\"navigation\"\n            class={`${TOC_CONTENT_CLASS} ${\n              position === \"top\" && \"table-of-contents-position-top\"\n            }\n            ${position === \"right\" && \"table-of-contents-position-side\"}`}\n          >\n            <ic-typography\n              class={`table-of-contents-heading ${size}`}\n              variant=\"subtitle-large\"\n            >\n              {heading}\n            </ic-typography>\n            <div class=\"table-of-contents-list\">\n              <div\n                class={`table-of-contents-sidebar ${\n                  monochrome && `table-of-contents-sidebar-monochrome`\n                }\n                ${size}\n                `}\n              />\n              <ol class={TOC_LIST_ITEMS_CLASS}>\n                {this.generateHeadingTree().map((item) =>\n                  this.renderTocTree(item)\n                )}\n              </ol>\n            </div>\n          </div>\n          <slot></slot>\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-table-of-contents/ic-table-of-contents.stories.js

@@ -0,0 +1,291 @@
+import readme from "./readme.md";
+import { html } from "lit-html";
+const INLINE_RADIO = "inline-radio";
+export default {
+    title: "Web Components/Table of Contents",
+    component: "Table of Contents",
+    parameters: {
+        componentAPI: {
+            data: readme,
+        },
+    },
+};
+export const Default = {
+    render: () => html `
+    <div>
+      <ic-top-navigation app-title="ICDS" status="Coffee">
+        <svg
+          slot="app-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+          />
+        </svg>
+        <ic-navigation-item
+          slot="navigation"
+          label="Latte recipe"
+          href="#"
+        ></ic-navigation-item>
+      </ic-top-navigation>
+
+      <div style="display:flex; flex-direction:column; height:100%;">
+        <ic-page-header
+          heading="Latte recipe"
+          subheading="A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam."
+          reverse-order="true"
+          sticky="true"
+        ></ic-page-header>
+        <ic-table-of-contents position="right" set-scroll-height="100">
+          <div id="content" style="width:100%;">
+            <div style="height:100vh; background:gray">
+              <h2>What is a Latte</h2>
+              <p>Lorum ipsum etcetera</p>
+            </div>
+            <div style="height:100vh; background:darkgray">
+              <h2>Choosing the right milk</h2>
+              <p>
+                There is an interactive element here to test focus shifting with
+              </p>
+              <ic-button>Test Button</ic-button>
+            </div>
+            <div style="height:100vh; background:gray">
+              <h3>How to correctly steam milk</h3>
+            </div>
+            <div style="height:100vh; background:lightgray">
+              <h2>Coffee art</h2>
+              <p>Another interactive element shows up.</p>
+              <ic-button>Second Button</ic-button>
+            </div>
+            <div style="height:100vh; background:lightgray">
+              <h2>Putting it all together</h2>
+            </div>
+          </div>
+        </ic-table-of-contents>
+      </div>
+    </div>
+  `,
+    name: "Default",
+};
+export const Nested = {
+    render: () => html `
+    <div>
+      <ic-table-of-contents position="right" maximum-heading-level="5">
+        <div id="content" style="width:100%;">
+          <div style="height:50vh; background:gray">
+            <ic-typography variant="h2" color="primary">
+              <h2>A Latte</h2>
+            </ic-typography>
+          </div>
+          <div style="height:50vh; background:darkgray">
+            <ic-typography variant="h3" color="primary">
+              <h3>The Espresso</h3>
+            </ic-typography>
+          </div>
+          <div style="height:50vh; background:darkgray">
+            <ic-typography variant="h3" color="primary">
+              <h4>Flat White</h4>
+            </ic-typography>
+          </div>
+          <div style="height:50vh; background:darkgray">
+            <ic-typography variant="h3" color="primary">
+              <h5>Latte</h5>
+            </ic-typography>
+          </div>
+          <div style="height:50vh; background:darkgray">
+            <ic-typography variant="h3" color="primary">
+              <h5>Faux Latte</h5>
+            </ic-typography>
+          </div>
+          <div style="height:50vh; background:darkgray">
+            <ic-typography variant="h3" color="primary">
+              <h3>The Big One</h3>
+            </ic-typography>
+          </div>
+        </div>
+      </ic-table-of-contents>
+    </div>
+  `,
+    name: "Nested Table of Contents",
+};
+export const monochrome = {
+    render: () => html `
+    <div>
+      <ic-table-of-contents monochrome>
+        <div style="width:fit-content; display:flex; flex-direction:column;">
+          <div
+            style="height:100vh; max-width:1200px; min-width:600px; background:gray"
+          >
+            <h2>Latte</h2>
+          </div>
+          <div style="height:100vh; background:darkgray">
+            <h2>Americano</h2>
+          </div>
+        </div>
+      </ic-table-of-contents>
+    </div>
+  `,
+    name: "Monochrome",
+};
+export const DefaultTop = {
+    render: () => html `
+    <ic-table-of-contents position="top">
+      <div id="content" style="width:100%;">
+        <div style="height:100vh; background:gray">
+          <h2>How to make coffee</h2>
+        </div>
+        <div style="height:100vh; background:darkgray">
+          <h3>Why you make coffee</h3>
+        </div>
+        <div style="height:100vh; background:lightgray">
+          <h2>The dark truth of coffee</h2>
+        </div>
+      </div>
+    </ic-table-of-contents>
+  `,
+    name: "Default Top",
+};
+export const ComplexPageHeadings = {
+    render: () => html `
+    <ic-table-of-contents>
+      <div id="content" style="width:100%;">
+        <div style="height:100vh; background:gray">
+          <ic-typography variant="h2">
+            <h3>How to make coffee</h3>
+          </ic-typography>
+          <p>This heading is inside an Ic-Typography element</p>
+        </div>
+        <div style="height:100vh; background:darkgray">
+          <ic-typography variant="h2">
+            <h3>
+              Why you might make coffee
+              <ic-link href="www.example.com">More info</ic-link>
+            </h3>
+          </ic-typography>
+          <p>
+            This heading has a link element nested inside it. The table of
+            contents will only scrape the start of the textContent of the
+            heading element and will exclude the link text.
+          </p>
+        </div>
+        <div style="height:100vh;">
+          <h2 id="coffee-dark">The dark truth of coffee</h2>
+          <p>
+            This heading is level 2, after the others being level 3 - which
+            means the page has an incorrect heading hierarchy. This is bad
+            practice but Table of Contents still renders.
+          </p>
+        </div>
+      </div>
+    </ic-table-of-contents>
+  `,
+    name: "Complex Page Headings",
+};
+export const DarkTheme = {
+    render: () => html `
+    <ic-theme theme="dark">
+      <div
+        style="position:fixed; height:100vh; width:100vw; background-color:#17191C; z-index:-1; top:0; left:0;"
+      ></div>
+      <ic-table-of-contents>
+        <div id="content" style="width:100%;">
+          <div id="red" style="height:100vh">
+            <h2>Test something</h2>
+          </div>
+          <div id="blue" style="height:100vh">
+            <h2>another test with long label that should truncate</h2>
+            <div style="height:500px;"></div>
+            <div><h3>another heading sub</h3></div>
+          </div>
+          <div id="green" style="height:100vh">
+            <h2>test</h2>
+          </div>
+        </div>
+      </ic-table-of-contents>
+    </ic-theme>
+  `,
+    name: "Dark theme",
+};
+const defaultArgs = {
+    monochrome: false,
+    theme: "inherit",
+    truncate: true,
+    size: "medium",
+    position: "right",
+    heading: "Contents",
+    setScrollHeight: 50,
+    maximumHeadingLevel: 3,
+};
+export const Playground = {
+    render: (args) => html `
+    <div style="display:flex; flex-direction:column; height:100%;">
+      <ic-table-of-contents
+        monochrome=${args.monochrome}
+        theme=${args.theme}
+        truncate=${args.truncate}
+        size=${args.size}
+        position=${args.position}
+        heading=${args.heading}
+        set-scroll-height=${args.setScrollHeight}
+        maximum-heading-level=${args.maximumHeadingLevel}
+      >
+        <div id="content" style="width:100%">
+          <div style="height:50vh; background:gray;">
+            <ic-typography variant="h2" color="primary">
+              <h2>
+                H2: A Latte and a really long heading label that should truncate
+              </h2>
+            </ic-typography>
+          </div>
+          <div style="height:50vh; background:darkgray;">
+            <ic-typography variant="h3" color="primary">
+              <h3>H3: The Espresso</h3>
+            </ic-typography>
+          </div>
+          <div style="height:50vh; background:gray;">
+            <ic-typography variant="h3" color="primary">
+              <h4>H4: Flat White</h4>
+            </ic-typography>
+          </div>
+          <div style="height:50vh; background:darkgray;">
+            <ic-typography variant="h3" color="primary">
+              <h5>H5: Latte</h5>
+            </ic-typography>
+          </div>
+          <div style="height:50vh; background:gray;">
+            <ic-typography variant="h2" color="primary">
+              <h2>H2: Other drinks</h2>
+            </ic-typography>
+          </div>
+          <div style="height:50vh; background:darkgray;">
+            <ic-typography variant="h3" color="primary">
+              <h3>H3: Just Tea</h3>
+            </ic-typography>
+          </div>
+        </div>
+      </ic-table-of-contents>
+    </div>
+  `,
+    args: defaultArgs,
+    argTypes: {
+        size: {
+            options: ["medium", "large"],
+            control: { type: INLINE_RADIO },
+        },
+        position: {
+            options: ["right", "top"],
+            control: { type: INLINE_RADIO },
+        },
+        theme: {
+            options: ["inherit", "light", "dark"],
+            control: { type: INLINE_RADIO },
+        },
+    },
+    name: "Playground",
+};
+//# sourceMappingURL=ic-table-of-contents.stories.js.map

package/dist/collection/components/ic-table-of-contents/ic-table-of-contents.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-table-of-contents.stories.js","sourceRoot":"","sources":["../../../../../src/components/ic-table-of-contents/ic-table-of-contents.stories.js"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,YAAY,GAAG,cAAc,CAAC;AAEpC,eAAe;IACb,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,mBAAmB;IAC9B,UAAU,EAAE;QACV,YAAY,EAAE;YACZ,IAAI,EAAE,MAAM;SACb;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DjB;IACD,IAAI,EAAE,SAAS;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCjB;IACD,IAAI,EAAE,0BAA0B;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;GAejB;IACD,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;GAcjB;IACD,IAAI,EAAE,aAAa;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCjB;IACD,IAAI,EAAE,uBAAuB;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;GAqBjB;IACD,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,MAAM,WAAW,GAAG;IAClB,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,OAAO;IACjB,OAAO,EAAE,UAAU;IACnB,eAAe,EAAE,EAAE;IACnB,mBAAmB,EAAE,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;qBAGH,IAAI,CAAC,UAAU;gBACpB,IAAI,CAAC,KAAK;mBACP,IAAI,CAAC,QAAQ;eACjB,IAAI,CAAC,IAAI;mBACL,IAAI,CAAC,QAAQ;kBACd,IAAI,CAAC,OAAO;4BACF,IAAI,CAAC,eAAe;gCAChB,IAAI,CAAC,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCrD;IACD,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE;SAChC;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;YACzB,OAAO,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE;SAChC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC;YACrC,OAAO,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE;SAChC;KACF;IACD,IAAI,EAAE,YAAY;CACnB,CAAC","sourcesContent":["import readme from \"./readme.md\";\nimport { html } from \"lit-html\";\n\nconst INLINE_RADIO = \"inline-radio\";\n\nexport default {\n  title: \"Web Components/Table of Contents\",\n  component: \"Table of Contents\",\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\nexport const Default = {\n  render: () => html`\n    <div>\n      <ic-top-navigation app-title=\"ICDS\" status=\"Coffee\">\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n          />\n        </svg>\n        <ic-navigation-item\n          slot=\"navigation\"\n          label=\"Latte recipe\"\n          href=\"#\"\n        ></ic-navigation-item>\n      </ic-top-navigation>\n\n      <div style=\"display:flex; flex-direction:column; height:100%;\">\n        <ic-page-header\n          heading=\"Latte recipe\"\n          subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n          reverse-order=\"true\"\n          sticky=\"true\"\n        ></ic-page-header>\n        <ic-table-of-contents position=\"right\" set-scroll-height=\"100\">\n          <div id=\"content\" style=\"width:100%;\">\n            <div style=\"height:100vh; background:gray\">\n              <h2>What is a Latte</h2>\n              <p>Lorum ipsum etcetera</p>\n            </div>\n            <div style=\"height:100vh; background:darkgray\">\n              <h2>Choosing the right milk</h2>\n              <p>\n                There is an interactive element here to test focus shifting with\n              </p>\n              <ic-button>Test Button</ic-button>\n            </div>\n            <div style=\"height:100vh; background:gray\">\n              <h3>How to correctly steam milk</h3>\n            </div>\n            <div style=\"height:100vh; background:lightgray\">\n              <h2>Coffee art</h2>\n              <p>Another interactive element shows up.</p>\n              <ic-button>Second Button</ic-button>\n            </div>\n            <div style=\"height:100vh; background:lightgray\">\n              <h2>Putting it all together</h2>\n            </div>\n          </div>\n        </ic-table-of-contents>\n      </div>\n    </div>\n  `,\n  name: \"Default\",\n};\n\nexport const Nested = {\n  render: () => html`\n    <div>\n      <ic-table-of-contents position=\"right\" maximum-heading-level=\"5\">\n        <div id=\"content\" style=\"width:100%;\">\n          <div style=\"height:50vh; background:gray\">\n            <ic-typography variant=\"h2\" color=\"primary\">\n              <h2>A Latte</h2>\n            </ic-typography>\n          </div>\n          <div style=\"height:50vh; background:darkgray\">\n            <ic-typography variant=\"h3\" color=\"primary\">\n              <h3>The Espresso</h3>\n            </ic-typography>\n          </div>\n          <div style=\"height:50vh; background:darkgray\">\n            <ic-typography variant=\"h3\" color=\"primary\">\n              <h4>Flat White</h4>\n            </ic-typography>\n          </div>\n          <div style=\"height:50vh; background:darkgray\">\n            <ic-typography variant=\"h3\" color=\"primary\">\n              <h5>Latte</h5>\n            </ic-typography>\n          </div>\n          <div style=\"height:50vh; background:darkgray\">\n            <ic-typography variant=\"h3\" color=\"primary\">\n              <h5>Faux Latte</h5>\n            </ic-typography>\n          </div>\n          <div style=\"height:50vh; background:darkgray\">\n            <ic-typography variant=\"h3\" color=\"primary\">\n              <h3>The Big One</h3>\n            </ic-typography>\n          </div>\n        </div>\n      </ic-table-of-contents>\n    </div>\n  `,\n  name: \"Nested Table of Contents\",\n};\n\nexport const monochrome = {\n  render: () => html`\n    <div>\n      <ic-table-of-contents monochrome>\n        <div style=\"width:fit-content; display:flex; flex-direction:column;\">\n          <div\n            style=\"height:100vh; max-width:1200px; min-width:600px; background:gray\"\n          >\n            <h2>Latte</h2>\n          </div>\n          <div style=\"height:100vh; background:darkgray\">\n            <h2>Americano</h2>\n          </div>\n        </div>\n      </ic-table-of-contents>\n    </div>\n  `,\n  name: \"Monochrome\",\n};\n\nexport const DefaultTop = {\n  render: () => html`\n    <ic-table-of-contents position=\"top\">\n      <div id=\"content\" style=\"width:100%;\">\n        <div style=\"height:100vh; background:gray\">\n          <h2>How to make coffee</h2>\n        </div>\n        <div style=\"height:100vh; background:darkgray\">\n          <h3>Why you make coffee</h3>\n        </div>\n        <div style=\"height:100vh; background:lightgray\">\n          <h2>The dark truth of coffee</h2>\n        </div>\n      </div>\n    </ic-table-of-contents>\n  `,\n  name: \"Default Top\",\n};\n\nexport const ComplexPageHeadings = {\n  render: () => html`\n    <ic-table-of-contents>\n      <div id=\"content\" style=\"width:100%;\">\n        <div style=\"height:100vh; background:gray\">\n          <ic-typography variant=\"h2\">\n            <h3>How to make coffee</h3>\n          </ic-typography>\n          <p>This heading is inside an Ic-Typography element</p>\n        </div>\n        <div style=\"height:100vh; background:darkgray\">\n          <ic-typography variant=\"h2\">\n            <h3>\n              Why you might make coffee\n              <ic-link href=\"www.example.com\">More info</ic-link>\n            </h3>\n          </ic-typography>\n          <p>\n            This heading has a link element nested inside it. The table of\n            contents will only scrape the start of the textContent of the\n            heading element and will exclude the link text.\n          </p>\n        </div>\n        <div style=\"height:100vh;\">\n          <h2 id=\"coffee-dark\">The dark truth of coffee</h2>\n          <p>\n            This heading is level 2, after the others being level 3 - which\n            means the page has an incorrect heading hierarchy. This is bad\n            practice but Table of Contents still renders.\n          </p>\n        </div>\n      </div>\n    </ic-table-of-contents>\n  `,\n  name: \"Complex Page Headings\",\n};\n\nexport const DarkTheme = {\n  render: () => html`\n    <ic-theme theme=\"dark\">\n      <div\n        style=\"position:fixed; height:100vh; width:100vw; background-color:#17191C; z-index:-1; top:0; left:0;\"\n      ></div>\n      <ic-table-of-contents>\n        <div id=\"content\" style=\"width:100%;\">\n          <div id=\"red\" style=\"height:100vh\">\n            <h2>Test something</h2>\n          </div>\n          <div id=\"blue\" style=\"height:100vh\">\n            <h2>another test with long label that should truncate</h2>\n            <div style=\"height:500px;\"></div>\n            <div><h3>another heading sub</h3></div>\n          </div>\n          <div id=\"green\" style=\"height:100vh\">\n            <h2>test</h2>\n          </div>\n        </div>\n      </ic-table-of-contents>\n    </ic-theme>\n  `,\n  name: \"Dark theme\",\n};\n\nconst defaultArgs = {\n  monochrome: false,\n  theme: \"inherit\",\n  truncate: true,\n  size: \"medium\",\n  position: \"right\",\n  heading: \"Contents\",\n  setScrollHeight: 50,\n  maximumHeadingLevel: 3,\n};\n\nexport const Playground = {\n  render: (args) => html`\n    <div style=\"display:flex; flex-direction:column; height:100%;\">\n      <ic-table-of-contents\n        monochrome=${args.monochrome}\n        theme=${args.theme}\n        truncate=${args.truncate}\n        size=${args.size}\n        position=${args.position}\n        heading=${args.heading}\n        set-scroll-height=${args.setScrollHeight}\n        maximum-heading-level=${args.maximumHeadingLevel}\n      >\n        <div id=\"content\" style=\"width:100%\">\n          <div style=\"height:50vh; background:gray;\">\n            <ic-typography variant=\"h2\" color=\"primary\">\n              <h2>\n                H2: A Latte and a really long heading label that should truncate\n              </h2>\n            </ic-typography>\n          </div>\n          <div style=\"height:50vh; background:darkgray;\">\n            <ic-typography variant=\"h3\" color=\"primary\">\n              <h3>H3: The Espresso</h3>\n            </ic-typography>\n          </div>\n          <div style=\"height:50vh; background:gray;\">\n            <ic-typography variant=\"h3\" color=\"primary\">\n              <h4>H4: Flat White</h4>\n            </ic-typography>\n          </div>\n          <div style=\"height:50vh; background:darkgray;\">\n            <ic-typography variant=\"h3\" color=\"primary\">\n              <h5>H5: Latte</h5>\n            </ic-typography>\n          </div>\n          <div style=\"height:50vh; background:gray;\">\n            <ic-typography variant=\"h2\" color=\"primary\">\n              <h2>H2: Other drinks</h2>\n            </ic-typography>\n          </div>\n          <div style=\"height:50vh; background:darkgray;\">\n            <ic-typography variant=\"h3\" color=\"primary\">\n              <h3>H3: Just Tea</h3>\n            </ic-typography>\n          </div>\n        </div>\n      </ic-table-of-contents>\n    </div>\n  `,\n  args: defaultArgs,\n  argTypes: {\n    size: {\n      options: [\"medium\", \"large\"],\n      control: { type: INLINE_RADIO },\n    },\n    position: {\n      options: [\"right\", \"top\"],\n      control: { type: INLINE_RADIO },\n    },\n    theme: {\n      options: [\"inherit\", \"light\", \"dark\"],\n      control: { type: INLINE_RADIO },\n    },\n  },\n  name: \"Playground\",\n};\n"]}

package/dist/collection/components/ic-table-of-contents/test/a11y/ic-table-of-contents.test.a11y.js

@@ -0,0 +1,13 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+describe("ic-table-of-contents", () => {
+    it("passes accessibility", async () => {
+        const el = await fixture(`
+    <ic-table-of-contents label="Date picker label"><h1>Heading</h1></ic-table-of-contents>
+    `);
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el)).toHaveNoViolations();
+    });
+});
+//# sourceMappingURL=ic-table-of-contents.test.a11y.js.map

package/dist/collection/components/ic-table-of-contents/test/a11y/ic-table-of-contents.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-table-of-contents.test.a11y.js","sourceRoot":"","sources":["../../../../../../../src/components/ic-table-of-contents/test/a11y/ic-table-of-contents.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;KAExB,CAAC,CAAC;QACH,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-table-of-contents\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`\n    <ic-table-of-contents label=\"Date picker label\"><h1>Heading</h1></ic-table-of-contents>\n    `);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-time-input/ic-time-input.css

@@ -643,6 +643,6 @@ ic-input-validation {
 
 @media (forced-colors: active) {
   .clear-button svg {
-    color: currentColor;
+    color: currentcolor;
   }
 }

package/dist/collection/components/ic-time-input/ic-time-input.js

@@ -142,7 +142,7 @@ export class TimeInput {
         };
         this.setTimeValidity = () => {
             const minHour = 0;
-            const maxHour = this.timePeriod === "12" ? 11 : 23;
+            const maxHour = this.timePeriod === "12" ? 12 : 23;
             if (!isEmptyString(this.hour)) {
                 this.isValidHour = +this.hour >= minHour && +this.hour <= maxHour;
             }
@@ -376,8 +376,8 @@ export class TimeInput {
             let minValue = 0;
             let maxValue = 59;
             if (input === this.hourInputEl) {
-                minValue = 0;
-                maxValue = this.timePeriod === "12" ? 11 : 23;
+                minValue = this.timePeriod === "12" ? 1 : 0;
+                maxValue = this.timePeriod === "12" ? 12 : 23;
             }
             let val = +input.value;
             if (event.key === "ArrowUp") {
@@ -669,12 +669,12 @@ export class TimeInput {
             return timeParts.map((part) => {
                 switch (part.substring(0, 1)) {
                     case "H":
-                        return (h("input", { class: "hour-input", id: "hour-input", ref: (el) => (this.hourInputEl = el), "aria-label": "hour", placeholder: "HH", disabled: this.disabled, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventHourInput) }));
+                        return (h("input", { class: "hour-input", id: "hour-input", ref: (el) => (this.hourInputEl = el), "aria-label": "hour", placeholder: "HH", disabled: this.disabled, "aria-required": `${this.required}`, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventHourInput) }));
                     case "M":
-                        return (h("input", { id: "minute-input", class: "minute-input", ref: (el) => (this.minuteInputEl = el), "aria-label": "minute", placeholder: "MM", disabled: this.disabled, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventMinuteInput) }));
+                        return (h("input", { id: "minute-input", class: "minute-input", ref: (el) => (this.minuteInputEl = el), "aria-label": "minute", placeholder: "MM", disabled: this.disabled, "aria-required": `${this.required}`, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventMinuteInput) }));
                     case "S":
                         if (!this.isHHMMFormat()) {
-                            return (h("input", { id: "second-input", class: "second-input", ref: (el) => (this.secondInputEl = el), "aria-label": "second", placeholder: "SS", disabled: this.disabled, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventSecondInput) }));
+                            return (h("input", { id: "second-input", class: "second-input", ref: (el) => (this.secondInputEl = el), "aria-label": "second", placeholder: "SS", disabled: this.disabled, "aria-required": `${this.required}`, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventSecondInput) }));
                         }
                         return null;
                     default:
@@ -899,23 +899,23 @@ export class TimeInput {
             !(isEmptyString(this.hour) &&
                 isEmptyString(this.minute) &&
                 isEmptyString(this.second)));
-        return (h(Host, { key: 'cf8b05ab0ccc0a0a779296e4dd3ba52375547b13', class: {
+        return (h(Host, { key: 'a7604eeee0b3fbc569bf9dd8dde0985ca1d959ac', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-time-input-disabled`]: disabled,
                 [`ic-time-input-${size}`]: true,
-            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: 'b104968d5b191f040358a7e800f11cb6dd036407', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: 'fa0eaeef4aab6aef24b830e466ba87d68eb84b84', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: 'e4548928534459ff788ff576483b560cf90fed53', name: "helper-text", slot: "helper-text" }))), h("span", { key: '6f119c460880a9adb8661309c3a59cfee061ae7c', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: 'bd5ce20dab45d2514cd4219eee0d1645596e5e6e', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: 'e3d4a1e518f7bcb1b35ee065b5f038f9f6f3ffe7', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: '396b05aa89aa0e24a1853cc5de20abb5341c49e5', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '2ac49a3454ce8dbabb546e54af197f0a66840499', class: "input-container" }, h("div", { key: '6917d370b61c997d888c133bb27d5fa8f94a79c0', class: "time-inputs" }, [
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: '9caf38fa248baa68cb63412469c808a5b9930b91', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: '14befa869df3cbeaf837f955d8094e90e8e95e26', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: 'a61c2058d17a901815692eeb2990dcba1ae9928a', name: "helper-text", slot: "helper-text" }))), h("span", { key: 'e5bb9bd6404b69e81ce030df1b06628adde559a0', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: '047a67f53e98a368730bec49b6575d85ad8333ce', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: 'bb77df1421d9dd8a3bf8389adcd31d5b8e65784c', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: '12ae117fc0956a5896a65b96f7cfdb5b2b7cdb44', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: 'efb28f6dda4ad90179c7fde4f568ce7f52f6ec87', class: "input-container" }, h("div", { key: 'b59b030317e837115e7d9f10a2765f883c52eae7', class: "time-inputs" }, [
             this.getInputsInOrder()[0],
             ":",
             this.getInputsInOrder()[1],
             !this.isHHMMFormat()
                 ? [":", this.getInputsInOrder()[2]]
                 : null,
-        ]), h("div", { key: 'f09f3442355e75170fb1916727fdcac001df885d', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '27173fcbdcd13798c4adc66eda9469bc471693ea', id: "clear-button", "aria-label": "Clear input", class: {
+        ]), h("div", { key: '80f2e178df91b5ae6bba0bfeda0600330d877222', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '295fa279d38b8239e3640a719ae350cc493a40f0', id: "clear-button", "aria-label": "Clear input", class: {
                 ["clear-button"]: true,
                 ["hidden"]: isEmptyString(this.hour) &&
                     isEmptyString(this.minute) &&
                     isEmptyString(this.second),
-            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showClockButton && (h("div", { key: '606a05c923fc4b95c21d0418be14168982117938', class: "show-clock-button-wrapper" }, h("div", { key: '4b9b2d37ed3a9661615685f3b077ac244295fbd1', class: { divider: showDivider, [size]: true } }), h("ic-button", { key: 'ab6ec2ca4b1442a23834e1a514800cd0f77c92d5', id: "clock-button", "aria-label": "Display clock", "aria-haspopup": "dialog", class: "clock-button", disabled: this.disabled, innerHTML: Clock, variant: "icon-tertiary", size: size, onFocus: this.handleClockFocus, onBlur: this.handleClockBlur, theme: this.clockFocused ? "light" : "dark" })))))), h("span", { key: '1695846e5d626056f5a0e372c8513fcf0001f0b9', id: this.selectedTimeInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: '34f41adff4bc3642d21014b85e525b6f80814bb6', ref: (el) => (this.selectedTimeInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidTimeText)) && (h("ic-input-validation", { key: '4b9326e9e9df98698c2c6643262122658a1434de', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidTimeText, for: inputId })))));
+            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showClockButton && (h("div", { key: 'ca4ef9f3d4246c6742e020db86dc91872b8ccc3f', class: "show-clock-button-wrapper" }, h("div", { key: 'd5506d97163e73e1f972e680d6a76c886f18c798', class: { divider: showDivider, [size]: true } }), h("ic-button", { key: 'eff1265aa61ef2ace0ce84e7525389f23f7cd57b', id: "clock-button", "aria-label": "Display clock", "aria-haspopup": "dialog", class: "clock-button", disabled: this.disabled, innerHTML: Clock, variant: "icon-tertiary", size: size, onFocus: this.handleClockFocus, onBlur: this.handleClockBlur, theme: this.clockFocused ? "light" : "dark" })))))), h("span", { key: 'd017a4408998c19d9a7d352344125fd09457849c', id: this.selectedTimeInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: '3ac394520da65af634cd087b758441c79a46990a', ref: (el) => (this.selectedTimeInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidTimeText)) && (h("ic-input-validation", { key: '4cf54814f4837f9480643691e19af77b0fe24aae', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidTimeText, for: inputId })))));
     }
     static get is() { return "ic-time-input"; }
     static get encapsulation() { return "shadow"; }