@ukic/web-components 2.1.0-beta.7 → 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-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-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,7 +687,7 @@ ic-typography.heading-bottom-spacing {
 
   :host,
   .section-container {
-    min-height: 192px;
+    min-height: 12rem;
   }
 
   :host,
@@ -697,12 +697,12 @@ ic-typography.heading-bottom-spacing {
 
   :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;
 }

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

@@ -1,7 +1,6 @@
 ic-input-validation {
-  min-height: 28px;
-  width: var(--input-width, 320px);
-  margin-top: var(--ic-space-xxxs);
+  width: var(--input-width, 20rem);
+  margin-top: var(--ic-space-xs);
   display: flex;
 }
 
@@ -22,8 +21,8 @@ ic-input-validation span.status-icon {
 }
 
 ic-input-validation span.status-icon > svg {
-  height: 20px;
-  width: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
 }
 
 ic-input-validation span.icon-success > svg {

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

@@ -471,18 +471,9 @@ video {
   text-decoration-line: underline;
   text-decoration-thickness: 25%;
   text-underline-offset: 25%;
-}
-
-:host(.link) .ic-link:hover,
-:host(.link) ::slotted(a:hover) {
   outline: none;
 }
 
-:host(.link) .ic-link:focus,
-:host(.link) ::slotted(a:focus) {
-  outline: var(--ic-hc-focus-outline);
-}
-
 :host(.link) .ic-link:active,
 :host(.link) .ic-link:focus:active,
 :host(.link) .ic-link:visited:active,

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import OpenInNew from "./assets/OpenInNew.svg";
 import { getThemeFromContext, inheritAttributes } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
@@ -33,6 +33,14 @@ export class Link {
         break;
     }
   }
+  /**
+   * Sets focus on the link.
+   */
+  async setFocus() {
+    if (this.el.shadowRoot.querySelector("a")) {
+      this.el.shadowRoot.querySelector("a").focus();
+    }
+  }
   componentWillLoad() {
     this.inheritedAttributes = inheritAttributes(this.el, [
       ...IC_INHERITED_ARIA,
@@ -218,6 +226,26 @@ export class Link {
       }
     };
   }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the link.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
   static get listeners() {
     return [{