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

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

@@ -0,0 +1,88 @@
+:host {
+  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);
+  --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-blue-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;
+}
+
+.pds-textarea {
+  display: flex;
+  flex-direction: column;
+}
+
+label {
+  display: block;
+  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(--color-background);
+  border: var(--pine-border-interactive-default);
+  border-radius: var(--pine-border-radius-md);
+  font-family: inherit;
+  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(--color-border-hover);
+}
+.pds-textarea__field:disabled {
+  background-color: var(--color-background-disabled);
+  color: var(--color-disabled-default);
+  cursor: not-allowed;
+}
+.pds-textarea__field:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+.pds-textarea__field::placeholder {
+  color: var(--color-placeholder-default);
+}
+.pds-textarea__field.is-invalid {
+  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(--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-default);
+}

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

@@ -0,0 +1,303 @@
+import { Host, h } from "@stencil/core";
+import { assignDescription, isRequired, messageId } from "../../utils/form";
+import { PdsLabel } from "../_internal/pds-label/pds-label";
+export class PdsTextarea {
+    constructor() {
+        this.onTextareaChange = (ev) => {
+            const textarea = ev.target;
+            isRequired(textarea, this);
+            if (textarea) {
+                this.value = textarea.innerHTML;
+            }
+            this.pdsTextareaChange.emit({ value: this.value, event: ev });
+        };
+        this.componentId = undefined;
+        this.disabled = false;
+        this.errorMessage = undefined;
+        this.helperMessage = undefined;
+        this.invalid = false;
+        this.label = undefined;
+        this.name = this.componentId;
+        this.placeholder = undefined;
+        this.readonly = false;
+        this.required = false;
+        this.rows = undefined;
+        this.value = undefined;
+    }
+    textareaClassNames() {
+        const classNames = ['pds-textarea__field'];
+        if (this.invalid && this.invalid === true) {
+            classNames.push('is-invalid');
+        }
+        return classNames.join('  ');
+    }
+    render() {
+        return (h(Host, { key: 'f58ccd5b20fc30c6e6153e04e98b27fe265040af', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '480b51012d0f7a05d83fb8cb359d2bc3a4e82189', class: "pds-textarea" }, this.label &&
+            h(PdsLabel, { key: '0b34ee6ee8eec6891c00596f840d028ab6ac36bb', htmlFor: this.componentId, text: this.label }), h("textarea", { key: '6f066ce38aaec3257bddd69715118aa5740723c1', "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: '91c66558978cdbb3191c0af31c34c2647749c01a', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'da8320d10ace733c7181ab3c6827da99d94d7ebd', "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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-textarea.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Indicates whether or not the textarea is disabled"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the error text and provides an error-themed treatment to the field"
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays a hint or description of the textarea"
+                },
+                "attribute": "helper-message",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Indicates whether or not the textarea is invalid or throws an error"
+                },
+                "attribute": "invalid",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to be displayed as the textarea label"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the name, submitted with the form name/value pair. This value will mirror the componentId"
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "this.componentId"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies a short hint that describes the expected value of the textarea"
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Indicates whether or not the textarea is readonly"
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Indicates whether or not the textarea is required"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets number of rows of text visible without needing to scroll in the textarea"
+                },
+                "attribute": "rows",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the textarea"
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsTextareaChange",
+                "name": "pdsTextareaChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted whenever the value of the textarea changes"
+                },
+                "complexType": {
+                    "original": "TextareaChangeEventDetail",
+                    "resolved": "TextareaChangeEventDetail",
+                    "references": {
+                        "TextareaChangeEventDetail": {
+                            "location": "import",
+                            "path": "./textarea-interface",
+                            "id": "src/components/pds-textarea/textarea-interface.ts::TextareaChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pds-textarea.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,111 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  args: {
+    componentId: null,
+    disabled: false,
+    errorMessage: null,
+    helperMessage: null,
+    invalid: false,
+    label: null,
+    name: null,
+    placeholder: null,
+    readonly: false,
+    required: false,
+    value: null,
+  },
+  argTypes: extractArgTypes('pds-textarea'),
+  component: 'pds-textarea',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['onchange', 'pdsTextareaChange'],
+    },
+  },
+  title: 'components/Textarea',
+}
+
+const BaseTemplate = (args) => html`<pds-textarea
+  component-id="${args.componentId}"
+  disabled="${args.disabled}"
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  invalid="${args.invalid}"
+  label="${args.label}"
+  name="${args.name}"
+  onChange=${args.onChange}"
+  placeholder="${args.placeholder}"
+  readonly="${args.readonly}"
+  required="${args.required}"
+  rows="${args.rows}"
+  value="${args.value}"
+  >
+</pds-textarea>`;
+
+export const Default = BaseTemplate.bind({});
+Default.args = {
+  componentId: 'pds-textarea-default-example',
+  label: 'Name',
+  name: 'Default',
+};
+
+export const Rows = BaseTemplate.bind({});
+Rows.args = {
+  componentId: 'pds-textarea-rows-example',
+  label: 'Name',
+  name: 'Rows',
+  rows: 4,
+};
+
+export const Required = BaseTemplate.bind({});
+Required.args = {
+  componentId: 'pds-textarea-required-example',
+  label: 'Name',
+  name: 'Required',
+  required: true,
+};
+
+export const Placeholder = BaseTemplate.bind({});
+Placeholder.args = {
+  componentId: 'pds-textarea-placeholder-example',
+  label: 'Name',
+  name: 'Placeholder',
+  placeholder: 'Placeholder...'
+};
+
+export const Disabled = BaseTemplate.bind({});
+Disabled.args = {
+  componentId: 'pds-textarea-disabled-example',
+  disabled: true,
+  label: 'Name',
+  name: 'Disabled',
+};
+
+export const Readonly = BaseTemplate.bind({});
+Readonly.args = {
+  componentId: 'pds-textarea-readonly-example',
+  label: 'Name',
+  name: 'Readonly',
+  readonly: true,
+  value: 'Readonly Value'
+};
+
+export const Message = BaseTemplate.bind({});
+Message.args = {
+  componentId: 'pds-textarea-helper-example',
+  helperMessage: 'Helper message text',
+  label: 'Name',
+  name: 'Message',
+};
+
+export const Invalid = BaseTemplate.bind({});
+Invalid.args = {
+  componentId: 'pds-textarea-error-example',
+  errorMessage: 'Error',
+  invalid: true,
+  label: 'Name',
+  name: 'Error',
+  required: true,
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-interface.js","sourceRoot":"","sources":["../../../src/components/pds-textarea/textarea-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface TextareaChangeEventDetail {\n  event?: Event;\n  value: string | null;\n}\n\nexport interface TextareaEvent <T = TextareaChangeEventDetail> extends CustomEvent {\n  detail: T;\n  target: HTMLPdsTextareaElement;\n}\n"]}

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

@@ -0,0 +1,147 @@
+:host {
+  --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(*) {
+  display: flex;
+}
+:host ::slotted([slot=content]) {
+  display: block;
+  white-space: normal;
+  width: var(--sizing-width-default);
+}
+
+.pds-tooltip__content {
+  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(--spacing-padding-overlay);
+  position: absolute;
+  visibility: hidden;
+  width: max-content;
+}
+.pds-tooltip--is-open .pds-tooltip__content {
+  opacity: 1;
+  visibility: visible;
+  z-index: 1;
+}
+:host(.pds-tooltip--has-html-content) .pds-tooltip__content {
+  width: auto;
+}
+.pds-tooltip__content::after {
+  border-color: transparent;
+  border-right-color: transparent;
+  border-style: solid;
+  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(--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(--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(--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(--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(--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(--color-background-default);
+  border-width: var(--border-width-arrow-down);
+  bottom: calc(var(--sizing-arrow-default) * -1);
+  left: initial;
+  right: var(--sizing-arrow-offset);
+  top: initial;
+}
+.pds-tooltip--left .pds-tooltip__content::after {
+  border-inline-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-right);
+  left: initial;
+  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(--color-background-default);
+  border-width: var(--border-width-arrow-right);
+  bottom: var(--sizing-arrow-offset);
+  left: initial;
+  right: calc(var(--sizing-arrow-default) * -1);
+  top: initial;
+}
+.pds-tooltip--left-start .pds-tooltip__content::after {
+  border-inline-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-right);
+  left: initial;
+  right: calc(var(--sizing-arrow-default) * -1);
+  top: var(--sizing-arrow-offset);
+}
+.pds-tooltip--bottom .pds-tooltip__content::after {
+  border-block-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-up);
+  left: 50%;
+  top: calc(var(--sizing-arrow-default) * -1);
+  transform: translateX(-50%);
+}
+.pds-tooltip--bottom-end .pds-tooltip__content::after {
+  border-block-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-up);
+  left: initial;
+  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(--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;
+}