@pine-ds/core 0.2.3 → 1.0.0

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

@@ -1,33 +1,29 @@
 :host {
   /**
-   * @prop --panel-margin-top: Optional margin-top for panels
+   * @prop --spacing-panel-margin-top: Optional margin-top for panels
    */
-  --panel-margin-top: 0;
+  --spacing-panel-margin-top: 0;
   /**
-   * @prop --panel-padding: Optional padding for panels
+   * @prop --spacing-panel-padding: Optional padding for panels
    */
-  --panel-padding: 0;
-  --gap-md: var(--pine-spacing-md);
-  --gap-xs: var(--pine-spacing-xs);
-  --gap-sm: 16px var(--pine-spacing-sm);
-  --outline: 2px solid var(--pine-color-primary-200);
+  --spacing-panel-padding: 0;
+  --outline: 2px solid var(--pine-color-blue-200);
+  --spacing-gap-availability: var(--pine-spacing-100);
+  --spacing-gap-default: var(--pine-spacing-300);
+  --spacing-gap-filter: 16px var(--pine-spacing-200);
   display: block;
 }
 
-*:focus {
-  outline: var(--outline);
-}
-
 .pds-tabs__tablist {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--gap-md);
+  gap: var(--spacing-gap-default);
 }
 
 :host(.pds-tabs--availability) .pds-tabs__tablist {
-  gap: var(--gap-xs);
+  gap: var(--spacing-gap-availability);
 }
 
 :host(.pds-tabs--filter) .pds-tabs__tablist {
-  gap: var(--gap-sm);
+  gap: var(--spacing-gap-filter);
 }

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

@@ -83,7 +83,7 @@ export class PdsTabs {
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: 'e6d5ba53ccd3f58d0e63ddee1a3f395c6f15c841', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'b66c6f29bd3612c94130de2e44ca33e46facf401', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'eeaa4bacc8ae08964a106fed26af7c3927b83df7', name: "tabs" })), h("slot", { key: 'f6d0b358f7387a850e1f3db93eaf32cc7723b7a2', name: "tabpanels" })));
+        return (h(Host, { key: '92748fc6123067ba04f9cc81ea949366fb1c2a8f', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '809cbe1ed4e973db39ea69be9e30ac54881564af', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'b23af8a48dee0528cc9f7d2b84a42411e2b14e6d', name: "tabs" })), h("slot", { key: 'fdb46b7125f735531b13c1ac82a08f27998e7511', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,29 +1,31 @@
 :host {
-  --background-color: #fff;
-  --background-color-disabled: var(--pine-color-neutral-grey-200);
-  --color: var(--pine-color-neutral-charcoal-400);
-  --color-error: var(--pine-color-red-300);
-  --color-placeholder: var(--pine-color-neutral-charcoal-200);
-  --color-disabled: var(--pine-color-neutral-charcoal-200);
-  --border-color-default: var(--pine-color-neutral-grey-400);
-  --border-color-hover: var(--pine-color-neutral-grey-500);
-  --border-color-focus-visible: var(--pine-color-neutral-grey-300);
-  --border-color-error: var(--pine-color-red-300);
-  --focus-visible-outline-color: var(--pine-color-primary-200);
-  --focus-visible-outline-color-error: var(--pine-color-red-200);
-  --label-font-size: var(--pine-font-size-body);
-  --label-font-weight: var(--pine-font-weight-medium);
-  --label-line-height: var(--pine-line-height-md);
-  --label-margin-block-end: var(--pine-spacing-xs);
-  --field-font-size: var(--pine-font-size-body);
-  --field-font-weight: var(--pine-font-weight-regular);
-  --field-line-height: var(--pine-line-height-md);
-  --field-padding-block: var(--pine-spacing-xs);
-  --field-padding-inline: var(--pine-spacing-sm);
-  --helper-message-font-size: var(--pine-font-size-body-xs);
-  --helper-message-font-weight: var(--pine-font-weight-regular);
-  --helper-message-line-height: var(--pine-line-height-sm);
-  --helper-message-margin-block-start: var(--pine-spacing-xs);
+  --box-shadow-focus: 0 0 0 2px var(--color-focus-visible-outline);
+  --box-shadow-focus-error: 0 0 0 2px var(--color-focus-visible-outline-error);
+  --color: var(--pine-color-charcoal-400);
+  --color-background: var(--pine-color-white);
+  --color-background-disabled: var(--pine-color-grey-200);
+  --color-border-default: var(--pine-color-grey-400);
+  --color-border-error: var(--pine-color-red-300);
+  --color-border-focus-visible: var(--pine-color-grey-300);
+  --color-border-hover: var(--pine-color-grey-500);
+  --color-disabled-default: var(--pine-color-charcoal-200);
+  --color-error-default: var(--pine-color-red-300);
+  --color-focus-visible-outline: var(--pine-color-primary-200);
+  --color-focus-visible-outline-error: var(--pine-color-red-200);
+  --color-placeholder-default: var(--pine-color-charcoal-200);
+  --font-size-field: var(--pine-font-size-100);
+  --font-size-helper-message: var(--pine-font-size-075);
+  --font-size-label: var(--pine-font-size-100);
+  --font-weight-field: var(--pine-font-weight-normal);
+  --font-weight-helper-message: var(--pine-font-weight-normal);
+  --font-weight-label: var(--pine-font-weight-medium);
+  --line-height-field: var(--pine-line-height-150);
+  --line-height-helper-message: var(--pine-line-height-125);
+  --line-height-label: var(--pine-line-height-150);
+  --spacing-margin-block-end-label: var(--pine-spacing-100);
+  --spacing-margin-block-start-helper-message: var(--pine-spacing-100);
+  --spacing-padding-block-field: var(--pine-spacing-100);
+  --spacing-padding-inline-field: var(--pine-spacing-200);
   display: inline;
 }
 
@@ -34,51 +36,52 @@
 
 label {
   display: block;
-  font-size: var(--label-font-size);
-  font-weight: var(--label-font-weight);
-  line-height: var(--label-line-height);
-  margin-block-end: var(--label-margin-block-end);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-label);
+  line-height: var(--line-height-label);
+  margin-block-end: var(--spacing-margin-block-end-label);
 }
 
 .pds-textarea__field {
-  background-color: var(--background-color);
+  background-color: var(--color-background);
   border: var(--pine-border-interactive);
   border-radius: var(--pine-border-radius-md);
   font-family: inherit;
-  font-size: var(--field-font-size);
-  font-weight: var(--field-font-weight);
-  line-height: var(--field-line-height);
-  padding: var(--field-padding-block) var(--field-padding-inline);
+  font-size: var(--font-size-field);
+  font-weight: var(--font-weight-field);
+  line-height: var(--line-height-field);
+  padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);
 }
 .pds-textarea__field:hover:not(:disabled, .is-invalid) {
-  border-color: var(--border-color-hover);
+  border-color: var(--color-border-hover);
 }
 .pds-textarea__field:disabled {
-  background-color: var(--background-color-disabled);
-  color: var(--color-disabled);
+  background-color: var(--color-background-disabled);
+  color: var(--color-disabled-default);
   cursor: not-allowed;
 }
 .pds-textarea__field:focus-visible {
-  border-color: var(--border-color-focus-visible);
-  outline: 4px solid var(--focus-visible-outline-color);
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
 }
 .pds-textarea__field::placeholder {
-  color: var(--color-placeholder);
+  color: var(--color-placeholder-default);
 }
 .pds-textarea__field.is-invalid {
-  border-color: var(--color-error);
-  outline-color: var(--focus-visible-outline-color-error);
+  border-color: var(--color-border-error);
+}
+.pds-textarea__field.is-invalid:focus-visible {
+  box-shadow: var(--box-shadow-focus-error);
 }
 
 .pds-textarea__error-message,
 .pds-textarea__helper-message {
-  font-size: var(--helper-message-font-size);
-  font-weight: var(--helper-message-font-weight);
-  line-height: var(--helper-message-line-height);
-  margin-block-end: 0;
-  margin-block-start: var(--helper-message-margin-block-start);
+  font-size: var(--font-size-helper-message);
+  font-weight: var(--font-weight-helper-message);
+  line-height: var(--line-height-helper-message);
+  margin-block-start: var(--spacing-margin-block-start-helper-message);
 }
 
 .pds-textarea__error-message {
-  color: var(--color-error);
+  color: var(--color-error-default);
 }

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

@@ -32,10 +32,10 @@ export class PdsTextarea {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '741dcb258f9992f943e898b4f8ac569046f40a73', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'cb678d3e24cec028b7220b4d087e82ce24e26205', class: "pds-textarea" }, this.label &&
-            h(PdsLabel, { htmlFor: this.componentId, text: this.label }), h("textarea", { key: '667cec0eb152e45a01f87ca64865c816afe5b67b', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
-            h("p", { class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, this.errorMessage))));
+        return (h(Host, { key: 'a6f6eb13665857ec8762d454d79ff216e2062a66', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'fa77f9c7c29f214ee4d8ddb8e1e48d4d16b6a47e', class: "pds-textarea" }, this.label &&
+            h(PdsLabel, { key: '75c242138f5c2a33a82feaa775dae0c05843d2c1', htmlFor: this.componentId, text: this.label }), h("textarea", { key: '8bebb57b878c745e07ebfc18afd2aaf7d2da66a5', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
+            h("p", { key: 'b9a83aeb83b0cf4232359154d36a8ec48b0a3638', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'ee70c7aa56b8a8e18de58394c04140065670f8db', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-textarea.js","sourceRoot":"","sources":["../../../src/components/pds-textarea/pds-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrl: 'pds-textarea.scss',\n  shadow: true,\n})\nexport class PdsTextarea {\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the textarea is disabled\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Specifies the error text and provides an error-themed treatment to the field\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a hint or description of the textarea\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the textarea is invalid or throws an error\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the textarea is readonly\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Indicates whether or not the textarea is required\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Event emitted whenever the value of the textarea changes\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  private onTextareaChange = (ev: Event) => {\n    const textarea = ev.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    if (textarea) {\n      this.value = textarea.innerHTML;\n    }\n\n    this.pdsTextareaChange.emit({value: this.value, event: ev});\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <PdsLabel htmlFor={this.componentId} text={this.label} />\n          }\n          <textarea\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onChange={this.onTextareaChange}\n          >{this.value}</textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-textarea.js","sourceRoot":"","sources":["../../../src/components/pds-textarea/pds-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrl: 'pds-textarea.scss',\n  shadow: true,\n})\nexport class PdsTextarea {\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the textarea is disabled\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Specifies the error text and provides an error-themed treatment to the field\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a hint or description of the textarea\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the textarea is invalid or throws an error\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the textarea is readonly\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Indicates whether or not the textarea is required\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Event emitted whenever the value of the textarea changes\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  private onTextareaChange = (ev: Event) => {\n    const textarea = ev.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    if (textarea) {\n      this.value = textarea.innerHTML;\n    }\n\n    this.pdsTextareaChange.emit({value: this.value, event: ev});\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <PdsLabel htmlFor={this.componentId} text={this.label} />\n          }\n          <textarea\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onChange={this.onTextareaChange}\n          >{this.value}</textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,35 +1,35 @@
 :host {
-  --background-color: var(--pine-color-neutral-charcoal-400);
-  --box-shadow: var(--pine-box-shadow-md);
-  --color: var(--pine-color-base-white);
-  --width: 320px;
-  --arrow-size: 6px;
-  --arrow-offset: 14px;
-  --overlay-border-radius: var(--pine-border-radius-md);
-  --overlay-font-size: var(--pine-font-size-body-sm);
-  --overlay-line-height: var(--pine-line-height-sm);
-  --overlay-padding: var(--pine-spacing-xs) calc(var(--pine-spacing-md) / 2);
-  --arrow-pointing-down: var(--arrow-size) var(--arrow-size) 0;
-  --arrow-pointing-to-the-right: var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);
-  --arrow-pointing-to-the-left: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;
-  --arrow-pointing-up: 0 var(--arrow-size) var(--arrow-size);
+  --border-radius-overlay: var(--pine-border-radius-125);
+  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
+  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
+  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
+  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
+  --box-shadow-default: var(--pine-box-shadow-md);
+  --color-background-default: var(--pine-color-charcoal-400);
+  --color-text-default: var(--pine-color-white);
+  --font-size-overlay: var(--pine-font-size-087);
+  --line-height-overlay: var(--pine-line-height-125);
+  --sizing-arrow-default: 6px;
+  --sizing-arrow-offset: 14px;
+  --sizing-width-default: 320px;
+  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);
   display: inline-block;
   position: relative;
 }
 :host ::slotted([slot=content]) {
   white-space: normal;
-  width: var(--width);
+  width: var(--sizing-width-default);
 }
 
 .pds-tooltip__content {
-  background-color: var(--background-color);
-  border-radius: var(--overlay-border-radius);
-  box-shadow: var(--box-shadow);
-  color: var(--color);
-  font-size: var(--overlay-font-size);
-  line-height: var(--overlay-line-height);
+  background-color: var(--color-background-default);
+  border-radius: var(--border-radius-overlay);
+  box-shadow: var(--box-shadow-default);
+  color: var(--color-text-default);
+  font-size: var(--font-size-overlay);
+  line-height: var(--line-height-overlay);
   opacity: 0;
-  padding: var(--overlay-padding);
+  padding: var(--spacing-padding-overlay);
   position: absolute;
   visibility: hidden;
   width: max-content;
@@ -46,97 +46,97 @@
   border-color: transparent;
   border-right-color: transparent;
   border-style: solid;
-  border-width: var(--arrow-pointing-to-the-left);
+  border-width: var(--border-width-arrow-left);
   content: "";
   height: 0;
   position: absolute;
   width: 0;
 }
 .pds-tooltip--right .pds-tooltip__content::after {
-  border-inline-end-color: var(--background-color);
-  border-width: var(--arrow-pointing-to-the-left);
-  left: calc(var(--arrow-size) * -1);
+  border-inline-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-left);
+  left: calc(var(--sizing-arrow-default) * -1);
   top: 50%;
   transform: translateY(-50%);
 }
 .pds-tooltip--right-end .pds-tooltip__content::after {
-  border-inline-end-color: var(--background-color);
-  border-width: var(--arrow-pointing-to-the-left);
-  bottom: var(--arrow-offset);
-  left: calc(var(--arrow-size) * -1);
+  border-inline-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-left);
+  bottom: var(--sizing-arrow-offset);
+  left: calc(var(--sizing-arrow-default) * -1);
   top: initial;
 }
 .pds-tooltip--right-start .pds-tooltip__content::after {
-  border-inline-end-color: var(--background-color);
-  border-width: var(--arrow-pointing-to-the-left);
-  left: calc(var(--arrow-size) * -1);
-  top: var(--arrow-offset);
+  border-inline-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-left);
+  left: calc(var(--sizing-arrow-default) * -1);
+  top: var(--sizing-arrow-offset);
 }
 .pds-tooltip--top .pds-tooltip__content::after {
-  border-block-start-color: var(--background-color);
-  border-width: var(--arrow-pointing-down);
-  bottom: calc(var(--arrow-size) * -1);
+  border-block-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-down);
+  bottom: calc(var(--sizing-arrow-default) * -1);
   left: 50%;
   top: initial;
   transform: translateX(-50%);
 }
 .pds-tooltip--top-start .pds-tooltip__content::after {
-  border-block-start-color: var(--background-color);
-  border-width: var(--arrow-pointing-down);
-  bottom: calc(var(--arrow-size) * -1);
-  left: var(--arrow-offset);
+  border-block-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-down);
+  bottom: calc(var(--sizing-arrow-default) * -1);
+  left: var(--sizing-arrow-offset);
   top: initial;
 }
 .pds-tooltip--top-end .pds-tooltip__content::after {
-  border-block-start-color: var(--background-color);
-  border-width: var(--arrow-pointing-down);
-  bottom: calc(var(--arrow-size) * -1);
+  border-block-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-down);
+  bottom: calc(var(--sizing-arrow-default) * -1);
   left: initial;
-  right: var(--arrow-offset);
+  right: var(--sizing-arrow-offset);
   top: initial;
 }
 .pds-tooltip--left .pds-tooltip__content::after {
-  border-inline-start-color: var(--background-color);
-  border-width: var(--arrow-pointing-to-the-right);
+  border-inline-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-right);
   left: initial;
-  right: calc(var(--arrow-size) * -1);
+  right: calc(var(--sizing-arrow-default) * -1);
   top: 50%;
   transform: translateY(-50%);
 }
 .pds-tooltip--left-end .pds-tooltip__content::after {
-  border-inline-start-color: var(--background-color);
-  border-width: var(--arrow-pointing-to-the-right);
-  bottom: var(--arrow-offset);
+  border-inline-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-right);
+  bottom: var(--sizing-arrow-offset);
   left: initial;
-  right: calc(var(--arrow-size) * -1);
+  right: calc(var(--sizing-arrow-default) * -1);
   top: initial;
 }
 .pds-tooltip--left-start .pds-tooltip__content::after {
-  border-inline-start-color: var(--background-color);
-  border-width: var(--arrow-pointing-to-the-right);
+  border-inline-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-right);
   left: initial;
-  right: calc(var(--arrow-size) * -1);
-  top: var(--arrow-offset);
+  right: calc(var(--sizing-arrow-default) * -1);
+  top: var(--sizing-arrow-offset);
 }
 .pds-tooltip--bottom .pds-tooltip__content::after {
-  border-block-end-color: var(--background-color);
-  border-width: var(--arrow-pointing-up);
+  border-block-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-up);
   left: 50%;
-  top: calc(var(--arrow-size) * -1);
+  top: calc(var(--sizing-arrow-default) * -1);
   transform: translateX(-50%);
 }
 .pds-tooltip--bottom-end .pds-tooltip__content::after {
-  border-block-end-color: var(--background-color);
-  border-width: var(--arrow-pointing-up);
+  border-block-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-up);
   left: initial;
-  right: var(--arrow-offset);
-  top: calc(var(--arrow-size) * -1);
+  right: var(--sizing-arrow-offset);
+  top: calc(var(--sizing-arrow-default) * -1);
 }
 .pds-tooltip--bottom-start .pds-tooltip__content::after {
-  border-block-end-color: var(--background-color);
-  border-width: var(--arrow-pointing-up);
-  left: var(--arrow-offset);
-  top: calc(var(--arrow-size) * -1);
+  border-block-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-up);
+  left: var(--sizing-arrow-offset);
+  top: calc(var(--sizing-arrow-default) * -1);
 }
 .pds-tooltip--no-arrow .pds-tooltip__content::after {
   border-width: 0;

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

@@ -58,13 +58,13 @@ export class PdsTooltip {
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: 'b4b6ca5fbf3a5b99b4fe74d4b874c81f51d46e8d', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '234af23d5c082cbaf02c3f4026d094e19514520e', class: `
+        return (h(Host, { key: '088766be31b8716e158cbffd4afc4ada0f14dc3d', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: 'c4fb29b5d5834a9e94f040ded6daf15cf3fcc6ff', class: `
             pds-tooltip
             pds-tooltip--${this.placement}
             ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
             ${this.opened ? 'pds-tooltip--is-open' : ''}
             ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
-          ` }, h("span", { key: '8636e6ec54ca42b7a96683b2a97f26ee4994ce75', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '915856a37e16dd9a5d19afec7111d90f3a1e1d0d' })), h("div", { key: '0e50c1c3559cfc529da2fc67a8b248e63ad8f75b', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip" }, h("slot", { key: 'dafafd2a343b10ed140eb5bd325d3b17a3dc062a', name: "content" }), this.content))));
+          ` }, h("span", { key: '25a69f567a33df83ff784d36de5bce86874d6d1d', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: 'eab3bbca9b913b04ef4dfe7a8e472c43d57c4979' })), h("div", { key: 'bdaa9f26f848b440a8432a44481f8a1059ae0689', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip" }, h("slot", { key: '0e62fe237e9a39208aa2146e2dc1d6df6b25b41d', name: "content" }), this.content))));
     }
     static get is() { return "pds-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

@@ -1,9 +1,9 @@
 {
-  "timestamp": "2024-03-19T18:56:51",
+  "timestamp": "2024-05-16T19:53:43",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.13.0",
-    "typescriptVersion": "5.4.2"
+    "version": "4.15.0",
+    "typescriptVersion": "5.4.4"
   },
   "components": [
     {
@@ -2097,7 +2097,7 @@
             "resolved": "boolean",
             "references": {}
           },
-          "mutable": false,
+          "mutable": true,
           "attr": "checked",
           "reflectToAttr": false,
           "docs": "It determines whether or not the checkbox is checked.",
@@ -3631,7 +3631,7 @@
           "docsTags": [
             {
               "name": "defaultValue",
-              "text": "'var(--pds-color-primary)'"
+              "text": "'var(--pine-color-blue-300)'"
             }
           ],
           "values": [
@@ -4440,15 +4440,15 @@
           "required": false
         },
         {
-          "name": "handle",
+          "name": "showHandle",
           "type": "boolean",
           "complexType": {
             "original": "boolean",
             "resolved": "boolean",
             "references": {}
           },
-          "mutable": false,
-          "attr": "handle",
+          "mutable": true,
+          "attr": "show-handle",
           "reflectToAttr": false,
           "docs": "Determines whether `sortable-item` should have a handle.",
           "docsTags": [
@@ -5319,12 +5319,12 @@
       ],
       "styles": [
         {
-          "name": "--panel-margin-top",
+          "name": "--spacing-panel-margin-top",
           "annotation": "prop",
           "docs": "Optional margin-top for panels"
         },
         {
-          "name": "--panel-padding",
+          "name": "--spacing-panel-padding",
           "annotation": "prop",
           "docs": "Optional padding for panels"
         }

package/dist/esm/{index-5e54ea50.js → index-6f0bb1b9.js}

@@ -841,17 +841,35 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
     const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
     {
         // remove attributes no longer present on the vnode by setting them to undefined
-        for (memberName in oldVnodeAttrs) {
+        for (memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
             if (!(memberName in newVnodeAttrs)) {
                 setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
             }
         }
     }
     // add new & update changed attributes
-    for (memberName in newVnodeAttrs) {
+    for (memberName of sortedAttrNames(Object.keys(newVnodeAttrs))) {
         setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
     }
 };
+/**
+ * Sort a list of attribute names to ensure that all the attribute names which
+ * are _not_ `"ref"` come before `"ref"`. Preserve the order of the non-ref
+ * attributes.
+ *
+ * **Note**: if the supplied attributes do not include `'ref'` then the same
+ * (by reference) array will be returned without modification.
+ *
+ * @param attrNames attribute names to sort
+ * @returns a list of attribute names, sorted if they include `"ref"`
+ */
+function sortedAttrNames(attrNames) {
+    return attrNames.includes('ref')
+        ? // we need to sort these to ensure that `'ref'` is the last attr
+            [...attrNames.filter((attr) => attr !== 'ref'), 'ref']
+        : // no need to sort, return the original array
+            attrNames;
+}
 /**
  * Create a DOM Node corresponding to one of the children of a given VNode.
  *
@@ -1687,6 +1705,11 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                             let refNode = (_b = orgLocationNode['s-nr']) !== null && _b !== void 0 ? _b : null;
                             if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
                                 refNode = refNode.nextSibling;
+                                // If the refNode is the same node to be relocated or another element's slot reference, keep searching to find the
+                                // correct relocation target
+                                while (refNode === nodeToRelocate || (refNode === null || refNode === void 0 ? void 0 : refNode['s-sr'])) {
+                                    refNode = refNode === null || refNode === void 0 ? void 0 : refNode.nextSibling;
+                                }
                                 if (!refNode || !refNode['s-nr']) {
                                     insertBeforeNode = refNode;
                                     break;
@@ -2766,4 +2789,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-5e54ea50.js.map
+//# sourceMappingURL=index-6f0bb1b9.js.map