@xplortech/apollo-core 2.7.0 → 2.8.0

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

@@ -3,7 +3,7 @@ export class Divider {
     render() {
         let className = 'xpl-divider';
         className += ` xpl-divider--${this.tier}`;
-        return (h(Host, { key: 'a0b934233c1afba99b2d3691a6ea14d3335e4119', class: className }, h("span", { key: '8d701723f174d846e717cd030c4faf72ae938da8' }, h("slot", { key: '5017353de8a9917358c9ba4194fe5a575720f8f5' }))));
+        return (h(Host, { key: '213dc1893d64e06256ef2958b59b8377428d81d4', class: className }, h("span", { key: '2e03654076b9b76f2ce9e8475bb44068170c8a80' }, h("slot", { key: '5af40b6963beddbd0d1fe5fd05a9e62274ce3418' }))));
     }
     static get is() { return "xpl-divider"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-group/xpl-dropdown-group.js

@@ -20,7 +20,7 @@ export class DropdownGroup {
                 var { groupName: optsGroupName } = _a, properties = __rest(_a, ["groupName"]);
                 return optsGroupName ? (h("xpl-dropdown-group", Object.assign({ label: optsGroupName }, properties))) : (h("xpl-dropdown-option", Object.assign({}, properties)));
             });
-        return (h(Host, { key: 'a33169d78e635bb53987322f02869ffc1f1a9908', role: "group", "aria-label": groupName }, h("li", { key: '58a1ff78bb923fec60eb51ef05a2026e03e3058b', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '6d8556e1d96cbfccd61038e5089e9669917b919e', label: groupName }), h("ul", { key: 'dd485e18b79920d9992e506fe83b36fcadb9e020', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '2eca2f6aa7c44aacdb67c3658029822b4ba1c0aa', name: "options" })))));
+        return (h(Host, { key: 'b872cfc0a8eb2e3542f07f6ae17ebc15b6f965ab', role: "group", "aria-label": groupName }, h("li", { key: '8e475e45b5040bd78c7d37f8c58b0689a508f067', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: '3b7b984646bdcc502aca2260a0b59494e0884f6c', label: groupName }), h("ul", { key: 'c75e710ebe06a23aacca57f34ce286516c98a8c5', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '6b72762b22f316561f7614e4841018c019a60681', name: "options" })))));
     }
     static get is() { return "xpl-dropdown-group"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-heading/xpl-dropdown-heading.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class DropdownHeading {
     render() {
-        return (h(Host, { key: '9b05e54ae226524434ac8485c51e7fccd4e5fe9e', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: 'c5ada81fbed76834515cff75f1fd1ce87b2ccbe3' }, this.label || h("slot", { key: 'dfe135bf2499e858e75ab1e87793ae75eb0982c6', name: "heading" }))));
+        return (h(Host, { key: '70e5556188bd87fe5842256e4e145c3585f73409', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '2d45f0191d9b158641da794ee1b9f246f9659717' }, this.label || h("slot", { key: '21cc81673e6a37f4b7ff896d12bd94916c3a92e7', name: "heading" }))));
     }
     static get is() { return "xpl-dropdown-heading"; }
     static get properties() {

package/dist/collection/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.js

@@ -49,11 +49,11 @@ export class DropdownOptionCpnt {
     }
     render() {
         const { label, isSelected, isDisabled, value, subtitle, icon } = this;
-        return (h(Host, { key: '4ff7cc350e34059ad4df757b88112756c7f5b83e', class: {
+        return (h(Host, { key: '838f64dba15bc8d6c2f65a8685365c5618c24d5f', class: {
                 'xpl-dropdown-option': true,
                 'xpl-dropdown-option--disabled': isDisabled,
                 'xpl-dropdown-option--selected': isSelected,
-            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: 'a014d09116703f5477a48cace194ba1beef602d5', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: 'af16591b7f1195351facaafa67c07368ce42d072', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: '72c0dbd67ab7930924cb1ef3ee9f0b4b53cf28a6', name: "option" }), subtitle && h("span", { key: '0893e031740ebdd8fc8ca7de2cb10d0b4d7c95ae', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, h("li", { key: 'bc4b23054cd73a95ff5cf167c4195563a9e318ec', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: '797d92d1d80cb8c33500d8dfe8b1bf9396c767ca', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: '7a590a3abae38e7934f703929895be152b01816d', name: "option" }), subtitle && h("span", { key: '465fb73335df17864cd21e067f26cdba85d8135c', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     static get is() { return "xpl-dropdown-option"; }
     static get properties() {

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

@@ -11,23 +11,26 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { h, Host, } from "@stencil/core";
-import { autoUpdate, computePosition, flip, hide, offset, size } from "@floating-ui/dom";
+import { autoUpdate, computePosition, flip, hide, offset, size, } from "@floating-ui/dom";
 export class Dropdown {
     constructor() {
         this.isOpen = false;
         this.closeOnSelect = true;
         this.mode = 'single';
         this.anchorToTrigger = false;
+        this.placement = 'bottom-start';
         this.selectOnFocus = false;
         this.cleanupAutoUpdate = null;
         this.updateDropdownPosition = async (triggerEl) => {
-            var _a;
+            var _a, _b;
             const { x, y, placement, middlewareData } = await computePosition(triggerEl, this.hostElement, {
                 strategy: 'fixed',
-                placement: 'bottom-start',
+                placement: this.placement,
                 middleware: [
                     offset(4),
-                    flip(),
+                    flip(((_a = this.flipFallbackPlacements) === null || _a === void 0 ? void 0 : _a.length)
+                        ? { fallbackPlacements: this.flipFallbackPlacements }
+                        : {}),
                     size({
                         apply: ({ availableHeight, rects }) => {
                             const listEl = this.hostElement.querySelector('.xpl-dropdown-list');
@@ -63,7 +66,7 @@ export class Dropdown {
             });
             if (!this.cleanupAutoUpdate)
                 return;
-            if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) {
+            if ((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) {
                 this.isOpen = false;
                 return;
             }
@@ -95,6 +98,16 @@ export class Dropdown {
             this.startPositioning();
         }
     }
+    onFlipFallbackPlacementsChanged() {
+        if (this.isOpen && this.anchorToTrigger) {
+            this.startPositioning();
+        }
+    }
+    onPlacementChanged() {
+        if (this.isOpen && this.anchorToTrigger) {
+            this.startPositioning();
+        }
+    }
     onTriggerIdChanged() {
         if (this.isOpen) {
             this.startPositioning();
@@ -222,12 +235,12 @@ export class Dropdown {
                 var { groupName, options: opts, subtitle } = _a, properties = __rest(_a, ["groupName", "options", "subtitle"]);
                 return groupName ? (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties))) : (h("xpl-dropdown-option", Object.assign({ subtitle: subtitle }, properties)));
             });
-        return (h(Host, { key: 'ef1637b50d96200219f93a992cecd838bdc37ae7', "aria-expanded": isOpen ? 'true' : 'false', class: {
+        return (h(Host, { key: '1ef465611f9a8501af41c17523352714a7921f29', "aria-expanded": isOpen ? 'true' : 'false', class: {
                 'xpl-dropdown': true,
                 'xpl-dropdown--multi': mode === 'multi',
                 'xpl-dropdown--open': isOpen,
                 'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
-            }, role: "listbox" }, h("slot", { key: '69889998dda0b69e3e582b089baf295c8cfca39d', name: "header" }), h("ul", { key: 'dcb7e840e724ebae950f8c85fca142bcf767cc5d', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'b33fd8bb6a1871db5e04173f0ad55a6485ee474a', name: "options" }))));
+            }, role: "listbox" }, h("slot", { key: '118c8b34e72aa6ab018e6fa9ff29a18ae540b89e', name: "header" }), h("ul", { key: '01544e6aa8d785c48b4f677de102efe4ecc7b53a', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'f70619995bed02540cef11deaeb6c3e5704165ff', name: "options" }))));
     }
     static get is() { return "xpl-dropdown"; }
     static get properties() {
@@ -336,6 +349,57 @@ export class Dropdown {
                 "attribute": "anchor-to-trigger",
                 "defaultValue": "false"
             },
+            "flipFallbackPlacements": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement[]",
+                    "resolved": "Placement[]",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
+                            "referenceLocation": "Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When `anchorToTrigger` is true, additional placements to try when the\ndefault `placement` does not fit (passed to Floating UI `flip`)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts::Placement",
+                            "referenceLocation": "Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Floating UI placement when `anchorToTrigger` is true (e.g. `bottom-start`, `top-start`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            },
             "selectedValues": {
                 "type": "string",
                 "mutable": false,
@@ -480,6 +544,12 @@ export class Dropdown {
         return [{
                 "propName": "anchorToTrigger",
                 "methodName": "onAnchorToTriggerChanged"
+            }, {
+                "propName": "flipFallbackPlacements",
+                "methodName": "onFlipFallbackPlacementsChanged"
+            }, {
+                "propName": "placement",
+                "methodName": "onPlacementChanged"
             }, {
                 "propName": "triggerId",
                 "methodName": "onTriggerIdChanged"

package/dist/collection/components/xpl-dynamic-table/xpl-dynamic-table.js

@@ -51,7 +51,7 @@ export class DynamicTable {
         this.updateColumnCount();
     }
     render() {
-        return (h("div", { key: '9ae7568410463f24a85e39da8b14dc70e99730c3', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'c84c62c9eb47d1bf02c6e7d8a8c3d59542ef5f7b', name: "header" }), h("slot", { key: '26012976f5d8474f4a648816e9dc92355611177a', name: "body" })));
+        return (h("div", { key: '8f33da5fa8815400447b1690172bdaddd1079c1a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: '221aced83acf1fc4c904533eaedb1cd79914c5d3', name: "header" }), h("slot", { key: '6087119ce1499e94a30d09a1917d9371331f6add', name: "body" })));
     }
     static get is() { return "xpl-dynamic-table"; }
     static get states() {

package/dist/collection/components/xpl-dynamic-table-cell/xpl-dynamic-table-cell.js

@@ -19,9 +19,9 @@ export class DynamicTableCell {
     }
     render() {
         const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
-        return (h(Host, { key: '924f54186ae2eb07bb4fab65eed7815f60be3a95', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (h(Host, { key: '7cfa2d58f634e41ccf1604a581fcc83a2b51676f', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'a18ef630d9f7f4c8b4079f2d83afe6b28700fb90' })));
+            } }, h("slot", { key: 'c6a04082cb8aa1089d9f6cb82f3db8d7f0addf6e' })));
     }
     static get is() { return "xpl-dynamic-table-cell"; }
     static get properties() {

package/dist/collection/components/xpl-dynamic-table-row/xpl-dynamic-table-row.js

@@ -24,9 +24,9 @@ export class DynamicTableRow {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (h(Host, { key: 'b1a117c4961d5a2f618510159b292184c2c1aed3', role: "row", class: classList, ref: (el) => {
+        return (h(Host, { key: '0d099456d2016263a2bdcd42b46794e08adb64cf', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'be0ef005b0ed337272e92d29dda61dcbe966c4ed' })));
+            } }, h("slot", { key: 'c923f7f8dc4bb8a4527693259d1a8b5932bb6c10' })));
     }
     static get is() { return "xpl-dynamic-table-row"; }
     static get properties() {

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

@@ -22,7 +22,7 @@ export class Grid {
         });
     }
     render() {
-        return h(Host, { key: '0036b594c89e75a9b302e7a7d9c99d4703a8b729', class: "xpl-grid" });
+        return h(Host, { key: 'aeee950fb242a14f50ceda1d199cf427597b70f6', class: "xpl-grid" });
     }
     static get is() { return "xpl-grid"; }
     static get elementRef() { return "container"; }

package/dist/collection/components/xpl-grid-item/xpl-grid-item.js

@@ -12,7 +12,7 @@ export class GridItem {
         className += ` xpl-grid-item-sm-${this.sm}`;
         className += ` xpl-grid-item-md-${this.md}`;
         className += ` xpl-grid-item-lg-${this.lg}`;
-        return (h(Host, { key: 'bb28d83b6fd6ee92390ffcb5a505f5084f5624b9', class: className }, h("slot", { key: 'db3cf487db67044879425c830a14a44e06d19414' })));
+        return (h(Host, { key: '43cf6dd21d3d06e2d8012b716e5db5aeee676aac', class: className }, h("slot", { key: 'e08e03e4152007df7158d7122f883da1050dfde7' })));
     }
     static get is() { return "xpl-grid-item"; }
     static get properties() {

package/dist/collection/components/xpl-header-accordion/xpl-header-accordion.js

@@ -1,13 +1,13 @@
 import { Host, h } from "@stencil/core";
 export class HeaderAccordion {
     constructor() {
-        this.expanded = false;
-        this.parentChecked = false;
-        this.parentIndeterminate = false;
-        this.disabled = false;
-        this.hasCheckbox = true;
         this.initialExpanded = false;
+        this.disabled = false;
         this.selectedCount = -1;
+        this.hasCheckbox = true;
+        this.expanded = this.initialExpanded;
+        this.parentChecked = false;
+        this.parentIndeterminate = false;
         this.toggleAccordion = () => {
             this.expanded = !this.expanded;
         };
@@ -21,24 +21,19 @@ export class HeaderAccordion {
             });
         };
     }
-    watchSelectedCount(selectedCount) {
-        if (selectedCount > -1) {
-            this.updateParentCheckbox(selectedCount);
+    applyBorderRadiusToLastRow() {
+        var _a;
+        if (this.expanded) {
+            const rows = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('xpl-dynamic-table-row');
+            const lastRow = rows[rows.length - 1];
+            const cells = lastRow === null || lastRow === void 0 ? void 0 : lastRow.querySelectorAll('xpl-dynamic-table-cell');
+            cells[0].style.borderBottomLeftRadius = '0.5rem';
+            cells[cells.length - 1].style.borderBottomRightRadius = '0.5rem';
         }
     }
-    componentWillLoad() {
-        this.expanded = this.initialExpanded;
-    }
-    componentDidLoad() {
-        const initialCheckboxesValue = this.selectedCount > -1 ? this.selectedCount : 0;
-        this.updateParentCheckbox(initialCheckboxesValue);
-    }
-    handleChildCheckboxChange() {
-        var _a;
-        if (this.selectedCount === -1) {
-            const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
-            const checkedCount = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked).length;
-            this.updateParentCheckbox(checkedCount);
+    watchSelectedCount(selectedCount, _previousCount) {
+        if (selectedCount > -1) {
+            this.updateParentCheckbox(selectedCount);
         }
     }
     updateParentCheckbox(selectedCount) {
@@ -57,11 +52,23 @@ export class HeaderAccordion {
             this.parentIndeterminate = true;
         }
     }
+    handleChildCheckboxChange() {
+        var _a;
+        if (this.selectedCount === -1) {
+            const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
+            const checkedCount = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked).length;
+            this.updateParentCheckbox(checkedCount);
+        }
+    }
+    componentDidLoad() {
+        const initialCheckoxesValue = this.selectedCount > -1 ? this.selectedCount : 0;
+        this.updateParentCheckbox(initialCheckoxesValue);
+    }
+    componentWillRender() {
+        this.applyBorderRadiusToLastRow();
+    }
     render() {
-        return (h(Host, { key: '216b10c02e1248c374ec646d30f835163b9b7792', class: {
-                'xpl-header-accordion': true,
-                'xpl-header-accordion--expanded': this.expanded,
-            } }, h("div", { key: '41cbb9358a5d76f44f135d76c945fe801cafc474', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: 'c939d100f687b14455424ee3f0b6bdfd7de785bb', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '4d98d8d75b4c7c7ba8e50ce6d43ed3b83919d624', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: 'd9c993b7e8e6cf0b46014d6c535a52c84386b8ed', name: "title" }), h("xpl-icon", { key: '58d114ae4dd93c9ec15e3d74cfb2d33c6c1b57cb', size: 20, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: '46a98c094621ec02c9416bcfa7a2d33e6ce468d4', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: '7966e352ec17125afa59a7590dbc8e9372a39f41', name: "content" }))));
+        return (h(Host, { key: '33b59f238ef5eabce7a83dec5e189459038ac2e0', class: "xpl-header-accordion" }, h("div", { key: '1269fe93be898a0300a1c840ad8919608c86bbff', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '16a93cbaab64072990502ed7d1bc2a496ad31425', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '00e7024adcd3c8cef52cc5d11be8e4dc6319c1a8', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '16fc847fff7d27f73c589bff9670fdbdec9f58cc', name: "title" }), h("xpl-icon", { key: '44e27d19feb130c0903949d24a9c71f19f8475b6', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: 'aa8bd514da7666ed09c72c5b271ea0eeda729ef8', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'b8adf0af8ea58edad1036fc45277ef6621bc8fbb', name: "content" }))));
     }
     static get is() { return "xpl-header-accordion"; }
     static get properties() {
@@ -85,7 +92,7 @@ export class HeaderAccordion {
                 "reflect": false,
                 "attribute": "content-id"
             },
-            "disabled": {
+            "initialExpanded": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -97,15 +104,15 @@ export class HeaderAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the accordion is disabled."
+                    "text": "Whether the accordion is expanded initially."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
+                "attribute": "initial-expanded",
                 "defaultValue": "false"
             },
-            "hasCheckbox": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -117,53 +124,53 @@ export class HeaderAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to display a parent checkbox in the accordion header."
+                    "text": "Whether the accordion is disabled."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "has-checkbox",
-                "defaultValue": "true"
+                "attribute": "disabled",
+                "defaultValue": "false"
             },
-            "initialExpanded": {
-                "type": "boolean",
+            "selectedCount": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the accordion is expanded initially."
+                    "text": "The number of selected child items, or -1 to auto-calculate."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "initial-expanded",
-                "defaultValue": "false"
+                "attribute": "selected-count",
+                "defaultValue": "-1"
             },
-            "selectedCount": {
-                "type": "number",
+            "hasCheckbox": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of selected child items, or -1 to auto-calculate."
+                    "text": "Whether to display a parent checkbox in the accordion header."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "selected-count",
-                "defaultValue": "-1"
+                "attribute": "has-checkbox",
+                "defaultValue": "true"
             }
         };
     }

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

@@ -16,10 +16,10 @@ export class Icon {
         let wrapperClasses = 'xpl-icon__wrapper ';
         if (this.backgroundColor)
             wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
-        return (h(Host, { key: 'cf84ae3e7ff4ae0b4ae8e1b1cf3b9331bc887c6c' }, h("figure", { key: '74e2727f9bf4ff8d710eff9b99632ffa669b84ae', class: wrapperClasses }, h("span", { key: '2d8be2bd318bd27e0bc4299cfe518668e424fffe', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (h(Host, { key: '07522771501e6e67b0ae91bbee9cc8699d79fb8b' }, h("figure", { key: '2acf41e3e20ff3998050c948fcae5d0990cb706a', class: wrapperClasses }, h("span", { key: '560b2e62366ee0842442c29280a7e37b53edf2be', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
                 width: `${options.width}px`,
                 height: `${options.height}px`,
-            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '3c7a383da59ac0766500273799b203a28c7c7ff3' }, this.icon, " icon"))));
+            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '256c0d05be8026b24a139f8bfff4f00c65112030' }, this.icon, " icon"))));
     }
     static get is() { return "xpl-icon"; }
     static get originalStyleUrls() {

package/dist/collection/components/xpl-input/xpl-input-color/xpl-input-color.js

@@ -193,16 +193,16 @@ export class InputColor {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (h(Host, { key: '6f03535db1b5f451c74a0f1a1abc586605e5c9ca', class: "xpl-input-color" }, h("xpl-popover", { key: 'dae1f3a3b7afdd9231b6feba2d3711fbd1d6716e', disabled: this.disabled, display: "menu" }, h("div", { key: 'a8402cf534186d06f940c3e3436db17afb0152e8', slot: "trigger" }, h("div", { key: 'e9e775229df2a4f8afa252ef03c0a0cd15a93aa4', class: {
+        return (h(Host, { key: 'f665a747f8938212d0c9ada4f251a9fc880ba82c', class: "xpl-input-color" }, h("xpl-popover", { key: 'eac77d1e9f350b3b0dd66001a7a596d156a75a53', disabled: this.disabled, display: "menu" }, h("div", { key: '73d1468c4261fd9a8e957189129cc660757d849f', slot: "trigger" }, h("div", { key: 'fa098788863247a7c87e4efe628b5b47f0bb3113', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, h("span", { key: '9abe3e899192f4f08e682f8d7a9a9af9adf5982f', class: "xpl-input-color__color", style: {
+            } }, h("span", { key: 'd471146ff3ba7b026dba1424599361d0aa0fe49c', class: "xpl-input-color__color", style: {
                 background: objectToStringColor(this.colorValues),
-            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: '9e6832ca2ca1b91c9bf91b1816c1f7c8169202f3', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
+            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: '5cd87456ef093611b6be8906c24b235ea7f19524', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), h("div", { key: '86643ca93847cff19653ebb54160588f2764ae17', class: "xpl-input-color__menu" }, h("div", { key: '40f43b769954163f0d22ff8dc80bcd2e0df4777e', class: "xpl-input-color__sl-grid", ref: (el) => {
+            } })))), h("div", { key: 'df7bdf567c9a697f8a5e737e5a8cb1b1b962dbb9', class: "xpl-input-color__menu" }, h("div", { key: 'ae630752b48e9d211273da6f3dadda8ace603ba2', class: "xpl-input-color__sl-grid", ref: (el) => {
                 this.colorInputElements.slGrid = el;
             }, style: {
                 background: [
@@ -210,9 +210,9 @@ export class InputColor {
                     `linear-gradient(to right, #fff, #fff0)`,
                     `rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
                 ].join(', '),
-            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '29f42021c1e55827f1fffcdd416608f01b6bda81', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: 'e727c66cd44ff40c672f58ae9264485cda3698b7', class: "xpl-input-color__grid" }, h("input", { key: '899cdc6cf61d1452809850dbc847c9df8265437b', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
+            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '25ffc6bb94f0e861a3bc5a6da5c01e0901d1779e', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '7d256baab084f96c56724b4eede835a13bee7055', class: "xpl-input-color__grid" }, h("input", { key: '227309d4590722c24c2d053c013a6d473e44a3ee', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
                 this.colorInputElements.hue = el;
-            } }), h("input", { key: '3e72ef16b142fe44bebbcbbd2686fcfa3fb958bc', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
+            } }), h("input", { key: '2d43e7c9f98fd5cdcccde7206c0cf4e5ae6bde6d', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
                 this.colorInputElements.alpha = el;
             }, style: {
                 backgroundImage: [
@@ -222,9 +222,9 @@ export class InputColor {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), h("div", { key: 'c389627f5c0fa8878ead7d6765ecbe9b2f82debb', class: "xpl-input-color__preview", style: {
+            } }), h("div", { key: '26a562a220b2458e0ee99906d27d8a11e38f2d02', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), h("div", { key: 'efd8daf09c022fdc19a6373f0bcd1d32b7548fd2', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
+            } })), h("div", { key: 'a77a7325f72ef73e6aa2d6968ae4afd1e010cf2c', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
             .filter(([key]) => ['hex', 'r', 'g', 'b', 'a'].includes(key))
             .map(([key]) => (h("xpl-input", { key: key, label: key.toLocaleUpperCase(), name: `color-${key}-input`, placeholder: key === 'hex' ? '793EF7' : '0', value: this.colorValues[key], ref: (elRef) => {
                 this.colorInputElements[key] = elRef;

package/dist/collection/components/xpl-input/xpl-input-date/xpl-input-date.js

@@ -78,16 +78,16 @@ export class InputDate {
         parent.removeChild(wrapper);
     }
     render() {
-        return (h(Host, { key: 'c2707549e3285693ce4c7e0449e047be90640504', class: {
+        return (h(Host, { key: '35b39ed37afa33603772cdd0dce79cf7533d36ec', class: {
                 'xpl-input-date': true,
                 [`xpl-input-date--mode-${this.mode}`]: true,
                 'xpl-input-date--error': !!this.hasErrorState,
                 'xpl-input-date--flatpickr-static': this.flatpickrStaticLayout,
-            } }, h("div", { key: 'e6ac05a6d58d92570331489b8a317d17c0726873', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: 'ef746e91506c2bd2c2bc9986bfbb7f0b82a0f079', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '125e566456a2de4d75fe38fee50a78de886b8009', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
+            } }, h("div", { key: '14940421a3f9fb4e7a5acbd5abb222d927a701cf', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: '108b33b4f0a87bacff90480633327dd221f6b1d4', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '00633c5b69d25a94d7cd8501bde70459e8ebf2ce', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
                 this.input = el;
             }, onChange: (event) => {
                 this.valueChanged(event);
-            } }), h("xpl-icon", { key: '399495edb8791cda73084dcef21663a3d207da2f', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '6570bf947a23280b04389ed591f7ea401f14f1a5', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+            } }), h("xpl-icon", { key: 'ba0d694b7ace1359d6901c0110dce40a78805f74', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '5ca7564e2096b697a75ebfb573654c0c23125245', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
     }
     static get is() { return "xpl-input-date"; }
     static get properties() {

package/dist/collection/components/xpl-input/xpl-input-file/xpl-input-file.js

@@ -33,18 +33,18 @@ export class InputFile {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '579d1ec1094bc5b1aeec622996694728fb1facca', class: {
+        return (h(Host, { key: 'ec1645e7d48cf2b146727a6c131dbd7572468f17', class: {
                 'xpl-input-file': true,
                 'xpl-input-file--hide-trigger-on-select': this.hideTriggerOnSelect,
                 'xpl-input-file--disabled': this.disabled,
-            } }, h("span", { key: '66b3cc31f1e2bfa4ee1896e64a667e2a26166b50', class: {
+            } }, h("span", { key: '8dc3e290dcddba706316ec41443e2e87aa82f79f', class: {
                 'xpl-input-file__trigger-wrapper': true,
                 'xpl-input-file__trigger-wrapper--hidden': this.hideTriggerOnSelect && ((_a = this.files) === null || _a === void 0 ? void 0 : _a.length) > 0,
-            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: '53b23be4e2a5b0f920e650c14e591cb1de3b8bac', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: '53a294c3765d5b6229f5ed79023095538a1c5edf', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
+            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: '2d2391a2ccca22170bfa0b9ace50a42fdba54284', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: 'c302bbbb5c1977c513dba82db70da1615f39a217', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.onRemoveFileByIndex(fileIndex);
-            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: 'afcd0be79ed4ffa5696990eb76d8615f61c430f9', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: '08ffdfed6e25b11363e664abe7bdb66ae6b96bb7', onChange: this.handleFileChange, type: "file", ref: (el) => {
+            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: '9252c5450f32e8d2ed478af9f84eef4a26cee49f', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: 'd44213b6fd075bfb12c7857d3a56e06f78ef0fdc', onChange: this.handleFileChange, type: "file", ref: (el) => {
                 this.fileInput = el;
             }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
     }

package/dist/collection/components/xpl-input/xpl-input-phone/xpl-input-phone.js

@@ -196,21 +196,21 @@ export class InputPhone {
     }
     render() {
         var _a;
-        return (h(Host, { key: '79d8146efc51fb1fba4e595655274beff9e2f09a', class: {
+        return (h(Host, { key: '4a55afb3d85dc5882eca2cab0a23b11374cc053e', class: {
                 'xpl-input-phone': true,
                 'xpl-input-phone--error': !!this.hasErrorState,
                 'xpl-input-phone--open': this.dropdownOpen,
                 'xpl-input-phone--domestic': !this.isInternational,
-            } }, h("div", { key: 'f617abbc8656f0d9418e3bb87f0fdcd8b1646138', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: '133d07a3d70e8c9e3c3a6690ae2296f176a409f7', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.name) && (h("xpl-icon", { key: '20928aee771232962454e469210a31718922286c', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: '22078ac403d3965ba72ee9164520778f3f65cc56', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: '29cab6a655c36fd5add277b6d3c0f06c498a742d', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: 'e83457a14cd689f43082afb611c7641f1353da36', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: 'ee747daab159986e319599ec6705c8f5edc78c3e', ref: (el) => {
+            } }, h("div", { key: 'c7e46df1b58b6e76dda47b3b32f5a6abe29f048c', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: 'ef1bedb4bad96760c81ad4dbf2cadb5a29d4abb9', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.name) && (h("xpl-icon", { key: 'a307f620c2815d63b17dbeb6c270d2972884e9d9', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: 'c16e66d315877cec35e322a1164f765cd387931f', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: '7a33b994588e4c5ea868a4e092709b8acd50a36f', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: '5a39cfd472f5287fc8cf0648ce618e21dabf5e97', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: 'dfb25910769594bc9b9d1c861049605d7bdd9d0e', ref: (el) => {
                 this.inputEl = el;
-            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (h("button", { key: 'ddb1bb6cf9ab3fb4bc3295db64fc986fe5dbf69b', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: 'c0f3201d0b34f9cbe5af9247540199db0c184514', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '8d4e50ee17d880272eaccf08cf8c84fc4400c36d', ref: (el) => {
+            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (h("button", { key: '8db932d94550aa6d947e2564d8a94a12bef43bce', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: '87e55c3a5ae6b8774d3ce64af843b7e63448fe25', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '467b0e2fde23a45b2c36138affa26467e0b6c9d0', ref: (el) => {
                 this.dropdownRef = el;
             }, isOpen: this.dropdownOpen, triggerId: this.triggerId, anchorToTrigger: true, closeOnSelect: true, mode: "single", options: this.dropdownOptions, update: this.handleDropdownUpdate, onIsOpenChange: (e) => {
                 this.dropdownOpen = e.detail;
-            }, "aria-label": "Country" }, h("div", { key: '5808ecb917ee94ba31c8ab106152d2d61feae74a', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '76a2477f0e039e390dd26a0c34cdab758d3c10d6', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
+            }, "aria-label": "Country" }, h("div", { key: 'f4f3665ab8286faed45c3a3a510bd247c7a31842', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '659875e60e85bac085deb8f6648623eccc76d560', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
                 var _a;
                 this.searchQuery = (_a = e.detail) !== null && _a !== void 0 ? _a : '';
-            } }, h("xpl-icon", { key: '0a6b49b3a0df0769fb5dfa59f97c40adeaee8dd1', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
+            } }, h("xpl-icon", { key: '987941768e8494d9c898fc93e531da03bd57ad71', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
     }
     static get is() { return "xpl-input-phone"; }
     static get properties() {

package/dist/collection/components/xpl-input/xpl-input-search/xpl-input-search.js

@@ -96,7 +96,7 @@ export class InputSearch {
         return shell;
     }
     render() {
-        return (h(Host, { key: 'ac235500df2d6958d9070535f922a018bce14906', class: {
+        return (h(Host, { key: 'c8f0c2b1c96cc8c6d9a2c390e791977b031adb9b', class: {
                 'xpl-input-search': true,
                 'xpl-input-search--disabled': this.disabled,
                 'xpl-input-search--error': this.hasError,