@tempots/beatui 0.94.0 → 1.0.0

package/dist/types/components/form/input/number-input.d.ts

@@ -9,11 +9,11 @@ import { Merge } from '@tempots/std';
  * buttons and mouse wheel support are automatically enabled.
  */
 export type NumberInputOptions = Merge<InputOptions<number>, {
-    /** Step increment for stepper buttons and wheel interactions. When set, enables +/- buttons and scroll-to-step. Hold Shift for 10x multiplier. */
+    /** Step increment for stepper buttons and wheel interactions. When set, enables +/- buttons and scroll-to-step. Hold Shift for 10x multiplier. @default 1 */
     step?: Value<number>;
-    /** Minimum allowed value. Disables decrement when reached. */
+    /** Minimum allowed value. Disables decrement when reached. @default 0 */
     min?: Value<number>;
-    /** Maximum allowed value. Disables increment when reached. */
+    /** Maximum allowed value. Disables increment when reached. @default 10 */
     max?: Value<number>;
 }>;
 /**

package/dist/types/components/form/input/otp-input.d.ts

@@ -2,12 +2,12 @@ import { Value } from '@tempots/dom';
 import { ControlSize } from '../../theme';
 import { ThemeColorName } from '../../../tokens';
 /**
- * Configuration options for the {@link OTPInput} component.
+ * Configuration options for the {@link OtpInput} component.
  */
-export interface OTPInputOptions {
-    /** Number of input digits/characters. @default 6 */
-    length?: number;
-    /** The current OTP value as a string */
+export interface OtpInputOptions {
+    /** Number of input digits/characters. @default 6 @min 1 @max 12 @step 1 */
+    length?: Value<number>;
+    /** The current OTP value as a string. */
     value?: Value<string>;
     /** Callback invoked on every input change */
     onChange?: (value: string) => void;
@@ -19,20 +19,20 @@ export interface OTPInputOptions {
      * Whether to mask the input characters (like a password).
      * @default false
      */
-    mask?: boolean;
+    mask?: Value<boolean>;
     /**
      * Allowed input type.
      * - `'numeric'` allows only digits 0-9
      * - `'alphanumeric'` allows letters and digits
      * @default 'numeric'
      */
-    type?: 'numeric' | 'alphanumeric';
+    type?: Value<'numeric' | 'alphanumeric'>;
     /** Visual size of the input cells. @default 'md' */
     size?: Value<ControlSize>;
     /** Theme color for the focused input border. @default 'primary' */
     color?: Value<ThemeColorName>;
     /** Placeholder character shown in empty cells. @default '' */
-    placeholder?: string;
+    placeholder?: Value<string>;
     /** Whether to auto-focus the first cell on mount. @default false */
     autoFocus?: boolean;
 }
@@ -50,10 +50,10 @@ export interface OTPInputOptions {
  * @example
  * ```ts
  * import { prop } from '@tempots/dom'
- * import { OTPInput } from '@tempots/beatui'
+ * import { OtpInput } from '@tempots/beatui'
  *
  * const code = prop('')
- * OTPInput({
+ * OtpInput({
  *   value: code,
  *   onChange: code.set,
  *   onComplete: (v) => console.log('Code entered:', v),
@@ -64,7 +64,7 @@ export interface OTPInputOptions {
  * @example
  * ```ts
  * // Masked 4-digit PIN
- * OTPInput({
+ * OtpInput({
  *   value: prop(''),
  *   onChange: (v) => console.log(v),
  *   length: 4,
@@ -74,4 +74,4 @@ export interface OTPInputOptions {
  * })
  * ```
  */
-export declare function OTPInput({ length, value, onChange, onComplete, disabled, mask, type, size, color, placeholder, autoFocus, }?: OTPInputOptions): import("@tempots/dom").Renderable;
+export declare function OtpInput({ length, value, onChange, onComplete, disabled, mask, type, size, color, placeholder, autoFocus, }?: OtpInputOptions): import("@tempots/dom").Renderable;

package/dist/types/components/form/input/rating-input.d.ts

@@ -8,17 +8,17 @@ import { ControlSize } from '../../theme/types';
  * Extends {@link InputOptions} for numeric values with properties to control the
  * maximum rating, icon appearance, theme colors, and rounding precision.
  */
-type RatingInputOptions = InputOptions<number> & {
+export type RatingInputOptions = InputOptions<number> & {
     /** Maximum number of rating icons (stars). @default 5 */
     max?: Value<number>;
     /** Theme color for filled (active) icons. @default 'yellow' */
     fullColor?: Value<ThemeColorName>;
     /** Theme color for empty (inactive) icons. @default 'neutral' */
     emptyColor?: Value<ThemeColorName>;
-    /** Icon name for filled (active) rating icons. @default 'line-md:star-alt-filled' */
-    fullIcon?: Value<string>;
-    /** Icon name for empty (inactive) rating icons. @default 'line-md:star-alt' */
-    emptyIcon?: Value<string>;
+    /** Icon name for active (filled) rating icons. @default 'line-md:star-alt-filled' */
+    activeIcon?: Value<string>;
+    /** Icon name for inactive (empty) rating icons. @default 'line-md:star-alt' */
+    inactiveIcon?: Value<string>;
     /** Visual size of the rating icons. @default 'md' */
     size?: Value<ControlSize>;
     /** Step size for rounding during keyboard interactions (e.g., 0.25 for quarter steps). @default 1 */
@@ -60,8 +60,8 @@ type RatingInputOptions = InputOptions<number> & {
  *   value: prop(0),
  *   onChange: (v) => console.log('Rating:', v),
  *   max: 10,
- *   fullIcon: 'mdi:heart',
- *   emptyIcon: 'mdi:heart-outline',
+ *   activeIcon: 'mdi:heart',
+ *   inactiveIcon: 'mdi:heart-outline',
  *   fullColor: 'red',
  *   rounding: 0.25,
  *   size: 'lg',
@@ -69,4 +69,3 @@ type RatingInputOptions = InputOptions<number> & {
  * ```
  */
 export declare const RatingInput: (options: RatingInputOptions) => import("@tempots/dom").Renderable;
-export {};

package/dist/types/components/form/input/select-tags-input.d.ts

@@ -1,14 +1,14 @@
 import { TNode, Value } from '@tempots/dom';
 import { InputOptions } from './input-options';
 import { DropdownOption } from './option';
-import { BaseControllerOptions, ControllerOptions } from '../control';
+import { BaseControlOptions, ControlOptions } from '../control';
 /**
  * Options for the {@link SelectTagsInput} component.
  * Combines tag selection with a click-to-open dropdown menu.
  *
  * @typeParam T - The type of tag values.
  */
-export type SelectTagsOptions<T> = {
+export type SelectTagsInputOptions<T> = {
     /** The available dropdown options to choose from. */
     options: Value<DropdownOption<T>[]>;
     /**
@@ -70,7 +70,7 @@ export declare function Chips<T>(opts: {
  * })
  * ```
  */
-export declare function SelectTagsInput<T>(options: SelectTagsOptions<T>): import("@tempots/dom").Renderable;
+export declare function SelectTagsInput<T>(options: SelectTagsInputOptions<T>): import("@tempots/dom").Renderable;
 /**
  * A base form control wrapper for {@link SelectTagsInput} using a raw controller.
  *
@@ -78,7 +78,7 @@ export declare function SelectTagsInput<T>(options: SelectTagsOptions<T>): impor
  * @param options - Base controller options for the select tags control.
  * @returns A renderable form control component.
  */
-export declare function BaseSelectTagsControl<T>(options: BaseControllerOptions<T[], SelectTagsOptions<T>>): TNode;
+export declare function BaseSelectTagsControl<T>(options: BaseControlOptions<T[], SelectTagsInputOptions<T>>): TNode;
 /**
  * A full form control wrapper for {@link SelectTagsInput} with label, error, and description support.
  *
@@ -86,4 +86,4 @@ export declare function BaseSelectTagsControl<T>(options: BaseControllerOptions<
  * @param options - Controller options for the select tags control.
  * @returns A renderable form control component with wrapper.
  */
-export declare function SelectTagsControl<T>(options: ControllerOptions<T[], SelectTagsOptions<T>>): import("@tempots/dom").Renderable;
+export declare function SelectTagsControl<T>(options: ControlOptions<T[], SelectTagsInputOptions<T>>): import("@tempots/dom").Renderable;

package/dist/types/components/form/input/switch.d.ts

@@ -23,9 +23,9 @@ export type SwitchOptions = {
     /** Whether the switch is disabled and cannot be toggled. @default false */
     disabled?: Value<boolean>;
     /** Visual size of the switch. @default 'md' */
-    size?: ControlSize;
+    size?: Value<ControlSize>;
     /** Unique HTML id attribute for the switch element */
-    id?: string;
+    id?: Value<string>;
     /** Theme color for the switch track when on. @default 'primary' */
     color?: Value<ThemeColorName>;
     /** Tab index for keyboard navigation order. @default 0 */

package/dist/types/components/form/input/tri-state-checkbox-input.d.ts

@@ -0,0 +1,82 @@
+import { Value } from '@tempots/dom';
+import { InputOptions } from './input-options';
+import { IconSize } from '../../theme';
+/**
+ * Represents the three possible states of a tri-state checkbox.
+ *
+ * - `'checked'` — all items selected
+ * - `'unchecked'` — no items selected
+ * - `'indeterminate'` — some items selected (shown with a minus icon)
+ */
+export type CheckboxState = 'checked' | 'unchecked' | 'indeterminate';
+/**
+ * Configuration options for the {@link TriStateCheckboxInput} component.
+ *
+ * Extends {@link InputOptions} for {@link CheckboxState} values with additional
+ * properties to customize the icons for each state and their size.
+ */
+export type TriStateCheckboxInputOptions = InputOptions<CheckboxState> & {
+    /** Icon name to display when the checkbox is active (checked). @default 'ri:checkbox-fill' */
+    activeIcon?: Value<string | undefined>;
+    /** Icon name to display when the checkbox is inactive (unchecked). @default 'mdi:checkbox-blank-outline' */
+    inactiveIcon?: Value<string | undefined>;
+    /** Icon name to display when the checkbox is in the indeterminate state. @default 'ri/checkbox-indeterminate-fill' */
+    indeterminateIcon?: Value<string | undefined>;
+    /** Size of the checkbox icon. */
+    iconSize?: Value<IconSize>;
+};
+/**
+ * A custom tri-state checkbox input component that supports checked, unchecked,
+ * and indeterminate states with icon-based rendering.
+ *
+ * Renders a styled checkbox using icons for each state, wrapped in an
+ * {@link InputContainer}. Supports full keyboard interaction (Space and Enter to
+ * toggle), ARIA `role="checkbox"` semantics with `aria-checked="mixed"` for the
+ * indeterminate state, and an optional text label rendered from the `placeholder`
+ * property. When `placeholder` is set, clicking the label also toggles the checkbox.
+ *
+ * The default toggle cycle is: `unchecked` → `checked` → `indeterminate` → `unchecked`.
+ * Provide a custom `onChange` to override this behavior.
+ *
+ * @param options - Configuration options for the tri-state checkbox
+ * @returns A styled tri-state checkbox element with optional label, wrapped in an InputContainer
+ *
+ * @example
+ * ```ts
+ * import { prop } from '@tempots/dom'
+ * import { TriStateCheckboxInput } from '@tempots/beatui'
+ *
+ * const state = prop<CheckboxState>('unchecked')
+ * TriStateCheckboxInput({
+ *   value: state,
+ *   onChange: state.set,
+ *   placeholder: 'Select all',
+ * })
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Drive state from DataSource signals
+ * import { computedOf } from '@tempots/dom'
+ * import { CheckboxState, TriStateCheckboxInput } from '@tempots/beatui'
+ *
+ * const checkboxState = computedOf(
+ *   dataSource.isAllSelected,
+ *   dataSource.isSomeSelected
+ * )((isAll, isSome): CheckboxState =>
+ *   isAll ? 'checked' : isSome ? 'indeterminate' : 'unchecked'
+ * )
+ *
+ * TriStateCheckboxInput({
+ *   value: checkboxState,
+ *   onChange: () => {
+ *     if (dataSource.isAllSelected.value) {
+ *       dataSource.deselectAll()
+ *     } else {
+ *       dataSource.selectAll()
+ *     }
+ *   },
+ * })
+ * ```
+ */
+export declare const TriStateCheckboxInput: (options: TriStateCheckboxInputOptions) => import("@tempots/dom").Renderable;

package/dist/types/components/form/input/uuid-input.d.ts

@@ -12,10 +12,10 @@ import { InputOptions } from './input-options';
  *
  * @example
  * ```ts
- * UUIDInput({
+ * UuidInput({
  *   value: prop(''),
  *   onChange: uuid => console.log('UUID:', uuid),
  * })
  * ```
  */
-export declare const UUIDInput: (options: InputOptions<string>) => import("@tempots/dom").Renderable;
+export declare const UuidInput: (options: InputOptions<string>) => import("@tempots/dom").Renderable;

package/dist/types/components/json-structure/controls/uuid-control.d.ts

@@ -1,7 +1,7 @@
 /**
  * UUID Control for JSON Structure
  *
- * Handles uuid type with UUIDInput
+ * Handles uuid type with UuidInput
  */
 import { Renderable } from '@tempots/dom';
 import { type Controller } from '../../form';

package/dist/types/components/layout/card.d.ts

@@ -10,6 +10,20 @@ export interface CardOptions {
     /** The border radius of the card. @default 'lg' */
     roundedness?: Value<RadiusName>;
 }
+/** Options for {@link CardHeader}, {@link CardBody}, and {@link CardFooter}. */
+export interface CardSectionOptions {
+    /** Additional CSS classes. */
+    class?: Value<string>;
+}
+/** Options for {@link CardCoverImage}. */
+export interface CardCoverImageOptions {
+    /** Image source URL. */
+    src: Value<string>;
+    /** Alt text for accessibility. */
+    alt?: Value<string>;
+    /** Fixed height for the image (e.g. `'200px'`). Defaults to auto. */
+    height?: Value<string>;
+}
 /**
  * A container component that groups content with visual separation using
  * elevation, borders, or background color depending on the variant.
@@ -34,3 +48,55 @@ export interface CardOptions {
  * ```
  */
 export declare function Card({ variant, size, roundedness }?: CardOptions, ...children: TNode[]): import("@tempots/dom").Renderable;
+/**
+ * A header section for a {@link Card}, typically containing a title and actions.
+ * Renders with a bottom border separator.
+ *
+ * @example
+ * ```ts
+ * Card({},
+ *   CardHeader({}, html.h3('Title')),
+ *   CardBody({}, html.p('Content')),
+ * )
+ * ```
+ */
+export declare function CardHeader({ class: className }?: CardSectionOptions, ...children: TNode[]): import("@tempots/dom").Renderable;
+/**
+ * The main content area of a {@link Card}.
+ * Expands to fill available space with scrollable overflow.
+ *
+ * @example
+ * ```ts
+ * Card({},
+ *   CardBody({}, html.p('Main content here.'))
+ * )
+ * ```
+ */
+export declare function CardBody({ class: className }?: CardSectionOptions, ...children: TNode[]): import("@tempots/dom").Renderable;
+/**
+ * A footer section for a {@link Card}, typically containing action buttons.
+ * Renders with a top border separator and right-aligned content.
+ *
+ * @example
+ * ```ts
+ * Card({},
+ *   CardBody({}, html.p('Content')),
+ *   CardFooter({}, Button({ variant: 'filled' }, 'Save')),
+ * )
+ * ```
+ */
+export declare function CardFooter({ class: className }?: CardSectionOptions, ...children: TNode[]): import("@tempots/dom").Renderable;
+/**
+ * A full-bleed cover image for a {@link Card}.
+ * Automatically inherits the card's border radius at the appropriate corners
+ * based on its position (first child = top corners, last child = bottom corners).
+ *
+ * @example
+ * ```ts
+ * Card({},
+ *   CardCoverImage({ src: 'https://example.com/photo.jpg', alt: 'Photo', height: '200px' }),
+ *   CardBody({}, html.p('Description')),
+ * )
+ * ```
+ */
+export declare function CardCoverImage({ src, alt, height }: CardCoverImageOptions): import("@tempots/dom").Renderable;

package/dist/types/components/layout/collapse.d.ts

@@ -1,6 +1,6 @@
 import { TNode, Value } from '@tempots/dom';
 /** Configuration options for the {@link Collapse} component. */
-export type CollapseOption = {
+export type CollapseOptions = {
     /** Reactive boolean controlling whether the content is expanded or collapsed. */
     open: Value<boolean>;
 };
@@ -30,4 +30,4 @@ export type CollapseOption = {
  * )
  * ```
  */
-export declare function Collapse({ open }: CollapseOption, ...children: TNode[]): import("@tempots/dom").Renderable;
+export declare function Collapse({ open }: CollapseOptions, ...children: TNode[]): import("@tempots/dom").Renderable;

package/dist/types/components/layout/flex.d.ts

@@ -0,0 +1,26 @@
+import { TNode } from '@tempots/dom';
+/**
+ * Shared flex modifier helpers that return TNode class attributes.
+ * Use these composable helpers inside Stack or Group to control layout.
+ *
+ * @example
+ * ```typescript
+ * Stack(Gap('md'), Align('center'), child1, child2)
+ * Group(Gap('sm'), Justify('between'), Wrap, child1, child2)
+ * ```
+ */
+export type FlexGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+/** Set the gap between flex children. */
+export declare function Gap(size: FlexGap): TNode;
+/** Set cross-axis alignment (align-items). */
+export declare function Align(align: FlexAlign): TNode;
+/** Set main-axis distribution (justify-content). */
+export declare function Justify(justify: FlexJustify): TNode;
+/** Allow items to wrap to the next line. */
+export declare const Wrap: TNode;
+/** Prevent items from wrapping. */
+export declare const NoWrap: TNode;
+/** Allow the container to grow (flex-grow: 1). */
+export declare const Grow: TNode;

package/dist/types/components/layout/index.d.ts

@@ -6,6 +6,7 @@ export * from './center';
 export * from './collapse';
 export * from './divider';
 export * from './nine-slice-scroll-view';
+export * from './flex';
 export * from './group';
 export * from './scrollable-panel';
 export * from './sink';

package/dist/types/components/lexical/floating/slash-command-palette.d.ts

@@ -11,10 +11,10 @@ export interface SlashCommandPaletteOptions {
         left: number;
     }>;
     onSelect: (command: SlashCommandDefinition) => void;
-    onDismiss: () => void;
+    onClose: () => void;
 }
 /**
  * Default slash commands for the editor
  */
 export declare const DEFAULT_SLASH_COMMANDS: SlashCommandDefinition[];
-export declare function SlashCommandPalette({ commands, isVisible, filterText, position, onSelect, onDismiss, }: SlashCommandPaletteOptions): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;
+export declare function SlashCommandPalette({ commands, isVisible, filterText, position, onSelect, onClose, }: SlashCommandPaletteOptions): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;

package/dist/types/components/lexical/toolbar/toolbar-registry.d.ts

@@ -11,6 +11,7 @@ export declare function getDefaultLayout(): ToolbarLayoutEntry[];
 /**
  * Resolves a ToolbarConfig into a concrete layout.
  * - If `layout` is provided, returns it directly.
- * - Otherwise, applies visibleGroups/hiddenGroups filtering to the default layout.
+ * - Otherwise, applies visibleGroups/hiddenGroups filtering to the default layout
+ *   and appends any custom groups at the end.
  */
 export declare function resolveLayout(config: ToolbarConfig): ToolbarLayoutEntry[];

package/dist/types/components/media/pdf-page-viewer.d.ts

@@ -7,7 +7,10 @@ interface LoadCompleteOptions {
 export interface PdfPageViewerOptions {
     /** PDF source: URL string, Uint8Array, or ArrayBuffer */
     source: SplitValue<string | Uint8Array | ArrayBuffer>;
-    /** Page number to display (1-based, default: 1) */
+    /**
+     * Page number to display (1-based)
+     * @default 1
+     */
     page?: Value<number>;
     /**
      * How the PDF should fit in the available space:
@@ -16,24 +19,24 @@ export interface PdfPageViewerOptions {
      * - 'height': Fit to container height while maintaining aspect ratio
      * - 'contain': Fit entire page in container (like CSS object-fit: contain)
      * - 'cover': Fill container, may crop (like CSS object-fit: cover)
-     * Default: 'width'
+     * @default 'width'
      */
     fit?: Value<'none' | 'width' | 'height' | 'contain' | 'cover'>;
     /**
      * Explicit scale factor when fit='none'
      * Ignored when fit is not 'none'
-     * Default: 1
+     * @default 1
      */
     scale?: Value<number>;
     /**
      * Rotation angle in degrees (0, 90, 180, 270)
-     * Default: 0
+     * @default 0
      */
     rotation?: Value<0 | 90 | 180 | 270>;
     /**
      * Rendering quality/pixel density multiplier
      * Higher values produce sharper images but use more memory
-     * Default: 2 (retina quality)
+     * @default 2
      */
     quality?: Value<number>;
     /**

package/dist/types/components/misc/index.d.ts

@@ -7,3 +7,4 @@ export * from './opengraph';
 export * from './notification';
 export * from './notification-panel';
 export * from './notification-provider';
+export * from './loading-overlay';

package/dist/types/components/misc/loading-overlay.d.ts

@@ -0,0 +1,29 @@
+import { TNode, Value } from '@tempots/dom';
+import { ControlSize } from '../theme';
+/**
+ * Options for the {@link LoadingOverlay} component.
+ */
+export interface LoadingOverlayOptions {
+    /** Whether the overlay is visible. @default false */
+    visible: Value<boolean>;
+    /** Optional message to display below the spinner. */
+    message?: Value<string>;
+    /** Size of the spinner icon. @default 'lg' */
+    size?: Value<ControlSize>;
+}
+/**
+ * A semi-transparent overlay with a centered loading spinner.
+ *
+ * Place inside a container with `position: relative` to cover its content.
+ * When `visible` is false, the overlay is removed from the DOM entirely.
+ *
+ * @example
+ * ```ts
+ * html.div(
+ *   attr.style('position: relative'),
+ *   LoadingOverlay({ visible: loading, message: 'Loading data...' }),
+ *   // ... content underneath
+ * )
+ * ```
+ */
+export declare function LoadingOverlay(options: LoadingOverlayOptions): TNode;

package/dist/types/components/misc/notice.d.ts

@@ -61,7 +61,7 @@ export type NoticeOptions = {
      * Callback invoked when the notice is dismissed. If provided, the close
      * button is shown regardless of the `closable` setting.
      */
-    onDismiss?: () => void;
+    onClose?: () => void;
     /**
      * Additional CSS class name(s) to apply to the notice root element.
      */
@@ -73,7 +73,7 @@ export type NoticeOptions = {
  * that automatically adapt based on the variant.
  *
  * When dismissed, the notice is hidden from the DOM and the optional
- * `onDismiss` callback is invoked.
+ * `onClose` callback is invoked.
  *
  * @param options - Configuration options for the notice.
  * @param children - Content nodes rendered inside the notice body.
@@ -93,7 +93,7 @@ export type NoticeOptions = {
  *     variant: 'danger',
  *     title: 'Error',
  *     closable: true,
- *     onDismiss: () => console.log('dismissed'),
+ *     onClose: () => console.log('dismissed'),
  *   },
  *   'Something went wrong. Please try again.'
  * )
@@ -105,4 +105,4 @@ export type NoticeOptions = {
  * )
  * ```
  */
-export declare function Notice({ variant, tone, role, title, icon, closable, onDismiss, class: cls, }: NoticeOptions, ...children: TNode[]): Renderable;
+export declare function Notice({ variant, tone, role, title, icon, closable, onClose, class: cls, }: NoticeOptions, ...children: TNode[]): Renderable;

package/dist/types/components/misc/notification-provider.d.ts

@@ -8,6 +8,8 @@ import { AnimationConfig } from '../../utils';
  * configuration, and lifecycle hooks for a single notification instance.
  */
 type NotificationEntry = {
+    /** Unique identifier for keyed rendering. */
+    id: string;
     /** Animation configuration for the notification's enter/exit transitions. */
     animation: AnimationConfig;
     /** Child content nodes rendered inside the notification body. */
@@ -15,13 +17,13 @@ type NotificationEntry = {
     /** Reactive signal indicating whether the notification is in a loading state. */
     loading: Signal<boolean>;
     /** Reactive signal controlling close button visibility. */
-    withCloseButton: Signal<boolean>;
+    showCloseButton: Signal<boolean>;
     /** Reactive signal controlling border visibility. */
-    withBorder: Signal<boolean>;
+    showBorder: Signal<boolean>;
     /** Reactive signal for the notification's theme color. */
     color: Signal<ThemeColorName>;
     /** Reactive signal for the notification's border radius. */
-    radius: Signal<RadiusName>;
+    roundedness: Signal<RadiusName>;
     /** Title content rendered above the notification body. */
     title: TNode;
     /** Reactive signal for the Iconify icon identifier. */
@@ -96,6 +98,10 @@ export type NotificationProviderValue = {
     listenOnShow: (fn: (entry: NotificationEntry) => void) => () => void;
     /** Reactive signal tracking the number of currently visible notifications. */
     activeNotifications: Signal<number>;
+    /** Reactive list of active notification entries for declarative rendering. */
+    entries: Signal<NotificationEntry[]>;
+    /** Removes a notification entry by ID. */
+    removeEntry: (id: string) => void;
 };
 /**
  * A subset of the notification provider value exposing only the `show` and `clear` methods.

package/dist/types/components/misc/notification.d.ts

@@ -15,12 +15,12 @@ export type NotificationOptions = {
      * Whether to display a close button in the notification.
      * @default false
      */
-    withCloseButton?: Value<boolean>;
+    showCloseButton?: Value<boolean>;
     /**
      * Whether the notification displays a colored border.
      * @default false
      */
-    withBorder?: Value<boolean>;
+    showBorder?: Value<boolean>;
     /**
      * Theme color applied to the notification accent, icon, and close button.
      * @default 'primary'
@@ -30,7 +30,7 @@ export type NotificationOptions = {
      * Border radius applied to the notification container.
      * @default 'md'
      */
-    radius?: Value<RadiusName>;
+    roundedness?: Value<RadiusName>;
     /**
      * Optional title content rendered above the notification body.
      */
@@ -52,23 +52,23 @@ export type NotificationOptions = {
 /**
  * Builds the CSS class string for a Notification element based on its state flags.
  *
- * @param withBorder - Whether the bordered modifier class is applied.
+ * @param showBorder - Whether the bordered modifier class is applied.
  * @param hasIcon - Whether the has-icon modifier class is applied.
  * @param hasCloseButton - Whether the closable modifier class is applied.
  * @param loading - Whether the loading modifier class is applied.
  * @param extra - Optional additional CSS class(es) to append.
  * @returns A space-separated class string for the notification root element.
  */
-export declare function generateNotificationClasses(withBorder: boolean, hasIcon: boolean, hasCloseButton: boolean, loading: boolean, extra?: string): string;
+export declare function generateNotificationClasses(showBorder: boolean, hasIcon: boolean, hasCloseButton: boolean, loading: boolean, extra?: string): string;
 /**
  * Builds the inline CSS style string for a Notification element, setting
  * CSS custom properties for accent color and border radius.
  *
  * @param color - Theme color name used for the accent (maps to the 500 shade).
- * @param radius - Radius token name for the notification border radius.
+ * @param roundedness - Radius token name for the notification border radius.
  * @returns A semicolon-separated CSS variable declaration string.
  */
-export declare function generateNotificationStyles(color: ThemeColorName, radius: RadiusName): string;
+export declare function generateNotificationStyles(color: ThemeColorName, roundedness: RadiusName): string;
 /**
  * Renders a notification card with optional icon, title, body content,
  * loading state, and close button. Uses ARIA live regions for accessibility.
@@ -94,7 +94,7 @@ export declare function generateNotificationStyles(color: ThemeColorName, radius
  * Notification(
  *   {
  *     icon: 'material-symbols:info-outline',
- *     withCloseButton: true,
+ *     showCloseButton: true,
  *     onClose: () => console.log('closed'),
  *   },
  *   'A new version is available.'
@@ -107,4 +107,4 @@ export declare function generateNotificationStyles(color: ThemeColorName, radius
  * )
  * ```
  */
-export declare function Notification({ loading, withCloseButton, withBorder, color, radius, title, icon, onClose, class: cls, }?: NotificationOptions, ...children: TNode[]): Renderable;
+export declare function Notification({ loading, showCloseButton, showBorder, color, roundedness, title, icon, onClose, class: cls, }?: NotificationOptions, ...children: TNode[]): Renderable;