@pine-ds/core 2.14.0 → 2.15.0

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

@@ -1,231 +1,197 @@
 :host {
   --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
-  --border-radius: var(--pine-border-radius-200);
-  --color-background-accent: var(--pine-color-purple-100);
-  --color-background-accent-dot: var(--pine-color-purple-600);
-  --color-background-accent-hover: var(--pine-color-purple-200);
-  --color-background-danger: var(--pine-color-red-100);
-  --color-background-danger-dot: var(--pine-color-red-600);
-  --color-background-danger-hover: var(--pine-color-red-200);
-  --color-background-info: var(--pine-color-blue-100);
-  --color-background-info-dot: var(--pine-color-blue-600);
-  --color-background-info-hover: var(--pine-color-blue-200);
-  --color-background-neutral: var(--pine-color-grey-100);
-  --color-background-neutral-dot: var(--pine-color-grey-600);
-  --color-background-neutral-hover: var(--pine-color-grey-400);
-  --color-background-success: var(--pine-color-green-100);
-  --color-background-success-dot: var(--pine-color-green-600);
-  --color-background-success-hover: var(--pine-color-green-200);
-  --color-background-warning: var(--pine-color-yellow-100);
-  --color-background-warning-dot: var(--pine-color-yellow-600);
-  --color-background-warning-hover: var(--pine-color-yellow-200);
-  --color-text-accent: var(--pine-color-purple-950);
-  --color-text-danger: var(--pine-color-red-950);
-  --color-text-info: var(--pine-color-blue-950);
-  --color-text-neutral: var(--pine-color-grey-950);
-  --color-text-success: var(--pine-color-green-950);
-  --color-text-warning: var(--pine-color-yellow-950);
-  --font-size-sm: var(--pine-font-size-body-md);
-  --font-size-lg: var(--pine-font-size-heading-h6);
-  --font-weight: var(--pine-font-weight-medium);
-  --spacing-xxs: calc(var(--pine-spacing-050) / 2);
-  --spacing-xs: var(--pine-spacing-050);
-  --spacing-sm: calc(var(--pine-spacing-150) / 2);
-  --spacing-md: var(--pine-spacing-100);
-  --spacing-lg: calc(var(--pine-spacing-250) / 2);
-  --spacing-xl: var(--pine-spacing-150);
-  --spacing-xxl: calc(var(--pine-spacing-350) / 2);
   --sizing-close: 10px;
-  --sizing-close-lg: 24px;
-  --sizing-dot: 4px;
   align-items: center;
-  border-radius: var(--border-radius);
+  border-radius: var(--pine-dimension-sm);
   display: inline-flex;
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-lg);
+  padding-block: var(--pine-dimension-2xs);
+  padding-inline: var(--pine-dimension-150);
 }
 
 :host(.pds-chip--accent) {
-  background: var(--color-background-accent);
+  background: var(--pine-chip-color-accent);
+  border: var(--pine-border-width) solid var(--pine-chip-color-accent-hover);
 }
 :host(.pds-chip--accent) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--color-background-accent-dot);
+  background: var(--pine-chip-color-accent-dot);
 }
-:host(.pds-chip--accent) .pds-chip__label, :host(.pds-chip--accent) .pds-chip__button {
+:host(.pds-chip--accent) .pds-chip__label, :host(.pds-chip--accent) .pds-chip__button, :host(.pds-chip--accent) .pds-chip__close {
   /* stylelint-disable-next-line */
-  color: var(--color-text-accent);
+  color: var(--pine-color-text-accent);
+  font-weight: var(--pine-font-weight-medium);
 }
 :host(.pds-chip--accent) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-accent-hover);
+  background: var(--pine-chip-color-accent-hover);
 }
 
 :host(.pds-chip--accent.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-accent-hover);
+  background: var(--pine-chip-color-accent-hover);
 }
 
 :host(.pds-chip--danger) {
-  background: var(--color-background-danger);
+  background: var(--pine-chip-color-danger);
+  border: var(--pine-border-width) solid var(--pine-chip-color-danger-hover);
 }
 :host(.pds-chip--danger) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--color-background-danger-dot);
+  background: var(--pine-chip-color-danger-dot);
 }
-:host(.pds-chip--danger) .pds-chip__label, :host(.pds-chip--danger) .pds-chip__button {
+:host(.pds-chip--danger) .pds-chip__label, :host(.pds-chip--danger) .pds-chip__button, :host(.pds-chip--danger) .pds-chip__close {
   /* stylelint-disable-next-line */
-  color: var(--color-text-danger);
+  color: var(--pine-color-text-danger);
+  font-weight: var(--pine-font-weight-medium);
 }
 :host(.pds-chip--danger) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-danger-hover);
+  background: var(--pine-chip-color-danger-hover);
 }
 
 :host(.pds-chip--danger.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-danger-hover);
+  background: var(--pine-chip-color-danger-hover);
 }
 
 :host(.pds-chip--info) {
-  background: var(--color-background-info);
+  background: var(--pine-chip-color-info);
+  border: var(--pine-border-width) solid var(--pine-chip-color-info-hover);
 }
 :host(.pds-chip--info) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--color-background-info-dot);
+  background: var(--pine-chip-color-info-dot);
 }
-:host(.pds-chip--info) .pds-chip__label, :host(.pds-chip--info) .pds-chip__button {
+:host(.pds-chip--info) .pds-chip__label, :host(.pds-chip--info) .pds-chip__button, :host(.pds-chip--info) .pds-chip__close {
   /* stylelint-disable-next-line */
-  color: var(--color-text-info);
+  color: var(--pine-color-text-info);
+  font-weight: var(--pine-font-weight-medium);
 }
 :host(.pds-chip--info) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-info-hover);
+  background: var(--pine-chip-color-info-hover);
 }
 
 :host(.pds-chip--info.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-info-hover);
+  background: var(--pine-chip-color-info-hover);
 }
 
 :host(.pds-chip--neutral) {
-  background: var(--color-background-neutral);
+  background: var(--pine-chip-color-neutral);
+  border: var(--pine-border-width) solid var(--pine-chip-color-neutral-hover);
 }
 :host(.pds-chip--neutral) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--color-background-neutral-dot);
+  background: var(--pine-chip-color-neutral-dot);
 }
-:host(.pds-chip--neutral) .pds-chip__label, :host(.pds-chip--neutral) .pds-chip__button {
+:host(.pds-chip--neutral) .pds-chip__label, :host(.pds-chip--neutral) .pds-chip__button, :host(.pds-chip--neutral) .pds-chip__close {
   /* stylelint-disable-next-line */
-  color: var(--color-text-neutral);
+  color: var(--pine-color-text-neutral);
+  font-weight: var(--pine-font-weight-medium);
 }
 :host(.pds-chip--neutral) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-neutral-hover);
+  background: var(--pine-chip-color-neutral-hover);
 }
 
 :host(.pds-chip--neutral.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-neutral-hover);
+  background: var(--pine-chip-color-neutral-hover);
 }
 
 :host(.pds-chip--success) {
-  background: var(--color-background-success);
+  background: var(--pine-chip-color-success);
+  border: var(--pine-border-width) solid var(--pine-chip-color-success-hover);
 }
 :host(.pds-chip--success) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--color-background-success-dot);
+  background: var(--pine-chip-color-success-dot);
 }
-:host(.pds-chip--success) .pds-chip__label, :host(.pds-chip--success) .pds-chip__button {
+:host(.pds-chip--success) .pds-chip__label, :host(.pds-chip--success) .pds-chip__button, :host(.pds-chip--success) .pds-chip__close {
   /* stylelint-disable-next-line */
-  color: var(--color-text-success);
+  color: var(--pine-color-text-success);
+  font-weight: var(--pine-font-weight-medium);
 }
 :host(.pds-chip--success) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-success-hover);
+  background: var(--pine-chip-color-success-hover);
 }
 
 :host(.pds-chip--success.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-success-hover);
+  background: var(--pine-chip-color-success-hover);
 }
 
 :host(.pds-chip--warning) {
-  background: var(--color-background-warning);
+  background: var(--pine-chip-color-warning);
+  border: var(--pine-border-width) solid var(--pine-chip-color-warning-hover);
 }
 :host(.pds-chip--warning) .pds-chip__dot {
   /* stylelint-disable-next-line */
-  background: var(--color-background-warning-dot);
+  background: var(--pine-chip-color-warning-dot);
 }
-:host(.pds-chip--warning) .pds-chip__label, :host(.pds-chip--warning) .pds-chip__button {
+:host(.pds-chip--warning) .pds-chip__label, :host(.pds-chip--warning) .pds-chip__button, :host(.pds-chip--warning) .pds-chip__close {
   /* stylelint-disable-next-line */
-  color: var(--color-text-warning);
+  color: var(--pine-color-text-warning);
+  font-weight: var(--pine-font-weight-medium);
 }
 :host(.pds-chip--warning) .pds-chip__close:hover {
   /* stylelint-disable-next-line */
-  background: var(--color-background-warning-hover);
+  background: var(--pine-chip-color-warning-hover);
 }
 
 :host(.pds-chip--warning.pds-chip--dropdown:hover) {
   /* stylelint-disable-next-line */
-  background: var(--color-background-warning-hover);
+  background: var(--pine-chip-color-warning-hover);
 }
 
 .pds-chip__dot {
-  border: 1px solid transparent;
-  border-radius: 50%;
+  border: var(--pine-border-width) solid transparent;
+  border-radius: var(--pine-border-radius-full);
   display: inline-block;
-  height: var(--sizing-dot);
-  margin-block-end: var(--spacing-xxs);
-  margin-inline-end: var(--spacing-xs);
-  width: var(--sizing-dot);
+  height: var(--pine-dimension-2xs);
+  margin-block-end: var(--pine-dimension-025);
+  margin-inline-end: var(--pine-dimension-2xs);
+  width: var(--pine-dimension-2xs);
 }
 
-.pds-chip__label {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight);
+.pds-chip__label, .pds-chip__button {
+  font: var(--pine-typography-body-medium);
+  letter-spacing: var(--pine-letter-spacing);
 }
 
-:host(.pds-chip--dropdown) {
-  padding: 0;
-}
 :host(.pds-chip--dropdown) .pds-chip__dot {
-  margin-block-end: calc(var(--spacing-xxs) / 4);
-  margin-block-start: var(--spacing-xxs);
+  margin-block-end: calc(var(--pine-dimension-025) / 4);
+  margin-block-start: var(--pine-dimension-025);
 }
 
 .pds-chip__button {
   align-items: center;
   appearance: none;
   background: transparent;
-  border: 0;
-  border-radius: var(--border-radius);
+  border: var(--pine-dimension-none);
+  border-radius: var(--pine-dimension-sm);
   display: flex;
-  font-weight: var(--font-weight);
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-lg);
+  padding: var(--pine-dimension-none);
 }
 .pds-chip__button:focus-visible {
   box-shadow: var(--box-shadow-focus);
   outline: none;
 }
 .pds-chip__button pds-icon {
-  margin-inline-end: calc(var(--spacing-xxs) * -1);
-  margin-inline-start: var(--spacing-xs);
-}
-
-:host(.pds-chip--tag) {
-  padding-block: var(--spacing-xxs);
+  margin-inline-end: calc(var(--pine-dimension-025) * -1);
+  margin-inline-start: var(--pine-dimension-2xs);
 }
 
 .pds-chip__close {
   appearance: none;
   background: transparent;
   border: 0;
-  border-radius: 50%;
+  border-radius: var(--pine-border-radius-full);
   height: var(--sizing-close);
-  margin-inline-end: calc(var(--spacing-md) * -1);
-  margin-inline-start: var(--spacing-xs);
+  margin-inline-end: calc(var(--pine-dimension-xs) * -1);
+  margin-inline-start: var(--pine-dimension-2xs);
   padding: var(--sizing-close);
   position: relative;
   width: var(--sizing-close);
@@ -242,26 +208,10 @@
 }
 
 :host(.pds-chip--large) {
-  font-size: var(--font-size-lg);
-  padding-block: var(--spacing-sm);
-  padding-inline: var(--spacing-xxl);
-}
-:host(.pds-chip--large):host(.pds-chip--dropdown) {
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-xxs);
-}
-:host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot {
-  margin-block-end: 0;
-}
-:host(.pds-chip--large) .pds-chip__button {
-  font-size: var(--font-size-lg);
-  padding-inline: var(--spacing-xl);
-}
-:host(.pds-chip--large) .pds-chip__close {
-  height: var(--sizing-close-lg);
-  margin-inline-end: calc(var(--spacing-xl) * -1);
-  width: var(--sizing-close-lg);
+  padding-block: var(--pine-dimension-2xs);
+  padding-inline: var(--pine-dimension-150);
 }
-:host(.pds-chip--large):host(.pds-chip--tag) {
-  padding-block: var(--spacing-xs);
+:host(.pds-chip--large) .pds-chip__label, :host(.pds-chip--large) .pds-chip__button {
+  font: var(--pine-typography-heading-6);
+  letter-spacing: var(--pine-letter-spacing-heading-6);
 }

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

@@ -31,18 +31,18 @@ export class PdsChip {
         return chipContent;
     }
     render() {
-        return (h(Host, { key: 'fac4e9beb31ba05d0c959fb53a9cd62caeacb219', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: '5f57c1cc76f6cffdebe6244f499b427e5f4c04e8', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: 'f4311271f68d700568dc51af9c1512fdfc7c262d', icon: remove, size: "12px" })))));
+        return (h(Host, { key: '256ee05959d6561b0a2f208bad11ccc6b3b7b8ef', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: 'eb0593d00e34e0530af49bef45b211658c3d1842', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: 'ace8b0a28a1b2f731051fb645cb99f7f468ce9b8', icon: remove, size: "12px" })))));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../global/styles/base.scss", "pds-chip.scss"]
+            "$": ["pds-chip.tokens.scss", "pds-chip.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../global/styles/base.css", "pds-chip.css"]
+            "$": ["pds-chip.tokens.css", "pds-chip.css"]
         };
     }
     static get properties() {

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":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,OAAO;;QAwCV,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QAC/B,CAAC,CAAC;;mBAhCY,KAAK;;qBAWH,KAAK;yBAMiE,SAAS;uBAMhD,MAAM;;IAW7C,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACrC,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAEO,cAAc;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;QAC/C,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,CAC/B,cAAQ,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ;YAC3C,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK;YAC5D,IAAI,CAAC,KAAK;YACX,gBAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,MAAM,iBAAa,MAAM,GAAY,CAC9D,CACV,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,iBAAiB;YAC1B,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK;YAC5D,IAAI,CAAC,KAAK,CACN,CACR,CAAC;QAEF,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,CACzB,+DAAQ,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBAAa,QAAQ;gBAC/F,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,GAAY,CACxC,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-chip',\n  styleUrls: ['../../global/styles/base.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   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   * Sets the text label content of the chip.\n   */\n  @Prop() label: 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' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n  /**\n   * Sets the style variant of the chip.\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    if (this.variant) {\n      classNames.push('pds-chip--' + this.variant);\n    }\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private setChipContent() {\n    const isDropdown = this.variant === 'dropdown';\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n        <pds-icon icon={downSmall} size=\"12px\" aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\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.variant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon icon={remove} size=\"12px\"></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":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,OAAO;;QAwCV,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QAC/B,CAAC,CAAC;;mBAhCY,KAAK;;qBAWH,KAAK;yBAMiE,SAAS;uBAMhD,MAAM;;IAW7C,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACrC,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAEO,cAAc;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;QAC/C,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,CAC/B,cAAQ,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ;YAC3C,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK;YAC5D,IAAI,CAAC,KAAK;YACX,gBAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,MAAM,iBAAa,MAAM,GAAY,CAC9D,CACV,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,iBAAiB;YAC1B,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK;YAC5D,IAAI,CAAC,KAAK,CACN,CACR,CAAC;QAEF,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,CACzB,+DAAQ,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBAAa,QAAQ;gBAC/F,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,GAAY,CACxC,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\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   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   * Sets the text label content of the chip.\n   */\n  @Prop() label: 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' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n  /**\n   * Sets the style variant of the chip.\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    if (this.variant) {\n      classNames.push('pds-chip--' + this.variant);\n    }\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private setChipContent() {\n    const isDropdown = this.variant === 'dropdown';\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n        <pds-icon icon={downSmall} size=\"12px\" aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\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.variant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon icon={remove} size=\"12px\"></pds-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:host {
+  --pine-chip-color-warning-dot: var(--pine-color-yellow-600);
+  --pine-chip-color-warning-hover: var(--pine-color-yellow-300);
+  --pine-chip-color-warning: var(--pine-color-yellow-100);
+  --pine-chip-color-success-dot: var(--pine-color-green-600);
+  --pine-chip-color-success-hover: var(--pine-color-green-300);
+  --pine-chip-color-success: var(--pine-color-green-100);
+  --pine-chip-color-neutral-dot: var(--pine-color-grey-600);
+  --pine-chip-color-neutral-hover: var(--pine-color-grey-300);
+  --pine-chip-color-neutral: var(--pine-color-grey-100);
+  --pine-chip-color-info-dot: var(--pine-color-blue-600);
+  --pine-chip-color-info-hover: var(--pine-color-blue-300);
+  --pine-chip-color-info: var(--pine-color-blue-100);
+  --pine-chip-color-danger-dot: var(--pine-color-red-600);
+  --pine-chip-color-danger-hover: var(--pine-color-red-300);
+  --pine-chip-color-danger: var(--pine-color-red-100);
+  --pine-chip-color-accent-dot: var(--pine-color-purple-600);
+  --pine-chip-color-accent-hover: var(--pine-color-purple-300);
+  --pine-chip-color-accent: var(--pine-color-purple-100);
+}

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

@@ -1,68 +1,55 @@
 :host(.pds-copytext) {
-  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
-  --border-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-400);
-  --border-radius-default: var(--pine-border-radius-circle);
-  --border-width-default: var(--pine-border-width-none);
-  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
-  --color-background-default: var(--pine-color-white);
-  --color-border-interactive-hover: var(--pine-color-grey-400);
-  --color-text-hover: var(--pine-color-grey-900);
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
   --copytext-color-background-hover: var(--pine-color-grey-200);
-  --font-size-default: var(--pine-font-size-100);
-  --font-weight-default: var(--pine-font-weight-body-medium);
-  --spacing-bordered-margin-inline-end: var(--pine-spacing-200);
-  --spacing-bordered-padding-block: var(--pine-spacing-100);
-  --spacing-bordered-padding-inline: var(--pine-spacing-200);
-  --spacing-margin-inline-end: var(--pine-spacing-100);
-  --spacing-padding-block: var(--pine-spacing-050);
-  --spacing-padding-inline: var(--pine-spacing-100);
-  --spacing-padding-none: var(--pine-spacing-0);
-  --typography-default: var(--pine-font-weight-body-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-heading);
 }
 :host(.pds-copytext) pds-button {
   align-items: center;
-  background: var(--color-background-default);
-  border: var(--border-width-default);
-  border-radius: var(--border-radius-default);
+  background: var(--pine-color-secondary);
+  border-radius: var(--pine-border-radius-full);
+  border-width: var(--pine-dimension-none);
   display: inline-flex;
-  font: var(--typography-default);
+  font-family: var(--pine-font-family-heading);
+  font-size: var(--pine-font-size-body-md);
+  font-weight: var(--pine-font-weight-body-medium);
+  letter-spacing: var(--pine-letter-spacing);
+  line-height: var(--pine-line-height-body);
   max-width: 100%;
-  padding: var(--spacing-padding-block) var(--spacing-padding-inline);
+  padding: var(--pine-dimension-2xs) var(--pine-dimension-xs);
 }
 :host(.pds-copytext) pds-button::part(button) {
-  padding-inline-end: calc(var(--spacing-padding-inline) / 2);
+  padding-inline-end: calc(var(--pine-dimension-xs) / 2);
 }
 :host(.pds-copytext) pds-button::part(button):hover {
   background-color: var(--copytext-color-background-hover);
-  color: var(--color-text-hover);
+  color: var(--pine-color-text-secondary-hover);
 }
 :host(.pds-copytext) pds-button span {
-  font-weight: var(--font-weight-default);
-  margin-inline-end: var(--spacing-margin-inline-end);
+  font-weight: var(--pine-font-weight-medium);
+  margin-inline-end: var(--pine-dimension-xs);
   white-space: nowrap;
 }
 :host(.pds-copytext) pds-button :nth-child(2) {
   flex-shrink: 0;
 }
 :host(.pds-copytext):host(.pds-copytext--bordered) {
-  border: var(--border-width-default);
-  padding: var(--spacing-padding-none);
+  border-width: var(--pine-dimension-none);
+  padding: var(--pine-dimension-none);
 }
 :host(.pds-copytext):host(.pds-copytext--bordered) pds-button {
-  padding: var(--spacing-padding-none);
+  padding: var(--pine-dimension-none);
 }
 :host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover {
   background: none;
 }
 :host(.pds-copytext):host(.pds-copytext--bordered) span {
-  border: var(--border-interactive-default);
-  border-radius: var(--border-radius-default);
-  margin-inline-end: var(--spacing-bordered-margin-inline-end);
-  padding-block: var(--spacing-bordered-padding-block);
-  padding-inline: var(--spacing-bordered-padding-inline);
+  border: var(--pine-border);
+  border-radius: var(--pine-border-radius-full);
+  margin-inline-end: var(--pine-dimension-sm);
+  padding-block: var(--pine-dimension-xs);
+  padding-inline: var(--pine-dimension-sm);
 }
 :host(.pds-copytext):host(.pds-copytext--bordered) :hover span {
-  border: var(--border-interactive-hover);
+  border: var(--pine-border-hover);
 }
 :host(.pds-copytext):host(.pds-copytext--full-width) {
   display: flex;

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

@@ -36,18 +36,18 @@ export class PdsCopytext {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '43aceb92fe0cc910613115bc882b04108efeffba', class: this.classNames(), id: this.componentId }, h("pds-button", { key: 'f152bc288e64192a80ed8f4f48d90e3edb7558cc', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: 'ed9486b47835e21601047d2a915a412e664c6b4b' }, this.value), h("pds-icon", { key: 'bfbf6d92775171c36f768d654c5866f2f4ce8479', icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: '5efcd7642021a5049762c865be34bc1b649a40f9', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '27b193cc3d52a599d33cba7b6cdb5b4c9d9fb234', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '0dbefb874870ebe4f9b2d261855d5f60fd155df8' }, this.value), h("pds-icon", { key: 'f5ad27e0bc677ba2a7f62c971ee9402bb268b3f4', icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../global/styles/base.scss", "pds-copytext.scss"]
+            "$": ["pds-copytext.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../global/styles/base.css", "pds-copytext.css"]
+            "$": ["pds-copytext.css"]
         };
     }
     static get properties() {

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

@@ -1 +1 @@
-{"version":3,"file":"pds-copytext.js","sourceRoot":"","sources":["../../../src/components/pds-copytext/pds-copytext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAOxD,MAAM,OAAO,WAAW;;QAkCd,oBAAe,GAAG,KAAK,EAAE,KAAa,EAAE,EAAE;YAChD,IAAI,CAAC;gBACH,IAAI,OAAO,SAAS,CAAC,SAAS,KAAK,WAAW,EAAE,CAAC;oBAC/C,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBAC3C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;gBACpD,CAAC;YACH,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,oCAAoC,GAAG,EAAE,CAAC,CAAC;YACxE,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;sBA1CgC,IAAI;;yBAWlB,KAAK;wBAMN,KAAK;;;IA2BhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC9C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YAClD,mEAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;gBACpE,+DAAO,IAAI,CAAC,KAAK,CAAQ;gBACzB,iEAAU,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,GAAY,CACtC,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrls: ['../../global/styles/base.scss', 'pds-copytext.scss'],\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a visible border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * The string displayed that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event fired when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (typeof navigator.clipboard !== 'undefined') {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-copytext.js","sourceRoot":"","sources":["../../../src/components/pds-copytext/pds-copytext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAOxD,MAAM,OAAO,WAAW;;QAkCd,oBAAe,GAAG,KAAK,EAAE,KAAa,EAAE,EAAE;YAChD,IAAI,CAAC;gBACH,IAAI,OAAO,SAAS,CAAC,SAAS,KAAK,WAAW,EAAE,CAAC;oBAC/C,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBAC3C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;gBACpD,CAAC;YACH,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,oCAAoC,GAAG,EAAE,CAAC,CAAC;YACxE,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;sBA1CgC,IAAI;;yBAWlB,KAAK;wBAMN,KAAK;;;IA2BhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC9C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YAClD,mEAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;gBACpE,+DAAO,IAAI,CAAC,KAAK,CAAQ;gBACzB,iEAAU,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,GAAY,CACtC,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrls: ['pds-copytext.scss'],\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a visible border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * The string displayed that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event fired when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (typeof navigator.clipboard !== 'undefined') {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"]}