@ukic/web-components 2.1.0-beta.6 → 2.1.0-beta.8

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

@@ -448,8 +448,8 @@ video {
 .chip {
   display: flex;
   padding: var(--ic-space-xxs);
-  font-size: 14px;
-  border-radius: 80px;
+  font-size: 0.875rem;
+  border-radius: 5rem;
   text-align: center;
   align-items: center;
   text-decoration: none;
@@ -499,16 +499,16 @@ ic-tooltip:focus-within {
 
 .outline {
   color: var(--ic-architectural-900);
-  border: 1px solid var(--ic-architectural-900);
-  padding: calc(var(--ic-space-xxs) - 1px);
+  border: 0.063rem solid var(--ic-architectural-900);
+  padding: calc(var(--ic-space-xxs) - 0.063rem);
 }
 
 .outline.small {
-  padding: calc(var(--ic-space-xxxs) - 1px);
+  padding: calc(var(--ic-space-xxxs) - 0.063rem);
 }
 
 .outline.large {
-  padding: calc(var(--ic-space-xs) - 1px);
+  padding: calc(var(--ic-space-xs) - 0.063rem);
 }
 
 .outline.disabled {
@@ -527,7 +527,8 @@ ic-tooltip:focus-within {
   background: none;
   cursor: pointer;
   margin: var(--ic-space-xxxs);
-  height: 20px;
+  height: calc(var(--ic-space-lg) - var(--ic-space-xxs));
+  width: calc(var(--ic-space-lg) - var(--ic-space-xxs));
 }
 
 .dismiss-icon:focus {
@@ -561,15 +562,15 @@ ic-tooltip {
   }
 
   .filled.small {
-    padding: calc(var(--ic-space-xxxs) - 1px);
+    padding: calc(var(--ic-space-xxxs) - 0.063rem);
   }
 
   .filled {
-    padding: calc(var(--ic-space-xxxs) + 1px);
+    padding: calc(var(--ic-space-xxxs) + 0.063rem);
   }
 
   .filled.large {
-    padding: calc(var(--ic-space-xs) - 1px);
+    padding: calc(var(--ic-space-xs) - 0.063rem);
   }
 
   .chip.disabled {

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

@@ -27,6 +27,14 @@ export class Chip {
   handleClick() {
     this.visible = !this.visible;
   }
+  /**
+   * Sets focus on the chip.
+   */
+  async setFocus() {
+    if (this.el.shadowRoot.querySelector("button")) {
+      this.el.shadowRoot.querySelector("button").focus();
+    }
+  }
   componentDidLoad() {
     var _a;
     this.dismissible &&
@@ -204,6 +212,26 @@ export class Chip {
         }
       }];
   }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the chip.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
   static get listeners() {
     return [{

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

@@ -1 +1 @@
-{"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance, IcChipSizes } from \"./ic-chip.types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: true,\n})\nexport class Chip {\n  @Element() el: HTMLIcChipElement;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() appearance?: IcChipAppearance = \"filled\";\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcChipSizes = \"default\";\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @State() visible: boolean = true;\n\n  @State() isHovered: boolean = false;\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.isHovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.isHovered = false;\n  };\n\n  componentDidLoad(): void {\n    this.dismissible &&\n      this.el.shadowRoot\n        .querySelector(\"span.ic-tooltip-label\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  render() {\n    const {\n      label,\n      appearance,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      isHovered,\n    } = this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            [\"chip\"]: true,\n            [`${appearance}`]: true,\n            [`${size}`]: true,\n            [\"disabled\"]: disabled,\n            [\"dismissible\"]: dismissible,\n            [\"hovered\"]: isHovered,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            apply-vertical-margins={false}\n            class=\"label\"\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ [\"tooltip-disabled\"]: disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class={{\n                  [\"dismiss-icon\"]: true,\n                }}\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n        </div>\n      )\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance, IcChipSizes } from \"./ic-chip.types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: true,\n})\nexport class Chip {\n  @Element() el: HTMLIcChipElement;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() appearance?: IcChipAppearance = \"filled\";\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcChipSizes = \"default\";\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @State() visible: boolean = true;\n\n  @State() isHovered: boolean = false;\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.isHovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.isHovered = false;\n  };\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.dismissible &&\n      this.el.shadowRoot\n        .querySelector(\"span.ic-tooltip-label\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  render() {\n    const {\n      label,\n      appearance,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      isHovered,\n    } = this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            [\"chip\"]: true,\n            [`${appearance}`]: true,\n            [`${size}`]: true,\n            [\"disabled\"]: disabled,\n            [\"dismissible\"]: dismissible,\n            [\"hovered\"]: isHovered,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            apply-vertical-margins={false}\n            class=\"label\"\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ [\"tooltip-disabled\"]: disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class={{\n                  [\"dismiss-icon\"]: true,\n                }}\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n        </div>\n      )\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-classification-banner/ic-classification-banner.css

@@ -447,7 +447,7 @@ video {
   bottom: 0;
   width: 100%;
   height: var(--ic-space-lg);
-  z-index: var(--ic-z-index-overlay);
+  z-index: var(--ic-z-index-classification-banner);
 }
 
 :host(.inline) {

package/dist/collection/components/ic-data-entity/ic-data-entity.css

@@ -458,7 +458,7 @@ video {
 .divider {
   margin-top: var(--ic-space-lg);
   margin-bottom: var(--ic-space-md);
-  height: 1px;
+  height: 0.063rem;
   background-color: var(--ic-architectural-300);
 }
 

package/dist/collection/components/ic-data-row/ic-data-row.css

@@ -458,8 +458,8 @@ video {
 }
 
 .label {
-  width: 200px;
-  min-width: 200px;
+  width: 12.5rem;
+  min-width: 12.5rem;
   margin-right: var(--ic-space-md);
   color: var(--ic-color-tertiary-text);
 }
@@ -483,12 +483,12 @@ slot[name="value"]::slotted(ic-text-field[readonly][hide-label][rows]) {
 .end-component {
   width: -moz-fit-content;
   width: fit-content;
-  margin-left: 56px;
+  margin-left: 3.5rem;
 }
 
 .divider {
   margin-top: var(--ic-space-md);
-  height: 1px;
+  height: 0.063rem;
   background-color: var(--ic-architectural-300);
 }
 
@@ -497,8 +497,8 @@ slot[name="value"]::slotted(ic-text-field[readonly][hide-label][rows]) {
 }
 
 :host(.breakpoint-medium) .label {
-  width: 160px;
-  min-width: 160px;
+  width: 10rem;
+  min-width: 10rem;
 }
 
 :host(.breakpoint-xs) .text-cells {
@@ -506,7 +506,7 @@ slot[name="value"]::slotted(ic-text-field[readonly][hide-label][rows]) {
 }
 
 :host(.breakpoint-xs) .label {
-  width: 128px;
+  width: 8rem;
   margin-bottom: var(--ic-space-xs);
 }
 

package/dist/collection/components/ic-data-row/ic-data-row.js

@@ -24,14 +24,16 @@ export class DataRow {
   checkLabelAbove() {
     var _a;
     const rowSize = (_a = this.el.shadowRoot.querySelector(".data")) === null || _a === void 0 ? void 0 : _a.clientWidth;
-    if (rowSize + 46 < DEVICE_SIZES.S) {
-      this.entitySize = "xs";
-    }
-    else if (rowSize + 46 < DEVICE_SIZES.M) {
-      this.entitySize = "m";
-    }
-    else {
-      this.entitySize = "xl";
+    if (rowSize) {
+      if (rowSize + 46 < DEVICE_SIZES.S) {
+        this.entitySize = "xs";
+      }
+      else if (rowSize + 46 < DEVICE_SIZES.M) {
+        this.entitySize = "m";
+      }
+      else {
+        this.entitySize = "xl";
+      }
     }
   }
   labelEndComponent() {
@@ -41,10 +43,10 @@ export class DataRow {
   componentWillLoad() {
     this.deviceSize = getCurrentDeviceSize();
     this.hasEndComponent = slotHasContent(this.el, "end-component");
+    this.checkLabelAbove();
   }
   componentDidLoad() {
     checkResizeObserver(this.runResizeObserver);
-    this.checkLabelAbove();
     if (this.hasEndComponent) {
       this.labelEndComponent();
     }

package/dist/collection/components/ic-data-row/ic-data-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-row.js","sourceRoot":"","sources":["../../../src/components/ic-data-row/ic-data-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  @Element() el: HTMLIcDataRowElement;\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label: string;\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value: string;\n\n  /**\n   * If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.\n   */\n  @Prop() small: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() entitySize: \"xl\" | \"m\" | \"xs\";\n\n  private resizeObserver: ResizeObserver = null;\n\n  private hasEndComponent: boolean = false;\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n    if (rowSize + 46 < DEVICE_SIZES.S) {\n      this.entitySize = \"xs\";\n    } else if (rowSize + 46 < DEVICE_SIZES.M) {\n      this.entitySize = \"m\";\n    } else {\n      this.entitySize = \"xl\";\n    }\n  }\n\n  private labelEndComponent(): void {\n    const component = this.el.shadowRoot.querySelectorAll(\n      \"slot[name=end-component]\"\n    );\n\n    component.forEach((child: HTMLElement) =>\n      child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n    );\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    this.checkLabelAbove();\n    if (this.hasEndComponent) {\n      this.labelEndComponent();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const { label, value, small } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small,\n          [\"breakpoint-medium\"]: this.entitySize === \"m\",\n          [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography\n                  variant={\n                    this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"\n                  }\n                >\n                  {label}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">{value}</ic-typography>\n              </slot>\n            </div>\n          </div>\n          {this.hasEndComponent && (\n            <div class=\"end-component\">\n              <div role=\"cell\">\n                <slot name=\"end-component\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-data-row.js","sourceRoot":"","sources":["../../../src/components/ic-data-row/ic-data-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  @Element() el: HTMLIcDataRowElement;\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label: string;\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value: string;\n\n  /**\n   * If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.\n   */\n  @Prop() small: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() entitySize: \"xl\" | \"m\" | \"xs\";\n\n  private resizeObserver: ResizeObserver = null;\n\n  private hasEndComponent: boolean = false;\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n    if (rowSize) {\n      if (rowSize + 46 < DEVICE_SIZES.S) {\n        this.entitySize = \"xs\";\n      } else if (rowSize + 46 < DEVICE_SIZES.M) {\n        this.entitySize = \"m\";\n      } else {\n        this.entitySize = \"xl\";\n      }\n    }\n  }\n\n  private labelEndComponent(): void {\n    const component = this.el.shadowRoot.querySelectorAll(\n      \"slot[name=end-component]\"\n    );\n\n    component.forEach((child: HTMLElement) =>\n      child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n    );\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n    this.checkLabelAbove();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (this.hasEndComponent) {\n      this.labelEndComponent();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const { label, value, small } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small,\n          [\"breakpoint-medium\"]: this.entitySize === \"m\",\n          [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography\n                  variant={\n                    this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"\n                  }\n                >\n                  {label}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">{value}</ic-typography>\n              </slot>\n            </div>\n          </div>\n          {this.hasEndComponent && (\n            <div class=\"end-component\">\n              <div role=\"cell\">\n                <slot name=\"end-component\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -2,7 +2,7 @@ hr {
   padding: 0;
   margin: 0;
   border: none;
-  height: 1px;
+  height: 0.063rem;
   background-color: var(--ic-keyline-darken-rgb);
 }
 

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

@@ -446,15 +446,15 @@ video {
 }
 
 :host(.footer-sparse) {
-  --footer-links-padding: 24px 0;
-  --footer-compliance-padding: 24px 0 8px 0;
+  --footer-links-padding: 1.5rem 0;
+  --footer-compliance-padding: 1.5rem 0 0.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-compliance-padding: 16px 0 8px;
+  --footer-compliance-padding: 1rem 0 0.5rem;
   --footer-logo-margin-bottom: var(--ic-space-md);
   --footer-link-inner-flex-direction: column;
 }
@@ -491,7 +491,7 @@ footer {
 }
 
 .footer-description-inner {
-  padding: 16px 0;
+  padding: 1rem 0;
 }
 
 /* Links */

package/dist/collection/components/ic-footer-link/ic-footer-link.css

@@ -443,7 +443,7 @@ video {
 
 :host(.footer-link-ungrouped-sparse) {
   --footer-link-margin-left: 0;
-  --footer-link-margin-right: 40px;
+  --footer-link-margin-right: 2.5rem;
   --footer-link-margin-bottom: 0;
 }
 

package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.css

@@ -442,7 +442,7 @@ video {
 
 
 :host(.footer-link-group-sparse) {
-  --footer-link-group-margin-right: 95px;
+  --footer-link-group-margin-right: 5.938rem;
   --footer-link-group-border-bottom: 0 solid transparent;
   --footer-link-group-title-margin-top: 0;
   --footer-link-group-title-margin-bottom: var(--ic-space-md);

package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.test.a11y.js

@@ -13,7 +13,7 @@ beforeEach(() => {
 });
 describe("ic-footer-link-group", () => {
   it("passes accessibility", async () => {
-    const el = await fixture(`<ic-footer-link-group><ic-footer-link></ic-footer-link></ic-footer-link-group>`);
+    const el = await fixture(`<ic-footer-link-group group-title="A11y footer links"><ic-footer-link></ic-footer-link></ic-footer-link-group>`);
     checkShadowElementRendersCorrectly(el);
     expect(await axe(el)).toHaveNoViolations();
   });

package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.test.a11y.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-footer-link-group.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link-group/ic-footer-link-group.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,8BAA8B,CAAC;AAElF,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EACrC,kBAAkB,CAAC,eAAe,CAAC;IACjC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,cAAc,GAAG,kBAAkB,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;EACpC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,gFAAgF,CACjF,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../utils/testa11y.helpers\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockResizeObserver = jest.fn();\n  mockResizeObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.ResizeObserver = mockResizeObserver;\n});\n\ndescribe(\"ic-footer-link-group\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-footer-link-group><ic-footer-link></ic-footer-link></ic-footer-link-group>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}
+{"version":3,"file":"ic-footer-link-group.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link-group/ic-footer-link-group.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,8BAA8B,CAAC;AAElF,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EACrC,kBAAkB,CAAC,eAAe,CAAC;IACjC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,cAAc,GAAG,kBAAkB,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;EACpC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,gHAAgH,CACjH,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../utils/testa11y.helpers\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockResizeObserver = jest.fn();\n  mockResizeObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.ResizeObserver = mockResizeObserver;\n});\n\ndescribe(\"ic-footer-link-group\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-footer-link-group group-title=\"A11y footer links\"><ic-footer-link></ic-footer-link></ic-footer-link-group>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -455,14 +455,14 @@ video {
 
 :host(.has-background-image) {
   background-repeat: no-repeat;
-  background-position: right -100px;
-  background-size: auto calc(100% + 100px);
+  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 -100px !important;
+    background-position: right -6.25rem !important;
   }
 }
 
@@ -530,12 +530,12 @@ ic-typography.heading-bottom-spacing {
 @media (min-width: 1044px) {
   :host,
   .section-container {
-    min-height: 208px;
+    min-height: 13rem;
   }
 
   :host([small]),
   :host([small]) .section-container {
-    min-height: 173px;
+    min-height: 10.813rem;
   }
 
   .left-container:not(.left-container-full-width) {
@@ -543,21 +543,21 @@ ic-typography.heading-bottom-spacing {
   }
 
   .left-container {
-    min-height: 144px;
+    min-height: 9rem;
   }
 
   .right-container {
     flex-basis: 33.3%;
-    margin-left: 50px;
+    margin-left: 3.125rem;
   }
 
   .secondary-container {
-    min-height: 144px;
+    min-height: 9rem;
   }
 
   .secondary-heading,
   .secondary-subheading {
-    margin-left: 63px;
+    margin-left: 3.938rem;
   }
 }
 
@@ -568,34 +568,34 @@ ic-typography.heading-bottom-spacing {
 
   :host,
   .section-container {
-    min-height: 256px;
+    min-height: 16rem;
   }
 
   :host([small]),
   :host([small]) .section-container {
-    min-height: 240px;
+    min-height: 15rem;
   }
 
   :host([secondary-heading]),
   :host([secondary-heading]) .section-container {
-    min-height: 224px;
+    min-height: 14rem;
   }
 
   .left-container {
-    min-height: 160px;
+    min-height: 10rem;
   }
 
   .secondary-container {
-    min-height: 160px;
+    min-height: 10rem;
   }
 
   .secondary-heading,
   .secondary-subheading {
-    margin-left: 94.75px;
+    margin-left: 5.922rem;
   }
 
   .right-container {
-    margin-left: 50px;
+    margin-left: 3.125rem;
   }
 }
 
@@ -606,34 +606,34 @@ ic-typography.heading-bottom-spacing {
 
   :host,
   .section-container {
-    min-height: 256px;
+    min-height: 16rem;
   }
 
   :host([small]),
   :host([small]) .section-container {
-    min-height: 240px;
+    min-height: 15rem;
   }
 
   :host([secondary-heading]),
   :host([secondary-heading]) .section-container {
-    min-height: 224px;
+    min-height: 14rem;
   }
 
   .left-container {
-    min-height: 160px;
+    min-height: 10rem;
   }
 
   .secondary-container {
-    min-height: 160px;
+    min-height: 10rem;
   }
 
   .secondary-heading,
   .secondary-subheading {
-    margin-left: 34px;
+    margin-left: 2.125rem;
   }
 
   .right-container {
-    margin-left: 50px;
+    margin-left: 3.125rem;
   }
 }
 
@@ -644,17 +644,17 @@ ic-typography.heading-bottom-spacing {
 
   :host,
   .section-container {
-    min-height: 208px;
+    min-height: 13rem;
   }
 
   :host([small]),
   :host([small]) .section-container {
-    min-height: 173px;
+    min-height: 10.813rem;
   }
 
   :host([secondary-heading]),
   :host([secondary-heading]) .section-container {
-    min-height: 280px;
+    min-height: 17.5rem;
   }
 
   :host([secondary-heading]) .section-container,
@@ -676,7 +676,7 @@ ic-typography.heading-bottom-spacing {
   }
 
   .right-container {
-    margin-bottom: 40px;
+    margin-bottom: 2.5rem;
   }
 }
 
@@ -687,17 +687,22 @@ ic-typography.heading-bottom-spacing {
 
   :host,
   .section-container {
-    min-height: 192px;
+    min-height: 12rem;
+  }
+
+  :host,
+  .right-container {
+    margin-bottom: var(--ic-space-md);
   }
 
   :host([small]),
   :host([small]) .section-container {
-    min-height: 173px;
+    min-height: 10.813rem;
   }
 
   :host([secondary-heading]),
   :host([secondary-heading]) .section-container {
-    min-height: 264px;
+    min-height: 16.5rem;
   }
 
   :host([secondary-heading]) .section-container,

package/dist/collection/components/ic-input-component-container/ic-input-component-container.css

@@ -4,15 +4,14 @@ ic-input-component-container {
    */
 
   display: flex;
-  border: 1px solid var(--border-color, var(--ic-architectural-400));
+  border: 0.063rem solid var(--border-color, var(--ic-architectural-400));
   border-radius: var(--ic-border-radius);
   transition: var(--ic-easing-transition-slow);
-  height: 40px;
-  width: var(--input-width, 320px);
-  padding: 1px;
+  height: 2.5rem;
+  width: var(--input-width, 20rem);
+  padding: 0.063rem;
   background-color: var(--ic-architectural-white);
   box-sizing: border-box;
-  position: relative;
   fill: var(--ic-architectural-400);
   outline: none;
 }
@@ -23,7 +22,7 @@ ic-input-component-container.fullwidth {
 
 ic-input-component-container.disabled,
 ic-input-component-container.disabled:hover {
-  border: 1px dashed var(--ic-architectural-200);
+  border: 0.063rem dashed var(--ic-architectural-200);
 }
 
 ic-input-component-container.readonly,
@@ -57,19 +56,19 @@ ic-input-component-container.multiline {
 
 ic-input-component-container .icon-container {
   margin-top: var(--ic-space-xxs);
-  margin-left: 7px;
+  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: 6px;
+  margin-top: 0.375rem;
   display: block;
 }
 
 ic-input-component-container.readonly .icon-container {
-  margin-left: -5px;
+  margin-left: -0.313rem;
 }
 
 ic-input-component-container.disabled ::-moz-placeholder {
@@ -81,7 +80,7 @@ ic-input-component-container.disabled ::placeholder {
 }
 
 ic-input-component-container .inline-success {
-  margin: var(--ic-space-xs) 6px;
+  margin: var(--ic-space-xs) 0.375rem;
   display: flex;
   align-items: center;
 }
@@ -92,6 +91,8 @@ ic-input-component-container.dark:hover {
 
 ic-input-component-container .inline-success > svg {
   fill: var(--ic-status-success);
+  height: 1.25rem;
+  width: 1.25rem;
 }
 
 ic-input-component-container:hover {
@@ -102,8 +103,8 @@ ic-input-component-container:hover {
 .focus-indicator {
   display: flex;
   width: 100%;
-  margin: -2px;
-  padding: 2px;
+  margin: -0.125rem;
+  padding: 0.125rem;
   border-radius: var(--ic-border-radius);
   transition: var(--ic-easing-transition-fast);
 }
@@ -125,12 +126,12 @@ ic-input-component-container:hover {
   }
 
   ic-input-component-container:focus-within {
-    border: 1px solid Highlight;
-    outline: 2px solid Highlight;
+    border: 0.063rem solid Highlight;
+    outline: 0.125rem solid Highlight;
   }
 
   ic-input-component-container.disabled,
   ic-input-component-container.disabled:hover {
-    border: 1px dashed GrayText;
+    border: 0.063rem dashed GrayText;
   }
 }

package/dist/collection/components/ic-input-container/ic-input-container.css

@@ -1,5 +1,4 @@
 ic-input-container .component-container {
   display: flex;
   flex-direction: column;
-  position: relative;
 }