@pine-ds/core 3.3.0 → 3.4.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-combobox.js","sourceRoot":"","sources":["../../../src/components/pds-combobox/pds-combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch, Method } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\nimport { computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport DOMPurify from 'dompurify';\n\n/**\n * @slot option - Option elements for the combobox dropdown\n * @slot trigger-content - Custom content for the button trigger when customTriggerContent is true\n */\n@Component({\n  tag: 'pds-combobox',\n  styleUrl: 'pds-combobox.scss',\n  shadow: true,\n})\nexport class PdsCombobox implements BasePdsProps {\n  /** Reference to the host element */\n  @Element() el!: HTMLPdsComboboxElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Enable custom layout content for options. Options with data-layout attribute will render their HTML content.\n   * ⚠️ Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content.\n   * @default false\n   */\n  @Prop() customOptionLayouts: boolean = false;\n\n  /**\n   * Enable custom layout content for the button trigger via the trigger-content slot.\n   * When true, uses slot content for initial state but updates dynamically with selected option layout.\n   * ⚠️ Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content.\n   * @default false\n   */\n  @Prop() customTriggerContent: boolean = false;\n\n  /**\n   * If true, the combobox is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Placement of the dropdown relative to the trigger.\n   * @default 'bottom-start'\n   */\n  @Prop() dropdownPlacement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' = 'bottom-start';\n\n  /**\n   * Width of the dropdown. Any valid CSS width value.\n   * @default '236px'\n   */\n  @Prop() dropdownWidth: string = '236px';\n\n  /**\n   * Visually hides the label text for instances where only the combobox should be displayed.\n   * Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * Text to be displayed as the combobox label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Maximum height of the dropdown. Can be any valid CSS height value (e.g., '200px', '10rem').\n   * When content exceeds this height, the dropdown will scroll.\n   */\n  @Prop() maxHeight?: string;\n\n  /**\n   * Determines the combobox mode: 'filter' (filter options as you type) or 'select-only' (show all options).\n   * @default 'filter'\n   */\n  @Prop() mode: 'filter' | 'select-only' = 'filter';\n\n  /**\n   * Placeholder text for the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines the combobox trigger: 'input' (editable input) or 'button' (button-like, non-editable).\n   * @default 'input'\n   */\n  @Prop() trigger: 'input' | 'button' = 'input';\n\n  /**\n   * Width of the trigger (button or input). Any valid CSS width value.\n   * @default 'fit-content'\n   */\n  @Prop() triggerWidth: string = 'fit-content';\n\n  /**\n   * The visual variant for the button trigger. Matches Pine button variants.\n   * @default 'secondary'\n   */\n  @Prop() triggerVariant: 'secondary' | 'primary' | 'accent' | 'destructive' = 'secondary';\n\n  /**\n   * The value of the combobox input.\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Emitted when the value changes.\n   */\n  @Event() pdsComboboxChange!: EventEmitter<{ value: string }>;\n\n  /**\n   * Internal state for filtered options\n   */\n  @State() filteredOptions: HTMLOptionElement[] = [];\n\n  /**\n   * Internal state for the currently highlighted option index\n   */\n  @State() highlightedIndex: number = -1;\n\n  /**\n   * Internal state for dropdown open/close\n   */\n  @State() isOpen: boolean = false;\n\n  /**\n   * Internal state for the currently selected option\n   */\n  @State() selectedOption: HTMLOptionElement | null = null;\n\n  /**\n   * Internal state for the sanitized layout content of the selected option\n   */\n  @State() selectedOptionLayoutContent: string = '';\n\n  private inputEl?: HTMLInputElement;\n  private optionEls: HTMLOptionElement[] = [];\n  private triggerEl?: HTMLElement;\n  private listboxEl?: HTMLElement;\n\n  componentWillLoad() {\n    this.updateOptions();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.filterOptions();\n  }\n\n  @Watch('selectedOption')\n  handleSelectedOptionChange() {\n    // Update the layout content when selected option changes\n    this.selectedOptionLayoutContent = this.selectedOption && this.isOptionLayout(this.selectedOption)\n      ? this.getOptionLayoutContent(this.selectedOption)\n      : '';\n  }\n\n  private updateOptions() {\n    // Get all <option> elements from the slot\n    const slot = this.el.shadowRoot?.querySelector('slot[name=\"option\"], slot:not([name])');\n    if (slot) {\n      this.optionEls = (slot as HTMLSlotElement).assignedElements({ flatten: true })\n        .filter(el => el.tagName === 'OPTION') as HTMLOptionElement[];\n\n      // Set initial selected option if one exists (only check DOM on initialization)\n      if (!this.selectedOption) {\n        const initialSelected = this.optionEls.find(opt => opt.hasAttribute('selected')) || null;\n        this.setSelectedOption(initialSelected);\n      }\n\n      this.filterOptions();\n    }\n  }\n\n  // Helper method to get option label, falling back to text content if no label attribute\n  private getOptionLabel(option: HTMLOptionElement): string {\n    return option.label || option.textContent || '';\n  }\n\n  // Helper method to get option layout content\n  private getOptionLayoutContent(option: HTMLOptionElement): string {\n    return this.sanitizeHtml(option.innerHTML || '');\n  }\n\n      // HTML sanitization using DOMPurify library to prevent XSS attacks\n  private sanitizeHtml(html: string): string {\n    // Configure DOMPurify to allow Pine Design System components while removing dangerous content\n    const config = {\n      // Allow all custom elements (including pds-* components)\n      CUSTOM_ELEMENT_HANDLING: {\n        tagNameCheck: (tagName: string) => {\n          // Allow all pds-* tags and standard safe HTML tags\n          return tagName.startsWith('pds-') || /^[a-z]+$/i.test(tagName);\n        },\n        attributeNameCheck: (attr: string) => {\n          // Allow standard HTML attributes, data-* attributes, and Pine component attributes\n          return /^[a-zA-Z][a-zA-Z0-9-]*$/.test(attr) || attr.startsWith('data-') || attr.startsWith('aria-');\n        },\n        allowCustomizedBuiltInElements: false,\n      },\n      // Allow standard safe attributes\n      ALLOW_DATA_ATTR: true,\n      ALLOW_ARIA_ATTR: true,\n      // Specifically forbid dangerous tags\n      FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'textarea', 'select', 'button', 'style'],\n      // Forbid all event handler attributes\n      FORBID_ATTR: [\n        'onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout', 'onmousemove',\n        'onfocus', 'onblur', 'onchange', 'onsubmit', 'onkeydown', 'onkeyup', 'onkeypress',\n        'onmousedown', 'onmouseup', 'ondblclick', 'oncontextmenu', 'onscroll'\n      ],\n      // Safe protocol whitelist\n      ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp|data):|[^a-z]|[a-z+.\\-]+(?:[^a-z+.\\-:]|$))/i,\n    };\n\n    return DOMPurify.sanitize(html, config);\n  }\n\n\n\n  // Helper method to check if option should render as layout\n  private isOptionLayout(option: HTMLOptionElement): boolean {\n    return this.customOptionLayouts && option.hasAttribute('data-layout');\n  }\n\n  // Helper method to check if option is selected (single source of truth)\n  private isOptionSelected(option: HTMLOptionElement): boolean {\n    return this.selectedOption === option;\n  }\n\n  // Helper method to set selected option (centralized state management)\n  private setSelectedOption(option: HTMLOptionElement | null): void {\n    this.selectedOption = option;\n  }\n\n  private filterOptions() {\n    if (this.mode === 'select-only') {\n      this.filteredOptions = this.optionEls;\n    } else {\n      const val = this.value.toLowerCase();\n      this.filteredOptions = this.optionEls.filter(option => {\n        // For layout options, search both text content and data-search-text attribute\n        if (this.isOptionLayout(option)) {\n          const searchText = option.getAttribute('data-search-text') || option.textContent || '';\n          return searchText.toLowerCase().includes(val);\n        }\n        return this.getOptionLabel(option).toLowerCase().includes(val);\n      });\n    }\n    this.highlightedIndex = -1;\n  }\n\n          private openDropdownPositioning() {\n    if (this.triggerEl && this.listboxEl) {\n      // Apply width and max-height BEFORE positioning calculations\n      this.listboxEl.style.width = this.dropdownWidth;\n\n      if (this.maxHeight) {\n        this.listboxEl.style.maxHeight = this.maxHeight;\n        this.listboxEl.style.overflowY = 'auto';\n      }\n\n      // Force a reflow to ensure dimensions are calculated\n      this.listboxEl.offsetHeight;\n\n      computePosition(this.triggerEl, this.listboxEl, {\n        placement: this.dropdownPlacement,\n        strategy: 'absolute',\n        middleware: [offset(12), flip(), shift({ padding: 5 })],\n      }).then(({ x, y }) => {\n        Object.assign(this.listboxEl.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n          position: 'absolute',\n          zIndex: 1000,\n        });\n      });\n    }\n  }\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    this.isOpen = true;\n    this.filterOptions();\n    setTimeout(() => this.openDropdownPositioning(), 0);\n  };\n\n  private handleFocus = () => {\n    this.isOpen = true;\n    this.filterOptions();\n    setTimeout(() => this.openDropdownPositioning(), 0);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {\n      this.isOpen = true;\n      return;\n    }\n    switch (e.key) {\n      case 'ArrowDown':\n        this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.filteredOptions.length - 1);\n        break;\n      case 'ArrowUp':\n        this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);\n        break;\n      case 'Enter':\n        if (this.isOpen && this.highlightedIndex >= 0 && this.highlightedIndex < this.filteredOptions.length) {\n          this.handleOptionClick(this.filteredOptions[this.highlightedIndex]);\n        }\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        break;\n    }\n  };\n\n  /**\n   * Sets focus on the native input element.\n   */\n  @Method()\n  async setFocus() {\n    this.inputEl?.focus();\n  }\n\n  /**\n   * Gets the value of the currently selected option.\n   */\n  @Method()\n  async getSelectedValue(): Promise<string | null> {\n    return this.selectedOption ? this.selectedOption.value : null;\n  }\n\n  // Event handler for option click\n  private onOptionClick = (event: Event) => {\n    const idx = Number((event.currentTarget as HTMLElement).getAttribute('data-option-index'));\n    const option = this.filteredOptions[idx];\n    this.handleOptionClick(option);\n  };\n\n  // Event handler for mouse enter on option\n  private onOptionMouseEnter = (event: Event) => {\n    const idx = Number((event.currentTarget as HTMLElement).getAttribute('data-option-index'));\n    this.highlightedIndex = idx;\n  };\n\n  // Prevent blur on mousedown\n  private onOptionMouseDown = (event: Event) => {\n    event.preventDefault();\n  };\n\n  // Get the label of the selected option\n  private get selectedLabel(): string {\n    return this.selectedOption ? this.getOptionLabel(this.selectedOption) : '';\n  }\n\n  // Get the layout content of the selected option for button trigger\n  private get selectedLayoutContent(): string {\n    return this.selectedOptionLayoutContent;\n  }\n\n  // Check if selected option has layout\n  private get selectedHasLayout(): boolean {\n    return this.selectedOption ? this.isOptionLayout(this.selectedOption) : false;\n  }\n\n  // Handler for button trigger click\n  private onButtonTriggerClick = () => {\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) setTimeout(() => this.openDropdownPositioning(), 0);\n  };\n\n  // Handler for button trigger keyboard events\n  private onButtonTriggerKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.isOpen = true;\n      this.highlightedIndex = 0;\n      setTimeout(() => this.openDropdownPositioning(), 0);\n    } else if (e.key === 'Escape') {\n      this.isOpen = false;\n    }\n  };\n\n  // Close dropdown when focus leaves the combobox\n  private onComboboxFocusOut = (event: FocusEvent) => {\n    const relatedTarget = event.relatedTarget as Node | null;\n    if (!this.el.contains(relatedTarget)) {\n      this.isOpen = false;\n\n      // If there's a selected option but the input value doesn't match, restore the selected option's value\n      if (this.selectedOption && this.value !== this.getOptionLabel(this.selectedOption)) {\n        this.value = this.getOptionLabel(this.selectedOption);\n      }\n    }\n  };\n\n    private handleOptionClick(option: HTMLOptionElement) {\n    // Update reactive state - single source of truth\n    this.setSelectedOption(option);\n\n    this.value = this.getOptionLabel(option);\n    this.isOpen = false;\n    this.pdsComboboxChange.emit({ value: option.value });\n  }\n\n  private renderDropdown() {\n    if (!this.isOpen || this.filteredOptions.length === 0) return null;\n    return (\n      <ul\n        class=\"pds-combobox__listbox\"\n        role=\"listbox\"\n        id=\"pds-combobox-listbox\"\n        ref={el => (this.listboxEl = el as HTMLElement)}\n      >\n        {this.filteredOptions.map((option, idx) => {\n          const isSelected = this.isOptionSelected(option);\n          const isHighlighted = this.highlightedIndex === idx;\n          const isLayout = this.isOptionLayout(option);\n\n          return (\n            <li\n              key={option.value}\n              id={`pds-combobox-option-${idx}`}\n              role=\"option\"\n              aria-selected={isSelected ? 'true' : 'false'}\n              class={{\n                'pds-combobox__option': true,\n                'pds-combobox__option--highlighted': isHighlighted,\n                'pds-combobox__option--layout': isLayout,\n              }}\n              data-option-index={idx}\n              onMouseDown={this.onOptionMouseDown}\n              onClick={this.onOptionClick}\n              onMouseEnter={this.onOptionMouseEnter}\n            >\n              {isLayout ? (\n                <pds-box class=\"pds-combobox__option-layout-wrapper\" innerHTML={this.getOptionLayoutContent(option)} />\n              ) : (\n                this.getOptionLabel(option)\n              )}\n              {isSelected && <pds-icon icon=\"check\" size=\"regular\" class=\"pds-combobox__option-check\" />}\n            </li>\n          );\n        })}\n      </ul>\n    );\n  }\n\n  // Helper method to render the caret icon\n  private renderCaretIcon() {\n    return <pds-icon icon=\"caret-down\" aria-hidden=\"true\" aria-label=\"dropdown indicator\" class=\"pds-combobox__button-trigger-chevron\" />;\n  }\n\n  // Helper method to render layout content\n  private renderLayoutContent() {\n    return (\n      <div class=\"pds-combobox__button-trigger-layout-wrapper\" innerHTML={this.selectedLayoutContent} />\n    );\n  }\n\n  // Helper method to render default text content\n  private renderDefaultContent() {\n    return (\n      <span class=\"pds-combobox__button-trigger-label\">\n        {this.selectedLabel || this.placeholder}\n      </span>\n    );\n  }\n\n  // Helper method to check if we should show layout content\n  private shouldShowLayoutContent(): boolean {\n    return this.selectedHasLayout && !!this.selectedLayoutContent;\n  }\n\n  private renderButtonTriggerContent() {\n    // Case 1: Custom trigger content with layout priority\n    if (this.customTriggerContent) {\n      if (this.shouldShowLayoutContent()) {\n        return [this.renderLayoutContent(), this.renderCaretIcon()];\n      }\n      // Fall back to slot content when no layout is available\n      return <slot name=\"trigger-content\" />;\n    }\n\n    // Case 2: Standard mode with layout content\n    if (this.shouldShowLayoutContent()) {\n      return [this.renderLayoutContent(), this.renderCaretIcon()];\n    }\n\n    // Case 3: Standard mode with default text content\n    return [this.renderDefaultContent(), this.renderCaretIcon()];\n  }\n\n\n\n  render() {\n    const triggerClass = `pds-combobox__button-trigger pds-combobox__button-trigger--${this.triggerVariant}`;\n    return (\n      <Host>\n        <div class=\"pds-combobox\" tabIndex={-1} onFocusout={this.onComboboxFocusOut}>\n          {this.label && (\n            <label htmlFor={this.componentId} class=\"pds-combobox__label\">\n              <span class={this.hideLabel ? 'visually-hidden' : ''}>{this.label}</span>\n            </label>\n          )}\n          {this.trigger === 'input' ? (\n            <input\n              ref={el => {\n                this.inputEl = el as HTMLInputElement;\n                this.triggerEl = el as HTMLElement;\n              }}\n              class=\"pds-combobox__input\"\n              style={{ width: this.triggerWidth }}\n              type=\"text\"\n              role=\"combobox\"\n              aria-autocomplete=\"list\"\n              aria-controls=\"pds-combobox-listbox\"\n              aria-activedescendant={this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined}\n              aria-expanded={this.isOpen ? 'true' : 'false'}\n              aria-disabled={this.disabled ? 'true' : 'false'}\n              aria-label={this.hideLabel ? this.label : undefined}\n              id={this.componentId}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              onInput={this.handleInput}\n              onFocus={this.handleFocus}\n              onKeyDown={this.handleKeyDown}\n              autocomplete=\"off\"\n              part=\"input\"\n            />\n          ) : (\n            <div\n              class={triggerClass}\n              style={{ width: this.triggerWidth }}\n              role=\"combobox\"\n              aria-haspopup=\"listbox\"\n              aria-controls=\"pds-combobox-listbox\"\n              aria-expanded={this.isOpen ? 'true' : 'false'}\n              aria-disabled={this.disabled ? 'true' : 'false'}\n              aria-label={this.hideLabel ? this.label : undefined}\n              id={this.componentId}\n              tabIndex={0}\n              onClick={this.onButtonTriggerClick}\n              data-layout={this.customTriggerContent}\n              onKeyDown={this.onButtonTriggerKeyDown}\n              ref={el => (this.triggerEl = el as HTMLElement)}\n              part=\"button-trigger\"\n            >\n              {this.renderButtonTriggerContent()}\n            </div>\n          )}\n          {/* Hide the slot so options are not visible */}\n          <div style={{ display: 'none' }}>\n            <slot onSlotchange={() => this.updateOptions()}></slot>\n          </div>\n          {this.renderDropdown()}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js

@@ -0,0 +1,194 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-combobox'),
+  args: {
+    customOptionLayouts: false,
+    customTriggerContent: false,
+    disabled: false,
+    dropdownPlacement: 'bottom-start',
+    dropdownWidth: '236px',
+    hideLabel: false,
+    maxHeight: null,
+    mode: 'filter',
+    trigger: 'input',
+    triggerVariant: 'secondary',
+    triggerWidth: 'fit-content',
+  },
+  component: 'pds-combobox',
+  decorators: [withActions],
+  title: 'components/Combobox',
+  parameters: {
+    actions: {
+      handles: [
+        'onpdscomboboxchange', 'pdsComboboxChange',
+      ],
+    },
+    layout: 'centered',
+  },
+};
+
+const BaseTemplate = (args) => html`
+<pds-combobox
+  component-id=${args.componentId}
+  custom-option-layouts=${args.customOptionLayouts}
+  custom-trigger-content=${args.customTriggerContent}
+  disabled=${args.disabled}
+  dropdown-placement=${args.dropdownPlacement}
+  dropdown-width=${args.dropdownWidth}
+  hide-label=${args.hideLabel}
+  max-height=${args.maxHeight}
+  label=${args.label}
+  placeholder=${args.placeholder}
+  mode=${args.mode}
+  trigger=${args.trigger}
+  trigger-variant=${args.triggerVariant}
+  trigger-width=${args.triggerWidth}
+>
+  <option value="cat">Cat</option>
+  <option value="dog">Dog</option>
+  <option value="panda">Panda</option>
+  <option value="snake">Snake</option>
+</pds-combobox>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'combobox-story',
+  label: 'Favorite Animal',
+  placeholder: 'placeholder_text',
+  trigger: 'input',
+  triggerVariant: 'secondary',
+  mode: 'filter',
+};
+
+export const ButtonTrigger = BaseTemplate.bind();
+ButtonTrigger.args = {
+  componentId: 'combobox-button-trigger-story',
+  label: 'Favorite Animal',
+  placeholder: 'Select an animal',
+  trigger: 'button',
+  triggerVariant: 'secondary',
+  mode: 'select-only',
+  triggerWidth: '250px',
+};
+
+export const Custom = (args) => html`
+
+<div style="width: 100%;">
+  <pds-combobox
+    component-id="combobox-custom-trigger-layouts"
+    custom-trigger-content=${args.customTriggerContent}
+    custom-option-layouts=${args.customOptionLayouts}
+    label=${args.label}
+    trigger=${args.trigger}
+    trigger-variant=${args.triggerVariant}
+    trigger-width=${args.triggerWidth}
+    mode=${args.mode}
+    dropdown-width=${args.dropdownWidth}
+    on-pds-combobox-change={(e) => console.log(e.detail.value)}
+  >
+    <pds-box
+      align-items="center"
+      class="payment-trigger-layout"
+      gap="sm"
+      slot="trigger-content"
+    >
+      <pds-box
+        align-items="center"
+        align-self="center"
+        background-color="var(--pine-color-grey-200)"
+        border-radius="md"
+        flex="shrink"
+        gap="sm"
+        justify-content="center"
+        min-height="48px"
+        min-width="48px"
+      >
+        <pds-icon icon="ban" color="var(--pine-color-text-neutral)"></pds-icon>
+      </pds-box>
+      <pds-box class="option-content" direction="column">
+        <pds-text class="option-title">Select a payment method</pds-text>
+      </pds-box>
+      <pds-icon icon="caret-down"></pds-icon>
+    </pds-box>
+
+    <option value="" data-layout data-search-text="None">
+      <pds-box class="payment-option-layout" align-items="center" gap="sm">
+        <pds-box
+          align-items="center"
+          align-self="center"
+          background-color="var(--pine-color-grey-200)"
+          border-radius="md"
+          flex="shrink"
+          gap="sm"
+          justify-content="center"
+          min-height="48px"
+          min-width="48px"
+        >
+          <pds-icon icon="ban" color="var(--pine-color-text-neutral)"></pds-icon>
+        </pds-box>
+        <pds-box class="option-content" direction="column">
+          <pds-text size="md" weight="semibold" class="option-title">None</pds-text>
+          <pds-text size="sm" class="option-description">No debit/credit card payments</pds-text>
+        </pds-box>
+      </pds-box>
+    </option>
+    <option value="stripe" data-layout data-search-text="Stripe credit card payment">
+      <pds-box class="payment-option-layout" align-items="center" gap="sm">
+        <pds-box
+          align-items="center"
+          align-self="center"
+          background-color="var(--pine-color-green-200)"
+          border-radius="md"
+          flex="shrink"
+          gap="sm"
+          justify-content="center"
+          min-height="48px"
+          min-width="48px"
+        >
+          <pds-icon icon="card-stripe"></pds-icon>
+        </pds-box>
+        <pds-box class="option-content" direction="column">
+          <pds-text size="md" weight="semibold" class="option-title">Stripe</pds-text>
+          <pds-text size="sm" class="option-description">Accept debit/credit cards through Stripe.</pds-text>
+        </pds-box>
+      </pds-box>
+    </option>
+    <option value="paypal" data-layout data-search-text="PayPal digital payments">
+      <pds-box class="payment-option-layout" align-items="center" gap="sm">
+        <pds-box
+          align-items="center"
+          align-self="center"
+          background-color="var(--pine-color-green-200)"
+          border-radius="md"
+          flex="shrink"
+          gap="sm"
+          justify-content="center"
+          min-height="48px"
+          min-width="48px"
+        >
+          <pds-icon icon="card-paypal"></pds-icon>
+        </pds-box>
+        <pds-box class="option-content" direction="column">
+          <pds-text size="md" weight="semibold" class="option-title">PayPal</pds-text>
+          <pds-text size="sm" class="option-description">Accept payments through PayPal.</pds-text>
+        </pds-box>
+      </pds-box>
+    </option>
+  </pds-combobox>
+</div>`;
+
+Custom.args = {
+  componentId: 'combobox-custom-trigger-layouts',
+  label: 'Payment Method',
+  placeholder: 'Select a payment method',
+  trigger: 'button',
+  triggerVariant: 'secondary',
+  mode: 'select-only',
+  triggerWidth: '500px',
+  dropdownWidth: '500px',
+  customTriggerContent: true,
+  customOptionLayouts: true,
+};

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

@@ -46,7 +46,7 @@ export class PdsCopytext {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '46c38faeba9b70d2e510a4b6af08866577936478', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '6e28c11a9a7a57f4c256b0283b64ec655a897f65', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '6818451171f85fd6ad63f07c69871082d3fcba4e' }, this.value), h("pds-icon", { key: '05e683d7b28575d924d6af482e6ce4c3cfee3f05', icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: 'fc3a4bb1d6aad33a1a3699dd50a48d2f00e26a47', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '7c555a209f7f8d6c82f909c726d32c1985f52e36', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '63e6e5b84be71c1943cb21ec2a5a89af40658577' }, this.value), h("pds-icon", { key: '49059150540623cad1036c1476a39731d1caed79', icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'ee48ee45e0463abbd3cb7aa686f8d86928830ccb', id: this.componentId }, h("hr", { key: '4af739f85e502a7d9bff1b3581c283cb6ee53a0e', class: this.classNames() })));
+        return (h(Host, { key: 'c3a01882db1119b8397353aaed193813cba0bfb8', id: this.componentId }, h("hr", { key: 'fe20a28dbd2f10cec125df4dbb4ba7a2837628f1', class: this.classNames() })));
     }
     static get is() { return "pds-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js

@@ -63,7 +63,7 @@ export class PdsDropdownMenuItem {
             }, tabIndex: this.disabled ? -1 : 0, type: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
     }
     render() {
-        return (h(Host, { key: 'b27f62c0f1cfe56e777b1a875b93954d4c9da00d', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+        return (h(Host, { key: '89c2973b952f2a2d0b7054817c0532f8654ae279', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
     }
     static get is() { return "pds-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.js

@@ -8,7 +8,7 @@ export class PdsDropdownMenuSeparator {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '71b19470921b7848e5f0c44ef82aa0d9f8ef2017', id: this.componentId }, h("hr", { key: 'efc84b6b3f3f35421c0af863fb2d4636e542773e' })));
+        return (h(Host, { key: '1058ea61d2ad7c311ee162b909df2531f3589e4c', id: this.componentId }, h("hr", { key: 'a8c2f69ef5fba5ea4ea74553fe72544e31eafb1b' })));
     }
     static get is() { return "pds-dropdown-menu-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js

@@ -240,7 +240,7 @@ export class PdsDropdownMenu {
         }
     }
     render() {
-        return (h(Host, { key: '492d6a2baba8c0cf5e05a6c34b774900f5da6886', id: this.componentId }, h("slot", { key: '9d57ee287cff289693c941410bcc62bb9fb1da95', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '62ae569a3bf7f958c01cfe1a74d174e413763f72', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: 'ea6d26124c06683e4fde23bc29f955cb04468d7a', onSlotchange: this.handleSlotChange }))));
+        return (h(Host, { key: '1e4384c8ab3fb3ca73221dd7a7f156846e9b8274', id: this.componentId }, h("slot", { key: '0b3b532a025580b36bbe06f86bdb776d99e0c896', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '20229e833fa45ff5ce730d3a38e8faab582335c6', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: '47cad78c2e1b5150be13a399820fe64d09955e9d', onSlotchange: this.handleSlotChange }))));
     }
     static get is() { return "pds-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,9 +15,9 @@ export class PdsImage {
         this.loading = 'eager';
     }
     render() {
-        return (h(Host, { key: 'a706be22398297ae7087239a3dc7474ae17ab358', class: {
+        return (h(Host, { key: 'bffcd250b41bcc96d6278f35be5287cf34ee91ac', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '37a465ed175ae298e174370246885fb6d7837112', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: 'b241c3d7fcb061b530e57ef4ca0aafe4801d9341', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get is() { return "pds-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -126,12 +126,29 @@
   gap: var(--pine-dimension-2xs);
 }
 
+.pds-input__label-wrapper {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
 .pds-input__label {
   color: var(--pine-color-text-active);
-  font: var(--pine-typography-body-sm-medium);
   margin-block-end: var(--pine-dimension-2xs);
 }
 
+.pds-input__label-wrapper .pds-input__label {
+  margin-block-end: 0;
+}
+
+.pds-input__action {
+  align-items: center;
+  display: flex;
+  gap: var(--pine-dimension-xs);
+  margin-inline-start: var(--pine-dimension-xs);
+}
+
 .pds-input__field-wrapper {
   align-items: center;
   display: flex;

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

@@ -8,6 +8,7 @@ import { danger } from "@pine-ds/icons/icons";
  * @slot prefix - Content that is displayed visually within the input field before the input field
  * @slot prepend - Content to be displayed before the input field
  * @slot suffix - Content that is displayed visually within the input field after the input field
+ * @slot action - Content to be displayed in the label area, typically for help icons or links
  */
 export class PdsInput {
     constructor() {
@@ -29,6 +30,10 @@ export class PdsInput {
          * If true, the input has append content (focusable)
          */
         this.hasAppend = false;
+        /**
+         * If true, the input has action content in the label area
+         */
+        this.hasAction = false;
         /**
          * Determines the type of control that will be displayed
          * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`
@@ -125,12 +130,20 @@ export class PdsInput {
         }
         return null;
     }
+    renderAction() {
+        const hasAction = this.el.querySelector('[slot="action"]') !== null;
+        if (hasAction) {
+            return (h("div", { class: "pds-input__action", part: "action" }, h("slot", { name: "action" })));
+        }
+        return null;
+    }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
         this.hasPrefix = this.el.querySelector('[slot="prefix"]') !== null;
         this.hasSuffix = this.el.querySelector('[slot="suffix"]') !== null;
         this.hasPrepend = this.el.querySelector('[slot="prepend"]') !== null;
         this.hasAppend = this.el.querySelector('[slot="append"]') !== null;
+        this.hasAction = this.el.querySelector('[slot="action"]') !== null;
         // Store the original pdsInput event emitter
         this.originalPdsInput = this.pdsInput;
     }
@@ -190,7 +203,7 @@ export class PdsInput {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (h(Host, { key: '6ae7251aeee049e0e4f3a66c7d947a3ceb7d2b26', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null }, h("div", { key: 'f397d329cf587b9bdf699a0c80a3bdb9c1de0b53', class: "pds-input" }, label && (h("label", { key: '7e5523268dd59acb3fbf2bd659f319cc458166c0', htmlFor: componentId, class: "pds-input__label" }, label, this.required && h("span", { key: 'f197ce55768d8409c9c7832af56e0a6bdc27e90a', class: "pds-input__required-indicator" }, " *"))), h("div", { key: 'ad92476c65ad280622a8aa8c731609aff8ec51a4', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: '187ee16cc7458af1dc06a7f424ce6bc2ffede359', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: 'c11daa2e4ed085033d90a3e9185dd7beb259aa9e', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'd5adbb495bd7abd83655390e0d34cbdf527b656a', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: 'd1a80c2d7e6f8389488fe2c0bb6dd1923536588a', icon: danger, size: "small" }), errorMessage)))));
+        return (h(Host, { key: 'a8cf9aaa6dc90cb0790a7cad75603a2ebf48451a', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction ? 'true' : null }, h("div", { key: '355f87099825b4db4d97500dac2b94a5892a3981', class: "pds-input" }, label && (h("div", { key: 'ee7bdec715478f0945cd1bf6ba435c50e885ebda', class: "pds-input__label-wrapper" }, h("label", { key: '56622a09c8f7313f8c2276363ded8efd2e985fb7', htmlFor: componentId, class: "pds-input__label" }, label, this.required && h("span", { key: 'fb95186cd446e4d338822840423566110ac9dbd0', class: "pds-input__required-indicator" }, " *")), this.renderAction())), h("div", { key: 'c7b209515121ab4e44f054eb817f61e6d9241323', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: '02f8238ee2b87b7484da0b4b5282ce22c7dd3de1', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: 'b93e6b54755d300e9093ac78854b52d296703a00', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'bc16a204c2ad99b28759cde1f066b6ba790a5c80', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '354293fa6512ff16603e7190a4131096f58ca819', icon: danger, size: "small" }), errorMessage)))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }
@@ -599,6 +612,7 @@ export class PdsInput {
             "hasSuffix": {},
             "hasPrepend": {},
             "hasAppend": {},
+            "hasAction": {},
             "hasFocus": {}
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-input.js","sourceRoot":"","sources":["../../../src/components/pds-input/pds-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\nimport { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\nimport { debounceEvent } from '@utils/utils';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot append - Content to be displayed after the input field\n * @slot prefix - Content that is displayed visually within the input field before the input field\n * @slot prepend - Content to be displayed before the input field\n * @slot suffix - Content that is displayed visually within the input field after the input field\n */\n@Component({\n  tag: 'pds-input',\n  styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'],\n  shadow: true,\n})\nexport class PdsInput {\n  private nativeInput?: HTMLInputElement;\n  private inheritedAttributes: Attributes = {};\n  private isComposing = false;\n  private prefixEl?: HTMLElement;\n  private suffixEl?: HTMLElement;\n  private focusedValue?: string | number | null;\n  private originalPdsInput?: EventEmitter<InputInputEventDetail>;\n\n  @Element() el!: HTMLPdsInputElement;\n\n  /**\n   * If true, the input has prefix content (non-focusable)\n   */\n  @State() hasPrefix = false;\n\n  /**\n   * If true, the input has suffix content (non-focusable)\n   */\n  @State() hasSuffix = false;\n\n  /**\n   * If true, the input has prepend content (focusable)\n   */\n  @State() hasPrepend = false;\n\n  /**\n   * If true, the input has append content (focusable)\n   */\n  @State() hasAppend = false;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsInput: EventEmitter<InputInputEventDetail>;\n\n  /**\n   * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n   * `input.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeInput) {\n      this.nativeInput.focus();\n    }\n  }\n\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets the number of milliseconds to wait before updating the value.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Determines whether or not the input field is disabled.\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Specifies the error message and provides an error-themed treatment to the field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the input field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the input field is invalid or throws an error.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the input label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the maximum value for the input field.\n   */\n  @Prop() max?: string;\n\n  /**\n   * Specifies the maximum number of characters allowed in the input field.\n   */\n  @Prop() maxlength?: string;\n\n  /**\n   * Specifies the minimum value for the input field.\n   */\n  @Prop() min?: string;\n\n  /**\n   * Specifies the minimum number of characters allowed in the input field.\n   */\n  @Prop() minlength?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the regular expression that the input value is checked against.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Specifies a short hint that describes the expected value of the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Determines whether or not the input field is required.\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Works with the `min` and `max` attributes to define increments for the input field.\n   */\n  @Prop() step?: string;\n\n  /**\n   * Determines the type of control that will be displayed\n   * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string | number | null = '';\n\n  /**\n   * Determines if the input has focus.\n   */\n  @State() hasFocus = false;\n\n  private updateAddonWidths() {\n    requestAnimationFrame(() => {\n      if (this.prefixEl) {\n        const prefixWidth = this.prefixEl.offsetWidth;\n        this.el.style.setProperty('--prefix-width', `${prefixWidth}px`);\n      }\n\n      if (this.suffixEl) {\n        const suffixWidth = this.suffixEl.offsetWidth;\n        this.el.style.setProperty('--suffix-width', `${suffixWidth}px`);\n      }\n    });\n  }\n\n  private renderPrefix() {\n    const hasPrefix = this.el.querySelector('[slot=\"prefix\"]') !== null;\n    if (hasPrefix) {\n      return (\n        <div class=\"pds-input__prefix\" part=\"prefix\" ref={(el) => this.prefixEl = el as HTMLElement}>\n          <slot name=\"prefix\" onSlotchange={() => this.updateAddonWidths()}></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderSuffix() {\n    const hasSuffix = this.el.querySelector('[slot=\"suffix\"]') !== null;\n    if (hasSuffix) {\n      return (\n        <div class=\"pds-input__suffix\" part=\"suffix\" ref={(el) => this.suffixEl = el as HTMLElement}>\n          <slot name=\"suffix\" onSlotchange={() => this.updateAddonWidths()}></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderPrepend() {\n    const hasPrepend = this.el.querySelector('[slot=\"prepend\"]') !== null;\n    if (hasPrepend) {\n      return (\n        <div class=\"pds-input__prepend\" part=\"prepend\">\n          <slot name=\"prepend\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderAppend() {\n    const hasAppend = this.el.querySelector('[slot=\"append\"]') !== null;\n    if (hasAppend) {\n      return (\n        <div class=\"pds-input__append\" part=\"append\">\n          <slot name=\"append\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    };\n    this.hasPrefix = this.el.querySelector('[slot=\"prefix\"]') !== null;\n    this.hasSuffix = this.el.querySelector('[slot=\"suffix\"]') !== null;\n    this.hasPrepend = this.el.querySelector('[slot=\"prepend\"]') !== null;\n    this.hasAppend = this.el.querySelector('[slot=\"append\"]') !== null;\n\n    // Store the original pdsInput event emitter\n    this.originalPdsInput = this.pdsInput;\n  }\n\n  componentDidLoad() {\n    this.debounceChanged();\n    this.updateAddonWidths();\n  }\n\n  componentDidUpdate() {\n    this.updateAddonWidths();\n  }\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    /**\n     * If debounce is undefined, we have to manually revert the pdsInput emitter in case\n     * debounce used to be set to a number. Otherwise, the event would stay debounced.\n     */\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n\n    if (nativeInput && nativeInput.value !== value && !this.isComposing) {\n      nativeInput.value = value;\n    }\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  private onInputEvent = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n  };\n\n  private onChangeEvent = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private onBlurEvent = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      /**\n       * Emits the `pdsChange` event when the input value\n       * is different than the value when the input was focused.\n       */\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocusEvent = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onCompositionStart = () => {\n    this.isComposing = true;\n  }\n\n  private onCompositionEnd = () => {\n    this.isComposing = false;\n  }\n\n  /**\n   * Emits a pdsChange event\n   */\n  private emitValueChange(event?: Event) {\n    const { value } = this;\n    const newValue = value == null ? value : value.toString();\n\n    this.focusedValue = newValue;\n    this.pdsChange.emit({ value: newValue, event });\n  }\n\n  /**\n   * Emits a `pdsInput` event\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n\n    this.pdsInput.emit({ value: newValue, event });\n  }\n\n  render() {\n    const {\n      componentId,\n      disabled,\n      errorMessage,\n      helperMessage,\n      invalid = false,\n      label,\n    } = this;\n\n    const value = this.getValue();\n\n    const inputWrapperClasses = {\n      'pds-input__field-wrapper': true,\n      'has-focus': this.hasFocus,\n      'has-error': invalid || !!errorMessage,\n      'is-disabled': disabled,\n      'has-prefix': this.hasPrefix,\n      'has-suffix': this.hasSuffix,\n      'has-prepend': this.hasPrepend,\n      'has-append': this.hasAppend,\n    };\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n        has-prefix={this.hasPrefix ? 'true' : null}\n        has-suffix={this.hasSuffix ? 'true' : null}\n        has-prepend={this.hasPrepend ? 'true' : null}\n        has-append={this.hasAppend ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          {label && (\n            <label htmlFor={componentId} class=\"pds-input__label\">\n              {label}\n              {this.required && <span class=\"pds-input__required-indicator\"> *</span>}\n            </label>\n          )}\n\n          <div class={inputWrapperClasses}>\n            {this.renderPrepend()}\n            {this.renderPrefix()}\n            <input\n              ref={(input) => (this.nativeInput = input)}\n              class=\"pds-input__field\"\n              aria-describedby={assignDescription(componentId, invalid, helperMessage)}\n              aria-invalid={invalid ? \"true\" : undefined}\n              autocomplete={this.autocomplete}\n              disabled={disabled}\n              id={componentId}\n              max={this.max}\n              maxlength={this.maxlength}\n              min={this.min}\n              minlength={this.minlength}\n              name={this.name}\n              pattern={this.pattern}\n              placeholder={this.placeholder}\n              readOnly={this.readonly}\n              required={this.required}\n              step={this.step}\n              type={this.type}\n              value={value}\n              onInput={this.onInputEvent}\n              onChange={this.onChangeEvent}\n              onBlur={this.onBlurEvent}\n              onFocus={this.onFocusEvent}\n              onCompositionstart={this.onCompositionStart}\n              onCompositionend={this.onCompositionEnd}\n              {...this.inheritedAttributes}\n            />\n            {this.renderSuffix()}\n            {this.renderAppend()}\n          </div>\n\n          {helperMessage && (\n            <p class=\"pds-input__helper-message\" id={messageId(componentId, 'helper')}>\n              {helperMessage}\n            </p>\n          )}\n\n          {errorMessage && (\n            <p class=\"pds-input__error-message\" id={messageId(componentId, 'error')}>\n              <pds-icon icon={danger} size=\"small\" />\n              {errorMessage}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-input.js","sourceRoot":"","sources":["../../../src/components/pds-input/pds-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\nimport { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\nimport { debounceEvent } from '@utils/utils';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot append - Content to be displayed after the input field\n * @slot prefix - Content that is displayed visually within the input field before the input field\n * @slot prepend - Content to be displayed before the input field\n * @slot suffix - Content that is displayed visually within the input field after the input field\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n  tag: 'pds-input',\n  styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'],\n  shadow: true,\n})\nexport class PdsInput {\n  private nativeInput?: HTMLInputElement;\n  private inheritedAttributes: Attributes = {};\n  private isComposing = false;\n  private prefixEl?: HTMLElement;\n  private suffixEl?: HTMLElement;\n  private focusedValue?: string | number | null;\n  private originalPdsInput?: EventEmitter<InputInputEventDetail>;\n\n  @Element() el!: HTMLPdsInputElement;\n\n  /**\n   * If true, the input has prefix content (non-focusable)\n   */\n  @State() hasPrefix = false;\n\n  /**\n   * If true, the input has suffix content (non-focusable)\n   */\n  @State() hasSuffix = false;\n\n  /**\n   * If true, the input has prepend content (focusable)\n   */\n  @State() hasPrepend = false;\n\n  /**\n   * If true, the input has append content (focusable)\n   */\n  @State() hasAppend = false;\n\n  /**\n   * If true, the input has action content in the label area\n   */\n  @State() hasAction = false;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsInput: EventEmitter<InputInputEventDetail>;\n\n  /**\n   * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n   * `input.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeInput) {\n      this.nativeInput.focus();\n    }\n  }\n\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets the number of milliseconds to wait before updating the value.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Determines whether or not the input field is disabled.\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Specifies the error message and provides an error-themed treatment to the field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the input field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the input field is invalid or throws an error.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the input label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the maximum value for the input field.\n   */\n  @Prop() max?: string;\n\n  /**\n   * Specifies the maximum number of characters allowed in the input field.\n   */\n  @Prop() maxlength?: string;\n\n  /**\n   * Specifies the minimum value for the input field.\n   */\n  @Prop() min?: string;\n\n  /**\n   * Specifies the minimum number of characters allowed in the input field.\n   */\n  @Prop() minlength?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the regular expression that the input value is checked against.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Specifies a short hint that describes the expected value of the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Determines whether or not the input field is required.\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Works with the `min` and `max` attributes to define increments for the input field.\n   */\n  @Prop() step?: string;\n\n  /**\n   * Determines the type of control that will be displayed\n   * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string | number | null = '';\n\n  /**\n   * Determines if the input has focus.\n   */\n  @State() hasFocus = false;\n\n  private updateAddonWidths() {\n    requestAnimationFrame(() => {\n      if (this.prefixEl) {\n        const prefixWidth = this.prefixEl.offsetWidth;\n        this.el.style.setProperty('--prefix-width', `${prefixWidth}px`);\n      }\n\n      if (this.suffixEl) {\n        const suffixWidth = this.suffixEl.offsetWidth;\n        this.el.style.setProperty('--suffix-width', `${suffixWidth}px`);\n      }\n    });\n  }\n\n  private renderPrefix() {\n    const hasPrefix = this.el.querySelector('[slot=\"prefix\"]') !== null;\n    if (hasPrefix) {\n      return (\n        <div class=\"pds-input__prefix\" part=\"prefix\" ref={(el) => this.prefixEl = el as HTMLElement}>\n          <slot name=\"prefix\" onSlotchange={() => this.updateAddonWidths()}></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderSuffix() {\n    const hasSuffix = this.el.querySelector('[slot=\"suffix\"]') !== null;\n    if (hasSuffix) {\n      return (\n        <div class=\"pds-input__suffix\" part=\"suffix\" ref={(el) => this.suffixEl = el as HTMLElement}>\n          <slot name=\"suffix\" onSlotchange={() => this.updateAddonWidths()}></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderPrepend() {\n    const hasPrepend = this.el.querySelector('[slot=\"prepend\"]') !== null;\n    if (hasPrepend) {\n      return (\n        <div class=\"pds-input__prepend\" part=\"prepend\">\n          <slot name=\"prepend\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderAppend() {\n    const hasAppend = this.el.querySelector('[slot=\"append\"]') !== null;\n    if (hasAppend) {\n      return (\n        <div class=\"pds-input__append\" part=\"append\">\n          <slot name=\"append\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-input__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    };\n    this.hasPrefix = this.el.querySelector('[slot=\"prefix\"]') !== null;\n    this.hasSuffix = this.el.querySelector('[slot=\"suffix\"]') !== null;\n    this.hasPrepend = this.el.querySelector('[slot=\"prepend\"]') !== null;\n    this.hasAppend = this.el.querySelector('[slot=\"append\"]') !== null;\n    this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n    // Store the original pdsInput event emitter\n    this.originalPdsInput = this.pdsInput;\n  }\n\n  componentDidLoad() {\n    this.debounceChanged();\n    this.updateAddonWidths();\n  }\n\n  componentDidUpdate() {\n    this.updateAddonWidths();\n  }\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    /**\n     * If debounce is undefined, we have to manually revert the pdsInput emitter in case\n     * debounce used to be set to a number. Otherwise, the event would stay debounced.\n     */\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n\n    if (nativeInput && nativeInput.value !== value && !this.isComposing) {\n      nativeInput.value = value;\n    }\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  private onInputEvent = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n  };\n\n  private onChangeEvent = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private onBlurEvent = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      /**\n       * Emits the `pdsChange` event when the input value\n       * is different than the value when the input was focused.\n       */\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocusEvent = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onCompositionStart = () => {\n    this.isComposing = true;\n  }\n\n  private onCompositionEnd = () => {\n    this.isComposing = false;\n  }\n\n  /**\n   * Emits a pdsChange event\n   */\n  private emitValueChange(event?: Event) {\n    const { value } = this;\n    const newValue = value == null ? value : value.toString();\n\n    this.focusedValue = newValue;\n    this.pdsChange.emit({ value: newValue, event });\n  }\n\n  /**\n   * Emits a `pdsInput` event\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n\n    this.pdsInput.emit({ value: newValue, event });\n  }\n\n  render() {\n    const {\n      componentId,\n      disabled,\n      errorMessage,\n      helperMessage,\n      invalid = false,\n      label,\n    } = this;\n\n    const value = this.getValue();\n\n    const inputWrapperClasses = {\n      'pds-input__field-wrapper': true,\n      'has-focus': this.hasFocus,\n      'has-error': invalid || !!errorMessage,\n      'is-disabled': disabled,\n      'has-prefix': this.hasPrefix,\n      'has-suffix': this.hasSuffix,\n      'has-prepend': this.hasPrepend,\n      'has-append': this.hasAppend,\n    };\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n        has-prefix={this.hasPrefix ? 'true' : null}\n        has-suffix={this.hasSuffix ? 'true' : null}\n        has-prepend={this.hasPrepend ? 'true' : null}\n        has-append={this.hasAppend ? 'true' : null}\n        has-action={this.hasAction ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          {label && (\n            <div class=\"pds-input__label-wrapper\">\n              <label htmlFor={componentId} class=\"pds-input__label\">\n                {label}\n                {this.required && <span class=\"pds-input__required-indicator\"> *</span>}\n              </label>\n              {this.renderAction()}\n            </div>\n          )}\n\n          <div class={inputWrapperClasses}>\n            {this.renderPrepend()}\n            {this.renderPrefix()}\n            <input\n              ref={(input) => (this.nativeInput = input)}\n              class=\"pds-input__field\"\n              aria-describedby={assignDescription(componentId, invalid, helperMessage)}\n              aria-invalid={invalid ? \"true\" : undefined}\n              autocomplete={this.autocomplete}\n              disabled={disabled}\n              id={componentId}\n              max={this.max}\n              maxlength={this.maxlength}\n              min={this.min}\n              minlength={this.minlength}\n              name={this.name}\n              pattern={this.pattern}\n              placeholder={this.placeholder}\n              readOnly={this.readonly}\n              required={this.required}\n              step={this.step}\n              type={this.type}\n              value={value}\n              onInput={this.onInputEvent}\n              onChange={this.onChangeEvent}\n              onBlur={this.onBlurEvent}\n              onFocus={this.onFocusEvent}\n              onCompositionstart={this.onCompositionStart}\n              onCompositionend={this.onCompositionEnd}\n              {...this.inheritedAttributes}\n            />\n            {this.renderSuffix()}\n            {this.renderAppend()}\n          </div>\n\n          {helperMessage && (\n            <p class=\"pds-input__helper-message\" id={messageId(componentId, 'helper')}>\n              {helperMessage}\n            </p>\n          )}\n\n          {errorMessage && (\n            <p class=\"pds-input__error-message\" id={messageId(componentId, 'error')}>\n              <pds-icon icon={danger} size=\"small\" />\n              {errorMessage}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}