@pine-ds/core 2.16.0-mercury.0 → 2.16.1

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

@@ -0,0 +1,361 @@
+import { Host, h } from "@stencil/core";
+import { messageId } from "../../utils/form";
+import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { danger, enlarge } from "@pine-ds/icons/icons";
+export class PdsSelect {
+    constructor() {
+        /**
+         * Emits an event on input change.
+        */
+        this.onSelectUpdate = (e) => {
+            const target = e.target;
+            const values = Array.from(target.options)
+                .filter((option) => (option.selected))
+                .map((option) => (option.value));
+            if (values.length === 1 && !this.multiple) {
+                this.value = values[0];
+            }
+            else {
+                this.value = values;
+            }
+            this.pdsSelectChange.emit(e);
+        };
+        /**
+         * Handles the change event for the slot element.
+         * This method is triggered when the slot content changes.
+         * It updates the inner HTML of the select element by cloning and appending
+         * the assigned <option> elements from the slot.
+         */
+        this.handleSlotChange = () => {
+            const slot = this.slotContainer.querySelector('slot');
+            this.selectEl.innerHTML = '';
+            const assignedElements = slot.assignedElements({ flatten: true });
+            assignedElements.forEach((item) => {
+                if (['OPTION', 'OPTGROUP'].includes(item.tagName)) {
+                    const clonedItem = item.cloneNode(true);
+                    if (clonedItem.tagName === 'OPTION' && clonedItem.value === this.value) {
+                        clonedItem.selected = true;
+                    }
+                    this.selectEl.appendChild(clonedItem);
+                }
+            });
+            this.updateSelectedOption();
+        };
+        this.autocomplete = undefined;
+        this.componentId = undefined;
+        this.disabled = false;
+        this.errorMessage = undefined;
+        this.helperMessage = undefined;
+        this.invalid = undefined;
+        this.label = undefined;
+        this.multiple = false;
+        this.name = undefined;
+        this.required = false;
+        this.value = undefined;
+    }
+    /**
+     * Handles the change in the value of the select component.
+     * This method is called whenever the value of the select component changes.
+     * It updates the selected option accordingly.
+     */
+    valueChanged() {
+        this.updateSelectedOption();
+    }
+    componentWillLoad() {
+        this.updateSelectedOption();
+    }
+    /**
+     * Updates the selected option in the select element based on the current value.
+     *
+     * This method iterates through all the options of the select element and sets the
+     * 'selected' attribute on the option that matches the current value. If an option
+     * does not match the current value, the 'selected' attribute is removed.
+     *
+     * @private
+     * @returns {void}
+     */
+    updateSelectedOption() {
+        if (this.selectEl) {
+            const options = this.selectEl.options;
+            // Update the selected attribute for all options.
+            Array.from(options).map((option) => {
+                if (Array.isArray(this.value)) {
+                    option.selected = this.value.includes(option.value);
+                }
+                else {
+                    option.selected = this.value === option.value;
+                }
+            });
+        }
+        ;
+    }
+    getHelperMessage() {
+        return this.helperMessage && (h("p", { class: "pds-select__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage));
+    }
+    getErrorMessage() {
+        return this.errorMessage && (h("p", { class: "pds-select__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { icon: danger, size: "small" }), this.errorMessage));
+    }
+    renderMessages() {
+        if (!this.helperMessage && !this.errorMessage)
+            return null;
+        return (h("div", { class: "pds-select__message" }, this.getHelperMessage(), this.getErrorMessage()));
+    }
+    classNames() {
+        const classNames = [];
+        if (this.invalid) {
+            classNames.push('is-invalid');
+        }
+        if (this.disabled) {
+            classNames.push('is-disabled');
+        }
+        return classNames.join('  ');
+    }
+    render() {
+        return (h(Host, { key: '165255feccf783f5be54aafd3d662f74c6fe376d', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '15a65039af0d9f33a3cc2e3402e4f883fbcbee17', class: "pds-select" }, h(PdsLabel, { key: 'aca9088817a4faa1d077e2a0bca640d62d940bf1', htmlFor: this.componentId, text: this.label }), h("select", { key: 'ed87a23fc18c58d7a12f69ea0c934d4779955530', autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'c62b99979077a1d0d513cb222643fcdac5b8918a', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '44c53a70f4cc009fe601e868a4bbf251e45ff8a1', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '7b23da1edb11078a6471aa3a2847b0e54bb1b6bc', class: "pds-select__select-icon", icon: enlarge }))));
+    }
+    static get is() { return "pds-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if and how the browser provides `autocomplete` assistance for the field."
+                },
+                "attribute": "autocomplete",
+                "reflect": 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."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Indicates whether or not the select field is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays error 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": "Displays helper message text below select."
+                },
+                "attribute": "helper-message",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether or not the select is invalid."
+                },
+                "attribute": "invalid",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to be displayed as the select label."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Indicates whether multiple options can be selected."
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the name. Submitted with the form name/value pair."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Indicates whether or not the select field is required."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value(s) of the selected option(s)."
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsSelectChange",
+                "name": "pdsSelectChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a keyboard input occurs."
+                },
+                "complexType": {
+                    "original": "InputEvent",
+                    "resolved": "InputEvent",
+                    "references": {
+                        "InputEvent": {
+                            "location": "global",
+                            "id": "global::InputEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}
+//# sourceMappingURL=pds-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-select.js","sourceRoot":"","sources":["../../../src/components/pds-select/pds-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-select',\n  styleUrl: 'pds-select.scss',\n  shadow: true,\n})\nexport class PdsSelect {\n\n  private selectEl!: HTMLSelectElement;\n  private slotContainer!: HTMLDivElement;\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the select field is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Displays helper message text below select.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines whether or not the select is invalid.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the select label.\n   */\n  @Prop() label: string;\n\n  /**\n   * Indicates whether multiple options can be selected.\n   * @defaultValue false\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Indicates whether or not the select field is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n  @Watch('value')\n  /**\n   * Handles the change in the value of the select component.\n   * This method is called whenever the value of the select component changes.\n   * It updates the selected option accordingly.\n   */\n  valueChanged() {\n    this.updateSelectedOption();\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\n  }\n\n  /**\n   * Updates the selected option in the select element based on the current value.\n   *\n   * This method iterates through all the options of the select element and sets the\n   * 'selected' attribute on the option that matches the current value. If an option\n   * does not match the current value, the 'selected' attribute is removed.\n   *\n   * @private\n   * @returns {void}\n   */\n  private updateSelectedOption() {\n    if (this.selectEl) {\n      const options = this.selectEl.options;\n\n      // Update the selected attribute for all options.\n      Array.from(options).map((option: HTMLOptionElement) => {\n        if (Array.isArray(this.value)) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n    };\n  }\n\n  /**\n   * Emits an event on input change.\n  */\n  private onSelectUpdate = (e: Event) => {\n    const target = e.target as HTMLSelectElement\n\n    const values = Array.from(target.options)\n        .filter((option) => ( option.selected))\n        .map((option) => ( option.value));\n\n    if (values.length === 1 && !this.multiple) {\n        this.value = values[0];\n    } else {\n        this.value = values;\n    }\n\n    this.pdsSelectChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Handles the change event for the slot element.\n   * This method is triggered when the slot content changes.\n   * It updates the inner HTML of the select element by cloning and appending\n   * the assigned <option> elements from the slot.\n   */\n  private handleSlotChange = () => {\n    const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n    this.selectEl.innerHTML = '';\n    const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement | HTMLOptGroupElement)[];\n\n    assignedElements.forEach((item) => {\n      if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n        const clonedItem = item.cloneNode(true) as HTMLOptionElement | HTMLOptGroupElement;\n        if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n          (clonedItem as HTMLOptionElement).selected = true;\n        }\n        this.selectEl.appendChild(clonedItem);\n      }\n    });\n\n    this.updateSelectedOption();\n  };\n\n  private getHelperMessage() {\n    return this.helperMessage && (\n      <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n        {this.helperMessage}\n      </p>\n    );\n  }\n\n  private getErrorMessage() {\n    return this.errorMessage && (\n      <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n        <pds-icon icon={danger} size=\"small\"></pds-icon>\n        {this.errorMessage}\n      </p>\n    );\n  }\n\n  private renderMessages() {\n    if (!this.helperMessage && !this.errorMessage) return null;\n\n    return (\n      <div class=\"pds-select__message\">\n        {this.getHelperMessage()}\n        {this.getErrorMessage()}\n      </div>\n    );\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()}>\n        <div class=\"pds-select\">\n          <PdsLabel htmlFor={this.componentId} text={this.label} />\n            <select\n              autocomplete={this.autocomplete || undefined}\n              class=\"pds-select__field\"\n              disabled={this.disabled}\n              id={this.componentId}\n              multiple={this.multiple}\n              name={this.name}\n              onChange={this.onSelectUpdate}\n              required={this.required}\n              ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n            ></select>\n          <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n          {this.renderMessages()}\n          {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,153 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  args: {
+    autocomplete: null,
+    disabled: false,
+    errorMessage: null,
+    helperMessage: null,
+    invalid: false,
+    multiple: false,
+    value: null,
+  },
+  argTypes: extractArgTypes('pds-select'),
+  component: 'pds-select',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['onchange', 'pdsSelectChange'],
+    },
+  },
+  title: 'components/Select',
+};
+
+const options = [
+  { value: 'paul', label: 'Paul McCartney' },
+  { value: 'john', label: 'John Lennon' },
+  { value: 'george', label: 'George Harrison' },
+  { value: 'ringo', label: 'Ringo Starr' },
+];
+
+const optgroupOptions = [
+  {
+    label: 'Correct answers',
+    options: [
+      { value: 'paul', label: 'Paul McCartney' },
+      { value: 'john', label: 'John Lennon' },
+      { value: 'george', label: 'George Harrison' },
+    ],
+  },
+  {
+    label: 'Incorrect answers',
+    options: [{ value: 'ringo', label: 'Ringo Starr' }],
+  },
+];
+
+const BaseTemplate = (args) =>
+  html`<pds-select
+    autocomplete="${args.autocomplete}"
+    component-id="${args.componentId}"
+    disabled="${args.disabled}"
+    error-message="${args.errorMessage}"
+    helper-message="${args.helperMessage}"
+    invalid="${args.invalid}"
+    label="${args.label}"
+    multiple="${args.multiple}"
+    name="${args.name}"
+    required="${args.required}"
+    type="${args.type}"
+    value="${args.value}"
+  >
+    ${options.map((option) => html`<option value="${option.value}">${option.label}</option>`)}
+  </pds-select>`;
+
+const OptgroupTemplate = (args) =>
+  html`<pds-select
+    autocomplete="${args.autocomplete}"
+    component-id="${args.componentId}"
+    disabled="${args.disabled}"
+    error-message="${args.errorMessage}"
+    helper-message="${args.helperMessage}"
+    invalid="${args.invalid}"
+    label="${args.label}"
+    multiple="${args.multiple}"
+    name="${args.name}"
+    required="${args.required}"
+    type="${args.type}"
+    value="${args.value}"
+  >
+    ${optgroupOptions.map(
+      (group) => html`<optgroup label="${group.label}">${group.options.map((option) => html`<option value="${option.value}">${option.label}</option>`)}</optgroup>`,
+    )}
+  </pds-select>`;
+
+export const Default = BaseTemplate.bind({});
+Default.args = {
+  componentId: 'pds-select-default-example',
+  disabled: false,
+  label: 'Select your favorite Beatle',
+  name: 'beatles',
+  required: true,
+  value: 'paul',
+};
+
+export const Disabled = BaseTemplate.bind({});
+Disabled.args = {
+  componentId: 'pds-select-disabled-example',
+  disabled: true,
+  label: 'Select your favorite Beatle',
+  name: 'beatles',
+  value: 'george',
+};
+
+export const withMessage = BaseTemplate.bind({});
+withMessage.args = {
+  componentId: 'pds-select-message-example',
+  disabled: false,
+  helperMessage: "Please don't pick Ringo",
+  label: 'Select your favorite Beatle',
+  name: 'beatles',
+  value: 'john',
+};
+
+export const Invalid = BaseTemplate.bind({});
+Invalid.args = {
+  componentId: 'pds-select-invalid-example',
+  disabled: false,
+  errorMessage: 'Its not Ringo',
+  invalid: true,
+  label: 'Select your favorite Beatle',
+  name: 'beatles',
+  value: 'ringo',
+};
+
+export const Autocomplete = BaseTemplate.bind({});
+Autocomplete.args = {
+  componentId: 'pds-select-autocomplete-example',
+  disabled: false,
+  autocomplete: 'on',
+  label: 'Select your favorite Beatle',
+  name: 'beatles',
+  value: 'paul',
+};
+
+export const Multiple = BaseTemplate.bind({});
+Multiple.args = {
+  componentId: 'pds-select-multiple-example',
+  disabled: false,
+  helperMessage: "Use 'Command' on your keyboard to select multiple options",
+  label: 'Select your favorite Beatle',
+  multiple: true,
+  name: 'beatles',
+};
+
+export const WithOptgroup = OptgroupTemplate.bind({});
+WithOptgroup.args = {
+  componentId: 'pds-select-optgroup-example',
+  disabled: false,
+  label: 'Select your favorite Beatle',
+  name: 'beatles',
+  value: 'george',
+};

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.css

@@ -1,37 +1,28 @@
 :host(.pds-sortable-item) {
-  --border-radius: var(--pine-border-radius-125);
-  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
   --box-shadow: var(--pine-box-shadow-400);
-  --color-background-default: var(--pine-color-white);
-  --color-background-interactive: var(--pine-color-grey-200);
-  --color-interactive-handle: var(--pine-color-blue-300);
-  --spacing-margin-inline-end: var(--pine-spacing-300);
-  --spacing-padding-block-xs: var(--pine-spacing-100);
-  --spacing-padding-inline: var(--pine-spacing-300);
-  --spacing-padding-inline-start: var(--pine-spacing-300);
   align-items: center;
   display: flex;
-  padding-block: var(--spacing-padding-block-xs);
-  padding-inline: var(--spacing-padding-inline);
+  padding-block: var(--pine-dimension-xs);
+  padding-inline: var(--pine-dimension-md);
 }
 :host(.pds-sortable-item) .pds-sortable-item__actions {
   margin-inline-start: auto;
-  padding-inline-start: var(--spacing-padding-inline-start);
+  padding-inline-start: var(--pine-dimension-md);
 }
 :host(.pds-sortable-item) .pds-sortable-item__handle {
   line-height: 1;
-  margin-inline-end: var(--spacing-margin-inline-end);
+  margin-inline-end: var(--pine-dimension-md);
 }
 .pds-sortable--bordered :host(.pds-sortable-item):first-child {
-  border-start-end-radius: var(--border-radius);
-  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: calc(var(--pine-dimension-xs) * 1.25);
+  border-start-start-radius: calc(var(--pine-dimension-xs) * 1.25);
 }
 .pds-sortable--bordered :host(.pds-sortable-item):last-child {
-  border-end-end-radius: var(--border-radius);
-  border-end-start-radius: var(--border-radius);
+  border-end-end-radius: calc(var(--pine-dimension-xs) * 1.25);
+  border-end-start-radius: calc(var(--pine-dimension-xs) * 1.25);
 }
 .pds-sortable--divided :host(.pds-sortable-item) {
-  border-block-end: var(--border-default);
+  border-block-end: var(--pine-border);
 }
 .pds-sortable--divided :host(.pds-sortable-item):last-child {
   border-block-end: 0;
@@ -44,20 +35,20 @@
 }
 
 :host(.pds-sortable-item):hover {
-  background-color: var(--color-background-interactive);
+  background-color: var(--pine-color-background-container-hover);
 }
 :host(.pds-sortable-item):hover pds-icon {
-  color: var(--color-interactive-handle);
+  color: var(--pine-color-info);
 }
 
 :host(.pds-sortable-item--drag) {
-  background-color: var(--color-background-default);
+  background-color: var(--pine-color-background-container);
   border-radius: 0;
   box-shadow: var(--box-shadow);
   opacity: 1;
 }
 
 :host(.pds-sortable-item--ghost) {
-  background-color: var(--color-background-interactive);
+  background-color: var(--pine-color-background-container-hover);
   border-radius: 0;
 }

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js

@@ -18,7 +18,7 @@ export class PdsSortableItem {
         }
     }
     render() {
-        return (h(Host, { key: '60214e183314736338f9b38cb93a9c5989e16cdf', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '7cc252c99598f384a87518c101d0772a4ce344e4', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'e2b219927cf717fa53112066ba3fe0ac12688edd', icon: handleIcon }))), h("slot", { key: 'e259bfbf7e8c848567d07639e62adfe5781f29b8' }), this.enableActions && (h("div", { key: 'e83d28d55b6fee971575433a3e3f8b1d5b7e52fe', class: "pds-sortable-item__actions" }, h("slot", { key: '7ac52a8109e49cfff96cead45a3b318646c7f064', name: "sortable-item-actions" })))));
+        return (h(Host, { key: '53229fa4308319c59c520bdf84291fb738d6f7c2', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '28a4a4fe6a946880e7501fd2a0697152f0665f4c', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'e45540e3787977b0861418455f6a0689cfcec887', icon: handleIcon }))), h("slot", { key: 'bca5cbb3c4f5b4f1732030428660f5ae976cced0' }), this.enableActions && (h("div", { key: '2928a942128e4bbad4c869f42b59d10501af4419', class: "pds-sortable-item__actions" }, h("slot", { key: 'c2a4e2a47300f1c8f06a23ba134c436a591442bf', name: "sortable-item-actions" })))));
     }
     static get is() { return "pds-sortable-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,10 +1,8 @@
 :host(.pds-sortable) {
-  --border-radius: var(--pine-border-radius-050);
-  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
   display: flex;
   flex-direction: column;
 }
 :host(.pds-sortable).pds-sortable--bordered {
-  border: var(--border-default);
-  border-radius: var(--border-radius);
+  border: var(--pine-border);
+  border-radius: var(--pine-dimension-2xs);
 }

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

@@ -35,7 +35,7 @@ export class PdsSortable {
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: '030286aa0de920f4b5ce4470f3d1b5ab14be2792', class: this.classNames(), id: this.componentId }, h("slot", { key: 'c38822d7c82273c2fbc28d09c919e4c179ebb49d' })));
+        return (h(Host, { key: '42b9c4dc796b7928b0409b50f25294ce55567191', class: this.classNames(), id: this.componentId }, h("slot", { key: '20490c74d25702c878832a7de858a978d2419289' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-sortable.js","sourceRoot":"","sources":["../../../src/components/pds-sortable/pds-sortable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAOlC,MAAM,OAAO,WAAW;;sBAYY,KAAK;;wBAUH,KAAK;0BAKF,KAAK;;IAEpC,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,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YAClC,UAAU,CAAC,IAAI,CAAC,6BAA6B,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,gBAAgB;QAEd,IAAI,eAAe,GAAiB;YAClC,SAAS,EAAE,GAAG;YACd,UAAU,EAAE,0BAA0B;YACtC,SAAS,EAAE,yBAAyB;YACpC,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE;gBACb,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACtC,CAAC;SACF,CAAC;QAEF,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjC,eAAe,mCACV,eAAe,KAClB,MAAM,EAAE,4BAA4B,GACrC,CAAC;QACJ,CAAC;QAED,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YAClD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { SortableType } from './sortable-interface';\nimport Sortable from 'sortablejs';\n\n@Component({\n  tag: 'pds-sortable',\n  styleUrl: 'pds-sortable.scss',\n  scoped: true,\n})\nexport class PdsSortable {\n  @Element() el: HTMLPdsSortableElement;\n\n  /**\n   * Event emitted when a sortable item is moved.\n   */\n  @Event() pdsSortableItemMoved: EventEmitter;\n\n  /**\n   * Determines whether `sortable` should have a border.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) border = false;\n\n  /**\n   * A unique identifier used for the sortable container `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Deternines whether `sortable` items should be divided with border.\n   */\n  @Prop({ reflect: true }) dividers = false;\n\n  /**\n   * Determines the grabbable area for the `pds-sortable-item`.\n   */\n  @Prop() handleType: 'handle' | 'row' = 'row';\n\n  private classNames() {\n    const classNames = ['pds-sortable'];\n\n    if (this.border) {\n      classNames.push('pds-sortable--bordered');\n    }\n\n    if (this.dividers) {\n      classNames.push('pds-sortable--divided');\n    }\n\n    if (this.handleType !== undefined) {\n      classNames.push(`pds-sortable--handle-type-${this.handleType}`);\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentDidLoad() {\n\n    let sortableOptions: SortableType = {\n      animation: 150,\n      ghostClass: 'pds-sortable-item--ghost',\n      dragClass: 'pds-sortable-item--drag',\n      onEnd: (evt) => {\n        this.pdsSortableItemMoved.emit(evt);\n      },\n    };\n\n    if (this.handleType === 'handle') {\n      sortableOptions = {\n        ...sortableOptions,\n        handle: '.pds-sortable-item__handle',\n      };\n    }\n\n    Sortable.create(this.el, sortableOptions);\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-sortable.js","sourceRoot":"","sources":["../../../src/components/pds-sortable/pds-sortable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAOlC,MAAM,OAAO,WAAW;;sBAYY,KAAK;;wBAUH,KAAK;0BAKF,KAAK;;IAEpC,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,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YAClC,UAAU,CAAC,IAAI,CAAC,6BAA6B,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,gBAAgB;QAEd,IAAI,eAAe,GAAiB;YAClC,SAAS,EAAE,GAAG;YACd,UAAU,EAAE,0BAA0B;YACtC,SAAS,EAAE,yBAAyB;YACpC,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE;gBACb,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACtC,CAAC;SACF,CAAC;QAEF,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjC,eAAe,mCACV,eAAe,KAClB,MAAM,EAAE,4BAA4B,GACrC,CAAC;QACJ,CAAC;QAED,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YAClD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { SortableType } from './sortable-interface';\nimport Sortable from 'sortablejs';\n\n@Component({\n  tag: 'pds-sortable',\n  styleUrls: ['pds-sortable.scss'],\n  scoped: true,\n})\nexport class PdsSortable {\n  @Element() el: HTMLPdsSortableElement;\n\n  /**\n   * Event emitted when a sortable item is moved.\n   */\n  @Event() pdsSortableItemMoved: EventEmitter;\n\n  /**\n   * Determines whether `sortable` should have a border.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) border = false;\n\n  /**\n   * A unique identifier used for the sortable container `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Deternines whether `sortable` items should be divided with border.\n   */\n  @Prop({ reflect: true }) dividers = false;\n\n  /**\n   * Determines the grabbable area for the `pds-sortable-item`.\n   */\n  @Prop() handleType: 'handle' | 'row' = 'row';\n\n  private classNames() {\n    const classNames = ['pds-sortable'];\n\n    if (this.border) {\n      classNames.push('pds-sortable--bordered');\n    }\n\n    if (this.dividers) {\n      classNames.push('pds-sortable--divided');\n    }\n\n    if (this.handleType !== undefined) {\n      classNames.push(`pds-sortable--handle-type-${this.handleType}`);\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentDidLoad() {\n\n    let sortableOptions: SortableType = {\n      animation: 150,\n      ghostClass: 'pds-sortable-item--ghost',\n      dragClass: 'pds-sortable-item--drag',\n      onEnd: (evt) => {\n        this.pdsSortableItemMoved.emit(evt);\n      },\n    };\n\n    if (this.handleType === 'handle') {\n      sortableOptions = {\n        ...sortableOptions,\n        handle: '.pds-sortable-item__handle',\n      };\n    }\n\n    Sortable.create(this.el, sortableOptions);\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}