@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

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

@@ -1 +1 @@
-{"version":3,"file":"ic-hero.js","sourceRoot":"","sources":["../../../src/components/ic-hero/ic-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  /**\n   * The heading of the hero.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * 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"]}
+{"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  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n  @State() rightContent: boolean = false;\n  // set by above state\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n  @State() scrollFactor: string = \"right -100px\";\n\n  /**\n   * The alignment of the hero.\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The optional background image.\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * The alignment of the hero content.\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\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 heading of the hero.\n   */\n  @Prop() heading!: 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   * If `true`, the small styling will be applied to the hero.\n   */\n  @Prop() small: boolean = false;\n\n  /**\n   * The description for the hero.\n   */\n  @Prop() subheading?: string;\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  @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  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-hero/{ic-hero.test.a11y.js → test/a11y/ic-hero.test.a11y.js}

@@ -1,6 +1,6 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 describe("ic-hero", () => {
   it("passes accessibility", async () => {
     const el = await fixture(`<ic-hero heading="Test" subheading="Test"></ic-hero>`);

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-hero.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-hero/test/a11y/ic-hero.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,sDAAsD,CACvD,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-hero\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-hero heading=\"Test\" subheading=\"Test\"></ic-hero>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-hero/test/basic/ic-hero.spec.js

@@ -0,0 +1,76 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Hero } from "../../ic-hero";
+describe("ic-hero component", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text"></ic-hero>`,
+    });
+    expect(page.root).toMatchSnapshot("renders");
+  });
+  it("should render with a secondary heading", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text" secondary-heading="Test title" secondary-subheading="Test text"></ic-hero>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-secondary-heading");
+  });
+  it("should render with interaction content", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text"><ic-button slot="interaction">Button</ic-button></ic-hero>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-interaction-content");
+  });
+  it("should render with secondary content", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text"><ic-card slot="secondary" heading="Test card"></ic-card></ic-hero>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-secondary-content");
+  });
+  it("should render with a background image when given", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text" background-image="test.png"><ic-card slot="secondary" heading="Test card"></ic-card></ic-hero>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-background-image");
+  });
+  it("should use parallax on scroll when a background image is given", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text" background-image="test.png"><ic-card slot="secondary" heading="Test card"></ic-card></ic-hero>`,
+    });
+    page.doc.scrollingElement.scrollTop = 50;
+    page.doc.dispatchEvent(new CustomEvent("scroll"));
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("renders-with-parallax-on-scroll");
+  });
+  it("should use not parallax on scroll when a background image is given, but parallax disabled", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" disable-background-parallax subheading="Test text" background-image="test.png"><ic-card slot="secondary" heading="Test card"></ic-card></ic-hero>`,
+    });
+    page.doc.scrollingElement.scrollTop = 50;
+    page.doc.dispatchEvent(new CustomEvent("scroll"));
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("renders-with-parallax-on-scroll-disabled");
+  });
+  it("should render small", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero small heading="Test title" subheading="Test text"></ic-hero>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-small-variant");
+  });
+  it("correctly sets foregroundColor on theme change", async () => {
+    const page = await newSpecPage({
+      components: [Hero],
+      html: `<ic-hero heading="Test title" subheading="Test text"></ic-hero>`,
+    });
+    await page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.foregroundColor).toBe("dark");
+  });
+});
+//# sourceMappingURL=ic-hero.spec.js.map

package/dist/collection/components/ic-hero/test/basic/ic-hero.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-hero.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-hero/test/basic/ic-hero.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Hero } from \"../../ic-hero\";\n\ndescribe(\"ic-hero component\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders\");\n  });\n\n  it(\"should render with a secondary heading\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\" secondary-heading=\"Test title\" secondary-subheading=\"Test text\"></ic-hero>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-secondary-heading\");\n  });\n\n  it(\"should render with interaction content\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"><ic-button slot=\"interaction\">Button</ic-button></ic-hero>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-interaction-content\");\n  });\n\n  it(\"should render with secondary content\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"><ic-card slot=\"secondary\" heading=\"Test card\"></ic-card></ic-hero>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-secondary-content\");\n  });\n\n  it(\"should render with a background image when given\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\" background-image=\"test.png\"><ic-card slot=\"secondary\" heading=\"Test card\"></ic-card></ic-hero>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-background-image\");\n  });\n\n  it(\"should use parallax on scroll when a background image is given\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\" background-image=\"test.png\"><ic-card slot=\"secondary\" heading=\"Test card\"></ic-card></ic-hero>`,\n    });\n\n    page.doc.scrollingElement.scrollTop = 50;\n    page.doc.dispatchEvent(new CustomEvent(\"scroll\"));\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\"renders-with-parallax-on-scroll\");\n  });\n\n  it(\"should use not parallax on scroll when a background image is given, but parallax disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" disable-background-parallax subheading=\"Test text\" background-image=\"test.png\"><ic-card slot=\"secondary\" heading=\"Test card\"></ic-card></ic-hero>`,\n    });\n\n    page.doc.scrollingElement.scrollTop = 50;\n    page.doc.dispatchEvent(new CustomEvent(\"scroll\"));\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-parallax-on-scroll-disabled\"\n    );\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero small heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-small-variant\");\n  });\n\n  it(\"correctly sets foregroundColor on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [Hero],\n      html: `<ic-hero heading=\"Test title\" subheading=\"Test text\"></ic-hero>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.foregroundColor).toBe(\"dark\");\n  });\n});\n"]}

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

@@ -8,6 +8,9 @@ const SCROLL_DELAY_MS = 200;
 export class HorizontalScroll {
   constructor() {
     this.buttonStateSet = false;
+    this.focusHandler = (event) => {
+      this.itemFocusHandler(Array.from(this.items).indexOf(event.target));
+    };
     this.resizeObserverCallback = () => {
       if (this.el.clientWidth >= this.itemsContainerEl.scrollWidth) {
         this.itemOverflow = false;
@@ -73,27 +76,10 @@ export class HorizontalScroll {
       }
       this.buttonStateSet = false;
     };
-    this.appearance = "default";
     this.firstItemVisible = true;
-    this.lastItemVisible = false;
     this.itemOverflow = false;
-  }
-  /**
-   * @internal if side scrolling enabled, scrolls the specified item into view.
-   */
-  async scrollItemIntoView(itemPosition) {
-    this.firstItemVisible = itemPosition <= 0;
-    const newScrollPos = itemPosition <= 0 ? 0 : this.itemOffsets[itemPosition - 1];
-    this.lastItemVisible =
-      this.itemsContainerEl.offsetWidth + newScrollPos >=
-        this.itemsContainerEl.scrollWidth;
-    this.buttonStateSet = true;
-    this.itemsContainerEl.scrollLeft = newScrollPos;
-  }
-  itemFocusHandler(itemPosition) {
-    if (this.itemOverflow) {
-      this.scrollItemIntoView(itemPosition);
-    }
+    this.lastItemVisible = false;
+    this.appearance = "default";
   }
   componentWillLoad() {
     this.itemsContainerEl = this.el.children[0];
@@ -102,7 +88,7 @@ export class HorizontalScroll {
       Array.from(this.itemsContainerEl.children));
     this.items.forEach((item) => {
       if (item.addEventListener) {
-        item.addEventListener("focus", () => this.itemFocusHandler(Array.from(this.items).indexOf(item)));
+        item.addEventListener("focus", this.focusHandler);
       }
     });
   }
@@ -125,6 +111,33 @@ export class HorizontalScroll {
     if (this.resizeObserver !== undefined) {
       this.resizeObserver.disconnect();
     }
+    const scrollArrows = Array.from(this.el.shadowRoot.querySelectorAll("div"));
+    ["mouseup", "mouseleave"].forEach((event) => {
+      scrollArrows.forEach((arrow) => arrow.removeEventListener(event, this.arrowMouseUpHandler));
+    });
+    this.items.forEach((item) => {
+      if (item.removeEventListener) {
+        item.removeEventListener("focus", this.focusHandler);
+      }
+    });
+    this.itemsContainerEl.removeEventListener("scroll", this.scrollHandler);
+  }
+  /**
+   * @internal if side scrolling enabled, scrolls the specified item into view.
+   */
+  async scrollItemIntoView(itemPosition) {
+    this.firstItemVisible = itemPosition <= 0;
+    const newScrollPos = itemPosition <= 0 ? 0 : this.itemOffsets[itemPosition - 1];
+    this.lastItemVisible =
+      this.itemsContainerEl.offsetWidth + newScrollPos >=
+        this.itemsContainerEl.scrollWidth;
+    this.buttonStateSet = true;
+    this.itemsContainerEl.scrollLeft = newScrollPos;
+  }
+  itemFocusHandler(itemPosition) {
+    if (this.itemOverflow) {
+      this.scrollItemIntoView(itemPosition);
+    }
   }
   render() {
     const { appearance, firstItemVisible, lastItemVisible, itemOverflow } = this;
@@ -184,8 +197,8 @@ export class HorizontalScroll {
   static get states() {
     return {
       "firstItemVisible": {},
-      "lastItemVisible": {},
-      "itemOverflow": {}
+      "itemOverflow": {},
+      "lastItemVisible": {}
     };
   }
   static get methods() {

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  @Element() el: HTMLIcHorizontalScrollElement;\n\n  /**\n   * The appearance of the horizontal scroll, e.g. dark, light or the default.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  @State() firstItemVisible: boolean = true;\n  @State() lastItemVisible: boolean = false;\n  @State() itemOverflow: boolean = false;\n\n  private itemOffsets: number[];\n  private itemsContainerEl: HTMLElement;\n  private items: HTMLElement[];\n  private resizeObserver: ResizeObserver;\n  private isScrolling: number;\n  private scrollDelay: number;\n  private buttonStateSet: boolean = false;\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  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  componentWillLoad(): void {\n    this.itemsContainerEl = this.el.children[0] as HTMLElement;\n    this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n\n    this.items = (getSlotElements(this.itemsContainerEl) ||\n      Array.from(this.itemsContainerEl.children)) as HTMLElement[];\n    this.items.forEach((item) => {\n      if (item.addEventListener) {\n        item.addEventListener(\"focus\", () =>\n          this.itemFocusHandler(Array.from(this.items).indexOf(item))\n        );\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\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        >\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        >\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  componentWillLoad(): void {\n    this.itemsContainerEl = this.el.children[0] as HTMLElement;\n    this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n\n    this.items = (getSlotElements(this.itemsContainerEl) ||\n      Array.from(this.itemsContainerEl.children)) as HTMLElement[];\n    this.items.forEach((item) => {\n      if (item.addEventListener) {\n        item.addEventListener(\"focus\", 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(\"focus\", 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        >\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        >\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-horizontal-scroll/{ic-horizontal-scroll.test.a11y.js → test/a11y/ic-horizontal-scroll.test.a11y.js}

@@ -1,6 +1,6 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 beforeEach(() => {
   // IntersectionObserver isn't available in test environment
   const mockResizeObserver = jest.fn();

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-horizontal-scroll.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-horizontal-scroll/test/a11y/ic-horizontal-scroll.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EACrC,kBAAkB,CAAC,eAAe,CAAC;IACjC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,cAAc,GAAG,kBAAkB,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;EACpC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAC3C,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB;;;;;;;;;;;KAWD,EACC,EAAE,UAAU,EAAE,GAAG,EAAE,CACpB,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockResizeObserver = jest.fn();\n  mockResizeObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.ResizeObserver = mockResizeObserver;\n});\n\ndescribe(\"ic-horizontal-scroll\", () => {\n  it(\"passes accessibility\", async () => {\n    const div = document.createElement(\"div\");\n    div.setAttribute(\"style\", \"width: 320px;\");\n    const el = await fixture(\n      `\n      <ic-horizontal-scroll>\n        <ul>\n          <ic-navigation-item label=\"Test nav item 1\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 2\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 3\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 4\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 5\"></ic-navigation-item>\n          <ic-navigation-item label=\"Test nav item 6\"></ic-navigation-item>\n        </ul>\n      </ic-horizontal-scroll>\n    `,\n      { parentNode: div }\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-horizontal-scroll/test/basic/ic-horizontal-scroll.spec.js

@@ -0,0 +1,180 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { NavigationItem } from "../../../ic-navigation-item/ic-navigation-item";
+import { HorizontalScroll } from "../../ic-horizontal-scroll";
+const testHorizontalScroll = `<ic-horizontal-scroll>
+  <div>
+    <ic-navigation-item label="Test nav item 1"></ic-navigation-item>
+    <ic-navigation-item label="Test nav item 2"></ic-navigation-item>
+    <ic-navigation-item label="Test nav item 3"></ic-navigation-item>
+    <ic-navigation-item label="Test nav item 4"></ic-navigation-item>
+    <ic-navigation-item label="Test nav item 5"></ic-navigation-item>
+    <ic-navigation-item label="Test nav item 6"></ic-navigation-item>
+  </div>
+  </ic-horizontal-scroll>`;
+describe("ic-horizontal-scroll", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    expect(page.root).toMatchSnapshot("renders");
+  });
+  it("should render the correct HTML for the chosen appearance", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    expect(page.root).toMatchSnapshot("renders-appearance");
+  });
+  it("should scroll item into view", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    page.rootInstance.scrollItemIntoView(6);
+    expect(page.rootInstance.buttonStateSet).toBe(true);
+  });
+  it("should long scroll left", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    page.rootInstance.longScrollLeft();
+    page.waitForChanges();
+    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);
+  });
+  it("should long scroll right", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    page.rootInstance.longScrollRight();
+    page.waitForChanges();
+    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);
+  });
+  it("should delay on left arrow mouse down and set a timeout after the scrolling ends", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    const event = new Event("mousedown", {
+      bubbles: true,
+      cancelable: true,
+    });
+    page.rootInstance.leftArrowMouseDownHandler(event);
+    page.waitForChanges();
+    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);
+    page.rootInstance.isScrolling = 200;
+    page.waitForChanges();
+    page.rootInstance.scrollHandler();
+    expect(page.rootInstance.isScrolling._idleNext.msecs).toBe(50);
+  });
+  it("should delay on right arrow mouse down and revoke delay on mouse up", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    const event = new Event("mousedown", {
+      bubbles: true,
+      cancelable: true,
+    });
+    page.rootInstance.rightArrowMouseDownHandler(event);
+    page.waitForChanges();
+    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);
+    page.rootInstance.arrowMouseUpHandler();
+    expect(page.rootInstance.scrollDelay._idleNext).toBeNull();
+  });
+  it("should stop scrolling if mouse leaves the scroll button", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    const scrollContainer = page.root.shadowRoot.querySelector(".scroll-container-right");
+    const mouseDownEvent = new Event("mousedown", {
+      bubbles: true,
+      cancelable: true,
+    });
+    const mouseLeaveEvent = new Event("mouseleave", {
+      bubbles: true,
+      cancelable: true,
+    });
+    page.rootInstance.rightArrowMouseDownHandler(mouseDownEvent);
+    page.waitForChanges();
+    scrollContainer.dispatchEvent(mouseLeaveEvent);
+    page.waitForChanges();
+    expect(page.rootInstance.arrowMouseUpHandler()).toHaveBeenCalled;
+  });
+  it("should stop scrolling", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    //when buttonStateSet is true
+    page.rootInstance.buttonStateSet = true;
+    page.rootInstance.scrollStopped();
+    page.waitForChanges();
+    expect(page.rootInstance.buttonStateSet).toBe(false);
+    //when buttonStateSet is false
+    page.rootInstance.itemsContainerEl.scrollLeft = 0;
+    page.rootInstance.scrollStopped();
+    page.waitForChanges();
+    expect(page.rootInstance.firstItemVisible).toBe(true);
+  });
+  it("should handle item focus", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: testHorizontalScroll,
+    });
+    page.rootInstance.itemOverflow = true;
+    page.waitForChanges();
+    const item = page.root.querySelector("[label='Test nav item 4']");
+    item.focus();
+    page.waitForChanges();
+    expect(page.rootInstance.itemFocusHandler()).toHaveBeenCalled;
+    expect(page.rootInstance.firstItemVisible).toBe(false);
+  });
+  it("should render scroll arrows when items overflow", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: `<ic-horizontal-scroll>
+        <div>
+        <ic-navigation-item label="Test nav item 1"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 2"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 3"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 4"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 5"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 6"></ic-navigation-item>
+        </div>
+      </ic-horizontal-scroll>`,
+    });
+    page.rootInstance.itemOverflow = true;
+    page.waitForChanges();
+    const scroll = page.root.shadowRoot.querySelector(".scroll-arrow");
+    expect(scroll).not.toBeNull();
+    //call runResizeObserver
+    page.rootInstance.runResizeObserver();
+    //test disconnected callback
+    page.setContent("");
+  });
+  it("should set itemOverflow to true where scrollWidth > clientWidth on the scroll container element", async () => {
+    const page = await newSpecPage({
+      components: [HorizontalScroll, NavigationItem],
+      html: `<ic-horizontal-scroll>
+        <div>
+        <ic-navigation-item label="Test nav item 1"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 2"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 3"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 4"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 5"></ic-navigation-item>
+        <ic-navigation-item label="Test nav item 6"></ic-navigation-item>
+        </div>
+      </ic-horizontal-scroll>`,
+    });
+    page.rootInstance.itemsContainerEl.scrollWidth = 100;
+    page.rootInstance.itemsContainerEl.clientWidth = 50;
+    page.rootInstance.resizeObserverCallback();
+    page.waitForChanges();
+    expect(page.rootInstance.itemOverflow).toBe(true);
+  });
+});
+//# sourceMappingURL=ic-horizontal-scroll.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-horizontal-scroll.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-horizontal-scroll/test/basic/ic-horizontal-scroll.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\nimport { HorizontalScroll } from \"../../ic-horizontal-scroll\";\n\nconst testHorizontalScroll = `<ic-horizontal-scroll>\n  <div>\n    <ic-navigation-item label=\"Test nav item 1\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 2\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 3\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 4\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 5\"></ic-navigation-item>\n    <ic-navigation-item label=\"Test nav item 6\"></ic-navigation-item>\n  </div>\n  </ic-horizontal-scroll>`;\n\ndescribe(\"ic-horizontal-scroll\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders\");\n  });\n\n  it(\"should render the correct HTML for the chosen appearance\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-appearance\");\n  });\n\n  it(\"should scroll item into view\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    page.rootInstance.scrollItemIntoView(6);\n    expect(page.rootInstance.buttonStateSet).toBe(true);\n  });\n\n  it(\"should long scroll left\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    page.rootInstance.longScrollLeft();\n    page.waitForChanges();\n\n    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);\n  });\n\n  it(\"should long scroll right\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    page.rootInstance.longScrollRight();\n    page.waitForChanges();\n\n    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);\n  });\n\n  it(\"should delay on left arrow mouse down and set a timeout after the scrolling ends\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    const event = new Event(\"mousedown\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    page.rootInstance.leftArrowMouseDownHandler(event);\n    page.waitForChanges();\n\n    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);\n\n    page.rootInstance.isScrolling = 200;\n    page.waitForChanges();\n\n    page.rootInstance.scrollHandler();\n\n    expect(page.rootInstance.isScrolling._idleNext.msecs).toBe(50);\n  });\n\n  it(\"should delay on right arrow mouse down and revoke delay on mouse up\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    const event = new Event(\"mousedown\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    page.rootInstance.rightArrowMouseDownHandler(event);\n    page.waitForChanges();\n\n    expect(page.rootInstance.scrollDelay._idleNext.msecs).toBe(200);\n\n    page.rootInstance.arrowMouseUpHandler();\n    expect(page.rootInstance.scrollDelay._idleNext).toBeNull();\n  });\n\n  it(\"should stop scrolling if mouse leaves the scroll button\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    const scrollContainer = page.root.shadowRoot.querySelector(\n      \".scroll-container-right\"\n    );\n    const mouseDownEvent = new Event(\"mousedown\", {\n      bubbles: true,\n      cancelable: true,\n    });\n    const mouseLeaveEvent = new Event(\"mouseleave\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    page.rootInstance.rightArrowMouseDownHandler(mouseDownEvent);\n    page.waitForChanges();\n\n    scrollContainer.dispatchEvent(mouseLeaveEvent);\n    page.waitForChanges();\n\n    expect(page.rootInstance.arrowMouseUpHandler()).toHaveBeenCalled;\n  });\n\n  it(\"should stop scrolling\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    //when buttonStateSet is true\n    page.rootInstance.buttonStateSet = true;\n    page.rootInstance.scrollStopped();\n    page.waitForChanges();\n\n    expect(page.rootInstance.buttonStateSet).toBe(false);\n\n    //when buttonStateSet is false\n    page.rootInstance.itemsContainerEl.scrollLeft = 0;\n    page.rootInstance.scrollStopped();\n    page.waitForChanges();\n\n    expect(page.rootInstance.firstItemVisible).toBe(true);\n  });\n\n  it(\"should handle item focus\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: testHorizontalScroll,\n    });\n\n    page.rootInstance.itemOverflow = true;\n    page.waitForChanges();\n\n    const item: HTMLElement = page.root.querySelector(\n      \"[label='Test nav item 4']\"\n    );\n    item.focus();\n    page.waitForChanges();\n\n    expect(page.rootInstance.itemFocusHandler()).toHaveBeenCalled;\n    expect(page.rootInstance.firstItemVisible).toBe(false);\n  });\n\n  it(\"should render scroll arrows when items overflow\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: `<ic-horizontal-scroll>\n        <div>\n        <ic-navigation-item label=\"Test nav item 1\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 2\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 3\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 4\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 5\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 6\"></ic-navigation-item>\n        </div>\n      </ic-horizontal-scroll>`,\n    });\n\n    page.rootInstance.itemOverflow = true;\n    page.waitForChanges();\n    const scroll = page.root.shadowRoot.querySelector(\".scroll-arrow\");\n\n    expect(scroll).not.toBeNull();\n\n    //call runResizeObserver\n    page.rootInstance.runResizeObserver();\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n\n  it(\"should set itemOverflow to true where scrollWidth > clientWidth on the scroll container element\", async () => {\n    const page = await newSpecPage({\n      components: [HorizontalScroll, NavigationItem],\n      html: `<ic-horizontal-scroll>\n        <div>\n        <ic-navigation-item label=\"Test nav item 1\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 2\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 3\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 4\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 5\"></ic-navigation-item>\n        <ic-navigation-item label=\"Test nav item 6\"></ic-navigation-item>\n        </div>\n      </ic-horizontal-scroll>`,\n    });\n\n    page.rootInstance.itemsContainerEl.scrollWidth = 100;\n    page.rootInstance.itemsContainerEl.clientWidth = 50;\n    page.rootInstance.resizeObserverCallback();\n    page.waitForChanges();\n\n    expect(page.rootInstance.itemOverflow).toBe(true);\n  });\n});\n"]}

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

@@ -33,20 +33,44 @@ ic-input-component-container.readonly:hover {
 }
 
 ic-input-component-container.error {
-  border: var(--ic-space-xxxs) solid var(--ic-status-error);
+  border: var(--ic-error-border-default);
   padding: 0;
 }
 
+ic-input-component-container.error:hover {
+  border: var(--ic-error-border-hover);
+}
+
+ic-input-component-container.error:focus-within {
+  border: var(--ic-error-border-pressed);
+}
+
 ic-input-component-container.warning {
-  border: var(--ic-space-xxxs) solid var(--ic-status-warning-mid);
+  border: var(--ic-warning-border-default);
   padding: 0;
 }
 
+ic-input-component-container.warning:hover {
+  border: var(--ic-warning-border-hover);
+}
+
+ic-input-component-container.warning:focus-within {
+  border: var(--ic-warning-border-pressed);
+}
+
 ic-input-component-container.success {
-  border: var(--ic-space-xxxs) solid var(--ic-status-success);
+  border: var(--ic-success-border-default);
   padding: 0;
 }
 
+ic-input-component-container.success:hover {
+  border: var(--ic-success-border-hover);
+}
+
+ic-input-component-container.success:focus-within {
+  border: var(--ic-success-border-pressed);
+}
+
 ic-input-component-container.small {
   height: var(--ic-space-xl);
 }
@@ -97,10 +121,14 @@ ic-input-component-container .inline-success > svg {
 }
 
 ic-input-component-container:hover {
-  border-color: var(--ic-action-dark-hover);
+  border: var(--ic-border-hover);
   color: var(--ic-action-dark-hover);
 }
 
+ic-input-component-container:focus {
+  border: var(--ic-border-pressed);
+}
+
 .focus-indicator {
   display: flex;
   width: 100%;