@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.16

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a62312a7.js');
-const helpers = require('./helpers-d6b5880e.js');
+const index = require('./index-014e3058.js');
+const helpers = require('./helpers-eb53c416.js');
 const types = require('./types-3eb02246.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;--footer-compliance-padding:1rem 0}:host(.footer-sparse){--footer-links-padding:1.5rem 0;--footer-logo-margin-bottom:var(--ic-space-lg);--footer-link-inner-flex-direction:row}:host(.footer-small){--footer-links-padding:0 0;--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:1rem 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)}@media (forced-colors: active){footer{border-top:var(--ic-hc-border)}}";
@@ -72,7 +72,7 @@ const Footer = class {
         // Slots will be able to infer their own color
         [types.IcThemeForegroundEnum.Dark]: foregroundColor === types.IcThemeForegroundEnum.Dark,
         [types.IcThemeForegroundEnum.Light]: foregroundColor === types.IcThemeForegroundEnum.Light,
-      } }, index.h("footer", { ref: (footerEl) => (this.footerEl = footerEl) }, index.h("div", { class: "footer-description" }, index.h("ic-section-container", { aligned: aligned, fullHeight: true }, index.h("div", { class: "footer-description-inner" }, index.h("ic-typography", { variant: "body" }, index.h("slot", { name: "description" }, description))))), index.h("div", { class: "footer-links" }, groupLinks && small ? (index.h("div", { class: "footer-links-inner" }, index.h("slot", { name: "link" }))) : (index.h("ic-section-container", { fullHeight: true, aligned: aligned }, index.h("div", { class: "footer-links-inner" }, index.h("slot", { name: "link" }))))), index.h("div", { class: "footer-compliance" }, index.h("ic-section-container", { aligned: aligned, fullHeight: true }, index.h("div", { class: "footer-compliance-inner" }, helpers.isSlotUsed(this.el, "logo") && (index.h("div", { class: "footer-logo" }, index.h("slot", { name: "logo" }))), (helpers.isSlotUsed(this.el, "caption") || caption) && (index.h("div", { class: "footer-caption" }, index.h("ic-typography", { variant: this.deviceSize <= helpers.IC_DEVICE_SIZES.M
+      } }, index.h("footer", { ref: (footerEl) => (this.footerEl = footerEl) }, index.h("div", { class: "footer-description" }, index.h("ic-section-container", { aligned: aligned, fullHeight: true }, index.h("div", { class: "footer-description-inner" }, index.h("ic-typography", { variant: "body" }, index.h("slot", { name: "description" }, description))))), helpers.isSlotUsed(this.el, "link") && (index.h("div", { class: "footer-links" }, groupLinks && small ? (index.h("div", { class: "footer-links-inner" }, index.h("slot", { name: "link" }))) : (index.h("ic-section-container", { fullHeight: true, aligned: aligned }, index.h("div", { class: "footer-links-inner" }, index.h("slot", { name: "link" })))))), index.h("div", { class: "footer-compliance" }, index.h("ic-section-container", { aligned: aligned, fullHeight: true }, index.h("div", { class: "footer-compliance-inner" }, helpers.isSlotUsed(this.el, "logo") && (index.h("div", { class: "footer-logo" }, index.h("slot", { name: "logo" }))), (helpers.isSlotUsed(this.el, "caption") || caption) && (index.h("div", { class: "footer-caption" }, index.h("ic-typography", { variant: this.deviceSize <= helpers.IC_DEVICE_SIZES.M
         ? "caption"
         : "body" }, index.h("slot", { name: "caption" }, caption)))), copyright && (index.h("div", { class: {
         ["footer-copyright"]: true,

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

@@ -1 +1 @@
-{"file":"ic-footer.entry.cjs.js","mappings":"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","names":["getCurrentDeviceSize","IC_DEVICE_SIZES","getThemeForegroundColor","checkResizeObserver","h","Host","IcThemeForegroundEnum","isSlotUsed","hasClassificationBanner"],"sources":["./src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","./src/components/ic-footer/ic-footer.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n\n  --footer-compliance-padding: 1rem 0;\n}\n\n:host(.footer-sparse) {\n  --footer-links-padding: 1.5rem 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-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: 1rem 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\n@media (forced-colors: active) {\n  footer {\n    border-top: var(--ic-hc-border);\n  }\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  isSlotUsed,\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   *  @internal Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() footerResized: EventEmitter<void>;\n\n  /**\n   * The description displayed at the top of the footer.\n   */\n  @Prop() description: string;\n\n  /**\n   * The alignment of the section containers used within the footer.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The screen size breakpoint at which to switch to the small layout.\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * If `true`, the footer will be set 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   * If `true`, the footer will display 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(\"themeChange\", { 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.footerResized.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                {isSlotUsed(this.el, \"logo\") && (\n                  <div class=\"footer-logo\">\n                    {/* Logo */}\n                    <slot name=\"logo\" />\n                  </div>\n                )}\n                {(isSlotUsed(this.el, \"caption\") || caption) && (\n                  <div class=\"footer-caption\">\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption\"\n                          : \"body\"\n                      }\n                    >\n                      <slot name=\"caption\">{caption}</slot>\n                    </ic-typography>\n                  </div>\n                )}\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.cjs.js","mappings":"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","names":["getCurrentDeviceSize","IC_DEVICE_SIZES","getThemeForegroundColor","checkResizeObserver","h","Host","IcThemeForegroundEnum","isSlotUsed","hasClassificationBanner"],"sources":["./src/components/ic-footer/ic-footer.css?tag=ic-footer&encapsulation=shadow","./src/components/ic-footer/ic-footer.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n\n  --footer-compliance-padding: 1rem 0;\n}\n\n:host(.footer-sparse) {\n  --footer-links-padding: 1.5rem 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-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: 1rem 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\n@media (forced-colors: active) {\n  footer {\n    border-top: var(--ic-hc-border);\n  }\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  isSlotUsed,\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   *  @internal Triggers on page resize and triggers style changes in footer links and link groups\n   */\n  @Event() footerResized: EventEmitter<void>;\n\n  /**\n   * The description displayed at the top of the footer.\n   */\n  @Prop() description: string;\n\n  /**\n   * The alignment of the section containers used within the footer.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * The screen size breakpoint at which to switch to the small layout.\n   */\n  @Prop() breakpoint?: IcFooterBreakpoints = \"medium\";\n\n  /**\n   * If `true`, the footer will be set 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   * If `true`, the footer will display 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(\"themeChange\", { 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.footerResized.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          {isSlotUsed(this.el, \"link\") && (\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\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                {isSlotUsed(this.el, \"logo\") && (\n                  <div class=\"footer-logo\">\n                    {/* Logo */}\n                    <slot name=\"logo\" />\n                  </div>\n                )}\n                {(isSlotUsed(this.el, \"caption\") || caption) && (\n                  <div class=\"footer-caption\">\n                    <ic-typography\n                      variant={\n                        this.deviceSize <= IC_DEVICE_SIZES.M\n                          ? \"caption\"\n                          : \"body\"\n                      }\n                    >\n                      <slot name=\"caption\">{caption}</slot>\n                    </ic-typography>\n                  </div>\n                )}\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/cjs/ic-hero.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a62312a7.js');
+const index = require('./index-014e3058.js');
 const types = require('./types-3eb02246.js');
-const helpers = require('./helpers-d6b5880e.js');
+const helpers = require('./helpers-eb53c416.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);--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 -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg);flex-wrap:wrap}.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}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host(.small),:host(.small) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.small),:host(.small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.small),:host(.small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}.right-container{margin-left:3.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host(.small),:host(.small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:17.5rem}: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:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host(.small),:host(.small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:16.5rem}: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}}";
 

package/dist/cjs/ic-horizontal-scroll.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a62312a7.js');
-const helpers = require('./helpers-d6b5880e.js');
+const index = require('./index-014e3058.js');
+const helpers = require('./helpers-eb53c416.js');
 const types = require('./types-3eb02246.js');
 
 const LeftArrow = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a62312a7.js');
+const index = require('./index-014e3058.js');
 const types = require('./types-3eb02246.js');
-const helpers = require('./helpers-d6b5880e.js');
+const helpers = require('./helpers-eb53c416.js');
 const checkIcon = require('./check-icon-b2f60716.js');
 const popper = require('./popper-11d5f714.js');
 
-const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:var(--ic-space-1px) solid\n    var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--ic-architectural-white);box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.fullwidth{width:100%}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-space-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:0.438rem;display:flex;align-items:center}ic-input-component-container.multiline .icon-container,ic-input-component-container.multiline.small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.readonly .icon-container{margin-left:-0.313rem}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) 0.375rem;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);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border-color:var(--ic-action-dark-hover);color:var(--ic-action-dark-hover)}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;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)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:var(--ic-space-1px) solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-space-1px) dashed GrayText}}";
+const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:var(--ic-space-1px) solid\n    var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--ic-architectural-white);box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.fullwidth{width:100%}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-space-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-error-border-default);padding:0}ic-input-component-container.error:hover{border:var(--ic-error-border-hover)}ic-input-component-container.error:focus-within{border:var(--ic-error-border-pressed)}ic-input-component-container.warning{border:var(--ic-warning-border-default);padding:0}ic-input-component-container.warning:hover{border:var(--ic-warning-border-hover)}ic-input-component-container.warning:focus-within{border:var(--ic-warning-border-pressed)}ic-input-component-container.success{border:var(--ic-success-border-default);padding:0}ic-input-component-container.success:hover{border:var(--ic-success-border-hover)}ic-input-component-container.success:focus-within{border:var(--ic-success-border-pressed)}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:0.438rem;display:flex;align-items:center}ic-input-component-container.multiline .icon-container,ic-input-component-container.multiline.small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.readonly .icon-container{margin-left:-0.313rem}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) 0.375rem;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);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border:var(--ic-border-hover);color:var(--ic-action-dark-hover)}ic-input-component-container:focus{border:var(--ic-border-pressed)}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;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)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:var(--ic-space-1px) solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-space-1px) dashed GrayText}}";
 
 const InputComponentContainer = class {
   constructor(hostRef) {
@@ -67,7 +67,7 @@ const InputContainer = class {
 };
 InputContainer.style = icInputContainerCss;
 
-const icMenuCss = "html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type=\"button\"].sc-ic-menu,[type=\"reset\"].sc-ic-menu,[type=\"submit\"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type=\"button\"].sc-ic-menu::-moz-focus-inner,[type=\"reset\"].sc-ic-menu::-moz-focus-inner,[type=\"submit\"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type=\"button\"].sc-ic-menu:-moz-focusring,[type=\"reset\"].sc-ic-menu:-moz-focusring,[type=\"submit\"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type=\"checkbox\"].sc-ic-menu,[type=\"radio\"].sc-ic-menu{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-menu::-webkit-inner-spin-button,[type=\"number\"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.open.sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{border-radius:var(--ic-border-radius);max-height:0;width:var(--input-width, 20rem);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay)}.sc-ic-menu-h:not(.no-focus):focus-within{box-shadow:var(--ic-border-focus)}#retry-button.sc-ic-menu::part(button){height:var(--ic-space-lg)}.small.sc-ic-menu #retry-button.sc-ic-menu::part(button){height:var(--ic-space-md)}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border:var(--ic-space-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.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}.open.sc-ic-menu-h{max-height:none;display:block}.open.sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:20.125rem}.full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:0.5rem 0.438rem;cursor:pointer;display:flex;align-items:center}.option.sc-ic-menu:not(.loading-option){justify-content:space-between}.small.sc-ic-menu-h .option.sc-ic-menu{padding:0.25rem 0.438rem}.option.sc-ic-menu:last-child{border-radius:0 0 var(--ic-space-1px) var(--ic-space-1px)}.option.sc-ic-menu:first-child{border-radius:var(--ic-space-1px) var(--ic-space-1px) 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-active)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{color:var(--ic-color-secondary-text)}.option-text-container.sc-ic-menu{pointer-events:none}.option.loading-option.sc-ic-menu .option-text-container.sc-ic-menu{margin-left:0.625rem;color:var(--ic-color-secondary-text)}.error-icon-svg.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);fill:var(--ic-status-error);align-self:center;display:flex;margin-right:calc(var(--ic-space-xxs) * 1.2)}.loading-error-info.sc-ic-menu{display:flex}.check-icon.sc-ic-menu{height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:0.5rem;pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:1.5rem 0.438rem 0.5rem;color:var(--ic-color-tertiary-text)}.small.sc-ic-menu-h .option-group-title.sc-ic-menu{padding:0.75rem 0.438rem 0.25rem}.last-recommended-option.sc-ic-menu{border-bottom:var(--ic-space-1px) solid var(--ic-architectural-400)}.disabled-option.sc-ic-menu{color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-focus-blue) !important;color:var(--ic-color-white-text) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}}";
+const icMenuCss = "html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type=\"button\"].sc-ic-menu,[type=\"reset\"].sc-ic-menu,[type=\"submit\"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type=\"button\"].sc-ic-menu::-moz-focus-inner,[type=\"reset\"].sc-ic-menu::-moz-focus-inner,[type=\"submit\"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type=\"button\"].sc-ic-menu:-moz-focusring,[type=\"reset\"].sc-ic-menu:-moz-focusring,[type=\"submit\"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type=\"checkbox\"].sc-ic-menu,[type=\"radio\"].sc-ic-menu{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-menu::-webkit-inner-spin-button,[type=\"number\"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.open.sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{border-radius:var(--ic-border-radius);max-height:0;width:var(--input-width, 20rem);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay)}.sc-ic-menu-h:not(.no-focus):focus-within{box-shadow:var(--ic-border-focus)}#retry-button.sc-ic-menu::part(button){height:var(--ic-space-lg)}.small.sc-ic-menu #retry-button.sc-ic-menu::part(button){height:var(--ic-space-md)}.on-dialog.sc-ic-menu-h{inset:auto !important}.on-dialog-fix-translate.sc-ic-menu-h{transform:translate(0, 80px) !important}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border:var(--ic-space-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.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}.open.sc-ic-menu-h{max-height:none;display:block}.open.sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:20.125rem}.full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:0.5rem 0.438rem;cursor:pointer;display:flex;align-items:center}.option.sc-ic-menu:not(.loading-option){justify-content:space-between}.small.sc-ic-menu-h .option.sc-ic-menu{padding:0.25rem 0.438rem}.option.sc-ic-menu:last-child{border-radius:0 0 var(--ic-space-1px) var(--ic-space-1px)}.option.sc-ic-menu:first-child{border-radius:var(--ic-space-1px) var(--ic-space-1px) 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-active)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{color:var(--ic-color-secondary-text)}.option-text-container.sc-ic-menu{pointer-events:none}.option.loading-option.sc-ic-menu .option-text-container.sc-ic-menu{margin-left:0.625rem;color:var(--ic-color-secondary-text)}.error-icon-svg.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);fill:var(--ic-status-error);align-self:center;display:flex;margin-right:calc(var(--ic-space-xxs) * 1.2)}.loading-error-info.sc-ic-menu{display:flex}.check-icon.sc-ic-menu{height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:0.5rem;pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:1.5rem 0.438rem 0.5rem;color:var(--ic-color-tertiary-text)}.small.sc-ic-menu-h .option-group-title.sc-ic-menu{padding:0.75rem 0.438rem 0.25rem}.last-recommended-option.sc-ic-menu{border-bottom:var(--ic-border-default)}.disabled-option.sc-ic-menu{color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-focus-blue) !important;color:var(--ic-color-white-text) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}}";
 
 const Menu = class {
   constructor(hostRef) {
@@ -76,6 +76,7 @@ const Menu = class {
     this.menuStateChange = index.createEvent(this, "menuStateChange", 7);
     this.menuOptionId = index.createEvent(this, "menuOptionId", 7);
     this.menuKeyPress = index.createEvent(this, "menuKeyPress", 7);
+    this.menuValueChange = index.createEvent(this, "menuValueChange", 7);
     this.ungroupedOptionsSet = index.createEvent(this, "ungroupedOptionsSet", 7);
     this.retryButtonClicked = index.createEvent(this, "retryButtonClicked", 7);
     this.timeoutBlur = index.createEvent(this, "timeoutBlur", 7);
@@ -87,6 +88,7 @@ const Menu = class {
     this.hasTimedOut = false;
     this.isLoading = false;
     this.hasPreviouslyBlurred = false;
+    this.firstRender = true;
     this.handleClearListener = () => {
       this.optionHighlighted = "";
     };
@@ -95,8 +97,6 @@ const Menu = class {
       this.setInputValue(highlightedOptionIndex);
     };
     this.handleMenuChange = (open, focusInput) => {
-      if (!open)
-        this.popperInstance.destroy();
       this.menuStateChange.emit({ open, focusInput });
       if (!open && focusInput !== false) {
         this.inputEl.focus();
@@ -243,6 +243,9 @@ const Menu = class {
           this.value = (_a = menuOptions[highlightedOptionIndex]) === null || _a === void 0 ? void 0 : _a.value;
           break;
         case "Escape":
+          if (this.open) {
+            event.stopImmediatePropagation();
+          }
           this.handleMenuChange(false);
           this.menuOptionId.emit({ optionId: undefined });
           break;
@@ -510,6 +513,9 @@ const Menu = class {
     this.ungroupedOptions = [];
     this.loadUngroupedOptions();
   }
+  watchValueHandler() {
+    this.menuValueChange.emit({ value: this.value });
+  }
   /**
    * @internal If menu is opened with the mouse, emit menuStateChange custom event.
    */
@@ -548,11 +554,12 @@ const Menu = class {
     }
   }
   componentWillLoad() {
+    var _a, _b;
     this.loadUngroupedOptions();
     this.parentEl.addEventListener("icClear", this.handleClearListener);
     this.parentEl.addEventListener("icSubmitSearch", this.handleSubmitSearch);
-    this.hasTimedOut = this.options.some((opt) => opt.timedOut);
-    this.isLoading = this.options.some((opt) => opt.loading);
+    this.hasTimedOut = (_a = this.options) === null || _a === void 0 ? void 0 : _a.some((opt) => opt.timedOut);
+    this.isLoading = (_b = this.options) === null || _b === void 0 ? void 0 : _b.some((opt) => opt.loading);
   }
   componentDidLoad() {
     if (this.isSearchBar &&
@@ -568,25 +575,53 @@ const Menu = class {
     ], "Menu");
   }
   componentDidRender() {
-    if (this.open) {
-      this.popperInstance = popper.createPopper(this.anchorEl, this.host, {
-        placement: "bottom",
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, 7],
+    if (this.firstRender && this.open) {
+      this.firstRender = false;
+      let adjust = false;
+      const dialogEl = this.parentEl.closest("ic-dialog");
+      const onDialog = dialogEl !== null;
+      if (onDialog) {
+        this.host.classList.add("on-dialog");
+        if (dialogEl.getAttribute("data-overflow") === "false") {
+          const menuTop = this.host.getBoundingClientRect().top;
+          const menuHeight = this.host.getBoundingClientRect().height;
+          const dialogHeight = dialogEl.getBoundingClientRect().bottom;
+          if (menuTop + menuHeight > dialogHeight) {
+            adjust = true;
+          }
+        }
+        if (adjust === false) {
+          this.host.classList.add("on-dialog-fix-translate");
+        }
+      }
+      if (adjust) {
+        this.popperInstance = popper.createPopper(this.anchorEl, this.host, {
+          placement: "top",
+        });
+      }
+      else {
+        this.popperInstance = popper.createPopper(this.anchorEl, this.host, {
+          placement: "bottom",
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, 7],
+              },
             },
-          },
-          {
-            name: "flip",
-            options: {
-              fallbackPlacements: ["top"],
-              rootBoundary: "viewport",
+            {
+              name: "flip",
+              options: {
+                fallbackPlacements: ["top"],
+                rootBoundary: "viewport",
+              },
             },
-          },
-        ],
-      });
+          ],
+        });
+      }
+    }
+    else if (this.open) {
+      this.popperInstance.update();
     }
     if (this.open && !!this.options.length) {
       this.setMenuScrollbar();
@@ -620,6 +655,9 @@ const Menu = class {
     }
   }
   disconnectedCallback() {
+    if (this.popperInstance !== undefined) {
+      this.popperInstance.destroy();
+    }
     this.parentEl.removeEventListener("icClear", this.handleClearListener);
     this.parentEl.removeEventListener("icSubmitSearch", this.handleSubmitSearch);
   }
@@ -646,7 +684,8 @@ const Menu = class {
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
-    "options": ["watchOptionsHandler"]
+    "options": ["watchOptionsHandler"],
+    "value": ["watchValueHandler"]
   }; }
 };
 Menu.style = icMenuCss;