npm - @pine-ds/core - Versions diffs - 3.13.0 → 3.14.1 - Mend

@pine-ds/core 3.13.0 → 3.14.1

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 (592) hide show

package/components/pds-textarea.js CHANGED Viewed

@@ -22,6 +22,7 @@ const PdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class PdsTextarea extends
         this.pdsFocus = createEvent(this, "pdsFocus", 7);
         this.pdsInput = createEvent(this, "pdsInput", 7);
         this.pdsTextareaChange = createEvent(this, "pdsTextareaChange", 7);
+        this.pdsKeyDown = createEvent(this, "pdsKeyDown", 7);
         this.inheritedAttributes = {};
         this._type = 'textarea';
         /**
@@ -91,6 +92,9 @@ const PdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class PdsTextarea extends
         this.onTextareaChange = (ev) => {
             this.emitValueChange(ev);
         };
+        this.onKeyDown = (ev) => {
+            this.pdsKeyDown.emit(ev);
+        };
     }
     /**
      * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global
@@ -303,10 +307,10 @@ const PdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class PdsTextarea extends
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: '8e14fed28b2edd75aef6c5a1991518bb8b11931d', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '4dcf8471267223b0cd1f6e7b6dd2072550b3ac8b', class: "pds-textarea" }, this.label &&
-            h("div", { key: '520d616798b2223a979955ed268378bc5ffd1571', class: "pds-textarea__label-wrapper" }, h("label", { key: 'b04566b03b0c809b4b6c639d75774d845a021636', htmlFor: this.componentId }, h("span", { key: 'a6b92315f11a7cf15c9aa2db0cd7d8a824ff88ae', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: 'b4cebca68b014c837fa8415a8f67f611b150b083', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: 'ac49811c463709ed2918324005ec8f4285fb76f2', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            h("p", { key: '7a4cc4c278d39c675a5e6e3d0b4a917d63441cd1', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'd02251c55ef2baf92fd66c92a16154b805494b6c', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'd7632ac66b16c0c306f245a23d379689d65e8010', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '3c78b9f124cf82fd48b2cbc29122c458d9918962', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '58ecb566c248304e19c33fab2431cf6062a203d7', class: "pds-textarea" }, this.label &&
+            h("div", { key: 'ad2c21f27492d374c4f56fed0f203f72bc3a4a6e', class: "pds-textarea__label-wrapper" }, h("label", { key: 'f966575088fe5699951c7762938cb80304bb0df5', htmlFor: this.componentId }, h("span", { key: 'ad9370de15d0c41e065d99d3b9859eb8b343424a', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: 'e76662a380252b0813c0b00d42bfaa4239c063dd', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '4f9b3250d888b9da284a5583b5042df4f25b66f5', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            h("p", { key: '5c53c22d2682d1960b31b2bc40ad6a83d445dda2', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: '74c79c4a218977a01932d1b94206b68867787064', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'c8118c35e1f6f6bcba281dd00e8abf8109827f30', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/components/pds-textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-textarea.js","mappings":"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","names":["PdsTextarea","__stencil_proxyCustomElement"],"sources":["src/global/styles/utils/label.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-input/pds-input.tokens.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":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n","@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":host {\n display: inline-block;\n width: 100%;\n}\n\n:host([aria-readonly=\"true\"]) {\n textarea {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-readonly);\n }\n}\n\n:host([highlight]:not([disabled]):not([aria-disabled=\"true\"]):not([aria-readonly=\"true\"])) {\n .pds-textarea__field:not(.is-invalid) {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-accent);\n color: var(--pine-color-text-accent);\n\n &:hover {\n border-color: var(--pine-color-accent-hover);\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring);\n }\n\n ~ .pds-textarea__character-counter {\n background: color-mix(in srgb, var(--pine-color-accent-disabled) 80%, transparent);\n color: var(--pine-color-text-accent);\n }\n }\n}\n\n.pds-textarea {\n display: flex;\n flex-direction: column;\n}\n\n.pds-textarea__label-wrapper {\n align-items: center;\n display: flex;\n justify-content: space-between;\n}\n\n.pds-textarea__action {\n align-items: center;\n display: flex;\n gap: var(--pine-dimension-xs);\n margin-inline-start: var(--pine-dimension-xs);\n}\n\nlabel {\n display: block;\n margin-block-end: var(--pine-dimension-xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-textarea__label-wrapper label {\n margin-block-end: 0;\n}\n\n.pds-textarea__helper-message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__error-message {\n color: var(--pine-color-text-message-danger);\n display: flex;\n font: var(--pine-typography-body-sm-medium);\n gap: var(--pine-dimension-2xs);\n margin-block-start: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n.pds-textarea__field-wrapper {\n display: inline-block;\n position: relative;\n width: 100%;\n}\n\n.pds-textarea__field {\n background-color: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: calc(var(--pine-dimension-xs) * 1.25);\n box-sizing: border-box;\n color: var(--pine-color-text);\n font: var(--pine-typography-body);\n letter-spacing: var(--pine-letter-spacing);\n min-height: calc(var(--pine-dimension-xl) * 2);\n min-width: calc(var(--pine-dimension-xl) * 2);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n resize: both;\n width: 100%;\n\n // Add bottom padding when character counter is present\n :host([max-length]) & {\n padding-bottom: calc(var(--pine-dimension-xs) + var(--pine-dimension-md));\n }\n\n &:hover:not(:disabled, .is-invalid) {\n border: var(--pine-border-hover);\n }\n\n &:disabled {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-disabled);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &::placeholder {\n color: var(--pine-color-text-placeholder);\n }\n\n &.is-invalid {\n background-color: var(--pine-input-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n :host-context([data-theme=\"dark\"]) & {\n background-color: var(--pine-color-red-950);\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n.pds-textarea__character-counter {\n background: color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);\n border-radius: calc(var(--pine-dimension-2xs) * 0.5);\n color: var(--pine-color-text-muted);\n font: var(--pine-typography-body-sm-medium);\n padding: calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);\n pointer-events: none;\n position: absolute;\n user-select: none;\n white-space: nowrap;\n z-index: var(--pine-z-index);\n\n // Match textarea disabled state\n :host([aria-disabled=\"true\"]) & {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-disabled);\n }\n\n // Match textarea readonly state\n :host([aria-readonly=\"true\"]) & {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-readonly);\n }\n\n // Match textarea invalid state - target when field has is-invalid class\n .pds-textarea__field.is-invalid ~ & {\n background-color: var(--pine-input-color-background-danger);\n\n :host-context([data-theme=\"dark\"]) & {\n background-color: var(--pine-color-red-950);\n }\n }\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId, exposeTypeProperty } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n/*\n @slot action - Content to be displayed in the label area, typically for help icons or links\n /\n@Component({\n tag: 'pds-textarea',\n styleUrls: [\n '../../global/styles/utils/label.scss',\n '../pds-input/pds-input.tokens.scss',\n 'pds-textarea.scss'\n ],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsTextarea {\n\n private nativeTextarea?: HTMLTextAreaElement\n private focusedValue?: string \| null;\n private inheritedAttributes: Attributes = {};\n private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n private internals?: ElementInternals;\n private resizeObserver?: ResizeObserver;\n private characterCounter?: HTMLElement;\n private readonly _type = 'textarea' as const;\n\n @Element() el: HTMLPdsTextareaElement;\n\n /\n Emitted when the input loses focus.\n /\n @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input has focus.\n /\n @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when a keyboard input occurs.\n \n For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n * the input is cleared on edit, the type is `null`.\n /\n @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n /\n Event emitted whenever the value of the textarea changes.\n \n This event will not emit when programmatically setting the `value` property.\n /\n @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n /\n Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n * `textarea.focus()`.\n /\n @Method()\n async setFocus() {\n if (this.nativeTextarea) {\n this.nativeTextarea.focus();\n }\n }\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 Determines whether or not the textarea is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false;\n\n /\n The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n /\n @Prop() debounce?: number;\n\n /\n Displays an error message below the textarea field.\n /\n @Prop() errorMessage?: string;\n\n /\n Displays a message or hint below the textarea field.\n /\n @Prop() helperMessage?: string;\n\n /\n Determines 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 Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n /\n @Prop() hideLabel: boolean;\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 Determines whether or not the textarea is readonly.\n * @defaultValue false\n /\n @Prop() readonly = false;\n\n /\n Determines 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 Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.\n /\n @Prop({ reflect: true }) maxLength?: number;\n\n /\n Applies highlight styling to the textarea field.\n /\n @Prop({ reflect: true }) highlight?: boolean;\n\n /\n The value of the textarea.\n /\n @Prop({mutable: true}) value?: string \| null = '';\n\n @State() hasFocus = false;\n\n\n /\n If true, the textarea has action content in the label area\n /\n @State() hasAction = false;\n\n @Watch('debounce')\n protected debounceChanged() {\n const { pdsInput, debounce, originalPdsInput } = this;\n\n this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n }\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n const nativeTextarea = this.nativeTextarea;\n const value = this.getValue();\n\n if (nativeTextarea && nativeTextarea.value !== value) {\n nativeTextarea.value = value;\n }\n\n // Update form value for Form Associated Custom Elements API\n this.updateFormValue();\n\n // Update character counter position in case content changes affect sizing\n if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n this.updateCharacterCounterPosition();\n }\n }\n\n @Watch('maxLength')\n protected maxLengthChanged() {\n // Setup or teardown ResizeObserver based on maxLength\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.maxLength && this.nativeTextarea) {\n this.setupResizeObserver();\n }\n\n // Update ElementInternals validity when maxLength changes\n if (this.internals && this.internals.setValidity && this.nativeTextarea) {\n const isTooLong = this.nativeTextarea.value.length > (this.maxLength \|\| 0);\n this.internals.setValidity(\n { tooLong: isTooLong },\n isTooLong ? 'Value exceeds maxLength' : '',\n this.nativeTextarea\n );\n }\n }\n\n /\n Emits an `pdsInput` event.\n /\n private emitInputChange(event?: Event) {\n const { value } = this;\n this.pdsInput.emit({ value, event });\n }\n\n /\n Emits an `pdsTextareaChange` event.\n /\n private emitValueChange(event?: Event) {\n const textarea = event.target as HTMLTextAreaElement;\n isRequired(textarea, this);\n\n const { value } = textarea;\n\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n this.focusedValue = newValue;\n this.pdsTextareaChange.emit({ value: newValue, event });\n }\n\n private getValue(): string {\n return this.value \|\| '';\n }\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n this.emitValueChange(ev);\n }\n\n this.pdsBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.pdsFocus.emit(ev);\n };\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLTextAreaElement \| null;\n if (input) {\n // Handle maxLength validation\n if (this.maxLength && input.value.length > this.maxLength) {\n // Prevent input beyond maxLength\n input.value = input.value.substring(0, this.maxLength);\n }\n this.value = input.value \|\| '';\n }\n this.emitInputChange(ev);\n\n // Update counter position when content changes\n if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n // Use requestAnimationFrame to ensure DOM is updated\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n }\n };\n\n private onTextareaChange = (ev: Event) => {\n this.emitValueChange(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 connectedCallback() {\n this.debounceChanged();\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n }\n\n disconnectedCallback() {\n // Clean up ResizeObserver\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el),\n };\n this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n }\n\n componentDidLoad() {\n this.originalPdsInput = this.pdsInput;\n // Set initial form value\n this.updateFormValue();\n\n // Setup ResizeObserver for character counter positioning\n this.setupResizeObserver();\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n /\n Sets up ResizeObserver to track textarea resize for character counter positioning\n /\n private setupResizeObserver() {\n if (!this.maxLength \|\| !this.nativeTextarea) return;\n\n // ResizeObserver may not be available in test environments\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver(() => {\n // Use requestAnimationFrame to ensure DOM updates are complete\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n });\n\n this.resizeObserver.observe(this.nativeTextarea);\n\n // Initial positioning with a small delay to ensure counter is rendered\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n }\n }\n\n /\n Updates character counter position to stay within textarea boundaries during resize\n /\n private updateCharacterCounterPosition() {\n if (!this.characterCounter \|\| !this.nativeTextarea) return;\n\n // Skip positioning in test environments where ResizeObserver isn't available\n if (typeof ResizeObserver === 'undefined') return;\n\n // Ensure the character counter has been rendered and has dimensions\n if (this.characterCounter.offsetWidth === 0 \|\| this.characterCounter.offsetHeight === 0) {\n // Counter not ready or component hidden - return and let resize/input observers handle positioning later\n return;\n }\n\n // Position based on textarea's actual dimensions (which change during manual resize)\n const textareaWidth = this.nativeTextarea.offsetWidth;\n const textareaHeight = this.nativeTextarea.offsetHeight;\n const counterWidth = this.characterCounter.offsetWidth;\n const counterHeight = this.characterCounter.offsetHeight;\n\n // Calculate position within textarea boundaries with padding from edges\n const rightPosition = textareaWidth - counterWidth - 8;\n const bottomPosition = textareaHeight - counterHeight - 8;\n\n // Ensure counter stays within textarea boundaries even when resized very small\n const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));\n const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));\n\n // Apply absolute positioning within the field wrapper\n this.characterCounter.style.position = 'absolute';\n this.characterCounter.style.left = `${finalLeft}px`;\n this.characterCounter.style.top = `${finalTop}px`;\n this.characterCounter.style.right = 'auto';\n this.characterCounter.style.bottom = 'auto';\n }\n\n /\n Renders the character counter when maxLength is set\n /\n private renderCharacterCounter() {\n if (!this.maxLength) {\n return null;\n }\n\n const currentLength = this.getValue().length;\n return (\n <div\n class=\"pds-textarea__character-counter\"\n ref={(el) => this.characterCounter = el}\n role=\"status\"\n aria-live=\"polite\"\n aria-label={`${currentLength} of ${this.maxLength} characters`}\n >\n {currentLength} / {this.maxLength}\n </div>\n );\n }\n\n private renderAction() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n if (hasAction) {\n return (\n <div class=\"pds-textarea__action\" part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n );\n }\n return null;\n }\n\n /\n Updates the form value using ElementInternals API\n /\n private updateFormValue() {\n if (this.internals && this.internals.setFormValue) {\n const value = this.getValue();\n this.internals.setFormValue(value \|\| null);\n\n // Set validity based on native textarea validation\n if (this.nativeTextarea && this.internals && this.internals.setValidity) {\n this.internals.setValidity(\n this.nativeTextarea.validity,\n this.nativeTextarea.validationMessage,\n this.nativeTextarea\n );\n }\n }\n }\n\n\n /\n Form Associated Custom Elements API: Called when the form is reset\n /\n formResetCallback() {\n this.value = '';\n this.updateFormValue();\n }\n\n /\n Form Associated Custom Elements API: Called when the form is disabled\n /\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /\n Form Associated Custom Elements API: Called to restore form state\n */\n formStateRestoreCallback(state: string \| FormData \| null) {\n if (typeof state === 'string') {\n this.value = state;\n } else if (state instanceof FormData && this.name) {\n // Extract value from FormData using the textarea's name\n const value = state.get(this.name);\n if (typeof value === 'string') {\n this.value = value;\n }\n }\n }\n\n render() {\n const value = this.getValue();\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n aria-readonly={this.readonly ? 'true' : null}\n has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n >\n <div class=\"pds-textarea\">\n {this.label &&\n <div class=\"pds-textarea__label-wrapper\">\n <label htmlFor={this.componentId}>\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {!this.hideLabel && this.renderAction()}\n </div>\n }\n <div class=\"pds-textarea__field-wrapper\">\n <textarea\n ref={(el) => this.nativeTextarea = el }\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 maxlength={this.maxLength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n rows={this.rows}\n onBlur={this.onBlur}\n onChange={this.onTextareaChange}\n onFocus={this.onFocus}\n onInput={this.onInput}\n {...this.inheritedAttributes}\n >\n {value}\n </textarea>\n {this.renderCharacterCounter()}\n </div>\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}
1	+ {"file":"pds-textarea.js","mappings":"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","names":["PdsTextarea","__stencil_proxyCustomElement"],"sources":["src/global/styles/utils/label.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-input/pds-input.tokens.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":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n","@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":host {\n display: inline-block;\n width: 100%;\n}\n\n:host([aria-readonly=\"true\"]) {\n textarea {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-readonly);\n }\n}\n\n:host([highlight]:not([disabled]):not([aria-disabled=\"true\"]):not([aria-readonly=\"true\"])) {\n .pds-textarea__field:not(.is-invalid) {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-accent);\n color: var(--pine-color-text-accent);\n\n &:hover {\n border-color: var(--pine-color-accent-hover);\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring);\n }\n\n ~ .pds-textarea__character-counter {\n background: color-mix(in srgb, var(--pine-color-accent-disabled) 80%, transparent);\n color: var(--pine-color-text-accent);\n }\n }\n}\n\n.pds-textarea {\n display: flex;\n flex-direction: column;\n}\n\n.pds-textarea__label-wrapper {\n align-items: center;\n display: flex;\n justify-content: space-between;\n}\n\n.pds-textarea__action {\n align-items: center;\n display: flex;\n gap: var(--pine-dimension-xs);\n margin-inline-start: var(--pine-dimension-xs);\n}\n\nlabel {\n display: block;\n margin-block-end: var(--pine-dimension-xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-textarea__label-wrapper label {\n margin-block-end: 0;\n}\n\n.pds-textarea__helper-message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__error-message {\n color: var(--pine-color-text-message-danger);\n display: flex;\n font: var(--pine-typography-body-sm-medium);\n gap: var(--pine-dimension-2xs);\n margin-block-start: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n.pds-textarea__field-wrapper {\n display: inline-block;\n position: relative;\n width: 100%;\n}\n\n.pds-textarea__field {\n background-color: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: calc(var(--pine-dimension-xs) * 1.25);\n box-sizing: border-box;\n color: var(--pine-color-text);\n font: var(--pine-typography-body);\n letter-spacing: var(--pine-letter-spacing);\n min-height: calc(var(--pine-dimension-xl) * 2);\n min-width: calc(var(--pine-dimension-xl) * 2);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n resize: both;\n width: 100%;\n\n // Add bottom padding when character counter is present\n :host([max-length]) & {\n padding-bottom: calc(var(--pine-dimension-xs) + var(--pine-dimension-md));\n }\n\n &:hover:not(:disabled, .is-invalid) {\n border: var(--pine-border-hover);\n }\n\n &:disabled {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-disabled);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &::placeholder {\n color: var(--pine-color-text-placeholder);\n }\n\n &.is-invalid {\n background-color: var(--pine-input-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n :host-context([data-theme=\"dark\"]) & {\n background-color: var(--pine-color-red-950);\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n.pds-textarea__character-counter {\n background: color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);\n border-radius: calc(var(--pine-dimension-2xs) * 0.5);\n color: var(--pine-color-text-muted);\n font: var(--pine-typography-body-sm-medium);\n padding: calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);\n pointer-events: none;\n position: absolute;\n user-select: none;\n white-space: nowrap;\n z-index: var(--pine-z-index);\n\n // Match textarea disabled state\n :host([aria-disabled=\"true\"]) & {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-disabled);\n }\n\n // Match textarea readonly state\n :host([aria-readonly=\"true\"]) & {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-readonly);\n }\n\n // Match textarea invalid state - target when field has is-invalid class\n .pds-textarea__field.is-invalid ~ & {\n background-color: var(--pine-input-color-background-danger);\n\n :host-context([data-theme=\"dark\"]) & {\n background-color: var(--pine-color-red-950);\n }\n }\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId, exposeTypeProperty } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n/*\n @slot action - Content to be displayed in the label area, typically for help icons or links\n /\n@Component({\n tag: 'pds-textarea',\n styleUrls: [\n '../../global/styles/utils/label.scss',\n '../pds-input/pds-input.tokens.scss',\n 'pds-textarea.scss'\n ],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsTextarea {\n\n private nativeTextarea?: HTMLTextAreaElement\n private focusedValue?: string \| null;\n private inheritedAttributes: Attributes = {};\n private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n private internals?: ElementInternals;\n private resizeObserver?: ResizeObserver;\n private characterCounter?: HTMLElement;\n private readonly _type = 'textarea' as const;\n\n @Element() el: HTMLPdsTextareaElement;\n\n /\n Emitted when the input loses focus.\n /\n @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input has focus.\n /\n @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when a keyboard input occurs.\n \n For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n * the input is cleared on edit, the type is `null`.\n /\n @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n /\n Event emitted whenever the value of the textarea changes.\n \n This event will not emit when programmatically setting the `value` property.\n /\n @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n /\n Emitted when a key is pressed down in the textarea.\n /\n @Event() pdsKeyDown!: EventEmitter<KeyboardEvent>;\n\n /\n Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n * `textarea.focus()`.\n /\n @Method()\n async setFocus() {\n if (this.nativeTextarea) {\n this.nativeTextarea.focus();\n }\n }\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 Determines whether or not the textarea is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false;\n\n /\n The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n /\n @Prop() debounce?: number;\n\n /\n Displays an error message below the textarea field.\n /\n @Prop() errorMessage?: string;\n\n /\n Displays a message or hint below the textarea field.\n /\n @Prop() helperMessage?: string;\n\n /\n Determines 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 Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n /\n @Prop() hideLabel: boolean;\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 Determines whether or not the textarea is readonly.\n * @defaultValue false\n /\n @Prop() readonly = false;\n\n /\n Determines 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 Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.\n /\n @Prop({ reflect: true }) maxLength?: number;\n\n /\n Applies highlight styling to the textarea field.\n /\n @Prop({ reflect: true }) highlight?: boolean;\n\n /\n The value of the textarea.\n /\n @Prop({mutable: true}) value?: string \| null = '';\n\n @State() hasFocus = false;\n\n\n /\n If true, the textarea has action content in the label area\n /\n @State() hasAction = false;\n\n @Watch('debounce')\n protected debounceChanged() {\n const { pdsInput, debounce, originalPdsInput } = this;\n\n this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n }\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n const nativeTextarea = this.nativeTextarea;\n const value = this.getValue();\n\n if (nativeTextarea && nativeTextarea.value !== value) {\n nativeTextarea.value = value;\n }\n\n // Update form value for Form Associated Custom Elements API\n this.updateFormValue();\n\n // Update character counter position in case content changes affect sizing\n if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n this.updateCharacterCounterPosition();\n }\n }\n\n @Watch('maxLength')\n protected maxLengthChanged() {\n // Setup or teardown ResizeObserver based on maxLength\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.maxLength && this.nativeTextarea) {\n this.setupResizeObserver();\n }\n\n // Update ElementInternals validity when maxLength changes\n if (this.internals && this.internals.setValidity && this.nativeTextarea) {\n const isTooLong = this.nativeTextarea.value.length > (this.maxLength \|\| 0);\n this.internals.setValidity(\n { tooLong: isTooLong },\n isTooLong ? 'Value exceeds maxLength' : '',\n this.nativeTextarea\n );\n }\n }\n\n /\n Emits an `pdsInput` event.\n /\n private emitInputChange(event?: Event) {\n const { value } = this;\n this.pdsInput.emit({ value, event });\n }\n\n /\n Emits an `pdsTextareaChange` event.\n /\n private emitValueChange(event?: Event) {\n const textarea = event.target as HTMLTextAreaElement;\n isRequired(textarea, this);\n\n const { value } = textarea;\n\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n this.focusedValue = newValue;\n this.pdsTextareaChange.emit({ value: newValue, event });\n }\n\n private getValue(): string {\n return this.value \|\| '';\n }\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n this.emitValueChange(ev);\n }\n\n this.pdsBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.pdsFocus.emit(ev);\n };\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLTextAreaElement \| null;\n if (input) {\n // Handle maxLength validation\n if (this.maxLength && input.value.length > this.maxLength) {\n // Prevent input beyond maxLength\n input.value = input.value.substring(0, this.maxLength);\n }\n this.value = input.value \|\| '';\n }\n this.emitInputChange(ev);\n\n // Update counter position when content changes\n if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n // Use requestAnimationFrame to ensure DOM is updated\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n }\n };\n\n private onTextareaChange = (ev: Event) => {\n this.emitValueChange(ev);\n };\n\n private onKeyDown = (ev: KeyboardEvent) => {\n this.pdsKeyDown.emit(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 connectedCallback() {\n this.debounceChanged();\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n }\n\n disconnectedCallback() {\n // Clean up ResizeObserver\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el),\n };\n this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n }\n\n componentDidLoad() {\n this.originalPdsInput = this.pdsInput;\n // Set initial form value\n this.updateFormValue();\n\n // Setup ResizeObserver for character counter positioning\n this.setupResizeObserver();\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n /\n Sets up ResizeObserver to track textarea resize for character counter positioning\n /\n private setupResizeObserver() {\n if (!this.maxLength \|\| !this.nativeTextarea) return;\n\n // ResizeObserver may not be available in test environments\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver(() => {\n // Use requestAnimationFrame to ensure DOM updates are complete\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n });\n\n this.resizeObserver.observe(this.nativeTextarea);\n\n // Initial positioning with a small delay to ensure counter is rendered\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n }\n }\n\n /\n Updates character counter position to stay within textarea boundaries during resize\n /\n private updateCharacterCounterPosition() {\n if (!this.characterCounter \|\| !this.nativeTextarea) return;\n\n // Skip positioning in test environments where ResizeObserver isn't available\n if (typeof ResizeObserver === 'undefined') return;\n\n // Ensure the character counter has been rendered and has dimensions\n if (this.characterCounter.offsetWidth === 0 \|\| this.characterCounter.offsetHeight === 0) {\n // Counter not ready or component hidden - return and let resize/input observers handle positioning later\n return;\n }\n\n // Position based on textarea's actual dimensions (which change during manual resize)\n const textareaWidth = this.nativeTextarea.offsetWidth;\n const textareaHeight = this.nativeTextarea.offsetHeight;\n const counterWidth = this.characterCounter.offsetWidth;\n const counterHeight = this.characterCounter.offsetHeight;\n\n // Calculate position within textarea boundaries with padding from edges\n const rightPosition = textareaWidth - counterWidth - 8;\n const bottomPosition = textareaHeight - counterHeight - 8;\n\n // Ensure counter stays within textarea boundaries even when resized very small\n const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));\n const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));\n\n // Apply absolute positioning within the field wrapper\n this.characterCounter.style.position = 'absolute';\n this.characterCounter.style.left = `${finalLeft}px`;\n this.characterCounter.style.top = `${finalTop}px`;\n this.characterCounter.style.right = 'auto';\n this.characterCounter.style.bottom = 'auto';\n }\n\n /\n Renders the character counter when maxLength is set\n /\n private renderCharacterCounter() {\n if (!this.maxLength) {\n return null;\n }\n\n const currentLength = this.getValue().length;\n return (\n <div\n class=\"pds-textarea__character-counter\"\n ref={(el) => this.characterCounter = el}\n role=\"status\"\n aria-live=\"polite\"\n aria-label={`${currentLength} of ${this.maxLength} characters`}\n >\n {currentLength} / {this.maxLength}\n </div>\n );\n }\n\n private renderAction() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n if (hasAction) {\n return (\n <div class=\"pds-textarea__action\" part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n );\n }\n return null;\n }\n\n /\n Updates the form value using ElementInternals API\n /\n private updateFormValue() {\n if (this.internals && this.internals.setFormValue) {\n const value = this.getValue();\n this.internals.setFormValue(value \|\| null);\n\n // Set validity based on native textarea validation\n if (this.nativeTextarea && this.internals && this.internals.setValidity) {\n this.internals.setValidity(\n this.nativeTextarea.validity,\n this.nativeTextarea.validationMessage,\n this.nativeTextarea\n );\n }\n }\n }\n\n\n /\n Form Associated Custom Elements API: Called when the form is reset\n /\n formResetCallback() {\n this.value = '';\n this.updateFormValue();\n }\n\n /\n Form Associated Custom Elements API: Called when the form is disabled\n /\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /\n Form Associated Custom Elements API: Called to restore form state\n */\n formStateRestoreCallback(state: string \| FormData \| null) {\n if (typeof state === 'string') {\n this.value = state;\n } else if (state instanceof FormData && this.name) {\n // Extract value from FormData using the textarea's name\n const value = state.get(this.name);\n if (typeof value === 'string') {\n this.value = value;\n }\n }\n }\n\n render() {\n const value = this.getValue();\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n aria-readonly={this.readonly ? 'true' : null}\n has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n >\n <div class=\"pds-textarea\">\n {this.label &&\n <div class=\"pds-textarea__label-wrapper\">\n <label htmlFor={this.componentId}>\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {!this.hideLabel && this.renderAction()}\n </div>\n }\n <div class=\"pds-textarea__field-wrapper\">\n <textarea\n ref={(el) => this.nativeTextarea = el }\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 maxlength={this.maxLength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n rows={this.rows}\n onBlur={this.onBlur}\n onChange={this.onTextareaChange}\n onFocus={this.onFocus}\n onInput={this.onInput}\n onKeyDown={this.onKeyDown}\n {...this.inheritedAttributes}\n >\n {value}\n </textarea>\n {this.renderCharacterCounter()}\n </div>\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/components/pds-toast.js CHANGED Viewed

@@ -87,13 +87,13 @@ const PdsToast$1 = /*@__PURE__*/ proxyCustomElement(class PdsToast extends HTMLE
         return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (h(Host, { key: 'ff9523170d34f742f8301e8d3ce3810bacb7d183', hidden: !this.isVisible }, h("div", { key: '67e0639a0158eb8c325064a9c3f97aaa3b538d90', class: {
+        return (h(Host, { key: 'bcc7fe0ad3b7823a940249fccfce30edfc1e808d', hidden: !this.isVisible }, h("div", { key: '5265cbbdf05278cbd565e34f63b6c9566ec14290', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: '5387b71901592b69a7465ec10c3f3508e170b1c1', class: "pds-toast__message" }, h("slot", { key: 'a9bb352ae8ad478fb65298c357bc20efa1877a6b' })), this.dismissible && (h("button", { key: 'c1d15b41455304e689c3736ed3d3429321f8c1a7', type: "button", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: 'd650b57fb5cddeb369d8245b239423575da63cd8', class: "pds-toast__message" }, h("slot", { key: 'd4e2d6b6136b75dfd97a37da4588c8c51ca4bcd0' })), this.dismissible && (h("button", { key: 'c89170f321c47b83096a01aaa8012298dc3ca440', type: "button", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: '0f9e43ed08a253531f3dc698c92f861ca1bd6063', name: "remove" }))))));
+            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: '359c0c05ddd6db8e7711fc0212bf80569106ecf4', name: "remove" }))))));
     }
     static get watchers() { return {
         "duration": ["handleDurationChange"]

package/components/pds-tooltip.js CHANGED Viewed

@@ -315,9 +315,9 @@ const PdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PdsTooltip extends H
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: '19cd2c26c96f21f39d0bca90d3b74f8c282e74e1', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '4288caabd5c37d90d4c82c430a9eb0a17653b2ad', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (h(Host, { key: '41dffb4751c1e40789de07ec5b2f96202cedb82c', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '156d6e9d23d3194caa387db9de35226d2d5fd02f', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: 'd937b6ee8a11c4a4d9f31daf147b598b5ab56c2d' })), h("div", { key: '6b31410657ddfce5275abc03a2e0a3c2692efc2a', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '2d5ed8babb0a44c1340028dfedc5ee8694da4bfc', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: 'e67bae6e3c9726c39d193e5771c0e66818575c65' })), h("div", { key: '60ec7b351e574b2e2fc8b0b8c8b87f4977e6eed7', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: 'b66966dba3d142401e588b7437689c0f6386cfcd', name: "content" }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/cjs/{floating-ui.dom-DTAy35nv.js → floating-ui.dom-Ca6tS7ef.js} RENAMED Viewed

@@ -41,8 +41,9 @@ function getOppositeAxis(axis) {
 function getAxisLength(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
+const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
 function getSideAxis(placement) {
-  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+  return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
 }
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
@@ -67,19 +68,19 @@ function getExpandedPlacements(placement) {
 function getOppositeAlignmentPlacement(placement) {
   return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
 }
+const lrPlacement = ['left', 'right'];
+const rlPlacement = ['right', 'left'];
+const tbPlacement = ['top', 'bottom'];
+const btPlacement = ['bottom', 'top'];
 function getSideList(side, isStart, rtl) {
-  const lr = ['left', 'right'];
-  const rl = ['right', 'left'];
-  const tb = ['top', 'bottom'];
-  const bt = ['bottom', 'top'];
   switch (side) {
     case 'top':
     case 'bottom':
-      if (rtl) return isStart ? rl : lr;
-      return isStart ? lr : rl;
+      if (rtl) return isStart ? rlPlacement : lrPlacement;
+      return isStart ? lrPlacement : rlPlacement;
     case 'left':
     case 'right':
-      return isStart ? tb : bt;
+      return isStart ? tbPlacement : btPlacement;
     default:
       return [];
   }
@@ -417,10 +418,11 @@ const flip$1 = function (options) {
         const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
         const nextPlacement = placements[nextIndex];
         if (nextPlacement) {
-          var _overflowsData$;
           const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
-          const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
-          if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
+          if (!ignoreCrossAxisOverflow ||
+          // We leave the current main axis only if every placement on that axis
+          // overflows the main axis.
+          overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
             // Try next placement and re-run the lifecycle.
             return {
               data: {
@@ -477,6 +479,8 @@ const flip$1 = function (options) {
   };
 };
+const originSides = /*#__PURE__*/new Set(['left', 'top']);
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
@@ -490,7 +494,7 @@ async function convertValueToCoords(state, options) {
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getSideAxis(placement) === 'y';
-  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const mainAxisMulti = originSides.has(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
@@ -639,6 +643,90 @@ const shift$1 = function (options) {
   };
 };
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+const size$1 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'size',
+    options,
+    async fn(state) {
+      var _state$middlewareData, _state$middlewareData2;
+      const {
+        placement,
+        rects,
+        platform,
+        elements
+      } = state;
+      const {
+        apply = () => {},
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const side = getSide(placement);
+      const alignment = getAlignment(placement);
+      const isYAxis = getSideAxis(placement) === 'y';
+      const {
+        width,
+        height
+      } = rects.floating;
+      let heightSide;
+      let widthSide;
+      if (side === 'top' || side === 'bottom') {
+        heightSide = side;
+        widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
+      } else {
+        widthSide = side;
+        heightSide = alignment === 'end' ? 'top' : 'bottom';
+      }
+      const maximumClippingHeight = height - overflow.top - overflow.bottom;
+      const maximumClippingWidth = width - overflow.left - overflow.right;
+      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
+      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
+      const noShift = !state.middlewareData.shift;
+      let availableHeight = overflowAvailableHeight;
+      let availableWidth = overflowAvailableWidth;
+      if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
+        availableWidth = maximumClippingWidth;
+      }
+      if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
+        availableHeight = maximumClippingHeight;
+      }
+      if (noShift && !alignment) {
+        const xMin = max(overflow.left, 0);
+        const xMax = max(overflow.right, 0);
+        const yMin = max(overflow.top, 0);
+        const yMax = max(overflow.bottom, 0);
+        if (isYAxis) {
+          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
+        } else {
+          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
+        }
+      }
+      await apply({
+        ...state,
+        availableWidth,
+        availableHeight
+      });
+      const nextDimensions = await platform.getDimensions(elements.floating);
+      if (width !== nextDimensions.width || height !== nextDimensions.height) {
+        return {
+          reset: {
+            rects: true
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
 function hasWindow() {
   return typeof window !== 'undefined';
 }
@@ -683,34 +771,40 @@ function isShadowRoot(value) {
   }
   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
+const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
 function isOverflowElement(element) {
   const {
     overflow,
     overflowX,
     overflowY,
     display
-  } = getComputedStyle(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+  } = getComputedStyle$1(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
+const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
 function isTableElement(element) {
-  return ['table', 'td', 'th'].includes(getNodeName(element));
+  return tableElements.has(getNodeName(element));
 }
+const topLayerSelectors = [':popover-open', ':modal'];
 function isTopLayer(element) {
-  return [':popover-open', ':modal'].some(selector => {
+  return topLayerSelectors.some(selector => {
     try {
       return element.matches(selector);
-    } catch (e) {
+    } catch (_e) {
       return false;
     }
   });
 }
+const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
+const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
+const containValues = ['paint', 'layout', 'strict', 'content'];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // https://drafts.csswg.org/css-transforms-2/#individual-transforms
-  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -728,10 +822,11 @@ function isWebKit() {
   if (typeof CSS === 'undefined' || !CSS.supports) return false;
   return CSS.supports('-webkit-backdrop-filter', 'none');
 }
+const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
 function isLastTraversableNode(node) {
-  return ['html', 'body', '#document'].includes(getNodeName(node));
+  return lastTraversableNodeNames.has(getNodeName(node));
 }
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -793,7 +888,7 @@ function getFrameElement(win) {
 }
 function getCssDimensions(element) {
-  const css = getComputedStyle(element);
+  const css = getComputedStyle$1(element);
   // In testing environments, the `width` and `height` properties are empty
   // strings for SVG elements, returning NaN. Fallback to `0` in this case.
   let width = parseFloat(css.width) || 0;
@@ -898,7 +993,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -929,14 +1024,9 @@ function getWindowScrollBarX(element, rect) {
   return rect.left + leftScroll;
 }
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  if (ignoreScrollbarX === void 0) {
-    ignoreScrollbarX = false;
-  }
+function getHTMLOffset(documentElement, scroll) {
   const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
-  // RTL <body> scrollbar.
-  getWindowScrollBarX(documentElement, htmlRect));
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
   return {
     x,
@@ -975,7 +1065,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
@@ -998,7 +1088,7 @@ function getDocumentRect(element) {
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle(body).direction === 'rtl') {
+  if (getComputedStyle$1(body).direction === 'rtl') {
     x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -1009,6 +1099,10 @@ function getDocumentRect(element) {
   };
 }
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
@@ -1026,6 +1120,24 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
   return {
     width,
     height,
@@ -1034,6 +1146,7 @@ function getViewportRect(element, strategy) {
   };
 }
+const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
 // Returns the inner client rect, subtracting scrollbars if present.
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
@@ -1075,7 +1188,7 @@ function hasFixedPositionAncestor(element, stopNode) {
   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
   }
-  return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
 }
 // A "clipping ancestor" is an `overflow` element with the characteristic of
@@ -1088,17 +1201,17 @@ function getClippingElementAncestors(element, cache) {
   }
   let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle(element).position === 'fixed';
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
   let currentNode = elementIsFixed ? getParentNode(element) : element;
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle(currentNode);
+    const computedStyle = getComputedStyle$1(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
     }
-    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
     if (shouldDropCurrentNode) {
       // Drop non-containing blocks.
       result = result.filter(ancestor => ancestor !== currentNode);
@@ -1194,11 +1307,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
 }
 function isStaticPositioned(element) {
-  return getComputedStyle(element).position === 'static';
+  return getComputedStyle$1(element).position === 'static';
 }
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
   }
   if (polyfill) {
@@ -1259,7 +1372,7 @@ const getElementRects = async function (data) {
 };
 function isRTL(element) {
-  return getComputedStyle(element).direction === 'rtl';
+  return getComputedStyle$1(element).direction === 'rtl';
 }
 const platform = {
@@ -1470,6 +1583,14 @@ const shift = shift$1;
  */
 const flip = flip$1;
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+const size = size$1;
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -1498,6 +1619,7 @@ exports.computePosition = computePosition;
 exports.flip = flip;
 exports.offset = offset;
 exports.shift = shift;
-//# sourceMappingURL=floating-ui.dom-DTAy35nv.js.map
+exports.size = size;
+//# sourceMappingURL=floating-ui.dom-Ca6tS7ef.js.map
-//# sourceMappingURL=floating-ui.dom-DTAy35nv.js.map
+//# sourceMappingURL=floating-ui.dom-Ca6tS7ef.js.map