@ukic/canary-web-components 3.0.0-canary.30 → 3.0.0-canary.31

package/dist/esm/ic-tab-panel.entry.js

@@ -24,10 +24,10 @@ const TabPanel = class {
     }
     render() {
         const { active, theme } = this;
-        return (h(Host, { key: '33c2600681317fb27e801153496452582e5862a8', class: {
+        return (h(Host, { key: 'aa17ab5e82e7692328cfa063e5666edfd65b1c9c', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tab-panel-hidden": !active,
-            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '722ead8cc9ed26d0815781211bb5e657aa65f8ba' }, h("slot", { key: '78dad6e7c3d0ba3c684d586c0a16d2d1e7de32f7' }))));
+            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '719d420b5a75b8fcc722c7e510f86411e18afade' }, h("slot", { key: 'bec1ba48c3e0ced13c339f31f9af1663c068144d' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ic-tab-panel.entry.js.map

@@ -1 +1 @@
-{"file":"ic-tab-panel.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,mgFAAmgF,CAAC;AAC1hF,yBAAe,aAAa;;MCAf,QAAQ;IACjB;;;;;;;QAII,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;;;;QAIpB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;;QAExB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;KAC1B;IACD,iBAAiB;QACb,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACtC;IACD,MAAM;QACF,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAC/B,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE;gBAClE,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;gBAC1C,qBAAqB,EAAE,CAAC,MAAM;aACjC,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,CAAC,EAAE;KAC3L;;;;;;;","names":[],"sources":["../web-components/dist/collection/components/ic-tab-panel/ic-tab-panel.css?tag=ic-tab-panel&encapsulation=shadow","../web-components/dist/collection/components/ic-tab-panel/ic-tab-panel.js"],"sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers.\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Render the `main` element consistently in IE.\n   */\n\nmain {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * Remove the gray background on active links in IE 10.\n   */\n\na {\n  background-color: transparent;\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57-\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Remove the border on images inside links in IE 10.\n   */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers.\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n   * Remove the default vertical scrollbar in IE 10+.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10.\n   * 2. Remove the padding in IE 10.\n   */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding in Chrome and Safari on macOS.\n   */\n\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in Edge, IE 10+, and Firefox.\n   */\n\ndetails {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10+.\n   */\n\ntemplate {\n  display: none;\n}\n\n/**\n   * Add the correct display in IE 10.\n   */\n\n[hidden] {\n  display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-style: inherit;\n  vertical-align: baseline;\n}\n\n\n:host(.ic-tab-panel-hidden) {\n  display: none;\n}\n\n:host(:not(.ic-tab-panel-hidden)) {\n  display: block;\n}\n\n:host {\n  color: var(--ic-color-text-primary);\n}\n","import { Host, h, } from \"@stencil/core\";\nexport class TabPanel {\n    constructor() {\n        /**\n         * @internal If `true`, the tab panel will be displayed.\n         */\n        this.active = false;\n        /**\n         * @internal Determines whether black variant of the tabs should be displayed.\n         */\n        this.monochrome = false;\n        /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n        this.theme = \"inherit\";\n    }\n    connectedCallback() {\n        this.tabPanelCreated.emit(this.el);\n    }\n    render() {\n        const { active, theme } = this;\n        return (h(Host, { key: '33c2600681317fb27e801153496452582e5862a8', class: {\n                [`ic-theme-${theme}`]: theme !== \"inherit\",\n                \"ic-tab-panel-hidden\": !active,\n            }, role: \"tabpanel\", \"aria-hidden\": `${!active}` }, h(\"div\", { key: '722ead8cc9ed26d0815781211bb5e657aa65f8ba' }, h(\"slot\", { key: '78dad6e7c3d0ba3c684d586c0a16d2d1e7de32f7' }))));\n    }\n    static get is() { return \"ic-tab-panel\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ic-tab-panel.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-tab-panel.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"active\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"If `true`, the tab panel will be displayed.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"active\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"monochrome\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"Determines whether black variant of the tabs should be displayed.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"monochrome\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"panelId\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"The shared ID that links the panel and tab.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"panel-id\",\n                \"reflect\": true\n            },\n            \"selectedTab\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"The shared ID of the currently selected tab.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"selected-tab\",\n                \"reflect\": false\n            },\n            \"tabPosition\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"The position of the tab panel inside the tabs array in context.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"tab-position\",\n                \"reflect\": true\n            },\n            \"theme\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcThemeMode\",\n                    \"resolved\": \"\\\"dark\\\" | \\\"inherit\\\" | \\\"light\\\" | undefined\",\n                    \"references\": {\n                        \"IcThemeMode\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcThemeMode\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"Determines whether the light or dark variant of the tabs should be displayed.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"theme\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"inherit\\\"\"\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"tabPanelCreated\",\n                \"name\": \"tabPanelCreated\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"Emitted when a tab panel is dynamically created.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"HTMLIcTabPanelElement\",\n                    \"resolved\": \"HTMLIcTabPanelElement\",\n                    \"references\": {\n                        \"HTMLIcTabPanelElement\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::HTMLIcTabPanelElement\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"tabPanelRemoved\",\n                \"name\": \"tabPanelRemoved\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"Emitted when a tab panel is unmounted.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=ic-tab-panel.js.map\n"],"version":3}
+{"file":"ic-tab-panel.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,mgFAAmgF,CAAC;AAC1hF,yBAAe,aAAa;;MCAf,QAAQ;IACjB;;;;;;;QAII,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;;;;QAIpB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;;QAExB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;KAC1B;IACD,iBAAiB;QACb,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACtC;IACD,MAAM;QACF,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAC/B,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE;gBAClE,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;gBAC1C,qBAAqB,EAAE,CAAC,MAAM;aACjC,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,CAAC,EAAE;KAC3L;;;;;;;","names":[],"sources":["../web-components/dist/collection/components/ic-tab-panel/ic-tab-panel.css?tag=ic-tab-panel&encapsulation=shadow","../web-components/dist/collection/components/ic-tab-panel/ic-tab-panel.js"],"sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers.\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Render the `main` element consistently in IE.\n   */\n\nmain {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * Remove the gray background on active links in IE 10.\n   */\n\na {\n  background-color: transparent;\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57-\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Remove the border on images inside links in IE 10.\n   */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers.\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n   * Remove the default vertical scrollbar in IE 10+.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10.\n   * 2. Remove the padding in IE 10.\n   */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding in Chrome and Safari on macOS.\n   */\n\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in Edge, IE 10+, and Firefox.\n   */\n\ndetails {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10+.\n   */\n\ntemplate {\n  display: none;\n}\n\n/**\n   * Add the correct display in IE 10.\n   */\n\n[hidden] {\n  display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-style: inherit;\n  vertical-align: baseline;\n}\n\n\n:host(.ic-tab-panel-hidden) {\n  display: none;\n}\n\n:host(:not(.ic-tab-panel-hidden)) {\n  display: block;\n}\n\n:host {\n  color: var(--ic-color-text-primary);\n}\n","import { Host, h, } from \"@stencil/core\";\nexport class TabPanel {\n    constructor() {\n        /**\n         * @internal If `true`, the tab panel will be displayed.\n         */\n        this.active = false;\n        /**\n         * @internal Determines whether black variant of the tabs should be displayed.\n         */\n        this.monochrome = false;\n        /** @internal Determines whether the light or dark variant of the tabs should be displayed. */\n        this.theme = \"inherit\";\n    }\n    connectedCallback() {\n        this.tabPanelCreated.emit(this.el);\n    }\n    render() {\n        const { active, theme } = this;\n        return (h(Host, { key: 'aa17ab5e82e7692328cfa063e5666edfd65b1c9c', class: {\n                [`ic-theme-${theme}`]: theme !== \"inherit\",\n                \"ic-tab-panel-hidden\": !active,\n            }, role: \"tabpanel\", \"aria-hidden\": `${!active}` }, h(\"div\", { key: '719d420b5a75b8fcc722c7e510f86411e18afade' }, h(\"slot\", { key: 'bec1ba48c3e0ced13c339f31f9af1663c068144d' }))));\n    }\n    static get is() { return \"ic-tab-panel\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ic-tab-panel.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-tab-panel.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"active\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"If `true`, the tab panel will be displayed.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"active\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"monochrome\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"Determines whether black variant of the tabs should be displayed.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"monochrome\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"panelId\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"The shared ID that links the panel and tab.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"panel-id\",\n                \"reflect\": true\n            },\n            \"selectedTab\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"The shared ID of the currently selected tab.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"selected-tab\",\n                \"reflect\": false\n            },\n            \"tabPosition\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"The position of the tab panel inside the tabs array in context.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"tab-position\",\n                \"reflect\": true\n            },\n            \"theme\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcThemeMode\",\n                    \"resolved\": \"\\\"dark\\\" | \\\"inherit\\\" | \\\"light\\\" | undefined\",\n                    \"references\": {\n                        \"IcThemeMode\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../utils/types\",\n                            \"id\": \"src/utils/types.ts::IcThemeMode\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"Determines whether the light or dark variant of the tabs should be displayed.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"getter\": false,\n                \"setter\": false,\n                \"attribute\": \"theme\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"inherit\\\"\"\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"tabPanelCreated\",\n                \"name\": \"tabPanelCreated\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"Emitted when a tab panel is dynamically created.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"HTMLIcTabPanelElement\",\n                    \"resolved\": \"HTMLIcTabPanelElement\",\n                    \"references\": {\n                        \"HTMLIcTabPanelElement\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::HTMLIcTabPanelElement\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"tabPanelRemoved\",\n                \"name\": \"tabPanelRemoved\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [{\n                            \"name\": \"internal\",\n                            \"text\": \"Emitted when a tab panel is unmounted.\"\n                        }],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=ic-tab-panel.js.map\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { h, r as registerInstance, H as Host, g as getElement } from './index-a7a720e7.js';
-import { D as DEVICE_SIZES } from './helpers-89cb996d.js';
+import { D as DEVICE_SIZES } from './helpers-9f228880.js';
 
 const ItemHook = () => {
     // adds offset to the item based on its variant
@@ -342,10 +342,10 @@ const TableOfContents = class {
     // 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: 'c5c977f781772f014ec4b2df248fdc91c31f2087', class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("ic-section-container", { key: 'aa5f4869224bcf56e4137b83e6143b7c93b8ccd3', class: TOC_CONTAINER_CLASS, aligned: "full-width" }, h("div", { key: '1f925229198cc923a0b02165b0000cf235435546', role: "navigation", class: `${TOC_CONTENT_CLASS} ${position === "top" && "table-of-contents-position-top"}
-            ${position === "right" && "table-of-contents-position-side"}` }, h("ic-typography", { key: 'c7468f8c744f3838629f745d511049b01c97dc25', class: `table-of-contents-heading ${size}`, variant: "subtitle-large" }, heading), h("div", { key: 'c83b03e6eb43c042c6ca0d00e80be7666899a9d9', class: "table-of-contents-list" }, h("div", { key: '6febd41a740d97f38097f549606d05d726256dcc', class: `table-of-contents-sidebar ${monochrome && `table-of-contents-sidebar-monochrome`}
+        return (h(Host, { key: 'b92dba4d29b176dc877963ce0c3113568007847d', class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("ic-section-container", { key: '86e9740eecc52ca907e39d7c3daf5ebc506b6c3b', class: TOC_CONTAINER_CLASS, aligned: "full-width" }, h("div", { key: '8a4cceab420909f0030c262839b4f6c2bbedf297', role: "navigation", class: `${TOC_CONTENT_CLASS} ${position === "top" && "table-of-contents-position-top"}
+            ${position === "right" && "table-of-contents-position-side"}` }, h("ic-typography", { key: 'd9dac6d2e62f2aadd177833418e85cb89ab2dade', class: `table-of-contents-heading ${size}`, variant: "subtitle-large" }, heading), h("div", { key: 'c88968311486981bde1093930757ea264d2bd919', class: "table-of-contents-list" }, h("div", { key: '0b8e21d4f1c8b8a4f4f4f91c8c3ae9ba859b9b5b', class: `table-of-contents-sidebar ${monochrome && `table-of-contents-sidebar-monochrome`}
                 ${size}
-                ` }), h("ol", { key: '6e2c7ac1c7e3509bb738d98e8770c38c290934dc', class: TOC_LIST_ITEMS_CLASS }, this.generateHeadingTree().map((item) => this.renderTocTree(item))))), h("slot", { key: '3c9722771d63819dc9039d872127e2a660bce17a' }))));
+                ` }), h("ol", { key: 'dc2216ce8e94c17ab0b2fe0b5644086eb90c4fd0', class: TOC_LIST_ITEMS_CLASS }, this.generateHeadingTree().map((item) => this.renderTocTree(item))))), h("slot", { key: 'e0a992d1de985fbe672aa7a33ed54efb5ec5de43' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -67,7 +67,7 @@ const Theme = class {
     }
     render() {
         const { themeClass } = this;
-        return (h(Host, { key: '53aa5cb32bce3ebd1b66c22df8c64f615fad4d00', class: themeClass }, h("slot", { key: '6f2d5fa4d0d7a42995dd9d4b31081b421e6fe5a9' })));
+        return (h(Host, { key: '603b695aae6f29ef4f3d89d4e1995221b3324753', class: themeClass }, h("slot", { key: '0b4c3bd3f4b078775ff13677feb3f0fbc080d810' })));
     }
     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: '53aa5cb32bce3ebd1b66c22df8c64f615fad4d00', class: themeClass }, h(\"slot\", { key: '6f2d5fa4d0d7a42995dd9d4b31081b421e6fe5a9' })));\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: '603b695aae6f29ef4f3d89d4e1995221b3324753', class: themeClass }, h(\"slot\", { key: '0b4c3bd3f4b078775ff13677feb3f0fbc080d810' })));\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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7a720e7.js';
-import { b as isEmptyString, q as getInputDescribedByText, t as isNumeric, u as IcInformationStatus, r as removeDisabledFalse, v as removeFormResetListener, w as addFormResetListener, o as onComponentRequiredPropUndefined, x as renderHiddenInput } from './helpers-89cb996d.js';
+import { b as isEmptyString, l as getInputDescribedByText, m as isNumeric, n as IcInformationStatus, r as removeDisabledFalse, q as removeFormResetListener, s as addFormResetListener, o as onComponentRequiredPropUndefined, t as renderHiddenInput } from './helpers-9f228880.js';
 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>`;
@@ -910,23 +910,23 @@ const TimeInput = class {
             !(isEmptyString(this.hour) &&
                 isEmptyString(this.minute) &&
                 isEmptyString(this.second)));
-        return (h(Host, { key: '70275e6d87fd44a0c6b449e313803726e7fa337e', class: {
+        return (h(Host, { key: 'b4330a85fcd6bf99ace98ba735759e0e98ebea69', 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: '6d3cf2806df41257f0f8dd3bd9bb91c1f5bdaf1f', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: '0761552c3fa5a94d72443ec5494ab186b3c3e353', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: 'e906eae8efa6fc82b6f64a45efdbdc0c23fdc502', name: "helper-text", slot: "helper-text" }))), h("span", { key: '9cb0f309a562f0bf233598f3504cb616e313f491', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: '4f6250ad410c17a07e1a89d4b83a71a041638f6c', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: 'eef1b223cbe4b5547f5574e156d65faef4d66d70', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: 'aa93f30ce22009baafd38ee7fc850b33e050f214', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '1d51bd5db03ec6ddb6e8c38d74b4b7de10a38e69', class: "input-container" }, h("div", { key: 'd7886d7504735815d9ee330c7f694dfee26c41a4', class: "time-inputs" }, [
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: 'e61ccf4dc81c26e14bf37e388aeb60fd25b4abd7', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: '7bda8a8034ae7b80594341f6924d561abcbbab90', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: 'da6a06701686398f4a44b71e76db5d02da897631', name: "helper-text", slot: "helper-text" }))), h("span", { key: '62e88d54d2f445778e96be67949b1a82fc272955', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: '0a80156ecc1ddf0dea39033cc78de875ab7fa532', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: '09d36876b7dc4d8050bcb0e7d39a0b008bab4a12', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: '6bb2743ce8c211b4500d707bf0a2ce10245dc31c', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '02a184415c1f445340b3d4a3097b28a79cd258fe', class: "input-container" }, h("div", { key: 'a68248f5ad7a134ebe73456268b6f9cf07a35afa', class: "time-inputs" }, [
             this.getInputsInOrder()[0],
             ":",
             this.getInputsInOrder()[1],
             !this.isHHMMFormat()
                 ? [":", this.getInputsInOrder()[2]]
                 : null,
-        ]), h("div", { key: '8d3519e278c0df75c4bbf89d3861748351e94918', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '539e7c99fd6a3926f6e00ee0a1549ca5f5915f0e', id: "clear-button", "aria-label": "Clear input", class: {
+        ]), h("div", { key: '095391d922701f29a7debfd2482723fe05d1fdeb', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '8690a529f57705b60ecbc3122925557803197ed8', 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: '6fa17ab17ba75a71b83ee63b80e55ea73a973aec', class: "show-clock-button-wrapper" }, h("div", { key: '6077995f222607a590871cab77b8636f2d22057b', class: { divider: showDivider, [size]: true } }), h("ic-button", { key: '3d215eac6b36c366c3c6ec1768eff2488d33d9a3', 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: '257f1bdf46fff226a0f064503e7488f913be1038', id: this.selectedTimeInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: '30b0439bef6919bb91ad966905eb77a0100896b8', ref: (el) => (this.selectedTimeInfoEl = el), role: "status" })), h("ic-input-validation", { key: '6059c045ea76f0177a2834d7d06dbe3cc5cdcde3', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidTimeText, for: inputId, ariaLiveMode: validationAriaLive }))));
+            }, 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: '83fe94cb9dc7b16f70049b36644d62f714e03c6f', class: "show-clock-button-wrapper" }, h("div", { key: '34171a16f8058ad79af9ac3bfeb9c2aea06c0c91', class: { divider: showDivider, [size]: true } }), h("ic-button", { key: '3290691bc0e95d300e526052934efbc93e806e62', 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: 'b44af8625ff62cf77e8be3e88d62bcb411bd5dc0', id: this.selectedTimeInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: 'a68f8dac81536f4f14302d7be6151a20c7e92024', ref: (el) => (this.selectedTimeInfoEl = el), role: "status" })), h("ic-input-validation", { key: 'c152fd0a46420a430bb61f619dbbb395f1dd41cb', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidTimeText, for: inputId, ariaLiveMode: validationAriaLive }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }