@vaadin/vaadin-confirm-dialog 21.0.1 → 22.0.0-alpha10

package/package.json

@@ -1,10 +1,29 @@
 {
   "name": "@vaadin/vaadin-confirm-dialog",
-  "version": "21.0.1",
+  "version": "22.0.0-alpha10",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-confirm-dialog",
+  "license": "https://raw.githubusercontent.com/vaadin/vaadin-confirm-dialog/master/LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-confirm-dialog"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-confirm-dialog/issues"
+  },
   "main": "vaadin-confirm-dialog.js",
   "module": "vaadin-confirm-dialog.js",
-  "repository": "vaadin/vaadin-confirm-dialog",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "vaadin-confirm-dialog",
@@ -12,36 +31,8 @@
     "web-component",
     "polymer"
   ],
-  "author": "Vaadin Ltd",
-  "license": "https://raw.githubusercontent.com/vaadin/vaadin-confirm-dialog/master/LICENSE",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-confirm-dialog/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-button": "^21.0.1",
-    "@vaadin/vaadin-dialog": "^21.0.1",
-    "@vaadin/vaadin-element-mixin": "^21.0.1",
-    "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "^21.0.1",
-    "@vaadin/vaadin-material-styles": "^21.0.1",
-    "@vaadin/vaadin-overlay": "^21.0.1",
-    "@vaadin/vaadin-themable-mixin": "^21.0.1"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.1.5",
-    "@vaadin/testing-helpers": "^0.2.1",
-    "sinon": "^9.2.1"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vaadin/confirm-dialog": "22.0.0-alpha10"
   },
-  "gitHead": "91e44dcfa63dc5e30e1e8d18be499b3e1e17b1c4"
+  "gitHead": "6d3055383b9c3c8306ea34c6f2e2087e63c49348"
 }

package/src/vaadin-confirm-dialog.d.ts

@@ -1,147 +1,18 @@
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
 /**
- * Fired when the `opened` property changes.
+ * @license
+ * Copyright (c) 2018 - 2021 Vaadin Ltd
+ * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-export type ConfirmDialogOpenedChangedEvent = CustomEvent<{ value: boolean }>;
-
-export interface ConfirmDialogElementEventMap {
-  'opened-changed': ConfirmDialogOpenedChangedEvent;
-
-  confirm: Event;
-
-  cancel: Event;
-
-  reject: Event;
-}
-
-export type ConfirmDialogEventMap = HTMLElementEventMap & ConfirmDialogElementEventMap;
+import { ConfirmDialog } from '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
 
 /**
- * `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
- *
- * ```
- * <vaadin-confirm-dialog cancel>
- *   There are unsaved changes. Do you really want to leave?
- * </vaadin-confirm-dialog>
- * ```
- *
- * ### Styling
- *
- * The following Shadow DOM parts are available for styling the dialog parts:
- *
- * Part name  | Description
- * -----------|---------------------------------------------------------|
- * `header`   | Header of the confirmation dialog
- * `message`  | Container for the message of the dialog
- * `footer`   | Container for the buttons
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * ### Custom content
- *
- * The following parts are available for replacement:
- *
- * Slot name         | Description
- * ------------------|---------------------------------------------------------|
- * `header`          | Header of the confirmation dialog
- * `message`         | Container for the message of the dialog
- * `cancel-button`   | Container for the Cancel button
- * `reject-button`   | Container for the Reject button
- * `confirm-button`  | Container for the Confirm button
- *
- * @fires {Event} confirm - Fired when Confirm button was pressed.
- * @fires {Event} cancel - Fired when Cancel button or Escape key was pressed.
- * @fires {Event} reject - Fired when Reject button was pressed.
- * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ * @deprecated Import `ConfirmDialog` from `@vaadin/confirm-dialog` instead.
  */
-declare class ConfirmDialogElement extends ElementMixin(ThemableMixin(HTMLElement)) {
-  /**
-   * True if the overlay is currently displayed.
-   */
-  opened: boolean;
-
-  /**
-   * Set the confirmation dialog title.
-   */
-  header: string;
-
-  /**
-   * Set the message or confirmation question.
-   */
-  message: string | null | undefined;
-
-  /**
-   * Text displayed on confirm-button.
-   * @attr {string} confirm-text
-   */
-  confirmText: string;
-
-  /**
-   * Theme for a confirm-button.
-   * @attr {string} confirm-theme
-   */
-  confirmTheme: string;
+export type ConfirmDialogElement = ConfirmDialog;
 
-  /**
-   * Set to true to disable closing dialog on Escape press
-   * @attr {boolean} no-close-on-esc
-   */
-  noCloseOnEsc: boolean;
-
-  /**
-   * Whether to show cancel button or not.
-   */
-  reject: boolean;
-
-  /**
-   * Text displayed on reject-button.
-   * @attr {string} reject-text
-   */
-  rejectText: string;
-
-  /**
-   * Theme for a reject-button.
-   * @attr {string} reject-theme
-   */
-  rejectTheme: string;
-
-  /**
-   * Whether to show cancel button or not.
-   */
-  cancel: boolean;
-
-  /**
-   * Text displayed on cancel-button.
-   * @attr {string} cancel-text
-   */
-  cancelText: string;
-
-  /**
-   * Theme for a cancel-button.
-   * @attr {string} cancel-theme
-   */
-  cancelTheme: string;
-
-  addEventListener<K extends keyof ConfirmDialogEventMap>(
-    type: K,
-    listener: (this: ConfirmDialogElement, ev: ConfirmDialogEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof ConfirmDialogEventMap>(
-    type: K,
-    listener: (this: ConfirmDialogElement, ev: ConfirmDialogEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-confirm-dialog': ConfirmDialogElement;
-  }
-}
+/**
+ * @deprecated Import `ConfirmDialog` from `@vaadin/confirm-dialog` instead.
+ */
+export const ConfirmDialogElement: typeof ConfirmDialog;
 
-export { ConfirmDialogElement };
+export * from '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';

package/src/vaadin-confirm-dialog.js

@@ -3,415 +3,11 @@
  * Copyright (c) 2018 - 2021 Vaadin Ltd
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
-import '@vaadin/vaadin-button/src/vaadin-button.js';
-import '@vaadin/vaadin-dialog/src/vaadin-dialog.js';
+import { ConfirmDialog } from '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
 
 /**
- * `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
- *
- * ```
- * <vaadin-confirm-dialog cancel>
- *   There are unsaved changes. Do you really want to leave?
- * </vaadin-confirm-dialog>
- * ```
- *
- * ### Styling
- *
- * The following Shadow DOM parts are available for styling the dialog parts:
- *
- * Part name  | Description
- * -----------|---------------------------------------------------------|
- * `header`   | Header of the confirmation dialog
- * `message`  | Container for the message of the dialog
- * `footer`   | Container for the buttons
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * ### Custom content
- *
- * The following parts are available for replacement:
- *
- * Slot name         | Description
- * ------------------|---------------------------------------------------------|
- * `header`          | Header of the confirmation dialog
- * `message`         | Container for the message of the dialog
- * `cancel-button`   | Container for the Cancel button
- * `reject-button`   | Container for the Reject button
- * `confirm-button`  | Container for the Confirm button
- *
- * @fires {Event} confirm - Fired when Confirm button was pressed.
- * @fires {Event} cancel - Fired when Cancel button or Escape key was pressed.
- * @fires {Event} reject - Fired when Reject button was pressed.
- * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
- *
- * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemableMixin
+ * @deprecated Import `ConfirmDialog` from `@vaadin/confirm-dialog` instead.
  */
-class ConfirmDialogElement extends ElementMixin(ThemableMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: none;
-          --_vaadin-confirm-dialog-content-width: auto;
-          --_vaadin-confirm-dialog-content-height: auto;
-          --_vaadin-confirm-dialog-footer-height: auto;
-        }
-      </style>
+export const ConfirmDialogElement = ConfirmDialog;
 
-      <vaadin-dialog
-        id="dialog"
-        opened="{{opened}}"
-        aria-label="[[_getAriaLabel(header)]]"
-        theme$="_vaadin-confirm-dialog-dialog-overlay-theme [[theme]]"
-        no-close-on-outside-click
-        no-close-on-esc="[[noCloseOnEsc]]"
-      ></vaadin-dialog>
-
-      <template id="dialogTemplate">
-        <div id="content">
-          <div part="header">
-            <slot name="header">
-              <h3 class="header">[[header]]</h3>
-            </slot>
-          </div>
-
-          <div part="message" id="message">
-            <slot></slot>
-            [[message]]
-          </div>
-        </div>
-
-        <div part="footer">
-          <div class="cancel-button">
-            <slot name="cancel-button">
-              <vaadin-button
-                id="cancel"
-                theme$="[[cancelTheme]]"
-                on-click="_cancel"
-                hidden$="[[!cancel]]"
-                aria-describedby="message"
-              >
-                [[cancelText]]
-              </vaadin-button>
-            </slot>
-          </div>
-          <div class="reject-button">
-            <slot name="reject-button">
-              <vaadin-button
-                id="reject"
-                theme$="[[rejectTheme]]"
-                on-click="_reject"
-                hidden$="[[!reject]]"
-                aria-describedby="message"
-              >
-                [[rejectText]]
-              </vaadin-button>
-            </slot>
-          </div>
-          <div class="confirm-button">
-            <slot name="confirm-button">
-              <vaadin-button id="confirm" theme$="[[confirmTheme]]" on-click="_confirm" aria-describedby="message">
-                [[confirmText]]
-              </vaadin-button>
-            </slot>
-          </div>
-        </div>
-      </template>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-confirm-dialog';
-  }
-
-  static get version() {
-    return '21.0.1';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * True if the overlay is currently displayed.
-       * @type {boolean}
-       */
-      opened: {
-        type: Boolean,
-        value: false,
-        notify: true,
-        observer: '_openedChanged'
-      },
-
-      /**
-       * Set the confirmation dialog title.
-       * @type {string}
-       */
-      header: {
-        type: String,
-        value: ''
-      },
-
-      /**
-       * Set the message or confirmation question.
-       */
-      message: {
-        type: String
-      },
-
-      /**
-       * Text displayed on confirm-button.
-       * @attr {string} confirm-text
-       * @type {string}
-       */
-      confirmText: {
-        type: String,
-        value: 'Confirm'
-      },
-
-      /**
-       * Theme for a confirm-button.
-       * @attr {string} confirm-theme
-       * @type {string}
-       */
-      confirmTheme: {
-        type: String,
-        value: 'primary'
-      },
-
-      /**
-       * Set to true to disable closing dialog on Escape press
-       * @attr {boolean} no-close-on-esc
-       * @type {boolean}
-       */
-      noCloseOnEsc: {
-        type: Boolean,
-        value: false
-      },
-
-      /**
-       * Whether to show cancel button or not.
-       * @type {boolean}
-       */
-      reject: {
-        type: Boolean,
-        reflectToAttribute: true,
-        value: false
-      },
-
-      /**
-       * Text displayed on reject-button.
-       * @attr {string} reject-text
-       * @type {string}
-       */
-      rejectText: {
-        type: String,
-        value: 'Reject'
-      },
-
-      /**
-       * Theme for a reject-button.
-       * @attr {string} reject-theme
-       * @type {string}
-       */
-      rejectTheme: {
-        type: String,
-        value: 'error tertiary'
-      },
-
-      /**
-       * Whether to show cancel button or not.
-       * @type {boolean}
-       */
-      cancel: {
-        type: Boolean,
-        reflectToAttribute: true,
-        value: false
-      },
-
-      /**
-       * Text displayed on cancel-button.
-       * @attr {string} cancel-text
-       * @type {string}
-       */
-      cancelText: {
-        type: String,
-        value: 'Cancel'
-      },
-
-      /**
-       * Theme for a cancel-button.
-       * @attr {string} cancel-theme
-       * @type {string}
-       */
-      cancelTheme: {
-        type: String,
-        value: 'tertiary'
-      },
-
-      /** @private */
-      _confirmButton: {
-        type: Element
-      }
-    };
-  }
-
-  /** @protected */
-  static _finalizeClass() {
-    super._finalizeClass();
-
-    const devModeCallback = window.Vaadin.developmentModeCallback;
-    const licenseChecker = devModeCallback && devModeCallback['vaadin-license-checker'];
-    /* c8 ignore next 3 */
-    if (typeof licenseChecker === 'function') {
-      licenseChecker(ConfirmDialogElement);
-    }
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this._escPressed.bind(this));
-    if (this._dimensions) {
-      Object.keys(this._dimensions).forEach((name) => {
-        this._setDimension(name, this._dimensions[name]);
-      });
-    }
-  }
-
-  /**
-   * @param {string} name
-   * @param {?string} oldValue
-   * @param {?string} newValue
-   * @protected
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
-    if (name === 'dir') {
-      const value = newValue === 'rtl';
-      this.__isRTL = value;
-      this.opened && this.__toggleContentRTL(value);
-    }
-  }
-
-  /** @private */
-  __toggleContentRTL(rtl) {
-    const contentBlock = this.$.dialog.$.overlay.content.querySelector('#content');
-    const footerBlock = this.$.dialog.$.overlay.content.querySelector('[part=footer]');
-    if (rtl) {
-      contentBlock.setAttribute('dir', 'rtl');
-      footerBlock.setAttribute('dir', 'rtl');
-    } else {
-      contentBlock.removeAttribute('dir');
-      footerBlock.removeAttribute('dir');
-    }
-  }
-
-  /** @private */
-  _openedChanged() {
-    if (!this.opened) {
-      return;
-    }
-
-    // TODO: A temporary hack as far as `vaadin-dialog` doesn't support the Polymer Template API anymore.
-    this.$.dialog.$.overlay.template = this.$.dialogTemplate;
-
-    const overlay = this.$.dialog.$.overlay;
-
-    Array.from(this.childNodes).forEach((c) => {
-      const newChild = overlay.$.content.appendChild(c);
-      if (newChild.getAttribute && newChild.getAttribute('slot') == 'confirm-button' && newChild.focus) {
-        this._confirmButton = newChild;
-      }
-    });
-
-    this.__toggleContentRTL(this.__isRTL);
-
-    requestAnimationFrame(() => {
-      const confirmButton = this._confirmButton || overlay.content.querySelector('#confirm');
-      confirmButton.focus();
-
-      const { height } = getComputedStyle(overlay.content.querySelector('[part=footer]'));
-      this.$.dialog.$.overlay.style.setProperty('--_vaadin-confirm-dialog-footer-height', height);
-    });
-  }
-
-  /** @private */
-  _escPressed(event) {
-    if (!event.defaultPrevented) {
-      this._cancel();
-    }
-  }
-
-  /** @private */
-  _confirm() {
-    this.dispatchEvent(new CustomEvent('confirm'));
-    this.opened = false;
-  }
-
-  /** @private */
-  _cancel() {
-    this.dispatchEvent(new CustomEvent('cancel'));
-    this.opened = false;
-  }
-
-  /** @private */
-  _reject() {
-    this.dispatchEvent(new CustomEvent('reject'));
-    this.opened = false;
-  }
-
-  /** @private */
-  _getAriaLabel(header) {
-    return header || 'confirmation';
-  }
-
-  /** @private */
-  _setWidth(width) {
-    this._setDimensionIfAttached('width', width);
-  }
-
-  /** @private */
-  _setHeight(height) {
-    this._setDimensionIfAttached('height', height);
-  }
-
-  /** @private */
-  _setDimensionIfAttached(name, value) {
-    if (this.$ && this.$.dialog) {
-      this._setDimension(name, value);
-    } else {
-      this._dimensions = this._dimensions || {};
-      this._dimensions[name] = value;
-    }
-  }
-
-  /** @private */
-  _setDimension(name, value) {
-    this.$.dialog.$.overlay.style.setProperty(`--_vaadin-confirm-dialog-content-${name}`, value);
-  }
-
-  /**
-   * @event confirm
-   * fired when Confirm button was pressed.
-   */
-
-  /**
-   * @event cancel
-   * fired when Cancel button or Escape key was pressed.
-   */
-
-  /**
-   * @event reject
-   * fired when Reject button was pressed.
-   */
-}
-
-customElements.define(ConfirmDialogElement.is, ConfirmDialogElement);
-
-export { ConfirmDialogElement };
+export * from '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';

package/theme/lumo/vaadin-confirm-dialog.js

@@ -1,4 +1 @@
-import '@vaadin/vaadin-dialog/theme/lumo/vaadin-dialog.js';
-import '@vaadin/vaadin-button/theme/lumo/vaadin-button.js';
-import './vaadin-confirm-dialog-styles.js';
-import '../../src/vaadin-confirm-dialog.js';
+import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog.js';

package/theme/material/vaadin-confirm-dialog.js

@@ -1,4 +1 @@
-import '@vaadin/vaadin-dialog/theme/material/vaadin-dialog.js';
-import '@vaadin/vaadin-button/theme/material/vaadin-button.js';
-import './vaadin-confirm-dialog-styles.js';
-import '../../src/vaadin-confirm-dialog.js';
+import '@vaadin/confirm-dialog/theme/material/vaadin-confirm-dialog.js';

package/theme/lumo/vaadin-confirm-dialog-styles.js

@@ -1,115 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-
-registerStyles(
-  'vaadin-dialog-overlay',
-  css`
-    :host([theme~='_vaadin-confirm-dialog-dialog-overlay-theme']) [part='content'] {
-      height: auto;
-      box-sizing: content-box;
-    }
-  `,
-  { moduleId: 'lumo-confirm-dialog-overlay' }
-);
-
-registerStyles(
-  'vaadin-confirm-dialog',
-  css`
-    #content {
-      height: calc(
-        var(--_vaadin-confirm-dialog-content-height) - var(--_vaadin-confirm-dialog-footer-height) - var(--lumo-space-s)
-      );
-      width: var(--_vaadin-confirm-dialog-content-width);
-    }
-
-    [part='header'],
-    .header {
-      margin-top: var(--lumo-space-s);
-      margin-bottom: var(--lumo-space-m);
-    }
-
-    [part='message'] {
-      width: 25em;
-      min-width: 100%;
-      max-width: 100%;
-    }
-
-    [part='footer'] {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      margin: calc(var(--lumo-space-l) * -1);
-      margin-top: var(--lumo-space-l);
-      padding: 0 var(--lumo-space-l);
-      background-color: var(--lumo-contrast-5pct);
-    }
-
-    [part='footer'] div {
-      margin-top: var(--lumo-space-s);
-      margin-bottom: var(--lumo-space-s);
-    }
-
-    vaadin-button[theme~='tertiary'] {
-      padding-left: var(--lumo-space-s);
-      padding-right: var(--lumo-space-s);
-    }
-
-    .cancel-button {
-      flex-grow: 1;
-    }
-
-    :not([dir='rtl']) > .cancel-button {
-      margin-left: calc(var(--lumo-space-s) * -1);
-    }
-
-    :not([dir='rtl']) > .confirm-button {
-      margin-right: calc(var(--lumo-space-s) * -1);
-    }
-
-    :not([dir='rtl']) > .reject-button,
-    :not([dir='rtl']) > .confirm-button {
-      margin-left: var(--lumo-space-s);
-    }
-
-    @media (max-width: 360px) {
-      [part='footer'] {
-        flex-direction: column-reverse;
-      }
-
-      [part='footer'] div {
-        margin: var(--lumo-space-xs) calc(var(--lumo-space-l) / -2) calc(var(--lumo-space-xs) * -1);
-      }
-
-      [part='footer'] vaadin-button,
-      [part='footer'] ::slotted(*) {
-        width: 100%;
-        margin-top: var(--lumo-space-xs);
-        margin-bottom: var(--lumo-space-xs);
-      }
-
-      [part='footer'] .confirm-button {
-        margin-top: var(--lumo-space-s);
-      }
-
-      [part='footer'] .cancel-button {
-        margin-bottom: var(--lumo-space-s);
-      }
-    }
-
-    /* RTL specific styles */
-    [dir='rtl'] > .cancel-button {
-      margin-right: calc(var(--lumo-space-s) * -1);
-    }
-
-    [dir='rtl'] > .confirm-button {
-      margin-left: calc(var(--lumo-space-s) * -1);
-    }
-
-    [dir='rtl'] > .reject-button,
-    [dir='rtl'] > .confirm-button {
-      margin-right: var(--lumo-space-s);
-    }
-  `,
-  { moduleId: 'lumo-confirm-dialog' }
-);

package/theme/material/vaadin-confirm-dialog-styles.js

@@ -1,89 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-
-registerStyles(
-  'vaadin-dialog-overlay',
-  css`
-    :host([theme~='_vaadin-confirm-dialog-dialog-overlay-theme']) [part='overlay'] {
-      max-width: 100%;
-      min-width: 0;
-    }
-
-    :host([theme~='_vaadin-confirm-dialog-dialog-overlay-theme']) [part='content'] {
-      padding: 8px 24px;
-      min-width: 0;
-      height: auto;
-      box-sizing: content-box;
-    }
-  `,
-  { moduleId: 'material-confirm-dialog-overlay' }
-);
-
-registerStyles(
-  'vaadin-confirm-dialog',
-  css`
-    #content {
-      height: calc(var(--_vaadin-confirm-dialog-content-height) - var(--_vaadin-confirm-dialog-footer-height) - 39px);
-      width: var(--_vaadin-confirm-dialog-content-width);
-    }
-
-    [part='message'] {
-      width: 25em;
-      max-width: 100%;
-      margin-right: 24px;
-    }
-
-    [part='footer'] {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      margin-top: 28px;
-      margin-right: -16px;
-    }
-
-    [part='footer']:not([dir='rtl']) div:nth-child(-n + 2) vaadin-button,
-    [part='footer']:not([dir='rtl']) div:nth-child(-n + 2) ::slotted(*) {
-      margin-right: 8px;
-    }
-
-    @media (max-width: 360px) {
-      [part='footer'] {
-        flex-direction: column-reverse;
-        align-items: flex-end;
-      }
-
-      [part='footer'] div:nth-child(-n + 2) vaadin-button,
-      [part='footer'] div:nth-child(-n + 2) ::slotted(*) {
-        margin-top: 8px;
-        margin-right: 0;
-      }
-
-      [part='footer'] div:nth-last-child(1) vaadin-button,
-      [part='footer'] div:nth-last-child(1) ::slotted(*) {
-        margin-top: 8px;
-      }
-
-      /* RTL specific styles */
-      [part='footer'][dir='rtl'] div:nth-child(-n + 2) vaadin-button,
-      [part='footer'][dir='rtl'] div:nth-child(-n + 2) ::slotted(*) {
-        margin-left: 0;
-      }
-    }
-
-    /* RTL specific styles */
-    [dir='rtl'] > [part='message'] {
-      margin-left: 24px;
-      margin-right: 0;
-    }
-
-    [part='footer'][dir='rtl'] {
-      margin-left: -16px;
-      margin-right: 0;
-    }
-
-    [part='footer'][dir='rtl'] div:nth-child(-n + 2) vaadin-button,
-    [part='footer'][dir='rtl'] div:nth-child(-n + 2) ::slotted(*) {
-      margin-left: 8px;
-    }
-  `,
-  { moduleId: 'material-confirm-dialog' }
-);