@db-ux/v-core-components 5.5.0 → 5.6.1

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @db-ux/v-core-components
 
+## 5.6.1
+
+### Patch Changes
+
+- fix(DBControlPanel): open drilldown with a transition instead of a clip-path - [see commit b4165ee](https://github.com/db-ux-design-system/core-web/commit/b4165ee83c5c8ae14bfd3b4755c48d8b99bae1a6):
+    - open the navigation drilldown with a transition instead of a `clip-path`
+    - pin the drilldown overlay to the scroll viewport so it is not shifted up by an existing scroll offset
+    - restore the flat-icon navigation indicator and the drilldown group icons
+    - recompute the navigation variant on viewport resize so it no longer sticks to popover after switching from drilldown
+    - reduce the navigation item and expand button gap to fix wrong icon spacing
+    - move `data-icon` / `data-show-icon` for a navigation item group from the group `<li>` to its expand button (CSS-only consumers who hand-write the markup have to move these attributes onto the `.db-control-panel-navigation-item-group-expand-button`)
+- fix(DBPopover): a controlled `open` no longer freezes the page in Angular - [see commit 2f14f69](https://github.com/db-ux-design-system/core-web/commit/2f14f69919bd57853661e90edc8f36915974e306)
+- fix(DBFooterMeta): remove double space before the copyright holder in Angular - [see commit bc83f12](https://github.com/db-ux-design-system/core-web/commit/bc83f1280911791ff8c4a7ab611589825109f332):
+    - The copyright sign and its non-breaking space were a text node next to the `copyright` interpolation. For Angular that generated `©&nbsp; {{copyright()}}`, and Angular does not collapse whitespace next to a `&nbsp;`, so the Angular output rendered the line about 3px wider than React and Vue. Sign and space are now part of the interpolated expression, so every target renders the same text.
+- docs(DBIcon): document that the icon is always decorative - [see commit 6d48a36](https://github.com/db-ux-design-system/core-web/commit/6d48a366bf7078e52e029e73103d686a36198bb8):
+    - The usage examples showed `<DBIcon icon="x_placeholder">Icon</DBIcon>`, which suggests the child text is rendered somewhere. It is not: the component renders `aria-hidden="true"` and `font-size: 0`, so `text` and children are hidden both visually and from the accessibility tree, and `role` / `aria-label` on the component have no effect either. The examples now show the icon without content, and a new accessibility page explains how to label an informative icon (named wrapper, the parent component's `icon` property, or the `data-icon` attribute).
+- fix(DBShell): stop reserving an empty sub-navigation row on mobile - [see commit bc83f12](https://github.com/db-ux-design-system/core-web/commit/bc83f1280911791ff8c4a7ab611589825109f332):
+    - The mobile grid templates declared the `sub-navigation` row unconditionally, while the desktop templates guard it with `:has()`. Without a sub-navigation the empty row captured any unplaced child of `DBShell` -- a `DBFooter` added as a direct child was rendered between the control panel and the content instead of below it. The mobile templates now add the row only when a sub-navigation is present, matching desktop.
+    - Also documents the supported composition: a footer belongs in the `endSlot` of `DBShellContent`, not in `DBShell`.
+- fix(DBShell): prevent logo position jump between expanded and collapsed state - [see commit 2fe98a8](https://github.com/db-ux-design-system/core-web/commit/2fe98a82a6a52f40f41593bd437945795f30a7b8)
+- style(Dialog & Drawer): corrected the headlines `font-family` (regular, instead of heading) - [see commit 2938761](https://github.com/db-ux-design-system/core-web/commit/29387612c7834664dbd93102dc09141c021fa159)
+
+## 5.6.0
+
+### Minor Changes
+
+- feat(DBPagination): add controlled pagination component - [see commit 333d265](https://github.com/db-ux-design-system/core-web/commit/333d265974b64c159e68918d76565ef854f593b5)
+- feat(DBDialog): add `DBDialog`, `DBDialogHeader` and `DBDialogFooter` - [see commit 477e716](https://github.com/db-ux-design-system/core-web/commit/477e71630bee91ab280462857a5921777a02e8fd):
+    - Based on the native `<dialog>` element, using its centring and top-layer behaviour. Supports `backdrop` (`strong`, `weak`, `none`) and `containerSize` (`small`, `medium`, `large`, `full`).
+    - Open/close declaratively via `open`, natively via Invoker Commands (`command`/`commandfor`) or `<form method="dialog">`; reports `onClose` and `onCancel`.
+    - `DBDialogHeader` provides the heading, `startSlot`/`endSlot` and the close button, and composes the dialog's `aria-labelledby` (appending its heading id, preserving a consumer value; a consumer `aria-label` still wins). `DBDialogFooter` holds the actions.
+    - Adjust the max inline size with `--db-dialog-max-width` and the viewport distance with `--db-dialog-viewport-inset`.
+- feat(DBDrawer): new event props and renamed header content class - [see commit 477e716](https://github.com/db-ux-design-system/core-web/commit/477e71630bee91ab280462857a5921777a02e8fd):
+    - Adds the `onClick` and `onCancel` props to `DBDrawerProps` (matching `DBDialog`). They are composed with the internal ponyfill handlers, so a consumer callback fires and `onCancel` can veto a native close via `event.preventDefault()`.
+    - Renames the heading wrapper class `db-drawer-header-container` to `db-drawer-header-content` (same for `db-dialog-header-content`) and moves the start slot before it. Update selectors that target the old class.
+- feat(DBLoadingIndicator): add component to handle spinners, progress-bars etc. - [see commit a0f37cf](https://github.com/db-ux-design-system/core-web/commit/a0f37cf3531b94ace8be6bd606a08de2d7ee5f35)
+
+### Patch Changes
+
+- fix(DBDrawer): accessibility, dismissal and shared dialog layer - [see commit 477e716](https://github.com/db-ux-design-system/core-web/commit/477e71630bee91ab280462857a5921777a02e8fd):
+    - The header composes the drawer's `aria-labelledby` (appending its heading id, preserving a consumer value) instead of overwriting it; a consumer `aria-label` still wins.
+    - Non-modal drawers (`backdrop="none"`, `variant="inside"`, `position="absolute"`) now dismiss on Escape and backdrop click in browsers without `closedby` support (e.g. Firefox ESR) via the ponyfill.
+    - Generates the fallback `id` hydration-safely (via the framework `useId()`), re-syncing when the consumer `id` changes or is cleared, so the document never keeps a stale or duplicate id.
+    - `open={undefined}` no longer counts as "closed", so a natively opened drawer stays open until `open` is set explicitly.
+    - Now uses the shared dialog utils, style mixins and ponyfill module. Behaviour change: the header close button no longer calls `stopPropagation()`, so its click follows native bubbling like every other click in the drawer (identify it via `command="request-close"` on `event.target` if you relied on the old behaviour).
+    - Behaviour change: `onClose` now fires on the native `<dialog>` `close` event, so its argument is that `close` event rather than the originating `MouseEvent`/`KeyboardEvent`. The declared `DBDrawerProps["onClose"]` type still reflects the previous union. In the edge case of distinguishing Escape, backdrop and close-button dismissal via `event.key`/`event.type`/`event.target` inside `onClose`, read the initiating event from `onCancel` (Escape/cancel) or `onClick` (pointer) instead.
+
 ## 5.5.0
 
 ### Patch Changes

package/agent/Icon.md

@@ -5,19 +5,20 @@
 ```vue
 <template>
   <h1>DBIcon Documentation Examples</h1>
-  <h2>1. Default Icon</h2>
-  <DBIcon>Default Icon</DBIcon>
-  <h2>2. Icon Variants</h2>
-  <DBIcon icon="user">User Icon</DBIcon>
-  <DBIcon icon="settings">Settings Icon</DBIcon>
-  <h2>3. Icon Weights</h2>
-  <DBIcon weight="16">16px Icon</DBIcon>
-  <DBIcon weight="24">24px Icon</DBIcon>
-  <DBIcon weight="32">32px Icon</DBIcon>
-  <h2>4. Custom Class</h2>
-  <DBIcon>Custom Class Icon</DBIcon>
-  <h2>5. Text Content</h2>
-  <DBIcon text="Icon with Text">Icon with Text</DBIcon>
+  <h2>1. Icon Variants</h2>
+  <DBIcon icon="user"></DBIcon>
+  <DBIcon icon="settings"></DBIcon>
+  <h2>2. Icon Weights</h2>
+  <DBIcon icon="user" weight="16"></DBIcon>
+  <DBIcon icon="user" weight="24"></DBIcon>
+  <DBIcon icon="user" weight="32"></DBIcon>
+  <h2>3. Custom Class</h2>
+  <DBIcon icon="user"></DBIcon>
+  <h2>
+    4. Informative icon: DBIcon always renders aria-hidden, so the accessible
+    name goes on a wrapper
+  </h2>
+  <span role="img" aria-label="Coach"><DBIcon icon="coach"></DBIcon></span>
 </template>
 
 <script setup lang="ts">

package/agent/LoadingIndicator.md

@@ -0,0 +1,57 @@
+
+
+# LoadingIndicator Examples (vue)
+
+```vue
+<template>
+  <h1>DBLoadingIndicator Documentation Examples</h1>
+  <h2>1. Default (indeterminate circular spinner)</h2>
+  <DBLoadingIndicator>Loading</DBLoadingIndicator>
+  <h2>2. Variants</h2>
+  <DBLoadingIndicator variant="circular">Circular</DBLoadingIndicator>
+  <DBLoadingIndicator variant="bar">Bar</DBLoadingIndicator>
+  <h2>3. Orientation (circular)</h2>
+  <DBLoadingIndicator variant="circular" orientation="horizontal">
+    Horizontal
+  </DBLoadingIndicator>
+  <DBLoadingIndicator variant="circular" orientation="vertical">
+    Vertical
+  </DBLoadingIndicator>
+  <h2>4. Sizes</h2>
+  <DBLoadingIndicator size="small">Small</DBLoadingIndicator>
+  <DBLoadingIndicator size="medium">Medium</DBLoadingIndicator>
+  <h2>5. Determinate progress</h2>
+  <DBLoadingIndicator
+    progressText="42 of 100"
+    :indeterminate="false"
+    :value="42"
+    :max="100"
+  >
+    Uploading
+  </DBLoadingIndicator>
+  <h2>6. States</h2>
+  <DBLoadingIndicator state="inactive">Inactive</DBLoadingIndicator>
+  <DBLoadingIndicator state="active">Active</DBLoadingIndicator>
+  <DBLoadingIndicator state="successful"> Successful </DBLoadingIndicator>
+  <DBLoadingIndicator state="critical">Critical</DBLoadingIndicator>
+  <h2>7. Overlay</h2>
+  <DBLoadingIndicator :overlay="true"> Loading overlay </DBLoadingIndicator>
+  <h2>8. Delay before showing</h2>
+  <DBLoadingIndicator delay="slow">Delayed (slow)</DBLoadingIndicator>
+  <DBLoadingIndicator delay="fast">Delayed (fast)</DBLoadingIndicator>
+  <h2>9. Show progress text</h2>
+  <DBLoadingIndicator
+    progressText="42 of 100"
+    :indeterminate="false"
+    :value="42"
+    :max="100"
+    :showProgressText="true"
+  >
+    With progress text
+  </DBLoadingIndicator>
+</template>
+
+<script setup lang="ts">
+import { DBLoadingIndicator } from "@db-ux/v-v-core-components";
+</script>
+```

package/agent/_instructions.md

@@ -15,6 +15,7 @@
   - use for `DBNotification` or `Notification` the file __agent-path__/agent/Notification.md
   - use for `DBNavigationItem` or `NavigationItem` the file __agent-path__/agent/NavigationItem.md
   - use for `DBNavigation` or `Navigation` the file __agent-path__/agent/Navigation.md
+  - use for `DBLoadingIndicator` or `LoadingIndicator` the file __agent-path__/agent/LoadingIndicator.md
   - use for `DBLink` or `Link` the file __agent-path__/agent/Link.md
   - use for `DBInput` or `Input` the file __agent-path__/agent/Input.md
   - use for `DBInfotext` or `Infotext` the file __agent-path__/agent/Infotext.md

package/dist/components/control-panel-navigation-item-group/model.d.ts

@@ -38,5 +38,30 @@ export type DBControlPanelNavigationItemGroupDefaultState = {
     _handleMouseEnter: () => void;
     _handleMouseLeave: () => void;
     _setSiblingsInert: (inert: boolean) => void;
+    /**
+     * The overlay is position: absolute; inset: 0 and anchors to the
+     * nearest positioned scroll owner. Which element scrolls depends on
+     * the layout (desktop scroll container, mobile drawer scroll
+     * container, or the left sub-navigation) and, for a nested level,
+     * it is the parent drilldown overlay menu. Rather than guess the
+     * owner per layout, walk up from this group and reset the scrollTop
+     * of every ancestor that currently has one. That clears the offset
+     * on whichever ancestor actually scrolled so the inset:0 overlay
+     * aligns with the visible scrollport.
+     *
+     * The walk stops at the outermost element for the current layout:
+     * - desktop main panel: the desktop scroll container
+     * - mobile drawer: the mobile drawer scroll container
+     * - left sub-navigation: the shell-sub-navigation wrapper, which
+     *   sits directly above the scroll owner
+     *   (.db-control-panel-navigation)
+     *
+     * .db-control-panel-navigation is intentionally NOT a boundary: in
+     * the desktop/mobile layouts it is only a descendant of the real
+     * scroll container, so stopping there would miss the element that
+     * actually scrolled. The document body is the hard backstop and is
+     * never itself reset, so the walk can never touch page-level scroll.
+     */
+    _resetScrollOwner: () => void;
 };
 export type DBControlPanelNavigationItemGroupState = DBControlPanelNavigationItemGroupDefaultState & ClickEventState<HTMLButtonElement> & GlobalState & NavigationBehaviorState & InitializedState;

package/dist/components/dialog/dialog.vue.d.ts

@@ -0,0 +1,30 @@
+import { ClickEvent, GeneralEvent } from "../../shared/model.js";
+import { DBDialogProps } from "./model.js";
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    footer?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBDialogProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBDialogProps> & Readonly<{}>, {
+    id: string;
+    children: any;
+    className: string;
+    propOverrides: import("../../shared/model.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
+    open: boolean | string;
+    onClick: (event: ClickEvent<HTMLDialogElement>) => void;
+    backdrop: import("./model.js", { with: { "resolution-mode": "import" } }).DialogBackdropType;
+    containerSize: import("./model.js", { with: { "resolution-mode": "import" } }).DialogContainerSizeType;
+    onCancel: (event: GeneralEvent<HTMLDialogElement>) => void;
+    onClose: (event?: Event | undefined) => void;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1 @@
+export { default as DBDialog } from './dialog.vue';

package/dist/components/dialog/model.d.ts

@@ -0,0 +1,36 @@
+import type { CancelEventProps, ClickEvent, CloseEventProps, CloseEventState, DialogDrawerDefaultState, GeneralEvent, GlobalProps, GlobalState } from '../../shared/model.js';
+export declare const DialogBackdropList: readonly ["none", "strong", "weak"];
+export type DialogBackdropType = (typeof DialogBackdropList)[number];
+export declare const DialogContainerSizeList: readonly ["small", "medium", "large", "full"];
+export type DialogContainerSizeType = (typeof DialogContainerSizeList)[number];
+export type DBDialogDefaultProps = {
+    /**
+     * The backdrop attribute changes the opacity of the backdrop.
+     * The backdrop 'none' will use `dialog.show()` instead of `dialog.showModal()`
+     */
+    backdrop?: DialogBackdropType;
+    /**
+     * Change the maximum inline size of the dialog. Defaults to `medium`.
+     */
+    containerSize?: DialogContainerSizeType;
+    /**
+     * Slot for changing the header of the dialog.
+     */
+    header?: any;
+    /**
+     * Slot for changing the footer of the dialog.
+     */
+    footer?: any;
+    /**
+     * The open attribute opens or closes the dialog based on the state.
+     */
+    open?: boolean | string;
+    /**
+     * React specific onClick to pass to forward ref. Composed with the
+     * backdrop-close ponyfill, so a consumer handler still fires.
+     */
+    onClick?: (event: ClickEvent<HTMLDialogElement>) => void;
+};
+export type DBDialogProps = DBDialogDefaultProps & GlobalProps & CancelEventProps<HTMLDialogElement> & CloseEventProps<GeneralEvent<HTMLDialogElement>>;
+export type DBDialogDefaultState = DialogDrawerDefaultState;
+export type DBDialogState = DBDialogDefaultState & GlobalState & CloseEventState<GeneralEvent<HTMLDialogElement>>;

package/dist/components/dialog-footer/dialog-footer.vue.d.ts

@@ -0,0 +1,18 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<import("../../index.js", { with: { "resolution-mode": "import" } }).GlobalProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("../../index.js", { with: { "resolution-mode": "import" } }).GlobalProps> & Readonly<{}>, {
+    id: string;
+    children: any;
+    className: string;
+    propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/dialog-footer/index.d.ts

@@ -0,0 +1 @@
+export { default as DBDialogFooter } from './dialog-footer.vue';

package/dist/components/dialog-footer/model.d.ts

@@ -0,0 +1,5 @@
+import type { GlobalProps, GlobalState } from '../../shared/model.js';
+export type DBDialogFooterDefaultProps = {};
+export type DBDialogFooterProps = DBDialogFooterDefaultProps & GlobalProps;
+export type DBDialogFooterDefaultState = {};
+export type DBDialogFooterState = DBDialogFooterDefaultState & GlobalState;

package/dist/components/dialog-header/dialog-header.vue.d.ts

@@ -0,0 +1,26 @@
+import { DBDialogHeaderProps } from "./model.js";
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    'start-slot'?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    'end-slot'?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBDialogHeaderProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBDialogHeaderProps> & Readonly<{}>, {
+    id: string;
+    children: any;
+    className: string;
+    propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
+    text: string;
+    closeButtonId: string;
+    closeButtonText: string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/dialog-header/index.d.ts

@@ -0,0 +1 @@
+export { default as DBDialogHeader } from './dialog-header.vue';

package/dist/components/dialog-header/model.d.ts

@@ -0,0 +1,10 @@
+import { EndSlotProps, GlobalProps, GlobalState, InnerCloseButtonProps, StartSlotProps, TextProps } from '../../shared/model.js';
+export type DBDialogHeaderDefaultProps = {};
+export type DBDialogHeaderProps = DBDialogHeaderDefaultProps & InnerCloseButtonProps & TextProps & GlobalProps & StartSlotProps & EndSlotProps;
+export type DBDialogHeaderDefaultState = {
+    _headingId?: string;
+    _dialog?: HTMLDialogElement;
+    _resolveDialog: () => void;
+    removeAriaLabelledBy: () => void;
+};
+export type DBDialogHeaderState = DBDialogHeaderDefaultState & GlobalState;

package/dist/components/drawer/drawer.vue.d.ts

@@ -1,3 +1,4 @@
+import { ClickEvent, GeneralEvent } from "../../shared/model.js";
 import { DBDrawerProps } from "./model.js";
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
@@ -13,6 +14,7 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBDrawerPr
     className: string;
     propOverrides: import("../../shared/model.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
     open: boolean | string;
+    onClick: (event: ClickEvent<HTMLDialogElement>) => void;
     variant: import("./model.js", { with: { "resolution-mode": "import" } }).DrawerVariantType;
     backdrop: import("./model.js", { with: { "resolution-mode": "import" } }).DrawerBackdropType;
     direction: import("./model.js", { with: { "resolution-mode": "import" } }).DrawerDirectionType;
@@ -20,6 +22,7 @@ declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBDrawerPr
     rounded: boolean | string;
     position: import("./model.js", { with: { "resolution-mode": "import" } }).DrawerPositionType;
     containerSize: import("./model.js", { with: { "resolution-mode": "import" } }).DrawerContainerSizeType;
+    onCancel: (event: GeneralEvent<HTMLDialogElement>) => void;
     onClose: (event?: KeyboardEvent | MouseEvent | undefined) => void;
 }, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/drawer/model.d.ts

@@ -1,4 +1,4 @@
-import type { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState } from '../../shared/model.js';
+import type { CancelEventProps, ClickEvent, CloseEventProps, CloseEventState, DialogDrawerDefaultState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState } from '../../shared/model.js';
 export declare const DrawerBackdropList: readonly ["none", "strong", "weak", "invisible"];
 export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
 export declare const DrawerDirectionList: readonly ["to-left", "to-right", "up", "down"];
@@ -9,6 +9,8 @@ export declare const DrawerPositionList: readonly ["fixed", "absolute"];
 export type DrawerPositionType = (typeof DrawerPositionList)[number];
 export declare const DrawerContainerSizeList: readonly ["small", "medium", "large", "full"];
 export type DrawerContainerSizeType = (typeof DrawerContainerSizeList)[number];
+export declare const DrawerClosedByList: readonly ["any", "closerequest", "none"];
+export type DrawerClosedByType = (typeof DrawerClosedByList)[number];
 export type DBDrawerDefaultProps = {
     /**
      * The backdrop attribute changes the opacity of the backdrop.
@@ -56,12 +58,12 @@ export type DBDrawerDefaultProps = {
      * Change the size of the drawer container.
      */
     containerSize?: DrawerContainerSizeType;
+    /**
+     * React specific onClick to pass to forward ref. Composed with the
+     * backdrop-close ponyfill, so a consumer handler still fires.
+     */
+    onClick?: (event: ClickEvent<HTMLDialogElement>) => void;
 };
-export type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>>;
-export type DBDrawerDefaultState = {
-    handleDialogOpen: () => void;
-    isNotModal: () => boolean;
-    handleBackdropPointerDown: (event: any) => void;
-    backdropPointerDown: boolean;
-};
-export type DBDrawerState = DBDrawerDefaultState & GlobalState & CloseEventState<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InitializedState;
+export type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CancelEventProps<HTMLDialogElement> & CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>>;
+export type DBDrawerDefaultState = DialogDrawerDefaultState;
+export type DBDrawerState = DBDrawerDefaultState & GlobalState & CloseEventState<Event> & InitializedState;

package/dist/components/drawer-header/model.d.ts

@@ -2,8 +2,9 @@ import { EndSlotProps, GlobalProps, GlobalState, InnerCloseButtonProps, StartSlo
 export type DBDrawerHeaderDefaultProps = {};
 export type DBDrawerHeaderProps = DBDrawerHeaderDefaultProps & InnerCloseButtonProps & TextProps & GlobalProps & StartSlotProps & EndSlotProps;
 export type DBDrawerHeaderDefaultState = {
-    _headingId: string;
-    setAriaLabelledBy: () => void;
+    _headingId?: string;
+    _dialog?: HTMLDialogElement;
+    _resolveDialog: () => void;
     removeAriaLabelledBy: () => void;
 };
 export type DBDrawerHeaderState = DBDrawerHeaderDefaultState & GlobalState;

package/dist/components/loading-indicator/examples/_timeout.data.d.ts

@@ -0,0 +1,6 @@
+import { LoadingIndicatorStateType } from '../model.js';
+export type TimeoutStore = {
+    loadingState: LoadingIndicatorStateType;
+    onTimeoutFn: () => void;
+    getLabel: (loadingState: LoadingIndicatorStateType | string) => string;
+};

package/dist/components/loading-indicator/index.d.ts

@@ -0,0 +1 @@
+export { default as DBLoadingIndicator } from './loading-indicator.vue';

package/dist/components/loading-indicator/loading-indicator.vue.d.ts

@@ -0,0 +1,41 @@
+import { DBLoadingIndicatorProps } from "./model.js";
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBLoadingIndicatorProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBLoadingIndicatorProps> & Readonly<{}>, {
+    id: string;
+    children: any;
+    className: string;
+    propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType & {
+        progress?: {
+            ariaLabel?: string;
+        };
+    };
+    role: "alert" | "status";
+    label: string;
+    value: string | number;
+    variant: import("./model.js", { with: { "resolution-mode": "import" } }).LoadingIndicatorVariantType;
+    size: import("../../index.js", { with: { "resolution-mode": "import" } }).SizeType | "large";
+    indeterminate: boolean | string;
+    showLabel: boolean | string;
+    delay: import("../../index.js", { with: { "resolution-mode": "import" } }).PopoverDelayType;
+    orientation: import("../../index.js", { with: { "resolution-mode": "import" } }).OrientationType;
+    max: number | string;
+    progressText: string;
+    showProgressText: boolean | string;
+    overlay: boolean | string;
+    state: import("./model.js", { with: { "resolution-mode": "import" } }).LoadingIndicatorStateType | string;
+    autoDisable: boolean | string;
+    onTimeout: (state?: import("./model.js", { with: { "resolution-mode": "import" } }).LoadingIndicatorStateType | string) => void;
+    timeoutDuration: number | string;
+    timeoutActiveDuration: number | string;
+}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/loading-indicator/model.d.ts

@@ -0,0 +1,93 @@
+import { DelayProps, GlobalProps, GlobalState, InitializedState, OrientationProps, PropOverridesType, ShowLabelProps, SizeType } from '../../shared/model.js';
+export declare const LoadingIndicatorVariantList: readonly ["bar", "circular"];
+export type LoadingIndicatorVariantType = (typeof LoadingIndicatorVariantList)[number];
+export declare const LoadingIndicatorStateList: readonly ["inactive", "active", "successful", "critical"];
+export type LoadingIndicatorStateType = (typeof LoadingIndicatorStateList)[number];
+export type DBLoadingIndicatorDefaultProps = {
+    /**
+     * If enabled the loading indicator shows an ongoing animation without a known completion (spinner/indeterminate progress). Set to false to show a determinate value via value/max.
+     */
+    indeterminate?: boolean | string;
+    /**
+     * The label associated with the progress element. Alternative to passing children.
+     */
+    label?: string;
+    /**
+     * The maximum value of the determinate progress (used together with value). Defaults to 100.
+     */
+    max?: number | string;
+    /**
+     * The text describing the current progress (e.g. "42 of 100"), shown next to the indicator.
+     */
+    progressText?: string;
+    /**
+     * Enables/disables the visibility of the progressText
+     */
+    showProgressText?: boolean | string;
+    /**
+     * The current value of the determinate progress (used together with max).
+     */
+    value?: string | number;
+    /**
+     * If enabled the loading indicator is rendered as an overlay covering its positioned parent.
+     */
+    overlay?: boolean | string;
+    /**
+     * The variant changes the visual appearance of the loading indicator between a circular spinner and a horizontal bar.
+     */
+    variant?: LoadingIndicatorVariantType;
+    /**
+     * The current loading state. Controls the animation and the announced live-region role.
+     */
+    state?: LoadingIndicatorStateType | string;
+    /**
+     * Disable the parent component (e.g. a DBButton) when loading indicator is inside it
+     */
+    autoDisable?: boolean | string;
+    /**
+     * Overrides the automatically derived ARIA live-region role. By default the role is derived from the state ("alert" for critical, otherwise "status").
+     */
+    role?: 'alert' | 'status';
+    /**
+     * Triggers after a timeout. For "active" after 5 seconds, for "successful" and "critical" after 2 seconds
+     */
+    onTimeout?: (state?: LoadingIndicatorStateType | string) => void;
+    /**
+     * The size attribute changes the font-size and other related sizes of the component.
+     */
+    size?: SizeType | 'large';
+    /**
+     * The timeoutDuration attribute specifies the time in milliseconds before the loading indicator triggers the onTimeout event. Default is 2000ms.
+     */
+    timeoutDuration?: number | string;
+    /**
+     * The timeoutActiveDuration attribute specifies the time in milliseconds before the loading indicator triggers the onTimeout event when the state is "active". Default is 5000ms.
+     */
+    timeoutActiveDuration?: number | string;
+};
+export type DBLoadingIndicatorProps = DBLoadingIndicatorDefaultProps & GlobalProps & ShowLabelProps & OrientationProps & DelayProps & {
+    /**
+     * Allows overriding specific props on nested elements or internal component structure
+     */
+    propOverrides?: PropOverridesType & {
+        progress?: {
+            ariaLabel?: string;
+        };
+    };
+};
+export type DBLoadingIndicatorDefaultState = {
+    _loadingState?: LoadingIndicatorStateType | string;
+    _previousLoadingState?: LoadingIndicatorStateType | string;
+    _labelId?: string;
+    _progressId?: string;
+    _timeoutId?: ReturnType<typeof setTimeout>;
+    _didDisableParent?: boolean;
+    _didSetAriaBusy?: boolean;
+    getPercentage: () => string | undefined;
+    getRole: () => string | undefined;
+    handleParentAria: (remove: boolean) => void;
+    handleParentDisabled: (forceEnable?: boolean) => void;
+    handleUnmount: () => void;
+    resetIds: () => void;
+};
+export type DBLoadingIndicatorState = DBLoadingIndicatorDefaultState & GlobalState & InitializedState;

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

@@ -0,0 +1 @@
+export { default as DBPagination } from './pagination.vue';