@pine-ds/core 3.13.0 → 3.14.1

package/dist/pine-core/pds-modal.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-modal.entry.esm.js","sources":["src/components/pds-modal/pds-modal.scss?tag=pds-modal","src/components/pds-modal/pds-modal.tsx"],"sourcesContent":[".pds-modal__backdrop {\n  align-items: flex-start;\n  background-color: rgba(0, 0, 0, 0.4);\n  border: 0;\n  display: flex;\n  height: 100%;\n  inset: 0;\n  justify-content: center;\n  margin: 0;\n  max-height: 100%;\n  max-width: 100%;\n  opacity: 0;\n  padding: 0;\n  position: fixed;\n  transition: opacity 0.2s ease, visibility 0.2s ease;\n  visibility: hidden;\n  width: 100%;\n  z-index: var(--pine-z-index-modal);\n\n  @supports (backdrop-filter: blur(3px)) {\n    backdrop-filter: blur(3px);\n  }\n\n  // Increase z-index for nested modals\n  pds-modal & {\n    z-index: var(--pine-z-index-priority);\n  }\n\n  &::backdrop {\n    background: transparent;\n  }\n\n  &.open {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n\n.pds-modal {\n  background: var(--pine-color-background-container);\n  border-radius: var(--pine-dimension-sm);\n  box-shadow: var(--pine-box-shadow-400);\n  display: flex;\n  flex-direction: column;\n  margin: var(--pine-dimension-md);\n  max-height: none;\n  width: 100%;\n\n  &.pds-modal--scrollable {\n    max-height: calc(100vh - (calc(5vh + 96px)));\n\n    @supports (height: 100dvh) {\n      max-height: calc(100dvh - (calc(5dvh + 96px)));\n    }\n  }\n\n  @media (min-width: 992px) {\n    margin-block-start: 6vh;\n\n    @supports (height: 100dvh) {\n      margin-block-start: 6dvh;\n    }\n  }\n\n  @media (min-width: 1200px) {\n    margin-block-start: 8vh;\n\n    @supports (height: 100dvh) {\n      margin-block-start: 8dvh;\n    }\n  }\n}\n\n.pds-modal--sm {\n  max-width: 520px;\n}\n\n.pds-modal--md {\n  max-width: 700px;\n}\n\n.pds-modal--lg {\n  max-width: 900px;\n}\n\n.pds-modal--fullscreen {\n  border-radius: 0;\n  height: 100%;\n  margin: 0;\n  max-height: 100vh;\n  max-width: 100%;\n\n  @supports (height: 100dvh) {\n    max-height: 100dvh;\n  }\n\n  &.pds-modal--scrollable {\n    max-height: 100vh;\n\n    @supports (height: 100dvh) {\n      max-height: 100dvh;\n    }\n  }\n}\n\n.pds-modal-content {\n  .pds-modal--fullscreen & {\n    flex: 1;\n  }\n}\n\n// Scrollable modal styles (default behavior)\n.pds-modal--scrollable {\n  pds-modal-content {\n    border-block-end: 1px solid transparent;\n    border-block-start: 1px solid transparent;\n    overflow-y: auto;\n  }\n}\n\n// Non-scrollable modal styles\n.pds-modal:not(.pds-modal--scrollable) {\n  pds-modal-content {\n    overflow-y: visible;\n  }\n}\n\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pds-modal',\n  styleUrl: 'pds-modal.scss',\n  shadow: false\n})\nexport class PdsModal {\n  private modalRef: HTMLDialogElement;\n  private previousActiveElement: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n\n  @Element() el: HTMLPdsModalElement;\n\n  /**\n   * Whether the modal can be dismissed by clicking the backdrop\n   * @default true\n   */\n  @Prop() backdropDismiss = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Whether the modal is open\n   * @default false\n   */\n  @Prop({ mutable: true }) open = false;\n\n  /**\n   * The size of the modal\n   * @default 'md'\n   */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'fullscreen' = 'md';\n\n  /**\n   * Whether the modal content should be scrollable\n   * @default true\n   */\n  @Prop() scrollable = true;\n\n  /**\n   * Emitted when the modal is opened\n   */\n  @Event() pdsModalOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the modal is closed\n   */\n  @Event() pdsModalClose: EventEmitter<void>;\n\n  /**\n   * Stores the list of focusable elements in the modal\n   */\n  @State() focusableElementsArray: HTMLElement[] = [];\n\n  componentDidLoad() {\n    this.modalRef = this.el.querySelector('.pds-modal__backdrop') as HTMLDialogElement;\n    // Add keyboard event listener\n    document.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback() {\n    // Clean up event listener\n    document.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      this.showModal();\n    } else {\n      this.hideModal();\n    }\n  }\n\n  /**\n   * Updates the list of focusable elements in the modal\n   */\n  private updateFocusableElements() {\n    if (!this.modalRef) return;\n\n    // Get all focusable elements within the modal\n    const selector = [\n      'a[href]',\n      'button:not([disabled])',\n      'input:not([disabled])',\n      'select:not([disabled])',\n      'textarea:not([disabled])',\n      '[tabindex]:not([tabindex=\"-1\"])',\n      'pds-button:not([disabled])',\n      'pds-link:not([disabled])',\n      'pds-input:not([disabled])',\n      'pds-checkbox:not([disabled])',\n      'pds-radio:not([disabled])',\n      'pds-switch:not([disabled])',\n      'pds-select:not([disabled])',\n    ].join(',');\n\n    this.focusableElements = Array.from(\n      this.modalRef.querySelectorAll(selector)\n    ) as HTMLElement[];\n\n    // Filter out elements with display: none or visibility: hidden\n    this.focusableElements = this.focusableElements.filter(el => {\n      const style = window.getComputedStyle(el);\n      return style.display !== 'none' && style.visibility !== 'hidden';\n    });\n  }\n\n  /**\n   * Sets focus to the first focusable element in the modal\n   */\n  private setInitialFocus() {\n    if (this.focusableElements.length === 0) return;\n\n    // Focus the first focusable element\n    const firstElement = this.focusableElements[0];\n\n    // For web components, we need to ensure they're properly focused\n    this.focusElement(firstElement);\n  }\n\n  /**\n   * Helper method to focus an element, with special handling for web components\n   */\n  private focusElement(element: HTMLElement) {\n    if (!element) return;\n\n    try {\n      // Try standard focus first\n      element.focus();\n\n      // Check if focus worked\n      setTimeout(() => {\n        if (document.activeElement !== element) {\n          // For web components, try to find a focusable element inside\n          if (element.shadowRoot) {\n            const focusableInShadow = element.shadowRoot.querySelector(\n              'button, [tabindex], input, a[href]'\n            ) as HTMLElement;\n\n            if (focusableInShadow) {\n              focusableInShadow.focus();\n            }\n          }\n        }\n      }, 0);\n    } catch (error) {\n      console.error('Error focusing element:', error);\n    }\n  }\n\n  /**\n   * Opens the modal\n   */\n  @Method()\n  async showModal() {\n    if (this.modalRef) {\n      try {\n        // Store the currently focused element to restore focus when modal closes\n        this.previousActiveElement = document.activeElement as HTMLElement;\n\n        // Use native dialog showModal method which makes the rest of the page inert\n        this.modalRef.showModal();\n        this.open = true;\n\n        // Update focusable elements and set initial focus\n        // Using a longer timeout to ensure all components are fully rendered\n        setTimeout(() => {\n          this.updateFocusableElements();\n          this.setInitialFocus();\n          this.pdsModalOpen.emit();\n        }, 100);\n      } catch (error) {\n        console.error('Failed to show modal:', error);\n      }\n    }\n  }\n\n  /**\n   * Closes the modal\n   */\n  @Method()\n  async hideModal() {\n    if (this.modalRef) {\n      try {\n        this.modalRef.close();\n        this.open = false;\n\n        // Restore focus to the element that was focused before the modal was opened\n        if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {\n          this.previousActiveElement.focus();\n        }\n\n        this.pdsModalClose.emit();\n      } catch (error) {\n        console.error('Failed to hide modal:', error);\n      }\n    }\n  }\n\n  private handleBackdropClick = (e: MouseEvent) => {\n    if (!this.backdropDismiss || !this.open) return;\n\n    if ((e.target as HTMLElement).classList.contains('pds-modal__backdrop')) {\n      e.stopPropagation();\n\n      // Only close if this is the innermost modal\n      if (this.isInnermostModal()) {\n        this.hideModal();\n      }\n    }\n  };\n\n  /**\n   * Gets the z-index of a modal's backdrop element\n   */\n  private getBackdropZIndex(modal: Element): number {\n    const backdrop = modal.querySelector('.pds-modal__backdrop');\n    return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;\n  }\n\n  /**\n   * Checks if this modal is the innermost (highest z-index) modal\n   */\n  private isInnermostModal(): boolean {\n    // Find all open modals\n    const openModals = Array.from(document.querySelectorAll('pds-modal')).filter(\n      modal => modal.open\n    );\n\n    if (openModals.length === 0) return false;\n\n    // Get this modal's backdrop element\n    const thisBackdrop = this.el.querySelector('.pds-modal__backdrop');\n    if (!thisBackdrop) return false;\n\n    // Get computed z-index of all open modal backdrops\n    const modalZIndexes = openModals.map(modal => this.getBackdropZIndex(modal));\n\n    // Get the highest z-index\n    const maxZIndex = Math.max(...modalZIndexes);\n\n    // Check if this modal's backdrop has the highest z-index\n    const thisZIndex = this.getBackdropZIndex(this.el);\n    return thisZIndex === maxZIndex;\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    // If the modal is not open, don't handle any keyboard events\n    if (!this.open) return;\n\n    // Handle Escape key to close the modal\n    if (e.key === 'Escape') {\n      // Always prevent native dialog close behavior\n      e.preventDefault();\n      // Only close if backdropDismiss is enabled and this is the innermost modal\n      if (this.backdropDismiss && this.isInnermostModal()) {\n        this.hideModal();\n      }\n      return;\n    }\n\n    // Handle Tab key for focus trapping\n    if (e.key === 'Tab') {\n      // If there are no focusable elements, do nothing\n      if (this.focusableElements.length === 0) return;\n\n      // Get the first and last focusable elements\n      const firstFocusableElement = this.focusableElements[0];\n      const lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];\n\n      // Get the current active element\n      const activeElement = document.activeElement;\n\n      // Check if we need to wrap focus\n      const isFirstElement = activeElement === firstFocusableElement ||\n                            firstFocusableElement.contains(activeElement as Node);\n\n      const isLastElement = activeElement === lastFocusableElement ||\n                           lastFocusableElement.contains(activeElement as Node);\n\n      // If shift + tab is pressed and focus is on the first element, move to the last element\n      if (e.shiftKey && isFirstElement) {\n        e.preventDefault();\n        this.focusElement(lastFocusableElement);\n      }\n      // If tab is pressed and focus is on the last element, move to the first element\n      else if (!e.shiftKey && isLastElement) {\n        e.preventDefault();\n        this.focusElement(firstFocusableElement);\n      }\n    }\n  };\n\n  render() {\n    return (\n      <dialog\n        class={{\n          'pds-modal__backdrop': true,\n          'open': this.open\n        }}\n        aria-modal=\"true\"\n        aria-labelledby={`${this.componentId}-heading`}\n        onClick={this.handleBackdropClick}\n      >\n        <div\n          class={{\n            'pds-modal': true,\n            [`pds-modal--${this.size}`]: true,\n            'pds-modal--scrollable': this.scrollable\n          }}\n        >\n          <slot></slot>\n        </div>\n      </dialog>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,u+EAAu+E;;MCO9+E,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAQU,QAAA,IAAiB,CAAA,iBAAA,GAAkB,EAAE;AAI7C;;;AAGG;AACK,QAAA,IAAe,CAAA,eAAA,GAAG,IAAI;AAO9B;;;AAGG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAErC;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAsC,IAAI;AAEtD;;;AAGG;AACK,QAAA,IAAU,CAAA,UAAA,GAAG,IAAI;AAYzB;;AAEG;AACM,QAAA,IAAsB,CAAA,sBAAA,GAAkB,EAAE;AAoJ3C,QAAA,IAAA,CAAA,mBAAmB,GAAG,CAAC,CAAa,KAAI;YAC9C,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE;YAEzC,IAAK,CAAC,CAAC,MAAsB,CAAC,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAAE;gBACvE,CAAC,CAAC,eAAe,EAAE;;AAGnB,gBAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;oBAC3B,IAAI,CAAC,SAAS,EAAE;;;AAGtB,SAAC;AAoCO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,CAAgB,KAAI;;YAE3C,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE;;AAGhB,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;;gBAEtB,CAAC,CAAC,cAAc,EAAE;;gBAElB,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;oBACnD,IAAI,CAAC,SAAS,EAAE;;gBAElB;;;AAIF,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;;AAEnB,gBAAA,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;oBAAE;;gBAGzC,MAAM,qBAAqB,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;AACvD,gBAAA,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;AAGtF,gBAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa;;AAG5C,gBAAA,MAAM,cAAc,GAAG,aAAa,KAAK,qBAAqB;AACxC,oBAAA,qBAAqB,CAAC,QAAQ,CAAC,aAAqB,CAAC;AAE3E,gBAAA,MAAM,aAAa,GAAG,aAAa,KAAK,oBAAoB;AACvC,oBAAA,oBAAoB,CAAC,QAAQ,CAAC,aAAqB,CAAC;;AAGzE,gBAAA,IAAI,CAAC,CAAC,QAAQ,IAAI,cAAc,EAAE;oBAChC,CAAC,CAAC,cAAc,EAAE;AAClB,oBAAA,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC;;;AAGpC,qBAAA,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,aAAa,EAAE;oBACrC,CAAC,CAAC,cAAc,EAAE;AAClB,oBAAA,IAAI,CAAC,YAAY,CAAC,qBAAqB,CAAC;;;AAG9C,SAAC;AAyBF;IAvQC,gBAAgB,GAAA;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAsB;;QAElF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC;;IAG1D,oBAAoB,GAAA;;QAElB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC;;AAI7D,IAAA,gBAAgB,CAAC,QAAiB,EAAA;QAChC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,SAAS,EAAE;;aACX;YACL,IAAI,CAAC,SAAS,EAAE;;;AAIpB;;AAEG;IACK,uBAAuB,GAAA;QAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;;AAGpB,QAAA,MAAM,QAAQ,GAAG;YACf,SAAS;YACT,wBAAwB;YACxB,uBAAuB;YACvB,wBAAwB;YACxB,0BAA0B;YAC1B,iCAAiC;YACjC,4BAA4B;YAC5B,0BAA0B;YAC1B,2BAA2B;YAC3B,8BAA8B;YAC9B,2BAA2B;YAC3B,4BAA4B;YAC5B,4BAA4B;AAC7B,SAAA,CAAC,IAAI,CAAC,GAAG,CAAC;AAEX,QAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACjC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CACxB;;QAGlB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,IAAG;YAC1D,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC;YACzC,OAAO,KAAK,CAAC,OAAO,KAAK,MAAM,IAAI,KAAK,CAAC,UAAU,KAAK,QAAQ;AAClE,SAAC,CAAC;;AAGJ;;AAEG;IACK,eAAe,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC;YAAE;;QAGzC,MAAM,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;;AAG9C,QAAA,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC;;AAGjC;;AAEG;AACK,IAAA,YAAY,CAAC,OAAoB,EAAA;AACvC,QAAA,IAAI,CAAC,OAAO;YAAE;AAEd,QAAA,IAAI;;YAEF,OAAO,CAAC,KAAK,EAAE;;YAGf,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,OAAO,EAAE;;AAEtC,oBAAA,IAAI,OAAO,CAAC,UAAU,EAAE;wBACtB,MAAM,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CACxD,oCAAoC,CACtB;wBAEhB,IAAI,iBAAiB,EAAE;4BACrB,iBAAiB,CAAC,KAAK,EAAE;;;;aAIhC,EAAE,CAAC,CAAC;;QACL,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC;;;AAInD;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI;;AAEF,gBAAA,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC,aAA4B;;AAGlE,gBAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE;AACzB,gBAAA,IAAI,CAAC,IAAI,GAAG,IAAI;;;gBAIhB,UAAU,CAAC,MAAK;oBACd,IAAI,CAAC,uBAAuB,EAAE;oBAC9B,IAAI,CAAC,eAAe,EAAE;AACtB,oBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;iBACzB,EAAE,GAAG,CAAC;;YACP,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,KAAK,CAAC;;;;AAKnD;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI;AACF,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;AACrB,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;AAGjB,gBAAA,IAAI,IAAI,CAAC,qBAAqB,IAAI,OAAO,IAAI,CAAC,qBAAqB,CAAC,KAAK,KAAK,UAAU,EAAE;AACxF,oBAAA,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE;;AAGpC,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;;YACzB,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,KAAK,CAAC;;;;AAkBnD;;AAEG;AACK,IAAA,iBAAiB,CAAC,KAAc,EAAA;QACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC;QAC5D,OAAO,QAAQ,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,GAAG,EAAE;;AAGxE;;AAEG;IACK,gBAAgB,GAAA;;QAEtB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAC1E,KAAK,IAAI,KAAK,CAAC,IAAI,CACpB;AAED,QAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,KAAK;;QAGzC,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC;AAClE,QAAA,IAAI,CAAC,YAAY;AAAE,YAAA,OAAO,KAAK;;AAG/B,QAAA,MAAM,aAAa,GAAG,UAAU,CAAC,GAAG,CAAC,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;;QAG5E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC;;QAG5C,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC;QAClD,OAAO,UAAU,KAAK,SAAS;;IAkDjC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,qBAAqB,EAAE,IAAI;gBAC3B,MAAM,EAAE,IAAI,CAAC;AACd,aAAA,EAAA,YAAA,EACU,MAAM,EAAA,iBAAA,EACA,CAAG,EAAA,IAAI,CAAC,WAAW,CAAU,QAAA,CAAA,EAC9C,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAA,EAEjC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;gBACjC,uBAAuB,EAAE,IAAI,CAAC;AAC/B,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACC;;;;;;;;;;;"}
+{"version":3,"file":"pds-modal.entry.esm.js","sources":["src/components/pds-modal/pds-modal.scss?tag=pds-modal","src/components/pds-modal/pds-modal.tsx"],"sourcesContent":[".pds-modal__backdrop {\n  align-items: flex-start;\n  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n  background-color: rgba(0, 0, 0, 0.4);\n  border: 0;\n  display: flex;\n  height: 100%;\n  inset: 0;\n  justify-content: center;\n  margin: 0;\n  max-height: 100%;\n  max-width: 100%;\n  opacity: 0;\n  padding: 0;\n  position: fixed;\n  transition: opacity 0.2s ease, visibility 0.2s ease;\n  visibility: hidden;\n  width: 100%;\n  z-index: var(--pine-z-index-modal);\n\n  @supports (backdrop-filter: blur(3px)) {\n    backdrop-filter: blur(3px);\n  }\n\n  // Increase z-index for nested modals\n  pds-modal & {\n    z-index: var(--pine-z-index-priority);\n  }\n\n  &::backdrop {\n    background: transparent;\n  }\n\n  &.open {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n\n.pds-modal {\n  background: var(--pine-color-background-container);\n  border-radius: var(--pine-dimension-sm);\n  box-shadow: var(--pine-box-shadow-400);\n  display: flex;\n  flex-direction: column;\n  margin: var(--pine-dimension-md);\n  max-height: none;\n  width: 100%;\n\n  &.pds-modal--scrollable {\n    max-height: calc(100vh - (calc(5vh + 96px)));\n\n    @supports (height: 100dvh) {\n      max-height: calc(100dvh - (calc(5dvh + 96px)));\n    }\n  }\n\n  @media (min-width: 992px) {\n    margin-block-start: 6vh;\n\n    @supports (height: 100dvh) {\n      margin-block-start: 6dvh;\n    }\n  }\n\n  @media (min-width: 1200px) {\n    margin-block-start: 8vh;\n\n    @supports (height: 100dvh) {\n      margin-block-start: 8dvh;\n    }\n  }\n}\n\n.pds-modal--sm {\n  max-width: 520px;\n}\n\n.pds-modal--md {\n  max-width: 700px;\n}\n\n.pds-modal--lg {\n  max-width: 900px;\n}\n\n.pds-modal--fullscreen {\n  border-radius: 0;\n  height: 100%;\n  margin: 0;\n  max-height: 100vh;\n  max-width: 100%;\n\n  @supports (height: 100dvh) {\n    max-height: 100dvh;\n  }\n\n  &.pds-modal--scrollable {\n    max-height: 100vh;\n\n    @supports (height: 100dvh) {\n      max-height: 100dvh;\n    }\n  }\n}\n\n.pds-modal-content {\n  .pds-modal--fullscreen & {\n    flex: 1;\n  }\n}\n\n// Scrollable modal styles (default behavior)\n.pds-modal--scrollable {\n  pds-modal-content {\n    border-block-end: 1px solid transparent;\n    border-block-start: 1px solid transparent;\n    overflow-y: auto;\n  }\n}\n\n// Non-scrollable modal styles\n.pds-modal:not(.pds-modal--scrollable) {\n  pds-modal-content {\n    overflow-y: visible;\n  }\n}\n\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pds-modal',\n  styleUrl: 'pds-modal.scss',\n  shadow: false\n})\nexport class PdsModal {\n  private modalRef: HTMLDialogElement;\n  private previousActiveElement: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n\n  @Element() el: HTMLPdsModalElement;\n\n  /**\n   * Whether the modal can be dismissed by clicking the backdrop\n   * @default true\n   */\n  @Prop() backdropDismiss = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Whether the modal is open\n   * @default false\n   */\n  @Prop({ mutable: true }) open = false;\n\n  /**\n   * The size of the modal\n   * @default 'md'\n   */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'fullscreen' = 'md';\n\n  /**\n   * Whether the modal content should be scrollable\n   * @default true\n   */\n  @Prop() scrollable = true;\n\n  /**\n   * Emitted when the modal is opened\n   */\n  @Event() pdsModalOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the modal is closed\n   */\n  @Event() pdsModalClose: EventEmitter<void>;\n\n  /**\n   * Stores the list of focusable elements in the modal\n   */\n  @State() focusableElementsArray: HTMLElement[] = [];\n\n  componentDidLoad() {\n    this.modalRef = this.el.querySelector('.pds-modal__backdrop') as HTMLDialogElement;\n    // Add keyboard event listener\n    document.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback() {\n    // Clean up event listener\n    document.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      this.showModal();\n    } else {\n      this.hideModal();\n    }\n  }\n\n  /**\n   * Updates the list of focusable elements in the modal\n   */\n  private updateFocusableElements() {\n    if (!this.modalRef) return;\n\n    // Get all focusable elements within the modal\n    const selector = [\n      'a[href]',\n      'button:not([disabled])',\n      'input:not([disabled])',\n      'select:not([disabled])',\n      'textarea:not([disabled])',\n      '[tabindex]:not([tabindex=\"-1\"])',\n      'pds-button:not([disabled])',\n      'pds-link:not([disabled])',\n      'pds-input:not([disabled])',\n      'pds-checkbox:not([disabled])',\n      'pds-radio:not([disabled])',\n      'pds-switch:not([disabled])',\n      'pds-select:not([disabled])',\n    ].join(',');\n\n    this.focusableElements = Array.from(\n      this.modalRef.querySelectorAll(selector)\n    ) as HTMLElement[];\n\n    // Filter out elements with display: none or visibility: hidden\n    this.focusableElements = this.focusableElements.filter(el => {\n      const style = window.getComputedStyle(el);\n      return style.display !== 'none' && style.visibility !== 'hidden';\n    });\n  }\n\n  /**\n   * Sets focus to the first focusable element in the modal\n   */\n  private setInitialFocus() {\n    if (this.focusableElements.length === 0) return;\n\n    // Focus the first focusable element\n    const firstElement = this.focusableElements[0];\n\n    // For web components, we need to ensure they're properly focused\n    this.focusElement(firstElement);\n  }\n\n  /**\n   * Helper method to focus an element, with special handling for web components\n   */\n  private focusElement(element: HTMLElement) {\n    if (!element) return;\n\n    try {\n      // Try standard focus first\n      element.focus();\n\n      // Check if focus worked\n      setTimeout(() => {\n        if (document.activeElement !== element) {\n          // For web components, try to find a focusable element inside\n          if (element.shadowRoot) {\n            const focusableInShadow = element.shadowRoot.querySelector(\n              'button, [tabindex], input, a[href]'\n            ) as HTMLElement;\n\n            if (focusableInShadow) {\n              focusableInShadow.focus();\n            }\n          }\n        }\n      }, 0);\n    } catch (error) {\n      console.error('Error focusing element:', error);\n    }\n  }\n\n  /**\n   * Opens the modal\n   */\n  @Method()\n  async showModal() {\n    if (this.modalRef) {\n      try {\n        // Store the currently focused element to restore focus when modal closes\n        this.previousActiveElement = document.activeElement as HTMLElement;\n\n        // Use native dialog showModal method which makes the rest of the page inert\n        this.modalRef.showModal();\n        this.open = true;\n\n        // Update focusable elements and set initial focus\n        // Using a longer timeout to ensure all components are fully rendered\n        setTimeout(() => {\n          this.updateFocusableElements();\n          this.setInitialFocus();\n          this.pdsModalOpen.emit();\n        }, 100);\n      } catch (error) {\n        console.error('Failed to show modal:', error);\n      }\n    }\n  }\n\n  /**\n   * Closes the modal\n   */\n  @Method()\n  async hideModal() {\n    if (this.modalRef) {\n      try {\n        this.modalRef.close();\n        this.open = false;\n\n        // Restore focus to the element that was focused before the modal was opened\n        if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {\n          this.previousActiveElement.focus();\n        }\n\n        this.pdsModalClose.emit();\n      } catch (error) {\n        console.error('Failed to hide modal:', error);\n      }\n    }\n  }\n\n  private handleBackdropClick = (e: MouseEvent) => {\n    if (!this.backdropDismiss || !this.open) return;\n\n    if ((e.target as HTMLElement).classList.contains('pds-modal__backdrop')) {\n      e.stopPropagation();\n\n      // Only close if this is the innermost modal\n      if (this.isInnermostModal()) {\n        this.hideModal();\n      }\n    }\n  };\n\n  /**\n   * Gets the z-index of a modal's backdrop element\n   */\n  private getBackdropZIndex(modal: Element): number {\n    const backdrop = modal.querySelector('.pds-modal__backdrop');\n    return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;\n  }\n\n  /**\n   * Checks if this modal is the innermost (highest z-index) modal\n   */\n  private isInnermostModal(): boolean {\n    // Find all open modals\n    const openModals = Array.from(document.querySelectorAll('pds-modal')).filter(\n      modal => modal.open\n    );\n\n    if (openModals.length === 0) return false;\n\n    // Get this modal's backdrop element\n    const thisBackdrop = this.el.querySelector('.pds-modal__backdrop');\n    if (!thisBackdrop) return false;\n\n    // Get computed z-index of all open modal backdrops\n    const modalZIndexes = openModals.map(modal => this.getBackdropZIndex(modal));\n\n    // Get the highest z-index\n    const maxZIndex = Math.max(...modalZIndexes);\n\n    // Check if this modal's backdrop has the highest z-index\n    const thisZIndex = this.getBackdropZIndex(this.el);\n    return thisZIndex === maxZIndex;\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    // If the modal is not open, don't handle any keyboard events\n    if (!this.open) return;\n\n    // Handle Escape key to close the modal\n    if (e.key === 'Escape') {\n      // Always prevent native dialog close behavior\n      e.preventDefault();\n      // Only close if backdropDismiss is enabled and this is the innermost modal\n      if (this.backdropDismiss && this.isInnermostModal()) {\n        this.hideModal();\n      }\n      return;\n    }\n\n    // Handle Tab key for focus trapping\n    if (e.key === 'Tab') {\n      // If there are no focusable elements, do nothing\n      if (this.focusableElements.length === 0) return;\n\n      // Get the first and last focusable elements\n      const firstFocusableElement = this.focusableElements[0];\n      const lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];\n\n      // Get the current active element\n      const activeElement = document.activeElement;\n\n      // Check if we need to wrap focus\n      const isFirstElement = activeElement === firstFocusableElement ||\n                            firstFocusableElement.contains(activeElement as Node);\n\n      const isLastElement = activeElement === lastFocusableElement ||\n                           lastFocusableElement.contains(activeElement as Node);\n\n      // If shift + tab is pressed and focus is on the first element, move to the last element\n      if (e.shiftKey && isFirstElement) {\n        e.preventDefault();\n        this.focusElement(lastFocusableElement);\n      }\n      // If tab is pressed and focus is on the last element, move to the first element\n      else if (!e.shiftKey && isLastElement) {\n        e.preventDefault();\n        this.focusElement(firstFocusableElement);\n      }\n    }\n  };\n\n  render() {\n    return (\n      <dialog\n        class={{\n          'pds-modal__backdrop': true,\n          'open': this.open\n        }}\n        aria-modal=\"true\"\n        aria-labelledby={`${this.componentId}-heading`}\n        onClick={this.handleBackdropClick}\n      >\n        <div\n          class={{\n            'pds-modal': true,\n            [`pds-modal--${this.size}`]: true,\n            'pds-modal--scrollable': this.scrollable\n          }}\n        >\n          <slot></slot>\n        </div>\n      </dialog>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/pine-core/pds-multiselect.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-multiselect.entry.esm.js","sources":["src/components/pds-multiselect/pds-multiselect.scss?tag=pds-multiselect&encapsulation=shadow","src/components/pds-multiselect/pds-multiselect.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([aria-disabled=\"true\"]) {\n  .pds-multiselect__trigger {\n    background: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n\n  .pds-multiselect__icon {\n    color: var(--pine-color-text-disabled);\n  }\n}\n\n.pds-multiselect {\n  position: relative;\n}\n\n.pds-multiselect__label {\n  color: var(--pine-color-text-label);\n  display: block;\n  font: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-multiselect__wrapper {\n  position: relative;\n}\n\n.pds-multiselect__trigger {\n  align-items: center;\n  background: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: var(--pine-dimension-125);\n  cursor: pointer;\n  display: flex;\n  font: var(--pine-typography-body);\n  gap: var(--pine-dimension-xs);\n  justify-content: space-between;\n  letter-spacing: var(--pine-letter-spacing);\n  min-height: var(--pine-dimension-550);\n  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n  position: relative;\n  text-align: start;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  width: 100%;\n\n  &:hover:not(.pds-multiselect__trigger--disabled) {\n    border-color: var(--pine-color-border-hover);\n  }\n\n  &:focus:not(.pds-multiselect__trigger--disabled) {\n    border-color: var(--pine-color-border-active);\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  &.pds-multiselect__trigger--open {\n    border-color: var(--pine-color-border-active);\n  }\n\n  &.pds-multiselect__trigger--invalid {\n    background-color: var(--pine-color-red-050);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n\n  &.pds-multiselect__trigger--disabled {\n    background: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n}\n\n.pds-multiselect__trigger-text {\n  color: var(--pine-color-text-strong);\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &.pds-multiselect__trigger-text--placeholder {\n    color: var(--pine-color-text-placeholder);\n  }\n\n  .pds-multiselect__trigger--disabled & {\n    color: var(--pine-color-text-disabled);\n  }\n}\n\n.pds-multiselect__icon {\n  color: var(--pine-color-icon);\n  flex-shrink: var(--pine-dimension-none);\n}\n\n.pds-multiselect__panel {\n  background: var(--pine-color-background-container);\n  border-radius: var(--pine-dimension-125);\n  box-shadow: var(--pine-box-shadow);\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  z-index: var(--pine-z-index-raised);\n}\n\n.pds-multiselect__search {\n  align-items: center;\n  border-block-end: var(--pine-border);\n  border-block-end-color: var(--pine-color-border-subtle);\n  display: flex;\n  gap: var(--pine-dimension-xs);\n  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n  pds-icon {\n    color: var(--pine-color-text-muted);\n    flex-shrink: var(--pine-dimension-none);\n  }\n}\n\n.pds-multiselect__search-input {\n  background: transparent;\n  border: var(--pine-dimension-none);\n  color: var(--pine-color-text-strong);\n  flex: 1;\n  font: var(--pine-typography-body);\n  letter-spacing: var(--pine-letter-spacing);\n  min-width: var(--pine-dimension-none);\n  outline: none;\n\n  &::placeholder {\n    color: var(--pine-color-text-placeholder);\n  }\n}\n\n.pds-multiselect__selected-section {\n  border-block-end: var(--pine-border);\n  border-block-end-color: var(--pine-color-border-subtle);\n  padding: var(--pine-dimension-xs);\n}\n\n.pds-multiselect__selected-list {\n  list-style: none;\n  margin: var(--pine-dimension-none);\n  padding: var(--pine-dimension-none);\n}\n\n.pds-multiselect__selected-item {\n  color: var(--pine-color-text-strong);\n  font: var(--pine-typography-body);\n  letter-spacing: var(--pine-letter-spacing);\n  overflow: hidden;\n  padding: var(--pine-dimension-2xs) var(--pine-dimension-xs);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pds-multiselect__listbox {\n  background: transparent;\n  border: var(--pine-dimension-none);\n  box-sizing: border-box;\n  list-style: none;\n  margin: var(--pine-dimension-none);\n  overflow-y: auto;\n  padding: var(--pine-dimension-xs);\n}\n\n.pds-multiselect__option {\n  align-items: center;\n  background: transparent;\n  border-radius: var(--pine-dimension-xs);\n  cursor: pointer;\n  display: flex;\n  padding: var(--pine-dimension-2xs) var(--pine-dimension-xs);\n  transition: background 0.15s;\n\n  // Prevent checkbox label from triggering double events\n  pds-checkbox {\n    pointer-events: none;\n    width: 100%;\n  }\n\n  &:hover,\n  &.pds-multiselect__option--highlighted {\n    background: var(--pine-color-background-muted);\n  }\n\n  &:focus-visible {\n    outline: var(--pine-dimension-none);\n  }\n}\n\n.pds-multiselect__empty,\n.pds-multiselect__loading {\n  align-items: center;\n  color: var(--pine-color-text-muted);\n  display: flex;\n  font: var(--pine-typography-body);\n  justify-content: center;\n  padding: var(--pine-dimension-sm);\n}\n\n.pds-multiselect__load-more {\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding: var(--pine-dimension-xs);\n}\n\n.pds-multiselect__helper {\n  color: var(--pine-color-text-message);\n  font: var(--pine-typography-body-sm);\n  margin-block-start: var(--pine-dimension-2xs);\n  margin-inline-start: var(--pine-dimension-none);\n}\n\n.pds-multiselect__error {\n  align-items: flex-start;\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  font: var(--pine-typography-body-sm);\n  gap: var(--pine-dimension-2xs);\n  margin-block-start: var(--pine-dimension-2xs);\n  margin-inline-start: var(--pine-dimension-none);\n\n  pds-icon {\n    flex-shrink: var(--pine-dimension-none);\n    margin-block-start: var(--pine-dimension-025);\n  }\n}\n\n.visually-hidden {\n  border: var(--pine-dimension-none);\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: var(--pine-dimension-none);\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { computePosition, flip, offset, shift, size, autoUpdate } from '@floating-ui/dom';\nimport { debounceEvent } from '@utils/utils';\nimport { messageId, assignDescription } from '../../utils/form';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\nimport type {\n  MultiselectOption,\n  MultiselectChangeEventDetail,\n  MultiselectSearchEventDetail,\n  MultiselectLoadOptionsEventDetail,\n  AsyncResponse,\n} from './multiselect-interface';\n\n/**\n * @slot (default) - Static option elements for the multiselect\n * @slot empty - Custom empty state message when no options match\n * @slot loading - Custom loading indicator\n */\n@Component({\n  tag: 'pds-multiselect',\n  styleUrl: 'pds-multiselect.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsMultiselect {\n  private triggerEl?: HTMLButtonElement;\n  private searchInputEl?: HTMLInputElement;\n  private containerEl?: HTMLElement;\n  private listboxEl?: HTMLElement;\n  private panelEl?: HTMLElement;\n  private internals?: ElementInternals;\n  private abortController?: AbortController;\n  private fetchDebounceTimer?: number;\n  private observer?: MutationObserver;\n  private cleanupAutoUpdate?: () => void;\n\n  @Element() el!: HTMLPdsMultiselectElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Text to be displayed as the multiselect label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Placeholder text for the input field.\n   */\n  @Prop() placeholder?: string = 'Select...';\n\n  /**\n   * Specifies the name. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Array of selected option values.\n   */\n  @Prop({ mutable: true }) value: string[] = [];\n\n  /**\n   * Determines whether or not the multiselect is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * URL endpoint for async data fetching.\n   */\n  @Prop() asyncUrl?: string;\n\n  /**\n   * HTTP method for async requests.\n   */\n  @Prop() asyncMethod: 'GET' | 'POST' = 'GET';\n\n  /**\n   * Debounce delay in milliseconds for search/fetch.\n   */\n  @Prop() debounce: number = 300;\n\n  /**\n   * Maximum number of selections allowed.\n   */\n  @Prop() maxSelections?: number;\n\n  /**\n   * Maximum height of the dropdown before scrolling.\n   */\n  @Prop() maxHeight: string = '300px';\n\n  /**\n   * Width of the trigger button (and reference for dropdown positioning).\n   */\n  @Prop() triggerWidth: string = '100%';\n\n  /**\n   * Minimum width of the dropdown panel.\n   */\n  @Prop() minWidth: string = '250px';\n\n  /**\n   * Width of the dropdown panel. Defaults to the trigger width.\n   */\n  @Prop() panelWidth?: string;\n\n  /**\n   * Visually hides the label but keeps it accessible.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * Error message to display.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Helper message to display below the input.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * If true, the multiselect is in an invalid state.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * If true, the multiselect is required.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the component is currently loading async options.\n   */\n  @Prop({ mutable: true }) loading: boolean = false;\n\n  /**\n   * Options provided externally (for consumer-managed async).\n   */\n  @Prop() options?: MultiselectOption[];\n\n  /**\n   * Function to format async results. Receives raw API response item.\n   */\n  @Prop() formatResult?: (item: unknown) => MultiselectOption;\n\n  // Internal state\n  @State() isOpen: boolean = false;\n  @State() searchQuery: string = '';\n  @State() highlightedIndex: number = -1;\n  @State() internalOptions: MultiselectOption[] = [];\n  @State() selectedItems: MultiselectOption[] = [];\n  @State() currentPage: number = 1;\n  @State() hasMore: boolean = false;\n\n  // Flag to prevent focusout from closing during open transition\n  private isOpening: boolean = false;\n\n  /**\n   * Emitted when selection changes.\n   */\n  @Event() pdsMultiselectChange!: EventEmitter<MultiselectChangeEventDetail>;\n\n  /**\n   * Emitted on search input (for consumer-managed async).\n   */\n  @Event() pdsMultiselectSearch!: EventEmitter<MultiselectSearchEventDetail>;\n\n  /**\n   * Emitted to request more options (pagination).\n   */\n  @Event() pdsMultiselectLoadOptions!: EventEmitter<MultiselectLoadOptionsEventDetail>;\n\n  private originalSearchEmitter?: EventEmitter<MultiselectSearchEventDetail>;\n\n  connectedCallback() {\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n  }\n\n  componentWillLoad() {\n    this.originalSearchEmitter = this.pdsMultiselectSearch;\n    this.syncSelectedItems();\n  }\n\n  componentDidLoad() {\n    this.setupDebounce();\n    this.setupMutationObserver();\n    this.setupSlotChangeListener();\n    this.updateFormValue();\n\n    // Ensure preselected values sync after DOM is fully ready\n    // This handles cases where slot content loads after initial render (e.g., in docs/MDX)\n    requestAnimationFrame(() => {\n      this.updateOptionsFromSlot();\n      this.syncSelectedItems();\n    });\n  }\n\n  private setupSlotChangeListener() {\n    const slot = this.el.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n    if (slot) {\n      slot.addEventListener('slotchange', () => {\n        this.updateOptionsFromSlot();\n        this.syncSelectedItems();\n      });\n      // Also call it immediately in case content is already slotted\n      this.updateOptionsFromSlot();\n    }\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.cleanupAutoUpdate?.();\n    this.clearAsyncFetchState();\n  }\n\n  @Watch('debounce')\n  protected setupDebounce() {\n    const { pdsMultiselectSearch, debounce, originalSearchEmitter } = this;\n    this.pdsMultiselectSearch = debounce === undefined\n      ? originalSearchEmitter ?? pdsMultiselectSearch\n      : debounceEvent(pdsMultiselectSearch, debounce);\n  }\n\n  @Watch('value')\n  protected valueChanged(newValue: string[] | string) {\n    // Handle JSON string values (from HTML attributes)\n    if (typeof newValue === 'string') {\n      try {\n        const parsed = JSON.parse(newValue);\n        if (Array.isArray(parsed)) {\n          this.value = parsed;\n          return; // The assignment will trigger this watcher again with the array\n        }\n      } catch {\n        // Not valid JSON, treat as single value\n        this.value = newValue ? [newValue] : [];\n        return;\n      }\n    }\n    this.syncSelectedItems();\n    this.updateFormValue();\n  }\n\n  @Watch('options')\n  protected optionsChanged() {\n    if (this.options) {\n      this.internalOptions = [...this.options];\n    }\n  }\n\n  @Watch('internalOptions')\n  protected internalOptionsChanged() {\n    // Re-sync selected items when options become available\n    // This handles the case where value is set before options are loaded (e.g., from slot)\n    this.syncSelectedItems();\n  }\n\n  /**\n   * Sets focus on the trigger button.\n   */\n  @Method()\n  async setFocus() {\n    this.triggerEl?.focus();\n  }\n\n  /**\n   * Handle global keyboard events for accessibility.\n   * Closes dropdown on Escape key press regardless of focus location.\n   */\n  @Listen('keydown', { target: 'window' })\n  handleWindowKeyDown(event: KeyboardEvent) {\n    if (!this.isOpen) return;\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.closeDropdown();\n      this.triggerEl?.focus();\n    }\n  }\n\n  private setupMutationObserver() {\n    this.observer = new MutationObserver(() => {\n      this.updateOptionsFromSlot();\n    });\n\n    this.observer.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  private updateOptionsFromSlot() {\n    const slot = this.el.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n    if (!slot) return;\n\n    const options = slot.assignedElements({ flatten: true })\n      .filter((el): el is HTMLOptionElement => el.tagName === 'OPTION')\n      .map(opt => ({\n        id: opt.value,\n        text: opt.textContent || opt.value,\n      }));\n\n    // Only update if we actually found options AND we're not using async/external options\n    // Don't clear internalOptions if slot returns empty (might be mid-DOM-update)\n    if (options.length > 0 && !this.asyncUrl && !this.options) {\n      this.internalOptions = options;\n    }\n  }\n\n  private clearAsyncFetchState() {\n    if (this.fetchDebounceTimer !== undefined) {\n      window.clearTimeout(this.fetchDebounceTimer);\n      this.fetchDebounceTimer = undefined;\n    }\n    this.abortController?.abort();\n    this.abortController = undefined;\n  }\n\n  private debouncedFetchAsyncOptions(query: string, page: number = 1) {\n    if (!this.asyncUrl) return;\n\n    if (this.fetchDebounceTimer !== undefined) {\n      window.clearTimeout(this.fetchDebounceTimer);\n    }\n\n    const delay = Math.max(0, this.debounce ?? 0);\n    this.fetchDebounceTimer = window.setTimeout(() => {\n      this.fetchDebounceTimer = undefined;\n      this.fetchOptions(query, page);\n    }, delay);\n  }\n\n  private syncSelectedItems() {\n    // Ensure value is an array (may be string from HTML attribute)\n    const valueArray = this.ensureValueArray();\n    const allOptions = this.getAllOptions();\n    this.selectedItems = valueArray\n      .map(val => allOptions.find(opt => String(opt.id) === String(val)))\n      .filter((opt): opt is MultiselectOption => opt !== undefined);\n  }\n\n  private ensureValueArray(): string[] {\n    // Handle JSON string values passed via HTML attribute\n    if (typeof this.value === 'string') {\n      try {\n        const parsed = JSON.parse(this.value as unknown as string);\n        if (Array.isArray(parsed)) {\n          this.value = parsed;\n          return parsed;\n        }\n      } catch {\n        // Not valid JSON, treat as single value\n        const singleValue = this.value as unknown as string;\n        this.value = singleValue ? [singleValue] : [];\n        return this.value;\n      }\n    }\n    return Array.isArray(this.value) ? this.value : [];\n  }\n\n  private getAllOptions(): MultiselectOption[] {\n    return this.options || this.internalOptions;\n  }\n\n  private getFilteredOptions(): MultiselectOption[] {\n    const allOptions = this.getAllOptions();\n    const query = this.searchQuery.toLowerCase();\n\n    return allOptions.filter(opt => {\n      // Filter by search query only - don't filter out selected items\n      if (query) {\n        return opt.text.toLowerCase().includes(query);\n      }\n      return true;\n    });\n  }\n\n  private updateFormValue() {\n    if (this.internals?.setFormValue) {\n      // Ensure value is an array before iterating\n      const valueArray = this.ensureValueArray();\n\n      // Submit as multiple values with same name (native select multiple behavior)\n      const formData = new FormData();\n      valueArray.forEach(val => {\n        if (this.name) {\n          formData.append(this.name, val);\n        }\n      });\n      this.internals.setFormValue(formData);\n\n      // Update validity state for required validation\n      if (this.required && valueArray.length === 0) {\n        this.internals.setValidity(\n          { valueMissing: true },\n          'Please select at least one option.',\n          this.triggerEl\n        );\n      } else {\n        this.internals.setValidity({});\n      }\n    }\n  }\n\n  private async fetchOptions(query: string, page: number = 1) {\n    if (!this.asyncUrl) return;\n\n    this.abortController?.abort();\n    this.abortController = new AbortController();\n\n    this.loading = true;\n\n    try {\n      const url = new URL(this.asyncUrl, window.location.origin);\n      if (this.asyncMethod === 'GET') {\n        url.searchParams.set('search', query);\n        url.searchParams.set('page', String(page));\n      }\n\n      const response = await fetch(url.toString(), {\n        method: this.asyncMethod,\n        signal: this.abortController.signal,\n        headers: {\n          'Content-Type': 'application/json',\n          'Accept': 'application/json',\n        },\n        ...(this.asyncMethod === 'POST' && {\n          body: JSON.stringify({ search: query, page }),\n        }),\n      });\n\n      if (!response.ok) throw new Error('Failed to fetch options');\n\n      const data: AsyncResponse = await response.json();\n\n      const formattedResults = data.results.map(item => {\n        if (this.formatResult) {\n          return this.formatResult(item);\n        }\n        return {\n          id: item.id,\n          text: item.text,\n          ...item,\n        };\n      });\n\n      if (page === 1) {\n        this.internalOptions = formattedResults;\n      } else {\n        this.internalOptions = [...this.internalOptions, ...formattedResults];\n      }\n\n      this.hasMore = data.totalCount ? this.internalOptions.length < data.totalCount : false;\n      this.currentPage = page;\n\n    } catch (error) {\n      if ((error as Error).name !== 'AbortError') {\n        console.error('PdsMultiselect: Failed to fetch options', error);\n      }\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  private handleTriggerClick = () => {\n    if (this.disabled) return;\n\n    if (this.isOpen) {\n      this.closeDropdown();\n    } else {\n      this.openDropdown();\n    }\n  };\n\n  private handleTriggerKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        if (!this.isOpen) {\n          this.openDropdown();\n        }\n        break;\n    }\n  };\n\n  private handleSearchInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.searchQuery = target.value;\n    this.highlightedIndex = -1;\n\n    // Emit search event for consumer-managed async\n    this.pdsMultiselectSearch.emit({ query: this.searchQuery });\n\n    // Fetch from async URL if configured\n    if (this.asyncUrl) {\n      this.debouncedFetchAsyncOptions(this.searchQuery, 1);\n    }\n  };\n\n  private handleSearchInputKeyDown = (e: KeyboardEvent) => {\n    const filteredOptions = this.getFilteredOptions();\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        this.highlightedIndex = Math.min(this.highlightedIndex + 1, filteredOptions.length - 1);\n        this.scrollOptionIntoView();\n        break;\n\n      case 'ArrowUp':\n        e.preventDefault();\n        this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);\n        this.scrollOptionIntoView();\n        break;\n\n      case 'Enter':\n        e.preventDefault();\n        if (this.highlightedIndex >= 0) {\n          const option = filteredOptions[this.highlightedIndex];\n          if (option) {\n            this.selectOption(option);\n          }\n        }\n        break;\n\n      // Escape is handled by the global @Listen('keydown') handler\n\n      case 'Tab':\n        this.closeDropdown();\n        break;\n    }\n  };\n\n  private handleContainerFocusOut = () => {\n    // Use setTimeout to delay the check - this allows click events and focus transitions to complete\n    // before we decide to close the dropdown\n    setTimeout(() => {\n      // Don't close if we're in the middle of opening or already closed\n      if (!this.isOpen || this.isOpening) return;\n\n      const activeElement = document.activeElement;\n\n      // Check if focus is within our component's shadow root\n      const isInShadowRoot = this.el.shadowRoot?.contains(activeElement);\n\n      // Also check if focus is on the host element itself\n      const isOnHost = activeElement === this.el;\n\n      if (!isInShadowRoot && !isOnHost) {\n        this.closeDropdown();\n      }\n    }, 0);\n  };\n\n  private openDropdown() {\n    if (this.disabled) return;\n\n    this.isOpening = true;\n    this.isOpen = true;\n    this.highlightedIndex = -1;\n\n    // Trigger initial fetch if async\n    if (this.asyncUrl && this.internalOptions.length === 0) {\n      this.debouncedFetchAsyncOptions(this.searchQuery, 1);\n    }\n\n    requestAnimationFrame(() => {\n      this.positionDropdown();\n      // Focus the search input after the panel is positioned\n      this.searchInputEl?.focus();\n      // Clear the opening flag after focus has moved\n      setTimeout(() => {\n        this.isOpening = false;\n      }, 50);\n    });\n  }\n\n  private closeDropdown() {\n    this.isOpen = false;\n    this.highlightedIndex = -1;\n    this.searchQuery = '';\n\n    // Clean up auto-update\n    if (this.cleanupAutoUpdate) {\n      this.cleanupAutoUpdate();\n      this.cleanupAutoUpdate = undefined;\n    }\n  }\n\n  private positionDropdown() {\n    if (!this.containerEl || !this.panelEl) return;\n    const referenceEl = this.triggerEl || this.containerEl;\n\n    const { minWidth, panelWidth } = this;\n\n    const updatePosition = () => {\n      computePosition(referenceEl!, this.panelEl!, {\n        placement: 'bottom-start',\n        strategy: 'absolute',\n        middleware: [\n          offset(12),\n          flip(),\n          shift({ padding: 8 }),\n          size({\n            apply: ({ rects, elements }) => {\n              Object.assign(elements.floating.style, {\n                width: panelWidth ?? `${rects.reference.width}px`,\n                minWidth,\n              });\n            },\n          }),\n        ],\n      }).then(({ x, y }) => {\n        if (this.panelEl) {\n          this.panelEl.style.left = `${x}px`;\n          this.panelEl.style.top = `${y}px`;\n        }\n      });\n    };\n\n    // Initial position\n    updatePosition();\n\n    // Set up auto-update for window resize and scroll\n    const cleanupAutoUpdate = autoUpdate(\n      referenceEl!,\n      this.panelEl,\n      updatePosition\n    );\n    this.cleanupAutoUpdate = () => {\n      cleanupAutoUpdate();\n      this.clearAsyncFetchState();\n    };\n  }\n\n  private scrollOptionIntoView() {\n    requestAnimationFrame(() => {\n      const highlighted = this.listboxEl?.querySelector(`[data-index=\"${this.highlightedIndex}\"]`) as HTMLElement;\n      highlighted?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n    });\n  }\n\n  private toggleOption(option: MultiselectOption) {\n    const isSelected = this.value.includes(String(option.id));\n\n    if (isSelected) {\n      // Remove from selection\n      const newValue = this.value.filter(v => v !== String(option.id));\n      this.value = newValue;\n\n      const newSelectedItems = this.selectedItems.filter(item => String(item.id) !== String(option.id));\n\n      this.pdsMultiselectChange.emit({\n        values: newValue,\n        items: newSelectedItems,\n      });\n    } else {\n      // Add to selection\n      if (this.maxSelections && this.value.length >= this.maxSelections) {\n        return;\n      }\n\n      const newValue = [...this.value, String(option.id)];\n      this.value = newValue;\n\n      const newSelectedItems = [...this.selectedItems, option];\n\n      this.pdsMultiselectChange.emit({\n        values: newValue,\n        items: newSelectedItems,\n      });\n    }\n\n    // Keep focus on search input, don't close dropdown\n    this.searchInputEl?.focus();\n  }\n\n  private selectOption(option: MultiselectOption) {\n    // For keyboard navigation - toggle the option\n    this.toggleOption(option);\n  }\n\n  private handleOptionMouseDown = (option: MultiselectOption) => (e: MouseEvent) => {\n    e.preventDefault(); // Prevent focus change\n    this.toggleOption(option);\n  };\n\n  private handleOptionMouseEnter = (index: number) => () => {\n    this.highlightedIndex = index;\n  };\n\n\n  private handleScroll = (e: Event) => {\n    if (!this.asyncUrl || !this.hasMore || this.loading) return;\n\n    const target = e.target as HTMLElement;\n    const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n    // Load more when near bottom (within 50px)\n    if (scrollBottom < 50) {\n      this.pdsMultiselectLoadOptions.emit({\n        query: this.searchQuery,\n        page: this.currentPage + 1,\n      });\n      this.debouncedFetchAsyncOptions(this.searchQuery, this.currentPage + 1);\n    }\n  };\n\n\n  private renderSelectedItemsList() {\n    if (this.selectedItems.length === 0) return null;\n\n    return (\n      <div class=\"pds-multiselect__selected-section\">\n        <ul class=\"pds-multiselect__selected-list\" role=\"list\">\n          {this.selectedItems.map(item => (\n            <li key={String(item.id)} class=\"pds-multiselect__selected-item\">\n              {item.text}\n            </li>\n          ))}\n        </ul>\n      </div>\n    );\n  }\n\n  private renderDropdown() {\n    if (!this.isOpen) return null;\n\n    const filteredOptions = this.getFilteredOptions();\n    const valueArray = this.ensureValueArray();\n    const hasSlottedEmpty = !!this.el.querySelector('[slot=\"empty\"]');\n    const hasSlottedLoading = !!this.el.querySelector('[slot=\"loading\"]');\n\n    return (\n      <div\n        class=\"pds-multiselect__panel\"\n        ref={el => (this.panelEl = el)}\n        style={{ minWidth: this.minWidth }}\n      >\n        {/* Search input */}\n        <div class=\"pds-multiselect__search\">\n          <pds-icon name=\"search\" size=\"small\" />\n          <input\n            ref={el => (this.searchInputEl = el)}\n            type=\"text\"\n            class=\"pds-multiselect__search-input\"\n            placeholder=\"Find...\"\n            value={this.searchQuery}\n            aria-label=\"Search options\"\n            aria-controls={`${this.componentId}-listbox`}\n            aria-activedescendant={this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined}\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            aria-expanded=\"true\"\n            aria-autocomplete=\"list\"\n            autocomplete=\"off\"\n            onInput={this.handleSearchInputChange}\n            onKeyDown={this.handleSearchInputKeyDown}\n          />\n        </div>\n\n        {/* Selected items section */}\n        {this.renderSelectedItemsList()}\n\n        {/* Options list */}\n        <ul\n          class=\"pds-multiselect__listbox\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          aria-label={this.label || 'Options'}\n          id={`${this.componentId}-listbox`}\n          ref={el => (this.listboxEl = el)}\n          style={{ maxHeight: this.maxHeight }}\n          onScroll={this.handleScroll}\n        >\n          {this.loading && (\n            <li class=\"pds-multiselect__loading\" role=\"presentation\">\n              {hasSlottedLoading ? (\n                <slot name=\"loading\" />\n              ) : (\n                <pds-loader size=\"small\" />\n              )}\n            </li>\n          )}\n\n          {!this.loading && filteredOptions.length === 0 && (\n            <li class=\"pds-multiselect__empty\" role=\"presentation\">\n              {hasSlottedEmpty ? (\n                <slot name=\"empty\" />\n              ) : (\n                <span>No options found</span>\n              )}\n            </li>\n          )}\n\n          {filteredOptions.map((option, index) => {\n            const isSelected = valueArray.includes(String(option.id));\n            const isHighlighted = index === this.highlightedIndex;\n            const optionId = `${this.componentId}-option-${index}`;\n\n            return (\n              <li\n                key={String(option.id)}\n                id={optionId}\n                class={{\n                  'pds-multiselect__option': true,\n                  'pds-multiselect__option--highlighted': isHighlighted,\n                  'pds-multiselect__option--selected': isSelected,\n                }}\n                role=\"option\"\n                aria-selected={isSelected ? 'true' : 'false'}\n                data-index={index}\n                onMouseDown={this.handleOptionMouseDown(option)}\n                onMouseEnter={this.handleOptionMouseEnter(index)}\n              >\n                <pds-checkbox\n                  componentId={`${this.componentId}-checkbox-${index}`}\n                  checked={isSelected}\n                  label={option.text}\n                  style={{ pointerEvents: 'none' }}\n                />\n              </li>\n            );\n          })}\n\n          {this.hasMore && !this.loading && (\n            <li class=\"pds-multiselect__load-more\" role=\"presentation\">\n              <pds-loader size=\"small\" />\n            </li>\n          )}\n        </ul>\n      </div>\n    );\n  }\n\n  private getTriggerText(): string {\n    const count = this.selectedItems.length;\n    if (count === 0) {\n      return this.placeholder || 'Select...';\n    }\n    return `${count} item${count === 1 ? '' : 's'}`;\n  }\n\n  render() {\n    const hasSelections = this.selectedItems.length > 0;\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-multiselect\">\n          {this.label && (\n            <label\n              htmlFor={this.componentId}\n              class={{\n                'pds-multiselect__label': true,\n                'visually-hidden': this.hideLabel,\n              }}\n            >\n              {this.label}\n            </label>\n          )}\n\n          <div\n            class=\"pds-multiselect__wrapper\"\n            ref={el => (this.containerEl = el)}\n            onFocusout={this.handleContainerFocusOut}\n            style={{ width: this.triggerWidth }}\n          >\n            <button\n              ref={el => (this.triggerEl = el)}\n              type=\"button\"\n              class={{\n                'pds-multiselect__trigger': true,\n                'pds-multiselect__trigger--open': this.isOpen,\n                'pds-multiselect__trigger--disabled': this.disabled,\n                'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,\n                'pds-multiselect__trigger--has-value': hasSelections,\n              }}\n              id={this.componentId}\n              disabled={this.disabled}\n              aria-required={this.required ? 'true' : undefined}\n              aria-expanded={this.isOpen ? 'true' : 'false'}\n              aria-haspopup=\"listbox\"\n              aria-describedby={assignDescription(\n                this.componentId,\n                this.invalid || !!this.errorMessage,\n                this.errorMessage || this.helperMessage\n              )}\n              aria-invalid={this.invalid || !!this.errorMessage ? 'true' : undefined}\n              onClick={this.handleTriggerClick}\n              onKeyDown={this.handleTriggerKeyDown}\n            >\n              <span class={{\n                'pds-multiselect__trigger-text': true,\n                'pds-multiselect__trigger-text--placeholder': !hasSelections,\n              }}>\n                {this.getTriggerText()}\n              </span>\n              <pds-icon class=\"pds-multiselect__icon\" icon={enlarge} />\n            </button>\n\n            {this.renderDropdown()}\n          </div>\n\n          {this.helperMessage && !this.errorMessage && (\n            <p class=\"pds-multiselect__helper\" id={messageId(this.componentId, 'helper')}>\n              {this.helperMessage}\n            </p>\n          )}\n\n          {this.errorMessage && (\n            <p class=\"pds-multiselect__error\" id={messageId(this.componentId, 'error')}>\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          )}\n\n          {/* Hidden slot for static options */}\n          <div style={{ display: 'none' }}>\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/pine-core/pds-radio.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-radio.entry.esm.js","sources":["src/global/styles/utils/label.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.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",":host {\n  --sizing-check-size: 6px;\n  --sizing-input-size: var(--pine-dimension-sm);\n  --sizing-margin-block-start: 6px;\n\n  align-items: center;\n  display: flex;\n  flex-flow: row wrap;\n  position: relative;\n}\n\n:host(.is-invalid) {\n  // Invalid state only affects error message styling, not the radio itself\n  // This allows radio-group to handle error display without red radios\n  .pds-radio__message--error {\n    color: var(--pine-color-text-message-danger);\n  }\n}\n\n:host(.has-border) {\n  align-items: flex-start;\n  border: var(--pine-border);\n  border-radius: var(--pine-dimension-125);\n  column-gap: var(--pine-dimension-xs);\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  padding: var(--pine-dimension-md);\n\n  // On small screens, ensure full width when in a row layout\n  @media (max-width: 767px) {\n    box-sizing: border-box;\n    flex: 1 1 100%;\n    max-width: 100%;\n    min-width: 0;\n  }\n\n  &:hover {\n    border: var(--pine-border-hover);\n  }\n\n  &:has(input:checked) {\n    box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n  }\n\n  label {\n    color: var(--pine-color-text);\n    font-weight: var(--pine-font-weight-semi-bold);\n\n    &::after {\n      content: \"\";\n      cursor: pointer;\n      height: 100%;\n      left: 0;\n      position: absolute;\n      top: 0;\n      width: 100%;\n      z-index: 1;\n    }\n  }\n\n  // Disabled state for bordered radios\n  &:has(input:disabled) {\n    background: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    cursor: not-allowed;\n\n    label {\n      color: var(--pine-color-text-label-disabled);\n      cursor: not-allowed;\n    }\n  }\n\n  // Invalid state for bordered radios - no red styling, only error message\n  &.is-invalid {\n    .pds-radio__message--error {\n      color: var(--pine-color-text-message-danger);\n    }\n  }\n}\n\ninput {\n  appearance: none;\n  background: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: var(--pine-border-radius-full);\n  flex: none;\n  height: var(--sizing-input-size);\n  margin: 0;\n  margin-block-start: var(--pine-dimension-025);\n  position: relative;\n  width: var(--sizing-input-size);\n\n  /* stylelint-disable-next-line selector-no-qualifying-type */\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\n  &:hover {\n    background: var(--pine-color-background-container-hover);\n    border: var(--pine-border-hover);\n  }\n\n  &:checked {\n    background: var(--pine-color-accent);\n    border-color: var(--pine-color-accent);\n\n    &:hover {\n      background: var(--pine-color-accent-hover);\n      border-color: var(--pine-color-accent-hover);\n    }\n\n    &::after {\n      background: var(--pine-color-white);\n      border-radius: var(--pine-border-radius-full);\n      content: \"\";\n      display: block;\n      height: var(--sizing-check-size);\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      width: var(--sizing-check-size);\n    }\n  }\n\n  &:disabled {\n    background: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    cursor: not-allowed;\n\n    &:checked {\n      background-color: var(--pine-color-accent-disabled);\n      border-color: var(--pine-color-border-disabled);\n\n      &::after {\n        border-color: var(--pine-color-border-disabled);\n      }\n    }\n\n\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n  }\n\n}\n\nlabel {\n  display: flex;\n  gap: var(--pine-dimension-xs);\n}\n\n// Disabled label styling\nlabel:has(input:disabled) {\n  color: var(--pine-color-text-label-disabled);\n  cursor: not-allowed;\n}\n\n// Disabled message styling\n:host:has(input:disabled) .pds-radio__message {\n  color: var(--pine-color-text-label-disabled);\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\n.pds-radio__message {\n  color: var(--pine-color-text-message);\n  flex-basis: 100%; // Ensure message wraps to new line in flex container\n  font: var(--pine-typography-body);\n  margin-inline-start: var(--pine-dimension-md);\n  width: 100%;\n}\n\n.pds-radio__message--error {\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n\n  pds-icon {\n    margin-block-start: var(--pine-dimension-025);\n  }\n}\n\n// Image-based radio styles - matches bordered layout\n:host(.has-image) {\n  align-items: center;\n  border: var(--pine-border);\n  border-radius: var(--pine-dimension-125);\n  column-gap: var(--pine-dimension-xs);\n  display: flex;\n  flex: 1;\n  padding: var(--pine-dimension-md);\n\n  // On small screens, ensure full width when in a row layout\n  @media (max-width: 767px) {\n    box-sizing: border-box;\n    flex: 1 1 100%;\n    max-width: 100%;\n    min-width: 0;\n  }\n\n  &:hover {\n    border: var(--pine-border-hover);\n  }\n\n  &:has(input:checked) {\n    box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n  }\n\n  label {\n    color: var(--pine-color-text);\n    display: flex;\n    font-weight: var(--pine-font-weight-semi-bold);\n    gap: var(--pine-dimension-xs);\n\n    &::after {\n      content: \"\";\n      cursor: pointer;\n      height: 100%;\n      left: 0;\n      position: absolute;\n      top: 0;\n      width: 100%;\n      z-index: 1;\n    }\n  }\n\n  .pds-radio__image-container {\n    align-items: center;\n    align-self: center;\n    border: var(--pine-border);\n    border-radius: var(--pine-border-radius-full);\n    cursor: pointer;\n    display: flex;\n    flex: none;\n    grid-area: image;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n    transition: all 0.2s ease;\n\n    &:hover {\n      border-color: var(--pine-color-border-hover);\n    }\n\n    .pds-radio__image {\n      height: 100%;\n      object-fit: cover;\n      width: 100%;\n    }\n  }\n\n  .pds-radio__message {\n    grid-area: message;\n    margin-block-start: 0;\n    margin-inline-start: 0;\n  }\n\n  // Disabled state\n  &.is-disabled {\n    background: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    cursor: not-allowed;\n\n    .pds-radio__image-container {\n      border-color: var(--pine-color-border-disabled);\n      cursor: not-allowed;\n      opacity: 0.5;\n\n      &:hover {\n        border-color: var(--pine-color-border-disabled);\n      }\n    }\n\n    label {\n      color: var(--pine-color-text-label-disabled);\n      cursor: not-allowed;\n    }\n\n    .pds-radio__message {\n      color: var(--pine-color-text-label-disabled);\n    }\n  }\n\n  // Invalid state - no red styling, only error message\n  &.is-invalid {\n    .pds-radio__message--error {\n      color: var(--pine-color-text-message-danger);\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot image - Custom image content to display instead of the default radio input\n * @part image-container - The container for the image\n */\n@Component({\n  tag: 'pds-radio',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n  scoped: true,\n})\nexport class PdsRadio {\n  private readonly _type = 'radio' as const;\n\n  @Element() el: HTMLPdsRadioElement;\n\n  @State() private _hasImage = false;\n\n  /**\n   * Determines whether or not the radio is checked.\n   * @defaultValue false\n   */\n  @Prop() checked = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines whether or not the radio is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Displays helper message text below radio.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Adds a border around the radio component for better visual separation.\n   * @defaultValue false\n   */\n  @Prop() hasBorder = false;\n\n    /**\n   * Determines whether or not the radio is invalid.\n   * @defaultValue false\n   */\n    @Prop() invalid = false;\n\n  /**\n   * String used for label text next to radio.\n   */\n  @Prop() label: string;\n\n  /**\n   * Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * String used for radio `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines whether or not the radio is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio that is submitted with a form.\n   */\n  @Prop() value: string;\n\n\n  /**\n   * Emits a boolean indicating whether the radio is currently checked or unchecked.\n   */\n  @Event() pdsRadioChange: EventEmitter<boolean>;\n\n  private handleRadioChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const isChecked = target.checked;\n\n    // If this radio is inside a pds-radio-group, don't emit the individual event\n    // The group will handle emitting its own event\n    if (this.el.closest('pds-radio-group')) {\n      return;\n    }\n\n    this.pdsRadioChange.emit(isChecked);\n  }\n\n  private hasImageSlot(): boolean {\n    const imageSlot = this.el.querySelector('[slot=\"image\"]');\n    return !!imageSlot;\n  }\n\n  private hasImage(): boolean {\n    return this._hasImage;\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) {\n      classNames.push('is-invalid');\n    }\n    if (this.disabled) {\n      classNames.push('is-disabled');\n    }\n    if (this.hasBorder) {\n      classNames.push('has-border');\n    }\n    if (this.hasImage()) {\n      classNames.push('has-image');\n    }\n\n    return classNames.join(' ');\n  }\n\n  componentWillLoad() {\n    this._hasImage = this.hasImageSlot();\n  }\n\n  connectedCallback() {\n    // Expose type property on the element instance to match native form element behavior\n    exposeTypeProperty(this.el, () => this._type);\n  }\n\n  render() {\n    const renderLabelAndMessages = () => [\n      <label htmlFor={this.componentId} key={`${this.componentId}-label`}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"radio\"\n          id={this.componentId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleRadioChange}\n          class={this.hasImage() ? 'visually-hidden' : ''}\n        />\n        <span class={this.hideLabel ? 'visually-hidden' : ''}>\n          {this.label}\n        </span>\n      </label>,\n      this.helperMessage && (\n        <div\n          key={`${this.componentId}-helper`}\n          class={'pds-radio__message'}\n          id={messageId(this.componentId, 'helper')}\n        >\n          {this.helperMessage}\n        </div>\n      ),\n      this.errorMessage && (\n        <div\n          key={`${this.componentId}-error`}\n          class={`pds-radio__message pds-radio__message--error`}\n          id={messageId(this.componentId, 'error')}\n          aria-live=\"assertive\"\n        >\n          <pds-icon icon={danger} size=\"small\" />\n          {this.errorMessage}\n        </div>\n      )\n    ];\n\n    return (\n      <Host class={this.classNames()}>\n        {this.hasImage() && (\n          <div class=\"pds-radio__image-container\" part=\"image-container\">\n            <slot name=\"image\" onSlotchange={() => (this._hasImage = this.hasImageSlot())} />\n          </div>\n        )}\n        {this.hasImage() ? (\n          <div class=\"pds-radio__content-wrapper\">\n            {renderLabelAndMessages()}\n          </div>\n        ) : (\n          renderLabelAndMessages()\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pds-radio.entry.esm.js","sources":["src/global/styles/utils/label.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.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",":host {\n  --sizing-check-size: 6px;\n  --sizing-input-size: var(--pine-dimension-sm);\n  --sizing-margin-block-start: 6px;\n\n  align-items: center;\n  display: flex;\n  flex-flow: row wrap;\n  position: relative;\n}\n\n:host(.is-invalid) {\n  // Invalid state only affects error message styling, not the radio itself\n  // This allows radio-group to handle error display without red radios\n  .pds-radio__message--error {\n    color: var(--pine-color-text-message-danger);\n  }\n}\n\n:host(.has-border) {\n  align-items: flex-start;\n  border: var(--pine-border);\n  border-radius: var(--pine-dimension-125);\n  column-gap: var(--pine-dimension-xs);\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  padding: var(--pine-dimension-md);\n\n  // On small screens, ensure full width when in a row layout\n  @media (max-width: 767px) {\n    box-sizing: border-box;\n    flex: 1 1 100%;\n    max-width: 100%;\n    min-width: 0;\n  }\n\n  &:hover {\n    border: var(--pine-border-hover);\n  }\n\n  &:has(input:checked) {\n    box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n  }\n\n  label {\n    color: var(--pine-color-text);\n    font-weight: var(--pine-font-weight-semi-bold);\n\n    &::after {\n      content: \"\";\n      cursor: pointer;\n      height: 100%;\n      left: 0;\n      position: absolute;\n      top: 0;\n      width: 100%;\n      z-index: 1;\n    }\n  }\n\n  // Disabled state for bordered radios\n  &:has(input:disabled) {\n    background: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    cursor: not-allowed;\n\n    label {\n      color: var(--pine-color-text-label-disabled);\n      cursor: not-allowed;\n    }\n  }\n\n  // Invalid state for bordered radios - no red styling, only error message\n  &.is-invalid {\n    .pds-radio__message--error {\n      color: var(--pine-color-text-message-danger);\n    }\n  }\n}\n\ninput {\n  appearance: none;\n  background: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: var(--pine-border-radius-full);\n  flex: none;\n  height: var(--sizing-input-size);\n  margin: 0;\n  margin-block-start: var(--pine-dimension-025);\n  position: relative;\n  width: var(--sizing-input-size);\n\n  /* stylelint-disable-next-line selector-no-qualifying-type */\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\n  &:hover {\n    background: var(--pine-color-background-container-hover);\n    border: var(--pine-border-hover);\n  }\n\n  &:checked {\n    background: var(--pine-color-accent);\n    border-color: var(--pine-color-accent);\n\n    &:hover {\n      background: var(--pine-color-accent-hover);\n      border-color: var(--pine-color-accent-hover);\n    }\n\n    &::after {\n      /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n      background: var(--pine-color-white);\n      border-radius: var(--pine-border-radius-full);\n      content: \"\";\n      display: block;\n      height: var(--sizing-check-size);\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      width: var(--sizing-check-size);\n    }\n  }\n\n  &:disabled {\n    background: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    cursor: not-allowed;\n\n    &:checked {\n      background-color: var(--pine-color-accent-disabled);\n      border-color: var(--pine-color-border-disabled);\n\n      &::after {\n        border-color: var(--pine-color-border-disabled);\n      }\n    }\n\n\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n  }\n\n}\n\nlabel {\n  display: flex;\n  gap: var(--pine-dimension-xs);\n}\n\n// Disabled label styling\nlabel:has(input:disabled) {\n  color: var(--pine-color-text-label-disabled);\n  cursor: not-allowed;\n}\n\n// Disabled message styling\n:host:has(input:disabled) .pds-radio__message {\n  color: var(--pine-color-text-label-disabled);\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\n.pds-radio__message {\n  color: var(--pine-color-text-message);\n  flex-basis: 100%; // Ensure message wraps to new line in flex container\n  font: var(--pine-typography-body);\n  margin-inline-start: var(--pine-dimension-md);\n  width: 100%;\n}\n\n.pds-radio__message--error {\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n\n  pds-icon {\n    margin-block-start: var(--pine-dimension-025);\n  }\n}\n\n// Image-based radio styles - matches bordered layout\n:host(.has-image) {\n  align-items: center;\n  border: var(--pine-border);\n  border-radius: var(--pine-dimension-125);\n  column-gap: var(--pine-dimension-xs);\n  display: flex;\n  flex: 1;\n  padding: var(--pine-dimension-md);\n\n  // On small screens, ensure full width when in a row layout\n  @media (max-width: 767px) {\n    box-sizing: border-box;\n    flex: 1 1 100%;\n    max-width: 100%;\n    min-width: 0;\n  }\n\n  &:hover {\n    border: var(--pine-border-hover);\n  }\n\n  &:has(input:checked) {\n    box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n  }\n\n  label {\n    color: var(--pine-color-text);\n    display: flex;\n    font-weight: var(--pine-font-weight-semi-bold);\n    gap: var(--pine-dimension-xs);\n\n    &::after {\n      content: \"\";\n      cursor: pointer;\n      height: 100%;\n      left: 0;\n      position: absolute;\n      top: 0;\n      width: 100%;\n      z-index: 1;\n    }\n  }\n\n  .pds-radio__image-container {\n    align-items: center;\n    align-self: center;\n    border: var(--pine-border);\n    border-radius: var(--pine-border-radius-full);\n    cursor: pointer;\n    display: flex;\n    flex: none;\n    grid-area: image;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n    transition: all 0.2s ease;\n\n    &:hover {\n      border-color: var(--pine-color-border-hover);\n    }\n\n    .pds-radio__image {\n      height: 100%;\n      object-fit: cover;\n      width: 100%;\n    }\n  }\n\n  .pds-radio__message {\n    grid-area: message;\n    margin-block-start: 0;\n    margin-inline-start: 0;\n  }\n\n  // Disabled state\n  &.is-disabled {\n    background: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    cursor: not-allowed;\n\n    .pds-radio__image-container {\n      border-color: var(--pine-color-border-disabled);\n      cursor: not-allowed;\n      opacity: 0.5;\n\n      &:hover {\n        border-color: var(--pine-color-border-disabled);\n      }\n    }\n\n    label {\n      color: var(--pine-color-text-label-disabled);\n      cursor: not-allowed;\n    }\n\n    .pds-radio__message {\n      color: var(--pine-color-text-label-disabled);\n    }\n  }\n\n  // Invalid state - no red styling, only error message\n  &.is-invalid {\n    .pds-radio__message--error {\n      color: var(--pine-color-text-message-danger);\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot image - Custom image content to display instead of the default radio input\n * @part image-container - The container for the image\n */\n@Component({\n  tag: 'pds-radio',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n  scoped: true,\n})\nexport class PdsRadio {\n  private readonly _type = 'radio' as const;\n\n  @Element() el: HTMLPdsRadioElement;\n\n  @State() private _hasImage = false;\n\n  /**\n   * Determines whether or not the radio is checked.\n   * @defaultValue false\n   */\n  @Prop() checked = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines whether or not the radio is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Displays helper message text below radio.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Adds a border around the radio component for better visual separation.\n   * @defaultValue false\n   */\n  @Prop() hasBorder = false;\n\n    /**\n   * Determines whether or not the radio is invalid.\n   * @defaultValue false\n   */\n    @Prop() invalid = false;\n\n  /**\n   * String used for label text next to radio.\n   */\n  @Prop() label: string;\n\n  /**\n   * Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * String used for radio `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines whether or not the radio is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio that is submitted with a form.\n   */\n  @Prop() value: string;\n\n\n  /**\n   * Emits a boolean indicating whether the radio is currently checked or unchecked.\n   */\n  @Event() pdsRadioChange: EventEmitter<boolean>;\n\n  private handleRadioChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const isChecked = target.checked;\n\n    // If this radio is inside a pds-radio-group, don't emit the individual event\n    // The group will handle emitting its own event\n    if (this.el.closest('pds-radio-group')) {\n      return;\n    }\n\n    this.pdsRadioChange.emit(isChecked);\n  }\n\n  private hasImageSlot(): boolean {\n    const imageSlot = this.el.querySelector('[slot=\"image\"]');\n    return !!imageSlot;\n  }\n\n  private hasImage(): boolean {\n    return this._hasImage;\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) {\n      classNames.push('is-invalid');\n    }\n    if (this.disabled) {\n      classNames.push('is-disabled');\n    }\n    if (this.hasBorder) {\n      classNames.push('has-border');\n    }\n    if (this.hasImage()) {\n      classNames.push('has-image');\n    }\n\n    return classNames.join(' ');\n  }\n\n  componentWillLoad() {\n    this._hasImage = this.hasImageSlot();\n  }\n\n  connectedCallback() {\n    // Expose type property on the element instance to match native form element behavior\n    exposeTypeProperty(this.el, () => this._type);\n  }\n\n  render() {\n    const renderLabelAndMessages = () => [\n      <label htmlFor={this.componentId} key={`${this.componentId}-label`}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"radio\"\n          id={this.componentId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleRadioChange}\n          class={this.hasImage() ? 'visually-hidden' : ''}\n        />\n        <span class={this.hideLabel ? 'visually-hidden' : ''}>\n          {this.label}\n        </span>\n      </label>,\n      this.helperMessage && (\n        <div\n          key={`${this.componentId}-helper`}\n          class={'pds-radio__message'}\n          id={messageId(this.componentId, 'helper')}\n        >\n          {this.helperMessage}\n        </div>\n      ),\n      this.errorMessage && (\n        <div\n          key={`${this.componentId}-error`}\n          class={`pds-radio__message pds-radio__message--error`}\n          id={messageId(this.componentId, 'error')}\n          aria-live=\"assertive\"\n        >\n          <pds-icon icon={danger} size=\"small\" />\n          {this.errorMessage}\n        </div>\n      )\n    ];\n\n    return (\n      <Host class={this.classNames()}>\n        {this.hasImage() && (\n          <div class=\"pds-radio__image-container\" part=\"image-container\">\n            <slot name=\"image\" onSlotchange={() => (this._hasImage = this.hasImageSlot())} />\n          </div>\n        )}\n        {this.hasImage() ? (\n          <div class=\"pds-radio__content-wrapper\">\n            {renderLabelAndMessages()}\n          </div>\n        ) : (\n          renderLabelAndMessages()\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/pine-core/pds-select.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-select.entry.esm.js","sources":["src/components/pds-select/pds-select.tokens.scss?tag=pds-select&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-select/pds-select.tokens'\n",":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",":host {\n  --pds-select-background: var(--pine-color-background-container);\n  --pds-select-border: var(--pine-border);\n  --pds-select-border-radius: var(--pine-dimension-125);\n  --pds-select-border-radius-start-end: var(--pine-dimension-125);\n  --pds-select-border-radius-start-start: var(--pine-dimension-125);\n  --pds-select-border-radius-end-end: var(--pine-dimension-125);\n  --pds-select-border-radius-end-start: var(--pine-dimension-125);\n  --pds-select-min-height: 36px;\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n  .hidden,\n  :host([hidden]) {\n    display: none;\n  }\n}\n\n.pds-select {\n  color: var(--pine-color-text);\n  display: grid;\n  flex-direction: column;\n  grid-template-areas:\n    'label label'\n    'field field'\n    'message message';\n  grid-template-columns: 1fr minmax(2rem, min-content);\n  grid-template-rows: min-content min-content min-content;\n  position: relative;\n  width: 100%;\n}\n\n.pds-select__label-wrapper {\n  align-items: center;\n  display: flex;\n  grid-area: label;\n  justify-content: space-between;\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-select__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  margin-block-end: var(--pine-dimension-2xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-select__label-wrapper label {\n  margin-block-end: 0;\n}\n\nselect {\n  appearance: none;\n  background-color: var(--pds-select-background);\n  border: var(--pds-select-border);\n  border-radius: var(--pds-select-border-radius);\n  border-bottom-left-radius: var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));\n  border-bottom-right-radius: var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));\n  border-top-left-radius: var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));\n  border-top-right-radius: var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));\n  color: var(--pine-color-text);\n  font: var(--pine-typography-body);\n  grid-area: field;\n  letter-spacing: var(--pine-letter-spacing);\n  min-height: var(--pds-select-min-height);\n  padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);\n  padding-inline-end: var(--pine-dimension-450);\n  position: relative;\n\n  &:hover {\n    border-color: var(--pine-color-border-hover);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    border-color: var(--pine-color-border-active);\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n\n  &:has(~ .pds-select__message .pds-select__error-message) {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    :host-context([data-theme=\"dark\"]) & {\n      background-color: var(--pine-color-red-950);\n    }\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n:host(.is-invalid) {\n  select {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    :host-context([data-theme=\"dark\"]) & {\n      background-color: var(--pine-color-red-950);\n    }\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n:host([highlight]:not(.is-disabled):not(.is-invalid)) {\n  select {\n    background-color: var(--pine-color-accent-disabled);\n    border-color: var(--pine-color-accent);\n    color: var(--pine-color-text-accent);\n\n    &:hover:not(:disabled) {\n      border-color: var(--pine-color-accent-hover);\n    }\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring);\n    }\n  }\n\n  .pds-select__select-icon {\n    color: var(--pine-color-text-accent);\n  }\n}\n\n.pds-select__error-message,\n.pds-select__helper-message {\n  color: var(--pine-color-text-message);\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-end: 0;\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-select__error-message {\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n\n  pds-icon {\n    margin-block-start: var(--pine-dimension-025);\n  }\n}\n\n.pds-select__message {\n  grid-area: message;\n}\n\n.pds-select__select-icon {\n  align-items: center;\n  display: flex;\n  grid-column: -1 / -2;\n  grid-row: 2 / 3;\n  height: var(--pds-select-min-height);\n  pointer-events: none;\n  position: relative;\n  z-index: var(--pine-z-index-raised);\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\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger, enlarge } 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-select',\n  styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsSelect {\n\n  private selectEl!: HTMLSelectElement;\n  private slotContainer!: HTMLDivElement;\n  private internals?: ElementInternals;\n  private _type: 'select-one' | 'select-multiple' = 'select-one';\n\n  @Element() el: HTMLPdsSelectElement;\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   * Indicates whether or not the select field is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Visually hides the label text for instances where only the select 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   * Displays helper message text below select.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines whether or not the select is invalid.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the select label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Indicates whether multiple options can be selected.\n   * @defaultValue false\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Indicates whether or not the select field is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Applies highlight styling to the select field.\n   */\n  @Prop({ reflect: true }) highlight?: boolean;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n  @Watch('value')\n  /**\n   * Handles the change in the value of the select component.\n   * This method is called whenever the value of the select component changes.\n   * It updates the selected option accordingly.\n   */\n  valueChanged() {\n    this.updateSelectedOption();\n    this.updateFormValue();\n  }\n\n  @Watch('multiple')\n  /**\n   * Updates the type property when multiple changes to match native select behavior.\n   */\n  multipleChanged() {\n    this.updateType();\n  }\n\n  private updateType() {\n    this._type = this.multiple ? 'select-multiple' : 'select-one';\n  }\n\n  connectedCallback() {\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n\n    // Expose type property on the element instance to match native form element behavior\n    exposeTypeProperty(this.el, () => this._type);\n  }\n\n  componentWillLoad() {\n    // Set initial type based on multiple prop\n    this.updateType();\n    this.updateSelectedOption();\n  }\n\n  componentDidLoad() {\n    // Set initial form value\n    this.updateFormValue();\n  }\n\n  /**\n   * Updates the selected option in the select element based on the current value.\n   *\n   * This method iterates through all the options of the select element and sets the\n   * 'selected' attribute on the option that matches the current value. If an option\n   * does not match the current value, the 'selected' attribute is removed.\n   *\n   * @private\n   * @returns {void}\n   */\n  private updateSelectedOption() {\n    if (this.selectEl) {\n      const options = this.selectEl.options;\n\n      // Update the selected attribute for all options.\n      Array.from(options).map((option: HTMLOptionElement) => {\n        if (Array.isArray(this.value)) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n    };\n  }\n\n  /**\n   * Emits an event on input change.\n  */\n  private onSelectUpdate = (e: Event) => {\n    const target = e.target as HTMLSelectElement\n\n    const values = Array.from(target.options)\n        .filter((option) => ( option.selected))\n        .map((option) => ( option.value));\n\n    if (values.length === 1 && !this.multiple) {\n        this.value = values[0];\n    } else {\n        this.value = values;\n    }\n\n    this.pdsSelectChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Handles the change event for the slot element.\n   * This method is triggered when the slot content changes.\n   * It updates the inner HTML of the select element by cloning and appending\n   * the assigned <option> elements from the slot.\n   */\n  private handleSlotChange = () => {\n    const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n    this.selectEl.innerHTML = '';\n    const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement | HTMLOptGroupElement)[];\n\n    assignedElements.forEach((item) => {\n      if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n        const clonedItem = item.cloneNode(true) as HTMLOptionElement | HTMLOptGroupElement;\n        if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n          (clonedItem as HTMLOptionElement).selected = true;\n        }\n        this.selectEl.appendChild(clonedItem);\n      }\n    });\n\n    this.updateSelectedOption();\n  };\n\n  private getHelperMessage() {\n    return this.helperMessage && (\n      <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n        {this.helperMessage}\n      </p>\n    );\n  }\n\n  private getErrorMessage() {\n    return this.errorMessage && (\n      <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n        <pds-icon icon={danger} size=\"small\"></pds-icon>\n        {this.errorMessage}\n      </p>\n    );\n  }\n\n  private renderMessages() {\n    if (!this.helperMessage && !this.errorMessage) return null;\n\n    return (\n      <div class=\"pds-select__message\">\n        {this.getHelperMessage()}\n        {this.getErrorMessage()}\n      </div>\n    );\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-select__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.value;\n\n      // Handle multi-select arrays by converting to FormData or comma-separated string\n      if (Array.isArray(value)) {\n        if (value.length > 1) {\n          // For multiple values, create FormData with multiple entries\n          const formData = new FormData();\n          value.forEach(val => formData.append(this.name || '', val));\n          this.internals.setFormValue(formData);\n        } else {\n          // Single value in array, use the string value\n          this.internals.setFormValue(value[0] || null);\n        }\n      } else {\n        // Single string value\n        this.internals.setFormValue(value || null);\n      }\n\n      // Set validity based on native select validation\n      if (this.selectEl && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.selectEl.validity,\n          this.selectEl.validationMessage,\n          this.selectEl\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(s) from FormData using the select's name\n      const values = state.getAll(this.name);\n      if (values.length > 1) {\n        // Multi-select: convert to string array\n        this.value = values.filter(v => typeof v === 'string') as string[];\n      } else if (values.length === 1 && typeof values[0] === 'string') {\n        // Single select: use string value\n        this.value = values[0];\n      }\n    }\n  }\n\n  render() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()} has-action={hasAction && !this.hideLabel ? 'true' : null}>\n        <div class=\"pds-select\">\n          {!this.hideLabel && (\n            <div class=\"pds-select__label-wrapper\">\n              <label htmlFor={this.componentId}>\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {this.label}\n                </span>\n              </label>\n              {hasAction && this.renderAction()}\n            </div>\n          )}\n          <select\n            aria-label={this.hideLabel ? this.label : undefined}\n            autocomplete={this.autocomplete || undefined}\n            class=\"pds-select__field\"\n            disabled={this.disabled}\n            id={this.componentId}\n            multiple={this.multiple}\n            name={this.name}\n            onChange={this.onSelectUpdate}\n            part=\"select\"\n            required={this.required}\n            ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n          ></select>\n          <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n          {this.renderMessages()}\n          {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pds-select.entry.esm.js","sources":["src/components/pds-select/pds-select.tokens.scss?tag=pds-select&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-select/pds-select.tokens'\n",":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",":host {\n  --pds-select-background: var(--pine-color-background-container);\n  --pds-select-border: var(--pine-border);\n  --pds-select-border-radius: var(--pine-dimension-125);\n  --pds-select-border-radius-start-end: var(--pine-dimension-125);\n  --pds-select-border-radius-start-start: var(--pine-dimension-125);\n  --pds-select-border-radius-end-end: var(--pine-dimension-125);\n  --pds-select-border-radius-end-start: var(--pine-dimension-125);\n  --pds-select-min-height: 36px;\n  --box-shadow-focus: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-error: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n  .hidden,\n  :host([hidden]) {\n    display: none;\n  }\n}\n\n.pds-select {\n  color: var(--pine-color-text);\n  display: grid;\n  flex-direction: column;\n  grid-template-areas:\n    'label label'\n    'field field'\n    'message message';\n  grid-template-columns: 1fr minmax(2rem, min-content);\n  grid-template-rows: min-content min-content min-content;\n  position: relative;\n  width: 100%;\n}\n\n.pds-select__label-wrapper {\n  align-items: center;\n  display: flex;\n  grid-area: label;\n  justify-content: space-between;\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-select__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  margin-block-end: var(--pine-dimension-2xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-select__label-wrapper label {\n  margin-block-end: 0;\n}\n\nselect {\n  appearance: none;\n  background-color: var(--pds-select-background);\n  border: var(--pds-select-border);\n  border-radius: var(--pds-select-border-radius);\n  border-bottom-left-radius: var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));\n  border-bottom-right-radius: var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));\n  border-top-left-radius: var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));\n  border-top-right-radius: var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));\n  color: var(--pine-color-text);\n  font: var(--pine-typography-body);\n  grid-area: field;\n  letter-spacing: var(--pine-letter-spacing);\n  min-height: var(--pds-select-min-height);\n  padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);\n  padding-inline-end: var(--pine-dimension-450);\n  position: relative;\n\n  &:hover {\n    border-color: var(--pine-color-border-hover);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    border-color: var(--pine-color-border-active);\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n\n  &:has(~ .pds-select__message .pds-select__error-message) {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    :host-context([data-theme=\"dark\"]) & {\n      background-color: var(--pine-color-red-950);\n    }\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n:host(.is-invalid) {\n  select {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    :host-context([data-theme=\"dark\"]) & {\n      background-color: var(--pine-color-red-950);\n    }\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n:host([highlight]:not(.is-disabled):not(.is-invalid)) {\n  select {\n    background-color: var(--pine-color-accent-disabled);\n    border-color: var(--pine-color-accent);\n    color: var(--pine-color-text-accent);\n\n    &:hover:not(:disabled) {\n      border-color: var(--pine-color-accent-hover);\n    }\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring);\n    }\n  }\n\n  .pds-select__select-icon {\n    color: var(--pine-color-text-accent);\n  }\n}\n\n.pds-select__error-message,\n.pds-select__helper-message {\n  color: var(--pine-color-text-message);\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-end: 0;\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-select__error-message {\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n\n  pds-icon {\n    margin-block-start: var(--pine-dimension-025);\n  }\n}\n\n.pds-select__message {\n  grid-area: message;\n}\n\n.pds-select__select-icon {\n  align-items: center;\n  display: flex;\n  grid-column: -1 / -2;\n  grid-row: 2 / 3;\n  height: var(--pds-select-min-height);\n  pointer-events: none;\n  position: relative;\n  z-index: var(--pine-z-index-raised);\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\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger, enlarge } 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-select',\n  styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsSelect {\n\n  private selectEl!: HTMLSelectElement;\n  private slotContainer!: HTMLDivElement;\n  private internals?: ElementInternals;\n  private _type: 'select-one' | 'select-multiple' = 'select-one';\n\n  @Element() el: HTMLPdsSelectElement;\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   * Indicates whether or not the select field is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Visually hides the label text for instances where only the select 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   * Displays helper message text below select.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines whether or not the select is invalid.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the select label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Indicates whether multiple options can be selected.\n   * @defaultValue false\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Indicates whether or not the select field is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Applies highlight styling to the select field.\n   */\n  @Prop({ reflect: true }) highlight?: boolean;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n\n  /**\n   * Emitted when the select value changes.\n   */\n  @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the select gains focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a key is pressed down in the select.\n   */\n  @Event() pdsKeyDown!: EventEmitter<KeyboardEvent>;\n\n  @Watch('value')\n  /**\n   * Handles the change in the value of the select component.\n   * This method is called whenever the value of the select component changes.\n   * It updates the selected option accordingly.\n   */\n  valueChanged() {\n    this.updateSelectedOption();\n    this.updateFormValue();\n  }\n\n  @Watch('multiple')\n  /**\n   * Updates the type property when multiple changes to match native select behavior.\n   */\n  multipleChanged() {\n    this.updateType();\n  }\n\n  private updateType() {\n    this._type = this.multiple ? 'select-multiple' : 'select-one';\n  }\n\n  connectedCallback() {\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n\n    // Expose type property on the element instance to match native form element behavior\n    exposeTypeProperty(this.el, () => this._type);\n  }\n\n  componentWillLoad() {\n    // Set initial type based on multiple prop\n    this.updateType();\n    this.updateSelectedOption();\n  }\n\n  componentDidLoad() {\n    // Set initial form value\n    this.updateFormValue();\n  }\n\n  /**\n   * Updates the selected option in the select element based on the current value.\n   *\n   * This method iterates through all the options of the select element and sets the\n   * 'selected' attribute on the option that matches the current value. If an option\n   * does not match the current value, the 'selected' attribute is removed.\n   *\n   * @private\n   * @returns {void}\n   */\n  private updateSelectedOption() {\n    if (this.selectEl) {\n      const options = this.selectEl.options;\n\n      // Update the selected attribute for all options.\n      Array.from(options).map((option: HTMLOptionElement) => {\n        if (Array.isArray(this.value)) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n    };\n  }\n\n  /**\n   * Emits an event on input change.\n  */\n  private onSelectUpdate = (e: Event) => {\n    const target = e.target as HTMLSelectElement\n\n    const values = Array.from(target.options)\n        .filter((option) => ( option.selected))\n        .map((option) => ( option.value));\n\n    if (values.length === 1 && !this.multiple) {\n        this.value = values[0];\n    } else {\n        this.value = values;\n    }\n\n    this.pdsSelectChange.emit(e as InputEvent);\n  };\n\n  private onBlur = (ev: FocusEvent) => {\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.pdsFocus.emit(ev);\n  };\n\n  private onKeyDown = (ev: KeyboardEvent) => {\n    this.pdsKeyDown.emit(ev);\n  };\n\n  /**\n   * Handles the change event for the slot element.\n   * This method is triggered when the slot content changes.\n   * It updates the inner HTML of the select element by cloning and appending\n   * the assigned <option> elements from the slot.\n   */\n  private handleSlotChange = () => {\n    const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n    this.selectEl.innerHTML = '';\n    const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement | HTMLOptGroupElement)[];\n\n    assignedElements.forEach((item) => {\n      if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n        const clonedItem = item.cloneNode(true) as HTMLOptionElement | HTMLOptGroupElement;\n        if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n          (clonedItem as HTMLOptionElement).selected = true;\n        }\n        this.selectEl.appendChild(clonedItem);\n      }\n    });\n\n    this.updateSelectedOption();\n  };\n\n  private getHelperMessage() {\n    return this.helperMessage && (\n      <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n        {this.helperMessage}\n      </p>\n    );\n  }\n\n  private getErrorMessage() {\n    return this.errorMessage && (\n      <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n        <pds-icon icon={danger} size=\"small\"></pds-icon>\n        {this.errorMessage}\n      </p>\n    );\n  }\n\n  private renderMessages() {\n    if (!this.helperMessage && !this.errorMessage) return null;\n\n    return (\n      <div class=\"pds-select__message\">\n        {this.getHelperMessage()}\n        {this.getErrorMessage()}\n      </div>\n    );\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-select__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.value;\n\n      // Handle multi-select arrays by converting to FormData or comma-separated string\n      if (Array.isArray(value)) {\n        if (value.length > 1) {\n          // For multiple values, create FormData with multiple entries\n          const formData = new FormData();\n          value.forEach(val => formData.append(this.name || '', val));\n          this.internals.setFormValue(formData);\n        } else {\n          // Single value in array, use the string value\n          this.internals.setFormValue(value[0] || null);\n        }\n      } else {\n        // Single string value\n        this.internals.setFormValue(value || null);\n      }\n\n      // Set validity based on native select validation\n      if (this.selectEl && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.selectEl.validity,\n          this.selectEl.validationMessage,\n          this.selectEl\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(s) from FormData using the select's name\n      const values = state.getAll(this.name);\n      if (values.length > 1) {\n        // Multi-select: convert to string array\n        this.value = values.filter(v => typeof v === 'string') as string[];\n      } else if (values.length === 1 && typeof values[0] === 'string') {\n        // Single select: use string value\n        this.value = values[0];\n      }\n    }\n  }\n\n  render() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()} has-action={hasAction && !this.hideLabel ? 'true' : null}>\n        <div class=\"pds-select\">\n          {!this.hideLabel && (\n            <div class=\"pds-select__label-wrapper\">\n              <label htmlFor={this.componentId}>\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {this.label}\n                </span>\n              </label>\n              {hasAction && this.renderAction()}\n            </div>\n          )}\n          <select\n            aria-label={this.hideLabel ? this.label : undefined}\n            autocomplete={this.autocomplete || undefined}\n            class=\"pds-select__field\"\n            disabled={this.disabled}\n            id={this.componentId}\n            multiple={this.multiple}\n            name={this.name}\n            onBlur={this.onBlur}\n            onChange={this.onSelectUpdate}\n            onFocus={this.onFocus}\n            onKeyDown={this.onKeyDown}\n            part=\"select\"\n            required={this.required}\n            ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n          ></select>\n          <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n          {this.renderMessages()}\n          {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/pine-core/pds-tab.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-tab.entry.esm.js","sources":["src/components/pds-tabs/pds-tab/pds-tab.scss?tag=pds-tab","src/components/pds-tabs/pds-tab/pds-tab.tsx"],"sourcesContent":["pds-tab {\n  align-items: center;\n  display: inline-flex;\n  position: relative;\n\n  .pds-tabs--pill & {\n    flex: 1;\n  }\n}\n\n///\n/// Resets base button styles\n///\n@mixin pds-button-style-reset {\n  appearance: none;\n  background-color: transparent;\n  border: var(--pine-border-width-none);\n  box-shadow: none;\n  color: inherit;\n  cursor: pointer;\n  font-family: inherit;\n  padding: var(--pine-dimension-none);\n}\n\n.pds-tab {\n  @include pds-button-style-reset();\n\n  align-items: center;\n  color: var(--pine-color-text-secondary);\n  display: inline-flex;\n  position: relative;\n  text-decoration: none;\n  white-space: nowrap;\n\n  &.is-active,\n  &[aria-selected='true'] {\n    color: var(--pine-color-text);\n\n    .pds-tab__content::after {\n      opacity: 1;\n    }\n  }\n\n  &:hover:not(:disabled) {\n    color: var(--pine-color-text);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  &:disabled,\n  &.is-disabled {\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .pds-tab__content {\n    font-family: var(--pine-font-family-body);\n    font-size: var(--pine-font-size);\n    font-weight: var(--pine-font-weight-medium);\n    letter-spacing: var(--pine-letter-spacing);\n    line-height: var(--pine-line-height-body);\n    padding-block-end: 11px;\n    position: relative;\n\n    &::after {\n      background-color: var(--pine-color-brand);\n      content: '';\n      height: 3px;\n      inset-block-end: var(--pine-dimension-none);\n      inset-inline-end: var(--pine-dimension-none);\n      inset-inline-start: var(--pine-dimension-none);\n      opacity: 0;\n      position: absolute;\n    }\n  }\n\n  .pds-tab-edge {\n    display: none;\n  }\n}\n\n.pds-tabs--availability {\n  --color-background-tab: transparent;\n\n  .pds-tab {\n    background-color: var(--color-background-tab);\n    border-radius: calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);\n    color: var(--pine-color-text-secondary);\n    padding: 8px 16px 13px;\n\n    &.is-active,\n    &[aria-selected='true'] {\n      --color-background-tab: var(--pine-color-secondary);\n      color: var(--pine-color-text);\n\n      .pds-tab__content::after {\n        opacity: 1;\n      }\n\n      .pds-tab-edge {\n        z-index: var(--pine-z-index-raised);\n      }\n    }\n\n    &:hover:not(.is-active, [aria-selected='true'], :disabled) {\n      --color-background-tab: var(--pine-color-secondary-hover);\n      color: var(--pine-color-text);\n    }\n\n    &:focus-visible {\n      color: var(--pine-color-text-secondary);\n    }\n\n    &:disabled,\n    &.is-disabled {\n      --color-background-tab: transparent;\n      color: var(--pine-color-text-disabled);\n    }\n  }\n\n  .pds-tab__content {\n    padding-block-end: 7px;\n  }\n\n  .pds-tab-edge {\n    bottom: 0;\n    display: block;\n    height: 8px;\n    inset-inline-end: 100%;\n    overflow: hidden;\n    position: absolute;\n    width: 8px;\n\n    &::before {\n      border-radius: 50%;\n      bottom: 0;\n      box-shadow: 4px 4px 0 0 var(--color-background-tab);\n      content: '';\n      display: block;\n      height: 200%;\n      inset-inline-end: 0;\n      position: absolute;\n      width: 200%;\n    }\n  }\n\n  .pds-tab-edge--end {\n    inset-inline-end: unset;\n    inset-inline-start: 100%;\n\n    &::before {\n      box-shadow: -4px 4px 0 0 var(--color-background-tab);\n      inset-inline-end: unset;\n      inset-inline-start: 0;\n    }\n  }\n}\n\n.pds-tabs--filter {\n  .pds-tab {\n    background-color: var(--pine-color-background-muted);\n    border-radius: 50px;\n    color: var(--pine-color-text);\n    padding: 6px 15px;\n\n    &.is-active,\n    &[aria-selected='true'] {\n      background-color: var(--pine-color-primary);\n      color: var(--pine-color-text-primary);\n    }\n\n    &.is-active:hover:not(:disabled),\n    &[aria-selected='true']:hover:not(:disabled) {\n      background-color: var(--pine-color-primary-hover);\n    }\n\n    &:hover:not(.is-active, [aria-selected='true'], :disabled) {\n      background-color: var(--pine-color-border-disabled);\n    }\n\n    &:disabled,\n    &.is-disabled {\n      background-color: transparent;\n      color: var(--pine-color-text-disabled);\n\n      &.is-active,\n      &[aria-selected='true'] {\n        background-color: var(--pine-color-primary-disabled);\n      }\n    }\n  }\n\n  .pds-tab__content {\n    padding-block-end: var(--pine-dimension-none);\n\n    &::after {\n      content: unset;\n    }\n  }\n}\n\n.pds-tabs--pill {\n  --color-background-tab: transparent;\n\n  .pds-tab {\n    background-color: var(--color-background-tab);\n    border: var(--pine-border-width-thin) solid transparent;\n    border-radius: var(--pine-dimension-xs);\n    color: var(--pine-color-text-muted);\n    flex: 1;\n    height: 34px;\n    justify-content: center;\n\n    .pds-tab__content {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n      padding-block-end: 0;\n    }\n\n    &.is-active,\n    &[aria-selected='true'] {\n      --color-background-tab: var(--pine-color-background-container);\n      border-color: var(--pine-color-border);\n      box-shadow: var(--pine-box-shadow-100);\n      color: var(--pine-color-text-active);\n\n      &:focus-visible {\n        border-color: var(--color-border-focus);\n        outline: var(--pine-outline-focus);\n        outline-offset: var(--pine-border-width);\n      }\n\n      /* stylelint-disable max-nesting-depth */\n      .pds-tab__content {\n        &::after {\n          opacity: 0;\n        }\n      }\n      /* stylelint-enable max-nesting-depth */\n    }\n\n    &:disabled,\n    &.is-disabled {\n      color: var(--pine-color-text-disabled);\n    }\n  }\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-tab',\n  styleUrl: 'pds-tab.scss',\n  shadow: false,\n})\nexport class PdsTab {\n  @Element() el: HTMLPdsTabElement;\n\n  /**\n   * Determines the tab's disabled state.\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property\n   */\n  @Prop() name!: string;\n\n  /**\n   * Keeps track of the parentComponentId unique id, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() parentComponentId: string;\n\n  /**\n   * Keeps track of if the expected tab variant, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() variant: string;\n\n  /**\n   * Keeps track of if the tab index number, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() index: number;\n\n  /**\n   * Keeps track of the tabpanel selected state, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() selected = false;\n\n  /**\n   * Emits an event upon tab click for `pds-tab` and `pds-tabpanel` to listen for\n   */\n  /** @internal */\n  @Event() pdsTabClick: EventEmitter<object>;\n  private onTabClick(index, parentComponentId) {\n    if (this.disabled) return;\n    this.pdsTabClick.emit([index, parentComponentId]);\n  }\n\n  private classNames() {\n    const classes = [\n      'pds-tab',\n      this.selected && 'is-active',\n      this.disabled && 'is-disabled',\n    ];\n    return classes.filter(Boolean).join(' ');\n  }\n\n  render() {\n    const availabilityTabEdgeInlineStart = (\n      <span class=\"pds-tab-edge\" role=\"presentation\"></span>\n    )\n\n    const availabilityTabEdgeInlineEnd = (\n      <span class=\"pds-tab-edge pds-tab-edge--end\" role=\"presentation\"></span>\n    )\n\n    return (\n      <Host variant={this.variant} slot=\"tabs\" index={this.index}>\n        <button\n          role=\"tab\"\n          id={this.parentComponentId + \"__\" + this.name}\n          aria-controls={this.parentComponentId + \"__\" + this.name + \"-panel\"}\n          tabindex={this.disabled ? \"-1\" : (this.selected ? \"0\" : \"-1\")}\n          aria-selected={this.selected ? \"true\" : \"false\"}\n          aria-disabled={this.disabled ? \"true\" : null}\n          disabled={this.disabled}\n          class={this.classNames()}\n          onClick={this.onTabClick.bind(this, this.index, this.parentComponentId)}\n        >\n          {this.variant === \"availability\" && availabilityTabEdgeInlineStart}\n          {this.variant === \"availability\" && availabilityTabEdgeInlineEnd}\n          <div class=\"pds-tab__content\"><slot/></div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,qlMAAqlM;;MCO1lM,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQE;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAI,KAAK;AAyBzB;;AAEG;;AAEK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAkDzB;IA3CS,UAAU,CAAC,KAAK,EAAE,iBAAiB,EAAA;QACzC,IAAI,IAAI,CAAC,QAAQ;YAAE;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;;IAG3C,UAAU,GAAA;AAChB,QAAA,MAAM,OAAO,GAAG;YACd,SAAS;YACT,IAAI,CAAC,QAAQ,IAAI,WAAW;YAC5B,IAAI,CAAC,QAAQ,IAAI,aAAa;SAC/B;QACD,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG1C,MAAM,GAAA;QACJ,MAAM,8BAA8B,IAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,cAAc,EAAA,CAAQ,CACvD;QAED,MAAM,4BAA4B,IAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,cAAc,EAAA,CAAQ,CACzE;QAED,QACE,CAAC,CAAA,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EACxD,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAC9B,eAAA,EAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,EACnE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,EAAA,eAAA,EAC9C,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,EAAA,EAEtE,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,8BAA8B,EACjE,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,4BAA4B,EAChE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAO,CAAM,CACpC,CACJ;;;;;;;;"}
+{"version":3,"file":"pds-tab.entry.esm.js","sources":["src/components/pds-tabs/pds-tab/pds-tab.scss?tag=pds-tab","src/components/pds-tabs/pds-tab/pds-tab.tsx"],"sourcesContent":["pds-tab {\n  align-items: center;\n  display: inline-flex;\n  position: relative;\n\n  .pds-tabs--pill & {\n    flex: 1;\n  }\n}\n\n///\n/// Resets base button styles\n///\n@mixin pds-button-style-reset {\n  appearance: none;\n  background-color: transparent;\n  border: var(--pine-border-width-none);\n  box-shadow: none;\n  color: inherit;\n  cursor: pointer;\n  font-family: inherit;\n  padding: var(--pine-dimension-none);\n}\n\n.pds-tab {\n  @include pds-button-style-reset();\n\n  align-items: center;\n  color: var(--pine-color-text-secondary);\n  display: inline-flex;\n  position: relative;\n  text-decoration: none;\n  white-space: nowrap;\n\n  &.is-active,\n  &[aria-selected='true'] {\n    color: var(--pine-color-text);\n\n    .pds-tab__content::after {\n      opacity: 1;\n    }\n  }\n\n  &:hover:not(:disabled) {\n    color: var(--pine-color-text);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  &:disabled,\n  &.is-disabled {\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .pds-tab__content {\n    font-family: var(--pine-font-family-body);\n    font-size: var(--pine-font-size);\n    font-weight: var(--pine-font-weight-medium);\n    letter-spacing: var(--pine-letter-spacing);\n    line-height: var(--pine-line-height-body);\n    padding-block-end: 11px;\n    position: relative;\n\n    &::after {\n      background-color: var(--pine-color-brand);\n      content: '';\n      height: 3px;\n      inset-block-end: var(--pine-dimension-none);\n      inset-inline-end: var(--pine-dimension-none);\n      inset-inline-start: var(--pine-dimension-none);\n      opacity: 0;\n      position: absolute;\n    }\n  }\n\n  .pds-tab-edge {\n    display: none;\n  }\n}\n\n.pds-tabs--availability {\n  --color-background-tab: transparent;\n\n  .pds-tab {\n    background-color: var(--color-background-tab);\n    border-radius: calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);\n    color: var(--pine-color-text-secondary);\n    padding: 8px 16px 13px;\n\n    &.is-active,\n    &[aria-selected='true'] {\n      --color-background-tab: var(--pine-color-secondary);\n      color: var(--pine-color-text);\n\n      .pds-tab__content::after {\n        opacity: 1;\n      }\n\n      .pds-tab-edge {\n        z-index: var(--pine-z-index-raised);\n      }\n    }\n\n    &:hover:not(.is-active, [aria-selected='true'], :disabled) {\n      --color-background-tab: var(--pine-color-secondary-hover);\n      color: var(--pine-color-text);\n    }\n\n    &:focus-visible {\n      color: var(--pine-color-text-secondary);\n    }\n\n    &:disabled,\n    &.is-disabled {\n      --color-background-tab: transparent;\n      color: var(--pine-color-text-disabled);\n    }\n  }\n\n  .pds-tab__content {\n    padding-block-end: 7px;\n  }\n\n  .pds-tab-edge {\n    bottom: 0;\n    display: block;\n    height: 8px;\n    inset-inline-end: 100%;\n    overflow: hidden;\n    position: absolute;\n    width: 8px;\n\n    &::before {\n      border-radius: 50%;\n      bottom: 0;\n      box-shadow: 4px 4px 0 0 var(--color-background-tab);\n      content: '';\n      display: block;\n      height: 200%;\n      inset-inline-end: 0;\n      position: absolute;\n      width: 200%;\n    }\n  }\n\n  .pds-tab-edge--end {\n    inset-inline-end: unset;\n    inset-inline-start: 100%;\n\n    &::before {\n      box-shadow: -4px 4px 0 0 var(--color-background-tab);\n      inset-inline-end: unset;\n      inset-inline-start: 0;\n    }\n  }\n}\n\n.pds-tabs--filter {\n  .pds-tab {\n    background-color: var(--pine-color-background-muted);\n    border-radius: 50px;\n    color: var(--pine-color-text);\n    padding: 6px 15px;\n\n    &.is-active,\n    &[aria-selected='true'] {\n      background-color: var(--pine-color-primary);\n      color: var(--pine-color-text-primary);\n    }\n\n    &.is-active:hover:not(:disabled),\n    &[aria-selected='true']:hover:not(:disabled) {\n      background-color: var(--pine-color-primary-hover);\n    }\n\n    &:hover:not(.is-active, [aria-selected='true'], :disabled) {\n      background-color: var(--pine-color-border-disabled);\n    }\n\n    &:disabled,\n    &.is-disabled {\n      background-color: transparent;\n      color: var(--pine-color-text-disabled);\n\n      &.is-active,\n      &[aria-selected='true'] {\n        background-color: var(--pine-color-primary-disabled);\n      }\n    }\n  }\n\n  .pds-tab__content {\n    padding-block-end: var(--pine-dimension-none);\n\n    &::after {\n      content: unset;\n    }\n  }\n}\n\n.pds-tabs--pill {\n  --color-background-tab: transparent;\n\n  .pds-tab {\n    background-color: var(--color-background-tab);\n    border: var(--pine-border-width-thin) solid transparent;\n    border-radius: var(--pine-dimension-xs);\n    color: var(--pine-color-text-muted);\n    flex: 1;\n    height: 34px;\n    justify-content: center;\n\n    .pds-tab__content {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n      padding-block-end: 0;\n    }\n\n    &.is-active,\n    &[aria-selected='true'] {\n      --color-background-tab: var(--pine-color-background-container);\n      border-color: var(--pine-color-border);\n      box-shadow: var(--pine-box-shadow-100);\n      color: var(--pine-color-text-active);\n\n      &:focus-visible {\n        border-color: var(--color-border-focus);\n        outline: var(--pine-outline-focus);\n        outline-offset: var(--pine-border-width);\n      }\n\n      /* stylelint-disable max-nesting-depth */\n      .pds-tab__content {\n        &::after {\n          opacity: 0;\n        }\n      }\n      /* stylelint-enable max-nesting-depth */\n    }\n\n    &:disabled,\n    &.is-disabled {\n      color: var(--pine-color-text-disabled);\n    }\n  }\n}\n","import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-tab',\n  styleUrl: 'pds-tab.scss',\n  shadow: false,\n})\nexport class PdsTab {\n  @Element() el: HTMLPdsTabElement;\n\n  /**\n   * Determines the tab's disabled state.\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property\n   */\n  @Prop() name!: string;\n\n  /**\n   * Keeps track of the parentComponentId unique id, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() parentComponentId: string;\n\n  /**\n   * Keeps track of if the expected tab variant, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() variant: string;\n\n  /**\n   * Keeps track of if the tab index number, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() index: number;\n\n  /**\n   * Keeps track of the tabpanel selected state, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() selected = false;\n\n  /**\n   * Emits an event upon tab click for `pds-tab` and `pds-tabpanel` to listen for\n   */\n  /** @internal */\n  @Event() pdsTabClick: EventEmitter<object>;\n  private onTabClick(index, parentComponentId) {\n    if (this.disabled) return;\n    this.pdsTabClick.emit([index, parentComponentId]);\n  }\n\n  private classNames() {\n    const classes = [\n      'pds-tab',\n      this.selected && 'is-active',\n      this.disabled && 'is-disabled',\n    ];\n    return classes.filter(Boolean).join(' ');\n  }\n\n  render() {\n    const availabilityTabEdgeInlineStart = (\n      <span class=\"pds-tab-edge\" role=\"presentation\"></span>\n    )\n\n    const availabilityTabEdgeInlineEnd = (\n      <span class=\"pds-tab-edge pds-tab-edge--end\" role=\"presentation\"></span>\n    )\n\n    return (\n      <Host variant={this.variant} slot=\"tabs\" index={this.index}>\n        <button\n          role=\"tab\"\n          id={this.parentComponentId + \"__\" + this.name}\n          aria-controls={this.parentComponentId + \"__\" + this.name + \"-panel\"}\n          tabindex={this.disabled ? \"-1\" : (this.selected ? \"0\" : \"-1\")}\n          aria-selected={this.selected ? \"true\" : \"false\"}\n          aria-disabled={this.disabled ? \"true\" : null}\n          disabled={this.disabled}\n          class={this.classNames()}\n          onClick={this.onTabClick.bind(this, this.index, this.parentComponentId)}\n        >\n          {this.variant === \"availability\" && availabilityTabEdgeInlineStart}\n          {this.variant === \"availability\" && availabilityTabEdgeInlineEnd}\n          <div class=\"pds-tab__content\"><slot/></div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,svMAAsvM;;MCO3vM,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQE;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAI,KAAK;AAyBzB;;AAEG;;AAEK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAkDzB;IA3CS,UAAU,CAAC,KAAK,EAAE,iBAAiB,EAAA;QACzC,IAAI,IAAI,CAAC,QAAQ;YAAE;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;;IAG3C,UAAU,GAAA;AAChB,QAAA,MAAM,OAAO,GAAG;YACd,SAAS;YACT,IAAI,CAAC,QAAQ,IAAI,WAAW;YAC5B,IAAI,CAAC,QAAQ,IAAI,aAAa;SAC/B;QACD,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG1C,MAAM,GAAA;QACJ,MAAM,8BAA8B,IAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,cAAc,EAAA,CAAQ,CACvD;QAED,MAAM,4BAA4B,IAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,cAAc,EAAA,CAAQ,CACzE;QAED,QACE,CAAC,CAAA,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EACxD,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAC9B,eAAA,EAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,EACnE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,EAAA,eAAA,EAC9C,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,EAAA,EAEtE,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,8BAA8B,EACjE,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,4BAA4B,EAChE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAO,CAAM,CACpC,CACJ;;;;;;;;"}

package/dist/pine-core/pds-table-cell.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-table-cell.entry.esm.js","sources":["src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n  --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n  color: var(--pine-color-text);\n  display: table-cell;\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size);\n  font-weight: var(--pine-font-weight-regular);\n  inset-inline-start: var(--pine-dimension-none);\n  letter-spacing: var(--pine-letter-spacing);\n  line-height: var(--pine-line-height-body);\n  padding: var(--pine-dimension-sm);\n  vertical-align: inherit;\n}\n\n:host(.is-compact) {\n  padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n  background: var(--pine-color-background-container);\n  left: 0;\n  position: sticky;\n  z-index: var(--pine-z-index-raised);\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n  box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n  max-width: 100px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n  vertical-align: middle;\n  width: 16px;\n}\n\n// Text Alignment\n:host(.pds-table-cell--align-start) {\n  text-align: start;\n}\n\n:host(.pds-table-cell--align-center) {\n  text-align: center;\n}\n\n:host(.pds-table-cell--align-end) {\n  text-align: end;\n}\n\n:host(.pds-table-cell--align-justify) {\n  text-align: justify;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-cell',\n  styleUrls: ['pds-table-cell.scss'],\n  shadow: true,\n})\nexport class PdsTableCell {\n  @Element() hostElement: HTMLPdsTableCellElement;\n  private tableRef: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private setupTimer: number | undefined;\n  private setupRetries: number = 0;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      // For responsive tables with fixed columns, set up scroll detection\n      // This enables the first column to show a shadow when the table is scrolled horizontally\n      this.setupScrollListener();\n    }\n  }\n\n  disconnectedCallback() {\n    this.cleanupScrollListener();\n  }\n\n  private setupScrollListener() {\n    if (!this.tableRef) return;\n\n    // Query shadowRoot once and cache the container\n    const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n    if (container) {\n      // Container available immediately\n      this.scrollContainer = container;\n      this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n      this.handleScroll(); // Initial check\n      this.setupRetries = 0; // Reset counter on success\n    } else {\n      // Container not ready, set up timer for retry with bounds\n      this.setupTimer = window.setTimeout(() => {\n        if (this.scrollContainer) return; // Already found\n        this.setupRetries = (this.setupRetries || 0) + 1;\n        if (this.setupRetries <= 50) {\n          this.setupScrollListener();\n        } else {\n          console.warn('Failed to find responsive container after 50 attempts');\n        }\n      }, 100);\n    }\n  }\n\n  private cleanupScrollListener() {\n    if (this.scrollContainer) {\n      this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n      this.scrollContainer = null;\n    }\n\n    if (this.setupTimer !== undefined) {\n      window.clearTimeout(this.setupTimer);\n      this.setupTimer = undefined;\n    }\n\n    this.setupRetries = 0; // Reset retry counter\n  }\n\n  /**\n   * Sets the text alignment within the cell.\n   */\n  @Prop() cellAlign?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Truncates content to a max width of 100px and adds an ellipsis.\n   */\n  @Prop() truncate: boolean;\n\n  /**\n   * Determines if the table is currently scrolling.\n   * @defaultValue false\n   */\n  @State() private tableScrolling: boolean = false;\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.cellAlign) {\n      classNames.push(`pds-table-cell--align-${this.cellAlign}`);\n    }\n\n    if (this.truncate) {\n      classNames.push('is-truncated');\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join(' ');\n  }\n\n  /**\n   * Handles scroll events to update fixed column shadow state.\n   * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n   * @private\n   */\n  private handleScroll = () => {\n    if (!this.scrollContainer) {\n      return;\n    }\n\n    try {\n      this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n    } catch (error) {\n      console.warn('Scroll handler error:', error);\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"gridcell\"\n        part=\"cell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n          }\n        >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pds-table-cell.entry.esm.js","sources":["src/components/pds-table/pds-table-cell/pds-table-cell.scss?tag=pds-table-cell&encapsulation=shadow","src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"sourcesContent":[":host {\n  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n  --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);\n\n  color: var(--pine-color-text);\n  display: table-cell;\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size);\n  font-weight: var(--pine-font-weight-regular);\n  inset-inline-start: var(--pine-dimension-none);\n  letter-spacing: var(--pine-letter-spacing);\n  line-height: var(--pine-line-height-body);\n  padding: var(--pine-dimension-sm);\n  vertical-align: inherit;\n}\n\n:host(.is-compact) {\n  padding-block: var(--pine-dimension-2xs)\n}\n\n:host(.is-fixed) {\n  background: var(--pine-color-background-container);\n  left: 0;\n  position: sticky;\n  z-index: var(--pine-z-index-raised);\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n  box-shadow: var(--box-shadow-fixed);\n}\n\n:host(.is-truncated) {\n  max-width: 100px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(.has-checkbox) {\n  vertical-align: middle;\n  width: 16px;\n}\n\n// Text Alignment\n:host(.pds-table-cell--align-start) {\n  text-align: start;\n}\n\n:host(.pds-table-cell--align-center) {\n  text-align: center;\n}\n\n:host(.pds-table-cell--align-end) {\n  text-align: end;\n}\n\n:host(.pds-table-cell--align-justify) {\n  text-align: justify;\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-cell',\n  styleUrls: ['pds-table-cell.scss'],\n  shadow: true,\n})\nexport class PdsTableCell {\n  @Element() hostElement: HTMLPdsTableCellElement;\n  private tableRef: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private setupTimer: number | undefined;\n  private setupRetries: number = 0;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      // For responsive tables with fixed columns, set up scroll detection\n      // This enables the first column to show a shadow when the table is scrolled horizontally\n      this.setupScrollListener();\n    }\n  }\n\n  disconnectedCallback() {\n    this.cleanupScrollListener();\n  }\n\n  private setupScrollListener() {\n    if (!this.tableRef) return;\n\n    // Query shadowRoot once and cache the container\n    const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n    if (container) {\n      // Container available immediately\n      this.scrollContainer = container;\n      this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n      this.handleScroll(); // Initial check\n      this.setupRetries = 0; // Reset counter on success\n    } else {\n      // Container not ready, set up timer for retry with bounds\n      this.setupTimer = window.setTimeout(() => {\n        if (this.scrollContainer) return; // Already found\n        this.setupRetries = (this.setupRetries || 0) + 1;\n        if (this.setupRetries <= 50) {\n          this.setupScrollListener();\n        } else {\n          console.warn('Failed to find responsive container after 50 attempts');\n        }\n      }, 100);\n    }\n  }\n\n  private cleanupScrollListener() {\n    if (this.scrollContainer) {\n      this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n      this.scrollContainer = null;\n    }\n\n    if (this.setupTimer !== undefined) {\n      window.clearTimeout(this.setupTimer);\n      this.setupTimer = undefined;\n    }\n\n    this.setupRetries = 0; // Reset retry counter\n  }\n\n  /**\n   * Sets the text alignment within the cell.\n   */\n  @Prop() cellAlign?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Truncates content to a max width of 100px and adds an ellipsis.\n   */\n  @Prop() truncate: boolean;\n\n  /**\n   * Determines if the table is currently scrolling.\n   * @defaultValue false\n   */\n  @State() private tableScrolling: boolean = false;\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.cellAlign) {\n      classNames.push(`pds-table-cell--align-${this.cellAlign}`);\n    }\n\n    if (this.truncate) {\n      classNames.push('is-truncated');\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join(' ');\n  }\n\n  /**\n   * Handles scroll events to update fixed column shadow state.\n   * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n   * @private\n   */\n  private handleScroll = () => {\n    if (!this.scrollContainer) {\n      return;\n    }\n\n    try {\n      this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n    } catch (error) {\n      console.warn('Scroll handler error:', error);\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"gridcell\"\n        part=\"cell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n          }\n        >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}