@vaadin/notification 24.6.0-alpha4 → 24.6.0-alpha6

package/src/vaadin-notification-styles.js

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const notificationContainerStyles = css`
+  :host {
+    position: fixed;
+    z-index: 1000;
+    inset: 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    pointer-events: none;
+  }
+
+  [region-group] {
+    flex: 1 1 0%;
+    display: flex;
+  }
+
+  [region-group='top'] {
+    align-items: flex-start;
+  }
+
+  [region-group='bottom'] {
+    align-items: flex-end;
+  }
+
+  [region-group] > [region] {
+    flex: 1 1 0%;
+  }
+
+  @media (max-width: 420px) {
+    [region-group] {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    [region-group='top'] {
+      justify-content: flex-start;
+    }
+
+    [region-group='bottom'] {
+      justify-content: flex-end;
+    }
+
+    [region-group] > [region] {
+      flex: initial;
+    }
+  }
+`;
+
+export const notificationCardStyles = css`
+  :host {
+    display: block;
+  }
+
+  [part='overlay'] {
+    pointer-events: auto;
+  }
+
+  @media (forced-colors: active) {
+    [part='overlay'] {
+      outline: 3px solid;
+    }
+  }
+`;

package/src/vaadin-notification.d.ts

@@ -5,22 +5,21 @@
  */
 import type { TemplateResult } from 'lit';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+import {
+  NotificationContainerMixin,
+  NotificationMixin,
+  type NotificationPosition,
+} from './vaadin-notification-mixin.js';
 
-export type NotificationPosition =
-  | 'bottom-center'
-  | 'bottom-end'
-  | 'bottom-start'
-  | 'bottom-stretch'
-  | 'middle'
-  | 'top-center'
-  | 'top-end'
-  | 'top-start'
-  | 'top-stretch';
+export * from './vaadin-notification-mixin.js';
 
-export type NotificationRenderer = (root: HTMLElement, notification: Notification) => void;
+export interface ShowOptions {
+  assertive?: boolean;
+  duration?: number;
+  position?: NotificationPosition;
+  theme?: string;
+}
 
 /**
  * Fired when the `opened` property changes.
@@ -39,22 +38,10 @@ export interface NotificationCustomEventMap {
 
 export interface NotificationEventMap extends HTMLElementEventMap, NotificationCustomEventMap {}
 
-export interface ShowOptions {
-  assertive?: boolean;
-  duration?: number;
-  position?: NotificationPosition;
-  theme?: string;
-}
-
 /**
  * An element used internally by `<vaadin-notification>`. Not intended to be used separately.
  */
-declare class NotificationContainer extends ElementMixin(ThemableMixin(HTMLElement)) {
-  /**
-   * True when the container is opened
-   */
-  opened: boolean;
-}
+declare class NotificationContainer extends NotificationContainerMixin(ElementMixin(ThemableMixin(HTMLElement))) {}
 
 /**
  * An element used internally by `<vaadin-notification>`. Not intended to be used separately.
@@ -108,7 +95,7 @@ declare class NotificationCard extends ThemableMixin(HTMLElement) {}
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} closed - Fired when the notification is closed.
  */
-declare class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement))) {
+declare class Notification extends NotificationMixin(ElementMixin(HTMLElement)) {
   /**
    * Shows a notification with the given content.
    * By default, positions the notification at `bottom-start` and uses a 5 second duration.
@@ -134,58 +121,6 @@ declare class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementM
    */
   static show(contents: TemplateResult | string, options?: ShowOptions): Notification;
 
-  /**
-   * When true, the notification card has `aria-live` attribute set to
-   * `assertive` instead of `polite`. This makes screen readers announce
-   * the notification content immediately when it appears.
-   */
-  assertive: boolean;
-
-  /**
-   * The duration in milliseconds to show the notification.
-   * Set to `0` or a negative number to disable the notification auto-closing.
-   */
-  duration: number;
-
-  /**
-   * True if the notification is currently displayed.
-   */
-  opened: boolean;
-
-  /**
-   * Alignment of the notification in the viewport
-   * Valid values are `top-stretch|top-start|top-center|top-end|middle|bottom-start|bottom-center|bottom-end|bottom-stretch`
-   */
-  position: NotificationPosition;
-
-  /**
-   * Custom function for rendering the content of the notification.
-   * Receives two arguments:
-   *
-   * - `root` The `<vaadin-notification-card>` DOM element. Append
-   *   your content to it.
-   * - `notification` The reference to the `<vaadin-notification>` element.
-   */
-  renderer: NotificationRenderer | undefined;
-
-  /**
-   * Requests an update for the content of the notification.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   */
-  requestContentUpdate(): void;
-
-  /**
-   * Opens the notification.
-   */
-  open(): void;
-
-  /**
-   * Closes the notification.
-   */
-  close(): void;
-
   addEventListener<K extends keyof NotificationEventMap>(
     type: K,
     listener: (this: Notification, ev: NotificationEventMap[K]) => void,