@pine-ds/core 2.14.0 → 2.15.0

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.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,18 +35,18 @@ export class PdsSortable {
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: 'e215bbd858767d4c5e5e85bd12352e6a50b7d594', class: this.classNames(), id: this.componentId }, h("slot", { key: 'bd4a58c7ceb78432c77615987e16e979d7240eb4' })));
+        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"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../global/styles/base.scss", "pds-sortable.scss"]
+            "$": ["pds-sortable.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../global/styles/base.css", "pds-sortable.css"]
+            "$": ["pds-sortable.css"]
         };
     }
     static get properties() {

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  styleUrls: ['../../global/styles/base.scss', '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"]}

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

@@ -1,46 +1,24 @@
 :host {
-  --border-radius-input: var(--pine-border-radius-200);
-  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-outline-focus);
-  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px 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-purple-500);
-  --color-background-checked-hover: var(--pine-color-purple-600);
-  --color-background-error: var(--pine-color-red-500);
-  --color-background-input-disabled: var(--pine-color-grey-200);
-  --color-background-input-default: var(--pine-color-grey-300);
-  --color-background-input-hover: var(--pine-color-grey-400);
-  --color-input-toggle-default: var(--pine-color-white);
-  --color-input-toggle-disabled: var(--pine-color-grey-100);
-  --color-message-text: var(--pine-color-grey-700);
-  --color-outline-focus: var(--pine-color-purple-300);
-  --color-outline-focus-error: var(--pine-color-red-200);
-  --color-text-default: var(--pine-color-grey-900);
-  --color-text-disabled: var(--pine-color-grey-500);
-  --color-text-error: var(--pine-color-red-500);
-  --font-weight-label-default: var(--pine-font-weight-body-medium);
-  --dimension-input-height: 20px;
-  --dimension-input-width: 36px;
-  --sizing-input-toggle-size: calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));
-  --spacing-label-gap-size: var(--pine-spacing-150);
-  --spacing-input-toggle-offset: calc(var(--pine-spacing-050) / 2);
-  --spacing-message-block: calc(var(--pine-spacing-150) / 2);
-  --spacing-message-inline: calc(var(--dimension-input-width) + var(--spacing-label-gap-size));
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
+  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);
+  --sizing-input-toggle-size: calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));
+  --pine-dimension-025: 2px;
+  --spacing-message-inline: calc(var(--pine-dimension-450) + var(--pine-dimension-150));
   --number-transition-timing: 0.15s ease-out;
   align-items: flex-start;
-  color: var(--color-text-default);
+  color: var(--pine-color-text);
   display: inline-flex;
   flex-flow: row wrap;
-  margin-block-end: var(--pine-spacing-md);
   position: relative;
 }
 
 :host(.pds-switch--error) {
-  color: var(--color-text-error);
+  color: var(--pine-color-text-message-danger);
 }
 :host(.pds-switch--error) input,
 :host(.pds-switch--error) input:checked,
 :host(.pds-switch--error) input:hover:not(:disabled):not(:checked) {
-  background-color: var(--color-background-error);
+  background-color: var(--pine-color-danger);
 }
 :host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked) {
   box-shadow: var(--box-shadow-focus-error);
@@ -51,23 +29,23 @@
 
 input {
   appearance: none;
-  background: var(--color-background-input-default);
+  background: var(--pine-color-neutral);
   border: 0;
-  border-radius: var(--border-radius-input);
+  border-radius: var(--pine-dimension-sm);
   cursor: pointer;
   display: inline-block;
-  height: var(--dimension-input-height);
+  height: var(--pine-dimension-250);
   margin: 0;
   padding: 0;
   position: relative;
   transition: var(--number-transition-timing);
   transition-property: background, border, color;
-  width: var(--dimension-input-width);
+  width: var(--pine-dimension-450);
 }
 input::after {
-  background: var(--color-input-toggle-default);
-  border-radius: 50%;
-  box-shadow: var(--box-shadow-input-toggle);
+  background: var(--pine-color-secondary);
+  border-radius: var(--pine-border-radius-full);
+  box-shadow: var(--pine-box-shadow);
   content: "";
   display: block;
   height: var(--sizing-input-toggle-size);
@@ -83,46 +61,47 @@ label {
   cursor: pointer;
   display: inline-flex;
   flex-grow: 1;
-  font-weight: var(--font-weight-label-default);
-  margin-inline-start: var(--spacing-label-gap-size);
+  font-weight: var(--pine-font-weight-medium);
+  margin-inline-start: var(--pine-dimension-150);
 }
 .pds-switch--error label {
   color: inherit;
 }
 
 .pds-switch__message {
-  color: var(--color-message-text);
+  color: var(--pine-color-text-message);
   flex: 1 0 100%;
-  font-size: var(--pine-font-size-body-md);
-  margin-block-start: var(--spacing-message-block);
-  margin-inline-start: var(--spacing-message-inline);
+  font: var(--pine-typography-body-sm-medium);
+  margin-block-start: var(--pine-dimension-xs);
+}
+.pds-switch__message + .pds-switch__message {
+  margin-block-start: var(--pine-dimension-2xs);
 }
 
 .pds-switch__message--error {
   align-items: center;
   color: inherit;
   display: flex;
-  font-size: var(--pine-font-size-085);
-  gap: var(--pine-spacing-050);
+  gap: var(--pine-dimension-2xs);
 }
 
 input:disabled {
-  background-color: var(--color-background-input-disabled);
+  background-color: var(--pine-color-neutral-disabled);
   cursor: not-allowed;
 }
 input:disabled ~ label {
-  color: var(--color-text-disabled);
+  color: var(--pine-color-text-disabled);
   cursor: initial;
 }
 input:disabled:hover::after {
-  background-color: var(--color-input-toggle-disabled);
+  background-color: var(--pine-color-background-container-disabled);
 }
 input:disabled .pds-switch__message {
   color: initial;
 }
 
 input:hover:not(:disabled) {
-  background-color: var(--color-background-input-hover);
+  background-color: var(--pine-color-neutral-hover);
 }
 
 input:focus-visible:not(:disabled) {
@@ -136,9 +115,9 @@ input:checked::after {
 
 input:checked:not(:disabled) {
   background-color: currentColor;
-  color: var(--color-background-checked);
+  color: var(--pine-color-accent);
 }
 input:checked:not(:disabled):hover {
   border-color: currentColor;
-  color: var(--color-background-checked-hover);
+  color: var(--pine-color-accent-hover);
 }

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

@@ -33,20 +33,20 @@ export class PdsSwitch {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '752bc5c5fd8d2cac945d6029656954d3f375ec71', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("input", { key: '04472c44cf63aa671326c774c9fbf6890db69ddb', "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: "checkbox", value: this.value }), h(PdsLabel, { key: '8895f0bd3a5eb345a91a9379ecb30cf47637ffe4', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            h("div", { key: 'bf29e672c126446faeca4bce2946294e816718f4', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '7428daf37dd2c60e6c0416a72a4f56cbb956dd9a', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '9efde77b0156883dd9514c9b2fc6f1234d04a645', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '0c57e5a99f6d5c398c9c1a0164a9cad167d21bf8', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("input", { key: '3be2c03ee6525bdc1b215f252d9a8a04539fec9d', "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: "checkbox", value: this.value }), h(PdsLabel, { key: 'c6a42085334420dc87265dbb89414c23af3e82d1', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
+            h("div", { key: '307b54a0fb0c71af5cf91a7ba80c8c3b3c7201b0', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '5fa0429017fa7083db7baa5c4d8bea11c9c92a1d', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '3dcc1270248d7efeaccc8a9d5bccf2888b10ccae', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../global/styles/base.scss", "pds-switch.scss"]
+            "$": ["pds-switch.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../global/styles/base.css", "pds-switch.css"]
+            "$": ["pds-switch.css"]
         };
     }
     static get properties() {

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

@@ -1 +1 @@
-{"version":3,"file":"pds-switch.js","sourceRoot":"","sources":["../../../src/components/pds-switch/pds-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-switch',\n  styleUrls: ['../../global/styles/base.scss', 'pds-switch.scss'],\n  shadow: true,\n})\nexport class PdsSwitch {\n  @Element() el: HTMLPdsSwitchElement;\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   * Determines the input 'checked' state.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Determines the input 'disabled' state, preventing user interaction.\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays help text for additional description of an input.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines the input 'invalid' state, signifying an error is present.\n   */\n  @Prop() invalid? = false;\n\n  /**\n   * Displays text to describe the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines the 'required' state of the input.\n   */\n  @Prop() required? = false;\n\n  /**\n   * Provides input with a string submitted in form data.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits an event on input change.\n   */\n  @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n  private onSwitchUpdate = (e: Event) => {\n    if (this.disabled) return;\n\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.pdsSwitchChange.emit(e as InputEvent);\n  };\n\n  private switchClassNames = () => {\n    let switchClasses = `pds-switch`;\n\n    if (this.invalid === true) {\n      switchClasses += \" pds-switch--error\";\n    }\n    if (this.helperMessage !== undefined) {\n      switchClasses += \" pds-switch--message\";\n    }\n    return switchClasses;\n  };\n\n  render() {\n    return (\n      <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          checked={this.checked}\n          class=\"pds-switch__input\"\n          disabled={this.disabled}\n          id={this.componentId}\n          name={this.name ? this.name : this.componentId}\n          onChange={this.onSwitchUpdate}\n          required={this.required}\n          type=\"checkbox\"\n          value={this.value}\n        />\n        <PdsLabel classNames=\"pds-switch__label\" htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={`pds-switch__message`}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-switch__message pds-switch__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-switch.js","sourceRoot":"","sources":["../../../src/components/pds-switch/pds-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-switch',\n  styleUrls: ['pds-switch.scss'],\n  shadow: true,\n})\nexport class PdsSwitch {\n  @Element() el: HTMLPdsSwitchElement;\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   * Determines the input 'checked' state.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Determines the input 'disabled' state, preventing user interaction.\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays help text for additional description of an input.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines the input 'invalid' state, signifying an error is present.\n   */\n  @Prop() invalid? = false;\n\n  /**\n   * Displays text to describe the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines the 'required' state of the input.\n   */\n  @Prop() required? = false;\n\n  /**\n   * Provides input with a string submitted in form data.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits an event on input change.\n   */\n  @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n  private onSwitchUpdate = (e: Event) => {\n    if (this.disabled) return;\n\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.pdsSwitchChange.emit(e as InputEvent);\n  };\n\n  private switchClassNames = () => {\n    let switchClasses = `pds-switch`;\n\n    if (this.invalid === true) {\n      switchClasses += \" pds-switch--error\";\n    }\n    if (this.helperMessage !== undefined) {\n      switchClasses += \" pds-switch--message\";\n    }\n    return switchClasses;\n  };\n\n  render() {\n    return (\n      <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          checked={this.checked}\n          class=\"pds-switch__input\"\n          disabled={this.disabled}\n          id={this.componentId}\n          name={this.name ? this.name : this.componentId}\n          onChange={this.onSwitchUpdate}\n          required={this.required}\n          type=\"checkbox\"\n          value={this.value}\n        />\n        <PdsLabel classNames=\"pds-switch__label\" htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={`pds-switch__message`}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-switch__message pds-switch__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js

@@ -1,18 +1,18 @@
 import { Host, h } from "@stencil/core";
 export class PdsTableBody {
     render() {
-        return (h(Host, { key: '2e51c5074e6dca980f24db2f91c66260da53dc57', role: "rowgroup" }, h("slot", { key: 'cec8f94525798f338ef13d8788c862fb6fd699a6' })));
+        return (h(Host, { key: '60a95951b44201ddb343ad09de86e456e0699660', role: "rowgroup" }, h("slot", { key: '76859c304c640fb6aa2ea1239e500fe94da7402f' })));
     }
     static get is() { return "pds-table-body"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../../global/styles/base.scss", "pds-table-body.scss"]
+            "$": ["pds-table-body.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../../global/styles/base.css", "pds-table-body.css"]
+            "$": ["pds-table-body.css"]
         };
     }
 }

package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-table-body.js","sourceRoot":"","sources":["../../../../src/components/pds-table/pds-table-body/pds-table-body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,YAAY;IAEvB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-body',\n  styleUrls: ['../../../global/styles/base.scss', 'pds-table-body.scss'],\n  shadow: true,\n})\nexport class PdsTableBody {\n\n  render() {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-table-body.js","sourceRoot":"","sources":["../../../../src/components/pds-table/pds-table-body/pds-table-body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,YAAY;IAEvB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-body',\n  styleUrls: ['pds-table-body.scss'],\n  shadow: true,\n})\nexport class PdsTableBody {\n\n  render() {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.css

@@ -1,30 +1,23 @@
 :host {
   --box-shadow-fixed: 3px 3px 6px -2px rgba(0, 0, 0, 0.2);
-  --color-background-fixed: var(--pine-color-white);
-  --color-text-cell-default: var(--pine-color-grey-700);
-  --dimension-fixed-cell-position: 0;
-  --dimension-max-width-truncated: 100px;
-  --letter-spacing-default: var(--pine-letter-spacing-body-md);
-  --number-fixed-column-index: 0;
-  --spacing-line-height-cell-default: var(--pine-line-height-125);
-  --spacing-padding-cell-default: calc(var(--pine-spacing-300) / 2);
-  --spacing-padding-compact: var(--pine-spacing-050);
-  --typography-default: var(--pine-typography-body-md-default);
-  color: var(--color-text-cell-default);
+  color: var(--pine-color-text);
   display: table-cell;
-  font: var(--typography-default);
-  letter-spacing: var(--letter-spacing-default);
-  padding: var(--spacing-padding-cell-default);
+  font-family: var(--pine-font-family-body);
+  font-size: var(--pine-font-size);
+  font-weight: var(--pine-font-weight-regular);
+  letter-spacing: var(--pine-letter-spacing);
+  line-height: var(--pine-line-height-body);
+  padding: 12px;
   vertical-align: inherit;
 }
 
 :host(.is-compact) {
-  padding-block: var(--spacing-padding-compact);
+  padding-block: var(--pine-dimension-2xs);
 }
 
 :host(.is-fixed) {
-  background: var(--color-background-fixed);
-  left: var(--dimension-fixed-cell-position);
+  background: var(--pine-color-background-container);
+  left: 0;
   position: sticky;
   z-index: 1;
 }
@@ -34,7 +27,7 @@
 }
 
 :host(.is-truncated) {
-  max-width: var(--dimension-max-width-truncated);
+  max-width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js

@@ -34,22 +34,22 @@ export class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '03e6833f06a00f24c12f58148d0be1c9d4472ba6', class: this.classNames(), role: "gridcell", style: this.tableRef &&
+        return (h(Host, { key: 'f2a3b657bff0ad827eb7de95d858d9e8cc34ab79', class: this.classNames(), role: "gridcell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '5ac68bc25d266576f836341d71b96eaa229117c7' })));
+                : {} }, h("slot", { key: '39d0cbe1dbf20b1786be18ba60acd0dd2256da5b' })));
     }
     static get is() { return "pds-table-cell"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../../global/styles/base.scss", "pds-table-cell.scss"]
+            "$": ["pds-table-cell.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../../global/styles/base.css", "pds-table-cell.css"]
+            "$": ["pds-table-cell.css"]
         };
     }
     static get properties() {

package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-table-cell.js","sourceRoot":"","sources":["../../../../src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,YAAY;;QA2Cf,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;gBACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC7B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC;;8BA1ByC,KAAK;;IAnBhD,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;IAC/E,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;YAC3E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAaO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;YAC3C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClC,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACtE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAUD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,UAAU,EACf,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;gBACtB,CAAC,CAAC,EAAE,uBAAuB,EAAE,MAAM,EAAE;gBACrC,CAAC,CAAC,EAAE;YAGR,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-cell',\n  styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],\n  shadow: true,\n})\nexport class PdsTableCell {\n  @Element() hostElement: HTMLPdsTableCellElement;\n  private tableRef: HTMLPdsTableElement;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      this.tableRef.addEventListener('scroll', this.handleScroll);\n    }\n  }\n\n  /**\n   * Truncates content to a max width of 100px and adds an ellipsis.\n   */\n  @Prop() truncate: boolean;\n\n  /**\n   * Determines if the table is currently scrolling.\n   * @defaultValue false\n   */\n  @State() private tableScrolling: boolean = false;\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.truncate) {\n      classNames.push('is-truncated');\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join(' ');\n  }\n\n  private handleScroll = () => {\n    if (this.tableRef.scrollLeft > 0) {\n      this.tableScrolling = true;\n    } else {\n      this.tableScrolling = false;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"gridcell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n          }\n        >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-table-cell.js","sourceRoot":"","sources":["../../../../src/components/pds-table/pds-table-cell/pds-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,YAAY;;QA2Cf,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;gBACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC7B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC;;8BA1ByC,KAAK;;IAnBhD,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;IAC/E,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;YAC3E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAaO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;YAC3C,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClC,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACtE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAUD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,UAAU,EACf,KAAK,EACH,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACzB,IAAI,CAAC,QAAQ,CAAC,UAAU;gBACtB,CAAC,CAAC,EAAE,uBAAuB,EAAE,MAAM,EAAE;gBACrC,CAAC,CAAC,EAAE;YAGR,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-cell',\n  styleUrls: ['pds-table-cell.scss'],\n  shadow: true,\n})\nexport class PdsTableCell {\n  @Element() hostElement: HTMLPdsTableCellElement;\n  private tableRef: HTMLPdsTableElement;\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n  }\n\n  componentDidLoad() {\n    if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n      this.tableRef.addEventListener('scroll', this.handleScroll);\n    }\n  }\n\n  /**\n   * Truncates content to a max width of 100px and adds an ellipsis.\n   */\n  @Prop() truncate: boolean;\n\n  /**\n   * Determines if the table is currently scrolling.\n   * @defaultValue false\n   */\n  @State() private tableScrolling: boolean = false;\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.tableRef && this.tableRef.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.truncate) {\n      classNames.push('is-truncated');\n    }\n\n    if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n      classNames.push('has-scrolled');\n    }\n\n    return classNames.join(' ');\n  }\n\n  private handleScroll = () => {\n    if (this.tableRef.scrollLeft > 0) {\n      this.tableScrolling = true;\n    } else {\n      this.tableScrolling = false;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"gridcell\"\n        style={\n          this.tableRef &&\n          this.tableRef.fixedColumn &&\n          this.tableRef.selectable\n            ? { '--fixed-cell-position': '40px' }\n            : {}\n          }\n        >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-table/pds-table-head/pds-table-head.css

@@ -1,13 +1,12 @@
 :host {
   --border-head-default: var(--pine-border-width-thin) solid var(--pine-color-grey-100);
-  --color-background-fixed: var(--pine-color-base-white);
   border-color: inherit;
   box-sizing: border-box;
   display: table-header-group;
   vertical-align: middle;
 }
 :host::part(checkbox-cell) {
-  background-color: var(--color-background-fixed);
+  background-color: var(--pine-color-background-container);
   left: 0;
   position: sticky;
   z-index: 1;

package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js

@@ -34,18 +34,18 @@ export class PdsTableHead {
         }
     }
     render() {
-        return (h(Host, { key: 'eb7e9eef443d0f222482b427a5ced7eaa4c0acf4', role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '6b7c87f0d07aac6e5b12b9e3a63914061f850da7', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: '74a7b333189bf92219b5a82bf0897d476b7adc8a', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", labelHidden: true, checked: this.isSelected }))), h("slot", { key: '5ef8daf29f10505b082619755b61014a52dbd00c' })));
+        return (h(Host, { key: 'ceec2beb6cbf4db01d34616d6b34b52fa035cfeb', role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '7488151c5cffe43f7f16baf52869dbd0646bb8a5', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: '1d33580a684a0119d5fad179145e56c36533dbfd', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", labelHidden: true, checked: this.isSelected }))), h("slot", { key: '71200e7941259e2ea59d2b86370bb3a0dfac727f' })));
     }
     static get is() { return "pds-table-head"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../../global/styles/base.scss", "pds-table-head.scss"]
+            "$": ["pds-table-head.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../../global/styles/base.css", "pds-table-head.css"]
+            "$": ["pds-table-head.css"]
         };
     }
     static get properties() {

package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-table-head.js","sourceRoot":"","sources":["../../../../src/components/pds-table/pds-table-head/pds-table-head.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAOzC,MAAM,OAAO,YAAY;;QAoBf,qBAAgB,GAAG,GAAG,EAAE;YAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAChE,MAAM,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;YACjE,MAAM,QAAQ,GAAG,GAAG,YAAY,IAAI,SAAS,EAAE,CAAC;YAEhD,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAA;QAEO,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAClC,IAAI,CAAC,UAAU,GAAG,CAAE,EAAE,CAAC,MAA2B,CAAC,OAAO,CAAA;YAC1D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACpC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,UAAmB,EAAE,EAAE;YAC7C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAA;YAE1B,IAAK,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,WAAW,CAAC,EAAG,CAAC;gBAClD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC,CAAA;;;;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACpC,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;QAE7E,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;YAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iCAAiC,CAAC,CAAC;YACpF,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACvC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK;YACb,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,CAC5C,4EAAqB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;gBACxE,qEACE,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAAE,EACpC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,iBAAiB,EACxB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,IAAI,CAAC,UAAU,GACxB,CACkB,CACvB;YACD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { closest } from '@utils/closest';\n\n@Component({\n  tag: 'pds-table-head',\n  styleUrls: ['../../../global/styles/base.scss', 'pds-table-head.scss'],\n  shadow: true,\n})\nexport class PdsTableHead {\n  @Element() hostElement: HTMLPdsTableHeadElement;\n  private tableRef: HTMLPdsTableElement\n\n   /**\n    * Determines if the select all checkbox is in an indeterminate state.\n    */\n   @Prop({ mutable: true }) indeterminate?: boolean;\n\n   /**\n   * Determines if the table row is currently selected.\n   * @defaultValue false\n   */\n   @Prop({mutable: true}) isSelected: boolean;\n\n  /**\n   * Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n  private generateUniqueId = () => {\n    const randomString = Math.random().toString(36).substring(2, 8);\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const uniqueId = `${randomString}-${timestamp}`;\n\n    return uniqueId;\n  }\n\n  private handleInput = (ev: Event) => {\n    this.isSelected = !(ev.target as HTMLInputElement).checked\n    this.handleSelect(this.isSelected)\n  };\n\n  private handleSelect = (isSelected: boolean) => {\n    this.indeterminate = false\n\n    if ( closest('pds-table-head', this.hostElement) ) {\n      this.pdsTableSelectAll.emit({ isSelected });\n    }\n  }\n\n  componentWillLoad() {\n    if (this.isSelected) {\n      this.handleSelect(this.isSelected)\n    }\n  }\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-head-cell:first-child');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"row\">\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-head-cell part={this.tableRef.selectable ? 'checkbox-cell' : ''}>\n            <pds-checkbox\n              componentId={this.generateUniqueId()}\n              indeterminate={this.indeterminate}\n              onInput={this.handleInput}\n              label={\"Select All Rows\"}\n              labelHidden={true}\n              checked={this.isSelected}\n            />\n          </pds-table-head-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-table-head.js","sourceRoot":"","sources":["../../../../src/components/pds-table/pds-table-head/pds-table-head.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAOzC,MAAM,OAAO,YAAY;;QAoBf,qBAAgB,GAAG,GAAG,EAAE;YAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAChE,MAAM,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;YACjE,MAAM,QAAQ,GAAG,GAAG,YAAY,IAAI,SAAS,EAAE,CAAC;YAEhD,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAA;QAEO,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAClC,IAAI,CAAC,UAAU,GAAG,CAAE,EAAE,CAAC,MAA2B,CAAC,OAAO,CAAA;YAC1D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACpC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,UAAmB,EAAE,EAAE;YAC7C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAA;YAE1B,IAAK,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,WAAW,CAAC,EAAG,CAAC;gBAClD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC,CAAA;;;;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACpC,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;QAE7E,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;YAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iCAAiC,CAAC,CAAC;YACpF,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACvC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK;YACb,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,CAC5C,4EAAqB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;gBACxE,qEACE,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAAE,EACpC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,iBAAiB,EACxB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,IAAI,CAAC,UAAU,GACxB,CACkB,CACvB;YACD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { closest } from '@utils/closest';\n\n@Component({\n  tag: 'pds-table-head',\n  styleUrls: ['pds-table-head.scss'],\n  shadow: true,\n})\nexport class PdsTableHead {\n  @Element() hostElement: HTMLPdsTableHeadElement;\n  private tableRef: HTMLPdsTableElement\n\n   /**\n    * Determines if the select all checkbox is in an indeterminate state.\n    */\n   @Prop({ mutable: true }) indeterminate?: boolean;\n\n   /**\n   * Determines if the table row is currently selected.\n   * @defaultValue false\n   */\n   @Prop({mutable: true}) isSelected: boolean;\n\n  /**\n   * Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n  private generateUniqueId = () => {\n    const randomString = Math.random().toString(36).substring(2, 8);\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const uniqueId = `${randomString}-${timestamp}`;\n\n    return uniqueId;\n  }\n\n  private handleInput = (ev: Event) => {\n    this.isSelected = !(ev.target as HTMLInputElement).checked\n    this.handleSelect(this.isSelected)\n  };\n\n  private handleSelect = (isSelected: boolean) => {\n    this.indeterminate = false\n\n    if ( closest('pds-table-head', this.hostElement) ) {\n      this.pdsTableSelectAll.emit({ isSelected });\n    }\n  }\n\n  componentWillLoad() {\n    if (this.isSelected) {\n      this.handleSelect(this.isSelected)\n    }\n  }\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-head-cell:first-child');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"row\">\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-head-cell part={this.tableRef.selectable ? 'checkbox-cell' : ''}>\n            <pds-checkbox\n              componentId={this.generateUniqueId()}\n              indeterminate={this.indeterminate}\n              onInput={this.handleInput}\n              label={\"Select All Rows\"}\n              labelHidden={true}\n              checked={this.isSelected}\n            />\n          </pds-table-head-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.css

@@ -1,32 +1,25 @@
 :host {
   --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-100);
   --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);
-  --color-background-fixed: var(--pine-color-white);
-  --color-text-default: var(--pine-color-grey-800);
-  --color-text-active: var(--pine-color-grey-950);
-  --dimension-fixed-cell-position: 0;
-  --letter-spacing-default: var(--pine-letter-spacing-body-md);
-  --padding-cell-default: calc(var(--pine-spacing-300) / 2);
-  --spacing-margin-inline-start-arrow: var(--pine-spacing-050);
-  --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);
-  --spacing-padding-block-compact: var(--pine-spacing-050);
-  --typography-default: var(--pine-typography-body-md-medium);
   border-block-end: var(--border-head-cell-default);
-  color: var(--color-text-default);
+  color: var(--pine-color-text);
   display: table-cell;
-  font: var(--typography-default);
-  padding: var(--padding-cell-default);
+  font-family: var(--pine-font-family-body);
+  font-size: var(--pine-font-size);
+  font-weight: var(--pine-font-weight-regular);
+  line-height: var(--pine-line-height-body);
+  padding: 12px;
   text-align: start;
   vertical-align: inherit;
 }
 
 :host(.is-compact) {
-  padding-block: var(--spacing-padding-block-compact);
+  padding-block: var(--pine-dimension-2xs);
 }
 
 :host(.is-fixed) {
-  background: var(--color-background-fixed);
-  left: var(--dimension-fixed-cell-position);
+  background: var(--pine-color-background-container);
+  left: var(--pine-dimension-none);
   position: sticky;
   z-index: 1;
 }
@@ -39,12 +32,12 @@
   cursor: pointer;
 }
 :host(.is-sortable) pds-icon {
-  margin-inline-start: var(--spacing-margin-inline-start-arrow);
-  padding-block-start: var(--spacing-padding-arrow);
+  margin-inline-start: var(--pine-dimension-2xs);
+  padding-block-start: 2px;
   position: absolute;
 }
 
 :host(.is-sortable:hover),
 :host(.is-active) {
-  color: var(--color-text-active);
+  color: var(--pine-color-text-active);
 }

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js

@@ -51,22 +51,22 @@ export class PdsTableHeadCell {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'dcb6684146176db2dfc73c99ead82af732ef1f72', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
+        return (h(Host, { key: '0eae693d1a14a1c7a21a9841a9bb6fbce9c3fe39', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: 'ea960d9245e41ce504083f2645aa01bd3a9404f0' }), this.sortable && (h("pds-icon", { key: 'dfa59925bbda74da7b2a3bf87f448cf323ff6342', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
+                : {} }, h("slot", { key: 'ce895362068b7912c3bb2ef46de0c2194417ebb4' }), this.sortable && (h("pds-icon", { key: '1fb79e6e54adecef28106f6b28537c6a48cd7182', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
     }
     static get is() { return "pds-table-head-cell"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../../global/styles/base.scss", "pds-table-head-cell.scss"]
+            "$": ["pds-table-head-cell.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../../global/styles/base.css", "pds-table-head-cell.css"]
+            "$": ["pds-table-head-cell.css"]
         };
     }
     static get properties() {