@coveo/atomic 3.47.1 → 3.49.0

package/dist/atomic/components/components/insight/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.js

@@ -0,0 +1,250 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var AtomicInsightUserActionsTimeline_1;
+import { ArrayValue, Schema, StringValue } from '@coveo/bueno';
+import { buildUserActions as buildInsightUserActions, } from '@coveo/headless/insight';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { renderButton } from "../../common/button";
+import { renderNoItemsContainer } from "../../common/no-items/container";
+import { renderMagnifyingGlass } from "../../common/no-items/magnifying-glass";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller";
+import { bindStateToController } from "../../../decorators/bind-state";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+const ArrowDownIcon = "<svg width=\"8\" height=\"14\" viewBox=\"0 0 8 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4 0.5L4 12.5\" stroke=\"#1372EC\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M7.5 9.5L4 13.5L0.5 9.5\" stroke=\"#1372EC\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
+const ArrowUpIcon = "<svg width=\"8\" height=\"14\" viewBox=\"0 0 8 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4 13.5L4 1.5\" stroke=\"#1372EC\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    <path d=\"M0.5 4.5L4 0.5L7.5 4.5\" stroke=\"#1372EC\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
+/**
+ * The `atomic-insight-user-actions-timeline` component displays all the actions performed by a user around the time they created a case.
+ * The actions are grouped into multiple sessions, including the session during which the case was created,
+ * the sessions preceding the case creation, and the sessions following the case creation.
+ *
+ * **Note:** This is an internal component used through the `atomic-insight-user-actions-toggle`. Do not use directly.
+ *
+ * @part toggle-following-sessions - The button to toggle the visibility of following sessions.
+ * @part toggle-following-sessions-icon - The icon displayed on the toggle following sessions button.
+ * @part toggle-preceding-sessions - The button to toggle the visibility of preceding sessions.
+ * @part toggle-preceding-sessions-icon - The icon displayed on the toggle preceding sessions button.
+ *
+ * @cssprop --atomic-user-actions-timeline-separator-background - Background color of the separator lines between sessions.
+ */
+let AtomicInsightUserActionsTimeline = AtomicInsightUserActionsTimeline_1 = class AtomicInsightUserActionsTimeline extends LitElement {
+    constructor() {
+        super();
+        /**
+         * The names of custom events to exclude.
+         */
+        this.excludedCustomActions = [];
+        this.followingSessionsAreVisible = false;
+        this.precedingSessionsAreVisible = false;
+        new ValidatePropsController(this, () => ({
+            userId: this.userId,
+            ticketCreationDateTime: this.ticketCreationDateTime,
+            excludedCustomActions: this.excludedCustomActions,
+        }), AtomicInsightUserActionsTimeline_1.propsSchema, false);
+    }
+    initialize() {
+        this.userActions = buildInsightUserActions(this.bindings.engine, {
+            options: {
+                ticketCreationDate: this.ticketCreationDateTime,
+                excludedCustomActions: this.excludedCustomActions,
+            },
+        });
+        this.userActions.fetchUserActions(this.userId);
+    }
+    toggleFollowingSessions() {
+        this.followingSessionsAreVisible = !this.followingSessionsAreVisible;
+    }
+    togglePrecedingSessions() {
+        this.precedingSessionsAreVisible = !this.precedingSessionsAreVisible;
+    }
+    renderSessions(sessions, renderSeparator, testId) {
+        if (!sessions) {
+            return nothing;
+        }
+        return html `
+      <div>
+        ${sessions.map(({ actions, start }) => html `
+            <div class="mt-4">
+              <atomic-insight-user-actions-session
+                .startTimestamp=${start}
+                .userActions=${actions}
+                data-testid=${testId}
+              ></atomic-insight-user-actions-session>
+            </div>
+            ${renderSeparator ? renderSeparator() : nothing}
+          `)}
+      </div>
+    `;
+    }
+    renderToggleFollowingSessionsButton() {
+        const btnClasses = 'flex items-center text-left p-2 text-sm max-w-full';
+        const iconClasses = 'h-3 w-3 mr-1';
+        const label = this.followingSessionsAreVisible
+            ? this.bindings.i18n.t('hide-following-sessions')
+            : this.bindings.i18n.t('show-following-sessions');
+        const icon = this.followingSessionsAreVisible ? ArrowDownIcon : ArrowUpIcon;
+        return html `
+      <div class="flex justify-center p-2">
+        ${renderButton({
+            props: {
+                style: 'text-primary',
+                part: 'toggle-following-sessions',
+                class: btnClasses,
+                ariaLabel: label,
+                onClick: this.toggleFollowingSessions.bind(this),
+            },
+        })(html `
+          <atomic-icon
+            part="toggle-following-sessions-icon"
+            class=${iconClasses}
+            .icon=${icon}
+          ></atomic-icon>
+          <span class="truncate">${label}</span>
+        `)}
+      </div>
+    `;
+    }
+    renderTogglePrecedingSessionsButton() {
+        const btnClasses = 'flex items-center text-left p-2 text-sm max-w-full';
+        const iconClasses = 'h-3 w-3 mr-1';
+        const label = this.precedingSessionsAreVisible
+            ? this.bindings.i18n.t('hide-preceding-sessions')
+            : this.bindings.i18n.t('show-preceding-sessions');
+        const icon = this.precedingSessionsAreVisible ? ArrowUpIcon : ArrowDownIcon;
+        return html `
+      <div class="flex justify-center p-2">
+        ${renderButton({
+            props: {
+                style: 'text-primary',
+                part: 'toggle-preceding-sessions',
+                class: btnClasses,
+                ariaLabel: label,
+                onClick: this.togglePrecedingSessions.bind(this),
+            },
+        })(html `
+          <atomic-icon
+            part="toggle-preceding-sessions-icon"
+            class=${iconClasses}
+            .icon=${icon}
+          ></atomic-icon>
+          <span class="truncate">${label}</span>
+        `)}
+      </div>
+    `;
+    }
+    renderFollowingSessionsSection() {
+        if (!this.userActionsState.timeline?.followingSessions?.length) {
+            return nothing;
+        }
+        return html `
+      ${this.renderToggleFollowingSessionsButton()}
+      <div class="separator mx-1 rounded"></div>
+      ${when(this.followingSessionsAreVisible, () => this.renderSessions(this.userActionsState.timeline?.followingSessions, () => html `<div class="separator mx-1 mt-4 rounded"></div>`, 'following-session'))}
+    `;
+    }
+    renderPrecedingSessionsSection() {
+        if (!this.userActionsState.timeline?.precedingSessions?.length) {
+            return nothing;
+        }
+        return html `
+      <div class="separator mx-1 mt-4 rounded"></div>
+      ${when(this.precedingSessionsAreVisible, () => this.renderSessions(this.userActionsState.timeline?.precedingSessions, () => html `<div class="separator mx-1 mt-4 rounded"></div>`, 'preceding-session'))}
+      ${this.renderTogglePrecedingSessionsButton()}
+    `;
+    }
+    renderTimeline() {
+        const session = this.userActionsState.timeline?.session;
+        if (!session) {
+            return nothing;
+        }
+        return html `
+      <div>
+        ${this.renderFollowingSessionsSection()}
+        <div class="mt-4">
+          <atomic-insight-user-actions-session
+            .startTimestamp=${session.start}
+            .userActions=${session.actions}
+            data-testid="active-session"
+          ></atomic-insight-user-actions-session>
+        </div>
+        ${this.renderPrecedingSessionsSection()}
+      </div>
+    `;
+    }
+    renderNoUserActionsScreen() {
+        return html `
+      <div class="my-6 py-3" data-testid="user-actions-error">
+        ${renderNoItemsContainer()(html `
+          ${renderMagnifyingGlass()}
+          <div class="my-2 max-w-full text-center text-2xl font-light">
+            ${this.bindings.i18n.t('no-user-actions-available')}
+          </div>
+          <div class="text-neutral-dark my-2 text-center text-lg">
+            ${this.bindings.i18n.t('no-user-actions-associated-with-params')}
+          </div>
+        `)}
+      </div>
+    `;
+    }
+    render() {
+        const areUserActionsAvailable = this.userActionsState?.timeline?.session;
+        const hasError = this.userActionsState?.error;
+        if (areUserActionsAvailable && !hasError) {
+            return this.renderTimeline();
+        }
+        return this.renderNoUserActionsScreen();
+    }
+};
+AtomicInsightUserActionsTimeline.styles = css``;
+AtomicInsightUserActionsTimeline.propsSchema = new Schema({
+    userId: new StringValue({ required: true, emptyAllowed: false }),
+    ticketCreationDateTime: new StringValue({
+        required: true,
+        emptyAllowed: false,
+    }),
+    excludedCustomActions: new ArrayValue({
+        each: new StringValue({}),
+        required: false,
+    }),
+});
+__decorate([
+    state()
+], AtomicInsightUserActionsTimeline.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsTimeline.prototype, "error", void 0);
+__decorate([
+    bindStateToController('userActions'),
+    state()
+], AtomicInsightUserActionsTimeline.prototype, "userActionsState", void 0);
+__decorate([
+    property({ type: String, attribute: 'user-id' })
+], AtomicInsightUserActionsTimeline.prototype, "userId", void 0);
+__decorate([
+    property({ type: String, attribute: 'ticket-creation-date-time' })
+], AtomicInsightUserActionsTimeline.prototype, "ticketCreationDateTime", void 0);
+__decorate([
+    property({ type: Array, attribute: 'excluded-custom-actions' })
+], AtomicInsightUserActionsTimeline.prototype, "excludedCustomActions", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsTimeline.prototype, "followingSessionsAreVisible", void 0);
+__decorate([
+    state()
+], AtomicInsightUserActionsTimeline.prototype, "precedingSessionsAreVisible", void 0);
+__decorate([
+    bindingGuard()
+], AtomicInsightUserActionsTimeline.prototype, "render", null);
+AtomicInsightUserActionsTimeline = AtomicInsightUserActionsTimeline_1 = __decorate([
+    customElement('atomic-insight-user-actions-timeline'),
+    bindings(),
+    withTailwindStyles
+], AtomicInsightUserActionsTimeline);
+export { AtomicInsightUserActionsTimeline };

package/dist/atomic/components/components/insight/atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.js

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import "../atomic-insight-user-actions-modal/atomic-insight-user-actions-modal";
 import { Schema, StringValue } from '@coveo/bueno';
 import { buildUserActions as buildInsightUserActions, } from '@coveo/headless/insight';
 import { html, LitElement } from 'lit';

package/dist/atomic/components/components/insight/index.js

@@ -1,6 +1,7 @@
 // Auto-generated file
 export { AtomicInsightEditToggle } from './atomic-insight-edit-toggle/atomic-insight-edit-toggle.js';
 export { AtomicInsightFacet } from './atomic-insight-facet/atomic-insight-facet.js';
+export { AtomicInsightFoldedResultList } from './atomic-insight-folded-result-list/atomic-insight-folded-result-list.js';
 export { AtomicInsightFullSearchButton } from './atomic-insight-full-search-button/atomic-insight-full-search-button.js';
 export { AtomicInsightGenerateAnswerButton } from './atomic-insight-generate-answer-button/atomic-insight-generate-answer-button.js';
 export { AtomicInsightHistoryToggle } from './atomic-insight-history-toggle/atomic-insight-history-toggle.js';
@@ -11,12 +12,22 @@ export { AtomicInsightNumericFacet } from './atomic-insight-numeric-facet/atomic
 export { AtomicInsightPager } from './atomic-insight-pager/atomic-insight-pager.js';
 export { AtomicInsightQueryError } from './atomic-insight-query-error/atomic-insight-query-error.js';
 export { AtomicInsightQuerySummary } from './atomic-insight-query-summary/atomic-insight-query-summary.js';
+export { AtomicInsightRefineModal } from './atomic-insight-refine-modal/atomic-insight-refine-modal.js';
 export { AtomicInsightRefineToggle } from './atomic-insight-refine-toggle/atomic-insight-refine-toggle.js';
 export { AtomicInsightResult } from './atomic-insight-result/atomic-insight-result.js';
+export { AtomicInsightResultActionBar } from './atomic-insight-result-action-bar/atomic-insight-result-action-bar.js';
+export { AtomicInsightResultAttachToCaseIndicator } from './atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.js';
 export { AtomicInsightResultChildren } from './atomic-insight-result-children/atomic-insight-result-children.js';
+export { AtomicInsightResultList } from './atomic-insight-result-list/atomic-insight-result-list.js';
+export { AtomicInsightResultQuickviewAction } from './atomic-insight-result-quickview-action/atomic-insight-result-quickview-action.js';
 export { AtomicInsightResultTemplate } from './atomic-insight-result-template/atomic-insight-result-template.js';
 export { AtomicInsightSearchBox } from './atomic-insight-search-box/atomic-insight-search-box.js';
+export { AtomicInsightSmartSnippet } from './atomic-insight-smart-snippet/atomic-insight-smart-snippet.js';
 export { AtomicInsightSmartSnippetFeedbackModal } from './atomic-insight-smart-snippet-feedback-modal/atomic-insight-smart-snippet-feedback-modal.js';
+export { AtomicInsightSmartSnippetSuggestions } from './atomic-insight-smart-snippet-suggestions/atomic-insight-smart-snippet-suggestions.js';
 export { AtomicInsightTab } from './atomic-insight-tab/atomic-insight-tab.js';
 export { AtomicInsightTabs } from './atomic-insight-tabs/atomic-insight-tabs.js';
+export { AtomicInsightUserActionsModal } from './atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.js';
+export { AtomicInsightUserActionsSession } from './atomic-insight-user-actions-session/atomic-insight-user-actions-session.js';
+export { AtomicInsightUserActionsTimeline } from './atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.js';
 export { AtomicInsightUserActionsToggle } from './atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.js';

package/dist/atomic/components/components/insight/lazy-index.js

@@ -2,6 +2,7 @@
 export default {
     'atomic-insight-edit-toggle': async () => await import('./atomic-insight-edit-toggle/atomic-insight-edit-toggle.js'),
     'atomic-insight-facet': async () => await import('./atomic-insight-facet/atomic-insight-facet.js'),
+    'atomic-insight-folded-result-list': async () => await import('./atomic-insight-folded-result-list/atomic-insight-folded-result-list.js'),
     'atomic-insight-full-search-button': async () => await import('./atomic-insight-full-search-button/atomic-insight-full-search-button.js'),
     'atomic-insight-generate-answer-button': async () => await import('./atomic-insight-generate-answer-button/atomic-insight-generate-answer-button.js'),
     'atomic-insight-history-toggle': async () => await import('./atomic-insight-history-toggle/atomic-insight-history-toggle.js'),
@@ -12,13 +13,23 @@ export default {
     'atomic-insight-pager': async () => await import('./atomic-insight-pager/atomic-insight-pager.js'),
     'atomic-insight-query-error': async () => await import('./atomic-insight-query-error/atomic-insight-query-error.js'),
     'atomic-insight-query-summary': async () => await import('./atomic-insight-query-summary/atomic-insight-query-summary.js'),
+    'atomic-insight-refine-modal': async () => await import('./atomic-insight-refine-modal/atomic-insight-refine-modal.js'),
     'atomic-insight-refine-toggle': async () => await import('./atomic-insight-refine-toggle/atomic-insight-refine-toggle.js'),
     'atomic-insight-result': async () => await import('./atomic-insight-result/atomic-insight-result.js'),
+    'atomic-insight-result-action-bar': async () => await import('./atomic-insight-result-action-bar/atomic-insight-result-action-bar.js'),
+    'atomic-insight-result-attach-to-case-indicator': async () => await import('./atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.js'),
     'atomic-insight-result-children': async () => await import('./atomic-insight-result-children/atomic-insight-result-children.js'),
+    'atomic-insight-result-list': async () => await import('./atomic-insight-result-list/atomic-insight-result-list.js'),
+    'atomic-insight-result-quickview-action': async () => await import('./atomic-insight-result-quickview-action/atomic-insight-result-quickview-action.js'),
     'atomic-insight-result-template': async () => await import('./atomic-insight-result-template/atomic-insight-result-template.js'),
     'atomic-insight-search-box': async () => await import('./atomic-insight-search-box/atomic-insight-search-box.js'),
+    'atomic-insight-smart-snippet': async () => await import('./atomic-insight-smart-snippet/atomic-insight-smart-snippet.js'),
     'atomic-insight-smart-snippet-feedback-modal': async () => await import('./atomic-insight-smart-snippet-feedback-modal/atomic-insight-smart-snippet-feedback-modal.js'),
+    'atomic-insight-smart-snippet-suggestions': async () => await import('./atomic-insight-smart-snippet-suggestions/atomic-insight-smart-snippet-suggestions.js'),
     'atomic-insight-tab': async () => await import('./atomic-insight-tab/atomic-insight-tab.js'),
     'atomic-insight-tabs': async () => await import('./atomic-insight-tabs/atomic-insight-tabs.js'),
+    'atomic-insight-user-actions-modal': async () => await import('./atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.js'),
+    'atomic-insight-user-actions-session': async () => await import('./atomic-insight-user-actions-session/atomic-insight-user-actions-session.js'),
+    'atomic-insight-user-actions-timeline': async () => await import('./atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.js'),
     'atomic-insight-user-actions-toggle': async () => await import('./atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.js'),
 };

package/dist/atomic/components/components/ipx/atomic-ipx-body/ipx-body-styles.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const ipxBodyStyles = css`.ipx-body-container{height:inherit;max-height:calc(100vh - 4.25rem)}.ipx-body-scrollbar::-webkit-scrollbar{width:.8rem}.ipx-body-scrollbar::-webkit-scrollbar-track{background:var(--atomic-background)}.ipx-body-scrollbar::-webkit-scrollbar-thumb{background:var(--atomic-primary);border:.15rem solid var(--atomic-background);border-radius:100vh}.ipx-body-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--atomic-primary-light)}.ipx-body-scrollbar{scrollbar-color:var(--atomic-primary) var(--atomic-background);scrollbar-width:auto}`;

package/dist/atomic/components/components/ipx/atomic-ipx-body/ipx-body.js

@@ -0,0 +1,49 @@
+import { html, nothing } from 'lit';
+export const renderIpxBody = ({ props }) => {
+    const visibilityClass = props.visibility === 'embedded'
+        ? ''
+        : props.visibility === 'open'
+            ? 'visible'
+            : 'invisible';
+    return html `
+    <article
+      part="container"
+      class="ipx-body-container bg-background box-border flex flex-col justify-between overflow-hidden rounded ${visibilityClass}"
+      @animationend=${() => props.onAnimationEnd?.()}
+    >
+      <header
+        part="header-wrapper"
+        class="bg-neutral-light grid w-full items-center px-6 pt-6"
+      >
+        <div part="header" class="min-w-0 font-bold">
+          ${props.header ?? nothing}
+        </div>
+      </header>
+      <hr part="header-ruler" class="border-neutral border-0 border-t" />
+      <div
+        part="body-wrapper"
+        class="ipx-body-scrollbar flex w-full grow flex-col overflow-auto px-6 py-4"
+        tabindex="0"
+        role="region"
+        aria-label=${props.i18n.t('ipx-body-content')}
+      >
+        <div part="body" class="w-full">
+          ${props.body ?? nothing}
+        </div>
+      </div>
+      ${props.displayFooterSlot !== false ? renderFooter(props.footer ?? nothing) : nothing}
+    </article>
+  `;
+};
+function renderFooter(footerContent) {
+    return html `
+    <footer
+      part="footer-wrapper"
+      class="border-neutral bg-neutral-light z-10 flex w-full flex-col items-stretch border-t px-7 py-4"
+    >
+      <div part="footer">
+        ${footerContent}
+      </div>
+    </footer>
+  `;
+}

package/dist/atomic/components/components/ipx/atomic-ipx-embedded/atomic-ipx-embedded.js

@@ -6,7 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { renderIpxBody } from "../atomic-ipx-body/ipx-body.js";
+import { ipxBodyStyles } from "../atomic-ipx-body/ipx-body-styles.js";
+import { bindingGuard } from "../../../decorators/binding-guard.js";
 import { bindings } from "../../../decorators/bindings.js";
+import { errorGuard } from "../../../decorators/error-guard.js";
 import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
 import { updateBreakpoints } from "../../../utils/replace-breakpoint-utils.js";
 import { once, randomID } from "../../../utils/utils.js";
@@ -18,6 +22,14 @@ import { once, randomID } from "../../../utils/utils.js";
  * @slot footer - Content to display in the footer section.
  *
  * @part backdrop - The backdrop container element.
+ * @part container - The content container element.
+ * @part header-wrapper - The wrapper around the header section.
+ * @part header - The header content container.
+ * @part header-ruler - The horizontal rule separating header and body.
+ * @part body-wrapper - The wrapper around the body section (scrollable).
+ * @part body - The body content container.
+ * @part footer-wrapper - The wrapper around the footer section.
+ * @part footer - The footer content container.
  */
 let AtomicIpxEmbedded = class AtomicIpxEmbedded extends LitElement {
     constructor() {
@@ -43,16 +55,22 @@ let AtomicIpxEmbedded = class AtomicIpxEmbedded extends LitElement {
         this.updateBreakpoints();
         return html `
       <div part="backdrop">
-        <atomic-ipx-body .displayFooterSlot=${this.hasFooterSlotElements}>
-          <slot name="header" slot="header"></slot>
-          <slot name="body" slot="body"></slot>
-          <slot name="footer" slot="footer"></slot>
-        </atomic-ipx-body>
+        ${renderIpxBody({
+            props: {
+                i18n: this.bindings.i18n,
+                visibility: 'embedded',
+                displayFooterSlot: this.hasFooterSlotElements,
+                header: html `<slot name="header"></slot>`,
+                body: html `<slot name="body"></slot>`,
+                footer: html `<slot name="footer"></slot>`,
+            },
+        })}
       </div>
     `;
     }
 };
 AtomicIpxEmbedded.styles = [
+    ipxBodyStyles,
     css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */:host{box-shadow:0 0 .5rem rgba(0,0,0,.5);height:inherit}[part=backdrop]{height:inherit;inset:auto 3rem 4.25rem auto;pointer-events:auto}`,
 ];
 __decorate([
@@ -67,6 +85,10 @@ __decorate([
 __decorate([
     state()
 ], AtomicIpxEmbedded.prototype, "hasFooterSlotElements", void 0);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicIpxEmbedded.prototype, "render", null);
 AtomicIpxEmbedded = __decorate([
     customElement('atomic-ipx-embedded'),
     bindings(),

package/dist/atomic/components/components/ipx/atomic-ipx-modal/atomic-ipx-modal.js

@@ -0,0 +1,158 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { renderIpxBody } from "../atomic-ipx-body/ipx-body";
+import { ipxBodyStyles } from "../atomic-ipx-body/ipx-body-styles";
+import { booleanConverter } from "../../../converters/boolean-converter";
+import { bindingGuard } from "../../../decorators/binding-guard";
+import { bindings } from "../../../decorators/bindings";
+import { errorGuard } from "../../../decorators/error-guard";
+import { watch } from "../../../decorators/watch";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
+import { InitializeBindingsMixin } from "../../../mixins/bindings-mixin";
+import { buildCustomEvent } from "../../../utils/event-utils";
+import { updateBreakpoints } from "../../../utils/replace-breakpoint-utils";
+import { once, randomID } from "../../../utils/utils";
+/**
+ * The `atomic-ipx-modal` component is a modal component used for the In-Product Experience use case.
+ *
+ * It provides a modal dialog that can display header, body, and footer content through slots.
+ * The modal can be controlled through the `isOpen` property and emits events when animations complete.
+ *
+ * @part atomic-ipx-modal - The main modal container.
+ * @part backdrop - The backdrop behind the modal.
+ * @part container - The content container element.
+ * @part header-wrapper - The wrapper around the header section.
+ * @part header - The header content container.
+ * @part header-ruler - The horizontal rule separating header and body.
+ * @part body-wrapper - The wrapper around the body section (scrollable).
+ * @part body - The body content container.
+ * @part footer-wrapper - The wrapper around the footer section.
+ * @part footer - The footer content container.
+ *
+ * @slot header - The header content of the modal.
+ * @slot body - The main body content of the modal.
+ * @slot footer - The footer content of the modal (optional).
+ *
+ * @cssprop [--atomic-ipx-width=31.25rem] - The width of the modal.
+ * @cssprop [--atomic-ipx-height=43.75rem] - The height of the modal.
+ *
+ * @event animationEnded - Emitted when the modal animation ends.
+ */
+let AtomicIpxModal = class AtomicIpxModal extends InitializeBindingsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the modal is open.
+         * Reflected to allow external consumers to observe the state via CSS attribute selectors.
+         */
+        this.isOpen = false;
+        this.hasFooterSlotElements = true;
+        this.updateBreakpoints = once(() => updateBreakpoints(this));
+        this.onWindowTouchMove = (e) => {
+            if (this.isOpen) {
+                e.preventDefault();
+            }
+        };
+        this.handleAnimationEnded = () => {
+            this.dispatchEvent(buildCustomEvent('animationEnded'));
+        };
+    }
+    initialize() { }
+    connectedCallback() {
+        super.connectedCallback();
+        document.body.addEventListener('touchmove', this.onWindowTouchMove, {
+            passive: false,
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.body.removeEventListener('touchmove', this.onWindowTouchMove);
+    }
+    watchToggleOpen() {
+        const modalOpenedClass = 'atomic-ipx-modal-opened';
+        if (this.isOpen) {
+            document.body.classList.add(modalOpenedClass);
+            this.bindings?.interfaceElement?.classList.add(modalOpenedClass);
+            return;
+        }
+        document.body.classList.remove(modalOpenedClass);
+        this.bindings?.interfaceElement?.classList.remove(modalOpenedClass);
+    }
+    willUpdate() {
+        this.hasFooterSlotElements = !!this.querySelector('[slot="footer"]');
+    }
+    firstUpdated() {
+        const id = this.id || randomID('atomic-ipx-modal-');
+        this.id = id;
+        this.setAttribute('part', 'atomic-ipx-modal');
+        this.watchToggleOpen();
+    }
+    updateHostClasses() {
+        this.classList.toggle('open', this.isOpen);
+    }
+    render() {
+        this.updateBreakpoints();
+        this.updateHostClasses();
+        return html `
+      <div part="backdrop">
+        ${renderIpxBody({
+            props: {
+                i18n: this.bindings.i18n,
+                visibility: this.isOpen ? 'open' : 'closed',
+                displayFooterSlot: this.hasFooterSlotElements,
+                onAnimationEnd: this.handleAnimationEnded,
+                header: html `<slot name="header"></slot>`,
+                body: html `<slot name="body"></slot>`,
+                footer: html `<slot name="footer"></slot>`,
+            },
+        })}
+      </div>
+    `;
+    }
+};
+AtomicIpxModal.styles = [
+    ipxBodyStyles,
+    css`/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */atomic-focus-trap{display:contents;height:inherit}:host{box-shadow:0 0 .5rem rgba(0,0,0,.5);display:none;height:var(--atomic-ipx-height,43.75rem);inset:auto 3rem 4.25rem auto;max-height:calc(100vh - 4.25rem);max-width:calc(100vw - 3rem);position:fixed;width:var(--atomic-ipx-width,31.25rem);z-index:1000;[part=backdrop]{height:inherit;pointer-events:none}}:host(.open){display:block;[part=backdrop]{height:inherit;max-height:calc(100vh - 4.25rem);pointer-events:auto}}`,
+];
+__decorate([
+    state()
+], AtomicIpxModal.prototype, "bindings", void 0);
+__decorate([
+    state()
+], AtomicIpxModal.prototype, "error", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], AtomicIpxModal.prototype, "source", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], AtomicIpxModal.prototype, "container", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'is-open',
+        converter: booleanConverter,
+    })
+], AtomicIpxModal.prototype, "isOpen", void 0);
+__decorate([
+    state()
+], AtomicIpxModal.prototype, "hasFooterSlotElements", void 0);
+__decorate([
+    watch('isOpen')
+], AtomicIpxModal.prototype, "watchToggleOpen", null);
+__decorate([
+    bindingGuard(),
+    errorGuard()
+], AtomicIpxModal.prototype, "render", null);
+AtomicIpxModal = __decorate([
+    customElement('atomic-ipx-modal'),
+    bindings(),
+    withTailwindStyles
+], AtomicIpxModal);
+export { AtomicIpxModal };