@xplortech/apollo-core 2.6.0 → 2.7.1

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

@@ -1,16 +1,153 @@
 import { Host, h } from "@stencil/core";
+const LEGACY_STATUS_TO_BADGE = {
+    active: 'green',
+    inactive: 'gray',
+    warning: 'red',
+};
+const MAX_GROUP_VISIBLE = 4;
+const MAX_INITIALS = 3;
+function getInitials(name) {
+    var _a, _b, _c;
+    if (!name || !name.trim())
+        return '';
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return '';
+    if (parts.length === 1)
+        return parts[0].slice(0, MAX_INITIALS).toUpperCase();
+    const first = (_a = parts[0][0]) !== null && _a !== void 0 ? _a : '';
+    const last = (_b = parts[parts.length - 1][0]) !== null && _b !== void 0 ? _b : '';
+    const mid = parts.length > 2 ? ((_c = parts[1][0]) !== null && _c !== void 0 ? _c : '') : '';
+    return (first + mid + last).slice(0, MAX_INITIALS).toUpperCase();
+}
+function formatRemainingCount(n) {
+    if (n <= 0)
+        return '';
+    if (n <= 999)
+        return `+${n}`;
+    const rounded = Math.round(n / 500) * 500;
+    const k = rounded / 1000;
+    const label = k % 1 === 0 ? `${k}k` : `${k.toFixed(1)}k`;
+    return `+${label}`;
+}
 export class Avatar {
     constructor() {
+        this.cachedGroupItems = [];
+        this.cachedSlotContent = '';
         this.disabled = false;
     }
+    onGroupDataChange(newValue) {
+        this.cachedGroupItems = Avatar.parseGroupData(newValue);
+    }
+    componentWillLoad() {
+        var _a, _b, _c;
+        this.cachedSlotContent = (_c = (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim().slice(0, MAX_INITIALS)) !== null && _c !== void 0 ? _c : '';
+        this.onGroupDataChange(this.groupData);
+    }
+    static parseGroupData(raw) {
+        if (raw == null)
+            return [];
+        if (typeof raw === 'string') {
+            try {
+                const parsed = JSON.parse(raw);
+                return Array.isArray(parsed) ? parsed : [];
+            }
+            catch (_a) {
+                return [];
+            }
+        }
+        return Array.isArray(raw) ? raw : [];
+    }
+    get groupItems() {
+        return this.cachedGroupItems;
+    }
+    get statusBadgeVariant() {
+        var _a;
+        const s = this.status;
+        if (s === undefined)
+            return undefined;
+        return ((_a = LEGACY_STATUS_TO_BADGE[s]) !== null && _a !== void 0 ? _a : s);
+    }
+    getPlaceholderText() {
+        if (this.cachedSlotContent.length > 0)
+            return this.cachedSlotContent;
+        return getInitials(this.name);
+    }
+    static getSingleAvatarClasses(size, color, isProfileSize, disabled) {
+        return {
+            'xpl-avatar': true,
+            [`xpl-avatar--${size}`]: !!size,
+            [`xpl-avatar--${color}`]: !!color,
+            'xpl-avatar--profile': !!isProfileSize,
+            'xpl-avatar--disabled': !!disabled,
+        };
+    }
+    getAnchorProps(className) {
+        var _a;
+        return {
+            href: this.href,
+            target: this.target,
+            rel: this.target === '_blank' ? 'noopener noreferrer' : undefined,
+            'aria-label': (_a = this.name) !== null && _a !== void 0 ? _a : 'Profile',
+            class: className,
+        };
+    }
+    static renderAvatarMedia(src, name, placeholderText, ariaLabelFallback, showSlot = true) {
+        if (src) {
+            return h("img", { alt: name !== null && name !== void 0 ? name : '', src: src });
+        }
+        return (h("div", { class: "xpl-avatar__placeholder", role: "img", "aria-label": name !== null && name !== void 0 ? name : ariaLabelFallback }, placeholderText || (showSlot ? h("slot", null) : null)));
+    }
+    renderAvatarMediaWithStatusBadge(wrapperClass) {
+        const placeholderText = this.getPlaceholderText();
+        return (h("div", Object.assign({}, (wrapperClass ? { class: wrapperClass } : {})), Avatar.renderAvatarMedia(this.src, this.name, placeholderText, 'Profile', true), this.statusBadgeVariant && (h("xpl-badge", { dotOnly: true, bordered: true, variant: this.statusBadgeVariant, "aria-hidden": "true" }))));
+    }
+    renderGroupItem(item, index) {
+        const placeholderText = item.name ? getInitials(item.name) : '';
+        return (h("div", { class: {
+                'xpl-avatar-group__item': true,
+                'xpl-avatar': true,
+                [`xpl-avatar--${this.size}`]: !!this.size,
+                [`xpl-avatar--${item.color}`]: !!item.color,
+            } }, h("div", null, Avatar.renderAvatarMedia(item.src, item.name, placeholderText, `Member ${index + 1}`, false))));
+    }
+    renderWithTextContent() {
+        return (h("div", { class: "xpl-avatar__with-text-content" }, h("div", { class: "xpl-avatar__with-text-name" }, this.name), this.subText && h("div", { class: "xpl-avatar__with-text-sub" }, this.subText)));
+    }
     render() {
-        let className = 'xpl-avatar';
-        if (this.size)
-            className += ` xpl-avatar--${this.size}`;
-        if (this.color)
-            className += ` xpl-avatar--${this.color}`;
-        const inner = (h("div", { key: '89234f18fd782f17c7e5cfac2235ba0d69b57014' }, this.src ? (h("img", { alt: this.name, src: this.src })) : (h("div", { class: "xpl-avatar__placeholder" }, h("slot", null))), this.status && h("div", { key: '908dbd9216d3addb0104517a67f2dd690201958d', class: `xpl-avatar__dot--${this.status}` })));
-        return (h(Host, { key: '94cb5838d77411b9690759634f4a1a71c79054b7' }, this.href && !this.disabled ? (h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (h("div", { class: `${className} xpl-avatar--disabled` }, inner)) : (h("div", { class: className }, inner))));
+        const v = this.variant;
+        if (v === 'group') {
+            const items = this.groupItems;
+            const visible = items.slice(0, MAX_GROUP_VISIBLE);
+            const remaining = items.length - MAX_GROUP_VISIBLE;
+            const showCount = remaining > 0;
+            const countLabel = showCount ? formatRemainingCount(remaining) : '';
+            return (h(Host, null, h("div", { class: {
+                    'xpl-avatar-group': true,
+                    [`xpl-avatar-group--${this.size}`]: !!this.size,
+                }, role: "group", "aria-label": `${items.length} members` }, visible.map((item, i) => (h("div", { key: i, class: "xpl-avatar-group__wrap" }, this.renderGroupItem(item, i)))), showCount && (h("div", { class: {
+                    'xpl-avatar-group__count': true,
+                    [`xpl-avatar-group__count--${this.size}`]: !!this.size,
+                }, "aria-label": `${remaining} more` }, countLabel)))));
+        }
+        if (v === 'with-text') {
+            const avatarBlock = this.renderAvatarMediaWithStatusBadge('xpl-avatar__with-text-avatar');
+            const withTextClasses = {
+                'xpl-avatar': true,
+                'xpl-avatar--with-text': true,
+                [`xpl-avatar--${this.color}`]: !!this.color,
+                'xpl-avatar--disabled': !!this.disabled,
+            };
+            return (h(Host, null, this.href && !this.disabled ? (h("a", Object.assign({}, this.getAnchorProps('xpl-avatar__with-text-link')), h("div", { class: withTextClasses }, avatarBlock, this.renderWithTextContent()))) : (h("div", { class: withTextClasses, "aria-disabled": this.disabled ? 'true' : undefined }, avatarBlock, this.renderWithTextContent()))));
+        }
+        const isProfile = v === 'profile';
+        const singleSize = isProfile && this.size === 'md' ? undefined : this.size;
+        const singleClasses = Avatar.getSingleAvatarClasses(singleSize, this.color, isProfile, this.disabled);
+        const content = this.renderAvatarMediaWithStatusBadge();
+        if (this.href && !this.disabled) {
+            return (h(Host, null, h("a", Object.assign({}, this.getAnchorProps(singleClasses)), content)));
+        }
+        return (h(Host, null, h("div", { class: singleClasses, "aria-disabled": this.disabled ? 'true' : undefined }, content)));
     }
     static get is() { return "xpl-avatar"; }
     static get properties() {
@@ -19,9 +156,15 @@ export class Avatar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'green' | 'yellow' | 'pink' | 'primary' | 'secondary'",
+                    "original": "AvatarColor",
                     "resolved": "\"green\" | \"pink\" | \"primary\" | \"secondary\" | \"yellow\"",
-                    "references": {}
+                    "references": {
+                        "AvatarColor": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
+                            "id": "src/components/components/xpl-avatar/xpl-avatar.tsx::AvatarColor"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -54,6 +197,31 @@ export class Avatar {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
+            "groupData": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarGroupItem[] | string",
+                    "resolved": "AvatarGroupItem[] | string",
+                    "references": {
+                        "AvatarGroupItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
+                            "id": "src/components/components/xpl-avatar/xpl-avatar.tsx::AvatarGroupItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When `variant` is `group`, data for each face (max 4 visible + overflow count). Each item: { src?, name?, color? }."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group-data"
+            },
             "href": {
                 "type": "string",
                 "mutable": false,
@@ -85,7 +253,7 @@ export class Avatar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Alt text for the image if there is an image src"
+                    "text": "Alt text for the image; also used for initials when no image and no slot."
                 },
                 "getter": false,
                 "setter": false,
@@ -104,7 +272,7 @@ export class Avatar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Size of the avatar"
+                    "text": "Size of the avatar (and of each avatar in a group)."
                 },
                 "getter": false,
                 "setter": false,
@@ -134,20 +302,48 @@ export class Avatar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'active' | 'warning' | 'inactive'",
-                    "resolved": "\"active\" | \"inactive\" | \"warning\"",
+                    "original": "AvatarStatus",
+                    "resolved": "\"active\" | \"blue\" | \"gray\" | \"green\" | \"inactive\" | \"orange\" | \"purple\" | \"red\" | \"warning\" | \"yellow\"",
+                    "references": {
+                        "AvatarStatus": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
+                            "id": "src/components/components/xpl-avatar/xpl-avatar.tsx::AvatarStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": ":** `active`, `warning`, and `inactive` still map to `green`, `red`, and `gray` for existing consumers. Prefer palette names; legacy values are scheduled for removal in the next **major** release."
+                        }],
+                    "text": "Shown for the default avatar, `profile`, and `with-text`; not shown when `variant` is `group`.\n**Legacy"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "subText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Color styles for the dot indicator to indicate varied states"
+                    "text": "Secondary text shown when `variant` is `with-text` (e.g. email)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "status"
+                "attribute": "sub-text"
             },
             "target": {
                 "type": "string",
@@ -167,7 +363,45 @@ export class Avatar {
                 "setter": false,
                 "reflect": false,
                 "attribute": "target"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarVariant",
+                    "resolved": "\"group\" | \"profile\" | \"with-text\"",
+                    "references": {
+                        "AvatarVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-avatar/xpl-avatar.tsx",
+                            "id": "src/components/components/xpl-avatar/xpl-avatar.tsx::AvatarVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional layout: `profile` (large profile sizes), `group` (stacked faces + `groupData`; `status` not shown),\n`with-text` (avatar with `name` / `subText` beside it). Omit for the default single avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant"
             }
         };
     }
+    static get states() {
+        return {
+            "cachedGroupItems": {},
+            "cachedSlotContent": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "groupData",
+                "methodName": "onGroupDataChange"
+            }];
+    }
 }

package/dist/collection/components/xpl-backdrop/xpl-backdrop.js

@@ -4,7 +4,7 @@ export class Backdrop {
         this.relative = false;
     }
     render() {
-        return (h(Host, { key: '43941007f4e0ba73037eaff96cf8d000cee48b72', class: {
+        return (h(Host, { key: '072fedf411c5d8671ec2d8a6ff639e5adf93e15c', class: {
                 'xpl-backdrop': true,
                 'xpl-backdrop--fixed': !this.relative,
                 'xpl-backdrop--relative': this.relative,

package/dist/collection/components/xpl-badge/badge.stories.js

@@ -87,37 +87,5 @@ Badge.parameters = Object.assign(Object.assign({}, commonParameters), { 'web-com
             return `<xpl-badge ${attrs}>${(_a = args.text) !== null && _a !== void 0 ? _a : ''}</xpl-badge>`;
         })(),
     }, html: {
-        render: `<div class="xpl-badge xpl-badge--dot xpl-badge--purple xpl-badge--size-default xpl-badge--shape-rounded">Badge</div>`,
-    } });
-const PALETTE = ['purple', 'green', 'yellow', 'orange', 'gray', 'red', 'blue'];
-export const AllVariants = () => `
-<div style="padding: 2rem; max-width: 56rem;">
-  <h3 style="margin: 0 0 1rem; font: inherit; font-weight: 600; color: var(--xpl-text-default);">Palette (pill)</h3>
-  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
-    ${PALETTE.map((v) => `<xpl-badge variant="${v}">${v}</xpl-badge>`).join('')}
-  </div>
-  <h3 style="margin: 0 0 1rem; font: inherit; font-weight: 600; color: var(--xpl-text-default);">With dot</h3>
-  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
-    ${PALETTE.map((v) => `<xpl-badge variant="${v}" dot>Label</xpl-badge>`).join('')}
-  </div>
-  <h3 style="margin: 0 0 1rem; font: inherit; font-weight: 600; color: var(--xpl-text-default);">Dot-only</h3>
-  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
-    ${PALETTE.map((v) => `<xpl-badge variant="${v}" dot-only>3</xpl-badge>`).join('')}
-  </div>
-  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
-    ${PALETTE.map((v) => `<xpl-badge variant="${v}" dot-only></xpl-badge>`).join('')}
-  </div>
-  <h3 style="margin: 0 0 1rem; font: inherit; font-weight: 600; color: var(--xpl-text-default);">Legacy semantic → mapped</h3>
-  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
-    <xpl-badge variant="success" dot>success</xpl-badge>
-    <xpl-badge variant="warning" dot>warning</xpl-badge>
-    <xpl-badge variant="inactive" dot>inactive</xpl-badge>
-    <xpl-badge variant="error" dot>error</xpl-badge>
-  </div>
-</div>
-`;
-AllVariants.parameters = Object.assign(Object.assign({}, commonParameters), { controls: { disable: true }, 'web-component': {
-        render: '<!-- See canvas: AllVariants gallery -->',
-    }, html: {
-        render: '<!-- See canvas: AllVariants gallery -->',
+        render: `<div class="xpl-badge xpl-badge--dot xpl-badge--purple xpl-badge--size-default xpl-badge--shape-rounded"><span class="xpl-badge__label">Badge</span></div>`,
     } });

package/dist/collection/components/xpl-badge/xpl-badge.js

@@ -27,7 +27,7 @@ export class Badge {
             [`xpl-badge--size-${this.size}`]: !!this.size,
             [`xpl-badge--shape-${this.shape}`]: !this.dotOnly && !!this.shape,
         };
-        return (h(Host, { key: '9580be5811ecfd027b81edb1ca8f5f08c325d3b6' }, h("div", { key: '0223458a5e1210f28b8b77a2d5fbd16d0b302998', class: className }, h("slot", { key: 'ef0e6db8a9f33dfcea4739be2300b481e35c7f10' }))));
+        return (h(Host, { key: 'f1a45af398443a5330afe856ac2442aa34cadf24' }, h("div", { key: 'fecb691b2b11414de0a03e119dd63332ade79a3c', class: className }, h("span", { key: '6c4169ea3d4f0f7cdaa03841ec72ac15f9e209f3', class: "xpl-badge__label" }, h("slot", { key: 'c7d96b70e9bcd161c279bf943c2cbc7248e2a53e' })))));
     }
     static get is() { return "xpl-badge"; }
     static get properties() {

package/dist/collection/components/xpl-banner/xpl-banner.js

@@ -38,8 +38,9 @@ export class Banner {
     }
     getAriaLabel() {
         var _a;
-        if (this.isSection)
+        if (this.isSection) {
             return ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.trim()) || 'Section banner';
+        }
         return {
             information: 'Information banner',
             positive: 'Positive banner',
@@ -55,13 +56,13 @@ export class Banner {
         const actionState = this.getActionButtonState();
         const isHeadingPresent = !!((_c = this.heading) === null || _c === void 0 ? void 0 : _c.trim());
         const isDescPresent = !!((_d = this.description) === null || _d === void 0 ? void 0 : _d.trim());
-        return (h(Host, { key: '746ce028bdc07d1a645251aecf524f427d1d695b', class: {
+        return (h(Host, { key: '373b38c40719c248968ed93381309584f24697a9', class: {
                 'xpl-banner': true,
                 'xpl-banner--section': this.isSection,
                 [`xpl-banner--${this.appearance}`]: true,
                 'xpl-banner--truncate-desc': this.truncateDesc,
                 'xpl-banner--no-icon': this.isSection && !this.hasIcon,
-            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (h("div", { key: 'fec752fe9822b480c2140c9b4520c2fcf71e4077', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: '1ce49bf4735edf985eaf055312cbd0bec8c76e96', icon: this.getIcon(), size: 24 }))), h("div", { key: '9f1b38f386c4151d25ed7ddb4770d39ae915760d', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: 'd1e2301d3174bf9bddec53aec75760c2f18899b8', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: '4d7104cb455bc6f000244c6a66d87fe642488a22', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: 'e3d3dd32d98399be0c1ed702ccc67e65c9d12236', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: '2410dbb9ea6c910e4cb8ace3a40378e10971060d', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: 'db600c5b7e955b466f5928c05dbd9da467317aaa', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: 'fe896518f7f3544a60dd1a125d4139985817c0d2', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: '98453bbd9485027c030f4fdc7af349c0e23aa405', icon: "xmark", size: 24, "aria-hidden": "true" })))));
+            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (h("div", { key: 'b12f8facbdad390e2069374163048099a33aa309', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: '35ee47db756bc0f6b6cd0a2b0cd890a4ec10ff7c', icon: this.getIcon(), size: 24 }))), h("div", { key: '8aaca62cbd7b3cf353bfb35fc2f679932f2b0ade', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: 'fded85ef43b5186704195312621a33b7b823d19d', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: '1b7386b32891789f8cc425da922f7c3ee60fe5a6', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: '0b4b8e89db7cc6c4a55e207cf0be1b36956fe243', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: 'c15e5cb0ff332f2ca809dcf912fc7a4c68d47538', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: '6f20f721df8eb994ef9935d2c6f634b3460d9d77', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: '2fab1fec767aaed2bb36ee2b40bcf84a48ad6ead', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: '7747d3e4aae5426d0e3344fb7aab92a4f003cf4e', icon: "xmark", size: 24, "aria-hidden": "true" })))));
     }
     static get is() { return "xpl-banner"; }
     static get properties() {

package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumb-item/xpl-breadcrumb-item.js

@@ -7,7 +7,7 @@ export class BreadcrumbItem {
     `;
     }
     render() {
-        return (h(Host, { key: 'ea9a888676dc9f7ef3a8ebdb194905d1e4350e2a', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: '3de2d04b006232bcdeca19c8cd300939bdfd160d', role: "none" }, h("slot", { key: 'ce28e3cce466682d576e026978f2f715cc8f2c84' })), h("span", { key: '862d5979885f27e002852d0e933b0003a6a8c9f3', innerHTML: this.chevron })));
+        return (h(Host, { key: '98314b8841ba9d900dbba227363865efb26faf4c', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: '26bf86067dc2348b6ca96243bd1f9513ca187a00', role: "none" }, h("slot", { key: '802b606cce1052ea7fb859260627d6c6801ed78f' })), h("span", { key: '22de35338bf4439a23f8c08a7ea46d1d4f2b68e8', innerHTML: this.chevron })));
     }
     static get is() { return "xpl-breadcrumb-item"; }
 }

package/dist/collection/components/xpl-breadcrumbs/xpl-breadcrumbs/xpl-breadcrumbs.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class Breadcrumbs {
     render() {
-        return (h(Host, { key: 'b2d3bc77d1cc55f20c15af6b3526c10ee5737d23' }, h("nav", { key: '576a7d126a4df07c275fef5a412b549f5fc7bf45', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '000ab463d675d42a67f3f484fe3d38ac7be1d60e', role: "list" }, h("slot", { key: '5f5895a835a4d572bd5566c1e8a4b9b83373f372' })))));
+        return (h(Host, { key: '36533f6524e01aed62e293ebe93d8eea34b6b59a' }, h("nav", { key: '6a5562e639044f9d9d12a6365df69c5181f5bbba', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '99463e4808425aa8478a5e8fa2a113831eae1ecf', role: "list" }, h("slot", { key: 'f4d20df3a834f100663786d47881f742c9691969' })))));
     }
     static get is() { return "xpl-breadcrumbs"; }
 }

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

@@ -44,7 +44,8 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'b4658d7608d4ec84a4bbb36e8989bf66cd0358a2', class: {
+        var _a;
+        return (h(Host, { key: 'fc2207b2f07ecccd8c076846406b7c5d2ed6854d', class: {
                 'xpl-button': true,
                 [`xpl-button--${this.size}`]: true,
                 [`xpl-button--${this.variant}`]: true,
@@ -54,16 +55,33 @@ export class Button {
                 'xpl-button--icon-only': this.iconOnly,
                 'xpl-button--disabled': this.disabled,
                 'xpl-button--loading': this.isLoading && !this.link,
-            } }, this.link ? (h("slot", null)) : (h("button", { disabled: this.disabled, onClick: (e) => this.handleLoadingState(e), type: this.isLoading &&
+            } }, this.link ? (h("slot", null)) : (h("button", Object.assign({}, ((_a = this.controlAttrs) !== null && _a !== void 0 ? _a : {}), { disabled: this.disabled, onClick: (e) => this.handleLoadingState(e), type: this.isLoading &&
                 (this.type === 'submit' ||
                     this.type === 'reset' ||
                     this.type === undefined)
                 ? 'button'
-                : this.type, name: this.name, value: this.value, form: this.form, "aria-busy": this.isLoading ? 'true' : undefined }, this.icon && h("span", { class: "xpl-button__icon" }, this.renderIcon()), h("slot", null), this.isLoading && (h("span", { class: "xpl-button__loading-overlay", "aria-hidden": "true" }, h("span", { class: "xpl-button__loading-spinner" }, h("xpl-icon", { icon: "loader-4" }))))))));
+                : this.type, name: this.name, value: this.value, form: this.form, "aria-busy": this.isLoading ? 'true' : undefined }), this.icon && h("span", { class: "xpl-button__icon" }, this.renderIcon()), h("slot", null), this.isLoading && (h("span", { class: "xpl-button__loading-overlay", "aria-hidden": "true" }, h("span", { class: "xpl-button__loading-spinner" }, h("xpl-icon", { icon: "loader-4" }))))))));
     }
     static get is() { return "xpl-button"; }
     static get properties() {
         return {
+            "controlAttrs": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\n        id?: string;\n        role?: string;\n        'aria-controls'?: string;\n        'aria-selected'?: 'true' | 'false';\n        'aria-current'?: string;\n    }",
+                    "resolved": "{ id?: string; role?: string; 'aria-controls'?: string; 'aria-selected'?: \"true\" | \"false\"; 'aria-current'?: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attributes to apply to the inner native `<button>` (e.g., tab a11y wiring).\nUse this instead of setting `id` / `role` / `aria-*` on the host when the\ninner control is the element that needs them (e.g., WAI-ARIA composite widgets)."
+                },
+                "getter": false,
+                "setter": false
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/xpl-button-row/xpl-button-row.js

@@ -6,7 +6,7 @@ export class ButtonRow {
         this.onTertiary = () => this.clickTertiary.emit();
     }
     render() {
-        return (h(Host, { key: '0f5bf4d086cbafb8b03f854ea11b495ee5009cdf', class: "xpl-button-row" }, h("div", { key: '64ab05ca8cba9cf4c2a8feca5a6233a6a4b6a7e4', class: "xpl-button-row-inner" }, h("div", { key: '2e8d97b9fb7f7a31e0014b255342c0f2fb3ce7ac', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: 'd368c7228a9f12143cff4978ced0a5eac35ff8a3', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: 'a2a1860115ab9ac09d6ddd01ffd1e6e49d1ac874', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: '98f77b4745b72e8321e37d307c0a298f1e52045f', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '7f605c1221e856825e044dc908834f52c9e0374a', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: 'f83653973db8aec83cc3ec0da3cdf25431c18304', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (h(Host, { key: '184ee5671a9d1bbb967dd8e6e4427df30d62a007', class: "xpl-button-row" }, h("div", { key: '44b583d0899af8b158f7093b87918f0843366e44', class: "xpl-button-row-inner" }, h("div", { key: '31754284b0b87a1e58ccbded4b46b453c3b717ca', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: '27a9c164af5e72a66380dfda4072cfb5d3b3a34d', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: '7ba9299532405aa9dceca481dae675a5129d2b51', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: 'bcb3524b921e6de30a1f6d870e04eeb9592762bb', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '5e10208c958143476df430b7f9877965b7fadc08', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: 'ebb24794d37fd6dce72fa776b97ec59edeaab1dc', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
     }
     static get is() { return "xpl-button-row"; }
     static get properties() {

package/dist/collection/components/xpl-calendar/xpl-calendar.js

@@ -52,7 +52,7 @@ export class Calendar {
         }
     }
     render() {
-        return (h(Host, { key: '5a9d327e7f4d7861d337123299829b833b2cce84', class: "xpl-calendar" }, h("input", { key: 'f592794da7e97bca218ea47ab5d64a13182d71d0', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+        return (h(Host, { key: '56cd65b62892b0c3e939f6cd77e9ba507baf4a68', class: "xpl-calendar" }, h("input", { key: '296222d3b6c0bf3e7c400d4d8c40d7d48774ea57', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
                 this.inputElement = el;
             } })));
     }

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

@@ -3,6 +3,7 @@ import { v4 as uuid } from "uuid";
 export class Checkbox {
     constructor() {
         this.id = uuid();
+        this.ariaLabel = '';
         this.onChange = (event) => {
             const target = event.target;
             if (this.value) {
@@ -14,14 +15,15 @@ export class Checkbox {
         };
     }
     render() {
-        return (h(Host, { key: '8d2ec8544cf2baad3e82b489c678fda63e22da06', class: {
+        var _a;
+        return (h(Host, { key: 'a73acf5a3394c8f1060f9095682093a1db3b09db', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: '632db707a6611ef8f89edaa36af95746a9e5d8fd', class: "xpl-checkbox", type: "checkbox", checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: '80949092498866a3eba442760c28ba57540f69ba', class: {
+            } }, h("input", { key: '7da5f17d827bfb6d63a4933977daee75c9845899', class: "xpl-checkbox", type: "checkbox", "aria-label": ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || undefined, checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: '86669521b030289b55279bd6fceecb5d060c7138', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: '343779750455548397d8c887101ac8cf8eb25fcc' }), this.description && (h("small", { key: '12d5e2d154f1a99d7afe5a9bafdf5ebdcb40f1dd', class: {
+            }, htmlFor: this.id }, h("slot", { key: 'b40aafb664cbac2092938afd45683cfc0313beac' }), this.description && (h("small", { key: '06e2245639b577f5d09afdf9000e43d076758e80', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));
@@ -29,6 +31,26 @@ export class Checkbox {
     static get is() { return "xpl-checkbox"; }
     static get properties() {
         return {
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the native checkbox input (sets `aria-label` on the `input`).\nUse when there is no visible label text in the default slot.\nDefaults to `''`; empty or whitespace-only values omit `aria-label` on the input so a visible `<label>` remains the sole name source."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "''"
+            },
             "checked": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/xpl-choicelist/xpl-choicelist.js

@@ -35,7 +35,7 @@ export class Choicelist {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (h(Host, { key: 'c6a7762863d6d19c1a9d72cfcc14e1d6e0f02850', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: 'a7f81d04dea87b90b86548e9eceeb802e0f4f57f', class: {
+        return (h(Host, { key: '003270ebbe4ccd9c204774f2c41302e64697a358', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: '388763663e1e9dc48f53b4e8569c3c58942fb631', class: {
                 'xpl-choicelist': true,
                 'xpl-choicelist--styled': this.styled,
             } }, this.choices.map((choice, i) => {

package/dist/collection/components/xpl-content-area/xpl-content-area.js

@@ -4,7 +4,7 @@ export class ContentArea {
         this.size = 'wide';
     }
     render() {
-        return (h(Host, { key: '5ce34f544fa975f9cbd46defced08033bb1eef9b' }, h("main", { key: '3e4b262bc54788d50b6b329936f7aee1c1f6be69', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '5e4f9fa89830360f151c89ebb787d525c3c0940e', class: "xpl-content-area" }, h("slot", { key: 'e22c2759aa45d4a99c92541073abf011d34474f9' })))));
+        return (h(Host, { key: '2fe4c1c077c12e47600c737cc9266ae2eff8aaec' }, h("main", { key: '2e6c6f4b83cea96d629bb5af65c4ce6a4d20570e', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '033e707fbc48ae523fafb25dd2952d3de9214908', class: "xpl-content-area" }, h("slot", { key: '04afc15969c2b1fb7e2feb3d8ae46248ee0f6e31' })))));
     }
     static get is() { return "xpl-content-area"; }
     static get properties() {

package/dist/collection/components/xpl-dashboard/xpl-dashboard.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class Dashboard {
     render() {
-        return (h(Host, { key: 'aa4f209d95236a7e2c3e6f6915c989a110202c80' }, h("dl", { key: '890e6fb69af3154ee47c1b40498ed37c5d8a6a1a', class: "xpl-dashboard" }, h("slot", { key: 'e4a47f80f873cf53844283e47c59f174fc79fda0' }))));
+        return (h(Host, { key: 'ceeb8b27d9537c70e88360de21238c9ce2a3f90b' }, h("dl", { key: '3c4fcb92f472f14885053a1cb1db893618a6d8a8', class: "xpl-dashboard" }, h("slot", { key: 'fe4fa8fdec2ce84bdedc7aa404ab647abd189d11' }))));
     }
     static get is() { return "xpl-dashboard"; }
 }

package/dist/collection/components/xpl-data-card/xpl-data-card.js

@@ -31,8 +31,8 @@ export class DataCard {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (h(Host, { key: 'c9a108ce28ed8904ef2f39f8d28e3becdd3da427', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '376323f4f00a84b903b31d3b72b21d83f86cb8d7', class: headerClasses }, h("header", { key: '7385e8fac7f9eb6f8f9c9235f7de8395de376510' }, !!this.leadingIcon && this.icon && (h("span", { key: 'bd43a5ad7f0d4c3afacd83b0d77b00fbfbbc9bfe', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '914e9897881a07fd0a76eaa24f7b862e0d2237d8', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'dc317fbb7055845149737d3699d39759b42be5a4', name: "title" }, this.name)), this.link && (h("span", { key: 'ea569e40ee3e746073c1dee3e1be98af63cda682', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '4da084735e560701a8407ec044b9e6d8ea9d5a1f', icon: "chevron-right", size: 16 })))), h("dd", { key: '218fd7271e49509d9b29484ba7becb3237fae283', class: "xpl-data-card__body" }, h("div", { key: 'e8a723a5d2742c42b681cbde6ca880a9833301ba', class: "xpl-data-card__left" }, h("span", { key: '9b9cfbc7ff6d1cb81d867e044766559e07f0bee9', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: 'f6236b30f5fababdb27dfb0767b0b9f230019e87', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '614af9eb3f33fde8d489fe547a2f0e833f6e9655', class: "xpl-data-card__right" }, h("slot", { key: 'd71b6775e27537744ca4bee20c530b5aa1e6e830', name: contentSlot }))))));
+        return (h(Host, { key: '917b6ae82a30b849b100e878dc6be08eb4171214', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '21573d19d14f861eea6562529f78e93affc1e5d2', class: headerClasses }, h("header", { key: '1af52bd082f4d12239db85e78eaf74ed2eb7e027' }, !!this.leadingIcon && this.icon && (h("span", { key: 'dfdcc25ae67fdc766ee3075a479fbfeeac2561ab', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '4072018714c05bd5bae20bfb9e5b6a04561474da', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'f81204887ad6c229cb50e8d3ff654c1aa4703368', name: "title" }, this.name)), this.link && (h("span", { key: '6d8d61f8611fdbc5cd09fc20ba15194e0e1e7b56', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '863e66734bbbd6aa178f140b22f8afb3dd401127', icon: "chevron-right", size: 16 })))), h("dd", { key: '08a5e4af6873c267336f7daff6d3455e75a2883e', class: "xpl-data-card__body" }, h("div", { key: 'ec8ff889fb93d99e7ef51361e041edbaaaf5cd62', class: "xpl-data-card__left" }, h("span", { key: '4787e6aadc3832830fe707ffc08e5614a7abde7b', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: '2060dba53f12917e37747a6bc52c7f03fe4dadc7', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '7a091cce8bc0abae2af7b15d6d1a63acd16854c5', class: "xpl-data-card__right" }, h("slot", { key: 'd83790136435a0d5427fd746d2cba5a08cf914eb', name: contentSlot }))))));
     }
     static get is() { return "xpl-data-card"; }
     static get properties() {