@pine-ds/core 3.7.0 → 3.8.0

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

@@ -62,7 +62,7 @@ export class PdsChip {
         return chipContent;
     }
     render() {
-        return (h(Host, { key: '87b74bdc74dcf3d0a7e9818a9643abcaac6ed732', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && (h("button", { key: '98644f17a57514b541cd00be5c0972e589f7c44e', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '056913f77f7179db7e8f6f8b69df18c4bd98b891', icon: remove, size: this.iconSize })))));
+        return (h(Host, { key: '4cabdea812310c96b07b9404ac2633157b5001dd', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && (h("button", { key: 'b46734c75fe179f632bccc8f8aecd9cde83f8816', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '846822efb7116a2f109b5950182f3e1529266f1c', icon: remove, size: this.iconSize })))));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -166,9 +166,15 @@ export class PdsChip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'accent' | 'brand' | 'danger' | 'info' | 'neutral' | 'success' | 'warning'",
+                    "original": "ChipSentimentType",
                     "resolved": "\"accent\" | \"brand\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
-                    "references": {}
+                    "references": {
+                        "ChipSentimentType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::ChipSentimentType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -189,9 +195,15 @@ export class PdsChip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'text' | 'tag' | 'dropdown'",
+                    "original": "ChipVariantType",
                     "resolved": "\"dropdown\" | \"tag\" | \"text\"",
-                    "references": {}
+                    "references": {
+                        "ChipVariantType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::ChipVariantType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": 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';\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: 'accent' | 'brand' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = '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: 'text' | 'tag' | 'dropdown' = 'text';\n\n  /**\n   * Event emitted when the close button is clicked on a tag variant chip.\n   */\n  @Event() pdsTagCloseClick: EventEmitter;\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   * Event emitted when the close button is clicked on a tag variant chip.\n   */\n  @Event() pdsTagCloseClick: EventEmitter;\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"]}

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

@@ -12,9 +12,11 @@
 }
 
 .pds-combobox__label {
+  color: var(--pine-color-text-label);
   display: block;
-  font-size: 0.95rem;
-  margin-block-end: var(--pine-dimension-150);
+  font: var(--pine-typography-body-medium);
+  letter-spacing: var(--pine-letter-spacing);
+  margin-block-end: var(--pine-dimension-2xs);
 }
 
 .pds-combobox__input-wrapper {
@@ -62,7 +64,7 @@
   pointer-events: none;
   position: absolute;
   right: var(--pine-dimension-150);
-  z-index: 1;
+  z-index: var(--pine-z-index-raised);
 }
 
 .pds-combobox__listbox {
@@ -76,7 +78,7 @@
   overflow-y: auto;
   padding: var(--pine-dimension-xs);
   position: absolute;
-  z-index: 1000;
+  z-index: var(--pine-z-index-raised);
 }
 
 .pds-combobox__option {
@@ -103,6 +105,11 @@
   display: flex;
   width: 100%;
 }
+.pds-combobox__option .pds-combobox__option--chip .pds-combobox__option-chip {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}
 
 .pds-combobox__option:last-child {
   margin-block-end: 0;
@@ -258,4 +265,168 @@
 [data-layout] {
   border-radius: var(--pine-dimension-125);
   padding-block: var(--pine-dimension-xs);
+}
+
+.pds-combobox__chip-trigger {
+  align-items: center;
+  border-radius: var(--pine-dimension-sm);
+  cursor: pointer;
+  display: inline-flex;
+  font: var(--pine-typography-body-medium);
+  justify-content: space-between;
+  outline: none;
+  padding-block: var(--pine-dimension-025);
+  padding-inline: var(--pine-dimension-150);
+  transition: all 0.15s ease;
+  width: fit-content;
+}
+.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper {
+  align-items: center;
+  display: flex;
+  flex: 1;
+}
+.pds-combobox__chip-trigger .trigger-content {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}
+.pds-combobox__chip-trigger:focus-visible {
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+.pds-combobox__chip-trigger[aria-disabled=true] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pds-combobox__chip-trigger-label {
+  color: inherit;
+  flex: 1 1 auto;
+  text-align: start;
+}
+
+.pds-combobox__chip-trigger-chevron {
+  color: currentColor;
+  margin-inline-start: var(--pine-dimension-150);
+}
+
+.pds-combobox__chip-trigger-icon {
+  margin-inline-end: var(--pine-dimension-2xs);
+}
+
+.pds-combobox__chip-trigger--neutral,
+.pds-combobox__chip-trigger--accent,
+.pds-combobox__chip-trigger--success,
+.pds-combobox__chip-trigger--warning,
+.pds-combobox__chip-trigger--danger,
+.pds-combobox__chip-trigger--info {
+  background: var(--chip-bg);
+  border: var(--pine-border-width) solid var(--chip-border);
+  color: var(--chip-text);
+}
+.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]) {
+  background: var(--chip-bg-hover);
+}
+.pds-combobox__chip-trigger--neutral:focus-visible,
+.pds-combobox__chip-trigger--accent:focus-visible,
+.pds-combobox__chip-trigger--success:focus-visible,
+.pds-combobox__chip-trigger--warning:focus-visible,
+.pds-combobox__chip-trigger--danger:focus-visible,
+.pds-combobox__chip-trigger--info:focus-visible {
+  border-color: var(--chip-border);
+}
+
+.pds-combobox__chip-trigger--neutral {
+  --chip-bg: var(--pine-chip-color-neutral);
+  --chip-bg-hover: var(--pine-chip-color-neutral-hover);
+  --chip-border: var(--pine-chip-color-neutral-hover);
+  --chip-text: var(--pine-color-text-neutral);
+}
+
+.pds-combobox__chip-trigger--accent {
+  --chip-bg: var(--pine-chip-color-accent);
+  --chip-bg-hover: var(--pine-chip-color-accent-hover);
+  --chip-border: var(--pine-chip-color-accent-hover);
+  --chip-text: var(--pine-color-text-accent);
+}
+
+.pds-combobox__chip-trigger--success {
+  --chip-bg: var(--pine-chip-color-success);
+  --chip-bg-hover: var(--pine-chip-color-success-hover);
+  --chip-border: var(--pine-chip-color-success-hover);
+  --chip-text: var(--pine-color-text-success);
+}
+
+.pds-combobox__chip-trigger--warning {
+  --chip-bg: var(--pine-chip-color-warning);
+  --chip-bg-hover: var(--pine-chip-color-warning-hover);
+  --chip-border: var(--pine-chip-color-warning-hover);
+  --chip-text: var(--pine-color-text-warning);
+}
+
+.pds-combobox__chip-trigger--danger {
+  --chip-bg: var(--pine-chip-color-danger);
+  --chip-bg-hover: var(--pine-chip-color-danger-hover);
+  --chip-border: var(--pine-chip-color-danger-hover);
+  --chip-text: var(--pine-color-text-danger);
+}
+
+.pds-combobox__chip-trigger--info {
+  --chip-bg: var(--pine-chip-color-info);
+  --chip-bg-hover: var(--pine-chip-color-info-hover);
+  --chip-border: var(--pine-chip-color-info-hover);
+  --chip-text: var(--pine-color-text-info);
+}
+
+.pds-combobox__chip-trigger--brand {
+  background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);
+  border: 0;
+  color: var(--pine-color-text-neutral);
+  padding: 1px;
+  position: relative;
+}
+.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: calc(var(--pine-dimension-sm) - 1px);
+  color: var(--pine-color-text-neutral);
+  font-weight: var(--pine-font-weight-medium);
+  padding: var(--pine-dimension-025) var(--pine-dimension-150);
+  position: relative;
+  z-index: 1;
+}
+.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron {
+  position: relative;
+  z-index: 1;
+}
+.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) {
+  padding: var(--pine-dimension-none);
+}
+.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label {
+  padding: var(--pine-dimension-025) var(--pine-dimension-150);
+}
+
+.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label {
+  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);
+}
+
+.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before {
+  border: var(--pine-border-width) solid transparent;
+  border-radius: var(--pine-border-radius-full);
+  content: "";
+  display: inline-block;
+  height: var(--pine-dimension-2xs);
+  margin-inline-end: var(--pine-dimension-2xs);
+  width: var(--pine-dimension-2xs);
 }