@xplortech/apollo-core 2.5.0 → 2.7.0

package/dist/esm/xpl-button-row.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DhZas3eX.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-C7bgJs6C.js';
 
-const XplButtonRow = class {
+const ButtonRow = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.clickPrimary = createEvent(this, "clickPrimary", 7);
@@ -11,8 +11,8 @@ const XplButtonRow = class {
         this.onTertiary = () => this.clickTertiary.emit();
     }
     render() {
-        return (h(Host, { key: 'c1d468abe10991fb2de71dd01daba53b00ad088d', class: "xpl-button-row" }, h("div", { key: '102e327fea3824fffb0f04bd7d91e5615aca86e3', class: "xpl-button-row-inner" }, h("div", { key: '745044b4b26b0a368ca5aec8b440ebdaa9677e2b', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: 'e895967af49c96eb3a3e98b24c0d10b30951bb7b', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: 'd35ad947185a638f2f03530ae50a349cebbe5855', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: 'f25895afa16581325345f619085adee0cf092ee5', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '8f606ced48a532bb1abaf20a7bc9dc570feb7d21', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: 'b6837c20a4adc3af10d4fd6724e226efd1d307ff', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (h(Host, { key: 'e27ee4f9278fe24ab710504fc5a83b4b92b74607', class: "xpl-button-row" }, h("div", { key: 'e7ea1f3ef4dd52fd3026e47679f1e2663f315a98', class: "xpl-button-row-inner" }, h("div", { key: 'da4ccf63f6f00d83f829fb7cf1e2d20c76cffa33', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: 'cb3d7caeba1d66f0f752e19b33a31d627bc26911', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: 'c7342cf52d016482c2ab8e33ecd8c3616061c107', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: '1ed372cc087ef1a0c650282f90aa0117b35745bc', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '56d88d07742c5e2900831f3a1ecf026d05299632', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: '5bd13162e70b4fc59996b62f507cfc2d4e7418d7', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
     }
 };
 
-export { XplButtonRow as xpl_button_row };
+export { ButtonRow as xpl_button_row };

package/dist/esm/xpl-calendar.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DhZas3eX.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-C7bgJs6C.js';
 import { f as flatpickr } from './index-CH4yJ6Qx.js';
 import { v as v4 } from './v4-Cqlsd6nf.js';
 
 const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${rotate
     ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z'
     : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
-const XplCalendar = class {
+const Calendar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dateSelected = createEvent(this, "dateSelected", 7);
@@ -55,10 +55,10 @@ const XplCalendar = class {
         }
     }
     render() {
-        return (h(Host, { key: 'fb4c58e9ddbf919c96d99b2f9433f1e9ffb9f4df', class: "xpl-calendar" }, h("input", { key: '764bc9e43533f1bf921e586ff05a11d102b9015a', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+        return (h(Host, { key: '6f3d6abc79ea25a9f80d8fa15279fda6b4ba5d81', class: "xpl-calendar" }, h("input", { key: '57f4be2ffc9d40943d20f7325cad1f81b0addedb', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
                 this.inputElement = el;
             } })));
     }
 };
 
-export { XplCalendar as xpl_calendar };
+export { Calendar as xpl_calendar };

package/dist/esm/xpl-dynamic-table-cell.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-DhZas3eX.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-C7bgJs6C.js';
 
-const XplDynamicTableCell = class {
+const DynamicTableCell = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.disabled = false;
@@ -21,11 +21,11 @@ const XplDynamicTableCell = class {
     }
     render() {
         const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
-        return (h(Host, { key: '639f0a42ea0189fb4c269de1b76c5491729f868c', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (h(Host, { key: '924f54186ae2eb07bb4fab65eed7815f60be3a95', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: '29864a738aa7d5e9498195ce0d22bb8d78e39989' })));
+            } }, h("slot", { key: 'a18ef630d9f7f4c8b4079f2d83afe6b28700fb90' })));
     }
     get el() { return getElement(this); }
 };
 
-export { XplDynamicTableCell as xpl_dynamic_table_cell };
+export { DynamicTableCell as xpl_dynamic_table_cell };

package/dist/esm/xpl-dynamic-table-row.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-DhZas3eX.js';
+import { r as registerInstance, h, H as Host } from './index-C7bgJs6C.js';
 
-const XplDynamicTableRow = class {
+const DynamicTableRow = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.disabled = false;
@@ -26,10 +26,10 @@ const XplDynamicTableRow = class {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (h(Host, { key: '4969ae6223aa4f6604d20e657d390d8ec43eb9bd', role: "row", class: classList, ref: (el) => {
+        return (h(Host, { key: 'b1a117c4961d5a2f618510159b292184c2c1aed3', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el;
-            } }, h("slot", { key: '244d34612847408ddb9e0d718b1e5916b7e24b2d' })));
+            } }, h("slot", { key: 'be0ef005b0ed337272e92d29dda61dcbe966c4ed' })));
     }
 };
 
-export { XplDynamicTableRow as xpl_dynamic_table_row };
+export { DynamicTableRow as xpl_dynamic_table_row };

package/dist/esm/xpl-dynamic-table.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-DhZas3eX.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-C7bgJs6C.js';
 
-const XplDynamicTable = class {
+const DynamicTable = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.selectedItemCountChange = createEvent(this, "selectedItemCountChange", 7);
@@ -54,9 +54,9 @@ const XplDynamicTable = class {
         this.updateColumnCount();
     }
     render() {
-        return (h("div", { key: 'f49634b51fd6fb49bcb75cc4247f683ff99d6b99', role: "grid", class: "xpl-dynamic-table", "aria-colcount": this.colCount }, h("slot", { key: 'e5cd66e212a41ce26dfaccae634ab7ee22ba9910', name: "header" }), h("slot", { key: '07e1fbec46f08e46f728340291510992d21f71a4', name: "body" })));
+        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" })));
     }
     get el() { return getElement(this); }
 };
 
-export { XplDynamicTable as xpl_dynamic_table };
+export { DynamicTable as xpl_dynamic_table };

package/dist/esm/xpl-grid-item.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-DhZas3eX.js';
+import { r as registerInstance, h, H as Host } from './index-C7bgJs6C.js';
 
-const XplGridItem = class {
+const GridItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.xs = 6;
@@ -14,8 +14,8 @@ const XplGridItem = class {
         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: '4a3a254b51eae0907baf74c383b0d2b60017b69b', class: className }, h("slot", { key: 'b23f50ff733b9f3009eda4a3569a28b0636e76f4' })));
+        return (h(Host, { key: 'bb28d83b6fd6ee92390ffcb5a505f5084f5624b9', class: className }, h("slot", { key: 'db3cf487db67044879425c830a14a44e06d19414' })));
     }
 };
 
-export { XplGridItem as xpl_grid_item };
+export { GridItem as xpl_grid_item };

package/dist/esm/xpl-grid.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-DhZas3eX.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-C7bgJs6C.js';
 
-const XplGrid = class {
+const Grid = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
@@ -26,9 +26,9 @@ const XplGrid = class {
         });
     }
     render() {
-        return h(Host, { key: 'b7adecdd36342641869726ffa094578c1272dc1e', class: "xpl-grid" });
+        return h(Host, { key: '0036b594c89e75a9b302e7a7d9c99d4703a8b729', class: "xpl-grid" });
     }
     get container() { return getElement(this); }
 };
 
-export { XplGrid as xpl_grid };
+export { Grid as xpl_grid };

package/dist/esm/xpl-large-card.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-DhZas3eX.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-C7bgJs6C.js';
 
-const XplLargeCard = class {
+const LargeCard = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
@@ -17,9 +17,9 @@ const XplLargeCard = class {
     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: '886078965cb1ca87fd9c4f45a8b06f089a4b2e04', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '1c2006c9167b2d46262b222ace3c5e9135863783', class: "xpl-large-card__header" }, h("header", { key: '21ba4629c7e3d0d9dff98f9dde2ac4bc9f1f494e' }, h("slot", { key: 'd50991dc4fcca6c56c04c7cc9a401f0894035aa2', name: "title" }, this.name), this.link && (h("span", { key: '35b1b15786c1674f6d1797ec3b04da81b27d5d3a', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: 'f52a7a39b3d044341296d88adb9d2bc07cdec9ab', icon: "chevron-right", size: 16 })))), this.description && (h("div", { key: 'bac9d6cec27272d277c991c81e651714603066a2', class: "xpl-large-card__description" }, this.description))), h("dd", { key: '9da3ca8ec575a6755f1f47065299ec3ab3e5169b', class: "xpl-large-card__body" }, hasContentSlot && h("slot", { key: '022da3c1e07c264441c58f7d42d6edca109a504d', name: contentSlot }))));
     }
     get el() { return getElement(this); }
 };
 
-export { XplLargeCard as xpl_large_card };
+export { LargeCard as xpl_large_card };

package/dist/esm/xpl-main-nav.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DhZas3eX.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-C7bgJs6C.js';
 
-const XplMainNav = class {
+const MainNav = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.navWidth = createEvent(this, "navWidth", 7);
@@ -16,8 +16,8 @@ const XplMainNav = class {
         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: '12ad41e2631d3cbab84b0bf536ffaf4fc31e7f8b', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, h("nav", { key: '54c0fcc49ddda8846279b8efc4afe0244e054211' }, h("header", { key: 'a1803d0c15541eb7d8b84d17d6e8c5613472dd7e', "aria-label": "Sidebar Header" }, h("slot", { key: 'cee7321f97dc59f7d7e844ecd8fab6ba656b92e9', name: "logo" }), h("slot", { key: 'f33cd91b4ad2e7dad79f89401477c7c2cc7636aa', name: "brand-name" })), h("div", { key: 'd7951aa7282d7be3107b15196679f2e55c76d847', class: "xpl-main-nav__main_section" }, h("slot", { key: '716d5be941f65ce57c2a9f12e4eeaedef83c0dd0', name: "navigation" })), h("footer", { key: '880b9fb98c5d0d2b4133cacb73a7c339590bf8bb', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, h("slot", { key: '005c2efc4a3490e50a2b692d0e9dc7e2ce76d938', name: "footer" })))));
     }
 };
 
-export { XplMainNav as xpl_main_nav };
+export { MainNav as xpl_main_nav };

package/dist/esm/xpl-toggle.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host } from './index-DhZas3eX.js';
+import { r as registerInstance, h, H as Host } from './index-C7bgJs6C.js';
 import { v as v4 } from './v4-Cqlsd6nf.js';
 
-const XplToggle = class {
+const Toggle = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.variant = 'default';
@@ -14,14 +14,14 @@ const XplToggle = class {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (h(Host, { key: 'e5b8f2802e828221c2966fa85bafe7fb6bcf40bc', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '17aff6b0b12c4815d2848af71a84a808c5b2a356', class: {
+        return (h(Host, { key: 'b501bb268b9fbc2756544b17481ae78ee3144960', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '34d2bb6e6c4538a863f333e8124fbde9ec2544cb', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: 'c5bf01336e7f02b41f050971b596f718cdc8a87d', class: {
+            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: 'f9f5ff29d428e776566d0a12e62ab7efe311feb5', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
-            } }, this.description)))), h("input", { key: 'e9426bde8c042f3727fbcac738bd4903c063b2a4', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { key: '7d1bdfdf3ccc08276d86ffa3beb84a7946f576bb', htmlFor: this.id }, this.label)));
+            } }, this.description)))), h("input", { key: 'f9b1baf90d9336711ce1354a66770c7423551af8', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { key: '49f803372904b5b87394a55c67f428401cd14379', htmlFor: this.id }, this.label)));
     }
 };
 
-export { XplToggle as xpl_toggle };
+export { Toggle as xpl_toggle };

package/dist/esm/xpl-toolbar.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-DhZas3eX.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-C7bgJs6C.js';
 
-const XplToolbar = class {
+const Toolbar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.selectedItemCount = 0;
@@ -14,13 +14,13 @@ const XplToolbar = class {
         this.selectedItemCount = event.detail.length;
     }
     render() {
-        return (h(Host, { key: '097500ed053ff1f15d30fc62e2efa556f8f95ef2', class: {
+        return (h(Host, { key: 'eda1f57ef1a207b82f622f090dd30f21d60bbc61', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, h("div", { key: 'c2e73f623f8afe7ca8e9e367b173067992b661fa', class: "toolbar" }, h("p", { key: '63c1b1f5edee4abc4fea15bdb6d483a682854403', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'bc387680fee35312128aac1e2d2a9e83e78b86af', class: "actions" }, h("slot", { key: 'a8e3e41f75565cbf9b8fc86665ecabdcf2f674f3', name: "actions-left" }), h("slot", { key: 'b3e82f6aabb8279f39248b551570d8937cf35aa6', name: "actions-right" })))));
+            } }, h("div", { key: 'fe703bf7fb49ebe27f4eee7973ea1e24c5ed50a4', class: "toolbar" }, h("p", { key: 'd0d9cb84b4828688aabbabb3395ff3c18c4d2a78', class: "selected-item-count" }, this.selectedItemCount, " Selected"), h("div", { key: 'c1259be179d245e4c18a3690f800eb493f491ba9', class: "actions" }, h("slot", { key: '40000dda8efbfd0aa7175e0e5db1c1c9f4e7e89f', name: "actions-left" }), h("slot", { key: '255e21ebb1af8fde1bb76a1a1243eeadc4146d3d', name: "actions-right" })))));
     }
     get el() { return getElement(this); }
 };
 
-export { XplToolbar as xpl_toolbar };
+export { Toolbar as xpl_toolbar };

package/dist/types/components/xpl-accordion/xpl-accordion.d.ts

@@ -1,4 +1,4 @@
-export declare class XplAccordion {
+export declare class Accordion {
     el: HTMLElement;
     contentId?: string;
     header: string;

package/dist/types/components/xpl-application-shell/application-shell.stories.d.ts

@@ -56,5 +56,9 @@ export declare const ApplicationShell: {
         html: {
             render: string;
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components/xpl-application-shell/xpl-application-shell.d.ts

@@ -1,4 +1,4 @@
-export declare class XplApplicationShell {
+export declare class ApplicationShell {
     private closeNavOnMobile;
     withSubnav: boolean;
     withUtility: boolean;

package/dist/types/components/xpl-avatar/avatar.stories.d.ts

@@ -2,27 +2,43 @@ declare const _default: {
     title: string;
 };
 export default _default;
+declare const defaultGroupData: ({
+    name: string;
+    color: "green";
+    src?: undefined;
+} | {
+    name: string;
+    color: "yellow";
+    src?: undefined;
+} | {
+    name: string;
+    color: "pink";
+    src?: undefined;
+} | {
+    src: string;
+    name: string;
+    color?: undefined;
+})[];
+type AvatarStatusStory = 'active' | 'blue' | 'gray' | 'green' | 'inactive' | 'orange' | 'purple' | 'red' | 'warning' | 'yellow';
+interface AvatarArgs {
+    variant: 'default' | 'profile' | 'group' | 'with-text';
+    src: string;
+    name: string;
+    subText: string;
+    size: 'md' | 'sm' | undefined;
+    color: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';
+    status: AvatarStatusStory | undefined;
+    href: boolean;
+    disabled: boolean;
+    groupData: typeof defaultGroupData;
+}
 export declare const Avatar: {
-    ({ placeholder, name, size, color, status, link, disabled }: {
-        placeholder: any;
-        name: any;
-        size: any;
-        color: any;
-        status: any;
-        link: any;
-        disabled: any;
-    }): string;
+    (args: AvatarArgs): string;
     argTypes: {
-        placeholder: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-        };
-        name: {
-            type: {
-                name: string;
-                required: boolean;
+        variant: {
+            options: string[];
+            control: {
+                type: string;
             };
         };
         size: {
@@ -42,34 +58,81 @@ export declare const Avatar: {
             control: {
                 type: string;
             };
+            description: string;
+        };
+        src: {
+            control: {
+                type: string;
+            };
+        };
+        name: {
+            control: {
+                type: string;
+            };
+        };
+        subText: {
+            control: {
+                type: string;
+            };
+            description: string;
         };
-        link: {
+        href: {
             control: {
                 type: string;
             };
+            description: string;
         };
         disabled: {
             control: {
                 type: string;
             };
         };
+        groupData: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
     };
     args: {
-        placeholder: string;
+        variant: "default";
+        src: string;
         name: string;
-        size: string;
-        color: string;
-        status: string;
-        link: boolean;
-        disabled: boolean;
+        subText: string;
+        size: any;
+        color: any;
+        status: any;
+        href: false;
+        disabled: false;
+        groupData: ({
+            name: string;
+            color: "green";
+            src?: undefined;
+        } | {
+            name: string;
+            color: "yellow";
+            src?: undefined;
+        } | {
+            name: string;
+            color: "pink";
+            src?: undefined;
+        } | {
+            src: string;
+            name: string;
+            color?: undefined;
+        })[];
     };
     parameters: {
-        layout: string;
         'web-component': {
             render: string;
         };
         html: {
             render: string;
         };
+        layout: "centered";
+        design: {
+            readonly type: "figma";
+            readonly url: "https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6-1394";
+        };
     };
 };

package/dist/types/components/xpl-avatar/xpl-avatar.d.ts

@@ -1,11 +1,38 @@
-export declare class XplAvatar {
-    color?: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';
+import type { BadgePalette } from '../xpl-badge/xpl-badge';
+export type AvatarColor = 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';
+export type AvatarStatus = 'active' | 'inactive' | 'warning' | BadgePalette;
+export type AvatarVariant = 'profile' | 'group' | 'with-text';
+export interface AvatarGroupItem {
+    src?: string;
+    name?: string;
+    color?: AvatarColor;
+}
+export declare class Avatar {
+    el: HTMLXplAvatarElement;
+    private cachedGroupItems;
+    private cachedSlotContent;
+    color?: AvatarColor;
     disabled?: boolean;
+    groupData?: AvatarGroupItem[] | string;
+    private onGroupDataChange;
     href?: string;
     name?: string;
     size?: 'md' | 'sm';
     src?: string;
-    status?: 'active' | 'warning' | 'inactive';
+    status?: AvatarStatus;
+    subText?: string;
     target?: string;
+    variant?: AvatarVariant;
+    componentWillLoad(): void;
+    private static parseGroupData;
+    private get groupItems();
+    private get statusBadgeVariant();
+    private getPlaceholderText;
+    private static getSingleAvatarClasses;
+    private getAnchorProps;
+    private static renderAvatarMedia;
+    private renderAvatarMediaWithStatusBadge;
+    private renderGroupItem;
+    private renderWithTextContent;
     render(): any;
 }

package/dist/types/components/xpl-backdrop/backdrop.stories.d.ts

@@ -13,5 +13,9 @@ export declare const Backdrop: {
         html: {
             render: string;
         };
+        design: {
+            type: string;
+            url: string;
+        };
     };
 };

package/dist/types/components/xpl-backdrop/xpl-backdrop.d.ts

@@ -1,4 +1,4 @@
-export declare class XplBackdrop {
+export declare class Backdrop {
     relative: boolean;
     render(): any;
 }

package/dist/types/components/xpl-badge/badge.stories.d.ts

@@ -1,7 +1,30 @@
+declare const VARIANT_OPTIONS: readonly ["purple", "green", "yellow", "orange", "gray", "red", "blue", "success", "warning", "inactive", "error"];
+type BadgeVariantOption = (typeof VARIANT_OPTIONS)[number];
+interface BadgeArgs {
+    variant: BadgeVariantOption;
+    size: 'default' | 'small';
+    shape: 'rounded' | 'boxy';
+    dot: boolean;
+    dotOnly: boolean;
+    text: string;
+    bordered: boolean;
+}
 declare const _default: {
     title: string;
     argTypes: {
         variant: {
+            options: ("purple" | "green" | "yellow" | "orange" | "gray" | "red" | "blue" | "success" | "warning" | "inactive" | "error")[];
+            control: {
+                type: "select";
+            };
+        };
+        size: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+        shape: {
             options: string[];
             control: {
                 type: "select";
@@ -12,33 +35,46 @@ declare const _default: {
                 type: "boolean";
             };
         };
+        dotOnly: {
+            control: {
+                type: "boolean";
+            };
+        };
         text: {
-            type: {
-                name: "string";
-                required: false;
+            control: {
+                type: "text";
+            };
+        };
+        bordered: {
+            control: {
+                type: "boolean";
             };
         };
     };
 };
 export default _default;
 export declare const Badge: {
-    ({ variant, dot, text }: {
-        variant: any;
-        dot: any;
-        text: any;
-    }): string;
+    (args: BadgeArgs): string;
     args: {
-        variant: string;
-        dot: boolean;
+        variant: "purple";
+        size: "default";
+        shape: "rounded";
         text: string;
+        dot: true;
+        dotOnly: false;
+        bordered: false;
     };
     parameters: {
-        layout: string;
         'web-component': {
             render: string;
         };
         html: {
             render: string;
         };
+        layout: "centered";
+        design: {
+            readonly type: "figma";
+            readonly url: "https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6-1395&p=f&t=aZipOZlFAFwtMW1r-11";
+        };
     };
 };

package/dist/types/components/xpl-badge/xpl-badge.d.ts

@@ -1,5 +1,12 @@
-export declare class XplBadge {
+export type BadgePalette = 'purple' | 'green' | 'yellow' | 'orange' | 'gray' | 'red' | 'blue';
+export type BadgeVariantProp = BadgePalette | 'success' | 'warning' | 'inactive' | 'error';
+export declare class Badge {
+    bordered?: boolean;
     dot?: boolean;
-    variant?: 'success' | 'warning' | 'inactive' | 'error';
+    dotOnly?: boolean;
+    shape: 'rounded' | 'boxy';
+    size: 'default' | 'small';
+    variant: BadgeVariantProp;
+    private get resolvedVariant();
     render(): any;
 }