@pine-ds/core 0.0.2-alpha.0

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

@@ -0,0 +1,245 @@
+:host {
+  --background-danger: var(--pine-color-red-100);
+  --background-danger-dot: var(--pine-color-red-300);
+  --background-danger-interactive: var(--pine-color-red-200);
+  --background-neutral: var(--pine-color-neutral-grey-300);
+  --background-neutral-dot: var(--pine-color-neutral-charcoal-100);
+  --background-neutral-interactive: var(--pine-color-neutral-grey-400);
+  --background-info: var(--pine-color-primary-100);
+  --background-info-dot: var(--pine-color-primary-300);
+  --background-info-interactive: var(--pine-color-primary-200);
+  --background-accent: var(--pine-color-purple-100);
+  --background-accent-dot: var(--pine-color-purple-300);
+  --background-accent-interactive: var(--pine-color-purple-200);
+  --background-success: var(--pine-color-green-100);
+  --background-success-dot: var(--pine-color-green-300);
+  --background-success-interactive: var(--pine-color-green-200);
+  --background-warning: var(--pine-color-yellow-100);
+  --background-warning-dot: var(--pine-color-yellow-300);
+  --background-warning-interactive: var(--pine-color-yellow-200);
+  --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);
+  --border-radius: var(--pine-border-radius-lg);
+  --font-size: var(--pine-font-size-body-sm);
+  --font-size-lg: var(--pine-font-size-body);
+  --font-weight: var(--pine-font-weight-medium);
+  --line-height: var(--pine-line-height-sm);
+  --padding-block-sm: calc(var(--pine-spacing-xxs) / 2);
+  --padding-block: var(--pine-spacing-xxs);
+  --padding-block-lg: 6px;
+  --padding-inline-sm: calc(var(--pine-spacing-xxs) / 2);
+  --padding-inline: 10px;
+  --padding-inline-lg: calc(var(--pine-spacing-md) / 2);
+  --padding-inline-xl: 14px;
+  --margin-block-xs: calc(var(--pine-spacing-xxs) / 2);
+  --margin-inline-sm: calc(var(--pine-spacing-xs) / 2);
+  --margin-inline-xs: calc(var(--pine-spacing-xxs) / 2);
+  --margin-inline: 4px;
+  --margin-inline-lg: var(--pine-spacing-xs);
+  --margin-inline-xl: calc(var(--pine-spacing-md) / 2);
+  --dot-size: 4px;
+  --close-size: 10px;
+  --close-size-lg: 24px;
+  align-items: center;
+  border-radius: var(--border-radius);
+  display: inline-flex;
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  padding-block: var(--padding-block-sm);
+  padding-inline: var(--padding-inline);
+}
+
+:host(.pds-chip--accent) {
+  background: var(--background-accent);
+}
+:host(.pds-chip--accent) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--background-accent-dot);
+}
+:host(.pds-chip--accent) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--background-accent-interactive);
+}
+
+:host(.pds-chip--accent.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--background-accent-interactive);
+}
+
+:host(.pds-chip--danger) {
+  background: var(--background-danger);
+}
+:host(.pds-chip--danger) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--background-danger-dot);
+}
+:host(.pds-chip--danger) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--background-danger-interactive);
+}
+
+:host(.pds-chip--danger.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--background-danger-interactive);
+}
+
+:host(.pds-chip--info) {
+  background: var(--background-info);
+}
+:host(.pds-chip--info) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--background-info-dot);
+}
+:host(.pds-chip--info) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--background-info-interactive);
+}
+
+:host(.pds-chip--info.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--background-info-interactive);
+}
+
+:host(.pds-chip--neutral) {
+  background: var(--background-neutral);
+}
+:host(.pds-chip--neutral) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--background-neutral-dot);
+}
+:host(.pds-chip--neutral) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--background-neutral-interactive);
+}
+
+:host(.pds-chip--neutral.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--background-neutral-interactive);
+}
+
+:host(.pds-chip--success) {
+  background: var(--background-success);
+}
+:host(.pds-chip--success) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--background-success-dot);
+}
+:host(.pds-chip--success) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--background-success-interactive);
+}
+
+:host(.pds-chip--success.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--background-success-interactive);
+}
+
+:host(.pds-chip--warning) {
+  background: var(--background-warning);
+}
+:host(.pds-chip--warning) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--background-warning-dot);
+}
+:host(.pds-chip--warning) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--background-warning-interactive);
+}
+
+:host(.pds-chip--warning.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--background-warning-interactive);
+}
+
+.pds-chip__dot {
+  border: 1px solid transparent;
+  border-radius: 50%;
+  display: inline-block;
+  height: var(--dot-size);
+  margin-block-end: var(--margin-block-xs);
+  margin-inline-end: var(--margin-inline-sm);
+  width: var(--dot-size);
+}
+
+:host(.pds-chip--dropdown) {
+  padding: 0;
+}
+:host(.pds-chip--dropdown) .pds-chip__dot {
+  margin-block-end: 1px;
+  margin-block-start: var(--margin-block-xs);
+}
+
+.pds-chip__button {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--border-radius);
+  display: flex;
+  font-family: inherit;
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  padding-block: var(--padding-block-sm);
+  padding-inline: var(--padding-inline);
+}
+.pds-chip__button:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+.pds-chip__button pds-icon {
+  margin-inline-end: calc(var(--margin-inline-xs) * -1);
+  margin-inline-start: var(--margin-inline);
+}
+
+:host(.pds-chip--tag) {
+  padding-block: var(--padding-block-sm);
+}
+
+.pds-chip__close {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+  height: var(--close-size);
+  margin-inline-end: calc(var(--margin-inline-lg) * -1);
+  margin-inline-start: var(--margin-inline);
+  padding: var(--close-size);
+  position: relative;
+  width: var(--close-size);
+}
+.pds-chip__close pds-icon {
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.pds-chip__close:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+
+:host(.pds-chip--large) {
+  font-size: var(--font-size-lg);
+  padding-block: var(--padding-block-lg);
+  padding-inline: var(--padding-inline-xl);
+}
+:host(.pds-chip--large):host(.pds-chip--dropdown) {
+  padding-block: var(--padding-block);
+  padding-inline: var(--padding-inline-sm);
+}
+: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(--padding-inline-lg);
+}
+:host(.pds-chip--large) .pds-chip__close {
+  height: var(--close-size-lg);
+  margin-inline-end: calc(var(--margin-inline-xl) * -1);
+  width: var(--close-size-lg);
+}
+:host(.pds-chip--large):host(.pds-chip--tag) {
+  padding-block: var(--padding-block);
+}

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

@@ -0,0 +1,188 @@
+import { Host, h } from "@stencil/core";
+export class PdsChip {
+    constructor() {
+        this.handleCloseClick = () => {
+            this.pdsTagCloseClick.emit();
+        };
+        this.componentId = undefined;
+        this.sentiment = 'neutral';
+        this.dot = false;
+        this.label = undefined;
+        this.large = false;
+        this.variant = 'text';
+    }
+    classNames() {
+        const classNames = ['pds-chip'];
+        if (this.large) {
+            classNames.push('pds-chip--large');
+        }
+        if (this.variant) {
+            classNames.push('pds-chip--' + this.variant);
+        }
+        if (this.sentiment) {
+            classNames.push('pds-chip--' + this.sentiment);
+        }
+        return classNames.join('  ');
+    }
+    setChipContent() {
+        const isDropdown = this.variant === 'dropdown';
+        const chipContent = isDropdown ? (h("button", { class: "pds-chip__button", type: "button" }, this.dot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), this.label, h("pds-icon", { name: "down-small", size: "12px", "aria-hidden": "true" }))) : (h("span", { class: "pds-chip__label" }, this.dot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), this.label));
+        return chipContent;
+    }
+    render() {
+        return (h(Host, { class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { name: "remove", size: "12px" })))));
+    }
+    static get is() { return "pds-chip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-chip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-chip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "sentiment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning'",
+                    "resolved": "\"accent\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'neutral'"
+                        }],
+                    "text": "Sets the color scheme of the chip."
+                },
+                "attribute": "sentiment",
+                "reflect": false,
+                "defaultValue": "'neutral'"
+            },
+            "dot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether a dot should be displayed on the chip."
+                },
+                "attribute": "dot",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text label content of the chip."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "large": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether the chip should be rendered in a larger size."
+                },
+                "attribute": "large",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'tag' | 'dropdown'",
+                    "resolved": "\"dropdown\" | \"tag\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'text'"
+                        }],
+                    "text": "Sets the style variant of the chip."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'text'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsTagCloseClick",
+                "name": "pdsTagCloseClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event when close button is clicked on tag variant."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=pds-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-chip.js","sourceRoot":"","sources":["../../../../src/components/pds-chip/pds-chip.tsx"],"names":[],"mappings":"AAAA,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,CAAA;;yBAhCqF,SAAS;mBAMjF,KAAK;;qBAWH,KAAK;uBAM0B,MAAM;;IAW7C,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SACpC;QACD,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;QACD,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;SAChD;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,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,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,GAAY,CAC/D,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,IAAC,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,cAAQ,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBAAa,QAAQ;gBAC/F,gBAAU,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,GAAY,CACxC,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-chip',\n  styleUrl: '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   * Sets the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\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 rendered in a larger size.\n   * @defaultValue false\n   */\n  @Prop() large = false;\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 when close button is clicked on tag variant.\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 name=\"down-small\" 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 name=\"remove\" size=\"12px\"></pds-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,79 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-chip'),
+  component: 'pds-chip',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['onclick', 'pdsTagCloseClick'],
+    },
+  },
+  title: 'components/Chip'
+}
+
+const BaseTemplate = (args) => html`
+<pds-chip
+  component-id="${args.componentId}"
+  dot="${args.dot}"
+  label="${args.label}"
+  large="${args.large}"
+  sentiment="${args.sentiment}"
+  variant="${args.variant}"
+/>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  dot: false,
+  label: "label",
+  large: false,
+  sentiment: "neutral",
+  variant: "text",
+}
+
+export const Sentiment = BaseTemplate.bind();
+Sentiment.args = {
+  dot: false,
+  label: "label",
+  large: false,
+  sentiment: "success",
+  variant: "text",
+}
+
+export const Dots = BaseTemplate.bind();
+Dots.args = {
+  dot: true,
+  label: "label",
+  large: false,
+  sentiment: "neutral",
+  variant: "text",
+}
+
+export const Dropdown = BaseTemplate.bind();
+Dropdown.args = {
+  dot: false,
+  label: "label",
+  large: false,
+  sentiment: "neutral",
+  variant: "dropdown",
+}
+
+export const Tag = BaseTemplate.bind();
+Tag.args = {
+  dot: false,
+  label: "label",
+  large: false,
+  sentiment: "neutral",
+  variant: "tag",
+}
+
+export const Large = BaseTemplate.bind();
+Large.args = {
+  dot: false,
+  label: "label",
+  large: true,
+  sentiment: "neutral",
+  variant: "tag",
+}

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

@@ -0,0 +1,85 @@
+:host(.pds-copytext) {
+  --background: var(--pine-color-base-white);
+  --background-hover: var(--pine-color-neutral-grey-200);
+  --border: var(--pine-border-interactive);
+  --border-hover: var(--pine-border-interactive-hover-color);
+  --border-radius: var(--pine-border-radius-md);
+  --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);
+  --color-hover: var(--pine-color-neutral-charcoal-400);
+  --font-size: var(--pine-font-size-body);
+  --font-weight: var(--pine-font-weight-semibold);
+  --line-height: var(--pine-line-height-md);
+  --spacing-sm: var(--pine-spacing-sm);
+  --spacing-xs: var(--pine-spacing-xs);
+  --spacing-xxs: var(--pine-spacing-xxs);
+}
+:host(.pds-copytext) pds-button {
+  align-items: center;
+  background: var(--background);
+  border: 0;
+  border-radius: var(--border-radius);
+  display: inline-flex;
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  max-width: 100%;
+  padding: var(--spacing-xxs) var(--spacing-xs);
+}
+:host(.pds-copytext) pds-button:hover {
+  background-color: var(--background-hover);
+  color: var(--color-hover);
+}
+:host(.pds-copytext) pds-button:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+:host(.pds-copytext) pds-button span {
+  line-height: var(--line-height);
+  margin-inline-end: var(--spacing-xs);
+  white-space: nowrap;
+}
+:host(.pds-copytext) pds-button :nth-child(2) {
+  flex-shrink: 0;
+}
+:host(.pds-copytext):host(.pds-copytext--bordered) {
+  border: 0;
+  padding: 0;
+}
+:host(.pds-copytext):host(.pds-copytext--bordered) pds-button {
+  padding: 0;
+}
+:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover {
+  background: none;
+}
+:host(.pds-copytext):host(.pds-copytext--bordered) span {
+  border: var(--border);
+  border-radius: var(--border-radius);
+  margin-inline-end: var(--spacing-sm);
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+}
+:host(.pds-copytext):host(.pds-copytext--bordered) :hover span {
+  border-color: var(--border-hover);
+}
+:host(.pds-copytext):host(.pds-copytext--full-width) {
+  display: flex;
+  width: 100%;
+}
+:host(.pds-copytext):host(.pds-copytext--full-width) pds-button {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span {
+  text-align: left;
+  width: 100%;
+}
+:host(.pds-copytext):host(.pds-copytext--truncated) pds-button {
+  display: flex;
+  width: 100%;
+}
+:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span {
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  width: 100%;
+}