@pine-ds/core 4.11.0 → 4.12.0

package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js

@@ -9,10 +9,10 @@ export default {
     disabled: false,
     dropdownPlacement: 'bottom-start',
     dropdownMount: 'host',
-    dropdownWidth: '236px',
+    dropdownWidth: '252px',
     errorMessage: null,
-    flyoutMaxWidth: '380px',
-    flyoutMinWidth: '280px',
+    flyoutMaxWidth: '388px',
+    flyoutMinWidth: '288px',
     groupDisplay: 'inline',
     helperMessage: null,
     hideLabel: false,
@@ -166,7 +166,7 @@ export const ProgrammaticClear = (args) => html`
   </pds-combobox>
   <pds-button
     variant="secondary"
-    size="sm"
+    size="small"
     @click=${() => document.querySelector('#combobox-clear-story').clear()}
   >
     Reset
@@ -796,6 +796,37 @@ GroupBadges.argTypes = {
   groupDisplay: { control: 'inline-radio', options: ['inline', 'flyout', 'drill-in'] },
 };
 
+// A selected option with a badge: the list row shows its "New" badge, and the filled field shows
+// the option's icon and label only. data-search-text lets search find it by more than its label.
+export const SelectedOptionWithBadge = (args) => html`
+<div style="min-height: 320px;">
+  <pds-combobox
+    component-id="combobox-selected-badge"
+    label=${args.label}
+    placeholder=${args.placeholder}
+    trigger="button"
+    trigger-shape="input"
+    mode="select-only"
+    panel-search
+    search-placeholder="Search categories"
+    search-options-label="Search categories"
+    trigger-width="300px"
+    dropdown-width="300px"
+    value=${args.value}
+  >
+    <option value="assessment" data-icon="assessment">Assessment</option>
+    <option value="automation" data-icon="automations" data-badge="New" data-badge-sentiment="accent"
+      data-search-text="Automation started finished">Automation</option>
+    <option value="tag" data-icon="hashtag" data-search-text="Tag has any tag">Tag</option>
+  </pds-combobox>
+</div>`;
+
+SelectedOptionWithBadge.args = {
+  label: 'Category',
+  placeholder: 'Select a category',
+  value: 'automation',
+};
+
 export const OptionGroupsPdsText = (args) => html`
 <pds-combobox
   component-id="combobox-pds-text-groups"

package/dist/collection/components/pds-copytext/pds-copytext.js

@@ -107,7 +107,7 @@ export class PdsCopytext {
     render() {
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: '35d74eaecedd432f7852545522f9ce72396f9ab9', class: hostClass, id: this.componentId }, h("pds-button", { key: '9550ce2fb21166e9726b08b5928036244c7b729e', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '47af45448759c911ca4ca03d0158088289b622e0', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '3ddab7c3e7063843cd606ffb19481cae3792db43', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: '2c3bf9cd49adf9a68be5f6cf3bdf0bb29aab956a', class: hostClass, id: this.componentId }, h("pds-button", { key: '88ff5d9b7071583c76c8875834b9d4fda274d711', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '5dee0ec40cbabf3d781037a785ec7c5aa7621121', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '3399b3573670f32f6a70f78f1ae60c9cba031955', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }
@@ -241,7 +241,7 @@ export class PdsCopytext {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event fired when copyText button is clicked."
+                    "text": "Emitted after a click, once the copy to the clipboard succeeds or fails.\n`detail` is `Copied to clipboard` on success, or `Error writing text to clipboard: ` followed by the error on failure.\nNot emitted when `navigator.clipboard` is undefined, as it is outside a secure context."
                 },
                 "complexType": {
                     "original": "string",

package/dist/collection/components/pds-datepicker/pds-datepicker.js

@@ -1385,14 +1385,14 @@ export class PdsDatepicker {
     }
     render() {
         const locale = this.resolvedLocale;
-        return (h(Host, { key: '7c5388369fe78becfd26b0807f1c6cb54c7934a1', class: { 'pds-datepicker--range': this.isRange, 'pds-datepicker--time': this.hasTime }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, h("pds-input", { key: 'fc565c99359715415886ae63ef1bcbf8671569c9', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (h("button", {
+        return (h(Host, { key: 'd40bce6136eca084b23d38d995010592bfd702bd', class: { 'pds-datepicker--range': this.isRange, 'pds-datepicker--time': this.hasTime }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, h("pds-input", { key: 'a047df90ca3e013a2eeb1f88e8fb033b24754f0d', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (h("button", {
             // Keyed, as is the calendar button: when Clear appears after a pick, the focused
             // calendar button must stay that button rather than be reused as Clear.
             key: "clear", slot: "suffix", type: "button", class: "pds-datepicker__clear", ref: (el) => (this.clearEl = el), "aria-label": this.label ? `${this.clearLabel} ${this.label}` : this.clearLabel,
             // Out of the tab order, as a native search field's clear button is: Tab from a field
             // just emptied would land on it as the change removes it, dropping focus to the page.
             tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
-        }, h("pds-icon", { key: '6a7da726d86654d3598f84b8ea7a8ed244a8e5da', icon: remove, "aria-hidden": "true" }))), h("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("pds-icon", { key: '92af87e66b7bb2e95861b873077a7bfb0268c2e0', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
+        }, h("pds-icon", { key: '934fc6303da1dca04cb073c5875a0f9fc286fdd1', icon: remove, "aria-hidden": "true" }))), h("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("pds-icon", { key: '75ab4fc79ce9f95e7ee6555763166d800a2f1135', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
     }
     static get is() { return "pds-datepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -2081,7 +2081,7 @@ export class PdsDatepicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Ranges listed beside the calendar in range mode. A comma-separated list of built-in keys\n(`today`, `yesterday`, `last-7-days`, `last-30-days`, `last-90-days`, `this-month`,\n`last-month`, `this-quarter`, `last-quarter`, `this-year`, `last-year`, `year-to-date`,\n`last-12-months`), or an array of `{ key, label?, start?, end? }` to relabel built-ins or add\nyour own."
+                    "text": "Ranges listed beside the calendar in range mode. A comma-separated list of built-in keys\n(`today`, `yesterday`, `last-7-days`, `last-30-days`, `last-90-days`, `this-month`,\n`last-month`, `this-quarter`, `last-quarter`, `this-year`, `last-year`, `year-to-date`,\n`last-12-months`), or an array of `{ key, label?, startOffset?, endOffset?, start?, end? }` to\nrelabel built-ins or add your own: `startOffset` and `endOffset` follow today, `start` and `end`\nare fixed days."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/pds-datepicker/presets.js

@@ -54,12 +54,35 @@ export function builtInPresetRange(key, now) {
             return null;
     }
 }
+const isWholeNumber = (value) => typeof value === 'number' && Number.isInteger(value);
+/** A preset's offset range: whole days from today, a missing or `null` one being today. `null` if unusable. */
+export function offsetPresetRange(preset, now) {
+    const { startOffset, endOffset } = preset;
+    // Checked at runtime, as offsets often come from JSON, where a missing one is often written `null`.
+    if (startOffset == null && endOffset == null)
+        return null;
+    if (startOffset != null && !isWholeNumber(startOffset))
+        return null;
+    if (endOffset != null && !isWholeNumber(endOffset))
+        return null;
+    const start = addDays(now, startOffset !== null && startOffset !== void 0 ? startOffset : 0);
+    const end = addDays(now, endOffset !== null && endOffset !== void 0 ? endOffset : 0);
+    return start <= end ? [start, end] : null;
+}
+// The list is re-resolved on every read, so each warning is said once.
+const warned = new Set();
+function warnOnce(message) {
+    if (warned.has(message))
+        return;
+    warned.add(message);
+    console.warn(`PDS Datepicker: ${message}`);
+}
 /**
  * Normalizes the `presets` prop: a comma-separated list of built-in keys, or an array of presets
- * that may relabel a built-in (for translation) or give their own `start` and `end`. Entries that
- * resolve to no range are dropped.
+ * that may relabel a built-in or give their own range. Unusable entries are dropped with a warning.
  */
 export function resolvePresets(presets, now) {
+    var _a;
     const entries = typeof presets === 'string'
         ? presets
             .split(',')
@@ -73,14 +96,26 @@ export function resolvePresets(presets, now) {
     for (const preset of entries) {
         // Presets often come from parsed JSON, so check types at runtime: a non-string label would
         // otherwise reach the render as an object, which Stencil can turn into nodes.
-        if (!preset || typeof preset.key !== 'string')
+        if (!preset || typeof preset.key !== 'string') {
+            warnOnce('a preset with no string key was left out.');
             continue;
+        }
         const start = typeof preset.start === 'string' ? parseIsoDate(preset.start) : null;
         const end = typeof preset.end === 'string' ? parseIsoDate(preset.end) : null;
-        const range = start && end && start <= end ? [start, end] : builtInPresetRange(preset.key, now);
-        const label = typeof preset.label === 'string' ? preset.label : DEFAULT_LABELS[preset.key];
-        if (range && label)
-            resolved.push({ key: preset.key, label, start: range[0], end: range[1] });
+        // Fixed days, then offsets, then the built-in range.
+        const fixed = start !== null && end !== null && start <= end ? [start, end] : null;
+        const range = (_a = fixed !== null && fixed !== void 0 ? fixed : offsetPresetRange(preset, now)) !== null && _a !== void 0 ? _a : builtInPresetRange(preset.key, now);
+        // A blank label would leave the button unnamed.
+        const label = typeof preset.label === 'string' && preset.label.trim() !== '' ? preset.label : DEFAULT_LABELS[preset.key];
+        if (range === null) {
+            warnOnce(`preset "${preset.key}" has no usable range and was left out. Give it whole-day startOffset/endOffset or YYYY-MM-DD start/end, start first.`);
+            continue;
+        }
+        if (label === undefined) {
+            warnOnce(`preset "${preset.key}" has no label and was left out.`);
+            continue;
+        }
+        resolved.push({ key: preset.key, label, start: range[0], end: range[1] });
     }
     return resolved;
 }

package/dist/collection/components/pds-drawer/pds-drawer-content/pds-drawer-content.js

@@ -1,10 +1,7 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 /**
- * Fills the drawer panel's height by default — unlike `pds-modal-content`,
- * which caps itself against the viewport for a centered, possibly-shorter
- * modal, a drawer panel is already edge-to-edge, so its content can simply
- * flex to fill whatever space the header and footer leave.
+ * Fills the space between the drawer header and footer.
  * @lightDom renders-markup
  */
 export class PdsDrawerContent {
@@ -13,7 +10,7 @@ export class PdsDrawerContent {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
     }
     render() {
-        return (h("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, h("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
+        return (h("div", { key: '0d59724de849bc2364d88c4460f70f8b1efa5d1b', class: "pds-drawer-content" }, h("slot", { key: '83782b9b4ad99f8075809c9e63d8351fa6109b11' })));
     }
     static get is() { return "pds-drawer-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-drawer/pds-drawer-footer/pds-drawer-footer.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 /**
+ * Holds the drawer's actions in a padded row aligned to the end, with a divider above.
  * @lightDom renders-markup
  */
 export class PdsDrawerFooter {
@@ -9,7 +10,7 @@ export class PdsDrawerFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
     }
     render() {
-        return (h("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, h("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
+        return (h("footer", { key: '1345b87580b1931d7c541fac71c0dff33b6cfbf9', class: "pds-drawer__footer" }, h("slot", { key: '638fa6bd14d28e814e0e40b02efb1b74f89f51dd' })));
     }
     static get is() { return "pds-drawer-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-drawer/pds-drawer-header/pds-drawer-header.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 /**
+ * Holds the drawer's title and close control in a padded row, spaced apart, with a divider below.
  * @lightDom renders-markup
  */
 export class PdsDrawerHeader {
@@ -9,7 +10,7 @@ export class PdsDrawerHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
     }
     render() {
-        return (h("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, h("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
+        return (h("header", { key: '6354f36d59e608a85c3cb75d1e5cf04c48dd7045', class: "pds-drawer__header" }, h("slot", { key: '2c9d8a405c8850588377553f3d9a19790828cba7' })));
     }
     static get is() { return "pds-drawer-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-drawer/pds-drawer.js

@@ -12,7 +12,7 @@ const PORTALED_OVERLAY_SELECTOR = '.pds-popover, .pds-tooltip, .pds-combobox-dro
  * A side panel composed from `pds-modal`, non-modal by default.
  *
  * By default, unlike `pds-modal`, the page stays interactive while a drawer
- * is open: no dimming, no blur, no scroll lock, no click blocking.
+ * is open: no dimming, no blur, no click blocking.
  * `pds-drawer` renders a `pds-modal` internally with `disableTopLayer` on and
  * its backdrop suppressed, and adds the edge, width and dismiss behavior a
  * side panel needs on top. With `modal`, it opens that `pds-modal` in the top
@@ -28,8 +28,8 @@ export class PdsDrawer {
          */
         this.open = false;
         /**
-         * Which edge of the viewport the drawer is docked to. Logical, so this is
-         * free under RTL — `end` is the inline-end edge regardless of direction.
+         * Which edge of the viewport the drawer is docked to. Logical: `end` is the
+         * inline-end edge, so an `end` drawer docks on the left in right-to-left layouts.
          * @default 'end'
          */
         this.side = 'end';
@@ -55,9 +55,7 @@ export class PdsDrawer {
         /**
          * Whether the drawer can be dismissed with a pointerdown outside it (in a
          * `modal` drawer, a click on its backdrop).
-         * Replaces `pds-modal`'s `backdropDismiss`.
-         * This also gates Escape, matching how `backdropDismiss` gates Escape on
-         * `pds-modal` today: setting this to `false` means the close button is the
+         * Setting it to `false` also turns off Escape, so the close button is the
          * only way out.
          *
          * A trigger outside the drawer should only ever set `open` to `true` and
@@ -148,11 +146,11 @@ export class PdsDrawer {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '7cf13256457914e48e8fde422832a2a52ee0c13b', class: {
+        return (h(Host, { key: 'dda3f1dc3013f28a3fc8d1894609dd4b14d227ee', class: {
                 'pds-drawer': true,
                 [`pds-drawer--${this.side}`]: true,
                 [`pds-drawer--${this.size}`]: true,
-            } }, h("pds-modal", { key: 'd4ceb5b4c0b03930aa3d001ae1bbbfbf449bde33', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, h("slot", { key: '41bfdea76282b333ca6950048999cb9d94e69438' }))));
+            } }, h("pds-modal", { key: '3188b99ffb9b3ecb3eeb42fd3ba808d71c652b4f', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, h("slot", { key: 'ca4cd34297b4580d554edb45bfbec5b44d7d1fb0' }))));
     }
     static get is() { return "pds-drawer"; }
     static get originalStyleUrls() {
@@ -224,7 +222,7 @@ export class PdsDrawer {
                             "name": "default",
                             "text": "'end'"
                         }],
-                    "text": "Which edge of the viewport the drawer is docked to. Logical, so this is\nfree under RTL \u2014 `end` is the inline-end edge regardless of direction."
+                    "text": "Which edge of the viewport the drawer is docked to. Logical: `end` is the\ninline-end edge, so an `end` drawer docks on the left in right-to-left layouts."
                 },
                 "getter": false,
                 "setter": false,
@@ -316,7 +314,7 @@ export class PdsDrawer {
                             "name": "default",
                             "text": "true"
                         }],
-                    "text": "Whether the drawer can be dismissed with a pointerdown outside it (in a\n`modal` drawer, a click on its backdrop).\nReplaces `pds-modal`'s `backdropDismiss`.\nThis also gates Escape, matching how `backdropDismiss` gates Escape on\n`pds-modal` today: setting this to `false` means the close button is the\nonly way out.\n\nA trigger outside the drawer should only ever set `open` to `true` and\nleave closing to the drawer itself. A toggle-style trigger (`open =\n!open`) fights light dismiss: clicking it while open closes the drawer\non `pointerdown`, then the trigger's own click handler re-opens it."
+                    "text": "Whether the drawer can be dismissed with a pointerdown outside it (in a\n`modal` drawer, a click on its backdrop).\nSetting it to `false` also turns off Escape, so the close button is the\nonly way out.\n\nA trigger outside the drawer should only ever set `open` to `true` and\nleave closing to the drawer itself. A toggle-style trigger (`open =\n!open`) fights light dismiss: clicking it while open closes the drawer\non `pointerdown`, then the trigger's own click handler re-opens it."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.css

@@ -34,14 +34,19 @@
   background-color: var(--pine-color-background-muted);
   color: var(--pine-color-text-hover);
 }
-.pds-dropdown-menu-item__content {
-  /* Focus styles applied via class + browser focus */
-}
-.pds-dropdown-menu-item__content:focus, .pds-dropdown-menu-item__content:focus-visible, .pds-dropdown-menu-item__content.has-focus {
+.pds-dropdown-menu-item__content:focus-visible {
   outline: var(--pine-outline-focus);
   outline-offset: var(--pine-border-width);
 }
 
+.pds-dropdown-menu-item__start {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.pds-dropdown-menu-item__start--empty {
+  display: none;
+}
+
 :host(.is-informational) {
   cursor: default;
 }
@@ -60,17 +65,21 @@
   background-color: var(--pine-color-danger-disabled);
   color: var(--pine-color-danger-hover);
 }
-:host(.destructive) .pds-dropdown-menu-item__content:focus, :host(.destructive) .pds-dropdown-menu-item__content:focus-visible, :host(.destructive) .pds-dropdown-menu-item__content.has-focus {
+:host(.destructive) .pds-dropdown-menu-item__content:focus-visible {
   background-color: var(--pine-color-danger-disabled);
   outline: var(--pine-outline-focus-danger);
   outline-offset: var(--pine-border-width);
 }
+:host(.destructive) pds-link::part(link):focus-visible {
+  background-color: var(--pine-color-danger-disabled);
+  outline: var(--pine-outline-focus-danger);
+}
 
-/* Remove outline on contained links using the custom property */
-pds-link::part(link):focus,
 pds-link::part(link):focus-visible {
+  border-radius: var(--pine-dimension-xs);
   box-shadow: none;
-  outline: none;
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
 }
 
 pds-link::part(link) {