@pine-ds/core 3.17.0 → 3.19.0

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

@@ -218,21 +218,42 @@
   outline: var(--pine-outline-focus);
 }
 
-:host(.pds-chip--large) {
+:host(.pds-chip--sm) {
+  --sizing-close: var(--pine-dimension-100);
+  padding-block: var(--pine-dimension-025);
+  padding-inline: var(--pine-dimension-100);
+}
+:host(.pds-chip--sm) .pds-chip__label, :host(.pds-chip--sm) .pds-chip__button {
+  font: var(--pine-typography-body-sm-medium);
+  letter-spacing: var(--pine-letter-spacing);
+}
+
+:host(.pds-chip--sm.pds-chip--dropdown) {
+  padding: var(--pine-dimension-none);
+}
+:host(.pds-chip--sm.pds-chip--dropdown) .pds-chip__button {
+  padding: var(--pine-dimension-025) var(--pine-dimension-100);
+}
+
+:host(.pds-chip--sm.pds-chip--brand) .pds-chip__label {
+  padding: var(--pine-dimension-025) var(--pine-dimension-100);
+}
+
+:host(.pds-chip--lg) {
   padding-block: var(--pine-dimension-025);
   padding-inline: var(--pine-dimension-150);
 }
-:host(.pds-chip--large) .pds-chip__label, :host(.pds-chip--large) .pds-chip__button {
+:host(.pds-chip--lg) .pds-chip__label, :host(.pds-chip--lg) .pds-chip__button {
   font-family: var(--pine-font-family-heading);
   font-size: var(--pine-font-size-heading-6);
   font-weight: var(--pine-font-weight-medium);
   letter-spacing: var(--pine-letter-spacing-heading-6);
 }
 
-:host(.pds-chip--large.pds-chip--dropdown) {
+:host(.pds-chip--lg.pds-chip--dropdown) {
   padding: var(--pine-dimension-none);
 }
-:host(.pds-chip--large.pds-chip--dropdown) .pds-chip__button {
+:host(.pds-chip--lg.pds-chip--dropdown) .pds-chip__button {
   padding: var(--pine-dimension-025) var(--pine-dimension-150);
 }
 

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

@@ -12,8 +12,9 @@ export class PdsChip {
          */
         this.dot = false;
         /**
-         * Determines whether the chip should be displayed in a larger size.
+         * Determines whether the chip should be displayed in a larger size. DEPRECATED.
          * @defaultValue false
+         * @deprecated Use `size` prop instead. Set `size="lg"` for the large variant.
          */
         this.large = false;
         /**
@@ -31,10 +32,18 @@ export class PdsChip {
             this.pdsTagCloseClick.emit();
         };
     }
+    get effectiveSize() {
+        if (this.size != null)
+            return this.size;
+        if (this.large)
+            return 'lg';
+        return 'md';
+    }
     classNames() {
         const classNames = ['pds-chip'];
-        if (this.large) {
-            classNames.push('pds-chip--large');
+        const size = this.effectiveSize;
+        if (size && size !== 'md') {
+            classNames.push('pds-chip--' + size);
         }
         // For brand sentiment, always use text variant
         const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;
@@ -51,8 +60,11 @@ export class PdsChip {
         return this.sentiment === 'brand' ? 'text' : this.variant;
     }
     get iconSize() {
-        // Icon size based on large prop
-        return this.large ? '14px' : '12px';
+        switch (this.effectiveSize) {
+            case 'sm': return '10px';
+            case 'lg': return '14px';
+            default: return '12px';
+        }
     }
     setChipContent() {
         const isDropdown = this.effectiveVariant === 'dropdown';
@@ -106,7 +118,7 @@ export class PdsChip {
         return (h(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), h("pds-icon", { icon: remove, size: this.iconSize })));
     }
     render() {
-        return (h(Host, { key: '9e2fb58ed2e55db3bda912cd672e8bde757e6638', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
+        return (h(Host, { key: 'fcd4828fabaeba300c35cd9a0b90701feefd6480', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -197,8 +209,11 @@ export class PdsChip {
                     "tags": [{
                             "name": "defaultValue",
                             "text": "false"
+                        }, {
+                            "name": "deprecated",
+                            "text": "Use `size` prop instead. Set `size=\"lg\"` for the large variant."
                         }],
-                    "text": "Determines whether the chip should be displayed in a larger size."
+                    "text": "Determines whether the chip should be displayed in a larger size. DEPRECATED."
                 },
                 "getter": false,
                 "setter": false,
@@ -206,6 +221,34 @@ export class PdsChip {
                 "attribute": "large",
                 "defaultValue": "false"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChipSizeType",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ChipSizeType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::ChipSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'md'"
+                        }],
+                    "text": "Sets the size of the chip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            },
             "sentiment": {
                 "type": "string",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"pds-chip.js","sourceRoot":"","sources":["../../../../src/components/pds-chip/pds-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport type { ChipSentimentType, ChipVariantType } from '@utils/types';\n\n/**\n * @slot (default) - The chip's label text.\n */\n\n@Component({\n  tag: 'pds-chip',\n  styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'],\n  shadow: true,\n})\nexport class PdsChip {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * Note: This prop is ignored when sentiment is 'brand'.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   * The name of the icon to display before the chip text.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Determines whether the chip should be displayed in a larger size.\n   * @defaultValue false\n   */\n  @Prop() large = false;\n\n  /**\n   * Defines the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: ChipSentimentType = 'neutral';\n\n  /**\n   * Sets the style variant of the chip.\n   * Note: This prop is ignored when sentiment is 'brand'.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: ChipVariantType = 'text';\n\n  /**\n   * URL to navigate to when the remove button is clicked.\n   * When provided, renders the close button as a link instead of a button.\n   * Only applies to tag variant.\n   */\n  @Prop() removeUrl?: string;\n\n  /**\n   * HTTP method to use for the remove action.\n   * Adds data-method and data-turbo-method attributes for Rails/Turbo compatibility.\n   * Only applies when removeUrl is provided.\n   */\n  @Prop() removeHttpMethod?: 'get' | 'post' | 'put' | 'patch' | 'delete';\n\n  /**\n   * Specifies where to open the linked document when removeUrl is provided.\n   * Only applies when removeUrl is set.\n   */\n  @Prop() removeTarget?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * Event emitted when the close button is clicked on a tag variant chip.\n   */\n  @Event() pdsTagCloseClick: EventEmitter<void>;\n\n  private handleCloseClick = () => {\n    this.pdsTagCloseClick.emit();\n  };\n\n  private classNames() {\n    const classNames = ['pds-chip'];\n\n    if (this.large) {\n      classNames.push('pds-chip--large');\n    }\n\n    // For brand sentiment, always use text variant\n    const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;\n    if (effectiveVariant) {\n      classNames.push('pds-chip--' + effectiveVariant);\n    }\n\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private get effectiveVariant() {\n    // For brand sentiment, force text variant behavior\n    return this.sentiment === 'brand' ? 'text' : this.variant;\n  }\n\n  private get iconSize() {\n    // Icon size based on large prop\n    return this.large ? '14px' : '12px';\n  }\n\n  private setChipContent() {\n    const isDropdown = this.effectiveVariant === 'dropdown';\n\n    // For brand sentiment, ignore dot prop\n    const showDot = this.sentiment === 'brand' ? false : this.dot;\n\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n        {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        <slot></slot>\n        <pds-icon icon={downSmall} size={this.iconSize} aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n        {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        <slot></slot>\n      </span>\n    );\n\n    return chipContent;\n  }\n\n  private renderCloseButton() {\n    const CloseElement = this.removeUrl ? 'a' : 'button';\n\n    const closeAttributes = () => {\n      if (this.removeUrl) {\n        // Link attributes\n        const linkAttrs: any = {\n          class: 'pds-chip__close',\n          href: this.removeUrl,\n          'aria-label': 'Remove',\n        };\n\n        // Add target if specified\n        if (this.removeTarget) {\n          linkAttrs.target = this.removeTarget;\n        }\n\n        // Add HTTP method attributes if specified\n        if (this.removeHttpMethod) {\n          linkAttrs['data-method'] = this.removeHttpMethod;\n          linkAttrs['data-turbo-method'] = this.removeHttpMethod;\n        }\n\n        // Build rel attribute by collecting all required values\n        const relValues = [];\n\n        // Add noopener noreferrer if target is _blank\n        if (this.removeTarget === '_blank') {\n          relValues.push('noopener', 'noreferrer');\n        }\n\n        // Add nofollow for non-GET methods (best practice)\n        if (this.removeHttpMethod && this.removeHttpMethod !== 'get') {\n          relValues.push('nofollow');\n        }\n\n        // Set rel attribute if we have any values\n        if (relValues.length > 0) {\n          linkAttrs.rel = relValues.join(' ');\n        }\n\n        return linkAttrs;\n      }\n\n      // Button attributes\n      return {\n        class: 'pds-chip__close',\n        type: 'button',\n        'aria-label': 'Remove',\n      };\n    };\n\n    return (\n      <CloseElement {...closeAttributes()} onClick={this.handleCloseClick}>\n        <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n      </CloseElement>\n    );\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.effectiveVariant === 'tag' && this.renderCloseButton()}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-chip.js","sourceRoot":"","sources":["../../../../src/components/pds-chip/pds-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport type { ChipSentimentType, ChipSizeType, ChipVariantType } from '@utils/types';\n\n/**\n * @slot (default) - The chip's label text.\n */\n\n@Component({\n  tag: 'pds-chip',\n  styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'],\n  shadow: true,\n})\nexport class PdsChip {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * Note: This prop is ignored when sentiment is 'brand'.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   * The name of the icon to display before the chip text.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Determines whether the chip should be displayed in a larger size. DEPRECATED.\n   * @defaultValue false\n   * @deprecated Use `size` prop instead. Set `size=\"lg\"` for the large variant.\n   */\n  @Prop() large = false;\n\n  /**\n   * Sets the size of the chip.\n   * @defaultValue 'md'\n   */\n  @Prop() size?: ChipSizeType;\n\n  /**\n   * Defines the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: ChipSentimentType = 'neutral';\n\n  /**\n   * Sets the style variant of the chip.\n   * Note: This prop is ignored when sentiment is 'brand'.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: ChipVariantType = 'text';\n\n  /**\n   * URL to navigate to when the remove button is clicked.\n   * When provided, renders the close button as a link instead of a button.\n   * Only applies to tag variant.\n   */\n  @Prop() removeUrl?: string;\n\n  /**\n   * HTTP method to use for the remove action.\n   * Adds data-method and data-turbo-method attributes for Rails/Turbo compatibility.\n   * Only applies when removeUrl is provided.\n   */\n  @Prop() removeHttpMethod?: 'get' | 'post' | 'put' | 'patch' | 'delete';\n\n  /**\n   * Specifies where to open the linked document when removeUrl is provided.\n   * Only applies when removeUrl is set.\n   */\n  @Prop() removeTarget?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * Event emitted when the close button is clicked on a tag variant chip.\n   */\n  @Event() pdsTagCloseClick: EventEmitter<void>;\n\n  private handleCloseClick = () => {\n    this.pdsTagCloseClick.emit();\n  };\n\n  private get effectiveSize(): ChipSizeType {\n    if (this.size != null) return this.size;\n    if (this.large) return 'lg';\n    return 'md';\n  }\n\n  private classNames() {\n    const classNames = ['pds-chip'];\n\n    const size = this.effectiveSize;\n    if (size && size !== 'md') {\n      classNames.push('pds-chip--' + size);\n    }\n\n    // For brand sentiment, always use text variant\n    const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;\n    if (effectiveVariant) {\n      classNames.push('pds-chip--' + effectiveVariant);\n    }\n\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private get effectiveVariant() {\n    // For brand sentiment, force text variant behavior\n    return this.sentiment === 'brand' ? 'text' : this.variant;\n  }\n\n  private get iconSize() {\n    switch (this.effectiveSize) {\n      case 'sm': return '10px';\n      case 'lg': return '14px';\n      default: return '12px';\n    }\n  }\n\n  private setChipContent() {\n    const isDropdown = this.effectiveVariant === 'dropdown';\n\n    // For brand sentiment, ignore dot prop\n    const showDot = this.sentiment === 'brand' ? false : this.dot;\n\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n        {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        <slot></slot>\n        <pds-icon icon={downSmall} size={this.iconSize} aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n        {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        <slot></slot>\n      </span>\n    );\n\n    return chipContent;\n  }\n\n  private renderCloseButton() {\n    const CloseElement = this.removeUrl ? 'a' : 'button';\n\n    const closeAttributes = () => {\n      if (this.removeUrl) {\n        // Link attributes\n        const linkAttrs: any = {\n          class: 'pds-chip__close',\n          href: this.removeUrl,\n          'aria-label': 'Remove',\n        };\n\n        // Add target if specified\n        if (this.removeTarget) {\n          linkAttrs.target = this.removeTarget;\n        }\n\n        // Add HTTP method attributes if specified\n        if (this.removeHttpMethod) {\n          linkAttrs['data-method'] = this.removeHttpMethod;\n          linkAttrs['data-turbo-method'] = this.removeHttpMethod;\n        }\n\n        // Build rel attribute by collecting all required values\n        const relValues = [];\n\n        // Add noopener noreferrer if target is _blank\n        if (this.removeTarget === '_blank') {\n          relValues.push('noopener', 'noreferrer');\n        }\n\n        // Add nofollow for non-GET methods (best practice)\n        if (this.removeHttpMethod && this.removeHttpMethod !== 'get') {\n          relValues.push('nofollow');\n        }\n\n        // Set rel attribute if we have any values\n        if (relValues.length > 0) {\n          linkAttrs.rel = relValues.join(' ');\n        }\n\n        return linkAttrs;\n      }\n\n      // Button attributes\n      return {\n        class: 'pds-chip__close',\n        type: 'button',\n        'aria-label': 'Remove',\n      };\n    };\n\n    return (\n      <CloseElement {...closeAttributes()} onClick={this.handleCloseClick}>\n        <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n      </CloseElement>\n    );\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.effectiveVariant === 'tag' && this.renderCloseButton()}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -2,7 +2,20 @@ import { html } from 'lit';
 
 
 export default {
-
+  argTypes: {
+    sentiment: {
+      control: { type: 'select' },
+      options: ['accent', 'brand', 'danger', 'info', 'neutral', 'success', 'warning'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: { type: 'select' },
+      options: ['text', 'tag', 'dropdown'],
+    },
+  },
   component: 'pds-chip',
   parameters: {},
   title: 'components/Chip'
@@ -13,7 +26,7 @@ const BaseTemplate = (args) => html`
   component-id="${args.componentId}"
   ?dot=${args.dot}
   icon="${args.icon}"
-  ?large=${args.large}
+  size="${args.size}"
   sentiment="${args.sentiment}"
   variant="${args.variant}"
   remove-url="${args.removeUrl}"
@@ -27,7 +40,7 @@ export const Default = BaseTemplate.bind();
 Default.args = {
   dot: false,
   icon: "",
-  large: false,
+  size: "md",
   sentiment: "neutral",
   slot: "label",
   variant: "text",
@@ -36,7 +49,7 @@ Default.args = {
 export const Sentiment = BaseTemplate.bind();
 Sentiment.args = {
   dot: false,
-  large: false,
+  size: "md",
   icon: "",
   sentiment: "success",
   slot: "label",
@@ -47,7 +60,7 @@ export const Dots = BaseTemplate.bind();
 Dots.args = {
   dot: true,
   icon: "",
-  large: false,
+  size: "md",
   sentiment: "neutral",
   slot: "label",
   variant: "text",
@@ -57,7 +70,7 @@ export const Icon = BaseTemplate.bind();
 Icon.args = {
   dot: false,
   icon: "check",
-  large: false,
+  size: "md",
   sentiment: "neutral",
   slot: "label",
   variant: "text",
@@ -67,7 +80,7 @@ export const Dropdown = BaseTemplate.bind();
 Dropdown.args = {
   dot: false,
   icon: "",
-  large: false,
+  size: "md",
   sentiment: "neutral",
   slot: "label",
   variant: "dropdown",
@@ -77,27 +90,37 @@ export const Tag = BaseTemplate.bind();
 Tag.args = {
   dot: false,
   icon: "",
-  large: false,
+  size: "md",
   sentiment: "neutral",
   slot: "label",
   variant: "tag",
 }
 
+export const Small = BaseTemplate.bind();
+Small.args = {
+  dot: false,
+  icon: "",
+  size: "sm",
+  sentiment: "neutral",
+  slot: "label",
+  variant: "text",
+}
+
 export const Large = BaseTemplate.bind();
 Large.args = {
   dot: false,
   icon: "",
-  large: true,
+  size: "lg",
   sentiment: "neutral",
   slot: "label",
-  variant: "tag",
+  variant: "text",
 }
 
 export const TagWithRemoveUrl = BaseTemplate.bind();
 TagWithRemoveUrl.args = {
   dot: false,
   icon: "",
-  large: false,
+  size: "md",
   sentiment: "neutral",
   slot: "Filter Applied",
   variant: "tag",
@@ -108,7 +131,7 @@ export const TagWithHttpMethod = BaseTemplate.bind();
 TagWithHttpMethod.args = {
   dot: false,
   icon: "",
-  large: false,
+  size: "md",
   sentiment: "danger",
   slot: "Delete Me",
   variant: "tag",
@@ -120,7 +143,7 @@ export const TagWithRemoveTarget = BaseTemplate.bind();
 TagWithRemoveTarget.args = {
   dot: false,
   icon: "",
-  large: false,
+  size: "md",
   sentiment: "info",
   slot: "Clear Filters (New Tab)",
   variant: "tag",

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

@@ -1243,10 +1243,10 @@ export class PdsCombobox {
     }
     render() {
         const triggerClass = `pds-combobox__button-trigger pds-combobox__button-trigger--${this.triggerVariant}`;
-        return (h(Host, { key: '969d61af2b58a33d582259df5fe62a4d509a9f7b' }, h("div", { key: '2af78eb8fd340e6f7a05f86ed3ed17dbe2c066e3', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut }, this.label && (h("label", { key: '9c85e41decaeb8403fad2217a90c5f2aaf659651', htmlFor: this.componentId, class: "pds-combobox__label" }, h("span", { key: '578de8ce9fa07ce8f14b8b689c9fa8ee91495b83', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
+        return (h(Host, { key: '969d61af2b58a33d582259df5fe62a4d509a9f7b' }, h("div", { key: 'fd4fae653c654b4cdc582f6a7d51100844d5a050', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && (h("label", { key: 'fc90ccdb48bc951873b92e6c315cecbbd74a52b5', htmlFor: this.componentId, class: "pds-combobox__label" }, h("span", { key: 'be72c23cc4759cf8dadbcdcb6121adf33cefc237', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
-            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: '9805336062fc35dfa0465f0b85916c02b96ad10e', style: { display: 'none' } }, h("slot", { key: 'cef42fb8fe2f73e2d44ed8258f805407a87628a2', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
+            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: 'db0c3c6aa9d332c2ab0d31e43afd499e604b5ce8', style: { display: 'none' } }, h("slot", { key: '3a9eef50b933e311222c0c067dfa29dc867b19cd', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
     }
     static get is() { return "pds-combobox"; }
     static get encapsulation() { return "shadow"; }