npm - @pine-ds/core - Versions diffs - 3.8.1 → 3.9.0 - Mend

@pine-ds/core 3.8.1 → 3.9.0

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

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

	@@ -1 +1 @@
1	- {"file":"pds-radio.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,qXAAqX;;ACAtY,MAAM,WAAW,GAAG,u4GAAu4G;;MCS94G,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAMmB,QAAA,IAAK,CAAA,KAAA,GAAG,OAAgB;AAIzC;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAOvB;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAYtB;;;AAGC;AACO,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAiBzB;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAahB,QAAA,IAAA,CAAA,iBAAiB,GAAG,CAAC,CAAQ,KAAI;AACvC,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB;;AAGF,YAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B;AAC3C,YAAA,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO;AAEhC,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC;AACrC,SAAC;AA6DF;IA3DS,UAAU,GAAA;QAChB,MAAM,UAAU,GAAG,EAAE;AAErB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;;AAE/B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC;;AAGhC,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG9B,iBAAiB,GAAA;;AAEf,QAAAA,uBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;;IAG/C,MAAM,GAAA;AACJ,QAAA,QACEC,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAA,EAC5BD,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAC9BA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACoBE,sBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,CAAA,EACFF,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,EAAA,EACjD,IAAI,CAAC,KAAK,CACN,CACD,EACP,IAAI,CAAC,aAAa;AACjB,YAAAA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAEG,cAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,EAEP,IAAI,CAAC,YAAY;YAChBH,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAA8C,4CAAA,CAAA,EACrD,EAAE,EAAEG,cAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,EAAA,EAErBH,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAEI,cAAM,EAAE,IAAI,EAAC,OAAO,EAAG,CAAA,EACtC,IAAI,CAAC,YAAY,CACd,CAEH;;;;;;;;","names":["exposeTypeProperty","h","Host","assignDescription","messageId","danger"],"sources":["src/global/styles/utils/label.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.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 --sizing-check-size: 6px;\n --sizing-input-size: var(--pine-dimension-sm);\n --sizing-margin-block-start: 6px;\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--pine-color-border-danger);\n\n &:checked {\n background: var(--pine-color-border-danger);\n\n &:hover {\n background: var(--pine-color-border-danger-hover);\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\ninput {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n flex: none;\n height: var(--sizing-input-size);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--sizing-input-size);\n\n &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n background: var(--pine-color-background-container);\n border-radius: var(--pine-border-radius-full);\n content: \"\";\n display: block;\n height: var(--sizing-check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--sizing-check-size);\n }\n }\n\n &:disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-radio__message {\n color: var(--pine-color-text-message-disabled);\n }\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\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.pds-radio__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--sizing-margin-block-start);\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-radio__message--error {\n display: flex;\n font-size: var(--pine-font-size-body-sm);\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n private readonly _type = 'radio' as const;\n\n @Element() el: HTMLPdsRadioElement;\n\n /*\n Determines whether or not the radio is checked.\n * @defaultValue false\n /\n @Prop() checked = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Determines whether or not the radio 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 Displays helper message text below radio.\n /\n @Prop() helperMessage: string;\n\n /\n Determines whether or not the radio is invalid.\n * @defaultValue false\n /\n @Prop() invalid = false;\n\n /\n String used for label text next to radio.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n String used for radio `name` attribute.\n /\n @Prop() name: string;\n\n /\n Determines whether or not the radio is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value of the radio that is submitted with a form.\n /\n @Prop() value: string;\n\n\n /\n Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n\n return classNames.join(' ');\n }\n\n connectedCallback() {\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <label htmlFor={this.componentId}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-radio__message pds-radio__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"],"version":3}
1	+ {"file":"pds-radio.entry.cjs.js","mappings":"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","names":["exposeTypeProperty","h","assignDescription","messageId","danger","Host"],"sources":["src/global/styles/utils/label.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.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 --sizing-check-size: 6px;\n --sizing-input-size: var(--pine-dimension-sm);\n --sizing-margin-block-start: 6px;\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n position: relative;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--pine-color-border-danger);\n\n &:checked {\n background: var(--pine-color-border-danger);\n\n &:hover {\n background: var(--pine-color-border-danger-hover);\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\n:host(.has-border) {\n align-items: flex-start;\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n column-gap: var(--pine-dimension-xs);\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: var(--pine-dimension-md);\n\n &:hover {\n border: var(--pine-border-hover);\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n }\n\n label {\n color: var(--pine-color-text);\n font-weight: var(--pine-font-weight-semi-bold);\n\n &::after {\n content: \"\";\n cursor: pointer;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n}\n\ninput {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n flex: none;\n height: var(--sizing-input-size);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--sizing-input-size);\n\n /* stylelint-disable-next-line selector-no-qualifying-type /\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 &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n background: var(--pine-color-background-container);\n border-radius: var(--pine-border-radius-full);\n content: \"\";\n display: block;\n height: var(--sizing-check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--sizing-check-size);\n }\n }\n\n &:disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-radio__message {\n color: var(--pine-color-text-message-disabled);\n }\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\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.pds-radio__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body);\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-radio__message--error {\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// Image-based radio styles - matches bordered layout\n:host(.has-image) {\n align-items: center;\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n column-gap: var(--pine-dimension-xs);\n display: flex;\n flex: 1;\n padding: var(--pine-dimension-md);\n\n &:hover {\n border: var(--pine-border-hover);\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n }\n\n label {\n color: var(--pine-color-text);\n display: flex;\n font-weight: var(--pine-font-weight-semi-bold);\n gap: var(--pine-dimension-xs);\n\n &::after {\n content: \"\";\n cursor: pointer;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n\n .pds-radio__image-container {\n align-items: center;\n align-self: center;\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n flex: none;\n grid-area: image;\n justify-content: center;\n overflow: hidden;\n position: relative;\n transition: all 0.2s ease;\n\n &:hover {\n border-color: var(--pine-color-border-hover);\n }\n\n .pds-radio__image {\n height: 100%;\n object-fit: cover;\n width: 100%;\n }\n }\n\n .pds-radio__message {\n grid-area: message;\n margin-block-start: 0;\n margin-inline-start: 0;\n }\n\n // Disabled state\n &.is-disabled {\n .pds-radio__image-container {\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n opacity: 0.6;\n\n &:hover {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n label {\n cursor: not-allowed;\n }\n }\n\n // Invalid state\n &.is-invalid {\n .pds-radio__image-container {\n border-color: var(--pine-color-border-danger);\n\n &:hover {\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-border-danger);\n\n .pds-radio__image-container {\n border-color: var(--pine-color-border-danger);\n box-shadow: 0 0 0 2px var(--pine-color-border-danger);\n\n / stylelint-disable-next-line /\n &::after {\n background: var(--pine-color-border-danger);\n }\n\n / stylelint-disable-next-line /\n &:hover {\n border-color: var(--pine-color-border-danger-hover);\n box-shadow: 0 0 0 2px var(--pine-color-border-danger-hover);\n }\n }\n\n &:hover {\n box-shadow: 0 0 0 2px var(--pine-color-border-danger-hover);\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n/\n @slot image - Custom image content to display instead of the default radio input\n * @part image-container - The container for the image\n /\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n private readonly _type = 'radio' as const;\n\n @Element() el: HTMLPdsRadioElement;\n\n @State() private _hasImage = false;\n\n /\n Determines whether or not the radio is checked.\n * @defaultValue false\n /\n @Prop() checked = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Determines whether or not the radio 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 Displays helper message text below radio.\n /\n @Prop() helperMessage: string;\n\n /\n Adds a border around the radio component for better visual separation.\n * @defaultValue false\n /\n @Prop() hasBorder = false;\n\n /\n Determines whether or not the radio is invalid.\n * @defaultValue false\n /\n @Prop() invalid = false;\n\n /\n String used for label text next to radio.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n String used for radio `name` attribute.\n /\n @Prop() name: string;\n\n /\n Determines whether or not the radio is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value of the radio that is submitted with a form.\n /\n @Prop() value: string;\n\n\n /\n Emits a boolean indicating whether the radio is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private hasImageSlot(): boolean {\n const imageSlot = this.el.querySelector('[slot=\"image\"]');\n return !!imageSlot;\n }\n\n private hasImage(): boolean {\n return this._hasImage;\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n if (this.hasBorder) {\n classNames.push('has-border');\n }\n if (this.hasImage()) {\n classNames.push('has-image');\n }\n\n return classNames.join(' ');\n }\n\n componentWillLoad() {\n this._hasImage = this.hasImageSlot();\n }\n\n connectedCallback() {\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n render() {\n const renderLabelAndMessages = () => [\n <label htmlFor={this.componentId} key={`${this.componentId}-label`}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n class={this.hasImage() ? 'visually-hidden' : ''}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>,\n this.helperMessage && (\n <div\n key={`${this.componentId}-helper`}\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n ),\n this.errorMessage && (\n <div\n key={`${this.componentId}-error`}\n class={`pds-radio__message pds-radio__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 ];\n\n return (\n <Host class={this.classNames()}>\n {this.hasImage() && (\n <div class=\"pds-radio__image-container\" part=\"image-container\">\n <slot name=\"image\" onSlotchange={() => (this._hasImage = this.hasImageSlot())} />\n </div>\n )}\n {this.hasImage() ? (\n <div class=\"pds-radio__content-wrapper\">\n {renderLabelAndMessages()}\n </div>\n ) : (\n renderLabelAndMessages()\n )}\n </Host>\n );\n }\n}\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-radio.entry.cjs.js","sources":["src/global/styles/utils/label.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.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 --sizing-check-size: 6px;\n --sizing-input-size: var(--pine-dimension-sm);\n --sizing-margin-block-start: 6px;\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--pine-color-border-danger);\n\n &:checked {\n background: var(--pine-color-border-danger);\n\n &:hover {\n background: var(--pine-color-border-danger-hover);\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\ninput {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n flex: none;\n height: var(--sizing-input-size);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--sizing-input-size);\n\n &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n background: var(--pine-color-background-container);\n border-radius: var(--pine-border-radius-full);\n content: \"\";\n display: block;\n height: var(--sizing-check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--sizing-check-size);\n }\n }\n\n &:disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-radio__message {\n color: var(--pine-color-text-message-disabled);\n }\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\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.pds-radio__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--sizing-margin-block-start);\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-radio__message--error {\n display: flex;\n font-size: var(--pine-font-size-body-sm);\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n private readonly _type = 'radio' as const;\n\n @Element() el: HTMLPdsRadioElement;\n\n /*\n Determines whether or not the radio is checked.\n * @defaultValue false\n /\n @Prop() checked = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Determines whether or not the radio 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 Displays helper message text below radio.\n /\n @Prop() helperMessage: string;\n\n /\n Determines whether or not the radio is invalid.\n * @defaultValue false\n /\n @Prop() invalid = false;\n\n /\n String used for label text next to radio.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n String used for radio `name` attribute.\n /\n @Prop() name: string;\n\n /\n Determines whether or not the radio is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value of the radio that is submitted with a form.\n /\n @Prop() value: string;\n\n\n /\n Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n\n return classNames.join(' ');\n }\n\n connectedCallback() {\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <label htmlFor={this.componentId}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-radio__message pds-radio__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":["exposeTypeProperty","h","Host","assignDescription","messageId","danger"],"mappings":"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"}
1	+ {"version":3,"file":"pds-radio.entry.cjs.js","sources":["src/global/styles/utils/label.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.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 --sizing-check-size: 6px;\n --sizing-input-size: var(--pine-dimension-sm);\n --sizing-margin-block-start: 6px;\n\n align-items: center;\n display: flex;\n flex-flow: row wrap;\n position: relative;\n}\n\n:host(.is-invalid) {\n input {\n border-color: var(--pine-color-border-danger);\n\n &:checked {\n background: var(--pine-color-border-danger);\n\n &:hover {\n background: var(--pine-color-border-danger-hover);\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n}\n\n:host(.has-border) {\n align-items: flex-start;\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n column-gap: var(--pine-dimension-xs);\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: var(--pine-dimension-md);\n\n &:hover {\n border: var(--pine-border-hover);\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n }\n\n label {\n color: var(--pine-color-text);\n font-weight: var(--pine-font-weight-semi-bold);\n\n &::after {\n content: \"\";\n cursor: pointer;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n}\n\ninput {\n appearance: none;\n background: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n flex: none;\n height: var(--sizing-input-size);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--sizing-input-size);\n\n /* stylelint-disable-next-line selector-no-qualifying-type /\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 &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n background: var(--pine-color-background-container);\n border-radius: var(--pine-border-radius-full);\n content: \"\";\n display: block;\n height: var(--sizing-check-size);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--sizing-check-size);\n }\n }\n\n &:disabled {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-radio__message {\n color: var(--pine-color-text-message-disabled);\n }\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-xs);\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.pds-radio__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body);\n margin-inline-start: var(--pine-dimension-md);\n width: 100%;\n}\n\n.pds-radio__message--error {\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// Image-based radio styles - matches bordered layout\n:host(.has-image) {\n align-items: center;\n border: var(--pine-border);\n border-radius: var(--pine-dimension-125);\n column-gap: var(--pine-dimension-xs);\n display: flex;\n flex: 1;\n padding: var(--pine-dimension-md);\n\n &:hover {\n border: var(--pine-border-hover);\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-primary-hover);\n }\n\n label {\n color: var(--pine-color-text);\n display: flex;\n font-weight: var(--pine-font-weight-semi-bold);\n gap: var(--pine-dimension-xs);\n\n &::after {\n content: \"\";\n cursor: pointer;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n }\n\n .pds-radio__image-container {\n align-items: center;\n align-self: center;\n border: var(--pine-border);\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n flex: none;\n grid-area: image;\n justify-content: center;\n overflow: hidden;\n position: relative;\n transition: all 0.2s ease;\n\n &:hover {\n border-color: var(--pine-color-border-hover);\n }\n\n .pds-radio__image {\n height: 100%;\n object-fit: cover;\n width: 100%;\n }\n }\n\n .pds-radio__message {\n grid-area: message;\n margin-block-start: 0;\n margin-inline-start: 0;\n }\n\n // Disabled state\n &.is-disabled {\n .pds-radio__image-container {\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n opacity: 0.6;\n\n &:hover {\n border-color: var(--pine-color-border-disabled);\n }\n }\n\n label {\n cursor: not-allowed;\n }\n }\n\n // Invalid state\n &.is-invalid {\n .pds-radio__image-container {\n border-color: var(--pine-color-border-danger);\n\n &:hover {\n border-color: var(--pine-color-border-danger-hover);\n }\n }\n\n &:has(input:checked) {\n box-shadow: 0 0 0 2px var(--pine-color-border-danger);\n\n .pds-radio__image-container {\n border-color: var(--pine-color-border-danger);\n box-shadow: 0 0 0 2px var(--pine-color-border-danger);\n\n / stylelint-disable-next-line /\n &::after {\n background: var(--pine-color-border-danger);\n }\n\n / stylelint-disable-next-line /\n &:hover {\n border-color: var(--pine-color-border-danger-hover);\n box-shadow: 0 0 0 2px var(--pine-color-border-danger-hover);\n }\n }\n\n &:hover {\n box-shadow: 0 0 0 2px var(--pine-color-border-danger-hover);\n }\n }\n\n label,\n .pds-radio__message--error {\n color: var(--pine-color-text-message-danger);\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n/\n @slot image - Custom image content to display instead of the default radio input\n * @part image-container - The container for the image\n /\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n private readonly _type = 'radio' as const;\n\n @Element() el: HTMLPdsRadioElement;\n\n @State() private _hasImage = false;\n\n /\n Determines whether or not the radio is checked.\n * @defaultValue false\n /\n @Prop() checked = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Determines whether or not the radio 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 Displays helper message text below radio.\n /\n @Prop() helperMessage: string;\n\n /\n Adds a border around the radio component for better visual separation.\n * @defaultValue false\n /\n @Prop() hasBorder = false;\n\n /\n Determines whether or not the radio is invalid.\n * @defaultValue false\n /\n @Prop() invalid = false;\n\n /\n String used for label text next to radio.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n String used for radio `name` attribute.\n /\n @Prop() name: string;\n\n /\n Determines whether or not the radio is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value of the radio that is submitted with a form.\n /\n @Prop() value: string;\n\n\n /\n Emits a boolean indicating whether the radio is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private hasImageSlot(): boolean {\n const imageSlot = this.el.querySelector('[slot=\"image\"]');\n return !!imageSlot;\n }\n\n private hasImage(): boolean {\n return this._hasImage;\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n if (this.hasBorder) {\n classNames.push('has-border');\n }\n if (this.hasImage()) {\n classNames.push('has-image');\n }\n\n return classNames.join(' ');\n }\n\n componentWillLoad() {\n this._hasImage = this.hasImageSlot();\n }\n\n connectedCallback() {\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n render() {\n const renderLabelAndMessages = () => [\n <label htmlFor={this.componentId} key={`${this.componentId}-label`}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n class={this.hasImage() ? 'visually-hidden' : ''}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>,\n this.helperMessage && (\n <div\n key={`${this.componentId}-helper`}\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n ),\n this.errorMessage && (\n <div\n key={`${this.componentId}-error`}\n class={`pds-radio__message pds-radio__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 ];\n\n return (\n <Host class={this.classNames()}>\n {this.hasImage() && (\n <div class=\"pds-radio__image-container\" part=\"image-container\">\n <slot name=\"image\" onSlotchange={() => (this._hasImage = this.hasImageSlot())} />\n </div>\n )}\n {this.hasImage() ? (\n <div class=\"pds-radio__content-wrapper\">\n {renderLabelAndMessages()}\n </div>\n ) : (\n renderLabelAndMessages()\n )}\n </Host>\n );\n }\n}\n"],"names":["exposeTypeProperty","h","assignDescription","messageId","danger","Host"],"mappings":"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"}

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

@@ -24,6 +24,24 @@ const PdsRow = class {
             lg: '2.25rem',
             xl: '3rem',
             xxl: '4rem',
+            '025': 'var(--pine-dimension-025)',
+            '050': 'var(--pine-dimension-050)',
+            '100': 'var(--pine-dimension-100)',
+            '125': 'var(--pine-dimension-125)',
+            '150': 'var(--pine-dimension-150)',
+            '200': 'var(--pine-dimension-200)',
+            '250': 'var(--pine-dimension-250)',
+            '300': 'var(--pine-dimension-300)',
+            '350': 'var(--pine-dimension-350)',
+            '400': 'var(--pine-dimension-400)',
+            '450': 'var(--pine-dimension-450)',
+            '500': 'var(--pine-dimension-500)',
+            '550': 'var(--pine-dimension-550)',
+            '600': 'var(--pine-dimension-600)',
+            '650': 'var(--pine-dimension-650)',
+            '700': 'var(--pine-dimension-700)',
+            '750': 'var(--pine-dimension-750)',
+            '800': 'var(--pine-dimension-800)'
         };
     }
     render() {
@@ -43,7 +61,7 @@ const PdsRow = class {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return index.h(index.Host, { key: 'd9fd2087c959b16ca168ee2b011a3d4bd466c113', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return index.h(index.Host, { key: '8e3f5095c33ca22b26dc2cd328ec84663e3bc46b', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
 };
 PdsRow.style = pdsRowCss;

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

	@@ -1 +1 @@
1	- {"file":"pds-row.entry.cjs.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,wnFAAwnF;;MCQ7nF,MAAM,GAAA,MAAA;AAJnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;AAiCvB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;QAEf,IAAA,CAAA,SAAS,~~GAA2C~~;~~AAC1D~~,YAAA,IAAI,EAAE,GAAG;AACT,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,EAAE,EAAE,OAAO;AACX,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,QAAQ;AACZ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,GAAG,EAAE,MAAM;~~SACZ~~;AA4BF;IA1BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;MACjB,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,EAAE;MAC1G,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,EAAE;MACpC,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,oBAAA,EAAuB,IAAI,CAAC,cAAc,CAAE,CAAA,GAAG,EAAE;MAC1H,IAAI,CAAC,MAAM,GAAG,kBAAkB,GAAG,EAAE;GACxC;QAEC,MAAM,eAAe,GAChB,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAC,IAAI,CAAC,MAAM,IAAI;AACjB,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACxG,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACzG,SAAA,EACE,GAAC,IAAI,CAAC,WAAW,IAAI;AACtB,YAAA,aAAa,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE;AACxH,SAAA,EACE,GAAC,IAAI,CAAC,YAAY,IAAI;AACvB,YAAA,aAAa,EAAE,IAAI,CAAC,YAAY,KAAK,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE;AAC3H,SAAA,EACE,GAAC,IAAI,CAAC,SAAS,IAAI;YACpB,YAAY,EAAE,IAAI,CAAC,SAAS;AAC7B,SAAA,EACF;QAED,OAAOA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAW,QAAA,EAAA,UAAU,EAAE,EAAE,KAAK,EAAE,eAAe,GAAS;;;;;;;","names":["h","Host"],"sources":["src/components/pds-row/pds-row.scss?tag=pds-row","src/components/pds-row/pds-row.tsx"],"sourcesContent":[":host {\n --row-gap-y: var(--pine-dimension-125);\n --row-gap-x: var(--pine-dimension-125);\n\n display: block;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -0.5);\n margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -1);\n margin-inline-start: calc(var(--row-gap-x) * -1);\n\n @layer layout {\n > * {\n padding-block-end: calc(var(--row-gap-y));\n padding-block-start: calc(var(--row-gap-y));\n padding-inline-end: calc(var(--row-gap-x));\n padding-inline-start: calc(var(--row-gap-x));\n }\n }\n}\n\n.pds-row--no-wrap {\n flex-wrap: nowrap;\n}\n\n.pds-row--border {\n border: var(--pine-border);\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { ~~BoxTShirtSizeType~~ } from '../../utils/types';\n\n@Component({\n tag: 'pds-row',\n styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n /*\n Defines the vertical alignment of the row items.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the row will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the spacing between the row items.\n /\n @Prop() colGap?: ~~BoxTShirtSizeType~~ \| null;\n\n /\n Defines the spacing between the row items vertically.\n /\n @Prop() colGapBlock?: ~~BoxTShirtSizeType~~ \| null;\n\n /\n Defines the spacing between the row items horizontally.\n /\n @Prop() colGapInline?: ~~BoxTShirtSizeType~~ \| null;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Defines the horizontal alignment of the row items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n If `true`, the row items will not wrap to the next line if horizontal space is not available.\n */\n @Prop() noWrap? = false;\n\n private colGapMap: { [key in ~~BoxTShirtSizeType~~]: string } = {\n none: '0',\n xxs: '.25rem',\n xs: '.5rem',\n sm: '1rem',\n md: '1.5rem',\n lg: '2.25rem',\n xl: '3rem',\n xxl: '4rem',\n };\n\n render() {\n const rowClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.border ? 'pds-row--border' : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.noWrap ? 'pds-row--no-wrap' : ''}\n `;\n\n const rowInlineStyles = {\n ...(this.colGap && {\n '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n }),\n ...(this.colGapBlock && {\n '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',\n }),\n ...(this.colGapInline && {\n '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',\n }),\n ...(this.minHeight && {\n 'min-height': this.minHeight,\n }),\n };\n\n return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n }\n}\n"],"version":3}
1	+ {"file":"pds-row.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/pds-row/pds-row.scss?tag=pds-row","src/components/pds-row/pds-row.tsx"],"sourcesContent":[":host {\n --row-gap-y: var(--pine-dimension-125);\n --row-gap-x: var(--pine-dimension-125);\n\n display: block;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -0.5);\n margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -1);\n margin-inline-start: calc(var(--row-gap-x) * -1);\n\n @layer layout {\n > * {\n padding-block-end: calc(var(--row-gap-y));\n padding-block-start: calc(var(--row-gap-y));\n padding-inline-end: calc(var(--row-gap-x));\n padding-inline-start: calc(var(--row-gap-x));\n }\n }\n}\n\n.pds-row--no-wrap {\n flex-wrap: nowrap;\n}\n\n.pds-row--border {\n border: var(--pine-border);\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { BoxSpacingType } from '../../utils/types';\n\n@Component({\n tag: 'pds-row',\n styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n /*\n Defines the vertical alignment of the row items.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the row will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the spacing between the row items.\n /\n @Prop() colGap?: BoxSpacingType \| null;\n\n /\n Defines the spacing between the row items vertically.\n /\n @Prop() colGapBlock?: BoxSpacingType \| null;\n\n /\n Defines the spacing between the row items horizontally.\n /\n @Prop() colGapInline?: BoxSpacingType \| null;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Defines the horizontal alignment of the row items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n If `true`, the row items will not wrap to the next line if horizontal space is not available.\n */\n @Prop() noWrap? = false;\n\n private colGapMap: { [key in BoxSpacingType]: string } = {\n none: '0',\n xxs: '.25rem',\n xs: '.5rem',\n sm: '1rem',\n md: '1.5rem',\n lg: '2.25rem',\n xl: '3rem',\n xxl: '4rem',\n '025': 'var(--pine-dimension-025)',\n '050': 'var(--pine-dimension-050)',\n '100': 'var(--pine-dimension-100)',\n '125': 'var(--pine-dimension-125)',\n '150': 'var(--pine-dimension-150)',\n '200': 'var(--pine-dimension-200)',\n '250': 'var(--pine-dimension-250)',\n '300': 'var(--pine-dimension-300)',\n '350': 'var(--pine-dimension-350)',\n '400': 'var(--pine-dimension-400)',\n '450': 'var(--pine-dimension-450)',\n '500': 'var(--pine-dimension-500)',\n '550': 'var(--pine-dimension-550)',\n '600': 'var(--pine-dimension-600)',\n '650': 'var(--pine-dimension-650)',\n '700': 'var(--pine-dimension-700)',\n '750': 'var(--pine-dimension-750)',\n '800': 'var(--pine-dimension-800)'\n };\n\n render() {\n const rowClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.border ? 'pds-row--border' : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.noWrap ? 'pds-row--no-wrap' : ''}\n `;\n\n const rowInlineStyles = {\n ...(this.colGap && {\n '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n }),\n ...(this.colGapBlock && {\n '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',\n }),\n ...(this.colGapInline && {\n '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',\n }),\n ...(this.minHeight && {\n 'min-height': this.minHeight,\n }),\n };\n\n return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n }\n}\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-row.entry.cjs.js","sources":["src/components/pds-row/pds-row.scss?tag=pds-row","src/components/pds-row/pds-row.tsx"],"sourcesContent":[":host {\n --row-gap-y: var(--pine-dimension-125);\n --row-gap-x: var(--pine-dimension-125);\n\n display: block;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -0.5);\n margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -1);\n margin-inline-start: calc(var(--row-gap-x) * -1);\n\n @layer layout {\n > * {\n padding-block-end: calc(var(--row-gap-y));\n padding-block-start: calc(var(--row-gap-y));\n padding-inline-end: calc(var(--row-gap-x));\n padding-inline-start: calc(var(--row-gap-x));\n }\n }\n}\n\n.pds-row--no-wrap {\n flex-wrap: nowrap;\n}\n\n.pds-row--border {\n border: var(--pine-border);\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { ~~BoxTShirtSizeType~~ } from '../../utils/types';\n\n@Component({\n tag: 'pds-row',\n styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n /*\n Defines the vertical alignment of the row items.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the row will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the spacing between the row items.\n /\n @Prop() colGap?: ~~BoxTShirtSizeType~~ \| null;\n\n /\n Defines the spacing between the row items vertically.\n /\n @Prop() colGapBlock?: ~~BoxTShirtSizeType~~ \| null;\n\n /\n Defines the spacing between the row items horizontally.\n /\n @Prop() colGapInline?: ~~BoxTShirtSizeType~~ \| null;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Defines the horizontal alignment of the row items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n If `true`, the row items will not wrap to the next line if horizontal space is not available.\n */\n @Prop() noWrap? = false;\n\n private colGapMap: { [key in ~~BoxTShirtSizeType~~]: string } = {\n none: '0',\n xxs: '.25rem',\n xs: '.5rem',\n sm: '1rem',\n md: '1.5rem',\n lg: '2.25rem',\n xl: '3rem',\n xxl: '4rem',\n };\n\n render() {\n const rowClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.border ? 'pds-row--border' : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.noWrap ? 'pds-row--no-wrap' : ''}\n `;\n\n const rowInlineStyles = {\n ...(this.colGap && {\n '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n }),\n ...(this.colGapBlock && {\n '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',\n }),\n ...(this.colGapInline && {\n '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',\n }),\n ...(this.minHeight && {\n 'min-height': this.minHeight,\n }),\n };\n\n return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,wnFAAwnF;;MCQ7nF,MAAM,GAAA,MAAA;AAJnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;AAiCvB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAI,KAAK;QAEf,IAAA,CAAA,SAAS,~~GAA2C~~;~~AAC1D~~,YAAA,IAAI,EAAE,GAAG;AACT,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,EAAE,EAAE,OAAO;AACX,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,QAAQ;AACZ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,GAAG,EAAE,MAAM;~~SACZ~~;AA4BF;IA1BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;MACjB,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,EAAE;MAC1G,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,EAAE;MACpC,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,oBAAA,EAAuB,IAAI,CAAC,cAAc,CAAE,CAAA,GAAG,EAAE;MAC1H,IAAI,CAAC,MAAM,GAAG,kBAAkB,GAAG,EAAE;GACxC;QAEC,MAAM,eAAe,GAChB,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAC,IAAI,CAAC,MAAM,IAAI;AACjB,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACxG,YAAA,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;AACzG,SAAA,EACE,GAAC,IAAI,CAAC,WAAW,IAAI;AACtB,YAAA,aAAa,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE;AACxH,SAAA,EACE,GAAC,IAAI,CAAC,YAAY,IAAI;AACvB,YAAA,aAAa,EAAE,IAAI,CAAC,YAAY,KAAK,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE;AAC3H,SAAA,EACE,GAAC,IAAI,CAAC,SAAS,IAAI;YACpB,YAAY,EAAE,IAAI,CAAC,SAAS;AAC7B,SAAA,EACF;QAED,OAAOA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAW,QAAA,EAAA,UAAU,EAAE,EAAE,KAAK,EAAE,eAAe,GAAS;;;;;;;"}
1	+ {"version":3,"file":"pds-row.entry.cjs.js","sources":["src/components/pds-row/pds-row.scss?tag=pds-row","src/components/pds-row/pds-row.tsx"],"sourcesContent":[":host {\n --row-gap-y: var(--pine-dimension-125);\n --row-gap-x: var(--pine-dimension-125);\n\n display: block;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -0.5);\n margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n display: flex;\n flex-grow: 1;\n flex-wrap: wrap;\n margin-block-end: calc(var(--row-gap-y) * -1);\n margin-block-start: calc(var(--row-gap-y) * -1);\n margin-inline-end: calc(var(--row-gap-x) * -1);\n margin-inline-start: calc(var(--row-gap-x) * -1);\n\n @layer layout {\n > * {\n padding-block-end: calc(var(--row-gap-y));\n padding-block-start: calc(var(--row-gap-y));\n padding-inline-end: calc(var(--row-gap-x));\n padding-inline-start: calc(var(--row-gap-x));\n }\n }\n}\n\n.pds-row--no-wrap {\n flex-wrap: nowrap;\n}\n\n.pds-row--border {\n border: var(--pine-border);\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { BoxSpacingType } from '../../utils/types';\n\n@Component({\n tag: 'pds-row',\n styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n /*\n Defines the vertical alignment of the row items.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the row will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the spacing between the row items.\n /\n @Prop() colGap?: BoxSpacingType \| null;\n\n /\n Defines the spacing between the row items vertically.\n /\n @Prop() colGapBlock?: BoxSpacingType \| null;\n\n /\n Defines the spacing between the row items horizontally.\n /\n @Prop() colGapInline?: BoxSpacingType \| null;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Defines the horizontal alignment of the row items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n If `true`, the row items will not wrap to the next line if horizontal space is not available.\n */\n @Prop() noWrap? = false;\n\n private colGapMap: { [key in BoxSpacingType]: string } = {\n none: '0',\n xxs: '.25rem',\n xs: '.5rem',\n sm: '1rem',\n md: '1.5rem',\n lg: '2.25rem',\n xl: '3rem',\n xxl: '4rem',\n '025': 'var(--pine-dimension-025)',\n '050': 'var(--pine-dimension-050)',\n '100': 'var(--pine-dimension-100)',\n '125': 'var(--pine-dimension-125)',\n '150': 'var(--pine-dimension-150)',\n '200': 'var(--pine-dimension-200)',\n '250': 'var(--pine-dimension-250)',\n '300': 'var(--pine-dimension-300)',\n '350': 'var(--pine-dimension-350)',\n '400': 'var(--pine-dimension-400)',\n '450': 'var(--pine-dimension-450)',\n '500': 'var(--pine-dimension-500)',\n '550': 'var(--pine-dimension-550)',\n '600': 'var(--pine-dimension-600)',\n '650': 'var(--pine-dimension-650)',\n '700': 'var(--pine-dimension-700)',\n '750': 'var(--pine-dimension-750)',\n '800': 'var(--pine-dimension-800)'\n };\n\n render() {\n const rowClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.border ? 'pds-row--border' : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.noWrap ? 'pds-row--no-wrap' : ''}\n `;\n\n const rowInlineStyles = {\n ...(this.colGap && {\n '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n }),\n ...(this.colGapBlock && {\n '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',\n }),\n ...(this.colGapInline && {\n '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',\n }),\n ...(this.minHeight && {\n 'min-height': this.minHeight,\n }),\n };\n\n return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n }\n}\n"],"names":["h","Host"],"mappings":"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"}

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

@@ -8,7 +8,7 @@ const pdsSelectTokensCss = ":host{--pine-select-color-background-danger:var(--pi
 const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";
-const pdsSelectCss = ":host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:\"label label\" \"field field\" \"message message\";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__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{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-radius:var(--pds-select-border-radius);border-bottom-left-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-bottom-right-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-top-left-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));border-top-right-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__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)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:var(--pine-z-index-raised)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
+const pdsSelectCss = ":host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:\"label label\" \"field field\" \"message message\";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__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{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-radius:var(--pds-select-border-radius);border-bottom-left-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-bottom-right-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-top-left-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));border-top-right-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:hover:not(:disabled){border-color:var(--pine-color-accent-hover)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not(.is-disabled):not(.is-invalid)) .pds-select__select-icon{color:var(--pine-color-text-accent)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__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)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:var(--pine-z-index-raised)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
 const PdsSelect = class {
     constructor(hostRef) {
@@ -219,7 +219,7 @@ const PdsSelect = class {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (index.h(index.Host, { key: '807a2ecdb0734b8c91936ec4c46e4d4f08572ccb', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, index.h("div", { key: 'febbc7cac34855dc9574ba5b1ab1edef4acef664', class: "pds-select" }, !this.hideLabel && (index.h("div", { key: '92d97d395ac108616a67111a8dc25ee554a33c12', class: "pds-select__label-wrapper" }, index.h("label", { key: '42885b3d3d01af615e248655308324ba843dab42', htmlFor: this.componentId }, index.h("span", { key: '24ffeb13dafc9a042c4099442a81d020732f0336', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), index.h("select", { key: '7be3328511bb074844715ed649e22ef6d0d9866a', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), index.h("div", { key: '0febab292f965293e53be574c492619294fcbe26', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, index.h("slot", { key: 'e8022a71a6391c72388a681ee47c8720d751afb8', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && index.h("pds-icon", { key: 'cb196851d9afacd32c81d64922492fda1b937d74', class: "pds-select__select-icon", icon: index$1.enlarge }))));
+        return (index.h(index.Host, { key: 'b3be9584f5fddb4f1a55517f54c1713f99881217', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, index.h("div", { key: '89ea75fbce2c1a0e5b4b744f10bacfd84db73773', class: "pds-select" }, !this.hideLabel && (index.h("div", { key: 'bf1c8c06c96d941d7d93b960de9279df4520f10f', class: "pds-select__label-wrapper" }, index.h("label", { key: 'eb7beaa77f9f2be302e7b14642c6c5153db4cebe', htmlFor: this.componentId }, index.h("span", { key: '47a737210afc1c86431c123aa2449827f0b9755d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), index.h("select", { key: 'f510d59fe20742e210c4fb949d468184bb2f12cc', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), index.h("div", { key: '7653404278cc8446de96e3e1fdbfcf47ea6b8edc', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, index.h("slot", { key: '04626b23972a2d3fe73b09ea8fbe94021e89d98d', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && index.h("pds-icon", { key: '0d97224a202e0a6e7ad36e2b8a027975ff22079d', class: "pds-select__select-icon", icon: index$1.enlarge }))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

	@@ -1 +1 @@
1	- {"file":"pds-select.entry.cjs.js","mappings":"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","names":["exposeTypeProperty","h","messageId","danger","Host","enlarge"],"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: var(--pine-z-index-raised);\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, exposeTypeProperty } 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 private _type: 'select-one' \| 'select-multiple' = 'select-one';\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 select should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n /\n @Prop() hideLabel: boolean;\n\n /\n 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 /*\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 @Watch('multiple')\n /\n Updates the type property when multiple changes to match native select behavior.\n /\n multipleChanged() {\n this.updateType();\n }\n\n private updateType() {\n this._type = this.multiple ? 'select-multiple' : 'select-one';\n }\n\n connectedCallback() {\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentWillLoad() {\n // Set initial type based on multiple prop\n this.updateType();\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"],"version":3}
1	+ {"file":"pds-select.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,wEAAwE;;ACAnG,MAAM,QAAQ,GAAG,oTAAoT;;ACArU,MAAM,YAAY,GAAG,g7JAAg7J;;MCax7J,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAWU,QAAA,IAAK,CAAA,KAAA,GAAqC,YAAY;AAc9D;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA4BxB;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAOxB;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAwFxB;;AAEE;AACM,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,CAAQ,KAAI;AACpC,YAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B;YAE5C,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO;iBACnC,MAAM,CAAC,CAAC,MAAM,MAAO,MAAM,CAAC,QAAQ,CAAC;AACrC,iBAAA,GAAG,CAAC,CAAC,MAAM,MAAO,MAAM,CAAC,KAAK,CAAC,CAAC;YAErC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACvC,gBAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC;;iBACnB;AACH,gBAAA,IAAI,CAAC,KAAK,GAAG,MAAM;;AAGvB,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAe,CAAC;AAC5C,SAAC;AAED;;;;;AAKG;AACK,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,MAAM,CAAoB;AAExE,YAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,EAAE;AAC5B,YAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAgD;AAEhH,YAAA,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AAChC,gBAAA,IAAK,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;oBAClD,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAA4C;AAClF,oBAAA,IAAI,UAAU,CAAC,OAAO,KAAK,QAAQ,IAAK,UAAgC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;AAC5F,wBAAA,UAAgC,CAAC,QAAQ,GAAG,IAAI;;AAEnD,oBAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC;;AAEzC,aAAC,CAAC;YAEF,IAAI,CAAC,oBAAoB,EAAE;AAC7B,SAAC;AA6JF;AA3QC;;;;AAIG;IACH,YAAY,GAAA;QACV,IAAI,CAAC,oBAAoB,EAAE;QAC3B,IAAI,CAAC,eAAe,EAAE;;AAIxB;;AAEG;IACH,eAAe,GAAA;QACb,IAAI,CAAC,UAAU,EAAE;;IAGX,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,iBAAiB,GAAG,YAAY;;IAG/D,iBAAiB,GAAA;;AAEf,QAAA,IAAI,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE;;;AAI5C,QAAAA,uBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;;IAG/C,iBAAiB,GAAA;;QAEf,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,oBAAoB,EAAE;;IAG7B,gBAAgB,GAAA;;QAEd,IAAI,CAAC,eAAe,EAAE;;AAGxB;;;;;;;;;AASG;IACK,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO;;YAGrC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,MAAyB,KAAI;gBACpD,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AAC7B,oBAAA,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;;qBAC9C;oBACL,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;;AAEjD,aAAC,CAAC;;;IAgDE,gBAAgB,GAAA;AACtB,QAAA,OAAO,IAAI,CAAC,aAAa,KACvBC,OAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAEC,cAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,EAC5E,EAAA,IAAI,CAAC,aAAa,CACjB,CACL;;IAGK,eAAe,GAAA;QACrB,OAAO,IAAI,CAAC,YAAY,KACtBD,OAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,2BAA2B,EAAC,EAAE,EAAEC,cAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,EAAA,WAAA,EAAY,WAAW,EAAA,EAClGD,OAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAEE,cAAM,EAAE,IAAI,EAAC,OAAO,EAAY,CAAA,EAC/C,IAAI,CAAC,YAAY,CAChB,CACL;;IAGK,cAAc,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,YAAY;AAAE,YAAA,OAAO,IAAI;QAE1D,QACEF,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC7B,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,eAAe,EAAE,CACnB;;IAIF,UAAU,GAAA;QAChB,MAAM,UAAU,GAAG,EAAE;AAErB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;;AACjD,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC;;AAEnD,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGtB,YAAY,GAAA;AAClB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;QACnE,IAAI,SAAS,EAAE;YACb,QACEA,iBAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC3CA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACvB;;AAGV,QAAA,OAAO,IAAI;;AAGb;;AAEG;IACK,eAAe,GAAA;QACrB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;AACjD,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK;;AAGxB,YAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACxB,gBAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;;AAEpB,oBAAA,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE;oBAC/B,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC;AAC3D,oBAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC;;qBAChC;;AAEL,oBAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;;;iBAE1C;;gBAEL,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,IAAI,IAAI,CAAC;;;AAI5C,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE;gBACjE,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EACtB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAC/B,IAAI,CAAC,QAAQ,CACd;;;;AAKP;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;QACf,IAAI,CAAC,eAAe,EAAE;;AAGxB;;AAEG;AACH,IAAA,oBAAoB,CAAC,QAAiB,EAAA;AACpC,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;;AAG1B;;AAEG;AACH,IAAA,wBAAwB,CAAC,KAA+B,EAAA;AACtD,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;aACb,IAAI,KAAK,YAAY,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;;YAEjD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;AACtC,YAAA,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;;AAErB,gBAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,CAAa;;AAC7D,iBAAA,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;;AAE/D,gBAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC;;;;IAK5B,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;AAEnE,QAAA,QACEA,OAAC,CAAAG,UAAI,EAAgB,EAAA,GAAA,EAAA,0CAAA,EAAA,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAA,YAAA,EAAc,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,IAAI,EAAA,EACpIH,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpB,CAAC,IAAI,CAAC,SAAS,KACdA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAC9BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,EAAA,EACjD,IAAI,CAAC,KAAK,CACN,CACD,EACP,SAAS,IAAI,IAAI,CAAC,YAAY,EAAE,CAC7B,CACP,EACDA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EACc,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,SAAS,EACnD,YAAY,EAAE,IAAI,CAAC,YAAY,IAAI,SAAS,EAC5C,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAuB,CAAC,EAC9C,CAAA,EACVA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAiB,MAAM,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EAAA,EAC3EA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,EACL,IAAI,CAAC,cAAc,EAAE,EACrB,CAAC,IAAI,CAAC,QAAQ,IAAIA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAEI,eAAO,EAAA,CAAI,CAC1E,CACD;;;;;;;;;;;;;","names":["exposeTypeProperty","h","messageId","danger","Host","enlarge"],"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:host([highlight]:not(.is-disabled):not(.is-invalid)) {\n select {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-accent);\n color: var(--pine-color-text-accent);\n\n &:hover:not(:disabled) {\n border-color: var(--pine-color-accent-hover);\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring);\n }\n }\n\n .pds-select__select-icon {\n color: var(--pine-color-text-accent);\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: var(--pine-z-index-raised);\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, exposeTypeProperty } 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 private _type: 'select-one' \| 'select-multiple' = 'select-one';\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 select should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n /\n @Prop() hideLabel: boolean;\n\n /\n 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 Applies highlight styling to the select field.\n /\n @Prop({ reflect: true }) highlight?: boolean;\n\n /\n The value(s) of the selected option(s).\n \n /\n @Prop({ mutable: true }) value?: string \| string[];\n\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 @Watch('multiple')\n /\n Updates the type property when multiple changes to match native select behavior.\n /\n multipleChanged() {\n this.updateType();\n }\n\n private updateType() {\n this._type = this.multiple ? 'select-multiple' : 'select-one';\n }\n\n connectedCallback() {\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentWillLoad() {\n // Set initial type based on multiple prop\n this.updateType();\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"],"version":3}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-select.entry.cjs.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: var(--pine-z-index-raised);\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, exposeTypeProperty } 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 private _type: 'select-one' \| 'select-multiple' = 'select-one';\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 select should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n /\n @Prop() hideLabel: boolean;\n\n /\n 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 /*\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 @Watch('multiple')\n /\n Updates the type property when multiple changes to match native select behavior.\n /\n multipleChanged() {\n this.updateType();\n }\n\n private updateType() {\n this._type = this.multiple ? 'select-multiple' : 'select-one';\n }\n\n connectedCallback() {\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentWillLoad() {\n // Set initial type based on multiple prop\n this.updateType();\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":["exposeTypeProperty","h","messageId","danger","Host","enlarge"],"mappings":"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"}
1	+ {"version":3,"file":"pds-select.entry.cjs.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:host([highlight]:not(.is-disabled):not(.is-invalid)) {\n select {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-accent);\n color: var(--pine-color-text-accent);\n\n &:hover:not(:disabled) {\n border-color: var(--pine-color-accent-hover);\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring);\n }\n }\n\n .pds-select__select-icon {\n color: var(--pine-color-text-accent);\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: var(--pine-z-index-raised);\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, exposeTypeProperty } 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 private _type: 'select-one' \| 'select-multiple' = 'select-one';\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 select should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n /\n @Prop() hideLabel: boolean;\n\n /\n 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 Applies highlight styling to the select field.\n /\n @Prop({ reflect: true }) highlight?: boolean;\n\n /\n The value(s) of the selected option(s).\n \n /\n @Prop({ mutable: true }) value?: string \| string[];\n\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 @Watch('multiple')\n /\n Updates the type property when multiple changes to match native select behavior.\n /\n multipleChanged() {\n this.updateType();\n }\n\n private updateType() {\n this._type = this.multiple ? 'select-multiple' : 'select-one';\n }\n\n connectedCallback() {\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentWillLoad() {\n // Set initial type based on multiple prop\n this.updateType();\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":["exposeTypeProperty","h","messageId","danger","Host","enlarge"],"mappings":"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"}

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

@@ -28,7 +28,7 @@ const PdsSortableItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '5c5ada49c505d935bfe505997ab69e7eafc2f642', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (index.h("div", { key: '3041977b792e192192fa9c101f113eb42e87ceea', class: "pds-sortable-item__handle" }, index.h("pds-icon", { key: '082a98c200abcc8023dc126ed83091167c59290e', icon: index$1.handle }))), index.h("slot", { key: '1e2b2154acee0c3ce09ec77b9949c761ff37181d' }), this.enableActions && (index.h("div", { key: '5b318f04eb9c74f660900163e17ba51e2c354538', class: "pds-sortable-item__actions" }, index.h("slot", { key: '2c6631a860af0da48b3a007daeff69b59cfaff59', name: "sortable-item-actions" })))));
+        return (index.h(index.Host, { key: 'c09d0efc16e9cfb2e3eb567620d768e55aedaf77', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (index.h("div", { key: '256c70c9ae566781ee3647196ba7bfa8b2e8f7cf', class: "pds-sortable-item__handle" }, index.h("pds-icon", { key: 'ec56d4eac7f1f464df061297a613554565130d3d', icon: index$1.handle }))), index.h("slot", { key: '6131eda3a2b8a7ef96883f9f791a2cf777407fa4' }), this.enableActions && (index.h("div", { key: '126589fa42498a25f5049786def7fb96f16087aa', class: "pds-sortable-item__actions" }, index.h("slot", { key: 'e2726fb1ae3f74c5ff4b7879ee32b826fb2b8518', name: "sortable-item-actions" })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -2713,7 +2713,7 @@ const PdsSortable = class {
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '925de28efdf7d2f1b6f6f5b94da4dbb383c0421a', class: this.classNames(), id: this.componentId }, index$1.h("slot", { key: '3525abab4ff66a63c90f4db99e5bb090308afc9d' })));
+        return (index$1.h(index$1.Host, { key: '8d6acb29c18b53a699281b86f73c566b9ebfd291', class: this.classNames(), id: this.componentId }, index$1.h("slot", { key: '32fee1636973846016311c70e885a0e5c7645431' })));
     }
     get el() { return index$1.getElement(this); }
 };

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

@@ -92,9 +92,9 @@ const PdsSwitch = class {
         this.inheritedAttributes = Object.assign({}, attributes.inheritAriaAttributes(this.el));
     }
     render() {
-        return (index.h(index.Host, { key: 'bc66c138352b3de0330f5b725e043b4055bec2d6', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, index.h("label", { key: 'c4e400efb2dd2701217bb1044f036d1a281d0001', htmlFor: this.componentId }, index.h("input", Object.assign({ key: '7b80961fb73cd330088f2c93d46475c1d1853da7', "aria-describedby": form.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)), index.h("span", { key: '318e23af1f6126302b8bb0bb8b9f12a0dc7f71b5', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            index.h("div", { key: 'd16fc523de5eacdd14dc4edce347e3be63edeb3e', class: `pds-switch__message`, id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            index.h("div", { key: '3c4ecef3cdb08568b0f52ed4af58a60c5f6ace62', class: `pds-switch__message pds-switch__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: 'ef58ca016b5e0cf63cb43591ec7b50e84b19595d', icon: index$1.danger, size: "small" }), this.errorMessage)));
+        return (index.h(index.Host, { key: 'ab8da77b752d017bafd9ce22daf8973967d4b063', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, index.h("label", { key: '95245686f147a5b1a50540319ab4a6e87dd04451', htmlFor: this.componentId }, index.h("input", Object.assign({ key: 'f32fbaf3997fee37c645b7578d117f4f9ed8c23a', "aria-describedby": form.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)), index.h("span", { key: 'ff8441d3d043a4fd7f7f4d5fac659ca9ba7554a7', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            index.h("div", { key: '2a4ee4dbe651f76e782f9c20314b0d46aa6faf04', class: `pds-switch__message`, id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            index.h("div", { key: '58a3dfb0ca96cc90da7fc606152f63f23d41391d', class: `pds-switch__message pds-switch__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: 'e8db31c01ba78b986e3f746f11dddb8c28dbd6be', icon: index$1.danger, size: "small" }), this.errorMessage)));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }