@ukic/web-components 2.1.0-beta.8 → 2.2.0

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

@@ -0,0 +1,232 @@
+import { h, Host, } from "@stencil/core";
+import LeftArrow from "./assets/left-arrow.svg";
+import RightArrow from "./assets/right-arrow.svg";
+import { getSlotElements } from "../../utils/helpers";
+import { checkResizeObserver, elementOverflowsX } from "../../utils/helpers";
+import { IcThemeForegroundEnum } from "../../utils/types";
+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;
+      }
+      else {
+        this.itemOverflow = elementOverflowsX(this.itemsContainerEl);
+      }
+      if (this.itemOverflow) {
+        this.lastItemVisible =
+          this.itemsContainerEl.offsetWidth + this.itemsContainerEl.scrollLeft >=
+            this.itemsContainerEl.scrollWidth;
+      }
+    };
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.resizeObserverCallback();
+      });
+      this.resizeObserver.observe(this.itemsContainerEl);
+    };
+    this.scrollLeft = () => {
+      this.scrollItemIntoView(this.getCurrentLeftItem() - 1);
+    };
+    this.scrollRight = () => {
+      this.scrollItemIntoView(this.getCurrentLeftItem() + 1);
+    };
+    this.longScrollRight = () => {
+      this.scrollRight();
+      this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);
+    };
+    this.longScrollLeft = () => {
+      this.scrollLeft();
+      this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);
+    };
+    this.leftArrowMouseDownHandler = (e) => {
+      e.preventDefault();
+      this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);
+    };
+    this.rightArrowMouseDownHandler = (e) => {
+      e.preventDefault();
+      this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);
+    };
+    this.arrowMouseUpHandler = () => {
+      window.clearTimeout(this.scrollDelay);
+    };
+    this.getCurrentLeftItem = () => {
+      const index = this.itemOffsets.findIndex((el) => el > Math.round(this.itemsContainerEl.scrollLeft));
+      return index < 0 ? 0 : index;
+    };
+    this.scrollHandler = () => {
+      window.clearTimeout(this.isScrolling);
+      // Set a timeout to run after scrolling ends
+      this.isScrolling = window.setTimeout(this.scrollStopped, 50);
+    };
+    this.scrollStopped = () => {
+      // If scrollItemIntoView has been called, the button states will already be set
+      // Can't just handle it here as it causes strange jumping behaviour in positioning
+      const scrollLeft = Math.round(this.itemsContainerEl.scrollLeft);
+      if (this.buttonStateSet === false) {
+        this.firstItemVisible = scrollLeft === 0;
+        this.lastItemVisible =
+          this.itemsContainerEl.offsetWidth + scrollLeft >=
+            this.itemsContainerEl.scrollWidth;
+      }
+      this.buttonStateSet = false;
+    };
+    this.firstItemVisible = true;
+    this.itemOverflow = false;
+    this.lastItemVisible = false;
+    this.appearance = "default";
+  }
+  componentWillLoad() {
+    this.itemsContainerEl = this.el.children[0];
+    this.itemsContainerEl.addEventListener("scroll", this.scrollHandler);
+    this.items = (getSlotElements(this.itemsContainerEl) ||
+      Array.from(this.itemsContainerEl.children));
+    this.items.forEach((item) => {
+      if (item.addEventListener) {
+        item.addEventListener("focus", this.focusHandler);
+      }
+    });
+  }
+  componentDidLoad() {
+    let runningTotal = 0;
+    this.itemOffsets = this.items.map((item) => {
+      runningTotal += item.offsetWidth;
+      return runningTotal;
+    });
+    checkResizeObserver(this.runResizeObserver);
+    // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)
+    // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons
+    // - 'mouseup' otherwise not detected and scrolling not stopped
+    const scrollArrows = Array.from(this.el.shadowRoot.querySelectorAll("div"));
+    ["mouseup", "mouseleave"].forEach((event) => {
+      scrollArrows.forEach((arrow) => arrow.addEventListener(event, this.arrowMouseUpHandler));
+    });
+  }
+  disconnectedCallback() {
+    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;
+    return (h(Host, { class: {
+        ["visible"]: itemOverflow,
+        ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
+        ["light"]: this.appearance === IcThemeForegroundEnum.Light,
+      } }, h("div", { "aria-hidden": "true", class: {
+        ["scroll-container-left"]: true,
+        ["hidden"]: !itemOverflow,
+        ["disabled"]: firstItemVisible,
+      }, role: "tab" }, h("ic-button", { class: "scroll-arrow", variant: "icon", "aria-label": "Scroll left", appearance: appearance, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { class: "scroll-splitter-left" })), h("slot", null), h("div", { "aria-hidden": "true", class: {
+        ["scroll-container-right"]: true,
+        ["hidden"]: !itemOverflow,
+        ["disabled"]: lastItemVisible,
+      }, role: "tab" }, h("span", { class: "scroll-splitter-right" }), h("ic-button", { class: "scroll-arrow", variant: "icon", "aria-label": "Scroll right", appearance: appearance, innerHTML: RightArrow, disabled: lastItemVisible, tabindex: "-1", onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler }))));
+  }
+  static get is() { return "ic-horizontal-scroll"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["./ic-horizontal-scroll.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-horizontal-scroll.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcThemeForeground",
+          "resolved": "\"dark\" | \"default\" | \"light\"",
+          "references": {
+            "IcThemeForeground": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The appearance of the horizontal scroll, e.g. dark, light or the default."
+        },
+        "attribute": "appearance",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "firstItemVisible": {},
+      "itemOverflow": {},
+      "lastItemVisible": {}
+    };
+  }
+  static get methods() {
+    return {
+      "scrollItemIntoView": {
+        "complexType": {
+          "signature": "(itemPosition: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "if side scrolling enabled, scrolls the specified item into view."
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=ic-horizontal-scroll.js.map

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

@@ -0,0 +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  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          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-horizontal-scroll/test/a11y/ic-horizontal-scroll.test.a11y.js

@@ -0,0 +1,34 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+beforeEach(() => {
+  // IntersectionObserver isn't available in test environment
+  const mockResizeObserver = jest.fn();
+  mockResizeObserver.mockReturnValue({
+    observe: jest.fn().mockReturnValue(null),
+    unobserve: jest.fn().mockReturnValue(null),
+    disconnect: jest.fn().mockReturnValue(null),
+  });
+  window.ResizeObserver = mockResizeObserver;
+});
+describe("ic-horizontal-scroll", () => {
+  it("passes accessibility", async () => {
+    const div = document.createElement("div");
+    div.setAttribute("style", "width: 320px;");
+    const el = await fixture(`
+      <ic-horizontal-scroll>
+        <ul>
+          <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>
+        </ul>
+      </ic-horizontal-scroll>
+    `, { parentNode: div });
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-horizontal-scroll.test.a11y.js.map

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

@@ -4,12 +4,13 @@ ic-input-component-container {
    */
 
   display: flex;
-  border: 0.063rem solid var(--border-color, var(--ic-architectural-400));
+  border: var(--ic-space-1px) solid
+    var(--border-color, var(--ic-architectural-400));
   border-radius: var(--ic-border-radius);
   transition: var(--ic-easing-transition-slow);
   height: 2.5rem;
   width: var(--input-width, 20rem);
-  padding: 0.063rem;
+  padding: var(--ic-space-1px);
   background-color: var(--ic-architectural-white);
   box-sizing: border-box;
   fill: var(--ic-architectural-400);
@@ -22,7 +23,7 @@ ic-input-component-container.fullwidth {
 
 ic-input-component-container.disabled,
 ic-input-component-container.disabled:hover {
-  border: 0.063rem dashed var(--ic-architectural-200);
+  border: var(--ic-space-1px) dashed var(--ic-architectural-200);
 }
 
 ic-input-component-container.readonly,
@@ -32,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);
 }
@@ -96,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%;
@@ -126,12 +155,12 @@ ic-input-component-container:hover {
   }
 
   ic-input-component-container:focus-within {
-    border: 0.063rem solid Highlight;
+    border: var(--ic-space-1px) solid Highlight;
     outline: 0.125rem solid Highlight;
   }
 
   ic-input-component-container.disabled,
   ic-input-component-container.disabled:hover {
-    border: 0.063rem dashed GrayText;
+    border: var(--ic-space-1px) dashed GrayText;
   }
 }