@justeattakeaway/pie-modal 0.17.0 → 0.19.0

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
-  "types": "dist/types/index.d.ts",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "**/*.d.ts"
+  ],
   "scripts": {
     "build": "yarn build:wrapper pie-modal && run -T vite build",
     "lint:scripts": "run -T eslint .",

package/src/defs.ts

@@ -133,3 +133,19 @@ export const ON_MODAL_OPEN_EVENT = 'pie-modal-open';
  * @constant
  */
 export const ON_MODAL_BACK_EVENT = 'pie-modal-back';
+
+/**
+ * Event name for when the modal leading action is clicked.
+ *
+ * @constant
+ */
+export const ON_MODAL_LEADING_ACTION_CLICK = 'pie-modal-leading-action-click';
+
+/**
+ * Event name for when the modal supporting action is clicked.
+ *
+ * @constant
+ */
+export const ON_MODAL_SUPPORTING_ACTION_CLICK = 'pie-modal-supporting-action-click';
+
+export type ModalActionType = 'leading' | 'supporting';

package/src/index.ts

@@ -19,16 +19,19 @@ import {
     type AriaProps,
     type ActionProps,
     type ModalProps,
+    type ModalActionType,
     headingLevels,
     positions,
     sizes,
     ON_MODAL_BACK_EVENT,
     ON_MODAL_CLOSE_EVENT,
     ON_MODAL_OPEN_EVENT,
+    ON_MODAL_LEADING_ACTION_CLICK,
+    ON_MODAL_SUPPORTING_ACTION_CLICK,
 } from './defs';
 
 // Valid values available to consumers
-export { type ModalProps, headingLevels, sizes };
+export * from './defs';
 
 const componentSelector = 'pie-modal';
 
@@ -36,6 +39,8 @@ const componentSelector = 'pie-modal';
  * @event {CustomEvent} pie-modal-open - when the modal is opened.
  * @event {CustomEvent} pie-modal-close - when the modal is closed.
  * @event {CustomEvent} pie-modal-back - when the modal back button is clicked.
+ * @event {CustomEvent} pie-modal-leading-action-click - when the modal leading action is clicked.
+ * @event {CustomEvent} pie-modal-supporting-action-click - when the modal supporting action is clicked.
  */
 export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     @property({ type: Object })
@@ -192,6 +197,16 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         }
     }
 
+    private _handleActionClick (actionType: ModalActionType) : void {
+        if (actionType === 'leading') {
+            this._dialog?.close('leading');
+            this._dispatchModalCustomEvent(ON_MODAL_LEADING_ACTION_CLICK);
+        } else if (actionType === 'supporting') {
+            this._dialog?.close('supporting');
+            this._dispatchModalCustomEvent(ON_MODAL_SUPPORTING_ACTION_CLICK);
+        }
+    }
+
     /**
      * Return focus to the specified element, providing the selector is valid
      * and the chosen element can be found.
@@ -263,7 +278,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
                 aria-label="${ariaLabel || nothing}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
-                @click="${() => this._dialog?.close('leading')}"
+                @click="${() => this._handleActionClick('leading')}"
                 data-test-id="modal-leading-action">
                 ${text}
             </pie-button>
@@ -299,7 +314,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
                 aria-label="${ariaLabel || nothing}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
-                @click="${() => this._dialog?.close('supporting')}"
+                @click="${() => this._handleActionClick('supporting')}"
                 data-test-id="modal-supporting-action">
                 ${text}
             </pie-button>

package/.eslintignore

@@ -1,5 +0,0 @@
-.turbo
-dist
-node_modules
-lit-browsers-report
-lit-visual-report

package/.turbo/turbo-build.log

@@ -1,14 +0,0 @@
-[3:19:34 PM] @custom-elements-manifest/analyzer: Created new manifest.
-react wrapper has been added!
-vite v4.3.9 building for production...
-transforming...
-✓ 28 modules transformed.
-rendering chunks...
-computing gzip size...
-dist/react.js  59.27 kB │ gzip: 15.99 kB
-dist/index.js  70.71 kB │ gzip: 19.04 kB
-
-[vite:dts] Start generate declaration files...
-✓ built in 12.06s
-[vite:dts] Declaration files built in 10809ms.
-

package/CHANGELOG.md

@@ -1,209 +0,0 @@
-# @justeattakeaway/pie-modal
-
-## 0.17.0
-
-### Minor Changes
-
-- - [Changed] - updated Modal component dependencies adding the `dialog-polyfill` package ([#678](https://github.com/justeattakeaway/pie/pull/678)) by [@fernandofranca](https://github.com/fernandofranca)
-
-  - [Changed] - updated Modal component to use `dialog-polyfill`
-  - [Changed] - updated Modal documentation regarding the legacy browser support for Dialog element and polyfill usage and limitations
-  - [Changed] - vanilla example app for testing Modal with `dialog-polyfill`
-
-## 0.16.0
-
-### Minor Changes
-
-- [Added] - hasStackedActions to pie-modal action buttons ([#650](https://github.com/justeattakeaway/pie/pull/650)) by [@ashleynolan](https://github.com/ashleynolan)
-
-- [Fixed] - Prevent tree-shaking of components in storybook ([#667](https://github.com/justeattakeaway/pie/pull/667)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-  [Removed] - Built webc icons from source control
-  [Added] - Type declaration files for components
-  [Added] - Types for pie-icons
-  [Added] - TS version of pie-icons-configs/config.js (Will be used after DSW-1025)
-  [Added] - Webc icon tests for width, height and base classes
-  [Changed] - Update pie-icons-webc build to generate a slightly different template for regular and large icons (using different types, etc.)
-  [Changed] - Update pie-icons-webc rollup config to remove commonjs build
-  [Changed] - Use `just-kebab-case` and `just-pascal-case` instead of `kebab-case` and `pascal-case` to simplify usage (and they're more recently maintained)
-
-- [Added] - New ActionProps type for modal leading/supporting actions ([#670](https://github.com/justeattakeaway/pie/pull/670)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-### Patch Changes
-
-- [Fixed] - Re-add property decorator for modal position prop ([#676](https://github.com/justeattakeaway/pie/pull/676)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-## 0.15.0
-
-### Minor Changes
-
-- [Added] - isFooterPinned property to modal which offers more scrolling options to consumers ([#648](https://github.com/justeattakeaway/pie/pull/648)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] - Modal aria labels to close, back and loading elements ([#652](https://github.com/justeattakeaway/pie/pull/652)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
-
-- [Changed] - Add js/ts linting and fix errors ([#653](https://github.com/justeattakeaway/pie/pull/653)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] SupportingAction prop to modal ([#643](https://github.com/justeattakeaway/pie/pull/643)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
-
-## 0.14.0
-
-### Minor Changes
-
-- [Added] - `position` prop to modal ([#630](https://github.com/justeattakeaway/pie/pull/630)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Changed] - Sync modal header styles with figma ([#627](https://github.com/justeattakeaway/pie/pull/627)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] - prop for `leadingAction` to pie-modal ([#632](https://github.com/justeattakeaway/pie/pull/632)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
-
-- [Changed] - Moved some tests from Visual to Component ([#613](https://github.com/justeattakeaway/pie/pull/613)) by [@JoshuaNg2332](https://github.com/JoshuaNg2332)
-
-## 0.13.0
-
-### Minor Changes
-
-- [Added] - Default modal footer ([#619](https://github.com/justeattakeaway/pie/pull/619)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-  [Added] - Height styles for the different sizes
-  [Removed] - Unnecessary `:focus-visible` outline for the modal
-  [Fixed] - Modal width should be able to exceed 600px for `isFullWidthBelowMid`
-
-- [Added] - loading spinner to modal ([#628](https://github.com/justeattakeaway/pie/pull/628)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] - Scroll shadow for modal contents ([#619](https://github.com/justeattakeaway/pie/pull/619)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-- [Added] - Tests to validate leading/supporting action buttons ([#619](https://github.com/justeattakeaway/pie/pull/619)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-  [Added] - Missing tests to check that the modal closes when expected to
-  [Changed] - Updated tests to verify that the correct event is being triggered
-
-- [Added] - hasBackButton prop to modal ([#623](https://github.com/justeattakeaway/pie/pull/623)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.12.0
-
-### Minor Changes
-
-- [Added] - @event jsdoc comments for modal events for react wrapper to analyse ([#612](https://github.com/justeattakeaway/pie/pull/612)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.11.0
-
-### Minor Changes
-
-- [Changed] - Ensure component implements it's props interface ([#611](https://github.com/justeattakeaway/pie/pull/611)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Fixed] - Added IconClose to Visual tests and modal ([#604](https://github.com/justeattakeaway/pie/pull/604)) by [@ashleynolan](https://github.com/ashleynolan)
-
-## 0.10.0
-
-### Minor Changes
-
-- [Added] - Add returnFocusAfterCloseSelector prop ([#599](https://github.com/justeattakeaway/pie/pull/599)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-  [Changed] - Extract `renderTestPieModal` into test helper file so it can be used for component tests too
-  [Added] - Add README documentation for new props
-
-- [Fixed] - Fix console errors when switching between stories ([#599](https://github.com/justeattakeaway/pie/pull/599)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-- [Added] - New `isFullWidthBelowMid` prop for pie-modal ([#600](https://github.com/justeattakeaway/pie/pull/600)) by [@LTurns](https://github.com/LTurns)
-
-- [Added] isDismissible prop and tests ([#588](https://github.com/justeattakeaway/pie/pull/588)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
-
-## 0.9.0
-
-### Minor Changes
-
-- [Changed] - Set modal props to public ([#597](https://github.com/justeattakeaway/pie/pull/597)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.8.0
-
-### Minor Changes
-
-- [Added] - New size prop for pie-modal ([#572](https://github.com/justeattakeaway/pie/pull/572)) by [@xander-marjoram](https://github.com/xander-marjoram)
-
-  [Added] - Visual regression test for each size
-  [Changed] - Modal story to include new size prop
-
-## 0.7.0
-
-### Minor Changes
-
-- [Added] - Modal backdrop functionality ([#559](https://github.com/justeattakeaway/pie/pull/559)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
-
-- [Added] - Scroll locking to modal ([#564](https://github.com/justeattakeaway/pie/pull/564)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-## 0.6.1
-
-### Patch Changes
-
-- [Changed] - Updated defs to use different array type syntax ([#566](https://github.com/justeattakeaway/pie/pull/566)) by [@ashleynolan](https://github.com/ashleynolan)
-
-## 0.6.0
-
-### Minor Changes
-
-- [Changed] - Updated styles to use custom props ([#551](https://github.com/justeattakeaway/pie/pull/551)) by [@ashleynolan](https://github.com/ashleynolan)
-
-- [Added] - close button to modal ([#549](https://github.com/justeattakeaway/pie/pull/549)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
-
-## 0.5.0
-
-### Minor Changes
-
-- [Updated] - enum types to string union types to string union types ([#508](https://github.com/justeattakeaway/pie/pull/508)) by [@FayeCarter](https://github.com/FayeCarter)
-
-## 0.4.0
-
-### Minor Changes
-
-- [Added] - `heading` and `headingLevel` props to the modal component ([#530](https://github.com/justeattakeaway/pie/pull/530)) by [@raoufswe](https://github.com/raoufswe)
-
-- [Added] - Modal heading added to component ([#513](https://github.com/justeattakeaway/pie/pull/513)) by [@fernandofranca](https://github.com/fernandofranca)
-
-  [Added] - Basic styling for modal default state
-
-- [Changed] - moved pie-webc-core dependency to devDependencies in each component ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] - Additional notes on visual tests and environment variables ([#525](https://github.com/justeattakeaway/pie/pull/525)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-- [Added] prop to control modal open & close state ([#527](https://github.com/justeattakeaway/pie/pull/527)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
-
-- [Added] Read me percy config examples ([#529](https://github.com/justeattakeaway/pie/pull/529)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
-
-### Patch Changes
-
-- [Fixed] - PieModal CSS by adding logical property ([#521](https://github.com/justeattakeaway/pie/pull/521)) by [@fernandofranca](https://github.com/fernandofranca)
-
-## 0.3.0
-
-### Minor Changes
-
-- [Changed] - Build script to include generating react wrapper ([#426](https://github.com/justeattakeaway/pie/pull/426)) by [@LTurns](https://github.com/LTurns)
-
-### Patch Changes
-
-- [Added] - Missing `test:ci` scripts to package.json ([#492](https://github.com/justeattakeaway/pie/pull/492)) by [@siggerzz](https://github.com/siggerzz)
-
-- [Updated] - components to use the shared configurations ([#487](https://github.com/justeattakeaway/pie/pull/487)) by [@fernandofranca](https://github.com/fernandofranca)
-
-- Updated dependencies [[`090354733`](https://github.com/justeattakeaway/pie/commit/090354733f24f0aa52ce287db7f8d13648414150)]:
-  - @justeattakeaway/pie-webc-core@0.2.0
-
-## 0.2.0
-
-### Minor Changes
-
-- [Changed] - use RTL mixin on component ([#478](https://github.com/justeattakeaway/pie/pull/478)) by [@jamieomaguire](https://github.com/jamieomaguire)
-
-### Patch Changes
-
-- Updated dependencies [[`1f79d9d1a`](https://github.com/justeattakeaway/pie/commit/1f79d9d1a6fe9160b244e82d956290136b87187b)]:
-  - @justeattakeaway/pie-webc-core@0.1.0
-
-## 0.1.1
-
-### Patch Changes
-
-- [Added] - PieModal component shell ([#439](https://github.com/justeattakeaway/pie/pull/439)) by [@fernandofranca](https://github.com/fernandofranca)
-
-  [Added] - README and LICENSE files
-  [Added] - Initial TypeScript and Vite config
-  [Added] - `declaration.d.ts` file for TypeScript

package/dist/types/index.d.ts

@@ -1 +0,0 @@
-export * from './packages/components/pie-modal/src/index'

package/dist/types/packages/components/pie-modal/src/defs.d.ts

@@ -1,110 +0,0 @@
-import { RTLComponentProps } from '@justeattakeaway/pie-webc-core';
-import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
-export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
-export declare const sizes: readonly ["small", "medium", "large"];
-export declare const positions: readonly ["top", "center"];
-export type AriaProps = {
-    close?: string;
-    back?: string;
-    loading?: string;
-};
-export type ActionProps = {
-    /**
-     * The text to display inside the button.
-     */
-    text: string;
-    /**
-     * The button variant.
-     */
-    variant?: Variant;
-    /**
-     * The ARIA label for the button.
-     */
-    ariaLabel?: string;
-};
-export type ModalProps = RTLComponentProps & {
-    /**
-     * The ARIA labels used for the modal close and back buttons, as well as loading state.
-     */
-    aria?: AriaProps;
-    /**
-     * When true, the modal will have a back button. This currently behaves the same as the close button.
-     */
-    hasBackButton: boolean;
-    /**
-     * When true, the modal will have a back button. This currently behaves the same as the close button.
-     */
-    hasStackedActions: boolean;
-    /**
-     * The text to display in the modal's heading.
-     */
-    heading: string;
-    /**
-     * The HTML heading tag to use for the modal's heading. Can be h1-h6.
-     */
-    headingLevel: typeof headingLevels[number];
-    /**
-     * When true, the modal will be open.
-     */
-    isOpen: boolean;
-    /**
-     * When set to `true`:
-     *  1. The close button within the modal will be visible.
-     *  2. The user can dismiss the modal via the ESCAPE key, clicking the backdrop
-     *     or via a close button.
-     *
-     * When set to `false`:
-     *  1. The close button within the modal will be hidden.
-     *  2. The user can NOT dismiss the modal via the ESCAPE key or clicking the backdrop.
-     *
-     */
-    isDismissible: boolean;
-    /**
-     * When false, the modal footer will scroll with the content inside the modal body.
-     */
-    isFooterPinned: boolean;
-    /**
-     * This controls whether a *medium-sized* modal will cover the full width of the page when below the mid breakpoint.
-     */
-    isFullWidthBelowMid: boolean;
-    /**
-     * When true, displays a loading spinner in the modal.
-     */
-    isLoading: boolean;
-    /**
-     * The leading action configuration for the modal.
-     */
-    leadingAction: ActionProps;
-    position: typeof positions[number];
-    /**
-     * The selector for the element that you would like focus to be returned to when the modal is closed, e.g., #skipToMain
-     */
-    returnFocusAfterCloseSelector?: string;
-    /**
-     * The size of the modal; this controls how wide it will appear on the page.
-     */
-    size: typeof sizes[number];
-    /**
-     * The supporting action configuration for the modal.
-     */
-    supportingAction: ActionProps;
-};
-/**
- * Event name for when the modal is closed.
- *
- * @constant
- */
-export declare const ON_MODAL_CLOSE_EVENT = "pie-modal-close";
-/**
- * Event name for when the modal is opened.
- *
- * @constant
- */
-export declare const ON_MODAL_OPEN_EVENT = "pie-modal-open";
-/**
- * Event name for when the modal back button is clicked.
- *
- * @constant
- */
-export declare const ON_MODAL_BACK_EVENT = "pie-modal-back";
-//# sourceMappingURL=defs.d.ts.map

package/dist/types/packages/components/pie-modal/src/defs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAElE,eAAO,MAAM,aAAa,+CAAgD,CAAC;AAC3E,eAAO,MAAM,KAAK,uCAAwC,CAAC;AAC3D,eAAO,MAAM,SAAS,4BAA6B,CAAC;AAEpD,MAAM,MAAM,SAAS,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IAClB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG;IACzC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,iBAAiB,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,YAAY,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;IAE3C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;;;;;OAUG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,cAAc,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,mBAAmB,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,WAAW,CAAC;IAK3B,QAAQ,EAAE,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;IAEnC;;OAEG;IACH,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAEvC;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAE3B;;OAEG;IACH,gBAAgB,EAAE,WAAW,CAAC;CACjC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC;AAEpD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC"}

package/dist/types/packages/components/pie-modal/src/index.d.ts

@@ -1,126 +0,0 @@
-import { LitElement, TemplateResult } from 'lit';
-import type { DependentMap } from '@justeattakeaway/pie-webc-core';
-import { type AriaProps, type ActionProps, type ModalProps, headingLevels, sizes } from './defs';
-export { type ModalProps, headingLevels, sizes };
-declare const componentSelector = "pie-modal";
-declare const PieModal_base: (new (...args: any[]) => {
-    dir: "ltr" | "rtl" | "auto";
-    isRTL: boolean;
-}) & typeof LitElement;
-/**
- * @event {CustomEvent} pie-modal-open - when the modal is opened.
- * @event {CustomEvent} pie-modal-close - when the modal is closed.
- * @event {CustomEvent} pie-modal-back - when the modal back button is clicked.
- */
-export declare class PieModal extends PieModal_base implements ModalProps {
-    aria: AriaProps;
-    heading: string;
-    headingLevel: ModalProps['headingLevel'];
-    hasBackButton: boolean;
-    hasStackedActions: boolean;
-    isDismissible: boolean;
-    isFooterPinned: boolean;
-    isFullWidthBelowMid: boolean;
-    isLoading: boolean;
-    isOpen: boolean;
-    leadingAction: ActionProps;
-    position: ModalProps['position'];
-    returnFocusAfterCloseSelector?: string;
-    size: ModalProps['size'];
-    supportingAction: ActionProps;
-    private _dialog?;
-    private _backButtonClicked;
-    static styles: import("lit").CSSResult;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    firstUpdated(changedProperties: DependentMap<ModalProps>): void;
-    updated(changedProperties: DependentMap<ModalProps>): void;
-    /**
-     * Opens the dialog element and disables page scrolling
-     */
-    private _handleModalOpened;
-    /**
-     * Closes the dialog element and re-enables page scrolling
-     */
-    private _handleModalClosed;
-    /**
-     * Prevents the user from dismissing the dialog via the `cancel`
-     * event (ESC key) when `isDismissible` is set to false.
-     *
-     * @param {Event} event - The event object.
-     */
-    private _handleDialogCancelEvent;
-    private _handleModalOpenStateOnFirstRender;
-    private _handleModalOpenStateChanged;
-    /**
-     * Return focus to the specified element, providing the selector is valid
-     * and the chosen element can be found.
-     */
-    private _returnFocus;
-    /**
-     * Template for the close button element. Called within the
-     * main render function.
-     *
-     * @private
-     */
-    private renderCloseButton;
-    /**
-     * Template for the back button element. Called within the
-     * main render function.
-     *
-     * @private
-     */
-    private renderBackButton;
-    /**
-     * Render leadingAction button depending on prop availability.
-     *
-     * 1. If the prop `leadingAction` is not provided, the button is not rendered.
-     * 2. If the prop `leadingAction` is provided but any of the optional properties
-     * are not provided, they fall back to their default values.
-     *
-     * @private
-     */
-    private renderLeadingAction;
-    /**
-     * Render supportingAction button depending on prop availability.
-     *
-     * 1. If the prop `supportingAction` is not provided, the button is not rendered.
-     * 2. If the prop `supportingAction` is provided but any of the optional properties
-     * are not provided, they fall back to their default values.
-     * 3. If `supportingAction` is provided but not `leadingAction`, log a warning and do
-     * not render `supportingAction`.
-     *
-     * @private
-     */
-    private renderSupportingAction;
-    /**
-     * Renders the modal inner content and footer of the modal.
-     * @private
-     */
-    private renderModalContentAndFooter;
-    render(): TemplateResult;
-    /**
-     * Dismisses the modal on backdrop click if `isDismissible` is `true`.
-     * @param {MouseEvent} event - the click event targetting the modal/backdrop
-     */
-    private _handleDialogLightDismiss;
-    /**
-     * Note: We should aim to have a shareable event helper system to allow
-     * us to share this across components in-future.
-     *
-     * Dispatch a custom event.
-     *
-     * To be used whenever we have behavioural events we want to
-     * bubble up through the modal.
-     *
-     * @param {string} eventType
-     */
-    private _dispatchModalCustomEvent;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: PieModal;
-    }
-}
-//# sourceMappingURL=index.d.ts.map

package/dist/types/packages/components/pie-modal/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,EAAW,cAAc,EACtC,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,yDAAyD,CAAC;AACjE,OAAO,+DAA+D,CAAC;AACvE,OAAO,gEAAgE,CAAC;AAKxE,OAAO,EACH,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,aAAa,EAEb,KAAK,EAIR,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,KAAK,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;AAEjD,QAAA,MAAM,iBAAiB,cAAc,CAAC;;;;;AAEtC;;;;GAIG;AACH,qBAAa,QAAS,SAAQ,aAAqB,YAAW,UAAU;IAE7D,IAAI,EAAG,SAAS,CAAC;IAIjB,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAE,UAAU,CAAC,cAAc,CAAC,CAAQ;IAGhD,aAAa,UAAS;IAGtB,iBAAiB,UAAS;IAG1B,aAAa,UAAS;IAGtB,cAAc,UAAQ;IAGtB,mBAAmB,UAAS;IAG5B,SAAS,UAAS;IAGlB,MAAM,UAAS;IAGf,aAAa,EAAG,WAAW,CAAC;IAI5B,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAY;IAG5C,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAIvC,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAY;IAGpC,gBAAgB,EAAG,WAAW,CAAC;IAGtC,OAAO,CAAC,OAAO,CAAC,CAAoB;IAEpC,OAAO,CAAC,kBAAkB,CAAS;IAGnC,MAAM,CAAC,MAAM,0BAAqB;;IAOlC,iBAAiB,IAAM,IAAI;IAO3B,oBAAoB,IAAM,IAAI;IAO9B,YAAY,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IAYjE,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IAI5D;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAS1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB,CAI9B;IAGF,OAAO,CAAC,kCAAkC;IAU1C,OAAO,CAAC,4BAA4B;IAkBpC;;;OAGG;IACH,OAAO,CAAC,YAAY;IAQpB;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAYzB;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAaxB;;;;;;;;OAQG;IACH,OAAO,CAAC,mBAAmB;IAoB3B;;;;;;;;;;OAUG;IACH,OAAO,CAAC,sBAAsB;IAyB9B;;;OAGG;IACH,OAAO,CAAC,2BAA2B;IAa5B,MAAM;IAuDb;;;OAGG;IACH,OAAO,CAAC,yBAAyB,CAyB/B;IAEF;;;;;;;;;;OAUG;IACH,OAAO,CAAC,yBAAyB,CAO/B;CACL;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,QAAQ,CAAC;KACjC;CACJ"}

package/dist/types/packages/components/pie-modal/src/react.d.ts

@@ -1,8 +0,0 @@
-import { EventName } from '@lit-labs/react';
-import { PieModal as PieModalReact } from './index';
-export declare const PieModal: import("@lit-labs/react").ReactWebComponent<PieModalReact, {
-    onPieModalOpen: EventName<CustomEvent<any>>;
-    onPieModalClose: EventName<CustomEvent<any>>;
-    onPieModalBack: EventName<CustomEvent<any>>;
-}>;
-//# sourceMappingURL=react.d.ts.map

package/dist/types/packages/components/pie-modal/src/react.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,QAAQ;;;;EAUnB,CAAC"}

package/dist/types/react.d.ts

@@ -1 +0,0 @@
-export * from './packages/components/pie-modal/src/react'

package/playwright/index.html

@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2" as="font" type="font/woff2" crossorigin>
-    <style>
-        @font-face {
-            font-family: JETSansDigital;
-            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2') format("woff2"),
-            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff') format("woff");
-            font-weight: 400;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: JETSansDigital;
-            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2') format("woff2"),
-            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff') format("woff");
-            font-weight: 700;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: JETSansDigital;
-            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2') format("woff2"),
-            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff') format("woff");
-            font-weight: 800;
-            font-display: swap;
-        }
-        body {
-            font-feature-settings: "tnum"; /* Enable tabular numbers */
-        }
-        /* basic styles to center align components and give them some spacing */
-        #root {
-            padding: 1em;
-        }
-
-        #root > * {
-            display: block;
-            margin-inline: auto;
-        }
-
-        #root > * + * {
-            margin-top: 1em;
-        }
-    </style>
-    <title>Testing Page</title>
-    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet.css" />
-    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet-hsl-colors.css" />
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module" src="./index.ts"></script>
-</body>
-</html>

package/playwright/index.ts

@@ -1 +0,0 @@
-// Import common styles here