@pine-ds/core 1.3.0-dev.0 → 1.3.0-dev.3

package/dist/cjs/pds-table.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pds-table.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/pds-table/pds-table.scss?tag=pds-table&encapsulation=shadow","src/components/pds-table/pds-table.tsx"],"sourcesContent":[":host {\n  --color-background-default: var(--pine-color-white);\n\n  background: var(--color-background-default);\n  border-collapse: separate;\n  box-sizing: border-box;\n  display: table;\n  width: 100%;\n}\n\n:host(:focus-visible) {\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n  // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n  box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n  outline: none;\n}\n\n:host(.is-responsive) {\n  background-attachment: local, local, scroll, scroll;\n  background-image: linear-gradient(to right, var(--color-background-default), var(--color-background-default)),\n                    linear-gradient(to right, var(--color-background-default), var(--color-background-default)),\n                    linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),\n                    linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));\n  background-position: left center, right center, left center, right center;\n  background-repeat: no-repeat;\n  background-size: 4px 100%, 4px 100%, 4px 100%, 4px 100%;\n  display: block;\n  margin: 0 auto;\n  max-width: fit-content;\n  overflow-x: auto;\n  white-space: nowrap;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrl: 'pds-table.scss',\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n\n  /**\n   * Determines if table displays compact which reduces the spacing of table cells.\n   */\n  @Prop() compact: boolean;\n\n  /**\n   * A unique identifier used for the table `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Enables the table to be responsive by horizontally scrolling on smaller screens.\n   */\n  @Prop() responsive: boolean;\n\n  /**\n   * Determines if table displays fixed column which fixes the first column of the table.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  @State() sortingColumn: string | null = null;\n  @State() sortingDirection: 'asc' | 'desc' = 'asc';\n\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.\n   */\n  @Event() pdsTableSelect: EventEmitter<{ rowIndex: number; isSelected: boolean }>;\n\n  /**\n   * Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n  componentWillLoad() {\n    this.sortingColumn = null;\n  }\n\n  private classNames() {\n    const classNames = ['pds-table'];\n\n    if (this.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.responsive) {\n      classNames.push('is-responsive');\n    }\n\n    return classNames.join('  ');\n  }\n\n  private sortTable(column: string, direction: 'asc' | 'desc') {\n    const tableBody = this.el.querySelector('pds-table-body');\n\n    // Get the rows in the table body\n    const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n\n    // Find the column index based on the column name\n    const columnHeaderCells: HTMLElement[] = Array.from(\n      this.el.querySelectorAll('pds-table-head-cell[sortable]')\n    );\n\n    const columnHeaderCell = columnHeaderCells.find(\n      (cell) => cell.innerText.trim() === column\n    );\n\n    if (!columnHeaderCell) {\n      console.warn(`Column \"${column}\" not found.`);\n      return;\n    }\n\n    const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);\n\n    // Sort the rows based on the content of the specified column\n    tableRows.sort((a, b) => {\n      const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n      const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n\n      if (direction === 'asc') {\n        return valueA.localeCompare(valueB);\n      } else {\n        return valueB.localeCompare(valueA);\n      }\n    });\n\n    // Clear and append the sorted rows back to the table body\n    tableBody.innerHTML = '';\n    tableRows.forEach((row) => {\n      tableBody.appendChild(row);\n    });\n  }\n\n  @Listen('pdsTableSort')\n  handleTableSort(event: CustomEvent<{ column: string; direction: 'asc' | 'desc' }>) {\n    const { direction } = event.detail;\n    this.sortTable(event.detail.column, direction);\n    this.sortingColumn = event.detail.column;\n    this.sortingDirection = direction;\n  }\n\n  @Listen('pdsTableSelectAll')\n  handleTableSelectAll(event: CustomEvent<{ isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const pdsTableBody = this.el.querySelector('pds-table-body');\n    const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));\n\n    tableRows.forEach((row) => {\n      row.isSelected = event.detail.isSelected;\n    });\n  }\n\n  @Listen('pdsTableRowSelected')\n  async handleTableSelect(event: CustomEvent<{ rowIndex: number; isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const allTableRows = this.el.querySelectorAll('pds-table-row');\n    const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);\n    const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);\n    const pdsTableHead = this.el.querySelector('pds-table-head');\n    if (!pdsTableHead) return;\n\n    const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');\n    headerCheckbox.checked = allSelectedRows;\n    headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n        tabindex=\"0\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pds-tabpanel.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-11f95019.js');
+
+const pdsTabpanelCss = ":host{display:block}.pds-tabpanel{display:none;margin-top:var(--spacing-panel-margin-top);padding:var(--spacing-panel-padding)}.pds-tabpanel.is-active{display:block}";
+const PdsTabpanelStyle0 = pdsTabpanelCss;
+
+const PdsTabpanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.name = undefined;
+        this.parentComponentId = undefined;
+        this.variant = undefined;
+        this.selected = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'b071d63a6211e70b09f11a18609d15728eb485c6', slot: "tabpanels" }, index.h("div", { key: 'ab8de65d7142136888c853170b7b8b190f21abcc', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, index.h("slot", { key: '0cac8366d5502be7033d1b71b681bf564aa557e8' }))));
+    }
+    get el() { return index.getElement(this); }
+};
+PdsTabpanel.style = PdsTabpanelStyle0;
+
+exports.pds_tabpanel = PdsTabpanel;
+
+//# sourceMappingURL=pds-tabpanel.cjs.entry.js.map

package/dist/cjs/pds-tabpanel.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pds-tabpanel.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,uKAAuK,CAAC;AAC/L,0BAAe,cAAc;;MCMhB,WAAW;;;;;;wBAwBY,KAAK;;IAEvC,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,WAAW,IACpBD,kEACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,EACxD,QAAQ,EAAC,GAAG,qBACK,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAC1D,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,wBAAwB,GAAG,cAAc,IAEhEA,oEAAQ,CACJ,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/pds-tabs/pds-tabpanel/pds-tabpanel.scss?tag=pds-tabpanel","src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.pds-tabpanel {\n  display: none;\n  margin-top: var(--spacing-panel-margin-top);\n  padding: var(--spacing-panel-padding);\n\n  &.is-active {\n    display: block;\n  }\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-tabpanel',\n  styleUrl: 'pds-tabpanel.scss',\n  shadow: false,\n})\nexport class PdsTabpanel {\n  @Element() el: HTMLPdsTabpanelElement;\n\n  /**\n   * Sets the related tab name, this name must match a `pds-tab`'s tab name property\n   */\n  @Prop() name!: string;\n\n  /**\n   * Keeps track of the parentComponentId unique id, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() parentComponentId: string;\n\n  /**\n   * Keeps track of if the expected tab variant, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() variant: string;\n\n  /**\n   * Keeps track of the tabpanel selected state, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop({mutable: true}) selected = false;          // eslint-disable-line @stencil-community/strict-mutable\n\n  render() {\n    return (\n      <Host slot=\"tabpanels\">\n        <div\n          role=\"tabpanel\"\n          id={this.parentComponentId + \"__\" + this.name + '-panel'}\n          tabindex=\"0\"\n          aria-labelledby={this.parentComponentId + \"__\" + this.name}\n          class={this.selected ? \"pds-tabpanel is-active\" : \"pds-tabpanel\"}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pds-tabs.cjs.entry.js

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-11f95019.js');
+
+const pdsTabsCss = ":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";
+const PdsTabsStyle0 = pdsTabsCss;
+
+const PdsTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tablistLabel = undefined;
+        this.componentId = undefined;
+        this.variant = undefined;
+        this.activeTabName = undefined;
+        this.activeTabIndex = undefined;
+    }
+    tabClickHandler(event) {
+        if (this.componentId === event.detail[1]) {
+            this.activeTabIndex = event.detail[0];
+            this.activeTabName = this.tabs[this.activeTabIndex].name;
+        }
+    }
+    handleKeyDown(ev) {
+        const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
+        if (keySet.includes(ev.key)) {
+            ev.preventDefault();
+            this.moveActiveTab(ev.key);
+        }
+    }
+    moveActiveTab(key) {
+        const firstTabNumber = 0;
+        const lastTabNumber = this.tabs.length - 1;
+        let moveFocusTo = null;
+        switch (key) {
+            case 'ArrowLeft':
+                moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));
+                break;
+            case 'ArrowRight':
+                moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);
+                break;
+            case 'Home':
+                moveFocusTo = firstTabNumber;
+                break;
+            case 'End':
+                moveFocusTo = lastTabNumber;
+                break;
+        }
+        // Move focus to the button element within `pds-tab`
+        this.tabs[moveFocusTo].children[0].focus();
+        this.activeTabName = this.tabs[moveFocusTo].name;
+        this.activeTabIndex = moveFocusTo;
+    }
+    findAllChildren() {
+        this.tabs = this.el.querySelectorAll('pds-tab');
+        this.tabPanels = this.el.querySelectorAll('pds-tabpanel');
+    }
+    propGeneration(child, index = 0) {
+        child.parentComponentId = this.componentId.toString();
+        child.variant = this.variant.toString();
+        child.selected = (this.activeTabName === child.name) ? true : false;
+        child['index'] = index;
+    }
+    passPropsToChildren() {
+        this.tabs.forEach((child, index) => {
+            if (this.activeTabName === child.name)
+                this.activeTabIndex = index;
+            this.propGeneration(child, index);
+        });
+        this.tabPanels.forEach((child) => {
+            this.propGeneration(child);
+        });
+    }
+    classNames() {
+        let className = `pds-tabs`;
+        if (this.variant && this.variant != 'primary') {
+            const variantClassName = `pds-tabs--${this.variant}`;
+            className += ' ' + variantClassName;
+        }
+        return className;
+    }
+    ;
+    componentWillLoad() {
+        this.findAllChildren();
+    }
+    componentWillRender() {
+        this.passPropsToChildren();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'a36e242d5e746954f80778cf515879ca82258978', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, index.h("div", { key: 'd6d89fd90a9a534f249c549e34308ed245773f60', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, index.h("slot", { key: '9b5e5268c27ecf2a5331cec64d2c7121cef366a1', name: "tabs" })), index.h("slot", { key: 'b835cf1befe68f54b1751a976846d271ce97634e', name: "tabpanels" })));
+    }
+    get el() { return index.getElement(this); }
+};
+PdsTabs.style = PdsTabsStyle0;
+
+exports.pds_tabs = PdsTabs;
+
+//# sourceMappingURL=pds-tabs.cjs.entry.js.map

package/dist/cjs/pds-tabs.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pds-tabs.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --spacing-panel-margin-top: Optional margin-top for panels\n   */\n  --spacing-panel-margin-top: 0;\n  /**\n   * @prop --spacing-panel-padding: Optional padding for panels\n   */\n  --spacing-panel-padding: 0;\n\n  --outline: 2px solid var(--pine-color-blue-200);\n\n  --spacing-gap-availability: var(--pine-spacing-100);\n  --spacing-gap-default: var(--pine-spacing-300);\n  --spacing-gap-filter: var(--pine-spacing-200);\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-gap-default);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--spacing-gap-availability);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--spacing-gap-filter);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrl: 'pds-tabs.scss',\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pds-textarea.cjs.entry.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-11f95019.js');
+const pdsLabel = require('./pds-label-7acec6ab.js');
+
+const pdsTextareaCss = ":host{--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--box-shadow-focus:0 0 0 2px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 2px var(--color-focus-visible-outline-error);--color:var(--pine-color-charcoal-400);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-focus-visible:var(--pine-color-grey-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-default:var(--pine-color-charcoal-200);--color-error-default:var(--pine-color-red-300);--color-focus-visible-outline:var(--pine-color-blue-200);--color-focus-visible-outline-error:var(--pine-color-red-200);--color-placeholder-default:var(--pine-color-charcoal-200);--font-size-field:var(--pine-font-size-100);--font-size-helper-message:var(--pine-font-size-075);--font-size-label:var(--pine-font-size-100);--font-weight-field:var(--pine-font-weight-normal);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-field:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-label:var(--pine-line-height-150);--spacing-margin-block-end-label:var(--pine-spacing-100);--spacing-margin-block-start-helper-message:var(--pine-spacing-100);--spacing-padding-block-field:var(--pine-spacing-100);--spacing-padding-inline-field:var(--pine-spacing-200);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background);border:var(--pine-border-interactive-default);border-radius:var(--pine-border-radius-md);font-family:inherit;font-size:var(--font-size-field);font-weight:var(--font-weight-field);line-height:var(--line-height-field);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--color-border-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-error-default)}";
+const PdsTextareaStyle0 = pdsTextareaCss;
+
+const PdsTextarea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pdsTextareaChange = index.createEvent(this, "pdsTextareaChange", 7);
+        this.onTextareaChange = (ev) => {
+            const textarea = ev.target;
+            pdsLabel.isRequired(textarea, this);
+            if (textarea) {
+                this.value = textarea.innerHTML;
+            }
+            this.pdsTextareaChange.emit({ value: this.value, event: ev });
+        };
+        this.componentId = undefined;
+        this.disabled = false;
+        this.errorMessage = undefined;
+        this.helperMessage = undefined;
+        this.invalid = false;
+        this.label = undefined;
+        this.name = this.componentId;
+        this.placeholder = undefined;
+        this.readonly = false;
+        this.required = false;
+        this.rows = undefined;
+        this.value = undefined;
+    }
+    textareaClassNames() {
+        const classNames = ['pds-textarea__field'];
+        if (this.invalid && this.invalid === true) {
+            classNames.push('is-invalid');
+        }
+        return classNames.join('  ');
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f58ccd5b20fc30c6e6153e04e98b27fe265040af', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '480b51012d0f7a05d83fb8cb359d2bc3a4e82189', class: "pds-textarea" }, this.label &&
+            index.h(pdsLabel.PdsLabel, { key: '0b34ee6ee8eec6891c00596f840d028ab6ac36bb', htmlFor: this.componentId, text: this.label }), index.h("textarea", { key: '6f066ce38aaec3257bddd69715118aa5740723c1', "aria-describedby": pdsLabel.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
+            index.h("p", { key: '91c66558978cdbb3191c0af31c34c2647749c01a', class: "pds-textarea__helper-message", id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            index.h("p", { key: 'da8320d10ace733c7181ab3c6827da99d94d7ebd', "aria-live": "assertive", class: "pds-textarea__error-message", id: pdsLabel.messageId(this.componentId, 'error') }, this.errorMessage))));
+    }
+    get el() { return index.getElement(this); }
+};
+PdsTextarea.style = PdsTextareaStyle0;
+
+exports.pds_textarea = PdsTextarea;
+
+//# sourceMappingURL=pds-textarea.cjs.entry.js.map

package/dist/cjs/pds-textarea.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pds-textarea.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,giHAAgiH,CAAC;AACxjH,0BAAe,cAAc;;MCShB,WAAW;;;;QAwEd,qBAAgB,GAAG,CAAC,EAAS;YACnC,MAAM,QAAQ,GAAG,EAAE,CAAC,MAA6B,CAAC;YAClDA,mBAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YAE3B,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC;aACjC;YAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAC,CAAC,CAAC;SAC7D,CAAC;;wBArEiB,KAAK;;;uBAgBS,KAAK;;oBAUf,IAAI,CAAC,WAAW;;wBAWpB,KAAK;wBAML,KAAK;;;;IA4BhB,kBAAkB;QACxB,MAAM,UAAU,GAAG,CAAC,qBAAqB,CAAC,CAAC;QAE3C,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;YACzC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE5CD,kEAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,KAAK;YACTA,QAACE,iBAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EAE3DF,2FACoBG,0BAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAC/B,IAAI,CAAC,KAAK,CAAY,EACvB,IAAI,CAAC,aAAa;YACjBH,gEACE,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB,EAEL,IAAI,CAAC,OAAO;YACXJ,6EACY,WAAW,EACrB,KAAK,EAAC,6BAA6B,EACnC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,IAEvC,IAAI,CAAC,YAAY,CAChB,CAEF,CACD,EACP;KACH;;;;;;;","names":["isRequired","h","Host","PdsLabel","assignDescription","messageId"],"sources":["src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n  --box-shadow-focus: 0 0 0 2px var(--color-focus-visible-outline);\n  --box-shadow-focus-error: 0 0 0 2px var(--color-focus-visible-outline-error);\n\n  --color: var(--pine-color-charcoal-400);\n  --color-background: var(--pine-color-white);\n  --color-background-disabled: var(--pine-color-grey-200);\n  --color-border-default: var(--pine-color-grey-400);\n  --color-border-error: var(--pine-color-red-300);\n  --color-border-focus-visible: var(--pine-color-grey-300);\n  --color-border-hover: var(--pine-color-grey-500);\n  --color-disabled-default: var(--pine-color-charcoal-200);\n  --color-error-default: var(--pine-color-red-300);\n  --color-focus-visible-outline: var(--pine-color-blue-200);\n  --color-focus-visible-outline-error: var(--pine-color-red-200);\n  --color-placeholder-default: var(--pine-color-charcoal-200);\n\n  --font-size-field: var(--pine-font-size-100);\n  --font-size-helper-message: var(--pine-font-size-075);\n  --font-size-label: var(--pine-font-size-100);\n  --font-weight-field: var(--pine-font-weight-normal);\n  --font-weight-helper-message: var(--pine-font-weight-normal);\n  --font-weight-label: var(--pine-font-weight-medium);\n\n  --line-height-field: var(--pine-line-height-150);\n  --line-height-helper-message: var(--pine-line-height-125);\n  --line-height-label: var(--pine-line-height-150);\n\n  --spacing-margin-block-end-label: var(--pine-spacing-100);\n  --spacing-margin-block-start-helper-message: var(--pine-spacing-100);\n  --spacing-padding-block-field: var(--pine-spacing-100);\n  --spacing-padding-inline-field: var(--pine-spacing-200);\n\n  display: inline;\n}\n\n.pds-textarea {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  display: block;\n  font-size: var(--font-size-label);\n  font-weight: var(--font-weight-label);\n  line-height: var(--line-height-label);\n  margin-block-end: var(--spacing-margin-block-end-label);\n}\n\n.pds-textarea__field {\n  background-color: var(--color-background);\n  border: var(--pine-border-interactive-default);\n  border-radius: var(--pine-border-radius-md);\n  font-family: inherit;\n  font-size: var(--font-size-field);\n  font-weight: var(--font-weight-field);\n  line-height: var(--line-height-field);\n  padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);\n\n  &:hover:not(:disabled, .is-invalid) {\n    border-color: var(--color-border-hover);\n  }\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    color: var(--color-disabled-default);\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--color-placeholder-default);\n  }\n\n  &.is-invalid {\n    border-color: var(--color-border-error);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n    }\n  }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n  font-size: var(--font-size-helper-message);\n  font-weight: var(--font-weight-helper-message);\n  line-height: var(--line-height-helper-message);\n  margin-block-start: var(--spacing-margin-block-start-helper-message);\n}\n\n.pds-textarea__error-message {\n  color: var(--color-error-default);\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrl: 'pds-textarea.scss',\n  shadow: true,\n})\nexport class PdsTextarea {\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the textarea is disabled\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Specifies the error text and provides an error-themed treatment to the field\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a hint or description of the textarea\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the textarea is invalid or throws an error\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the textarea is readonly\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Indicates whether or not the textarea is required\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Event emitted whenever the value of the textarea changes\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  private onTextareaChange = (ev: Event) => {\n    const textarea = ev.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    if (textarea) {\n      this.value = textarea.innerHTML;\n    }\n\n    this.pdsTextareaChange.emit({value: this.value, event: ev});\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <PdsLabel htmlFor={this.componentId} text={this.label} />\n          }\n          <textarea\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onChange={this.onTextareaChange}\n          >{this.value}</textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pds-tooltip.cjs.entry.js

@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-11f95019.js');
+
+const positionTooltip = ({ elem, elemPlacement, overlay, offset = 8 }) => {
+    if (elem == undefined)
+        return;
+    const rect = elem.getBoundingClientRect();
+    const contentRect = overlay.getBoundingClientRect();
+    // Exit the function if the placement is not set
+    if (!elemPlacement || elemPlacement == "")
+        return;
+    switch (true) {
+        case elemPlacement.includes("right"):
+            overlay.style.top = '50%';
+            overlay.style.left = `calc(${rect.width}px + ${offset}px)`;
+            overlay.style.transform = 'translateY(-50%)';
+            if (elemPlacement.includes("start")) {
+                overlay.style.top = '0';
+                overlay.style.transform = 'translateY(0)';
+            }
+            if (elemPlacement.includes("end")) {
+                overlay.style.bottom = '0';
+                overlay.style.top = 'initial';
+                overlay.style.transform = 'translateY(0)';
+            }
+            break;
+        case elemPlacement.includes("left"):
+            overlay.style.top = '50%';
+            overlay.style.right = `calc(${rect.width}px + ${offset}px)`;
+            overlay.style.transform = 'translateY(-50%)';
+            if (elemPlacement.includes("start")) {
+                overlay.style.top = '0';
+                overlay.style.transform = 'translateY(0)';
+            }
+            if (elemPlacement.includes("end")) {
+                overlay.style.bottom = '0';
+                overlay.style.top = 'initial';
+                overlay.style.transform = 'translateY(0)';
+            }
+            break;
+        case elemPlacement.includes("bottom"):
+            overlay.style.top = `calc(${rect.height}px + ${offset}px)`;
+            overlay.style.left = '50%';
+            overlay.style.transform = 'translateX(-50%)';
+            if (elemPlacement.includes("start")) {
+                overlay.style.left = '0';
+                overlay.style.transform = 'translateX(0)';
+            }
+            if (elemPlacement.includes("end")) {
+                overlay.style.left = 'initial';
+                overlay.style.right = '0';
+                overlay.style.transform = 'translateX(0)';
+            }
+            break;
+        case elemPlacement.includes("top"):
+            overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;
+            overlay.style.left = '50%';
+            overlay.style.transform = 'translateX(-50%)';
+            if (elemPlacement.includes("start")) {
+                overlay.style.left = '0';
+                overlay.style.transform = 'translateX(0)';
+            }
+            if (elemPlacement.includes("end")) {
+                overlay.style.left = 'initial';
+                overlay.style.right = '0';
+                overlay.style.transform = 'translateX(0)';
+            }
+            break;
+    }
+};
+
+const pdsTooltipCss = ":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-md);--color-background-default:var(--pine-color-charcoal-400);--color-text-default:var(--pine-color-white);--font-size-overlay:var(--pine-font-size-087);--line-height-overlay:var(--pine-line-height-125);--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);display:inline-block;position:relative}:host ::slotted(*){display:-ms-flexbox;display:flex}:host ::slotted([slot=content]){display:block;white-space:normal;width:var(--sizing-width-default)}.pds-tooltip__content{background-color:var(--color-background-default);border-radius:var(--border-radius-overlay);-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default);color:var(--color-text-default);font-size:var(--font-size-overlay);line-height:var(--line-height-overlay);opacity:0;padding:var(--spacing-padding-overlay);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--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);top:50%;-webkit-transform:translateY(-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);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)}.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);left:50%;top:initial;-webkit-transform:translateX(-50%);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);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);left:initial;right:var(--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);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-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);left:initial;right:calc(var(--sizing-arrow-default) * -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);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:var(--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);left:50%;top:calc(var(--sizing-arrow-default) * -1);-webkit-transform:translateX(-50%);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);left:initial;right:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -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)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}";
+const PdsTooltipStyle0 = pdsTooltipCss;
+
+const PdsTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pdsTooltipHide = index.createEvent(this, "pdsTooltipHide", 7);
+        this.pdsTooltipShow = index.createEvent(this, "pdsTooltipShow", 7);
+        this.handleHide = () => {
+            this.hideTooltip();
+            this.pdsTooltipHide.emit();
+        };
+        this.handleShow = () => {
+            this.showTooltip();
+            this.pdsTooltipShow.emit();
+        };
+        this.isOpen = false;
+        this.content = undefined;
+        this.componentId = undefined;
+        this.hasArrow = true;
+        this.htmlContent = false;
+        this.placement = 'right';
+        this.opened = false;
+    }
+    handleOpenToggle() {
+        if (this.opened) {
+            this.handleShow();
+        }
+        else {
+            this.handleHide();
+        }
+    }
+    componentWillLoad() {
+        if (this.opened) {
+            this.showTooltip();
+        }
+        this.el.addEventListener('blur', this.handleHide, true);
+        this.el.addEventListener('focus', this.handleShow, true);
+    }
+    componentDidUpdate() {
+        if (this.opened) {
+            this.showTooltip();
+        }
+    }
+    componentDidRender() {
+        positionTooltip({ elem: this.el, elemPlacement: this.placement, overlay: this.contentEl });
+    }
+    /**
+     * Shows the tooltip by enabling the opened property
+     */
+    async showTooltip() {
+        this.opened = true;
+    }
+    /**
+     * Hides the tooltip by disabling the opened property
+     */
+    async hideTooltip() {
+        this.opened = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '52999e010e83fb265a46867b0b29169f7363a496', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, index.h("div", { key: '6bb63ba10eab04114ced7ead7079d46cc22cb72c', 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'}
+          ` }, index.h("span", { key: '930c148c837912ad9d5ea57e92246e0211b355c4', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, index.h("slot", { key: '813429e2865fae92050d779ca7f47072313db851' })), index.h("div", { key: '7f47e8b4ff3d6238f27e38986f032ece94f6b584', 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" }, index.h("slot", { key: '90b3f02974d250375d55ed332a9c525626ff5439', name: "content" }), this.content))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "opened": ["handleOpenToggle"]
+    }; }
+};
+PdsTooltip.style = PdsTooltipStyle0;
+
+exports.pds_tooltip = PdsTooltip;
+
+//# sourceMappingURL=pds-tooltip.cjs.entry.js.map

package/dist/cjs/pds-tooltip.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pds-tooltip.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/utils/overlay.ts","src/components/pds-tooltip/pds-tooltip.scss?tag=pds-tooltip&encapsulation=shadow","src/components/pds-tooltip/pds-tooltip.tsx"],"sourcesContent":["interface OverlayArgs {\n  elem: HTMLElement;\n  elemPlacement: string;\n  overlay: HTMLElement;\n  offset?: number;\n}\n\nexport const positionTooltip = ({elem, elemPlacement, overlay, offset = 8}: OverlayArgs) => {\n  if (elem == undefined) return;\n\n  const rect = elem.getBoundingClientRect();\n  const contentRect = overlay.getBoundingClientRect();\n\n  // Exit the function if the placement is not set\n  if (!elemPlacement || elemPlacement == \"\") return;\n\n  switch (true) {\n    case elemPlacement.includes(\"right\"):\n      overlay.style.top = '50%';\n      overlay.style.left = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"left\"):\n      overlay.style.top = '50%';\n      overlay.style.right = `calc(${rect.width}px + ${offset}px)`;\n      overlay.style.transform = 'translateY(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.top = '0';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.bottom = '0';\n        overlay.style.top = 'initial';\n        overlay.style.transform = 'translateY(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"bottom\"):\n      overlay.style.top = `calc(${rect.height}px + ${offset}px)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n\n    case elemPlacement.includes(\"top\"):\n      overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;\n      overlay.style.left = '50%';\n      overlay.style.transform = 'translateX(-50%)';\n\n      if (elemPlacement.includes(\"start\")) {\n        overlay.style.left = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n      if (elemPlacement.includes(\"end\")) {\n        overlay.style.left = 'initial';\n        overlay.style.right = '0';\n        overlay.style.transform = 'translateX(0)';\n      }\n\n      break;\n  }\n}\n",":host {\n  --border-radius-overlay: var(--pine-border-radius-125);\n\n  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;\n  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);\n\n  --box-shadow-default: var(--pine-box-shadow-md);\n\n  --color-background-default: var(--pine-color-charcoal-400);\n  --color-text-default: var(--pine-color-white);\n\n  --font-size-overlay: var(--pine-font-size-087);\n\n  --line-height-overlay: var(--pine-line-height-125);\n\n  --sizing-arrow-default: 6px;\n  --sizing-arrow-offset: 14px;\n  --sizing-width-default: 320px;\n\n  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);\n\n  display: inline-block;\n  position: relative;\n\n  ::slotted(*) {\n    display: flex;\n  }\n\n  ::slotted([slot=\"content\"]) {\n    display: block;\n    white-space: normal;\n    width: var(--sizing-width-default);\n  }\n}\n\n.pds-tooltip__content {\n  background-color: var(--color-background-default);\n  border-radius: var(--border-radius-overlay);\n  box-shadow: var(--box-shadow-default);\n  color: var(--color-text-default);\n  font-size: var(--font-size-overlay);\n  line-height: var(--line-height-overlay);\n  // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n  opacity: 0;\n  padding: var(--spacing-padding-overlay);\n  position: absolute;\n  visibility: hidden;\n  width: max-content;\n\n  .pds-tooltip--is-open & {\n    // TODO: need to use block / none but the tooltip content width and height are needed for calculations\n    opacity: 1;\n    visibility: visible;\n    z-index: 1;\n  }\n\n  :host(.pds-tooltip--has-html-content) & {\n    width: auto;\n  }\n\n  &::after {\n    border-color: transparent;\n    border-right-color: transparent;\n    border-style: solid;\n    border-width: var(--border-width-arrow-left);\n    content: '';\n    height: 0;\n    position: absolute;\n    width: 0;\n\n    .pds-tooltip--right & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--right-end & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      bottom: var(--sizing-arrow-offset);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--right-start & {\n      border-inline-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-left);\n      left: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--top & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: 50%;\n      top: initial;\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--top-start & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--top-end & {\n      border-block-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-down);\n      bottom: calc(var(--sizing-arrow-default) * -1);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: initial;\n    }\n\n    .pds-tooltip--left & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    .pds-tooltip--left-end & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      bottom: var(--sizing-arrow-offset);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: initial;\n    }\n\n    .pds-tooltip--left-start & {\n      border-inline-start-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-right);\n      left: initial;\n      right: calc(var(--sizing-arrow-default) * -1);\n      top: var(--sizing-arrow-offset);\n    }\n\n    .pds-tooltip--bottom & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: 50%;\n      top: calc(var(--sizing-arrow-default) * -1);\n      transform: translateX(-50%);\n    }\n\n    .pds-tooltip--bottom-end & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: initial;\n      right: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--bottom-start & {\n      border-block-end-color: var(--color-background-default);\n      border-width: var(--border-width-arrow-up);\n      left: var(--sizing-arrow-offset);\n      top: calc(var(--sizing-arrow-default) * -1);\n    }\n\n    .pds-tooltip--no-arrow & {\n      border-width: 0;\n    }\n  }\n}\n","import { Component, Element, Event, Host, Prop, State, h, EventEmitter, 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  styleUrl: '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   * 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  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\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    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\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          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pine-core.cjs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-11f95019.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.15.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('pine-core.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["pds-table-head.cjs",[[1,"pds-table-head",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-table-row.cjs",[[1,"pds-table-row",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-copytext.cjs",[[1,"pds-copytext",{"border":[516],"componentId":[1,"component-id"],"fullWidth":[4,"full-width"],"truncate":[4],"value":[1]}]]],["pds-accordion.cjs",[[1,"pds-accordion",{"componentId":[1,"component-id"],"isOpen":[1540,"open"]},null,{"isOpen":["handleOpenState"]}]]],["pds-avatar.cjs",[[1,"pds-avatar",{"alt":[1],"badge":[4],"componentId":[1,"component-id"],"dropdown":[4],"image":[1],"size":[513],"variant":[513]}]]],["pds-box.cjs",[[0,"pds-box",{"alignItems":[1,"align-items"],"auto":[4],"backgroundColor":[1,"background-color"],"border":[4],"borderColor":[1,"border-color"],"borderRadius":[1,"border-radius"],"direction":[1],"display":[1],"fit":[4],"gap":[1],"flex":[1],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"minWidth":[1,"min-width"],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"padding":[1],"shadow":[1],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]}]]],["pds-chip.cjs",[[1,"pds-chip",{"componentId":[1,"component-id"],"sentiment":[1],"dot":[4],"label":[1],"large":[4],"variant":[1]}]]],["pds-divider.cjs",[[1,"pds-divider",{"componentId":[1,"component-id"],"offset":[1],"vertical":[4]}]]],["pds-image.cjs",[[1,"pds-image",{"alt":[1],"componentId":[1,"component-id"],"height":[2],"loading":[1],"sizes":[1],"src":[1],"srcset":[1],"width":[2]}]]],["pds-input.cjs",[[1,"pds-input",{"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"type":[1],"value":[1025]}]]],["pds-link.cjs",[[1,"pds-link",{"componentId":[1,"component-id"],"external":[4],"variant":[1],"fontSize":[1,"font-size"],"href":[1]}]]],["pds-loader.cjs",[[1,"pds-loader",{"isLoading":[4,"is-loading"],"showLabel":[4,"show-label"],"size":[513],"variant":[1]}]]],["pds-progress.cjs",[[1,"pds-progress",{"animated":[4],"componentId":[1,"component-id"],"fillColor":[1,"fill-color"],"label":[1],"percent":[2],"showPercent":[4,"show-percent"]}]]],["pds-radio.cjs",[[2,"pds-radio",{"checked":[4],"disabled":[4],"errorMessage":[1,"error-message"],"invalid":[4],"componentId":[1,"component-id"],"label":[1],"helperMessage":[1,"helper-message"],"name":[1],"required":[4],"value":[1]}]]],["pds-row.cjs",[[0,"pds-row",{"alignItems":[1,"align-items"],"border":[4],"colGap":[1,"col-gap"],"componentId":[1,"component-id"],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"noWrap":[4,"no-wrap"]}]]],["pds-sortable.cjs",[[6,"pds-sortable",{"border":[516],"componentId":[1,"component-id"],"dividers":[516],"handleType":[1,"handle-type"]}]]],["pds-sortable-item.cjs",[[6,"pds-sortable-item",{"enableActions":[4,"enable-actions"],"componentId":[1,"component-id"],"showHandle":[1028,"show-handle"]}]]],["pds-switch.cjs",[[1,"pds-switch",{"componentId":[1,"component-id"],"checked":[4],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"type":[1],"value":[1]}]]],["pds-tab.cjs",[[4,"pds-tab",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"index":[2],"selected":[4]}]]],["pds-table.cjs",[[1,"pds-table",{"compact":[4],"componentId":[1,"component-id"],"responsive":[4],"fixedColumn":[4,"fixed-column"],"selectable":[4],"sortingColumn":[32],"sortingDirection":[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["pds-table-body.cjs",[[1,"pds-table-body"]]],["pds-tabpanel.cjs",[[4,"pds-tabpanel",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"selected":[1028]}]]],["pds-tabs.cjs",[[1,"pds-tabs",{"tablistLabel":[1,"tablist-label"],"componentId":[1,"component-id"],"variant":[1],"activeTabName":[1025,"active-tab-name"],"activeTabIndex":[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["pds-textarea.cjs",[[1,"pds-textarea",{"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[1028],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1025]}]]],["pds-tooltip.cjs",[[1,"pds-tooltip",{"content":[1],"componentId":[1,"component-id"],"hasArrow":[4,"has-arrow"],"htmlContent":[4,"html-content"],"placement":[513],"opened":[1540],"isOpen":[32],"showTooltip":[64],"hideTooltip":[64]},null,{"opened":["handleOpenToggle"]}]]],["pds-button.cjs",[[1,"pds-button",{"componentId":[1,"component-id"],"disabled":[4],"icon":[1],"name":[1],"value":[1],"type":[1],"variant":[1]}]]],["pds-table-cell.cjs",[[1,"pds-table-cell",{"truncate":[4],"tableScrolling":[32]}]]],["pds-table-head-cell.cjs",[[1,"pds-table-head-cell",{"sortable":[4],"sortingDirection":[32],"tableScrolling":[32],"isSelected":[32]}]]],["pds-checkbox.cjs",[[1,"pds-checkbox",{"checked":[1028],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"indeterminate":[1028],"invalid":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1]},null,{"checked":["updateIndeterminate"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;
+
+//# sourceMappingURL=pine-core.cjs.js.map

package/dist/cjs/pine-core.cjs.js.map

@@ -0,0 +1 @@
+{"file":"pine-core.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,2MAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.15.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,40 @@
+{
+  "entries": [
+    "components/pds-accordion/pds-accordion.js",
+    "components/pds-avatar/pds-avatar.js",
+    "components/pds-box/pds-box.js",
+    "components/pds-button/pds-button.js",
+    "components/pds-checkbox/pds-checkbox.js",
+    "components/pds-chip/pds-chip.js",
+    "components/pds-copytext/pds-copytext.js",
+    "components/pds-divider/pds-divider.js",
+    "components/pds-image/pds-image.js",
+    "components/pds-input/pds-input.js",
+    "components/pds-link/pds-link.js",
+    "components/pds-loader/pds-loader.js",
+    "components/pds-progress/pds-progress.js",
+    "components/pds-radio/pds-radio.js",
+    "components/pds-row/pds-row.js",
+    "components/pds-sortable/pds-sortable.js",
+    "components/pds-sortable/pds-sortable-item/pds-sortable-item.js",
+    "components/pds-switch/pds-switch.js",
+    "components/pds-table/pds-table.js",
+    "components/pds-table/pds-table-body/pds-table-body.js",
+    "components/pds-table/pds-table-cell/pds-table-cell.js",
+    "components/pds-table/pds-table-head/pds-table-head.js",
+    "components/pds-table/pds-table-head-cell/pds-table-head-cell.js",
+    "components/pds-table/pds-table-row/pds-table-row.js",
+    "components/pds-tabs/pds-tabs.js",
+    "components/pds-tabs/pds-tab/pds-tab.js",
+    "components/pds-tabs/pds-tabpanel/pds-tabpanel.js",
+    "components/pds-textarea/pds-textarea.js",
+    "components/pds-tooltip/pds-tooltip.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.15.0",
+    "typescriptVersion": "5.4.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/_internal/pds-label/pds-label.js

@@ -0,0 +1,7 @@
+import { h } from "@stencil/core";
+/**
+ * Returns markup for an input label.
+ * @internal
+ */
+export const PdsLabel = ({ classNames, htmlFor, text }) => (h("label", { class: classNames, htmlFor: htmlFor }, text));
+//# sourceMappingURL=pds-label.js.map

package/dist/collection/components/_internal/pds-label/pds-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-label.js","sourceRoot":"","sources":["../../../../src/components/_internal/pds-label/pds-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAkBvD;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAC1F,aAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,IAAG,IAAI,CAAS,CAC3D,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Props for the input label.\n */\ninterface LabelProps {\n  classNames?: string,\n  /**\n   * Corresponds to the 'for' attribute on a label. Useful for\n   * associating a label with a specific input.\n   */\n  htmlFor: string,\n  /**\n   * Label text displayed.\n   */\n  text: string,\n}\n\n/**\n * Returns markup for an input label.\n * @internal\n */\nexport const PdsLabel: FunctionalComponent<LabelProps> = ({ classNames, htmlFor, text }) => (\n  <label class={classNames} htmlFor={htmlFor}>{text}</label>\n);\n"]}