@pine-ds/core 3.6.0 → 3.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"pds-table.entry.js","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  border-radius: inherit;\n  box-sizing: border-box;\n  display: table;\n  width: 100%;\n}\n\n:host(:focus-visible) {\n  outline: var(--pine-outline-focus);\n}\n\n/*\n * Responsive Table Architecture\n *\n * When responsive=true, the table uses a nested structure to provide horizontal scrolling\n * while maintaining proper width behavior and scroll shadows:\n *\n * Host (.pds-table-responsive-host)\n * ├── Shadow Left (positioned fixed to left edge)\n * ├── Shadow Right (positioned fixed to right edge)\n * └── Container (.pds-table-responsive-container)\n *     └── Wrapper (.pds-table-responsive-wrapper)\n *         └── Table (.pds-table)\n *\n * - Host: Constrains everything to parent width, clips shadows to border-radius\n * - Shadows: Stay fixed during scroll, provide visual scroll indicators\n * - Container: Handles horizontal scrolling (overflow-x: auto)\n * - Table: Expands to full width or scrolls based on content\n */\n:host(.pds-table-responsive-host) {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  display: block !important;\n  max-width: 100% !important;\n  overflow: hidden !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-container {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  overflow-x: auto !important;\n  overflow-y: visible !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-wrapper {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  display: block !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-wrapper .pds-table {\n  display: table !important;\n  min-width: max-content !important;\n  table-layout: auto !important;\n  white-space: nowrap !important;\n  width: 100% !important;\n}\n\n/* Shadows positioned relative to host (non-scrolling), covering container edges */\n.scroll-shadow-left,\n.scroll-shadow-right {\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  transition: opacity 0.1s ease;\n  width: 4px;\n  z-index: 10;\n}\n\n.scroll-shadow-left {\n  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);\n  border-bottom-left-radius: inherit;\n  border-top-left-radius: inherit;\n  left: 0;\n}\n\n.scroll-shadow-right {\n  background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);\n  border-bottom-right-radius: inherit;\n  border-top-right-radius: inherit;\n  right: 0;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrls: ['pds-table.scss'],\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private _responsiveHandleScroll: (() => void) | null = null;\n  private _responsiveHandleResize: (() => void) | null = null;\n  private _responsiveResizeObserver: ResizeObserver | null = null;\n  private _teardownResponsive: (() => void) | null = null;\n\n  /**\n   * Determines if the table displays with reduced table cell padding.\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 the should display a fixed first column.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if the table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  /**\n   * The name of the column being sorted.\n   * @defaultValue null\n   */\n  @State() sortingColumn: string | null = null;\n\n  /**\n   * The direction of sorting.\n   * @defaultValue 'asc'\n   */\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  componentDidLoad() {\n    if (this.responsive) {\n      this.setupResponsiveScrolling();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._teardownResponsive) {\n      this._teardownResponsive();\n      this._teardownResponsive = null;\n    }\n  }\n\n  /**\n   * Sets up responsive scrolling behavior for the table.\n   *\n   * This method creates a horizontal scrolling system where:\n   * - The table content can scroll horizontally when it exceeds the container width\n   * - Scroll shadows appear at the left/right edges to indicate scrollable content\n   * - Fixed columns remain sticky during horizontal scrolling\n   * - Shadows respect border-radius and don't appear when there's nothing to scroll\n   *\n   * Architecture:\n   * - Host element: Contains everything, respects parent constraints\n   * - Container element: Handles horizontal scrolling (overflow-x: auto)\n   * - Shadow elements: Positioned fixed relative to host, show scroll indicators\n   *\n   * @private\n   */\n  private setupResponsiveScrolling() {\n    const container = this.el.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n    const leftShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-left') as HTMLElement;\n    const rightShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-right') as HTMLElement;\n\n    if (!container || !leftShadow || !rightShadow) return;\n\n    // Store container reference for cleanup\n    this.scrollContainer = container;\n\n    /**\n     * Updates the visibility of scroll shadows based on current scroll position.\n     * Left shadow: Shows when scrolled away from start (hidden if fixedColumn is enabled)\n     * Right shadow: Shows when there's content to scroll and not at the end\n     */\n    this._responsiveHandleScroll = () => {\n      if (!this.scrollContainer) return;\n\n      const scrollLeft = this.scrollContainer.scrollLeft;\n      const maxScrollLeft = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\n\n      // Show left shadow when scrolled away from start, but not if there's a fixed column\n      leftShadow.style.opacity = (scrollLeft > 0 && !this.fixedColumn) ? '1' : '0';\n\n      // Show right shadow only if there's content to scroll AND not at end\n      rightShadow.style.opacity = (maxScrollLeft > 0 && scrollLeft < maxScrollLeft - 1) ? '1' : '0';\n    };\n\n    // Add scroll event listener to container element\n    this.scrollContainer.addEventListener('scroll', this._responsiveHandleScroll, { passive: true });\n\n    // Add resize observer to update shadows when container size changes\n    if (typeof window !== 'undefined' && window.ResizeObserver) {\n      try {\n        this._responsiveResizeObserver = new ResizeObserver(() => {\n          this._responsiveHandleScroll?.();\n        });\n        this._responsiveResizeObserver.observe(this.scrollContainer);\n      } catch (error) {\n        // ResizeObserver not available in some environments (e.g., tests)\n        // Fall back to window resize listener only\n      }\n    }\n\n    // Listen for window resize as fallback\n    if (typeof window !== 'undefined') {\n      this._responsiveHandleResize = () => {\n        this._responsiveHandleScroll?.();\n      };\n      window.addEventListener('resize', this._responsiveHandleResize);\n    }\n\n    // Create teardown function for cleanup\n    this._teardownResponsive = () => {\n      if (this.scrollContainer && this._responsiveHandleScroll) {\n        this.scrollContainer.removeEventListener('scroll', this._responsiveHandleScroll);\n        this.scrollContainer = null;\n      }\n\n      if (this._responsiveResizeObserver) {\n        this._responsiveResizeObserver.disconnect();\n        this._responsiveResizeObserver = null;\n      }\n\n      if (typeof window !== 'undefined' && this._responsiveHandleResize) {\n        window.removeEventListener('resize', this._responsiveHandleResize);\n        this._responsiveHandleResize = null;\n      }\n\n      this._responsiveHandleScroll = null;\n    };\n\n    // Initial check after setup\n    this._responsiveHandleScroll();\n  }\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, undefined, { sensitivity: 'base' });\n      } else {\n        return valueB.localeCompare(valueA, undefined, { sensitivity: 'base' });\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    if (this.responsive) {\n      return (\n        <Host\n          class=\"pds-table is-responsive pds-table-responsive-host\"\n          id={this.componentId}\n          role=\"grid\"\n          selectable={this.selectable}\n          tabindex=\"0\"\n          part=\"table responsive-table\"\n        >\n          <div class=\"scroll-shadow-left\" part=\"scroll-shadow-left\"></div>\n          <div class=\"scroll-shadow-right\" part=\"scroll-shadow-right\"></div>\n          <div class=\"pds-table-responsive-container\" part=\"responsive-container\">\n            <div class=\"pds-table-responsive-wrapper\" part=\"responsive-wrapper\">\n              <div class={this.classNames()} part=\"table-inner\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n        tabindex=\"0\"\n        part=\"table\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pds-table.entry.js","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  border-radius: inherit;\n  box-sizing: border-box;\n  display: table;\n  width: 100%;\n}\n\n:host(:focus-visible) {\n  outline: var(--pine-outline-focus);\n}\n\n/*\n * Responsive Table Architecture\n *\n * When responsive=true, the table uses a nested structure to provide horizontal scrolling\n * while maintaining proper width behavior and scroll shadows:\n *\n * Host (.pds-table-responsive-host)\n * ├── Shadow Left (positioned fixed to left edge)\n * ├── Shadow Right (positioned fixed to right edge)\n * └── Container (.pds-table-responsive-container)\n *     └── Wrapper (.pds-table-responsive-wrapper)\n *         └── Table (.pds-table)\n *\n * - Host: Constrains everything to parent width, clips shadows to border-radius\n * - Shadows: Stay fixed during scroll, provide visual scroll indicators\n * - Container: Handles horizontal scrolling (overflow-x: auto)\n * - Table: Expands to full width or scrolls based on content\n */\n:host(.pds-table-responsive-host) {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  display: block !important;\n  max-width: 100% !important;\n  overflow: hidden !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-container {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  overflow-x: auto !important;\n  overflow-y: visible !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-wrapper {\n  border-radius: inherit;\n  box-sizing: border-box !important;\n  display: block !important;\n  position: relative !important;\n  width: 100% !important;\n}\n\n.pds-table-responsive-wrapper .pds-table {\n  display: table !important;\n  min-width: max-content !important;\n  table-layout: auto !important;\n  white-space: nowrap !important;\n  width: 100% !important;\n}\n\n/* Shadows positioned relative to host (non-scrolling), covering container edges */\n.scroll-shadow-left,\n.scroll-shadow-right {\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  transition: opacity 0.1s ease;\n  width: 4px;\n  z-index: var(--pine-z-index);\n}\n\n.scroll-shadow-left {\n  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);\n  border-bottom-left-radius: inherit;\n  border-top-left-radius: inherit;\n  left: 0;\n}\n\n.scroll-shadow-right {\n  background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);\n  border-bottom-right-radius: inherit;\n  border-top-right-radius: inherit;\n  right: 0;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrls: ['pds-table.scss'],\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private _responsiveHandleScroll: (() => void) | null = null;\n  private _responsiveHandleResize: (() => void) | null = null;\n  private _responsiveResizeObserver: ResizeObserver | null = null;\n  private _teardownResponsive: (() => void) | null = null;\n\n  /**\n   * Determines if the table displays with reduced table cell padding.\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 the should display a fixed first column.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if the table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  /**\n   * The name of the column being sorted.\n   * @defaultValue null\n   */\n  @State() sortingColumn: string | null = null;\n\n  /**\n   * The direction of sorting.\n   * @defaultValue 'asc'\n   */\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  componentDidLoad() {\n    if (this.responsive) {\n      this.setupResponsiveScrolling();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._teardownResponsive) {\n      this._teardownResponsive();\n      this._teardownResponsive = null;\n    }\n  }\n\n  /**\n   * Sets up responsive scrolling behavior for the table.\n   *\n   * This method creates a horizontal scrolling system where:\n   * - The table content can scroll horizontally when it exceeds the container width\n   * - Scroll shadows appear at the left/right edges to indicate scrollable content\n   * - Fixed columns remain sticky during horizontal scrolling\n   * - Shadows respect border-radius and don't appear when there's nothing to scroll\n   *\n   * Architecture:\n   * - Host element: Contains everything, respects parent constraints\n   * - Container element: Handles horizontal scrolling (overflow-x: auto)\n   * - Shadow elements: Positioned fixed relative to host, show scroll indicators\n   *\n   * @private\n   */\n  private setupResponsiveScrolling() {\n    const container = this.el.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n    const leftShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-left') as HTMLElement;\n    const rightShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-right') as HTMLElement;\n\n    if (!container || !leftShadow || !rightShadow) return;\n\n    // Store container reference for cleanup\n    this.scrollContainer = container;\n\n    /**\n     * Updates the visibility of scroll shadows based on current scroll position.\n     * Left shadow: Shows when scrolled away from start (hidden if fixedColumn is enabled)\n     * Right shadow: Shows when there's content to scroll and not at the end\n     */\n    this._responsiveHandleScroll = () => {\n      if (!this.scrollContainer) return;\n\n      const scrollLeft = this.scrollContainer.scrollLeft;\n      const maxScrollLeft = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\n\n      // Show left shadow when scrolled away from start, but not if there's a fixed column\n      leftShadow.style.opacity = (scrollLeft > 0 && !this.fixedColumn) ? '1' : '0';\n\n      // Show right shadow only if there's content to scroll AND not at end\n      rightShadow.style.opacity = (maxScrollLeft > 0 && scrollLeft < maxScrollLeft - 1) ? '1' : '0';\n    };\n\n    // Add scroll event listener to container element\n    this.scrollContainer.addEventListener('scroll', this._responsiveHandleScroll, { passive: true });\n\n    // Add resize observer to update shadows when container size changes\n    if (typeof window !== 'undefined' && window.ResizeObserver) {\n      try {\n        this._responsiveResizeObserver = new ResizeObserver(() => {\n          this._responsiveHandleScroll?.();\n        });\n        this._responsiveResizeObserver.observe(this.scrollContainer);\n      } catch (error) {\n        // ResizeObserver not available in some environments (e.g., tests)\n        // Fall back to window resize listener only\n      }\n    }\n\n    // Listen for window resize as fallback\n    if (typeof window !== 'undefined') {\n      this._responsiveHandleResize = () => {\n        this._responsiveHandleScroll?.();\n      };\n      window.addEventListener('resize', this._responsiveHandleResize);\n    }\n\n    // Create teardown function for cleanup\n    this._teardownResponsive = () => {\n      if (this.scrollContainer && this._responsiveHandleScroll) {\n        this.scrollContainer.removeEventListener('scroll', this._responsiveHandleScroll);\n        this.scrollContainer = null;\n      }\n\n      if (this._responsiveResizeObserver) {\n        this._responsiveResizeObserver.disconnect();\n        this._responsiveResizeObserver = null;\n      }\n\n      if (typeof window !== 'undefined' && this._responsiveHandleResize) {\n        window.removeEventListener('resize', this._responsiveHandleResize);\n        this._responsiveHandleResize = null;\n      }\n\n      this._responsiveHandleScroll = null;\n    };\n\n    // Initial check after setup\n    this._responsiveHandleScroll();\n  }\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, undefined, { sensitivity: 'base' });\n      } else {\n        return valueB.localeCompare(valueA, undefined, { sensitivity: 'base' });\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    if (this.responsive) {\n      return (\n        <Host\n          class=\"pds-table is-responsive pds-table-responsive-host\"\n          id={this.componentId}\n          role=\"grid\"\n          selectable={this.selectable}\n          tabindex=\"0\"\n          part=\"table responsive-table\"\n        >\n          <div class=\"scroll-shadow-left\" part=\"scroll-shadow-left\"></div>\n          <div class=\"scroll-shadow-right\" part=\"scroll-shadow-right\"></div>\n          <div class=\"pds-table-responsive-container\" part=\"responsive-container\">\n            <div class=\"pds-table-responsive-wrapper\" part=\"responsive-wrapper\">\n              <div class={this.classNames()} part=\"table-inner\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n        tabindex=\"0\"\n        part=\"table\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-Bf1dou5H.js';
 
 const pdsTabpanelCss = ":host{display:block}.pds-tabpanel{display:none;margin-top:var(--tabs-dimension-panel-margin-top);padding:var(--tabs-dimension-panel-padding)}.pds-tabpanel:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabpanel.is-active{display:block}";
 
@@ -12,7 +12,7 @@ const PdsTabpanel = class {
         this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
     }
     render() {
-        return (h(Host, { key: '452260718e63155f0ce100b6d502b208fe0b8210', slot: "tabpanels" }, h("div", { key: 'dbf06166503b2890d827ac58f3481330f60edb5c', 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" }, h("slot", { key: '4785fa2a3781569b51e1947db5dd860b36e09ab5' }))));
+        return (h(Host, { key: '84aa81506200fd7f06a94a4c7570b2702b36d9e8', slot: "tabpanels" }, h("div", { key: '0e890243eb41ebda64183cc4fd559abf38f5dfdc', 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" }, h("slot", { key: 'aaabfd72a45f6cd52c9c279bf0c014315a659959' }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-Bf1dou5H.js';
 
 const pdsTabsCss = ":host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-grey-100);border:var(--pine-border-width-thin) solid var(--pine-color-grey-200);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}";
 
@@ -14,7 +14,13 @@ const PdsTabs = class {
     }
     handleKeyDown(ev) {
         const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
-        if (keySet.includes(ev.key)) {
+        // Only handle keyboard navigation if the event originated from a tab button
+        // that belongs to THIS tabs component
+        const target = ev.target;
+        const targetTab = target.closest('pds-tab');
+        // Check if the tab belongs to this tabs instance (not a nested one)
+        const isOwnTab = targetTab && targetTab.closest('pds-tabs') === this.el;
+        if (keySet.includes(ev.key) && isOwnTab) {
             ev.preventDefault();
             this.moveActiveTab(ev.key);
         }
@@ -43,8 +49,12 @@ const PdsTabs = class {
         this.activeTabIndex = moveFocusTo;
     }
     findAllChildren() {
-        this.tabs = this.el.querySelectorAll('pds-tab');
-        this.tabPanels = this.el.querySelectorAll('pds-tabpanel');
+        // Only select direct children tabs/tabpanels, not nested ones
+        const allTabs = Array.from(this.el.querySelectorAll('pds-tab'));
+        const allTabPanels = Array.from(this.el.querySelectorAll('pds-tabpanel'));
+        // Filter to only include tabs that belong to this tabs component (not nested)
+        this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);
+        this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);
     }
     propGeneration(child, index = 0) {
         child.parentComponentId = this.componentId.toString();
@@ -78,7 +88,7 @@ const PdsTabs = class {
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: 'e5b0d44fbe0df70a9260b5ce1ecabad9e5ce52da', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '4e987262ef8355b0a94f94ded397d72ccbb678f8', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'f615e1d116f4c0f9ee28d172f64a05e755386ead', name: "tabs" })), h("slot", { key: 'f74280a78775d19fb1e94d522c28531d79ba73e3', name: "tabpanels" })));
+        return (h(Host, { key: '89db4772ef4dab7f4dba38306b0fdf1ae55c8a9b', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'c1596be516168b0f2548b90344ad3bffcc5cb844', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, h("slot", { key: 'be58f90ec895da67fc84eded670183151feb261f', name: "tabs" })), h("slot", { key: '24d3bed1750d8b64a8ffc9c86f517b5e8b15f615', name: "tabpanels" })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"pds-tabs.entry.js","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 --tabs-dimension-panel-margin-top: Optional margin-top for panels\n   */\n  --tabs-dimension-panel-margin-top: var(--pine-dimension-none);\n  /**\n   * @prop --tabs-dimension-panel-padding: Optional padding for panels\n   */\n  --tabs-dimension-panel-padding: 0;\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--pine-dimension-md);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--pine-dimension-xs);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--pine-dimension-sm);\n}\n\n:host(.pds-tabs--pill) .pds-tabs__tablist {\n  background-color: var(--pine-color-grey-100);\n  border: var(--pine-border-width-thin) solid var(--pine-color-grey-200);\n  border-radius: var(--pine-dimension-100);\n  display: inline-flex;\n  display: flex;\n  gap: 0;\n  height: var(--pine-dimension-450);\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  styleUrls: ['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' | 'pill';\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"],"names":[],"mappings":"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"}
+{"version":3,"file":"pds-tabs.entry.js","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 --tabs-dimension-panel-margin-top: Optional margin-top for panels\n   */\n  --tabs-dimension-panel-margin-top: var(--pine-dimension-none);\n  /**\n   * @prop --tabs-dimension-panel-padding: Optional padding for panels\n   */\n  --tabs-dimension-panel-padding: 0;\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--pine-dimension-md);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--pine-dimension-xs);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--pine-dimension-sm);\n}\n\n:host(.pds-tabs--pill) .pds-tabs__tablist {\n  background-color: var(--pine-color-grey-100);\n  border: var(--pine-border-width-thin) solid var(--pine-color-grey-200);\n  border-radius: var(--pine-dimension-100);\n  display: inline-flex;\n  display: flex;\n  gap: 0;\n  height: var(--pine-dimension-450);\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 * @part tab-list - Exposes the container element that holds all the tab buttons for styling.\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrls: ['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' | 'pill';\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    // Only handle keyboard navigation if the event originated from a tab button\n    // that belongs to THIS tabs component\n    const target = ev.target as HTMLElement;\n    const targetTab = target.closest('pds-tab');\n\n    // Check if the tab belongs to this tabs instance (not a nested one)\n    const isOwnTab = targetTab && targetTab.closest('pds-tabs') === this.el;\n\n    if (keySet.includes(ev.key) && isOwnTab) {\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    // Only select direct children tabs/tabpanels, not nested ones\n    const allTabs = Array.from(this.el.querySelectorAll('pds-tab'));\n    const allTabPanels = Array.from(this.el.querySelectorAll('pds-tabpanel'));\n\n    // Filter to only include tabs that belong to this tabs component (not nested)\n    this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);\n    this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);\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} part=\"tab-list\">\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pds-text.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-BVCWKPy3.js';
+import { r as registerInstance, h, g as getElement } from './index-Bf1dou5H.js';
 import { s as setColor } from './utils-tJa4KYNO.js';
 
 const pdsTextCss = ":host{display:inline}:host([decoration=underline-dotted])>*{-webkit-text-decoration-color:var(--pine-color-grey-600);text-decoration-color:var(--pine-color-grey-600);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:12%;text-underline-offset:0.3rem;text-underline-position:under}:host([decoration=strikethrough])>*{text-decoration:line-through}h1{font:var(--pine-typography-heading-1);letter-spacing:var(--pine-letter-spacing-heading-1)}h2{font:var(--pine-typography-heading-2);letter-spacing:var(--pine-letter-spacing-heading-2)}h3{font:var(--pine-typography-heading-3);letter-spacing:var(--pine-letter-spacing-heading-3)}h4{font:var(--pine-typography-heading-4);letter-spacing:var(--pine-letter-spacing-heading-4)}h5{font:var(--pine-typography-heading-5);letter-spacing:var(--pine-letter-spacing-heading-5)}h6{font:var(--pine-typography-heading-6);letter-spacing:var(--pine-letter-spacing-heading-6)}code,em,p,pre,strong{font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing)}code,pre{font-family:monospace;letter-spacing:0;line-height:1}em{font-style:normal}strong{font-weight:bolder}:host([truncate])>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([italic])>*{font-style:italic}.pds-text{color:var(--color, var(--pine-color-text));margin:var(--pine-dimension-none)}.pds-text--size-2xl{font-size:var(--pine-font-size-body-2xl)}.pds-text--size-xl{font-size:var(--pine-font-size-body-xl)}.pds-text--size-lg{font-size:var(--pine-font-size-body-lg)}.pds-text--size-md{font-size:var(--pine-font-size-body-md)}.pds-text--size-sm{font-size:var(--pine-font-size-body-sm)}.pds-text--size-xs{font-size:var(--pine-font-size-body-xs)}.pds-text--size-2xs{font-size:var(--pine-font-size-body-2xs)}.pds-text--size-h1{font-size:var(--pine-font-size-heading-1)}.pds-text--size-h2{font-size:var(--pine-font-size-heading-2)}.pds-text--size-h3{font-size:var(--pine-font-size-heading-3)}.pds-text--size-h4{font-size:var(--pine-font-size-heading-4)}.pds-text--size-h5{font-size:var(--pine-font-size-heading-5)}.pds-text--size-h6{font-size:var(--pine-font-size-heading-6)}.pds-text--weight-extra-light{font-weight:var(--pine-font-weight-extra-light)}.pds-text--weight-light{font-weight:var(--pine-font-weight-light)}.pds-text--weight-regular{font-weight:var(--pine-font-weight-regular)}.pds-text--weight-medium{font-weight:var(--pine-font-weight-medium)}.pds-text--weight-semibold{font-weight:var(--pine-font-weight-semi-bold)}.pds-text--weight-bold{font-weight:var(--pine-font-weight-bold)}.pds-text--gutter-2xl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-text--gutter-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-text--gutter-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-text--gutter-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-text--gutter-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-text--gutter-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-text--gutter-2xs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-text--align-start{text-align:start}.pds-text--align-center{text-align:center}.pds-text--align-end{text-align:end}.pds-text--align-justify{text-align:justify}";
@@ -21,7 +21,7 @@ const PdsText = class {
       ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
       ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}
     `;
-        return (h(Tag, { key: '290b394545a5769f9d020922b31e14991148ebc7', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '0e64e2e05db073a5d0568f282acce4b9f06238cf' })));
+        return (h(Tag, { key: '101a42ae93ac81968a177c7e0d569417f376909c', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '903b04a19b948e04d577c8585a76647033b9c36e' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,14 +1,14 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
-import { i as isRequired, a as assignDescription, m as messageId } from './form-DTL_39D_.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Bf1dou5H.js';
+import { i as isRequired, e as exposeTypeProperty, a as assignDescription, m as messageId } from './form-DwjNklzi.js';
 import { d as debounceEvent } from './utils-tJa4KYNO.js';
 import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes-C0M1gTKv.js';
-import { f as danger } from './index-DrJ5r5Pu.js';
+import { i as danger } from './index-D4zJBIgl.js';
 
 const labelCss = ":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:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";
 
 const pdsInputTokensCss = ":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";
 
-const pdsTextareaCss = ":host{display:inline-block;width:100%}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-textarea__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.pds-textarea__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}.pds-textarea__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__field-wrapper{display:inline-block;position:relative;width:100%}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-sizing:border-box;box-sizing:border-box;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:calc(var(--pine-dimension-xl) * 2);min-width:calc(var(--pine-dimension-xl) * 2);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);resize:both;width:100%}:host([max-length]) .pds-textarea__field{padding-bottom:calc(var(--pine-dimension-xs) + var(--pine-dimension-md))}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-textarea__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-textarea__character-counter{background:color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);border-radius:calc(var(--pine-dimension-2xs) * 0.5);color:var(--pine-color-text-readonly);font:var(--pine-typography-body-sm-medium);padding:calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;z-index:2}:host([aria-disabled=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled)}:host([aria-readonly=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea__field.is-invalid~.pds-textarea__character-counter{background-color:var(--pine-input-color-background-danger)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
+const pdsTextareaCss = ":host{display:inline-block;width:100%}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-textarea__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.pds-textarea__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}.pds-textarea__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__field-wrapper{display:inline-block;position:relative;width:100%}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-sizing:border-box;box-sizing:border-box;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:calc(var(--pine-dimension-xl) * 2);min-width:calc(var(--pine-dimension-xl) * 2);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);resize:both;width:100%}:host([max-length]) .pds-textarea__field{padding-bottom:calc(var(--pine-dimension-xs) + var(--pine-dimension-md))}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-textarea__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-textarea__character-counter{background:color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);border-radius:calc(var(--pine-dimension-2xs) * 0.5);color:var(--pine-color-text-readonly);font:var(--pine-typography-body-sm-medium);padding:calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;z-index:var(--pine-z-index)}:host([aria-disabled=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled)}:host([aria-readonly=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea__field.is-invalid~.pds-textarea__character-counter{background-color:var(--pine-input-color-background-danger)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
 
 const PdsTextarea = class {
     constructor(hostRef) {
@@ -18,6 +18,7 @@ const PdsTextarea = class {
         this.pdsInput = createEvent(this, "pdsInput");
         this.pdsTextareaChange = createEvent(this, "pdsTextareaChange");
         this.inheritedAttributes = {};
+        this._type = 'textarea';
         /**
          * Determines whether or not the textarea is disabled.
          * @defaultValue false
@@ -181,6 +182,8 @@ const PdsTextarea = class {
         this.updateFormValue();
         // Setup ResizeObserver for character counter positioning
         this.setupResizeObserver();
+        // Expose type property on the element instance to match native form element behavior
+        exposeTypeProperty(this.el, () => this._type);
     }
     /**
      * Sets up ResizeObserver to track textarea resize for character counter positioning
@@ -295,10 +298,10 @@ const PdsTextarea = class {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: 'e1e17543442fcd240498b7f56ddb86e35ac1d770', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '5a69f6b67dcba5107aa9150fc87543e7638933bb', class: "pds-textarea" }, this.label &&
-            h("div", { key: '027592bca1595a85cdf24e8ab4201e6483fee80c', class: "pds-textarea__label-wrapper" }, h("label", { key: '815f18177b34893b9e76d8c0db7baa6b0f3400c5', htmlFor: this.componentId }, h("span", { key: '5fe5e5f984558c409d3a1c3e9fdb966038fcd4c4', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: 'd1d95ef8becd9648c8becc2fe6797432ed53ca81', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: 'd307adc2e75a381aae4dda4ad207bf3a670b7678', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            h("p", { key: 'c7b68b10f0362025d90a902cbc6d2d741e579935', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: '8fd179c3c8cf9c9d5ee7252d30357072a2f55090', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '3e3de603c035ae3d71be28132d55992eadda9a54', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '5ca3fed52ff7fd0b0497d01412bb7ca3746b2e7e', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '3761f27f234f9667ce8dffc77c5ede89159afaea', class: "pds-textarea" }, this.label &&
+            h("div", { key: 'db533228166be7a303969703b2e92327e02e0b88', class: "pds-textarea__label-wrapper" }, h("label", { key: '6e215f009e9297f5a1a415419f40064fd3168ad8', htmlFor: this.componentId }, h("span", { key: 'b48b3427bfdff3cef0ed18799cf64547b7e77e97', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '23c4a2231dfd1b42e45d04f35e9dc2772d2df2fb', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '7081f83eacc8dd5fdef8774b3887eb6109281aa6', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            h("p", { key: '237e251d35403fc4225123ac56476b656ab9ad48', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'f4102e758212c00074bfbd144d311fa4fedf5b49', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '92535a264a990ff133a1e6dde709236b3157b2d0', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-textarea.entry.js","sources":["src/global/styles/utils/label.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-input/pds-input.tokens.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n}\n","@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":host {\n  display: inline-block;\n  width: 100%;\n}\n\n:host([aria-readonly=\"true\"]) {\n  textarea {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n}\n\n.pds-textarea {\n  display: flex;\n  flex-direction: column;\n}\n\n.pds-textarea__label-wrapper {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n}\n\n.pds-textarea__action {\n  align-items: center;\n  display: flex;\n  gap: var(--pine-dimension-xs);\n  margin-inline-start: var(--pine-dimension-xs);\n}\n\nlabel {\n  display: block;\n  margin-block-end: var(--pine-dimension-xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-textarea__label-wrapper label {\n  margin-block-end: 0;\n}\n\n.pds-textarea__helper-message {\n  color: var(--pine-color-text-message);\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__error-message {\n  align-items: center;\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  font: var(--pine-typography-body-sm-medium);\n  gap: var(--pine-dimension-2xs);\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__field-wrapper {\n  display: inline-block;\n  position: relative;\n  width: 100%;\n}\n\n.pds-textarea__field {\n  background-color: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: calc(var(--pine-dimension-xs) * 1.25);\n  box-sizing: border-box;\n  font: var(--pine-typography-body);\n  letter-spacing: var(--pine-letter-spacing);\n  min-height: calc(var(--pine-dimension-xl) * 2);\n  min-width: calc(var(--pine-dimension-xl) * 2);\n  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n  resize: both;\n  width: 100%;\n\n  // Add bottom padding when character counter is present\n  :host([max-length]) & {\n    padding-bottom: calc(var(--pine-dimension-xs) + var(--pine-dimension-md));\n  }\n\n  &:hover:not(:disabled, .is-invalid) {\n    border: var(--pine-border-hover);\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  &::placeholder {\n    color: var(--pine-color-text-placeholder);\n  }\n\n  &.is-invalid {\n    background-color: var(--pine-input-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n.pds-textarea__character-counter {\n  background: color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);\n  border-radius: calc(var(--pine-dimension-2xs) * 0.5);\n  color: var(--pine-color-text-readonly);\n  font: var(--pine-typography-body-sm-medium);\n  padding: calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);\n  pointer-events: none;\n  position: absolute;\n  user-select: none;\n  white-space: nowrap;\n  z-index: 2;\n\n  // Match textarea disabled state\n  :host([aria-disabled=\"true\"]) & {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-disabled);\n  }\n\n  // Match textarea readonly state\n  :host([aria-readonly=\"true\"]) & {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n\n  // Match textarea invalid state - target when field has is-invalid class\n  .pds-textarea__field.is-invalid ~ & {\n    background-color: var(--pine-input-color-background-danger);\n  }\n}\n\n.visually-hidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: polygon(0 0, 0 0, 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: [\n    '../../global/styles/utils/label.scss',\n    '../pds-input/pds-input.tokens.scss',\n    'pds-textarea.scss'\n  ],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsTextarea {\n\n  private nativeTextarea?: HTMLTextAreaElement\n  private focusedValue?: string | null;\n  private inheritedAttributes: Attributes = {};\n  private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n  private internals?: ElementInternals;\n  private resizeObserver?: ResizeObserver;\n  private characterCounter?: HTMLElement;\n\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   *\n   * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n   * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n   * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n   * the input is cleared on edit, the type is `null`.\n   */\n  @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n  /**\n   * Event emitted whenever the value of the textarea changes.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  /**\n   * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n   * `textarea.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeTextarea) {\n      this.nativeTextarea.focus();\n    }\n  }\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: 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 textarea is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Displays an error message below the textarea field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the textarea field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines 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   * Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.\n   * Note: When true, the action slot is also hidden to maintain a minimal UI.\n   */\n  @Prop() hideLabel: boolean;\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   * Determines whether or not the textarea is readonly.\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Determines 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   * Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.\n   */\n  @Prop({ reflect: true }) maxLength?: number;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({mutable: true}) value?: string | null = '';\n\n  @State() hasFocus = false;\n\n  /**\n   * If true, the textarea has action content in the label area\n   */\n  @State() hasAction = false;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeTextarea = this.nativeTextarea;\n    const value = this.getValue();\n\n    if (nativeTextarea && nativeTextarea.value !== value) {\n      nativeTextarea.value = value;\n    }\n\n    // Update form value for Form Associated Custom Elements API\n    this.updateFormValue();\n\n    // Update character counter position in case content changes affect sizing\n    if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n      this.updateCharacterCounterPosition();\n    }\n  }\n\n  @Watch('maxLength')\n  protected maxLengthChanged() {\n    // Setup or teardown ResizeObserver based on maxLength\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.maxLength && this.nativeTextarea) {\n      this.setupResizeObserver();\n    }\n\n    // Update ElementInternals validity when maxLength changes\n    if (this.internals && this.internals.setValidity && this.nativeTextarea) {\n      const isTooLong = this.nativeTextarea.value.length > (this.maxLength || 0);\n      this.internals.setValidity(\n        { tooLong: isTooLong },\n        isTooLong ? 'Value exceeds maxLength' : '',\n        this.nativeTextarea\n      );\n    }\n  }\n\n  /**\n   * Emits an `pdsInput` event.\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n    this.pdsInput.emit({ value, event });\n  }\n\n  /**\n   * Emits an `pdsTextareaChange` event.\n   */\n  private emitValueChange(event?: Event) {\n    const textarea = event.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    const { value } = textarea;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n    this.focusedValue = newValue;\n    this.pdsTextareaChange.emit({ value: newValue, event });\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLTextAreaElement | null;\n    if (input) {\n      // Handle maxLength validation\n      if (this.maxLength && input.value.length > this.maxLength) {\n        // Prevent input beyond maxLength\n        input.value = input.value.substring(0, this.maxLength);\n      }\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n\n    // Update counter position when content changes\n    if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n      // Use requestAnimationFrame to ensure DOM is updated\n      requestAnimationFrame(() => {\n        this.updateCharacterCounterPosition();\n      });\n    }\n  };\n\n  private onTextareaChange = (ev: Event) => {\n    this.emitValueChange(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  connectedCallback() {\n    this.debounceChanged();\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n  }\n\n  disconnectedCallback() {\n    // Clean up ResizeObserver\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el),\n      ...inheritAttributes(this.el),\n    };\n    this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n  }\n\n  componentDidLoad() {\n    this.originalPdsInput = this.pdsInput;\n    // Set initial form value\n    this.updateFormValue();\n\n    // Setup ResizeObserver for character counter positioning\n    this.setupResizeObserver();\n  }\n\n  /**\n   * Sets up ResizeObserver to track textarea resize for character counter positioning\n   */\n  private setupResizeObserver() {\n    if (!this.maxLength || !this.nativeTextarea) return;\n\n    // ResizeObserver may not be available in test environments\n    if (typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => {\n        // Use requestAnimationFrame to ensure DOM updates are complete\n        requestAnimationFrame(() => {\n          this.updateCharacterCounterPosition();\n        });\n      });\n\n      this.resizeObserver.observe(this.nativeTextarea);\n\n      // Initial positioning with a small delay to ensure counter is rendered\n      requestAnimationFrame(() => {\n        this.updateCharacterCounterPosition();\n      });\n    }\n  }\n\n  /**\n   * Updates character counter position to stay within textarea boundaries during resize\n   */\n  private updateCharacterCounterPosition() {\n    if (!this.characterCounter || !this.nativeTextarea) return;\n\n    // Skip positioning in test environments where ResizeObserver isn't available\n    if (typeof ResizeObserver === 'undefined') return;\n\n    // Ensure the character counter has been rendered and has dimensions\n    if (this.characterCounter.offsetWidth === 0 || this.characterCounter.offsetHeight === 0) {\n      // Counter not ready or component hidden - return and let resize/input observers handle positioning later\n      return;\n    }\n\n    // Position based on textarea's actual dimensions (which change during manual resize)\n    const textareaWidth = this.nativeTextarea.offsetWidth;\n    const textareaHeight = this.nativeTextarea.offsetHeight;\n    const counterWidth = this.characterCounter.offsetWidth;\n    const counterHeight = this.characterCounter.offsetHeight;\n\n    // Calculate position within textarea boundaries with padding from edges\n    const rightPosition = textareaWidth - counterWidth - 8;\n    const bottomPosition = textareaHeight - counterHeight - 8;\n\n    // Ensure counter stays within textarea boundaries even when resized very small\n    const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));\n    const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));\n\n    // Apply absolute positioning within the field wrapper\n    this.characterCounter.style.position = 'absolute';\n    this.characterCounter.style.left = `${finalLeft}px`;\n    this.characterCounter.style.top = `${finalTop}px`;\n    this.characterCounter.style.right = 'auto';\n    this.characterCounter.style.bottom = 'auto';\n  }\n\n  /**\n   * Renders the character counter when maxLength is set\n   */\n  private renderCharacterCounter() {\n    if (!this.maxLength) {\n      return null;\n    }\n\n    const currentLength = this.getValue().length;\n    return (\n      <div\n        class=\"pds-textarea__character-counter\"\n        ref={(el) => this.characterCounter = el}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={`${currentLength} of ${this.maxLength} characters`}\n      >\n        {currentLength} / {this.maxLength}\n      </div>\n    );\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-textarea__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  /**\n   * Updates the form value using ElementInternals API\n   */\n  private updateFormValue() {\n    if (this.internals && this.internals.setFormValue) {\n      const value = this.getValue();\n      this.internals.setFormValue(value || null);\n\n      // Set validity based on native textarea validation\n      if (this.nativeTextarea && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.nativeTextarea.validity,\n          this.nativeTextarea.validationMessage,\n          this.nativeTextarea\n        );\n      }\n    }\n  }\n\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is reset\n   */\n  formResetCallback() {\n    this.value = '';\n    this.updateFormValue();\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is disabled\n   */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called to restore form state\n   */\n  formStateRestoreCallback(state: string | FormData | null) {\n    if (typeof state === 'string') {\n      this.value = state;\n    } else if (state instanceof FormData && this.name) {\n      // Extract value from FormData using the textarea's name\n      const value = state.get(this.name);\n      if (typeof value === 'string') {\n        this.value = value;\n      }\n    }\n  }\n\n  render() {\n    const value = this.getValue();\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n        has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <div class=\"pds-textarea__label-wrapper\">\n              <label htmlFor={this.componentId}>\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {this.label}\n                </span>\n              </label>\n              {!this.hideLabel && this.renderAction()}\n            </div>\n          }\n          <div class=\"pds-textarea__field-wrapper\">\n            <textarea\n              ref={(el) => this.nativeTextarea = el }\n              aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n              aria-invalid={this.invalid ? \"true\" : undefined}\n              autocomplete={this.autocomplete}\n              class={this.textareaClassNames()}\n              disabled={this.disabled}\n              id={this.componentId}\n              maxlength={this.maxLength}\n              name={this.name}\n              placeholder={this.placeholder}\n              readOnly={this.readonly}\n              required={this.required}\n              rows={this.rows}\n              onBlur={this.onBlur}\n              onChange={this.onTextareaChange}\n              onFocus={this.onFocus}\n              onInput={this.onInput}\n              {...this.inheritedAttributes}\n            >\n              {value}\n            </textarea>\n            {this.renderCharacterCounter()}\n          </div>\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              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pds-textarea.entry.js","sources":["src/global/styles/utils/label.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-input/pds-input.tokens.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n}\n","@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":host {\n  display: inline-block;\n  width: 100%;\n}\n\n:host([aria-readonly=\"true\"]) {\n  textarea {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n}\n\n.pds-textarea {\n  display: flex;\n  flex-direction: column;\n}\n\n.pds-textarea__label-wrapper {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n}\n\n.pds-textarea__action {\n  align-items: center;\n  display: flex;\n  gap: var(--pine-dimension-xs);\n  margin-inline-start: var(--pine-dimension-xs);\n}\n\nlabel {\n  display: block;\n  margin-block-end: var(--pine-dimension-xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-textarea__label-wrapper label {\n  margin-block-end: 0;\n}\n\n.pds-textarea__helper-message {\n  color: var(--pine-color-text-message);\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__error-message {\n  align-items: center;\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  font: var(--pine-typography-body-sm-medium);\n  gap: var(--pine-dimension-2xs);\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__field-wrapper {\n  display: inline-block;\n  position: relative;\n  width: 100%;\n}\n\n.pds-textarea__field {\n  background-color: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: calc(var(--pine-dimension-xs) * 1.25);\n  box-sizing: border-box;\n  font: var(--pine-typography-body);\n  letter-spacing: var(--pine-letter-spacing);\n  min-height: calc(var(--pine-dimension-xl) * 2);\n  min-width: calc(var(--pine-dimension-xl) * 2);\n  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n  resize: both;\n  width: 100%;\n\n  // Add bottom padding when character counter is present\n  :host([max-length]) & {\n    padding-bottom: calc(var(--pine-dimension-xs) + var(--pine-dimension-md));\n  }\n\n  &:hover:not(:disabled, .is-invalid) {\n    border: var(--pine-border-hover);\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  &::placeholder {\n    color: var(--pine-color-text-placeholder);\n  }\n\n  &.is-invalid {\n    background-color: var(--pine-input-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n.pds-textarea__character-counter {\n  background: color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);\n  border-radius: calc(var(--pine-dimension-2xs) * 0.5);\n  color: var(--pine-color-text-readonly);\n  font: var(--pine-typography-body-sm-medium);\n  padding: calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);\n  pointer-events: none;\n  position: absolute;\n  user-select: none;\n  white-space: nowrap;\n  z-index: var(--pine-z-index);\n\n  // Match textarea disabled state\n  :host([aria-disabled=\"true\"]) & {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-disabled);\n  }\n\n  // Match textarea readonly state\n  :host([aria-readonly=\"true\"]) & {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n\n  // Match textarea invalid state - target when field has is-invalid class\n  .pds-textarea__field.is-invalid ~ & {\n    background-color: var(--pine-input-color-background-danger);\n  }\n}\n\n.visually-hidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: polygon(0 0, 0 0, 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId, exposeTypeProperty } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: [\n    '../../global/styles/utils/label.scss',\n    '../pds-input/pds-input.tokens.scss',\n    'pds-textarea.scss'\n  ],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsTextarea {\n\n  private nativeTextarea?: HTMLTextAreaElement\n  private focusedValue?: string | null;\n  private inheritedAttributes: Attributes = {};\n  private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n  private internals?: ElementInternals;\n  private resizeObserver?: ResizeObserver;\n  private characterCounter?: HTMLElement;\n  private readonly _type = 'textarea' as const;\n\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   *\n   * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n   * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n   * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n   * the input is cleared on edit, the type is `null`.\n   */\n  @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n  /**\n   * Event emitted whenever the value of the textarea changes.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  /**\n   * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n   * `textarea.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeTextarea) {\n      this.nativeTextarea.focus();\n    }\n  }\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: 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 textarea is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Displays an error message below the textarea field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the textarea field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines 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   * Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.\n   * Note: When true, the action slot is also hidden to maintain a minimal UI.\n   */\n  @Prop() hideLabel: boolean;\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   * Determines whether or not the textarea is readonly.\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Determines 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   * Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.\n   */\n  @Prop({ reflect: true }) maxLength?: number;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({mutable: true}) value?: string | null = '';\n\n  @State() hasFocus = false;\n\n\n  /**\n   * If true, the textarea has action content in the label area\n   */\n  @State() hasAction = false;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeTextarea = this.nativeTextarea;\n    const value = this.getValue();\n\n    if (nativeTextarea && nativeTextarea.value !== value) {\n      nativeTextarea.value = value;\n    }\n\n    // Update form value for Form Associated Custom Elements API\n    this.updateFormValue();\n\n    // Update character counter position in case content changes affect sizing\n    if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n      this.updateCharacterCounterPosition();\n    }\n  }\n\n  @Watch('maxLength')\n  protected maxLengthChanged() {\n    // Setup or teardown ResizeObserver based on maxLength\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.maxLength && this.nativeTextarea) {\n      this.setupResizeObserver();\n    }\n\n    // Update ElementInternals validity when maxLength changes\n    if (this.internals && this.internals.setValidity && this.nativeTextarea) {\n      const isTooLong = this.nativeTextarea.value.length > (this.maxLength || 0);\n      this.internals.setValidity(\n        { tooLong: isTooLong },\n        isTooLong ? 'Value exceeds maxLength' : '',\n        this.nativeTextarea\n      );\n    }\n  }\n\n  /**\n   * Emits an `pdsInput` event.\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n    this.pdsInput.emit({ value, event });\n  }\n\n  /**\n   * Emits an `pdsTextareaChange` event.\n   */\n  private emitValueChange(event?: Event) {\n    const textarea = event.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    const { value } = textarea;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n    this.focusedValue = newValue;\n    this.pdsTextareaChange.emit({ value: newValue, event });\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLTextAreaElement | null;\n    if (input) {\n      // Handle maxLength validation\n      if (this.maxLength && input.value.length > this.maxLength) {\n        // Prevent input beyond maxLength\n        input.value = input.value.substring(0, this.maxLength);\n      }\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n\n    // Update counter position when content changes\n    if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n      // Use requestAnimationFrame to ensure DOM is updated\n      requestAnimationFrame(() => {\n        this.updateCharacterCounterPosition();\n      });\n    }\n  };\n\n  private onTextareaChange = (ev: Event) => {\n    this.emitValueChange(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  connectedCallback() {\n    this.debounceChanged();\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n  }\n\n  disconnectedCallback() {\n    // Clean up ResizeObserver\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el),\n      ...inheritAttributes(this.el),\n    };\n    this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n  }\n\n  componentDidLoad() {\n    this.originalPdsInput = this.pdsInput;\n    // Set initial form value\n    this.updateFormValue();\n\n    // Setup ResizeObserver for character counter positioning\n    this.setupResizeObserver();\n\n    // Expose type property on the element instance to match native form element behavior\n    exposeTypeProperty(this.el, () => this._type);\n  }\n\n  /**\n   * Sets up ResizeObserver to track textarea resize for character counter positioning\n   */\n  private setupResizeObserver() {\n    if (!this.maxLength || !this.nativeTextarea) return;\n\n    // ResizeObserver may not be available in test environments\n    if (typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => {\n        // Use requestAnimationFrame to ensure DOM updates are complete\n        requestAnimationFrame(() => {\n          this.updateCharacterCounterPosition();\n        });\n      });\n\n      this.resizeObserver.observe(this.nativeTextarea);\n\n      // Initial positioning with a small delay to ensure counter is rendered\n      requestAnimationFrame(() => {\n        this.updateCharacterCounterPosition();\n      });\n    }\n  }\n\n  /**\n   * Updates character counter position to stay within textarea boundaries during resize\n   */\n  private updateCharacterCounterPosition() {\n    if (!this.characterCounter || !this.nativeTextarea) return;\n\n    // Skip positioning in test environments where ResizeObserver isn't available\n    if (typeof ResizeObserver === 'undefined') return;\n\n    // Ensure the character counter has been rendered and has dimensions\n    if (this.characterCounter.offsetWidth === 0 || this.characterCounter.offsetHeight === 0) {\n      // Counter not ready or component hidden - return and let resize/input observers handle positioning later\n      return;\n    }\n\n    // Position based on textarea's actual dimensions (which change during manual resize)\n    const textareaWidth = this.nativeTextarea.offsetWidth;\n    const textareaHeight = this.nativeTextarea.offsetHeight;\n    const counterWidth = this.characterCounter.offsetWidth;\n    const counterHeight = this.characterCounter.offsetHeight;\n\n    // Calculate position within textarea boundaries with padding from edges\n    const rightPosition = textareaWidth - counterWidth - 8;\n    const bottomPosition = textareaHeight - counterHeight - 8;\n\n    // Ensure counter stays within textarea boundaries even when resized very small\n    const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));\n    const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));\n\n    // Apply absolute positioning within the field wrapper\n    this.characterCounter.style.position = 'absolute';\n    this.characterCounter.style.left = `${finalLeft}px`;\n    this.characterCounter.style.top = `${finalTop}px`;\n    this.characterCounter.style.right = 'auto';\n    this.characterCounter.style.bottom = 'auto';\n  }\n\n  /**\n   * Renders the character counter when maxLength is set\n   */\n  private renderCharacterCounter() {\n    if (!this.maxLength) {\n      return null;\n    }\n\n    const currentLength = this.getValue().length;\n    return (\n      <div\n        class=\"pds-textarea__character-counter\"\n        ref={(el) => this.characterCounter = el}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={`${currentLength} of ${this.maxLength} characters`}\n      >\n        {currentLength} / {this.maxLength}\n      </div>\n    );\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-textarea__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  /**\n   * Updates the form value using ElementInternals API\n   */\n  private updateFormValue() {\n    if (this.internals && this.internals.setFormValue) {\n      const value = this.getValue();\n      this.internals.setFormValue(value || null);\n\n      // Set validity based on native textarea validation\n      if (this.nativeTextarea && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.nativeTextarea.validity,\n          this.nativeTextarea.validationMessage,\n          this.nativeTextarea\n        );\n      }\n    }\n  }\n\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is reset\n   */\n  formResetCallback() {\n    this.value = '';\n    this.updateFormValue();\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is disabled\n   */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called to restore form state\n   */\n  formStateRestoreCallback(state: string | FormData | null) {\n    if (typeof state === 'string') {\n      this.value = state;\n    } else if (state instanceof FormData && this.name) {\n      // Extract value from FormData using the textarea's name\n      const value = state.get(this.name);\n      if (typeof value === 'string') {\n        this.value = value;\n      }\n    }\n  }\n\n  render() {\n    const value = this.getValue();\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n        has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <div class=\"pds-textarea__label-wrapper\">\n              <label htmlFor={this.componentId}>\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {this.label}\n                </span>\n              </label>\n              {!this.hideLabel && this.renderAction()}\n            </div>\n          }\n          <div class=\"pds-textarea__field-wrapper\">\n            <textarea\n              ref={(el) => this.nativeTextarea = el }\n              aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n              aria-invalid={this.invalid ? \"true\" : undefined}\n              autocomplete={this.autocomplete}\n              class={this.textareaClassNames()}\n              disabled={this.disabled}\n              id={this.componentId}\n              maxlength={this.maxLength}\n              name={this.name}\n              placeholder={this.placeholder}\n              readOnly={this.readonly}\n              required={this.required}\n              rows={this.rows}\n              onBlur={this.onBlur}\n              onChange={this.onTextareaChange}\n              onFocus={this.onFocus}\n              onInput={this.onInput}\n              {...this.inheritedAttributes}\n            >\n              {value}\n            </textarea>\n            {this.renderCharacterCounter()}\n          </div>\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              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pds-toast.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BVCWKPy3.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bf1dou5H.js';
 
 const pdsToastCss = ":host{--animation-duration:0.3s;--animation-timing:cubic-bezier(0.4, 0, 0.2, 1);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}";
 
@@ -82,13 +82,13 @@ const PdsToast = class {
         return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (h(Host, { key: 'cf3944ff76627caaa30bc38fdfa44357488a6194', hidden: !this.isVisible }, h("div", { key: '39ce25ec4ffcaf23f565ece7e54fd4ef8a08abb5', class: {
+        return (h(Host, { key: 'cf03483967a2414e2c6ee68587af609af0bb64c6', hidden: !this.isVisible }, h("div", { key: '70413e3220f6890dd2367bc96a7060269a33124c', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: 'cc637017d922c88a2f025e01a55294c7abbbd0da', class: "pds-toast__message" }, h("slot", { key: 'e0dbea12cefc01a377fc4f9f8ec6898d2f10ea99' })), this.dismissible && (h("button", { key: 'e3293bd0d9678052320f0261ed95084400789804', type: "button", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: '52a991d93d9530e4689586f51b2b78978ff9f4d5', class: "pds-toast__message" }, h("slot", { key: 'fb00a8204606a4621315656e91b3928ed8ad4827' })), this.dismissible && (h("button", { key: 'de78866e9b4f746d823bf68b7d8736ab4bafb9d7', type: "button", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: '8a41d2c7fc123d5cd854212fca42eae344834d92', name: "remove" }))))));
+            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: '495a71b67c4a6690f4c1b9562ddd8862d88a85e4', name: "remove" }))))));
     }
     static get watchers() { return {
         "duration": ["handleDurationChange"]

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-Bf1dou5H.js';
 import { c as computePosition, a as autoUpdate, o as offset, f as flip, s as shift } from './floating-ui.dom-DbQzNDdQ.js';
 
-const pdsTooltipCss = ".pds-tooltip{--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}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);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}.pds-tooltip.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(--tooltip-border-width-arrow-left);content:\"\";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{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%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{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(--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(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -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(--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(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{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(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;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(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;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(--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}";
+const pdsTooltipCss = ".pds-tooltip{--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}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);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:var(--pine-z-index-raised)}.pds-tooltip.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(--tooltip-border-width-arrow-left);content:\"\";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{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%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{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(--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(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -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(--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(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{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(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;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(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;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(--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}";
 
 const PdsTooltip = class {
     constructor(hostRef) {
@@ -212,7 +212,7 @@ const PdsTooltip = class {
         this.portalEl = document.createElement('div');
         this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;
         this.portalEl.style.position = 'fixed';
-        this.portalEl.style.zIndex = '9999';
+        this.portalEl.style.zIndex = 'var(--pine-z-index-nuclear)';
         if (this.portalEl.id === '') {
             const suffix = PdsTooltip.instanceCounter++;
             const baseId = this.componentId || this.el.id || 'pds-tooltip';
@@ -312,9 +312,9 @@ const PdsTooltip = class {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: '6741acebcb973fd24d59a95d75aefd51fe653426', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: 'f1a51aa6a9333e899d4eb8168b9ff171a463651f', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (h(Host, { key: 'ef40605b8ed95b1920caa425a021b900bdaef847', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '953a0ddd6070fa99e89307f6ddb9bacfa6932b5c', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: 'e48e5fb75d6156d13e3872b8ee12699139cef576' })), h("div", { key: 'ed38389bf634be3014b26c9381a389482cee2f80', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '2e3d2a800aba9959c5b7fc3ed4397f7789b6f383', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '9fa52468a1d99d4dd5af8a8c07d11b1591c5204c' })), h("div", { key: 'c4dfe98893fc2abacff788177d1f143afb2aa502', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '468d06248f384f727517de3fd4c15af8d6e7b118', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {