@pine-ds/core 4.8.0 → 4.9.1

package/dist/cjs/{truncation-tooltip-BtuiXLV0.js → truncation-tooltip-DdB78RIe.js}

@@ -1,7 +1,11 @@
 'use strict';
 
-var floatingUi_dom = require('./floating-ui.dom-Dc8Anyel.js');
+var floatingUi_dom = require('./floating-ui.dom-Dw41zbyY.js');
+var portalTarget = require('./portal-target-e8WQ6dLx.js');
 
+// Controls that clipped text can sit inside that already take focus, so the text adds no tab stop of its own.
+// Not any `[tabindex]`: a focusable scroll region full of chips would show every chip's tooltip at once.
+const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"]';
 /** CSS class prefix used for truncation tooltip portal elements */
 const TOOLTIP_CLASS = 'pds-truncation-tooltip';
 /**
@@ -11,7 +15,8 @@ const TOOLTIP_CLASS = 'pds-truncation-tooltip';
  *
  * Z-Index Strategy:
  * Uses --pine-z-index-nuclear (9999) to ensure tooltips appear above all other UI elements.
- * This is necessary because tooltips are portaled to document.body and must overlay:
+ * This is necessary because tooltips are portaled to document.body, or into the modal dialog or
+ * open popover around the host (the top layer, which no z-index reaches from the body), and must overlay:
  * - Modal dialogs
  * - Dropdown menus
  * - Other floating UI elements
@@ -51,6 +56,15 @@ function injectStyles() {
       opacity: 1;
       visibility: visible;
     }
+    :is(dialog, [popover]) > .${TOOLTIP_CLASS} {
+      font-style: normal;
+      font-weight: normal;
+      text-align: start;
+      text-indent: 0;
+      text-transform: none;
+      white-space: normal;
+      word-spacing: normal;
+    }
   `;
     document.head.appendChild(style);
 }
@@ -77,7 +91,8 @@ function isFocusVisible(el) {
  *
  * When the element's text overflows, hovering the host element or giving it
  * keyboard focus will display a tooltip showing the full text content. The
- * tooltip is rendered as a portal on document.body and positioned with Floating UI.
+ * tooltip is rendered as a portal on document.body, or in the modal dialog or open popover around
+ * the host, and positioned with Floating UI.
  *
  * Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
  *
@@ -87,6 +102,7 @@ function setupTruncationTooltip(options) {
     const { hostEl, contentEl, getTooltipText, placement = 'top', reference = hostEl, manageTabIndex = true, focusEl = hostEl } = options;
     injectStyles();
     let portalEl = null;
+    let stopWatchingPortalHost = null;
     let isHovering = false;
     let isHoveringPortal = false;
     let isFocused = false;
@@ -165,7 +181,11 @@ function setupTruncationTooltip(options) {
         contentDiv.className = `${TOOLTIP_CLASS}__content`;
         contentDiv.textContent = text.trim();
         portalEl.appendChild(contentDiv);
-        document.body.appendChild(portalEl);
+        const portalHost = portalTarget.findPortalTarget(hostEl, portalTarget.isTopLayerInDocument);
+        portalHost.appendChild(portalEl);
+        // Closing that host moves no pointer, so a tooltip opened by touch would outlive it unseen.
+        if (portalHost !== document.body)
+            stopWatchingPortalHost = portalTarget.onTopLayerClose(portalHost, closeWithPortalHost);
         // Allow the user to hover into the tooltip to select/copy text
         portalEl.addEventListener('mouseenter', handlePortalMouseEnter);
         portalEl.addEventListener('mouseleave', handlePortalMouseLeave);
@@ -204,6 +224,10 @@ function setupTruncationTooltip(options) {
         }
     }
     function removePortal() {
+        if (stopWatchingPortalHost !== null) {
+            stopWatchingPortalHost();
+            stopWatchingPortalHost = null;
+        }
         if (portalEl) {
             portalEl.removeEventListener('mouseenter', handlePortalMouseEnter);
             portalEl.removeEventListener('mouseleave', handlePortalMouseLeave);
@@ -237,6 +261,14 @@ function setupTruncationTooltip(options) {
             return;
         removePortal();
     }
+    // Hover and focus can't outlast a host that's no longer shown, so none of them keeps it open.
+    function closeWithPortalHost() {
+        isHovering = false;
+        isHoveringPortal = false;
+        isFocused = false;
+        cancelHideTimeout();
+        removePortal();
+    }
     /**
      * Schedules tooltip removal after a short delay.
      *
@@ -268,11 +300,18 @@ function setupTruncationTooltip(options) {
         isHoveringPortal = false;
         scheduleHide();
     }
+    // A second tab stop inside focusEl, such as another clipped text, bubbles its focus here too. Its event.target is
+    // retargeted to the stop's outermost element in focusEl's tree, which sits beside hostEl rather than around or in it.
+    function isFocusForHost(target) {
+        return focusEl === hostEl || target === focusEl || target.contains(hostEl) || hostEl.contains(target);
+    }
     // Keyboard focus only: focus from a click would pin the tooltip open after the pointer leaves.
     // Events from inside a shadow root arrive retargeted to its host, so test the innermost target.
     function showForVisibleFocus(event) {
         if (!isFocusVisible(event.composedPath()[0]))
             return;
+        if (!isFocusForHost(event.target))
+            return;
         isFocused = true;
         showTooltip();
     }
@@ -318,4 +357,5 @@ function setupTruncationTooltip(options) {
     };
 }
 
+exports.FOCUSABLE_WRAPPER = FOCUSABLE_WRAPPER;
 exports.setupTruncationTooltip = setupTruncationTooltip;

package/dist/collection/components/pds-alert/pds-alert.css

@@ -128,4 +128,17 @@
   flex-shrink: 0;
   margin-inline-start: auto;
   white-space: nowrap;
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(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;
 }

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

@@ -1,4 +1,12 @@
 import { Host, h } from "@stencil/core";
+// What each variant announces when `severityLabel` isn't set. The `default`
+// variant has no severity.
+const SEVERITY_LABELS = {
+    danger: 'Error',
+    info: 'Info',
+    success: 'Success',
+    warning: 'Warning',
+};
 /**
  * @slot actions - Slot for alert actions.
  * @part dismiss
@@ -50,7 +58,12 @@ export class PdsAlert {
         }
         return (h("div", null, h("pds-text", { class: "pds-alert__description", color: "var(--pds-alert-color-text)", tag: "p" }, h("slot", null)), this.hasActionsContent && this.renderActions(false)));
     }
+    severityText() {
+        var _a;
+        return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : SEVERITY_LABELS[this.variant];
+    }
     render() {
+        const severity = this.severityText();
         const iconMap = {
             danger: 'warning-filled',
             default: 'info-circle-filled',
@@ -60,7 +73,7 @@ export class PdsAlert {
         };
         // Get the icon name based on the current variant
         const iconName = iconMap[this.variant] || iconMap.default;
-        return (h(Host, { key: 'b143df0c24c077e412894f5f77f1bd7c0ced1c92', class: "pds-alert", id: this.componentId, variant: this.variant }, h("pds-box", { key: '928e3852507a1776069ee80906443ef650607ce7', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, h("pds-box", { key: '778046ab1c651a57e910e45fe00944a74a3c32f7', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, !this.hideIcon && (h("pds-icon", { key: '0199ef3e12a8dc9da20006fc8c4e133f83f4caf4', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)" })), h("pds-box", { key: 'b7b973c0c6154d72f90a585a116ea76ac48cc6e4', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (h("pds-text", { key: 'c969f9a7eabdc31bc2faca247033e89cc15caea0', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (h("button", { key: '168c21de5a0112a65b73a854add4393fea9ede6f', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": this.dismissLabel, onClick: this.handleCloseClick }, h("pds-icon", { key: 'f8e9311a4934c1b8458879cd6244a99e3a730be2', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
+        return (h(Host, { key: 'd487419289ef352f63e7861fb21f42aa243ee526', class: "pds-alert", id: this.componentId, variant: this.variant }, h("pds-box", { key: '0ecd6e25d4163d41055be53e88f6d332e56e1ed8', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, h("pds-box", { key: '4cca87bd3b9758e9830eddec25c9fd3e8c06a44d', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, severity && h("span", { key: 'b076475ed4a0bc2db09df84d6530db0e4e098daf', class: "visually-hidden" }, severity), !this.hideIcon && (h("pds-icon", { key: 'e8efc683c4f84e22fac8729c0c476c817b33f3e6', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)", "aria-hidden": "true" })), h("pds-box", { key: 'f3ff29ce778f2e8bfb0d0a3e6a732714ce22e8ad', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (h("pds-text", { key: 'c00d44fe496e8aae699ac740428e6e523c0c8d0a', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (h("button", { key: 'd770590cecc3b27e1dd2750bbdfa07209dbb017d', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": this.dismissLabel, onClick: this.handleCloseClick }, h("pds-icon", { key: '9d79c27c829662dbeecb30dfad806f345eeb6c67', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
     }
     static get is() { return "pds-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -225,6 +238,28 @@ export class PdsAlert {
                 "reflect": false,
                 "attribute": "dismiss-label",
                 "defaultValue": "'Dismiss alert'"
+            },
+            "severityLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "undefined"
+                        }],
+                    "text": "Accessible label announcing the alert's severity, read before the heading\nand message. Pass a translated string to localize it; defaults to English\nfor each variant (`Error`, `Info`, `Success`, `Warning`). The `default`\nvariant has no severity and announces none unless this is set; pass an\nempty string to announce none for any variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "severity-label"
             }
         };
     }

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

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 
 export default {
@@ -15,6 +16,7 @@ const BaseTemplate = (args) => html` <pds-alert
   ?small=${args.small}
   ?dismissible=${args.dismissible}
   ?hide-icon=${args.hideIcon}
+  severity-label=${ifDefined(args.severityLabel)}
 >${args.description}</pds-alert>`;
 
 const ActionsTemplate = (args) => html` <pds-alert
@@ -24,6 +26,7 @@ const ActionsTemplate = (args) => html` <pds-alert
   ?small=${args.small}
   ?dismissible=${args.dismissible}
   ?hide-icon=${args.hideIcon}
+  severity-label=${ifDefined(args.severityLabel)}
 >
   ${args.description}
   <pds-button slot="actions" variant="primary">Button</pds-button>
@@ -37,6 +40,7 @@ const SmallActionsTemplate = (args) => html` <pds-alert
   ?small=${args.small}
   ?dismissible=${args.dismissible}
   ?hide-icon=${args.hideIcon}
+  severity-label=${ifDefined(args.severityLabel)}
 >
   ${args.description}
   <pds-link slot="actions" variant="plain" href="#">Link</pds-link>

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

@@ -1,6 +1,8 @@
 import { Host, h } from "@stencil/core";
 import { checkCircleFilled, userFilled } from "@pine-ds/icons/icons";
 import { restoreReflectedDefault } from "../../utils/reflected-attribute-default";
+// Used when `badgeLabel` is unset; an empty string hides the badge instead.
+const DEFAULT_BADGE_LABEL = 'Verified';
 /**
  * @part asset-wrapper
  * @part button
@@ -79,14 +81,22 @@ export class PdsAvatar {
                 :
                     this.renderAssetWrapper());
         };
-        this.renderBadge = () => (
-        // `badge` and `status` share the bottom-end corner; `status` wins so the
-        // presence dot is never painted over the badge.
-        this.badge && !this.status
-            // Percentage is average size of icon in relation to total avatar size
-            // of all preset sizes found in Figma.
-            // Used to allow icons to scale to container size
-            && h("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
+        this.renderBadge = () => {
+            var _a;
+            // Inside the dropdown trigger the button's aria-label is the name, so the
+            // badge is decorative there, as the status dot is. An empty label is
+            // decorative too, rather than an image with no name.
+            const badgeLabel = (_a = this.badgeLabel) !== null && _a !== void 0 ? _a : DEFAULT_BADGE_LABEL;
+            const label = this.dropdown || badgeLabel === '' ? undefined : badgeLabel;
+            return (
+            // `badge` and `status` share the bottom-end corner; `status` wins so the
+            // presence dot is never painted over the badge.
+            this.badge && !this.status
+                // Percentage is average size of icon in relation to total avatar size
+                // of all preset sizes found in Figma.
+                // Used to allow icons to scale to container size
+                && h("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%", "aria-label": label, "aria-hidden": label === undefined ? 'true' : undefined }));
+        };
         this.renderStatus = () => {
             var _a;
             if (!this.status)
@@ -141,7 +151,7 @@ export class PdsAvatar {
         }
     }
     render() {
-        return (h(Host, { key: 'bd60a3273eaa4e2f5fa4d0f5d0d27babd7674e09', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
+        return (h(Host, { key: '0942c1fff94d0d8138143cbddf80aea1d09e34a9', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
     }
     static get is() { return "pds-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -203,6 +213,28 @@ export class PdsAvatar {
                 "attribute": "badge",
                 "defaultValue": "false"
             },
+            "badgeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'Verified'"
+                        }],
+                    "text": "Accessible label for the badge icon. Pass a translated string to localize\nit; defaults to English. Pass an empty string to make the badge\ndecorative. Has no effect on dropdown avatars, where the trigger's\n`triggerLabel` owns the accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-label"
+            },
             "componentId": {
                 "type": "string",
                 "mutable": false,

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

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import imgFile from '../assets/demi_wilkinson.jpg';
 
 
@@ -22,6 +23,7 @@ export default {
 const BaseTemplate = (args) => html`<pds-avatar
 	alt="${args.alt}"
 	badge="${args.badge}"
+	badge-label=${ifDefined(args.badgeLabel)}
 	dropdown="${args.dropdown}"
 	component-id="${args.componentId}"
 	image="${args.image}"

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

@@ -153,7 +153,7 @@ export class PdsBox {
         const normalizedBorder = normalizeColorValue(this.borderColor);
         const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (normalizedBackground && { '--color-background-box': normalizedBackground })), (normalizedBorder && { '--color-border-box': normalizedBorder })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-width-box': this.minWidth })), (this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }));
         this.hostKeeper.record(boxClasses, boxInlineStyles);
-        return (h(Host, { key: '8a1348247b5a4c546759232f0f155721798797e5', class: boxClasses, style: boxInlineStyles }));
+        return (h(Host, { key: 'c791a8d413b47629c619424bebf9d9c4acc4d9f3', class: boxClasses, style: boxInlineStyles }));
     }
     static get is() { return "pds-box"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { hasShadowDom } from "../../utils/utils";
+import { ARIA_REFERENCE_ATTRIBUTES, forwardAriaReferences } from "../../utils/aria-references";
 import { caretDown, addCircle } from "@pine-ds/icons/icons";
 const FORWARDED_ARIA_ATTRIBUTES = ['aria-current', 'aria-expanded', 'aria-haspopup', 'aria-label', 'aria-pressed'];
 /**
@@ -68,7 +69,12 @@ export class PdsButton {
             if (FORWARDED_ARIA_ATTRIBUTES.some((name) => forwarded[name] !== this.forwardedAria[name])) {
                 this.forwardedAria = forwarded;
             }
-            this.forwardAriaControls();
+            this.forwardAriaReferences();
+        };
+        // A hint added after the button, or replaced by a framework or a DOM morph, is picked up by the
+        // time focus reaches the button and it's announced.
+        this.handleFocusIn = () => {
+            this.forwardAriaReferences();
         };
         this.handleStartSlotChange = (event) => {
             this.hasStartContent = event.target.assignedElements({ flatten: true }).length > 0;
@@ -111,7 +117,7 @@ export class PdsButton {
         // Consumers, popovers and menus set these on the host, often after render, but only the inner element is announced.
         this.hostAriaObserver = new MutationObserver(this.syncHostAria);
         this.hostAriaObserver.observe(this.el, {
-            attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat('aria-controls'),
+            attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat(ARIA_REFERENCE_ATTRIBUTES),
         });
     }
     disconnectedCallback() {
@@ -120,7 +126,7 @@ export class PdsButton {
         this.hostAriaObserver = undefined;
     }
     componentDidRender() {
-        this.forwardAriaControls();
+        this.forwardAriaReferences();
     }
     /**
      * Listen for Enter key presses on form inputs to trigger submit
@@ -171,25 +177,9 @@ export class PdsButton {
             }
         }
     }
-    // ID references can't cross the shadow boundary, so aria-controls is forwarded as element references.
-    forwardAriaControls() {
-        var _a, _b;
-        if (!this.contentEl || !('ariaControlsElements' in this.contentEl))
-            return;
-        const ids = (_b = (_a = this.el.getAttribute('aria-controls')) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
-        const controlled = ids.map((id) => this.findInAncestorRoots(id)).filter((el) => el !== null);
-        this.contentEl.ariaControlsElements = controlled.length > 0 ? controlled : null;
-    }
-    // A trigger inside another component's shadow root still controls a popover portal on document.body.
-    findInAncestorRoots(id) {
-        let root = this.el.getRootNode();
-        while (root instanceof ShadowRoot) {
-            const found = root.getElementById(id);
-            if (found)
-                return found;
-            root = root.host.getRootNode();
-        }
-        return root instanceof Document ? root.getElementById(id) : null;
+    forwardAriaReferences() {
+        if (this.contentEl)
+            forwardAriaReferences(this.el, this.contentEl);
     }
     classNames() {
         const classNames = ['pds-button'];
@@ -249,7 +239,7 @@ export class PdsButton {
         // Hide text when loading or iconOnly is true
         const hideText = this.loading || this.iconOnly;
         const content = (h("div", { class: "pds-button__content", part: "button-content" }, this.renderStartContent(), h("span", { class: `pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`, part: "button-text" }, h("slot", null)), this.loading && (h("span", { class: "pds-button__loader" }, h("pds-loader", { "is-loading": true, size: "var(--pine-font-size-body-2xl)", variant: "spinner", exportparts: "loader-svg" }, "Loading..."))), this.renderEndContent()));
-        return (h(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null }, (this.componentId != null ? { id: this.componentId } : {}), { onClick: this.handleClick, variant: this.variant }), h(ContentElement, Object.assign({}, attributes()), content)));
+        return (h(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null }, (this.componentId != null ? { id: this.componentId } : {}), { onClick: this.handleClick, onFocusin: this.handleFocusIn, variant: this.variant }), h(ContentElement, Object.assign({}, attributes()), content)));
     }
     static get is() { return "pds-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-checkbox/pds-checkbox.css

@@ -155,4 +155,83 @@ label {
 }
 .pds-checkbox__message--error pds-icon {
   margin-block-start: var(--pine-dimension-025);
+}
+
+:host(.pds-checkbox--pill) {
+  position: relative;
+}
+:host(.pds-checkbox--pill) label {
+  align-items: center;
+  background: var(--pine-color-background-container);
+  border: var(--pine-border);
+  border-radius: var(--pine-border-radius-full);
+  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);
+  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);
+  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);
+  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 {
+  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);
+  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)));
+  }
 }

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

@@ -15,6 +15,11 @@ export class PdsCheckbox {
          * It determines whether or not the checkbox is checked.
          */
         this.checked = false;
+        /**
+         * Sets the style variant of the checkbox. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
+         * @defaultValue default
+         */
+        this.variant = 'default';
         this.handleCheckboxChange = (e) => {
             if (this.disabled) {
                 return;
@@ -54,6 +59,9 @@ export class PdsCheckbox {
         if (this.hasLabelSlot) {
             classNames.push('has-label-slot');
         }
+        if (this.variant === 'pill') {
+            classNames.push('pds-checkbox--pill');
+        }
         return classNames.join('  ');
     }
     connectedCallback() {
@@ -116,9 +124,9 @@ export class PdsCheckbox {
     render() {
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: 'bbe09a5e9eb55f62b2921b09a04ddc9476a871ae', class: hostClass }, h("label", { key: 'fa1856d9306eb8c0c19618ea5e2619ea20c3c51d', htmlFor: this.componentId }, h("input", Object.assign({ key: '8537d97a8e69a17d0d563306dac179e393885dda', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), h("span", { key: 'e523922889c80a2d18243cb560cd855bab95803d', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: 'b6ff34ecbc346d254a0211bfa610823feedb486b', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            h("div", { key: '55dcca850dff0aa93d9ba63d6827d9155ac35dab', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '5af843679994d29f084d41e90e41e0939c951063', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '88a46a17abc1c7b3b3e90543ce8dcf38a14c878c', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '8e9185653796f250ad425350b9adc1f65fd047c1', class: hostClass }, h("label", { key: 'e17bab4b96b4ffc716e311ecea488a3025e1551c', htmlFor: this.componentId }, h("input", Object.assign({ key: '8af9bbc3dbe18409532e95b4b490eab4aabc8762', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput, class: this.variant === 'pill' ? 'visually-hidden' : undefined }, this.inheritedAttributes)), h("span", { key: '1e4d9a826b6b5ec429ae47096d4aede3af43d110', class: this.hideLabel && this.variant !== 'pill' ? 'visually-hidden' : '' }, h("slot", { key: '7b10c7d1e018be4afe019cb56e82a5ec7a638de8', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            h("div", { key: 'c5455322eb07bf73805a17c28bf6acc1b5384337', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '0f7c8ec00362c31b1c5bd11c185c6e7bfc177f22', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f6eccfaac90505903aee379f2fc28b5735d8c4a9', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -243,7 +251,7 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the checkbox will visually appear as indeterminate.\nOnly JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)."
+                    "text": "If `true`, the checkbox will visually appear as indeterminate.\nOnly JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\nHas no visual style when `variant` is `pill`."
                 },
                 "getter": false,
                 "setter": false,
@@ -300,7 +308,7 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers."
+                    "text": "Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers. Ignored when `variant` is `pill`."
                 },
                 "getter": false,
                 "setter": false,
@@ -363,6 +371,29 @@ export class PdsCheckbox {
                 "setter": false,
                 "reflect": false,
                 "attribute": "value"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pill'",
+                    "resolved": "\"default\" | \"pill\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "default"
+                        }],
+                    "text": "Sets the style variant of the checkbox. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
             }
         };
     }

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

@@ -8,6 +8,13 @@ export default {
     invalid: false,
     hideLabel: false,
     required: false,
+    variant: 'default',
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'pill'],
+    },
   },
   component: 'pds-checkbox',
   parameters: {},
@@ -28,6 +35,7 @@ const BaseTemplate = (args) =>
     name=${args.name}
     ?required=${args.required}
     value=${args.value}
+    variant=${args.variant}
   />`;
 
 export const Default = BaseTemplate.bind();
@@ -72,3 +80,33 @@ Invalid.args = {
   label: 'Label text',
   invalid: true,
 };
+
+export const Pill = BaseTemplate.bind();
+Pill.args = {
+  componentId: 'pill',
+  label: 'Label text',
+  variant: 'pill',
+};
+
+const PillGroupTemplate = (args) =>
+  html`<fieldset style="border: 0; margin: 0; padding: 0;">
+    <legend style="font: var(--pine-typography-body-medium); margin-block-end: var(--pine-dimension-xs); padding: 0;">Send to</legend>
+    <pds-box wrap gap="xs">
+      <pds-checkbox component-id="pill-email" name="channels" value="email" label="Email" variant="pill" checked ?disabled=${args.disabled} ?invalid=${args.invalid}></pds-checkbox>
+      <pds-checkbox component-id="pill-sms" name="channels" value="sms" label="SMS" variant="pill" ?disabled=${args.disabled} ?invalid=${args.invalid}></pds-checkbox>
+      <pds-checkbox component-id="pill-push" name="channels" value="push" label="Push notification" variant="pill" ?disabled=${args.disabled} ?invalid=${args.invalid}></pds-checkbox>
+    </pds-box>
+  </fieldset>`;
+
+export const PillGroup = PillGroupTemplate.bind();
+PillGroup.args = {};
+
+export const PillDisabled = PillGroupTemplate.bind();
+PillDisabled.args = {
+  disabled: true,
+};
+
+export const PillInvalid = PillGroupTemplate.bind();
+PillInvalid.args = {
+  invalid: true,
+};