@xplortech/apollo-core 2.6.0 → 2.7.1

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: 'cdafb808588e7baf9271997503dea7b53597b15f', class: className }, h("span", { key: '119067065dc21dd71b25ba81b5d83232f4953ebc' }, h("slot", { key: '8cc9077442f20703efc50094056cb7d15782252a' }))));
+        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: 'fae7d1999fae7148c2d19e14676b8c7a6f9c7810', role: "group", "aria-label": groupName }, h("li", { key: '8696234c09cce33be47e6481d757c2209d1fe04e', class: "xpl-dropdown-list-item" }, h("xpl-dropdown-heading", { key: 'ce4fc6f2b00f58302075e180170f52e333aab08b', label: groupName }), h("ul", { key: 'a9015c5ebaaa4ec3858769ad9aaf3f06d806bdbe', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '2f4bb9a76f1371c4dc0405b2652bc616fa4bb835', 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: '8f7d858ca1ee011e03b069948b1c948c7693725f', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, h("span", { key: '56679ee9d35a995a72249f4494983652bacf0832' }, this.label || h("slot", { key: '3e657744c62647b42d249379927fab9ca9a258f6', 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: '207cafd793f52598fdbbe3104ff0207261e086c4', 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: '7e836b82c325050338eff79f23855f55c696f38c', class: "xpl-dropdown-list-item" }, icon && (h("xpl-icon", { key: '7b59e353bf038e1db478fab923c07e60d0e1a828', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || h("slot", { key: 'aad23fec3435e7cd7e36a57d49e178177d7da7fa', name: "option" }), subtitle && h("span", { key: '96fee61dbd072dacf783e164a93fd8dd626e3e53', 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: '9951124106d4123d98db2b9bdc906f51d145c5e6', "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: '61b8daf20ef87a8ae7bad8fa494c104d58cc61f8', name: "header" }), h("ul", { key: 'ac14c8acf2927b931d4c74673af5f12f5d9514c1', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: 'c820c142bdb64ec4189dd5869d71d4339dc97814', 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: 'aa9fdd991fca8dab538176a950636b52db539f7a', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'd05d799f1a0d944398f1ae9992dbcbb56a52f184', name: "header" }), h("slot", { key: '7f212255dbf15e8358cef6097d55b973f73bd086', 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: 'd4b284973e5c1f76a9355f77749c6b6432e4f469', 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: 'd9365d26d5b4fb9e50cd3b08514eeae3bfdd6888' })));
+            } }, 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: '7ce6f2c780af4f7bd4053970bff3e620fef4913a', role: "row", class: classList, ref: (el) => {
+        return (h(Host, { key: '0d099456d2016263a2bdcd42b46794e08adb64cf', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: 'b77362a23d8d69844560e7389e5cd7f6b5568d88' })));
+            } }, 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: '89b723cb2e01669c5edd69a3fbbbdce834f05dd3', 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: 'd4e9ba6dc2049aa0a88d266934a9499daf66d0a9', class: className }, h("slot", { key: 'fef8f150e57fcc72147111fe10088d46adc324d8' })));
+        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

@@ -68,7 +68,7 @@ export class HeaderAccordion {
         this.applyBorderRadiusToLastRow();
     }
     render() {
-        return (h(Host, { key: '511ce0498294e0064e94ff14b847f75260c6c7cf', class: "xpl-header-accordion" }, h("div", { key: '75550adfe2cff80c32e3fe73bfba5888a4bfc91d', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: 'd46601b19497594f44b4633228a6f020f29c8914', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: 'b15087f6e34cd0d31e77d5c3b35640b7734ed556', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '8f655d108a016212852f0a7138fa82ea386ed26a', name: "title" }), h("xpl-icon", { key: 'abe7fb2fe4a19db7bcd2cbed7fec903cbeeaee4d', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: 'e86c0a67e94b24f4c39386e8f728de34242e7344', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'a86303b3cf41724f65e10db14d0f6464c68d49c2', 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() {

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: 'c622a660e3ed7d9dce7dc08a868360ffc43f2f8d' }, h("figure", { key: 'c12f8de568fa6e652914fbc894a1269f6085d880', class: wrapperClasses }, h("span", { key: 'a8386f0d0fc3848a36b5120dd5f24356c403d0f5', "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: '4d56222dc219feedd1e8e2c957ca01728a845b56' }, 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/input.stories.js

@@ -8,6 +8,7 @@ export default {
                 'valueChange',
                 'hasErrorStateChanged',
                 'rangeSelected',
+                'search',
             ],
         },
     },
@@ -32,7 +33,17 @@ export default {
             type: { name: 'string', required: false },
         },
         type: {
-            options: ['text', 'number', 'file', 'password', 'date', 'time', 'color', 'phone'],
+            options: [
+                'text',
+                'number',
+                'file',
+                'password',
+                'date',
+                'time',
+                'color',
+                'phone',
+                'search',
+            ],
             control: {
                 type: 'select',
             },
@@ -599,3 +610,87 @@ Phone.parameters = {
                 </div>`)(),
     },
 };
+export const Search = ({ label, description, disabled, error, readonly, errorMessage, placeholder, value, name, shape, autocomplete, ariaLabel, }) => {
+    let attrs = ' type="search"';
+    if (label !== undefined && label !== '')
+        attrs += ` label="${label}"`;
+    if (description)
+        attrs += ` description="${description}"`;
+    if (disabled)
+        attrs += ` disabled`;
+    if (error)
+        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
+    if (placeholder)
+        attrs += ` placeholder="${placeholder}"`;
+    if (value)
+        attrs += ` value="${value}"`;
+    if (name)
+        attrs += ` name="${name}"`;
+    if (shape)
+        attrs += ` shape="${shape}"`;
+    if (autocomplete)
+        attrs += ` autocomplete="${autocomplete}"`;
+    if (ariaLabel)
+        attrs += ` aria-label="${ariaLabel}"`;
+    if (readonly)
+        attrs += ` readonly`;
+    return `<xpl-input${attrs}></xpl-input>`;
+};
+Search.args = {
+    ariaLabel: '',
+    autocomplete: '',
+    description: '',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    label: '',
+    readonly: false,
+    name: '',
+    placeholder: 'Search…',
+    shape: 'rounded',
+    value: '',
+};
+Search.argTypes = {
+    ariaLabel: {
+        control: { type: 'text' },
+        description: 'Accessible name when no visible label (search inputs only)',
+    },
+    shape: {
+        control: { type: 'select' },
+        options: ['rounded', 'box'],
+    },
+};
+Search.parameters = {
+    layout: 'centered',
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=2430-168374&p=f&t=oG14CHMwd7GirmPv-11',
+    },
+    'web-component': {
+        render: Search(Search.args),
+    },
+    html: {
+        render: (() => `
+<div class="xpl-input xpl-input--search">
+  <div class="xpl-input-search">
+    <form class="xpl-input-search__form">
+      <div class="xpl-input-search__shell">
+        <span class="xpl-input-search__icon" aria-hidden="true"></span>
+        <input
+          class="xpl-input-search__input"
+          id="search-html-id"
+          name="${Search.args.name}"
+          type="text"
+          role="searchbox"
+          aria-label="Search"
+          placeholder="${Search.args.placeholder}"
+          autocomplete="off"
+        />
+        <button type="button" class="xpl-input-search__clear" aria-label="Clear search"></button>
+      </div>
+    </form>
+  </div>
+</div>
+`)(),
+    },
+};

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: 'a8cdba9ff504fbeaf7b21167b778d8cf00216a1a', class: "xpl-input-color" }, h("xpl-popover", { key: '535497f6aba0e7e9e65b894cd8c62cebe8ad3dd5', disabled: this.disabled, display: "menu" }, h("div", { key: '436c51111938bbbef99698b94bd5c3123bc0b42d', slot: "trigger" }, h("div", { key: '09e8f57c0d1a35d1b0a5785ebb141db62c3db4d2', 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: '76da6216e95d48dd5cdbb890e7fe14cf1be85c6b', 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: 'c4a560be47d17c98f353c0e324c0f9025f535fae', 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: '844a66fa0523b133ce3e2b6d83e395254e9b513f', class: "xpl-input-color__menu" }, h("div", { key: 'c687aaa94b122258e09cffabcc5029905ddccb27', 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: '7e65660cef09fc5ae0c9dc0d49fe7769ad15b55a', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '5e76247d0d59fca5500416ddeaca53784dc42209', class: "xpl-input-color__grid" }, h("input", { key: '5b891dd55f6d4f5d1242d142c9af8a3af496e398', 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: 'ae20b7cbfa6303c6615afee0fc35d0dda3bc1f70', 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: 'c4b884401f5324e37e09637785a2148ef5c99112', 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: '5d8eff1bf9e51bd44116c01e3bfd016414662d92', 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: '35f91387097b7fd5bdc59ff8608c3700470ff367', 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: '7f561dba2b2aa7d308d0029a20ace5d918368afc', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: '2e87d6e22a2a69db7e91c69fb3d59f81d8358e52', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '53d05e6b6b637e298f31cb1f2b9c56d9d597688f', 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: '45c1d48fe6a312855cf3bd90e139d060821c4ba4', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '037657e9a3cecc054d95b6fd835b58885eef8042', 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: '87df3edce40c74988426ba9fcef4bc3f5740c56b', 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: '11e4c220751ce3f06fd15a741a1f8b81d98c18bc', 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: '6daba4f9e520c12a791bfd18f2894e55f0da86f4', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: '3459f9c3e8618962c02f1e25e6b80f63fe4d593d', 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: '2c8646cd5ef7e235e75c68bf4832ce1d9c578493', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: 'd303ac9e074e8031ed2d695cc85eef32ef40f058', 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: 'e966930ecc1ce026b03daf50902ee783d469af03', 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: 'd594d5345f30bd1165662930abee8b4214b2640d', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: '64842282265b03cce24e5d80386ea3f56c36b5ad', 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: '00b0b9e477d285cc3e1c61becfbc056511d99ea2', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: '9cc394beb1573e00e0eca641bfa8590a5837ff48', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: 'ade974ac878f7c7bc3aa07f613a3005283d86819', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: 'f4907b6f5919184dad42bac3a1071b2bbfe71a06', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: '89dce440dba56953574a05eda46862b4f24f84f8', 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: '21e63c5dad2d73c8969e71c10cae9c507da8574a', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: 'ef1044fd8cc939db7281a8e68e72c54effb55101', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '0de330a03e99bdc73af073ad5b20a7b817192307', 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: '6055decf8f631611786fc8720b17cf84341ef316', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '6c53dbde79069dc000214f22d29b17e568fde19f', 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: 'cb57543146d6f874849d518aea4c01f670e4afa4', 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() {