@pine-ds/core 0.2.3 → 1.0.0

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

@@ -1,20 +1,23 @@
 :host {
-  --background-color: var(--pine-color-base-white);
-  --background-color-hover: var(--pine-color-neutral-grey-100);
-  --background-color-disabled: var(--pine-color-neutral-grey-200);
-  --border: var(--pine-border-interactive);
-  --border-color-hover: var(--pine-border-interactive-hover-color);
-  --border-color-disabled: var(--pine-color-neutral-grey-300);
+  --border-interactive-default: var(--pine-border-width-thin) solid var( --pine-color-grey-400);
   --border-radius: 50%;
-  --color: var(--pine-color-neutral-charcoal-200);
-  --color-checked: var(--pine-color-neutral-charcoal-500);
-  --color-disabled: var(--pine-color-neutral-grey-500);
-  --color-focus: var(--pine-color-primary-200);
+  --box-shadow-focus: 0 0 0 2px var(--color-focus);
+  --box-shadow-focus-error: 0 0 0 2px var(--color-invalid-focus);
+  --color: var(--pine-color-charcoal-200);
+  --color-background: var(--pine-color-white);
+  --color-background-hover: var(--pine-color-grey-100);
+  --color-background-disabled: var(--pine-color-grey-200);
+  --color-border-hover: var(--pine-border-interactive-hover);
+  --color-border-disabled: var(--pine-color-grey-300);
+  --color-checked: var(--pine-color-charcoal-500);
+  --color-disabled: var(---pine-color-grey-500);
+  --color-focus: var(--pine-color-blue-200);
   --color-invalid: var(--pine-color-red-300);
   --color-invalid-focus: var(--pine-color-red-200);
-  --font-size: var(--pine-font-size-body-sm);
-  --input-size: 16px;
-  --check-size: 6px;
+  --font-size: var(--pine-font-size-087);
+  --sizing-check-size: 6px;
+  --sizing-input-size: 16px;
+  --sizing-margin-block-start: 6px;
   align-items: center;
   display: flex;
   flex-flow: row wrap;
@@ -27,7 +30,7 @@
   background: var(--color-invalid);
 }
 :host(.is-invalid) input:focus-visible {
-  box-shadow: 0 0 0 4px var(--color-invalid-focus);
+  box-shadow: var(--box-shadow-focus-error);
   outline: none;
 }
 :host(.is-invalid) label,
@@ -37,54 +40,54 @@
 
 input {
   appearance: none;
-  border: var(--border);
+  border: var(--border-interactive-default);
   border-radius: var(--border-radius);
-  height: var(--input-size);
+  height: var(--sizing-input-size);
   margin: 0;
   position: relative;
-  width: var(--input-size);
+  width: var(--sizing-input-size);
 }
 input:hover {
-  background: var(--background-color-hover);
-  border-color: var(--border-color-hover);
+  background: var(--color-background-hover);
+  border-color: var(--color-border-hover);
 }
 input:checked {
   background: var(--color-checked);
   border-color: var(--color-checked);
 }
 input:checked::after {
-  background: var(--background-color);
+  background: var(--color-background);
   border-radius: 50%;
   content: "";
   display: block;
-  height: var(--check-size);
+  height: var(--sizing-check-size);
   left: 50%;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
-  width: var(--check-size);
+  width: var(--sizing-check-size);
 }
 input:disabled {
-  background: var(--background-color-disabled);
-  border-color: var(--border-color-disabled);
+  background: var(--color-background-disabled);
+  border-color: var(--color-border-disabled);
   cursor: not-allowed;
 }
 input:disabled:checked {
   background: var(--color-disabled);
-  border-color: var(--border-color-disabled);
+  border-color: var(--color-border-disabled);
 }
 input:disabled:checked::after {
-  border-color: var(--border-color-disabled);
+  border-color: var(--color-border-disabled);
 }
 input:disabled + label {
-  color: var(--border-color-hover);
+  color: var(--color-border-hover);
   cursor: not-allowed;
 }
 input:disabled ~ .pds-radio__message {
   color: var(--color-disabled);
 }
 input:focus-visible {
-  box-shadow: 0 0 0 4px var(--color-focus);
+  box-shadow: var(--box-shadow-focus);
   outline: none;
 }
 
@@ -95,7 +98,7 @@ label {
 .pds-radio__message {
   color: var(--color);
   font-size: var(--font-size);
-  margin-block-start: var(--check-size);
+  margin-block-start: var(--sizing-margin-block-start);
   margin-inline-start: 26px;
   width: 100%;
 }

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

@@ -33,9 +33,9 @@ export class PdsRadio {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '1427cdb78f9e67d64f1d41fbbcd69f142568be54', class: this.classNames() }, h("input", { key: 'e657db2c4d043871913ba314adb0b1666001dc8e', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), h(PdsLabel, { key: 'c7a15d4d55f7a82f21754d5a5c711ae2b60b5cdc', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            h("div", { class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+        return (h(Host, { key: 'e2fb2e853619e2dbcee43ba6141d6782f521a92d', class: this.classNames() }, h("input", { key: '944f31d74b9d54fad8d39ec4221bf76cb717c352', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), h(PdsLabel, { key: '4da032a55ddb9e8f92ddde9a8e5238836345ccde', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
+            h("div", { key: '529acc87ec6154e1d01877cff7f3977ed878c02b', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'f5850864b0fa702cb129c79bee3770ea768c614d', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-radio.js","sourceRoot":"","sources":["../../../src/components/pds-radio/pds-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAO5D,MAAM,OAAO,QAAQ;;QA4DX,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC,CAAA;uBAhEiB,KAAK;wBAMJ,KAAK;;uBAWN,KAAK;;;;;wBA0BJ,KAAK;;;IAuBhB,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;YAC5B,kFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC;YACF,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;YACxD,IAAI,CAAC,aAAa;gBACjB,WACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,WACE,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-radio',\n  styleUrl: 'pds-radio.scss',\n  scoped: true,\n})\nexport class PdsRadio {\n  /**\n   * Determines whether or not the radio is checked.\n   * @defaultValue false\n   */\n  @Prop() checked = false;\n\n  /**\n   * Determines whether or not the radio is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Determines whether or not the radio is invalid.\n   * @defaultValue false\n   */\n  @Prop() invalid = 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   * String used for label text next to radio.\n   */\n  @Prop() label: string;\n\n  /**\n   * String used for helper message below radio.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * String used for radio `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines whether or not the radio is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n   */\n  @Event() pdsRadioChange: EventEmitter<boolean>;\n\n  private handleRadioChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const isChecked = target.checked;\n\n    this.pdsRadioChange.emit(isChecked);\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) {\n      classNames.push('is-invalid');\n    }\n    if (this.disabled) {\n      classNames.push('is-disabled');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"radio\"\n          id={this.componentId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleRadioChange}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={'pds-radio__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-radio__message pds-radio__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"]}
+{"version":3,"file":"pds-radio.js","sourceRoot":"","sources":["../../../src/components/pds-radio/pds-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAO5D,MAAM,OAAO,QAAQ;;QA4DX,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC,CAAA;uBAhEiB,KAAK;wBAMJ,KAAK;;uBAWN,KAAK;;;;;wBA0BJ,KAAK;;;IAuBhB,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;YAC5B,kFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC;YACF,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;YACxD,IAAI,CAAC,aAAa;gBACjB,4DACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,4DACE,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-radio',\n  styleUrl: 'pds-radio.scss',\n  scoped: true,\n})\nexport class PdsRadio {\n  /**\n   * Determines whether or not the radio is checked.\n   * @defaultValue false\n   */\n  @Prop() checked = false;\n\n  /**\n   * Determines whether or not the radio is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Determines whether or not the radio is invalid.\n   * @defaultValue false\n   */\n  @Prop() invalid = 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   * String used for label text next to radio.\n   */\n  @Prop() label: string;\n\n  /**\n   * String used for helper message below radio.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * String used for radio `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines whether or not the radio is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n   */\n  @Event() pdsRadioChange: EventEmitter<boolean>;\n\n  private handleRadioChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const isChecked = target.checked;\n\n    this.pdsRadioChange.emit(isChecked);\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) {\n      classNames.push('is-invalid');\n    }\n    if (this.disabled) {\n      classNames.push('is-disabled');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"radio\"\n          id={this.componentId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleRadioChange}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={'pds-radio__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-radio__message pds-radio__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-row/pds-row.js

@@ -32,7 +32,7 @@ export class PdsRow {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return (h(Host, { key: 'a0661e2e13c93d93f8fd8a2f692adce3eac2b9f7', class: `pds-row ${rowClasses}`, style: rowInlineStyles }));
+        return (h(Host, { key: 'daa2cfa29f83972505f4f7711f4a7c11cd489f9e', class: `pds-row ${rowClasses}`, style: rowInlineStyles }));
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {

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

@@ -1,26 +1,26 @@
 :host(.pds-sortable-item) {
-  --background-color-interactive: var(--pine-color-neutral-grey-200);
-  --background-color: var(--pine-color-base-white);
-  --border-radius: var(--pine-border-radius-md);
-  --border: var(--pine-border-default);
+  --border-radius: var(--pine-border-radius-125);
+  --border-default: var(--pine-border-default);
   --box-shadow: var(--pine-box-shadow-lg);
-  --color-interactive-handle: var(--pine-color-primary-300);
-  --margin-inline-end: var(--pine-spacing-md);
-  --padding-block-xs: var(--pine-spacing-xs);
-  --padding-inline: var(--pine-spacing-md);
-  --padding-inline-start: var(--pine-spacing-md);
+  --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(--padding-block-xs);
-  padding-inline: var(--padding-inline);
+  padding-block: var(--spacing-padding-block-xs);
+  padding-inline: var(--spacing-padding-inline);
 }
 :host(.pds-sortable-item) .pds-sortable-item__actions {
   margin-inline-start: auto;
-  padding-inline-start: var(--padding-inline-start);
+  padding-inline-start: var(--spacing-padding-inline-start);
 }
 :host(.pds-sortable-item) .pds-sortable-item__handle {
   line-height: 1;
-  margin-inline-end: var(--margin-inline-end);
+  margin-inline-end: var(--spacing-margin-inline-end);
 }
 .pds-sortable--bordered :host(.pds-sortable-item):first-child {
   border-start-end-radius: var(--border-radius);
@@ -31,7 +31,7 @@
   border-end-start-radius: var(--border-radius);
 }
 .pds-sortable--divided :host(.pds-sortable-item) {
-  border-block-end: var(--border);
+  border-block-end: var(--border-default);
 }
 .pds-sortable--divided :host(.pds-sortable-item):last-child {
   border-block-end: 0;
@@ -44,20 +44,20 @@
 }
 
 :host(.pds-sortable-item):hover {
-  background-color: var(--background-color-interactive);
+  background-color: var(--color-background-interactive);
 }
 :host(.pds-sortable-item):hover pds-icon {
   color: var(--color-interactive-handle);
 }
 
 :host(.pds-sortable-item--drag) {
-  background-color: var(--background-color);
+  background-color: var(--color-background-default);
   border-radius: 0;
   box-shadow: var(--box-shadow);
   opacity: 1;
 }
 
 :host(.pds-sortable-item--ghost) {
-  background-color: var(--background-color-interactive);
+  background-color: var(--color-background-interactive);
   border-radius: 0;
 }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { handle as handleIcon } from "@pine-ds/icons/icons";
 /**
  * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.
  */
@@ -6,10 +7,18 @@ export class PdsSortableItem {
     constructor() {
         this.enableActions = false;
         this.componentId = undefined;
-        this.handle = false;
+        this.showHandle = false;
+    }
+    componentWillRender() {
+        // When the parent sortable has a type of 'handle', the sortable items
+        // will automatically set showHandle to 'true'.
+        this.sortableRef = this.el.closest('pds-sortable');
+        if (this.sortableRef && this.sortableRef.handleType === 'handle') {
+            this.showHandle = true;
+        }
     }
     render() {
-        return (h(Host, { key: '0af9e3cba44c18a8ded0ed71337076ebf761a437', class: "pds-sortable-item", id: this.componentId }, this.handle && (h("div", { class: "pds-sortable-item__handle" }, h("pds-icon", { name: "handle" }))), h("slot", { key: '44365ade9216eacdf72723d4bbf18bac5e6ba734' }), this.enableActions && (h("div", { class: "pds-sortable-item__actions" }, h("slot", { name: "sortable-item-actions" })))));
+        return (h(Host, { key: '61c57ebc93b66e4c8777fe52163c2c7f600361a5', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'f2bafa535db6cfa07113bd8f9a32d5b7a0bc694d', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '9ead72e13f881f9cdbe4cb910de09173c42c96c5', icon: handleIcon }))), h("slot", { key: '7322ce5649cd2f7765d9275ec47317570854e5f9' }), this.enableActions && (h("div", { key: '709a91c4160407b491fb7ed44c7c7c0a9e980262', class: "pds-sortable-item__actions" }, h("slot", { key: '280ed68aec92927b2a79581f56d3905188a27f1a', name: "sortable-item-actions" })))));
     }
     static get is() { return "pds-sortable-item"; }
     static get encapsulation() { return "scoped"; }
@@ -63,9 +72,9 @@ export class PdsSortableItem {
                 "attribute": "component-id",
                 "reflect": false
             },
-            "handle": {
+            "showHandle": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -80,11 +89,12 @@ export class PdsSortableItem {
                         }],
                     "text": "Determines whether `sortable-item` should have a handle."
                 },
-                "attribute": "handle",
+                "attribute": "show-handle",
                 "reflect": false,
                 "defaultValue": "false"
             }
         };
     }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=pds-sortable-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pds-sortable-item.js","sourceRoot":"","sources":["../../../../src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,eAAe;;6BAKF,KAAK;;sBAWZ,KAAK;;IAEtB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,MAAM,IAAI,CACd,WAAK,KAAK,EAAC,2BAA2B;gBACpC,gBAAU,IAAI,EAAC,QAAQ,GAAY,CAC/B,CACP;YACD,8DAAa;YACZ,IAAI,CAAC,aAAa,IAAI,CACrB,WAAK,KAAK,EAAC,4BAA4B;gBACrC,YAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.\n */\n@Component({\n  tag: 'pds-sortable-item',\n  styleUrl: 'pds-sortable-item.scss',\n  scoped: true,\n})\nexport class PdsSortableItem {\n  /**\n   * Determines whether `sortable-item-actions` slot should be enabled.\n   * @defaultValue false\n   */\n  @Prop() enableActions = false;\n\n  /**\n   * A unique identifier used for the sortable item `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `sortable-item` should have a handle.\n   * @defaultValue false\n   */\n  @Prop() handle = false;\n\n  render() {\n    return (\n      <Host class=\"pds-sortable-item\" id={this.componentId}>\n        {this.handle && (\n          <div class=\"pds-sortable-item__handle\">\n            <pds-icon name=\"handle\"></pds-icon>\n          </div>\n        )}\n        <slot></slot>\n        {this.enableActions && (\n          <div class=\"pds-sortable-item__actions\">\n            <slot name=\"sortable-item-actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-sortable-item.js","sourceRoot":"","sources":["../../../../src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC5D;;GAEG;AAMH,MAAM,OAAO,eAAe;;6BAOF,KAAK;;0BAWS,KAAK;;IAE3C,mBAAmB;QACjB,sEAAsE;QACtE,+CAA+C;QAC/C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAA2B,CAAC;QAE7E,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,UAAU,IAAI,CAClB,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,iEAAU,IAAI,EAAE,UAAU,GAAa,CACnC,CACP;YACD,8DAAa;YACZ,IAAI,CAAC,aAAa,IAAI,CACrB,4DAAK,KAAK,EAAC,4BAA4B;gBACrC,6DAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\n\nimport { handle as handleIcon } from '@pine-ds/icons/icons';\n/**\n * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.\n */\n@Component({\n  tag: 'pds-sortable-item',\n  styleUrl: 'pds-sortable-item.scss',\n  scoped: true,\n})\nexport class PdsSortableItem {\n  @Element() el: HTMLPdsSortableItemElement;\n  sortableRef: HTMLPdsSortableElement;\n  /**\n   * Determines whether `sortable-item-actions` slot should be enabled.\n   * @defaultValue false\n   */\n  @Prop() enableActions = false;\n\n  /**\n   * A unique identifier used for the sortable item `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `sortable-item` should have a handle.\n   * @defaultValue false\n   */\n  @Prop({ mutable: true }) showHandle = false;\n\n  componentWillRender() {\n    // When the parent sortable has a type of 'handle', the sortable items\n    // will automatically set showHandle to 'true'.\n    this.sortableRef = this.el.closest('pds-sortable') as HTMLPdsSortableElement;\n\n    if (this.sortableRef && this.sortableRef.handleType === 'handle') {\n      this.showHandle = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-sortable-item\" id={this.componentId}>\n        {this.showHandle && (\n          <div class=\"pds-sortable-item__handle\">\n            <pds-icon icon={handleIcon}></pds-icon>\n          </div>\n        )}\n        <slot></slot>\n        {this.enableActions && (\n          <div class=\"pds-sortable-item__actions\">\n            <slot name=\"sortable-item-actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -11,7 +11,7 @@ const BaseTemplate = (args) => html`
 <pds-sortable-item
   action="${args.enableActions}"
   component-id="${args.componentId}"
-  handle="${args.handle}"
+  show-handle="${args.showHandle}"
 >
   Item
 </pds-sortable-item>`;
@@ -20,5 +20,5 @@ export const Default = BaseTemplate.bind();
 Default.args = {
   componentId: 'default',
   enableActions: false,
-  handle: false,
+  showHandle: false,
 };

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

@@ -1,10 +1,10 @@
 :host(.pds-sortable) {
-  --border-radius: var(--pine-border-radius-md);
-  --border: var(--pine-border-default);
+  --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);
+  border: var(--border-default);
   border-radius: var(--border-radius);
 }

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

@@ -15,7 +15,7 @@ export class PdsSortable {
         if (this.dividers) {
             classNames.push('pds-sortable--divided');
         }
-        if (this.handleType) {
+        if (this.handleType !== undefined) {
             classNames.push(`pds-sortable--handle-type-${this.handleType}`);
         }
         return classNames.join('  ');
@@ -35,7 +35,7 @@ export class PdsSortable {
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: 'ec0e4e8ab9f84b3163160f23cfe15796b1c8ca79', class: this.classNames(), id: this.componentId }, h("slot", { key: '9c3f9cbc3b0cdd50bc57d0f4f2a6231d1f2f9d2e' })));
+        return (h(Host, { key: 'f7a4d29675fcb46ca76dc014e8cc57ac243d07fa', class: this.classNames(), id: this.componentId }, h("slot", { key: '2c851fb0e61f3373345b1e170520c3327ab3fa0c' })));
     }
     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;AACvF,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,EAAE,CAAC;YACpB,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,GAAQ;YACzB,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 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) {\n      classNames.push(`pds-sortable--handle-type-${this.handleType}`);\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentDidLoad() {\n\n    let sortableOptions: any = {\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  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"]}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sortable-interface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-interface.js","sourceRoot":"","sources":["../../../src/components/pds-sortable/sortable-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface SortableType {\n  animation: number;\n  ghostClass: string;\n  dragClass: string;\n  onEnd: (evt: Event) => void;\n  handle?: string;\n}"]}

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

@@ -23,9 +23,9 @@ const BaseTemplate = (args) => html`
 
 const HandleTemplate = (args) => html`
 <pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
-  <pds-sortable-item handle>Item 1</pds-sortable-item>
-  <pds-sortable-item handle>Item 2</pds-sortable-item>
-  <pds-sortable-item handle>Item 3</pds-sortable-item>
+  <pds-sortable-item>Item 1</pds-sortable-item>
+  <pds-sortable-item>Item 2</pds-sortable-item>
+  <pds-sortable-item>Item 3</pds-sortable-item>
 </pds-sortable>`;
 
 const ActionsTemplate = (args) => html`
@@ -52,7 +52,7 @@ const ActionsTemplate = (args) => html`
 
 const FullDemoTemplate = (args) => html`
 <pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
-  <pds-sortable-item enable-actions handle>
+  <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 1</strong></div>
       <div>Item 1 description copy text</div>
@@ -61,7 +61,7 @@ const FullDemoTemplate = (args) => html`
       <pds-link href="#" variant="plain">action</pds-link>
     </div>
   </pds-sortable-item>
-  <pds-sortable-item enable-actions handle>
+  <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 2</strong></div>
       <div>Item 2 description copy text</div>
@@ -70,7 +70,7 @@ const FullDemoTemplate = (args) => html`
       <pds-link href="#" variant="plain">action</pds-link>
     </div>
   </pds-sortable-item>
-  <pds-sortable-item enable-actions handle>
+  <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 3</strong></div>
       <div>Item 3 description copy text</div>

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

@@ -1,29 +1,31 @@
 :host {
-  --background-color: var(--pine-color-neutral-grey-400);
-  --background-color-checked: var(--pine-color-neutral-charcoal-400);
-  --background-color-checked-hover: var(--pine-color-neutral-charcoal-400);
-  --background-color-disabled: var(--pine-color-neutral-grey-300);
-  --background-color-hover: var(--pine-color-neutral-grey-500);
-  --input-border-radius: var(--pine-border-radius-lg);
-  --input-height: 20px;
-  --input-width: 36px;
-  --input-toggle-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);
-  --input-toggle-color: var(--pine-color-base-white);
-  --input-toggle-offset: 2px;
-  --input-toggle-size: calc(var(--input-height) - (var(--input-toggle-offset) * 2));
-  --label-gap-size: 12px;
-  --label-line-height: var(--pine-line-height-md);
-  --message-spacing-block: var(--pine-spacing-xxs);
-  --message-spacing-inline: calc(var(--input-width) + var(--label-gap-size));
-  --message-text-color: var(--pine-color-neutral-charcoal-200);
-  --outline-color-focus: var(--pine-color-primary-200);
-  --outline-color-focus-error: var(--pine-color-red-200);
-  --text-color-default: var(--pine-color-neutral-charcoal-400);
-  --text-color-disabled: var(--pine-color-neutral-grey-500);
-  --text-color-error: var(--pine-color-red-300);
+  --border-radius-input: var(--pine-border-radius-200);
+  --box-shadow-focus: 0 0 0 2px var(--color-outline-focus);
+  --box-shadow-focus-error: 0 0 0 2px var(--color-outline-focus-error);
+  --box-shadow-input-toggle: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);
+  --color-background-checked: var(--pine-color-charcoal-400);
+  --color-background-checked-hover: var(--pine-color-charcoal-400);
+  --color-background-disabled: var(--pine-color-grey-300);
+  --color-background-hover: var(--pine-color-grey-500);
+  --color-background-input-default: var(--pine-color-grey-400);
+  --color-input-toggle: var(--pine-color-white);
+  --color-message-text: var(--pine-color-charcoal-200);
+  --color-outline-focus: var(--pine-color-blue-200);
+  --color-outline-focus-error: var(--pine-color-red-200);
+  --color-text-default: var(--pine-color-charcoal-400);
+  --color-text-disabled: var(--pine-color-grey-500);
+  --color-text-error: var(--pine-color-red-300);
+  --dimension-input-height: 20px;
+  --dimension-input-width: 36px;
+  --line-height-label: var(--pine-line-height-150);
+  --sizing-input-toggle-size: calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));
+  --sizing-label-gap-size: 12px;
+  --spacing-input-toggle-offset: 2px;
+  --spacing-message-block: var(--pine-spacing-050);
+  --spacing-message-inline: calc(var(--dimension-input-width) + var(--sizing-label-gap-size));
   --transition-timing: 0.15s ease-out;
   align-items: flex-start;
-  color: var(--text-color-default);
+  color: var(--color-text-default);
   display: inline-flex;
   flex-flow: row wrap;
   margin-block-end: var(--pine-spacing-md);
@@ -31,68 +33,68 @@
 }
 
 :host(.pds-switch--error) {
-  color: var(--text-color-error);
+  color: var(--color-text-error);
 }
 :host(.pds-switch--error) input,
 :host(.pds-switch--error) input:checked,
 :host(.pds-switch--error) input:hover:not(:disabled):not(:checked) {
-  background-color: var(--text-color-error);
+  background-color: var(--color-text-error);
 }
 :host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked) {
-  box-shadow: 0 0 0 4px var(--outline-color-focus-error);
+  box-shadow: var(--box-shadow-focus-error);
 }
 
 input {
   appearance: none;
-  background: var(--background-color);
+  background: var(--color-background-input-default);
   border: 0;
-  border-radius: var(--input-border-radius);
+  border-radius: var(--border-radius-input);
   cursor: pointer;
   display: inline-block;
-  height: var(--input-height);
+  height: var(--dimension-input-height);
   margin: 0;
   padding: 0;
   position: relative;
   transform: translateY(2px);
   transition: var(--transition-timing);
   transition-property: background, border, color;
-  width: var(--input-width);
+  width: var(--dimension-input-width);
 }
 input::after {
-  background: var(--input-toggle-color);
+  background: var(--color-input-toggle);
   border-radius: 50%;
-  box-shadow: var(--input-toggle-box-shadow);
+  box-shadow: var(--box-shadow-input-toggle);
   content: "";
   display: block;
-  height: var(--input-toggle-size);
+  height: var(--sizing-input-toggle-size);
   inset-block-start: 50%;
   inset-inline-start: 50%;
   position: absolute;
   transform: translate3d(-100%, -50%, 0);
   transition: transform var(--transition-timing);
-  width: var(--input-toggle-size);
+  width: var(--sizing-input-toggle-size);
 }
 
 label {
   cursor: pointer;
   display: inline-flex;
   flex-grow: 1;
-  line-height: var(--label-line-height);
-  margin-inline-start: var(--label-gap-size);
+  line-height: var(--line-height-label);
+  margin-inline-start: var(--sizing-label-gap-size);
 }
 .pds-switch--error label {
   color: inherit;
 }
 
 .pds-switch__message {
-  color: var(--message-text-color);
+  color: var(--color-message-text);
   flex: 1 0 100%;
   font-size: var(--pine-font-size-body-sm);
   line-height: var(--pine-line-height-sm);
-  margin-inline-start: var(--message-spacing-inline);
+  margin-inline-start: var(--spacing-message-inline);
 }
 .pds-switch__message + .pds-switch__message {
-  margin-block-start: var(--message-spacing-block);
+  margin-block-start: var(--spacing-message-block);
 }
 
 .pds-switch__message--error {
@@ -100,11 +102,11 @@ label {
 }
 
 input:disabled {
-  background-color: var(--background-color-disabled);
+  background-color: var(--color-background-disabled);
   cursor: not-allowed;
 }
 input:disabled ~ label {
-  color: var(--text-color-disabled);
+  color: var(--color-text-disabled);
   cursor: initial;
 }
 input:disabled .pds-switch__message {
@@ -112,11 +114,11 @@ input:disabled .pds-switch__message {
 }
 
 input:hover:not(:disabled) {
-  background-color: var(--background-color-hover);
+  background-color: var(--color-background-hover);
 }
 
 input:focus-visible:not(:disabled) {
-  box-shadow: 0 0 0 4px var(--outline-color-focus);
+  box-shadow: var(--box-shadow-focus);
   outline: none;
 }
 
@@ -126,9 +128,9 @@ input:checked::after {
 
 input:checked:not(:disabled) {
   background-color: currentColor;
-  color: var(--background-color-checked);
+  color: var(--color-background-checked);
 }
 input:checked:not(:disabled):hover {
   border-color: currentColor;
-  color: var(--background-color-checked-hover);
+  color: var(--color-background-checked-hover);
 }

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

@@ -34,9 +34,9 @@ export class PdsSwitch {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: 'cdb6f34b8eb4a40fa9477b820461276ea07b9346', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("input", { key: 'cdb0f78abe53f7c84da5aa75e878d40180821e44', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: this.type, value: this.value }), h(PdsLabel, { key: '37d5f8106e84f5820f0e27b1a2d656a6090293a3', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            h("div", { class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+        return (h(Host, { key: 'f00007b5d1bde6895cb7f410b82e5c3669d75327', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("input", { key: 'c6c0ae9576a198c9f0038ebd22b78df0c5a41794', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: this.type, value: this.value }), h(PdsLabel, { key: 'd6c3b0c584d2c4fd6cc99507794a3e961fbf99a5', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
+            h("div", { key: '4f9f581e9a01e67d076bafaf1d28fe52b87081fc', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'aeca71b92664b2e7ef4c7fb0d103996a05c5318f', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }