@ukic/web-components 2.0.0-alpha.124 → 2.0.0

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

@@ -1,7 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1500de1f.js';
-import { g as getCurrentDeviceSize, e as IC_DEVICE_SIZES, f as getThemeForegroundColor, c as checkResizeObserver, j as hasClassificationBanner, I as IcThemeForegroundEnum } from './helpers-db00eae1.js';
+import { g as getCurrentDeviceSize, I as IC_DEVICE_SIZES, e as getThemeForegroundColor, c as checkResizeObserver, f as hasClassificationBanner } from './helpers-8b43d0d4.js';
+import { I as IcThemeForegroundEnum } from './types-dd515332.js';
 
-const icFooterCss = "/*! 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{display:block}:host(.footer-sparse){--footer-links-padding:24px 0;--footer-compliance-padding:24px 0 8px 0;--footer-logo-margin-bottom:var(--ic-space-lg);--footer-link-inner-flex-direction:row}:host(.footer-dense){--footer-links-padding:0 0;--footer-compliance-padding:16px 0 8px;--footer-logo-margin-bottom:var(--ic-space-md);--footer-link-inner-flex-direction:column}:host(.footer-light){--footer-theme-secondary:var(--ic-theme-secondary);--footer-theme-tertiary:var(--ic-theme-tertiary);--footer-keyline:var(--ic-keyline-lighten)}:host(.footer-dark){--footer-theme-secondary:var(--ic-theme-secondary-light);--footer-theme-tertiary:var(--ic-theme-tertiary-light);--footer-keyline:var(--ic-keyline-darken)}:host(.footer-dense.footer-ungrouped){--footer-links-padding:var(--ic-space-md) 0 0 0}footer{display:flex;flex-direction:column;width:100%}.footer-description{background-color:var(--footer-theme-secondary);color:var(--ic-theme-text);border-bottom:var(--footer-keyline)}.footer-description-inner{padding:16px 0}.footer-links{padding:var(--footer-links-padding);background-color:var(--footer-theme-secondary);color:var(--ic-theme-text)}.footer-links-inner{display:flex;flex-direction:var(--footer-link-inner-flex-direction)}.footer-compliance{background-color:var(--footer-theme-tertiary);color:var(--ic-theme-text)}.footer-compliance-inner{padding:var(--footer-compliance-padding)}.footer-logo{margin-bottom:var(--footer-logo-margin-bottom);display:flex;gap:var(--ic-space-xxl)}.footer-logo>::slotted(){margin-right:var(--ic-space-md)}.footer-caption{margin-bottom:var(--ic-space-md)}.classification-spacing{margin-bottom:var(--ic-space-lg)}";
+const icFooterCss = "/*! 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{display:block}:host(.footer-sparse){--footer-links-padding:24px 0;--footer-compliance-padding:24px 0 8px 0;--footer-logo-margin-bottom:var(--ic-space-lg);--footer-link-inner-flex-direction:row}:host(.footer-small){--footer-links-padding:0 0;--footer-compliance-padding:16px 0 8px;--footer-logo-margin-bottom:var(--ic-space-md);--footer-link-inner-flex-direction:column}:host(.footer-light){--footer-theme-secondary:var(--ic-theme-secondary);--footer-theme-tertiary:var(--ic-theme-tertiary);--footer-keyline:var(--ic-keyline-lighten)}:host(.footer-dark){--footer-theme-secondary:var(--ic-theme-secondary-light);--footer-theme-tertiary:var(--ic-theme-tertiary-light);--footer-keyline:var(--ic-keyline-darken)}:host(.footer-small.footer-ungrouped){--footer-links-padding:var(--ic-space-md) 0 0 0}footer{display:flex;flex-direction:column;width:100%}.footer-description{background-color:var(--footer-theme-secondary);color:var(--ic-theme-text);border-bottom:var(--footer-keyline)}.footer-description-inner{padding:16px 0}.footer-links{padding:var(--footer-links-padding);background-color:var(--footer-theme-secondary);color:var(--ic-theme-text)}.footer-links-inner{display:flex;flex-direction:var(--footer-link-inner-flex-direction)}.footer-compliance{background-color:var(--footer-theme-tertiary);color:var(--ic-theme-text)}.footer-compliance-inner{padding:var(--footer-compliance-padding)}.footer-logo{margin-bottom:var(--footer-logo-margin-bottom);display:flex;gap:var(--ic-space-xxl)}.footer-logo>::slotted(){margin-right:var(--ic-space-md)}.footer-caption{margin-bottom:var(--ic-space-md)}.classification-spacing{margin-bottom:var(--ic-space-lg)}";
 
 const Footer = class {
   constructor(hostRef) {
@@ -22,24 +23,24 @@ const Footer = class {
     };
     this.description = undefined;
     this.aligned = "left";
-    this.breakpoint = "M";
+    this.breakpoint = "medium";
     this.groupLinks = false;
     this.caption = undefined;
     this.copyright = true;
     this.deviceSize = IC_DEVICE_SIZES.XL;
     this.foregroundColor = getThemeForegroundColor();
   }
-  isDense() {
-    const bp = this.breakpoint.toUpperCase();
-    return bp === "XS"
+  isSmall() {
+    const bp = this.breakpoint;
+    return bp === "extra small"
       ? this.deviceSize < IC_DEVICE_SIZES.XS
-      : bp === "S"
+      : bp === "small"
         ? this.deviceSize < IC_DEVICE_SIZES.S
-        : bp === "M"
+        : bp === "medium"
           ? this.deviceSize < IC_DEVICE_SIZES.M
-          : bp === "L"
+          : bp === "large"
             ? this.deviceSize < IC_DEVICE_SIZES.L
-            : bp === "XL"
+            : bp === "extra large"
               ? this.deviceSize < IC_DEVICE_SIZES.XL
               : false;
   }
@@ -58,16 +59,16 @@ const Footer = class {
   }
   render() {
     const { aligned, caption, copyright, description, groupLinks, foregroundColor, } = this;
-    const dense = this.isDense();
+    const small = this.isSmall();
     return (h(Host, { class: {
         footer: true,
-        [`footer-${dense ? "dense" : "sparse"}`]: true,
+        [`footer-${small ? "small" : "sparse"}`]: true,
         [`footer-${groupLinks ? "grouped" : "ungrouped"}`]: true,
         [`footer-${foregroundColor}`]: true,
         // Slots will be able to infer their own color
         [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
         [IcThemeForegroundEnum.Light]: foregroundColor === IcThemeForegroundEnum.Light,
-      } }, h("footer", { ref: (footerEl) => (this.footerEl = footerEl) }, h("div", { class: "footer-description" }, h("ic-section-container", { aligned: aligned, fullHeight: true }, h("div", { class: "footer-description-inner" }, h("ic-typography", { variant: "body" }, h("slot", { name: "description" }, description))))), h("div", { class: "footer-links" }, groupLinks && dense ? (h("div", { class: "footer-links-inner" }, h("slot", { name: "link" }))) : (h("ic-section-container", { fullHeight: true, aligned: aligned }, h("div", { class: "footer-links-inner" }, h("slot", { name: "link" }))))), h("div", { class: "footer-compliance" }, h("ic-section-container", { aligned: aligned, fullHeight: true }, h("div", { class: "footer-compliance-inner" }, h("div", { class: "footer-logo" }, h("slot", { name: "logo" })), h("div", { class: "footer-caption" }, h("ic-typography", { variant: this.deviceSize <= IC_DEVICE_SIZES.M ? "caption" : "body" }, h("slot", { name: "caption" }, caption))), copyright && (h("div", { class: {
+      } }, h("footer", { ref: (footerEl) => (this.footerEl = footerEl) }, h("div", { class: "footer-description" }, h("ic-section-container", { aligned: aligned, fullHeight: true }, h("div", { class: "footer-description-inner" }, h("ic-typography", { variant: "body" }, h("slot", { name: "description" }, description))))), h("div", { class: "footer-links" }, groupLinks && small ? (h("div", { class: "footer-links-inner" }, h("slot", { name: "link" }))) : (h("ic-section-container", { fullHeight: true, aligned: aligned }, h("div", { class: "footer-links-inner" }, h("slot", { name: "link" }))))), h("div", { class: "footer-compliance" }, h("ic-section-container", { aligned: aligned, fullHeight: true }, h("div", { class: "footer-compliance-inner" }, h("div", { class: "footer-logo" }, h("slot", { name: "logo" })), h("div", { class: "footer-caption" }, h("ic-typography", { variant: this.deviceSize <= IC_DEVICE_SIZES.M ? "caption" : "body" }, h("slot", { name: "caption" }, caption))), copyright && (h("div", { class: {
         ["footer-copyright"]: true,
         ["classification-spacing"]: hasClassificationBanner(),
       } }, h("ic-typography", { variant: this.deviceSize <= IC_DEVICE_SIZES.M

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

@@ -1 +1 @@
-{"file":"ic-footer.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","./src/components/ic-footer/ic-footer.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\n:host(.footer-sparse) {\n  --footer-links-padding: 24px 0;\n  --footer-compliance-padding: 24px 0 8px 0;\n  --footer-logo-margin-bottom: var(--ic-space-lg);\n  --footer-link-inner-flex-direction: row;\n}\n\n:host(.footer-dense) {\n  --footer-links-padding: 0 0;\n  --footer-compliance-padding: 16px 0 8px;\n  --footer-logo-margin-bottom: var(--ic-space-md);\n  --footer-link-inner-flex-direction: column;\n}\n\n:host(.footer-light) {\n  --footer-theme-secondary: var(--ic-theme-secondary);\n  --footer-theme-tertiary: var(--ic-theme-tertiary);\n  --footer-keyline: var(--ic-keyline-lighten);\n}\n\n:host(.footer-dark) {\n  --footer-theme-secondary: var(--ic-theme-secondary-light);\n  --footer-theme-tertiary: var(--ic-theme-tertiary-light);\n  --footer-keyline: var(--ic-keyline-darken);\n}\n\n:host(.footer-dense.footer-ungrouped) {\n  --footer-links-padding: var(--ic-space-md) 0 0 0;\n}\n\n/* Main inner footer element */\nfooter {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Description */\n\n.footer-description {\n  background-color: var(--footer-theme-secondary);\n  color: var(--ic-theme-text);\n  border-bottom: var(--footer-keyline);\n}\n\n.footer-description-inner {\n  padding: 16px 0;\n}\n\n/* Links */\n\n.footer-links {\n  padding: var(--footer-links-padding);\n  background-color: var(--footer-theme-secondary);\n  color: var(--ic-theme-text);\n}\n\n.footer-links-inner {\n  display: flex;\n  flex-direction: var(--footer-link-inner-flex-direction);\n}\n\n/* Compliance */\n\n.footer-compliance {\n  background-color: var(--footer-theme-tertiary);\n  color: var(--ic-theme-text);\n}\n\n.footer-compliance-inner {\n  padding: var(--footer-compliance-padding);\n}\n\n.footer-logo {\n  margin-bottom: var(--footer-logo-margin-bottom);\n  display: flex;\n  gap: var(--ic-space-xxl);\n}\n\n.footer-logo > ::slotted() {\n  margin-right: var(--ic-space-md);\n}\n\n.footer-caption {\n  margin-bottom: var(--ic-space-md);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  h,\n  Host,\n  Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  checkResizeObserver,\n  hasClassificationBanner,\n} from \"../../utils/helpers\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer\n * @slot link - Content will be rendered between description and logos\n * @slot logo - Content will be rendered underneath footer links\n * @slot caption - Content will be rendered above Crown Copyright\n */\n\n@Component({\n  tag: \"ic-footer\",\n  styleUrl: \"ic-footer.css\",\n  shadow: true,\n})\nexport class Footer {\n  @Element() el: HTMLIcFooterElement;\n\n  /**\n   * Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() icFooterResized: EventEmitter<void>;\n\n  /**\n   * The description displayed at the top of the footer\n   */\n  @Prop() description: string;\n\n  /**\n   * Sets the aligned parameter for the section containers used within the footer\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * Sets the screen size breakpoint at which to switch to the dense layout\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"M\";\n\n  /**\n   * Sets the footer up to handle link groups instead of standalone links\n   */\n  @Prop() groupLinks?: boolean = false;\n\n  /**\n   * The caption displayed at the bottom of the footer\n   */\n  @Prop() caption: string;\n\n  /**\n   * Whether the footer displays the crown copyright at the bottom\n   */\n  @Prop() copyright: boolean = true;\n\n  @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  private isDense() {\n    const bp = this.breakpoint.toUpperCase();\n\n    return bp === \"XS\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"S\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"M\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"L\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"XL\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private resizeObserver: ResizeObserver;\n  private footerEl: HTMLElement;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n    this.icFooterResized.emit();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.footerEl);\n  };\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    const {\n      aligned,\n      caption,\n      copyright,\n      description,\n      groupLinks,\n      foregroundColor,\n    } = this;\n    const dense = this.isDense();\n\n    return (\n      <Host\n        class={{\n          footer: true,\n          [`footer-${dense ? \"dense\" : \"sparse\"}`]: true,\n          [`footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n          [`footer-${foregroundColor}`]: true,\n          // Slots will be able to infer their own color\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [IcThemeForegroundEnum.Light]:\n            foregroundColor === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n          {/* Description */}\n          <div class=\"footer-description\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-description-inner\">\n                <ic-typography variant=\"body\">\n                  <slot name=\"description\">{description}</slot>\n                </ic-typography>\n              </div>\n            </ic-section-container>\n          </div>\n\n          {/* Links */}\n          <div class=\"footer-links\">\n            {groupLinks && dense ? (\n              <div class=\"footer-links-inner\">\n                <slot name=\"link\" />\n              </div>\n            ) : (\n              <ic-section-container fullHeight aligned={aligned}>\n                <div class=\"footer-links-inner\">\n                  <slot name=\"link\" />\n                </div>\n              </ic-section-container>\n            )}\n          </div>\n\n          {/* Compliance (logo, caption, copyright) */}\n          <div class=\"footer-compliance\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-compliance-inner\">\n                <div class=\"footer-logo\">\n                  {/* Logo */}\n                  <slot name=\"logo\" />\n                </div>\n                <div class=\"footer-caption\">\n                  <ic-typography\n                    variant={\n                      this.deviceSize <= IC_DEVICE_SIZES.M ? \"caption\" : \"body\"\n                    }\n                  >\n                    <slot name=\"caption\">{caption}</slot>\n                  </ic-typography>\n                </div>\n                {copyright && (\n                  <div\n                    class={{\n                      [\"footer-copyright\"]: true,\n                      [\"classification-spacing\"]: hasClassificationBanner(),\n                    }}\n                  >\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption-uppercase\"\n                          : \"label-uppercase\"\n                      }\n                    >\n                      &copy; Crown Copyright\n                    </ic-typography>\n                  </div>\n                )}\n              </div>\n            </ic-section-container>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-footer.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","./src/components/ic-footer/ic-footer.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n}\n\n:host(.footer-sparse) {\n  --footer-links-padding: 24px 0;\n  --footer-compliance-padding: 24px 0 8px 0;\n  --footer-logo-margin-bottom: var(--ic-space-lg);\n  --footer-link-inner-flex-direction: row;\n}\n\n:host(.footer-small) {\n  --footer-links-padding: 0 0;\n  --footer-compliance-padding: 16px 0 8px;\n  --footer-logo-margin-bottom: var(--ic-space-md);\n  --footer-link-inner-flex-direction: column;\n}\n\n:host(.footer-light) {\n  --footer-theme-secondary: var(--ic-theme-secondary);\n  --footer-theme-tertiary: var(--ic-theme-tertiary);\n  --footer-keyline: var(--ic-keyline-lighten);\n}\n\n:host(.footer-dark) {\n  --footer-theme-secondary: var(--ic-theme-secondary-light);\n  --footer-theme-tertiary: var(--ic-theme-tertiary-light);\n  --footer-keyline: var(--ic-keyline-darken);\n}\n\n:host(.footer-small.footer-ungrouped) {\n  --footer-links-padding: var(--ic-space-md) 0 0 0;\n}\n\n/* Main inner footer element */\nfooter {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Description */\n\n.footer-description {\n  background-color: var(--footer-theme-secondary);\n  color: var(--ic-theme-text);\n  border-bottom: var(--footer-keyline);\n}\n\n.footer-description-inner {\n  padding: 16px 0;\n}\n\n/* Links */\n\n.footer-links {\n  padding: var(--footer-links-padding);\n  background-color: var(--footer-theme-secondary);\n  color: var(--ic-theme-text);\n}\n\n.footer-links-inner {\n  display: flex;\n  flex-direction: var(--footer-link-inner-flex-direction);\n}\n\n/* Compliance */\n\n.footer-compliance {\n  background-color: var(--footer-theme-tertiary);\n  color: var(--ic-theme-text);\n}\n\n.footer-compliance-inner {\n  padding: var(--footer-compliance-padding);\n}\n\n.footer-logo {\n  margin-bottom: var(--footer-logo-margin-bottom);\n  display: flex;\n  gap: var(--ic-space-xxl);\n}\n\n.footer-logo > ::slotted() {\n  margin-right: var(--ic-space-md);\n}\n\n.footer-caption {\n  margin-bottom: var(--ic-space-md);\n}\n\n.classification-spacing {\n  margin-bottom: var(--ic-space-lg);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  h,\n  Host,\n  Listen,\n} from \"@stencil/core\";\nimport { IC_DEVICE_SIZES } from \"../../utils/constants\";\nimport {\n  getCurrentDeviceSize,\n  getThemeForegroundColor,\n  checkResizeObserver,\n  hasClassificationBanner,\n} from \"../../utils/helpers\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcFooterBreakpoints } from \"./ic-footer.types\";\n\n/**\n * @slot description - Content will be rendered at the top of the footer\n * @slot link - Content will be rendered between description and logos\n * @slot logo - Content will be rendered underneath footer links\n * @slot caption - Content will be rendered above Crown Copyright\n */\n\n@Component({\n  tag: \"ic-footer\",\n  styleUrl: \"ic-footer.css\",\n  shadow: true,\n})\nexport class Footer {\n  @Element() el: HTMLIcFooterElement;\n\n  /**\n   * Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() icFooterResized: EventEmitter<void>;\n\n  /**\n   * The description displayed at the top of the footer\n   */\n  @Prop() description: string;\n\n  /**\n   * Sets the aligned parameter for the section containers used within the footer\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * Sets the screen size breakpoint at which to switch to the small layout\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * Sets the footer up to handle link groups instead of standalone links\n   */\n  @Prop() groupLinks?: boolean = false;\n\n  /**\n   * The caption displayed at the bottom of the footer\n   */\n  @Prop() caption: string;\n\n  /**\n   * Whether the footer displays the crown copyright at the bottom\n   */\n  @Prop() copyright: boolean = true;\n\n  @State() deviceSize: number = IC_DEVICE_SIZES.XL;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  private isSmall() {\n    const bp = this.breakpoint;\n\n    return bp === \"extra small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XS\n      : bp === \"small\"\n      ? this.deviceSize < IC_DEVICE_SIZES.S\n      : bp === \"medium\"\n      ? this.deviceSize < IC_DEVICE_SIZES.M\n      : bp === \"large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.L\n      : bp === \"extra large\"\n      ? this.deviceSize < IC_DEVICE_SIZES.XL\n      : false;\n  }\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private resizeObserver: ResizeObserver;\n  private footerEl: HTMLElement;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n    this.icFooterResized.emit();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      const currSize = getCurrentDeviceSize();\n      this.resizeObserverCallback(currSize);\n    });\n\n    this.resizeObserver.observe(this.footerEl);\n  };\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    const {\n      aligned,\n      caption,\n      copyright,\n      description,\n      groupLinks,\n      foregroundColor,\n    } = this;\n    const small = this.isSmall();\n\n    return (\n      <Host\n        class={{\n          footer: true,\n          [`footer-${small ? \"small\" : \"sparse\"}`]: true,\n          [`footer-${groupLinks ? \"grouped\" : \"ungrouped\"}`]: true,\n          [`footer-${foregroundColor}`]: true,\n          // Slots will be able to infer their own color\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [IcThemeForegroundEnum.Light]:\n            foregroundColor === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <footer ref={(footerEl) => (this.footerEl = footerEl)}>\n          {/* Description */}\n          <div class=\"footer-description\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-description-inner\">\n                <ic-typography variant=\"body\">\n                  <slot name=\"description\">{description}</slot>\n                </ic-typography>\n              </div>\n            </ic-section-container>\n          </div>\n\n          {/* Links */}\n          <div class=\"footer-links\">\n            {groupLinks && small ? (\n              <div class=\"footer-links-inner\">\n                <slot name=\"link\" />\n              </div>\n            ) : (\n              <ic-section-container fullHeight aligned={aligned}>\n                <div class=\"footer-links-inner\">\n                  <slot name=\"link\" />\n                </div>\n              </ic-section-container>\n            )}\n          </div>\n\n          {/* Compliance (logo, caption, copyright) */}\n          <div class=\"footer-compliance\">\n            <ic-section-container aligned={aligned} fullHeight={true}>\n              <div class=\"footer-compliance-inner\">\n                <div class=\"footer-logo\">\n                  {/* Logo */}\n                  <slot name=\"logo\" />\n                </div>\n                <div class=\"footer-caption\">\n                  <ic-typography\n                    variant={\n                      this.deviceSize <= IC_DEVICE_SIZES.M ? \"caption\" : \"body\"\n                    }\n                  >\n                    <slot name=\"caption\">{caption}</slot>\n                  </ic-typography>\n                </div>\n                {copyright && (\n                  <div\n                    class={{\n                      [\"footer-copyright\"]: true,\n                      [\"classification-spacing\"]: hasClassificationBanner(),\n                    }}\n                  >\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption-uppercase\"\n                          : \"label-uppercase\"\n                      }\n                    >\n                      &copy; Crown Copyright\n                    </ic-typography>\n                  </div>\n                )}\n              </div>\n            </ic-section-container>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,7 +1,8 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-1500de1f.js';
-import { f as getThemeForegroundColor, s as slotHasContent, a as onComponentRequiredPropUndefined, I as IcThemeForegroundEnum } from './helpers-db00eae1.js';
+import { I as IcThemeForegroundEnum } from './types-dd515332.js';
+import { e as getThemeForegroundColor, s as slotHasContent, a as onComponentRequiredPropUndefined } from './helpers-8b43d0d4.js';
 
-const icHeroCss = "/*! 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{display:block;background-color:var(--ic-theme-tertiary);color:var(--ic-theme-text)}:host(.dark){background-color:var(--ic-theme-secondary)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -100px;background-size:auto calc(100% + 100px);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -100px !important}}.section-container{display:flex;align-items:center;height:100%}.left-container{flex-basis:50%;padding:var(--ic-space-xl) 0}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg)}.secondary-container{display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--ic-theme-text)}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned=\"left\"]) .left-container,:host([content-aligned=\"left\"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned=\"center\"]) .left-container,:host([content-aligned=\"center\"]) .interaction-container{justify-content:center;text-align:center}.left-container-full-width{flex-basis:100% !important;max-width:66.6%}@media (min-width: 1044px){:host,.section-container{min-height:208px}:host([dense]),:host([dense]) .section-container{min-height:173px}.left-container{flex-basis:66.6%;min-height:144px}.right-container{flex-basis:33.3%;margin-left:50px}.secondary-container{min-height:144px}.secondary-heading,.secondary-subheading{margin-left:63px}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:256px}:host([dense]),:host([dense]) .section-container{min-height:240px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:224px}.left-container{min-height:160px}.secondary-container{min-height:160px}.secondary-heading,.secondary-subheading{margin-left:94.75px}.right-container{margin-left:50px}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:256px}:host([dense]),:host([dense]) .section-container{min-height:240px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:224px}.left-container{min-height:160px}.secondary-container{min-height:160px}.secondary-heading,.secondary-subheading{margin-left:34px}.right-container{margin-left:50px}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:208px}:host([dense]),:host([dense]) .section-container{min-height:173px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:280px}:host([secondary-heading]) .section-container,:host([dense]) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:40px}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:192px}:host([dense]),:host([dense]) .section-container{min-height:173px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:264px}:host([secondary-heading]) .section-container,:host([dense]) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}";
+const icHeroCss = "/*! 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{display:block;background-color:var(--ic-theme-tertiary);color:var(--ic-theme-text);--hero-heading-bottom-margin:var(--ic-space-md)}:host(.dark){background-color:var(--ic-theme-secondary)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -100px;background-size:auto calc(100% + 100px);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -100px !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{flex-basis:50%;padding:var(--ic-space-xl) 0}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg)}.secondary-container{display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--ic-theme-text)}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned=\"left\"]) .left-container,:host([content-aligned=\"left\"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned=\"center\"]) .left-container,:host([content-aligned=\"center\"]) .interaction-container{justify-content:center;text-align:center}.left-container-full-width{flex-basis:100% !important;max-width:66.6%}@media (min-width: 1044px){:host,.section-container{min-height:208px}:host([small]),:host([small]) .section-container{min-height:173px}.left-container{flex-basis:66.6%;min-height:144px}.right-container{flex-basis:33.3%;margin-left:50px}.secondary-container{min-height:144px}.secondary-heading,.secondary-subheading{margin-left:63px}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:256px}:host([small]),:host([small]) .section-container{min-height:240px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:224px}.left-container{min-height:160px}.secondary-container{min-height:160px}.secondary-heading,.secondary-subheading{margin-left:94.75px}.right-container{margin-left:50px}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:256px}:host([small]),:host([small]) .section-container{min-height:240px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:224px}.left-container{min-height:160px}.secondary-container{min-height:160px}.secondary-heading,.secondary-subheading{margin-left:34px}.right-container{margin-left:50px}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:208px}:host([small]),:host([small]) .section-container{min-height:173px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:280px}:host([secondary-heading]) .section-container,:host([small]) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:40px}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:192px}:host([small]),:host([small]) .section-container{min-height:173px}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:264px}:host([secondary-heading]) .section-container,:host([small]) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}";
 
 const Hero = class {
   constructor(hostRef) {
@@ -14,7 +15,7 @@ const Hero = class {
     this.disableBackgroundParallax = false;
     this.aligned = "left";
     this.contentAligned = "left";
-    this.dense = false;
+    this.small = false;
     this.rightContent = false;
     this.scrollFactor = "right -100px";
     this.leftContentFullWidth = !this.rightContent && this.secondaryHeading === undefined;
@@ -34,16 +35,16 @@ const Hero = class {
     this.scrollFactor = "right " + y + "px";
   }
   componentWillLoad() {
-    this.rightContent = slotHasContent(this.el, "right-content");
+    this.rightContent = slotHasContent(this.el, "secondary");
   }
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Hero");
   }
   componentWillRender() {
-    this.rightContent = slotHasContent(this.el, "right-content");
+    this.rightContent = slotHasContent(this.el, "secondary");
   }
   render() {
-    const { aligned, dense, heading, subheading, secondaryHeading, secondarySubheading, foregroundColor, backgroundImage, scrollFactor, } = this;
+    const { aligned, small, heading, subheading, secondaryHeading, secondarySubheading, foregroundColor, backgroundImage, scrollFactor, } = this;
     let style = {};
     if (backgroundImage !== undefined) {
       style = {
@@ -57,7 +58,7 @@ const Hero = class {
       }, style: style }, h("ic-section-container", { aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { class: {
         ["left-container"]: true,
         ["left-container-full-width"]: this.leftContentFullWidth,
-      } }, h("div", { class: "heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: dense ? "h2" : "h1" }, heading))), h("div", { class: "subheading" }, h("slot", { name: "subheading" }, h("ic-typography", { variant: "body" }, subheading))), h("div", { class: "interaction-container" }, h("slot", { name: "interaction" }))), (secondaryHeading !== undefined || this.rightContent) && (h("div", { class: "right-container" }, h("slot", { name: "right-content" }, secondaryHeading && (h("div", { class: "secondary-container" }, h("div", { class: "secondary-heading" }, h("ic-typography", { variant: "h4" }, secondaryHeading)), h("div", { class: "secondary-subheading" }, h("ic-typography", { variant: "subtitle-small" }, secondarySubheading))))))))));
+      } }, h("div", { class: "heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: small ? "h2" : "h1", class: { ["heading-bottom-spacing"]: !small } }, heading))), h("div", { class: "subheading" }, h("slot", { name: "subheading" }, h("ic-typography", { variant: "body" }, subheading))), h("div", { class: "interaction-container" }, h("slot", { name: "interaction" }))), (secondaryHeading !== undefined || this.rightContent) && (h("div", { class: "right-container" }, h("slot", { name: "secondary" }, secondaryHeading && (h("div", { class: "secondary-container" }, h("div", { class: "secondary-heading" }, h("ic-typography", { variant: "h4" }, secondaryHeading)), h("div", { class: "secondary-subheading" }, h("ic-typography", { variant: "subtitle-small" }, secondarySubheading))))))))));
   }
   get el() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"ic-hero.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","./src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n  background-color: var(--ic-theme-tertiary);\n  color: var(--ic-theme-text);\n}\n\n:host(.dark) {\n  background-color: var(--ic-theme-secondary);\n}\n\n:host(.has-background-image) {\n  background-repeat: no-repeat;\n  background-position: right -100px;\n  background-size: auto calc(100% + 100px);\n  box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n  :host(.has-background-image) {\n    background-position: right -100px !important;\n  }\n}\n\n.section-container {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.left-container {\n  flex-basis: 50%;\n  padding: var(--ic-space-xl) 0;\n}\n\n.right-container {\n  flex-basis: 50%;\n}\n\n.interaction-container {\n  display: flex;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-lg);\n}\n\n.secondary-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-left: var(--ic-space-xxxs) solid var(--ic-theme-text);\n}\n\n.secondary-subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n  justify-content: flex-start;\n  text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n  justify-content: center;\n  text-align: center;\n}\n\n.left-container-full-width {\n  flex-basis: 100% !important;\n  max-width: 66.6%;\n}\n\n@media (min-width: 1044px) {\n  :host,\n  .section-container {\n    min-height: 208px;\n  }\n\n  :host([dense]),\n  :host([dense]) .section-container {\n    min-height: 173px;\n  }\n\n  .left-container {\n    flex-basis: 66.6%;\n    min-height: 144px;\n  }\n\n  .right-container {\n    flex-basis: 33.3%;\n    margin-left: 50px;\n  }\n\n  .secondary-container {\n    min-height: 144px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 63px;\n  }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 256px;\n  }\n\n  :host([dense]),\n  :host([dense]) .section-container {\n    min-height: 240px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 224px;\n  }\n\n  .left-container {\n    min-height: 160px;\n  }\n\n  .secondary-container {\n    min-height: 160px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 94.75px;\n  }\n\n  .right-container {\n    margin-left: 50px;\n  }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 256px;\n  }\n\n  :host([dense]),\n  :host([dense]) .section-container {\n    min-height: 240px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 224px;\n  }\n\n  .left-container {\n    min-height: 160px;\n  }\n\n  .secondary-container {\n    min-height: 160px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 34px;\n  }\n\n  .right-container {\n    margin-left: 50px;\n  }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 208px;\n  }\n\n  :host([dense]),\n  :host([dense]) .section-container {\n    min-height: 173px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 280px;\n  }\n\n  :host([secondary-heading]) .section-container,\n  :host([dense]) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n\n  .right-container {\n    margin-bottom: 40px;\n  }\n}\n\n@media (max-width: 480px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 192px;\n  }\n\n  :host([dense]),\n  :host([dense]) .section-container {\n    min-height: 173px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 264px;\n  }\n\n  :host([secondary-heading]) .section-container,\n  :host([dense]) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot right-content - Content will be rendered in the right content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  /**\n   * The heading of the hero\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Description for the hero\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Optional secondary heading, replaced by slotted right content\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * Optional secondary subheading, replaced by slotted right content\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * Optional background image\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Whether the background image (if set) scrolls using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The alignment of the hero content\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The alignment of the hero content\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * Alter styling for use with dense content/pages\n   */\n  @Prop() dense: boolean = false;\n\n  @State() rightContent: boolean = false;\n\n  @State() scrollFactor: string = \"right -100px\";\n\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"right-content\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"right-content\");\n  }\n\n  render() {\n    const {\n      aligned,\n      dense,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (backgroundImage !== undefined) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography variant={dense ? \"h2\" : \"h1\"}>\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(secondaryHeading !== undefined || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"right-content\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-hero.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","./src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n  background-color: var(--ic-theme-tertiary);\n  color: var(--ic-theme-text);\n  --hero-heading-bottom-margin: var(--ic-space-md);\n}\n\n:host(.dark) {\n  background-color: var(--ic-theme-secondary);\n}\n\n:host(.has-background-image) {\n  background-repeat: no-repeat;\n  background-position: right -100px;\n  background-size: auto calc(100% + 100px);\n  box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n  :host(.has-background-image) {\n    background-position: right -100px !important;\n  }\n}\n\nic-typography.heading-bottom-spacing {\n  margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.left-container {\n  flex-basis: 50%;\n  padding: var(--ic-space-xl) 0;\n}\n\n.right-container {\n  flex-basis: 50%;\n}\n\n.interaction-container {\n  display: flex;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-lg);\n}\n\n.secondary-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-left: var(--ic-space-xxxs) solid var(--ic-theme-text);\n}\n\n.secondary-subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n  justify-content: flex-start;\n  text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n  justify-content: center;\n  text-align: center;\n}\n\n.left-container-full-width {\n  flex-basis: 100% !important;\n  max-width: 66.6%;\n}\n\n@media (min-width: 1044px) {\n  :host,\n  .section-container {\n    min-height: 208px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 173px;\n  }\n\n  .left-container {\n    flex-basis: 66.6%;\n    min-height: 144px;\n  }\n\n  .right-container {\n    flex-basis: 33.3%;\n    margin-left: 50px;\n  }\n\n  .secondary-container {\n    min-height: 144px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 63px;\n  }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 256px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 240px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 224px;\n  }\n\n  .left-container {\n    min-height: 160px;\n  }\n\n  .secondary-container {\n    min-height: 160px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 94.75px;\n  }\n\n  .right-container {\n    margin-left: 50px;\n  }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 256px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 240px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 224px;\n  }\n\n  .left-container {\n    min-height: 160px;\n  }\n\n  .secondary-container {\n    min-height: 160px;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 34px;\n  }\n\n  .right-container {\n    margin-left: 50px;\n  }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 208px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 173px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 280px;\n  }\n\n  :host([secondary-heading]) .section-container,\n  :host([small]) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n\n  .right-container {\n    margin-bottom: 40px;\n  }\n}\n\n@media (max-width: 480px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 192px;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 173px;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 264px;\n  }\n\n  :host([secondary-heading]) .section-container,\n  :host([small]) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  /**\n   * The heading of the hero\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Description for the hero\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Optional secondary heading, replaced by slotted right content\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * Optional secondary subheading, replaced by slotted right content\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * Optional background image\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Whether the background image (if set) scrolls using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The alignment of the hero content\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The alignment of the hero content\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * Alter styling for use with small content/pages\n   */\n  @Prop() small: boolean = false;\n\n  @State() rightContent: boolean = false;\n\n  @State() scrollFactor: string = \"right -100px\";\n\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  render() {\n    const {\n      aligned,\n      small,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (backgroundImage !== undefined) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={small ? \"h2\" : \"h1\"}\n                  class={{ [\"heading-bottom-spacing\"]: !small }}\n                >\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(secondaryHeading !== undefined || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ic-input-component-container_3.entry.js

@@ -1,10 +1,11 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-1500de1f.js';
-import { i as isSlotUsed, w as IcInformationStatus, a as onComponentRequiredPropUndefined } from './helpers-db00eae1.js';
+import { a as IcInformationStatus } from './types-dd515332.js';
 import { s as successIcon } from './success-icon-2f71b115.js';
+import { i as isSlotUsed, a as onComponentRequiredPropUndefined } from './helpers-8b43d0d4.js';
 import { C as Check } from './check-icon-53f1d9e5.js';
 import { c as createPopper } from './popper-f860750c.js';
 
-const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:1px solid var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:40px;width:var(--input-width, 320px);padding:1px;background-color:var(--ic-architectural-white);box-sizing:border-box;position:relative;fill:var(--ic-architectural-400)}ic-input-component-container.fullwidth{width:100%}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:1px dashed var(--ic-architectural-200)}ic-input-component-container.readonly,ic-input-component-container.readonly:hover{border:none;padding:0}ic-input-component-container.error{border:var(--ic-space-xxxs) solid var(--ic-status-error);padding:0}ic-input-component-container.warning{border:var(--ic-space-xxxs) solid var(--ic-status-warning-mid);padding:0}ic-input-component-container.success{border:var(--ic-space-xxxs) solid var(--ic-status-success);padding:0}ic-input-component-container.dense{height:var(--ic-space-xl)}ic-input-component-container.multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:7px;display:flex;align-items:center}ic-input-component-container.multiline .icon-container,ic-input-component-container.multiline.dense .icon-container{margin-top:6px;display:block}ic-input-component-container.readonly .icon-container{margin-left:-5px}ic-input-component-container.disabled ::-moz-placeholder{display:none}ic-input-component-container.disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 6px;display:flex;align-items:center}ic-input-component-container.dark:hover{--border-color:var(--ic-architectural-400)}ic-input-component-container .inline-success>svg{fill:var(--ic-status-success)}ic-input-component-container:hover{border-color:var(--ic-action-dark-hover);color:var(--ic-action-dark-hover);--expand-icon-hover:var(--ic-action-dark-hover)}.focus-indicator{display:flex;width:100%;margin:-3px;padding:3px;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within{box-shadow:var(--ic-border-focus)}.focus-indicator.dark:focus-within{box-shadow:var(--ic-border-focus)}";
+const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:1px solid var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:40px;width:var(--input-width, 320px);padding:1px;background-color:var(--ic-architectural-white);box-sizing:border-box;position:relative;fill:var(--ic-architectural-400)}ic-input-component-container.fullwidth{width:100%}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:1px dashed var(--ic-architectural-200)}ic-input-component-container.readonly,ic-input-component-container.readonly:hover{border:none;padding:0}ic-input-component-container.error{border:var(--ic-space-xxxs) solid var(--ic-status-error);padding:0}ic-input-component-container.warning{border:var(--ic-space-xxxs) solid var(--ic-status-warning-mid);padding:0}ic-input-component-container.success{border:var(--ic-space-xxxs) solid var(--ic-status-success);padding:0}ic-input-component-container.small{height:var(--ic-space-xl)}ic-input-component-container.multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:7px;display:flex;align-items:center}ic-input-component-container.multiline .icon-container,ic-input-component-container.multiline.small .icon-container{margin-top:6px;display:block}ic-input-component-container.readonly .icon-container{margin-left:-5px}ic-input-component-container.disabled ::-moz-placeholder{display:none}ic-input-component-container.disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 6px;display:flex;align-items:center}ic-input-component-container.dark:hover{--border-color:var(--ic-architectural-400)}ic-input-component-container .inline-success>svg{fill:var(--ic-status-success)}ic-input-component-container:hover{border-color:var(--ic-action-dark-hover);color:var(--ic-action-dark-hover);--expand-icon-hover:var(--ic-action-dark-hover)}.focus-indicator{display:flex;width:100%;margin:-2px;padding:2px;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.dark:focus-within{box-shadow:var(--ic-border-focus)}";
 
 const InputComponentContainer = class {
   constructor(hostRef) {
@@ -12,19 +13,19 @@ const InputComponentContainer = class {
     this.disabled = false;
     this.readonly = false;
     this.validationStatus = "";
-    this.dense = false;
+    this.small = false;
     this.multiLine = false;
     this.validationInline = false;
     this.dark = false;
     this.fullWidth = false;
   }
   render() {
-    const { dense, validationStatus, disabled, readonly, multiLine, fullWidth, dark, validationInline, } = this;
+    const { small, validationStatus, disabled, readonly, multiLine, fullWidth, dark, validationInline, } = this;
     const hasValidationStatus = this.validationStatus !== "" && !this.disabled && !this.readonly
       ? true
       : false;
     return (h(Host, { class: {
-        ["dense"]: dense,
+        ["small"]: small,
         [validationStatus]: hasValidationStatus,
         ["disabled"]: disabled,
         ["readonly"]: readonly,
@@ -63,7 +64,7 @@ const InputContainer = class {
 };
 InputContainer.style = icInputContainerCss;
 
-const icMenuCss = "/*! 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}@media (prefers-reduced-motion: no-preference){:host([open]) .menu{transition:max-height var(--ic-transition-duration-slow)}}:host{border-radius:var(--ic-border-radius);max-height:0;width:var(--input-width, 320px);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-popup-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay)}:host(:focus-within){box-shadow:var(--ic-border-focus)}.menu{text-decoration:none;list-style-type:none;border:1px solid var(--ic-architectural-400);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;max-height:0;overflow-y:hidden}.menu-scroll{overflow-y:auto}.menu:focus-visible{outline:none}:host([open]){max-height:none;display:block}:host([open]) .menu{visibility:visible;max-height:322px}:host(.full-width){width:100%}.option{padding:8px 7px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}:host([dense]) .option{padding:4px 7px}.option:last-child{border-radius:0 0 1px 1px}.option:first-child{border-radius:1px 1px 0 0}.option:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-active)}.option:focus-visible{outline:none}.option:not(.disabled-option) .option-description{color:var(--ic-color-secondary-text)}.option-text-container{pointer-events:none}.check-icon{height:24px;margin-left:8px;pointer-events:none}.focused-option .check-icon *{fill:white}.option-group-title{padding:24px 7px 8px;color:var(--ic-color-tertiary-text)}:host([dense]) .option-group-title{padding:12px 7px 4px}.last-recommended-option{border-bottom:1px solid var(--ic-architectural-400)}.disabled-option{color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option{background-color:var(--ic-focus-blue) !important;color:var(--ic-color-white-text) !important}:host(.no-results) li{cursor:no-drop}:host(.no-results) li:hover{background-color:transparent}";
+const icMenuCss = "/*! 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}@media (prefers-reduced-motion: no-preference){:host([open]) .menu{transition:max-height var(--ic-transition-duration-slow)}}:host{border-radius:var(--ic-border-radius);max-height:0;width:var(--input-width, 320px);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-popup-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay)}:host(:not(.no-focus):focus-within){box-shadow:var(--ic-border-focus)}.menu{text-decoration:none;list-style-type:none;border:1px solid var(--ic-architectural-400);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;max-height:0;overflow-y:hidden}.menu-scroll{overflow-y:auto}.menu:focus-visible{outline:none}:host([open]){max-height:none;display:block}:host([open]) .menu{visibility:visible;max-height:322px}:host(.full-width){width:100%}.option{padding:8px 7px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}:host([small]) .option{padding:4px 7px}.option:last-child{border-radius:0 0 1px 1px}.option:first-child{border-radius:1px 1px 0 0}.option:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-active)}.option:focus-visible{outline:none}.option:not(.disabled-option) .option-description{color:var(--ic-color-secondary-text)}.option-text-container{pointer-events:none}.check-icon{height:24px;margin-left:8px;pointer-events:none}.focused-option .check-icon *{fill:white}.option-group-title{padding:24px 7px 8px;color:var(--ic-color-tertiary-text)}:host([small]) .option-group-title{padding:12px 7px 4px}.last-recommended-option{border-bottom:1px solid var(--ic-architectural-400)}.disabled-option{color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option,.focused-option .option-description{background-color:var(--ic-focus-blue) !important;color:var(--ic-color-white-text) !important}:host(.no-results) li{cursor:no-drop}:host(.no-results) li:hover{background-color:transparent}";
 
 const Menu = class {
   constructor(hostRef) {
@@ -87,21 +88,27 @@ const Menu = class {
       if (this.ungroupedOptions[selectedOptionIndex + 1]) {
         this.optionSelect.emit({
           value: this.ungroupedOptions[selectedOptionIndex + 1].value,
+          optionId: this.getOptionId(this.ungroupedOptions[selectedOptionIndex + 1].value),
         });
       }
       else {
-        this.optionSelect.emit({ value: this.ungroupedOptions[0].value });
+        this.optionSelect.emit({
+          value: this.ungroupedOptions[0].value,
+          optionId: this.getOptionId(this.ungroupedOptions[0].value),
+        });
       }
     };
     this.setPreviousOptionValue = (selectedOptionIndex) => {
       if (this.ungroupedOptions[selectedOptionIndex - 1]) {
         this.optionSelect.emit({
           value: this.ungroupedOptions[selectedOptionIndex - 1].value,
+          optionId: this.getOptionId(this.ungroupedOptions[selectedOptionIndex - 1].value),
         });
       }
       else {
         this.optionSelect.emit({
           value: this.ungroupedOptions[this.ungroupedOptions.length - 1].value,
+          optionId: this.getOptionId(this.ungroupedOptions[this.ungroupedOptions.length - 1].value),
         });
       }
     };
@@ -113,25 +120,36 @@ const Menu = class {
       this.optionHighlighted = this.options[highlightedIndex].value || undefined;
     };
     this.autoSetInputValueKeyboardOpen = (event) => {
+      var _a;
       const selectedOptionIndex = this.ungroupedOptions.findIndex((option) => option.value === this.value);
+      const isSearchableSelect = ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT";
       switch (event.key) {
         case "ArrowDown":
+          this.keyboardNav = true;
           this.arrowBehaviour(event);
           this.setNextOptionValue(selectedOptionIndex);
           break;
         case "ArrowUp":
+          this.keyboardNav = true;
           this.arrowBehaviour(event);
           this.setPreviousOptionValue(selectedOptionIndex);
           break;
         case " ":
         case "Enter":
           if (event.target.id !== "clear-button") {
-            if (this.value == null || this.value === "") {
-              this.optionSelect.emit({ value: this.ungroupedOptions[0].value });
-            }
             this.handleMenuChange(true);
           }
           break;
+        case "Backspace":
+          if (isSearchableSelect) {
+            this.inputEl.focus();
+          }
+          break;
+        default:
+          if (isSearchableSelect && event.key !== "Tab") {
+            this.inputEl.focus();
+          }
+          break;
       }
     };
     this.manSetInputValueKeyboardOpen = (event) => {
@@ -234,7 +252,9 @@ const Menu = class {
       }
     };
     this.autoSetValueOnMenuKeyDown = (event) => {
+      event.cancelBubble = true;
       const selectedOptionIndex = this.ungroupedOptions.findIndex((option) => option.value === this.value);
+      const isSearchableSelect = this.inputEl.tagName === "INPUT";
       switch (event.key) {
         case "ArrowUp":
           event.preventDefault();
@@ -263,6 +283,18 @@ const Menu = class {
         case "Escape":
           this.handleMenuChange(false);
           break;
+        case "Backspace":
+          if (isSearchableSelect) {
+            this.inputEl.focus();
+          }
+          break;
+        case "Shift":
+          break;
+        default:
+          if (isSearchableSelect && event.key !== "Tab") {
+            this.inputEl.focus();
+          }
+          break;
       }
     };
     this.handleMenuKeyUp = (event) => {
@@ -300,6 +332,19 @@ const Menu = class {
         selectedOption.focus();
       }
     };
+    this.loadUngroupedOptions = () => {
+      if (this.options.length > 0) {
+        this.options.map((option) => {
+          if (option.children) {
+            option.children.map((option) => !option.disabled && this.ungroupedOptions.push(option));
+          }
+          else if (!option.disabled) {
+            this.ungroupedOptions.push(option);
+          }
+        });
+      }
+      this.ungroupedOptions = this.getSortedOptions(this.ungroupedOptions);
+    };
     this.displayOption = (option, index, parentOption) => {
       const { open, value } = this;
       return (h("li", { id: this.getOptionId(option.value), class: {
@@ -308,18 +353,20 @@ const Menu = class {
             ? (this.keyboardNav || this.initialOptionsListRender) &&
               option.value === this.optionHighlighted
             : this.keyboardNav && option.value === value,
-          "last-recommended-option": option.recommended && !this.options[index + 1].recommended,
+          "last-recommended-option": option.recommended &&
+            this.options[index + 1] &&
+            !this.options[index + 1].recommended,
           "disabled-option": option.disabled,
         }, role: "option", tabindex: open &&
           (option.value === value || option.value === this.optionHighlighted) &&
           this.keyboardNav
           ? "0"
-          : "-1", "aria-label": this.getOptionAriaLabel(option, parentOption), "aria-selected": option.value === value, "aria-disabled": option.disabled ? "true" : "false", onClick: this.handleOptionClick, onBlur: this.handleBlur, "data-value": option.value, "data-label": option.label }, h("div", { class: "option-text-container" }, h("ic-typography", { variant: "body", "aria-hidden": "true" }, h("p", null, option.label)), option.description && (h("ic-typography", { id: "description", class: "option-description", variant: "caption", "aria-hidden": "true" }, h("p", null, option.description)))), option.value === value &&
+          : "-1", "aria-label": this.getOptionAriaLabel(option, parentOption), "aria-selected": option.value === value, "aria-disabled": option.disabled ? "true" : "false", onClick: this.handleOptionClick, onBlur: this.handleBlur, onMouseDown: (event) => event.preventDefault(), "data-value": option.value, "data-label": option.label }, h("div", { class: "option-text-container" }, h("ic-typography", { variant: "body", "aria-hidden": "true" }, h("p", null, option.label)), option.description && (h("ic-typography", { id: `${this.getOptionId(option.value)}-description`, class: "option-description", variant: "caption", "aria-hidden": "true" }, h("p", null, option.description)))), option.value === value &&
         this.parentEl.tagName !== "IC-SEARCH-BAR" && (h("span", { class: "check-icon", innerHTML: Check }))));
     };
     this.open = undefined;
     this.options = undefined;
-    this.dense = false;
+    this.small = false;
     this.menuId = undefined;
     this.value = undefined;
     this.activationType = "automatic";
@@ -335,6 +382,10 @@ const Menu = class {
     this.initialOptionsListRender = false;
     this.preventIncorrectTabOrder = false;
   }
+  watchOptionsHandler() {
+    this.ungroupedOptions = [];
+    this.loadUngroupedOptions();
+  }
   handleClearListener() {
     this.optionHighlighted = "";
   }
@@ -358,11 +409,12 @@ const Menu = class {
    * @param {KeyboardEvent} event - keyboard event
    */
   async handleKeyboardOpen(event) {
-    this.keyboardNav = true;
+    this.keyboardNav = false;
     if (this.activationType === "automatic") {
       this.autoSetInputValueKeyboardOpen(event);
     }
     else {
+      this.keyboardNav = true;
       this.manSetInputValueKeyboardOpen(event);
     }
   }
@@ -380,17 +432,7 @@ const Menu = class {
     }
   }
   componentWillLoad() {
-    if (this.options.length > 0) {
-      this.options.map((option) => {
-        if (option.children) {
-          option.children.map((option) => !option.disabled && this.ungroupedOptions.push(option));
-        }
-        else if (!option.disabled) {
-          this.ungroupedOptions.push(option);
-        }
-      });
-    }
-    this.ungroupedOptions = this.getSortedOptions(this.ungroupedOptions);
+    this.loadUngroupedOptions();
   }
   componentDidLoad() {
     let optionsHeight = 0;
@@ -442,7 +484,8 @@ const Menu = class {
         this.autoFocusOnSelected) {
         this.scrollToSelected(this.menu);
       }
-      else if (this.inputEl.tagName !== "IC-TEXT-FIELD") {
+      else if (this.inputEl.tagName !== "IC-TEXT-FIELD" &&
+        this.inputEl.tagName !== "INPUT") {
         this.menu.focus();
       }
       else if (optionHighlightedIsSet &&
@@ -456,12 +499,21 @@ const Menu = class {
     }
   }
   render() {
+    var _a, _b;
     const { inputLabel, options, menuId, value, fullWidth } = this;
     return (h(Host, { class: {
         "full-width": fullWidth,
-      } }, options.length !== 0 && (h("ul", { id: menuId, class: "menu", role: "listbox", "aria-label": inputLabel, "aria-activedescendant": value != null && value !== "" ? this.getOptionId(value) : "", tabindex: open && !this.keyboardNav ? "0" : "-1", ref: (el) => (this.menu = el), onKeyDown: this.handleMenuKeyDown, onKeyUp: this.handleMenuKeyUp, onBlur: this.handleBlur }, this.getSortedOptions(options).map((option, index) => {
+        "no-focus": ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT",
+      } }, options.length !== 0 && (h("ul", { id: menuId, class: "menu", role: "listbox", "aria-label": inputLabel, "aria-activedescendant": value != null && value !== "" ? this.getOptionId(value) : "", tabindex: open && !this.keyboardNav && ((_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.tagName) !== "INPUT"
+        ? "0"
+        : "-1", ref: (el) => (this.menu = el), onKeyDown: this.handleMenuKeyDown, onKeyUp: this.handleMenuKeyUp, onBlur: this.handleBlur }, this.getSortedOptions(options).map((option, index) => {
       if (option.children) {
-        return (h("div", null, h("ic-typography", { class: "option-group-title", role: "presentation", variant: "subtitle-small" }, h("p", null, option.label)), option.children.map((childOption) => this.displayOption(childOption, index, option))));
+        if (option.children.length > 0) {
+          return (h("div", null, h("ic-typography", { class: "option-group-title", role: "presentation", variant: "subtitle-small" }, h("p", null, option.label)), option.children.map((childOption) => this.displayOption(childOption, index, option))));
+        }
+        else {
+          return null;
+        }
       }
       else {
         return this.displayOption(option, index);
@@ -469,6 +521,9 @@ const Menu = class {
     })))));
   }
   get host() { return getElement(this); }
+  static get watchers() { return {
+    "options": ["watchOptionsHandler"]
+  }; }
 };
 Menu.style = icMenuCss;