@pine-ds/core 4.9.1 → 4.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/pds-checkbox2.js +1 -1
- package/components/pds-chip2.js +1 -1
- package/components/pds-combobox.js +2 -2
- package/components/pds-dropdown-menu.js +1 -1
- package/components/truncation-tooltip.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/pds-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/pds-chip.cjs.entry.js +5 -3
- package/dist/cjs/pds-combobox.cjs.entry.js +101 -15
- package/dist/cjs/pds-copytext.cjs.entry.js +1 -1
- package/dist/cjs/pds-dropdown-menu.cjs.entry.js +58 -46
- package/dist/cjs/pds-table-cell.cjs.entry.js +1 -1
- package/dist/cjs/pds-text.cjs.entry.js +1 -1
- package/dist/cjs/pine-core.cjs.js +1 -1
- package/dist/cjs/{truncation-tooltip-DdB78RIe.js → truncation-tooltip-Bikp7n9I.js} +1 -1
- package/dist/collection/components/pds-checkbox/pds-checkbox.css +20 -14
- package/dist/collection/components/pds-chip/pds-chip.js +4 -2
- package/dist/collection/components/pds-combobox/grouped-options-panel.js +39 -1
- package/dist/collection/components/pds-combobox/pds-combobox.css +37 -1
- package/dist/collection/components/pds-combobox/pds-combobox.js +62 -14
- package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js +48 -0
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js +64 -46
- package/dist/collection/utils/truncation-tooltip.js +1 -1
- package/dist/docs.json +8 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pds-checkbox.entry.js +1 -1
- package/dist/esm/pds-chip.entry.js +5 -3
- package/dist/esm/pds-combobox.entry.js +101 -15
- package/dist/esm/pds-copytext.entry.js +1 -1
- package/dist/esm/pds-dropdown-menu.entry.js +58 -46
- package/dist/esm/pds-table-cell.entry.js +1 -1
- package/dist/esm/pds-text.entry.js +1 -1
- package/dist/esm/pine-core.js +1 -1
- package/dist/esm/{truncation-tooltip-CRSdYzpA.js → truncation-tooltip-DBcPipr9.js} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-combobox.entry.js +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js +1 -1
- package/dist/esm-es5/pds-text.entry.js +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/esm-es5/truncation-tooltip-DBcPipr9.js +1 -0
- package/dist/pine-core/p-0b7b3fc2.system.entry.js +3 -0
- package/dist/pine-core/{p-9a776443.entry.js → p-124a0a24.entry.js} +1 -1
- package/dist/pine-core/p-128c04e7.entry.js +1 -0
- package/dist/pine-core/{p-3d34b967.system.entry.js → p-3a1dc752.system.entry.js} +1 -1
- package/dist/pine-core/{p-20079552.system.entry.js → p-639acef8.system.entry.js} +1 -1
- package/dist/pine-core/{p-beb7a430.entry.js → p-97356d4b.entry.js} +1 -1
- package/dist/pine-core/p-BZVUD2on.js +1 -0
- package/dist/pine-core/p-Dj-z_ugg.system.js +1 -0
- package/dist/pine-core/p-XK45dzWR.system.js +1 -1
- package/dist/pine-core/{p-4d1a8803.entry.js → p-afc2f165.entry.js} +1 -1
- package/dist/pine-core/p-c6a9e62c.system.entry.js +1 -0
- package/dist/pine-core/p-da8b864a.entry.js +2 -0
- package/dist/pine-core/p-dd7ded84.entry.js +1 -0
- package/dist/pine-core/p-de455073.system.entry.js +1 -0
- package/dist/pine-core/{p-1cc39908.system.entry.js → p-eb56af4a.system.entry.js} +1 -1
- package/dist/pine-core/p-f354dbac.entry.js +1 -0
- package/dist/pine-core/{p-93fd7dd8.system.entry.js → p-f834cb07.system.entry.js} +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/types/components/pds-combobox/combobox-interface.d.ts +26 -0
- package/dist/types/components/pds-combobox/grouped-options-panel.d.ts +17 -0
- package/dist/types/components/pds-combobox/pds-combobox.d.ts +12 -2
- package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu.d.ts +4 -0
- package/dist/types/utils/truncation-tooltip.d.ts +1 -1
- package/hydrate/index.js +166 -66
- package/hydrate/index.mjs +166 -66
- package/package.json +2 -2
- package/dist/esm-es5/truncation-tooltip-CRSdYzpA.js +0 -1
- package/dist/pine-core/p-37718637.entry.js +0 -1
- package/dist/pine-core/p-383d84f4.entry.js +0 -2
- package/dist/pine-core/p-3e30a761.entry.js +0 -1
- package/dist/pine-core/p-54f1e86f.system.entry.js +0 -1
- package/dist/pine-core/p-73efb1ed.system.entry.js +0 -1
- package/dist/pine-core/p-DQyF6v9Q.system.js +0 -1
- package/dist/pine-core/p-DwQ5Tjis.js +0 -1
- package/dist/pine-core/p-b3d4f97a.system.entry.js +0 -3
- package/dist/pine-core/p-f018af99.entry.js +0 -1
package/hydrate/index.mjs
CHANGED
|
@@ -7125,7 +7125,7 @@ const isSpecTest = () => {
|
|
|
7125
7125
|
|
|
7126
7126
|
const labelCss$5 = () => `: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)}`;
|
|
7127
7127
|
|
|
7128
|
-
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input
|
|
7128
|
+
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}:host(.is-indeterminate) input:disabled::after{border-color:var(--pine-color-border)}:host(.is-indeterminate) input::after{border:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width) solid var(--pine-color-text-primary);border-block-start:var(--pine-border-width) solid var(--pine-color-text-primary);content:"";display:block;height:0;inset:0;margin:auto;position:absolute;-webkit-transform:none;transform:none;width:8px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:var(--pine-border-width) solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline:0;margin-inline:auto;position:absolute;-webkit-transform:translateY(-60%) rotate(43deg);transform:translateY(-60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host(:not(.is-indeterminate)) input:checked:dir(rtl)::after{-webkit-transform:translateY(-60%) rotate(-43deg);transform:translateY(-60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) label,:host(.has-label-slot) label>span{min-width:0}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.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-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}:host(.pds-checkbox--pill){position:relative}:host(.pds-checkbox--pill) label{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}:host(.pds-checkbox--pill) label span{min-width:0;overflow-wrap:anywhere}:host(.pds-checkbox--pill) label:hover{border-color:var(--pine-color-text)}:host(.pds-checkbox--pill) label:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}:host(.pds-checkbox--pill) label:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}:host(.pds-checkbox--pill) label:has(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}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:var(--pine-color-text-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled)}@media (forced-colors: active){:host(.pds-checkbox--pill) label:has(input:disabled){border-color:GrayText}:host(.pds-checkbox--pill) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}:host(.pds-checkbox--pill) .pds-checkbox__message{-webkit-margin-start:0;margin-inline-start:0}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label{border-color:var(--pine-color-border-danger);color:var(--pine-color-text-active)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:var(--pine-color-border-danger);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:focus-visible){outline:var(--pine-outline-focus-danger)}@media (forced-colors: active){:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}`;
|
|
7129
7129
|
|
|
7130
7130
|
/**
|
|
7131
7131
|
* @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
|
|
@@ -9063,7 +9063,7 @@ function matchesSafely(el, selector) {
|
|
|
9063
9063
|
|
|
9064
9064
|
// Controls that clipped text can sit inside that already take focus, so the text adds no tab stop of its own.
|
|
9065
9065
|
// Not any `[tabindex]`: a focusable scroll region full of chips would show every chip's tooltip at once.
|
|
9066
|
-
const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"]';
|
|
9066
|
+
const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"], [role="treeitem"]';
|
|
9067
9067
|
/** CSS class prefix used for truncation tooltip portal elements */
|
|
9068
9068
|
const TOOLTIP_CLASS = 'pds-truncation-tooltip';
|
|
9069
9069
|
/**
|
|
@@ -9516,12 +9516,14 @@ class PdsChip {
|
|
|
9516
9516
|
this.destroyTruncationTooltip();
|
|
9517
9517
|
if (this.labelTextEl) {
|
|
9518
9518
|
const wrapper = this.el.closest(FOCUSABLE_WRAPPER);
|
|
9519
|
+
// Hidden from assistive tech, a tab stop would be focusable with no name; hover still reveals it.
|
|
9520
|
+
const hidden = this.el.closest('[aria-hidden="true"]') !== null;
|
|
9519
9521
|
this.truncationCleanup = setupTruncationTooltip(Object.assign({ hostEl: this.el, contentEl: this.labelTextEl, getTooltipText: () => this.el.textContent || '',
|
|
9520
9522
|
// The dropdown variant's label span already sits inside
|
|
9521
9523
|
// `<button class="pds-chip__button">`, which is already focusable and
|
|
9522
9524
|
// bubbles focusin to the host — a tabindex on the span too would nest
|
|
9523
9525
|
// a second tab stop inside the button.
|
|
9524
|
-
manageTabIndex: this.effectiveVariant !== 'dropdown' && !wrapper,
|
|
9526
|
+
manageTabIndex: this.effectiveVariant !== 'dropdown' && !wrapper && !hidden,
|
|
9525
9527
|
// A wrapping control sits outside the host, so its focus never reaches the host's listener.
|
|
9526
9528
|
focusEl: wrapper !== null && wrapper !== void 0 ? wrapper : this.el }, besideListbox(wrapper)));
|
|
9527
9529
|
this.tooltipBoundEl = this.labelTextEl;
|
|
@@ -9655,7 +9657,7 @@ class PdsChip {
|
|
|
9655
9657
|
const hostClass = this.classNames();
|
|
9656
9658
|
const hostStyles = this.hostStyles;
|
|
9657
9659
|
this.hostKeeper.record(hostClass, hostStyles);
|
|
9658
|
-
return (hAsync(Host, { key: '
|
|
9660
|
+
return (hAsync(Host, { key: '0e6b05bfeae1d3b7d5cc23e71aaad2fa00fc7ddf', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
9659
9661
|
}
|
|
9660
9662
|
get el() { return getElement(this); }
|
|
9661
9663
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
@@ -11104,6 +11106,44 @@ function groupIconOf(optgroup) {
|
|
|
11104
11106
|
function optionIconOf(option) {
|
|
11105
11107
|
return iconOf(option);
|
|
11106
11108
|
}
|
|
11109
|
+
/** Every `pds-chip` sentiment: a sentiment added to `ChipSentimentType` fails to compile until it's listed. */
|
|
11110
|
+
const BADGE_SENTIMENTS = {
|
|
11111
|
+
accent: true,
|
|
11112
|
+
brand: true,
|
|
11113
|
+
danger: true,
|
|
11114
|
+
info: true,
|
|
11115
|
+
neutral: true,
|
|
11116
|
+
solid: true,
|
|
11117
|
+
subtle: true,
|
|
11118
|
+
success: true,
|
|
11119
|
+
warning: true,
|
|
11120
|
+
};
|
|
11121
|
+
const isBadgeSentiment = (value) => value !== null && Object.prototype.hasOwnProperty.call(BADGE_SENTIMENTS, value);
|
|
11122
|
+
/**
|
|
11123
|
+
* An option's badge from its `data-badge*` attributes, or null without a label. An unknown
|
|
11124
|
+
* sentiment falls back to `neutral`, and an icon that isn't a Pine icon name is dropped: the
|
|
11125
|
+
* badge is a `pds-chip`, whose `icon` also loads URLs.
|
|
11126
|
+
*/
|
|
11127
|
+
function optionBadgeOf(option) {
|
|
11128
|
+
return badgeOf(option);
|
|
11129
|
+
}
|
|
11130
|
+
/** An optgroup's badge from its `data-badge*` attributes, or null; the same check as an option's. */
|
|
11131
|
+
function groupBadgeOf(optgroup) {
|
|
11132
|
+
return badgeOf(optgroup);
|
|
11133
|
+
}
|
|
11134
|
+
function badgeOf(element) {
|
|
11135
|
+
var _a;
|
|
11136
|
+
const label = (_a = element.getAttribute('data-badge')) === null || _a === void 0 ? void 0 : _a.trim();
|
|
11137
|
+
if (label === undefined || label === '')
|
|
11138
|
+
return null;
|
|
11139
|
+
const sentiment = element.getAttribute('data-badge-sentiment');
|
|
11140
|
+
const icon = element.getAttribute('data-badge-icon');
|
|
11141
|
+
return {
|
|
11142
|
+
label,
|
|
11143
|
+
sentiment: isBadgeSentiment(sentiment) ? sentiment : 'neutral',
|
|
11144
|
+
icon: icon !== null && PINE_ICON_NAME$1.test(icon) ? icon : null,
|
|
11145
|
+
};
|
|
11146
|
+
}
|
|
11107
11147
|
function iconOf(element) {
|
|
11108
11148
|
const icon = element.getAttribute('data-icon');
|
|
11109
11149
|
return icon !== null && PINE_ICON_NAME$1.test(icon) ? icon : null;
|
|
@@ -11140,7 +11180,7 @@ function buildPanelEntries(items, position) {
|
|
|
11140
11180
|
if (optgroup !== null) {
|
|
11141
11181
|
let group = groups.get(optgroup);
|
|
11142
11182
|
if (!group) {
|
|
11143
|
-
group = { optgroup, label: optgroup.label, icon: groupIconOf(optgroup), options: [] };
|
|
11183
|
+
group = { optgroup, label: optgroup.label, icon: groupIconOf(optgroup), badge: groupBadgeOf(optgroup), options: [] };
|
|
11144
11184
|
groups.set(optgroup, group);
|
|
11145
11185
|
entries.push({ kind: 'group', group });
|
|
11146
11186
|
}
|
|
@@ -11365,7 +11405,7 @@ class FlyoutController {
|
|
|
11365
11405
|
}
|
|
11366
11406
|
}
|
|
11367
11407
|
|
|
11368
|
-
const pdsComboboxCss = () => `:host{display:block}:host([truncate]){display:block;min-width:0}: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--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--truncate .pds-combobox__option-label{-ms-flex:1 1 auto;flex:1 1 auto;overflow-wrap:normal}.pds-combobox__listbox--truncate .pds-combobox__option-check{-ms-flex-negative:0;flex-shrink:0}.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__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;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);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{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);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-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;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.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-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)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.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);-webkit-box-sizing:border-box;box-sizing:border-box;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;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--truncate{max-width:100%}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label{overflow-wrap:normal}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger-text,.pds-combobox__listbox--truncate .pds-combobox__option-text{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.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-text-primary);--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)}[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);-webkit-box-sizing:border-box;box-sizing:border-box;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)}`;
|
|
11408
|
+
const pdsComboboxCss = () => `:host{display:block}:host([truncate]){display:block;min-width:0}: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--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper,.pds-combobox__option--disabled .pds-combobox__option-badge,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger>.pds-combobox__group-badge,.pds-combobox__group--disabled>.pds-combobox__group-label>.pds-combobox__group-badge{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--truncate .pds-combobox__option-label{-ms-flex:1 1 auto;flex:1 1 auto;overflow-wrap:normal}.pds-combobox__listbox--truncate .pds-combobox__option-check{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option--with-badge{-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs)}.pds-combobox__option-badge,.pds-combobox__group-badge{-ms-flex-negative:0;flex-shrink:0;isolation:isolate;margin-block:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:auto;margin-inline-start:auto}.pds-combobox__option--with-badge .pds-combobox__option-check{-webkit-margin-start:calc(var(--pine-dimension-150) - var(--pine-dimension-xs));margin-inline-start:calc(var(--pine-dimension-150) - var(--pine-dimension-xs))}.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__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-label--with-badge{-ms-flex-align:center;align-items:center;-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}.pds-combobox__group-label-text{min-width:0;overflow-wrap:anywhere}.pds-combobox__group-label>.pds-combobox__group-badge{margin-block:calc(var(--pine-dimension-xs) * -1);text-transform:none}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;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);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{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);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-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;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.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-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)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.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);-webkit-box-sizing:border-box;box-sizing:border-box;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;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--truncate{max-width:100%}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label{overflow-wrap:normal}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger-text,.pds-combobox__listbox--truncate .pds-combobox__option-text{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.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-text-primary);--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)}[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);-webkit-box-sizing:border-box;box-sizing:border-box;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)}`;
|
|
11369
11409
|
|
|
11370
11410
|
/**
|
|
11371
11411
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -12499,6 +12539,7 @@ class PdsCombobox {
|
|
|
12499
12539
|
// Only strings group an option or name an icon; anything else from JS is ignored, not coerced.
|
|
12500
12540
|
if (typeof opt.icon === 'string' && opt.icon !== '')
|
|
12501
12541
|
optionEl.setAttribute('data-icon', opt.icon);
|
|
12542
|
+
this.setBadgeAttributes(optionEl, opt.badge);
|
|
12502
12543
|
if (typeof opt.group !== 'string' || opt.group === '') {
|
|
12503
12544
|
ungrouped.push(optionEl);
|
|
12504
12545
|
this.panelPositions.set(optionEl, position);
|
|
@@ -12515,6 +12556,8 @@ class PdsCombobox {
|
|
|
12515
12556
|
if (!optgroup.hasAttribute('data-icon') && typeof opt.groupIcon === 'string' && opt.groupIcon !== '') {
|
|
12516
12557
|
optgroup.setAttribute('data-icon', opt.groupIcon);
|
|
12517
12558
|
}
|
|
12559
|
+
if (!optgroup.hasAttribute('data-badge'))
|
|
12560
|
+
this.setBadgeAttributes(optgroup, opt.groupBadge);
|
|
12518
12561
|
optgroup.appendChild(optionEl);
|
|
12519
12562
|
});
|
|
12520
12563
|
[...ungrouped, ...groupEntries].forEach(entry => {
|
|
@@ -13003,7 +13046,10 @@ class PdsCombobox {
|
|
|
13003
13046
|
};
|
|
13004
13047
|
const reveal = () => {
|
|
13005
13048
|
e.preventDefault();
|
|
13006
|
-
|
|
13049
|
+
// The row's name, badge and all, as the row itself is named.
|
|
13050
|
+
const optgroup = current;
|
|
13051
|
+
const badge = groupBadgeOf(optgroup);
|
|
13052
|
+
this.revealedGroupLabel = badge === null ? optgroup.label : `${optgroup.label}, ${badge.label}`;
|
|
13007
13053
|
return true;
|
|
13008
13054
|
};
|
|
13009
13055
|
switch (e.key) {
|
|
@@ -13552,11 +13598,16 @@ class PdsCombobox {
|
|
|
13552
13598
|
return;
|
|
13553
13599
|
const { optgroup, key, options, members } = group;
|
|
13554
13600
|
const groupIcon = groupIconOf(optgroup);
|
|
13601
|
+
const badge = groupBadgeOf(optgroup);
|
|
13555
13602
|
// As in the grouped displays: disabled when there's nothing left in it to choose.
|
|
13556
13603
|
const disabled = members.length > 0 && members.every(member => isOptionDisabled(member));
|
|
13557
|
-
rendered.push(hAsync("li", { key: key, class: { 'pds-combobox__group': true, 'pds-combobox__group--disabled': disabled }, role: "group", "aria-label": optgroup.label, "aria-disabled": disabled ? 'true' : undefined }, hAsync("div", { class: {
|
|
13604
|
+
rendered.push(hAsync("li", { key: key, class: { 'pds-combobox__group': true, 'pds-combobox__group--disabled': disabled }, role: "group", "aria-label": badge === null ? optgroup.label : `${optgroup.label}, ${badge.label}`, "aria-disabled": disabled ? 'true' : undefined }, hAsync("div", { class: {
|
|
13605
|
+
'pds-combobox__group-label': true,
|
|
13606
|
+
'pds-combobox__group-label--with-icon': groupIcon !== null,
|
|
13607
|
+
'pds-combobox__group-label--with-badge': badge !== null,
|
|
13608
|
+
}, "aria-hidden": "true" }, groupIcon !== null && (
|
|
13558
13609
|
// `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
|
|
13559
|
-
hAsync("pds-icon", { name: groupIcon, size: "small", "aria-hidden": "true", class: "pds-combobox__group-icon" })), optgroup.label), hAsync("ul", { class: "pds-combobox__group-list", role: "presentation" }, options)));
|
|
13610
|
+
hAsync("pds-icon", { name: groupIcon, size: "small", "aria-hidden": "true", class: "pds-combobox__group-icon" })), badge === null ? optgroup.label : hAsync("span", { class: "pds-combobox__group-label-text" }, optgroup.label), this.renderBadge(badge, 'pds-combobox__group-badge')), hAsync("ul", { class: "pds-combobox__group-list", role: "presentation" }, options)));
|
|
13560
13611
|
group = null;
|
|
13561
13612
|
};
|
|
13562
13613
|
this.filteredItems.forEach((item, itemIdx) => {
|
|
@@ -13682,20 +13733,56 @@ class PdsCombobox {
|
|
|
13682
13733
|
const isChip = this.isOptionChip(option);
|
|
13683
13734
|
const isDisabled = isOptionDisabled(option);
|
|
13684
13735
|
const tree = level !== undefined;
|
|
13685
|
-
|
|
13736
|
+
const badge = isLayout || isChip ? null : optionBadgeOf(option);
|
|
13737
|
+
return (hAsync("li", { key: option.value, id: this.optionDomId(index), role: tree ? 'treeitem' : 'option', "aria-selected": isSelected ? 'true' : tree ? undefined : 'false', "aria-disabled": isDisabled ? 'true' : undefined, "aria-level": level, "aria-setsize": setsize, "aria-posinset": posinset, "aria-label": isLayout || isChip
|
|
13738
|
+
? option.getAttribute('aria-label') || this.getOptionLabel(option)
|
|
13739
|
+
: badge && `${this.getOptionLabel(option)}, ${badge.label}`, tabindex: this.usesBodyPortal || this.usesPanelSearch || tree ? '-1' : isHighlighted ? '0' : '-1', class: {
|
|
13686
13740
|
'pds-combobox__option': true,
|
|
13687
13741
|
'pds-combobox__option--highlighted': isHighlighted,
|
|
13688
13742
|
'pds-combobox__option--layout': isLayout,
|
|
13689
13743
|
'pds-combobox__option--chip': isChip,
|
|
13690
13744
|
'pds-combobox__option--disabled': isDisabled,
|
|
13691
|
-
|
|
13745
|
+
'pds-combobox__option--with-badge': badge !== null,
|
|
13746
|
+
}, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (hAsync("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : ([this.renderOptionLabel(option), this.renderOptionBadge(option)]), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", "aria-hidden": "true", class: "pds-combobox__option-check" })));
|
|
13692
13747
|
}
|
|
13693
|
-
/**
|
|
13748
|
+
/** Copies an `options` badge to an option's or optgroup's `data-badge*` attributes; only strings count. */
|
|
13749
|
+
setBadgeAttributes(element, badge) {
|
|
13750
|
+
if (typeof badge !== 'object' || badge === null)
|
|
13751
|
+
return;
|
|
13752
|
+
const { label, sentiment, icon } = badge;
|
|
13753
|
+
if (typeof label !== 'string' || label.trim() === '')
|
|
13754
|
+
return;
|
|
13755
|
+
element.setAttribute('data-badge', label);
|
|
13756
|
+
if (typeof sentiment === 'string')
|
|
13757
|
+
element.setAttribute('data-badge-sentiment', sentiment);
|
|
13758
|
+
if (typeof icon === 'string')
|
|
13759
|
+
element.setAttribute('data-badge-icon', icon);
|
|
13760
|
+
}
|
|
13761
|
+
/** An option's badge, after its text. */
|
|
13762
|
+
renderOptionBadge(option) {
|
|
13763
|
+
return this.renderBadge(optionBadgeOf(option), 'pds-combobox__option-badge');
|
|
13764
|
+
}
|
|
13765
|
+
/** A badge as a `pds-chip`: after an option's text, or a group's label. */
|
|
13766
|
+
renderBadge(badge, className) {
|
|
13767
|
+
var _a;
|
|
13768
|
+
if (badge === null)
|
|
13769
|
+
return null;
|
|
13770
|
+
return (hAsync("pds-chip", { size: "sm", sentiment: badge.sentiment,
|
|
13771
|
+
// A Pine icon name only, checked by optionBadgeOf; pds-chip's `icon` also loads URLs.
|
|
13772
|
+
icon: (_a = badge.icon) !== null && _a !== void 0 ? _a : undefined,
|
|
13773
|
+
// A long label, often a translated one, truncates rather than squeezing the option's text.
|
|
13774
|
+
maxWidth: "50%", class: className }, badge.label));
|
|
13775
|
+
}
|
|
13776
|
+
/**
|
|
13777
|
+
* An option's text, after its `data-icon` when it has one. Beside a badge the text is always
|
|
13778
|
+
* wrapped, so it can shrink and wrap rather than push the badge out of the row.
|
|
13779
|
+
*/
|
|
13694
13780
|
renderOptionLabel(option) {
|
|
13695
13781
|
const icon = optionIconOf(option);
|
|
13696
13782
|
const label = this.truncate ? (hAsync("span", { key: this.getOptionLabel(option), class: "pds-combobox__option-text" }, this.getOptionLabel(option))) : this.getOptionLabel(option);
|
|
13697
|
-
if (icon === null)
|
|
13698
|
-
return label;
|
|
13783
|
+
if (icon === null) {
|
|
13784
|
+
return optionBadgeOf(option) === null ? label : hAsync("span", { class: "pds-combobox__option-label" }, label);
|
|
13785
|
+
}
|
|
13699
13786
|
return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), label));
|
|
13700
13787
|
}
|
|
13701
13788
|
/** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
|
|
@@ -13734,7 +13821,8 @@ class PdsCombobox {
|
|
|
13734
13821
|
}
|
|
13735
13822
|
/**
|
|
13736
13823
|
* Drilled into a group: its treeitem, expanded. Its row reads as a way back ("Back: Tag") and
|
|
13737
|
-
* leads its options.
|
|
13824
|
+
* leads its options. It leaves out the group's badge: the row is a way back, not a group to
|
|
13825
|
+
* choose, and the badge was on the row that opened it. An option's own badge still shows.
|
|
13738
13826
|
*/
|
|
13739
13827
|
renderGroupBackRow(group, { posinset, setsize }) {
|
|
13740
13828
|
const id = this.groupDomId(group.optgroup);
|
|
@@ -13763,9 +13851,9 @@ class PdsCombobox {
|
|
|
13763
13851
|
'pds-combobox__group-row--highlighted': isCurrent && (flyout || this.keyboardNavigating),
|
|
13764
13852
|
'pds-combobox__group-row--keyboard': isCurrent && this.keyboardNavigating,
|
|
13765
13853
|
'pds-combobox__group-row--disabled': disabled,
|
|
13766
|
-
}, role: "treeitem", "aria-expanded": isOpen ? 'true' : 'false', "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": `${id}-label`, "data-group-index": groupIndex, onMouseEnter: flyout ? this.onGroupRowMouseEnter : undefined, onMouseLeave: flyout ? this.onGroupRowMouseLeave : undefined }, hAsync("div", { class: "pds-combobox__group-row-trigger", "data-group-index": groupIndex, onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupRowTriggerMouseEnter, onClick: this.onGroupRowClick }, hAsync("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, group.icon !== null && (
|
|
13854
|
+
}, role: "treeitem", "aria-expanded": isOpen ? 'true' : 'false', "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": group.badge === null ? `${id}-label` : undefined, "aria-label": group.badge === null ? undefined : `${group.label}, ${group.badge.label}`, "data-group-index": groupIndex, onMouseEnter: flyout ? this.onGroupRowMouseEnter : undefined, onMouseLeave: flyout ? this.onGroupRowMouseLeave : undefined }, hAsync("div", { class: "pds-combobox__group-row-trigger", "data-group-index": groupIndex, onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupRowTriggerMouseEnter, onClick: this.onGroupRowClick }, hAsync("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, group.icon !== null && (
|
|
13767
13855
|
// `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
|
|
13768
|
-
hAsync("pds-icon", { name: group.icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__group-icon" })), group.label), hAsync("pds-icon", { name: "caret-right", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" })), isOpen && (hAsync("ul", { class: "pds-combobox__flyout", role: "group", "aria-label": group.label, style: { minWidth: this.flyoutMinWidth, maxWidth: this.flyoutMaxWidth } }, this.renderGroupOptions(group)))));
|
|
13856
|
+
hAsync("pds-icon", { name: group.icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__group-icon" })), group.label), this.renderBadge(group.badge, 'pds-combobox__group-badge'), hAsync("pds-icon", { name: "caret-right", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" })), isOpen && (hAsync("ul", { class: "pds-combobox__flyout", role: "group", "aria-label": group.label, style: { minWidth: this.flyoutMinWidth, maxWidth: this.flyoutMaxWidth } }, this.renderGroupOptions(group)))));
|
|
13769
13857
|
}
|
|
13770
13858
|
// Helper method to render the caret icon
|
|
13771
13859
|
renderCaretIcon() {
|
|
@@ -13922,13 +14010,13 @@ class PdsCombobox {
|
|
|
13922
14010
|
]
|
|
13923
14011
|
.filter(Boolean)
|
|
13924
14012
|
.join(' ');
|
|
13925
|
-
return (hAsync(Host, { key: '
|
|
14013
|
+
return (hAsync(Host, { key: '104eb1c4cdca4494b10dea660e27a98b0c18bf64', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '2548ff2b304bb6a5a249b5059a0b60b55cdf2152', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: '7a261c72452ca7a278e1067e41c6eed52f29edc8', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
|
|
13926
14014
|
this.inputEl = el;
|
|
13927
14015
|
this.triggerEl = el;
|
|
13928
14016
|
}, class: {
|
|
13929
14017
|
'pds-combobox__input': true,
|
|
13930
14018
|
'pds-combobox__input--invalid': this.isInvalid(),
|
|
13931
|
-
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "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: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, 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: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '
|
|
14019
|
+
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "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: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, 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: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: 'ffd3bc72b34a7278f3fa706a236017a26b86ea3f', style: { display: 'none' } }, hAsync("slot", { key: 'f47a81191ad7fd8c6bf63cf8ef39934cbf7fd28c', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
|
|
13932
14020
|
hAsync("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
|
|
13933
14021
|
// Its own region: sharing one, revealing a row then opening it would leave the text the
|
|
13934
14022
|
// same, and opening the group would go unannounced.
|
|
@@ -16726,7 +16814,7 @@ class PdsDropdownMenu {
|
|
|
16726
16814
|
this.currentFocusIndex = -1;
|
|
16727
16815
|
// Return focus to trigger
|
|
16728
16816
|
if (this.isFocusInMenu()) {
|
|
16729
|
-
this.
|
|
16817
|
+
this.focusTrigger();
|
|
16730
16818
|
}
|
|
16731
16819
|
};
|
|
16732
16820
|
// Handle click on the trigger element
|
|
@@ -16777,6 +16865,14 @@ class PdsDropdownMenu {
|
|
|
16777
16865
|
const focused = this.host.getRootNode().activeElement;
|
|
16778
16866
|
return focused != null && this.host.contains(focused);
|
|
16779
16867
|
}
|
|
16868
|
+
// A trigger whose host can't take focus itself, such as pds-chip, passes it to the control inside.
|
|
16869
|
+
focusTrigger() {
|
|
16870
|
+
var _a, _b;
|
|
16871
|
+
this.triggerEl.focus();
|
|
16872
|
+
if (this.host.getRootNode().activeElement === this.triggerEl)
|
|
16873
|
+
return;
|
|
16874
|
+
(_b = (_a = this.triggerEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [href], [tabindex]:not([tabindex="-1"])')) === null || _b === void 0 ? void 0 : _b.focus();
|
|
16875
|
+
}
|
|
16780
16876
|
// Check if a menu item is disabled (handles both component and raw elements)
|
|
16781
16877
|
isItemDisabled(item) {
|
|
16782
16878
|
const tagName = item.tagName.toLowerCase();
|
|
@@ -16872,6 +16968,23 @@ class PdsDropdownMenu {
|
|
|
16872
16968
|
this.focusItemByIndex(prevIndex);
|
|
16873
16969
|
}
|
|
16874
16970
|
}
|
|
16971
|
+
// Unlike the arrow keys, Tab stops at either end of the menu instead of wrapping.
|
|
16972
|
+
adjacentEnabledIndex(fromIndex, step) {
|
|
16973
|
+
for (let index = fromIndex + step; index >= 0 && index < this.menuItems.length; index += step) {
|
|
16974
|
+
if (!this.isItemDisabled(this.menuItems[index]))
|
|
16975
|
+
return index;
|
|
16976
|
+
}
|
|
16977
|
+
return -1;
|
|
16978
|
+
}
|
|
16979
|
+
// An enabled item can still refuse focus (hidden, or a link with no href), so each one is tried in turn.
|
|
16980
|
+
focusAdjacentItem(fromIndex, step) {
|
|
16981
|
+
for (let index = this.adjacentEnabledIndex(fromIndex, step); index !== -1; index = this.adjacentEnabledIndex(index, step)) {
|
|
16982
|
+
this.focusItemByIndex(index);
|
|
16983
|
+
if (this.getFocusedItemIndex() === index)
|
|
16984
|
+
return true;
|
|
16985
|
+
}
|
|
16986
|
+
return false;
|
|
16987
|
+
}
|
|
16875
16988
|
// Escape is taken in document's capture phase, before a modal around the menu hears it on
|
|
16876
16989
|
// document and closes too.
|
|
16877
16990
|
handleEscapeKeyDown(event) {
|
|
@@ -16880,6 +16993,28 @@ class PdsDropdownMenu {
|
|
|
16880
16993
|
event.preventDefault();
|
|
16881
16994
|
this.closeDropdown();
|
|
16882
16995
|
}
|
|
16996
|
+
// Taken in the capture phase, so a modal or popover around the menu that traps Tab finds the key
|
|
16997
|
+
// already handled, or focus back on the trigger with the items hidden.
|
|
16998
|
+
handleTabKeyDown(event) {
|
|
16999
|
+
if (!this.isOpen || event.key !== 'Tab' || event.defaultPrevented)
|
|
17000
|
+
return;
|
|
17001
|
+
const currentIndex = this.getFocusedItemIndex();
|
|
17002
|
+
if (currentIndex === -1) {
|
|
17003
|
+
// The menu sits after the trigger, so Shift+Tab from the trigger leaves it behind. So does Shift+Tab
|
|
17004
|
+
// from outside the menu, where focus stays after a mouse open in Safari.
|
|
17005
|
+
if (event.shiftKey && (document.activeElement === this.triggerEl || !this.isFocusInMenu()))
|
|
17006
|
+
this.closeDropdown();
|
|
17007
|
+
return;
|
|
17008
|
+
}
|
|
17009
|
+
if (this.focusAdjacentItem(currentIndex, event.shiftKey ? -1 : 1)) {
|
|
17010
|
+
event.preventDefault();
|
|
17011
|
+
return;
|
|
17012
|
+
}
|
|
17013
|
+
// Past either end, closing moves focus to the trigger. Shift+Tab stays there; Tab carries on past it.
|
|
17014
|
+
if (event.shiftKey)
|
|
17015
|
+
event.preventDefault();
|
|
17016
|
+
this.closeDropdown();
|
|
17017
|
+
}
|
|
16883
17018
|
// Handle keyboard events for the dropdown
|
|
16884
17019
|
handleKeyDown(event) {
|
|
16885
17020
|
if (!this.isOpen)
|
|
@@ -16919,54 +17054,19 @@ class PdsDropdownMenu {
|
|
|
16919
17054
|
}
|
|
16920
17055
|
}
|
|
16921
17056
|
break;
|
|
16922
|
-
case 'Tab':
|
|
16923
|
-
|
|
16924
|
-
|
|
16925
|
-
|
|
16926
|
-
|
|
16927
|
-
|
|
16928
|
-
// If not on first item, prevent default and go to previous item
|
|
16929
|
-
event.preventDefault();
|
|
16930
|
-
this.focusPreviousItem(); // Use our method that skips disabled items
|
|
16931
|
-
}
|
|
16932
|
-
// If on first item or no item, let natural tab order move back to trigger
|
|
17057
|
+
case 'Tab': {
|
|
17058
|
+
// Tab from an item is handled in handleTabKeyDown; from anywhere else it moves into the menu.
|
|
17059
|
+
if (event.shiftKey || this.getFocusedItemIndex() !== -1)
|
|
17060
|
+
break;
|
|
17061
|
+
if (this.focusAdjacentItem(-1, 1)) {
|
|
17062
|
+
event.preventDefault();
|
|
16933
17063
|
}
|
|
16934
17064
|
else {
|
|
16935
|
-
//
|
|
16936
|
-
|
|
16937
|
-
const isTriggerFocused = activeElement === this.triggerEl;
|
|
16938
|
-
const currentIndex = this.getFocusedItemIndex();
|
|
16939
|
-
if (isTriggerFocused && this.menuItems.length > 0) {
|
|
16940
|
-
// If trigger is focused, move to first non-disabled menu item
|
|
16941
|
-
event.preventDefault();
|
|
16942
|
-
// Find the first non-disabled item
|
|
16943
|
-
let firstFocusableIndex = 0;
|
|
16944
|
-
while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {
|
|
16945
|
-
firstFocusableIndex++;
|
|
16946
|
-
}
|
|
16947
|
-
if (firstFocusableIndex < this.menuItems.length) {
|
|
16948
|
-
this.focusItemByIndex(firstFocusableIndex);
|
|
16949
|
-
}
|
|
16950
|
-
}
|
|
16951
|
-
else if (currentIndex === -1 && this.menuItems.length > 0) {
|
|
16952
|
-
// If no menu item is focused, focus the first non-disabled one
|
|
16953
|
-
event.preventDefault();
|
|
16954
|
-
// Find the first non-disabled item
|
|
16955
|
-
let firstFocusableIndex = 0;
|
|
16956
|
-
while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {
|
|
16957
|
-
firstFocusableIndex++;
|
|
16958
|
-
}
|
|
16959
|
-
if (firstFocusableIndex < this.menuItems.length) {
|
|
16960
|
-
this.focusItemByIndex(firstFocusableIndex);
|
|
16961
|
-
}
|
|
16962
|
-
}
|
|
16963
|
-
else if (currentIndex !== -1) {
|
|
16964
|
-
// Use our method that skips disabled items
|
|
16965
|
-
event.preventDefault();
|
|
16966
|
-
this.focusNextItem();
|
|
16967
|
-
}
|
|
17065
|
+
// With no item to move to, Tab carries on past the menu, as it does past the last item.
|
|
17066
|
+
this.closeDropdown();
|
|
16968
17067
|
}
|
|
16969
17068
|
break;
|
|
17069
|
+
}
|
|
16970
17070
|
}
|
|
16971
17071
|
}
|
|
16972
17072
|
// Handle clicks outside the dropdown to close it
|
|
@@ -16976,7 +17076,7 @@ class PdsDropdownMenu {
|
|
|
16976
17076
|
}
|
|
16977
17077
|
}
|
|
16978
17078
|
render() {
|
|
16979
|
-
return (hAsync(Host, { key: '
|
|
17079
|
+
return (hAsync(Host, { key: 'aa4ce84354cf87638ee46fd7ed69520228b7e656', id: this.componentId }, hAsync("slot", { key: '948800e67d18c8c6cc9e77ef3aeab635c5035453', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: '3ce2a2879b14aad975cea8ae72fcbf8c3abcf20c', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, hAsync("div", { key: 'ad25fbf4f3c7a24653c229e64fe2ce893a92e4c8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, hAsync("slot", { key: '35a5903543e08577997b456bcd312bdd009fd8fc', name: "header", onSlotchange: this.handleHeaderSlotChange })), hAsync("div", { key: 'a9593adacf047918c1d87494f8c951a2a4a5f76f', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, hAsync("slot", { key: '8d2def1cc7020608220099f4ced0f44e9838cce8', onSlotchange: this.handleSlotChange })))));
|
|
16980
17080
|
}
|
|
16981
17081
|
get host() { return getElement(this); }
|
|
16982
17082
|
static get style() { return pdsDropdownMenuCss(); }
|
|
@@ -16989,7 +17089,7 @@ class PdsDropdownMenu {
|
|
|
16989
17089
|
"currentFocusIndex": [32],
|
|
16990
17090
|
"hasHeader": [32]
|
|
16991
17091
|
},
|
|
16992
|
-
"$listeners$": [[6, "keydown", "handleEscapeKeyDown"], [8, "keydown", "handleKeyDown"], [8, "click", "handleWindowClick"]],
|
|
17092
|
+
"$listeners$": [[6, "keydown", "handleEscapeKeyDown"], [6, "keydown", "handleTabKeyDown"], [8, "keydown", "handleKeyDown"], [8, "click", "handleWindowClick"]],
|
|
16993
17093
|
"$lazyBundleId$": "-",
|
|
16994
17094
|
"$attrsToReflect$": []
|
|
16995
17095
|
}; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pine-ds/core",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.10.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "Base components for Pine Design System",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"@babel/preset-env": "^7.22.10",
|
|
90
90
|
"@chromatic-com/storybook": "^4.1.3",
|
|
91
91
|
"@mdx-js/rollup": "^3.1.1",
|
|
92
|
-
"@pine-ds/doc-components": "^4.
|
|
92
|
+
"@pine-ds/doc-components": "^4.10.0",
|
|
93
93
|
"@stencil-community/eslint-plugin": "^0.8.0",
|
|
94
94
|
"@stencil/react-output-target": "^0.5.3",
|
|
95
95
|
"@stencil/sass": "^3.2.0",
|