@coveo/atomic 3.54.0 → 3.55.2

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

@@ -0,0 +1,127 @@
+import "../atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.js";
+import { Schema, StringValue } from "@coveo/bueno";
+import { buildUserActions } from "@coveo/headless/insight";
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { renderIconButton } from "../../common/icon-button.js";
+import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller.js";
+import { bindStateToController } from "../../../decorators/bind-state.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 clock from "../../../images/clock.js";
+function _ts_decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) 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;
+}
+function _ts_metadata(k, v) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+}
+class AtomicInsightUserActionsToggle extends LitElement {
+    initialize() {
+        this.userActions = buildUserActions(this.bindings.engine, {
+            options: {
+                ticketCreationDate: this.ticketCreationDateTime,
+                excludedCustomActions: this.excludedCustomActions
+            }
+        });
+    }
+    enableModal() {
+        if (this.modalRef) this.modalRef.isOpen = true;
+        this.userActions.logOpenUserActions();
+    }
+    loadModal() {
+        if (this.modalRef) return;
+        this.modalRef = document.createElement('atomic-insight-user-actions-modal');
+        this.insertAdjacentElement('beforebegin', this.modalRef);
+        this.modalRef.openButton = this.buttonRef;
+        this.modalRef.userId = this.userId;
+        this.modalRef.ticketCreationDateTime = this.ticketCreationDateTime;
+        this.modalRef.excludedCustomActions = this.excludedCustomActions;
+    }
+    render() {
+        return html`${renderIconButton({
+            props: {
+                partPrefix: 'insight-user-actions-toggle',
+                style: 'outline-neutral',
+                icon: clock,
+                ariaLabel: this.bindings.i18n.t('user-actions'),
+                onClick: ()=>this.enableModal(),
+                title: this.bindings.i18n.t('user-actions'),
+                buttonRef: (button)=>{
+                    if (!button) return;
+                    this.buttonRef = button;
+                    this.loadModal();
+                }
+            }
+        })}`;
+    }
+    constructor(){
+        super(), this.excludedCustomActions = [];
+        new ValidatePropsController(this, ()=>({
+                userId: this.userId,
+                ticketCreationDateTime: this.ticketCreationDateTime
+            }), new Schema({
+            userId: new StringValue({
+                required: true,
+                emptyAllowed: false
+            }),
+            ticketCreationDateTime: new StringValue({
+                required: true,
+                emptyAllowed: false
+            })
+        }), false);
+    }
+}
+_ts_decorate([
+    state(),
+    _ts_metadata("design:type", "u" < typeof InsightBindings ? Object : InsightBindings)
+], AtomicInsightUserActionsToggle.prototype, "bindings", void 0);
+_ts_decorate([
+    state(),
+    _ts_metadata("design:type", "u" < typeof Error ? Object : Error)
+], AtomicInsightUserActionsToggle.prototype, "error", void 0);
+_ts_decorate([
+    bindStateToController('userActions'),
+    state(),
+    _ts_metadata("design:type", "u" < typeof InsightUserActionsState ? Object : InsightUserActionsState)
+], AtomicInsightUserActionsToggle.prototype, "userActionsState", void 0);
+_ts_decorate([
+    property({
+        type: String,
+        attribute: 'user-id'
+    }),
+    _ts_metadata("design:type", String)
+], AtomicInsightUserActionsToggle.prototype, "userId", void 0);
+_ts_decorate([
+    property({
+        type: String,
+        attribute: 'ticket-creation-date-time'
+    }),
+    _ts_metadata("design:type", String)
+], AtomicInsightUserActionsToggle.prototype, "ticketCreationDateTime", void 0);
+_ts_decorate([
+    property({
+        type: Array,
+        attribute: 'excluded-custom-actions'
+    }),
+    _ts_metadata("design:type", Array)
+], AtomicInsightUserActionsToggle.prototype, "excludedCustomActions", void 0);
+_ts_decorate([
+    errorGuard(),
+    bindingGuard(),
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", []),
+    _ts_metadata("design:returntype", void 0)
+], AtomicInsightUserActionsToggle.prototype, "render", null);
+AtomicInsightUserActionsToggle = _ts_decorate([
+    customElement('atomic-insight-user-actions-toggle'),
+    bindings(),
+    withTailwindStyles,
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", [])
+], AtomicInsightUserActionsToggle);
+export { AtomicInsightUserActionsToggle };

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

@@ -0,0 +1,38 @@
+import { AtomicInsightEditToggle } from "./atomic-insight-edit-toggle/atomic-insight-edit-toggle.js";
+import { AtomicInsightFacet } from "./atomic-insight-facet/atomic-insight-facet.js";
+import { AtomicInsightFoldedResultList } from "./atomic-insight-folded-result-list/atomic-insight-folded-result-list.js";
+import { AtomicInsightFullSearchButton } from "./atomic-insight-full-search-button/atomic-insight-full-search-button.js";
+import { AtomicInsightGenerateAnswerButton } from "./atomic-insight-generate-answer-button/atomic-insight-generate-answer-button.js";
+import { AtomicInsightGeneratedAnswer } from "./atomic-insight-generated-answer/atomic-insight-generated-answer.js";
+import { AtomicInsightHistoryToggle } from "./atomic-insight-history-toggle/atomic-insight-history-toggle.js";
+import { AtomicInsightInterface } from "./atomic-insight-interface/atomic-insight-interface.js";
+import { AtomicInsightLayout } from "./atomic-insight-layout/atomic-insight-layout.js";
+import { AtomicInsightNoResults } from "./atomic-insight-no-results/atomic-insight-no-results.js";
+import { AtomicInsightNumericFacet } from "./atomic-insight-numeric-facet/atomic-insight-numeric-facet.js";
+import { AtomicInsightPager } from "./atomic-insight-pager/atomic-insight-pager.js";
+import { AtomicInsightQueryError } from "./atomic-insight-query-error/atomic-insight-query-error.js";
+import { AtomicInsightQuerySummary } from "./atomic-insight-query-summary/atomic-insight-query-summary.js";
+import { AtomicInsightRefineModal } from "./atomic-insight-refine-modal/atomic-insight-refine-modal.js";
+import { AtomicInsightRefineToggle } from "./atomic-insight-refine-toggle/atomic-insight-refine-toggle.js";
+import { AtomicInsightResult } from "./atomic-insight-result/atomic-insight-result.js";
+import { AtomicInsightResultAction } from "./atomic-insight-result-action/atomic-insight-result-action.js";
+import { AtomicInsightResultActionBar } from "./atomic-insight-result-action-bar/atomic-insight-result-action-bar.js";
+import { AtomicInsightResultAttachToCaseAction } from "./atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.js";
+import { AtomicInsightResultAttachToCaseIndicator } from "./atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.js";
+import { AtomicInsightResultChildren } from "./atomic-insight-result-children/atomic-insight-result-children.js";
+import { AtomicInsightResultChildrenTemplate } from "./atomic-insight-result-children-template/atomic-insight-result-children-template.js";
+import { AtomicInsightResultList } from "./atomic-insight-result-list/atomic-insight-result-list.js";
+import { AtomicInsightResultQuickviewAction } from "./atomic-insight-result-quickview-action/atomic-insight-result-quickview-action.js";
+import { AtomicInsightResultTemplate } from "./atomic-insight-result-template/atomic-insight-result-template.js";
+import { AtomicInsightSearchBox } from "./atomic-insight-search-box/atomic-insight-search-box.js";
+import { AtomicInsightSmartSnippet } from "./atomic-insight-smart-snippet/atomic-insight-smart-snippet.js";
+import { AtomicInsightSmartSnippetFeedbackModal } from "./atomic-insight-smart-snippet-feedback-modal/atomic-insight-smart-snippet-feedback-modal.js";
+import { AtomicInsightSmartSnippetSuggestions } from "./atomic-insight-smart-snippet-suggestions/atomic-insight-smart-snippet-suggestions.js";
+import { AtomicInsightTab } from "./atomic-insight-tab/atomic-insight-tab.js";
+import { AtomicInsightTabs } from "./atomic-insight-tabs/atomic-insight-tabs.js";
+import { AtomicInsightTimeframeFacet } from "./atomic-insight-timeframe-facet/atomic-insight-timeframe-facet.js";
+import { AtomicInsightUserActionsModal } from "./atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.js";
+import { AtomicInsightUserActionsSession } from "./atomic-insight-user-actions-session/atomic-insight-user-actions-session.js";
+import { AtomicInsightUserActionsTimeline } from "./atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.js";
+import { AtomicInsightUserActionsToggle } from "./atomic-insight-user-actions-toggle/atomic-insight-user-actions-toggle.js";
+export { AtomicInsightEditToggle, AtomicInsightFacet, AtomicInsightFoldedResultList, AtomicInsightFullSearchButton, AtomicInsightGenerateAnswerButton, AtomicInsightGeneratedAnswer, AtomicInsightHistoryToggle, AtomicInsightInterface, AtomicInsightLayout, AtomicInsightNoResults, AtomicInsightNumericFacet, AtomicInsightPager, AtomicInsightQueryError, AtomicInsightQuerySummary, AtomicInsightRefineModal, AtomicInsightRefineToggle, AtomicInsightResult, AtomicInsightResultAction, AtomicInsightResultActionBar, AtomicInsightResultAttachToCaseAction, AtomicInsightResultAttachToCaseIndicator, AtomicInsightResultChildren, AtomicInsightResultChildrenTemplate, AtomicInsightResultList, AtomicInsightResultQuickviewAction, AtomicInsightResultTemplate, AtomicInsightSearchBox, AtomicInsightSmartSnippet, AtomicInsightSmartSnippetFeedbackModal, AtomicInsightSmartSnippetSuggestions, AtomicInsightTab, AtomicInsightTabs, AtomicInsightTimeframeFacet, AtomicInsightUserActionsModal, AtomicInsightUserActionsSession, AtomicInsightUserActionsTimeline, AtomicInsightUserActionsToggle };

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

@@ -0,0 +1,40 @@
+const lazy_index = {
+    '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-generated-answer': async ()=>await import("./atomic-insight-generated-answer/atomic-insight-generated-answer.js"),
+    'atomic-insight-history-toggle': async ()=>await import("./atomic-insight-history-toggle/atomic-insight-history-toggle.js"),
+    'atomic-insight-interface': async ()=>await import("./atomic-insight-interface/atomic-insight-interface.js"),
+    'atomic-insight-layout': async ()=>await import("./atomic-insight-layout/atomic-insight-layout.js"),
+    'atomic-insight-no-results': async ()=>await import("./atomic-insight-no-results/atomic-insight-no-results.js"),
+    'atomic-insight-numeric-facet': async ()=>await import("./atomic-insight-numeric-facet/atomic-insight-numeric-facet.js"),
+    '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': async ()=>await import("./atomic-insight-result-action/atomic-insight-result-action.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-action': async ()=>await import("./atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.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-children-template': async ()=>await import("./atomic-insight-result-children-template/atomic-insight-result-children-template.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-timeframe-facet': async ()=>await import("./atomic-insight-timeframe-facet/atomic-insight-timeframe-facet.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")
+};
+export { lazy_index as default };

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

@@ -0,0 +1,3 @@
+import { css } from "lit";
+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}`;
+export { ipxBodyStyles };

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

@@ -0,0 +1,42 @@
+import { html, nothing } from "lit";
+const renderIpxBody = ({ props })=>{
+    const visibilityClass = 'embedded' === props.visibility ? '' : 'open' === props.visibility ? '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>
+      ${false !== props.displayFooterSlot ? 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>
+  `;
+}
+export { renderIpxBody };

package/dist/esm/components/ipx/atomic-ipx-button/atomic-ipx-button.js

@@ -0,0 +1,175 @@
+import { loadRecommendationActions } from "@coveo/headless/recommendation";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { renderButton } from "../../common/button.js";
+import { bindings } from "../../../decorators/bindings.js";
+import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
+import images_close from "../../../images/close.js";
+import search from "../../../images/search.js";
+import "../../common/atomic-icon/atomic-icon.js";
+function _ts_decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) 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;
+}
+function _ts_metadata(k, v) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+}
+const numberOrPixelValuePattern = new RegExp(/^(?=.*(?:\d+|px)$).*$/);
+class AtomicIpxButton extends LitElement {
+    initialize() {}
+    async getRecommendations() {
+        const recsEngine = this.bindings.interfaceElement.querySelector('atomic-recs-interface')?.engine;
+        if (recsEngine) {
+            this.recommendationsLoaded = true;
+            recsEngine.dispatch(loadRecommendationActions(recsEngine).getRecommendations());
+        }
+    }
+    async onClick() {
+        if (!this.recommendationsLoaded) await this.getRecommendations();
+        this.isModalOpen ? this.close() : this.open();
+    }
+    renderIPXButton() {
+        const ariaLabel = this.isModalOpen ? 'Close' : 'Open';
+        return renderButton({
+            props: {
+                style: 'primary',
+                part: 'ipx-button',
+                class: 'my-2',
+                onClick: ()=>this.onClick(),
+                ariaLabel: this.label ?? ariaLabel,
+                ariaExpanded: this.isModalOpen ? 'true' : 'false'
+            }
+        })(html`
+      <span part="button-icon">
+        <atomic-icon
+          part="ipx-close-icon"
+          .icon=${this.getIcon(this.closeIcon)}
+        ></atomic-icon>
+        <atomic-icon
+          part="ipx-open-icon"
+          .icon=${this.getIcon(this.openIcon)}
+        ></atomic-icon>
+      </span>
+      ${when(this.label, ()=>html`<span part="button-text">${this.label}</span>`)}
+    `);
+    }
+    render() {
+        const [displayedIcon, hiddenIcon] = this.isModalOpen ? [
+            'ipx-close-icon',
+            'ipx-open-icon'
+        ] : [
+            'ipx-open-icon',
+            'ipx-close-icon'
+        ];
+        if (this.isModalOpen && !this.recommendationsLoaded) this.getRecommendations();
+        return html`
+      <style>
+        [part='${displayedIcon}'] {
+          transform: translateY(0rem);
+        }
+        [part='${hiddenIcon}'] {
+          transform: translateY(3rem);
+        }
+
+        .btn-open {
+          [part='${displayedIcon}'] {
+            transform: translateY(3rem);
+          }
+
+          [part='${hiddenIcon}'] {
+            transform: translateY(0rem);
+          }
+        }
+      </style>
+      <div class="flex flex-col items-center" part="container">
+        ${this.renderIPXButton()}
+      </div>
+    `;
+    }
+    get ipxModal() {
+        return this.bindings?.interfaceElement?.querySelector('atomic-ipx-modal');
+    }
+    open() {
+        this.isModalOpen = true;
+        this.classList.add('btn-open');
+        this.ipxModal?.setAttribute('is-open', 'true');
+    }
+    close() {
+        this.isModalOpen = false;
+        this.classList.remove('btn-open');
+        this.ipxModal?.setAttribute('is-open', 'false');
+    }
+    getIcon(icon) {
+        const initialDiv = document.createElement('div');
+        initialDiv.innerHTML = icon;
+        const iconElement = initialDiv.querySelector('svg');
+        if (!iconElement) return initialDiv.innerHTML;
+        const iconWidth = this.getIconWidth(iconElement);
+        const iconHeight = this.getIconHeight(iconElement);
+        this.cleanupSVGStyles(iconElement);
+        if (iconWidth && iconHeight) iconElement.setAttribute('viewBox', `0 0 ${iconWidth} ${iconHeight}`);
+        return initialDiv.innerHTML;
+    }
+    cleanupSVGStyles(iconElement) {
+        iconElement.removeAttribute('style');
+        iconElement.removeAttribute('width');
+        iconElement.removeAttribute('height');
+    }
+    getIconWidth(icon) {
+        const width = icon.getAttribute('width') ?? '';
+        if (numberOrPixelValuePattern.test(width)) return width;
+        return null;
+    }
+    getIconHeight(icon) {
+        const height = icon.getAttribute('height') ?? '';
+        if (numberOrPixelValuePattern.test(height)) return height;
+        return null;
+    }
+    constructor(...args){
+        super(...args), this.closeIcon = images_close, this.openIcon = search, this.isModalOpen = false, this.recommendationsLoaded = false;
+    }
+}
+AtomicIpxButton.styles = css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */:host [part=ipx-button]{bottom:calc(var(--spacing,.25rem)*1);height:var(--atomic-ipx-button-height,2.75rem);padding-inline:calc(var(--spacing,.25rem)*3);position:fixed;right:calc(var(--spacing,.25rem)*12);white-space:nowrap}:host [part=button-icon]{display:inline-block;font-size:100%;height:calc(var(--spacing,.25rem)*4);padding:calc(var(--spacing,.25rem)*0);position:relative;vertical-align:middle;width:calc(var(--spacing,.25rem)*4)}:host [part=button-text]{margin-left:calc(var(--spacing,.25rem)*2);overflow:hidden}:host [part=ipx-close-icon],:host [part=ipx-open-icon]{left:calc(var(--spacing,.25rem)*0);position:absolute;transition:transform .5s}`;
+_ts_decorate([
+    property({
+        type: String,
+        reflect: true
+    }),
+    _ts_metadata("design:type", String)
+], AtomicIpxButton.prototype, "label", void 0);
+_ts_decorate([
+    property({
+        type: String,
+        reflect: true
+    })
+], AtomicIpxButton.prototype, "closeIcon", void 0);
+_ts_decorate([
+    property({
+        type: String,
+        reflect: true
+    })
+], AtomicIpxButton.prototype, "openIcon", void 0);
+_ts_decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'is-modal-open'
+    })
+], AtomicIpxButton.prototype, "isModalOpen", void 0);
+_ts_decorate([
+    state(),
+    _ts_metadata("design:type", "u" < typeof Bindings ? Object : Bindings)
+], AtomicIpxButton.prototype, "bindings", void 0);
+_ts_decorate([
+    state(),
+    _ts_metadata("design:type", "u" < typeof Error ? Object : Error)
+], AtomicIpxButton.prototype, "error", void 0);
+AtomicIpxButton = _ts_decorate([
+    customElement('atomic-ipx-button'),
+    bindings(),
+    withTailwindStyles
+], AtomicIpxButton);
+export { AtomicIpxButton };

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

@@ -0,0 +1,87 @@
+import { LitElement, css, html } 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";
+function _ts_decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) 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;
+}
+function _ts_metadata(k, v) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+}
+class AtomicIpxEmbedded extends LitElement {
+    initialize() {}
+    connectedCallback() {
+        super.connectedCallback();
+        this.checkFooterSlot();
+        this.ensureHostId();
+    }
+    checkFooterSlot() {
+        this.hasFooterSlotElements = !!this.querySelector('[slot="footer"]');
+    }
+    ensureHostId() {
+        if (!this.id) this.id = randomID('atomic-ipx-embedded-');
+    }
+    render() {
+        this.updateBreakpoints();
+        return html`
+      <div part="backdrop">
+        ${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>
+    `;
+    }
+    constructor(...args){
+        super(...args), this.hasFooterSlotElements = true, this.updateBreakpoints = once(()=>updateBreakpoints(this));
+    }
+}
+AtomicIpxEmbedded.styles = [
+    ipxBodyStyles,
+    css`/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */:host{box-shadow:0 0 .5rem #00000080;height:inherit}[part=backdrop]{height:inherit;inset:auto 3rem 4.25rem auto;pointer-events:auto}`
+];
+_ts_decorate([
+    state(),
+    _ts_metadata("design:type", "u" < typeof AnyBindings ? Object : AnyBindings)
+], AtomicIpxEmbedded.prototype, "bindings", void 0);
+_ts_decorate([
+    state(),
+    _ts_metadata("design:type", "u" < typeof Error ? Object : Error)
+], AtomicIpxEmbedded.prototype, "error", void 0);
+_ts_decorate([
+    property({
+        type: Object
+    }),
+    _ts_metadata("design:type", "u" < typeof HTMLElement ? Object : HTMLElement)
+], AtomicIpxEmbedded.prototype, "container", void 0);
+_ts_decorate([
+    state()
+], AtomicIpxEmbedded.prototype, "hasFooterSlotElements", void 0);
+_ts_decorate([
+    bindingGuard(),
+    errorGuard(),
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", []),
+    _ts_metadata("design:returntype", void 0)
+], AtomicIpxEmbedded.prototype, "render", null);
+AtomicIpxEmbedded = _ts_decorate([
+    customElement('atomic-ipx-embedded'),
+    bindings(),
+    withTailwindStyles
+], AtomicIpxEmbedded);
+export { AtomicIpxEmbedded };