@pine-ds/core 3.29.0 → 3.31.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/form.js +1 -1
- package/components/pds-avatar.js +1 -1
- package/components/pds-checkbox2.js +1 -1
- package/components/pds-combobox.js +2 -2
- package/components/pds-input.js +1 -1
- package/components/pds-modal-content.js +1 -1
- package/components/pds-modal-footer.js +1 -1
- package/components/pds-modal-header.js +1 -1
- package/components/pds-modal.js +1 -1
- package/components/pds-multiselect.js +1 -1
- package/components/pds-radio-group.js +1 -1
- package/components/pds-radio.js +1 -1
- package/components/pds-select.js +1 -1
- package/components/pds-sortable-item.js +1 -1
- package/components/pds-switch.js +1 -1
- package/components/pds-tab.js +1 -1
- package/components/pds-tabpanel.js +1 -1
- package/components/pds-textarea.js +1 -1
- package/components/pds-tooltip.js +1 -1
- package/components/reconnected-content.js +1 -0
- package/dist/cjs/{form-CpM5Z8q7.js → form-MhwfKTuo.js} +11 -7
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js +2 -2
- package/dist/cjs/pds-checkbox.cjs.entry.js +4 -4
- package/dist/cjs/pds-combobox.cjs.entry.js +34 -4
- package/dist/cjs/pds-input.cjs.entry.js +3 -3
- package/dist/cjs/pds-modal-content.cjs.entry.js +7 -2
- package/dist/cjs/pds-modal-footer.cjs.entry.js +7 -1
- package/dist/cjs/pds-modal-header.cjs.entry.js +7 -1
- package/dist/cjs/pds-modal.cjs.entry.js +40 -5
- package/dist/cjs/pds-multiselect.cjs.entry.js +5 -5
- package/dist/cjs/pds-radio-group.cjs.entry.js +20 -4
- package/dist/cjs/pds-radio.cjs.entry.js +17 -5
- package/dist/cjs/pds-select.cjs.entry.js +8 -3
- package/dist/cjs/pds-sortable-item.cjs.entry.js +14 -1
- package/dist/cjs/pds-switch.cjs.entry.js +4 -4
- package/dist/cjs/pds-tab.cjs.entry.js +5 -0
- package/dist/cjs/pds-tabpanel.cjs.entry.js +6 -1
- package/dist/cjs/pds-textarea.cjs.entry.js +4 -4
- package/dist/cjs/pds-tooltip.cjs.entry.js +32 -2
- package/dist/cjs/pine-core.cjs.js +1 -1
- package/dist/cjs/reconnected-content-CpnEQcTp.js +29 -0
- package/dist/collection/components/pds-avatar/pds-avatar.js +3 -2
- package/dist/collection/components/pds-checkbox/pds-checkbox.js +3 -3
- package/dist/collection/components/pds-combobox/pds-combobox.css +33 -1
- package/dist/collection/components/pds-combobox/pds-combobox.js +107 -3
- package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js +60 -0
- package/dist/collection/components/pds-input/pds-input.css +1 -1
- package/dist/collection/components/pds-input/pds-input.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js +7 -2
- package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js +7 -1
- package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js +7 -1
- package/dist/collection/components/pds-modal/pds-modal.js +63 -5
- package/dist/collection/components/pds-modal/stories/pds-modal.stories.js +77 -0
- package/dist/collection/components/pds-multiselect/pds-multiselect.css +2 -2
- package/dist/collection/components/pds-multiselect/pds-multiselect.js +3 -3
- package/dist/collection/components/pds-radio/pds-radio.css +6 -0
- package/dist/collection/components/pds-radio/pds-radio.js +15 -3
- package/dist/collection/components/pds-radio-group/pds-radio-group.js +19 -3
- package/dist/collection/components/pds-select/pds-select.css +1 -1
- package/dist/collection/components/pds-select/pds-select.js +7 -2
- package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js +14 -1
- package/dist/collection/components/pds-switch/pds-switch.js +3 -3
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js +5 -0
- package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js +6 -1
- package/dist/collection/components/pds-textarea/pds-textarea.js +3 -3
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +32 -2
- package/dist/collection/utils/form.js +11 -7
- package/dist/collection/utils/reconnected-content.js +25 -0
- package/dist/collection/utils/test/reconnect-safety.js +31 -0
- package/dist/docs.json +129 -1
- package/dist/esm/{form-C3xDZBme.js → form-BuRbS7Hp.js} +11 -7
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pds-avatar.entry.js +2 -2
- package/dist/esm/pds-checkbox.entry.js +4 -4
- package/dist/esm/pds-combobox.entry.js +34 -4
- package/dist/esm/pds-input.entry.js +3 -3
- package/dist/esm/pds-modal-content.entry.js +7 -2
- package/dist/esm/pds-modal-footer.entry.js +8 -2
- package/dist/esm/pds-modal-header.entry.js +8 -2
- package/dist/esm/pds-modal.entry.js +40 -5
- package/dist/esm/pds-multiselect.entry.js +5 -5
- package/dist/esm/pds-radio-group.entry.js +20 -4
- package/dist/esm/pds-radio.entry.js +17 -5
- package/dist/esm/pds-select.entry.js +8 -3
- package/dist/esm/pds-sortable-item.entry.js +14 -1
- package/dist/esm/pds-switch.entry.js +4 -4
- package/dist/esm/pds-tab.entry.js +5 -0
- package/dist/esm/pds-tabpanel.entry.js +6 -1
- package/dist/esm/pds-textarea.entry.js +4 -4
- package/dist/esm/pds-tooltip.entry.js +32 -2
- package/dist/esm/pine-core.js +1 -1
- package/dist/esm/reconnected-content-RFpTWV6r.js +27 -0
- package/dist/esm-es5/form-BuRbS7Hp.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/pds-avatar.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-combobox.entry.js +2 -2
- package/dist/esm-es5/pds-input.entry.js +1 -1
- package/dist/esm-es5/pds-modal-content.entry.js +1 -1
- package/dist/esm-es5/pds-modal-footer.entry.js +1 -1
- package/dist/esm-es5/pds-modal-header.entry.js +1 -1
- package/dist/esm-es5/pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-multiselect.entry.js +1 -1
- package/dist/esm-es5/pds-radio-group.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-select.entry.js +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-tab.entry.js +1 -1
- package/dist/esm-es5/pds-tabpanel.entry.js +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pds-tooltip.entry.js +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/esm-es5/reconnected-content-RFpTWV6r.js +1 -0
- package/dist/pine-core/p-08b0d298.entry.js +1 -0
- package/dist/pine-core/p-0aa85901.entry.js +2 -0
- package/dist/pine-core/p-16f13b17.entry.js +1 -0
- package/dist/pine-core/p-17d4a99a.system.entry.js +1 -0
- package/dist/pine-core/p-18ae43e3.entry.js +1 -0
- package/dist/pine-core/p-1b1ec833.system.entry.js +3 -0
- package/dist/pine-core/p-1b8ac76c.system.entry.js +1 -0
- package/dist/pine-core/p-1e87e72a.entry.js +1 -0
- package/dist/pine-core/p-2c5fe3d9.system.entry.js +1 -0
- package/dist/pine-core/{p-978b848b.system.entry.js → p-31679dbc.system.entry.js} +1 -1
- package/dist/pine-core/p-36fc1ade.system.entry.js +1 -0
- package/dist/pine-core/{p-5f4d2c5c.system.entry.js → p-3cece186.system.entry.js} +1 -1
- package/dist/pine-core/p-419e711c.entry.js +1 -0
- package/dist/pine-core/p-43268325.system.entry.js +1 -0
- package/dist/pine-core/p-5d1228cb.entry.js +1 -0
- package/dist/pine-core/p-6630f428.system.entry.js +1 -0
- package/dist/pine-core/{p-82af7d58.system.entry.js → p-69372e72.system.entry.js} +1 -1
- package/dist/pine-core/p-73619cfc.system.entry.js +1 -0
- package/dist/pine-core/p-73b40545.system.entry.js +1 -0
- package/dist/pine-core/p-7ad6f313.entry.js +1 -0
- package/dist/pine-core/p-7e146a45.entry.js +1 -0
- package/dist/pine-core/{p-ba54470a.system.entry.js → p-86d12f3c.system.entry.js} +1 -1
- package/dist/pine-core/p-950dd70e.system.entry.js +1 -0
- package/dist/pine-core/p-B1rytYxP.system.js +1 -1
- package/dist/pine-core/p-BbXp4qBM.system.js +1 -0
- package/dist/pine-core/p-BuRbS7Hp.js +1 -0
- package/dist/pine-core/p-BxIzb-Wc.system.js +1 -0
- package/dist/pine-core/p-RFpTWV6r.js +1 -0
- package/dist/pine-core/p-a0edb4ad.entry.js +1 -0
- package/dist/pine-core/p-af1e2778.entry.js +1 -0
- package/dist/pine-core/p-b1e5e8b1.system.entry.js +1 -0
- package/dist/pine-core/p-b3b44b80.entry.js +1 -0
- package/dist/pine-core/p-b759dc21.entry.js +1 -0
- package/dist/pine-core/{p-dc48f603.entry.js → p-caf73216.entry.js} +1 -1
- package/dist/pine-core/p-cd2370d0.system.entry.js +1 -0
- package/dist/pine-core/{p-3c6300a8.system.entry.js → p-cd407bed.system.entry.js} +1 -1
- package/dist/pine-core/p-d12a93d6.entry.js +1 -0
- package/dist/pine-core/p-dfa70d20.entry.js +1 -0
- package/dist/pine-core/p-f145e018.entry.js +1 -0
- package/dist/pine-core/p-f7cbdb81.system.entry.js +1 -0
- package/dist/pine-core/p-fef6694d.entry.js +1 -0
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/types/components/pds-avatar/pds-avatar.d.ts +1 -0
- package/dist/types/components/pds-combobox/pds-combobox.d.ts +18 -0
- package/dist/types/components/pds-modal/pds-modal-content/pds-modal-content.d.ts +1 -0
- package/dist/types/components/pds-modal/pds-modal-footer/pds-modal-footer.d.ts +2 -0
- package/dist/types/components/pds-modal/pds-modal-header/pds-modal-header.d.ts +2 -0
- package/dist/types/components/pds-modal/pds-modal.d.ts +11 -0
- package/dist/types/components/pds-radio/pds-radio.d.ts +1 -0
- package/dist/types/components/pds-radio-group/pds-radio-group.d.ts +1 -0
- package/dist/types/components/pds-select/pds-select.d.ts +1 -0
- package/dist/types/components/pds-sortable/pds-sortable-item/pds-sortable-item.d.ts +1 -0
- package/dist/types/components/pds-tabs/pds-tab/pds-tab.d.ts +1 -0
- package/dist/types/components/pds-tabs/pds-tabpanel/pds-tabpanel.d.ts +1 -0
- package/dist/types/components/pds-tooltip/pds-tooltip.d.ts +3 -0
- package/dist/types/components.d.ts +42 -0
- package/dist/types/{home/runner/work/pine/pine → private/tmp/claude-501/-Users-qjason-Documents-GitHub/dc3bfd4f-fc9e-49b8-b152-4257ab4ca83c/scratchpad/pine-publish-backfill}/libs/core/.stencil/scripts/vscode-custom-data-generator.d.ts +1 -1
- package/dist/types/utils/form.d.ts +4 -1
- package/dist/types/utils/reconnected-content.d.ts +14 -0
- package/dist/types/utils/test/reconnect-safety.d.ts +11 -0
- package/dist/vscode.html-data.json +10909 -0
- package/hydrate/index.js +248 -50
- package/hydrate/index.mjs +248 -50
- package/package.json +2 -2
- package/dist/esm-es5/form-C3xDZBme.js +0 -1
- package/dist/pine-core/p-02805a93.system.entry.js +0 -1
- package/dist/pine-core/p-02977c6f.entry.js +0 -1
- package/dist/pine-core/p-054f7011.entry.js +0 -1
- package/dist/pine-core/p-092a72d2.system.entry.js +0 -1
- package/dist/pine-core/p-0d6daa35.entry.js +0 -1
- package/dist/pine-core/p-12154189.system.entry.js +0 -1
- package/dist/pine-core/p-1deded6e.system.entry.js +0 -1
- package/dist/pine-core/p-1fb985bb.entry.js +0 -1
- package/dist/pine-core/p-2a74b396.entry.js +0 -1
- package/dist/pine-core/p-39ad92fc.entry.js +0 -1
- package/dist/pine-core/p-507e831f.system.entry.js +0 -1
- package/dist/pine-core/p-5c229a7f.entry.js +0 -1
- package/dist/pine-core/p-69e47ffc.system.entry.js +0 -1
- package/dist/pine-core/p-6fb68ad1.entry.js +0 -1
- package/dist/pine-core/p-72a1b563.system.entry.js +0 -1
- package/dist/pine-core/p-7a7954b2.system.entry.js +0 -1
- package/dist/pine-core/p-7d15b65e.entry.js +0 -1
- package/dist/pine-core/p-902b5790.entry.js +0 -2
- package/dist/pine-core/p-9aaee1e9.system.entry.js +0 -1
- package/dist/pine-core/p-9ba86e34.entry.js +0 -1
- package/dist/pine-core/p-9f041a63.system.entry.js +0 -3
- package/dist/pine-core/p-B1u-QvFn.system.js +0 -1
- package/dist/pine-core/p-C3xDZBme.js +0 -1
- package/dist/pine-core/p-b0674b8d.entry.js +0 -1
- package/dist/pine-core/p-c1932447.entry.js +0 -1
- package/dist/pine-core/p-ce715993.entry.js +0 -1
- package/dist/pine-core/p-d037308b.entry.js +0 -1
- package/dist/pine-core/p-e0fb06ea.system.entry.js +0 -1
- package/dist/pine-core/p-e4b69d10.entry.js +0 -1
- package/dist/pine-core/p-e81b4d04.system.entry.js +0 -1
- package/dist/pine-core/p-fb10caff.system.entry.js +0 -1
- package/dist/pine-core/p-ff3399ed.entry.js +0 -1
package/hydrate/index.js
CHANGED
|
@@ -5720,6 +5720,7 @@ const pdsAvatarCss = () => `:host{display:inline-block}div{--color-background-co
|
|
|
5720
5720
|
* @part asset-wrapper
|
|
5721
5721
|
* @part button
|
|
5722
5722
|
* @part image - The main image element that represents the avatar component.
|
|
5723
|
+
* @part initials - The text element that renders the avatar's initials, for restyling their color.
|
|
5723
5724
|
*/
|
|
5724
5725
|
class PdsAvatar {
|
|
5725
5726
|
constructor(hostRef) {
|
|
@@ -5819,7 +5820,7 @@ class PdsAvatar {
|
|
|
5819
5820
|
return hAsync("img", { alt: this.alt, src: this.image });
|
|
5820
5821
|
}
|
|
5821
5822
|
if (this.initials) {
|
|
5822
|
-
return (hAsync("svg", { class: "pds-avatar__initials", viewBox: "0 0 32 32" }, hAsync("text", { x: "16", y: "20" }, this.initials)));
|
|
5823
|
+
return (hAsync("svg", { class: "pds-avatar__initials", part: "initials", viewBox: "0 0 32 32" }, hAsync("text", { x: "16", y: "20" }, this.initials)));
|
|
5823
5824
|
}
|
|
5824
5825
|
// Percentage is average size of icon in relation to total avatar size
|
|
5825
5826
|
// of all preset sizes found in Figma.
|
|
@@ -5850,7 +5851,7 @@ class PdsAvatar {
|
|
|
5850
5851
|
}
|
|
5851
5852
|
}
|
|
5852
5853
|
render() {
|
|
5853
|
-
return (hAsync(Host, { key: '
|
|
5854
|
+
return (hAsync(Host, { key: 'fe2bd31070db6840c79d7054ac50802e8f14f572', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
|
|
5854
5855
|
}
|
|
5855
5856
|
static get style() { return pdsAvatarCss(); }
|
|
5856
5857
|
static get cmpMeta() { return {
|
|
@@ -6454,14 +6455,18 @@ const messageId = (id, messageType) => {
|
|
|
6454
6455
|
};
|
|
6455
6456
|
/**
|
|
6456
6457
|
* Assign aria-description id to relate messages with form element
|
|
6458
|
+
*
|
|
6459
|
+
* Returns the error message id when invalid, otherwise the helper message id.
|
|
6460
|
+
* Pass only messages the component renders — a described id must exist in the DOM.
|
|
6457
6461
|
*/
|
|
6458
|
-
const assignDescription = (id, invalid, helperMessage) => {
|
|
6459
|
-
|
|
6460
|
-
|
|
6461
|
-
|
|
6462
|
-
|
|
6463
|
-
|
|
6464
|
-
|
|
6462
|
+
const assignDescription = (id, invalid, helperMessage, errorMessage) => {
|
|
6463
|
+
const hasErrorMessage = Boolean(errorMessage);
|
|
6464
|
+
const hasHelperMessage = Boolean(helperMessage);
|
|
6465
|
+
if (invalid && hasErrorMessage)
|
|
6466
|
+
return messageId(id, 'error');
|
|
6467
|
+
if (hasHelperMessage)
|
|
6468
|
+
return messageId(id, 'helper');
|
|
6469
|
+
return undefined;
|
|
6465
6470
|
};
|
|
6466
6471
|
/**
|
|
6467
6472
|
* Updates the `invalid` prop of a form element based on it's values validity
|
|
@@ -6676,9 +6681,9 @@ class PdsCheckbox {
|
|
|
6676
6681
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
6677
6682
|
}
|
|
6678
6683
|
render() {
|
|
6679
|
-
return (hAsync(Host, { key: 'd4a447aba6ffa638b0bf3ed7a5cfd4580168da79', class: this.classNames() }, hAsync("label", { key: '75fcd32809f736f8e4f6af2021f86d2c5b7bc110', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '
|
|
6680
|
-
hAsync("div", { key: '
|
|
6681
|
-
hAsync("div", { key: '
|
|
6684
|
+
return (hAsync(Host, { key: 'd4a447aba6ffa638b0bf3ed7a5cfd4580168da79', class: this.classNames() }, hAsync("label", { key: '75fcd32809f736f8e4f6af2021f86d2c5b7bc110', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: 'bf6c15908ed3b1cebc35ce10eddd4b420a2d2b4e', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), hAsync("span", { key: 'dd8d96a9907c5f237ab52508a70adcc0ed1b7eb5', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
|
|
6685
|
+
hAsync("div", { key: '8928bea1a022825777e40635ae91e7bdedaaea67', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
6686
|
+
hAsync("div", { key: 'e09485a38fb7c66d9dbfa68eddf758e3cd0d81c8', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '0bea5bbdc7817b6f2136a7c1a8e67811f4119dce', icon: danger, size: "small" }), this.errorMessage)));
|
|
6682
6687
|
}
|
|
6683
6688
|
static get formAssociated() { return true; }
|
|
6684
6689
|
get el() { return getElement(this); }
|
|
@@ -9881,7 +9886,7 @@ function createDOMPurify() {
|
|
|
9881
9886
|
}
|
|
9882
9887
|
var purify = createDOMPurify();
|
|
9883
9888
|
|
|
9884
|
-
const pdsComboboxCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);min-height:var(--pine-dimension-500)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}.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}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
|
|
9889
|
+
const pdsComboboxCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);min-height:var(--pine-dimension-500)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}.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}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
|
|
9885
9890
|
|
|
9886
9891
|
/**
|
|
9887
9892
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -11065,6 +11070,20 @@ class PdsCombobox {
|
|
|
11065
11070
|
async getSelectedValue() {
|
|
11066
11071
|
return this.selectedOption ? this.selectedOption.value : null;
|
|
11067
11072
|
}
|
|
11073
|
+
/**
|
|
11074
|
+
* Clears the selected value and resets the component.
|
|
11075
|
+
*/
|
|
11076
|
+
async clear() {
|
|
11077
|
+
const hadValue = this.value !== '' || this.displayText !== '';
|
|
11078
|
+
this.displayText = '';
|
|
11079
|
+
this.setSelectedOption(null);
|
|
11080
|
+
this.value = '';
|
|
11081
|
+
this.filterOptions();
|
|
11082
|
+
this.updateFormValue('');
|
|
11083
|
+
if (hadValue) {
|
|
11084
|
+
this.pdsComboboxChange.emit({ value: '' });
|
|
11085
|
+
}
|
|
11086
|
+
}
|
|
11068
11087
|
// Get the label of the selected option
|
|
11069
11088
|
get selectedLabel() {
|
|
11070
11089
|
return this.displayText || '';
|
|
@@ -11333,6 +11352,19 @@ class PdsCombobox {
|
|
|
11333
11352
|
,
|
|
11334
11353
|
large: chipProps.large, icon: chipProps.icon, dot: chipProps.dot, class: "pds-combobox__option-chip" }, this.getOptionLabel(option)));
|
|
11335
11354
|
}
|
|
11355
|
+
// Mirrors pds-multiselect and pds-select: an error message on its own puts the
|
|
11356
|
+
// field in an invalid state, so assistive tech agrees with the visual treatment.
|
|
11357
|
+
isInvalid() {
|
|
11358
|
+
return Boolean(this.invalid) || Boolean(this.errorMessage);
|
|
11359
|
+
}
|
|
11360
|
+
renderMessages() {
|
|
11361
|
+
const hasErrorMessage = Boolean(this.errorMessage);
|
|
11362
|
+
const showHelperMessage = Boolean(this.helperMessage) && !hasErrorMessage;
|
|
11363
|
+
return [
|
|
11364
|
+
showHelperMessage && (hAsync("p", { class: "pds-combobox__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)),
|
|
11365
|
+
hasErrorMessage && (hAsync("p", { class: "pds-combobox__error", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { icon: "danger", size: "small", "aria-hidden": "true" }), this.errorMessage)),
|
|
11366
|
+
];
|
|
11367
|
+
}
|
|
11336
11368
|
render() {
|
|
11337
11369
|
const triggerClass = [
|
|
11338
11370
|
'pds-combobox__button-trigger',
|
|
@@ -11341,10 +11373,13 @@ class PdsCombobox {
|
|
|
11341
11373
|
]
|
|
11342
11374
|
.filter(Boolean)
|
|
11343
11375
|
.join(' ');
|
|
11344
|
-
return (hAsync(Host, { key: '
|
|
11376
|
+
return (hAsync(Host, { key: '25ce0fc749a909555762a44ff7ff089ab65465d4', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '8f10f691452c1b793fd31b719f43de04b1ea064b', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && !this.hideLabel && (hAsync("label", { key: 'af6ee018cc15d1bc0b75b7d33530e2678fe6017b', htmlFor: this.componentId, class: "pds-combobox__label" }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
|
|
11345
11377
|
this.inputEl = el;
|
|
11346
11378
|
this.triggerEl = el;
|
|
11347
|
-
}, class:
|
|
11379
|
+
}, class: {
|
|
11380
|
+
'pds-combobox__input': true,
|
|
11381
|
+
'pds-combobox__input--invalid': this.isInvalid(),
|
|
11382
|
+
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(this.highlightedIndex) : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(this.highlightedIndex) : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(this.highlightedIndex) : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '586e443fb97fbe74888d6c296db63a0ed7c95787', style: { display: 'none' } }, hAsync("slot", { key: '9a287c316d09bc4cc7fd94ad7dbdbf5458753162', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
|
|
11348
11383
|
}
|
|
11349
11384
|
static get formAssociated() { return true; }
|
|
11350
11385
|
get el() { return getElement(this); }
|
|
@@ -11375,10 +11410,13 @@ class PdsCombobox {
|
|
|
11375
11410
|
"customOptionLayouts": [4, "custom-option-layouts"],
|
|
11376
11411
|
"customTriggerContent": [4, "custom-trigger-content"],
|
|
11377
11412
|
"disabled": [4],
|
|
11413
|
+
"errorMessage": [1, "error-message"],
|
|
11378
11414
|
"dropdownPlacement": [1, "dropdown-placement"],
|
|
11379
11415
|
"dropdownWidth": [1, "dropdown-width"],
|
|
11380
11416
|
"dropdownMount": [1, "dropdown-mount"],
|
|
11417
|
+
"helperMessage": [1, "helper-message"],
|
|
11381
11418
|
"hideLabel": [4, "hide-label"],
|
|
11419
|
+
"invalid": [4],
|
|
11382
11420
|
"label": [1],
|
|
11383
11421
|
"maxHeight": [1, "max-height"],
|
|
11384
11422
|
"mode": [1],
|
|
@@ -11410,7 +11448,8 @@ class PdsCombobox {
|
|
|
11410
11448
|
"currentPage": [32],
|
|
11411
11449
|
"hasMore": [32],
|
|
11412
11450
|
"setFocus": [64],
|
|
11413
|
-
"getSelectedValue": [64]
|
|
11451
|
+
"getSelectedValue": [64],
|
|
11452
|
+
"clear": [64]
|
|
11414
11453
|
},
|
|
11415
11454
|
"$listeners$": undefined,
|
|
11416
11455
|
"$lazyBundleId$": "-",
|
|
@@ -13415,7 +13454,7 @@ const pdsInputTokensCss$1 = () => `:host{--pine-input-color-background-danger:va
|
|
|
13415
13454
|
|
|
13416
13455
|
const labelCss$4 = () => `: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)}`;
|
|
13417
13456
|
|
|
13418
|
-
const pdsInputCss = () => `:host{--pds-input-background:var(--pine-color-background-container);--pds-input-border-color:var(--pine-color-border);--pds-input-border-color-hover:var(--pine-color-border-hover);--pds-input-border-color-disabled:var(--pine-color-border-disabled);--pds-input-border-radius:var(--pine-dimension-125);--pds-input-border-width:var(--pine-border-width-thin);--pds-input-padding-x:var(--pine-dimension-150);--pds-input-padding-y:calc(var(--pine-dimension-xs) - var(--pine-border-width));--pds-input-font:var(--pine-typography-body);--pds-input-text-color:var(--pine-color-text-strong);--pds-input-placeholder-color:var(--pine-color-text-placeholder);--pds-input-icon-color:var(--pine-color-text-secondary);--pds-input-disabled-background:var(--pine-color-background-container-disabled);--pds-input-disabled-text-color:var(--pine-color-text-disabled);--pds-input-error-color:var(--pine-color-text-message-danger);--pds-input-error-background:var(--pine-input-color-background-danger);--pds-input-error-border:var(--pine-color-border-danger);--pds-input-error-border-hover:var(--pine-color-border-danger-hover);--pds-input-addon-background:var(--pine-color-background-subtle);--pds-input-addon-color:var(--pine-color-text-secondary);--pds-input-field-min-height:var(--pine-dimension-450);--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger);display:inline}:host pds-select::part(select){background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host::part(prefix),:host::part(suffix){-ms-flex-align:center;align-items:center;color:var(--pine-color-text-label-readonly);display:-ms-flexbox;display:flex;height:100%;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);white-space:nowrap;z-index:var(--pine-z-index-raised)}:host::part(prefix){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius);inset-inline-start:var(--pds-input-padding-x)}:host::part(suffix){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius);inset-inline-end:var(--pds-input-padding-x)}:host::part(prepend),:host::part(append){-ms-flex-align:center;align-items:center;background-color:var(--pds-input-addon-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);color:var(--pds-input-addon-color);display:-ms-flexbox;display:flex;overflow:visible}:host::part(prepend){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius)}:host::part(append){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius)}:host([has-prepend]) ::slotted(pds-button[slot=prepend]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-end:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pds-input-border-radius);--pds-button-border-radius-end-start:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-append]) ::slotted(pds-button[slot=append]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-start:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pds-input-border-radius);--pds-button-border-radius-end-end:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-prepend]) ::slotted(pds-select[slot=prepend]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-end:var(--pine-dimension-none);--pds-select-border-radius-end-start:var(--pds-input-border-radius);--pds-select-border-radius-start-end:var(--pine-dimension-none);--pds-select-border-radius-start-start:var(--pds-input-border-radius);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([has-append]) ::slotted(pds-select[slot=append]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-end:var(--pds-input-border-radius);--pds-select-border-radius-end-start:var(--pine-dimension-none);--pds-select-border-radius-start-end:var(--pds-input-border-radius);--pds-select-border-radius-start-start:var(--pine-dimension-none);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([aria-readonly=true]) input{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}:host([aria-disabled=true])::part(prepend),:host([aria-disabled=true])::part(append){background-color:var(--pds-input-disabled-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color-disabled)}:host([full-width=true]){width:100%}:host([invalid=true])::part(prepend),:host([invalid=true])::part(append){background-color:var(--pds-input-error-background);border:var(--pds-input-border-width) solid var(--pds-input-error-border)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])){--pds-input-background:var(--pine-color-accent-disabled);--pds-input-border-color:var(--pine-color-accent);--pds-input-border-color-hover:var(--pine-color-accent-hover);--pds-input-text-color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(prefix),:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(suffix){color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])) .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring)}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-input__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label{color:var(--pine-color-text-strong);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label-wrapper .pds-input__label{-webkit-margin-after:0;margin-block-end:0}.pds-input__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)}.pds-input__field-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-input__field-wrapper.has-prefix .pds-input__field{-webkit-padding-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));padding-inline-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em))}.pds-input__field-wrapper.has-suffix .pds-input__field{-webkit-padding-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));padding-inline-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em))}.pds-input__field-wrapper.has-prepend .pds-input__field{border-end-start-radius:var(--pine-dimension-none);border-start-start-radius:var(--pine-dimension-none)}.pds-input__field-wrapper.has-append .pds-input__field{border-end-end-radius:var(--pine-dimension-none);border-start-end-radius:var(--pine-dimension-none)}.pds-input__field{background:var(--pds-input-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);border-radius:var(--pds-input-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-input-text-color);-ms-flex:1;flex:1;font:var(--pds-input-font);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-input-field-min-height);min-width:var(--pine-dimension-none);padding:var(--pds-input-padding-y) var(--pds-input-padding-x);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-input__field:hover:not(:disabled){border-color:var(--pds-input-border-color-hover)}.pds-input__field:disabled{background:var(--pds-input-disabled-background);border-color:var(--pine-color-border-disabled);color:var(--pds-input-disabled-text-color);cursor:not-allowed}.pds-input__field:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.has-error .pds-input__field:hover:not(:disabled){border-color:var(--pds-input-error-border-hover)}:host-context([data-theme=dark]) .has-error .pds-input__field:hover:not(:disabled){border-color:var(--pine-color-red-950)}.pds-input__field:focus-visible:not(.has-error){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width);position:relative;z-index:1}:host([has-prepend]) .pds-input__field:focus-visible:not(.has-error),:host([has-append]) .pds-input__field:focus-visible:not(.has-error),:host([has-prefix]) .pds-input__field:focus-visible:not(.has-error),:host([has-suffix]) .pds-input__field:focus-visible:not(.has-error){outline-offset:var(--pine-dimension-none)}.pds-input__field::-webkit-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-moz-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field:-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field:-moz-placeholder-shown{text-overflow:ellipsis}.pds-input__field:-ms-input-placeholder{text-overflow:ellipsis}.pds-input__field:placeholder-shown{text-overflow:ellipsis}.has-error .pds-input__field{background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host-context([data-theme=dark]) .has-error .pds-input__field{background-color:var(--pine-color-red-950)}.has-error .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring-danger);position:relative;z-index:1}.pds-input__error-message,.pds-input__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:var(--pine-dimension-none);margin-block-end:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-input__error-message{color:var(--pds-input-error-color);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-input__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.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}.pds-input__field::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;background-color:var(--pds-input-placeholder-color);cursor:pointer;height:var(--pine-dimension-sm);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;width:var(--pine-dimension-sm)}`;
|
|
13457
|
+
const pdsInputCss = () => `:host{--pds-input-background:var(--pine-color-background-container);--pds-input-border-color:var(--pine-color-border);--pds-input-border-color-hover:var(--pine-color-border-hover);--pds-input-border-color-disabled:var(--pine-color-border-disabled);--pds-input-border-radius:var(--pine-dimension-125);--pds-input-border-width:var(--pine-border-width-thin);--pds-input-padding-x:var(--pine-dimension-150);--pds-input-padding-y:calc(var(--pine-dimension-xs) - var(--pine-border-width));--pds-input-font:var(--pine-typography-body);--pds-input-text-color:var(--pine-color-text-strong);--pds-input-placeholder-color:var(--pine-color-text-placeholder);--pds-input-icon-color:var(--pine-color-text-secondary);--pds-input-disabled-background:var(--pine-color-background-container-disabled);--pds-input-disabled-text-color:var(--pine-color-text-disabled);--pds-input-error-color:var(--pine-color-text-message-danger);--pds-input-error-background:var(--pine-input-color-background-danger);--pds-input-error-border:var(--pine-color-border-danger);--pds-input-error-border-hover:var(--pine-color-border-danger-hover);--pds-input-addon-background:var(--pine-color-background-subtle);--pds-input-addon-color:var(--pine-color-text-secondary);--pds-input-field-min-height:var(--pine-dimension-450);--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger);display:inline}:host pds-select::part(select){background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host::part(prefix),:host::part(suffix){-ms-flex-align:center;align-items:center;color:var(--pine-color-text-label-readonly);display:-ms-flexbox;display:flex;height:100%;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);white-space:nowrap;z-index:calc(var(--pine-z-index-raised) - 1)}:host::part(prefix){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius);inset-inline-start:var(--pds-input-padding-x)}:host::part(suffix){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius);inset-inline-end:var(--pds-input-padding-x)}:host::part(prepend),:host::part(append){-ms-flex-align:center;align-items:center;background-color:var(--pds-input-addon-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);color:var(--pds-input-addon-color);display:-ms-flexbox;display:flex;overflow:visible}:host::part(prepend){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius)}:host::part(append){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius)}:host([has-prepend]) ::slotted(pds-button[slot=prepend]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-end:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pds-input-border-radius);--pds-button-border-radius-end-start:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-append]) ::slotted(pds-button[slot=append]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-start:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pds-input-border-radius);--pds-button-border-radius-end-end:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-prepend]) ::slotted(pds-select[slot=prepend]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-end:var(--pine-dimension-none);--pds-select-border-radius-end-start:var(--pds-input-border-radius);--pds-select-border-radius-start-end:var(--pine-dimension-none);--pds-select-border-radius-start-start:var(--pds-input-border-radius);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([has-append]) ::slotted(pds-select[slot=append]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-end:var(--pds-input-border-radius);--pds-select-border-radius-end-start:var(--pine-dimension-none);--pds-select-border-radius-start-end:var(--pds-input-border-radius);--pds-select-border-radius-start-start:var(--pine-dimension-none);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([aria-readonly=true]) input{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}:host([aria-disabled=true])::part(prepend),:host([aria-disabled=true])::part(append){background-color:var(--pds-input-disabled-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color-disabled)}:host([full-width=true]){width:100%}:host([invalid=true])::part(prepend),:host([invalid=true])::part(append){background-color:var(--pds-input-error-background);border:var(--pds-input-border-width) solid var(--pds-input-error-border)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])){--pds-input-background:var(--pine-color-accent-disabled);--pds-input-border-color:var(--pine-color-accent);--pds-input-border-color-hover:var(--pine-color-accent-hover);--pds-input-text-color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(prefix),:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(suffix){color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])) .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring)}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-input__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label{color:var(--pine-color-text-strong);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label-wrapper .pds-input__label{-webkit-margin-after:0;margin-block-end:0}.pds-input__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)}.pds-input__field-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-input__field-wrapper.has-prefix .pds-input__field{-webkit-padding-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));padding-inline-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em))}.pds-input__field-wrapper.has-suffix .pds-input__field{-webkit-padding-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));padding-inline-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em))}.pds-input__field-wrapper.has-prepend .pds-input__field{border-end-start-radius:var(--pine-dimension-none);border-start-start-radius:var(--pine-dimension-none)}.pds-input__field-wrapper.has-append .pds-input__field{border-end-end-radius:var(--pine-dimension-none);border-start-end-radius:var(--pine-dimension-none)}.pds-input__field{background:var(--pds-input-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);border-radius:var(--pds-input-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-input-text-color);-ms-flex:1;flex:1;font:var(--pds-input-font);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-input-field-min-height);min-width:var(--pine-dimension-none);padding:var(--pds-input-padding-y) var(--pds-input-padding-x);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-input__field:hover:not(:disabled){border-color:var(--pds-input-border-color-hover)}.pds-input__field:disabled{background:var(--pds-input-disabled-background);border-color:var(--pine-color-border-disabled);color:var(--pds-input-disabled-text-color);cursor:not-allowed}.pds-input__field:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.has-error .pds-input__field:hover:not(:disabled){border-color:var(--pds-input-error-border-hover)}:host-context([data-theme=dark]) .has-error .pds-input__field:hover:not(:disabled){border-color:var(--pine-color-red-950)}.pds-input__field:focus-visible:not(.has-error){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width);position:relative;z-index:1}:host([has-prepend]) .pds-input__field:focus-visible:not(.has-error),:host([has-append]) .pds-input__field:focus-visible:not(.has-error),:host([has-prefix]) .pds-input__field:focus-visible:not(.has-error),:host([has-suffix]) .pds-input__field:focus-visible:not(.has-error){outline-offset:var(--pine-dimension-none)}.pds-input__field::-webkit-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-moz-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field:-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field:-moz-placeholder-shown{text-overflow:ellipsis}.pds-input__field:-ms-input-placeholder{text-overflow:ellipsis}.pds-input__field:placeholder-shown{text-overflow:ellipsis}.has-error .pds-input__field{background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host-context([data-theme=dark]) .has-error .pds-input__field{background-color:var(--pine-color-red-950)}.has-error .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring-danger);position:relative;z-index:1}.pds-input__error-message,.pds-input__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:var(--pine-dimension-none);margin-block-end:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-input__error-message{color:var(--pds-input-error-color);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-input__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.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}.pds-input__field::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;background-color:var(--pds-input-placeholder-color);cursor:pointer;height:var(--pine-dimension-sm);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;width:var(--pine-dimension-sm)}`;
|
|
13419
13458
|
|
|
13420
13459
|
/**
|
|
13421
13460
|
* @slot append - Content to be displayed after the input field
|
|
@@ -13709,7 +13748,7 @@ class PdsInput {
|
|
|
13709
13748
|
return (hAsync(Host, { key: 'ecf4cc212e5c3ebc18082b790803e6b2ccb8ca77', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, hAsync("div", { key: 'acdf92a30068fc04a17816ec6d85295b47e512ee', class: "pds-input" }, label && (hAsync("div", { key: '4569f0b3761db89e85a090eff6af1c47cb562115', class: {
|
|
13710
13749
|
'pds-input__label-wrapper': true,
|
|
13711
13750
|
'visually-hidden': this.hideLabel,
|
|
13712
|
-
} }, hAsync("label", { key: '90b0a863d78115fa158429db11548fc2a9ee5ae6', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: '3d440aaafc4daeffe45152cd23d27472d7ebf85a' }, label, this.required && hAsync("span", { key: 'c7bf6ef6191e961a106b8885cab604aa89730eba', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '81f0b8a347bc9a06c753b9f31f5e30ac78e45adb', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: '
|
|
13751
|
+
} }, hAsync("label", { key: '90b0a863d78115fa158429db11548fc2a9ee5ae6', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: '3d440aaafc4daeffe45152cd23d27472d7ebf85a' }, label, this.required && hAsync("span", { key: 'c7bf6ef6191e961a106b8885cab604aa89730eba', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '81f0b8a347bc9a06c753b9f31f5e30ac78e45adb', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: '41ed8dab6f7c71c6c382627ca4dc48bb95c1161d', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (hAsync("p", { key: '4791ddeb01b758a94a2fddfec6093b9b39eefafa', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: 'd0a22ae4b0e400e1d5df55e35c0aaaa5c5ea3ab7', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: '69975cdcc15e5ab6df9e2c354977e2c6dae18f6e', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
|
|
13713
13752
|
}
|
|
13714
13753
|
static get formAssociated() { return true; }
|
|
13715
13754
|
get el() { return getElement(this); }
|
|
@@ -13921,6 +13960,32 @@ class PdsLoader {
|
|
|
13921
13960
|
}; }
|
|
13922
13961
|
}
|
|
13923
13962
|
|
|
13963
|
+
/**
|
|
13964
|
+
* Unwraps a stale copy of a light-DOM (`shadow: false`) component's own wrapper,
|
|
13965
|
+
* left behind when a page-cache (Turbo, browser bfcache) reconnect nests a
|
|
13966
|
+
* component's previous render inside its freshly rendered one. Call from
|
|
13967
|
+
* `componentDidRender` with the element that directly contains the rendered
|
|
13968
|
+
* `<slot>` and the selector that identifies "another one of me." Unwraps in
|
|
13969
|
+
* place (move-then-remove) so nested content is never lost.
|
|
13970
|
+
*
|
|
13971
|
+
* `contentSelector` is only needed when the wrapper itself further nests a
|
|
13972
|
+
* separate content element (e.g. pds-tab's `<a class="pds-tab">` wrapping a
|
|
13973
|
+
* `.pds-tab__content` div) — omit it when the wrapper's own children are the
|
|
13974
|
+
* slotted content (e.g. pds-tabpanel's `.pds-tabpanel` div).
|
|
13975
|
+
*/
|
|
13976
|
+
function unwrapReconnectedContent(container, selector, contentSelector) {
|
|
13977
|
+
var _a;
|
|
13978
|
+
if (container === null)
|
|
13979
|
+
return;
|
|
13980
|
+
let stale = container.firstElementChild;
|
|
13981
|
+
while (stale === null || stale === void 0 ? void 0 : stale.matches(selector)) {
|
|
13982
|
+
const source = contentSelector !== undefined ? ((_a = stale.querySelector(contentSelector)) !== null && _a !== void 0 ? _a : stale) : stale;
|
|
13983
|
+
Array.from(source.childNodes).forEach((node) => container.insertBefore(node, stale));
|
|
13984
|
+
stale.remove();
|
|
13985
|
+
stale = container.firstElementChild;
|
|
13986
|
+
}
|
|
13987
|
+
}
|
|
13988
|
+
|
|
13924
13989
|
const pdsModalCss = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}`;
|
|
13925
13990
|
|
|
13926
13991
|
class PdsModal {
|
|
@@ -13949,6 +14014,16 @@ class PdsModal {
|
|
|
13949
14014
|
* @default true
|
|
13950
14015
|
*/
|
|
13951
14016
|
this.scrollable = true;
|
|
14017
|
+
/**
|
|
14018
|
+
* Whether the modal opens outside the browser top layer as a non-modal dialog.
|
|
14019
|
+
* When `true` it opens with `dialog.show()` instead of `dialog.showModal()`, so
|
|
14020
|
+
* overlays rendered elsewhere in the DOM (file pickers, editor menus) can display
|
|
14021
|
+
* above it via `z-index`. The page is not made inert and focus is not trapped in
|
|
14022
|
+
* this mode. Read when the modal opens; changing it while the modal is open is
|
|
14023
|
+
* not supported.
|
|
14024
|
+
* @default false
|
|
14025
|
+
*/
|
|
14026
|
+
this.disableTopLayer = false;
|
|
13952
14027
|
/**
|
|
13953
14028
|
* Stores the list of focusable elements in the modal
|
|
13954
14029
|
*/
|
|
@@ -13970,6 +14045,13 @@ class PdsModal {
|
|
|
13970
14045
|
return;
|
|
13971
14046
|
// Handle Escape key to close the modal
|
|
13972
14047
|
if (e.key === 'Escape') {
|
|
14048
|
+
// In non-top-layer mode, focus can move into an overlay stacked above the
|
|
14049
|
+
// modal (the reason disableTopLayer exists). If that overlay owns focus,
|
|
14050
|
+
// leave Escape to it rather than dismissing this modal out from under it.
|
|
14051
|
+
const active = document.activeElement;
|
|
14052
|
+
if (this.disableTopLayer && active && active !== document.body && !this.el.contains(active)) {
|
|
14053
|
+
return;
|
|
14054
|
+
}
|
|
13973
14055
|
// Always prevent native dialog close behavior
|
|
13974
14056
|
e.preventDefault();
|
|
13975
14057
|
// Only close if backdropDismiss is enabled and this is the innermost modal
|
|
@@ -13980,6 +14062,11 @@ class PdsModal {
|
|
|
13980
14062
|
}
|
|
13981
14063
|
// Handle Tab key for focus trapping
|
|
13982
14064
|
if (e.key === 'Tab') {
|
|
14065
|
+
// In non-top-layer mode the modal is deliberately not focus-isolated: focus
|
|
14066
|
+
// must be able to leave it into overlays stacked above (the whole point of
|
|
14067
|
+
// disableTopLayer), so do not trap Tab here.
|
|
14068
|
+
if (this.disableTopLayer)
|
|
14069
|
+
return;
|
|
13983
14070
|
// If there are no focusable elements, do nothing
|
|
13984
14071
|
if (this.focusableElements.length === 0)
|
|
13985
14072
|
return;
|
|
@@ -14011,6 +14098,10 @@ class PdsModal {
|
|
|
14011
14098
|
// Add keyboard event listener
|
|
14012
14099
|
document.addEventListener('keydown', this.handleKeyDown);
|
|
14013
14100
|
}
|
|
14101
|
+
// Unwraps a nested dialog.pds-modal__backdrop left by a page-cache (Turbo, bfcache) reconnect.
|
|
14102
|
+
componentDidRender() {
|
|
14103
|
+
unwrapReconnectedContent(this.el.querySelector('.pds-modal'), 'dialog.pds-modal__backdrop', '.pds-modal');
|
|
14104
|
+
}
|
|
14014
14105
|
disconnectedCallback() {
|
|
14015
14106
|
// Clean up event listener
|
|
14016
14107
|
document.removeEventListener('keydown', this.handleKeyDown);
|
|
@@ -14097,8 +14188,16 @@ class PdsModal {
|
|
|
14097
14188
|
try {
|
|
14098
14189
|
// Store the currently focused element to restore focus when modal closes
|
|
14099
14190
|
this.previousActiveElement = document.activeElement;
|
|
14100
|
-
//
|
|
14101
|
-
|
|
14191
|
+
// showModal() promotes the dialog to the browser top layer (and makes the
|
|
14192
|
+
// rest of the page inert), which prevents any overlay outside the dialog
|
|
14193
|
+
// from ever painting above it. show() opens a non-modal dialog that stays
|
|
14194
|
+
// in the normal stacking context so those overlays can stack above it.
|
|
14195
|
+
if (this.disableTopLayer) {
|
|
14196
|
+
this.modalRef.show();
|
|
14197
|
+
}
|
|
14198
|
+
else {
|
|
14199
|
+
this.modalRef.showModal();
|
|
14200
|
+
}
|
|
14102
14201
|
this.open = true;
|
|
14103
14202
|
// Update focusable elements and set initial focus
|
|
14104
14203
|
// Using a longer timeout to ensure all components are fully rendered
|
|
@@ -14160,14 +14259,14 @@ class PdsModal {
|
|
|
14160
14259
|
return thisZIndex === maxZIndex;
|
|
14161
14260
|
}
|
|
14162
14261
|
render() {
|
|
14163
|
-
return (hAsync("dialog", { key: '
|
|
14262
|
+
return (hAsync("dialog", { key: '134e913f0bf5d7bf77e67f00707a399fae986fcb', class: {
|
|
14164
14263
|
'pds-modal__backdrop': true,
|
|
14165
14264
|
'open': this.open
|
|
14166
|
-
}, "aria-modal":
|
|
14265
|
+
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: '6cb819a92c00b5c8676b4d1a84301896373305f3', class: {
|
|
14167
14266
|
'pds-modal': true,
|
|
14168
14267
|
[`pds-modal--${this.size}`]: true,
|
|
14169
14268
|
'pds-modal--scrollable': this.scrollable
|
|
14170
|
-
}, part: "modal" }, hAsync("slot", { key: '
|
|
14269
|
+
}, part: "modal" }, hAsync("slot", { key: 'aff0f88a7b9e1b4b681a6a14636153ce3a6907d5' }))));
|
|
14171
14270
|
}
|
|
14172
14271
|
get el() { return getElement(this); }
|
|
14173
14272
|
static get watchers() { return {
|
|
@@ -14185,6 +14284,7 @@ class PdsModal {
|
|
|
14185
14284
|
"open": [1028],
|
|
14186
14285
|
"size": [1],
|
|
14187
14286
|
"scrollable": [4],
|
|
14287
|
+
"disableTopLayer": [4, "disable-top-layer"],
|
|
14188
14288
|
"focusableElementsArray": [32],
|
|
14189
14289
|
"showModal": [64],
|
|
14190
14290
|
"hideModal": [64]
|
|
@@ -14211,6 +14311,10 @@ class PdsModalContent {
|
|
|
14211
14311
|
*/
|
|
14212
14312
|
this.userSetBorder = false;
|
|
14213
14313
|
}
|
|
14314
|
+
// Unwraps a nested .pds-modal-content left by a page-cache (Turbo, bfcache) reconnect.
|
|
14315
|
+
componentDidRender() {
|
|
14316
|
+
unwrapReconnectedContent(this.el.querySelector('.pds-modal-content'), '.pds-modal-content');
|
|
14317
|
+
}
|
|
14214
14318
|
componentWillLoad() {
|
|
14215
14319
|
// Check if border was explicitly set via attribute or property
|
|
14216
14320
|
const borderAttr = this.el.getAttribute('border');
|
|
@@ -14372,10 +14476,10 @@ class PdsModalContent {
|
|
|
14372
14476
|
render() {
|
|
14373
14477
|
// Only apply max-height style if it's not 'none'
|
|
14374
14478
|
const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
|
|
14375
|
-
return (hAsync(Host, { key: '
|
|
14479
|
+
return (hAsync(Host, { key: 'f3e75b90be56bb27ba5f4fde473fac474846f346' }, hAsync("div", { key: '5035d5fa319fe2aaa8adffb825f0d2babfd11a26', class: {
|
|
14376
14480
|
'pds-modal-content': true,
|
|
14377
14481
|
[`pds-modal-content--border-${this.border}`]: true
|
|
14378
|
-
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '
|
|
14482
|
+
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '73299f6f7045ea50a5bf134da04f1e30cd9f233c' }))));
|
|
14379
14483
|
}
|
|
14380
14484
|
get el() { return getElement(this); }
|
|
14381
14485
|
static get style() { return pdsModalContentCss(); }
|
|
@@ -14398,9 +14502,14 @@ class PdsModalFooter {
|
|
|
14398
14502
|
constructor(hostRef) {
|
|
14399
14503
|
registerInstance(this, hostRef);
|
|
14400
14504
|
}
|
|
14505
|
+
// Unwraps a nested .pds-modal__footer left by a page-cache (Turbo, bfcache) reconnect.
|
|
14506
|
+
componentDidRender() {
|
|
14507
|
+
unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
|
|
14508
|
+
}
|
|
14401
14509
|
render() {
|
|
14402
|
-
return (hAsync("footer", { key: '
|
|
14510
|
+
return (hAsync("footer", { key: '1220d6319585df0128924ebac52569af7645f525', class: "pds-modal__footer" }, hAsync("slot", { key: '1bbbf4897f41c802fc5773154cee3930290c906a' })));
|
|
14403
14511
|
}
|
|
14512
|
+
get el() { return getElement(this); }
|
|
14404
14513
|
static get style() { return pdsModalFooterCss(); }
|
|
14405
14514
|
static get cmpMeta() { return {
|
|
14406
14515
|
"$flags$": 260,
|
|
@@ -14418,9 +14527,14 @@ class PdsModalHeader {
|
|
|
14418
14527
|
constructor(hostRef) {
|
|
14419
14528
|
registerInstance(this, hostRef);
|
|
14420
14529
|
}
|
|
14530
|
+
// Unwraps a nested .pds-modal__header left by a page-cache (Turbo, bfcache) reconnect.
|
|
14531
|
+
componentDidRender() {
|
|
14532
|
+
unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
|
|
14533
|
+
}
|
|
14421
14534
|
render() {
|
|
14422
|
-
return (hAsync("header", { key: '
|
|
14535
|
+
return (hAsync("header", { key: '0fd8a216ae8dc149b59cd29c8706d5a45a21de15', class: "pds-modal__header" }, hAsync("slot", { key: '4bf075dfd4870621e6e0b710fcdb42aac53810b3' })));
|
|
14423
14536
|
}
|
|
14537
|
+
get el() { return getElement(this); }
|
|
14424
14538
|
static get style() { return pdsModalHeaderCss(); }
|
|
14425
14539
|
static get cmpMeta() { return {
|
|
14426
14540
|
"$flags$": 260,
|
|
@@ -14492,7 +14606,7 @@ function pluralize(el, count, forms, vars) {
|
|
|
14492
14606
|
return formatMessage(template, Object.assign({ count }, vars));
|
|
14493
14607
|
}
|
|
14494
14608
|
|
|
14495
|
-
const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);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:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
|
|
14609
|
+
const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);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:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
|
|
14496
14610
|
|
|
14497
14611
|
/**
|
|
14498
14612
|
* @slot (default) - Static option elements for the multiselect
|
|
@@ -15527,16 +15641,16 @@ class PdsMultiselect {
|
|
|
15527
15641
|
'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
|
|
15528
15642
|
'pds-multiselect__trigger--has-value': hasSelections,
|
|
15529
15643
|
'pds-multiselect__trigger--pill-inline': true,
|
|
15530
|
-
}, onClick: this.handleTriggerClick }, this.renderInlinePills(), hAsync("button", { ref: el => (this.triggerEl = el), type: "button", id: this.componentId, part: "pill-toggle", class: "pds-multiselect__pill-toggle", disabled: this.disabled, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.componentId}-label` : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.
|
|
15644
|
+
}, onClick: this.handleTriggerClick }, this.renderInlinePills(), hAsync("button", { ref: el => (this.triggerEl = el), type: "button", id: this.componentId, part: "pill-toggle", class: "pds-multiselect__pill-toggle", disabled: this.disabled, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.componentId}-label` : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onKeyDown: this.handleTriggerKeyDown }, hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge })))) : (hAsync("button", { ref: el => (this.triggerEl = el), type: "button", part: "trigger", class: {
|
|
15531
15645
|
'pds-multiselect__trigger': true,
|
|
15532
15646
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
15533
15647
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
15534
15648
|
'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
|
|
15535
15649
|
'pds-multiselect__trigger--has-value': hasSelections,
|
|
15536
|
-
}, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.
|
|
15650
|
+
}, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hAsync("span", { class: {
|
|
15537
15651
|
'pds-multiselect__trigger-text': true,
|
|
15538
15652
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
15539
|
-
} }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '
|
|
15653
|
+
} }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '199804f5352818d32542864e3a61f7a9364cc2e3', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: 'e6855ff0aaf18f59dced2df5d636cadb4d47427b', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: '29eae23d8db31b9b9c292d5cd1dc5f641613ed32', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'aad6fd945998957cd28ab6eb97c4d80f0a732ea5', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '7d0d56a1e097cfc0c7396c1957d16014cb071b1e', style: { display: 'none' } }, hAsync("slot", { key: '6e7fc9dbdab3977248439aa5ea14f13e0f45bbc6' })))));
|
|
15540
15654
|
}
|
|
15541
15655
|
static get formAssociated() { return true; }
|
|
15542
15656
|
get el() { return getElement(this); }
|
|
@@ -16282,7 +16396,7 @@ class PdsProperty {
|
|
|
16282
16396
|
|
|
16283
16397
|
const labelCss$3 = () => `.sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
|
|
16284
16398
|
|
|
16285
|
-
const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{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}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-white);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{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}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}`;
|
|
16399
|
+
const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{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}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-white);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{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}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}`;
|
|
16286
16400
|
|
|
16287
16401
|
/**
|
|
16288
16402
|
* @slot image - Custom image content to display instead of the default radio input
|
|
@@ -16363,13 +16477,25 @@ class PdsRadio {
|
|
|
16363
16477
|
// Expose type property on the element instance to match native form element behavior
|
|
16364
16478
|
exposeTypeProperty(this.el, () => this._type);
|
|
16365
16479
|
}
|
|
16480
|
+
// Discards stale hidden label/message/wrapper copies left by a page-cache (Turbo, bfcache) reconnect, rescuing real [slot="image"] content stranded inside a stale image-container first.
|
|
16481
|
+
componentDidRender() {
|
|
16482
|
+
const freshImageContainer = this.el.querySelector('.pds-radio__image-container:not([hidden])');
|
|
16483
|
+
const staleSelector = '.pds-radio__image-container[hidden], .pds-radio__content-wrapper[hidden], label[hidden], .pds-radio__message[hidden]';
|
|
16484
|
+
Array.from(this.el.querySelectorAll(staleSelector)).forEach((stale) => {
|
|
16485
|
+
const imageSlotContent = stale.querySelector('[slot="image"]');
|
|
16486
|
+
if (imageSlotContent !== null && freshImageContainer !== null) {
|
|
16487
|
+
freshImageContainer.appendChild(imageSlotContent);
|
|
16488
|
+
}
|
|
16489
|
+
stale.remove();
|
|
16490
|
+
});
|
|
16491
|
+
}
|
|
16366
16492
|
render() {
|
|
16367
16493
|
const renderLabelAndMessages = () => [
|
|
16368
|
-
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: '
|
|
16494
|
+
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: 'd7534f457e24558e0e206e2de82eac5f59b47d8a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), hAsync("span", { key: 'bfb6a44684fcbb271c38da03b620e97067af6634', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
|
|
16369
16495
|
this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
|
|
16370
|
-
this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '
|
|
16496
|
+
this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'd0c120ce21687b550b22546330d647f9876ee4d6', icon: danger, size: "small" }), this.errorMessage))
|
|
16371
16497
|
];
|
|
16372
|
-
return (hAsync(Host, { key: '
|
|
16498
|
+
return (hAsync(Host, { key: '55e4f32776bc8a5835801cd7d48b29045d4ce17f', class: this.classNames() }, this.hasImage() && (hAsync("div", { key: '3d9bf1d624c00ea90971638b2de7b548aec73330', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'a256ede1340cf052570330342b1ed9e5f299c821', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
|
|
16373
16499
|
}
|
|
16374
16500
|
get el() { return getElement(this); }
|
|
16375
16501
|
static get style() { return labelCss$3() + pdsRadioCss(); }
|
|
@@ -16502,6 +16628,22 @@ class PdsRadioGroup {
|
|
|
16502
16628
|
}
|
|
16503
16629
|
this.updateChildRadios();
|
|
16504
16630
|
}
|
|
16631
|
+
// Unwraps a stale nested .pds-radio-group__radios and discards stale label/message siblings left by a page-cache (Turbo, bfcache) reconnect.
|
|
16632
|
+
componentDidRender() {
|
|
16633
|
+
const radiosContainer = this.el.querySelector('.pds-radio-group__radios');
|
|
16634
|
+
if (radiosContainer === null)
|
|
16635
|
+
return;
|
|
16636
|
+
const staleSelector = '.pds-radio-group__radios, .pds-radio-group__label, .pds-radio-group__message';
|
|
16637
|
+
const findStale = () => Array.from(radiosContainer.children).find((child) => child.matches(staleSelector));
|
|
16638
|
+
let stale = findStale();
|
|
16639
|
+
while (stale !== undefined) {
|
|
16640
|
+
if (stale.matches('.pds-radio-group__radios')) {
|
|
16641
|
+
Array.from(stale.childNodes).forEach((node) => radiosContainer.insertBefore(node, stale));
|
|
16642
|
+
}
|
|
16643
|
+
stale.remove();
|
|
16644
|
+
stale = findStale();
|
|
16645
|
+
}
|
|
16646
|
+
}
|
|
16505
16647
|
classNames() {
|
|
16506
16648
|
const classNames = [];
|
|
16507
16649
|
if (this.invalid) {
|
|
@@ -16544,13 +16686,13 @@ class PdsRadioGroup {
|
|
|
16544
16686
|
render() {
|
|
16545
16687
|
const gapValue = this.getGapValue();
|
|
16546
16688
|
const ariaDescribedBy = this.getAriaDescribedBy();
|
|
16547
|
-
return (hAsync(Host, { key: '
|
|
16689
|
+
return (hAsync(Host, { key: '0f6b6ddc2af79fc470c050ed6b5588640fe0d7b6', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
|
|
16548
16690
|
'--pds-radio-group-gap': gapValue,
|
|
16549
|
-
} }, this.groupLabel && (hAsync("div", { key: '
|
|
16691
|
+
} }, this.groupLabel && (hAsync("div", { key: '77dbdc4801c3ff50fa3ea6a84d3d6aa51702ad02', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: 'c8d7f6aebc39f72a57f353ac2f8677139ac77e71', class: {
|
|
16550
16692
|
'pds-radio-group__radios': true,
|
|
16551
16693
|
'pds-radio-group__radios--row': this.direction === 'row',
|
|
16552
16694
|
'pds-radio-group__radios--column': this.direction === 'column',
|
|
16553
|
-
} }, hAsync("slot", { key: '
|
|
16695
|
+
} }, hAsync("slot", { key: '605e640fada693696e0b71205d18904b0af887b0', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: '13cc1c7a6b70ce6826f91a68380bc46188b218e1', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: '693dd2f784eb5de04f1b885948e7064936cffa7d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '1569aeeeffde77d4920627020d04983e860ea52e', icon: danger, size: "small" }), this.errorMessage))));
|
|
16554
16696
|
}
|
|
16555
16697
|
get el() { return getElement(this); }
|
|
16556
16698
|
static get watchers() { return {
|
|
@@ -16675,7 +16817,7 @@ const pdsSelectTokensCss = () => `:host{--pine-select-color-background-danger:va
|
|
|
16675
16817
|
|
|
16676
16818
|
const labelCss$2 = () => `: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)}`;
|
|
16677
16819
|
|
|
16678
|
-
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 var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{color:var(--pine-color-text);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-end-end-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-end-start-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-start-end-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));border-start-start-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));color:var(--pine-color-text);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)}:host-context([data-theme=dark]) select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-color-red-950)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-disabled) .pds-select__select-icon{color:var(--pine-color-text-disabled)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) :host(.is-invalid) select{background-color:var(--pine-color-red-950)}: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{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.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}`;
|
|
16820
|
+
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 var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{color:var(--pine-color-text);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-end-end-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-end-start-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-start-end-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));border-start-start-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));color:var(--pine-color-text);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)}:host-context([data-theme=dark]) select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-color-red-950)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-disabled) .pds-select__select-icon{color:var(--pine-color-text-disabled)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) :host(.is-invalid) select{background-color:var(--pine-color-red-950)}: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{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.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:calc(var(--pine-z-index-raised) - 1)}.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}`;
|
|
16679
16821
|
|
|
16680
16822
|
/**
|
|
16681
16823
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
@@ -16820,6 +16962,11 @@ class PdsSelect {
|
|
|
16820
16962
|
return null;
|
|
16821
16963
|
return (hAsync("div", { class: "pds-select__message" }, this.getHelperMessage(), this.getErrorMessage()));
|
|
16822
16964
|
}
|
|
16965
|
+
// The field also renders as invalid whenever an error message is present, via
|
|
16966
|
+
// `select:has(~ .pds-select__message .pds-select__error-message)` in the styles.
|
|
16967
|
+
isInvalid() {
|
|
16968
|
+
return Boolean(this.invalid) || Boolean(this.errorMessage);
|
|
16969
|
+
}
|
|
16823
16970
|
classNames() {
|
|
16824
16971
|
const classNames = [];
|
|
16825
16972
|
if (this.invalid) {
|
|
@@ -16903,7 +17050,7 @@ class PdsSelect {
|
|
|
16903
17050
|
}
|
|
16904
17051
|
render() {
|
|
16905
17052
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
16906
|
-
return (hAsync(Host, { key: '
|
|
17053
|
+
return (hAsync(Host, { key: 'c74f5e86a09bd3fe6e8048ca103ec9aa66a98fc6', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '76de23d6b0d9e32fab48e09a8f6ee3211e196115', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '1db87074447cbc819e6b06dd89135d018656a471', class: "pds-select__label-wrapper" }, hAsync("label", { key: 'bc28c3b3361a19ee14a1b79edda736340009d87d', htmlFor: this.componentId }, hAsync("span", { key: 'f0828e0e83c7c0d7cf50e08df4b861dad4df9eb9', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: 'd7d254887c976a95ad1f1da2ea540d6d3f986630', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "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, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), hAsync("div", { key: '793a84d41bd5e18d64757238704a053b1135a83c', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: '27ed9ff31bbf83fcbd2ed8dd2b23b97422b18d25', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: '43d415eab0fc8a3c02e19848a5622ea43f04256e', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
|
|
16907
17054
|
}
|
|
16908
17055
|
static get formAssociated() { return true; }
|
|
16909
17056
|
get el() { return getElement(this); }
|
|
@@ -19694,6 +19841,19 @@ class PdsSortableItem {
|
|
|
19694
19841
|
*/
|
|
19695
19842
|
this.showHandle = false;
|
|
19696
19843
|
}
|
|
19844
|
+
// Discards stale handle/actions siblings left by a page-cache (Turbo, bfcache) reconnect; the fresh handle is always first, the fresh actions wrapper always last.
|
|
19845
|
+
componentDidRender() {
|
|
19846
|
+
const handles = Array.from(this.el.children).filter((child) => child.matches('.pds-sortable-item__handle'));
|
|
19847
|
+
handles.slice(1).forEach((stale) => stale.remove());
|
|
19848
|
+
const actionsWrappers = Array.from(this.el.children).filter((child) => child.matches('.pds-sortable-item__actions'));
|
|
19849
|
+
const freshActions = actionsWrappers[actionsWrappers.length - 1];
|
|
19850
|
+
actionsWrappers.slice(0, -1).forEach((stale) => {
|
|
19851
|
+
if (freshActions !== undefined) {
|
|
19852
|
+
Array.from(stale.children).forEach((node) => freshActions.appendChild(node));
|
|
19853
|
+
}
|
|
19854
|
+
stale.remove();
|
|
19855
|
+
});
|
|
19856
|
+
}
|
|
19697
19857
|
componentWillRender() {
|
|
19698
19858
|
// When the parent sortable has a type of 'handle', the sortable items
|
|
19699
19859
|
// will automatically set showHandle to 'true'.
|
|
@@ -19703,7 +19863,7 @@ class PdsSortableItem {
|
|
|
19703
19863
|
}
|
|
19704
19864
|
}
|
|
19705
19865
|
render() {
|
|
19706
|
-
return (hAsync(Host, { key: '
|
|
19866
|
+
return (hAsync(Host, { key: '5533907ee217d31754ac19bf712bdb903e3b1614', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: '37642112619986b21c16c243e8d140ae82c869da', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: '71ec5188d7443c39ab00ba8b24ffbfbdfb3bd5b4', "aria-hidden": "true", icon: handle }))), hAsync("slot", { key: '4c5f80514336f40086a3b92d8c3d5ebb04115f4a' }), this.enableActions && (hAsync("div", { key: 'ca821be132fb88e0faa207817bb27db488475d96', class: "pds-sortable-item__actions" }, hAsync("slot", { key: '50fc7b02c86246cd60710996399c53b9f1f669c4', name: "sortable-item-actions" })))));
|
|
19707
19867
|
}
|
|
19708
19868
|
get el() { return getElement(this); }
|
|
19709
19869
|
static get style() { return pdsSortableItemCss(); }
|
|
@@ -19807,9 +19967,9 @@ class PdsSwitch {
|
|
|
19807
19967
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
19808
19968
|
}
|
|
19809
19969
|
render() {
|
|
19810
|
-
return (hAsync(Host, { key: '96ee8c40c04e95b461ba2942b740503897a56b27', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, hAsync("label", { key: '441d6854f2c0b02ecf3d874198b3e0636d68c83b', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '
|
|
19811
|
-
hAsync("div", { key: '
|
|
19812
|
-
hAsync("div", { key: '
|
|
19970
|
+
return (hAsync(Host, { key: '96ee8c40c04e95b461ba2942b740503897a56b27', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, hAsync("label", { key: '441d6854f2c0b02ecf3d874198b3e0636d68c83b', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: 'ed0c344ab46d83faf902571fcd282a605f5cfbec', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "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)), hAsync("span", { key: 'a2e89156f56d6c921be9b866823bb4b36710b40f', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
|
|
19971
|
+
hAsync("div", { key: '1465778f0a69d4c87108a80603d123bf0500911d', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
19972
|
+
hAsync("div", { key: '2a652c3019f45a060283f98ea97ac83e17d7de33', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '438895d9ad8799b540ab239ac90bedcb0231d2f0', icon: danger, size: "small" }), this.errorMessage)));
|
|
19813
19973
|
}
|
|
19814
19974
|
static get formAssociated() { return true; }
|
|
19815
19975
|
get el() { return getElement(this); }
|
|
@@ -19865,6 +20025,10 @@ class PdsTab {
|
|
|
19865
20025
|
/** @internal */
|
|
19866
20026
|
this.selected = false;
|
|
19867
20027
|
}
|
|
20028
|
+
// Unwraps a nested <a>/<button> left by a page-cache (Turbo, bfcache) reconnect.
|
|
20029
|
+
componentDidRender() {
|
|
20030
|
+
unwrapReconnectedContent(this.el.querySelector('.pds-tab__content'), 'a.pds-tab, button.pds-tab', '.pds-tab__content');
|
|
20031
|
+
}
|
|
19868
20032
|
onTabClick(index, parentComponentId) {
|
|
19869
20033
|
if (this.disabled)
|
|
19870
20034
|
return;
|
|
@@ -20860,8 +21024,12 @@ class PdsTabpanel {
|
|
|
20860
21024
|
/** @internal */
|
|
20861
21025
|
this.stretch = false;
|
|
20862
21026
|
}
|
|
21027
|
+
// Unwraps a nested .pds-tabpanel left by a page-cache (Turbo, bfcache) reconnect.
|
|
21028
|
+
componentDidRender() {
|
|
21029
|
+
unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
|
|
21030
|
+
}
|
|
20863
21031
|
render() {
|
|
20864
|
-
return (hAsync(Host, { key: '
|
|
21032
|
+
return (hAsync(Host, { key: '342748daeeba7a5e0d2daef6eb0d1c787cdb47ea', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, hAsync("div", { key: '72826548113720f89b9adcf017c1ca02a9f7a02a', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: 'f12d5bacd3ce3509c84720cdbd4441c82b1f8ced' }))));
|
|
20865
21033
|
}
|
|
20866
21034
|
get el() { return getElement(this); }
|
|
20867
21035
|
static get style() { return pdsTabpanelCss(); }
|
|
@@ -21513,9 +21681,9 @@ class PdsTextarea {
|
|
|
21513
21681
|
render() {
|
|
21514
21682
|
const value = this.getValue();
|
|
21515
21683
|
return (hAsync(Host, { key: 'd13869d989752c76c80a46ebb0291df2c0546cc2', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '19454f642896485dc22bc5dac8b6ed3b4ae5627a', class: "pds-textarea" }, this.label &&
|
|
21516
|
-
hAsync("div", { key: 'def9e117ba3667a542e8cec32c2eabfa701c3305', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '893a1db325ece460c627e72b765289098823e49e', htmlFor: this.componentId }, hAsync("span", { key: 'd047f17441aa81800057d7403af15f6e38c53f6c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '7d0f2fab56fee9b9d9e0facabc7e607cb6bee23b', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: '
|
|
21517
|
-
hAsync("p", { key: '
|
|
21518
|
-
hAsync("p", { key: '
|
|
21684
|
+
hAsync("div", { key: 'def9e117ba3667a542e8cec32c2eabfa701c3305', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '893a1db325ece460c627e72b765289098823e49e', htmlFor: this.componentId }, hAsync("span", { key: 'd047f17441aa81800057d7403af15f6e38c53f6c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '7d0f2fab56fee9b9d9e0facabc7e607cb6bee23b', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: '261e6031c61832acde2d595248ccdc8bd5c84768', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
|
|
21685
|
+
hAsync("p", { key: 'de40f9d13bda3d9a224349b7f4ca38194e7adbb5', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
21686
|
+
hAsync("p", { key: '1306917ce521c3ad0d303d255f9e7aefd0e65de7', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '1c9e22b9b4bf84f671797bbfb9080bdbdb7619a7', icon: danger, size: "small" }), this.errorMessage))));
|
|
21519
21687
|
}
|
|
21520
21688
|
static get formAssociated() { return true; }
|
|
21521
21689
|
get el() { return getElement(this); }
|
|
@@ -21771,6 +21939,10 @@ class PdsTooltip {
|
|
|
21771
21939
|
* @defaultValue false
|
|
21772
21940
|
*/
|
|
21773
21941
|
this.opened = false;
|
|
21942
|
+
// connectedCallback fires on every reconnect (unlike componentWillLoad/componentDidLoad,
|
|
21943
|
+
// which are one-time), so resetting this here re-arms exactly one reconnect-cleanup pass
|
|
21944
|
+
// per connect instead of re-scanning on every render for the component's whole lifetime.
|
|
21945
|
+
this.hasCheckedReconnect = false;
|
|
21774
21946
|
this.handleHide = () => {
|
|
21775
21947
|
if (this.opened && !this._isInteractiveOpen) {
|
|
21776
21948
|
return;
|
|
@@ -21831,6 +22003,9 @@ class PdsTooltip {
|
|
|
21831
22003
|
}
|
|
21832
22004
|
// no return; Stencil ignores teardown functions here
|
|
21833
22005
|
}
|
|
22006
|
+
connectedCallback() {
|
|
22007
|
+
this.hasCheckedReconnect = false;
|
|
22008
|
+
}
|
|
21834
22009
|
disconnectedCallback() {
|
|
21835
22010
|
window.removeEventListener('pageshow', this.handlePageShow);
|
|
21836
22011
|
if (this.slotMutationObserver !== null) {
|
|
@@ -21851,7 +22026,30 @@ class PdsTooltip {
|
|
|
21851
22026
|
this.stopAutoUpdate = null;
|
|
21852
22027
|
}
|
|
21853
22028
|
}
|
|
22029
|
+
// Unwraps stale nested trigger/content-slot-wrapper siblings left by a page-cache (Turbo, bfcache) reconnect, rerouting content-slot content back to the real content wrapper. Drains both wrappers (not just trigger) so content rerouted into contentWrapper is itself re-checked for further nesting.
|
|
22030
|
+
unwrapReconnectedSlots() {
|
|
22031
|
+
// Direct children only — querySelector would find a stale nested wrapper first.
|
|
22032
|
+
const trigger = Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__trigger'));
|
|
22033
|
+
const contentWrapper = Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__content-slot-wrapper'));
|
|
22034
|
+
if (trigger === undefined || contentWrapper === undefined)
|
|
22035
|
+
return;
|
|
22036
|
+
const staleSelector = '.pds-tooltip__trigger, .pds-tooltip__content-slot-wrapper';
|
|
22037
|
+
const findStaleIn = (root) => Array.from(root.children).find((child) => child.matches(staleSelector));
|
|
22038
|
+
[trigger, contentWrapper].forEach((root) => {
|
|
22039
|
+
let stale = findStaleIn(root);
|
|
22040
|
+
while (stale !== undefined) {
|
|
22041
|
+
const destination = stale.matches('.pds-tooltip__content-slot-wrapper') ? contentWrapper : trigger;
|
|
22042
|
+
Array.from(stale.childNodes).forEach((node) => destination === root ? root.insertBefore(node, stale) : destination.appendChild(node));
|
|
22043
|
+
stale.remove();
|
|
22044
|
+
stale = findStaleIn(root);
|
|
22045
|
+
}
|
|
22046
|
+
});
|
|
22047
|
+
}
|
|
21854
22048
|
componentDidRender() {
|
|
22049
|
+
if (!this.hasCheckedReconnect) {
|
|
22050
|
+
this.unwrapReconnectedSlots();
|
|
22051
|
+
this.hasCheckedReconnect = true;
|
|
22052
|
+
}
|
|
21855
22053
|
if (this.opened && this.portalEl === null) {
|
|
21856
22054
|
this.createPortal();
|
|
21857
22055
|
}
|
|
@@ -22039,9 +22237,9 @@ class PdsTooltip {
|
|
|
22039
22237
|
}
|
|
22040
22238
|
render() {
|
|
22041
22239
|
const hostId = this.componentId || undefined;
|
|
22042
|
-
return (hAsync(Host, { key: '
|
|
22240
|
+
return (hAsync(Host, { key: '10913091177f60b7de464e302067998e1a847304', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: 'f61689273c965a8374e44907003f1ec83b8f28d4', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
|
|
22043
22241
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
22044
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
22242
|
+
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '7dbbcff01c291b1ec431c80fce898c1ac3b30a86' })), hAsync("div", { key: 'f87df4b6ead21e9f96271c5717ed93b2d9992f65', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: 'def9f799ef340e59fbf34a0fb3c0271f0fcfd2ca', name: "content" }))));
|
|
22045
22243
|
}
|
|
22046
22244
|
get el() { return getElement(this); }
|
|
22047
22245
|
static get watchers() { return {
|