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

package/dist/esm/ic-table-of-contents.entry.js

@@ -0,0 +1,359 @@
+import { h, r as registerInstance, H as Host, g as getElement } from './index-a7a720e7.js';
+import { D as DEVICE_SIZES } from './helpers-89cb996d.js';
+
+const ItemHook = () => {
+    // adds offset to the item based on its variant
+    // e.g. h2 = 4 + (8*(2-2)) = 4px
+    // h3 = 4 + (8*(3-2)) = 12px
+    const setItemLevelOffset = (variant) => {
+        return `${4 + 8 * (parseInt(variant.split("")[1]) - 2)}px`;
+    };
+    return { setItemLevelOffset };
+};
+const ItemComponent = (itemProps) => {
+    const { id, className, label, target, selected, truncate, variant, position, size, updateSelected, setItemLevelOffset, } = itemProps;
+    return (h("a", { id: id, onClick: () => updateSelected(position), class: `${selected && "table-of-contents-item-content-selected"}
+        ${size === "large"
+            ? `table-of-contents-item-content-large`
+            : `table-of-contents-item-content-default`}
+        ${className}
+       `, href: `#${target}` },
+        h("ic-typography", { id: `${id}-label`, bold: selected === position, class: `${truncate && "truncated-item-text"}  ${size && `table-of-contents-item-content-${size}`}
+          table-of-contents-item-label
+          `, style: {
+                paddingLeft: setItemLevelOffset(variant),
+            } }, label)));
+};
+const TableOfContentsItem = (props) => {
+    const innerProps = ItemHook();
+    return h(ItemComponent, Object.assign({}, props, innerProps));
+};
+
+const icTableOfContentsCss = ":host{display:block;border:none;max-height:100vh}.table-of-contents-section-container{display:flex}.table-of-contents-content{top:0;left:0;padding:0 var(--ic-space-md);font:var(--ic-color-text-primary);max-height:100vh;z-index:1}:host .table-of-contents-position-top{min-width:10rem;max-width:50rem}:host .table-of-contents-position-side{min-width:8rem;max-width:20rem;width:20rem;position:sticky}.table-of-contents-list{display:flex;flex-direction:row;max-width:inherit}:host ol{list-style:none;margin-block-start:0;padding-inline-start:0}.table-of-contents-list-items{display:flex;flex-direction:column;width:100%}.table-of-contents-sidebar{background-color:var(--ic-table-of-contents-banner);height:1.75rem;min-width:0.25rem}.table-of-contents-sidebar-monochrome{background-color:var(--ic-table-of-contents-banner-monochrome)}.table-of-contents-item{min-height:1.5rem;line-height:1.5rem}.table-of-contents-item-content:hover{background-color:var(--ic-table-of-contents-hover)}.table-of-contents-item-monochrome-content:hover{background-color:var(--ic-table-of-contents-hover-monochrome)}.table-of-contents-item-content{border:none;max-width:inherit;display:flex;align-items:center;text-decoration:none;position:relative;color:var(--ic-table-of-contents-text);min-height:1.5rem;--ic-typography-color:var(--ic-table-of-contents-text)}.table-of-contents-item-content-default{padding-top:var(--ic-space-xxxs);padding-bottom:var(--ic-space-xxxs)}.table-of-contents-item-content:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast);outline:none;background-color:var(--ic-table-of-contents-hover)}.table-of-contents-item-content:active{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast);outline:none;background-color:var(--ic-table-of-contents-pressed)}.truncated-item-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-of-contents-item-content-large{padding-top:var(--ic-space-xxs);padding-bottom:var(--ic-space-xxs)}.table-of-contents-sidebar.large{height:2.5rem}.table-of-contents-heading.large{padding-bottom:var(--ic-space-xs)}@media (prefers-reduced-motion: no-preference){.table-of-contents-sidebar{transition:all 0.3s ease}}@media (prefers-reduced-motion: reduce){.table-of-contents-sidebar{transition:none}}@media (forced-colors: active){.table-of-contents-sidebar{background-color:Highlight}}";
+const IcTableOfContentsStyle0 = icTableOfContentsCss;
+
+const TOC_CONTENT_CLASS = "table-of-contents-content";
+const TOC_LIST_ITEMS_CLASS = "table-of-contents-list-items";
+const TOC_ITEM_CLASS = "table-of-contents-item-content";
+const TOC_CONTAINER_CLASS = "table-of-contents-section-container";
+const TableOfContents = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Heading text of the table of contents.
+         */
+        this.heading = "Contents";
+        /**
+         * 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.
+         */
+        this.maximumHeadingLevel = 3;
+        /**
+         * If `true`, the table of contents will display as black in the light theme, and white in dark theme.
+         */
+        this.monochrome = false;
+        /**
+         * Whether the table of contents will appear on the right of or above child content on large viewport widths.
+         */
+        this.position = "right";
+        /**
+         * Vertical offset to page scroll (in percent) when table of contents item is selected, to account for other page components like headers.
+         */
+        this.setScrollHeight = 50;
+        /**
+         * The size of the table of contents items.
+         */
+        this.size = "medium";
+        /**
+         * 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.
+         */
+        this.theme = "inherit";
+        /**
+         * If `true`, the table of contents item label will be truncated.
+         */
+        this.truncate = true;
+        this.focusedElement = 0;
+        // heading items
+        this.referenceElements = [];
+        // heights of heading items
+        this.currentTargetHeights = [];
+        // header height if present
+        this.headerHeight = 0;
+        // holds initial position to allow for responsive changes
+        this.initialPosition = this.position;
+        // suppress scroll listener to allow for click selection without scroll listener firing
+        this.suppressListener = false;
+        /**
+         * Generate a TOC Item.
+         * These items are wrapped in empty tooltips that will be populated by addTooltip()
+         * @param tocHeading heading element to refer item information from
+         * @param children
+         * @returns TocItem ready to be rendered, with nested children if applicable
+         */
+        this.createTocItem = (tocHeading, children) => {
+            const tocId = `toc_${tocHeading.id}`;
+            const tocItem = (h(TableOfContentsItem, { id: tocId, className: TOC_ITEM_CLASS, variant: tocHeading.tagName.toLowerCase(), label: tocHeading.textLabel, target: tocHeading.id, truncate: this.truncate, selected: this.focusedElement, updateSelected: this.updateOnSelection, position: tocHeading.trueIndex, size: this.size }));
+            const wrappedToc = this.truncate ? (h("ic-tooltip", { target: tocId, label: tocHeading.innerHTML }, tocItem)) : (tocItem);
+            return (h("li", { class: `table-of-contents-item  ${this.monochrome && "table-of-contents-item-monochrome"}` }, wrappedToc, children ? h("ol", null, children) : null));
+        };
+        /**
+         * Render TocItems and recursively render children items if they exist
+         * @param listItem
+         * @returns HTML Element array to be rendered
+         */
+        this.renderTocTree = (listItem) => {
+            let results;
+            if (listItem.treeChildren.length > 0) {
+                const children = listItem.treeChildren.map((i) => this.renderTocTree(i));
+                results = this.createTocItem(listItem, children);
+            }
+            else {
+                results = this.createTocItem(listItem);
+            }
+            return results;
+        };
+        // list item clicked logic
+        this.updateOnSelection = (position) => {
+            this.suppressListener = true;
+            this.focusedElement = position;
+            this.sidebarTranslation(this.focusedElement);
+        };
+        // truncate text if it goes out of bounds of the container
+        this.truncateText = () => {
+            var _a, _b;
+            const links = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${TOC_ITEM_CLASS}`);
+            const contentList = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`.${TOC_LIST_ITEMS_CLASS}`);
+            if (contentList)
+                links === null || links === void 0 ? void 0 : links.forEach((item) => {
+                    this.addTooltip(item, DEVICE_SIZES.S);
+                });
+        };
+    }
+    suppressListenerHandler() {
+        window.scrollTo(0, window.scrollY - this.headerHeight - 50);
+    }
+    /**
+     * Scrape for heading elements on the page content within TOC, down to the maximumHeadingLevel.
+     * From this, generate an array of Elements with lower rank headings inserted as treeChildren on top level headings.
+     * @returns RankedElement[] array of HTML elements with additional props for rank, trueIndex and treeChildren array
+     */
+    generateHeadingTree() {
+        var _a;
+        const resultArray = [];
+        const headingDepth = this.maximumHeadingLevel < 5
+            ? ["h2", "h3", "h4", "h5"]
+                .slice(0, (this.maximumHeadingLevel < 2 ? 2 : this.maximumHeadingLevel) - 1)
+                .join(",")
+            : "h2, h3, h4, h5";
+        const headingList = this.el.querySelectorAll(headingDepth);
+        if (headingList) {
+            const headingArray = Array.from(headingList);
+            headingArray.forEach((item, index) => {
+                this.referenceElements.push(item);
+                item.trueIndex = index;
+                item.rank = item.tagName.toLowerCase().slice(1, 2);
+                item.textLabel = item.textContent
+                    ? item.textContent.trimStart().split("\n")[0]
+                    : `${item.rank}-${index}`;
+                item.treeChildren = [];
+            });
+            let currentRank = ((_a = headingArray[0]) === null || _a === void 0 ? void 0 : _a.rank) || 2;
+            headingArray.reverse().forEach((h, i) => {
+                if (!h.id) {
+                    h.setAttribute("id", h.textLabel.replace(/\s+/g, "-").toLowerCase());
+                }
+                if (h.rank > currentRank && h.trueIndex > 0) {
+                    if (headingArray[i] && headingArray[i].rank < h.rank) {
+                        headingArray[i].treeChildren.unshift(h);
+                    }
+                    else {
+                        resultArray.push(h);
+                    }
+                }
+                else {
+                    currentRank = h.rank;
+                    resultArray.push(h);
+                }
+            });
+        }
+        return resultArray.reverse();
+    }
+    //container orientation logic
+    containerPosition() {
+        var _a;
+        if (this.position) {
+            const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${TOC_CONTAINER_CLASS}`);
+            switch (this.position) {
+                case "right":
+                    container.style.flexDirection = "row-reverse";
+                    break;
+                case "top":
+                    container.style.flexDirection = "column";
+                    break;
+            }
+        }
+    }
+    /**
+     * Move the sidebar to the provided position on the page.
+     * Also, resize the sidebar to stretch the height of the selected heading.
+     * @param newPosition
+     */
+    sidebarTranslation(newPosition) {
+        var _a, _b, _c;
+        const sidebar = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".table-of-contents-sidebar");
+        const itemHeights = [];
+        let previousItemsHeight = 0;
+        (_c = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll(`.${TOC_ITEM_CLASS}`)) === null || _c === void 0 ? void 0 : _c.forEach((item) => {
+            if (item !== null)
+                itemHeights.push(item.offsetHeight);
+        });
+        itemHeights
+            .slice(0, newPosition)
+            .forEach((i) => (previousItemsHeight += i));
+        sidebar.style.transform = `translateY(${previousItemsHeight}px)`;
+        sidebar.style.height = `${itemHeights[newPosition]}px`;
+    }
+    // find element heights to be used to determine focused item from scroll position
+    findElementsHeights() {
+        const contentBounds = [];
+        this.referenceElements.forEach((element) => {
+            contentBounds.push(element.getBoundingClientRect().top);
+        });
+        this.currentTargetHeights = contentBounds;
+    }
+    //resize window logic
+    handleResizeBounds() {
+        if (window.innerWidth < DEVICE_SIZES.XL && this.initialPosition !== "top") {
+            this.position = "top";
+            this.containerPosition();
+        }
+        else if (window.innerWidth > DEVICE_SIZES.XL &&
+            this.position === "top" &&
+            this.initialPosition === "right") {
+            this.position = "right";
+            this.containerPosition();
+        }
+        this.findElementsHeights();
+        this.truncateText();
+    }
+    // scroll logic
+    updateSelectedItemFromScroll() {
+        const targetHeight = window.scrollY + window.innerHeight * (this.setScrollHeight / 100);
+        if (window.scrollY === 0) {
+            this.focusedElement = 0;
+            this.sidebarTranslation(this.focusedElement);
+        }
+        else if (targetHeight < this.currentTargetHeights[this.focusedElement]) {
+            const previousItems = this.currentTargetHeights.slice(0, this.focusedElement);
+            const closestItem = previousItems.reduce((newValue, curr, index) => {
+                if (Math.abs(curr - targetHeight) <
+                    Math.abs(previousItems[newValue] - targetHeight))
+                    return index;
+                return newValue;
+            }, 0);
+            this.focusedElement = closestItem;
+            this.sidebarTranslation(this.focusedElement);
+        }
+        else if (targetHeight > this.currentTargetHeights[this.focusedElement] &&
+            this.focusedElement !== this.currentTargetHeights.length) {
+            const relevantItems = this.currentTargetHeights.slice(this.focusedElement);
+            const closestItem = relevantItems.reduce((newValue, curr, index) => {
+                if (Math.abs(curr - targetHeight) <
+                    Math.abs(relevantItems[newValue] - targetHeight) &&
+                    curr < targetHeight)
+                    return index;
+                return newValue;
+            }, 0);
+            if (closestItem + this.focusedElement !== this.focusedElement) {
+                this.focusedElement += closestItem;
+                this.sidebarTranslation(this.focusedElement);
+            }
+        }
+    }
+    // find header element height
+    findHeaderElement() {
+        const element = document.querySelector("ic-page-header");
+        if (element) {
+            return element.clientHeight;
+        }
+        const header = document.querySelector("header");
+        if (header) {
+            return header.clientHeight;
+        }
+        return 0;
+    }
+    // add margin to the list based off the header element height
+    addListMargin() {
+        var _a;
+        const content = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${TOC_CONTENT_CLASS}`);
+        content === null || content === void 0 ? void 0 : content.style.setProperty("top", `${this.headerHeight}px`);
+    }
+    // add tooltip to the item if it is too wide
+    addTooltip(item, widthBreakpoint) {
+        var _a;
+        const itemLabel = item.querySelector(".table-of-contents-item-label");
+        if (((_a = item.parentNode) === null || _a === void 0 ? void 0 : _a.tagName) == "IC-TOOLTIP") {
+            const tooltip = item.parentNode;
+            if ((itemLabel === null || itemLabel === void 0 ? void 0 : itemLabel.offsetWidth) < (itemLabel === null || itemLabel === void 0 ? void 0 : itemLabel.scrollWidth)) {
+                const tooltipPosition = window.innerWidth < widthBreakpoint
+                    ? "bottom"
+                    : this.position === "right"
+                        ? "left"
+                        : "right";
+                //Modify the ic-tooltip wrapped around the list item
+                tooltip.setAttribute("disable-click", false);
+                tooltip.setAttribute("disable-hover", false);
+                tooltip.setAttribute("placement", tooltipPosition);
+                tooltip.setAttribute("target", item.id);
+                tooltip.setAttribute("style", "overflow:hidden");
+            }
+            else {
+                //disable the tooltip if the item does not need to truncate
+                tooltip.setAttribute("disable-click", true);
+                tooltip.setAttribute("disable-hover", true);
+            }
+        }
+    }
+    // initialise resize observer
+    componentWillLoad() {
+        this.resizeObserver = new ResizeObserver(() => this.handleResizeBounds());
+        this.resizeObserver.observe(this.el);
+    }
+    // initialise scroll listener
+    componentDidRender() {
+        document.addEventListener("scroll", () => {
+            if (!this.suppressListener)
+                this.updateSelectedItemFromScroll();
+            else
+                this.suppressListener = false;
+        });
+        this.containerPosition();
+        this.findElementsHeights();
+        this.sidebarTranslation(this.focusedElement);
+    }
+    // after component has loaded modify the list based of position, size and surrounding elements
+    async componentDidLoad() {
+        this.focusedElement = 0;
+        this.headerHeight = this.findHeaderElement();
+        this.addListMargin();
+        this.truncateText();
+        this.findElementsHeights();
+        this.sidebarTranslation(this.focusedElement);
+    }
+    // Component is a wrapper for page contents, and will build list from heading items
+    render() {
+        const { heading, monochrome, position, size, theme } = this;
+        return (h(Host, { key: '251846b7b12255064f6f08dc5ed373e8ccf0326b', class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("ic-section-container", { key: '3a178d62dfe2ce56c052e18114bb2d7c3fbd47ee', class: TOC_CONTAINER_CLASS, aligned: "full-width" }, h("div", { key: '34378cb8e4ac052d1f05cdc7b61880ab866e5c30', role: "navigation", class: `${TOC_CONTENT_CLASS} ${position === "top" && "table-of-contents-position-top"}
+            ${position === "right" && "table-of-contents-position-side"}` }, h("ic-typography", { key: '9c2e6cd5dcf1bdcaada2fc63035c3fbe1aff0f44', class: `table-of-contents-heading ${size}`, variant: "subtitle-large" }, heading), h("div", { key: '848fbb7b4e2923e6abc7c2b7dbe267221b0158e6', class: "table-of-contents-list" }, h("div", { key: '31324398f103b292dfdf6edec92e738fa0c49c60', class: `table-of-contents-sidebar ${monochrome && `table-of-contents-sidebar-monochrome`}
+                ${size}
+                ` }), h("ol", { key: 'b4cf6c02151d3257155a4b8e055df992b06e64e0', class: TOC_LIST_ITEMS_CLASS }, this.generateHeadingTree().map((item) => this.renderTocTree(item))))), h("slot", { key: '0a5e55adfd3eeb0ba3c502c8936557f1b5f8bd76' }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "suppressListener": ["suppressListenerHandler"]
+    }; }
+};
+TableOfContents.style = IcTableOfContentsStyle0;
+
+export { TableOfContents as ic_table_of_contents };
+
+//# sourceMappingURL=ic-table-of-contents.entry.js.map

package/dist/esm/ic-table-of-contents.entry.js.map

@@ -0,0 +1 @@
+{"file":"ic-table-of-contents.entry.js","mappings":";;;AA6BA,MAAM,QAAQ,GAAG;;;;IAIf,MAAM,kBAAkB,GAAG,CAAC,OAAe;QACzC,OAAO,GAAG,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;KAC5D,CAAC;IAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,aAAa,GAAsD,CACvE,SAAS;IAET,MAAM,EACJ,EAAE,EACF,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,kBAAkB,GACnB,GAAG,SAAS,CAAC;IAEd,QACE,SACE,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,MAAM,cAAc,CAAC,QAAQ,CAAC,EACvC,KAAK,EAAE,GAAG,QAAQ,IAAI,yCAAyC;UAE3D,IAAI,KAAK,OAAO;cACZ,sCAAsC;cACtC,wCACN;UACE,SAAS;QACX,EACF,IAAI,EAAE,IAAI,MAAM,EAAE;QAElB,qBACE,EAAE,EAAE,GAAG,EAAE,QAAQ,EACjB,IAAI,EAAE,QAAQ,KAAK,QAAQ,EAC3B,KAAK,EAAE,GAAG,QAAQ,IAAI,qBAAqB,KACzC,IAAI,IAAI,kCAAkC,IAAI,EAChD;;WAEG,EACH,KAAK,EAAE;gBACL,WAAW,EAAE,kBAAkB,CAAC,OAAO,CAAC;aACzC,IAEA,KAAK,CACQ,CACd,EACJ;AACJ,CAAC,CAAC;AAEK,MAAM,mBAAmB,GAAG,CAAC,KAAmB;IACrD,MAAM,UAAU,GAAG,QAAQ,EAAE,CAAC;IAC9B,OAAO,EAAC,aAAa,oBAAK,KAAK,EAAM,UAAU,EAAI,CAAC;AACtD,CAAC;;AC5FD,MAAM,oBAAoB,GAAG,y5EAAy5E,CAAC;AACv7E,gCAAe,oBAAoB;;ACInC,MAAM,iBAAiB,GAAG,2BAA2B,CAAC;AACtD,MAAM,oBAAoB,GAAG,8BAA8B,CAAC;AAC5D,MAAM,cAAc,GAAG,gCAAgC,CAAC;AACxD,MAAM,mBAAmB,GAAG,qCAAqC,CAAC;MAcrD,eAAe;IAL5B;;;;;QAWU,YAAO,GAAW,UAAU,CAAC;;;;QAK7B,wBAAmB,GAAW,CAAC,CAAC;;;;QAKhC,eAAU,GAAa,KAAK,CAAC;;;;QAKZ,aAAQ,GAAyB,OAAO,CAAC;;;;QAK1D,oBAAe,GAAW,EAAE,CAAC;;;;QAK7B,SAAI,GAAY,QAAQ,CAAC;;;;QAKzB,UAAK,GAAiB,SAAS,CAAC;;;;QAKhC,aAAQ,GAAY,IAAI,CAAC;QAExB,mBAAc,GAAW,CAAC,CAAC;;QAG5B,sBAAiB,GAAkB,EAAE,CAAC;;QAGtC,yBAAoB,GAAa,EAAE,CAAC;;QAIpC,iBAAY,GAAW,CAAC,CAAC;;QAEzB,oBAAe,GAAyB,IAAI,CAAC,QAAQ,CAAC;;QAGrD,qBAAgB,GAAY,KAAK,CAAC;;;;;;;;QAcnC,kBAAa,GAAG,CACtB,UAAyB,EACzB,QAAwB;YAExB,MAAM,KAAK,GAAG,OAAO,UAAU,CAAC,EAAE,EAAE,CAAC;YAErC,MAAM,OAAO,IACX,EAAC,mBAAmB,IAClB,EAAE,EAAE,KAAK,EACT,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,EACzC,KAAK,EAAE,UAAU,CAAC,SAAS,EAC3B,MAAM,EAAE,UAAU,CAAC,EAAE,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,cAAc,EAAE,IAAI,CAAC,iBAAiB,EACtC,QAAQ,EAAE,UAAU,CAAC,SAAS,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH,CAAC;YAEF,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAC9B,kBAAY,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,SAAS,IACnD,OAAO,CACG,KAEb,OAAO,CACR,CAAC;YACF,QACE,UACE,KAAK,EAAE,2BACL,IAAI,CAAC,UAAU,IAAI,mCACrB,EAAE,IAED,UAAU,EACV,QAAQ,GAAG,cAAK,QAAQ,CAAM,GAAG,IAAI,CACnC,EACL;SACH,CAAC;;;;;;QAOM,kBAAa,GAAG,CAAC,QAAuB;YAC9C,IAAI,OAAO,CAAC;YACZ,IAAI,QAAQ,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpC,MAAM,QAAQ,GAAG,QAAQ,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;gBACzE,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;aAClD;iBAAM;gBACL,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;aACxC;YACD,OAAO,OAAO,CAAC;SAChB,CAAC;;QAiGM,sBAAiB,GAAG,CAAC,QAAgB;YAC3C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC7B,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;YAC/B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAC9C,CAAC;;QA0HM,iBAAY,GAAG;;YACrB,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,gBAAgB,CAAC,IAAI,cAAc,EAAE,CAAC,CAAC;YACzE,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CACnD,IAAI,oBAAoB,EAAE,CAC3B,CAAC;YACF,IAAI,WAAW;gBACb,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC,IAAI;oBAClB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;iBACvC,CAAC,CAAC;SACN,CAAC;KAoEH;IA7WC,uBAAuB;QACrB,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,CAAC;KAC7D;;;;;;IAsEO,mBAAmB;;QACzB,MAAM,WAAW,GAAoB,EAAE,CAAC;QAExC,MAAM,YAAY,GAChB,IAAI,CAAC,mBAAmB,GAAG,CAAC;cACxB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;iBACrB,KAAK,CACJ,CAAC,EACD,CAAC,IAAI,CAAC,mBAAmB,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,mBAAmB,IAAI,CAAC,CAClE;iBACA,IAAI,CAAC,GAAG,CAAC;cACZ,gBAAgB,CAAC;QACvB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAE3D,IAAI,WAAW,EAAE;YACf,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAoB,CAAC;YAChE,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;gBAC/B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAA8B,CAAC,CAAC;gBAC5D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACnD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW;sBAC7B,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;sBAC3C,GAAG,IAAI,CAAC,IAAI,IAAI,KAAK,EAAE,CAAC;gBAC5B,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;aACxB,CAAC,CAAC;YAEH,IAAI,WAAW,GAAG,CAAA,MAAA,YAAY,CAAC,CAAC,CAAC,0CAAE,IAAI,KAAI,CAAC,CAAC;YAE7C,YAAY,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;oBACT,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;iBACtE;gBACD,IAAI,CAAC,CAAC,IAAI,GAAG,WAAW,IAAI,CAAC,CAAC,SAAS,GAAG,CAAC,EAAE;oBAC3C,IAAI,YAAY,CAAC,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE;wBACpD,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;qBACzC;yBAAM;wBACL,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;qBACrB;iBACF;qBAAM;oBACL,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC;oBACrB,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;iBACrB;aACF,CAAC,CAAC;SACJ;QACD,OAAO,WAAW,CAAC,OAAO,EAAE,CAAC;KAC9B;;IAGO,iBAAiB;;QACvB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CACjD,IAAI,mBAAmB,EAAE,CACO,CAAC;YACnC,QAAQ,IAAI,CAAC,QAAQ;gBACnB,KAAK,OAAO;oBACV,SAAS,CAAC,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;oBAC9C,MAAM;gBACR,KAAK,KAAK;oBACR,SAAS,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;oBACzC,MAAM;aACT;SACF;KACF;;;;;;IAOO,kBAAkB,CAAC,WAAmB;;QAC5C,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAC/C,4BAA4B,CACI,CAAC;QAEnC,MAAM,WAAW,GAAa,EAAE,CAAC;QACjC,IAAI,mBAAmB,GAAG,CAAC,CAAC;QAC5B,MAAA,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CACd,gBAAgB,CAAC,IAAI,cAAc,EAAE,CAAC,0CACtC,OAAO,CAAC,CAAC,IAAS;YAClB,IAAI,IAAI,KAAK,IAAI;gBAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACxD,CAAC,CAAC;QACL,WAAW;aACR,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC;aACrB,OAAO,CAAC,CAAC,CAAC,MAAM,mBAAmB,IAAI,CAAC,CAAC,CAAC,CAAC;QAE9C,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,mBAAmB,KAAK,CAAC;QACjE,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC;KACxD;;IAUO,mBAAmB;QACzB,MAAM,aAAa,GAAa,EAAE,CAAC;QACnC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,OAAO;YACrC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC,CAAC;SACzD,CAAC,CAAC;QACH,IAAI,CAAC,oBAAoB,GAAG,aAAa,CAAC;KAC3C;;IAGO,kBAAkB;QACxB,IAAI,MAAM,CAAC,UAAU,GAAG,YAAY,CAAC,EAAE,IAAI,IAAI,CAAC,eAAe,KAAK,KAAK,EAAE;YACzE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;aAAM,IACL,MAAM,CAAC,UAAU,GAAG,YAAY,CAAC,EAAE;YACnC,IAAI,CAAC,QAAQ,KAAK,KAAK;YACvB,IAAI,CAAC,eAAe,KAAK,OAAO,EAChC;YACA,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;YACxB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;QACD,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;;IAGO,4BAA4B;QAClC,MAAM,YAAY,GAChB,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC,CAAC;QACrE,IAAI,MAAM,CAAC,OAAO,KAAK,CAAC,EAAE;YACxB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;YACxB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAC9C;aAAM,IAAI,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE;YACxE,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CACnD,CAAC,EACD,IAAI,CAAC,cAAc,CACpB,CAAC;YACF,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK;gBAC7D,IACE,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,YAAY,CAAC;oBAC7B,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;oBAEhD,OAAO,KAAK,CAAC;gBACf,OAAO,QAAQ,CAAC;aACjB,EAAE,CAAC,CAAC,CAAC;YACN,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;YAClC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAC9C;aAAM,IACL,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC;YAC7D,IAAI,CAAC,cAAc,KAAK,IAAI,CAAC,oBAAoB,CAAC,MAAM,EACxD;YACA,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CACnD,IAAI,CAAC,cAAc,CACpB,CAAC;YAEF,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK;gBAC7D,IACE,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,YAAY,CAAC;oBAC3B,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;oBAClD,IAAI,GAAG,YAAY;oBAEnB,OAAO,KAAK,CAAC;gBACf,OAAO,QAAQ,CAAC;aACjB,EAAE,CAAC,CAAC,CAAC;YACN,IAAI,WAAW,GAAG,IAAI,CAAC,cAAc,KAAK,IAAI,CAAC,cAAc,EAAE;gBAC7D,IAAI,CAAC,cAAc,IAAI,WAAW,CAAC;gBACnC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;aAC9C;SACF;KACF;;IAGO,iBAAiB;QACvB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACzD,IAAI,OAAO,EAAE;YACX,OAAO,OAAO,CAAC,YAAY,CAAC;SAC7B;QACD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,MAAM,EAAE;YACV,OAAO,MAAM,CAAC,YAAY,CAAC;SAC5B;QACD,OAAO,CAAC,CAAC;KACV;;IAGO,aAAa;;QACnB,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAC/C,IAAI,iBAAiB,EAAE,CACN,CAAC;QACpB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC;KAC7D;;IAGO,UAAU,CAAC,IAAS,EAAE,eAAuB;;QACnD,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAC;QACtE,IAAI,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO,KAAI,YAAY,EAAE;YAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC;YAChC,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,KAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,CAAA,EAAE;gBACnD,MAAM,eAAe,GACnB,MAAM,CAAC,UAAU,GAAG,eAAe;sBAC/B,QAAQ;sBACR,IAAI,CAAC,QAAQ,KAAK,OAAO;0BACzB,MAAM;0BACN,OAAO,CAAC;;gBAEd,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;gBAC7C,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;gBAC7C,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;gBACnD,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;gBACxC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;aAClD;iBAAM;;gBAEL,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;gBAC5C,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;aAC7C;SACF;KACF;;IAeD,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACtC;;IAGD,kBAAkB;QAChB,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE;YAClC,IAAI,CAAC,IAAI,CAAC,gBAAgB;gBAAE,IAAI,CAAC,4BAA4B,EAAE,CAAC;;gBAC3D,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;SACpC,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;;IAGD,MAAM,gBAAgB;QACpB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;QACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC7C,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;;IAGD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAC5D,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS,EAAE,IACzD,6EAAsB,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAC,YAAY,IACpE,4DACE,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,GAAG,iBAAiB,IACzB,QAAQ,KAAK,KAAK,IAAI,gCACxB;cACE,QAAQ,KAAK,OAAO,IAAI,iCAAiC,EAAE,IAE7D,sEACE,KAAK,EAAE,6BAA6B,IAAI,EAAE,EAC1C,OAAO,EAAC,gBAAgB,IAEvB,OAAO,CACM,EAChB,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DACE,KAAK,EAAE,6BACL,UAAU,IAAI,sCAChB;kBACE,IAAI;iBACL,GACD,EACF,2DAAI,KAAK,EAAE,oBAAoB,IAC5B,IAAI,CAAC,mBAAmB,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,KACnC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CACzB,CACE,CACD,CACF,EACN,8DAAa,CACQ,CAClB,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/ic-table-of-contents/ic-table-of-contents-item.tsx","src/components/ic-table-of-contents/ic-table-of-contents.css?tag=ic-table-of-contents&encapsulation=shadow","src/components/ic-table-of-contents/ic-table-of-contents.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\n\ninterface IcTableOfContentsItemElement {\n  id: string;\n  className: string;\n  label: string;\n  target: string;\n  variant: string;\n  selected: number;\n  position: number;\n  size?: string;\n  truncate?: boolean;\n  updateSelected: (position: number) => void;\n  setItemLevelOffset: (variant: string) => string;\n}\n\ninterface TOCItemProps {\n  id: string;\n  className: string;\n  variant: string;\n  label: string;\n  target: string;\n  selected: number;\n  position: number;\n  size?: string;\n  truncate?: boolean;\n  updateSelected: (position: number) => void;\n}\n\nconst ItemHook = () => {\n  // adds offset to the item based on its variant\n  // e.g. h2 = 4 + (8*(2-2)) = 4px\n  // h3 = 4 + (8*(3-2)) = 12px\n  const setItemLevelOffset = (variant: string): string => {\n    return `${4 + 8 * (parseInt(variant.split(\"\")[1]) - 2)}px`;\n  };\n\n  return { setItemLevelOffset };\n};\n\nconst ItemComponent: FunctionalComponent<IcTableOfContentsItemElement> = (\n  itemProps\n) => {\n  const {\n    id,\n    className,\n    label,\n    target,\n    selected,\n    truncate,\n    variant,\n    position,\n    size,\n    updateSelected,\n    setItemLevelOffset,\n  } = itemProps;\n\n  return (\n    <a\n      id={id}\n      onClick={() => updateSelected(position)}\n      class={`${selected && \"table-of-contents-item-content-selected\"}\n        ${\n          size === \"large\"\n            ? `table-of-contents-item-content-large`\n            : `table-of-contents-item-content-default`\n        }\n        ${className}\n       `}\n      href={`#${target}`}\n    >\n      <ic-typography\n        id={`${id}-label`}\n        bold={selected === position}\n        class={`${truncate && \"truncated-item-text\"}  ${\n          size && `table-of-contents-item-content-${size}`\n        }\n          table-of-contents-item-label\n          `}\n        style={{\n          paddingLeft: setItemLevelOffset(variant),\n        }}\n      >\n        {label}\n      </ic-typography>\n    </a>\n  );\n};\n\nexport const TableOfContentsItem = (props: TOCItemProps) => {\n  const innerProps = ItemHook();\n  return <ItemComponent {...props} {...innerProps} />;\n};\n",":host {\n  display: block;\n  border: none;\n  max-height: 100vh;\n}\n\n.table-of-contents-section-container {\n  display: flex;\n}\n\n.table-of-contents-content {\n  top: 0;\n  left: 0;\n  padding: 0 var(--ic-space-md);\n  font: var(--ic-color-text-primary);\n  max-height: 100vh;\n  z-index: 1;\n}\n\n:host .table-of-contents-position-top {\n  min-width: 10rem;\n  max-width: 50rem;\n}\n\n:host .table-of-contents-position-side {\n  min-width: 8rem;\n  max-width: 20rem;\n  width: 20rem;\n  position: sticky;\n}\n\n.table-of-contents-list {\n  display: flex;\n  flex-direction: row;\n  max-width: inherit;\n}\n\n:host ol {\n  list-style: none;\n  margin-block-start: 0;\n  padding-inline-start: 0;\n}\n\n.table-of-contents-list-items {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.table-of-contents-sidebar {\n  background-color: var(--ic-table-of-contents-banner);\n  height: 1.75rem;\n  min-width: 0.25rem;\n}\n\n.table-of-contents-sidebar-monochrome {\n  background-color: var(--ic-table-of-contents-banner-monochrome);\n}\n\n.table-of-contents-item {\n  min-height: 1.5rem;\n  line-height: 1.5rem;\n}\n\n.table-of-contents-item-content:hover {\n  background-color: var(--ic-table-of-contents-hover);\n}\n\n.table-of-contents-item-monochrome-content:hover {\n  background-color: var(--ic-table-of-contents-hover-monochrome);\n}\n\n.table-of-contents-item-content {\n  border: none;\n  max-width: inherit;\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n  position: relative;\n  color: var(--ic-table-of-contents-text);\n  min-height: 1.5rem;\n\n  --ic-typography-color: var(--ic-table-of-contents-text);\n}\n\n.table-of-contents-item-content-default {\n  padding-top: var(--ic-space-xxxs);\n  padding-bottom: var(--ic-space-xxxs);\n}\n\n.table-of-contents-item-content:focus {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-transition-duration-fast);\n  outline: none;\n  background-color: var(--ic-table-of-contents-hover);\n}\n\n.table-of-contents-item-content:active {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-transition-duration-fast);\n  outline: none;\n  background-color: var(--ic-table-of-contents-pressed);\n}\n\n.truncated-item-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Large styles */\n\n.table-of-contents-item-content-large {\n  padding-top: var(--ic-space-xxs);\n  padding-bottom: var(--ic-space-xxs);\n}\n\n.table-of-contents-sidebar.large {\n  height: 2.5rem;\n}\n\n.table-of-contents-heading.large {\n  padding-bottom: var(--ic-space-xs);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .table-of-contents-sidebar {\n    transition: all 0.3s ease;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  /* limit sidebar scroll animation */\n  .table-of-contents-sidebar {\n    transition: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .table-of-contents-sidebar {\n    background-color: Highlight;\n  }\n}\n","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"],"version":3}

package/dist/esm/ic-theme.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-a7a720e7.js';
-import { H as getBrandColorBrightness, J as BLACK_MIN_COLOR_BRIGHTNESS, W as WHITE_MAX_COLOR_BRIGHTNESS, d as convertToRGBA, g as getBrandForegroundAppearance } from './helpers-f3928d01.js';
+import { H as getBrandColorBrightness, J as BLACK_MIN_COLOR_BRIGHTNESS, W as WHITE_MAX_COLOR_BRIGHTNESS, d as convertToRGBA, g as getBrandForegroundAppearance } from './helpers-1dbd527e.js';
 
 const Theme = class {
     constructor(hostRef) {
@@ -67,7 +67,7 @@ const Theme = class {
     }
     render() {
         const { themeClass } = this;
-        return (h(Host, { key: 'ee89cdd36cb4cb7e0589dfea2dd5a60b5de40041', class: themeClass }, h("slot", { key: 'e7803bf5fc0974bfcf9a2a52cb5870254453a1bd' })));
+        return (h(Host, { key: '5acfd70fc7d5cec478027487b121829ad9258623', class: themeClass }, h("slot", { key: '962d9fdd42ceb26a48c49a06aa3df3cb13bb9157' })));
     }
     static get watchers() { return {
         "brandColor": ["watchBrandColorPropHandler"],

package/dist/esm/ic-theme.entry.js.map

@@ -1 +1 @@
-{"file":"ic-theme.entry.js","mappings":";;;MAIa,KAAK;IACd;;;;QACI,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;;;;QAIrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;;;;QAIvB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;QACrB,IAAI,CAAC,qBAAqB,GAAG;YACzB,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;gBACzB,IAAI,CAAC,UAAU;oBACX,MAAM,CAAC,UAAU;wBACb,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO;0BACvD,eAAe;0BACf,gBAAgB,CAAC;aAC9B;iBACI;gBACD,IAAI,CAAC,UAAU,GAAG,YAAY,IAAI,CAAC,KAAK,EAAE,CAAC;aAC9C;YACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACvC,CAAC;QACF,IAAI,CAAC,uBAAuB,GAAG;YAC3B,IAAI,uBAAuB,EAAE,GAAG,0BAA0B;gBACtD,uBAAuB,EAAE,GAAG,0BAA0B,EAAE;gBACxD,OAAO,CAAC,IAAI,CAAC,2TAA2T,CAAC,CAAC;aAC7U;SACJ,CAAC;QACF,IAAI,CAAC,aAAa,GAAG;YACjB,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;YAC1E,IAAI,SAAS,EAAE;gBACX,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;gBACjC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,eAAe,CAAC;gBAC3C,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBACxD,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBACxD,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBACxD,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBACxD,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBAC/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;oBAClB,IAAI,EAAE,4BAA4B,EAAE;oBACpC,KAAK,EAAE,SAAS;iBACnB,CAAC,CAAC;aACN;SACJ,CAAC;KACL;IACD,0BAA0B;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;KACxB;IACD,qBAAqB;QACjB,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAChC;IACD,iBAAiB;QACb,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,MAAM,CAAC,UAAU;YACb,MAAM;iBACD,UAAU,CAAC,8BAA8B,CAAC;iBAC1C,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KACnE;IACD,MAAM;QACF,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC5B,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,EAAE;KAC5J;;;;;;;;;","names":[],"sources":["../web-components/dist/collection/components/ic-theme/ic-theme.js"],"sourcesContent":["import { Host, h, } from \"@stencil/core\";\nimport { convertToRGBA, getBrandForegroundAppearance, } from \"../../utils/helpers\";\nimport { getBrandColorBrightness } from \"../../utils/helpers\";\nimport { BLACK_MIN_COLOR_BRIGHTNESS, WHITE_MAX_COLOR_BRIGHTNESS, } from \"../../utils/constants\";\nexport class Theme {\n    constructor() {\n        this.themeClass = \"\";\n        /**\n         * The brand colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n         */\n        this.brandColor = null;\n        /**\n         * The theme mode. Can be \"dark\", \"light\", or \"system\". \"system\" will use the device or browser settings.\n         */\n        this.theme = \"light\";\n        this.darkModeChangeHandler = () => {\n            if (this.theme === \"system\") {\n                this.themeClass =\n                    window.matchMedia &&\n                        window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n                        ? \"ic-theme-dark\"\n                        : \"ic-theme-light\";\n            }\n            else {\n                this.themeClass = `ic-theme-${this.theme}`;\n            }\n            this.icThemeChange.emit(this.theme);\n        };\n        this.checkBrandColorContrast = () => {\n            if (getBrandColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n                getBrandColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS) {\n                console.warn(`The brand colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`);\n            }\n        };\n        this.setBrandColor = () => {\n            const colorRGBA = this.brandColor ? convertToRGBA(this.brandColor) : null;\n            if (colorRGBA) {\n                const { r, g, b, a } = colorRGBA;\n                const { style } = document.documentElement;\n                style.setProperty(\"--ic-brand-color-primary-r\", `${r}`);\n                style.setProperty(\"--ic-brand-color-primary-g\", `${g}`);\n                style.setProperty(\"--ic-brand-color-primary-b\", `${b}`);\n                style.setProperty(\"--ic-brand-color-primary-a\", `${a}`);\n                this.checkBrandColorContrast();\n                this.brandChange.emit({\n                    mode: getBrandForegroundAppearance(),\n                    color: colorRGBA,\n                });\n            }\n        };\n    }\n    watchBrandColorPropHandler() {\n        this.setBrandColor();\n    }\n    watchThemePropHandler() {\n        this.darkModeChangeHandler();\n    }\n    componentWillLoad() {\n        this.darkModeChangeHandler();\n        this.setBrandColor();\n        window.matchMedia &&\n            window\n                .matchMedia(\"(prefers-color-scheme: dark)\")\n                .addEventListener(\"change\", this.darkModeChangeHandler);\n    }\n    render() {\n        const { themeClass } = this;\n        return (h(Host, { key: 'ee89cdd36cb4cb7e0589dfea2dd5a60b5de40041', class: themeClass }, h(\"slot\", { key: 'e7803bf5fc0974bfcf9a2a52cb5870254453a1bd' })));\n    }\n    static get is() { return \"ic-theme\"; }\n    static get properties() {\n        return {\n            \"brandColor\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcColor | null\",\n                    \"resolved\": \"`#${string}` | `rgb(${string})` | `rgba(${string})` | null | undefined\",\n                    \"references\": {\n                        \"IcColor\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcColor\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The brand colour. Can be a hex value e.g. \\\"#ff0000\\\", RGB e.g. \\\"rgb(255, 0, 0)\\\", or RGBA e.g. \\\"rgba(255, 0, 0, 1)\\\".\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"brand-color\",\n                \"reflect\": false,\n                \"defaultValue\": \"null\"\n            },\n            \"theme\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcThemeSettings\",\n                    \"resolved\": \"\\\"dark\\\" | \\\"light\\\" | \\\"system\\\" | undefined\",\n                    \"references\": {\n                        \"IcThemeSettings\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcThemeSettings\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The theme mode. Can be \\\"dark\\\", \\\"light\\\", or \\\"system\\\". \\\"system\\\" will use the device or browser settings.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"theme\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"light\\\"\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"themeClass\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"brandChange\",\n                \"name\": \"brandChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"Emitted when the brand color is changed.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"IcBrand\",\n                    \"resolved\": \"{ mode: IcBrandForeground; color: IcColorRGB; }\",\n                    \"references\": {\n                        \"IcBrand\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcBrand\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"icThemeChange\",\n                \"name\": \"icThemeChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the theme is changed.\"\n                },\n                \"complexType\": {\n                    \"original\": \"IcThemeSettings\",\n                    \"resolved\": \"\\\"dark\\\" | \\\"light\\\" | \\\"system\\\"\",\n                    \"references\": {\n                        \"IcThemeSettings\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcThemeSettings\"\n                        }\n                    }\n                }\n            }];\n    }\n    static get watchers() {\n        return [{\n                \"propName\": \"brandColor\",\n                \"methodName\": \"watchBrandColorPropHandler\"\n            }, {\n                \"propName\": \"theme\",\n                \"methodName\": \"watchThemePropHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=ic-theme.js.map\n"],"version":3}
+{"file":"ic-theme.entry.js","mappings":";;;MAIa,KAAK;IACd;;;;QACI,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;;;;QAIrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;;;;QAIvB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;QACrB,IAAI,CAAC,qBAAqB,GAAG;YACzB,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;gBACzB,IAAI,CAAC,UAAU;oBACX,MAAM,CAAC,UAAU;wBACb,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO;0BACvD,eAAe;0BACf,gBAAgB,CAAC;aAC9B;iBACI;gBACD,IAAI,CAAC,UAAU,GAAG,YAAY,IAAI,CAAC,KAAK,EAAE,CAAC;aAC9C;YACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACvC,CAAC;QACF,IAAI,CAAC,uBAAuB,GAAG;YAC3B,IAAI,uBAAuB,EAAE,GAAG,0BAA0B;gBACtD,uBAAuB,EAAE,GAAG,0BAA0B,EAAE;gBACxD,OAAO,CAAC,IAAI,CAAC,2TAA2T,CAAC,CAAC;aAC7U;SACJ,CAAC;QACF,IAAI,CAAC,aAAa,GAAG;YACjB,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;YAC1E,IAAI,SAAS,EAAE;gBACX,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;gBACjC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,eAAe,CAAC;gBAC3C,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBACxD,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBACxD,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBACxD,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBACxD,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBAC/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;oBAClB,IAAI,EAAE,4BAA4B,EAAE;oBACpC,KAAK,EAAE,SAAS;iBACnB,CAAC,CAAC;aACN;SACJ,CAAC;KACL;IACD,0BAA0B;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;KACxB;IACD,qBAAqB;QACjB,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAChC;IACD,iBAAiB;QACb,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,MAAM,CAAC,UAAU;YACb,MAAM;iBACD,UAAU,CAAC,8BAA8B,CAAC;iBAC1C,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KACnE;IACD,MAAM;QACF,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC5B,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,EAAE;KAC5J;;;;;;;;;","names":[],"sources":["../web-components/dist/collection/components/ic-theme/ic-theme.js"],"sourcesContent":["import { Host, h, } from \"@stencil/core\";\nimport { convertToRGBA, getBrandForegroundAppearance, } from \"../../utils/helpers\";\nimport { getBrandColorBrightness } from \"../../utils/helpers\";\nimport { BLACK_MIN_COLOR_BRIGHTNESS, WHITE_MAX_COLOR_BRIGHTNESS, } from \"../../utils/constants\";\nexport class Theme {\n    constructor() {\n        this.themeClass = \"\";\n        /**\n         * The brand colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n         */\n        this.brandColor = null;\n        /**\n         * The theme mode. Can be \"dark\", \"light\", or \"system\". \"system\" will use the device or browser settings.\n         */\n        this.theme = \"light\";\n        this.darkModeChangeHandler = () => {\n            if (this.theme === \"system\") {\n                this.themeClass =\n                    window.matchMedia &&\n                        window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n                        ? \"ic-theme-dark\"\n                        : \"ic-theme-light\";\n            }\n            else {\n                this.themeClass = `ic-theme-${this.theme}`;\n            }\n            this.icThemeChange.emit(this.theme);\n        };\n        this.checkBrandColorContrast = () => {\n            if (getBrandColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n                getBrandColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS) {\n                console.warn(`The brand colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`);\n            }\n        };\n        this.setBrandColor = () => {\n            const colorRGBA = this.brandColor ? convertToRGBA(this.brandColor) : null;\n            if (colorRGBA) {\n                const { r, g, b, a } = colorRGBA;\n                const { style } = document.documentElement;\n                style.setProperty(\"--ic-brand-color-primary-r\", `${r}`);\n                style.setProperty(\"--ic-brand-color-primary-g\", `${g}`);\n                style.setProperty(\"--ic-brand-color-primary-b\", `${b}`);\n                style.setProperty(\"--ic-brand-color-primary-a\", `${a}`);\n                this.checkBrandColorContrast();\n                this.brandChange.emit({\n                    mode: getBrandForegroundAppearance(),\n                    color: colorRGBA,\n                });\n            }\n        };\n    }\n    watchBrandColorPropHandler() {\n        this.setBrandColor();\n    }\n    watchThemePropHandler() {\n        this.darkModeChangeHandler();\n    }\n    componentWillLoad() {\n        this.darkModeChangeHandler();\n        this.setBrandColor();\n        window.matchMedia &&\n            window\n                .matchMedia(\"(prefers-color-scheme: dark)\")\n                .addEventListener(\"change\", this.darkModeChangeHandler);\n    }\n    render() {\n        const { themeClass } = this;\n        return (h(Host, { key: '5acfd70fc7d5cec478027487b121829ad9258623', class: themeClass }, h(\"slot\", { key: '962d9fdd42ceb26a48c49a06aa3df3cb13bb9157' })));\n    }\n    static get is() { return \"ic-theme\"; }\n    static get properties() {\n        return {\n            \"brandColor\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcColor | null\",\n                    \"resolved\": \"`#${string}` | `rgb(${string})` | `rgba(${string})` | null | undefined\",\n                    \"references\": {\n                        \"IcColor\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcColor\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The brand colour. Can be a hex value e.g. \\\"#ff0000\\\", RGB e.g. \\\"rgb(255, 0, 0)\\\", or RGBA e.g. \\\"rgba(255, 0, 0, 1)\\\".\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"brand-color\",\n                \"reflect\": false,\n                \"defaultValue\": \"null\"\n            },\n            \"theme\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcThemeSettings\",\n                    \"resolved\": \"\\\"dark\\\" | \\\"light\\\" | \\\"system\\\" | undefined\",\n                    \"references\": {\n                        \"IcThemeSettings\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcThemeSettings\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The theme mode. Can be \\\"dark\\\", \\\"light\\\", or \\\"system\\\". \\\"system\\\" will use the device or browser settings.\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"theme\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"light\\\"\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"themeClass\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"brandChange\",\n                \"name\": \"brandChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"Emitted when the brand color is changed.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"IcBrand\",\n                    \"resolved\": \"{ mode: IcBrandForeground; color: IcColorRGB; }\",\n                    \"references\": {\n                        \"IcBrand\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcBrand\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"icThemeChange\",\n                \"name\": \"icThemeChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the theme is changed.\"\n                },\n                \"complexType\": {\n                    \"original\": \"IcThemeSettings\",\n                    \"resolved\": \"\\\"dark\\\" | \\\"light\\\" | \\\"system\\\"\",\n                    \"references\": {\n                        \"IcThemeSettings\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcThemeSettings\"\n                        }\n                    }\n                }\n            }];\n    }\n    static get watchers() {\n        return [{\n                \"propName\": \"brandColor\",\n                \"methodName\": \"watchBrandColorPropHandler\"\n            }, {\n                \"propName\": \"theme\",\n                \"methodName\": \"watchThemePropHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=ic-theme.js.map\n"],"version":3}

package/dist/esm/ic-time-input.entry.js

@@ -4,7 +4,7 @@ import { C as Clear } from './clear-icon-1c79bda2.js';
 
 const Clock = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>clock-outline</title><path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" /></svg>`;
 
-const icTimeInputCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--ic-input-label-helpertext-padding:var(--ic-space-xs);--input-bg-color:var(--ic-time-picker-field-background);--ic-input-label-text-color:var(--ic-time-picker-label);--ic-input-label-helper-text-color:var(--ic-time-picker-subtitle);--border-color:var(--ic-time-picker-time-field-border-default);--border-color-disabled:var(--ic-time-picker-border-disabled);--border-color-hover:var(--ic-time-picker-time-field-border-hover);--border-color-pressed:var(--ic-time-picker-time-field-border-pressed);--border-error-color:var(--ic-time-picker-border-error);--border-error-color-hover:var(--ic-time-picker-border-error-hover);--border-error-color-pressed:var(--ic-time-picker-border-error-pressed);--border-success-color:var(--ic-time-picker-border-success);--border-success-color-hover:var(--ic-time-picker-border-success-hover);--border-success-color-pressed:var(--ic-time-picker-border-success-pressed);--border-warning-color:var(--ic-time-picker-border-warning);--border-warning-color-hover:var(--ic-time-picker-border-warning-hover);--border-warning-color-pressed:var(--ic-time-picker-border-warning-pressed);--input-width:calc((4 * var(--ic-space-xxl)) + var(--ic-space-xxs))}:host(.ic-time-input-disabled){--ic-input-label-text-color:var(--ic-time-picker-label-disabled);--ic-input-label-helper-text-color:var(--ic-time-picker-subtitle-disabled)}:host(.ic-time-input-disabled) input{color:var(--ic-time-picker-time-text-disabled)}:host(.ic-time-input-large){--input-width:calc(\n    (4 * var(--ic-space-xxl)) + var(--ic-space-xxs) + var(--ic-space-lg)\n  )}:host(.ic-time-input-small){--input-width:calc(\n    (3 * var(--ic-space-xxl)) + var(--ic-space-xxs) + var(--ic-space-xl)\n  )}input{border:0;height:100%;padding:0;outline:none;background:none;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;color:var(--ic-time-picker-time-text-default);caret-color:var(--ic-time-picker-typing-cursor)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}input:-webkit-autofill{box-shadow:0 0 0 var(--ic-space-sm) var(--ic-color-background-primary) inset;-webkit-text-fill-color:var(--ic-time-picker-time-text-default) !important}input::-moz-placeholder{color:var(--ic-time-picker-field-placeholder-text)}input::placeholder{color:var(--ic-time-picker-field-placeholder-text)}ic-input-component-container{cursor:text}ic-input-component-container .focus-indicator{padding:var(--ic-space-xxxs) var(--ic-space-xs);align-items:center}.time-inputs{color:var(--ic-time-picker-field-placeholder-text)}.hour-input{width:1.438rem}.minute-input{width:1.813rem}.second-input,.second-input.fit-to-value{width:2.313rem}.fit-to-value{width:1.25rem}.sr-only{position:absolute;left:-9999px}.input-container{width:100%;display:flex;justify-content:space-between;align-items:center;position:relative}.action-buttons{display:flex;align-items:center}.show-clock-button-wrapper{display:flex;justify-content:center;align-items:center}.clear-button,.clock-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition);margin:0}.clear-button.hidden{display:none}.clear-button:focus,.clock-button:focus,.clear-button:active,.clock-button:active{background-color:var(--ic-color-focus-inner) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;border-radius:0.25rem}.clock-button:focus,.clock-button:active{--ic-button-tertiary-text-active:var(--ic-atoms-input-clear-button-focus);--ic-button-tertiary-text-hover-active:var(\n    --ic-atoms-input-clear-button-focus\n  );--ic-button-tertiary-text-pressed-active:var(\n    --ic-atoms-input-clear-button-focus\n  )}.clear-button:focus,.clock-button:focus,.clear-button:active *,.clock-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button svg{color:var(--ic-time-picker-clear-icon)}.clear-button:focus svg{color:var(--ic-atoms-input-clear-button-focus)}.divider{margin:0 var(--ic-space-xxs);width:var(--ic-space-1px);background-color:var(--ic-atoms-input-divider);border-radius:var(--ic-space-1px)}.divider.small{height:var(--ic-space-md)}.divider.medium{height:calc(var(--ic-space-sm) + var(--ic-space-xs))}.divider.large{height:var(--ic-space-lg)}ic-input-validation{--ic-input-validation-status-text-color:var(--ic-time-picker-status-text);--ic-input-validation-error:var(--ic-time-picker-icon-error);--ic-input-validation-warning-icon-color:var(--ic-time-picker-icon-warning);--ic-input-validation-success-icon-color:var(--ic-time-picker-icon-success)}@media (forced-colors: active){.clear-button svg{color:currentColor}}";
+const icTimeInputCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--ic-input-label-helpertext-padding:var(--ic-space-xs);--input-bg-color:var(--ic-time-picker-field-background);--ic-input-label-text-color:var(--ic-time-picker-label);--ic-input-label-helper-text-color:var(--ic-time-picker-subtitle);--border-color:var(--ic-time-picker-time-field-border-default);--border-color-disabled:var(--ic-time-picker-border-disabled);--border-color-hover:var(--ic-time-picker-time-field-border-hover);--border-color-pressed:var(--ic-time-picker-time-field-border-pressed);--border-error-color:var(--ic-time-picker-border-error);--border-error-color-hover:var(--ic-time-picker-border-error-hover);--border-error-color-pressed:var(--ic-time-picker-border-error-pressed);--border-success-color:var(--ic-time-picker-border-success);--border-success-color-hover:var(--ic-time-picker-border-success-hover);--border-success-color-pressed:var(--ic-time-picker-border-success-pressed);--border-warning-color:var(--ic-time-picker-border-warning);--border-warning-color-hover:var(--ic-time-picker-border-warning-hover);--border-warning-color-pressed:var(--ic-time-picker-border-warning-pressed);--input-width:calc((4 * var(--ic-space-xxl)) + var(--ic-space-xxs))}:host(.ic-time-input-disabled){--ic-input-label-text-color:var(--ic-time-picker-label-disabled);--ic-input-label-helper-text-color:var(--ic-time-picker-subtitle-disabled)}:host(.ic-time-input-disabled) input{color:var(--ic-time-picker-time-text-disabled)}:host(.ic-time-input-large){--input-width:calc(\n    (4 * var(--ic-space-xxl)) + var(--ic-space-xxs) + var(--ic-space-lg)\n  )}:host(.ic-time-input-small){--input-width:calc(\n    (3 * var(--ic-space-xxl)) + var(--ic-space-xxs) + var(--ic-space-xl)\n  )}input{border:0;height:100%;padding:0;outline:none;background:none;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;color:var(--ic-time-picker-time-text-default);caret-color:var(--ic-time-picker-typing-cursor)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}input:-webkit-autofill{box-shadow:0 0 0 var(--ic-space-sm) var(--ic-color-background-primary) inset;-webkit-text-fill-color:var(--ic-time-picker-time-text-default) !important}input::-moz-placeholder{color:var(--ic-time-picker-field-placeholder-text)}input::placeholder{color:var(--ic-time-picker-field-placeholder-text)}ic-input-component-container{cursor:text}ic-input-component-container .focus-indicator{padding:var(--ic-space-xxxs) var(--ic-space-xs);align-items:center}.time-inputs{color:var(--ic-time-picker-field-placeholder-text)}.hour-input{width:1.438rem}.minute-input{width:1.813rem}.second-input,.second-input.fit-to-value{width:2.313rem}.fit-to-value{width:1.25rem}.sr-only{position:absolute;left:-9999px}.input-container{width:100%;display:flex;justify-content:space-between;align-items:center;position:relative}.action-buttons{display:flex;align-items:center}.show-clock-button-wrapper{display:flex;justify-content:center;align-items:center}.clear-button,.clock-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition);margin:0}.clear-button.hidden{display:none}.clear-button:focus,.clock-button:focus,.clear-button:active,.clock-button:active{background-color:var(--ic-color-focus-inner) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;border-radius:0.25rem}.clock-button:focus,.clock-button:active{--ic-button-tertiary-text-active:var(--ic-atoms-input-clear-button-focus);--ic-button-tertiary-text-hover-active:var(\n    --ic-atoms-input-clear-button-focus\n  );--ic-button-tertiary-text-pressed-active:var(\n    --ic-atoms-input-clear-button-focus\n  )}.clear-button:focus,.clock-button:focus,.clear-button:active *,.clock-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button svg{color:var(--ic-time-picker-clear-icon)}.clear-button:focus svg{color:var(--ic-atoms-input-clear-button-focus)}.divider{margin:0 var(--ic-space-xxs);width:var(--ic-space-1px);background-color:var(--ic-atoms-input-divider);border-radius:var(--ic-space-1px)}.divider.small{height:var(--ic-space-md)}.divider.medium{height:calc(var(--ic-space-sm) + var(--ic-space-xs))}.divider.large{height:var(--ic-space-lg)}ic-input-validation{--ic-input-validation-status-text-color:var(--ic-time-picker-status-text);--ic-input-validation-error:var(--ic-time-picker-icon-error);--ic-input-validation-warning-icon-color:var(--ic-time-picker-icon-warning);--ic-input-validation-success-icon-color:var(--ic-time-picker-icon-success)}@media (forced-colors: active){.clear-button svg{color:currentcolor}}";
 const IcTimeInputStyle0 = icTimeInputCss;
 
 let inputIds = 0;
@@ -147,7 +147,7 @@ const TimeInput = class {
         };
         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;
             }
@@ -379,8 +379,8 @@ const TimeInput = class {
             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") {
@@ -672,12 +672,12 @@ const TimeInput = class {
             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:
@@ -902,23 +902,23 @@ const TimeInput = class {
             !(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 delegatesFocus() { return true; }
     get el() { return getElement(this); }