@k2b/ui 0.48.0 → 0.49.0

package/dist/types/feedback/prompt-confirm.d.ts

@@ -2,8 +2,10 @@ import { type JSX } from "solid-js";
 import { type DialogTone } from "./dialog-tone";
 import type { ConfirmOptions, DialogOptions } from "./prompts";
 export type PromptContent = string | HTMLElement | JSX.Element;
-/** A prompt's `variant` is its tone too: a success or danger prompt carries the dialog tone of that name. */
+/** A prompt's `variant` is its tone too: a success, warning or danger prompt carries the dialog tone of that name. */
 export declare const promptTone: (variant: DialogOptions["variant"]) => DialogTone | undefined;
+/** A warning asks for care, not for a destructive act: its confirm button stays primary. */
+export declare const promptButtonVariant: (variant: DialogOptions["variant"]) => "danger" | "primary" | "success";
 export declare const DialogHeader: (props: {
     close: () => void;
     title?: string;

package/dist/types/feedback/prompts.d.ts

@@ -9,7 +9,7 @@ export interface DialogOptions {
     icon?: string;
     confirmText?: string;
     cancelText?: string | false;
-    variant?: "danger" | "primary" | "success";
+    variant?: "danger" | "primary" | "success" | "warning";
     /** `full` fills the available viewport and becomes edge-to-edge on narrow screens. */
     size?: "small" | "medium" | "large" | "wide" | "full";
     surface?: "default" | "bare";
@@ -143,7 +143,7 @@ type PromptFormOptions<T extends Record<string, FieldSchema>> = {
     fields: T;
     confirmText?: string;
     cancelText?: string | false;
-    variant?: "danger" | "primary" | "success";
+    variant?: "danger" | "primary" | "success" | "warning";
     size?: DialogOptions["size"];
     cancelBehavior?: DialogOptions["cancelBehavior"];
 };

package/dist/types/inputs/NumberInput.d.ts

@@ -6,7 +6,7 @@ export type NumberInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "
     min?: number;
     /** Stepper increment and commit grid; defaults to `1`. A fractional step also sets the default `decimalPlaces`. */
     step?: number;
-    /** Accepted fraction digits. Defaults to the fraction digits of `step` (`0.01` → `2`, `1` → `0`); an explicit value wins. */
+    /** Accepted and displayed fraction digits. Defaults to the fraction digits of `step` (`0.01` → `2`, `1` → `0`); an explicit value wins. */
     decimalPlaces?: number;
     allowNegative?: boolean;
     clearable?: boolean;

package/dist/types/layout/AppWorkspace.d.ts

@@ -2,6 +2,7 @@ import { type AppWorkspaceSidebarItemStatusProps } from "./AppWorkspaceSidebarIt
 export type { AppWorkspaceSidebarItemStatusProps } from "./AppWorkspaceSidebarItemStatus";
 import { type LinkNavigateEvent, type NavigationScrollMode } from "@k2b/ssr/nav";
 import { type JSX } from "solid-js";
+import { type DropdownItem, type DropdownSearch } from "../actions/Dropdown";
 import { type AppWorkspaceLayoutState } from "./app-workspace-state";
 import { type AppWorkspaceWidthShare } from "./app-workspace-width";
 import type { ScrollAreaProps } from "./ScrollArea";
@@ -118,6 +119,12 @@ export type AppWorkspaceMainPaneProps = {
     };
     /** Controls at the end of the level head. */
     actions?: JSX.Element;
+    /**
+     * Levels mode: the title opens a menu of places to switch to, such as the person's work and each Space; on a phone
+     * it opens as a sheet. The title stays the level's heading and gains a chevron; the server HTML already says that
+     * it opens a menu.
+     */
+    switcher?: AppWorkspaceLevelSwitcher;
     /**
      * Levels mode: `"page"` marks the level that holds the page itself, such as a settings form or the list of an
      * area, rather than a column that leads there or a detail beside it. Its title takes the page step of the type
@@ -141,6 +148,13 @@ export type AppWorkspaceMainPaneProps = {
     scrollFade?: boolean;
     children: JSX.Element;
 };
+/** The places a level title switches between; `label` names the menu, such as "Switch Space". */
+export type AppWorkspaceLevelSwitcher = {
+    label: string;
+    items: readonly DropdownItem[];
+    /** A search field above the places, for a long list. */
+    search?: DropdownSearch;
+};
 export type AppWorkspaceDetailWidth = "sm" | "md" | "lg" | "xl";
 export type AppWorkspaceDetailProps = {
     children: JSX.Element;
@@ -295,7 +309,8 @@ export type AppWorkspaceSidebarItemProps = {
     /**
      * Marks the current page (`aria-current="page"`). On a page deeper than the
      * sidebar lists, pass `"ancestor"` for the item that contains it: it keeps
-     * the highlight, and the page keeps its back link.
+     * the highlight and, while the sidebar shows, is the way up, so the head
+     * drops its back link as beside the current page.
      */
     active?: boolean | "ancestor";
     activeClass?: string;

package/dist/types/layout/MobileShell.d.ts

@@ -43,6 +43,11 @@ export type MobileShellHeaderProps = {
     /** Controls after the title, such as a menu. */
     actions?: JSX.Element;
 };
+/**
+ * The height the on-screen keyboard covers at the bottom of the layout viewport, from the visual viewport; zero
+ * without a keyboard or without `visualViewport`.
+ */
+export declare const keyboardInset: (view: Pick<Window, "innerHeight" | "visualViewport">) => number;
 /**
  * Marks the shell around `from` as showing a screen of its own, or not, after the first paint; the server renders
  * the first state with the `screen` prop. Does nothing outside a shell.

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

@@ -1,7 +1,7 @@
 export { AnchoredPopover, type AnchoredPopoverProps } from "./AnchoredPopover";
 export type { AppOverviewCardsProps, AppOverviewEmptyStateProps, AppOverviewPanelProps, AppOverviewProps, } from "./AppOverview";
 export { default as AppOverview } from "./AppOverview";
-export type { AppWorkspaceBottomDrawerHeight, AppWorkspaceBottomDrawerProps, AppWorkspaceContentProps, AppWorkspaceDetailProps, AppWorkspaceDetailWidth, AppWorkspaceHeadProps, AppWorkspaceMainPaneProps, AppWorkspaceMainProps, AppWorkspaceNavTreeItemProps, AppWorkspaceNavTreeMove, AppWorkspaceNavTreeProps, AppWorkspaceProps, AppWorkspaceSidebarAccessoryVisibility, AppWorkspaceSidebarBodyProps, AppWorkspaceSidebarIconActionProps, AppWorkspaceSidebarIconActionTone, AppWorkspaceSidebarIconGridProps, AppWorkspaceSidebarItemActionProps, AppWorkspaceSidebarItemActionsProps, AppWorkspaceSidebarItemIconProps, AppWorkspaceSidebarItemLabelProps, AppWorkspaceSidebarItemMetaProps, AppWorkspaceSidebarItemProps, AppWorkspaceSidebarItemStatusProps, AppWorkspaceSidebarItemTone, AppWorkspaceSidebarProps, AppWorkspaceSidebarSectionProps, AppWorkspaceSidebarVisibility, AppWorkspaceWidthShare, } from "./AppWorkspace";
+export type { AppWorkspaceBottomDrawerHeight, AppWorkspaceBottomDrawerProps, AppWorkspaceContentProps, AppWorkspaceDetailProps, AppWorkspaceDetailWidth, AppWorkspaceHeadProps, AppWorkspaceLevelSwitcher, AppWorkspaceMainPaneProps, AppWorkspaceMainProps, AppWorkspaceNavTreeItemProps, AppWorkspaceNavTreeMove, AppWorkspaceNavTreeProps, AppWorkspaceProps, AppWorkspaceSidebarAccessoryVisibility, AppWorkspaceSidebarBodyProps, AppWorkspaceSidebarIconActionProps, AppWorkspaceSidebarIconActionTone, AppWorkspaceSidebarIconGridProps, AppWorkspaceSidebarItemActionProps, AppWorkspaceSidebarItemActionsProps, AppWorkspaceSidebarItemIconProps, AppWorkspaceSidebarItemLabelProps, AppWorkspaceSidebarItemMetaProps, AppWorkspaceSidebarItemProps, AppWorkspaceSidebarItemStatusProps, AppWorkspaceSidebarItemTone, AppWorkspaceSidebarProps, AppWorkspaceSidebarSectionProps, AppWorkspaceSidebarVisibility, AppWorkspaceWidthShare, } from "./AppWorkspace";
 export { appWorkspaceDetailElementId, default as AppWorkspace } from "./AppWorkspace";
 export { AppWorkspaceSidebarItemStatus } from "./AppWorkspaceSidebarItemStatus";
 export { watchAppHostWidth } from "./app-host-width";
@@ -50,6 +50,7 @@ export type { SettingsModalFooterProps, SettingsModalGroupProps, SettingsModalPr
 export { default as SettingsModal } from "./SettingsModal";
 export { APP_WORKSPACE_SWITCHER_SEARCH_FROM, type AppWorkspaceSidebarSwitcherProps, type AppWorkspaceSwitcherAction, type AppWorkspaceSwitcherOption, } from "./SidebarSwitcher";
 export { measureScrollFade } from "./scroll-fade";
+export { attachSheetHandle, type SheetHandleOptions } from "./sheet-handle";
 export type { TabBarItem, TabBarProps } from "./TabBar";
 export { default as TabBar } from "./TabBar";
 export type { TableOfContentsItem, TableOfContentsProps } from "./TableOfContents";

package/dist/types/layout/sheet-handle.d.ts

@@ -0,0 +1,21 @@
+export type SheetHandleOptions = {
+    /** The sheet the handle sits on. It carries the current detent in `data-sheet-detent`. */
+    sheet: HTMLElement;
+    /** The detents' names, lowest first. The stylesheet gives each `[data-sheet-detent="…"]` its height. */
+    detents: readonly string[];
+    /** The detent the stylesheet draws while the sheet has no `data-sheet-detent`, such as in the server's markup. */
+    initial: string;
+    /** After a drag or a press moved the sheet to another detent, for example to rename the handle. */
+    onChange?: (detent: string) => void;
+    /** Without it, a drag stops at the lowest detent; with it, a drag well below that detent asks to close. */
+    onDismiss?: () => void;
+};
+/**
+ * Lets a sheet's handle drag it between detents. The handle stays a button: a press, by pointer, Enter or Space,
+ * moves the sheet to the next detent up, and from the highest back to the lowest. A drag follows the pointer with an
+ * inline height and, on release, snaps to the detent nearest to where the pointer's speed would carry it. The snap
+ * animates with the sheet's own height transition, so reduced motion makes it instant. The stylesheet owns every
+ * resting height, which keeps the server's first frame and a rotation correct without script; the handle measures
+ * them when a drag starts.
+ */
+export declare function attachSheetHandle(handle: HTMLElement, options: SheetHandleOptions): () => void;

package/dist/types/surfaces/NoticeCard.d.ts

@@ -14,8 +14,11 @@ type NoticeCardContentProps = {
 };
 export type NoticeCardProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children" | "class" | "title"> & NoticeCardContentProps & {
     tone?: NoticeTone;
-    /** A Tabler icon class. Turns the notice into a compact status line whose icon and text take the tone colour. */
-    icon?: string;
+    /**
+     * A Tabler icon class. Turns the notice into a compact status line whose icon and text take the tone colour. `true`
+     * takes the tone's own icon, the one a toned dialog shows, and names the tone for screen readers.
+     */
+    icon?: string | true;
     class?: string;
     bodyClass?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",