@db-ux/v-core-components 5.4.0 → 5.6.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @db-ux/v-core-components
 
+## 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
+
+- fix(DBCustomSelectListItem): make label bold when checked - [see commit 58df675](https://github.com/db-ux-design-system/core-web/commit/58df6754fde599346696e4e9372d97e13c384082)
+- fix(table): remove unwanted white background on component wrapper for `variant="spaced"` - [see commit 1524afe](https://github.com/db-ux-design-system/core-web/commit/1524afe64488b90e47c133594438182bb47a59e7)
+
 ## 5.4.0
 
 ### Minor Changes

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/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';

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

@@ -0,0 +1,117 @@
+import type { GlobalProps, GlobalState, SizeProps } from '../../shared/model.js';
+/**
+ * A single item the option/`items` API generates. `page` is the one-based page
+ * number, `layout` decides whether the collapsing hides it, and `ellipsis` holds the
+ * gap tokens it borders. This describes what the pagination writes onto the DOM; it is
+ * not a prop the consumer sets.
+ */
+export type PaginationItemType = {
+    page: number;
+    layout: 'always' | 'wide';
+    /**
+     * Space separated gap tokens (`wide-before`, `wide-after`,
+     * `collapsed-before`, `collapsed-after`). Every layout marks its own gaps,
+     * because a marker inherits the visibility of the page that carries it - one
+     * hidden below the breakpoint would take its ellipsis with it. One token per
+     * side, so a page standing between two gaps carries two of them instead of a
+     * value meaning both.
+     */
+    ellipsis?: string;
+    disabled?: boolean;
+    label?: string;
+    /**
+     * Identity of the item across page changes. Keying by list position instead
+     * would move the focus to an adjacent page whenever the window shifts, because
+     * the framework reuses the element for whatever page now sits at that position.
+     */
+    key: string;
+};
+/**
+ * An entry of the `items` prop. A consumer who drives the pagination through data
+ * rather than composed children passes these; `disabled` greys a single page out,
+ * which the design otherwise cannot express.
+ */
+export type PaginationItemOption = {
+    disabled?: boolean | string;
+    label?: string;
+};
+export type DBPaginationDefaultProps = {
+    /**
+     * One-based number of the currently active page. Defaults to `1`.
+     */
+    currentPage?: number | string;
+    /**
+     * Total number of records across all pages. With `pageSize` it decides the page
+     * count. Defaults to `0`.
+     */
+    totalCount?: number | string;
+    /**
+     * Number of records on one page. Defaults to `10`.
+     */
+    pageSize?: number | string;
+    /**
+     * Number of page buttons shown on each side of the current page.
+     */
+    siblingCount?: number | string;
+    /**
+     * Number of page buttons always shown at the start and end. Below the collapsing
+     * breakpoint at most one page is pinned per end, whatever this says - the
+     * collapsed layout exists to be narrow.
+     */
+    boundaryCount?: number | string;
+    /**
+     * Per-page options for the data-driven API, one entry per page. Lets a single
+     * page be disabled. When omitted the pagination derives the pages from
+     * `totalCount` and `pageSize`.
+     */
+    items?: PaginationItemOption[];
+    /**
+     * Accessible label for the pagination navigation landmark.
+     */
+    label?: string;
+    /**
+     * Accessible label for the previous-page button.
+     */
+    previousLabel?: string;
+    /**
+     * Accessible label for the next-page button.
+     */
+    nextLabel?: string;
+    /**
+     * Accessible page-button label. `{page}` and `{totalPages}` are replaced. The
+     * visible text of a page is only its number, so the context lives in this label.
+     */
+    pageLabel?: string;
+    /**
+     * Informs the parent that a different page was requested. The parent must
+     * update `currentPage`; the component never changes it internally.
+     */
+    onPageChange?: (page: number) => void;
+};
+export type DBPaginationProps = DBPaginationDefaultProps & GlobalProps & SizeProps;
+export type DBPaginationDefaultState = {
+    getInteger: (value: number | string | undefined, fallback: number, minimum: number) => number;
+    getRange: (start: number, end: number) => number[];
+    isDataDriven: () => boolean;
+    getTotalPages: () => number;
+    getCurrentPage: () => number;
+    isPageDisabled: (page: number) => boolean;
+    getStepPage: (direction: number) => number;
+    getPages: (siblingCount: number) => number[];
+    getCollapsedPages: () => number[];
+    getPaginationItems: () => PaginationItemType[];
+    getEllipsisTokens: (layout: string, pages: number[], page: number, totalPages: number) => string[];
+    getPageText: (page: number) => string;
+    getPageLabel: (page: number) => string;
+    applyItem: (item: any, page: number, description: any) => void;
+    syncItems: () => void;
+    _setupObserver: () => void;
+    _observer: any;
+    _pendingRafId: number | null;
+    isModifiedLinkClick: (event: any) => boolean;
+    preventCurrentPageNavigation: (event: any) => void;
+    handleClick: (event: any) => void;
+    stepToPage: (page: number) => void;
+    handlePageChange: (page: number) => void;
+};
+export type DBPaginationState = DBPaginationDefaultState & GlobalState;

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

@@ -0,0 +1,31 @@
+import type { DBPaginationProps } from "./model.js";
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBPaginationProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBPaginationProps> & Readonly<{}>, {
+    id: string;
+    children: any;
+    className: string;
+    propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
+    label: string;
+    items: import("./model.js", { with: { "resolution-mode": "import" } }).PaginationItemOption[];
+    size: import("../../index.js", { with: { "resolution-mode": "import" } }).SizeType;
+    currentPage: number | string;
+    totalCount: number | string;
+    pageSize: number | string;
+    siblingCount: number | string;
+    boundaryCount: number | string;
+    previousLabel: string;
+    nextLabel: string;
+    pageLabel: string;
+    onPageChange: (page: number) => 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/pagination-item/index.d.ts

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

package/dist/components/pagination-item/model.d.ts

@@ -0,0 +1,5 @@
+import type { GlobalProps, GlobalState, TextProps } from '../../shared/model.js';
+export type DBPaginationItemDefaultProps = {};
+export type DBPaginationItemProps = DBPaginationItemDefaultProps & GlobalProps & TextProps;
+export type DBPaginationItemDefaultState = {};
+export type DBPaginationItemState = DBPaginationItemDefaultState & GlobalState;