@xplortech/apollo-core 2.10.0 → 2.12.0

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

@@ -0,0 +1,340 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+import { h as hasHostNamedSlot } from './light-dom-slots-DkqlawVY.js';
+import { i as isBrowser } from './lifecycle-Dqb1pIRo.js';
+
+const TOP_NAV_BRAND_LOGO_SLOT_REGIONS = [
+    '.xpl-top-nav__brand-logo-slot',
+    '.xpl-top-nav__brand-bar',
+];
+const TOP_NAV_USER_MENU_PANEL_REGION = '.xpl-top-nav__user-menu-panel';
+const TOP_NAV_USER_MENU_SLOT_REGIONS = [
+    TOP_NAV_USER_MENU_PANEL_REGION,
+    '.xpl-top-nav__user-menu-stash',
+];
+const TOP_NAV_USER_MENU_TRIGGER_SLOT_REGIONS = [
+    '.xpl-top-nav__user-popover',
+    '.xpl-top-nav__user-menu-stash',
+    '.xpl-top-nav__right-user',
+];
+const TOP_NAV_USER_MENU_TRIGGER_EXCLUDED_REGIONS = [TOP_NAV_USER_MENU_PANEL_REGION];
+const TopNav = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.brandClick = createEvent(this, "brandClick", 7);
+        this.navOpen = createEvent(this, "navOpen", 7);
+        this.slotProjectionDirty = false;
+        this.userPopoverDrawerSyncHost = null;
+        this.brandLogoSlotPresent = false;
+        this.open = false;
+        this.slotProjectionNonce = 0;
+        this.userMenuSlotPresent = false;
+        this.userMenuTriggerSlotPresent = false;
+        this.focusNavControlAfterClose = () => {
+            if (this.navControlFocusTimeoutId !== undefined) {
+                clearTimeout(this.navControlFocusTimeoutId);
+            }
+            this.navControlFocusTimeoutId = setTimeout(() => {
+                this.navControlFocusTimeoutId = undefined;
+                this.el.querySelector('.xpl-top-nav__nav-control')?.focus();
+            }, 0);
+        };
+        this.handleUserPopoverIsOpenChange = (e) => {
+            const { detail } = e;
+            if (detail === true) {
+                this.closeMobileDrawerWhenAccountMenuOpens();
+            }
+        };
+        this.onBrandNavItemClick = (e) => {
+            if (this.brandHref != null) {
+                return;
+            }
+            this.brandClick.emit(e.detail);
+        };
+        this.onDocKeyDownEscape = (e) => {
+            if (!this.navControl || !this.open || e.key !== 'Escape') {
+                return;
+            }
+            if (this.anyDescendantPopoverIsOpen()) {
+                return;
+            }
+            if (this.el.querySelector('xpl-top-nav-item.xpl-top-nav-item--dropdown-open')) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            this.open = false;
+            this.navOpen.emit(false);
+            this.focusNavControlAfterClose();
+        };
+        this.onDocClickOutsideDismiss = (e) => {
+            if (!this.navControl || !this.open) {
+                return;
+            }
+            const target = e.target;
+            if (target == null || this.anyDescendantPopoverIsOpen()) {
+                return;
+            }
+            if (this.el.querySelector('.xpl-top-nav__left-primary')?.contains(target)) {
+                return;
+            }
+            if (this.el.querySelector('.xpl-top-nav__nav-control')?.contains(target)) {
+                return;
+            }
+            this.open = false;
+            this.resetMobileCascade();
+            this.navOpen.emit(false);
+        };
+        this.onNavToggle = () => {
+            const wasOpen = this.open;
+            this.open = !this.open;
+            this.navOpen.emit(this.open);
+            if (wasOpen && !this.open) {
+                this.resetMobileCascade();
+                this.focusNavControlAfterClose();
+            }
+        };
+        this.onUserPopoverInnerOpenClassChange = () => {
+            const host = this.userPopoverDrawerSyncHost;
+            if (!host) {
+                return;
+            }
+            const inner = host.querySelector('.xpl-popover');
+            if (inner?.classList.contains('xpl-popover--is-open')) {
+                this.closeMobileDrawerWhenAccountMenuOpens();
+            }
+        };
+        this.syncBrandLogoSlot = () => {
+            const next = hasHostNamedSlot(this.el, 'brand-logo', {
+                hostTag: 'xpl-top-nav',
+                projectionRegionSelectors: TOP_NAV_BRAND_LOGO_SLOT_REGIONS,
+            });
+            if (next !== this.brandLogoSlotPresent) {
+                this.brandLogoSlotPresent = next;
+            }
+        };
+        this.syncUserMenuSlots = () => {
+            const panel = hasHostNamedSlot(this.el, 'user-menu', {
+                hostTag: 'xpl-top-nav',
+                projectionRegionSelectors: TOP_NAV_USER_MENU_SLOT_REGIONS,
+            });
+            const triggerSlot = hasHostNamedSlot(this.el, 'user-menu-trigger', {
+                hostTag: 'xpl-top-nav',
+                projectionRegionSelectors: TOP_NAV_USER_MENU_TRIGGER_SLOT_REGIONS,
+                excludedRegionSelectors: TOP_NAV_USER_MENU_TRIGGER_EXCLUDED_REGIONS,
+            });
+            if (panel !== this.userMenuSlotPresent) {
+                this.userMenuSlotPresent = panel;
+            }
+            if (triggerSlot !== this.userMenuTriggerSlotPresent) {
+                this.userMenuTriggerSlotPresent = triggerSlot;
+            }
+        };
+    }
+    onNavControlChanged() {
+        this.syncOpenFromNavControl();
+        this.syncDocDismissListeners();
+    }
+    connectedCallback() {
+        this.syncOpenFromNavControl();
+        this.syncDocDismissListeners();
+        this.syncBrandLogoSlot();
+        this.syncUserMenuSlots();
+        this.connectSlotContentObserver();
+        this.flushPendingSlotProjection();
+    }
+    disconnectedCallback() {
+        if (this.navControlFocusTimeoutId !== undefined) {
+            clearTimeout(this.navControlFocusTimeoutId);
+            this.navControlFocusTimeoutId = undefined;
+        }
+        if (this.deferredSlotContentObserverSyncTimeoutId !== undefined) {
+            clearTimeout(this.deferredSlotContentObserverSyncTimeoutId);
+            this.deferredSlotContentObserverSyncTimeoutId = undefined;
+        }
+        this.removeDocDismissListeners();
+        this.disconnectSlotContentObserver();
+        this.disconnectUserPopoverDrawerSync();
+    }
+    componentWillLoad() {
+        this.syncOpenFromNavControl();
+        this.syncBrandLogoSlot();
+        this.syncUserMenuSlots();
+    }
+    componentWillRender() {
+        this.disconnectSlotContentObserver();
+    }
+    componentDidRender() {
+        this.connectSlotContentObserver();
+        this.connectUserPopoverDrawerSync();
+    }
+    get childAccountLabelText() {
+        return this.childAccountLabel?.trim() ?? '';
+    }
+    get hasBrand() {
+        const name = this.brandName?.trim() ?? '';
+        const logo = this.brandLogo?.trim() ?? '';
+        return name.length > 0 || logo.length > 0 || this.brandLogoSlotPresent;
+    }
+    get hasUserMenu() {
+        return this.userMenuSlotPresent;
+    }
+    get needsUserMenuSlotStash() {
+        return !this.userMenuSlotPresent && this.userMenuTriggerSlotPresent;
+    }
+    get usesBuiltInChildAccountTrigger() {
+        return this.hasUserMenu && !this.userMenuTriggerSlotPresent;
+    }
+    anyDescendantPopoverIsOpen() {
+        const hosts = this.el.querySelectorAll('xpl-popover');
+        for (let i = 0; i < hosts.length; i += 1) {
+            const inner = hosts[i].querySelector('.xpl-popover');
+            if (inner?.classList.contains('xpl-popover--is-open')) {
+                return true;
+            }
+        }
+        return false;
+    }
+    closeMobileDrawerWhenAccountMenuOpens() {
+        if (!this.navControl || !this.open) {
+            return;
+        }
+        this.open = false;
+        this.navOpen.emit(false);
+    }
+    connectSlotContentObserver() {
+        this.disconnectSlotContentObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.slotContentObserver = new MutationObserver((mutations) => {
+            this.scheduleSlotContentSyncFromObserver(mutations);
+        });
+        this.slotContentObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    connectUserPopoverDrawerSync() {
+        const pop = this.hasUserMenu
+            ? this.el.querySelector('xpl-popover.xpl-top-nav__user-popover')
+            : null;
+        if (pop === this.userPopoverDrawerSyncHost) {
+            return;
+        }
+        this.disconnectUserPopoverDrawerSync();
+        if (!pop) {
+            return;
+        }
+        this.userPopoverDrawerSyncHost = pop;
+        pop.addEventListener('isOpenChange', this.handleUserPopoverIsOpenChange);
+        const inner = pop.querySelector('.xpl-popover');
+        if (inner && typeof MutationObserver !== 'undefined') {
+            this.userPopoverDrawerOpenObserver = new MutationObserver(() => {
+                this.onUserPopoverInnerOpenClassChange();
+            });
+            this.userPopoverDrawerOpenObserver.observe(inner, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+            this.onUserPopoverInnerOpenClassChange();
+        }
+    }
+    disconnectSlotContentObserver() {
+        this.slotContentObserver?.disconnect();
+        this.slotContentObserver = undefined;
+    }
+    disconnectUserPopoverDrawerSync() {
+        if (this.userPopoverDrawerSyncHost) {
+            this.userPopoverDrawerSyncHost.removeEventListener('isOpenChange', this.handleUserPopoverIsOpenChange);
+            this.userPopoverDrawerSyncHost = null;
+        }
+        this.userPopoverDrawerOpenObserver?.disconnect();
+        this.userPopoverDrawerOpenObserver = undefined;
+    }
+    removeDocDismissListeners() {
+        const doc = this.el.ownerDocument;
+        doc.removeEventListener('keydown', this.onDocKeyDownEscape, false);
+        doc.removeEventListener('click', this.onDocClickOutsideDismiss, true);
+    }
+    resetMobileCascade() {
+        const openItem = this.el.querySelector('.xpl-top-nav__left-primary > xpl-top-nav-item.xpl-top-nav-item--dropdown-open');
+        openItem?.closeMenu().catch(() => undefined);
+    }
+    scheduleSlotContentSyncFromObserver(mutations) {
+        if (this.mutationsAffectHostSlotting(mutations)) {
+            this.slotProjectionDirty = true;
+        }
+        if (this.deferredSlotContentObserverSyncTimeoutId !== undefined) {
+            clearTimeout(this.deferredSlotContentObserverSyncTimeoutId);
+        }
+        this.deferredSlotContentObserverSyncTimeoutId = setTimeout(() => {
+            this.deferredSlotContentObserverSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncBrandLogoSlot();
+            this.syncUserMenuSlots();
+            this.flushPendingSlotProjection();
+        }, 0);
+    }
+    flushPendingSlotProjection() {
+        if (this.slotProjectionDirty) {
+            this.slotProjectionDirty = false;
+            this.slotProjectionNonce += 1;
+        }
+    }
+    mutationsAffectHostSlotting(mutations) {
+        return mutations.some((m) => m.type === 'attributes' || (m.type === 'childList' && m.target === this.el));
+    }
+    syncDocDismissListeners() {
+        this.removeDocDismissListeners();
+        if (!isBrowser())
+            return;
+        if (this.navControl) {
+            const doc = this.el.ownerDocument;
+            doc.addEventListener('keydown', this.onDocKeyDownEscape, false);
+            doc.addEventListener('click', this.onDocClickOutsideDismiss, true);
+        }
+    }
+    syncOpenFromNavControl() {
+        const wasOpen = this.open;
+        this.open = false;
+        if (wasOpen && !this.navControl) {
+            this.resetMobileCascade();
+            this.navOpen.emit(false);
+        }
+    }
+    render() {
+        return (h(Host, { key: '8f9f8e171b2b04706360048965e8e8a40f3f7013', class: {
+                'xpl-top-nav': true,
+                'xpl-top-nav--nav-control': Boolean(this.navControl),
+                'xpl-top-nav--open': this.open,
+                'xpl-top-nav--has-child-account-label': this.childAccountLabelText.length > 0,
+                'xpl-top-nav--has-brand': this.hasBrand,
+                'xpl-top-nav--has-user-menu': this.hasUserMenu,
+                dark: true,
+            } }, h("nav", { key: '2c05b69b2918753c4f928e53d92c6ca737a92b59', "aria-label": this.label ?? 'top-navigation-bar', class: "xpl-top-nav__bar" }, h("div", { key: '1dd5722748946d0adfad6cc40da03c21012d65b2', class: "xpl-top-nav__inner-left" }, this.navControl && (h("button", { key: '810e68f589ec13b942a78c877fea816407c05287', type: "button", class: "xpl-top-nav__nav-control", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onNavToggle }, h("xpl-icon", { key: '550653cbd1d61c7b80a31ab48dce59936a107128', class: "xpl-top-nav__control-icon", icon: "menu", size: 32 }))), this.hasBrand && (h("div", { key: '6509a9a42b693b925204a9a42a34c0071d73f485', class: "xpl-top-nav__brand-bar" }, h("xpl-top-nav-item", { key: '623cfb95bd0a6581a057ddf37aa3920ee58b5734', class: "xpl-top-nav__brand", href: this.brandHref, onNavItemClick: this.onBrandNavItemClick }, this.brandLogo?.trim() ? (h("img", { class: "xpl-top-nav__brand-logo", src: this.brandLogo, alt: this.brandName?.trim()
+                ? this.brandName.trim()
+                : 'Brand' })) : this.brandLogoSlotPresent ? (h("span", { class: "xpl-top-nav__brand-logo-slot" }, h("slot", { name: "brand-logo" }))) : null, this.brandName?.trim() ? (h("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), h("div", { key: '61d8a6d485380c39ffa74cd8cfbea37df32060dd', class: {
+                'xpl-top-nav__aside': true,
+                'xpl-nav-left': true,
+            } }, h("div", { key: '3aab27091f543a9c6a813043883c218791cfaa4a', class: "xpl-top-nav__left-primary", role: "list" }, h("slot", { key: '93ff48c9bb3e0fa00b23a707da84d222ad74224d', name: "left-aside" })))), h("div", { key: 'd92afdae9ac68d49a370fb41b39aeef2b956af1f', class: {
+                'xpl-top-nav__aside': true,
+                'xpl-nav-right': true,
+            } }, h("div", { key: '36fadad47ed2862f88c1f42e1b95530d2e06b046', class: "xpl-nav-right__list" }, h("div", { key: '5b35413cbfcc5fd9af1e491f1a1f14d41ae35c0d', class: "xpl-top-nav__right-rail" }, h("div", { key: '37d00bfe95cdf35345ed9ec273a159255efc31a2', class: "xpl-top-nav__right-lead" }, h("slot", { key: 'b64f92c5886ef929b51fde06d48ea1fbf3660d44', name: "right-aside" })), this.hasUserMenu ? (h("div", { class: "xpl-top-nav__right-user" }, h("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (h("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (h("xpl-button", { slot: "trigger", class: "xpl-top-nav__child-account-trigger", type: "button", variant: "tertiary", icon: "chevron-down", iconPosition: "end", iconOnly: this.childAccountLabelText.length === 0, "aria-haspopup": "dialog", "aria-label": this.childAccountLabelText.length > 0
+                ? undefined
+                : 'Open account menu' }, this.childAccountLabelText.length > 0
+            ? this.childAccountLabelText
+            : null)) : null, h("div", { class: "xpl-top-nav__user-menu-panel" }, h("slot", { name: "user-menu" }))))) : null, this.needsUserMenuSlotStash ? (h("div", { class: "xpl-top-nav__user-menu-stash", hidden: true, "aria-hidden": "true" }, h("slot", { name: "user-menu-trigger" }), h("slot", { name: "user-menu" }))) : null))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "navControl": [{
+                "onNavControlChanged": 0
+            }]
+    }; }
+};
+
+export { TopNav as xpl_top_nav };

package/dist/esm/xpl-utility-bar.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-ukZKsqqq.js';
+
+const UtilityBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.navOpen = createEvent(this, "navOpen", 7);
+        this.open = true;
+    }
+    onNavToggle() {
+        this.open = !this.open;
+        this.navOpen.emit(this.open);
+    }
+    componentWillLoad() {
+        this.open = this.isNavOpenAtStartup !== undefined ? this.isNavOpenAtStartup : this.open;
+    }
+    render() {
+        return (h(Host, { key: '7ad1182d72a730df69cf714b665a6d02eac2e51a' }, h("nav", { key: 'f0d5ffc31cabc8a075cae2c1ebdaa0e82ca53943', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (h("div", null, h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, h("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), h("slot", { name: "aside" }))) : (h("slot", { name: "aside" })), h("slot", { key: 'dfbacf5921308bd6056b8e6d903b31df28613ce0', name: "main" }))));
+    }
+};
+
+export { UtilityBar as xpl_utility_bar };

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

@@ -1,6 +1,16 @@
+import type { StoryFunction } from "../../../../.storybook/utils/story-function";
+interface AccordionArgs {
+    header: string;
+    description: string;
+    borderType: 'none' | 'bottom' | 'bordered';
+    size: '1' | '2' | '3';
+    initialExpanded: boolean;
+}
 declare const _default: {
     title: string;
     component: string;
+    tags: string[];
+    beforeEach(): void;
     argTypes: {
         header: {
             type: {
@@ -31,7 +41,6 @@ declare const _default: {
             };
         };
     };
-    tags: string[];
 };
 export default _default;
-export declare const Accordion: any;
+export declare const Accordion: StoryFunction<AccordionArgs>;

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

@@ -1,5 +1,9 @@
+import type { StoryFunction } from "../../../../.storybook/utils/story-function";
 declare const _default: {
     title: string;
+    tags: string[];
+    beforeEach(): void;
+    play({ canvasElement, args }: import("storybook/internal/csf").PlayFunctionContext<import("@storybook/web-components").WebComponentsRenderer, ApplicationShellProps>): Promise<void>;
     argTypes: {
         navWidth: {
             options: string[];
@@ -39,26 +43,4 @@ interface ApplicationShellProps {
     showSecondaryNav: boolean;
     showUtilityBar: boolean;
 }
-export declare const ApplicationShell: {
-    ({ contentSize, isNavOpenAtStartup, navWidth, showSecondaryNav, showUtilityBar, }: ApplicationShellProps): string;
-    args: {
-        contentSize: string;
-        isNavOpenAtStartup: boolean;
-        navWidth: string;
-        showSecondaryNav: boolean;
-        showUtilityBar: boolean;
-    };
-    parameters: {
-        layout: string;
-        'web-component': {
-            render: string;
-        };
-        html: {
-            render: string;
-        };
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-};
+export declare const ApplicationShell: StoryFunction<ApplicationShellProps>;

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

@@ -6,7 +6,7 @@ export declare class ApplicationShell {
     isNavOpenAtStartup: boolean;
     navOpen: boolean;
     navToggleHandler(): void;
-    navWithHandler(event: any): void;
+    navWithHandler(event: CustomEvent<string>): void;
     onWindowResize(): void;
     connectedCallback(): void;
     componentWillLoad(): void;

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

@@ -1,4 +1,20 @@
+import type { StoryFunction } from "../../../../.storybook/utils/story-function";
+interface AvatarArgs {
+    variant: 'default' | 'profile' | 'group' | 'with-text';
+    src: string;
+    name: string;
+    subText: string;
+    size?: 'md' | 'sm';
+    color?: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';
+    status?: AvatarStatusStory;
+    href: boolean;
+    disabled: boolean;
+    groupData: typeof defaultGroupData;
+}
 declare const _default: {
+    tags: string[];
+    beforeEach(): void;
+    play({ canvasElement }: import("storybook/internal/csf").PlayFunctionContext<import("@storybook/web-components").WebComponentsRenderer, AvatarArgs>): Promise<void>;
     title: string;
 };
 export default _default;
@@ -20,119 +36,4 @@ declare const defaultGroupData: ({
     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: {
-    (args: AvatarArgs): string;
-    argTypes: {
-        variant: {
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-        size: {
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-        color: {
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-        status: {
-            options: string[];
-            control: {
-                type: string;
-            };
-            description: string;
-        };
-        src: {
-            control: {
-                type: string;
-            };
-        };
-        name: {
-            control: {
-                type: string;
-            };
-        };
-        subText: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
-        href: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
-        disabled: {
-            control: {
-                type: string;
-            };
-        };
-        groupData: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
-    };
-    args: {
-        variant: "default";
-        src: string;
-        name: string;
-        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: {
-        '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";
-        };
-    };
-};
+export declare const Avatar: StoryFunction<AvatarArgs>;

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

@@ -1,5 +1,7 @@
 declare const _default: {
     title: string;
+    tags: string[];
+    beforeEach(): void;
 };
 export default _default;
 export declare const Backdrop: {

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

@@ -10,7 +10,11 @@ interface BadgeArgs {
     bordered: boolean;
 }
 declare const _default: {
+    tags: string[];
+    beforeEach(): void;
+    play({ canvasElement }: import("storybook/internal/csf").PlayFunctionContext<import("@storybook/web-components").WebComponentsRenderer, BadgeArgs>): Promise<void>;
     title: string;
+    component: string;
     argTypes: {
         variant: {
             options: ("purple" | "green" | "yellow" | "orange" | "gray" | "red" | "blue" | "success" | "warning" | "inactive" | "error")[];
@@ -65,6 +69,9 @@ export declare const Badge: {
         bordered: false;
     };
     parameters: {
+        htmlSnippet: {
+            mode: string;
+        };
         'web-component': {
             render: string;
         };

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

@@ -1,5 +1,14 @@
+import type { StoryFunction } from "../../../../.storybook/utils/story-function";
+interface BreadcrumbsArgs {
+    first: string;
+    second: string;
+    third: string;
+    items: number;
+}
 declare const _default: {
     title: string;
+    tags: string[];
+    beforeEach(): void;
     argTypes: {
         items: {
             options: number[];
@@ -28,30 +37,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Breadcrumbs: {
-    ({ first, second, third, items }: {
-        first: any;
-        second: any;
-        third: any;
-        items: any;
-    }): string;
-    args: {
-        first: string;
-        second: string;
-        third: string;
-        items: number;
-    };
-    parameters: {
-        layout: string;
-        'web-component': {
-            render: string;
-        };
-        html: {
-            render: string;
-            design: {
-                type: string;
-                url: string;
-            };
-        };
-    };
-};
+export declare const Breadcrumbs: StoryFunction<BreadcrumbsArgs>;

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

@@ -1,5 +1,6 @@
 declare const _default: {
     title: string;
+    component: string;
     tags: string[];
     beforeEach(): void;
     argTypes: {
@@ -118,6 +119,9 @@ export declare const Button: {
     };
     parameters: {
         layout: string;
+        htmlSnippet: {
+            mode: string;
+        };
         'web-component': {
             render: string;
         };