npm - @pine-ds/core - Versions diffs - 3.4.0 → 3.4.2 - Mend

@pine-ds/core 3.4.0 → 3.4.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 (562) hide show

package/dist/esm/pds-select.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-select.entry.js","sources":["src/components/pds-select/pds-select.tokens.scss?tag=pds-select&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-select/pds-select.tokens'\n",":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",":host {\n --pds-select-background: var(--pine-color-background-container);\n --pds-select-border: var(--pine-border);\n --pds-select-border-radius: var(--pine-dimension-125);\n --pds-select-border-radius-start-end: var(--pine-dimension-125);\n --pds-select-border-radius-start-start: var(--pine-dimension-125);\n --pds-select-border-radius-end-end: var(--pine-dimension-125);\n --pds-select-border-radius-end-start: var(--pine-dimension-125);\n --pds-select-min-height: 36px;\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n .hidden,\n :host([hidden]) {\n display: none;\n }\n}\n\n.pds-select {\n display: grid;\n flex-direction: column;\n grid-template-areas:\n 'label label'\n 'field field'\n 'message message';\n grid-template-columns: 1fr minmax(2rem, min-content);\n grid-template-rows: min-content min-content min-content;\n position: relative;\n width: 100%;\n}\n\n.pds-select__label-wrapper {\n align-items: center;\n display: flex;\n grid-area: label;\n justify-content: space-between;\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-select__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 margin-block-end: var(--pine-dimension-2xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-select__label-wrapper label {\n margin-block-end: 0;\n}\n\nselect {\n appearance: none;\n background-color: var(--pds-select-background);\n border: var(--pds-select-border);\n border-radius: var(--pds-select-border-radius);\n border-bottom-left-radius: var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));\n border-bottom-right-radius: var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));\n border-top-left-radius: var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));\n border-top-right-radius: var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));\n font: var(--pine-typography-body);\n grid-area: field;\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--pds-select-min-height);\n padding: var(--pine-dimension-xs) var(--pine-dimension-150);\n padding-inline-end: var(--pine-dimension-450);\n position: relative;\n\n &:hover {\n border-color: var(--pine-color-border-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n border-color: var(--pine-color-border-active);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &:disabled {\n background-color: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n color: var(--pine-color-text-disabled);\n cursor: not-allowed;\n }\n\n &:has(~ .pds-select__message .pds-select__error-message) {\n background-color: var(--pine-select-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n:host(.is-invalid) {\n select {\n background-color: var(--pine-select-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n.pds-select__error-message,\n.pds-select__helper-message {\n font: var(--pine-typography-body-sm-medium);\n margin-block-end: 0;\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-select__error-message {\n align-items: center;\n color: var(--pine-color-text-message-danger);\n display: flex;\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-select__message {\n grid-area: message;\n}\n\n.pds-select__select-icon {\n align-items: center;\n display: flex;\n grid-column: -1 / -2;\n grid-row: 2 / 3;\n height: var(--pds-select-min-height);\n pointer-events: none;\n position: relative;\n z-index: 1;\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\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger, enlarge } 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-select',\n styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n shadow: true,\n})\nexport class PdsSelect {\n\n private selectEl!: HTMLSelectElement;\n private slotContainer!: HTMLDivElement;\n\n @Element() el: HTMLPdsSelectElement;\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 select field is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false\n\n /\n Displays error message text describing an invalid state.\n /\n @Prop() errorMessage: 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() hideLabel: boolean;\n\n /\n Displays helper message text below select.\n /\n @Prop() helperMessage: string;\n\n /\n Determines whether or not the select is invalid.\n /\n @Prop() invalid?: boolean;\n\n /\n Text to be displayed as the select label.\n /\n @Prop() label?: string;\n\n /\n Indicates whether multiple options can be selected.\n * @defaultValue false\n /\n @Prop() multiple = false;\n\n /\n Specifies the name. Submitted with the form name/value pair.\n /\n @Prop() name!: string;\n\n /\n Indicates whether or not the select field is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value(s) of the selected option(s).\n \n /\n @Prop({ mutable: true }) value?: string \| string[];\n\n /*\n Emitted when a keyboard input occurs.\n /\n @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n @Watch('value')\n /\n Handles the change in the value of the select component.\n * This method is called whenever the value of the select component changes.\n * It updates the selected option accordingly.\n /\n valueChanged() {\n this.updateSelectedOption();\n }\n\n componentWillLoad() {\n this.updateSelectedOption();\n }\n\n /\n Updates the selected option in the select element based on the current value.\n \n This method iterates through all the options of the select element and sets the\n * 'selected' attribute on the option that matches the current value. If an option\n * does not match the current value, the 'selected' attribute is removed.\n \n @private\n * @returns {void}\n /\n private updateSelectedOption() {\n if (this.selectEl) {\n const options = this.selectEl.options;\n\n // Update the selected attribute for all options.\n Array.from(options).map((option: HTMLOptionElement) => {\n if (Array.isArray(this.value)) {\n option.selected = this.value.includes(option.value);\n } else {\n option.selected = this.value === option.value;\n }\n });\n };\n }\n\n /\n Emits an event on input change.\n /\n private onSelectUpdate = (e: Event) => {\n const target = e.target as HTMLSelectElement\n\n const values = Array.from(target.options)\n .filter((option) => ( option.selected))\n .map((option) => ( option.value));\n\n if (values.length === 1 && !this.multiple) {\n this.value = values[0];\n } else {\n this.value = values;\n }\n\n this.pdsSelectChange.emit(e as InputEvent);\n };\n\n /\n Handles the change event for the slot element.\n * This method is triggered when the slot content changes.\n * It updates the inner HTML of the select element by cloning and appending\n * the assigned <option> elements from the slot.\n */\n private handleSlotChange = () => {\n const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n this.selectEl.innerHTML = '';\n const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement \| HTMLOptGroupElement)[];\n\n assignedElements.forEach((item) => {\n if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n const clonedItem = item.cloneNode(true) as HTMLOptionElement \| HTMLOptGroupElement;\n if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n (clonedItem as HTMLOptionElement).selected = true;\n }\n this.selectEl.appendChild(clonedItem);\n }\n });\n\n this.updateSelectedOption();\n };\n\n private getHelperMessage() {\n return this.helperMessage && (\n <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n {this.helperMessage}\n </p>\n );\n }\n\n private getErrorMessage() {\n return this.errorMessage && (\n <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n <pds-icon icon={danger} size=\"small\"></pds-icon>\n {this.errorMessage}\n </p>\n );\n }\n\n private renderMessages() {\n if (!this.helperMessage && !this.errorMessage) return null;\n\n return (\n <div class=\"pds-select__message\">\n {this.getHelperMessage()}\n {this.getErrorMessage()}\n </div>\n );\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n private renderAction() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n if (hasAction) {\n return (\n <div class=\"pds-select__action\" part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n );\n }\n return null;\n }\n\n render() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()} has-action={hasAction && !this.hideLabel ? 'true' : null}>\n <div class=\"pds-select\">\n {!this.hideLabel && (\n <div class=\"pds-select__label-wrapper\">\n <label htmlFor={this.componentId}>\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {hasAction && this.renderAction()}\n </div>\n )}\n <select\n aria-label={this.hideLabel ? this.label : undefined}\n autocomplete={this.autocomplete \|\| undefined}\n class=\"pds-select__field\"\n disabled={this.disabled}\n id={this.componentId}\n multiple={this.multiple}\n name={this.name}\n onChange={this.onSelectUpdate}\n part=\"select\"\n required={this.required}\n ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n ></select>\n <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n {this.renderMessages()}\n {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pds-select.entry.js","sources":["src/components/pds-select/pds-select.tokens.scss?tag=pds-select&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-select/pds-select.tokens'\n",":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",":host {\n --pds-select-background: var(--pine-color-background-container);\n --pds-select-border: var(--pine-border);\n --pds-select-border-radius: var(--pine-dimension-125);\n --pds-select-border-radius-start-end: var(--pine-dimension-125);\n --pds-select-border-radius-start-start: var(--pine-dimension-125);\n --pds-select-border-radius-end-end: var(--pine-dimension-125);\n --pds-select-border-radius-end-start: var(--pine-dimension-125);\n --pds-select-min-height: 36px;\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n .hidden,\n :host([hidden]) {\n display: none;\n }\n}\n\n.pds-select {\n display: grid;\n flex-direction: column;\n grid-template-areas:\n 'label label'\n 'field field'\n 'message message';\n grid-template-columns: 1fr minmax(2rem, min-content);\n grid-template-rows: min-content min-content min-content;\n position: relative;\n width: 100%;\n}\n\n.pds-select__label-wrapper {\n align-items: center;\n display: flex;\n grid-area: label;\n justify-content: space-between;\n margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-select__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 margin-block-end: var(--pine-dimension-2xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-select__label-wrapper label {\n margin-block-end: 0;\n}\n\nselect {\n appearance: none;\n background-color: var(--pds-select-background);\n border: var(--pds-select-border);\n border-radius: var(--pds-select-border-radius);\n border-bottom-left-radius: var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));\n border-bottom-right-radius: var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));\n border-top-left-radius: var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));\n border-top-right-radius: var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));\n font: var(--pine-typography-body);\n grid-area: field;\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--pds-select-min-height);\n padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);\n padding-inline-end: var(--pine-dimension-450);\n position: relative;\n\n &:hover {\n border-color: var(--pine-color-border-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n border-color: var(--pine-color-border-active);\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &:disabled {\n background-color: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n color: var(--pine-color-text-disabled);\n cursor: not-allowed;\n }\n\n &:has(~ .pds-select__message .pds-select__error-message) {\n background-color: var(--pine-select-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n:host(.is-invalid) {\n select {\n background-color: var(--pine-select-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n.pds-select__error-message,\n.pds-select__helper-message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-end: 0;\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-select__error-message {\n align-items: center;\n color: var(--pine-color-text-message-danger);\n display: flex;\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-select__message {\n grid-area: message;\n}\n\n.pds-select__select-icon {\n align-items: center;\n display: flex;\n grid-column: -1 / -2;\n grid-row: 2 / 3;\n height: var(--pds-select-min-height);\n pointer-events: none;\n position: relative;\n z-index: 1;\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\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger, enlarge } 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-select',\n styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsSelect {\n\n private selectEl!: HTMLSelectElement;\n private slotContainer!: HTMLDivElement;\n private internals?: ElementInternals;\n\n @Element() el: HTMLPdsSelectElement;\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 select field is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false\n\n /\n Displays error message text describing an invalid state.\n /\n @Prop() errorMessage: 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() hideLabel: boolean;\n\n /\n Displays helper message text below select.\n /\n @Prop() helperMessage: string;\n\n /\n Determines whether or not the select is invalid.\n /\n @Prop() invalid?: boolean;\n\n /\n Text to be displayed as the select label.\n /\n @Prop() label?: string;\n\n /\n Indicates whether multiple options can be selected.\n * @defaultValue false\n /\n @Prop() multiple = false;\n\n /\n Specifies the name. Submitted with the form name/value pair.\n /\n @Prop() name!: string;\n\n /\n Indicates whether or not the select field is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value(s) of the selected option(s).\n \n /\n @Prop({ mutable: true }) value?: string \| string[];\n\n /*\n Emitted when a keyboard input occurs.\n /\n @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n @Watch('value')\n /\n Handles the change in the value of the select component.\n * This method is called whenever the value of the select component changes.\n * It updates the selected option accordingly.\n /\n valueChanged() {\n this.updateSelectedOption();\n this.updateFormValue();\n }\n\n connectedCallback() {\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n }\n\n componentWillLoad() {\n this.updateSelectedOption();\n }\n\n componentDidLoad() {\n // Set initial form value\n this.updateFormValue();\n }\n\n /\n Updates the selected option in the select element based on the current value.\n \n This method iterates through all the options of the select element and sets the\n * 'selected' attribute on the option that matches the current value. If an option\n * does not match the current value, the 'selected' attribute is removed.\n \n @private\n * @returns {void}\n /\n private updateSelectedOption() {\n if (this.selectEl) {\n const options = this.selectEl.options;\n\n // Update the selected attribute for all options.\n Array.from(options).map((option: HTMLOptionElement) => {\n if (Array.isArray(this.value)) {\n option.selected = this.value.includes(option.value);\n } else {\n option.selected = this.value === option.value;\n }\n });\n };\n }\n\n /\n Emits an event on input change.\n /\n private onSelectUpdate = (e: Event) => {\n const target = e.target as HTMLSelectElement\n\n const values = Array.from(target.options)\n .filter((option) => ( option.selected))\n .map((option) => ( option.value));\n\n if (values.length === 1 && !this.multiple) {\n this.value = values[0];\n } else {\n this.value = values;\n }\n\n this.pdsSelectChange.emit(e as InputEvent);\n };\n\n /\n Handles the change event for the slot element.\n * This method is triggered when the slot content changes.\n * It updates the inner HTML of the select element by cloning and appending\n * the assigned <option> elements from the slot.\n /\n private handleSlotChange = () => {\n const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n this.selectEl.innerHTML = '';\n const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement \| HTMLOptGroupElement)[];\n\n assignedElements.forEach((item) => {\n if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n const clonedItem = item.cloneNode(true) as HTMLOptionElement \| HTMLOptGroupElement;\n if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n (clonedItem as HTMLOptionElement).selected = true;\n }\n this.selectEl.appendChild(clonedItem);\n }\n });\n\n this.updateSelectedOption();\n };\n\n private getHelperMessage() {\n return this.helperMessage && (\n <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n {this.helperMessage}\n </p>\n );\n }\n\n private getErrorMessage() {\n return this.errorMessage && (\n <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n <pds-icon icon={danger} size=\"small\"></pds-icon>\n {this.errorMessage}\n </p>\n );\n }\n\n private renderMessages() {\n if (!this.helperMessage && !this.errorMessage) return null;\n\n return (\n <div class=\"pds-select__message\">\n {this.getHelperMessage()}\n {this.getErrorMessage()}\n </div>\n );\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n private renderAction() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n if (hasAction) {\n return (\n <div class=\"pds-select__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.value;\n\n // Handle multi-select arrays by converting to FormData or comma-separated string\n if (Array.isArray(value)) {\n if (value.length > 1) {\n // For multiple values, create FormData with multiple entries\n const formData = new FormData();\n value.forEach(val => formData.append(this.name \|\| '', val));\n this.internals.setFormValue(formData);\n } else {\n // Single value in array, use the string value\n this.internals.setFormValue(value[0] \|\| null);\n }\n } else {\n // Single string value\n this.internals.setFormValue(value \|\| null);\n }\n\n // Set validity based on native select validation\n if (this.selectEl && this.internals && this.internals.setValidity) {\n this.internals.setValidity(\n this.selectEl.validity,\n this.selectEl.validationMessage,\n this.selectEl\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(s) from FormData using the select's name\n const values = state.getAll(this.name);\n if (values.length > 1) {\n // Multi-select: convert to string array\n this.value = values.filter(v => typeof v === 'string') as string[];\n } else if (values.length === 1 && typeof values[0] === 'string') {\n // Single select: use string value\n this.value = values[0];\n }\n }\n }\n\n render() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()} has-action={hasAction && !this.hideLabel ? 'true' : null}>\n <div class=\"pds-select\">\n {!this.hideLabel && (\n <div class=\"pds-select__label-wrapper\">\n <label htmlFor={this.componentId}>\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {hasAction && this.renderAction()}\n </div>\n )}\n <select\n aria-label={this.hideLabel ? this.label : undefined}\n autocomplete={this.autocomplete \|\| undefined}\n class=\"pds-select__field\"\n disabled={this.disabled}\n id={this.componentId}\n multiple={this.multiple}\n name={this.name}\n onChange={this.onSelectUpdate}\n part=\"select\"\n required={this.required}\n ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n ></select>\n <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n {this.renderMessages()}\n {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pds-sortable-item.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
 import { h as handle } from './index-CzVv99mW.js';
 const pdsSortableItemCss = ".pds-sortable-item.sc-pds-sortable-item-h{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-start-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-end-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--pine-color-background-container-hover)}.pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--pine-color-info)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container);border-radius:0;-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container-hover);border-radius:0}";

package/dist/esm/pds-sortable.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
 /**!
  * Sortable 1.15.6

package/dist/esm/pds-switch.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
 import { m as messageId, a as assignDescription } from './form-DTL_39D_.js';
 import { f as danger } from './index-CzVv99mW.js';
 import { i as inheritAriaAttributes } from './attributes-C0M1gTKv.js';
@@ -33,6 +33,7 @@ const PdsSwitch = class {
                 return;
             const input = e.target;
             this.checked = input.checked;
+            this.updateFormValue();
             this.pdsSwitchChange.emit(e);
         };
         this.switchClassNames = () => {
@@ -46,15 +47,55 @@ const PdsSwitch = class {
             return switchClasses;
         };
     }
+    connectedCallback() {
+        if (this.el.attachInternals) {
+            this.internals = this.el.attachInternals();
+        }
+    }
+    componentDidLoad() {
+        this.updateFormValue();
+    }
+    checkedChanged() {
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        var _a;
+        if (typeof jest !== 'undefined' || typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test') {
+            return;
+        }
+        if (this.internals && this.internals.setFormValue) {
+            // For switches, only send the value when checked, otherwise send null
+            const formValue = this.checked ? (this.value || 'on') : null;
+            this.internals.setFormValue(formValue);
+        }
+        if (this.internals && this.internals.setValidity) {
+            this.internals.setValidity({});
+        }
+    }
+    formStateRestoreCallback(state) {
+        if (state instanceof FormData) {
+            // For switches, restore if the value exists in FormData
+            const value = this.value || 'on';
+            this.checked = state.get(this.name || this.componentId) === value;
+        }
+        else if (typeof state === 'string') {
+            // Restore from string state
+            this.checked = state === (this.value || 'on');
+        }
+    }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (h(Host, { key: '128ed012fe386dea88e6da282084589b22453588', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '3407eeffca9a0f0c047e5d7c761526b488aafb62', htmlFor: this.componentId }, h("input", Object.assign({ key: '3f16f928b2b96aa212923ba09ee80a3559b8103c', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '09c43ffbabce6a2fe133875ca15e0910d34064fa', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: '90c9df8b2efef83cf238d540076bad04bf9aa2eb', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'e812446a907dc0ad822b0c5974fca5913117f051', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'e1c93c8ac145e54a205f8bfecf465ba8e484313b', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'bd2a7a9740c0d466fbedff0e06e532ab8deb567d', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '0fb2cfa31a424bce3aa7f8310718f004a034fdae', htmlFor: this.componentId }, h("input", Object.assign({ key: '85b836e04db6648dd8981b51cdbd9ee90bfcea6a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '29674a12e61459a11aa8a791eeb46c829c468317', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '135a4bec88f9fe938737b61f361bb76908c39bc7', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '18cc1bd12df56b0621820cc0e96a150463373ce2', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '455fd05665e9bbd8d5a9096544116bb646e4c66a', icon: danger, size: "small" }), this.errorMessage)));
     }
+    static get formAssociated() { return true; }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "checked": ["checkedChanged"]
+    }; }
 };
 PdsSwitch.style = labelCss + pdsSwitchCss;

package/dist/esm/pds-switch.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-switch.entry.js","sources":["src/global/styles/utils/label.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.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",":host {\n// Need discussions\n --sizing-input-toggle-size: calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));\n --pine-dimension-025: 2px;\n --spacing-message-inline: calc(var(--pine-dimension-450) + var(--pine-dimension-150));\n --number-transition-timing: 0.15s ease-out;\n\n align-items: flex-start;\n color: var(--pine-color-text);\n display: inline-flex;\n flex-flow: row wrap;\n position: relative;\n}\n\n:host(.pds-switch--error) {\n color: var(--pine-color-text-message-danger);\n\n input,\n input:checked,\n input:hover:not(:disabled):not(:checked) {\n background-color: var(--pine-color-danger);\n }\n\n input:focus-visible:not(:disabled):not(:checked) {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n\n label {\n color: var(--color-text-error);\n }\n}\n\n// switch container\ninput {\n appearance: none;\n background: var(--pine-color-neutral);\n border: 0;\n border-radius: var(--pine-dimension-sm);\n cursor: pointer;\n display: inline-block;\n flex-shrink: 0;\n height: var(--pine-dimension-250);\n margin: 0;\n padding: 0;\n position: relative;\n transition: var(--number-transition-timing);\n transition-property: background, border, color;\n width: var(--pine-dimension-450);\n\n // switch toggle\n &::after {\n background: var(--pine-color-secondary);\n border-radius: var(--pine-border-radius-full);\n box-shadow: var(--pine-box-shadow);\n content: \"\";\n display: block;\n height: var(--sizing-input-toggle-size);\n inset-block-start: 50%;\n inset-inline-start: 50%;\n position: absolute;\n transform: translate3d(-100%, -50%, 0);\n transition: transform var(--number-transition-timing);\n width: var(--sizing-input-toggle-size);\n }\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-150);\n\n .pds-switch--error & {\n color: inherit;\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\n// Help and error messages\n.pds-switch__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--pine-dimension-xs);\n margin-inline-start: var(--spacing-message-inline);\n width: 100%;\n\n + .pds-switch__message {\n margin-block-start: var(--spacing-message-inline);\n }\n}\n\n.pds-switch__message--error {\n color: inherit;\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n// Disabled state\ninput:disabled {\n background-color: var(--pine-color-neutral-disabled);\n cursor: not-allowed;\n\n ~ label {\n cursor: initial;\n }\n\n &:hover::after {\n background-color: var(--pine-color-background-container-disabled);\n }\n\n .pds-switch__message {\n color: initial;\n }\n}\n\n// Hover state\ninput:hover:not(:disabled) {\n background-color: var(--pine-color-neutral-hover);\n}\n\n // Focus state\ninput:focus-visible:not(:disabled) {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n}\n\n// 'Checked' state\n// switch toggle\ninput:checked::after {\n transform: translate3d(0, -50%, 0);\n}\n\n// switch container\ninput:checked:not(:disabled) {\n background-color: currentColor;\n color: var(--pine-color-accent);\n\n &:hover {\n border-color: currentColor;\n color: var(--pine-color-accent-hover);\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n tag: 'pds-switch',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n shadow: true,\n})\nexport class PdsSwitch {\n private inheritedAttributes: Attributes = {};\n\n @Element() el: HTMLPdsSwitchElement;\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 Determines the input 'checked' state.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Determines the input 'disabled' state, preventing user interaction.\n /\n @Prop() disabled? = false;\n\n /\n Displays message text describing an invalid state.\n /\n @Prop() errorMessage?: string;\n\n /\n Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n Displays help text for additional description of an input.\n /\n @Prop() helperMessage: string;\n\n /\n Determines the input 'invalid' state, signifying an error is present.\n /\n @Prop() invalid? = false;\n\n /\n Displays text to describe the input.\n /\n @Prop() label!: string;\n\n /\n Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n /\n @Prop() name: string;\n\n /\n Determines the 'required' state of the input.\n /\n @Prop() required? = false;\n\n /\n Provides input with a string submitted in form data.\n /\n @Prop() value: string;\n\n /\n Emits an event on input change.\n */\n @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n private onSwitchUpdate = (e: Event) => {\n if (this.disabled) return;\n\n const input = e.target as HTMLInputElement;\n this.checked = input.checked;\n this.pdsSwitchChange.emit(e as InputEvent);\n };\n\n private switchClassNames = () => {\n let switchClasses = `pds-switch`;\n\n if (this.invalid === true) {\n switchClasses += \" pds-switch--error\";\n }\n if (this.helperMessage !== undefined) {\n switchClasses += \" pds-switch--message\";\n }\n return switchClasses;\n };\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n render() {\n return (\n <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n <label htmlFor={this.componentId}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage \|\| this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n checked={this.checked}\n class=\"pds-switch__input\"\n disabled={this.disabled}\n id={this.componentId}\n name={this.name ? this.name : this.componentId}\n onChange={this.onSwitchUpdate}\n required={this.required}\n type=\"checkbox\"\n value={this.value}\n {...this.inheritedAttributes}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={`pds-switch__message`}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-switch__message pds-switch__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"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pds-switch.entry.js","sources":["src/global/styles/utils/label.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.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",":host {\n// Need discussions\n --sizing-input-toggle-size: calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));\n --pine-dimension-025: 2px;\n --spacing-message-inline: calc(var(--pine-dimension-450) + var(--pine-dimension-150));\n --number-transition-timing: 0.15s ease-out;\n\n align-items: flex-start;\n color: var(--pine-color-text);\n display: inline-flex;\n flex-flow: row wrap;\n position: relative;\n}\n\n:host(.pds-switch--error) {\n color: var(--pine-color-text-message-danger);\n\n input,\n input:checked,\n input:hover:not(:disabled):not(:checked) {\n background-color: var(--pine-color-danger);\n }\n\n input:focus-visible:not(:disabled):not(:checked) {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n\n label {\n color: var(--color-text-error);\n }\n}\n\n// switch container\ninput {\n appearance: none;\n background: var(--pine-color-neutral);\n border: 0;\n border-radius: var(--pine-dimension-sm);\n cursor: pointer;\n display: inline-block;\n flex-shrink: 0;\n height: var(--pine-dimension-250);\n margin: 0;\n padding: 0;\n position: relative;\n transition: var(--number-transition-timing);\n transition-property: background, border, color;\n width: var(--pine-dimension-450);\n\n // switch toggle\n &::after {\n background: var(--pine-color-secondary);\n border-radius: var(--pine-border-radius-full);\n box-shadow: var(--pine-box-shadow);\n content: \"\";\n display: block;\n height: var(--sizing-input-toggle-size);\n inset-block-start: 50%;\n inset-inline-start: 50%;\n position: absolute;\n transform: translate3d(-100%, -50%, 0);\n transition: transform var(--number-transition-timing);\n width: var(--sizing-input-toggle-size);\n }\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-150);\n\n .pds-switch--error & {\n color: inherit;\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\n// Help and error messages\n.pds-switch__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--pine-dimension-xs);\n margin-inline-start: var(--spacing-message-inline);\n width: 100%;\n\n + .pds-switch__message {\n margin-block-start: var(--spacing-message-inline);\n }\n}\n\n.pds-switch__message--error {\n color: inherit;\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n// Disabled state\ninput:disabled {\n background-color: var(--pine-color-neutral-disabled);\n cursor: not-allowed;\n\n ~ label {\n cursor: initial;\n }\n\n &:hover::after {\n background-color: var(--pine-color-background-container-disabled);\n }\n\n .pds-switch__message {\n color: initial;\n }\n}\n\n// Hover state\ninput:hover:not(:disabled) {\n background-color: var(--pine-color-neutral-hover);\n}\n\n // Focus state\ninput:focus-visible:not(:disabled) {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n}\n\n// 'Checked' state\n// switch toggle\ninput:checked::after {\n transform: translate3d(0, -50%, 0);\n}\n\n// switch container\ninput:checked:not(:disabled) {\n background-color: currentColor;\n color: var(--pine-color-accent);\n\n &:hover {\n border-color: currentColor;\n color: var(--pine-color-accent-hover);\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n tag: 'pds-switch',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsSwitch {\n private inheritedAttributes: Attributes = {};\n private internals?: ElementInternals;\n\n @Element() el: HTMLPdsSwitchElement;\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 Determines the input 'checked' state.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Determines the input 'disabled' state, preventing user interaction.\n /\n @Prop() disabled? = false;\n\n /\n Displays message text describing an invalid state.\n /\n @Prop() errorMessage?: string;\n\n /\n Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n Displays help text for additional description of an input.\n /\n @Prop() helperMessage: string;\n\n /\n Determines the input 'invalid' state, signifying an error is present.\n /\n @Prop() invalid? = false;\n\n /\n Displays text to describe the input.\n /\n @Prop() label!: string;\n\n /\n Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n /\n @Prop() name: string;\n\n /\n Determines the 'required' state of the input.\n /\n @Prop() required? = false;\n\n /\n Provides input with a string submitted in form data.\n /\n @Prop() value: string;\n\n /\n Emits an event on input change.\n */\n @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n private onSwitchUpdate = (e: Event) => {\n if (this.disabled) return;\n\n const input = e.target as HTMLInputElement;\n this.checked = input.checked;\n\n this.updateFormValue();\n\n this.pdsSwitchChange.emit(e as InputEvent);\n };\n\n private switchClassNames = () => {\n let switchClasses = `pds-switch`;\n\n if (this.invalid === true) {\n switchClasses += \" pds-switch--error\";\n }\n if (this.helperMessage !== undefined) {\n switchClasses += \" pds-switch--message\";\n }\n return switchClasses;\n };\n\n connectedCallback() {\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n }\n\n componentDidLoad() {\n this.updateFormValue();\n }\n\n @Watch('checked')\n checkedChanged() {\n this.updateFormValue();\n }\n\n private updateFormValue() {\n if (typeof jest !== 'undefined' \|\| typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n return;\n }\n\n if (this.internals && this.internals.setFormValue) {\n // For switches, only send the value when checked, otherwise send null\n const formValue = this.checked ? (this.value \|\| 'on') : null;\n this.internals.setFormValue(formValue);\n }\n\n if (this.internals && this.internals.setValidity) {\n this.internals.setValidity({});\n }\n }\n\n formStateRestoreCallback(state: string \| FormData \| null) {\n if (state instanceof FormData) {\n // For switches, restore if the value exists in FormData\n const value = this.value \|\| 'on';\n this.checked = state.get(this.name \|\| this.componentId) === value;\n } else if (typeof state === 'string') {\n // Restore from string state\n this.checked = state === (this.value \|\| 'on');\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n render() {\n return (\n <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n <label htmlFor={this.componentId}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage \|\| this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n checked={this.checked}\n class=\"pds-switch__input\"\n disabled={this.disabled}\n id={this.componentId}\n name={this.name ? this.name : this.componentId}\n onChange={this.onSwitchUpdate}\n required={this.required}\n type=\"checkbox\"\n value={this.value}\n {...this.inheritedAttributes}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={`pds-switch__message`}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-switch__message pds-switch__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"],"names":[],"mappings":"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"}

package/dist/esm/pds-tab.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
 const pdsTabCss = "pds-tab{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-tabs--pill pds-tab{-ms-flex:1;flex:1}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--pine-border-width-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--pine-dimension-none);-ms-flex-align:center;align-items:center;color:var(--pine-color-text-secondary);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{color:var(--pine-color-text)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover{color:var(--pine-color-text)}.pds-tab:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tab .pds-tab__content{font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--pine-color-brand);content:\"\";height:3px;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);inset-inline-start:var(--pine-dimension-none);opacity:0;position:absolute}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-secondary)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:1}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--pine-color-secondary-hover)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--pine-color-text-secondary)}.pds-tabs--availability .pds-tab__content{-webkit-padding-after:7px;padding-block-end:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:\"\";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter{--color-background-tab:var(--pine-color-background-container)}.pds-tabs--filter .pds-tab{background-color:var(--color-background-tab);border-radius:50px;color:var(--pine-color-text);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--pine-color-background-container-hover)}.pds-tabs--filter .pds-tab__content{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-tabs--filter .pds-tab__content::after{content:unset}.pds-tabs--pill{--color-background-tab:transparent}.pds-tabs--pill .pds-tab{background-color:var(--color-background-tab);border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-readonly);-ms-flex:1;flex:1;height:34px;-ms-flex-pack:center;justify-content:center}.pds-tabs--pill .pds-tab .pds-tab__content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-padding-after:0;padding-block-end:0}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-white);border-color:var(--pine-color-border);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);color:var(--pine-color-text-active);z-index:1;}.pds-tabs--pill .pds-tab.is-active:focus-visible,.pds-tabs--pill .pds-tab[aria-selected=true]:focus-visible{border-color:var(--color-border-focus);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabs--pill .pds-tab.is-active .pds-tab__content::after,.pds-tabs--pill .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:0}";

package/dist/esm/pds-table-body.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-Uh5ntVcq.js';
+import { r as registerInstance, h, H as Host } from './index-BVCWKPy3.js';
 const pdsTableBodyCss = ":host{border-color:inherit;display:table-row-group;vertical-align:middle}";

package/dist/esm/pds-table-cell.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
 const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);inset-inline-start:var(--pine-dimension-none);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding:var(--pine-dimension-sm);vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);left:0;position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";

package/dist/esm/pds-table-head-cell.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
 import { e as upSmall, d as downSmall } from './index-CzVv99mW.js';
 const pdsTableHeadCellCss = ":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-100);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);line-height:var(--pine-line-height-body);padding:12px;text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);left:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);-webkit-padding-before:2px;padding-block-start:2px;position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--pine-color-text-active)}";

package/dist/esm/pds-table-head.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
 import { c as closest } from './closest-DnUJodVd.js';
 const pdsTableHeadCss = ":host{--border-head-default:var(--pine-border-width-thin) solid var(--pine-color-grey-100);border-color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table-header-group;vertical-align:middle}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:1}:host pds-table-checkbox-cell{-webkit-border-after:var(--border-head-default);border-block-end:var(--border-head-default)}";

package/dist/esm/pds-table-row.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
 import { c as closest } from './closest-DnUJodVd.js';
 const pdsTableRowCss = ":host{--color-background-interactive:var(--pine-color-grey-200);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:1}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}";

package/dist/esm/pds-table.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
 const pdsTableCss = ":host{--color-background-default:var(--pine-color-white);background:var(--color-background-default);border-collapse:separate;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;width:100%}:host(:focus-visible){outline:var(--pine-outline-focus)}:host(.is-responsive){background-attachment:local, local, scroll, scroll;background-image:-webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0)));background-image:linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));background-position:left center, right center, left center, right center;background-repeat:no-repeat;background-size:4px 100%, 4px 100%, 4px 100%, 4px 100%;display:block;margin:0 auto;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow-x:auto;white-space:nowrap}";

package/dist/esm/pds-tabpanel.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
 const pdsTabpanelCss = ":host{display:block}.pds-tabpanel{display:none;margin-top:var(--tabs-dimension-panel-margin-top);padding:var(--tabs-dimension-panel-padding)}.pds-tabpanel:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabpanel.is-active{display:block}";

package/dist/esm/pds-tabs.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
 const pdsTabsCss = ":host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-grey-100);border:var(--pine-border-width-thin) solid var(--pine-color-grey-200);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}";

package/dist/esm/pds-text.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-Uh5ntVcq.js';
-import { s as setColor } from './utils-DkabwBZT.js';
+import { r as registerInstance, h, g as getElement } from './index-BVCWKPy3.js';
+import { s as setColor } from './utils-tJa4KYNO.js';
 const pdsTextCss = ":host{display:inline}:host([decoration=underline-dotted])>*{-webkit-text-decoration-color:var(--pine-color-grey-600);text-decoration-color:var(--pine-color-grey-600);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:12%;text-underline-offset:0.3rem;text-underline-position:under}:host([decoration=strikethrough])>*{text-decoration:line-through}h1{font:var(--pine-typography-heading-1);letter-spacing:var(--pine-letter-spacing-heading-1)}h2{font:var(--pine-typography-heading-2);letter-spacing:var(--pine-letter-spacing-heading-2)}h3{font:var(--pine-typography-heading-3);letter-spacing:var(--pine-letter-spacing-heading-3)}h4{font:var(--pine-typography-heading-4);letter-spacing:var(--pine-letter-spacing-heading-4)}h5{font:var(--pine-typography-heading-5);letter-spacing:var(--pine-letter-spacing-heading-5)}h6{font:var(--pine-typography-heading-6);letter-spacing:var(--pine-letter-spacing-heading-6)}code,em,p,pre,strong{font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing)}code,pre{font-family:monospace;letter-spacing:0;line-height:1}em{font-style:normal}strong{font-weight:bolder}:host([truncate])>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([italic])>*{font-style:italic}.pds-text{color:var(--color, var(--pine-color-text));margin:var(--pine-dimension-none)}.pds-text--size-2xl{font-size:var(--pine-font-size-body-2xl)}.pds-text--size-xl{font-size:var(--pine-font-size-body-xl)}.pds-text--size-lg{font-size:var(--pine-font-size-body-lg)}.pds-text--size-md{font-size:var(--pine-font-size-body-md)}.pds-text--size-sm{font-size:var(--pine-font-size-body-sm)}.pds-text--size-xs{font-size:var(--pine-font-size-body-xs)}.pds-text--size-2xs{font-size:var(--pine-font-size-body-2xs)}.pds-text--size-h1{font-size:var(--pine-font-size-heading-1)}.pds-text--size-h2{font-size:var(--pine-font-size-heading-2)}.pds-text--size-h3{font-size:var(--pine-font-size-heading-3)}.pds-text--size-h4{font-size:var(--pine-font-size-heading-4)}.pds-text--size-h5{font-size:var(--pine-font-size-heading-5)}.pds-text--size-h6{font-size:var(--pine-font-size-heading-6)}.pds-text--weight-extra-light{font-weight:var(--pine-font-weight-extra-light)}.pds-text--weight-light{font-weight:var(--pine-font-weight-light)}.pds-text--weight-regular{font-weight:var(--pine-font-weight-regular)}.pds-text--weight-medium{font-weight:var(--pine-font-weight-medium)}.pds-text--weight-semibold{font-weight:var(--pine-font-weight-semi-bold)}.pds-text--weight-bold{font-weight:var(--pine-font-weight-bold)}.pds-text--gutter-2xl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-text--gutter-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-text--gutter-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-text--gutter-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-text--gutter-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-text--gutter-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-text--gutter-2xs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-text--align-start{text-align:start}.pds-text--align-center{text-align:center}.pds-text--align-end{text-align:end}.pds-text--align-justify{text-align:justify}";

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
 import { i as isRequired, a as assignDescription, m as messageId } from './form-DTL_39D_.js';
-import { d as debounceEvent } from './utils-DkabwBZT.js';
+import { d as debounceEvent } from './utils-tJa4KYNO.js';
 import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes-C0M1gTKv.js';
 import { f as danger } from './index-CzVv99mW.js';
@@ -8,7 +8,7 @@ const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{c
 const pdsInputTokensCss = ":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";
-const pdsTextareaCss = ":host{display:inline}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-textarea__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-textarea__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-textarea__error-message,.pds-textarea__helper-message{font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-textarea__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}";
+const pdsTextareaCss = ":host{display:inline}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-textarea__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.pds-textarea__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}.pds-textarea__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-textarea__error-message,.pds-textarea__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs)}.pds-textarea__error-message{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}";
 const PdsTextarea = class {
     constructor(hostRef) {
@@ -96,6 +96,8 @@ const PdsTextarea = class {
         if (nativeTextarea && nativeTextarea.value !== value) {
             nativeTextarea.value = value;
         }
+        // Update form value for Form Associated Custom Elements API
+        this.updateFormValue();
     }
     /**
      * Emits an `pdsInput` event.
@@ -128,6 +130,10 @@ const PdsTextarea = class {
     }
     connectedCallback() {
         this.debounceChanged();
+        // Initialize ElementInternals for form association
+        if (this.el.attachInternals) {
+            this.internals = this.el.attachInternals();
+        }
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el));
@@ -135,6 +141,8 @@ const PdsTextarea = class {
     }
     componentDidLoad() {
         this.originalPdsInput = this.pdsInput;
+        // Set initial form value
+        this.updateFormValue();
     }
     renderAction() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
@@ -143,13 +151,55 @@ const PdsTextarea = class {
         }
         return null;
     }
+    /**
+     * Updates the form value using ElementInternals API
+     */
+    updateFormValue() {
+        if (this.internals && this.internals.setFormValue) {
+            const value = this.getValue();
+            this.internals.setFormValue(value || null);
+            // Set validity based on native textarea validation
+            if (this.nativeTextarea && this.internals && this.internals.setValidity) {
+                this.internals.setValidity(this.nativeTextarea.validity, this.nativeTextarea.validationMessage, this.nativeTextarea);
+            }
+        }
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is reset
+     */
+    formResetCallback() {
+        this.value = '';
+        this.updateFormValue();
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    /**
+     * Form Associated Custom Elements API: Called to restore form state
+     */
+    formStateRestoreCallback(state) {
+        if (typeof state === 'string') {
+            this.value = state;
+        }
+        else if (state instanceof FormData && this.name) {
+            // Extract value from FormData using the textarea's name
+            const value = state.get(this.name);
+            if (typeof value === 'string') {
+                this.value = value;
+            }
+        }
+    }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: 'fa16663adc15f59b07b1d9b6f0ce4ae7d4664967', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction ? 'true' : null }, h("div", { key: '5f3406c079111f605a38da627db564ab8f1d2dbb', class: "pds-textarea" }, this.label &&
-            h("div", { key: '00cea607a59cdf31adb21c3b7d92b8dc21560fe8', class: "pds-textarea__label-wrapper" }, h("label", { key: 'e94c947240141495b83329ae9bbc38aefe77cee1', htmlFor: this.componentId }, this.label), this.renderAction()), h("textarea", Object.assign({ key: 'd29a1cc338533a20808060f37af1f784f4556a02', 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, 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.helperMessage &&
-            h("p", { key: 'be35def46c67b7b333be13e0d0ccbf47b4db3e15', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'e4636cb54fea2071896a03e17c965039f58ec790', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'dec05eb0d1b7713c96148725a9278f0f62361ba5', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: 'c16e4a612ae46f9ab893294f513e1564e941ddec', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction ? 'true' : null }, h("div", { key: 'd5acca80be2960ac20a3602c3e887e8d714062d7', class: "pds-textarea" }, this.label &&
+            h("div", { key: '49f3c081172f3d81f38e7ad49e4461b9d31772e7', class: "pds-textarea__label-wrapper" }, h("label", { key: '105f191fb2db52c63d165fbda0e78e507f327c49', htmlFor: this.componentId }, this.label), this.renderAction()), h("textarea", Object.assign({ key: '5cbfbee17d058767f6d9d530dbee936ee8638f99', 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, 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.helperMessage &&
+            h("p", { key: '0cef5379519c3a1d26a86bb2142a58583d5619ad', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: '30a5fc1c6469dfa755db9a9bbb7b858b082700ac', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '51a725db0e4e522a584b673df174c7c97c8fe8e3', icon: danger, size: "small" }), this.errorMessage))));
     }
+    static get formAssociated() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
         "debounce": ["debounceChanged"],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-textarea.entry.js","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;\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.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 margin-block-end: var(--pine-dimension-xs);\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__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 font: var(--pine-typography-body);\n letter-spacing: var(--pine-letter-spacing);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\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 &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--pine-dimension-xs);\n}\n\n.pds-textarea__error-message {\n align-items: center;\n color: var(--pine-color-text-message-danger);\n display: flex;\n gap: var(--pine-dimension-2xs);\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } 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})\nexport class PdsTextarea {\n private nativeTextarea?: HTMLTextAreaElement\n private focusedValue?: string \| null;\n private inheritedAttributes: Attributes = {};\n private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\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-texarea`. 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 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 The value of the textarea.\n /\n @Prop({mutable: true}) value?: string \| null = '';\n\n @State() hasFocus = false;\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\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 this.value = input.value \|\| '';\n }\n this.emitInputChange(ev);\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 }\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 }\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 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 ? 'true' : null}\n >\n <div class=\"pds-textarea\">\n {this.label &&\n <div class=\"pds-textarea__label-wrapper\">\n <label htmlFor={this.componentId}>{this.label}</label>\n {this.renderAction()}\n </div>\n }\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 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.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"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pds-textarea.entry.js","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;\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.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__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 font: var(--pine-typography-body);\n letter-spacing: var(--pine-letter-spacing);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\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 &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n.pds-textarea__error-message,\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-xs);\n}\n\n.pds-textarea__error-message {\n align-items: center;\n color: var(--pine-color-text-message-danger);\n display: flex;\n gap: var(--pine-dimension-2xs);\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } 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\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-texarea`. 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 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 The value of the textarea.\n /\n @Prop({mutable: true}) value?: string \| null = '';\n\n @State() hasFocus = false;\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\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 this.value = input.value \|\| '';\n }\n this.emitInputChange(ev);\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 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\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 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 ? 'true' : null}\n >\n <div class=\"pds-textarea\">\n {this.label &&\n <div class=\"pds-textarea__label-wrapper\">\n <label htmlFor={this.componentId}>{this.label}</label>\n {this.renderAction()}\n </div>\n }\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 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.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"],"names":[],"mappings":"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"}

package/dist/esm/pds-toast.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-Uh5ntVcq.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BVCWKPy3.js';
 const pdsToastCss = ":host{--animation-duration:0.3s;--animation-timing:cubic-bezier(0.4, 0, 0.2, 1);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}";

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Uh5ntVcq.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
 const positionTooltip = ({ elem, elemPlacement, overlay, offset = 8 }) => {
     if (elem === null || overlay === null)