npm - @pine-ds/core - Versions diffs - 2.1.1 → 2.1.2 - Mend

@pine-ds/core 2.1.1 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (493) hide show

package/dist/cjs/pds-text.cjs.entry.js ADDED Viewed

@@ -0,0 +1,37 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-b7d9268e.js');
+const pdsTextCss = ":host{display:inline}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}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{-webkit-margin-after:48px;margin-block-end:48px}.pds-text--gutter-xl{-webkit-margin-after:40px;margin-block-end:40px}.pds-text--gutter-lg{-webkit-margin-after:32px;margin-block-end:32px}.pds-text--gutter-md{-webkit-margin-after:24px;margin-block-end:24px}.pds-text--gutter-sm{-webkit-margin-after:16px;margin-block-end:16px}.pds-text--gutter-xs{-webkit-margin-after:8px;margin-block-end:8px}.pds-text--gutter-2xs{-webkit-margin-after:4px;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}";
+const PdsTextStyle0 = pdsTextCss;
+const PdsText = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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 (index.h(Tag, { key: '3ccf61734e14ed7ea5013bce54717d2846b64f07', class: typeClasses }, index.h("slot", { key: '7368685e2042d306006bf8fc83b80ec246ca252d' })));
+    }
+};
+PdsText.style = PdsTextStyle0;
+exports.pds_text = PdsText;
+//# sourceMappingURL=pds-text.cjs.entry.js.map

package/dist/cjs/pds-text.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"pds-text.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,kmFAAkmF,CAAC;AACtnF,sBAAe,UAAU;;MCMZ,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,GAAG,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE;QAC3F,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,oBAAoB,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,kBAAkB,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,oBAAoB,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;KAClG,CAAC;QAEF,QACEA,QAAC,GAAG,qDAAC,KAAK,EAAE,WAAW,IACrBA,oEAAQ,CACJ,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/pds-text/pds-text.scss?tag=pds-text&encapsulation=shadow","src/components/pds-text/pds-text.tsx"],"sourcesContent":[":host {\n display: inline;\n}\n\n// TODO: Update all values to match new semantic tokens, if applicable\n\n/* stylelint-disable */\nh1 {\n font-family: \"GreetStandard\";\n font-size: 28px;\n font-weight: 600;\n letter-spacing: 0.26px;\n line-height: 1.25;\n}\n\nh2 {\n font-family: \"GreetStandard\";\n font-size: 26px;\n font-weight: 600;\n letter-spacing: 0.24px;\n line-height: 1.25;\n}\n\nh3 {\n font-family: \"GreetStandard\";\n font-size: 22px;\n font-weight: 600;\n letter-spacing: 0.22px;\n line-height: 1.25;\n}\n\nh4 {\n font-family: \"GreetStandard\";\n font-size: 20px;\n font-weight: 600;\n letter-spacing: 0.20px;\n line-height: 1.25;\n}\n\nh5 {\n font-family: \"GreetStandard\";\n font-size: 18px;\n font-weight: 500;\n letter-spacing: 0.18px;\n line-height: 1.25;\n}\n\nh6 {\n font-family: \"GreetStandard\";\n font-size: 16px;\n font-weight: 500;\n letter-spacing: 0.16px;\n line-height: 1.25;\n}\n\ncode, em, p, pre, strong {\n font-family: \"Inter\";\n font-size: 14px;\n font-weight: 400;\n letter-spacing: -0.16px;\n line-height: 1.425;\n}\n/* stylelint-enable */\n\ncode, pre {\n font-family: monospace;\n letter-spacing: 0;\n line-height: 1;\n}\n\nem {\n font-style: normal;\n}\n\nstrong {\n font-weight: bolder;\n}\n\nh1, h2, h3, h4, h5, h6, p, code, pre, em, strong {\n color: var(--pine-color-text-default);\n margin: 0;\n}\n\n:host([truncate]) > * {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host([italic]) > * {\n font-style: italic\n}\n\n\n// Colors/Variants/Sentiment\n$type-colors: (\n primary: var(--pine-color-white),\n secondary: var(--pine-color-grey-800),\n neutral: var(--pine-color-grey-900),\n accent: var(--pine-color-purple-900),\n danger: var(--pine-color-red-900),\n info: var(--pine-color-blue-900),\n success: var(--pine-color-green-900),\n warning: var(--pine-color-yellow-900),\n);\n\n@mixin generate-type-colors($type-colors) {\n @each $key, $value in $type-colors {\n .pds-text--color-#{$key} {\n color: $value;\n }\n }\n}\n\n@include generate-type-colors($type-colors);\n\n// Font Sizes\n$type-sizes: (\n 2xl: 20px,\n xl: 18px,\n lg: 16px,\n md: 14px,\n sm: 12px,\n xs: 10px,\n 2xs: 8px,\n);\n\n@mixin generate-type-sizes($type-sizes) {\n @each $key, $value in $type-sizes {\n .pds-text--size-#{$key} {\n font-size: $value;\n }\n }\n}\n\n@include generate-type-sizes($type-sizes);\n\n// Font Weights\n$type-weights: (\n extra-light: 200,\n light: 300,\n regular: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n);\n\n@mixin generate-type-weights($type-weights) {\n @each $key, $value in $type-weights {\n .pds-text--weight-#{$key} {\n font-weight: $value;\n }\n }\n}\n\n@include generate-type-weights($type-weights);\n\n// Gutter Sizes\n$type-gutters: (\n 2xl: 48px,\n xl: 40px,\n lg: 32px,\n md: 24px,\n sm: 16px,\n xs: 8px,\n 2xs: 4px,\n);\n\n@mixin generate-type-gutters($type-gutters) {\n @each $key, $value in $type-gutters {\n .pds-text--gutter-#{$key} {\n margin-block-end: $value;\n }\n }\n}\n\n@include generate-type-gutters($type-gutters);\n\n// Text Alignment\n$type-alignments: (\n start: start,\n center: center,\n end: end,\n justify: justify,\n);\n\n@mixin generate-type-alignments($type-alignments) {\n @each $key, $value in $type-alignments {\n .pds-text--align-#{$key} {\n text-align: $value;\n }\n }\n}\n\n@include generate-type-alignments($type-alignments);\n","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"],"version":3}

package/dist/cjs/pds-textarea.cjs.entry.js CHANGED Viewed

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-8ad0cd9d.js');
-const pdsLabel = require('./pds-label-35369959.js');
+const index = require('./index-b7d9268e.js');
+const pdsLabel = require('./pds-label-05f073ea.js');
+const index$1 = require('./index-0079013c.js');
 const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
 const PdsTextareaStyle0 = baseCss;
-const pdsTextareaCss = ":host{--border-interactive-default:var(--pine-border-interactive-default);--border-interactive-hover:var(--pine-border-interactive-hover);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);--color-background-default:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-100);--color-background-hover:var(--pine-color-grey-050);--color-background-error-default:var(--pine-color-red-050);--color-border-error-default:var(--pine-color-red-600);--color-border-focus-visible:var(--pine-color-grey-400);--color-border-hover:var(--pine-color-grey-400);--color-focus-visible-outline:var(--pine-color-purple-300);--color-focus-visible-outline-error:var(--pine-color-red-300);--color-text-disabled-default:var(--pine-color-grey-400);--color-text-message-error-default:var(--pine-color-red-600);--color-text-placeholder-default:var(--pine-color-grey-600);--color-text-placeholder-disabled:var(--pine-color-grey-400);--font-weight-label-default:var(--pine-font-weight-body-medium);--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);--typography-message-default:var(--pine-typography-body-sm-default);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-weight:var(--font-weight-label-default);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background-default);border:var(--border-interactive-default);border-radius:var(--pine-border-radius-100);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--border-interactive-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-text-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error-default)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font:var(--typography-message-default);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-text-message-error-default)}";
+const pdsTextareaCss = ":host{--border-interactive-default:var(--pine-border-interactive-default);--border-interactive-hover:var(--pine-border-interactive-hover);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);--color-background-default:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-100);--color-background-hover:var(--pine-color-grey-050);--color-background-error-default:var(--pine-color-red-050);--color-border-error-default:var(--pine-color-red-600);--color-border-focus-visible:var(--pine-color-grey-400);--color-border-hover:var(--pine-color-grey-400);--color-focus-visible-outline:var(--pine-color-purple-300);--color-focus-visible-outline-error:var(--pine-color-red-300);--color-text-disabled-default:var(--pine-color-grey-400);--color-text-message-error-default:var(--pine-color-red-600);--color-text-placeholder-default:var(--pine-color-grey-600);--color-text-placeholder-disabled:var(--pine-color-grey-400);--font-weight-label-default:var(--pine-font-weight-body-medium);--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);--spacing-icon-error-message:var(--pine-spacing-050);--typography-message-default:var(--pine-typography-body-sm-default);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-weight:var(--font-weight-label-default);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background-default);border:var(--border-interactive-default);border-radius:var(--pine-border-radius-100);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--border-interactive-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-text-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-text-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error-default)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font:var(--typography-message-default);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{-ms-flex-align:center;align-items:center;color:var(--color-text-message-error-default);display:-ms-flexbox;display:flex;gap:var(--spacing-icon-error-message)}";
 const PdsTextareaStyle1 = pdsTextareaCss;
 const PdsTextarea = class {
@@ -45,10 +46,10 @@ const PdsTextarea = class {
         return classNames.join('  ');
     }
     render() {
-        return (index.h(index.Host, { key: '14f6fea952c2ff5d1c87f8197ac4f0143163232a', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '869abfd7d6fb788a136a728732b3fa5980817c3b', class: "pds-textarea" }, this.label &&
-            index.h(pdsLabel.PdsLabel, { key: 'c4c659054ab9c9a634f46661c7255a99c22c9c34', htmlFor: this.componentId, text: this.label }), index.h("textarea", { key: '37eabc8d2f9027bcded41d4789c49f57d117d23a', "aria-describedby": pdsLabel.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 &&
-            index.h("p", { key: '328bb200eff1b3d14905579d3e96904b0eb92af2', class: "pds-textarea__helper-message", id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            index.h("p", { key: '6d8594f1819ad67cb055cf4f9d5b52a561ef94a8', "aria-live": "assertive", class: "pds-textarea__error-message", id: pdsLabel.messageId(this.componentId, 'error') }, this.errorMessage))));
+        return (index.h(index.Host, { key: 'd3cec920aa6de1d10734cf532441b7cd33262f03', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '66865515eeeb7c68887135e82a4d99e0f63011ca', class: "pds-textarea" }, this.label &&
+            index.h(pdsLabel.PdsLabel, { key: '390b6073cc628fba80754e27785045b927559406', htmlFor: this.componentId, text: this.label }), index.h("textarea", { key: '6a9232804406c1a92ea1a4b792c69f2c116728b8', "aria-describedby": pdsLabel.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 &&
+            index.h("p", { key: '066c5533e0f18c1536bd05aecca1e0ed82a7a115', class: "pds-textarea__helper-message", id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            index.h("p", { key: 'bb18f8d1f229e48b6039244559a06b0de607f582', "aria-live": "assertive", class: "pds-textarea__error-message", id: pdsLabel.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: 'f619f844ca95981f6986a1f29f1a60774c4281f5', icon: index$1.danger, size: "small" }), this.errorMessage))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/pds-textarea.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-textarea.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,OAAO,GAAG,wrDAAwrD,CAAC;AACzsD,0BAAe,OAAO;;ACDtB,MAAM,cAAc,GAAG,yrGAAyrG,CAAC;AACjtG,0BAAe,cAAc;;MCShB,WAAW;;;;QA6Ed,qBAAgB,GAAG,CAAC,EAAS;YACnC,MAAM,QAAQ,GAAG,EAAE,CAAC,MAA6B,CAAC;YAClDA,mBAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YAE3B,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;aAC7B;YAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAC,CAAC,CAAC;SAC7D,CAAC;;;wBArEiB,KAAK;;;uBAgBS,KAAK;;oBAUf,IAAI,CAAC,WAAW;;wBAWpB,KAAK;wBAML,KAAK;;;;IA4BhB,kBAAkB;QACxB,MAAM,UAAU,GAAG,CAAC,qBAAqB,CAAC,CAAC;QAE3C,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;YACzC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE5CD,kEAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,KAAK;YACTA,QAACE,iBAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EAE3DF,2FACoBG,0BAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAC/B,IAAI,CAAC,KAAK,CAAY,EACvB,IAAI,CAAC,aAAa;YACjBH,gEACE,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB,EAEL,IAAI,CAAC,OAAO;YACXJ,6EACY,WAAW,EACrB,KAAK,EAAC,6BAA6B,EACnC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,IAEvC,IAAI,CAAC,YAAY,CAChB,CAEF,CACD,EACP;KACH;;;;;;;","names":["isRequired","h","Host","PdsLabel","assignDescription","messageId"],"sources":["src/global/styles/base.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n/\n:where(:not(slot), :not(slot)::before, :not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/\n Additional Reset Styles\n/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/\n Mercury Base Styles\n/\n// Typography\n:where(:not(slot)) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(div, label, p, span) {\n color: var(--pine-color-text-default);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-interactive-default: var(--pine-border-interactive-default);\n --border-interactive-hover: var(--pine-border-interactive-hover);\n\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);\n\n --color-background-default: var(--pine-color-white);\n --color-background-disabled: var(--pine-color-grey-100);\n --color-background-hover: var(--pine-color-grey-050);\n --color-background-error-default: var(--pine-color-red-050);\n --color-border-error-default: var(--pine-color-red-600);\n --color-border-focus-visible: var(--pine-color-grey-400);\n --color-border-hover: var(--pine-color-grey-400);\n --color-focus-visible-outline: var(--pine-color-purple-300);\n --color-focus-visible-outline-error: var(--pine-color-red-300);\n --color-text-disabled-default: var(--pine-color-grey-400);\n --color-text-message-error-default: var(--pine-color-red-600);\n --color-text-placeholder-default: var(--pine-color-grey-600);\n --color-text-placeholder-disabled: var(--pine-color-grey-400);\n\n --font-weight-label-default: var(--pine-font-weight-body-medium);\n\n --spacing-margin-block-end-label: var(--pine-spacing-100);\n --spacing-margin-block-start-helper-message: var(--pine-spacing-100);\n --spacing-padding-block-field: var(--pine-spacing-100);\n --spacing-padding-inline-field: var(--pine-spacing-200);\n\n --typography-message-default: var(--pine-typography-body-sm-default);\n\n display: inline;\n}\n\n.pds-textarea {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n display: block;\n font-weight: var(--font-weight-label-default);\n margin-block-end: var(--spacing-margin-block-end-label);\n}\n\n.pds-textarea__field {\n background-color: var(--color-background-default);\n border: var(--border-interactive-default);\n border-radius: var(--pine-border-radius-100);\n padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);\n\n &:hover:not(:disabled, .is-invalid) {\n border: var(--border-interactive-hover);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n color: var(--color-text-disabled-default);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n &::placeholder {\n color: var(--color-text-placeholder-default);\n }\n\n &.is-invalid {\n border-color: var(--color-border-error-default);\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus-error);\n }\n }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n font: var(--typography-message-default);\n margin-block-start: var(--spacing-margin-block-start-helper-message);\n}\n\n.pds-textarea__error-message {\n color: var(--color-text-message-error-default);\n}\n","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 styleUrls: ['../../global/styles/base.scss', 'pds-textarea.scss'],\n shadow: true,\n})\nexport class PdsTextarea {\n @Element() el: HTMLPdsTextareaElement;\n\n /\n Specifies if and how the browser provides `autocomplete` assistance for the field.\n /\n @Prop() autocomplete: string;\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.value;\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 autocomplete={this.autocomplete}\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}
1	+ {"file":"pds-textarea.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,OAAO,GAAG,wrDAAwrD,CAAC;AACzsD,0BAAe,OAAO;;ACDtB,MAAM,cAAc,GAAG,81GAA81G,CAAC;AACt3G,0BAAe,cAAc;;MCUhB,WAAW;;;;QA6Ed,qBAAgB,GAAG,CAAC,EAAS;YACnC,MAAM,QAAQ,GAAG,EAAE,CAAC,MAA6B,CAAC;YAClDA,mBAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YAE3B,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;aAC7B;YAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAC,CAAC,CAAC;SAC7D,CAAC;;;wBArEiB,KAAK;;;uBAgBS,KAAK;;oBAUf,IAAI,CAAC,WAAW;;wBAWpB,KAAK;wBAML,KAAK;;;;IA4BhB,kBAAkB;QACxB,MAAM,UAAU,GAAG,CAAC,qBAAqB,CAAC,CAAC;QAE3C,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;YACzC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE5CD,kEAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,KAAK;YACTA,QAACE,iBAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EAE3DF,2FACoBG,0BAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAC/B,IAAI,CAAC,KAAK,CAAY,EACvB,IAAI,CAAC,aAAa;YACjBH,gEACE,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB,EAEL,IAAI,CAAC,OAAO;YACXJ,6EACY,WAAW,EACrB,KAAK,EAAC,6BAA6B,EACnC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,IAExCJ,uEAAU,IAAI,EAAEK,cAAM,EAAE,IAAI,EAAC,OAAO,GAAG,EACtC,IAAI,CAAC,YAAY,CAChB,CAEF,CACD,EACP;KACH;;;;;;;","names":["isRequired","h","Host","PdsLabel","assignDescription","messageId","danger"],"sources":["src/global/styles/base.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/\n Josh's Custom CSS Reset\n https://www.joshwcomeau.com/css/custom-css-reset/\n/\n:where(:not(slot), :not(slot)::before, :not(slot)::after) {\n box-sizing: border-box;\n}\n\n:where(:not(slot)) {\n margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n display: block;\n max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n overflow-wrap: break-word;\n}\n\n/\n Additional Reset Styles\n/\n:where(a:not([href]):not([class])) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n color: currentColor;\n text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n list-style: none;\n}\n\n:where(table) {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n/\n Mercury Base Styles\n/\n// Typography\n:where(:not(slot)) {\n font: var(--pine-typography-body-md-default);\n letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n font-family: var(--pine-font-family-heading);\n color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n font: var(--pine-typography-heading-h1);\n letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n font: var(--pine-typography-heading-h2);\n letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n font: var(--pine-typography-heading-h3);\n letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n font: var(--pine-typography-heading-h4);\n letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n font: var(--pine-typography-heading-h5);\n letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n font: var(--pine-typography-heading-h6);\n letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(div, label, p, span) {\n color: var(--pine-color-text-default);\n}\n\n:where(code, kbd, pre, samp) {\n font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n cursor: pointer;\n}\n\n:where(:focus) {\n outline: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n display: none !important;\n}\n",":host {\n --border-interactive-default: var(--pine-border-interactive-default);\n --border-interactive-hover: var(--pine-border-interactive-hover);\n\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus-visible-outline-error);\n\n --color-background-default: var(--pine-color-white);\n --color-background-disabled: var(--pine-color-grey-100);\n --color-background-hover: var(--pine-color-grey-050);\n --color-background-error-default: var(--pine-color-red-050);\n --color-border-error-default: var(--pine-color-red-600);\n --color-border-focus-visible: var(--pine-color-grey-400);\n --color-border-hover: var(--pine-color-grey-400);\n --color-focus-visible-outline: var(--pine-color-purple-300);\n --color-focus-visible-outline-error: var(--pine-color-red-300);\n --color-text-disabled-default: var(--pine-color-grey-400);\n --color-text-message-error-default: var(--pine-color-red-600);\n --color-text-placeholder-default: var(--pine-color-grey-600);\n --color-text-placeholder-disabled: var(--pine-color-grey-400);\n\n --font-weight-label-default: var(--pine-font-weight-body-medium);\n\n --spacing-margin-block-end-label: var(--pine-spacing-100);\n --spacing-margin-block-start-helper-message: var(--pine-spacing-100);\n --spacing-padding-block-field: var(--pine-spacing-100);\n --spacing-padding-inline-field: var(--pine-spacing-200);\n --spacing-icon-error-message: var(--pine-spacing-050);\n\n --typography-message-default: var(--pine-typography-body-sm-default);\n\n display: inline;\n}\n\n.pds-textarea {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n display: block;\n font-weight: var(--font-weight-label-default);\n margin-block-end: var(--spacing-margin-block-end-label);\n}\n\n.pds-textarea__field {\n background-color: var(--color-background-default);\n border: var(--border-interactive-default);\n border-radius: var(--pine-border-radius-100);\n padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);\n\n &:hover:not(:disabled, .is-invalid) {\n border: var(--border-interactive-hover);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n color: var(--color-text-disabled-default);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n &::placeholder {\n color: var(--color-text-placeholder-default);\n }\n\n &.is-invalid {\n border-color: var(--color-border-error-default);\n\n &:focus-visible {\n box-shadow: var(--box-shadow-focus-error);\n }\n }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n font: var(--typography-message-default);\n margin-block-start: var(--spacing-margin-block-start-helper-message);\n}\n\n.pds-textarea__error-message {\n align-items: center;\n color: var(--color-text-message-error-default);\n display: flex;\n gap: var(--spacing-icon-error-message);\n}\n","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';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-textarea',\n styleUrls: ['../../global/styles/base.scss', 'pds-textarea.scss'],\n shadow: true,\n})\nexport class PdsTextarea {\n @Element() el: HTMLPdsTextareaElement;\n\n /\n Specifies if and how the browser provides `autocomplete` assistance for the field.\n /\n @Prop() autocomplete: string;\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.value;\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 autocomplete={this.autocomplete}\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 <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/pds-tooltip.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-8ad0cd9d.js');
+const index = require('./index-b7d9268e.js');
 const positionTooltip = ({ elem, elemPlacement, overlay, offset = 8 }) => {
     if (elem == undefined)
@@ -132,13 +132,13 @@ const PdsTooltip = class {
         this.opened = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'cd40b8fab6c861456b87390f138ee7b41f4d37a0', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, index.h("div", { key: '7aa003d0600cdda1452acec8ab5392cd6dbeeed8', class: `
+        return (index.h(index.Host, { key: 'f4a8cd19668e7cc20a70ae13a0f6dcf0f809df65', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, index.h("div", { key: 'b83498c6ea8e404b2abc25cc75daa95807649dba', 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'}
-          ` }, index.h("span", { key: '2f83a557860d79c0930390689ce72a9fa5726b3d', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, index.h("slot", { key: 'a78f31dae475a53ab709711a3c59142ed8d14418' })), index.h("div", { key: '42cabc5b6ef126e054383361531b982a4472953d', 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", style: { maxWidth: this.maxWidth } }, index.h("slot", { key: '990c5170d5f84863b7eaaeb4781a8ab6eff4b1b8', name: "content" }), this.content))));
+          ` }, index.h("span", { key: '47ace7d3f543f0d86987389c76b25da0ad6be9b7', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, index.h("slot", { key: '45bae92d87b8a67c00608c18f76aa9333d8d82a7' })), index.h("div", { key: 'a745ce513f1563cb8ea5a86bf27ee31f3e0d4392', 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", style: { maxWidth: this.maxWidth } }, index.h("slot", { key: '8c46fe5951624e2de4128bd0f819e1e55155a7b5', name: "content" }), this.content))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/pine-core.cjs.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-8ad0cd9d.js');
+const index = require('./index-b7d9268e.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["pds-table-head.cjs",[[1,"pds-table-head",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-copytext.cjs",[[1,"pds-copytext",{"border":[516],"componentId":[1,"component-id"],"fullWidth":[4,"full-width"],"truncate":[4],"value":[1]}]]],["pds-table-row.cjs",[[1,"pds-table-row",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-accordion.cjs",[[1,"pds-accordion",{"componentId":[1,"component-id"],"isOpen":[1540,"open"]},null,{"isOpen":["handleOpenState"]}]]],["pds-avatar.cjs",[[1,"pds-avatar",{"alt":[1],"badge":[4],"componentId":[1,"component-id"],"dropdown":[4],"image":[1],"size":[513],"variant":[513]}]]],["pds-chip.cjs",[[1,"pds-chip",{"componentId":[1,"component-id"],"sentiment":[1],"dot":[4],"label":[1],"large":[4],"variant":[1]}]]],["pds-link.cjs",[[1,"pds-link",{"componentId":[1,"component-id"],"external":[4],"variant":[1],"fontSize":[1,"font-size"],"href":[1]}]]],["pds-sortable-item.cjs",[[6,"pds-sortable-item",{"enableActions":[4,"enable-actions"],"componentId":[1,"component-id"],"showHandle":[1028,"show-handle"]}]]],["pds-box.cjs",[[0,"pds-box",{"alignItems":[1,"align-items"],"auto":[4],"backgroundColor":[1,"background-color"],"border":[4],"borderColor":[1,"border-color"],"borderRadius":[1,"border-radius"],"direction":[1],"display":[1],"fit":[4],"gap":[1],"flex":[1],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"minWidth":[1,"min-width"],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"padding":[1],"shadow":[1],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]}]]],["pds-divider.cjs",[[1,"pds-divider",{"componentId":[1,"component-id"],"offset":[1],"vertical":[4]}]]],["pds-image.cjs",[[1,"pds-image",{"alt":[1],"componentId":[1,"component-id"],"height":[2],"loading":[1],"sizes":[1],"src":[1],"srcset":[1],"width":[2]}]]],["pds-input.cjs",[[1,"pds-input",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"type":[1],"value":[1025]}]]],["pds-loader.cjs",[[1,"pds-loader",{"isLoading":[4,"is-loading"],"showLabel":[4,"show-label"],"size":[513],"variant":[1]}]]],["pds-progress.cjs",[[1,"pds-progress",{"animated":[4],"componentId":[1,"component-id"],"fillColor":[1,"fill-color"],"label":[1],"percent":[2],"showPercent":[4,"show-percent"]}]]],["pds-radio.cjs",[[2,"pds-radio",{"checked":[4],"disabled":[4],"errorMessage":[1,"error-message"],"invalid":[4],"componentId":[1,"component-id"],"label":[1],"helperMessage":[1,"helper-message"],"name":[1],"required":[4],"value":[1]}]]],["pds-row.cjs",[[0,"pds-row",{"alignItems":[1,"align-items"],"border":[4],"colGap":[1,"col-gap"],"componentId":[1,"component-id"],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"noWrap":[4,"no-wrap"]}]]],["pds-sortable.cjs",[[6,"pds-sortable",{"border":[516],"componentId":[1,"component-id"],"dividers":[516],"handleType":[1,"handle-type"]}]]],["pds-switch.cjs",[[1,"pds-switch",{"componentId":[1,"component-id"],"checked":[1028],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"value":[1]}]]],["pds-tab.cjs",[[4,"pds-tab",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"index":[2],"selected":[4]}]]],["pds-table.cjs",[[1,"pds-table",{"compact":[4],"componentId":[1,"component-id"],"responsive":[4],"fixedColumn":[4,"fixed-column"],"selectable":[4],"sortingColumn":[32],"sortingDirection":[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["pds-table-body.cjs",[[1,"pds-table-body"]]],["pds-tabpanel.cjs",[[4,"pds-tabpanel",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"selected":[1028]}]]],["pds-tabs.cjs",[[1,"pds-tabs",{"tablistLabel":[1,"tablist-label"],"componentId":[1,"component-id"],"variant":[1],"activeTabName":[1025,"active-tab-name"],"activeTabIndex":[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["pds-textarea.cjs",[[1,"pds-textarea",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[1028],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1025]}]]],["pds-tooltip.cjs",[[1,"pds-tooltip",{"content":[1],"componentId":[1,"component-id"],"hasArrow":[4,"has-arrow"],"htmlContent":[4,"html-content"],"placement":[513],"maxWidth":[1,"max-width"],"opened":[1540],"isOpen":[32],"showTooltip":[64],"hideTooltip":[64]},null,{"opened":["handleOpenToggle"]}]]],["pds-icon.cjs",[[1,"pds-icon",{"color":[1],"icon":[8],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"size":["updateStyles"],"color":["updateStyles"],"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["pds-button.cjs",[[1,"pds-button",{"componentId":[1,"component-id"],"disabled":[4],"icon":[1],"name":[1],"value":[1],"type":[1],"variant":[1]}]]],["pds-table-head-cell.cjs",[[1,"pds-table-head-cell",{"sortable":[4],"sortingDirection":[32],"tableScrolling":[32],"isSelected":[32]}]]],["pds-table-cell.cjs",[[1,"pds-table-cell",{"truncate":[4],"tableScrolling":[32]}]]],["pds-checkbox.cjs",[[1,"pds-checkbox",{"checked":[1028],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"indeterminate":[1028],"invalid":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1]},null,{"checked":["updateIndeterminate"]}]]]], options);
+  return index.bootstrapLazy([["pds-table-head.cjs",[[1,"pds-table-head",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-table-row.cjs",[[1,"pds-table-row",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-copytext.cjs",[[1,"pds-copytext",{"border":[516],"componentId":[1,"component-id"],"fullWidth":[4,"full-width"],"truncate":[4],"value":[1]}]]],["pds-accordion.cjs",[[1,"pds-accordion",{"componentId":[1,"component-id"],"isOpen":[1540,"open"]},null,{"isOpen":["handleOpenState"]}]]],["pds-avatar.cjs",[[1,"pds-avatar",{"alt":[1],"badge":[4],"componentId":[1,"component-id"],"dropdown":[4],"image":[1],"size":[513],"variant":[513]}]]],["pds-chip.cjs",[[1,"pds-chip",{"componentId":[1,"component-id"],"dot":[4],"label":[1],"large":[4],"sentiment":[1],"variant":[1]}]]],["pds-input.cjs",[[1,"pds-input",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"type":[1],"value":[1025]}]]],["pds-link.cjs",[[1,"pds-link",{"componentId":[1,"component-id"],"external":[4],"variant":[1],"fontSize":[1,"font-size"],"href":[1]}]]],["pds-radio.cjs",[[2,"pds-radio",{"checked":[4],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"value":[1]}]]],["pds-select.cjs",[[1,"pds-select",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"multiple":[4],"name":[1],"required":[4],"value":[1025]},null,{"value":["valueChanged"]}]]],["pds-sortable-item.cjs",[[6,"pds-sortable-item",{"enableActions":[4,"enable-actions"],"componentId":[1,"component-id"],"showHandle":[1028,"show-handle"]}]]],["pds-switch.cjs",[[1,"pds-switch",{"componentId":[1,"component-id"],"checked":[1028],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"value":[1]}]]],["pds-textarea.cjs",[[1,"pds-textarea",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[1028],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1025]}]]],["pds-box.cjs",[[0,"pds-box",{"alignItems":[1,"align-items"],"auto":[4],"backgroundColor":[1,"background-color"],"border":[4],"borderColor":[1,"border-color"],"borderRadius":[1,"border-radius"],"direction":[1],"display":[1],"fit":[4],"gap":[1],"flex":[1],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"minWidth":[1,"min-width"],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"padding":[1],"shadow":[1],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]}]]],["pds-divider.cjs",[[1,"pds-divider",{"componentId":[1,"component-id"],"offset":[1],"vertical":[4]}]]],["pds-image.cjs",[[1,"pds-image",{"alt":[1],"componentId":[1,"component-id"],"height":[2],"loading":[1],"sizes":[1],"src":[1],"srcset":[1],"width":[2]}]]],["pds-loader.cjs",[[1,"pds-loader",{"isLoading":[4,"is-loading"],"showLabel":[4,"show-label"],"size":[513],"variant":[1]}]]],["pds-popover.cjs",[[1,"pds-popover",{"popoverTargetAction":[1,"popover-target-action"],"popoverType":[1,"popover-type"],"componentId":[1,"component-id"],"text":[1],"maxWidth":[2,"max-width"],"placement":[513],"active":[32]},[[2,"click","handleClick"],[11,"scroll","handleScroll"]]]]],["pds-progress.cjs",[[1,"pds-progress",{"animated":[4],"componentId":[1,"component-id"],"fillColor":[1,"fill-color"],"label":[1],"percent":[2],"showPercent":[4,"show-percent"]}]]],["pds-row.cjs",[[0,"pds-row",{"alignItems":[1,"align-items"],"border":[4],"colGap":[1,"col-gap"],"componentId":[1,"component-id"],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"noWrap":[4,"no-wrap"]}]]],["pds-sortable.cjs",[[6,"pds-sortable",{"border":[516],"componentId":[1,"component-id"],"dividers":[516],"handleType":[1,"handle-type"]}]]],["pds-tab.cjs",[[4,"pds-tab",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"index":[2],"selected":[4]}]]],["pds-table.cjs",[[1,"pds-table",{"compact":[4],"componentId":[1,"component-id"],"responsive":[4],"fixedColumn":[4,"fixed-column"],"selectable":[4],"sortingColumn":[32],"sortingDirection":[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["pds-table-body.cjs",[[1,"pds-table-body"]]],["pds-tabpanel.cjs",[[4,"pds-tabpanel",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"selected":[1028]}]]],["pds-tabs.cjs",[[1,"pds-tabs",{"tablistLabel":[1,"tablist-label"],"componentId":[1,"component-id"],"variant":[1],"activeTabName":[1025,"active-tab-name"],"activeTabIndex":[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["pds-text.cjs",[[1,"pds-text",{"align":[1],"color":[1],"gutter":[1],"size":[1],"weight":[1],"tag":[1]}]]],["pds-tooltip.cjs",[[1,"pds-tooltip",{"content":[1],"componentId":[1,"component-id"],"hasArrow":[4,"has-arrow"],"htmlContent":[4,"html-content"],"placement":[513],"maxWidth":[1,"max-width"],"opened":[1540],"isOpen":[32],"showTooltip":[64],"hideTooltip":[64]},null,{"opened":["handleOpenToggle"]}]]],["pds-icon.cjs",[[1,"pds-icon",{"color":[1],"icon":[8],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"size":["updateStyles"],"color":["updateStyles"],"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["pds-button.cjs",[[1,"pds-button",{"componentId":[1,"component-id"],"disabled":[4],"icon":[1],"name":[1],"value":[1],"type":[1],"variant":[1]}]]],["pds-table-head-cell.cjs",[[1,"pds-table-head-cell",{"sortable":[4],"sortingDirection":[32],"tableScrolling":[32],"isSelected":[32]}]]],["pds-table-cell.cjs",[[1,"pds-table-cell",{"truncate":[4],"tableScrolling":[32]}]]],["pds-checkbox.cjs",[[1,"pds-checkbox",{"checked":[1028],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"indeterminate":[1028],"invalid":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1]},null,{"checked":["updateIndeterminate"]}]]]], options);
 });
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -12,9 +12,11 @@
     "components/pds-input/pds-input.js",
     "components/pds-link/pds-link.js",
     "components/pds-loader/pds-loader.js",
+    "components/pds-popover/pds-popover.js",
     "components/pds-progress/pds-progress.js",
     "components/pds-radio/pds-radio.js",
     "components/pds-row/pds-row.js",
+    "components/pds-select/pds-select.js",
     "components/pds-sortable/pds-sortable.js",
     "components/pds-sortable/pds-sortable-item/pds-sortable-item.js",
     "components/pds-switch/pds-switch.js",
@@ -27,6 +29,7 @@
     "components/pds-tabs/pds-tabs.js",
     "components/pds-tabs/pds-tab/pds-tab.js",
     "components/pds-tabs/pds-tabpanel/pds-tabpanel.js",
+    "components/pds-text/pds-text.js",
     "components/pds-textarea/pds-textarea.js",
     "components/pds-tooltip/pds-tooltip.js"
   ],

package/dist/collection/components/pds-button/pds-button.js CHANGED Viewed

@@ -24,6 +24,7 @@ export class PdsButton {
                     }
                 }
             }
+            this.pdsClick.emit(ev);
         };
         this.componentId = undefined;
         this.disabled = false;
@@ -41,7 +42,7 @@ export class PdsButton {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '4c63b9a386ed3d9d9f3516648ec26c3823ac6fa6', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: '50cdc14ea87c350f2e173fb38006021bfe0b78d7', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { key: '94e7c0b1b6b8223b78afe5b61a6073b907afc6e1', name: this.icon, part: "icon" }), h("slot", { key: '736b97d814d34eb8a01ddd22ade8d9ee5a35de82' }), this.variant === 'disclosure' && h("pds-icon", { key: 'f7bea88482de7bfaf23c74e71d9748a403df6a76', icon: caretDown, part: "caret" }))));
+        return (h(Host, { key: '0145b50d5286d1368b6e458bb33feaed78026d7e', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: '370b57a448aca541d41cd35651a3aa8cf04c8171', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { key: '7b8820f5df1f16121758b4950ae507d245f84a75', name: this.icon, part: "icon" }), h("slot", { key: 'b4b2ed9a9ed85eb9a0c5c800340ba1572ecece00' }), this.variant === 'disclosure' && h("pds-icon", { key: '11a68b1153534dcd2ec67ed4bb4e6884b9d438cd', icon: caretDown, part: "caret" }))));
     }
     static get is() { return "pds-button"; }
     static get encapsulation() { return "shadow"; }
@@ -188,6 +189,24 @@ export class PdsButton {
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "pdsClick",
+                "name": "pdsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=pds-button.js.map

package/dist/collection/components/pds-button/pds-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-button.js","sourceRoot":"","sources":["../../../src/components/pds-button/pds-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AAClE~~,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD;;;;EAIE;AAOF,MAAM,OAAO,SAAS;;~~QAwCZ~~,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAClC,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;gBAC1B,kDAAkD;gBAClD,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;oBAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;oBACpC,IAAI,IAAI,EAAE,CAAC;wBACT,EAAE,CAAC,cAAc,EAAE,CAAA;wBAEnB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;wBACnD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;wBAC3B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;wBACjC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAA;wBAC5B,UAAU,CAAC,KAAK,EAAE,CAAA;wBAClB,UAAU,CAAC,MAAM,EAAE,CAAA;oBACrB,CAAC;gBACH,CAAC;YACH,CAAC;~~QACH~~,CAAC,CAAA;;~~wBA7CmB~~,KAAK;oBAKD,IAAI;;;oBAgBmB,QAAQ;uBAK2C,SAAS;;~~IAqBnG~~,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,YAAY,CAAC,CAAC;QAElC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC5C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YAErB,+DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK;gBAEhB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,GAAY;gBACjG,8DAAQ;gBACP,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,iEAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,GAAY,CAC9E,CACJ,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/*\n @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n/\n\n@Component({\n tag: 'pds-button',\n styleUrls: ['../../global/styles/base.scss', 'pds-button.scss'],\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Toggles disabled state of button\n * @defaultValue false\n /\n @Prop() disabled? = false;\n\n /\n Displays icon before text when icon string matches an icon name\n /\n @Prop() icon?: string = null;\n\n /\n Provides button with a submittable name\n /\n @Prop() name?: string;\n\n /\n Provides button with a submittable value\n /\n @Prop() value?: string;\n\n /\n Provides button with a type\n * @defaultValue button\n /\n @Prop() type?: 'button' \| 'reset' \| 'submit' = 'button';\n\n /\n Sets button variant styles as outlined in Figma documentation\n */\n @Prop() variant: 'primary' \| 'secondary' \| 'accent' \| 'disclosure' \| 'destructive' \| 'unstyled' = 'primary';\n\n private handleClick = (ev: Event) => {\n if (this.type != 'button') {\n // If button clicked IS NOT associated with a form\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form')\n if (form) {\n ev.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.type\n fakeButton.style.display = 'none'\n form.appendChild(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n }\n }\n }\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <button\n class={this.classNames()}\n disabled={this.disabled}\n name={this.name}\n part=\"button\"\n type={this.type}\n value={this.value}\n >\n {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n <slot />\n {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n </button>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pds-button.js","sourceRoot":"","sources":["../../../src/components/pds-button/pds-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD;;;;EAIE;AAOF,MAAM,OAAO,SAAS;;QA0CZ,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAClC,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;gBAC1B,kDAAkD;gBAClD,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;oBAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;oBACpC,IAAI,IAAI,EAAE,CAAC;wBACT,EAAE,CAAC,cAAc,EAAE,CAAA;wBAEnB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;wBACnD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;wBAC3B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;wBACjC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAA;wBAC5B,UAAU,CAAC,KAAK,EAAE,CAAA;wBAClB,UAAU,CAAC,MAAM,EAAE,CAAA;oBACrB,CAAC;gBACH,CAAC;YACH,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,CAAA;;wBAhDmB,KAAK;oBAKD,IAAI;;;oBAgBmB,QAAQ;uBAK2C,SAAS;;IAwBnG,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,YAAY,CAAC,CAAC;QAElC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC5C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YAErB,+DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK;gBAEhB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,GAAY;gBACjG,8DAAQ;gBACP,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,iEAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,GAAY,CAC9E,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/*\n @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n/\n\n@Component({\n tag: 'pds-button',\n styleUrls: ['../../global/styles/base.scss', 'pds-button.scss'],\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Toggles disabled state of button\n * @defaultValue false\n /\n @Prop() disabled? = false;\n\n /\n Displays icon before text when icon string matches an icon name\n /\n @Prop() icon?: string = null;\n\n /\n Provides button with a submittable name\n /\n @Prop() name?: string;\n\n /\n Provides button with a submittable value\n /\n @Prop() value?: string;\n\n /\n Provides button with a type\n * @defaultValue button\n /\n @Prop() type?: 'button' \| 'reset' \| 'submit' = 'button';\n\n /\n Sets button variant styles as outlined in Figma documentation\n */\n @Prop() variant: 'primary' \| 'secondary' \| 'accent' \| 'disclosure' \| 'destructive' \| 'unstyled' = 'primary';\n\n @Event() pdsClick: EventEmitter;\n\n private handleClick = (ev: Event) => {\n if (this.type != 'button') {\n // If button clicked IS NOT associated with a form\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form')\n if (form) {\n ev.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.type\n fakeButton.style.display = 'none'\n form.appendChild(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n }\n }\n this.pdsClick.emit(ev);\n }\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <button\n class={this.classNames()}\n disabled={this.disabled}\n name={this.name}\n part=\"button\"\n type={this.type}\n value={this.value}\n >\n {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n <slot />\n {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n </button>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/pds-button/stories/pds-button.stories.js CHANGED Viewed

@@ -1,11 +1,18 @@
 import { html } from 'lit';
+import { withActions } from '@storybook/addon-actions/decorator';
 import { customArgsWithIconControl } from '../../../stories/_helpers';
 export default {
   argTypes: customArgsWithIconControl({ component: 'pds-button', property: 'icon' }),
   component: 'pds-button',
-  title: 'components/Button'
+  decorators: [withActions],
+  title: 'components/Button',
+  parameters: {
+    actions: {
+      handles: ['pdsClick'],
+    }
+  }
 }
 const BaseTemplate = (args) => html`

package/dist/collection/components/pds-checkbox/pds-checkbox.css CHANGED Viewed

@@ -15,7 +15,7 @@
   --color-invalid: var(--pine-color-red-500);
   --color-invalid-hover: var(--pine-color-red-600);
   --color-text-disabled: var(--pine-color-grey-500);
-  --color-text-message: var(--pine-color-grey-800);
+  --color-text-message: var(--pine-color-grey-700);
   --sizing-input: var(--pine-font-size-116);
   align-items: center;
   display: flex;
@@ -124,6 +124,7 @@ input:focus-visible {
 }
 label {
+  font-weight: var(--pine-font-weight-body-medium);
   margin-inline-start: 10px;
 }
@@ -145,4 +146,11 @@ label {
   margin-block-start: 6px;
   margin-inline-start: 26px;
   width: 100%;
+}
+.pds-checkbox__message--error {
+  align-items: center;
+  display: flex;
+  font-size: var(--pine-font-size-085);
+  gap: var(--pine-spacing-050);
 }

package/dist/collection/components/pds-checkbox/pds-checkbox.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { assignDescription, messageId } from "../../utils/form";
 import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { danger } from "@pine-ds/icons/icons";
 export class PdsCheckbox {
     constructor() {
         this.handleCheckboxChange = (e) => {
@@ -50,9 +51,9 @@ export class PdsCheckbox {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '445bf52e75b4d45cffa0621550c3221da77cd28a', class: this.classNames() }, h("input", { key: '326a380543328244ad71da4188d3a18561a8ddd3', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), h(PdsLabel, { key: 'eb22531287c39f53ad02eeba93e3845ead776f01', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
-            h("div", { key: 'f434bc8e221fcd55d864c40de9b030066bbfc028', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'b3193bc5239041909f7d256e8ad20d23dfab0ef3', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+        return (h(Host, { key: '20ec5fff75ed7c8e1fa203377da84533a24b359f', class: this.classNames() }, h("input", { key: '640f30df7addcfb3ec9fc850a32283b5d7e9d096', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), h(PdsLabel, { key: '8aa6d71f86bba517fd5b697b7a4c91a2002f29ba', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
+            h("div", { key: '3b683e51e76c802e77022e6544b05305e8fbaa2f', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '8da70a6935cf8c419d2f1ffa36ae21a843823b11', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '9fa9b8662cce3319ccff5bc8bce90b364f310d7b', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-checkbox/pds-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;~~AAQ5D~~,MAAM,OAAO,WAAW;;QA0Ed,yBAAoB,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAE9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBAC1B,OAAO,EAAE,MAAM,CAAC,OAAO;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAA;QAEO,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAA;uBAzF4C,KAAK;;;;;;;;;;;;;IAkElD,mBAAmB;QACjB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAA;IAChC,CAAC;IAuBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAAC,CAAC;QACpD,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAAC,CAAC;QAChE,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAAC,CAAC;QAEtD,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;YAC5B,8DACE,IAAI,EAAC,UAAU,sBACG,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB;YACF,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAAI;YAC/G,IAAI,CAAC,aAAa;gBACjB,4DACE,KAAK,EAAE,uBAAuB,EAC9B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,4DACE,KAAK,EAAE,oDAAoD,EAC3D,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,~~IAEpB~~,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrls: ['../../global/styles/base.scss', 'pds-checkbox.scss'],\n shadow: true,\n})\nexport class PdsCheckbox {\n /*\n It determines whether or not the checkbox is checked.\n /\n @Prop({ mutable: true }) checked?: boolean = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n It determines whether or not the checkbox is disabled.\n /\n @Prop() disabled: boolean;\n\n /\n Displays message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n String used for helper message below checkbox.\n /\n @Prop() helperMessage: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate.\n * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n /\n @Prop({ mutable: true }) indeterminate: boolean;\n\n /\n It determines whether or not the checkbox is invalid.\n /\n @Prop() invalid: boolean;\n\n /\n String used for label text next to checkbox.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() labelHidden: boolean;\n\n /\n String used for checkbox `name` attribute.\n /\n @Prop() name: string;\n\n /\n It determines whether or not the checkbox is required.\n /\n @Prop() required: boolean;\n\n /\n The value of the checkbox that is submitted with a form.\n /\n @Prop() value: string;\n\n /\n Event emitted that contains the `value` and `checked`.\n */\n @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n @Watch('checked')\n updateIndeterminate() {\n this.indeterminate = undefined\n }\n\n private handleCheckboxChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n this.checked = target.checked;\n\n this.pdsCheckboxChange.emit({\n checked: target.checked,\n value: this.value\n });\n }\n\n private handleInput = () => {\n this.pdsCheckboxInput.emit({\n checked: this.checked,\n value: this.value\n });\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.indeterminate) { classNames.push('is-indeterminate'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <input\n type=\"checkbox\"\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n id={this.componentId}\n indeterminate={this.indeterminate}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleCheckboxChange}\n onInput={this.handleInput}\n />\n <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\n {this.helperMessage &&\n <div\n class={'pds-checkbox__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-checkbox__message pds-checkbox__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAO9C,MAAM,OAAO,WAAW;;QA0Ed,yBAAoB,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAE9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBAC1B,OAAO,EAAE,MAAM,CAAC,OAAO;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAA;QAEO,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAA;uBAzF4C,KAAK;;;;;;;;;;;;;IAkElD,mBAAmB;QACjB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAA;IAChC,CAAC;IAuBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAAC,CAAC;QACpD,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAAC,CAAC;QAChE,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAAC,CAAC;QAEtD,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;YAC5B,8DACE,IAAI,EAAC,UAAU,sBACG,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB;YACF,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAAI;YAC/G,IAAI,CAAC,aAAa;gBACjB,4DACE,KAAK,EAAE,uBAAuB,EAC9B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,4DACE,KAAK,EAAE,oDAAoD,EAC3D,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW;oBAErB,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,GAAG;oBACtC,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrls: ['../../global/styles/base.scss', 'pds-checkbox.scss'],\n shadow: true,\n})\nexport class PdsCheckbox {\n /*\n It determines whether or not the checkbox is checked.\n /\n @Prop({ mutable: true }) checked?: boolean = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n It determines whether or not the checkbox is disabled.\n /\n @Prop() disabled: boolean;\n\n /\n Displays message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n String used for helper message below checkbox.\n /\n @Prop() helperMessage: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate.\n * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n /\n @Prop({ mutable: true }) indeterminate: boolean;\n\n /\n It determines whether or not the checkbox is invalid.\n /\n @Prop() invalid: boolean;\n\n /\n String used for label text next to checkbox.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() labelHidden: boolean;\n\n /\n String used for checkbox `name` attribute.\n /\n @Prop() name: string;\n\n /\n It determines whether or not the checkbox is required.\n /\n @Prop() required: boolean;\n\n /\n The value of the checkbox that is submitted with a form.\n /\n @Prop() value: string;\n\n /\n Event emitted that contains the `value` and `checked`.\n */\n @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n @Watch('checked')\n updateIndeterminate() {\n this.indeterminate = undefined\n }\n\n private handleCheckboxChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n this.checked = target.checked;\n\n this.pdsCheckboxChange.emit({\n checked: target.checked,\n value: this.value\n });\n }\n\n private handleInput = () => {\n this.pdsCheckboxInput.emit({\n checked: this.checked,\n value: this.value\n });\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.indeterminate) { classNames.push('is-indeterminate'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <input\n type=\"checkbox\"\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n id={this.componentId}\n indeterminate={this.indeterminate}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleCheckboxChange}\n onInput={this.handleInput}\n />\n <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\n {this.helperMessage &&\n <div\n class={'pds-checkbox__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-checkbox__message pds-checkbox__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-chip/pds-chip.js CHANGED Viewed

@@ -6,10 +6,10 @@ export class PdsChip {
             this.pdsTagCloseClick.emit();
         };
         this.componentId = undefined;
-        this.sentiment = 'neutral';
         this.dot = false;
         this.label = undefined;
         this.large = false;
+        this.sentiment = 'neutral';
         this.variant = 'text';
     }
     classNames() {
@@ -23,7 +23,7 @@ export class PdsChip {
         if (this.sentiment) {
             classNames.push('pds-chip--' + this.sentiment);
         }
-        return classNames.join('  ');
+        return classNames.join(' ');
     }
     setChipContent() {
         const isDropdown = this.variant === 'dropdown';
@@ -31,7 +31,7 @@ export class PdsChip {
         return chipContent;
     }
     render() {
-        return (h(Host, { key: 'b49508fac6a1006cb9a52010644307e4528b1920', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: '7156f121be5ac59ce77aba3b2e7bf3aa8c4d9d37', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '47663af897eab3f9e0288b0f92cb57ea42cdb77a', icon: remove, size: "12px" })))));
+        return (h(Host, { key: 'fac4e9beb31ba05d0c959fb53a9cd62caeacb219', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: '5f57c1cc76f6cffdebe6244f499b427e5f4c04e8', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: 'f4311271f68d700568dc51af9c1512fdfc7c262d', icon: remove, size: "12px" })))));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -64,27 +64,6 @@ export class PdsChip {
                 "attribute": "component-id",
                 "reflect": false
             },
-            "sentiment": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning'",
-                    "resolved": "\"accent\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "'neutral'"
-                        }],
-                    "text": "Sets the color scheme of the chip."
-                },
-                "attribute": "sentiment",
-                "reflect": false,
-                "defaultValue": "'neutral'"
-            },
             "dot": {
                 "type": "boolean",
                 "mutable": false,
@@ -138,12 +117,33 @@ export class PdsChip {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Determines whether the chip should be rendered in a larger size."
+                    "text": "Determines whether the chip should be displayed in a larger size."
                 },
                 "attribute": "large",
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "sentiment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning'",
+                    "resolved": "\"accent\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'neutral'"
+                        }],
+                    "text": "Defines the color scheme of the chip."
+                },
+                "attribute": "sentiment",
+                "reflect": false,
+                "defaultValue": "'neutral'"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -176,7 +176,7 @@ export class PdsChip {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event when close button is clicked on tag variant."
+                    "text": "Event emitted when the close button is clicked on a tag variant chip."
                 },
                 "complexType": {
                     "original": "any",