@pine-ds/core 3.14.2 → 3.15.0

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

@@ -4,7 +4,7 @@
   border-radius: var(--pine-dimension-sm);
   display: inline-flex;
   padding-block: var(--pine-dimension-025);
-  padding-inline: var(--pine-dimension-150);
+  padding-inline: var(--pine-dimension-100);
 }
 
 /* stylelint-disable pine-design-system/prefer-semantic-tokens */
@@ -181,7 +181,7 @@
   border-radius: var(--pine-dimension-sm);
   cursor: pointer;
   display: flex;
-  padding: var(--pine-dimension-025) var(--pine-dimension-150);
+  padding: var(--pine-dimension-025) var(--pine-dimension-100);
 }
 .pds-chip__button:focus-visible {
   outline: var(--pine-outline-focus);
@@ -200,6 +200,7 @@
   background: transparent;
   border: 0;
   border-radius: var(--pine-border-radius-full);
+  box-sizing: border-box;
   height: var(--sizing-close);
   margin-inline-end: calc(var(--pine-dimension-xs) * -1);
   margin-inline-start: var(--pine-dimension-2xs);
@@ -249,7 +250,7 @@
   /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
   color: var(--pine-color-grey-900);
   font-weight: var(--pine-font-weight-medium);
-  padding: var(--pine-dimension-025) var(--pine-dimension-150);
+  padding: var(--pine-dimension-025) var(--pine-dimension-100);
   position: relative;
   z-index: var(--pine-z-index-raised);
 }

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

@@ -61,8 +61,52 @@ export class PdsChip {
         const chipContent = isDropdown ? (h("button", { class: "pds-chip__button", type: "button" }, this.icon && h("pds-icon", { icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), h("slot", null), h("pds-icon", { icon: downSmall, size: this.iconSize, "aria-hidden": "true" }))) : (h("span", { class: "pds-chip__label" }, this.icon && h("pds-icon", { icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), h("slot", null)));
         return chipContent;
     }
+    renderCloseButton() {
+        const CloseElement = this.removeUrl ? 'a' : 'button';
+        const closeAttributes = () => {
+            if (this.removeUrl) {
+                // Link attributes
+                const linkAttrs = {
+                    class: 'pds-chip__close',
+                    href: this.removeUrl,
+                    'aria-label': 'Remove',
+                };
+                // Add target if specified
+                if (this.removeTarget) {
+                    linkAttrs.target = this.removeTarget;
+                }
+                // Add HTTP method attributes if specified
+                if (this.removeHttpMethod) {
+                    linkAttrs['data-method'] = this.removeHttpMethod;
+                    linkAttrs['data-turbo-method'] = this.removeHttpMethod;
+                }
+                // Build rel attribute by collecting all required values
+                const relValues = [];
+                // Add noopener noreferrer if target is _blank
+                if (this.removeTarget === '_blank') {
+                    relValues.push('noopener', 'noreferrer');
+                }
+                // Add nofollow for non-GET methods (best practice)
+                if (this.removeHttpMethod && this.removeHttpMethod !== 'get') {
+                    relValues.push('nofollow');
+                }
+                // Set rel attribute if we have any values
+                if (relValues.length > 0) {
+                    linkAttrs.rel = relValues.join(' ');
+                }
+                return linkAttrs;
+            }
+            // Button attributes
+            return {
+                class: 'pds-chip__close',
+                type: 'button',
+                'aria-label': 'Remove',
+            };
+        };
+        return (h(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), h("pds-icon", { icon: remove, size: this.iconSize })));
+    }
     render() {
-        return (h(Host, { key: '439cfaffca07a8e0fb451346fcdedf81133a8007', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && (h("button", { key: '30217be99cd7e511db37674294b8796232e30f90', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '662e631fb1b522bce2edf948f5268743143f1b9a', icon: remove, size: this.iconSize })))));
+        return (h(Host, { key: '9e2fb58ed2e55db3bda912cd672e8bde757e6638', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -219,6 +263,63 @@ export class PdsChip {
                 "reflect": false,
                 "attribute": "variant",
                 "defaultValue": "'text'"
+            },
+            "removeUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to navigate to when the remove button is clicked.\nWhen provided, renders the close button as a link instead of a button.\nOnly applies to tag variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remove-url"
+            },
+            "removeHttpMethod": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'get' | 'post' | 'put' | 'patch' | 'delete'",
+                    "resolved": "\"delete\" | \"get\" | \"patch\" | \"post\" | \"put\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "HTTP method to use for the remove action.\nAdds data-method and data-turbo-method attributes for Rails/Turbo compatibility.\nOnly applies when removeUrl is provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remove-http-method"
+            },
+            "removeTarget": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_self' | '_parent' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies where to open the linked document when removeUrl is provided.\nOnly applies when removeUrl is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remove-target"
             }
         };
     }

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   * 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  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.effectiveVariant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n          </button>\n        )}\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, 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"]}

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

@@ -16,6 +16,9 @@ const BaseTemplate = (args) => html`
   ?large=${args.large}
   sentiment="${args.sentiment}"
   variant="${args.variant}"
+  remove-url="${args.removeUrl}"
+  remove-http-method="${args.removeHttpMethod}"
+  remove-target="${args.removeTarget}"
 >
   ${args.slot}
 </pds-chip>`;
@@ -89,3 +92,38 @@ Large.args = {
   slot: "label",
   variant: "tag",
 }
+
+export const TagWithRemoveUrl = BaseTemplate.bind();
+TagWithRemoveUrl.args = {
+  dot: false,
+  icon: "",
+  large: false,
+  sentiment: "neutral",
+  slot: "Filter Applied",
+  variant: "tag",
+  removeUrl: "/filters/remove/1",
+}
+
+export const TagWithHttpMethod = BaseTemplate.bind();
+TagWithHttpMethod.args = {
+  dot: false,
+  icon: "",
+  large: false,
+  sentiment: "danger",
+  slot: "Delete Me",
+  variant: "tag",
+  removeUrl: "/tags/1",
+  removeHttpMethod: "delete",
+}
+
+export const TagWithRemoveTarget = BaseTemplate.bind();
+TagWithRemoveTarget.args = {
+  dot: false,
+  icon: "",
+  large: false,
+  sentiment: "info",
+  slot: "Clear Filters (New Tab)",
+  variant: "tag",
+  removeUrl: "/clear-filters",
+  removeTarget: "_blank",
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=combobox-interface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-interface.js","sourceRoot":"","sources":["../../../../src/components/pds-combobox/combobox-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface ComboboxOption {\n  id: string | number;\n  text: string;\n  [key: string]: unknown;\n}\n\nexport interface ComboboxChangeEventDetail {\n  value: string;\n}\n\nexport interface ComboboxSearchEventDetail {\n  query: string;\n}\n\nexport interface ComboboxLoadOptionsEventDetail {\n  query: string;\n  page: number;\n}\n\nexport interface AsyncResponse {\n  results: Array<{ id: string | number; text: string; [key: string]: unknown }>;\n  totalCount?: number;\n}\n"]}

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

@@ -434,4 +434,24 @@
   height: var(--pine-dimension-2xs);
   margin-inline-end: var(--pine-dimension-2xs);
   width: var(--pine-dimension-2xs);
+}
+
+.pds-combobox__loading {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: var(--pine-dimension-150);
+}
+
+.pds-combobox__empty {
+  color: var(--pine-color-text-tertiary);
+  padding: var(--pine-dimension-150) var(--pine-dimension-sm);
+  text-align: center;
+}
+
+.pds-combobox__load-more {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: var(--pine-dimension-150);
 }