@xplortech/apollo-core 2.6.0 → 2.7.0

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: 'ce11926c0ef08f0ae9d77fecfa813f20b6eee229', 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: '6d8b154300f5a676c58d8633c2b5f7514967f764' }, h("div", { key: 'bef0970eb3185b1afb08ece888b63509e69ff15d', class: className }, h("span", { key: '90e51d0f3d74a99268b9a4944a94b6c0096f1ea9', class: "xpl-badge__label" }, h("slot", { key: '5f13f42adbbcfc0698f25687ba27f4bb0c63d5a8' })))));
     }
     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: '01e821a96ff2f4f41050a524ed6ec76e8f8ae71c', 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: 'e0b8fc78558cb0feff957deda21e9a6009a41ebc', class: "xpl-banner__icon", "aria-hidden": "true" }, h("xpl-icon", { key: 'b1ad22088243b609c67275091a6b7ec0f5bfcd2b', icon: this.getIcon(), size: 24 }))), h("div", { key: '9ae85de66f2092d2f689e881ebf5cb28b442a804', class: "xpl-banner__body" }, isHeadingPresent && h("p", { key: '5a4a146c870f4c12abe4a5ef1e5d7aa51d8e7507', class: "xpl-banner__heading" }, this.heading), isDescPresent && (h("p", { key: '115e1349f08a077a898556174c7f14c22e43eb8c', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (h("div", { key: 'd2ebd4a9f6bf5902958c071a476da8b5b2888c5c', class: "xpl-banner__actions" }, hasAction && (h("xpl-button", { key: '763ce0af40d4a9a5d62f18ee08085a8455819779', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (h("xpl-button", { key: 'd59e222b9eb5d766953d26609a48366a32499814', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (h("button", { key: 'ec7d24375a62f20c7309d7b49d88f6db1eb2a891', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, h("xpl-icon", { key: 'f45280a420a3556100cd0ed48c39124d400becd9', 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: 'dd246c29fcb1afca4007299380a59b47c0a10c9d', class: "xpl-breadcrumb-item", role: "listitem" }, h("li", { key: 'b6df20888b3891241e52f0f2be14f1eedee2cac6', role: "none" }, h("slot", { key: 'f2f64effe0f58bb33bc983abfaa8b2996714e3b4' })), h("span", { key: '31c15dd296e6dab1d207a84179a4803b7366c1a2', 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: 'd4a4ae7bbf7f8eafc8a44b56c66983303e039d7e' }, h("nav", { key: '8e5decbdce778c1768e3412a59663cd37938f361', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, h("ol", { key: '612620c37a84ad022b9da5cdb884410a4df4dd29', role: "list" }, h("slot", { key: 'ae6cfc4f4e65ba7ca755fa7d9eb3751aae8905ff' })))));
     }
     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: 'dc9baff2fca5d300d4f10d854669fe44ce9dcf2b', 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: 'e27ee4f9278fe24ab710504fc5a83b4b92b74607', class: "xpl-button-row" }, h("div", { key: 'e7ea1f3ef4dd52fd3026e47679f1e2663f315a98', class: "xpl-button-row-inner" }, h("div", { key: 'da4ccf63f6f00d83f829fb7cf1e2d20c76cffa33', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: 'cb3d7caeba1d66f0f752e19b33a31d627bc26911', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: 'c7342cf52d016482c2ab8e33ecd8c3616061c107', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: '1ed372cc087ef1a0c650282f90aa0117b35745bc', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '56d88d07742c5e2900831f3a1ecf026d05299632', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: '5bd13162e70b4fc59996b62f507cfc2d4e7418d7', 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: '6f3d6abc79ea25a9f80d8fa15279fda6b4ba5d81', class: "xpl-calendar" }, h("input", { key: '57f4be2ffc9d40943d20f7325cad1f81b0addedb', 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: '278efc899d85f3c69d78eae9c893dd95a5c1a0fe', 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: '40ff6da70e68b75c0fda7df23eccfd04c152a4e1', 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: '19ebb91dfdb4514b563bb20b7fa2ca06294d2d45', 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: 'ceb7f27e19f4256b3c5317e17f4bb8512c6962a6' }), this.description && (h("small", { key: '78a5d2ac044006361a8ce075a2ad8d872f384203', 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,
@@ -48,6 +70,25 @@ export class Checkbox {
                 "reflect": false,
                 "attribute": "checked"
             },
+            "dataId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A custom data attribute for the checkbox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data-id"
+            },
             "description": {
                 "type": "string",
                 "mutable": false,
@@ -124,25 +165,6 @@ export class Checkbox {
                 "reflect": false,
                 "attribute": "name"
             },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The value attribute for the checkbox input.\n(submittted in form as name/value pair)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value"
-            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -181,7 +203,7 @@ export class Checkbox {
                 "reflect": false,
                 "attribute": "styled"
             },
-            "dataId": {
+            "value": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -193,12 +215,12 @@ export class Checkbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A custom data attribute for the checkbox"
+                    "text": "The value attribute for the checkbox input.\n(submittted in form as name/value pair)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "data-id"
+                "attribute": "value"
             }
         };
     }