@pine-ds/core 2.14.0 → 2.15.0

package/dist/collection/components/pds-tooltip/pds-tooltip.css

@@ -1,16 +1,11 @@
 :host {
-  --border-radius-overlay: var(--pine-border-radius-125);
-  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
-  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
-  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
-  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
-  --box-shadow-default: var(--pine-box-shadow-200);
-  --color-background-default: var(--pine-color-grey-950);
-  --color-text-default: var(--pine-color-white);
-  --sizing-arrow-default: 6px;
-  --sizing-arrow-offset: 14px;
-  --sizing-width-default: 320px;
-  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);
+  --tooltip-border-width-arrow-down: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;
+  --tooltip-border-width-arrow-left: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;
+  --tooltip-border-width-arrow-right: var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);
+  --tooltip-border-width-arrow-up: 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);
+  --tooltip-sizing-arrow: 6px;
+  --tooltip-sizing-arrow-offset: 14px;
+  --tooltip-dimension-max-width: 320px;
   display: inline-block;
   position: relative;
 }
@@ -19,18 +14,18 @@
 }
 :host ::slotted([slot=content]) {
   display: block;
-  max-width: var(--sizing-width-default);
+  max-width: var(--tooltip-dimension-max-width);
   white-space: normal;
 }
 
 .pds-tooltip__content {
-  background-color: var(--color-background-default);
-  border-radius: var(--border-radius-overlay);
-  box-shadow: var(--box-shadow-default);
-  color: var(--color-text-default);
-  max-width: var(--sizing-width-default);
+  background-color: var(--pine-color-primary);
+  border-radius: calc(var(--pine-dimension-xs) * 1.25);
+  box-shadow: var(--pine-box-shadow);
+  color: var(--pine-color-text-primary);
+  max-width: var(--tooltip-dimension-max-width);
   opacity: 0;
-  padding: var(--spacing-padding-overlay);
+  padding: var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);
   position: absolute;
   visibility: hidden;
   width: max-content;
@@ -47,97 +42,97 @@
   border-color: transparent;
   border-right-color: transparent;
   border-style: solid;
-  border-width: var(--border-width-arrow-left);
+  border-width: var(--tooltip-border-width-arrow-left);
   content: "";
   height: 0;
   position: absolute;
   width: 0;
 }
 .pds-tooltip--right .pds-tooltip__content::after {
-  border-inline-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-left);
-  left: calc(var(--sizing-arrow-default) * -1);
+  border-inline-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-left);
+  left: calc(var(--tooltip-sizing-arrow) * -1);
   top: 50%;
   transform: translateY(-50%);
 }
 .pds-tooltip--right-end .pds-tooltip__content::after {
-  border-inline-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-left);
-  bottom: var(--sizing-arrow-offset);
-  left: calc(var(--sizing-arrow-default) * -1);
+  border-inline-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-left);
+  bottom: var(--tooltip-sizing-arrow-offset);
+  left: calc(var(--tooltip-sizing-arrow) * -1);
   top: initial;
 }
 .pds-tooltip--right-start .pds-tooltip__content::after {
-  border-inline-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-left);
-  left: calc(var(--sizing-arrow-default) * -1);
-  top: var(--sizing-arrow-offset);
+  border-inline-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-left);
+  left: calc(var(--tooltip-sizing-arrow) * -1);
+  top: var(--tooltip-sizing-arrow-offset);
 }
 .pds-tooltip--top .pds-tooltip__content::after {
-  border-block-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-down);
-  bottom: calc(var(--sizing-arrow-default) * -1);
+  border-block-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-down);
+  bottom: calc(var(--tooltip-sizing-arrow) * -1);
   left: 50%;
   top: initial;
   transform: translateX(-50%);
 }
 .pds-tooltip--top-start .pds-tooltip__content::after {
-  border-block-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-down);
-  bottom: calc(var(--sizing-arrow-default) * -1);
-  left: var(--sizing-arrow-offset);
+  border-block-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-down);
+  bottom: calc(var(--tooltip-sizing-arrow) * -1);
+  left: var(--tooltip-sizing-arrow-offset);
   top: initial;
 }
 .pds-tooltip--top-end .pds-tooltip__content::after {
-  border-block-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-down);
-  bottom: calc(var(--sizing-arrow-default) * -1);
+  border-block-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-down);
+  bottom: calc(var(--tooltip-sizing-arrow) * -1);
   left: initial;
-  right: var(--sizing-arrow-offset);
+  right: var(--tooltip-sizing-arrow-offset);
   top: initial;
 }
 .pds-tooltip--left .pds-tooltip__content::after {
-  border-inline-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-right);
+  border-inline-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-right);
   left: initial;
-  right: calc(var(--sizing-arrow-default) * -1);
+  right: calc(var(--tooltip-sizing-arrow) * -1);
   top: 50%;
   transform: translateY(-50%);
 }
 .pds-tooltip--left-end .pds-tooltip__content::after {
-  border-inline-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-right);
-  bottom: var(--sizing-arrow-offset);
+  border-inline-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-right);
+  bottom: var(--tooltip-sizing-arrow-offset);
   left: initial;
-  right: calc(var(--sizing-arrow-default) * -1);
+  right: calc(var(--tooltip-sizing-arrow) * -1);
   top: initial;
 }
 .pds-tooltip--left-start .pds-tooltip__content::after {
-  border-inline-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-right);
+  border-inline-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-right);
   left: initial;
-  right: calc(var(--sizing-arrow-default) * -1);
-  top: var(--sizing-arrow-offset);
+  right: calc(var(--tooltip-sizing-arrow) * -1);
+  top: var(--tooltip-sizing-arrow-offset);
 }
 .pds-tooltip--bottom .pds-tooltip__content::after {
-  border-block-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-up);
+  border-block-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-up);
   left: 50%;
-  top: calc(var(--sizing-arrow-default) * -1);
+  top: calc(var(--tooltip-sizing-arrow) * -1);
   transform: translateX(-50%);
 }
 .pds-tooltip--bottom-end .pds-tooltip__content::after {
-  border-block-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-up);
+  border-block-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-up);
   left: initial;
-  right: var(--sizing-arrow-offset);
-  top: calc(var(--sizing-arrow-default) * -1);
+  right: var(--tooltip-sizing-arrow-offset);
+  top: calc(var(--tooltip-sizing-arrow) * -1);
 }
 .pds-tooltip--bottom-start .pds-tooltip__content::after {
-  border-block-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-up);
-  left: var(--sizing-arrow-offset);
-  top: calc(var(--sizing-arrow-default) * -1);
+  border-block-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-up);
+  left: var(--tooltip-sizing-arrow-offset);
+  top: calc(var(--tooltip-sizing-arrow) * -1);
 }
 .pds-tooltip--no-arrow .pds-tooltip__content::after {
   border-width: 0;

package/dist/collection/components/pds-tooltip/pds-tooltip.js

@@ -12,6 +12,9 @@ export class PdsTooltip {
         this.handleShow = () => {
             this.showTooltip();
         };
+        this.handlePageShow = () => {
+            this.opened = false;
+        };
         this.isOpen = false;
         this.content = undefined;
         this.componentId = undefined;
@@ -36,6 +39,13 @@ export class PdsTooltip {
         this.el.addEventListener('blur', this.handleHide, true);
         this.el.addEventListener('focus', this.handleShow, true);
     }
+    componentDidLoad() {
+        // fix for Safari iOS back button issue
+        window.addEventListener('pageshow', this.handlePageShow);
+        return () => {
+            window.removeEventListener('pageshow', this.handlePageShow);
+        };
+    }
     componentDidUpdate() {
         if (this.opened) {
             this.showTooltip();
@@ -57,24 +67,24 @@ export class PdsTooltip {
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: 'f4a8cd19668e7cc20a70ae13a0f6dcf0f809df65', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: 'b83498c6ea8e404b2abc25cc75daa95807649dba', class: `
+        return (h(Host, { key: '33df155f78b81a7c933e89bb115247c49732fa3c', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '42acdb06c67d77e05a2079423731b2587c04193b', class: `
             pds-tooltip
             pds-tooltip--${this.placement}
             ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
             ${this.opened ? 'pds-tooltip--is-open' : ''}
             ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
-          ` }, h("span", { key: '47ace7d3f543f0d86987389c76b25da0ad6be9b7', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '45bae92d87b8a67c00608c18f76aa9333d8d82a7' })), h("div", { key: 'a745ce513f1563cb8ea5a86bf27ee31f3e0d4392', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip", style: { maxWidth: this.maxWidth } }, h("slot", { key: '8c46fe5951624e2de4128bd0f819e1e55155a7b5', name: "content" }), this.content))));
+          ` }, h("span", { key: '3086830ad1713041b1750868f1455ac5c246af20', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '0fcff3e24fcfac192581cf51ec0c7b22f2d338ec' })), h("div", { key: 'e8c73dc4872b2356dd6bcd278f181816d9237997', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip", style: { maxWidth: this.maxWidth } }, h("slot", { key: '031946f960e6250fe7af1535648317ef5a9521f9', name: "content" }), this.content))));
     }
     static get is() { return "pds-tooltip"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../global/styles/base.scss", "pds-tooltip.scss"]
+            "$": ["pds-tooltip.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../global/styles/base.css", "pds-tooltip.css"]
+            "$": ["pds-tooltip.css"]
         };
     }
     static get properties() {

package/dist/collection/components/pds-tooltip/pds-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-tooltip.js","sourceRoot":"","sources":["../../../src/components/pds-tooltip/pds-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrls: ['../../global/styles/base.scss', 'pds-tooltip.scss'],\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Sets the maximum width of the tooltip content\n   * @defaultValue \"352px\"\n   */\n  @Prop() maxWidth: string = '352px';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n            style={{ maxWidth: this.maxWidth }}\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-tooltip.js","sourceRoot":"","sources":["../../../src/components/pds-tooltip/pds-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrls: ['pds-tooltip.scss'],\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Sets the maximum width of the tooltip content\n   * @defaultValue \"352px\"\n   */\n  @Prop() maxWidth: string = '352px';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidLoad() {\n    // fix for Safari iOS back button issue\n    window.addEventListener('pageshow', this.handlePageShow);\n\n    return () => {\n      window.removeEventListener('pageshow', this.handlePageShow);\n    };\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n  };\n\n  private handlePageShow = () => {\n    this.opened = false;\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n            style={{ maxWidth: this.maxWidth }}\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/global/styles/utils/label.css

@@ -0,0 +1,16 @@
+:host {
+  display: inline-block;
+}
+
+:host([aria-disabled=true]) label {
+  color: var(--pine-color-text-label-disabled);
+}
+
+:host([aria-readonly=true]) label {
+  color: var(--pine-color-text-label-readonly);
+}
+
+label {
+  color: var(--pine-color-text-label);
+  font-weight: var(--pine-font-weight-medium);
+}

package/dist/collection/utils/attributes.js

@@ -0,0 +1,84 @@
+/**
+ * Inherit attributes from the host element
+ * @param el - Host element
+ * @param attributes - Array of attributes to inherit
+ */
+export const inheritAttributes = (el, attributes = []) => {
+    const attributeObject = {};
+    attributes.forEach((attr) => {
+        if (el.hasAttribute(attr)) {
+            const value = el.getAttribute(attr);
+            if (value !== null) {
+                attributeObject[attr] = el.getAttribute(attr);
+            }
+            el.removeAttribute(attr);
+        }
+    });
+    return attributeObject;
+};
+/**
+ * List of available ARIA attributes + `role`.
+ * Removed deprecated attributes.
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+ */
+const ariaAttributes = [
+    'role',
+    'aria-activedescendant',
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-braillelabel',
+    'aria-brailleroledescription',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colindextext',
+    'aria-colspan',
+    'aria-controls',
+    'aria-current',
+    'aria-describedby',
+    'aria-description',
+    'aria-details',
+    'aria-disabled',
+    'aria-errormessage',
+    'aria-expanded',
+    'aria-flowto',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-labelledby',
+    'aria-level',
+    'aria-live',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-owns',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowindextext',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext',
+];
+export const inheritAriaAttributes = (el, ignoreList) => {
+    let attributesToInherit = ariaAttributes;
+    if (ignoreList && ignoreList.length > 0) {
+        attributesToInherit = ariaAttributes.filter(attr => !ignoreList.includes(attr));
+    }
+    return inheritAttributes(el, attributesToInherit);
+};
+//# sourceMappingURL=attributes.js.map

package/dist/collection/utils/attributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attributes.js","sourceRoot":"","sources":["../../src/utils/attributes.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAe,EAAE,aAAuB,EAAE,EAAE,EAAE;IAC9E,MAAM,eAAe,GAAe,EAAE,CAAC;IAEvC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC1B,IAAI,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;YAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAEpC,IAAK,KAAK,KAAK,IAAI,EAAE,CAAC;gBACpB,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAChD,CAAC;YACD,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,eAAe,CAAC;AACzB,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,cAAc,GAAG;IACrB,MAAM;IACN,uBAAuB;IACvB,aAAa;IACb,mBAAmB;IACnB,mBAAmB;IACnB,6BAA6B;IAC7B,WAAW;IACX,cAAc;IACd,eAAe;IACf,eAAe;IACf,mBAAmB;IACnB,cAAc;IACd,eAAe;IACf,cAAc;IACd,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,eAAe;IACf,mBAAmB;IACnB,eAAe;IACf,aAAa;IACb,eAAe;IACf,aAAa;IACb,cAAc;IACd,mBAAmB;IACnB,YAAY;IACZ,iBAAiB;IACjB,YAAY;IACZ,WAAW;IACX,gBAAgB;IAChB,sBAAsB;IACtB,kBAAkB;IAClB,WAAW;IACX,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAe;IACf,eAAe;IACf,eAAe;IACf,sBAAsB;IACtB,eAAe;IACf,eAAe;IACf,mBAAmB;IACnB,cAAc;IACd,eAAe;IACf,cAAc;IACd,WAAW;IACX,eAAe;IACf,eAAe;IACf,eAAe;IACf,gBAAgB;CACjB,CAAC;AAGD,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAe,EAAE,UAAqB,EAAE,EAAE;IAC/E,IAAI,mBAAmB,GAAG,cAAc,CAAC;IACzC,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACxC,mBAAmB,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IAClF,CAAC;IAED,OAAO,iBAAiB,CAAC,EAAE,EAAE,mBAAmB,CAAC,CAAC;AACnD,CAAC,CAAA","sourcesContent":["export type Attributes = { [key: string]: any };\n\n/**\n * Inherit attributes from the host element\n * @param el - Host element\n * @param attributes - Array of attributes to inherit\n */\nexport const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n  const attributeObject: Attributes = {};\n\n  attributes.forEach((attr) => {\n    if (el.hasAttribute(attr)) {\n      const value = el.getAttribute(attr);\n\n      if ( value !== null) {\n        attributeObject[attr] = el.getAttribute(attr);\n      }\n      el.removeAttribute(attr);\n    }\n  });\n\n  return attributeObject;\n}\n\n/**\n * List of available ARIA attributes + `role`.\n * Removed deprecated attributes.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes\n */\nconst ariaAttributes = [\n  'role',\n  'aria-activedescendant',\n  'aria-atomic',\n  'aria-autocomplete',\n  'aria-braillelabel',\n  'aria-brailleroledescription',\n  'aria-busy',\n  'aria-checked',\n  'aria-colcount',\n  'aria-colindex',\n  'aria-colindextext',\n  'aria-colspan',\n  'aria-controls',\n  'aria-current',\n  'aria-describedby',\n  'aria-description',\n  'aria-details',\n  'aria-disabled',\n  'aria-errormessage',\n  'aria-expanded',\n  'aria-flowto',\n  'aria-haspopup',\n  'aria-hidden',\n  'aria-invalid',\n  'aria-keyshortcuts',\n  'aria-label',\n  'aria-labelledby',\n  'aria-level',\n  'aria-live',\n  'aria-multiline',\n  'aria-multiselectable',\n  'aria-orientation',\n  'aria-owns',\n  'aria-placeholder',\n  'aria-posinset',\n  'aria-pressed',\n  'aria-readonly',\n  'aria-relevant',\n  'aria-required',\n  'aria-roledescription',\n  'aria-rowcount',\n  'aria-rowindex',\n  'aria-rowindextext',\n  'aria-rowspan',\n  'aria-selected',\n  'aria-setsize',\n  'aria-sort',\n  'aria-valuemax',\n  'aria-valuemin',\n  'aria-valuenow',\n  'aria-valuetext',\n];\n\n\n export const inheritAriaAttributes = (el: HTMLElement, ignoreList?: string[]) => {\n  let attributesToInherit = ariaAttributes;\n  if (ignoreList && ignoreList.length > 0) {\n    attributesToInherit = ariaAttributes.filter(attr => !ignoreList.includes(attr));\n  }\n\n  return inheritAttributes(el, attributesToInherit);\n }\n"]}

package/dist/collection/utils/utils.js

@@ -1,7 +1,18 @@
-export function format(first, middle, last) {
-    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
 export const hasShadowDom = (el) => {
     return !!el.shadowRoot && !!el.attachShadow;
 };
+export const debounceEvent = (event, wait) => {
+    const original = event._original || event;
+    return {
+        _original: event,
+        emit: debounce(original.emit.bind(original), wait),
+    };
+};
+export const debounce = (func, wait = 0) => {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(func, wait, ...args);
+    };
+};
 //# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;IAChE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAe,EAAE,EAAE;IAC9C,OAAO,CAAC,CAAC,EAAE,CAAC,UAAU,IAAI,CAAC,CAAE,EAAU,CAAC,YAAY,CAAA;AACtD,CAAC,CAAA","sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAe,EAAE,EAAE;IAC9C,OAAO,CAAC,CAAC,EAAE,CAAC,UAAU,IAAI,CAAC,CAAE,EAAU,CAAC,YAAY,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAmB,EAAE,IAAY,EAAgB,EAAE;IAC/E,MAAM,QAAQ,GAAI,KAAa,CAAC,SAAS,IAAI,KAAK,CAAC;IACnD,OAAO;QACL,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC;KACnC,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAA8B,EAAE,IAAI,GAAG,CAAC,EAAE,EAAE;IACnE,IAAI,KAAU,CAAC;IACf,OAAO,CAAC,GAAG,IAAW,EAAO,EAAE;QAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC;IAC1C,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { EventEmitter } from \"@stencil/core\";\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow\n}\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n  const original = (event as any)._original || event;\n  return {\n    _original: event,\n    emit: debounce(original.emit.bind(original), wait),\n  } as EventEmitter;\n};\n\nexport const debounce = (func: (...args: any[]) => void, wait = 0) => {\n  let timer: any;\n  return (...args: any[]): any => {\n    clearTimeout(timer);\n    timer = setTimeout(func, wait, ...args);\n  };\n};\n"]}