@xplortech/apollo-core 2.5.0 → 2.6.0

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { v4 as uuid } from "uuid";
-export class XplInput {
+export class Input {
     constructor() {
         this.multiline = false;
         this.dateFormat = 'Y-m-d';
@@ -12,6 +12,8 @@ export class XplInput {
         this.hideTriggerOnSelect = false;
         this.hideFileNames = false;
         this.hideAcceptText = false;
+        this.defaultCountry = 'US';
+        this.isInternational = true;
         this.type = 'text';
         this.valueChanged = (event) => {
             const target = event.target;
@@ -19,6 +21,7 @@ export class XplInput {
         };
         this.characterCount = 0;
         this.passwordVisible = false;
+        this.hasPreSlotContent = false;
         this.handleFocus = (ev) => {
             this.focusEvent.emit(ev);
         };
@@ -32,16 +35,40 @@ export class XplInput {
             const { value } = ev.target;
             this.inputEvent.emit(value);
         };
+        this.syncPreSlotContent = () => {
+            const hasSlotted = this.hasDirectPreSlotChild();
+            if (hasSlotted !== this.hasPreSlotContent) {
+                this.hasPreSlotContent = hasSlotted;
+            }
+        };
     }
     updateCharacterCount() {
         this.characterCount = this.input.value.length;
     }
+    hasDirectPreSlotChild() {
+        return Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'pre');
+    }
     componentWillLoad() {
         if (this._id === undefined || this._id === null || this._id === '')
             this._id = uuid();
         if (this.multiline && this.maxCharacterCount !== undefined) {
             this.characterCount = this.value !== undefined ? this.value.length : 0;
         }
+        if (!this.multiline) {
+            this.hasPreSlotContent = this.hasDirectPreSlotChild();
+        }
+    }
+    componentDidLoad() {
+        if (this.multiline)
+            return;
+        if (typeof MutationObserver !== 'undefined') {
+            this.preSlotObserver = new MutationObserver(this.syncPreSlotContent);
+            this.preSlotObserver.observe(this.el, { childList: true });
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.preSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     renderInput() {
         switch (this.type) {
@@ -53,8 +80,13 @@ export class XplInput {
                 return (h("xpl-input-date", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, post: this.post, pre: this.pre, max: this.max, min: this.min, dateFormat: this.dateFormat, mode: this.mode }));
             case 'time':
                 return (h("xpl-input-time", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, max: this.max, min: this.min, step: this.step, mode: this.mode, timeFormat: this.timeFormat, allowCustomOption: this.allowCustomOption }));
+            case 'phone':
+                return (h("xpl-input-phone", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, defaultCountry: this.defaultCountry, preferredCountries: this.preferredCountries, isInternational: this.isInternational }));
             default:
-                return (h("div", { class: "xpl-input-wrapper" }, this.pre && !this.multiline && (h("label", { class: "xpl-input-pre", htmlFor: this._id }, this.pre)), !this.multiline ? (h("input", { autocomplete: this.autocomplete, disabled: this.disabled, id: this._id, max: this.max, min: this.min, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
+                return (h("div", { class: "xpl-input-wrapper" }, !this.multiline && (h("label", { class: {
+                        'xpl-input-pre': true,
+                        'xpl-input-pre--hidden': !this.pre && !this.hasPreSlotContent,
+                    }, htmlFor: this._id }, h("slot", { name: "pre" }, this.pre))), !this.multiline ? (h("input", { autocomplete: this.autocomplete, disabled: this.disabled, id: this._id, max: this.max, min: this.min, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
                         this.input = el;
                     }, required: this.required, step: this.step, type: this.type, value: this.value, onChange: this.valueChanged, onFocus: this.handleFocus, onBlur: this.handleBlur, onInput: this.handleInput })) : (h("textarea", { disabled: this.disabled, id: this._id, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
                         this.input = el;
@@ -78,13 +110,13 @@ export class XplInput {
         if (type === 'password' && this.passwordVisible) {
             type = 'text';
         }
-        return (h(Host, { key: 'c682985a3d592f9f9902a16013a5d00f40ce5e44', class: {
+        return (h(Host, { key: 'c0d3b87b9dca0c4f75c15accb6542d270a43f3d3', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': hasError,
                 'xpl-input--readonly': this.readonly,
                 [`xpl-input--${this.type}`]: true,
-            } }, this.label && (h("label", { key: '21d863221e85a255f3dc5e662139b7abc0e72907', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '25d078a667c8b9cbf4d1b5d1f412c3d0e736013a' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: '7e13c1fc18496bdf50cdb2a239c113c182b83f18', class: "xpl-input-error", htmlFor: this._id }, h("xpl-icon", { key: '900d641cfcd94d9f6cc85ba34e1e211448c203df', icon: "alert-circle", size: 16 }), h("span", { key: '74f7868861f5c262038bee3de2faeecc46b2454d' }, this.error)))));
+            } }, this.label && (h("label", { key: '1842998b20424a952ff618ed15d611d59d2e9eba', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: 'ccfe57e608f789d643d2219091922cf259971b12' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: '3a3147f7e1be2d1f109a400baf005289bb37d60f', class: "xpl-input-error", htmlFor: this._id }, h("xpl-icon", { key: 'b4960e9243db0126ca5d6d3b3226c551927c2f39', icon: "alert-circle", size: 16 }), h("span", { key: 'd8f524d135f664c876ae83594e113967bb933cca' }, this.error)))));
     }
     static get is() { return "xpl-input"; }
     static get properties() {
@@ -631,12 +663,72 @@ export class XplInput {
                 "reflect": false,
                 "attribute": "hide-eye-dropper"
             },
+            "defaultCountry": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Default country code (ISO 3166-1 alpha-2) when value is empty, e.g. \"US\".\n\nApplies to phone inputs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-country",
+                "defaultValue": "'US'"
+            },
+            "preferredCountries": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Country codes to show at the top of the country list, e.g. [\"US\", \"CA\", \"GB\"].\n\nApplies to phone inputs."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "isInternational": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true\n\nApplies to phone inputs."
+                        }],
+                    "text": "Enables international mode with country selector for phone inputs.\nWhen false, the phone input is locked to defaultCountry with no country picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-international",
+                "defaultValue": "true"
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'date' | 'time' | 'text' | 'number' | 'password' | 'file' | 'color'",
-                    "resolved": "\"color\" | \"date\" | \"file\" | \"number\" | \"password\" | \"text\" | \"time\"",
+                    "original": "'date' | 'time' | 'text' | 'number' | 'password' | 'file' | 'color' | 'phone'",
+                    "resolved": "\"color\" | \"date\" | \"file\" | \"number\" | \"password\" | \"phone\" | \"text\" | \"time\"",
                     "references": {}
                 },
                 "required": false,
@@ -656,7 +748,8 @@ export class XplInput {
     static get states() {
         return {
             "characterCount": {},
-            "passwordVisible": {}
+            "passwordVisible": {},
+            "hasPreSlotContent": {}
         };
     }
     static get events() {
@@ -732,4 +825,5 @@ export class XplInput {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/xpl-large-card/large-card.stories.js

@@ -124,4 +124,8 @@ LargeCard.parameters = {
             </section>
         `)(LargeCard.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=17661-38565&p=f&t=01tbTrRZyfvVafsA-11',
+    },
 };

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplLargeCard {
+export class LargeCard {
     componentDidLoad() {
         if (this.link) {
             const anchorEl = this.el.getElementsByTagName('a')[0] || this.el.getElementsByTagName('button')[0];
@@ -13,7 +13,7 @@ export class XplLargeCard {
     render() {
         const contentSlot = 'graph-content';
         const hasContentSlot = this.el.querySelector(`[slot="${contentSlot}"]`);
-        return (h(Host, { key: '6c7928c9fae502001c8866eaa4b3f858a26eaead', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, h("dt", { key: 'df8e79e59236237ed54d640b544c7a19a850f89b', class: "xpl-large-card__header" }, h("header", { key: '6159de81cbcae7021f3a57fa3a800b241e548ca9' }, h("slot", { key: 'c2aac7c35f67430d0b09f1ad259c5121ef80e02f', name: "title" }, this.name), this.link && (h("span", { key: 'b292328bfb83340c848a793105df6892e6dd29e6', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: 'e7bf907891716116cf050f7033d02d3822b56062', icon: "chevron-right", size: 16 })))), this.description && (h("div", { key: 'f9bee0304cd33f23a303c4562b0e48ac99f88483', class: "xpl-large-card__description" }, this.description))), h("dd", { key: 'e5800cc865b61e0a30a2b0dd7c432b630057281e', class: "xpl-large-card__body" }, hasContentSlot && h("slot", { key: 'a31d2a18c13340cc82a5b9c1af6963c024ec9a3a', name: contentSlot }))));
+        return (h(Host, { key: '02b42037a8e13fb68df0f40a07804bad533f690b', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '27a8aa72e6e97d3918aa8a066c2528dab7466946', class: "xpl-large-card__header" }, h("header", { key: '9846eccca6988543cc671abe84f0a68e0dba06b0' }, h("slot", { key: '002ebff29d02550decb87f66609e941e6128c284', name: "title" }, this.name), this.link && (h("span", { key: 'a5c4dfe1c7149d95c5f4e6c291f61f75e49ce088', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: 'a12c2c98867a189cb6bcabfcbbc6a08f2691c763', icon: "chevron-right", size: 16 })))), this.description && (h("div", { key: 'd7ca785313811f6fd962804964a90a161118d936', class: "xpl-large-card__description" }, this.description))), h("dd", { key: 'fe57a3a97ffd2d124e74e20c88077ffb68ea938a', class: "xpl-large-card__body" }, hasContentSlot && h("slot", { key: '2ebfb5e288ca2426d3085c97cc3a0bec81a72c46', name: contentSlot }))));
     }
     static get is() { return "xpl-large-card"; }
     static get properties() {

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

@@ -16,12 +16,12 @@ const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata,
         }))))));
     return href ? (h("a", { class: "xpl-list-item", href: href }, inner)) : (h("div", { class: "xpl-list-item" }, inner));
 };
-export class XplList {
+export class List {
     constructor() {
         this.items = [];
     }
     render() {
-        return (h(Host, { key: '3eb471a9d1e64f3da012240b7ebb071efaad334d' }, this.items.map((item) => (h(ListItemCpt, Object.assign({}, item))))));
+        return (h(Host, { key: '441b4eae6f2837f20b58221819ca3c10a2fb3491' }, this.items.map((item) => (h(ListItemCpt, Object.assign({}, item))))));
     }
     static get is() { return "xpl-list"; }
     static get properties() {

package/dist/collection/components/xpl-main-nav/xpl-main-nav.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplMainNav {
+export class MainNav {
     constructor() {
         this.width = 'default';
     }
@@ -13,7 +13,7 @@ export class XplMainNav {
         this.navWidthHandler();
     }
     render() {
-        return (h(Host, { key: '4bc985a6fc8533aac4a436bafb38a84e240d84d0', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '37095d22b076a66f32f054dd1bc11487c6bd4927' }, h("header", { key: 'ed18404dbd24edf1306452d097e5be3efbcc57a0', "aria-label": "Sidebar Header" }, h("slot", { key: 'bfced098b786899701193dff672b30d2f5a1ad39', name: "logo" }), h("slot", { key: 'c3be7a15c652539240599743deb02c11f3d1bb45', name: "brand-name" })), h("div", { key: '0aee9797d8b12bb0fc825fedd255d7ba78b52968', class: "xpl-main-nav__main_section" }, h("slot", { key: 'b5772dce6f67b9ee753f1ea68ad12c46564ba3f7', name: "navigation" })), h("footer", { key: 'a2918a192ce73dacc796c3f3a09d180f735a8971', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: 'f898b0f5cfd1d4424f573e74a38df5336506ca45', name: "footer" })))));
+        return (h(Host, { key: 'd8a79782b16a4e9f8ab3e6bf88c0314549aa501a', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '64dcaed4426ad4f6590671425e7571df5a1cd1d9' }, h("header", { key: '7e97eee88a0cfff836aa40c9a2cba2a6dbfa59aa', "aria-label": "Sidebar Header" }, h("slot", { key: 'c281a9fbd5192cd0bda381ba52e55a9a1f6f063b', name: "logo" }), h("slot", { key: '988a49a475779b472cac084f20b7e73ed1528089', name: "brand-name" })), h("div", { key: '6fb1ff561b1136126e466ff86dfff9b124862eb2', class: "xpl-main-nav__main_section" }, h("slot", { key: 'bf5af4e8b47c8666f7014a8e63102601278c8038', name: "navigation" })), h("footer", { key: 'a836bd8d08638490d14ddd812cdc76b1dbe70392', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: '05143d5082b2f8d699e23611df2b584c90a423c5', name: "footer" })))));
     }
     static get is() { return "xpl-main-nav"; }
     static get properties() {

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

@@ -84,4 +84,8 @@ Modal.args = {
 };
 Modal.parameters = {
     layout: 'centered',
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=12849-6374&p=f&t=01tbTrRZyfvVafsA-11',
+    },
 };

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplModal {
+export class Modal {
     constructor() {
         this.isOpen = false;
         this.size = 'medium';
@@ -44,7 +44,7 @@ export class XplModal {
         }
     }
     render() {
-        return (h(Host, { key: '67a2c3914086a75280693b156c5148a5e86395d2', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: 'e99270d95b4a2267d4fd9c7cbee25672b5f90b7d' }), h("dialog", { key: '3493394ff8f93a8a5fb00903d712dd956b886024', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: '66731b3fc2b562fd9f013de173dcf808b3f3ff1a', class: "xpl-modal__header" }, h("div", { key: 'b3a712444c7f3607b5f1bf968f46ac83305f6f1a', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: 'd96d5df9527b0b96fa793025af3dca9956c5a946', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: '3d30207ca82fffa6a7c7d7be42b240dc552ab01d', name: "title" }), h("xpl-button", { key: '34e0247f1f0de686233c95e236457dd170e3b050', type: "button", class: "xpl-modal__close-button", iconOnly: true, size: "sm", variant: "subtle", onClick: this.handleDialogClose }, h("xpl-icon", { key: 'd14026b3e17070767fef2d798d5e4406c011dc7d', icon: "x" }))), h("div", { key: 'cdacbf1e44ca7c8601ebcbfdce2ac5b6fb7d6489', class: "xpl-modal__subtitle" }, h("slot", { key: '2ade6726ee27396a0aa570ef2b0c88be0361eb01', name: "subtitle" }))), h("div", { key: 'f016a31264ee6874ddd19e9dcbde3b3f8c76d2ea', class: "xpl-modal__body" }, h("slot", { key: 'ea6016e3c5733a344f1f427ca07267917f66001e', name: "body" })), h("div", { key: '7e43b4317efd765152cdb3ea804e1fe9b0036bc4', class: "xpl-modal__footer" }, h("slot", { key: '410d2ce31eccc7d2bb0c48091b165de2f85f6986', name: "tertiary" }), h("slot", { key: 'd2d64c8203c8b942385c26adfe283af76c12afb3', name: "secondary" }), h("slot", { key: '3eb401ad94c36a2aa9f380508c438e5b473020d5', name: "primary" })))));
+        return (h(Host, { key: '54638721a2e8f0928bf9a3c2c4b40b3d4ad54db2', class: "xpl-modal" }, this.isOpen && h("xpl-backdrop", { key: '910ca79829054343c67906d7514a0d34b37832d0' }), h("dialog", { key: 'e284d70e8d190e64cb2b8df9a3ae327e7d2b0c00', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}` }, h("div", { key: '42f86b8a9ef1cec791aa8b10458db11130d74839', class: "xpl-modal__header" }, h("div", { key: '1884139c12c8d06d23454d4840a32fb8a464dd7b', class: "xpl-modal__title" }, this.variant === 'warning' && (h("xpl-icon", { key: '5211e56c773f787a7f0a78b45fcf64b2c6eeb44f', size: 20, icon: "alert-triangle", class: "xpl-modal__alert-icon" })), h("slot", { key: '64287ebfac58f8f4c7e0133fb7f1d12781d12126', name: "title" }), h("xpl-button", { key: 'd10c9ab2f4c9df1b7e830da76414849a1191beaf', type: "button", class: "xpl-modal__close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleDialogClose }, h("xpl-icon", { key: '55fc8bce80a2a65d522fb3d91b0689ffdb245ed0', icon: "x" }))), h("div", { key: '17474a7e0561833a34b8c21319943ff8bde044f3', class: "xpl-modal__subtitle" }, h("slot", { key: '5b482ed4b113f17906e4d1106426ae567c937a4e', name: "subtitle" }))), h("div", { key: '85e702a36d347ef2b941f5c590504433798020a0', class: "xpl-modal__body" }, h("slot", { key: 'a5b9cc60582a82126e000ec9b74aee9376e37253', name: "body" })), h("div", { key: 'cff53f9aec109cff62835a9e13d168e434baec73', class: "xpl-modal__footer" }, h("slot", { key: 'cafc86918fca71f085c1e8d9c88f244bd5230f78', name: "tertiary" }), h("slot", { key: 'a0fbe836ebe814c85571514bb53316429e1e65e1', name: "secondary" }), h("slot", { key: 'cbf2a03c2d032fc32d1b0ecd319df7383085cfd3', name: "primary" })))));
     }
     static get is() { return "xpl-modal"; }
     static get properties() {

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplNavItem {
+export class NavItem {
     constructor() {
         this.navControl = false;
     }
@@ -9,11 +9,11 @@ export class XplNavItem {
         }
     }
     render() {
-        return (h(Host, { key: '8a047443ba48a7812f3804e5639cdd8408f9a647', class: "xpl-nav-item", role: "listitem", onClick: () => {
+        return (h(Host, { key: '7e852a7daf95bc3f9b4c87bad07504496b6a5863', class: "xpl-nav-item", role: "listitem", onClick: () => {
                 if (this.navControl) {
                     this.onNavToggle();
                 }
-            } }, h("slot", { key: '41012bd7a72ed7929deddb136ac5f2c6b30a4c1f', name: "link" }, h("slot", { key: 'ce1bb0b1957b5e614fa1ec65cc8973d42bd1dc32', name: "icon" }), h("slot", { key: 'd50d2dd931be394e039f1e07651e05e41231627e' }))));
+            } }, h("slot", { key: 'a88118864c2bdc808b7de975a530b77916b3750f', name: "link" }, h("slot", { key: '91d6a9c350e5de8c6221587795d43e1c315bb8cc', name: "icon" }), h("slot", { key: 'e37e0ee23226eb03200b12092e11a7ae47800abf' }))));
     }
     static get is() { return "xpl-nav-item"; }
     static get properties() {

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

@@ -32,4 +32,8 @@ Pagination.parameters = {
     'web-component': {
         render: Pagination(Pagination.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=9-1407&p=f&t=01tbTrRZyfvVafsA-11',
+    },
 };

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-export class XplPagination {
+export class Pagination {
     constructor() {
         this.totalPages = 1;
         this.withPageControl = false;
@@ -59,19 +59,19 @@ export class XplPagination {
     render() {
         const disablePrev = this.currentPage <= 1;
         const disableNext = this.currentPage >= this.totalPages;
-        return (h(Host, { key: '15d277d40eff79d5fb48867b89370759eb9ca8c7', class: `xpl-pagination xpl-pagination__${this.withPageControl ? 'with' : 'no'}-page-control` }, this.withPageControl && (h("div", { key: '482bbca4e67c513f715573343f4f2d0f0a7281ee', class: "xpl-pagination__rows-per-page" }, h("label", { key: '5a6b3a0f06e6b37b3e6f17021417bac5ce866a69', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: '295db6e36fcf861ffd4f25550322552c6641084c', class: "xpl-pagination__rows-per-page-select", choices: this.rowsPerPageOptionsArray.map((option) => ({
+        return (h(Host, { key: 'a4b8f4ddd9b29563f64282e5728119e1552e5358', class: `xpl-pagination xpl-pagination__${this.withPageControl ? 'with' : 'no'}-page-control` }, this.withPageControl && (h("div", { key: '00c0d20d2bc57eebd82105ebafe08a5696496b16', class: "xpl-pagination__rows-per-page" }, h("label", { key: '1b28a926bbaa4b888217941bb0bf2d897d79dfbc', class: "xpl-pagination__rows-label" }, "Rows per page:"), h("xpl-select", { key: 'f8265a8d87986cfc0afbfcd9d783d767748a8957', class: "xpl-pagination__rows-per-page-select", choices: this.rowsPerPageOptionsArray.map((option) => ({
                 label: option.toString(),
                 value: option.toString(),
                 isSelected: option === this.selectedRowsPerPage,
             })), ref: (el) => {
                 this.rowsPerPageSelectRef = el;
-            } }))), h("div", { key: '87c7b3e4bf11be1668512f325139899496f2dd7a', class: "xpl-pagination__pager" }, h("button", { key: 'c020001ed61d227b9febd71bb9e411b3eeead985', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, h("xpl-icon", { key: '3484457471eb692e3dc140b47f6d8bfd72899fe3', icon: "arrow-left", size: 20 })), h("xpl-select", { key: 'f0897900308b3015db171f6b60382dd537f9dd71', class: "xpl-pagination__page-select", choices: Array.from({ length: this.totalPages }, (_, index) => ({
+            } }))), h("div", { key: '1444d9005878427c44a573d4f6dd1d674b677228', class: "xpl-pagination__pager" }, h("button", { key: '08b98f8c1983543dad93c53d7c71d1aa71b4a45a', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, h("xpl-icon", { key: 'dcc26fcb7be5f525b4767d0860766f3a216a93e4', icon: "arrow-left", size: 20 })), h("xpl-select", { key: '7ba55fb451e26b31aba360876d8ee3b2bb423e19', class: "xpl-pagination__page-select", choices: Array.from({ length: this.totalPages }, (_, index) => ({
                 label: `Page ${index + 1}`,
                 value: (index + 1).toString(),
                 isSelected: index + 1 === this.currentPage,
             })), "custom-display-value": true, ref: (el) => {
                 this.pageSelectRef = el;
-            } }, h("div", { key: '4c2184875c70ceac615c6efd05ef32f65d777152', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: '91c856b44bf3b752280b36f69a53d4c2ed97da19', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, h("xpl-icon", { key: '538a33cbddd6d4e26b782e0a3178018b61f0dec4', icon: "arrow-right", size: 20 })))));
+            } }, h("div", { key: '9c8adc967a098d954477d9032f6d22a0192948e0', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), h("button", { key: '73b5bcbe7ce988c7f5f12ec4ea179bb879f39919', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, h("xpl-icon", { key: 'fb95a3807dc37c419195b2c88c2d8dc39b183880', icon: "arrow-right", size: 20 })))));
     }
     static get is() { return "xpl-pagination"; }
     static get properties() {

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

@@ -0,0 +1,51 @@
+export default {
+    title: 'Components/Panel',
+    component: 'xpl-panel',
+    argTypes: {
+        accent: {
+            options: ['none', 'primary', 'secondary', 'positive', 'negative', 'highlight'],
+            control: {
+                type: 'select',
+            },
+        },
+        padding: {
+            options: ['default', 'tight', 'loose'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+export const Panel = ({ accent, padding }) => `
+    <xpl-panel accent="${accent}" padding="${padding}" style="max-width: 800px">
+        <p style="margin: 0; color: var(--xpl-text-subdued); font-weight: var(--xpl-font-weight-normal); font-size: var(--xpl-font-size-body)">Panel content goes here. Compose other Apollo components within this slot.</p>
+    </xpl-panel>
+`;
+Panel.args = {
+    accent: 'none',
+    padding: 'default',
+};
+Panel.parameters = {
+    layout: 'padded',
+    'web-component': {
+        render: Panel(Panel.args),
+    },
+    html: {
+        render: (({ accent, padding }) => {
+            const accentClass = accent !== 'none' ? ` xpl-panel--accent-${accent}` : '';
+            const accentBar = accent !== 'none' ? '<div class="xpl-panel__accent"></div>' : '';
+            return `
+                <div class="xpl-panel${accentClass} xpl-panel--padding-${padding}" style="max-width: 800px">
+                    ${accentBar}
+                    <div class="xpl-panel__content">
+                        <p style="margin: 0; color: var(--xpl-text-subdued); font-weight: var(--xpl-font-weight-normal); font-size: var(--xpl-font-size-body)">Panel content goes here. Compose other Apollo components within this slot.</p>
+                    </div>
+                </div>
+            `;
+        })(Panel.args),
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=1546-136120&p=f&t=SMeY3LnfDOiNmx1p-11',
+    },
+};

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

@@ -0,0 +1,60 @@
+import { Host, h } from "@stencil/core";
+export class XplPanel {
+    constructor() {
+        this.accent = 'none';
+        this.padding = 'default';
+    }
+    render() {
+        const hasAccent = this.accent !== 'none';
+        return (h(Host, { key: 'a247ab70a6b062022146b88d95b382f879cb8ee7', class: {
+                'xpl-panel': true,
+                [`xpl-panel--accent-${this.accent}`]: hasAccent,
+                [`xpl-panel--padding-${this.padding}`]: true,
+            } }, hasAccent && h("div", { key: '100febab4991a83e7463198331253fe7c7425a1d', class: "xpl-panel__accent" }), h("div", { key: 'c0758ab1d25675236ab15f052f45a29432021019', class: "xpl-panel__content" }, h("slot", { key: '948ec6423935f7ae825f78a89b456f72a66819a8' }))));
+    }
+    static get is() { return "xpl-panel"; }
+    static get properties() {
+        return {
+            "accent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'primary' | 'secondary' | 'positive' | 'negative' | 'highlight'",
+                    "resolved": "\"highlight\" | \"negative\" | \"none\" | \"positive\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color accent bar displayed at the top of the panel.\n\n- `none` \u2013 no accent (default)\n- `primary` \u2013 brand primary color\n- `secondary` \u2013 brand secondary color\n- `positive` \u2013 positive / success color\n- `negative` \u2013 negative / error color\n- `highlight` \u2013 highlight / warning color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accent",
+                "defaultValue": "'none'"
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'tight' | 'loose'",
+                    "resolved": "\"default\" | \"loose\" | \"tight\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding density applied to the content area.\nResponsive: scales down at tablet and mobile breakpoints.\n\n- `default` \u2013 24 px desktop / 16 px tablet+mobile\n- `tight`   \u2013 16 px desktop / 8 px tablet+mobile\n- `loose`   \u2013 40 px desktop / 32 px tablet / 24 px mobile"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

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

@@ -160,5 +160,9 @@ export const LargerContent = ({ isOpen = true, position }) => {
                 </div>
                 `)(comp.args),
         },
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=15240-61430&p=f&t=01tbTrRZyfvVafsA-11',
+        },
     };
 });

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

@@ -1,6 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import throttle from "lodash.throttle";
-export class XplPopover {
+export class Popover {
     constructor() {
         this.isOpen = false;
         this.disabled = false;
@@ -206,16 +206,16 @@ export class XplPopover {
         });
     }
     render() {
-        return (h(Host, { key: 'cf6c4f6b028bfdb9d08f6c8ad2b433c38c1a6f9f' }, h("div", { key: '778f9a2f3a5626b19f5446c56d89f9bb6b31ca36', class: {
+        return (h(Host, { key: '5ed2eca6cac15c5009d0a5440f4a1f1e4dce8260' }, h("div", { key: 'f396004504407a1215e76187be06a27e56bd4a49', class: {
                 'xpl-popover': true,
                 [`xpl-popover--${this.actualPosition}`]: true,
                 'xpl-popover--is-open': this.isOpenState,
-            } }, h("span", { key: '762401eb1e8d30644dfb55e10f4f5f56abff648f', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
+            } }, h("span", { key: '23ac1ebf38617b2a9bd91a1ccfe37d212191f76c', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
                 this.triggerRef = el;
-            } }, h("slot", { key: 'c29166383d024f24d6883ff0d4ea85380f849712', name: "trigger" })), this.display === 'arrow' && (h("div", { key: 'ef7eb85bc764ab403fc4b069a50606da16e3fcdc', class: "xpl-popover__arrow" }, h("svg", { key: '32bc234f1dbc9b07b3b3e2b69e5be222bab02a26', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd34ec2d2b3e67459981f29ce21810f1fb6b7ba45', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: 'f251a3f748c9d4eb5d84d6416dd0121b3365000b', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: '02632fb4c284db5eabce50f4c27079ba37e10204', class: {
+            } }, h("slot", { key: 'ee427ff33db360b11719a886ad724a2bceb64eed', name: "trigger" })), this.display === 'arrow' && (h("div", { key: '27fb57c24abdf3eecb6aae0a96f9b6256ee593a3', class: "xpl-popover__arrow" }, h("svg", { key: '3456fa0239edafe272047446d3aed0ebd4490275', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e5de57c7cbf5301548af4eb5f79d14acc459d0a8', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), h("path", { key: '784f569c0baf0f6fdfad6bda1a36e6ee43293dce', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), h("div", { key: '6ca95b76529ddfa681d4b11a30dceaaa4a3a10c4', class: {
                 'xpl-popover__content': true,
                 [`xpl-popover__content--display-${this.display}`]: true,
-            }, ref: (el) => (this.contentRef = el) }, h("slot", { key: '770df2750d5d4875d38eb52bb26788095ce7292d' })))));
+            }, ref: (el) => (this.contentRef = el) }, h("slot", { key: '75c6768b7e10ac698d54bdc30d052a6c0e98bd75' })))));
     }
     static get is() { return "xpl-popover"; }
     static get properties() {

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplProgress {
+export class Progress {
     constructor() {
         this.currentStep = 0;
     }
@@ -13,7 +13,7 @@ export class XplProgress {
     render() {
         const className = 'xpl-progress';
         const steps = this.steps || [];
-        return (h(Host, { key: '573fca634dcf64084cd74f243a52a978c55478d5', class: className }, h("div", { key: 'e0bb02b55c6676bed131397188ffa0074dba71ef', class: "xpl-progress-container" }, steps.map((step, index) => (h("div", { class: `xpl-progress-step ${this.getCircleClass(index)}` }, h("div", { class: "xpl-progress-step-content" }, h("div", { class: "xpl-progress-step-circle" }, index + 1), h("div", { class: "xpl-progress-step-text" }, step))))))));
+        return (h(Host, { key: '13245e4ec2137ea46a325fb6d8d70c41be0307f1', class: className }, h("div", { key: 'd88e32dd9227ee388a7a6688863ce0a44354701c', class: "xpl-progress-container" }, steps.map((step, index) => (h("div", { class: `xpl-progress-step ${this.getCircleClass(index)}` }, h("div", { class: "xpl-progress-step-content" }, h("div", { class: "xpl-progress-step-circle" }, index + 1), h("div", { class: "xpl-progress-step-text" }, step))))))));
     }
     static get is() { return "xpl-progress"; }
     static get properties() {

package/dist/collection/components/xpl-progress-bar/progress-bar.stories.js

@@ -0,0 +1,96 @@
+export default {
+    title: 'Components/Progress Bar',
+    argTypes: {
+        label: {
+            type: { name: 'string', required: false },
+            description: 'The label text displayed above the progress bar',
+        },
+        helperText: {
+            type: { name: 'string', required: false },
+            description: 'The helper text displayed below the progress bar (recommended for error state)',
+        },
+        max: {
+            control: { type: 'number' },
+            description: 'The maximum value of the progress (mirrors native <progress> max attribute)',
+        },
+        value: {
+            control: { type: 'range', min: 0, max: 100, step: 1 },
+            description: 'The current value of the progress (mirrors native <progress> value attribute). Not used for indeterminate variant.',
+        },
+        size: {
+            options: ['sm', 'lg'],
+            control: { type: 'select' },
+            description: 'The size of the progress bar height: sm = 4px, lg = 6px',
+        },
+        variant: {
+            options: ['default', 'success', 'error', 'indeterminate'],
+            control: { type: 'select' },
+            description: 'The visual variant of the progress bar',
+        },
+    },
+};
+export const ProgressBar = (args) => {
+    let attrs = '';
+    if (args.label)
+        attrs += ` label="${args.label}"`;
+    if (args.helperText)
+        attrs += ` helper-text="${args.helperText}"`;
+    if (args.max !== 100)
+        attrs += ` max="${args.max}"`;
+    if (args.value !== undefined && args.variant !== 'indeterminate')
+        attrs += ` value="${args.value}"`;
+    if (args.size !== 'lg')
+        attrs += ` size="${args.size}"`;
+    if (args.variant !== 'default')
+        attrs += ` variant="${args.variant}"`;
+    return `
+        <div style="display: flex; flex-direction: column; gap: var(--xpl-space-48); width: 50vw;">
+            <xpl-progress-bar${attrs}></xpl-progress-bar>
+        </div>
+    `;
+};
+ProgressBar.args = {
+    label: 'Uploading file...',
+    helperText: '2.4 MB of 5 MB',
+    max: 100,
+    value: 45,
+    size: 'lg',
+    variant: 'default',
+};
+ProgressBar.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: ProgressBar(ProgressBar.args),
+    },
+    html: {
+        render: (({ label, helperText, max, value, size, variant }) => {
+            const labelHtml = label
+                ? `<div class="xpl-progress-bar__header"><div class="xpl-progress-bar__label">${label}</div></div>`
+                : '';
+            const helperHtml = helperText
+                ? `<div class="xpl-progress-bar__helper">${helperText}</div>`
+                : '';
+            const maxValue = max !== null && max !== void 0 ? max : 100;
+            const currentValue = variant !== 'indeterminate' && value !== undefined ? value : maxValue;
+            const className = `xpl-progress-bar xpl-progress-bar--${size} xpl-progress-bar--${variant}`;
+            const progressHtml = variant === 'indeterminate'
+                ? `<div class="xpl-progress-bar__track xpl-progress-bar__track--indeterminate" role="progressbar" aria-label="${label || 'Progress'}"><div class="xpl-progress-bar__indeterminate"></div></div>`
+                : `<progress class="xpl-progress-bar__progress" value="${currentValue}" max="${maxValue}" aria-label="${label || 'Progress'}"></progress>`;
+            return `
+                <div class="${className}">
+                    <div class="xpl-progress-bar__wrapper">
+                        ${labelHtml}
+                        <div class="xpl-progress-bar__row">
+                            ${progressHtml}
+                        </div>
+                        ${helperHtml}
+                    </div>
+                </div>
+            `;
+        })(ProgressBar.args),
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=12841-9237',
+    },
+};