@ukic/web-components 2.28.0 → 3.0.0-alpha.1

package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-horizontal-scroll.js","sourceRoot":"","sources":["../../../src/components/ic-horizontal-scroll/ic-horizontal-scroll.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  State,\n  Method,\n  Prop,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\nimport { getSlotElements } from \"../../utils/helpers\";\n\nimport { checkResizeObserver, elementOverflowsX } from \"../../utils/helpers\";\nimport { IcThemeForeground, IcThemeForegroundEnum } from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n  tag: \"ic-horizontal-scroll\",\n  styleUrl: \"./ic-horizontal-scroll.css\",\n  shadow: true,\n})\nexport class HorizontalScroll {\n  private buttonStateSet: boolean = false;\n  private isScrolling: number;\n  private itemOffsets: number[];\n  private items: HTMLElement[];\n  private itemsContainerEl: HTMLElement;\n  private resizeObserver: ResizeObserver;\n  private scrollDelay: number;\n\n  @Element() el: HTMLIcHorizontalScrollElement;\n\n  @State() firstItemVisible: boolean = true;\n  @State() itemOverflow: boolean = false;\n  @State() lastItemVisible: boolean = false;\n\n  /**\n   * The appearance of the horizontal scroll, e.g. dark, light or the default.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * @internal The name of the event that triggers focus handler logic.\n   */\n  @Prop() focusTrigger?: string = \"focus\";\n\n  componentWillLoad(): void {\n    this.itemsContainerEl = this.el.children[0] as HTMLElement;\n    this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n    this.items = getSlotElements(this.itemsContainerEl) as HTMLElement[];\n    this.items.forEach((item) => {\n      if (item.addEventListener) {\n        item.addEventListener(this.focusTrigger, this.focusHandler);\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    let runningTotal = 0;\n    this.itemOffsets = this.items.map((item) => {\n      runningTotal += item.offsetWidth;\n      return runningTotal;\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n\n    // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)\n    // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons\n    // - 'mouseup' otherwise not detected and scrolling not stopped\n    const scrollArrows = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"div\")\n    ) as HTMLElement[];\n    [\"mouseup\", \"mouseleave\"].forEach((event) => {\n      scrollArrows.forEach((arrow) =>\n        arrow.addEventListener(event, this.arrowMouseUpHandler)\n      );\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== undefined) {\n      this.resizeObserver.disconnect();\n    }\n\n    const scrollArrows = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"div\")\n    ) as HTMLElement[];\n    [\"mouseup\", \"mouseleave\"].forEach((event) => {\n      scrollArrows.forEach((arrow) =>\n        arrow.removeEventListener(event, this.arrowMouseUpHandler)\n      );\n    });\n\n    this.items.forEach((item) => {\n      if (item.removeEventListener) {\n        item.removeEventListener(this.focusTrigger, this.focusHandler);\n      }\n    });\n\n    this.itemsContainerEl.removeEventListener(\"scroll\", this.scrollHandler);\n  }\n\n  /**\n   * @internal if side scrolling enabled, scrolls the specified item into view.\n   */\n  @Method()\n  async scrollItemIntoView(itemPosition: number): Promise<void> {\n    this.firstItemVisible = itemPosition <= 0;\n    const newScrollPos =\n      itemPosition <= 0 ? 0 : this.itemOffsets[itemPosition - 1];\n    this.lastItemVisible =\n      this.itemsContainerEl.offsetWidth + newScrollPos >=\n      this.itemsContainerEl.scrollWidth;\n    this.buttonStateSet = true;\n    this.itemsContainerEl.scrollLeft = newScrollPos;\n  }\n\n  private focusHandler = (event: FocusEvent) => {\n    this.itemFocusHandler(\n      Array.from(this.items).indexOf(event.target as HTMLElement)\n    );\n  };\n\n  private itemFocusHandler(itemPosition: number): void {\n    if (this.itemOverflow) {\n      this.scrollItemIntoView(itemPosition);\n    }\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.el.clientWidth >= this.itemsContainerEl.scrollWidth) {\n      this.itemOverflow = false;\n    } else {\n      this.itemOverflow = elementOverflowsX(this.itemsContainerEl);\n    }\n\n    if (this.itemOverflow) {\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + this.itemsContainerEl.scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.itemsContainerEl);\n  };\n\n  private scrollLeft = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() - 1);\n  };\n\n  private scrollRight = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() + 1);\n  };\n\n  private longScrollRight = () => {\n    this.scrollRight();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private longScrollLeft = () => {\n    this.scrollLeft();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private leftArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private rightArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private arrowMouseUpHandler = () => {\n    window.clearTimeout(this.scrollDelay);\n  };\n\n  private getCurrentLeftItem = (): number => {\n    const index = this.itemOffsets.findIndex(\n      (el) => el > Math.round(this.itemsContainerEl.scrollLeft)\n    );\n    return index < 0 ? 0 : index;\n  };\n\n  private scrollHandler = () => {\n    window.clearTimeout(this.isScrolling);\n    // Set a timeout to run after scrolling ends\n    this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n  };\n\n  private scrollStopped = () => {\n    // If scrollItemIntoView has been called, the button states will already be set\n    // Can't just handle it here as it causes strange jumping behaviour in positioning\n    const scrollLeft = Math.round(this.itemsContainerEl.scrollLeft);\n    if (this.buttonStateSet === false) {\n      this.firstItemVisible = scrollLeft === 0;\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n    this.buttonStateSet = false;\n  };\n\n  render() {\n    const { appearance, firstItemVisible, lastItemVisible, itemOverflow } =\n      this;\n\n    return (\n      <Host\n        class={{\n          [\"visible\"]: itemOverflow,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-left\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: firstItemVisible,\n          }}\n          role=\"tab\"\n        >\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll left\"\n            appearance={appearance}\n            innerHTML={LeftArrow}\n            disabled={firstItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollLeft}\n            onMouseDown={this.leftArrowMouseDownHandler}\n          ></ic-button>\n          <span class=\"scroll-splitter-left\"></span>\n        </div>\n        <slot></slot>\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-right\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: lastItemVisible,\n          }}\n          role=\"tab\"\n        >\n          <span class=\"scroll-splitter-right\"></span>\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll right\"\n            appearance={appearance}\n            innerHTML={RightArrow}\n            disabled={lastItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollRight}\n            onMouseDown={this.rightArrowMouseDownHandler}\n          ></ic-button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-horizontal-scroll.js","sourceRoot":"","sources":["../../../src/components/ic-horizontal-scroll/ic-horizontal-scroll.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  State,\n  Method,\n  Prop,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\nimport { getSlotElements } from \"../../utils/helpers\";\n\nimport { checkResizeObserver, elementOverflowsX } from \"../../utils/helpers\";\nimport { IcThemeForeground, IcThemeForegroundEnum } from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n  tag: \"ic-horizontal-scroll\",\n  styleUrl: \"./ic-horizontal-scroll.css\",\n  shadow: true,\n})\nexport class HorizontalScroll {\n  private buttonStateSet: boolean = false;\n  private isScrolling: number;\n  private itemOffsets: number[];\n  private items: HTMLElement[];\n  private itemsContainerEl: HTMLElement;\n  private resizeObserver: ResizeObserver;\n  private scrollDelay: number;\n\n  @Element() el: HTMLIcHorizontalScrollElement;\n\n  @State() firstItemVisible: boolean = true;\n  @State() itemOverflow: boolean = false;\n  @State() lastItemVisible: boolean = false;\n\n  /**\n   * The appearance of the horizontal scroll, e.g. dark, light or the default.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * @internal The name of the event that triggers focus handler logic.\n   */\n  @Prop() focusTrigger?: string = \"focus\";\n\n  componentWillLoad(): void {\n    this.itemsContainerEl = this.el.children[0] as HTMLElement;\n    this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n    this.items = getSlotElements(this.itemsContainerEl) as HTMLElement[];\n    this.items.forEach((item) => {\n      if (item.addEventListener) {\n        item.addEventListener(this.focusTrigger, this.focusHandler);\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    let runningTotal = 0;\n    this.itemOffsets = this.items.map((item) => {\n      runningTotal += item.offsetWidth;\n      return runningTotal;\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n\n    // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)\n    // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons\n    // - 'mouseup' otherwise not detected and scrolling not stopped\n    const scrollArrows = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"div\")\n    ) as HTMLElement[];\n    [\"mouseup\", \"mouseleave\"].forEach((event) => {\n      scrollArrows.forEach((arrow) =>\n        arrow.addEventListener(event, this.arrowMouseUpHandler)\n      );\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== undefined) {\n      this.resizeObserver.disconnect();\n    }\n\n    const scrollArrows = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"div\")\n    ) as HTMLElement[];\n    [\"mouseup\", \"mouseleave\"].forEach((event) => {\n      scrollArrows.forEach((arrow) =>\n        arrow.removeEventListener(event, this.arrowMouseUpHandler)\n      );\n    });\n\n    this.items.forEach((item) => {\n      if (item.removeEventListener) {\n        item.removeEventListener(this.focusTrigger, this.focusHandler);\n      }\n    });\n\n    this.itemsContainerEl.removeEventListener(\"scroll\", this.scrollHandler);\n  }\n\n  /**\n   * @internal if side scrolling enabled, scrolls the specified item into view.\n   */\n  @Method()\n  async scrollItemIntoView(itemPosition: number): Promise<void> {\n    this.firstItemVisible = itemPosition <= 0;\n    const newScrollPos =\n      itemPosition <= 0 ? 0 : this.itemOffsets[itemPosition - 1];\n    this.lastItemVisible =\n      this.itemsContainerEl.offsetWidth + newScrollPos >=\n      this.itemsContainerEl.scrollWidth;\n    this.buttonStateSet = true;\n    this.itemsContainerEl.scrollLeft = newScrollPos;\n  }\n\n  private focusHandler = (event: FocusEvent) => {\n    this.itemFocusHandler(\n      Array.from(this.items).indexOf(event.target as HTMLElement)\n    );\n  };\n\n  private itemFocusHandler(itemPosition: number): void {\n    if (this.itemOverflow) {\n      this.scrollItemIntoView(itemPosition);\n    }\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.el.clientWidth >= this.itemsContainerEl.scrollWidth) {\n      this.itemOverflow = false;\n    } else {\n      this.itemOverflow = elementOverflowsX(this.itemsContainerEl);\n    }\n\n    if (this.itemOverflow) {\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + this.itemsContainerEl.scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.itemsContainerEl);\n  };\n\n  private scrollLeft = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() - 1);\n  };\n\n  private scrollRight = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() + 1);\n  };\n\n  private longScrollRight = () => {\n    this.scrollRight();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private longScrollLeft = () => {\n    this.scrollLeft();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private leftArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private rightArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private arrowMouseUpHandler = () => {\n    window.clearTimeout(this.scrollDelay);\n  };\n\n  private getCurrentLeftItem = (): number => {\n    const index = this.itemOffsets.findIndex(\n      (el) => el > Math.round(this.itemsContainerEl.scrollLeft)\n    );\n    return index < 0 ? 0 : index;\n  };\n\n  private scrollHandler = () => {\n    window.clearTimeout(this.isScrolling);\n    // Set a timeout to run after scrolling ends\n    this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n  };\n\n  private scrollStopped = () => {\n    // If scrollItemIntoView has been called, the button states will already be set\n    // Can't just handle it here as it causes strange jumping behaviour in positioning\n    const scrollLeft = Math.round(this.itemsContainerEl.scrollLeft);\n    if (this.buttonStateSet === false) {\n      this.firstItemVisible = scrollLeft === 0;\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n    this.buttonStateSet = false;\n  };\n\n  render() {\n    const { appearance, firstItemVisible, lastItemVisible, itemOverflow } =\n      this;\n\n    return (\n      <Host\n        class={{\n          [\"ic-horizontal-scroll-visible\"]: itemOverflow,\n          [\"ic-horizontal-scroll-dark\"]:\n            this.appearance === IcThemeForegroundEnum.Dark,\n          [\"ic-horizontal-scroll-light\"]:\n            this.appearance === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-left\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: firstItemVisible,\n          }}\n          role=\"tab\"\n        >\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll left\"\n            appearance={appearance}\n            innerHTML={LeftArrow}\n            disabled={firstItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollLeft}\n            onMouseDown={this.leftArrowMouseDownHandler}\n          ></ic-button>\n          <span class=\"scroll-splitter-left\"></span>\n        </div>\n        <slot></slot>\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-right\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: lastItemVisible,\n          }}\n          role=\"tab\"\n        >\n          <span class=\"scroll-splitter-right\"></span>\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll right\"\n            appearance={appearance}\n            innerHTML={RightArrow}\n            disabled={lastItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollRight}\n            onMouseDown={this.rightArrowMouseDownHandler}\n          ></ic-button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -17,69 +17,69 @@ ic-input-component-container {
   outline: none;
 }
 
-ic-input-component-container.fullwidth {
+ic-input-component-container.ic-input-component-container-full-width {
   width: 100%;
 }
 
-ic-input-component-container.disabled,
-ic-input-component-container.disabled:hover {
+ic-input-component-container.ic-input-component-container-disabled,
+ic-input-component-container.ic-input-component-container-disabled:hover {
   border: var(--ic-border-width) dashed var(--ic-architectural-200);
 }
 
-ic-input-component-container.readonly,
-ic-input-component-container.readonly:hover {
+ic-input-component-container.ic-input-component-container-readonly,
+ic-input-component-container.ic-input-component-container-readonly:hover {
   border: none;
   padding: 0;
 }
 
-ic-input-component-container.error {
+ic-input-component-container.ic-input-component-container-error {
   border: var(--ic-error-border-default);
   padding: 0;
 }
 
-ic-input-component-container.error:hover {
+ic-input-component-container.ic-input-component-container-error:hover {
   border: var(--ic-error-border-hover);
 }
 
-ic-input-component-container.error:focus-within {
+ic-input-component-container.ic-input-component-container-error:focus-within {
   border: var(--ic-error-border-pressed);
 }
 
-ic-input-component-container.warning {
+ic-input-component-container.ic-input-component-container-warning {
   border: var(--ic-warning-border-default);
   padding: 0;
 }
 
-ic-input-component-container.warning:hover {
+ic-input-component-container.ic-input-component-container-warning:hover {
   border: var(--ic-warning-border-hover);
 }
 
-ic-input-component-container.warning:focus-within {
+ic-input-component-container.ic-input-component-container-warning:focus-within {
   border: var(--ic-warning-border-pressed);
 }
 
-ic-input-component-container.success {
+ic-input-component-container.ic-input-component-container-success {
   border: var(--ic-success-border-default);
   padding: 0;
 }
 
-ic-input-component-container.success:hover {
+ic-input-component-container.ic-input-component-container-success:hover {
   border: var(--ic-success-border-hover);
 }
 
-ic-input-component-container.success:focus-within {
+ic-input-component-container.ic-input-component-container-success:focus-within {
   border: var(--ic-success-border-pressed);
 }
 
-ic-input-component-container.small {
+ic-input-component-container.ic-input-component-container-small {
   height: var(--ic-space-xl);
 }
 
-ic-input-component-container.large {
+ic-input-component-container.ic-input-component-container-large {
   height: var(--ic-space-xxl);
 }
 
-ic-input-component-container.multiline {
+ic-input-component-container.ic-input-component-container-multiline {
   height: auto;
 }
 
@@ -90,21 +90,26 @@ ic-input-component-container .icon-container {
   align-items: center;
 }
 
-ic-input-component-container.multiline .icon-container,
-ic-input-component-container.multiline.small .icon-container {
+ic-input-component-container.ic-input-component-container-multiline
+  .icon-container,
+ic-input-component-container.ic-input-component-container-multiline.ic-input-component-container-small
+  .icon-container {
   margin-top: 0.375rem;
   display: block;
 }
 
-ic-input-component-container.readonly .icon-container {
+ic-input-component-container.ic-input-component-container-readonly
+  .icon-container {
   margin-left: -0.313rem;
 }
 
-ic-input-component-container.disabled ::-moz-placeholder {
+ic-input-component-container.ic-input-component-container-disabled
+  ::-moz-placeholder {
   display: none;
 }
 
-ic-input-component-container.disabled ::placeholder {
+ic-input-component-container.ic-input-component-container-disabled
+  ::placeholder {
   display: none;
 }
 
@@ -114,7 +119,7 @@ ic-input-component-container .inline-success {
   align-items: center;
 }
 
-ic-input-component-container.dark:hover {
+ic-input-component-container.ic-input-component-container-dark:hover {
   --border-color: var(--ic-architectural-400);
 }
 
@@ -147,7 +152,7 @@ ic-input-component-container:focus {
   box-shadow: var(--ic-border-focus);
 }
 
-.focus-indicator.dark:focus-within {
+.focus-indicator.ic-input-component-container-dark:focus-within {
   box-shadow: var(--ic-border-focus);
 }
 
@@ -163,8 +168,8 @@ ic-input-component-container:focus {
     outline: 0.125rem solid Highlight;
   }
 
-  ic-input-component-container.disabled,
-  ic-input-component-container.disabled:hover {
+  ic-input-component-container.ic-input-component-container-disabled,
+  ic-input-component-container.ic-input-component-container-disabled:hover {
     border: var(--ic-border-width) dashed GrayText;
   }
 }

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

@@ -15,13 +15,11 @@ export class InputComponentContainer {
             }
         };
         this.appearance = "default";
-        this.dark = false;
         this.disabled = false;
         this.fullWidth = false;
         this.multiLine = false;
         this.readonly = false;
-        this.size = "default";
-        this.small = false;
+        this.size = "medium";
         this.validationInline = false;
         this.validationStatus = "";
     }
@@ -30,22 +28,21 @@ export class InputComponentContainer {
         this.hostMutationObserver.observe(this.el, { childList: true });
     }
     render() {
-        const { size, small, validationStatus, disabled, readonly, multiLine, fullWidth, dark, appearance, validationInline, } = this;
+        const { size, validationStatus, disabled, readonly, multiLine, fullWidth, appearance, validationInline, } = this;
         const hasValidationStatus = this.validationStatus !== "" && !this.disabled && !this.readonly
             ? true
             : false;
         return (h(Host, { class: {
-                small: small,
-                [`${size}`]: true,
-                [validationStatus]: hasValidationStatus,
-                disabled: disabled,
-                readonly: readonly,
-                ["multiline"]: multiLine,
-                ["fullwidth"]: fullWidth,
-                ["dark"]: dark || appearance === "dark",
+                [`ic-input-component-container-${size}`]: true,
+                [`ic-input-component-container-${validationStatus}`]: hasValidationStatus,
+                [`ic-input-component-container-disabled`]: disabled,
+                [`ic-input-component-container-readonly`]: readonly,
+                ["ic-input-component-container-multiline"]: multiLine,
+                ["ic-input-component-container-full-width"]: fullWidth,
+                ["ic-input-component-container-dark"]: appearance === "dark",
             }, "aria-disabled": disabled && `${disabled}` }, h("div", { class: {
                 "focus-indicator": true,
-                dark: dark || appearance === "dark",
+                dark: appearance === "dark",
             } }, slotHasContent(this.el, "left-icon") && (h("div", { class: {
                 ["icon-container"]: true,
             } }, h("slot", { name: "left-icon" }))), h("slot", null), validationInline &&
@@ -84,27 +81,6 @@ export class InputComponentContainer {
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
-            "dark": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `appearance` to \"dark\" instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "dark",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -182,7 +158,7 @@ export class InputComponentContainer {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -199,28 +175,7 @@ export class InputComponentContainer {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
-            },
-            "small": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "small",
-                "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "\"medium\""
             },
             "validationInline": {
                 "type": "boolean",

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":"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","sourcesContent":["import { Component, Element, Host, Prop, forceUpdate, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n  IcSizes,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { checkSlotInChildMutations, slotHasContent } 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  private hostMutationObserver: MutationObserver;\n  @Element() el: HTMLIcInputComponentContainerElement;\n\n  /**\n   * The appearance of the input component container.\n   */\n  @Prop() appearance?: \"dark\" | \"default\" = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `appearance` to \"dark\" instead.\n   */\n  @Prop() dark?: boolean = false;\n\n  /**\n   *  If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: 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  /**\n   *  If `true`, the input component container will allow for multiple lines.\n   */\n  @Prop() multiLine: boolean = false;\n\n  /**\n   *  If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * The size of the input component container component.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   *  If `true`, the validation will display inline.\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, { childList: true });\n  }\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(({ type, addedNodes, removedNodes }) =>\n        type === \"childList\"\n          ? checkSlotInChildMutations(addedNodes, removedNodes, \"left-icon\")\n          : false\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      size,\n      small,\n      validationStatus,\n      disabled,\n      readonly,\n      multiLine,\n      fullWidth,\n      dark,\n      appearance,\n      validationInline,\n    } = this;\n    const hasValidationStatus =\n      this.validationStatus !== \"\" && !this.disabled && !this.readonly\n        ? true\n        : false;\n\n    return (\n      <Host\n        class={{\n          small: small,\n          [`${size}`]: true,\n          [validationStatus]: hasValidationStatus,\n          disabled: disabled,\n          readonly: readonly,\n          [\"multiline\"]: multiLine,\n          [\"fullwidth\"]: fullWidth,\n          [\"dark\"]: dark || appearance === \"dark\",\n        }}\n        aria-disabled={disabled && `${disabled}`}\n      >\n        <div\n          class={{\n            \"focus-indicator\": true,\n            dark: dark || appearance === \"dark\",\n          }}\n        >\n          {slotHasContent(this.el, \"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":"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","sourcesContent":["import { Component, Element, Host, Prop, forceUpdate, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n  IcSizes,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport { checkSlotInChildMutations, slotHasContent } 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  private hostMutationObserver: MutationObserver;\n  @Element() el: HTMLIcInputComponentContainerElement;\n\n  /**\n   * The appearance of the input component container.\n   */\n  @Prop() appearance?: \"dark\" | \"default\" = \"default\";\n\n  /**\n   *  If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: 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  /**\n   *  If `true`, the input component container will allow for multiple lines.\n   */\n  @Prop() multiLine: boolean = false;\n\n  /**\n   *  If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * The size of the input component container component.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   *  If `true`, the validation will display inline.\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, { childList: true });\n  }\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(({ type, addedNodes, removedNodes }) =>\n        type === \"childList\"\n          ? checkSlotInChildMutations(addedNodes, removedNodes, \"left-icon\")\n          : false\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      size,\n      validationStatus,\n      disabled,\n      readonly,\n      multiLine,\n      fullWidth,\n      appearance,\n      validationInline,\n    } = this;\n    const hasValidationStatus =\n      this.validationStatus !== \"\" && !this.disabled && !this.readonly\n        ? true\n        : false;\n\n    return (\n      <Host\n        class={{\n          [`ic-input-component-container-${size}`]: true,\n          [`ic-input-component-container-${validationStatus}`]:\n            hasValidationStatus,\n          [`ic-input-component-container-disabled`]: disabled,\n          [`ic-input-component-container-readonly`]: readonly,\n          [\"ic-input-component-container-multiline\"]: multiLine,\n          [\"ic-input-component-container-full-width\"]: fullWidth,\n          [\"ic-input-component-container-dark\"]: appearance === \"dark\",\n        }}\n        aria-disabled={disabled && `${disabled}`}\n      >\n        <div\n          class={{\n            \"focus-indicator\": true,\n            dark: appearance === \"dark\",\n          }}\n        >\n          {slotHasContent(this.el, \"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-component-container/test/basic/ic-input-component-container.spec.js

@@ -7,7 +7,7 @@ describe("ic-input-component-container", () => {
             html: `<ic-input-component-container>content</ic-input-component-container>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-component-container class="default">
+    <ic-input-component-container class="ic-input-component-container-medium">
       <div class="focus-indicator">
         content
       </div>
@@ -20,7 +20,7 @@ describe("ic-input-component-container", () => {
             html: `<ic-input-component-container validation-status="success">content</ic-input-component-container>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-component-container validation-status="success" class="default success">
+    <ic-input-component-container class="ic-input-component-container-medium ic-input-component-container-success" validation-status="success">
       <div class="focus-indicator">
         content
       </div>
@@ -33,7 +33,7 @@ describe("ic-input-component-container", () => {
             html: `<ic-input-component-container validation-status="success" validation-inline=true>content</ic-input-component-container>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-component-container class="default success" validation-inline="true" validation-status="success">
+    <ic-input-component-container class="ic-input-component-container-medium ic-input-component-container-success" validation-inline="true" validation-status="success">
       <div class="focus-indicator">
         content
         <span class="inline-success">
@@ -49,7 +49,7 @@ describe("ic-input-component-container", () => {
             html: `<ic-input-component-container validation-status="error" validation-inline=true>content</ic-input-component-container>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-component-container class="default error" validation-inline="true" validation-status="error">
+    <ic-input-component-container class="ic-input-component-container-error ic-input-component-container-medium" validation-inline="true" validation-status="error">
       <div class="focus-indicator">
         content
       </div>
@@ -62,7 +62,7 @@ describe("ic-input-component-container", () => {
             html: `<ic-input-component-container size="small" multi-line=true full-width=true>content</ic-input-component-container>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-component-container class="small fullwidth multiline" full-width="true" multi-line="true" size="small">
+    <ic-input-component-container class="ic-input-component-container-small ic-input-component-container-full-width ic-input-component-container-multiline" full-width="true" multi-line="true" size="small">
       <div class="focus-indicator">
         content
       </div>
@@ -75,7 +75,7 @@ describe("ic-input-component-container", () => {
             html: `<ic-input-component-container size=large>content</ic-input-component-container>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-component-container class="large" size="large">
+    <ic-input-component-container class="ic-input-component-container-large" size="large">
       <div class="focus-indicator">
         content
       </div>
@@ -88,7 +88,7 @@ describe("ic-input-component-container", () => {
             html: `<ic-input-component-container validation-status="success" disabled=true>content</ic-input-component-container>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-component-container validation-status="success" class="default disabled" aria-disabled="true" disabled="true">
+    <ic-input-component-container aria-disabled="true" class="ic-input-component-container-disabled ic-input-component-container-medium" disabled="true" validation-status="success">
       <div class="focus-indicator">
         content
       </div>
@@ -101,7 +101,7 @@ describe("ic-input-component-container", () => {
             html: `<ic-input-component-container validation-status="success" readonly=true>content</ic-input-component-container>`,
         });
         expect(page.root).toEqualHtml(`
-      <ic-input-component-container class="default readonly" readonly="true" validation-status="success">
+      <ic-input-component-container class="ic-input-component-container-medium ic-input-component-container-readonly" readonly="true" validation-status="success">
         <div class="focus-indicator">
           content
         </div>
@@ -114,7 +114,7 @@ describe("ic-input-component-container", () => {
             html: `<ic-input-component-container validation-status="success" disabled=true><span slot="left-icon">slotted content</span>content</ic-input-component-container>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-component-container class="default disabled" aria-disabled="true" disabled="true" validation-status="success">
+    <ic-input-component-container aria-disabled="true" class="ic-input-component-container-disabled ic-input-component-container-medium" disabled="true" validation-status="success">
       <div class="focus-indicator">
         <div class="icon-container">
           <span slot="left-icon">

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

@@ -1 +1 @@
-{"version":3,"file":"ic-input-component-container.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-component-container/test/basic/ic-input-component-container.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { InputComponentContainer } from \"../../ic-input-component-container\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-component-container\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"default\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should render with validation status\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\">content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container validation-status=\"success\" class=\"default success\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container> \n    `);\n  });\n\n  it(\"should render with validation inline\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" validation-inline=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"default success\" validation-inline=\"true\" validation-status=\"success\">\n      <div class=\"focus-indicator\">\n        content\n        <span class=\"inline-success\">\n          svg\n        </span>\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should ignore validation inline if not success\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"error\" validation-inline=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"default error\" validation-inline=\"true\" validation-status=\"error\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should render with size small, multiline & fullwidth props set\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container size=\"small\" multi-line=true full-width=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"small fullwidth multiline\" full-width=\"true\" multi-line=\"true\" size=\"small\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should render with size large\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container size=large>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"large\" size=\"large\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" disabled=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container validation-status=\"success\" class=\"default disabled\" aria-disabled=\"true\" disabled=\"true\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should render readonly\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" readonly=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-input-component-container class=\"default readonly\" readonly=\"true\" validation-status=\"success\">\n        <div class=\"focus-indicator\">\n          content\n        </div>\n      </ic-input-component-container>\n    `);\n  });\n\n  it(\"should render with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" disabled=true><span slot=\"left-icon\">slotted content</span>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"default disabled\" aria-disabled=\"true\" disabled=\"true\" validation-status=\"success\">\n      <div class=\"focus-indicator\">\n        <div class=\"icon-container\">\n          <span slot=\"left-icon\">\n            slotted content\n          </span>\n        </div>\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should test rendering icon after initial render\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container>content</ic-input-component-container>`,\n    });\n\n    const icon = document.createElement(\"svg\");\n    icon.setAttribute(\"slot\", \"left-icon\");\n\n    page.rootInstance.hostMutationCallback([\n      {\n        type: \"childList\",\n        addedNodes: [icon],\n        removedNodes: [],\n      },\n    ]);\n  });\n});\n"]}
+{"version":3,"file":"ic-input-component-container.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-component-container/test/basic/ic-input-component-container.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { InputComponentContainer } from \"../../ic-input-component-container\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-component-container\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"ic-input-component-container-medium\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should render with validation status\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\">content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"ic-input-component-container-medium ic-input-component-container-success\" validation-status=\"success\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container> \n    `);\n  });\n\n  it(\"should render with validation inline\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" validation-inline=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"ic-input-component-container-medium ic-input-component-container-success\" validation-inline=\"true\" validation-status=\"success\">\n      <div class=\"focus-indicator\">\n        content\n        <span class=\"inline-success\">\n          svg\n        </span>\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should ignore validation inline if not success\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"error\" validation-inline=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"ic-input-component-container-error ic-input-component-container-medium\" validation-inline=\"true\" validation-status=\"error\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should render with size small, multiline & fullwidth props set\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container size=\"small\" multi-line=true full-width=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"ic-input-component-container-small ic-input-component-container-full-width ic-input-component-container-multiline\" full-width=\"true\" multi-line=\"true\" size=\"small\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should render with size large\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container size=large>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container class=\"ic-input-component-container-large\" size=\"large\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" disabled=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container aria-disabled=\"true\" class=\"ic-input-component-container-disabled ic-input-component-container-medium\" disabled=\"true\" validation-status=\"success\">\n      <div class=\"focus-indicator\">\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should render readonly\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" readonly=true>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-input-component-container class=\"ic-input-component-container-medium ic-input-component-container-readonly\" readonly=\"true\" validation-status=\"success\">\n        <div class=\"focus-indicator\">\n          content\n        </div>\n      </ic-input-component-container>\n    `);\n  });\n\n  it(\"should render with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container validation-status=\"success\" disabled=true><span slot=\"left-icon\">slotted content</span>content</ic-input-component-container>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-component-container aria-disabled=\"true\" class=\"ic-input-component-container-disabled ic-input-component-container-medium\" disabled=\"true\" validation-status=\"success\">\n      <div class=\"focus-indicator\">\n        <div class=\"icon-container\">\n          <span slot=\"left-icon\">\n            slotted content\n          </span>\n        </div>\n        content\n      </div>\n    </ic-input-component-container>\n    `);\n  });\n\n  it(\"should test rendering icon after initial render\", async () => {\n    const page = await newSpecPage({\n      components: [InputComponentContainer],\n      html: `<ic-input-component-container>content</ic-input-component-container>`,\n    });\n\n    const icon = document.createElement(\"svg\");\n    icon.setAttribute(\"slot\", \"left-icon\");\n\n    page.rootInstance.hostMutationCallback([\n      {\n        type: \"childList\",\n        addedNodes: [icon],\n        removedNodes: [],\n      },\n    ]);\n  });\n});\n"]}

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

@@ -6,8 +6,8 @@ ic-input-label.with-helper {
   margin-bottom: var(--ic-space-xxxs);
 }
 
-ic-input-label.readonly {
-  color: var(--ic-color-tertiary-text);
+ic-input-label.ic-input-label-readonly {
+  --ic-typography-color: var(--ic-color-tertiary-text);
 }
 
 ic-input-label .helpertext {
@@ -15,23 +15,23 @@ ic-input-label .helpertext {
 }
 
 ic-input-label .helpertext-normal {
-  color: var(--ic-color-secondary-text);
+  --ic-typography-color: var(--ic-color-secondary-text);
 }
 
 ic-input-label .helpertext-readonly {
-  color: var(--ic-color-tertiary-text);
+  --ic-typography-color: var(--ic-color-tertiary-text);
 }
 
 ic-input-label .readonly-label {
-  color: var(--ic-color-secondary-text);
+  --ic-typography-color: var(--ic-color-secondary-text);
 }
 
 ic-input-label .error-label {
-  color: var(--ic-status-error);
+  --ic-typography-color: var(--ic-status-error);
 }
 
 ic-input-label .dark {
-  color: var(--ic-architectural-white);
+  --ic-typography-color: var(--ic-architectural-white);
 }
 
 /* Add back in after storybook has the `color-scheme: light dark` code */