@ukic/web-components 2.1.0-beta.10 → 2.1.0-beta.12

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

@@ -1 +1 @@
-{"version":3,"file":"ic-card.js","sourceRoot":"","sources":["../../../src/components/ic-card/ic-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Listen,\n  Prop,\n  State,\n  h,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getThemeFromContext,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n */\n@Component({\n  tag: \"ic-card\",\n  styleUrl: \"ic-card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el: HTMLIcCardElement;\n\n  /**\n   * If `true`, the card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n  /**\n   * The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string | undefined;\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\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   * The heading for the card.\n   */\n  @Prop() heading!: string;\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n  /**\n   * The main body message of the card.\n   */\n  @Prop() message?: string = \"\";\n  /**\n   * If `true`, the card will be disabled if it is clickable.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   *  If `true`, the card will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   *  If `true`, the card will have an expandable area and expansion toggle button.\n   */\n  @Prop() expandable?: boolean = false;\n\n  @State() parentIsAnchorTag: boolean = false;\n\n  @State() isFocussed: boolean = false;\n\n  @State() parentEl: HTMLElement | null = null;\n\n  @State() appearance?: IcThemeForeground = \"default\";\n\n  @State() areaExpanded: boolean = false;\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"a\")) {\n      this.el.shadowRoot.querySelector(\"a\").focus();\n    } else if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.areaExpanded = !this.areaExpanded;\n  };\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Card\"\n    );\n    this.updateTheme();\n  }\n\n  render() {\n    const {\n      clickable,\n      disabled,\n      expandable,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      subheading,\n      target,\n      fullWidth,\n      parentIsAnchorTag,\n      isFocussed,\n    } = this;\n\n    const Component = parentIsAnchorTag\n      ? \"div\"\n      : clickable\n      ? this.href === undefined\n        ? \"button\"\n        : \"a\"\n      : \"div\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Component\n        class={{\n          [\"card\"]: true,\n          [\"clickable\"]: clickable && !disabled,\n          [\"disabled\"]: disabled,\n          [\"fullwidth\"]: fullWidth,\n          [\"focussed\"]: isFocussed,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n        }}\n        tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n        aria-disabled={disabled ? \"true\" : null}\n        disabled={disabled ? true : null}\n        {...attrs}\n      >\n        {isSlotUsed(this.el, \"image-top\") && (\n          <div class=\"image-top\">\n            <slot name=\"image-top\"></slot>\n          </div>\n        )}\n        <div class=\"card-header\">\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <div class=\"card-title\">\n            <slot name=\"heading\">\n              <ic-typography variant=\"h4\">\n                <p>{heading}</p>\n              </ic-typography>\n            </slot>\n          </div>\n          {isSlotUsed(this.el, \"interaction-button\") && (\n            <div class=\"interaction-button\">\n              <slot name=\"interaction-button\"></slot>\n            </div>\n          )}\n        </div>\n        {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n          <div class=\"subheading\">\n            <slot name=\"subheading\">\n              <ic-typography variant=\"subtitle-small\">\n                {subheading}\n              </ic-typography>\n            </slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"adornment\") && (\n          <div class=\"adornment\">\n            <slot name=\"adornment\"></slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"image-mid\") && (\n          <div class=\"image-mid\">\n            <slot name=\"image-mid\"></slot>\n          </div>\n        )}\n        {(message || isSlotUsed(this.el, \"message\")) && (\n          <div\n            class={{\n              [\"card-message\"]: true,\n            }}\n          >\n            <slot name=\"message\">\n              <ic-typography variant=\"body\">{message}</ic-typography>\n            </slot>\n          </div>\n        )}\n        {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n          <div class=\"interaction-controls\">\n            <slot name=\"interaction-controls\"></slot>\n            {expandable && (\n              <ic-button\n                class={{\n                  [\"toggle-button\"]: true,\n                  [\"toggle-button-closed\"]: !this.areaExpanded,\n                  [\"toggle-button-expanded\"]: this.areaExpanded,\n                }}\n                variant=\"icon\"\n                disableTooltip\n                aria-label=\"Toggle expandable area\"\n                aria-expanded={this.areaExpanded}\n                aria-controls=\"expanded-content-area\"\n                onClick={this.toggleExpanded}\n                innerHTML={chevronIcon}\n              ></ic-button>\n            )}\n          </div>\n        )}\n        {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n          <div class=\"expanded-content\" id=\"expanded-content-area\">\n            <slot name=\"expanded-content\"></slot>\n          </div>\n        )}\n      </Component>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-card.js","sourceRoot":"","sources":["../../../src/components/ic-card/ic-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Listen,\n  Prop,\n  State,\n  h,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getThemeFromContext,\n} from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n */\n@Component({\n  tag: \"ic-card\",\n  styleUrl: \"ic-card.css\",\n  shadow: true,\n})\nexport class Card {\n  @Element() el: HTMLIcCardElement;\n\n  /**\n   * If `true`, the card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n  /**\n   * The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string | undefined;\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\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   * The heading for the card.\n   */\n  @Prop() heading!: string;\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n  /**\n   * The main body message of the card.\n   */\n  @Prop() message?: string = \"\";\n  /**\n   * If `true`, the card will be disabled if it is clickable.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   *  If `true`, the card will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n  /**\n   *  If `true`, the card will have an expandable area and expansion toggle button.\n   */\n  @Prop() expandable?: boolean = false;\n\n  @State() parentIsAnchorTag: boolean = false;\n\n  @State() isFocussed: boolean = false;\n\n  @State() parentEl: HTMLElement | null = null;\n\n  @State() appearance?: IcThemeForeground = \"default\";\n\n  @State() areaExpanded: boolean = false;\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"a\")) {\n      this.el.shadowRoot.querySelector(\"a\").focus();\n    } else if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const foregroundColor = getThemeFromContext(this.el, newTheme || null);\n\n    if (foregroundColor !== IcThemeForegroundEnum.Default) {\n      this.appearance = foregroundColor;\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.areaExpanded = !this.areaExpanded;\n  };\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Card\"\n    );\n    this.updateTheme();\n  }\n\n  render() {\n    const {\n      clickable,\n      disabled,\n      expandable,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      subheading,\n      target,\n      fullWidth,\n      parentIsAnchorTag,\n      isFocussed,\n    } = this;\n\n    const Component = parentIsAnchorTag\n      ? \"div\"\n      : clickable\n      ? this.href === undefined\n        ? \"button\"\n        : \"a\"\n      : \"div\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Component\n        class={{\n          [\"card\"]: true,\n          [\"clickable\"]: clickable && !disabled,\n          [\"disabled\"]: disabled,\n          [\"fullwidth\"]: fullWidth,\n          [\"focussed\"]: isFocussed,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n        }}\n        tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n        aria-disabled={disabled ? \"true\" : null}\n        disabled={disabled ? true : null}\n        {...attrs}\n      >\n        {isSlotUsed(this.el, \"image-top\") && (\n          <div class=\"image-top\">\n            <slot name=\"image-top\"></slot>\n          </div>\n        )}\n        <div class=\"card-header\">\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <div class=\"card-title\">\n            <slot name=\"heading\">\n              <ic-typography variant=\"h4\">\n                <p>{heading}</p>\n              </ic-typography>\n            </slot>\n          </div>\n          {isSlotUsed(this.el, \"interaction-button\") && (\n            <div class=\"interaction-button\">\n              <slot name=\"interaction-button\"></slot>\n            </div>\n          )}\n        </div>\n        {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n          <div class=\"subheading\">\n            <slot name=\"subheading\">\n              <ic-typography variant=\"subtitle-small\">\n                {subheading}\n              </ic-typography>\n            </slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"adornment\") && (\n          <div class=\"adornment\">\n            <slot name=\"adornment\"></slot>\n          </div>\n        )}\n        {isSlotUsed(this.el, \"image-mid\") && (\n          <div class=\"image-mid\">\n            <slot name=\"image-mid\"></slot>\n          </div>\n        )}\n        {(message || isSlotUsed(this.el, \"message\")) && (\n          <div\n            class={{\n              [\"card-message\"]: true,\n            }}\n          >\n            <slot name=\"message\">\n              <ic-typography variant=\"body\">{message}</ic-typography>\n            </slot>\n          </div>\n        )}\n        {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n          <div class=\"interaction-area\">\n            <div class=\"interaction-controls\">\n              <slot name=\"interaction-controls\"></slot>\n            </div>\n            {expandable && (\n              <ic-button\n                class={{\n                  [\"toggle-button\"]: true,\n                  [\"toggle-button-closed\"]: !this.areaExpanded,\n                  [\"toggle-button-expanded\"]: this.areaExpanded,\n                }}\n                variant=\"icon\"\n                size=\"large\"\n                disableTooltip\n                aria-label=\"Toggle expandable area\"\n                aria-expanded={this.areaExpanded}\n                aria-controls=\"expanded-content-area\"\n                onClick={this.toggleExpanded}\n                innerHTML={chevronIcon}\n              ></ic-button>\n            )}\n          </div>\n        )}\n        {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n          <div class=\"expanded-content\" id=\"expanded-content-area\">\n            <slot name=\"expanded-content\"></slot>\n          </div>\n        )}\n      </Component>\n    );\n  }\n}\n"]}

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

@@ -441,7 +441,7 @@ video {
 }
 
 
-:host([disabled]) {
+:host(.disabled) {
   color: var(--ic-architectural-200);
   pointer-events: none;
 }
@@ -454,7 +454,7 @@ video {
   margin-bottom: var(--ic-space-xxs);
 }
 
-:host([small]) .container {
+:host(.small) .container {
   margin-bottom: var(--ic-space-xxxs);
 }
 
@@ -469,7 +469,7 @@ video {
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
   background-color: transparent;
-  border: 0.063rem solid var(--ic-architectural-300);
+  border: var(--ic-space-1px) solid var(--ic-architectural-300);
   border-radius: var(--ic-border-radius);
   outline: none;
   cursor: pointer;
@@ -478,7 +478,7 @@ video {
 
 .checkbox:checked {
   background-color: var(--ic-action-default);
-  border: 0.063rem solid var(--ic-action-default);
+  border: var(--ic-space-1px) solid var(--ic-action-default);
   transition: var(--ic-easing-transition-slow);
 }
 
@@ -515,13 +515,13 @@ video {
 .checkbox:hover {
   background-color: var(--ic-action-default-bg-hover);
   box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);
-  border: 0.063rem solid var(--ic-action-default-hover);
+  border: var(--ic-space-1px) solid var(--ic-action-default-hover);
 }
 
 .checkbox:active {
   background-color: var(--ic-action-default-bg-active);
   box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);
-  border: 0.063rem solid var(--ic-action-default-active);
+  border: var(--ic-space-1px) solid var(--ic-action-default-active);
 }
 
 .checkbox:focus {
@@ -529,7 +529,7 @@ video {
 }
 
 .checkbox:disabled {
-  border: 0.063rem dashed var(--ic-architectural-200);
+  border: var(--ic-space-1px) dashed var(--ic-architectural-200);
 }
 
 .checkbox-label {

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

@@ -19,6 +19,7 @@ export class Checkbox {
     this.dynamicText = "This selection requires additional answers";
     this.additionalFieldDisplay = "static";
     this.indeterminate = false;
+    this.small = false;
     this.initiallyChecked = this.checked;
   }
   /**
@@ -67,7 +68,7 @@ export class Checkbox {
     this.checked
       ? renderHiddenInput(true, this.host, this.name, this.checked && this.value, this.disabled)
       : removeHiddenInput(this.host);
-    return (h(Host, null, h("div", { class: { ["container"]: true, ["disabled"]: this.disabled } }, this.checked && !this.indeterminate && (h("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", null, "checkmark icon"), h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), this.checked && this.indeterminate && (h("div", { class: "indeterminate-symbol" })), h("input", { role: "checkbox", class: {
+    return (h(Host, { class: { ["disabled"]: this.disabled, ["small"]: this.small } }, h("div", { class: "container" }, this.checked && !this.indeterminate && (h("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", null, "checkmark icon"), h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), this.checked && this.indeterminate && (h("div", { class: "indeterminate-symbol" })), h("input", { role: "checkbox", class: {
         ["checkbox"]: true,
         ["checked"]: this.checked,
         ["indeterminate"]: this.indeterminate,
@@ -252,6 +253,24 @@ export class Checkbox {
         "attribute": "indeterminate",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "small": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If true, the small styling will be applied to the checkbox."
+        },
+        "attribute": "small",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-checkbox.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox/ic-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,UAAU,EACV,gCAAgC,EAChC,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAS7B,MAAM,OAAO,QAAQ;;IAuDX,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAS,EAAE;MACnC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC;IACvC,CAAC,CAAC;mBA3D0D,KAAK;oBAIpC,KAAK;;;;;uBAoBJ,4CAA4C;kCAKxE,QAAQ;yBAIuB,KAAK;4BAEV,IAAI,CAAC,OAAO;;EA0BxC;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,MAAM,UAAU,GACd,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAClD,IAAI,UAAU,EAAE;MACd,UAAU,CAAC,KAAK,EAAE,CAAC;KACpB;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,sBAAsB,KAAK,QAAQ,EAAE;MAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MAC3D,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACjB,SAAS,IAAI,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;OACrD;WAAM;QACL,SAAS,IAAI,SAAS,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;OACpD;KACF;SAAM;MACL,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACjB,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;OACtD;WAAM;QACL,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;OACtD;KACF;EACH,CAAC;EAED,iBAAiB;IACf,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;EACxD,CAAC;EAED,gBAAgB;IACd,gCAAgC,CAC9B;MACE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;MACvC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;KACxC,EACD,UAAU,CACX,CAAC;EACJ,CAAC;EAED,oBAAoB;IAClB,uBAAuB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;EAC3D,CAAC;EAED,MAAM;IACJ,IAAI,EAAE,GAAG,eACP,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAC/C,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;IAEtB,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAE3B,IAAI,CAAC,OAAO;MACV,CAAC,CAAC,iBAAiB,CACf,IAAI,EACJ,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,EAC1B,IAAI,CAAC,QAAQ,CACd;MACH,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjC,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE;QAC7D,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CACtC,WACE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAC,QAAQ,EACd,MAAM,EAAC,QAAQ,EACf,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,eACxB,SAAS,eACT,SAAS;UAEnB,kCAA6B;UAC7B,YAAM,CAAC,EAAC,qFAAqF,GAAG,CAC5F,CACP;QACA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,IAAI,CACrC,WAAK,KAAK,EAAC,sBAAsB,GAAG,CACrC;QACD,aACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE;YACL,CAAC,UAAU,CAAC,EAAE,IAAI;YAClB,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO;YACzB,CAAC,eAAe,CAAC,EAAE,IAAI,CAAC,aAAa;WACtC,EACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACrC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,GAClB;QACT,qBAAe,OAAO,EAAC,MAAM;UAC3B,aAAO,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,EAAE,IACtC,IAAI,CAAC,KAAK,CACL,CACM,CACZ;MACL,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,kBAAkB,CAAC,IAAI,CAC5C,WACE,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,wBAAwB,GAAG,EAAE,CAAC;QAEhD,IAAI,CAAC,sBAAsB,KAAK,SAAS,IAAI,CAC5C,WAAK,KAAK,EAAC,eAAe,GAAO,CAClC;QACD;UACG,IAAI,CAAC,sBAAsB,KAAK,SAAS,IAAI,CAC5C,qBAAe,OAAO,EAAC,SAAS;YAC9B,SAAG,KAAK,EAAC,cAAc,eAAW,QAAQ,IACvC,IAAI,CAAC,WAAW,CACf,CACU,CACjB;UACD,WACE,KAAK,EAAE;cACL,0BAA0B,EACxB,IAAI,CAAC,sBAAsB,KAAK,QAAQ;aAC3C;YAED,YAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACF,CACP,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Checkbox {\n  /**\n   * If `true`, the checkbox will be set to the checked state.\n   */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: string;\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop() name: string;\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n\n  @State() initiallyChecked = this.checked;\n\n  @Element() host: HTMLIcCheckboxElement;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  private additionalFieldContainer: HTMLDivElement;\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.icCheck.emit();\n    this.checkboxChecked.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const checkboxEl: HTMLElement =\n      this.host.shadowRoot.querySelector(\".checkbox\");\n    if (checkboxEl) {\n      checkboxEl.focus();\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.checked) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    } else {\n      if (!this.checked) {\n        this.additionalFieldContainer.style.display = \"none\";\n      } else {\n        this.additionalFieldContainer.style.display = \"flex\";\n      }\n    }\n  }\n\n  componentWillLoad(): void {\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    let id = `ic-checkbox-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    id = id.replace(/ /g, \"-\");\n\n    this.checked\n      ? renderHiddenInput(\n          true,\n          this.host,\n          this.name,\n          this.checked && this.value,\n          this.disabled\n        )\n      : removeHiddenInput(this.host);\n\n    return (\n      <Host>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          {this.checked && !this.indeterminate && (\n            <svg\n              class=\"checkmark\"\n              width=\"1.5rem\"\n              height=\"1.5rem\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          {this.checked && this.indeterminate && (\n            <div class=\"indeterminate-symbol\" />\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              [\"checkbox\"]: true,\n              [\"checked\"]: this.checked,\n              [\"indeterminate\"]: this.indeterminate,\n            }}\n            type=\"checkbox\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.checked}\n            indeterminate={this.indeterminate}\n            onClick={this.handleClick}\n          ></input>\n          <ic-typography variant=\"body\">\n            <label class=\"checkbox-label\" htmlFor={id}>\n              {this.label}\n            </label>\n          </ic-typography>\n        </div>\n        {isSlotUsed(this.host, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {this.dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-checkbox.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox/ic-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Checkbox {\n  /**\n   * If `true`, the checkbox will be set to the checked state.\n   */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: string;\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop() name: string;\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n\n  /**\n   * If true, the small styling will be applied to the checkbox.\n   */\n  @Prop() small?: boolean = false;\n\n  @State() initiallyChecked = this.checked;\n\n  @Element() host: HTMLIcCheckboxElement;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  private additionalFieldContainer: HTMLDivElement;\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.icCheck.emit();\n    this.checkboxChecked.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const checkboxEl: HTMLElement =\n      this.host.shadowRoot.querySelector(\".checkbox\");\n    if (checkboxEl) {\n      checkboxEl.focus();\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.checked) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    } else {\n      if (!this.checked) {\n        this.additionalFieldContainer.style.display = \"none\";\n      } else {\n        this.additionalFieldContainer.style.display = \"flex\";\n      }\n    }\n  }\n\n  componentWillLoad(): void {\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    let id = `ic-checkbox-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    id = id.replace(/ /g, \"-\");\n\n    this.checked\n      ? renderHiddenInput(\n          true,\n          this.host,\n          this.name,\n          this.checked && this.value,\n          this.disabled\n        )\n      : removeHiddenInput(this.host);\n\n    return (\n      <Host class={{ [\"disabled\"]: this.disabled, [\"small\"]: this.small }}>\n        <div class=\"container\">\n          {this.checked && !this.indeterminate && (\n            <svg\n              class=\"checkmark\"\n              width=\"1.5rem\"\n              height=\"1.5rem\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          {this.checked && this.indeterminate && (\n            <div class=\"indeterminate-symbol\" />\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              [\"checkbox\"]: true,\n              [\"checked\"]: this.checked,\n              [\"indeterminate\"]: this.indeterminate,\n            }}\n            type=\"checkbox\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.checked}\n            indeterminate={this.indeterminate}\n            onClick={this.handleClick}\n          ></input>\n          <ic-typography variant=\"body\">\n            <label class=\"checkbox-label\" htmlFor={id}>\n              {this.label}\n            </label>\n          </ic-typography>\n        </div>\n        {isSlotUsed(this.host, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {this.dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.css

@@ -453,7 +453,7 @@ ic-input-label ic-typography {
   margin-bottom: var(--ic-space-sm);
 }
 
-:host([small]) ic-input-label ic-typography {
+:host(.small) ic-input-label ic-typography {
   margin-bottom: calc(var(--ic-space-sm) / 2);
 }
 
@@ -461,7 +461,7 @@ ic-input-validation {
   margin-top: var(--ic-space-sm);
 }
 
-:host([small]) ic-input-validation {
+:host(.small) ic-input-validation {
   margin-top: calc(var(--ic-space-sm) / 2);
 }
 
@@ -469,7 +469,7 @@ ic-input-validation {
   margin-bottom: calc(-1 * var(--ic-space-xxs));
 }
 
-:host([small]) .checkboxes-container {
+:host(.small) .checkboxes-container {
   margin-bottom: calc(-1 * var(--ic-space-xxxs));
 }
 

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

@@ -42,7 +42,7 @@ export class CheckboxGroup {
   render() {
     const describedBy = getInputDescribedByText(this.name, this.helperText !== "", this.validationStatus !== "");
     const hadValidationStatus = hasValidationStatus(this.validationStatus, this.disabled);
-    return (h(Host, null, (this.validationStatus === "error" ||
+    return (h(Host, { class: { ["small"]: this.small } }, (this.validationStatus === "error" ||
       this.required ||
       this.hideLabel) && (h("span", { id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, this.label, " ", this.validationStatus === "error" ? "invalid data " : null, " ", this.required ? "required" : null)), h("fieldset", { id: this.name, "aria-labelledby": `${this.validationStatus === "error" || this.required || this.hideLabel
         ? "screenReaderOnlyText"

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

@@ -1 +1 @@
-{"version":3,"file":"ic-checkbox-group.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n  tag: \"ic-checkbox-group\",\n  styleUrl: \"ic-checkbox-group.css\",\n  shadow: true,\n})\nexport class CheckboxGroup {\n  @Element() host: HTMLIcCheckboxGroupElement;\n\n  /**\n   * The label for the checkbox group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * If `true`, the checkbox group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * If `true`, the checkbox group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * If `true`, the small styling will be applied to the checkbox group.\n   */\n  @Prop() small: boolean = false;\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  private checkboxOptions: HTMLIcCheckboxElement[];\n\n  @State() checkedOptions: string[] = [];\n\n  @Listen(\"icCheck\")\n  selectHandler(): void {\n    this.checkboxOptions = Array.from(\n      this.host.querySelectorAll(\"ic-checkbox\")\n    );\n    this.checkboxOptions.forEach((checkbox) => {\n      if (\n        checkbox.checked &&\n        this.checkedOptions.indexOf(checkbox.value) === -1\n      ) {\n        this.checkedOptions.push(checkbox.value);\n      }\n    });\n    this.icChange.emit({ value: this.checkedOptions });\n  }\n\n  componentDidLoad(): void {\n    this.checkboxOptions = Array.from(\n      this.host.querySelectorAll(\"ic-checkbox\")\n    );\n    this.checkboxOptions.forEach((checkbox) => {\n      if (\n        checkbox.checked &&\n        this.checkedOptions.indexOf(checkbox.value) === -1\n      ) {\n        this.checkedOptions.push(checkbox.value);\n      }\n      if (!checkbox.name) checkbox.name = this.name;\n      checkbox.groupLabel = this.label;\n    });\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Checkbox Group\"\n    );\n  }\n\n  render() {\n    const describedBy = getInputDescribedByText(\n      this.name,\n      this.helperText !== \"\",\n      this.validationStatus !== \"\"\n    );\n    const hadValidationStatus = hasValidationStatus(\n      this.validationStatus,\n      this.disabled\n    );\n\n    return (\n      <Host>\n        {(this.validationStatus === \"error\" ||\n          this.required ||\n          this.hideLabel) && (\n          <span\n            id=\"screenReaderOnlyText\"\n            class=\"screen-reader-only-text\"\n            aria-hidden=\"true\"\n          >\n            {this.label}{\" \"}\n            {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n            {this.required ? \"required\" : null}\n          </span>\n        )}\n        <fieldset\n          id={this.name}\n          aria-labelledby={`${\n            this.validationStatus === \"error\" || this.required || this.hideLabel\n              ? \"screenReaderOnlyText\"\n              : \"\"\n          } ${describedBy}`.trim()}\n          disabled={this.disabled}\n        >\n          {!this.hideLabel && (\n            <legend>\n              <ic-input-label\n                class={{ [`${this.validationStatus}`]: true }}\n                label={this.label}\n                helperText={this.helperText}\n                required={this.required}\n                disabled={this.disabled}\n                for={this.name}\n              ></ic-input-label>\n            </legend>\n          )}\n          <div class=\"checkboxes-container\">\n            <slot></slot>\n          </div>\n        </fieldset>\n        {hadValidationStatus && (\n          <ic-input-validation\n            for={this.name}\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-checkbox-group.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n  tag: \"ic-checkbox-group\",\n  styleUrl: \"ic-checkbox-group.css\",\n  shadow: true,\n})\nexport class CheckboxGroup {\n  @Element() host: HTMLIcCheckboxGroupElement;\n\n  /**\n   * The label for the checkbox group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * If `true`, the checkbox group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * If `true`, the checkbox group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * If `true`, the small styling will be applied to the checkbox group.\n   */\n  @Prop() small: boolean = false;\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  private checkboxOptions: HTMLIcCheckboxElement[];\n\n  @State() checkedOptions: string[] = [];\n\n  @Listen(\"icCheck\")\n  selectHandler(): void {\n    this.checkboxOptions = Array.from(\n      this.host.querySelectorAll(\"ic-checkbox\")\n    );\n    this.checkboxOptions.forEach((checkbox) => {\n      if (\n        checkbox.checked &&\n        this.checkedOptions.indexOf(checkbox.value) === -1\n      ) {\n        this.checkedOptions.push(checkbox.value);\n      }\n    });\n    this.icChange.emit({ value: this.checkedOptions });\n  }\n\n  componentDidLoad(): void {\n    this.checkboxOptions = Array.from(\n      this.host.querySelectorAll(\"ic-checkbox\")\n    );\n    this.checkboxOptions.forEach((checkbox) => {\n      if (\n        checkbox.checked &&\n        this.checkedOptions.indexOf(checkbox.value) === -1\n      ) {\n        this.checkedOptions.push(checkbox.value);\n      }\n      if (!checkbox.name) checkbox.name = this.name;\n      checkbox.groupLabel = this.label;\n    });\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Checkbox Group\"\n    );\n  }\n\n  render() {\n    const describedBy = getInputDescribedByText(\n      this.name,\n      this.helperText !== \"\",\n      this.validationStatus !== \"\"\n    );\n    const hadValidationStatus = hasValidationStatus(\n      this.validationStatus,\n      this.disabled\n    );\n\n    return (\n      <Host class={{ [\"small\"]: this.small }}>\n        {(this.validationStatus === \"error\" ||\n          this.required ||\n          this.hideLabel) && (\n          <span\n            id=\"screenReaderOnlyText\"\n            class=\"screen-reader-only-text\"\n            aria-hidden=\"true\"\n          >\n            {this.label}{\" \"}\n            {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n            {this.required ? \"required\" : null}\n          </span>\n        )}\n        <fieldset\n          id={this.name}\n          aria-labelledby={`${\n            this.validationStatus === \"error\" || this.required || this.hideLabel\n              ? \"screenReaderOnlyText\"\n              : \"\"\n          } ${describedBy}`.trim()}\n          disabled={this.disabled}\n        >\n          {!this.hideLabel && (\n            <legend>\n              <ic-input-label\n                class={{ [`${this.validationStatus}`]: true }}\n                label={this.label}\n                helperText={this.helperText}\n                required={this.required}\n                disabled={this.disabled}\n                for={this.name}\n              ></ic-input-label>\n            </legend>\n          )}\n          <div class=\"checkboxes-container\">\n            <slot></slot>\n          </div>\n        </fieldset>\n        {hadValidationStatus && (\n          <ic-input-validation\n            for={this.name}\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -449,9 +449,8 @@ video {
   display: flex;
   padding: var(--ic-space-xxs);
   font-size: 0.875rem;
-  border-radius: 5rem;
-  text-align: center;
-  align-items: center;
+  border-radius: var(--ic-space-md);
+  text-align: left;
   text-decoration: none;
   transition: var(--ic-easing-transition-fast);
   position: relative;
@@ -459,10 +458,12 @@ video {
 
 .chip.small {
   padding: var(--ic-space-xxxs);
+  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));
 }
 
 .chip.large {
   padding: var(--ic-space-xs);
+  border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));
 }
 
 .label {
@@ -499,16 +500,16 @@ ic-tooltip:focus-within {
 
 .outline {
   color: var(--ic-architectural-900);
-  border: 0.063rem solid var(--ic-architectural-900);
-  padding: calc(var(--ic-space-xxs) - 0.063rem);
+  border: var(--ic-space-1px) solid var(--ic-architectural-900);
+  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px));
 }
 
 .outline.small {
-  padding: calc(var(--ic-space-xxxs) - 0.063rem);
+  padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));
 }
 
 .outline.large {
-  padding: calc(var(--ic-space-xs) - 0.063rem);
+  padding: calc(var(--ic-space-xs) - var(--ic-space-1px));
 }
 
 .outline.disabled {
@@ -562,15 +563,15 @@ ic-tooltip {
   }
 
   .filled.small {
-    padding: calc(var(--ic-space-xxxs) - 0.063rem);
+    padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));
   }
 
   .filled {
-    padding: calc(var(--ic-space-xxxs) + 0.063rem);
+    padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));
   }
 
   .filled.large {
-    padding: calc(var(--ic-space-xs) - 0.063rem);
+    padding: calc(var(--ic-space-xs) - var(--ic-space-1px));
   }
 
   .chip.disabled {

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: 0.063rem;
+  height: var(--ic-space-1px);
   background-color: var(--ic-architectural-300);
 }
 

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

@@ -488,7 +488,7 @@ slot[name="value"]::slotted(ic-text-field[readonly][hide-label][rows]) {
 
 .divider {
   margin-top: var(--ic-space-md);
-  height: 0.063rem;
+  height: var(--ic-space-1px);
   background-color: var(--ic-architectural-300);
 }
 

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

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

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

@@ -522,9 +522,22 @@ a:link:visited > ::slotted(svg) {
 :host(.footer-link) a:link:focus,
 :host(.footer-link) a ::slotted(a:link:hover),
 :host(.footer-link) a ::slotted(a:link:focus) {
-  text-decoration-line: underline;
-  text-decoration-thickness: 25%;
-  text-underline-offset: 25%;
+  border-bottom: 0.25rem solid !important;
+  margin-bottom: -0.25rem !important;
+  text-decoration: none;
+}
+
+@supports (text-decoration-thickness: 25%) {
+  :host(.footer-link) a:link:hover,
+  :host(.footer-link) a:link:focus,
+  :host(.footer-link) a ::slotted(a:link:hover),
+  :host(.footer-link) a ::slotted(a:link:focus) {
+    text-decoration-line: underline;
+    text-decoration-thickness: 25%;
+    text-underline-offset: 25%;
+    border-bottom: 0 !important;
+    margin-bottom: 0 !important;
+  }
 }
 
 :host(.footer-link) a:link:hover,

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

@@ -496,6 +496,7 @@ ic-typography.heading-bottom-spacing {
   display: flex;
   gap: var(--ic-space-md);
   margin-top: var(--ic-space-lg);
+  flex-wrap: wrap;
 }
 
 .secondary-container {
@@ -533,8 +534,8 @@ ic-typography.heading-bottom-spacing {
     min-height: 13rem;
   }
 
-  :host([small]),
-  :host([small]) .section-container {
+  :host(.small),
+  :host(.small) .section-container {
     min-height: 10.813rem;
   }
 
@@ -571,13 +572,13 @@ ic-typography.heading-bottom-spacing {
     min-height: 16rem;
   }
 
-  :host([small]),
-  :host([small]) .section-container {
+  :host(.small),
+  :host(.small) .section-container {
     min-height: 15rem;
   }
 
-  :host([secondary-heading]),
-  :host([secondary-heading]) .section-container {
+  :host(.secondary-heading),
+  :host(.secondary-heading) .section-container {
     min-height: 14rem;
   }
 
@@ -609,13 +610,13 @@ ic-typography.heading-bottom-spacing {
     min-height: 16rem;
   }
 
-  :host([small]),
-  :host([small]) .section-container {
+  :host(.small),
+  :host(.small) .section-container {
     min-height: 15rem;
   }
 
-  :host([secondary-heading]),
-  :host([secondary-heading]) .section-container {
+  :host(.secondary-heading),
+  :host(.secondary-heading) .section-container {
     min-height: 14rem;
   }
 
@@ -647,18 +648,18 @@ ic-typography.heading-bottom-spacing {
     min-height: 13rem;
   }
 
-  :host([small]),
-  :host([small]) .section-container {
+  :host(.small),
+  :host(.small) .section-container {
     min-height: 10.813rem;
   }
 
-  :host([secondary-heading]),
-  :host([secondary-heading]) .section-container {
+  :host(.secondary-heading),
+  :host(.secondary-heading) .section-container {
     min-height: 17.5rem;
   }
 
-  :host([secondary-heading]) .section-container,
-  :host([small]) .section-container,
+  :host(.secondary-heading) .section-container,
+  :host(.small) .section-container,
   .section-container {
     flex-direction: column;
     align-items: flex-start;
@@ -695,18 +696,18 @@ ic-typography.heading-bottom-spacing {
     margin-bottom: var(--ic-space-md);
   }
 
-  :host([small]),
-  :host([small]) .section-container {
+  :host(.small),
+  :host(.small) .section-container {
     min-height: 10.813rem;
   }
 
-  :host([secondary-heading]),
-  :host([secondary-heading]) .section-container {
+  :host(.secondary-heading),
+  :host(.secondary-heading) .section-container {
     min-height: 16.5rem;
   }
 
-  :host([secondary-heading]) .section-container,
-  :host([small]) .section-container,
+  :host(.secondary-heading) .section-container,
+  :host(.small) .section-container,
   .section-container {
     flex-direction: column;
     align-items: flex-start;

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

@@ -57,6 +57,8 @@ export class Hero {
     return (h(Host, { class: {
         [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
         ["has-background-image"]: backgroundImage !== undefined,
+        ["small"]: small,
+        ["secondary-heading"]: !!secondaryHeading,
       }, style: style }, h("ic-section-container", { aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { class: {
         ["left-container"]: true,
         ["left-container-full-width"]: this.leftContentFullWidth,

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":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAIL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,cAAc,EACd,uBAAuB,EACvB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAG7B;;;;;GAKG;AAOH,MAAM,OAAO,IAAI;;;;;;;qCA+B+B,KAAK;mBAKpB,MAAM;0BAKa,MAAM;iBAK/B,KAAK;wBAEG,KAAK;wBAEN,cAAc;gCAG5C,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,KAAK,SAAS;2BAEb,uBAAuB,EAAE;;EAGvE,kBAAkB,CAAC,EAAe;IAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;EACpC,CAAC;EAGD,QAAQ;IACN,IAAI,IAAI,CAAC,yBAAyB,EAAE;MAClC,OAAO;KACR;IAED,MAAM,WAAW,GAAG,QAAQ,CAAC,gBAAgB,CAAC,SAAS,CAAC;IACxD,MAAM,MAAM,GAAG,GAAG,CAAC;IACnB,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,WAAW,GAAG,MAAM,CAAC;IACtC,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC;EAC1C,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;EAC3D,CAAC;EAED,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,MAAM,CACP,CAAC;EACJ,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,YAAY,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;EAC3D,CAAC;EAED,MAAM;IACJ,MAAM,EACJ,OAAO,EACP,KAAK,EACL,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,eAAe,EACf,YAAY,GACb,GAAG,IAAI,CAAC;IAET,IAAI,KAAK,GAAG,EAAE,CAAC;IAEf,IAAI,eAAe,KAAK,SAAS,EAAE;MACjC,KAAK,GAAG;QACN,kBAAkB,EAAE,MAAM,GAAG,eAAe,GAAG,GAAG;QAClD,qBAAqB,EAAE,YAAY;OACpC,CAAC;KACH;IAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAC1B,eAAe,KAAK,qBAAqB,CAAC,IAAI;QAChD,CAAC,sBAAsB,CAAC,EAAE,eAAe,KAAK,SAAS;OACxD,EACD,KAAK,EAAE,KAAK;MAEZ,4BACE,OAAO,EAAE,OAAO,EAChB,UAAU,QACV,KAAK,EAAC,mBAAmB;QAEzB,WACE,KAAK,EAAE;YACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;YACxB,CAAC,2BAA2B,CAAC,EAAE,IAAI,CAAC,oBAAoB;WACzD;UAED,WAAK,KAAK,EAAC,SAAS;YAClB,YAAM,IAAI,EAAC,SAAS;cAClB,qBACE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAC5B,KAAK,EAAE,EAAE,CAAC,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,IAE5C,OAAO,CACM,CACX,CACH;UACN,WAAK,KAAK,EAAC,YAAY;YACrB,YAAM,IAAI,EAAC,YAAY;cACrB,qBAAe,OAAO,EAAC,MAAM,IAAE,UAAU,CAAiB,CACrD,CACH;UACN,WAAK,KAAK,EAAC,uBAAuB;YAChC,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF;QACL,CAAC,gBAAgB,KAAK,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CACxD,WAAK,KAAK,EAAC,iBAAiB;UAC1B,YAAM,IAAI,EAAC,WAAW,IACnB,gBAAgB,IAAI,CACnB,WAAK,KAAK,EAAC,qBAAqB;YAC9B,WAAK,KAAK,EAAC,mBAAmB;cAC5B,qBAAe,OAAO,EAAC,IAAI,IACxB,gBAAgB,CACH,CACZ;YACN,WAAK,KAAK,EAAC,sBAAsB;cAC/B,qBAAe,OAAO,EAAC,gBAAgB,IACpC,mBAAmB,CACN,CACZ,CACF,CACP,CACI,CACH,CACP,CACoB,CAClB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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(\"themeChange\", { 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(\"themeChange\", { 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          [\"small\"]: small,\n          [\"secondary-heading\"]: !!secondaryHeading,\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-horizontal-scroll/ic-horizontal-scroll.css

@@ -457,10 +457,6 @@ video {
   --splitter-color: var(--ic-keyline-darken-rgb);
 }
 
-:host([inline]) {
-  margin-bottom: 0;
-}
-
 /* Slotted items container element */
 ::slotted(*) {
   overflow-x: scroll;
@@ -510,18 +506,18 @@ video {
 .scroll-splitter-right {
   display: flex;
   height: var(--ic-space-lg);
-  width: 0.063rem;
+  width: var(--ic-space-1px);
   margin-top: var(--ic-space-xs);
-  border-radius: 0.063rem;
+  border-radius: var(--ic-space-1px);
   background-color: var(--splitter-color);
 }
 
 .scroll-splitter-left {
-  margin-left: calc(var(--ic-space-xxs) - 0.063rem);
+  margin-left: calc(var(--ic-space-xxs) - var(--ic-space-1px));
 }
 
 .scroll-splitter-right {
-  margin-right: calc(var(--ic-space-xxs) - 0.063rem);
+  margin-right: calc(var(--ic-space-xxs) - var(--ic-space-1px));
 }
 
 .disabled .scroll-splitter-left,