@ukic/web-components 2.1.0-beta.1 → 2.1.0-beta.11

package/dist/collection/components/ic-back-to-top/ic-back-to-top.js

@@ -9,7 +9,13 @@ export class BackToTop {
       this.targetElVisible = visible;
     };
     this.setFooterVisible = (visible) => {
-      this.footerVisible = visible;
+      this.checkForClassificationBanner();
+      if (typeof window !== "undefined" && window.scrollY === 0) {
+        this.footerVisible = false;
+      }
+      else {
+        this.footerVisible = visible;
+      }
     };
     this.targetElObserverCallback = (entries) => {
       this.setTargetElVisible(entries[0].isIntersecting);
@@ -70,6 +76,11 @@ export class BackToTop {
         this.targetEl.scrollIntoView();
       }
     };
+    this.checkForClassificationBanner = () => {
+      //adjust position for classification banner at bottom
+      const banners = document.querySelectorAll("ic-classification-banner:not([inline='true'])");
+      this.bannerOffset = banners.length > 0;
+    };
     this.target = undefined;
     this.bannerOffset = false;
     this.targetElVisible = true;
@@ -83,13 +94,12 @@ export class BackToTop {
   }
   componentWillLoad() {
     this.createTopObserver(this.target);
-    //adjust position for classification banner at bottom
-    const banners = document.querySelectorAll("ic-classification-banner:not([inline='true'])");
-    if (banners.length) {
-      this.bannerOffset = true;
-    }
+    this.checkForClassificationBanner();
     //observer for when footer scrolls into view
-    const footers = document.querySelectorAll("footer");
+    let footers = document.querySelectorAll("ic-footer");
+    if (footers.length === 0) {
+      footers = document.querySelectorAll("footer");
+    }
     if (footers.length) {
       const footerEl = footers[footers.length - 1];
       const threshold = this.bannerOffset ? 0.15 : 0;
@@ -111,6 +121,7 @@ export class BackToTop {
   }
   static get is() { return "ic-back-to-top"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["ic-back-to-top.css"]

package/dist/collection/components/ic-back-to-top/ic-back-to-top.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n  tag: \"ic-back-to-top\",\n  styleUrl: \"ic-back-to-top.css\",\n  shadow: true,\n})\nexport class BackToTop {\n  @Element() el: HTMLIcBackToTopElement;\n\n  /**\n   * The ID of the element to jump back to when the link is clicked.\n   */\n  @Prop() target!: string;\n\n  @State() bannerOffset: boolean = false;\n\n  @State() targetElVisible: boolean = true;\n\n  @State() footerVisible: boolean = false;\n\n  @Watch(\"target\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    onComponentPropUndefinedChange(oldValue, newValue, () => {\n      this.createTopObserver(newValue);\n    });\n  }\n  private topObserver: IntersectionObserver = null;\n  private targetEl: Element;\n  private isTargetElNull: boolean;\n\n  private setTargetElVisible = (visible: boolean) => {\n    this.targetElVisible = visible;\n  };\n\n  private setFooterVisible = (visible: boolean) => {\n    this.footerVisible = visible;\n  };\n\n  private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setTargetElVisible(entries[0].isIntersecting);\n  };\n\n  private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setFooterVisible(entries[0].isIntersecting);\n  };\n\n  private findTargetEl = (target: string): Element => {\n    let targetElement: Element = null;\n    if (target === null || target === undefined) {\n      console.log(\n        \"Error: No target ID specified for back to top component - defaulting to top of page\"\n      );\n    } else {\n      targetElement = document.querySelector(\n        target.indexOf(\"#\") === 0 ? target : \"#\" + target\n      );\n      if (targetElement === null) {\n        console.log(\n          `Error: Back to top target element '${target}' not found - defaulting to top of page`\n        );\n      }\n    }\n    return targetElement;\n  };\n\n  private createTopObserver = (target: string) => {\n    this.targetEl = this.findTargetEl(target);\n    let objParent: HTMLElement;\n\n    //remove old element & observer\n    if (this.topObserver !== null) {\n      const observedEl = document.querySelector(\"#ic-back-to-top-target\");\n      if (observedEl !== null) {\n        this.topObserver.unobserve(observedEl);\n        observedEl.remove();\n      }\n    }\n\n    if (this.targetEl === null) {\n      objParent = document.body;\n      this.targetEl = objParent.firstElementChild;\n      this.isTargetElNull = true;\n    } else {\n      objParent = this.targetEl.parentNode as HTMLElement;\n      this.isTargetElNull = false;\n    }\n\n    //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n    const objBackToTopTargetEl = document.createElement(\"div\");\n    objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n    objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n    // resize observer needs to factor in any top margin on the target el\n    const marginTop = getComputedStyle(this.targetEl).marginTop;\n    this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n      threshold: [0],\n      rootMargin: `${marginTop} 0px 0px 0px`,\n    });\n    this.topObserver.observe(objBackToTopTargetEl);\n  };\n\n  private handleClick = () => {\n    if (this.isTargetElNull) {\n      window.scrollTo(0, 0);\n    } else {\n      this.targetEl.scrollIntoView();\n    }\n  };\n\n  componentWillLoad(): void {\n    this.createTopObserver(this.target);\n\n    //adjust position for classification banner at bottom\n    const banners = document.querySelectorAll(\n      \"ic-classification-banner:not([inline='true'])\"\n    );\n    if (banners.length) {\n      this.bannerOffset = true;\n    }\n\n    //observer for when footer scrolls into view\n    const footers = document.querySelectorAll(\"footer\");\n    if (footers.length) {\n      const footerEl = footers[footers.length - 1];\n      const threshold = this.bannerOffset ? 0.15 : 0;\n      const footerObserver = new IntersectionObserver(\n        this.footerObserverCallback,\n        { threshold: [threshold] }\n      );\n      footerObserver.observe(footerEl);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.target, propName: \"target\" }],\n      \"Back to Top\"\n    );\n  }\n\n  render() {\n    const { bannerOffset, targetElVisible, footerVisible } = this;\n    return (\n      <button\n        class={{\n          [\"ic-back-to-top-link\"]: true,\n          [\"offset-banner\"]: bannerOffset,\n          [\"show\"]: !targetElVisible,\n          [\"by-footer\"]: footerVisible,\n        }}\n        aria-label={backToTopLabel}\n        onClick={this.handleClick}\n      >\n        <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n        <ic-typography variant=\"subtitle-small\">\n          <span>{backToTopLabel}</span>\n        </ic-typography>\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n  tag: \"ic-back-to-top\",\n  styleUrl: \"ic-back-to-top.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BackToTop {\n  @Element() el: HTMLIcBackToTopElement;\n\n  /**\n   * The ID of the element to jump back to when the link is clicked.\n   */\n  @Prop() target!: string;\n\n  @State() bannerOffset: boolean = false;\n\n  @State() targetElVisible: boolean = true;\n\n  @State() footerVisible: boolean = false;\n\n  @Watch(\"target\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    onComponentPropUndefinedChange(oldValue, newValue, () => {\n      this.createTopObserver(newValue);\n    });\n  }\n  private topObserver: IntersectionObserver = null;\n  private targetEl: Element;\n  private isTargetElNull: boolean;\n\n  private setTargetElVisible = (visible: boolean) => {\n    this.targetElVisible = visible;\n  };\n\n  private setFooterVisible = (visible: boolean) => {\n    this.checkForClassificationBanner();\n    if (typeof window !== \"undefined\" && window.scrollY === 0) {\n      this.footerVisible = false;\n    } else {\n      this.footerVisible = visible;\n    }\n  };\n\n  private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setTargetElVisible(entries[0].isIntersecting);\n  };\n\n  private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setFooterVisible(entries[0].isIntersecting);\n  };\n\n  private findTargetEl = (target: string): Element => {\n    let targetElement: Element = null;\n    if (target === null || target === undefined) {\n      console.log(\n        \"Error: No target ID specified for back to top component - defaulting to top of page\"\n      );\n    } else {\n      targetElement = document.querySelector(\n        target.indexOf(\"#\") === 0 ? target : \"#\" + target\n      );\n      if (targetElement === null) {\n        console.log(\n          `Error: Back to top target element '${target}' not found - defaulting to top of page`\n        );\n      }\n    }\n    return targetElement;\n  };\n\n  private createTopObserver = (target: string) => {\n    this.targetEl = this.findTargetEl(target);\n    let objParent: HTMLElement;\n\n    //remove old element & observer\n    if (this.topObserver !== null) {\n      const observedEl = document.querySelector(\"#ic-back-to-top-target\");\n      if (observedEl !== null) {\n        this.topObserver.unobserve(observedEl);\n        observedEl.remove();\n      }\n    }\n\n    if (this.targetEl === null) {\n      objParent = document.body;\n      this.targetEl = objParent.firstElementChild;\n      this.isTargetElNull = true;\n    } else {\n      objParent = this.targetEl.parentNode as HTMLElement;\n      this.isTargetElNull = false;\n    }\n\n    //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n    const objBackToTopTargetEl = document.createElement(\"div\");\n    objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n    objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n    // resize observer needs to factor in any top margin on the target el\n    const marginTop = getComputedStyle(this.targetEl).marginTop;\n    this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n      threshold: [0],\n      rootMargin: `${marginTop} 0px 0px 0px`,\n    });\n    this.topObserver.observe(objBackToTopTargetEl);\n  };\n\n  private handleClick = () => {\n    if (this.isTargetElNull) {\n      window.scrollTo(0, 0);\n    } else {\n      this.targetEl.scrollIntoView();\n    }\n  };\n\n  private checkForClassificationBanner = () => {\n    //adjust position for classification banner at bottom\n    const banners = document.querySelectorAll(\n      \"ic-classification-banner:not([inline='true'])\"\n    );\n    this.bannerOffset = banners.length > 0;\n  };\n\n  componentWillLoad(): void {\n    this.createTopObserver(this.target);\n    this.checkForClassificationBanner();\n\n    //observer for when footer scrolls into view\n    let footers = document.querySelectorAll(\n      \"ic-footer\"\n    ) as NodeListOf<HTMLElement>;\n    if (footers.length === 0) {\n      footers = document.querySelectorAll(\"footer\");\n    }\n\n    if (footers.length) {\n      const footerEl = footers[footers.length - 1];\n      const threshold = this.bannerOffset ? 0.15 : 0;\n      const footerObserver = new IntersectionObserver(\n        this.footerObserverCallback,\n        { threshold: [threshold] }\n      );\n      footerObserver.observe(footerEl);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.target, propName: \"target\" }],\n      \"Back to Top\"\n    );\n  }\n\n  render() {\n    const { bannerOffset, targetElVisible, footerVisible } = this;\n    return (\n      <button\n        class={{\n          [\"ic-back-to-top-link\"]: true,\n          [\"offset-banner\"]: bannerOffset,\n          [\"show\"]: !targetElVisible,\n          [\"by-footer\"]: footerVisible,\n        }}\n        aria-label={backToTopLabel}\n        onClick={this.handleClick}\n      >\n        <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n        <ic-typography variant=\"subtitle-small\">\n          <span>{backToTopLabel}</span>\n        </ic-typography>\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.css

@@ -38,7 +38,7 @@
 }
 
 ic-link {
-  --breadcrumb-link-display: flex;
+  --breadcrumb-link-display: inline-flex;
   --breadcrumb-link-align-items: center;
   --breadcrumb-link-gap: var(--ic-space-xs);
 }
@@ -68,9 +68,9 @@ ic-link {
 :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),
 :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {
   outline: var(--ic-hc-focus-outline);
-  text-decoration-line: underline;
-  text-decoration-thickness: 25%;
-  text-underline-offset: 25%;
+  border-bottom: 0.25rem solid !important;
+  margin-bottom: -0.25rem !important;
+  text-decoration: none;
 }
 
 .hide,
@@ -80,6 +80,21 @@ ic-link {
 
 @media (forced-colors: active) {
   .back-icon svg {
-    color: currentColor;
+    color: currentcolor;
+  }
+}
+
+@supports (text-decoration-thickness: 25%) {
+  ic-link {
+    --breadcrumb-link-display: flex;
+  }
+
+  :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),
+  :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {
+    text-decoration-line: underline;
+    text-decoration-thickness: 25%;
+    text-underline-offset: 25%;
+    border-bottom: 0 !important;
+    margin-bottom: 0 !important;
   }
 }

package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js

@@ -30,6 +30,14 @@ export class Breadcrumb {
     this.current = false;
     this.showBackIcon = false;
   }
+  /**
+   * Sets focus on the breadcrumb.
+   */
+  async setFocus() {
+    if (this.el.shadowRoot.querySelector("ic-link")) {
+      this.el.shadowRoot.querySelector("ic-link").focus();
+    }
+  }
   componentWillRender() {
     this.setSlottedCurrentPageClass();
   }
@@ -44,6 +52,7 @@ export class Breadcrumb {
   }
   static get is() { return "ic-breadcrumb"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["ic-breadcrumb.css"]
@@ -68,7 +77,7 @@ export class Breadcrumb {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set breadcrumb title"
+          "text": "The title of the breadcrumb."
         },
         "attribute": "page-title",
         "reflect": false
@@ -85,7 +94,7 @@ export class Breadcrumb {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Set breadcrumb location"
+          "text": "The URL that the breadcrumb link points to."
         },
         "attribute": "href",
         "reflect": false
@@ -102,7 +111,7 @@ export class Breadcrumb {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If true, aria-current will be set on the breadcrumb"
+          "text": "If `true`, aria-current will be set on the breadcrumb."
         },
         "attribute": "current",
         "reflect": false,
@@ -121,7 +130,7 @@ export class Breadcrumb {
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "If true, display back icon"
+              "text": "If `true`, back icon will be displayed."
             }],
           "text": ""
         },
@@ -131,6 +140,26 @@ export class Breadcrumb {
       }
     };
   }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the breadcrumb.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=ic-breadcrumb.js.map

package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-breadcrumb.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-breadcrumb\",\n  styleUrl: \"ic-breadcrumb.css\",\n  shadow: true,\n})\nexport class Breadcrumb {\n  /**\n   * @slot icon - Content will be rendered to the left of the breadcrumb page title\n   */\n\n  @Element() el: HTMLIcBreadcrumbElement;\n  /**\n   * Set breadcrumb title\n   */\n  @Prop() pageTitle!: string;\n  /**\n   * Set breadcrumb location\n   */\n  @Prop() href?: string;\n  /**\n   * If true, aria-current will be set on the breadcrumb\n   */\n  @Prop() current?: boolean = false;\n\n  /**\n   * @internal If true, display back icon\n   */\n  @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n  private renderDefaultBreadcrumb = (\n    current: boolean,\n    pageTitle: string,\n    describedById: string,\n    href: string\n  ): IcBreadcrumbDefault => {\n    const hasPageTitle =\n      pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n\n    if (current && hasPageTitle) {\n      return (\n        <span\n          class={{\n            \"current-page-container\": current,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n          {pageTitle}\n        </span>\n      );\n    }\n\n    return (\n      <ic-link\n        href={href}\n        class=\"breadcrumb-link\"\n        aria-describedby={this.showBackIcon && describedById && describedById}\n      >\n        {this.showBackIcon && (\n          <div class=\"back-icon\" innerHTML={backIcon}></div>\n        )}\n        {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n        {pageTitle}\n      </ic-link>\n    );\n  };\n\n  private setSlottedCurrentPageClass = () => {\n    const icLink = this.el.querySelector(\"ic-link\");\n    if (icLink) {\n      icLink.classList.remove(\"current-page\");\n      if (this.current) {\n        const hasCurrentPageClass = icLink.classList.contains(\"current-page\");\n        if (!hasCurrentPageClass) {\n          icLink.classList.add(\"breadcrumb-link\", \"current-page\");\n        }\n      }\n    }\n  };\n\n  componentWillRender(): void {\n    this.setSlottedCurrentPageClass();\n  }\n\n  render() {\n    const { current, href, pageTitle } = this;\n    const describedById = `${\n      pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n    }-describedby`;\n\n    const hasPageTitle =\n      pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n    const hasHref = href !== null && href !== undefined && href !== \"\";\n\n    return (\n      <Host\n        class={{\n          back: this.showBackIcon,\n        }}\n        aria-current={current && \"page\"}\n        role=\"listitem\"\n      >\n        <div class=\"breadcrumb\">\n          <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n          {this.showBackIcon && describedById && (\n            <span\n              id={describedById}\n              class=\"hide\"\n            >{`Back to ${pageTitle}`}</span>\n          )}\n          {hasPageTitle && hasHref ? (\n            this.renderDefaultBreadcrumb(\n              current,\n              pageTitle,\n              describedById,\n              href\n            )\n          ) : (\n            <slot />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-breadcrumb.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, Method } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-breadcrumb\",\n  styleUrl: \"ic-breadcrumb.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Breadcrumb {\n  /**\n   * @slot icon - Content will be rendered to the left of the breadcrumb page title.\n   */\n\n  @Element() el: HTMLIcBreadcrumbElement;\n  /**\n   * The title of the breadcrumb.\n   */\n  @Prop() pageTitle!: string;\n  /**\n   * The URL that the breadcrumb link points to.\n   */\n  @Prop() href?: string;\n  /**\n   * If `true`, aria-current will be set on the breadcrumb.\n   */\n  @Prop() current?: boolean = false;\n\n  /**\n   * @internal If `true`, back icon will be displayed.\n   */\n  @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n  /**\n   * Sets focus on the breadcrumb.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"ic-link\")) {\n      this.el.shadowRoot.querySelector(\"ic-link\").focus();\n    }\n  }\n\n  private renderDefaultBreadcrumb = (\n    current: boolean,\n    pageTitle: string,\n    describedById: string,\n    href: string\n  ): IcBreadcrumbDefault => {\n    const hasPageTitle =\n      pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n\n    if (current && hasPageTitle) {\n      return (\n        <span\n          class={{\n            \"current-page-container\": current,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n          {pageTitle}\n        </span>\n      );\n    }\n\n    return (\n      <ic-link\n        href={href}\n        class=\"breadcrumb-link\"\n        aria-describedby={this.showBackIcon && describedById && describedById}\n      >\n        {this.showBackIcon && (\n          <div class=\"back-icon\" innerHTML={backIcon}></div>\n        )}\n        {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n        {pageTitle}\n      </ic-link>\n    );\n  };\n\n  private setSlottedCurrentPageClass = () => {\n    const icLink = this.el.querySelector(\"ic-link\");\n    if (icLink) {\n      icLink.classList.remove(\"current-page\");\n      if (this.current) {\n        const hasCurrentPageClass = icLink.classList.contains(\"current-page\");\n        if (!hasCurrentPageClass) {\n          icLink.classList.add(\"breadcrumb-link\", \"current-page\");\n        }\n      }\n    }\n  };\n\n  componentWillRender(): void {\n    this.setSlottedCurrentPageClass();\n  }\n\n  render() {\n    const { current, href, pageTitle } = this;\n    const describedById = `${\n      pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n    }-describedby`;\n\n    const hasPageTitle =\n      pageTitle !== null && pageTitle !== undefined && pageTitle !== \"\";\n    const hasHref = href !== null && href !== undefined && href !== \"\";\n\n    return (\n      <Host\n        class={{\n          back: this.showBackIcon,\n        }}\n        aria-current={current && \"page\"}\n        role=\"listitem\"\n      >\n        <div class=\"breadcrumb\">\n          <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n          {this.showBackIcon && describedById && (\n            <span\n              id={describedById}\n              class=\"hide\"\n            >{`Back to ${pageTitle}`}</span>\n          )}\n          {hasPageTitle && hasHref ? (\n            this.renderDefaultBreadcrumb(\n              current,\n              pageTitle,\n              describedById,\n              href\n            )\n          ) : (\n            <slot />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js

@@ -191,7 +191,7 @@ export class BreadcrumbGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If true, display the parent page and back icon as breadcrumb"
+          "text": "If `true`, display only a single breadcrumb for the parent page with a back icon."
         },
         "attribute": "back-breadcrumb-only",
         "reflect": false,
@@ -209,7 +209,7 @@ export class BreadcrumbGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If true, all breadcrumbs between the first and last breadcrumb will be collapsed"
+          "text": "If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed."
         },
         "attribute": "collapsed",
         "reflect": false,

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-breadcrumb-group.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-breadcrumb-group\",\n  styleUrl: \"ic-breadcrumb-group.css\",\n  shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n  @Element() el: HTMLIcBreadcrumbGroupElement;\n  /**\n   * If true, display the parent page and back icon as breadcrumb\n   */\n  @Prop() backBreadcrumbOnly: boolean = false;\n  /**\n   * If true, all breadcrumbs between the first and last breadcrumb will be collapsed\n   */\n  @Prop() collapsed: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() expandedBreadcrumbs: boolean = false;\n\n  private breadcrumbs: HTMLIcBreadcrumbElement[];\n  private breadcrumb: HTMLIcBreadcrumbElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n  private ADD_CLASS_DELAY = 50;\n  private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n\n  private setBackBreadcrumb = () => {\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumbAttr();\n    }\n  };\n\n  private setBackBreadcrumbAttr = () => {\n    const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    if (lastParentBreadcrumb) {\n      lastParentBreadcrumb.classList.add(\"show\");\n      lastParentBreadcrumb.setAttribute(\"show-back-icon\", \"true\");\n    }\n  };\n\n  private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement | null => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(\"ic-breadcrumb\")\n    );\n\n    if (allBreadcrumbs.length === 1) {\n      return null;\n    }\n\n    this.breadcrumbs = allBreadcrumbs.filter(\n      (breadcrumb) => !breadcrumb.getAttribute(\"current\")\n    );\n    this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];\n\n    return this.breadcrumb;\n  };\n\n  private setDefaultBreadcrumbs = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(\"ic-breadcrumb\")\n    );\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.setAttribute(\"show-back-icon\", \"false\");\n    });\n  };\n\n  private setCollapsed = () => {\n    if (this.collapsed) {\n      const allBreadcrumbs = Array.from(\n        this.el.querySelectorAll(\"ic-breadcrumb\")\n      );\n      this.collapsedBreadcrumbs = allBreadcrumbs\n        .splice(1, allBreadcrumbs.length - 2)\n        .filter(\n          (breadcrumb) =>\n            !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n        );\n\n      this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n        breadcrumb.classList.add(\"hide\")\n      );\n\n      const firstBreadcrumb = allBreadcrumbs[0];\n\n      if (firstBreadcrumb) {\n        firstBreadcrumb.insertAdjacentElement(\n          \"afterend\",\n          this.collapsedBreadcrumbWrapper\n        );\n      }\n    }\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n    this.collapsedBreadcrumbWrapper.classList.add(\n      \"collapsed-breadcrumb-wrapper\"\n    );\n    const collapsedBreadcrumbEl = document.createElement(\"button\");\n\n    const ariaLabel = document.createElement(\"span\");\n    ariaLabel.id = \"collapsed-button-label\";\n    ariaLabel.innerText = \"Collapsed breadcrumbs\";\n    ariaLabel.className = \"hide\";\n    collapsedBreadcrumbEl.setAttribute(\n      \"aria-labelledby\",\n      \"collapsed-button-label\"\n    );\n\n    const ariaDescribed = document.createElement(\"span\");\n    ariaDescribed.id = \"collapsed-button-described\";\n    ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n    ariaDescribed.className = \"hide\";\n    collapsedBreadcrumbEl.setAttribute(\n      \"aria-describedby\",\n      \"collapsed-button-described\"\n    );\n\n    collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n    collapsedBreadcrumbEl.innerText = \"...\";\n    collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n    collapsedBreadcrumbEl.addEventListener(\"click\", () => {\n      this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n    });\n\n    this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n    this.collapsedBreadcrumbWrapper.append(ariaLabel);\n    this.collapsedBreadcrumbWrapper.append(collapsedBreadcrumbEl);\n\n    return this.collapsedBreadcrumbWrapper;\n  };\n\n  private handleHiddenCollapsedBreadcrumbs = (\n    collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement\n  ) => {\n    collapsedBreadcrumbWrapper.remove();\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.add(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"hide\");\n      setTimeout(() => {\n        breadcrumb.classList.add(\"fade\");\n      }, this.ADD_CLASS_DELAY);\n\n      this.removeVisuallyHiddenClass(breadcrumb);\n    });\n    this.expandedBreadcrumbs = true;\n  };\n\n  private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n    breadcrumb.addEventListener(\"transitionend\", (e) => {\n      if (e.propertyName === \"opacity\") {\n        breadcrumb.classList.remove(\"visuallyhidden\");\n      }\n    });\n  };\n\n  private setLastParentCollapsedBackBreadcrumb = () => {\n    const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    this.setBackBreadcrumbAttr();\n    lastParentBreadcrumb.classList.remove(\"hide\");\n  };\n\n  private revertLastParentCollapsedBreadcrumb = () => {\n    const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    lastParentBreadcrumb.setAttribute(\"show-back-icon\", \"false\");\n  };\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n        if (this.collapsed) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setBackBreadcrumb();\n        }\n      } else {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n        if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n          this.revertLastParentCollapsedBreadcrumb();\n          if (this.expandedBreadcrumbs) {\n            this.setDefaultBreadcrumbs();\n          } else {\n            this.setCollapsed();\n          }\n        } else {\n          this.setDefaultBreadcrumbs();\n        }\n      }\n    }\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.el);\n  };\n\n  componentWillLoad(): void {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(\"ic-breadcrumb\")\n    );\n\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumb();\n    } else {\n      checkResizeObserver(this.runResizeObserver);\n    }\n\n    if (this.collapsed) {\n      this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n\n      if (allBreadcrumbs.length > 2) {\n        if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setCollapsed();\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          back: this.backBreadcrumbOnly,\n          collapsed: this.collapsed,\n        }}\n      >\n        <nav aria-label=\"breadcrumbs\">\n          <ol>\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-breadcrumb-group.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-breadcrumb-group\",\n  styleUrl: \"ic-breadcrumb-group.css\",\n  shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n  @Element() el: HTMLIcBreadcrumbGroupElement;\n  /**\n   * If `true`, display only a single breadcrumb for the parent page with a back icon.\n   */\n  @Prop() backBreadcrumbOnly: boolean = false;\n  /**\n   * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n   */\n  @Prop() collapsed: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() expandedBreadcrumbs: boolean = false;\n\n  private breadcrumbs: HTMLIcBreadcrumbElement[];\n  private breadcrumb: HTMLIcBreadcrumbElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n  private ADD_CLASS_DELAY = 50;\n  private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n\n  private setBackBreadcrumb = () => {\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumbAttr();\n    }\n  };\n\n  private setBackBreadcrumbAttr = () => {\n    const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    if (lastParentBreadcrumb) {\n      lastParentBreadcrumb.classList.add(\"show\");\n      lastParentBreadcrumb.setAttribute(\"show-back-icon\", \"true\");\n    }\n  };\n\n  private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement | null => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(\"ic-breadcrumb\")\n    );\n\n    if (allBreadcrumbs.length === 1) {\n      return null;\n    }\n\n    this.breadcrumbs = allBreadcrumbs.filter(\n      (breadcrumb) => !breadcrumb.getAttribute(\"current\")\n    );\n    this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];\n\n    return this.breadcrumb;\n  };\n\n  private setDefaultBreadcrumbs = () => {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(\"ic-breadcrumb\")\n    );\n    allBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.setAttribute(\"show-back-icon\", \"false\");\n    });\n  };\n\n  private setCollapsed = () => {\n    if (this.collapsed) {\n      const allBreadcrumbs = Array.from(\n        this.el.querySelectorAll(\"ic-breadcrumb\")\n      );\n      this.collapsedBreadcrumbs = allBreadcrumbs\n        .splice(1, allBreadcrumbs.length - 2)\n        .filter(\n          (breadcrumb) =>\n            !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n        );\n\n      this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n        breadcrumb.classList.add(\"hide\")\n      );\n\n      const firstBreadcrumb = allBreadcrumbs[0];\n\n      if (firstBreadcrumb) {\n        firstBreadcrumb.insertAdjacentElement(\n          \"afterend\",\n          this.collapsedBreadcrumbWrapper\n        );\n      }\n    }\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n    this.collapsedBreadcrumbWrapper.classList.add(\n      \"collapsed-breadcrumb-wrapper\"\n    );\n    const collapsedBreadcrumbEl = document.createElement(\"button\");\n\n    const ariaLabel = document.createElement(\"span\");\n    ariaLabel.id = \"collapsed-button-label\";\n    ariaLabel.innerText = \"Collapsed breadcrumbs\";\n    ariaLabel.className = \"hide\";\n    collapsedBreadcrumbEl.setAttribute(\n      \"aria-labelledby\",\n      \"collapsed-button-label\"\n    );\n\n    const ariaDescribed = document.createElement(\"span\");\n    ariaDescribed.id = \"collapsed-button-described\";\n    ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n    ariaDescribed.className = \"hide\";\n    collapsedBreadcrumbEl.setAttribute(\n      \"aria-describedby\",\n      \"collapsed-button-described\"\n    );\n\n    collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n    collapsedBreadcrumbEl.innerText = \"...\";\n    collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n    collapsedBreadcrumbEl.addEventListener(\"click\", () => {\n      this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n    });\n\n    this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n    this.collapsedBreadcrumbWrapper.append(ariaLabel);\n    this.collapsedBreadcrumbWrapper.append(collapsedBreadcrumbEl);\n\n    return this.collapsedBreadcrumbWrapper;\n  };\n\n  private handleHiddenCollapsedBreadcrumbs = (\n    collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement\n  ) => {\n    collapsedBreadcrumbWrapper.remove();\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.add(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"hide\");\n      setTimeout(() => {\n        breadcrumb.classList.add(\"fade\");\n      }, this.ADD_CLASS_DELAY);\n\n      this.removeVisuallyHiddenClass(breadcrumb);\n    });\n    this.expandedBreadcrumbs = true;\n  };\n\n  private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n    breadcrumb.addEventListener(\"transitionend\", (e) => {\n      if (e.propertyName === \"opacity\") {\n        breadcrumb.classList.remove(\"visuallyhidden\");\n      }\n    });\n  };\n\n  private setLastParentCollapsedBackBreadcrumb = () => {\n    const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    this.setBackBreadcrumbAttr();\n    lastParentBreadcrumb.classList.remove(\"hide\");\n  };\n\n  private revertLastParentCollapsedBreadcrumb = () => {\n    const lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    lastParentBreadcrumb.setAttribute(\"show-back-icon\", \"false\");\n  };\n\n  private resizeObserver: ResizeObserver = null;\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      if (this.deviceSize <= DEVICE_SIZES.S) {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n        if (this.collapsed) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setBackBreadcrumb();\n        }\n      } else {\n        this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n        if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n          this.revertLastParentCollapsedBreadcrumb();\n          if (this.expandedBreadcrumbs) {\n            this.setDefaultBreadcrumbs();\n          } else {\n            this.setCollapsed();\n          }\n        } else {\n          this.setDefaultBreadcrumbs();\n        }\n      }\n    }\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.el);\n  };\n\n  componentWillLoad(): void {\n    const allBreadcrumbs = Array.from(\n      this.el.querySelectorAll(\"ic-breadcrumb\")\n    );\n\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumb();\n    } else {\n      checkResizeObserver(this.runResizeObserver);\n    }\n\n    if (this.collapsed) {\n      this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n\n      if (allBreadcrumbs.length > 2) {\n        if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setCollapsed();\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          back: this.backBreadcrumbOnly,\n          collapsed: this.collapsed,\n        }}\n      >\n        <nav aria-label=\"breadcrumbs\">\n          <ol>\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-button/ic-button.css

@@ -457,10 +457,10 @@ video {
   font-family: var(--ic-font-body-family);
   text-decoration: none;
   font-weight: 600;
-  font-size: 14px;
+  font-size: 0.875rem;
   transition: var(--ic-easing-transition-fast);
   border-radius: var(--ic-border-radius);
-  min-width: 100px;
+  min-width: 6.25rem;
   display: inline-flex;
   gap: var(--ic-space-xs);
   flex-direction: row;
@@ -556,7 +556,7 @@ video {
 /* Secondary */
 
 :host(.button-variant-secondary) .button {
-  border: 1px solid var(--button-default);
+  border: 0.063rem solid var(--button-default);
   color: var(--button-default);
 }
 
@@ -677,7 +677,7 @@ video {
 /* Sizing */
 
 :host(.button-size-default) .button {
-  height: 40px;
+  height: 2.5rem;
   padding: var(--ic-space-xs) var(--ic-space-md);
 }
 
@@ -694,7 +694,7 @@ video {
 :host(.button-size-default.button-variant-icon) .button {
   height: var(--ic-space-xl);
   width: var(--ic-space-xl);
-  padding: 6px;
+  padding: 0.375rem;
 }
 
 :host(.button-size-small.button-variant-icon) .button {
@@ -704,8 +704,8 @@ video {
 }
 
 :host(.button-size-large.button-variant-icon) .button {
-  height: 40px;
-  width: 40px;
+  height: 2.5rem;
+  width: 2.5rem;
   padding: var(--ic-space-xs);
 }
 
@@ -720,6 +720,7 @@ video {
 div.loading-container {
   position: relative;
   align-items: center;
+  width: 100%;
 }
 
 ic-loading-indicator {
@@ -767,7 +768,7 @@ div.icon-container {
   align-items: center;
 }
 
-::slotted(svg) {
+::slotted(*) {
   width: var(--icon-width) !important;
   height: var(--icon-height) !important;
   fill: currentcolor !important;
@@ -782,13 +783,13 @@ div.icon-container {
 /** SEARCH **/
 
 :host(.search-submit-button) ::slotted(svg) {
-  --icon-height: 20px;
-  --icon-width: 20px;
+  --icon-height: 1.25rem;
+  --icon-width: 1.25rem;
 }
 
 :host(.search-submit-button-small) ::slotted(svg) {
-  --icon-height: 16px;
-  --icon-width: 16px;
+  --icon-height: 1rem;
+  --icon-width: 1rem;
 }
 
 :host(.clear-button) {
@@ -815,8 +816,8 @@ div.icon-container {
 }
 
 :host(.menu-close-button) ::slotted(svg) {
-  --icon-height: 14px;
-  --icon-width: 14px;
+  --icon-height: 0.875rem;
+  --icon-width: 0.875rem;
 }
 
 :host(.popout-menu-button) .button {
@@ -846,6 +847,6 @@ div.icon-container {
 /** High Contrast **/
 @media (forced-colors: active) {
   .button {
-    border: 2px solid transparent;
+    border: 0.125rem solid transparent;
   }
 }