@pine-ds/core 3.2.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

@@ -1,93 +1,234 @@
 :host {
+  --pds-input-background: var(--pine-color-background-container);
+  --pds-input-border-color: var(--pine-color-border);
+  --pds-input-border-color-hover: var(--pine-color-border-hover);
+  --pds-input-border-color-disabled: var(--pine-color-border-disabled);
+  --pds-input-border-radius: var(--pine-dimension-125);
+  --pds-input-border-width: var(--pine-border-width-thin);
+  --pds-input-padding-x: var(--pine-dimension-150);
+  --pds-input-padding-y: var(--pine-dimension-xs);
+  --pds-input-font: var(--pine-typography-body);
+  --pds-input-text-color: var(--pine-color-text-active);
+  --pds-input-placeholder-color: var(--pine-color-text-placeholder);
+  --pds-input-icon-color: var(--pine-color-text-secondary);
+  --pds-input-disabled-background: var(--pine-color-background-container-disabled);
+  --pds-input-disabled-text-color: var(--pine-color-text-disabled);
+  --pds-input-error-color: var(--pine-color-text-message-danger);
+  --pds-input-error-background: var(--pine-input-color-background-danger);
+  --pds-input-error-border: var(--pine-color-border-danger);
+  --pds-input-error-border-hover: var(--pine-color-border-danger-hover);
+  --pds-input-addon-background: var(--pine-color-background-subtle);
+  --pds-input-addon-color: var(--pine-color-text-secondary);
+  --pds-input-field-min-height: calc(var(--pine-dimension-450) + 2px);
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
+  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);
   display: inline;
 }
+:host pds-select::part(select) {
+  background-color: var(--pds-input-error-background);
+  border-color: var(--pds-input-error-border);
+}
+:host::part(prefix), :host::part(suffix) {
+  align-items: center;
+  color: var(--pine-color-text-label-readonly);
+  display: flex;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  z-index: 1;
+}
+:host::part(prefix) {
+  border-end-start-radius: var(--pds-input-border-radius);
+  border-inline-end: var(--pine-border-width-none);
+  border-start-start-radius: var(--pds-input-border-radius);
+  left: var(--pds-input-padding-x);
+}
+:host::part(suffix) {
+  border-end-end-radius: var(--pds-input-border-radius);
+  border-inline-start: var(--pine-border-width-none);
+  border-start-end-radius: var(--pds-input-border-radius);
+  right: var(--pds-input-padding-x);
+}
+:host::part(prepend), :host::part(append) {
+  align-items: center;
+  background-color: var(--pds-input-addon-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-border-color);
+  color: var(--pds-input-addon-color);
+  display: flex;
+}
+:host::part(prepend) {
+  border-end-start-radius: var(--pds-input-border-radius);
+  border-inline-end: var(--pine-border-width-none);
+  border-start-start-radius: var(--pds-input-border-radius);
+}
+:host::part(append) {
+  border-end-end-radius: var(--pds-input-border-radius);
+  border-inline-start: var(--pine-border-width-none);
+  border-start-end-radius: var(--pds-input-border-radius);
+}
+
+/* stylelint-disable-next-line */
+:host([has-prepend]) ::slotted(pds-button[slot=prepend]) {
+  --pds-button-background: var(--pds-input-addon-background);
+  --pds-button-border: var(--pine-border-width-none);
+  --pds-button-border-radius-end-end: var(--pine-dimension-none);
+  --pds-button-border-radius-start-end: var(--pine-dimension-none);
+  --pds-button-min-height: var(--pine-dimension-450);
+}
+
+/* stylelint-disable-next-line */
+:host([has-append]) ::slotted(pds-button[slot=append]) {
+  --pds-button-background: var(--pds-input-addon-background);
+  --pds-button-border: var(--pine-border-width-none);
+  --pds-button-border-radius-end-start: var(--pine-dimension-none);
+  --pds-button-border-radius-start-start: var(--pine-dimension-none);
+  --pds-button-min-height: var(--pine-dimension-450);
+}
+
+/* stylelint-disable-next-line */
+:host([has-prepend]) ::slotted(pds-select[slot=prepend]) {
+  --pds-select-background: var(--pds-input-addon-background);
+  --pds-select-border: var(--pine-border-width-none);
+  --pds-select-border-radius-end-end: var(--pine-dimension-none);
+  --pds-select-border-radius-start-end: var(--pine-dimension-none);
+  --pds-select-min-height: var(--pine-dimension-450);
+}
+
+/* stylelint-disable-next-line */
+:host([has-append]) ::slotted(pds-select[slot=append]) {
+  --pds-select-background: var(--pds-input-addon-background);
+  --pds-select-border: var(--pine-border-width-none);
+  --pds-select-border-radius-end-start: var(--pine-dimension-none);
+  --pds-select-border-radius-start-start: var(--pine-dimension-none);
+  --pds-select-min-height: var(--pine-dimension-450);
+}
 
 :host([aria-readonly=true]) input {
   background-color: var(--pine-color-background-container-disabled);
   color: var(--pine-color-text-readonly);
 }
 
+:host([disabled=true])::part(prepend), :host([disabled=true])::part(append) {
+  background-color: var(--pds-input-disabled-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-border-color-disabled);
+}
+
+:host([invalid=true])::part(prepend), :host([invalid=true])::part(append) {
+  background-color: var(--pds-input-error-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-error-border);
+}
+
 .pds-input {
   display: flex;
   flex-direction: column;
+  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);
   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;
+  position: relative;
+  width: 100%;
+}
+.pds-input__field-wrapper.has-prefix .pds-input__field {
+  padding-inline-start: calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));
+}
+.pds-input__field-wrapper.has-suffix .pds-input__field {
+  padding-inline-end: calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));
+}
+.pds-input__field-wrapper.has-prepend .pds-input__field {
+  border-end-start-radius: var(--pine-dimension-none);
+  border-start-start-radius: var(--pine-dimension-none);
+}
+.pds-input__field-wrapper.has-append .pds-input__field {
+  border-end-end-radius: var(--pine-dimension-none);
+  border-start-end-radius: var(--pine-dimension-none);
+}
+
 .pds-input__field {
-  background: var(--pine-color-background-container);
-  border: 1px solid var(--pine-color-border);
-  border-radius: var(--pine-dimension-125);
-  color: var(--pine-color-text-active);
-  font: var(--pine-typography-body);
+  background: var(--pds-input-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-border-color);
+  border-radius: var(--pds-input-border-radius);
+  box-sizing: border-box;
+  color: var(--pds-input-text-color);
+  flex: 1;
+  font: var(--pds-input-font);
   letter-spacing: var(--pine-letter-spacing);
-  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
-  /* stylelint-disable */
-  /* stylelint-enable */
+  min-height: var(--pds-input-field-min-height);
+  min-width: var(--pine-dimension-none);
+  padding: var(--pds-input-padding-y) var(--pds-input-padding-x);
+  transition: border-color 0.2s ease;
+  width: 100%;
 }
-.pds-input__field:hover:not(:disabled, .is-invalid) {
-  border: var(--pine-border-hover);
+.pds-input__field:hover:not(:disabled) {
+  border-color: var(--pds-input-border-color-hover);
 }
 .pds-input__field:disabled {
-  background-color: var(--pine-color-background-container-disabled);
+  background: var(--pds-input-disabled-background);
   border-color: var(--pine-color-border-disabled);
-  color: var(--pine-color-text-disabled);
+  color: var(--pds-input-disabled-text-color);
   cursor: not-allowed;
-  /* stylelint-disable */
-  /* stylelint-enable */
 }
-.pds-input__field:disabled::-webkit-input-placeholder {
+.pds-input__field:disabled::placeholder {
   color: var(--pine-color-text-placeholder-disabled);
 }
-.pds-input__field:disabled::-moz-placeholder {
-  color: var(--pine-color-text-placeholder-disabled);
-}
-.pds-input__field:disabled::-moz-placeholder {
-  color: var(--pine-color-text-placeholder-disabled);
+.has-error .pds-input__field:hover:not(:disabled) {
+  border-color: var(--pds-input-error-border-hover);
 }
-.pds-input__field:disabled:-ms-input-placeholder {
-  color: var(--pine-color-text-placeholder-disabled);
-}
-.pds-input__field:hover {
-  border-color: var(--pine-color-border-hover);
-}
-.pds-input__field:focus-visible {
+.pds-input__field:focus-visible:not(.has-error) {
   border-color: var(--pine-color-border-active);
   outline: var(--pine-outline-focus);
   outline-offset: var(--pine-border-width);
 }
-.pds-input__field::-webkit-input-placeholder {
-  color: var(--pine-color-text-placeholder);
+:host([has-prepend]) .pds-input__field:focus-visible:not(.has-error), :host([has-append]) .pds-input__field:focus-visible:not(.has-error), :host([has-prefix]) .pds-input__field:focus-visible:not(.has-error), :host([has-suffix]) .pds-input__field:focus-visible:not(.has-error) {
+  outline-offset: var(--pine-dimension-none);
 }
-.pds-input__field::-moz-placeholder {
-  color: var(--pine-color-text-placeholder);
+.pds-input__field::placeholder {
+  color: var(--pds-input-placeholder-color);
 }
-.pds-input__field::-moz-placeholder {
-  color: var(--pine-color-text-placeholder);
+.has-error .pds-input__field {
+  background-color: var(--pds-input-error-background);
+  border-color: var(--pds-input-error-border);
 }
-.pds-input__field:-ms-input-placeholder {
-  color: var(--pine-color-text-placeholder);
-}
-.pds-input__field.is-invalid {
-  background-color: var(--pine-input-color-background-danger);
-  border-color: var(--pine-color-border-danger);
-}
-.pds-input__field.is-invalid:focus-visible {
+.has-error .pds-input__field:focus-visible {
   outline-color: var(--pine-color-focus-ring-danger);
 }
 
 .pds-input__error-message,
 .pds-input__helper-message {
   font: var(--pine-typography-body-sm-medium);
-  margin-block-end: 0;
+  margin-block-end: var(--pine-dimension-none);
   margin-block-start: var(--pine-dimension-2xs);
 }
 
 .pds-input__error-message {
   align-items: center;
-  color: var(--pine-color-text-message-danger);
+  color: var(--pds-input-error-color);
   display: flex;
   gap: var(--pine-dimension-2xs);
 }