@ukic/web-components 2.1.0-beta.0 → 2.1.0-beta.2

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

@@ -1 +1 @@
-{"version":3,"file":"ic-hero.js","sourceRoot":"","sources":["../../../src/components/ic-hero/ic-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  /**\n   * The heading of the hero\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Description for the hero\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Optional secondary heading, replaced by slotted right content\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * Optional secondary subheading, replaced by slotted right content\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * Optional background image\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Whether the background image (if set) scrolls using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The alignment of the hero content\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The alignment of the hero content\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * Alter styling for use with small content/pages\n   */\n  @Prop() small: boolean = false;\n\n  @State() rightContent: boolean = false;\n\n  @State() scrollFactor: string = \"right -100px\";\n\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  render() {\n    const {\n      aligned,\n      small,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (backgroundImage !== undefined) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={small ? \"h2\" : \"h1\"}\n                  class={{ [\"heading-bottom-spacing\"]: !small }}\n                >\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(secondaryHeading !== undefined || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-hero.js","sourceRoot":"","sources":["../../../src/components/ic-hero/ic-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  /**\n   * The heading of the hero.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The description for the hero.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The optional secondary heading, replaced by slotted right content.\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * The optional secondary subheading, replaced by slotted right content.\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * The optional background image.\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * If `true`, the background image (if set) will not scroll using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The alignment of the hero.\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The alignment of the hero content.\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * If `true`, the small styling will be applied to the hero.\n   */\n  @Prop() small: boolean = false;\n\n  @State() rightContent: boolean = false;\n\n  @State() scrollFactor: string = \"right -100px\";\n\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  render() {\n    const {\n      aligned,\n      small,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (backgroundImage !== undefined) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={small ? \"h2\" : \"h1\"}\n                  class={{ [\"heading-bottom-spacing\"]: !small }}\n                >\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(secondaryHeading !== undefined || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -14,6 +14,7 @@ ic-input-component-container {
   box-sizing: border-box;
   position: relative;
   fill: var(--ic-architectural-400);
+  outline: none;
 }
 
 ic-input-component-container.fullwidth {
@@ -118,7 +119,20 @@ ic-input-component-container:hover {
   box-shadow: var(--ic-border-focus);
 }
 
-.focus-indicator:focus-within input,
-.focus-indicator:focus-within textarea {
-  outline: var(--ic-hc-focus-outline);
-}
+@media (forced-colors: active) {
+  /* Styles here only apply to Forced Colors Mode */
+  ic-input-component-container,
+  .focus-indicator {
+    transition: none;
+  }
+
+  ic-input-component-container:focus-within {
+    border: 1px solid Highlight;
+    outline: 2px solid Highlight;
+  }
+
+  ic-input-component-container.disabled,
+  ic-input-component-container.disabled:hover {
+    border: 1px dashed GrayText;
+  }
+}

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

@@ -64,7 +64,7 @@ export class InputComponentContainer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "disabled"
+          "text": "If `true`, the disabled state will be set."
         },
         "attribute": "disabled",
         "reflect": false,
@@ -82,7 +82,7 @@ export class InputComponentContainer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "readonly"
+          "text": "If `true`, the readonly state will be set."
         },
         "attribute": "readonly",
         "reflect": false,
@@ -105,7 +105,7 @@ export class InputComponentContainer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "validationStatus"
+          "text": "The validation status of the input component container - e.g. 'error' | 'warning' | 'success'."
         },
         "attribute": "validation-status",
         "reflect": false,
@@ -123,7 +123,7 @@ export class InputComponentContainer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "small"
+          "text": "If `true`, the small styling will be applied to the input component container."
         },
         "attribute": "small",
         "reflect": false,
@@ -141,7 +141,7 @@ export class InputComponentContainer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "multiLine"
+          "text": "If `true`, the input component container will allow for multiple lines."
         },
         "attribute": "multi-line",
         "reflect": false,
@@ -159,7 +159,7 @@ export class InputComponentContainer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "validationInline"
+          "text": "If `true`, the validation will display inline."
         },
         "attribute": "validation-inline",
         "reflect": false,
@@ -177,7 +177,7 @@ export class InputComponentContainer {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determines whether the dark variant of the input-component-container focus indicator should be displayed."
+          "text": "If `true`, the dark variant of the input component container will be displayed."
         },
         "attribute": "dark",
         "reflect": false,
@@ -195,7 +195,7 @@ export class InputComponentContainer {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If true then fill width of container"
+          "text": "If `true`, the input component container will fill the width of the container it is in."
         },
         "attribute": "full-width",
         "reflect": false,

package/dist/collection/components/ic-input-component-container/ic-input-component-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-input-component-container.js","sourceRoot":"","sources":["../../../src/components/ic-input-component-container/ic-input-component-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EACL,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;GAEG;AAKH,MAAM,OAAO,uBAAuB;;oBAIN,KAAK;oBAIL,KAAK;4BAIsB,EAAE;iBAIhC,KAAK;qBAID,KAAK;4BAIE,KAAK;gBAKhB,KAAK;qBAKD,KAAK;;EAIlC,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,EACJ,gBAAgB,GACjB,GAAG,IAAI,CAAC;IACT,MAAM,mBAAmB,GACvB,IAAI,CAAC,gBAAgB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;MAC9D,CAAC,CAAC,IAAI;MACN,CAAC,CAAC,KAAK,CAAC;IACZ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,EAAE,KAAK;QAChB,CAAC,gBAAgB,CAAC,EAAE,mBAAmB;QACvC,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,WAAW,CAAC,EAAE,SAAS;QACxB,CAAC,WAAW,CAAC,EAAE,SAAS;QACxB,CAAC,MAAM,CAAC,EAAE,IAAI;OACf;MAED,WACE,KAAK,EAAE;UACL,iBAAiB,EAAE,IAAI;UACvB,IAAI,EAAE,IAAI;SACX;QAEA,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CACrC,WACE,KAAK,EAAE;YACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;WACzB;UAED,YAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP;QACD,eAAa;QAEZ,gBAAgB;UACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,IAAI,CAClD,YACE,KAAK,EAAE;YACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;WACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,CACC,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot left-icon - Content will be placed to the left of the input.\n */\n@Component({\n  tag: \"ic-input-component-container\",\n  styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n  /**\n   * disabled\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * readonly\n   */\n  @Prop() readonly: boolean = false;\n  /**\n   * validationStatus\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * small\n   */\n  @Prop() small: boolean = false;\n  /**\n   * multiLine\n   */\n  @Prop() multiLine: boolean = false;\n  /**\n   * validationInline\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   * Determines whether the dark variant of the input-component-container focus indicator should be displayed.\n   */\n  @Prop() dark?: boolean = false;\n\n  /**\n   *  If true then fill width of container\n   */\n  @Prop() fullWidth: boolean = false;\n\n  @Element() host: HTMLIcInputComponentContainerElement;\n\n  render() {\n    const {\n      small,\n      validationStatus,\n      disabled,\n      readonly,\n      multiLine,\n      fullWidth,\n      dark,\n      validationInline,\n    } = this;\n    const hasValidationStatus =\n      this.validationStatus !== \"\" && !this.disabled && !this.readonly\n        ? true\n        : false;\n    return (\n      <Host\n        class={{\n          [\"small\"]: small,\n          [validationStatus]: hasValidationStatus,\n          [\"disabled\"]: disabled,\n          [\"readonly\"]: readonly,\n          [\"multiline\"]: multiLine,\n          [\"fullwidth\"]: fullWidth,\n          [\"dark\"]: dark,\n        }}\n      >\n        <div\n          class={{\n            \"focus-indicator\": true,\n            dark: dark,\n          }}\n        >\n          {isSlotUsed(this.host, \"left-icon\") && (\n            <div\n              class={{\n                [\"icon-container\"]: true,\n              }}\n            >\n              <slot name=\"left-icon\" />\n            </div>\n          )}\n          <slot></slot>\n\n          {validationInline &&\n            validationStatus === IcInformationStatus.Success && (\n              <span\n                class={{\n                  [\"inline-success\"]: true,\n                }}\n                innerHTML={successIcon}\n              />\n            )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-input-component-container.js","sourceRoot":"","sources":["../../../src/components/ic-input-component-container/ic-input-component-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EACL,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;GAEG;AAKH,MAAM,OAAO,uBAAuB;;oBAIN,KAAK;oBAIL,KAAK;4BAIsB,EAAE;iBAIhC,KAAK;qBAID,KAAK;4BAIE,KAAK;gBAKhB,KAAK;qBAKD,KAAK;;EAIlC,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,EACJ,gBAAgB,GACjB,GAAG,IAAI,CAAC;IACT,MAAM,mBAAmB,GACvB,IAAI,CAAC,gBAAgB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;MAC9D,CAAC,CAAC,IAAI;MACN,CAAC,CAAC,KAAK,CAAC;IACZ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,EAAE,KAAK;QAChB,CAAC,gBAAgB,CAAC,EAAE,mBAAmB;QACvC,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,WAAW,CAAC,EAAE,SAAS;QACxB,CAAC,WAAW,CAAC,EAAE,SAAS;QACxB,CAAC,MAAM,CAAC,EAAE,IAAI;OACf;MAED,WACE,KAAK,EAAE;UACL,iBAAiB,EAAE,IAAI;UACvB,IAAI,EAAE,IAAI;SACX;QAEA,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CACrC,WACE,KAAK,EAAE;YACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;WACzB;UAED,YAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP;QACD,eAAa;QAEZ,gBAAgB;UACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,IAAI,CAClD,YACE,KAAK,EAAE;YACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;WACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,CACC,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot left-icon - Content will be placed to the left of the input.\n */\n@Component({\n  tag: \"ic-input-component-container\",\n  styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n  /**\n   *  If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   *  If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n  /**\n   * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   *  If `true`, the small styling will be applied to the input component container.\n   */\n  @Prop() small: boolean = false;\n  /**\n   *  If `true`, the input component container will allow for multiple lines.\n   */\n  @Prop() multiLine: boolean = false;\n  /**\n   *  If `true`, the validation will display inline.\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   *  If `true`, the dark variant of the input component container will be displayed.\n   */\n  @Prop() dark?: boolean = false;\n\n  /**\n   *  If `true`, the input component container will fill the width of the container it is in.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  @Element() host: HTMLIcInputComponentContainerElement;\n\n  render() {\n    const {\n      small,\n      validationStatus,\n      disabled,\n      readonly,\n      multiLine,\n      fullWidth,\n      dark,\n      validationInline,\n    } = this;\n    const hasValidationStatus =\n      this.validationStatus !== \"\" && !this.disabled && !this.readonly\n        ? true\n        : false;\n    return (\n      <Host\n        class={{\n          [\"small\"]: small,\n          [validationStatus]: hasValidationStatus,\n          [\"disabled\"]: disabled,\n          [\"readonly\"]: readonly,\n          [\"multiline\"]: multiLine,\n          [\"fullwidth\"]: fullWidth,\n          [\"dark\"]: dark,\n        }}\n      >\n        <div\n          class={{\n            \"focus-indicator\": true,\n            dark: dark,\n          }}\n        >\n          {isSlotUsed(this.host, \"left-icon\") && (\n            <div\n              class={{\n                [\"icon-container\"]: true,\n              }}\n            >\n              <slot name=\"left-icon\" />\n            </div>\n          )}\n          <slot></slot>\n\n          {validationInline &&\n            validationStatus === IcInformationStatus.Success && (\n              <span\n                class={{\n                  [\"inline-success\"]: true,\n                }}\n                innerHTML={successIcon}\n              />\n            )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -36,7 +36,7 @@ export class InputContainer {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "disabled"
+          "text": "If `true`, the disabled state will be set."
         },
         "attribute": "disabled",
         "reflect": false,
@@ -54,7 +54,7 @@ export class InputContainer {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "readonly"
+          "text": "If `true`, the readonly state will be set."
         },
         "attribute": "readonly",
         "reflect": false,

package/dist/collection/components/ic-input-container/ic-input-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-input-container.js","sourceRoot":"","sources":["../../../src/components/ic-input-container/ic-input-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,cAAc;;oBAII,KAAK;oBAKL,KAAK;;EAElC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,CAAC,qBAAqB,CAAC,EAAE,IAAI;UAC7B,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,QAAQ;UAC3B,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,QAAQ;SAC5B;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-input-container\",\n  styleUrl: \"ic-input-container.css\",\n})\nexport class InputContainer {\n  /**\n   * disabled\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * readonly\n   */\n  @Prop() readonly?: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            [\"component-container\"]: true,\n            [\"disabled\"]: this.disabled,\n            [\"readonly\"]: this.readonly,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-input-container.js","sourceRoot":"","sources":["../../../src/components/ic-input-container/ic-input-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,cAAc;;oBAII,KAAK;oBAKL,KAAK;;EAElC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,CAAC,qBAAqB,CAAC,EAAE,IAAI;UAC7B,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,QAAQ;UAC3B,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,QAAQ;SAC5B;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-input-container\",\n  styleUrl: \"ic-input-container.css\",\n})\nexport class InputContainer {\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly?: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            [\"component-container\"]: true,\n            [\"disabled\"]: this.disabled,\n            [\"readonly\"]: this.readonly,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-input-label/ic-input-label.js

@@ -58,7 +58,7 @@ export class InputLabel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "for"
+          "text": "The ID of the form element the label is bound to."
         },
         "attribute": "for",
         "reflect": false
@@ -75,7 +75,7 @@ export class InputLabel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "required"
+          "text": "If `true`, the input label will require a value."
         },
         "attribute": "required",
         "reflect": false,
@@ -93,7 +93,7 @@ export class InputLabel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "helperText"
+          "text": "The helper text that will be displayed."
         },
         "attribute": "helper-text",
         "reflect": false,
@@ -111,7 +111,7 @@ export class InputLabel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "label"
+          "text": "The text content of the label."
         },
         "attribute": "label",
         "reflect": false
@@ -128,7 +128,7 @@ export class InputLabel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "disabled"
+          "text": "If `true`, the disabled state will be set."
         },
         "attribute": "disabled",
         "reflect": false,
@@ -146,7 +146,7 @@ export class InputLabel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "readonly"
+          "text": "If `true`, the readonly state will be set."
         },
         "attribute": "readonly",
         "reflect": false,
@@ -164,7 +164,7 @@ export class InputLabel {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "error"
+          "text": "If `true`, the input label will display with error styling."
         },
         "attribute": "error",
         "reflect": false,
@@ -182,7 +182,7 @@ export class InputLabel {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "dark"
+          "text": "If `true`, the dark variant of the input label will be displayed."
         },
         "attribute": "dark",
         "reflect": false,

package/dist/collection/components/ic-input-label/ic-input-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-input-label.js","sourceRoot":"","sources":["../../../src/components/ic-input-label/ic-input-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAM7B,MAAM,OAAO,UAAU;;;oBAQO,KAAK;sBAIJ,EAAE;;oBAQH,KAAK;oBAIL,KAAK;iBAIP,KAAK;gBAIN,KAAK;;EAE9B,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,aAAa,CACd,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,GACpE,IAAI,CAAC;IACP,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAClD,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAC9B,GAAG,SAAS,EAAE,CACf,CAAC,CAAC,CAAC,CACF,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,IAAG,SAAS,CAAS,CAC9C,CAAC;IAEF,MAAM,EAAE,GAAG,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE1C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,aAAa,CAAC,EAAE,UAAU,KAAK,EAAE;OACnC;MAED,qBACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;UACL,CAAC,gBAAgB,CAAC,EAAE,QAAQ;UAC5B,CAAC,aAAa,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;UACjD,CAAC,MAAM,CAAC,EAAE,IAAI;SACf,IAEA,YAAY,CACC;MAEf,UAAU,KAAK,EAAE,IAAI,CACpB,qBACE,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE;UACL,CAAC,YAAY,CAAC,EAAE,IAAI;UACpB,CAAC,mBAAmB,CAAC,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;UAC7C,CAAC,qBAAqB,CAAC,EAAE,QAAQ;SAClC;QAED,YAAM,EAAE,EAAE,EAAE,IAAG,UAAU,CAAQ,CACnB,CACjB,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  /**\n   * for\n   */\n  @Prop() for: string;\n  /**\n   * required\n   */\n  @Prop() required: boolean = false;\n  /**\n   * helperText\n   */\n  @Prop() helperText: string = \"\";\n  /**\n   * label\n   */\n  @Prop() label!: string;\n  /**\n   * disabled\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * readonly\n   */\n  @Prop() readonly: boolean = false;\n  /**\n   * error\n   */\n  @Prop() error?: boolean = false;\n  /**\n   * dark\n   */\n  @Prop() dark?: boolean = false;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  render() {\n    const { disabled, readonly, label, required, helperText, error, dark } =\n      this;\n    const labelText = required ? label + \" *\" : label;\n    const labelContent = readonly ? (\n      `${labelText}`\n    ) : (\n      <label htmlFor={this.for}>{labelText}</label>\n    );\n\n    const id = getInputHelperTextID(this.for);\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: disabled,\n          [\"readonly\"]: readonly,\n          [\"with-helper\"]: helperText !== \"\",\n        }}\n      >\n        <ic-typography\n          variant=\"label\"\n          class={{\n            [\"readonly-label\"]: readonly,\n            [\"error-label\"]: error && !(readonly || disabled),\n            [\"dark\"]: dark,\n          }}\n        >\n          {labelContent}\n        </ic-typography>\n\n        {helperText !== \"\" && (\n          <ic-typography\n            variant=\"caption\"\n            class={{\n              [\"helpertext\"]: true,\n              [\"helpertext-normal\"]: !disabled && !readonly,\n              [\"helpertext-readonly\"]: readonly,\n            }}\n          >\n            <span id={id}>{helperText}</span>\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-input-label.js","sourceRoot":"","sources":["../../../src/components/ic-input-label/ic-input-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAM7B,MAAM,OAAO,UAAU;;;oBAQO,KAAK;sBAIJ,EAAE;;oBAQH,KAAK;oBAIL,KAAK;iBAIP,KAAK;gBAIN,KAAK;;EAE9B,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,aAAa,CACd,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,GACpE,IAAI,CAAC;IACP,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAClD,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAC9B,GAAG,SAAS,EAAE,CACf,CAAC,CAAC,CAAC,CACF,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,IAAG,SAAS,CAAS,CAC9C,CAAC;IAEF,MAAM,EAAE,GAAG,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE1C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,UAAU,CAAC,EAAE,QAAQ;QACtB,CAAC,aAAa,CAAC,EAAE,UAAU,KAAK,EAAE;OACnC;MAED,qBACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;UACL,CAAC,gBAAgB,CAAC,EAAE,QAAQ;UAC5B,CAAC,aAAa,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;UACjD,CAAC,MAAM,CAAC,EAAE,IAAI;SACf,IAEA,YAAY,CACC;MAEf,UAAU,KAAK,EAAE,IAAI,CACpB,qBACE,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE;UACL,CAAC,YAAY,CAAC,EAAE,IAAI;UACpB,CAAC,mBAAmB,CAAC,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;UAC7C,CAAC,qBAAqB,CAAC,EAAE,QAAQ;SAClC;QAED,YAAM,EAAE,EAAE,EAAE,IAAG,UAAU,CAAQ,CACnB,CACjB,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for: string;\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n  /**\n   * If `true`, the input label will display with error styling.\n   */\n  @Prop() error?: boolean = false;\n  /**\n   * If `true`, the dark variant of the input label will be displayed.\n   */\n  @Prop() dark?: boolean = false;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  render() {\n    const { disabled, readonly, label, required, helperText, error, dark } =\n      this;\n    const labelText = required ? label + \" *\" : label;\n    const labelContent = readonly ? (\n      `${labelText}`\n    ) : (\n      <label htmlFor={this.for}>{labelText}</label>\n    );\n\n    const id = getInputHelperTextID(this.for);\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: disabled,\n          [\"readonly\"]: readonly,\n          [\"with-helper\"]: helperText !== \"\",\n        }}\n      >\n        <ic-typography\n          variant=\"label\"\n          class={{\n            [\"readonly-label\"]: readonly,\n            [\"error-label\"]: error && !(readonly || disabled),\n            [\"dark\"]: dark,\n          }}\n        >\n          {labelContent}\n        </ic-typography>\n\n        {helperText !== \"\" && (\n          <ic-typography\n            variant=\"caption\"\n            class={{\n              [\"helpertext\"]: true,\n              [\"helpertext-normal\"]: !disabled && !readonly,\n              [\"helpertext-readonly\"]: readonly,\n            }}\n          >\n            <span id={id}>{helperText}</span>\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -59,7 +59,7 @@ export class InputValidation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The validation message to display"
+          "text": "The validation message to display."
         },
         "attribute": "message",
         "reflect": false
@@ -76,7 +76,7 @@ export class InputValidation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The id of the input field the message relates to"
+          "text": "The ID of the form element the validation is bound to."
         },
         "attribute": "for",
         "reflect": false
@@ -98,7 +98,7 @@ export class InputValidation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The status"
+          "text": "The status of the validation - e.g. 'error' | 'warning' | 'success'."
         },
         "attribute": "status",
         "reflect": false,
@@ -116,7 +116,7 @@ export class InputValidation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If true then fill width of container"
+          "text": "If `true`, the input validation will fill the width of the container."
         },
         "attribute": "full-width",
         "reflect": false,
@@ -139,7 +139,7 @@ export class InputValidation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "aria live mode to apply to message"
+          "text": "The ARIA live mode to apply to the message."
         },
         "attribute": "aria-live-mode",
         "reflect": false,

package/dist/collection/components/ic-input-validation/ic-input-validation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-input-validation.js","sourceRoot":"","sources":["../../../src/components/ic-input-validation/ic-input-validation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EACL,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD,OAAO,EACL,wBAAwB,EACxB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAG7B,MAAM,IAAI,GAAG;EACX,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;EAC1C,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,SAAS;EACtC,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;CAC3C,CAAC;AAEF;;GAEG;AAKH,MAAM,OAAO,eAAe;;;;kBAcmB,EAAE;qBAIlB,KAAK;wBAIa,QAAQ;;EAEvD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,MAAM,EAAE,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE;QACjC,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,SAAS;OAC9B;MAEA,WAAW,KAAK,EAAE,IAAI,CACrB,YACE,KAAK,EAAE;UACL,CAAC,aAAa,CAAC,EAAE,IAAI;UACrB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;SAC9B,EACD,SAAS,EAAE,WAAW,GACtB,CACH;MAED,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY;QACjD,yBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,IACvC,IAAI,CAAC,OAAO,CACR,CACO;MAEhB,YAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   * The validation message to display\n   */\n  @Prop() message!: string;\n  /**\n   * The id of the input field the message relates to\n   */\n  @Prop() for: string;\n  /**\n   * The status\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n  /**\n   *  If true then fill width of container\n   */\n  @Prop() fullWidth: boolean = false;\n  /**\n   *  aria live mode to apply to message\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n  }\n\n  render() {\n    const displayIcon = this.status !== \"\" ? icon[this.status] : \"\";\n    const id = getInputValidationTextID(this.for);\n    return (\n      <Host\n        class={{\n          [this.status]: this.status !== \"\",\n          [\"fullwidth\"]: this.fullWidth,\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              [\"status-icon\"]: true,\n              [`icon-${this.status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span aria-live={this.ariaLiveMode} id={id}>\n            {this.message}\n          </span>\n        </ic-typography>\n\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-input-validation.js","sourceRoot":"","sources":["../../../src/components/ic-input-validation/ic-input-validation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EACL,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD,OAAO,EACL,wBAAwB,EACxB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAG7B,MAAM,IAAI,GAAG;EACX,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;EAC1C,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,SAAS;EACtC,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;CAC3C,CAAC;AAEF;;GAEG;AAKH,MAAM,OAAO,eAAe;;;;kBAcmB,EAAE;qBAIlB,KAAK;wBAIa,QAAQ;;EAEvD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,MAAM,EAAE,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE;QACjC,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,SAAS;OAC9B;MAEA,WAAW,KAAK,EAAE,IAAI,CACrB,YACE,KAAK,EAAE;UACL,CAAC,aAAa,CAAC,EAAE,IAAI;UACrB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;SAC9B,EACD,SAAS,EAAE,WAAW,GACtB,CACH;MAED,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY;QACjD,yBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,IACvC,IAAI,CAAC,OAAO,CACR,CACO;MAEhB,YAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   * The validation message to display.\n   */\n  @Prop() message!: string;\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for: string;\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n  }\n\n  render() {\n    const displayIcon = this.status !== \"\" ? icon[this.status] : \"\";\n    const id = getInputValidationTextID(this.for);\n    return (\n      <Host\n        class={{\n          [this.status]: this.status !== \"\",\n          [\"fullwidth\"]: this.fullWidth,\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              [\"status-icon\"]: true,\n              [`icon-${this.status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span aria-live={this.ariaLiveMode} id={id}>\n            {this.message}\n          </span>\n        </ic-typography>\n\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -4,7 +4,7 @@ import { getThemeFromContext, inheritAttributes } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 /**
- * @slot router-item - Handle routing by nesting your routes in this slot
+ * @slot router-item - Handle routing by nesting your routes in this slot.
  */
 export class Link {
   constructor() {
@@ -82,7 +82,7 @@ export class Link {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Prompts the user to save the linked URL instead of navigating to it."
+          "text": "If `true`, the user can save the linked URL instead of navigating to it."
         },
         "attribute": "download",
         "reflect": false,
@@ -118,7 +118,7 @@ export class Link {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Hints at the human language of the linked URL."
+          "text": "The human language of the linked URL."
         },
         "attribute": "hreflang",
         "reflect": false
@@ -173,7 +173,7 @@ export class Link {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
         },
         "attribute": "target",
         "reflect": false
@@ -190,7 +190,7 @@ export class Link {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determines whether the 'open in new tab/window' icon is to be displayed."
+          "text": "If `true`, the 'open in new tab/window' icon will be displayed."
         },
         "attribute": "show-icon",
         "reflect": false
@@ -212,7 +212,7 @@ export class Link {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determines the whether the appearance is dark, light, or the default."
+          "text": "The appearance of the link, e.g. dark, light, or default."
         },
         "attribute": "appearance",
         "reflect": false,

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

@@ -1 +1 @@
-{"version":3,"file":"ic-link.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAGL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B;;GAEG;AAOH,MAAM,OAAO,IAAI;;IACP,wBAAmB,GAA6B,EAAE,CAAC;oBAQrB,KAAK;gBAKnB,IAAI;;;;;;sBA8B8B,SAAS;;EAGnE,kBAAkB,CAAC,EAAe;IAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;EAC/B,CAAC;EAEO,WAAW,CAAC,WAA8B,IAAI;IACpD,MAAM,KAAK,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,IAAI,IAAI,CAAC,CAAC;IAE7D,QAAQ,KAAK,EAAE;MACb,KAAK,qBAAqB,CAAC,KAAK;QAC9B,IAAI,CAAC,UAAU,GAAG,qBAAqB,CAAC,KAAK,CAAC;QAC9C,MAAM;MACR,KAAK,qBAAqB,CAAC,IAAI;QAC7B,IAAI,CAAC,UAAU,GAAG,qBAAqB,CAAC,IAAI,CAAC;QAC7C,MAAM;KACT;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE;MACpD,GAAG,iBAAiB;MACpB,eAAe;KAChB,CAAC,CAAC;EACL,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAEO,aAAa;IACnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAChE,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC;KACzD;IACD,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;EAC3B,CAAC;EAED,MAAM;IACJ,MAAM,EACJ,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,GAAG,EACH,MAAM,EACN,QAAQ,EACR,UAAU,GACX,GAAG,IAAI,CAAC;IAET,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,IAAI,EAAE,IACrD,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CACtB,YAAM,IAAI,EAAC,aAAa,GAAQ,CACjC,CAAC,CAAC,CAAC,CACF,uBACE,KAAK,EAAE;QACL,CAAC,SAAS,CAAC,EAAE,IAAI,KAAK,IAAI;QAC1B,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,IAAI,KAAK,IAAI;OACjC,EACD,QAAQ,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAC9C,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,IAChC,IAAI,CAAC,mBAAmB;MAE5B,eAAQ;MACP,QAAQ,IAAI,CACX,YAAM,KAAK,EAAC,0BAA0B,EAAC,SAAS,EAAE,SAAS,GAAI,CAChE,CACC,CACL,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Prop, h, Host, Listen } from \"@stencil/core\";\n\nimport OpenInNew from \"./assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: true,\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private routerSlot: HTMLElement;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * Hints at the human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Determines whether the 'open in new tab/window' icon is to be displayed.\n   */\n  @Prop() showIcon?: boolean;\n\n  /**\n   * Determines the whether the appearance is dark, light, or the default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme || null);\n\n    switch (theme) {\n      case IcThemeForegroundEnum.Light:\n        this.appearance = IcThemeForegroundEnum.Light;\n        break;\n      case IcThemeForegroundEnum.Dark:\n        this.appearance = IcThemeForegroundEnum.Dark;\n        break;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n    ]);\n  }\n\n  componentDidLoad(): void {\n    this.updateTheme();\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      showIcon,\n      appearance,\n    } = this;\n\n    return (\n      <Host class={{ [\"link\"]: true, [`${appearance}`]: true }}>\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"ic-link\"]: href !== null,\n              [`${appearance}`]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n          >\n            <slot />\n            {showIcon && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-link.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, Host, Listen } from \"@stencil/core\";\n\nimport OpenInNew from \"./assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: true,\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: unknown } = {};\n  private routerSlot: HTMLElement;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * If `true`, the 'open in new tab/window' icon will be displayed.\n   */\n  @Prop() showIcon?: boolean;\n\n  /**\n   * The appearance of the link, e.g. dark, light, or default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  @Listen(\"icThemeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme || null);\n\n    switch (theme) {\n      case IcThemeForegroundEnum.Light:\n        this.appearance = IcThemeForegroundEnum.Light;\n        break;\n      case IcThemeForegroundEnum.Dark:\n        this.appearance = IcThemeForegroundEnum.Dark;\n        break;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n    ]);\n  }\n\n  componentDidLoad(): void {\n    this.updateTheme();\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      showIcon,\n      appearance,\n    } = this;\n\n    return (\n      <Host class={{ [\"link\"]: true, [`${appearance}`]: true }}>\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"ic-link\"]: href !== null,\n              [`${appearance}`]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n          >\n            <slot />\n            {showIcon && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css

@@ -456,6 +456,12 @@ video {
   --linear-line-height: var(--ic-space-xs);
 }
 
+:host(.light) {
+  --inner-color: var(--ic-architectural-white);
+  --outer-color: var(--ic-architectural-800);
+  --label-color: var(--ic-architectural-white);
+}
+
 .ic-loading-container {
   display: flex;
   flex-direction: column;
@@ -473,7 +479,7 @@ video {
 }
 
 :host([size="large"]) {
-  --circular-diameter: 160px;
+  --circular-diameter: 120px;
 }
 
 :host([size="icon"]) {
@@ -494,11 +500,9 @@ video {
 }
 
 .ic-loading-circular-outer {
-  box-shadow: inset 0 0 0 var(--circular-line-width) var(--outer-color);
   height: var(--circular-diameter);
   width: var(--circular-diameter);
-  border-radius: 50%;
-  position: relative;
+
 }
 
 .ic-loading-circular-outer.indeterminate {
@@ -506,99 +510,6 @@ video {
   animation-iteration-count: infinite;
 }
 
-.ic-loading-circular-inner {
-  height: var(--circular-diameter);
-  width: var(--circular-diameter);
-  border-radius: 50%;
-  position: relative;
-}
-
-.indeterminate > .ic-loading-circular-inner {
-  box-shadow: inset 0 0 0 var(--circular-line-width) var(--inner-color);
-  -webkit-clip-path: inset(0 50% 50% 0);
-          clip-path: inset(0 50% 50% 0);
-}
-
-.determinate > .ic-loading-circular-inner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.determinate > .ic-loading-circular-inner.clip {
-  clip: rect(
-    0,
-    var(--circular-diameter),
-    var(--circular-diameter),
-    calc(var(--circular-diameter) / 2)
-  );
-}
-
-.ic-loading-circular-inner .left,
-.ic-loading-circular-inner .right {
-  height: 100%;
-  width: 100%;
-  border: var(--circular-line-width) solid var(--inner-color);
-  border-radius: 50%;
-  box-sizing: border-box;
-  clip: rect(
-    0,
-    calc(var(--circular-diameter) / 2),
-    var(--circular-diameter),
-    0
-  );
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.indeterminate > .ic-loading-circular-inner .left,
-.indeterminate > .ic-loading-circular-inner .right {
-  display: none;
-}
-
-.determinate > .ic-loading-circular-inner .left {
-  transform: rotate(var(--circular-rotation));
-}
-
-.determinate > .ic-loading-circular-inner .right {
-  transform: rotate(180deg);
-}
-
-.determinate > .ic-loading-circular-inner.clip .right {
-  display: none;
-}
-
-.ic-loading-circular-outer::before {
-  content: "";
-  height: var(--circular-line-width);
-  width: var(--circular-line-width);
-  border-radius: 50%;
-  background-color: var(--inner-color);
-  position: absolute;
-  display: block;
-  top: calc(50% - var(--circular-line-width) / 2);
-}
-
-.ic-loading-circular-outer::after {
-  content: "";
-  height: var(--circular-line-width);
-  width: var(--circular-line-width);
-  border-radius: 50%;
-  background-color: var(--inner-color);
-  position: absolute;
-  display: block;
-  top: 0;
-  left: calc(50% - var(--circular-line-width) / 2);
-}
-
-.ic-loading-circular-outer.determinate::before,
-.ic-loading-circular-outer.determinate::after {
-  display: none;
-}
-
 @keyframes circular-animation {
   100% {
     transform: rotate(360deg);
@@ -665,8 +576,52 @@ video {
   }
 }
 
-:host(.light) {
-  --inner-color: var(--ic-architectural-white);
-  --outer-color: var(--ic-architectural-800);
-  --label-color: var(--ic-architectural-white);
+.ic-loading-circular-svg {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.ic-loading-circular-svg circle {
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke: var(--outer-color);
+  stroke-width: var(--circular-line-width);
+  stroke-linecap: round;
+}
+
+/* --stroke-dash-array calculated via dashArray method */
+.ic-loading-circular-svg circle:nth-child(2) {
+  --circular-indeterminate: calc(
+    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)
+  );
+
+  stroke-dasharray: var(--stroke-dasharray), var(--stroke-dasharray);
+  stroke-dashoffset: var(--stroke-dashoffset, var(--circular-indeterminate));
+  stroke: var(--inner-color);
+}
+
+/** High Contrast **/
+@media (forced-colors: active) {
+  .indeterminate > .ic-loading-circular-inner {
+    forced-color-adjust: none;
+  }
+
+  .ic-loading-linear-outer {
+    border: var(--ic-hc-border);
+  }
+
+  .ic-loading-linear-inner {
+    background-color: canvastext;
+  }
+
+  .ic-loading-circular-svg circle {
+    stroke: Background;
+  }
+
+  .ic-loading-circular-svg circle:nth-child(2) {
+    stroke: canvastext;
+  }
 }