@nvidia-elements/core 0.0.0 → 0.0.1

package/dist/notification/notification-group2.js

@@ -1,41 +0,0 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
-import { audit as t } from "../internal/controllers/audit.controller.js";
-import { TypeNativePopoverController as n } from "../internal/controllers/type-native-popover.controller.js";
-import { useStyles as r } from "../internal/styles/index.js";
-import { popoverStyles as i } from "../internal/styles/popover2.js";
-import a from "./notification-group.js";
-import { LitElement as o, html as s } from "lit";
-import { property as c } from "lit/decorators/property.js";
-//#region src/notification/notification-group.ts
-var l = class extends o {
-	constructor(...e) {
-		super(...e), this.anchor = globalThis.document?.body, this.typeNativePopoverController = new n(this);
-	}
-	static {
-		this.styles = r([i, a]);
-	}
-	get popoverType() {
-		return "manual";
-	}
-	static {
-		this.metadata = {
-			tag: "nve-notification-group",
-			version: "0.0.0",
-			children: ["nve-notification"]
-		};
-	}
-	render() {
-		return s`<div internal-host><slot @slotchange="${() => this.showPopover()}"></slot></div>`;
-	}
-};
-e([c({ type: String })], l.prototype, "anchor", void 0), e([c({
-	type: String,
-	reflect: !0
-})], l.prototype, "position", void 0), e([c({
-	type: String,
-	reflect: !0
-})], l.prototype, "alignment", void 0), l = e([t()], l);
-//#endregion
-export { l as NotificationGroup };
-
-//# sourceMappingURL=notification-group2.js.map

package/dist/notification/notification-group2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"notification-group2.js","names":[],"sources":["../../src/notification/notification-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport { audit, popoverStyles, TypeNativePopoverController, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './notification-group.css?inline';\n\n/**\n * @element nve-notification-group\n * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/notification\n * @slot - default slot for `nve-notification`\n * @cssprop --box-shadow\n * @cssprop --animation-duration - Duration of notification group open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/\n */\n@audit()\nexport class NotificationGroup extends LitElement {\n  /**\n   * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n  /**\n   * Sets the position of the popover relative to the anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition;\n\n  /**\n   * Sets the alignment of the popover relative to the anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  protected typeNativePopoverController = new TypeNativePopoverController<NotificationGroup>(this);\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return 'manual';\n  }\n\n  static readonly metadata = {\n    tag: 'nve-notification-group',\n    version: '0.0.0',\n    children: ['nve-notification']\n  };\n\n  render() {\n    return html`\n    <div internal-host>\n      <slot @slotchange=${() => this.showPopover()}></slot>\n    </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;AAoBO,IAAA,IAAA,cAAgC,EAAW;;6BAKW,WAAW,UAAU,yCAYxC,IAAI,EAA+C,KAAK;;;gBAEhF,EAAU,CAAC,GAAe,EAAO,CAAC;;CAGlD,IAAI,cAA2B;AAC7B,SAAO;;;kBAGkB;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,mBAAA;GACZ;;CAED,SAAS;AACP,SAAO,CAAI,+CAEiB,KAAK,aAAa,CAAC;;;GA9BhD,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAK1B,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,SAhB3C,GAAO,CAAA,EAAA,EAAA"}

package/dist/notification/notification.d.ts

@@ -1,106 +0,0 @@
-import { PropertyValues, LitElement } from 'lit';
-import { Icon } from '../icon';
-import { IconButton } from '../icon-button';
-import { PopoverAlign, PopoverType, SupportStatus, PopoverPosition, TypeNativePopoverController } from '../internal';
-/**
- * @element nve-notification
- * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- * @since 0.6.0
- * @entrypoint \@nvidia-elements/core/notification
- * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)
- * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)
- * @event open - Dispatched when the notification opens.
- * @event close - Dispatched when the notification closes.
- * @slot - default content slot
- * @slot icon - content slot for the status icon
- * @cssprop --border-radius
- * @cssprop --background
- * @cssprop --color
- * @cssprop --padding
- * @cssprop --box-shadow
- * @cssprop --min-width
- * @cssprop --width
- * @cssprop --max-width
- * @cssprop --border
- * @cssprop --status-border
- * @cssprop --gap
- * @cssprop --status-color
- * @cssprop --animation-duration - Duration of notification open/close animations
- * @csspart status-icon - The status icon element
- * @csspart icon-button - The close icon button element
- * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
- */
-export declare class Notification extends LitElement {
-    #private;
-    /**
-     * (optional) By default the popover will automatically anchor itself relative to the trigger element.
-     * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.
-     */
-    anchor: string | HTMLElement;
-    /**
-     * @deprecated Use the popover API instead.
-     * The trigger defines what element triggers an `open` interaction event.
-     * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.
-     */
-    trigger: string | HTMLElement;
-    /**
-     * Sets the side position of the popover relative to the provided anchor element.
-     */
-    position: PopoverPosition;
-    /**
-     * Sets the alignment of the popover relative to the provided anchor element.
-     */
-    alignment: PopoverAlign;
-    /**
-     * @deprecated Use the popover API instead.
-     * Determines if popover visibility behavior should be automatically controlled by the trigger.
-     */
-    behaviorTrigger: boolean;
-    /**
-     * Determines if a close button should render within notification.
-     */
-    closable: boolean;
-    /**
-     * A delayed `close` event will occur determined from the provided millisecond value.
-     */
-    closeTimeout: number;
-    /**
-     * Determines the visual status of the notification.
-     */
-    status: SupportStatus;
-    /**
-     * Flat container option applies when embedding within another containing element such as a drawer.
-     */
-    container?: 'flat';
-    /**
-     * Enables updating internal string values for internationalization.
-     */
-    i18n: Partial<import('../internal').I18nStrings & {
-        __set: boolean;
-    }>;
-    /**
-     * @private
-     */
-    inline: boolean;
-    /** @private */
-    get popoverType(): PopoverType;
-    /** @private */
-    get popoverInline(): boolean;
-    /** @private */
-    _internals: ElementInternals;
-    protected typeNativePopoverController: TypeNativePopoverController<Notification>;
-    static styles: import('lit').CSSResult[];
-    static readonly metadata: {
-        tag: string;
-        version: string;
-    };
-    static elementDefinitions: {
-        [Icon.metadata.tag]: typeof Icon;
-        [IconButton.metadata.tag]: typeof IconButton;
-    };
-    render(): import('lit-html').TemplateResult<1>;
-    connectedCallback(): void;
-    firstUpdated(props: PropertyValues<this>): Promise<void>;
-    updated(props: PropertyValues<this>): void;
-    hidePopover(): void;
-}

package/dist/notification/notification.examples.js

@@ -1,6 +0,0 @@
-//#region src/notification/notification.examples.ts
-var e = "";
-//#endregion
-export { e as default };
-
-//# sourceMappingURL=notification.examples.js.map

package/dist/notification/notification.examples.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"notification.examples.js","names":[],"sources":["../../src/notification/notification.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/notification/define.js';\nimport '@nvidia-elements/core/dialog/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\n\nexport default {\n  title: 'Elements/Notification',\n  component: 'nve-notification',\n  parameters: {\n    layout: 'centered'\n  }\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic notification with auto-dismiss timeout for temporary feedback messages. Use notifications for system-generated alerts, confirmations, or status updates that don't require immediate user action, automatically dismissing after a set duration.\n */\nexport const Default = {\n  render: () => html`\n<nve-notification id=\"notification\" position=\"top\" close-timeout=\"2000\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button popovertarget=\"notification\">button</nve-button>\n`\n};\n\n/**\n * @summary Notification with actions for immediate user response. Use notifications with actions when the notification requires user decision-making (like \"Retry\", \"View Details\", or \"Undo\"), making the next step clear and reducing friction in error recovery or task completion flows.\n */\nexport const Actions = {\n  render: () => html`\n<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n  <div nve-layout=\"row gap:sm align:right\">\n    <nve-button container=\"inline\">Dismiss</nve-button>\n    <nve-button container=\"inline\">Accept</nve-button>\n  </div>\n</nve-notification>\n`\n};\n\n/**\n * @summary Custom status color for notification. Use custom status color and icon slot to convey a different meaning than the default status color. Use sparingly as it can add unnecessary cognitive load to the user.\n * @tags test-case\n */\nexport const CustomStatus = {\n  render: () => html`\n<nve-notification style=\"--status-color: var(--nve-ref-color-purple-plum-800)\" position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n  <nve-icon slot=\"icon\" name=\"sparkles\" aria-label=\"Info\"></nve-icon>\n  <div nve-layout=\"row align:right\">\n    <nve-button container=\"inline\">Action</nve-button>\n  </div>\n</nve-notification>\n`\n};\n\n/**\n * @summary Standard notification layout with title and body content in centered positioning for consistent notification structure.\n * @tags test-case\n */\nexport const Visual = {\n  render: () => html`\n<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n`\n};\n\n/**\n * @summary Notification with text wrapping for longer content. Use when notification messages exceed single-line length, but keep content concise for better readability and user comprehension.\n * @tags test-case\n */\nexport const ContentWrap = {\n  render: () => html`\n<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\" style=\"width: 230px\">some text content in a notification with some really long text in it that just keeps going...</p>\n</nve-notification>\n  `\n};\n\n/**\n * @summary Event handling for notification lifecycle events. Useful for adding custom behavior when notification state changes.\n * @tags test-case\n */\nexport const Events = {\n  render: () => html`\n<nve-notification id=\"notification\" position=\"top\" close-timeout=\"2000\" closable>\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button popovertarget=\"notification\">button</nve-button>\n<script type=\"module\">\n  const notification = document.querySelector('nve-notification');\n  notification.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  notification.addEventListener('toggle', () => console.log('toggle'));\n  notification.addEventListener('close', () => console.log('close'));\n  notification.addEventListener('open', () => console.log('open'));\n</script>\n`\n};\n\n/**\n * @summary Dynamic notification group with programmatic creation and stacking. Perfect for toast-style notifications generated by user actions or system events, with progressive timeout and automatic removal patterns for managing many notifications.\n */\nexport const InteractiveGroup = {\n  render: () => html`\n<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-button>generate</nve-button>\n\n<script type=\"module\">\n  const button = document.querySelector('nve-button');\n  button.addEventListener('click', () => {\n    const notification = document.createElement('nve-notification');\n    notification.closable = true;\n    notification.status = ['warning', 'danger', 'success', 'accent', undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML = '<h3 nve-text=\"label\">' + (notification.status ?? 'default') + '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 1000 * (document.querySelectorAll('nve-notification').length + 1);\n    notification.addEventListener('close', () => notification.remove(), { once: true });\n    notification.position = 'bottom';\n    notification.alignment = 'end';\n\n    document.querySelector('nve-notification-group').prepend(notification);\n  });\n</script>\n`\n};\n\n/**\n * @summary Notification status variants for different message types and severity levels. Use status to convey message importance: success for confirmations, warning for cautions, danger for errors, and accent for general information requiring attention.\n */\nexport const Status = {\n  render: () => html`\n<nve-notification-group position=\"center\">\n  <nve-notification>\n    <h3 nve-text=\"label\">Default</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"accent\">\n    <h3 nve-text=\"label\">Accent</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"success\">\n    <h3 nve-text=\"label\">Success</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"warning\">\n    <h3 nve-text=\"label\">Warning</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"danger\">\n    <h3 nve-text=\"label\">Danger</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n  `\n};\n\n/**\n * @summary Notification positioning and alignment options for flexible screen placement. Use consistent positioning for notification types: bottom-right for success confirmations, top-center for warnings, accommodating different screen sizes and user attention patterns.\n * @tags test-case\n */\nexport const Alignment = {\n  render: () => html`\n<nve-notification position=\"top\">\n  <h3 nve-text=\"label\">Top</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"top\" alignment=\"start\">\n  <h3 nve-text=\"label\">Top Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"top\" alignment=\"end\">\n  <h3 nve-text=\"label\">Top End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n\n<nve-notification position=\"right\">\n  <h3 nve-text=\"label\">Right</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\" alignment=\"start\">\n  <h3 nve-text=\"label\">Right Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\" alignment=\"end\">\n  <h3 nve-text=\"label\">Right End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n\n<nve-notification position=\"bottom\">\n  <h3 nve-text=\"label\">Bottom</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\" alignment=\"start\">\n  <h3 nve-text=\"label\">Bottom Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\" alignment=\"end\">\n  <h3 nve-text=\"label\">Bottom End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n\n<nve-notification position=\"left\">\n  <h3 nve-text=\"label\">Left</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\" alignment=\"start\">\n  <h3 nve-text=\"label\">Left Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\" alignment=\"end\">\n  <h3 nve-text=\"label\">Left End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n  `\n};\n\n/**\n * @summary Basic notification positioning at screen edges without alignment specification. Use edge positions for standard notification placement, choosing position based on content importance and user workflow patterns.\n * @tags test-case\n */\nexport const Position = {\n  render: () => html`\n<nve-notification position=\"top\">\n  <h3 nve-text=\"label\">Position Top</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\">\n  <h3 nve-text=\"label\">Position Right</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\">\n  <h3 nve-text=\"label\">Position Bottom</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\">\n  <h3 nve-text=\"label\">Position Left</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n  `\n};\n\n/**\n * @summary Grouped notifications with consistent positioning for stacking many messages. Use notification groups to manage many alerts in an organized queue, maintaining visual consistency and providing users with a clear notification center.\n * @tags test-case\n */\nexport const PositionGroup = {\n  render: () => html`\n<nve-notification-group position=\"top\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n\n<nve-notification-group position=\"right\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n\n<nve-notification-group position=\"bottom\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n\n<nve-notification-group position=\"left\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n  `\n};\n\n/**\n * @summary Notification center pattern using drawer for persistent notification management. Perfect for applications with frequent notifications, allowing users to review, manage, and act on many notifications in a dedicated space with bulk actions.\n * @tags test-case\n */\nexport const Drawer = {\n  render: () => html`\n<nve-drawer closable position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Notifications</h3>\n  </nve-drawer-header>\n  <nve-notification closable container=\"flat\">\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"accent\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"success\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"warning\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"danger\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-drawer-footer>\n    <div nve-layout=\"grid gap:sm span-items:6\">\n      <nve-button interaction=\"destructive\" container=\"flat\">Clear All</nve-button>\n      <nve-button>Mark All as Read</nve-button>\n    </div>\n  </nve-drawer-footer>\n</nve-drawer>\n  `,\n};\n\n/**\n * @summary Notification functionality within shadow DOM for Web Component architectures. Verifies proper notification positioning and behavior when used inside encapsulated component boundaries, essential for component libraries.\n * @tags test-case\n */\nexport const ShadowRoot = {\n  render: () => html`\n<test-notification-shadow-root></test-notification-shadow-root>\n<script type=\"module\">\n  customElements.define('test-notification-shadow-root', class TestNotificationShadowRoot extends HTMLElement {\n    constructor() {\n      super();\n      this._shadow = this.attachShadow({mode: 'open'});\n\n      const template = document.createElement('template');\n      template.innerHTML = \\`\n        <nve-notification position=\"top\">\n          top\n        </nve-notification>\n        <nve-notification position=\"top\" alignment=\"start\">\n          top start\n        </nve-notification>\n        <nve-notification position=\"top\" alignment=\"end\">\n          top end\n        </nve-notification>\n\n        <nve-notification position=\"right\">\n          right\n        </nve-notification>\n        <nve-notification position=\"right\" alignment=\"start\">\n          right start\n        </nve-notification>\n        <nve-notification position=\"right\" alignment=\"end\">\n          right end\n        </nve-notification>\n\n        <nve-notification position=\"bottom\">\n          bottom\n        </nve-notification>\n        <nve-notification position=\"bottom\" alignment=\"start\">\n          bottom start\n        </nve-notification>\n        <nve-notification position=\"bottom\" alignment=\"end\">\n          bottom end\n        </nve-notification>\n\n        <nve-notification position=\"left\">\n          left\n        </nve-notification>\n        <nve-notification position=\"left\" alignment=\"start\">\n          left start\n        </nve-notification>\n        <nve-notification position=\"left\" alignment=\"end\">\n          left end\n        </nve-notification>\n      \\`;\n      this._shadow.appendChild(template.content);\n    }\n  });\n</script>\n  `\n};\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @summary Legacy behavior-trigger pattern for automatic notification lifecycle management. Deprecated approach with manual trigger attribute, prefer modern popovertarget API for cleaner notification triggering.\n * @tags test-case\n */\nexport const LegacyBehaviorTrigger = {\n  render: () => html`\n<nve-notification trigger=\"notification-btn\" behavior-trigger hidden closable position=\"bottom\" close-timeout=\"2000\">\n  <h3 nve-text=\"label\">notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button id=\"notification-btn\">show</nve-button>\n`\n};\n\n/**\n * @summary Notification layering with modal dialogs for proper stacking context. Ensures notifications appear above dialogs without interfering with modal interactions, crucial for complex UI layering scenarios.\n * @tags test-case\n */\nexport const Layers = {\n  render: () => html`\n<nve-button>Notification</nve-button>\n<nve-button popovertarget=\"dialog\">Dialog</nve-button>\n<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">Notification</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">This should not cause the dialog to close</p>\n</nve-dialog>\n\n<script type=\"module\">\n  const button = document.querySelector('nve-button');\n  button.addEventListener('click', () => {\n    const notification = document.createElement('nve-notification');\n    notification.closable = true;\n    notification.status = ['warning', 'danger', 'success', 'accent', undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML =\n      '<h3 nve-text=\"label\">' +\n      (notification.status ?? \"default\") +\n      '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 3000 * (document.querySelectorAll('nve-notification').length + 1);\n    notification.addEventListener('close', () => notification.remove(), { once: true });\n    notification.position = 'bottom';\n    notification.alignment = 'end';\n    document.querySelector('nve-notification-group').prepend(notification);\n  });\n</script>\n`\n};"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/notification/notification.examples.json

@@ -1,163 +0,0 @@
-{
-  "element": "nve-notification",
-  "entrypoint": "@nvidia-elements/core/notification/notification.examples.json",
-  "items": [
-    {
-      "id": "core-notification_default",
-      "name": "Default",
-      "template": "<nve-notification id=\"notification\" position=\"top\" close-timeout=\"2000\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button popovertarget=\"notification\">button</nve-button>\n",
-      "summary": "Basic notification with auto-dismiss timeout for temporary feedback messages. Use notifications for system-generated alerts, confirmations, or status updates that don't require immediate user action, automatically dismissing after a set duration.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "core-notification_actions",
-      "name": "Actions",
-      "template": "<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n  <div nve-layout=\"row gap:sm align:right\">\n    <nve-button container=\"inline\">Dismiss</nve-button>\n    <nve-button container=\"inline\">Accept</nve-button>\n  </div>\n</nve-notification>\n",
-      "summary": "Notification with actions for immediate user response. Use notifications with actions when the notification requires user decision-making (like \"Retry\", \"View Details\", or \"Undo\"), making the next step clear and reducing friction in error recovery or task completion flows.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "core-notification_custom-status",
-      "name": "CustomStatus",
-      "template": "<nve-notification style=\"--status-color: var(--nve-ref-color-purple-plum-800)\" position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n  <nve-icon slot=\"icon\" name=\"sparkles\" aria-label=\"Info\"></nve-icon>\n  <div nve-layout=\"row align:right\">\n    <nve-button container=\"inline\">Action</nve-button>\n  </div>\n</nve-notification>\n",
-      "summary": "Custom status color for notification. Use custom status color and icon slot to convey a different meaning than the default status color. Use sparingly as it can add unnecessary cognitive load to the user.",
-      "description": "",
-      "composition": true,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-notification_visual",
-      "name": "Visual",
-      "template": "<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
-      "summary": "Standard notification layout with title and body content in centered positioning for consistent notification structure.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-notification_content-wrap",
-      "name": "ContentWrap",
-      "template": "<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\" style=\"width: 230px\">\n    some text content in a notification with some really long text in it that just keeps going...\n  </p>\n</nve-notification>\n",
-      "summary": "Notification with text wrapping for longer content. Use when notification messages exceed single-line length, but keep content concise for better readability and user comprehension.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-notification_events",
-      "name": "Events",
-      "template": "<nve-notification id=\"notification\" position=\"top\" close-timeout=\"2000\" closable>\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button popovertarget=\"notification\">button</nve-button>\n<script type=\"module\">\n  const notification = document.querySelector(\"nve-notification\");\n  notification.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  notification.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  notification.addEventListener(\"close\", () => console.log(\"close\"));\n  notification.addEventListener(\"open\", () => console.log(\"open\"));\n</script>\n",
-      "summary": "Event handling for notification lifecycle events. Useful for adding custom behavior when notification state changes.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-notification_interactive-group",
-      "name": "InteractiveGroup",
-      "template": "<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-button>generate</nve-button>\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const notification = document.createElement(\"nve-notification\");\n    notification.closable = true;\n    notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML =\n      '<h3 nve-text=\"label\">' +\n      (notification.status ?? \"default\") +\n      '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 1000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n    notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n    notification.position = \"bottom\";\n    notification.alignment = \"end\";\n    document.querySelector(\"nve-notification-group\").prepend(notification);\n  });\n</script>\n",
-      "summary": "Dynamic notification group with programmatic creation and stacking. Perfect for toast-style notifications generated by user actions or system events, with progressive timeout and automatic removal patterns for managing many notifications.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "core-notification_status",
-      "name": "Status",
-      "template": "<nve-notification-group position=\"center\">\n  <nve-notification>\n    <h3 nve-text=\"label\">Default</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"accent\">\n    <h3 nve-text=\"label\">Accent</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"success\">\n    <h3 nve-text=\"label\">Success</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"warning\">\n    <h3 nve-text=\"label\">Warning</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"danger\">\n    <h3 nve-text=\"label\">Danger</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n",
-      "summary": "Notification status variants for different message types and severity levels. Use status to convey message importance: success for confirmations, warning for cautions, danger for errors, and accent for general information requiring attention.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "core-notification_alignment",
-      "name": "Alignment",
-      "template": "<nve-notification position=\"top\">\n  <h3 nve-text=\"label\">Top</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"top\" alignment=\"start\">\n  <h3 nve-text=\"label\">Top Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"top\" alignment=\"end\">\n  <h3 nve-text=\"label\">Top End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\">\n  <h3 nve-text=\"label\">Right</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\" alignment=\"start\">\n  <h3 nve-text=\"label\">Right Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\" alignment=\"end\">\n  <h3 nve-text=\"label\">Right End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\">\n  <h3 nve-text=\"label\">Bottom</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\" alignment=\"start\">\n  <h3 nve-text=\"label\">Bottom Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\" alignment=\"end\">\n  <h3 nve-text=\"label\">Bottom End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\">\n  <h3 nve-text=\"label\">Left</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\" alignment=\"start\">\n  <h3 nve-text=\"label\">Left Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\" alignment=\"end\">\n  <h3 nve-text=\"label\">Left End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
-      "summary": "Notification positioning and alignment options for flexible screen placement. Use consistent positioning for notification types: bottom-right for success confirmations, top-center for warnings, accommodating different screen sizes and user attention patterns.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-notification_position",
-      "name": "Position",
-      "template": "<nve-notification position=\"top\">\n  <h3 nve-text=\"label\">Position Top</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\">\n  <h3 nve-text=\"label\">Position Right</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\">\n  <h3 nve-text=\"label\">Position Bottom</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\">\n  <h3 nve-text=\"label\">Position Left</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
-      "summary": "Basic notification positioning at screen edges without alignment specification. Use edge positions for standard notification placement, choosing position based on content importance and user workflow patterns.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-notification_position-group",
-      "name": "PositionGroup",
-      "template": "<nve-notification-group position=\"top\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n<nve-notification-group position=\"right\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n<nve-notification-group position=\"bottom\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n<nve-notification-group position=\"left\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n",
-      "summary": "Grouped notifications with consistent positioning for stacking many messages. Use notification groups to manage many alerts in an organized queue, maintaining visual consistency and providing users with a clear notification center.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-notification_drawer",
-      "name": "Drawer",
-      "template": "<nve-drawer closable position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Notifications</h3>\n  </nve-drawer-header>\n  <nve-notification closable container=\"flat\">\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"accent\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"success\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"warning\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"danger\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-drawer-footer>\n    <div nve-layout=\"grid gap:sm span-items:6\">\n      <nve-button interaction=\"destructive\" container=\"flat\">Clear All</nve-button>\n      <nve-button>Mark All as Read</nve-button>\n    </div>\n  </nve-drawer-footer>\n</nve-drawer>\n",
-      "summary": "Notification center pattern using drawer for persistent notification management. Perfect for applications with frequent notifications, allowing users to review, manage, and act on many notifications in a dedicated space with bulk actions.",
-      "description": "",
-      "composition": true,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-notification_shadow-root",
-      "name": "ShadowRoot",
-      "template": "<test-notification-shadow-root></test-notification-shadow-root>\n<script type=\"module\">\n  customElements.define(\n    \"test-notification-shadow-root\",\n    class TestNotificationShadowRoot extends HTMLElement {\n      constructor() {\n        super();\n        this._shadow = this.attachShadow({ mode: \"open\" });\n        const template = document.createElement(\"template\");\n        template.innerHTML = `\n        <nve-notification position=\"top\">\n          top\n        </nve-notification>\n        <nve-notification position=\"top\" alignment=\"start\">\n          top start\n        </nve-notification>\n        <nve-notification position=\"top\" alignment=\"end\">\n          top end\n        </nve-notification>\n        <nve-notification position=\"right\">\n          right\n        </nve-notification>\n        <nve-notification position=\"right\" alignment=\"start\">\n          right start\n        </nve-notification>\n        <nve-notification position=\"right\" alignment=\"end\">\n          right end\n        </nve-notification>\n        <nve-notification position=\"bottom\">\n          bottom\n        </nve-notification>\n        <nve-notification position=\"bottom\" alignment=\"start\">\n          bottom start\n        </nve-notification>\n        <nve-notification position=\"bottom\" alignment=\"end\">\n          bottom end\n        </nve-notification>\n        <nve-notification position=\"left\">\n          left\n        </nve-notification>\n        <nve-notification position=\"left\" alignment=\"start\">\n          left start\n        </nve-notification>\n        <nve-notification position=\"left\" alignment=\"end\">\n          left end\n        </nve-notification>\n      `;\n        this._shadow.appendChild(template.content);\n      }\n    },\n  );\n</script>\n",
-      "summary": "Notification functionality within shadow DOM for Web Component architectures. Verifies proper notification positioning and behavior when used inside encapsulated component boundaries, essential for component libraries.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-notification_legacy-behavior-trigger",
-      "name": "LegacyBehaviorTrigger",
-      "template": "<nve-notification trigger=\"notification-btn\" behavior-trigger hidden closable position=\"bottom\" close-timeout=\"2000\">\n  <h3 nve-text=\"label\">notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button id=\"notification-btn\">show</nve-button>\n",
-      "summary": "Legacy behavior-trigger pattern for automatic notification lifecycle management. Deprecated approach with manual trigger attribute, prefer modern popovertarget API for cleaner notification triggering.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-notification_layers",
-      "name": "Layers",
-      "template": "<nve-button>Notification</nve-button>\n<nve-button popovertarget=\"dialog\">Dialog</nve-button>\n<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">Notification</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">This should not cause the dialog to close</p>\n</nve-dialog>\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const notification = document.createElement(\"nve-notification\");\n    notification.closable = true;\n    notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML =\n      '<h3 nve-text=\"label\">' +\n      (notification.status ?? \"default\") +\n      '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 3000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n    notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n    notification.position = \"bottom\";\n    notification.alignment = \"end\";\n    document.querySelector(\"nve-notification-group\").prepend(notification);\n  });\n</script>\n",
-      "summary": "Notification layering with modal dialogs for proper stacking context. Ensures notifications appear above dialogs without interfering with modal interactions, crucial for complex UI layering scenarios.",
-      "description": "",
-      "composition": true,
-      "tags": [
-        "test-case"
-      ]
-    }
-  ]
-}

package/dist/notification/notification.js

@@ -1,6 +0,0 @@
-//#region src/notification/notification.css?inline
-var e = ":host{--nve-sys-layer-popover-arrow-padding: 0px;--nve-sys-layer-popover-arrow-offset: 0px;--nve-sys-layer-popover-offset: var(--nve-ref-space-xl);--nve-sys-interaction-color: var(--color);--nve-sys-interaction-hover-color: var(--color);--border-radius: var(--nve-ref-border-radius-md);--status-color: var(--nve-sys-support-color);--background: var(--nve-sys-layer-popover-background);--color: var(--nve-sys-layer-popover-color);--padding: var(--nve-ref-size-500) var(--nve-ref-size-900);--box-shadow: var(--nve-ref-shadow-400);--gap: var(--nve-ref-space-md);--min-width: 320px;--width: fit-content;--max-width: fit-content;--border: 0;--status-border: 6px solid var(--status-color);width:var(--width)}[internal-host]{box-shadow:var(--box-shadow);padding:var(--padding);border-radius:var(--border-radius);background:var(--background);color:var(--color);gap:var(--gap);border:var(--border);border-inline-start:var(--status-border);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:column;position:relative}[internal-host]:has(nve-icon-button){padding-inline-end:var(--nve-ref-size-1000)}nve-icon-button{position:absolute;inset-block-start:var(--nve-ref-size-150);inset-inline-end:var(--nve-ref-size-150)}nve-icon-button::part(icon){--color: var(--nve-sys-layer-popover-color) !important}[part=status-icon],::slotted([slot=\"icon\"]){position:absolute;inset-block-start:var(--nve-ref-size-400);inset-inline-start:var(--nve-ref-size-300);--color: var(--status-color)}::slotted([nve-text]){color:inherit!important}:host([container=\"flat\"]){--max-width: 100%;--width: 100%;--border-radius: 0;--box-shadow: none;--border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--background: var(--nve-sys-layer-overlay-accent-background);--color: var(--nve-sys-layer-overlay-color);position:relative;margin:0}:host([container=\"flat\"]) nve-icon-button::part(icon){--color: var(--nve-sys-layer-overlay-color) !important}:host([container=\"flat\"]) .popover{border-block-end:var(--border)}:host([status=\"accent\"]){--status-color: var(--nve-sys-support-accent-color)}:host([status=\"success\"]){--status-color: var(--nve-sys-support-success-color)}:host([status=\"warning\"]){--status-color: color-mix(in oklab, var(--nve-sys-support-warning-color) 90%, var(--nve-sys-contrast-mute-color))}:host([status=\"danger\"]){--status-color: var(--nve-sys-support-danger-color)}";
-//#endregion
-export { e as default };
-
-//# sourceMappingURL=notification.js.map

package/dist/notification/notification.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"notification.js","names":[],"sources":["../../src/notification/notification.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --nve-sys-layer-popover-arrow-padding: 0px;\n  --nve-sys-layer-popover-arrow-offset: 0px;\n  --nve-sys-layer-popover-offset: var(--nve-ref-space-xl);\n  --nve-sys-interaction-color: var(--color);\n  --nve-sys-interaction-hover-color: var(--color);\n  --border-radius: var(--nve-ref-border-radius-md);\n  --status-color: var(--nve-sys-support-color);\n  --background: var(--nve-sys-layer-popover-background);\n  --color: var(--nve-sys-layer-popover-color);\n  --padding: var(--nve-ref-size-500) var(--nve-ref-size-900);\n  --box-shadow: var(--nve-ref-shadow-400);\n  --gap: var(--nve-ref-space-md);\n  --min-width: 320px;\n  --width: fit-content;\n  --max-width: fit-content;\n  --border: 0;\n  --status-border: 6px solid var(--status-color);\n  width: var(--width);\n}\n\n[internal-host] {\n  box-shadow: var(--box-shadow);\n  padding: var(--padding);\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--color);\n  gap: var(--gap);\n  border: var(--border);\n  border-inline-start: var(--status-border);\n  min-width: var(--min-width);\n  max-width: var(--max-width);\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n\n[internal-host]:has(nve-icon-button) {\n  padding-inline-end: var(--nve-ref-size-1000);\n}\n\nnve-icon-button {\n  position: absolute;\n  inset-block-start: var(--nve-ref-size-150);\n  inset-inline-end: var(--nve-ref-size-150);\n}\n\nnve-icon-button::part(icon) {\n  --color: var(--nve-sys-layer-popover-color) !important;\n}\n\n[part='status-icon'],\n::slotted([slot='icon']) {\n  position: absolute;\n  inset-block-start: var(--nve-ref-size-400);\n  inset-inline-start: var(--nve-ref-size-300);\n  --color: var(--status-color);\n}\n\n::slotted([nve-text]),\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n:host([container='flat']) {\n  --max-width: 100%;\n  --width: 100%;\n  --border-radius: 0;\n  --box-shadow: none;\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --background: var(--nve-sys-layer-overlay-accent-background);\n  --color: var(--nve-sys-layer-overlay-color);\n  position: relative;\n  margin: 0;\n}\n\n:host([container='flat']) nve-icon-button::part(icon) {\n  --color: var(--nve-sys-layer-overlay-color) !important;\n}\n\n:host([container='flat']) .popover {\n  border-block-end: var(--border);\n}\n\n:host([status='accent']) {\n  --status-color: var(--nve-sys-support-accent-color);\n}\n\n:host([status='success']) {\n  --status-color: var(--nve-sys-support-success-color);\n}\n\n:host([status='warning']) {\n  --status-color: color-mix(in oklab, var(--nve-sys-support-warning-color) 90%, var(--nve-sys-contrast-mute-color));\n}\n\n:host([status='danger']) {\n  --status-color: var(--nve-sys-support-danger-color);\n}\n"],"mappings":""}

package/dist/notification/notification2.js

@@ -1,89 +0,0 @@
-import { attachInternals as e } from "../internal/utils/a11y.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
-import { I18nController as n } from "../internal/controllers/i18n.controller.js";
-import { TypeNativePopoverController as r } from "../internal/controllers/type-native-popover.controller.js";
-import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
-import { useStyles as a } from "../internal/styles/index.js";
-import { popoverStyles as o } from "../internal/styles/popover2.js";
-import { statusIcons as s } from "../internal/types/index.js";
-import { Icon as c } from "../icon/icon2.js";
-import { IconButton as l } from "../icon-button/icon-button2.js";
-import u from "./notification.js";
-import { LitElement as d, html as f } from "lit";
-import { property as p } from "lit/decorators/property.js";
-//#region src/notification/notification.ts
-var m = class extends d {
-	constructor(...e) {
-		super(...e), this.anchor = globalThis.document?.body, this.closable = !1, this.closeTimeout = 0, this.i18n = this.#e.i18n, this.inline = !1;
-	}
-	#e = new n(this);
-	get popoverType() {
-		return "manual";
-	}
-	get popoverInline() {
-		return this.parentElement?.localName === "nve-notification-group" || this.inline || this.container === "flat";
-	}
-	get #t() {
-		return f`<slot name="icon"><nve-icon .name="${s[this.status]}" .ariaLabel="${(this.status ? this.i18n[this.status] : void 0) ?? this.i18n.information}" part="status-icon"></nve-icon></slot>${this.closable ? f`<nve-icon-button part="icon-button" @click="${this.hidePopover}" icon-name="cancel" size="sm" container="flat" .ariaLabel="${this.i18n.close}"></nve-icon-button>` : ""}<slot></slot>`;
-	}
-	static {
-		this.styles = a([o, u]);
-	}
-	static {
-		this.metadata = {
-			tag: "nve-notification",
-			version: "0.0.0"
-		};
-	}
-	static {
-		this.elementDefinitions = {
-			[c.metadata.tag]: c,
-			[l.metadata.tag]: l
-		};
-	}
-	render() {
-		return f`<div internal-host>${this.#t}</div>`;
-	}
-	connectedCallback() {
-		super.connectedCallback(), e(this), this._internals.role = "alert";
-	}
-	async firstUpdated(e) {
-		super.firstUpdated(e), this.popoverInline ? this.setAttribute("nve-popover", "") : this.typeNativePopoverController = new r(this);
-	}
-	updated(e) {
-		super.updated(e), this.#n();
-	}
-	hidePopover() {
-		this.popoverInline ? this.dispatchEvent(new CustomEvent("close", {
-			bubbles: !0,
-			composed: !0
-		})) : super.hidePopover();
-	}
-	#n() {
-		this.popoverInline && this.closeTimeout && !this.hidden && setTimeout(() => this.hidePopover(), this.closeTimeout);
-	}
-};
-t([p({ type: String })], m.prototype, "anchor", void 0), t([p({ type: String })], m.prototype, "trigger", void 0), t([p({
-	type: String,
-	reflect: !0
-})], m.prototype, "position", void 0), t([p({
-	type: String,
-	reflect: !0
-})], m.prototype, "alignment", void 0), t([p({
-	type: Boolean,
-	reflect: !0,
-	attribute: "behavior-trigger"
-})], m.prototype, "behaviorTrigger", void 0), t([p({ type: Boolean })], m.prototype, "closable", void 0), t([p({
-	type: Number,
-	attribute: "close-timeout"
-})], m.prototype, "closeTimeout", void 0), t([p({
-	type: String,
-	reflect: !0
-})], m.prototype, "status", void 0), t([p({
-	type: String,
-	reflect: !0
-})], m.prototype, "container", void 0), t([p({ type: Object })], m.prototype, "i18n", void 0), t([p({ type: Boolean })], m.prototype, "inline", void 0), m = t([i()], m);
-//#endregion
-export { m as Notification };
-
-//# sourceMappingURL=notification2.js.map

package/dist/notification/notification2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"notification2.js","names":["#i18nController","#popoverContent","#setupCloseTimeout"],"sources":["../../src/notification/notification.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverType, SupportStatus, PopoverPosition } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  popoverStyles,\n  statusIcons,\n  useStyles,\n  I18nController,\n  TypeNativePopoverController,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport styles from './notification.css?inline';\n\n/**\n * @element nve-notification\n * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/notification\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the notification opens.\n * @event close - Dispatched when the notification closes.\n * @slot - default content slot\n * @slot icon - content slot for the status icon\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --min-width\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --border\n * @cssprop --status-border\n * @cssprop --gap\n * @cssprop --status-color\n * @cssprop --animation-duration - Duration of notification open/close animations\n * @csspart status-icon - The status icon element\n * @csspart icon-button - The close icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/\n */\n@scopedRegistry()\nexport class Notification extends LitElement {\n  /**\n   * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition;\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * Determines if a close button should render within notification.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * A delayed `close` event will occur determined from the provided millisecond value.\n   */\n  @property({ type: Number, attribute: 'close-timeout' }) closeTimeout = 0;\n\n  /**\n   * Determines the visual status of the notification.\n   */\n  @property({ type: String, reflect: true }) status: SupportStatus;\n\n  /**\n   * Flat container option applies when embedding within another containing element such as a drawer.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /**\n   * @private\n   */\n  @property({ type: Boolean }) inline = false;\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return 'manual';\n  }\n\n  /** @private */\n  get popoverInline() {\n    return this.parentElement?.localName === 'nve-notification-group' || this.inline || this.container === 'flat';\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  protected typeNativePopoverController: TypeNativePopoverController<Notification>;\n\n  get #popoverContent() {\n    return html`\n    <slot name=\"icon\"><nve-icon .name=${statusIcons[this.status]} .ariaLabel=${(this.status ? (this.i18n as Record<string, string>)[this.status] : undefined) ?? this.i18n.information} part=\"status-icon\"></nve-icon></slot>\n    ${this.closable ? html`<nve-icon-button part=\"icon-button\" @click=${this.hidePopover} icon-name=\"cancel\" size=\"sm\" container=\"flat\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n    <slot></slot>`;\n  }\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-notification',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon,\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  render() {\n    return html`\n    <div internal-host>\n      ${this.#popoverContent}\n    </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'alert';\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n\n    if (!this.popoverInline) {\n      this.typeNativePopoverController = new TypeNativePopoverController<Notification>(this);\n    } else {\n      this.setAttribute('nve-popover', '');\n    }\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#setupCloseTimeout();\n  }\n\n  hidePopover(): void {\n    if (this.popoverInline) {\n      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n    } else {\n      super.hidePopover();\n    }\n  }\n\n  /**\n   * The popover controller provides this functionality.\n   * But when the notification is in inline mode the\n   * controller does not run so this sets it up directly.\n   */\n  #setupCloseTimeout() {\n    if (this.popoverInline && this.closeTimeout && !this.hidden) {\n      setTimeout(() => this.hidePopover(), this.closeTimeout);\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAiDO,IAAA,IAAA,cAA2B,EAAW;;6BAKgB,WAAW,UAAU,sBA4BxC,wBAK+B,eAiBpC,MAAA,EAAqB,oBAKlB;;CAVtC,KAAwC,IAAI,EAAqB,KAAK;CAatE,IAAI,cAA2B;AAC7B,SAAO;;CAIT,IAAI,gBAAgB;AAClB,SAAO,KAAK,eAAe,cAAc,4BAA4B,KAAK,UAAU,KAAK,cAAc;;CAQzG,KAAA,IAAsB;AACpB,SAAO,CAAI,sCACyB,EAAY,KAAK,QAAQ,iBAAe,KAAK,SAAU,KAAK,KAAgC,KAAK,UAAU,KAAA,MAAc,KAAK,KAAK,YAAY,yCACjL,KAAK,WAAW,CAAI,+CAA8C,KAAK,YAAY,8DAA4D,KAAK,KAAK,MAAM,wBAAuB,GAAG;;;gBAI7K,EAAU,CAAC,GAAe,EAAO,CAAC;;;kBAEvB;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B;IACzB,EAAK,SAAS,MAAM;IACpB,EAAW,SAAS,MAAM;GAC5B;;CAED,SAAS;AACP,SAAO,CAAI,sBAEP,MAAA,EAAqB;;CAK3B,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO;;CAGzB,MAAM,aAAa,GAA6B;AAG9C,EAFA,MAAM,aAAa,EAAM,EAEpB,KAAK,gBAGR,KAAK,aAAa,eAAe,GAAG,GAFpC,KAAK,8BAA8B,IAAI,EAA0C,KAAK;;CAM1F,QAAQ,GAA6B;AAEnC,EADA,MAAM,QAAQ,EAAM,EACpB,MAAA,GAAyB;;CAG3B,cAAoB;AAClB,EAAI,KAAK,gBACP,KAAK,cAAc,IAAI,YAAY,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC,GAE/E,MAAM,aAAa;;CASvB,KAAqB;AACnB,EAAI,KAAK,iBAAiB,KAAK,gBAAgB,CAAC,KAAK,UACnD,iBAAiB,KAAK,aAAa,EAAE,KAAK,aAAa;;;GAvI1D,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAO1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,KAK1B,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAMzC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAoB,CAAC,CAAA,EAAA,EAAA,WAAA,mBAAA,KAAA,EAAA,KAKzE,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK3B,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAiB,CAAC,CAAA,EAAA,EAAA,WAAA,gBAAA,KAAA,EAAA,KAKtD,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAOzC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,SA7D7B,GAAgB,CAAA,EAAA,EAAA"}

package/dist/page/define.d.ts

@@ -1,10 +0,0 @@
-import { Page, PagePanel, PagePanelContent, PagePanelFooter, PagePanelHeader } from '.';
-declare global {
-    interface HTMLElementTagNameMap {
-        'nve-page': Page;
-        'nve-page-panel': PagePanel;
-        'nve-page-panel-footer': PagePanelFooter;
-        'nve-page-panel-header': PagePanelHeader;
-        'nve-page-panel-content': PagePanelContent;
-    }
-}

package/dist/page/define.js

@@ -1,11 +0,0 @@
-import { define as e } from "../internal/utils/dom.js";
-import { TransitionService as t } from "../internal/services/transition.service.js";
-import { Page as n } from "./page2.js";
-import { PagePanel as r } from "./page-panel/page-panel2.js";
-import { PagePanelContent as i } from "./page-panel/page-panel-content2.js";
-import { PagePanelFooter as a } from "./page-panel/page-panel-footer2.js";
-import { PagePanelHeader as o } from "./page-panel/page-panel-header2.js";
-e(n), e(r), e(a), e(o), e(i), t.enable();
-//#endregion
-
-//# sourceMappingURL=define.js.map

package/dist/page/define.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/page/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define, TransitionService } from '@nvidia-elements/core/internal';\nimport { Page, PagePanel, PagePanelContent, PagePanelFooter, PagePanelHeader } from '@nvidia-elements/core/page';\n\ndefine(Page);\ndefine(PagePanel);\ndefine(PagePanelFooter);\ndefine(PagePanelHeader);\ndefine(PagePanelContent);\n\nTransitionService.enable();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-page': Page;\n    'nve-page-panel': PagePanel;\n    'nve-page-panel-footer': PagePanelFooter;\n    'nve-page-panel-header': PagePanelHeader;\n    'nve-page-panel-content': PagePanelContent;\n  }\n}\n"],"mappings":";;;;;;;AAMA,EAAO,EAAK,EACZ,EAAO,EAAU,EACjB,EAAO,EAAgB,EACvB,EAAO,EAAgB,EACvB,EAAO,EAAiB,EAExB,EAAkB,QAAQ"}

package/dist/page/index.d.ts

@@ -1,5 +0,0 @@
-export * from './page.js';
-export * from './page-panel/page-panel.js';
-export * from './page-panel/page-panel-content.js';
-export * from './page-panel/page-panel-footer.js';
-export * from './page-panel/page-panel-header.js';

package/dist/page/index.js

@@ -1,6 +0,0 @@
-import { Page as e } from "./page2.js";
-import { PagePanel as t } from "./page-panel/page-panel2.js";
-import { PagePanelContent as n } from "./page-panel/page-panel-content2.js";
-import { PagePanelFooter as r } from "./page-panel/page-panel-footer2.js";
-import { PagePanelHeader as i } from "./page-panel/page-panel-header2.js";
-export { e as Page, t as PagePanel, n as PagePanelContent, r as PagePanelFooter, i as PagePanelHeader };

package/dist/page/page-panel/page-panel-content.d.ts

@@ -1,21 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * @element nve-page-panel-content
- * @description Contains the scrollable main body content within a page panel region.
- * @entrypoint \@nvidia-elements/core/page
- * @since 1.15.0
- * @slot - default slot for the page-panel content
- * @cssprop --padding
- * @cssprop --gap
- * @cssprop --width
- * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role
- *
- */
-export declare class PagePanelContent extends LitElement {
-    static styles: import('lit').CSSResult[];
-    static readonly metadata: {
-        tag: string;
-        version: string;
-    };
-    render(): import('lit-html').TemplateResult<1>;
-}