@pine-ds/core 1.3.0-dev.0 → 1.3.0-dev.3

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

@@ -0,0 +1,330 @@
+import { h, Host } from "@stencil/core";
+import { assignDescription, messageId } from "../../utils/form";
+import { PdsLabel } from "../_internal/pds-label/pds-label";
+export class PdsCheckbox {
+    constructor() {
+        this.handleCheckboxChange = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            const target = e.target;
+            this.checked = target.checked;
+            this.pdsCheckboxChange.emit({
+                checked: target.checked,
+                value: this.value
+            });
+        };
+        this.handleInput = () => {
+            this.pdsCheckboxInput.emit({
+                checked: this.checked,
+                value: this.value
+            });
+        };
+        this.checked = false;
+        this.componentId = undefined;
+        this.disabled = undefined;
+        this.errorMessage = undefined;
+        this.helperMessage = undefined;
+        this.indeterminate = undefined;
+        this.invalid = undefined;
+        this.label = undefined;
+        this.labelHidden = undefined;
+        this.name = undefined;
+        this.required = undefined;
+        this.value = undefined;
+    }
+    updateIndeterminate() {
+        this.indeterminate = undefined;
+    }
+    classNames() {
+        const classNames = [];
+        if (this.invalid) {
+            classNames.push('is-invalid');
+        }
+        if (this.indeterminate) {
+            classNames.push('is-indeterminate');
+        }
+        if (this.disabled) {
+            classNames.push('is-disabled');
+        }
+        return classNames.join('  ');
+    }
+    render() {
+        return (h(Host, { key: 'ad7d0dd8ce09b69abc0024541ff2b2d69a8db0b0', class: this.classNames() }, h("input", { key: 'fbc513372055e685d3beb16fba9c404db3d0528a', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), h(PdsLabel, { key: '12444bd716bc8ae952a0bf38471d00e6d3a9fe3b', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
+            h("div", { key: 'e85ffb338c44a3f924b75d1869c781db9a93350b', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '8071425f43f89ff44ce8bdb608737b1f574e2440', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+    }
+    static get is() { return "pds-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "It determines whether or not the checkbox is checked."
+                },
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "It determines whether or not the checkbox is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays message text describing an invalid state."
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for helper message below checkbox."
+                },
+                "attribute": "helper-message",
+                "reflect": false
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the checkbox will visually appear as indeterminate.\nOnly JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)."
+                },
+                "attribute": "indeterminate",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "It determines whether or not the checkbox is invalid."
+                },
+                "attribute": "invalid",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for label text next to checkbox."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "labelHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers."
+                },
+                "attribute": "label-hidden",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for checkbox `name` attribute."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "It determines whether or not the checkbox is required."
+                },
+                "attribute": "required",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the checkbox that is submitted with a form."
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsCheckboxChange",
+                "name": "pdsCheckboxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted that contains the `value` and `checked`."
+                },
+                "complexType": {
+                    "original": "CheckboxChangeEventDetail",
+                    "resolved": "CheckboxChangeEventDetail<any>",
+                    "references": {
+                        "CheckboxChangeEventDetail": {
+                            "location": "import",
+                            "path": "./checkbox-interface",
+                            "id": "src/components/pds-checkbox/checkbox-interface.ts::CheckboxChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsCheckboxInput",
+                "name": "pdsCheckboxInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "CheckboxChangeEventDetail",
+                    "resolved": "CheckboxChangeEventDetail<any>",
+                    "references": {
+                        "CheckboxChangeEventDetail": {
+                            "location": "import",
+                            "path": "./checkbox-interface",
+                            "id": "src/components/pds-checkbox/checkbox-interface.ts::CheckboxChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "updateIndeterminate"
+            }];
+    }
+}
+//# sourceMappingURL=pds-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrl: 'pds-checkbox.scss',\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop({ mutable: true }) indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() labelHidden: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          type=\"checkbox\"\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          id={this.componentId}\n          indeterminate={this.indeterminate}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleCheckboxChange}\n          onInput={this.handleInput}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,82 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-checkbox'),
+  args: {
+    checked: false,
+    disabled: false,
+    indeterminate: false,
+    invalid: false,
+    labelHidden: false,
+    required: false,
+  },
+  component: 'pds-checkbox',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['onchange', 'pdsCheckboxChange'],
+    },
+  },
+  title: 'components/Checkbox',
+}
+
+const BaseTemplate = (args) =>
+  html` <pds-checkbox
+    component-id=${args.componentId}
+    checked=${args.checked}
+    disabled=${args.disabled}
+    error-message=${args.errorMessage}
+    helper-message=${args.helperMessage}
+    indeterminate=${args.indeterminate}
+    invalid=${args.invalid}
+    label=${args.label}
+    label-hidden=${args.labelHidden}
+    name=${args.name}
+    required=${args.required}
+    value=${args.value}
+  />`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'default',
+  label: 'Label text',
+};
+
+export const Checked = BaseTemplate.bind();
+Checked.args = {
+  componentId: 'checked',
+  label: 'Label text',
+  checked: true,
+};
+
+export const Disabled = BaseTemplate.bind();
+Disabled.args = {
+  componentId: 'disabled',
+  label: 'Label text',
+  disabled: true,
+};
+
+export const Indeterminate = BaseTemplate.bind();
+Indeterminate.args = {
+  componentId: 'indeterminate',
+  label: 'Label text',
+  indeterminate: true,
+  checked: true,
+};
+
+export const withMessage = BaseTemplate.bind();
+withMessage.args = {
+  componentId: 'with-message',
+  label: 'Label text',
+  helperMessage: "This is short message text",
+};
+
+export const Invalid = BaseTemplate.bind();
+Invalid.args = {
+  componentId: 'invalid',
+  errorMessage: 'This is a short error message',
+  label: 'Label text',
+  invalid: true,
+};

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

@@ -0,0 +1,239 @@
+:host {
+  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
+  --border-radius: var(--pine-border-radius-200);
+  --color-background-accent: var(--pine-color-purple-100);
+  --color-background-accent-dot: var(--pine-color-purple-300);
+  --color-background-accent-interactive: var(--pine-color-purple-200);
+  --color-background-danger: var(--pine-color-red-100);
+  --color-background-danger-dot: var(--pine-color-red-300);
+  --color-background-danger-interactive: var(--pine-color-red-200);
+  --color-background-info: var(--pine-color-blue-100);
+  --color-background-info-dot: var(--pine-color-blue-300);
+  --color-background-info-interactive: var(--pine-color-blue-200);
+  --color-background-neutral: var(--pine-color-grey-300);
+  --color-background-neutral-dot: var(--pine-color-charcoal-100);
+  --color-background-neutral-interactive: var(--pine-color-grey-400);
+  --color-background-success: var(--pine-color-green-100);
+  --color-background-success-dot: var(--pine-color-green-300);
+  --color-background-success-interactive: var(--pine-color-green-200);
+  --color-background-warning: var(--pine-color-yellow-100);
+  --color-background-warning-dot: var(--pine-color-yellow-300);
+  --color-background-warning-interactive: var(--pine-color-yellow-200);
+  --font-size-sm: var(--pine-font-size-087);
+  --font-size-body: var(--pine-font-size-100);
+  --font-weight: var(--pine-font-weight-medium);
+  --line-height: var(--pine-line-height-100);
+  --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);
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-lg);
+}
+
+:host(.pds-chip--accent) {
+  background: var(--color-background-accent);
+}
+:host(.pds-chip--accent) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-accent-dot);
+}
+:host(.pds-chip--accent) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-accent-interactive);
+}
+
+:host(.pds-chip--accent.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-accent-interactive);
+}
+
+:host(.pds-chip--danger) {
+  background: var(--color-background-danger);
+}
+:host(.pds-chip--danger) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-danger-dot);
+}
+:host(.pds-chip--danger) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-danger-interactive);
+}
+
+:host(.pds-chip--danger.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-danger-interactive);
+}
+
+:host(.pds-chip--info) {
+  background: var(--color-background-info);
+}
+:host(.pds-chip--info) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-info-dot);
+}
+:host(.pds-chip--info) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-info-interactive);
+}
+
+:host(.pds-chip--info.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-info-interactive);
+}
+
+:host(.pds-chip--neutral) {
+  background: var(--color-background-neutral);
+}
+:host(.pds-chip--neutral) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-neutral-dot);
+}
+:host(.pds-chip--neutral) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-neutral-interactive);
+}
+
+:host(.pds-chip--neutral.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-neutral-interactive);
+}
+
+:host(.pds-chip--success) {
+  background: var(--color-background-success);
+}
+:host(.pds-chip--success) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-success-dot);
+}
+:host(.pds-chip--success) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-success-interactive);
+}
+
+:host(.pds-chip--success.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-success-interactive);
+}
+
+:host(.pds-chip--warning) {
+  background: var(--color-background-warning);
+}
+:host(.pds-chip--warning) .pds-chip__dot {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-warning-dot);
+}
+:host(.pds-chip--warning) .pds-chip__close:hover {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-warning-interactive);
+}
+
+:host(.pds-chip--warning.pds-chip--dropdown:hover) {
+  /* stylelint-disable-next-line */
+  background: var(--color-background-warning-interactive);
+}
+
+.pds-chip__dot {
+  border: 1px solid transparent;
+  border-radius: 50%;
+  display: inline-block;
+  height: var(--sizing-dot);
+  margin-block-end: var(--spacing-xxs);
+  margin-inline-end: var(--spacing-xs);
+  width: var(--sizing-dot);
+}
+
+: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);
+}
+
+.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-sm);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-lg);
+}
+.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);
+}
+
+.pds-chip__close {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+  height: var(--sizing-close);
+  margin-inline-end: calc(var(--spacing-md) * -1);
+  margin-inline-start: var(--spacing-xs);
+  padding: var(--sizing-close);
+  position: relative;
+  width: var(--sizing-close);
+}
+.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-body);
+  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-body);
+  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);
+}
+:host(.pds-chip--large):host(.pds-chip--tag) {
+  padding-block: var(--spacing-xs);
+}