genesys-spark-components 4.0.0-beta.34 → 4.0.0-beta.35

package/dist/cjs/{usage-b1e23593.js → usage-7e2e71dc.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const name = "genesys-spark-components";
-const version = "4.0.0-beta.34";
+const version = "4.0.0-beta.35";
 const description = "Common webcomponents";
 const license = "MIT";
 const main = "dist/stencil-wrapper.js";

package/dist/collection/collection-manifest.json

@@ -27,6 +27,10 @@
     "./components/legacy/gux-simple-toast-legacy/gux-simple-toast.js",
     "./components/legacy/gux-switch-legacy/gux-switch.js",
     "./components/legacy/gux-switch-legacy/gux-switch-item/gux-switch-item.js",
+    "./components/legacy/gux-tabs-advanced-legacy/gux-tabs-advanced.js",
+    "./components/legacy/gux-tabs-advanced-legacy/gux-tab-advanced/gux-tab-advanced.js",
+    "./components/legacy/gux-tabs-advanced-legacy/gux-tab-advanced-list/gux-tab-advanced-list.js",
+    "./components/legacy/gux-tabs-advanced-legacy/gux-tab-advanced-panel/gux-tab-advanced-panel.js",
     "./components/stable/gux-accordion/gux-accordion.js",
     "./components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.js",
     "./components/stable/gux-action-button/gux-action-button.js",

package/dist/collection/components/legacy/gux-tabs-advanced-legacy/gux-tab-advanced/gux-tab-advanced.css

@@ -0,0 +1,117 @@
+.gux-tab-sorting :focus-within {
+  margin-bottom: 4px;
+}
+
+gux-tab-advanced-legacy:not(:last-child) .gux-tab:not(.gux-dropdown-options) .gux-tab-button {
+  border-right: 1px solid #d7dce5;
+}
+gux-tab-advanced-legacy:not(:last-child) .gux-dropdown-options .gux-tab-options-button {
+  border-right: 1px solid #d7dce5;
+}
+gux-tab-advanced-legacy .gux-tab {
+  display: flex;
+  align-items: center;
+  width: 126px;
+  height: 50px;
+  padding-bottom: 2px;
+  overflow: hidden;
+  border-radius: 4px 4px 0 0;
+  transition: width 0.4s ease-out;
+}
+gux-tab-advanced-legacy .gux-tab .gux-tab-button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  width: 125px;
+  height: 50px;
+  padding-right: 0;
+  padding-left: 16px;
+  color: #000;
+  background-color: #f6f7f9;
+  border: none;
+}
+gux-tab-advanced-legacy .gux-tab .gux-tab-button:focus-visible {
+  height: 90%;
+  border: 3px solid #aac9ff;
+  border-radius: 5px;
+  outline: none;
+}
+gux-tab-advanced-legacy .gux-tab.gux-show {
+  width: 160px;
+}
+gux-tab-advanced-legacy .gux-tab.gux-show.gux-disabled .gux-tab-button {
+  color: rgba(0, 0, 0, 0.5);
+}
+gux-tab-advanced-legacy .gux-tab.gux-show.gux-disabled .gux-tab-options-button {
+  color: rgba(46, 57, 76, 0.5);
+  pointer-events: none;
+  cursor: default;
+}
+gux-tab-advanced-legacy .gux-tab .gux-tab-options-button {
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  height: 30px;
+  padding: 0;
+  cursor: pointer;
+  background-color: #f6f7f9;
+  border: none;
+}
+gux-tab-advanced-legacy .gux-tab .gux-tab-options-button:focus-visible {
+  outline: none;
+}
+gux-tab-advanced-legacy .gux-tab .gux-tab-options-button:focus-visible gux-icon {
+  padding-right: 0;
+  padding-left: 0;
+  border: 3px solid #aac9ff;
+  border-radius: 5px;
+}
+gux-tab-advanced-legacy .gux-tab .gux-tab-options-button gux-icon {
+  width: 16px;
+  height: 16px;
+  padding-right: 16px;
+  padding-left: 8px;
+  transition: color 0.25s;
+}
+gux-tab-advanced-legacy .gux-tab:not(.gux-dropdown-options) .gux-tab-button {
+  width: 160px;
+  height: 30px;
+  padding-right: 16px;
+}
+gux-tab-advanced-legacy .gux-tab:not(.gux-dropdown-options) .gux-tab-button:focus-visible {
+  height: 90%;
+  border: 3px solid #aac9ff;
+  border-radius: 5px;
+  outline: none;
+}
+gux-tab-advanced-legacy .gux-tab .tab-icon-container {
+  display: flex;
+  flex: 0 0 16px;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  margin-right: 8px;
+}
+gux-tab-advanced-legacy .gux-tab .tab-icon-container gux-icon {
+  width: 100%;
+}
+gux-tab-advanced-legacy .gux-tab.gux-selected {
+  padding-bottom: 0;
+  background-color: #fdfdfd;
+  border-bottom: 2px solid #2a60c8;
+}
+gux-tab-advanced-legacy .gux-tab.gux-selected .gux-tab-button {
+  background-color: #fdfdfd;
+}
+gux-tab-advanced-legacy .gux-tab.gux-selected .gux-tab-options-button {
+  background-color: #fdfdfd;
+}
+gux-tab-advanced-legacy .gux-tab:hover:not(.gux-selected):not(.gux-disabled) {
+  padding-bottom: 0;
+  border-bottom: 2px solid #8a97ad;
+}
+gux-tab-advanced-legacy .gux-tab gux-tooltip-title {
+  font-size: 14px;
+  white-space: nowrap;
+}

package/dist/collection/components/legacy/gux-tabs-advanced-legacy/gux-tab-advanced/gux-tab-advanced.js

@@ -0,0 +1,317 @@
+import { h, writeTask } from '@stencil/core';
+import { eventIsFrom } from '@utils/dom/event-is-from';
+import { randomHTMLId } from '@utils/dom/random-html-id';
+import { afterNextRenderTimeout } from '@utils/dom/after-next-render';
+import { buildI18nForComponent } from '../../../../i18n';
+import tabsResources from '../i18n/en.json';
+/**
+ * @slot default - gux-icon (optional) and text node (required)
+ * @slot dropdown-options - optional slot for tab options, must slot a gux-list element with gux-list-item children
+ */
+export class GuxTabAdvancedLegacy {
+  constructor() {
+    this.dropdownOptionsButtonId = randomHTMLId();
+    this.tabTitle = '';
+    this.focusinFromClick = false;
+    this.tabId = undefined;
+    this.active = false;
+    this.guxDisabled = false;
+    this.popoverHidden = true;
+    this.hasAnimated = false;
+  }
+  onFocusin(event) {
+    if (!this.focusinFromClick &&
+      event.target.classList.contains('gux-tab-button')) {
+      void this.tooltipTitleElement.setShowTooltip();
+    }
+  }
+  onFocusout(event) {
+    if (!this.root.querySelector('.gux-tab').contains(event.relatedTarget)) {
+      this.popoverHidden = true;
+    }
+    if (event.target.classList.contains('gux-tab-button')) {
+      void this.tooltipTitleElement.setHideTooltip();
+    }
+    this.focusinFromClick = false;
+  }
+  onKeydown(event) {
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'Enter':
+        if (eventIsFrom('.gux-tab-options-button', event)) {
+          event.preventDefault();
+          this.popoverHidden = false;
+          this.focusFirstItemInPopupList();
+        }
+        break;
+      case 'Escape':
+        if (eventIsFrom('gux-list[slot="dropdown-options"]', event)) {
+          event.stopPropagation();
+          this.popoverHidden = true;
+          afterNextRenderTimeout(() => {
+            var _a;
+            (_a = this.tabOptionsButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
+          });
+        }
+        break;
+    }
+  }
+  onKeyup(event) {
+    switch (event.key) {
+      case ' ':
+        if (eventIsFrom('.gux-tab-options-button', event)) {
+          this.focusFirstItemInPopupList();
+        }
+    }
+  }
+  onClick(event) {
+    if (eventIsFrom('.gux-tab-options-button', event)) {
+      return;
+    }
+    if (!this.active && !this.guxDisabled) {
+      this.internalactivatetabpanel.emit(this.tabId);
+    }
+  }
+  onMouseDown() {
+    this.focusinFromClick = true;
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxSetActive(active) {
+    this.active = active;
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxGetActive() {
+    return this.active;
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxFocus() {
+    this.buttonElement.focus();
+  }
+  get hasDropdownOptions() {
+    return Boolean(this.root.querySelector('gux-list[slot="dropdown-options"]'));
+  }
+  focusFirstItemInPopupList() {
+    const listElement = this.root.querySelector('gux-list[slot="dropdown-options"]');
+    afterNextRenderTimeout(() => {
+      void (listElement === null || listElement === void 0 ? void 0 : listElement.guxFocusFirstItem());
+    });
+  }
+  toggleOptions() {
+    this.popoverHidden = !this.popoverHidden;
+  }
+  onSelectDropdownOption(e) {
+    this.popoverHidden = true;
+    e.stopPropagation();
+    afterNextRenderTimeout(() => {
+      this.tabOptionsButtonElement.focus();
+    });
+  }
+  async componentWillLoad() {
+    this.i18n = await buildI18nForComponent(this.root, tabsResources, 'gux-tabs-advanced');
+  }
+  componentDidLoad() {
+    this.tabTitle = this.root
+      .querySelector('gux-tooltip-title')
+      .textContent.trim();
+    if (!this.hasAnimated) {
+      writeTask(() => {
+        this.root.querySelector('.gux-tab').classList.add('gux-show');
+        this.hasAnimated = true;
+      });
+    }
+  }
+  popoverOnClick(e) {
+    e.stopPropagation();
+  }
+  getDropdownOptions() {
+    if (this.hasDropdownOptions) {
+      return [
+        h("button", { id: this.dropdownOptionsButtonId, "aria-expanded": (!this.popoverHidden).toString(), type: "button", class: "gux-tab-options-button", ref: el => (this.tabOptionsButtonElement = el), onClick: () => this.toggleOptions(), tabIndex: this.active ? 0 : -1, disabled: this.guxDisabled }, h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.i18n('options', {
+            tabTitle: this.tabTitle
+          }) })),
+        h("gux-popover-list", { position: "top-end", for: this.dropdownOptionsButtonId, displayDismissButton: false, hidden: this.popoverHidden, closeOnClickOutside: true, onGuxdismiss: () => (this.popoverHidden = true), onClick: (e) => this.popoverOnClick(e), onFocusout: e => e.stopImmediatePropagation() }, h("div", { class: "gux-dropdown-option-container", onClick: (e) => this.onSelectDropdownOption(e) }, h("slot", { name: "dropdown-options" })))
+      ];
+    }
+    return null;
+  }
+  render() {
+    return [
+      h("div", { class: {
+          'gux-tab': true,
+          'gux-selected': this.active,
+          'gux-dropdown-options': this.hasDropdownOptions,
+          'gux-disabled': this.guxDisabled
+        } }, h("button", { class: "gux-tab-button", type: "button", role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.guxDisabled.toString(), "aria-controls": `gux-${this.tabId}-panel`, ref: el => (this.buttonElement = el), tabIndex: this.active ? 0 : -1, id: `gux-${this.tabId}-tab` }, h("gux-tooltip-title", { ref: el => (this.tooltipTitleElement = el) }, h("span", null, h("slot", null)))), this.getDropdownOptions())
+    ];
+  }
+  static get is() { return "gux-tab-advanced-legacy"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-tab-advanced.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-tab-advanced.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "tabId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "unique id for the tab"
+        },
+        "attribute": "tab-id",
+        "reflect": false
+      },
+      "guxDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "gux-disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "active": {},
+      "popoverHidden": {},
+      "hasAnimated": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "internalactivatetabpanel",
+        "name": "internalactivatetabpanel",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "guxSetActive": {
+        "complexType": {
+          "signature": "(active: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "guxGetActive": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "guxFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "root"; }
+  static get listeners() {
+    return [{
+        "name": "focusin",
+        "method": "onFocusin",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focusout",
+        "method": "onFocusout",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "onKeydown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keyup",
+        "method": "onKeyup",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "onClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "mousedown",
+        "method": "onMouseDown",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/collection/components/legacy/gux-tabs-advanced-legacy/gux-tab-advanced-list/gux-tab-advanced-list.css

@@ -0,0 +1,211 @@
+.gux-focus-ring-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+
+.gux-focus-ring-small-focused:focus {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-within:focus-within {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+.gux-focus-ring-small-focused-visible:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
+}
+
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: var(--gse-ui-links-inLine-padding);
+}
+
+/* Custom Styles */
+gux-tab-advanced-list-legacy .gux-tab-container {
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  height: 50px;
+  margin-bottom: 16px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background-color: #f6f7f9;
+  border-bottom: 1px solid #d7dce5;
+  border-radius: 4px 4px 0 0;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container {
+  display: flex;
+  border-radius: 4px;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button {
+  min-width: 35px;
+  height: 50px;
+  padding: 0;
+  margin-left: 2px;
+  color: #2e394c;
+  background-color: #e2e6ee;
+  border: none;
+  border-radius: 4px;
+  transition: color 0.25s;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button [slot=add-tab] {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 12px;
+  white-space: nowrap;
+  font-family: var(--gse-core-fontFamily-body), sans-serif;
+  font-weight: var(--gse-core-fontWeight-bold);
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button [slot=add-tab] gux-icon {
+  padding-right: 8px;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:disabled {
+  opacity: 0.5;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:hover {
+  background-color: #d7dce5;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:active {
+  background-color: #c8cfda;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 3px #aac9ff;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:focus-visible {
+  border-radius: 5px;
+  outline: none;
+  box-shadow: inset 0 0 0 3px #aac9ff;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button gux-icon {
+  width: 16px;
+  height: 16px;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container {
+  display: flex;
+  border-radius: 4px;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 50px;
+  padding: 0;
+  color: #2e394c;
+  background-color: #e2e6ee;
+  border: none;
+  border-radius: 4px;
+  transition: color 0.25s;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible {
+  border: 3px solid #aac9ff;
+  border-radius: 5px;
+  outline: none;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button gux-icon {
+  width: 16px;
+  height: 16px;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible {
+  border: 3px solid #aac9ff;
+  outline: none;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:hover {
+  background-color: #d7dce5;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:active {
+  background-color: #c8cfda;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible {
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}
+gux-tab-advanced-list-legacy .gux-tab-container .gux-scrollable-section {
+  display: flex;
+  align-items: flex-end;
+  height: 50px;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+gux-tab-advanced-list-legacy .gux-tab-container .gux-scrollable-section::-webkit-scrollbar {
+  height: 0;
+}
+gux-tab-advanced-list-legacy .gux-sr-only {
+  position: absolute;
+  top: auto;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}