@pine-ds/core 1.2.0 → 1.3.0-dev.2

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

@@ -1,330 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,82 +0,0 @@
-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

@@ -1,239 +0,0 @@
-: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);
-}