@plusui/library 0.1.0

package/dist/components/list-box-item/list-box-item.d.ts

@@ -0,0 +1,54 @@
+import Tailwind from '../base/tailwind-base';
+/**
+ * @tag plus-list-box-item
+ *
+ * List box item component that provides a selectable item for list-based containers.
+ * Offers consistent styling and behavior for interactive list items.
+ *
+ * @slot - The default slot for the list box item content
+ *
+ * @csspart base - The component's base wrapper
+ *
+ * @event click - Emitted when the list box item is clicked
+ *
+ * @cssproperty --i-bg-default - Controls the default background color
+ * @cssproperty --i-bg-hovered - Controls the background color when hovered
+ * @cssproperty --i-bg-pressed - Controls the background color when pressed
+ * @cssproperty --i-text-color - Controls the text color
+ * @cssproperty --i-selected-bg - Controls the background color when selected
+ */
+export default class PlusListBoxItem extends Tailwind {
+    /**
+     * Sets the size of the list box item
+     * - sm: Small size
+     * - md: Medium size
+     * - lg: Large size
+     * @default 'md'
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Disables the list box item interaction
+     * When disabled, the item cannot be clicked or selected
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Sets the selected state of the list box item
+     * When selected, the item will display with a highlighted background
+     * @default false
+     */
+    selected: boolean;
+    /**
+     * Sets the text content of the list box item
+     * If provided, this will be used as the item's content when no slot content is present
+     */
+    text?: string;
+    /**
+     * Renders the list box item
+     * Applies the appropriate styles based on disabled and selected states
+     * @returns The rendered template
+     */
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { PlusListBoxItem };
+//# sourceMappingURL=list-box-item.d.ts.map

package/dist/components/list-box-item/list-box-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-box-item.d.ts","sourceRoot":"","sources":["../../../src/components/list-box-item/list-box-item.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAK7C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,QAAQ;IACnD;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;;;OAIG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACM,MAAM;CAiChB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/list-box-item/list-box-item.js

@@ -0,0 +1,102 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import Tailwind from '../base/tailwind-base.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { o } from '../../style-map-DC_vNus2.js';
+import { listBoxItemStyle } from './list-box-item.style.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import '../../directive-DZCF8pFJ.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-list-box-item
+ *
+ * List box item component that provides a selectable item for list-based containers.
+ * Offers consistent styling and behavior for interactive list items.
+ *
+ * @slot - The default slot for the list box item content
+ *
+ * @csspart base - The component's base wrapper
+ *
+ * @event click - Emitted when the list box item is clicked
+ *
+ * @cssproperty --i-bg-default - Controls the default background color
+ * @cssproperty --i-bg-hovered - Controls the background color when hovered
+ * @cssproperty --i-bg-pressed - Controls the background color when pressed
+ * @cssproperty --i-text-color - Controls the text color
+ * @cssproperty --i-selected-bg - Controls the background color when selected
+ */
+class PlusListBoxItem extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the size of the list box item
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Disables the list box item interaction
+         * When disabled, the item cannot be clicked or selected
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Sets the selected state of the list box item
+         * When selected, the item will display with a highlighted background
+         * @default false
+         */
+        this.selected = false;
+    }
+    /**
+     * Renders the list box item
+     * Applies the appropriate styles based on disabled and selected states
+     * @returns The rendered template
+     */
+    render() {
+        const defaultStyle = {
+            '--i-bg-default': 'var(--plus-color-background-surface)',
+            '--i-bg-hovered': 'var(--plus-color-background-default-hovered)',
+            '--i-bg-pressed': 'var(--plus-color-background-default-pressed)',
+            '--i-text-color': `var(--plus-color-text-default)`,
+            '--i-selected-bg': 'var(--plus-color-background-primary-invert-default)',
+        };
+        const disabledStyles = {
+            '--i-bg-default': 'var(--plus-color-background-disabled-default)',
+            '--i-bg-hovered': 'var(--plus-color-background-disabled-default)',
+            '--i-bg-pressed': 'var(--plus-color-background-disabled-default)',
+            '--i-text-color': `var(--plus-color-text-disabled)`,
+            '--i-selected-bg': 'var(--plus-color-background-disabled-default)',
+        };
+        const styles = this.disabled ? disabledStyles : defaultStyle;
+        return x `
+      <div
+        part="base"
+        style=${o(styles)}
+        class=${listBoxItemStyle({
+            size: this.size,
+            disabled: this.disabled,
+            selected: this.selected,
+        })}
+      >
+        <slot>${this.text}</slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    n({ type: String })
+], PlusListBoxItem.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusListBoxItem.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusListBoxItem.prototype, "selected", void 0);
+__decorate([
+    n({ attribute: 'text' })
+], PlusListBoxItem.prototype, "text", void 0);
+
+export { PlusListBoxItem, PlusListBoxItem as default };

package/dist/components/list-box-item/list-box-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-box-item.js","sourceRoot":"","sources":["../../../src/components/list-box-item/list-box-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,QAAQ;IAArD;;QACE;;;;;;WAMG;QAEH,SAAI,GAAuB,IAAI,CAAC;QAEhC;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;IA+CnB,CAAC;IAtCC;;;;OAIG;IACM,MAAM;QACb,MAAM,YAAY,GAAG;YACnB,gBAAgB,EAAE,sCAAsC;YACxD,gBAAgB,EAAE,8CAA8C;YAChE,gBAAgB,EAAE,8CAA8C;YAChE,gBAAgB,EAAE,gCAAgC;YAClD,iBAAiB,EAAE,qDAAqD;SACzE,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,gBAAgB,EAAE,+CAA+C;YACjE,gBAAgB,EAAE,+CAA+C;YACjE,gBAAgB,EAAE,+CAA+C;YACjE,gBAAgB,EAAE,iCAAiC;YACnD,iBAAiB,EAAE,+CAA+C;SACnE,CAAC;QAEF,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;QAE7D,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,MAAM,CAAC;gBAChB,gBAAgB,CAAC;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;;gBAEM,IAAI,CAAC,IAAI;;KAEpB,CAAC;IACJ,CAAC;CACF;AA/DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACK;AAQhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,IAAI,OAAO,EAAE,CAAC;iDACnD;AAQjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,IAAI,OAAO,EAAE,CAAC;iDACnD;AAOjB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;6CAClB;AA0ChB,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/list-box-item/list-box-item.style.d.ts

@@ -0,0 +1,100 @@
+export declare const listBoxItemStyle: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    selected: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+//# sourceMappingURL=list-box-item.style.d.ts.map

package/dist/components/list-box-item/list-box-item.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-box-item.style.d.ts","sourceRoot":"","sources":["../../../src/components/list-box-item/list-box-item.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAsC3B,CAAC"}

package/dist/components/list-box-item/list-box-item.style.js

@@ -0,0 +1,42 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const listBoxItemStyle = ce({
+    base: [
+        'plus-list-box-item',
+        'antialiased',
+        'font-sans',
+        'font-normal',
+        'flex',
+        'items-center',
+        'justify-start',
+        'min-w-full',
+        'py-2',
+        'text-[var(--i-text-color)]',
+        'cursor-pointer',
+        'transition-colors',
+        'duration-200',
+        'ease-in-out',
+    ],
+    variants: {
+        size: {
+            sm: 'small px-3 text-sm gap-2.5',
+            md: 'medium px-3 text-base gap-2.5',
+            lg: 'large px-4 text-lg gap-3',
+        },
+        disabled: {
+            true: 'cursor-not-allowed',
+            false: '',
+        },
+        selected: {
+            true: 'bg-[var(--i-selected-bg)]',
+            false: 'bg-[var(--i-bg-default)] hover:bg-[var(--i-bg-hovered)] active:bg-[var(--i-bg-pressed)]',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        disabled: false,
+        selected: false,
+    },
+});
+
+export { listBoxItemStyle };

package/dist/components/list-box-item/list-box-item.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-box-item.style.js","sourceRoot":"","sources":["../../../src/components/list-box-item/list-box-item.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAC;IACjC,IAAI,EAAE;QACJ,oBAAoB;QACpB,aAAa;QACb,WAAW;QACX,aAAa;QACb,MAAM;QACN,cAAc;QACd,eAAe;QACf,YAAY;QACZ,MAAM;QACN,4BAA4B;QAC5B,gBAAgB;QAChB,mBAAmB;QACnB,cAAc;QACd,aAAa;KACd;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,4BAA4B;YAChC,EAAE,EAAE,+BAA+B;YACnC,EAAE,EAAE,0BAA0B;SAC/B;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,oBAAoB;YAC1B,KAAK,EAAE,EAAE;SACV;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,2BAA2B;YACjC,KAAK,EACH,yFAAyF;SAC5F;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC,CAAC"}

package/dist/components/modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './modal.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAEA,cAAc,YAAY,CAAC"}

package/dist/components/modal/index.js

@@ -0,0 +1,13 @@
+import PlusModal from './modal.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import './modal.style.js';
+import '../../index-B9iart53.js';
+import '../base/tailwind-base.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+
+customElements.define('plus-modal', PlusModal);
+
+export { PlusModal };

package/dist/components/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,cAAc,YAAY,CAAC;AAE3B,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC"}

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,95 @@
+import Tailwind from '../base/tailwind-base';
+/**
+ * @tag plus-modal
+ * @summary Modal dialog component that appears on top of the page content.
+ *
+ * @slot header - The header content of the modal
+ * @slot body - The main content of the modal
+ * @slot footer - The footer content of the modal
+ * @slot close - Custom close button (defaults to an X icon)
+ *
+ * @csspart container - The main container element
+ * @csspart overlay - The overlay element
+ * @csspart modal - The modal element
+ * @csspart header - The header element
+ * @csspart body - The body element
+ * @csspart footer - The footer element
+ * @csspart close-button - The close button element
+ *
+ * @example
+ * ```html
+ * <plus-modal>
+ *   <div slot="header">Modal Title</div>
+ *   <div slot="body">Modal Content</div>
+ *   <div slot="footer">
+ *     <button>Save</button>
+ *   </div>
+ * </plus-modal>
+ * ```
+ */
+export default class PlusModal extends Tailwind {
+    /**
+     * The size of the modal
+     * @type {'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'}
+     * @default 'md'
+     * @attr size
+     */
+    size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    /**
+     * Whether the modal is open
+     * @type {boolean}
+     * @default false
+     * @attr is-open
+     */
+    isOpen: boolean;
+    /**
+     * Whether the modal should take full width
+     * @type {boolean}
+     * @default false
+     * @attr full-width
+     */
+    fullWidth: boolean;
+    /**
+     * Whether the modal should close when clicking the backdrop
+     * @type {boolean}
+     * @default true
+     * @attr close-on-backdrop
+     */
+    closeOnBackdrop: boolean;
+    /**
+     * Whether the modal should close when pressing the Escape key
+     * @type {boolean}
+     * @default true
+     * @attr close-on-esc
+     */
+    closeOnEsc: boolean;
+    /**
+     * The duration of the animation in milliseconds
+     * @type {number}
+     * @default 300
+     * @attr animation-duration
+     */
+    animationDuration: number;
+    private isAnimating;
+    private keydownHandler;
+    constructor();
+    connectedCallback(): void;
+    /**
+     * Hides the modal with animation
+     * @returns {void}
+     */
+    hide(): void;
+    private handleBeforeHide;
+    /**
+     * Shows the modal with animation
+     * @returns {void}
+     */
+    show(): void;
+    private handleBeforeShow;
+    disconnectedCallback(): void;
+    private handleKeydown;
+    private handleBackdropClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { PlusModal };
+//# sourceMappingURL=modal.d.ts.map

package/dist/components/modal/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAGA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,QAAQ;IAC7C;;;;;OAKG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAQ;IAExD;;;;;OAKG;IAEH,MAAM,UAAS;IAEf;;;;;OAKG;IAEH,SAAS,UAAS;IAElB;;;;;OAKG;IAOH,eAAe,UAAQ;IAEvB;;;;;OAKG;IAOH,UAAU,UAAQ;IAElB;;;;;OAKG;IAEH,iBAAiB,SAAO;IAGxB,OAAO,CAAC,WAAW,CAAS;IAG5B,OAAO,CAAC,cAAc,CAA6B;;IAO1C,iBAAiB;IAM1B;;;OAGG;IACH,IAAI;IAKJ,OAAO,CAAC,gBAAgB;IAUxB;;;OAGG;IACH,IAAI;IAKJ,OAAO,CAAC,gBAAgB;IAkBf,oBAAoB;IAO7B,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,mBAAmB;IAOlB,MAAM;CAsDhB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/modal/modal.js

@@ -0,0 +1,225 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { modalStyle } from './modal.style.js';
+import Tailwind from '../base/tailwind-base.js';
+import '../../index-B9iart53.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+
+/**
+ * @tag plus-modal
+ * @summary Modal dialog component that appears on top of the page content.
+ *
+ * @slot header - The header content of the modal
+ * @slot body - The main content of the modal
+ * @slot footer - The footer content of the modal
+ * @slot close - Custom close button (defaults to an X icon)
+ *
+ * @csspart container - The main container element
+ * @csspart overlay - The overlay element
+ * @csspart modal - The modal element
+ * @csspart header - The header element
+ * @csspart body - The body element
+ * @csspart footer - The footer element
+ * @csspart close-button - The close button element
+ *
+ * @example
+ * ```html
+ * <plus-modal>
+ *   <div slot="header">Modal Title</div>
+ *   <div slot="body">Modal Content</div>
+ *   <div slot="footer">
+ *     <button>Save</button>
+ *   </div>
+ * </plus-modal>
+ * ```
+ */
+class PlusModal extends Tailwind {
+    constructor() {
+        super();
+        /**
+         * The size of the modal
+         * @type {'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'}
+         * @default 'md'
+         * @attr size
+         */
+        this.size = 'md';
+        /**
+         * Whether the modal is open
+         * @type {boolean}
+         * @default false
+         * @attr is-open
+         */
+        this.isOpen = false;
+        /**
+         * Whether the modal should take full width
+         * @type {boolean}
+         * @default false
+         * @attr full-width
+         */
+        this.fullWidth = false;
+        /**
+         * Whether the modal should close when clicking the backdrop
+         * @type {boolean}
+         * @default true
+         * @attr close-on-backdrop
+         */
+        this.closeOnBackdrop = true;
+        /**
+         * Whether the modal should close when pressing the Escape key
+         * @type {boolean}
+         * @default true
+         * @attr close-on-esc
+         */
+        this.closeOnEsc = true;
+        /**
+         * The duration of the animation in milliseconds
+         * @type {number}
+         * @default 300
+         * @attr animation-duration
+         */
+        this.animationDuration = 300;
+        this.isAnimating = false;
+        this.keydownHandler = this.handleKeydown.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('plus-modal-before-show', this.handleBeforeShow);
+        this.addEventListener('plus-modal-before-hide', this.handleBeforeHide);
+    }
+    /**
+     * Hides the modal with animation
+     * @returns {void}
+     */
+    hide() {
+        if (this.isAnimating)
+            return;
+        this.emit('plus-modal-before-hide');
+    }
+    handleBeforeHide() {
+        this.isAnimating = true;
+        this.isOpen = false;
+        setTimeout(() => {
+            this.isAnimating = false;
+            this.emit('plus-modal-hide');
+        }, this.animationDuration);
+    }
+    /**
+     * Shows the modal with animation
+     * @returns {void}
+     */
+    show() {
+        if (this.isAnimating)
+            return;
+        this.emit('plus-modal-before-show');
+    }
+    handleBeforeShow() {
+        this.isAnimating = true;
+        this.isOpen = true;
+        setTimeout(() => {
+            this.isAnimating = false;
+            this.emit('plus-modal-show');
+        }, this.animationDuration);
+        if (this.closeOnEsc) {
+            document.addEventListener('keydown', this.keydownHandler);
+        }
+    }
+    // override firstUpdated() {
+    //   this.modalElement = this.shadowRoot?.querySelector('.modal') as HTMLElement;
+    // }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('plus-modal-before-show', this.handleBeforeShow);
+        this.removeEventListener('plus-modal-before-hide', this.handleBeforeHide);
+        document.removeEventListener('keydown', this.keydownHandler);
+    }
+    handleKeydown(e) {
+        if (e.key === 'Escape' && this.closeOnEsc && this.isOpen) {
+            this.hide();
+        }
+    }
+    handleBackdropClick(e) {
+        // Check if the click was on the backdrop (overlay) and not on the modal content
+        if (e.target === e.currentTarget && this.closeOnBackdrop) {
+            this.hide();
+        }
+    }
+    render() {
+        const { size, isOpen, fullWidth } = this;
+        const { base, modalClass, modalOverlay, modalContainer, modalHeader, modalBody, modalFooter, modalCloseButtonClass, } = modalStyle({ size, isOpen, fullWidth });
+        return x `
+      <div
+        class=${base()}
+        part="container"
+        role="dialog"
+        aria-modal="true"
+        aria-hidden=${!isOpen}
+        aria-label="Modal"
+      >
+        <div
+          class=${modalOverlay()}
+          part="overlay"
+          @click=${this.handleBackdropClick}
+        ></div>
+        <div class=${modalClass()} part="modal">
+          <div class=${modalContainer()}>
+            <div class=${modalHeader()} part="header">
+              <slot name="header"></slot>
+              <slot name="close">
+                <button
+                  class=${modalCloseButtonClass()}
+                  part="close-button"
+                  aria-label="Close modal"
+                  @click=${() => this.hide()}
+                >
+                  <plus-svg-icon iconName="xmark"></plus-svg-icon>
+                </button>
+              </slot>
+            </div>
+            <div class=${modalBody()} part="body">
+              <slot name="body"></slot>
+              <slot></slot>
+            </div>
+            <div class=${modalFooter()} part="footer">
+              <slot name="footer"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    n({ type: String, reflect: true })
+], PlusModal.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'is-open' })
+], PlusModal.prototype, "isOpen", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'full-width' })
+], PlusModal.prototype, "fullWidth", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => value != 'false',
+        reflect: true,
+        attribute: 'close-on-backdrop',
+    })
+], PlusModal.prototype, "closeOnBackdrop", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => value != 'false',
+        reflect: true,
+        attribute: 'close-on-esc',
+    })
+], PlusModal.prototype, "closeOnEsc", void 0);
+__decorate([
+    n({ type: Number, reflect: true, attribute: 'animation-duration' })
+], PlusModal.prototype, "animationDuration", void 0);
+__decorate([
+    r()
+], PlusModal.prototype, "isAnimating", void 0);
+
+export { PlusModal, PlusModal as default };

package/dist/components/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"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"}