@pine-ds/core 2.1.1 → 2.1.3

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

@@ -1,4 +1,4 @@
-import { html, render } from 'lit';
+import { html } from 'lit';
 import { withActions } from '@storybook/addon-actions/decorator';
 import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
 
@@ -12,7 +12,7 @@ export default {
     },
   },
   title: 'components/Tabs',
-}
+};
 
 const BaseTemplate = (args) => html`
 <pds-tabs active-tab-name=${args.activeTabName} variant=${args.variant} component-id=${args.componentId} tablist-label=${args.tablistLabel}>
@@ -25,6 +25,22 @@ const BaseTemplate = (args) => html`
 </pds-tabs>
 `;
 
+export const Default = BaseTemplate.bind({});
+Default.args = {
+  activeTabName: "Dollop",
+  componentId: "primary",
+  variant: "primary",
+  tablistLabel: "Foo",
+}
+
+export const Filter = BaseTemplate.bind({});
+Filter.args = {
+  activeTabName: "Sturdy",
+  componentId: "filter",
+  variant: 'filter',
+  tablistLabel: "Foo",
+}
+
 const AvailabilityTemplate = (args) => html`
 <div style="background-color: #ddd; padding: 20px;">
   <pds-tabs active-tab-name=${args.activeTabName} variant=${args.variant} component-id=${args.componentId} tablist-label=${args.tablistLabel}>
@@ -38,14 +54,6 @@ const AvailabilityTemplate = (args) => html`
 </div>
 `;
 
-export const Primary = BaseTemplate.bind({});
-Primary.args = {
-  activeTabName: "Dollop",
-  componentId: "primary",
-  variant: "primary",
-  tablistLabel: "Foo",
-}
-
 export const Availability = AvailabilityTemplate.bind({});
 Availability.args = {
   activeTabName: "tuesday",
@@ -53,11 +61,3 @@ Availability.args = {
   variant: 'availability',
   tablistLabel: "Foo",
 }
-
-export const Filter = BaseTemplate.bind({});
-Filter.args = {
-  activeTabName: "Sturdy",
-  componentId: "filter",
-  variant: 'filter',
-  tablistLabel: "Foo",
-}

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

@@ -0,0 +1,218 @@
+:host {
+  display: inline;
+}
+
+/* stylelint-disable */
+h1 {
+  font-family: "GreetStandard";
+  font-size: 28px;
+  font-weight: 600;
+  letter-spacing: 0.26px;
+  line-height: 1.25;
+}
+
+h2 {
+  font-family: "GreetStandard";
+  font-size: 26px;
+  font-weight: 600;
+  letter-spacing: 0.24px;
+  line-height: 1.25;
+}
+
+h3 {
+  font-family: "GreetStandard";
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.22px;
+  line-height: 1.25;
+}
+
+h4 {
+  font-family: "GreetStandard";
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+  line-height: 1.25;
+}
+
+h5 {
+  font-family: "GreetStandard";
+  font-size: 18px;
+  font-weight: 500;
+  letter-spacing: 0.18px;
+  line-height: 1.25;
+}
+
+h6 {
+  font-family: "GreetStandard";
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 1.25;
+}
+
+code, em, p, pre, strong {
+  font-family: "Inter";
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: -0.16px;
+  line-height: 1.425;
+}
+
+/* stylelint-enable */
+code, pre {
+  font-family: monospace;
+  letter-spacing: 0;
+  line-height: 1;
+}
+
+em {
+  font-style: normal;
+}
+
+strong {
+  font-weight: bolder;
+}
+
+h1, h2, h3, h4, h5, h6, p, code, pre, em, strong {
+  color: var(--pine-color-text-default);
+  margin: 0;
+}
+
+:host([truncate]) > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host([italic]) > * {
+  font-style: italic;
+}
+
+.pds-text--color-primary {
+  color: var(--pine-color-white);
+}
+
+.pds-text--color-secondary {
+  color: var(--pine-color-grey-800);
+}
+
+.pds-text--color-neutral {
+  color: var(--pine-color-grey-900);
+}
+
+.pds-text--color-accent {
+  color: var(--pine-color-purple-900);
+}
+
+.pds-text--color-danger {
+  color: var(--pine-color-red-900);
+}
+
+.pds-text--color-info {
+  color: var(--pine-color-blue-900);
+}
+
+.pds-text--color-success {
+  color: var(--pine-color-green-900);
+}
+
+.pds-text--color-warning {
+  color: var(--pine-color-yellow-900);
+}
+
+.pds-text--size-2xl {
+  font-size: 20px;
+}
+
+.pds-text--size-xl {
+  font-size: 18px;
+}
+
+.pds-text--size-lg {
+  font-size: 16px;
+}
+
+.pds-text--size-md {
+  font-size: 14px;
+}
+
+.pds-text--size-sm {
+  font-size: 12px;
+}
+
+.pds-text--size-xs {
+  font-size: 10px;
+}
+
+.pds-text--size-2xs {
+  font-size: 8px;
+}
+
+.pds-text--weight-extra-light {
+  font-weight: 200;
+}
+
+.pds-text--weight-light {
+  font-weight: 300;
+}
+
+.pds-text--weight-regular {
+  font-weight: 400;
+}
+
+.pds-text--weight-medium {
+  font-weight: 500;
+}
+
+.pds-text--weight-semibold {
+  font-weight: 600;
+}
+
+.pds-text--weight-bold {
+  font-weight: 700;
+}
+
+.pds-text--gutter-2xl {
+  margin-block-end: 48px;
+}
+
+.pds-text--gutter-xl {
+  margin-block-end: 40px;
+}
+
+.pds-text--gutter-lg {
+  margin-block-end: 32px;
+}
+
+.pds-text--gutter-md {
+  margin-block-end: 24px;
+}
+
+.pds-text--gutter-sm {
+  margin-block-end: 16px;
+}
+
+.pds-text--gutter-xs {
+  margin-block-end: 8px;
+}
+
+.pds-text--gutter-2xs {
+  margin-block-end: 4px;
+}
+
+.pds-text--align-start {
+  text-align: start;
+}
+
+.pds-text--align-center {
+  text-align: center;
+}
+
+.pds-text--align-end {
+  text-align: end;
+}
+
+.pds-text--align-justify {
+  text-align: justify;
+}

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

@@ -0,0 +1,143 @@
+import { h } from "@stencil/core";
+export class PdsText {
+    constructor() {
+        this.align = undefined;
+        this.color = undefined;
+        this.gutter = undefined;
+        this.size = undefined;
+        this.weight = undefined;
+        this.tag = "p";
+    }
+    render() {
+        const Tag = this.tag;
+        const typeClasses = `
+      pds-text
+      ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}
+      ${this.color !== undefined && this.color.trim() !== '' ? `pds-text--color-${this.color}` : ''}
+      ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}
+      ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}
+      ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
+    `;
+        return (h(Tag, { key: '3ccf61734e14ed7ea5013bce54717d2846b64f07', class: typeClasses }, h("slot", { key: '7368685e2042d306006bf8fc83b80ec246ca252d' })));
+    }
+    static get is() { return "pds-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-text.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'justify'",
+                    "resolved": "\"center\" | \"end\" | \"justify\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text alignment."
+                },
+                "attribute": "align",
+                "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'accent'\n  | 'danger'\n  | 'info'\n  | 'success'\n  | 'warning'",
+                    "resolved": "\"accent\" | \"danger\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text color."
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "gutter": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs'",
+                    "resolved": "\"2xl\" | \"2xs\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the bottom margin for the text."
+                },
+                "attribute": "gutter",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs'",
+                    "resolved": "\"2xl\" | \"2xs\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the font size."
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'extra-light'\n  | 'light'\n  | 'regular'\n  | 'medium'\n  | 'semibold'\n  | 'bold'",
+                    "resolved": "\"bold\" | \"extra-light\" | \"light\" | \"medium\" | \"regular\" | \"semibold\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the font weight."
+                },
+                "attribute": "weight",
+                "reflect": false
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'p'\n  | 'code'\n  | 'pre'\n  | 'strong'\n  | 'em'",
+                    "resolved": "\"code\" | \"em\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"pre\" | \"strong\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines what semantic text tag to render."
+                },
+                "attribute": "tag",
+                "reflect": false,
+                "defaultValue": "\"p\""
+            }
+        };
+    }
+}
+//# sourceMappingURL=pds-text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-text.js","sourceRoot":"","sources":["../../../src/components/pds-text/pds-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,OAAO;;;;;;;mBAqET,GAAG;;IAEZ,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAErB,MAAM,WAAW,GAAG;;QAEhB,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3F,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;KAClG,CAAC;QAEF,OAAO,CACL,EAAC,GAAG,qDAAC,KAAK,EAAE,WAAW;YACrB,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-text',\n  styleUrl: 'pds-text.scss',\n  shadow: true,\n})\nexport class PdsText {\n\n  /**\n   * Sets the text alignment.\n   */\n  @Prop() align?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Sets the text color.\n   */\n  @Prop() color?:\n  | 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'accent'\n  | 'danger'\n  | 'info'\n  | 'success'\n  | 'warning';\n\n  /**\n   * Set the bottom margin for the text.\n   */\n  @Prop() gutter?:\n  | '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs';\n\n  /**\n   * Sets the font size.\n   */\n  @Prop() size?:\n  | '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs';\n\n  /**\n   * Sets the font weight.\n   */\n  @Prop() weight?:\n  | 'extra-light'\n  | 'light'\n  | 'regular'\n  | 'medium'\n  | 'semibold'\n  | 'bold';\n\n  /**\n   * Determines what semantic text tag to render.\n   */\n  @Prop() tag:\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'p'\n  | 'code'\n  | 'pre'\n  | 'strong'\n  | 'em' = \"p\";\n\n  render() {\n    const Tag = this.tag;\n\n    const typeClasses = `\n      pds-text\n      ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}\n      ${this.color !== undefined && this.color.trim() !== '' ? `pds-text--color-${this.color}` : ''}\n      ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}\n      ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}\n      ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}\n    `;\n\n    return (\n      <Tag class={typeClasses}>\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,111 @@
+import { html } from 'lit';
+
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+
+export default {
+  argTypes: extractArgTypes('pds-text'),
+  component: 'pds-text',
+  title: 'components/Text',
+}
+
+const BaseTemplate = (args) => html`
+<pds-text
+  align="${args.align}"
+  color="${args.color}"
+  size="${args.size}"
+  tag="${args.tag}"
+  weight="${args.weight}"
+>
+  ${args.slot}
+</pds-text>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  slot: 'Hello World',
+  tag: 'h1',
+};
+
+export const Align = BaseTemplate.bind();
+Align.args = {
+  slot: '"Had to be me. Someone else might have gotten it wrong."',
+  align: 'center',
+  tag: 'em',
+};
+
+export const Color = BaseTemplate.bind();
+Color.args = {
+  slot: 'Hello World',
+  color: 'accent',
+  tag: 'p',
+};
+
+export const FontSize = BaseTemplate.bind();
+FontSize.args = {
+  slot: 'Hello World',
+  size: '2xl',
+  tag: 'p',
+};
+
+export const FontWeight = BaseTemplate.bind();
+FontWeight.args = {
+  slot: 'Hello World',
+  weight: 'bold',
+  tag: 'p',
+};
+
+const GutterTemplate = (args) => html`
+<pds-text
+  align="${args.align}"
+  color="${args.color}"
+  gutter="${args.gutter}"
+  size="${args.size}"
+  tag="${args.tag}"
+  weight="${args.weight}"
+  truncate
+>
+  ${args.slot}
+</pds-text>
+<pds-text tag="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed</pds-text>`;
+
+export const Gutter = GutterTemplate.bind();
+Gutter.args = {
+  slot: 'Title',
+  gutter: 'lg',
+  tag: 'h2',
+};
+
+const ItalicTemplate = (args) => html`
+<pds-text
+  align="${args.align}"
+  color="${args.color}"
+  size="${args.size}"
+  tag="${args.tag}"
+  weight="${args.weight}"
+  italic
+>
+  ${args.slot}
+</pds-text>`;
+
+export const Italic = ItalicTemplate.bind();
+Italic.args = {
+  slot: 'Id irure id magna ipsum voluptate irure esse eu nulla',
+  tag: 'p',
+};
+
+const TruncateTemplate = (args) => html`
+<pds-text
+  align="${args.align}"
+  color="${args.color}"
+  size="${args.size}"
+  tag="${args.tag}"
+  weight="${args.weight}"
+  truncate
+>
+  ${args.slot}
+</pds-text>`;
+
+export const Truncate = TruncateTemplate.bind();
+Truncate.args = {
+  slot: 'Id irure id magna ipsum voluptate irure esse eu nulla. Ullamco officia adipisicing qui nulla non sint. Mollit tempor veniam quis nisi aliqua duis elit eu laborum et incididunt ut sit irure. Nisi aute veniam sint do amet consectetur velit. Quis sunt enim mollit deserunt laboris dolor elit exercitation. Id labore deserunt sint consequat laboris nulla do ut magna. Aliquip labore esse sint consequat voluptate tempor consectetur sit sint culpa occaecat ut velit est.',
+  tag: 'p',
+};

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

@@ -21,6 +21,7 @@
   --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);
+  --spacing-icon-error-message: var(--pine-spacing-050);
   --typography-message-default: var(--pine-typography-body-sm-default);
   display: inline;
 }
@@ -71,5 +72,8 @@ label {
 }
 
 .pds-textarea__error-message {
+  align-items: center;
   color: var(--color-text-message-error-default);
+  display: flex;
+  gap: var(--spacing-icon-error-message);
 }

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { assignDescription, isRequired, messageId } from "../../utils/form";
 import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { danger } from "@pine-ds/icons/icons";
 export class PdsTextarea {
     constructor() {
         this.onTextareaChange = (ev) => {
@@ -33,10 +34,10 @@ export class PdsTextarea {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '14f6fea952c2ff5d1c87f8197ac4f0143163232a', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '869abfd7d6fb788a136a728732b3fa5980817c3b', class: "pds-textarea" }, this.label &&
-            h(PdsLabel, { key: 'c4c659054ab9c9a634f46661c7255a99c22c9c34', htmlFor: this.componentId, text: this.label }), h("textarea", { key: '37eabc8d2f9027bcded41d4789c49f57d117d23a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, 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: '328bb200eff1b3d14905579d3e96904b0eb92af2', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: '6d8594f1819ad67cb055cf4f9d5b52a561ef94a8', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, this.errorMessage))));
+        return (h(Host, { key: '461039704016b1b3858af80440863f1fc4930ceb', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'de68ba7ca3b6714e1da8594e76f60bab2a3de1fb', class: "pds-textarea" }, this.label &&
+            h(PdsLabel, { key: '102802b8244a929492731700fdde06a053f3e2d5', htmlFor: this.componentId, text: this.label }), h("textarea", { key: '55a3fde040749bd03a5e681dafad7db0717f4a7f', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, 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: '552e0c1240cdc51c215f5ddfc51f250156d8a4b2', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'a7e6f4a0d926203f5ac56a8f99d03fd9b5f3647b', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '53a40e204e076147b27c921cdbe54336ca50d9e3', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -101,7 +102,7 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is disabled"
+                    "text": "Determines whether or not the textarea is disabled."
                 },
                 "attribute": "disabled",
                 "reflect": false,
@@ -119,7 +120,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the error text and provides an error-themed treatment to the field"
+                    "text": "Displays an error message below the textarea field."
                 },
                 "attribute": "error-message",
                 "reflect": false
@@ -136,7 +137,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Displays a hint or description of the textarea"
+                    "text": "Displays a message or hint below the textarea field."
                 },
                 "attribute": "helper-message",
                 "reflect": false
@@ -156,7 +157,7 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is invalid or throws an error"
+                    "text": "Determines whether or not the textarea is invalid or throws an error."
                 },
                 "attribute": "invalid",
                 "reflect": false,
@@ -174,7 +175,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Text to be displayed as the textarea label"
+                    "text": "Text to be displayed as the textarea label."
                 },
                 "attribute": "label",
                 "reflect": false
@@ -191,7 +192,7 @@ export class PdsTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the name, submitted with the form name/value pair. This value will mirror the componentId"
+                    "text": "Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId."
                 },
                 "attribute": "name",
                 "reflect": false,
@@ -209,7 +210,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies a short hint that describes the expected value of the textarea"
+                    "text": "Specifies a short hint that describes the expected value of the textarea."
                 },
                 "attribute": "placeholder",
                 "reflect": false
@@ -229,7 +230,7 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is readonly"
+                    "text": "Determines whether or not the textarea is readonly."
                 },
                 "attribute": "readonly",
                 "reflect": false,
@@ -250,7 +251,7 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is required"
+                    "text": "Determines whether or not the textarea is required."
                 },
                 "attribute": "required",
                 "reflect": false,
@@ -268,7 +269,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets number of rows of text visible without needing to scroll in the textarea"
+                    "text": "Sets number of rows of text visible without needing to scroll in the textarea."
                 },
                 "attribute": "rows",
                 "reflect": false
@@ -285,7 +286,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the textarea"
+                    "text": "The value of the textarea."
                 },
                 "attribute": "value",
                 "reflect": false
@@ -301,7 +302,7 @@ export class PdsTextarea {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted whenever the value of the textarea changes"
+                    "text": "Event emitted whenever the value of the textarea changes."
                 },
                 "complexType": {
                     "original": "TextareaChangeEventDetail",