@k2b/ui 0.9.0 → 0.10.0

package/dist/types/actions/Button.d.ts

@@ -43,5 +43,10 @@ export type IconButtonLinkProps = Omit<ButtonLinkProps, "children"> & {
     children: JSX.Element;
     label: string;
 };
+/**
+ * The native title is only the server-rendered, no-JavaScript hint; the
+ * hydrated tooltip removes it. Without a tooltip, an explicit title stays.
+ */
+export declare const iconTitle: (title: string | undefined, tooltip: JSX.Element | false | undefined) => string | undefined;
 export declare function IconButton(props: IconButtonProps): JSX.Element;
 export declare function IconButtonLink(props: IconButtonLinkProps): JSX.Element;

package/dist/types/actions/Dropdown.d.ts

@@ -44,7 +44,11 @@ export type DropdownProps = {
     position?: DropdownPosition | (() => DropdownPosition);
     /** Larger menu rows and typography for touch. Defaults to `default`. */
     variant?: "default" | "touch";
-    /** Menu width as a CSS length. Defaults to `12rem`, or `18rem` for touch. */
+    /**
+     * Exact menu width as a CSS length. Without it the menu sizes to its longest
+     * entry: at least `12rem` (`18rem` for touch), at most the viewport width
+     * less `1rem` per side, where longer entries wrap.
+     */
     width?: string;
     class?: string;
     menuClass?: string;

package/dist/types/actions/SplitButton.d.ts

@@ -13,6 +13,7 @@ export type SplitButtonProps = Omit<ButtonProps, "align"> & {
     /** Accessible name and title for the icon-only menu trigger. */
     menuLabel: string;
     menuPosition?: DropdownPosition | (() => DropdownPosition);
+    /** Exact width of both menus as a CSS length. Without it the menus size to their entries. */
     menuWidth?: string;
 };
 /** One primary button action with a separate menu of related alternatives. */

package/dist/types/chat/ChatContextPopup.d.ts

@@ -1,6 +1,14 @@
 import { type JSX } from "solid-js";
 export type ChatContextPopupProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "content" | "ref" | "onClick" | "onPointerEnter" | "onPointerLeave"> & {
     content: JSX.Element;
+    /** Runs each time the panel opens, for example to refresh its data. */
+    onOpen?: () => void;
 };
+export type ChatContextPanelProps = {
+    title: string;
+    children?: JSX.Element;
+};
+/** Panel body shared by context details: a title, then progress, `dl` rows, and short `p` notes, grouped in `section`s when repeated. */
+export declare function ChatContextPanel(props: ChatContextPanelProps): JSX.Element;
 /** Context details support hover preview and deliberate click-to-pin without changing tooltip behavior. */
 export declare function ChatContextPopup(props: ChatContextPopupProps): JSX.Element;

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

@@ -1,5 +1,5 @@
-export type { ChatContextPopupProps } from "./ChatContextPopup";
-import { ChatContextPopup } from "./ChatContextPopup";
+export type { ChatContextPanelProps, ChatContextPopupProps } from "./ChatContextPopup";
+import { ChatContextPanel, ChatContextPopup } from "./ChatContextPopup";
 import { ChatTasks } from "./ChatTasks";
 export type { ChatTask, ChatTasksProps } from "./ChatTasks";
 import { ChatComposer } from "./ChatComposer";
@@ -24,5 +24,6 @@ export declare const Chat: typeof ChatRoot & {
     Composer: typeof ChatComposer;
     ContextUsage: typeof ChatContextUsage;
     ContextPopup: typeof ChatContextPopup;
+    ContextPanel: typeof ChatContextPanel;
 };
 export { reconcileChatMentions } from "./composer-document";

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

@@ -0,0 +1,83 @@
+import { type Accessor, type JSX } from "solid-js";
+/** Keys the wiring between a controller and its `<HoverPreview>`. */
+declare const INTERNALS: unique symbol;
+/**
+ * Where the card opens. By default it opens to the right of its anchor,
+ * centered on it or aligned with its bottom edge, and flips or clamps to stay
+ * in the viewport. With `beside`, it opens right of that region, such as a list
+ * column, top-aligned with the anchor and clamped into `within` (default: the
+ * viewport); when the card does not fit there, it does not open at all.
+ */
+export type HoverPreviewPlacement = {
+    align?: "center" | "end";
+} | {
+    beside: () => HTMLElement | null | undefined;
+    within?: () => HTMLElement | null | undefined;
+};
+export type HoverPreviewOptions<T> = {
+    /** Milliseconds a resting mouse waits on an anchor before the card opens. Defaults to 250. */
+    openDelay?: number;
+    /**
+     * How keyboard users open the card: `"space"` (default) toggles it with Space
+     * on the focused anchor and leaves focus there; `"focus"` opens it after the
+     * open delay whenever an anchor receives focus.
+     */
+    keyboard?: "space" | "focus";
+    placement?: HoverPreviewPlacement;
+    /** Anchors whose value is disabled open no card; an open card closes once its value becomes disabled. */
+    disabled?: (value: T) => boolean;
+    /** Runs whenever the card opens or closes, including light dismissal by the browser. */
+    onOpenChange?: (open: boolean) => void;
+};
+export type HoverPreviewController<T> = {
+    /** Id of the card element, for `aria-controls`. */
+    readonly id: string;
+    /**
+     * Registers an anchor element for `value`; use the result as a `ref`.
+     * `trigger` is the control that toggles the card for this anchor; Escape
+     * returns focus there when focus is inside the card. Defaults to the anchor.
+     */
+    anchor: (value: T, trigger?: () => HTMLElement | null | undefined) => (element: HTMLElement) => void;
+    /** The value whose card is open, or `undefined` while closed. */
+    active: Accessor<T | undefined>;
+    /** Opens the card for `value` at once and moves focus into it, or closes it when it is already pinned open. */
+    toggle: (value: T) => void;
+    /** Closes the card; it reopens for the same anchor only after the pointer left it. */
+    close: () => void;
+    /** Wiring for `<HoverPreview>`; not part of the public contract. */
+    readonly [INTERNALS]: Internals<T>;
+};
+type Anchor<T> = {
+    value: T;
+    element: HTMLElement;
+    trigger?: () => HTMLElement | null | undefined;
+};
+type Internals<T> = {
+    current: Accessor<Anchor<T> | undefined>;
+    bind: (surface: HTMLElement) => void;
+    enterSurface: () => void;
+    leave: () => void;
+    focusOut: (event: FocusEvent) => void;
+    toggled: (open: boolean) => void;
+};
+/**
+ * Creates the behavior of one hover preview card shared by a group of anchors,
+ * such as the rows of a list. Render the card with `<HoverPreview preview={…}>`.
+ */
+export declare function createHoverPreview<T>(options?: HoverPreviewOptions<T>): HoverPreviewController<T>;
+export type HoverPreviewProps<T> = {
+    preview: HoverPreviewController<T>;
+    /** Accessible name of the card. */
+    label: string;
+    /** `"content"` (default) sizes the card to its content up to 32rem; `"fixed"` keeps one 22rem × 20rem box for every anchor. */
+    size?: "content" | "fixed";
+    class?: string;
+    /** Plain content stays mounted while the card is closed; a function renders the open anchor's value. */
+    children: JSX.Element | ((value: T) => JSX.Element);
+};
+/**
+ * A non-modal card that opens beside the anchor a resting mouse points at.
+ * Native popover owns the top layer and light dismissal.
+ */
+export declare function HoverPreview<T>(props: HoverPreviewProps<T>): JSX.Element;
+export {};

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

@@ -9,6 +9,12 @@ export type TooltipProps = {
 };
 export type TooltipAnchorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "content"> & Omit<TooltipProps, "target">;
 export type TooltipTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "content"> & Omit<TooltipProps, "target">;
+/**
+ * The hint an icon-only control shows by default: its label, unless the caller
+ * passes its own `tooltip` (or `false`) or an enclosing Tooltip.Anchor already
+ * owns the hint.
+ */
+export declare const useLabelTooltip: (tooltip: () => JSX.Element | false | undefined, label: () => string | undefined) => () => JSX.Element | false | undefined;
 type TooltipComponent = ((props: TooltipProps) => JSX.Element) & {
     Anchor: (props: TooltipAnchorProps) => JSX.Element;
     Trigger: (props: TooltipTriggerProps) => JSX.Element;

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

@@ -1,5 +1,7 @@
 export type { DialogClose, DialogCore, DialogRender, OpenDialogOptions } from "./dialog-core";
 export { dialogCore } from "./dialog-core";
+export type { HoverPreviewController, HoverPreviewOptions, HoverPreviewPlacement, HoverPreviewProps } from "./HoverPreview";
+export { createHoverPreview, HoverPreview } from "./HoverPreview";
 export type { InlineGuidanceProps } from "./InlineGuidance";
 export { default as InlineGuidance } from "./InlineGuidance";
 export type { ConfirmOptions, DialogOptions, FieldSchema, PromptFieldBase, PromptSearchInput, PromptSearchItem, PromptSearchOptions, } from "./prompts";

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

@@ -150,18 +150,21 @@ export declare const DialogHeader: (props: {
     icon?: string;
 }) => JSX.Element;
 type CloudSearchResolver<T> = (input: PromptSearchInput) => Promise<PromptSearchItem<T>[]> | PromptSearchItem<T>[];
+declare const openSearchPrompt: <T extends unknown = unknown>(resolver: CloudSearchResolver<T>, options?: PromptSearchOptions) => Promise<PromptSearchItem<T> | undefined>;
+declare const promptText: (content: string, defaultValue?: string, options?: DialogOptions) => Promise<string | null>;
+declare const promptNumber: (content: string, defaultValue?: number, options?: DialogOptions & {
+    min?: number;
+    max?: number;
+}) => Promise<number | null>;
 export declare const prompts: {
     alert: (content: PromptContent, options?: DialogOptions) => Promise<void | undefined>;
     success: (content: PromptContent, options?: Omit<DialogOptions, "variant">) => Promise<void | undefined>;
     confirm: (content: PromptContent, options?: ConfirmOptions) => Promise<boolean | undefined>;
-    prompt: (content: string, defaultValue?: string, options?: DialogOptions) => Promise<string | null>;
-    promptNumber: (content: string, defaultValue?: number, options?: DialogOptions & {
-        min?: number;
-        max?: number;
-    }) => Promise<number | null>;
+    prompt: typeof promptText;
+    promptNumber: typeof promptNumber;
     form: <T extends Record<string, FieldSchema>>(config: PromptFormOptions<T>) => Promise<InferFormValues<T> | null>;
     dialog: <T extends unknown = unknown>(component: (close: (result?: T) => void) => JSX.Element, options?: DialogOptions) => Promise<T | undefined>;
-    search: <T extends unknown = unknown>(resolver: CloudSearchResolver<T>, options?: PromptSearchOptions) => Promise<PromptSearchItem<T> | undefined>;
+    search: typeof openSearchPrompt;
     error: (content: string | HTMLElement, options?: DialogOptions) => Promise<unknown>;
 };
 export {};

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

@@ -18,6 +18,7 @@ export type SelectChipProps<T extends string | number = string> = ValueFieldProp
     size?: ButtonSize;
     placeholder?: string;
     position?: DropdownPosition;
+    /** Exact menu width as a CSS length. Without it the menu sizes to its options, at least `10rem`. */
     menuWidth?: string;
     name?: string;
 };

package/dist/types/inputs/completion/overlay.d.ts

@@ -1,4 +1,5 @@
-export declare const plainTextHighlight: (value: string) => string;
+declare const escapeHtml: (value: string) => string;
+export declare const plainTextHighlight: typeof escapeHtml;
 export type RenderOptions = {
     ghost?: {
         at: number;
@@ -9,3 +10,4 @@ export type RenderOptions = {
     };
 };
 export declare const renderWithOverlay: (text: string, highlighter: (text: string) => string, options?: RenderOptions) => string;
+export {};

package/dist/types/internal/focus-return.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Overlays return focus to the control that opened them, and the ring comes
+ * back only for a keyboard user: a pointer user gets focus back silently, a
+ * keyboard user keeps seeing where they are.
+ */
+/**
+ * Read as an overlay opens, while its trigger still holds focus: whether the
+ * keyboard opened it. The trigger's ring answers before the first input.
+ */
+export declare const ringOnReturn: (trigger: Element | null | undefined) => boolean;
+/**
+ * Moves focus back to `trigger`. It shows a ring when the keyboard opened the
+ * overlay (`openedByKeyboard`, what `ringOnReturn` reported as it opened) or
+ * worked it since, so a pointer open closed with Escape alone returns silently.
+ * Engines without the option focus as before.
+ *
+ * Call it before the overlay hides: a native popover or dialog that closes
+ * with focus inside restores it on its own, with a ring of the browser's choosing.
+ */
+export declare const returnFocus: (trigger: HTMLElement | null | undefined, openedByKeyboard: boolean) => void;

package/dist/types/intl/Format.d.ts

@@ -67,6 +67,14 @@ export type FormatDurationMsProps = TimeElementProps & LocaleProp & FallbackProp
     /** Duration in milliseconds. */
     value: number | null | undefined;
 };
+declare const FormatNumber: (props: FormatNumberProps) => JSX.Element;
+declare const FormatPercent: (props: FormatPercentProps) => JSX.Element;
+declare const FormatCurrency: (props: FormatCurrencyProps) => JSX.Element;
+declare const FormatBytes: (props: FormatBytesProps) => JSX.Element;
+declare const FormatRelativeTime: (props: FormatRelativeTimeProps) => JSX.Element;
+declare const FormatRelativeDate: (props: FormatRelativeDateProps) => JSX.Element;
+declare const FormatDuration: (props: FormatDurationProps) => JSX.Element;
+declare const FormatDurationMs: (props: FormatDurationMsProps) => JSX.Element;
 /**
  * Unstyled semantic formatter components backed by `@k2b/stdlib`.
  *
@@ -78,16 +86,16 @@ export type FormatDurationMsProps = TimeElementProps & LocaleProp & FallbackProp
  * with the runtime timezone.
  */
 export declare const Format: {
-    readonly Number: (props: FormatNumberProps) => JSX.Element;
-    readonly Percent: (props: FormatPercentProps) => JSX.Element;
-    readonly Currency: (props: FormatCurrencyProps) => JSX.Element;
-    readonly Bytes: (props: FormatBytesProps) => JSX.Element;
+    readonly Number: typeof FormatNumber;
+    readonly Percent: typeof FormatPercent;
+    readonly Currency: typeof FormatCurrency;
+    readonly Bytes: typeof FormatBytes;
     readonly Date: (props: FormatDateProps) => JSX.Element;
     readonly Time: (props: FormatDateProps) => JSX.Element;
     readonly DateTime: (props: FormatDateProps) => JSX.Element;
-    readonly RelativeTime: (props: FormatRelativeTimeProps) => JSX.Element;
-    readonly RelativeDate: (props: FormatRelativeDateProps) => JSX.Element;
-    readonly Duration: (props: FormatDurationProps) => JSX.Element;
-    readonly DurationMs: (props: FormatDurationMsProps) => JSX.Element;
+    readonly RelativeTime: typeof FormatRelativeTime;
+    readonly RelativeDate: typeof FormatRelativeDate;
+    readonly Duration: typeof FormatDuration;
+    readonly DurationMs: typeof FormatDurationMs;
 };
 export {};

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

@@ -1,8 +1,13 @@
 import { type JSX } from "solid-js";
+/** Initial focus goes to the first input of the top sheet, otherwise to the
+ * dialog element itself. Native `showModal()` focuses the first focusable
+ * descendant, which is the drag handle; iOS shows a ring for that programmatic
+ * focus, so the sheet moves it to the ring-less dialog before the next paint. */
+declare const sheetInitialFocus: (dialog: HTMLDialogElement) => HTMLElement;
 export declare const bottomSheetOptions: {
     panelClassName: string;
     contentClassName: string;
-    initialFocus: (dialog: HTMLDialogElement) => HTMLElement;
+    initialFocus: typeof sheetInitialFocus;
 };
 export type BottomSheetProps = {
     children: JSX.Element;

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

@@ -1,6 +1,6 @@
 import { type JSX } from "solid-js";
 import { type ScrollAreaProps } from "./ScrollArea";
-/** A non-modal, interactive row preview. Native popover owns light dismissal. */
+/** A non-modal, interactive row preview built on the shared hover preview card. */
 export declare function SidebarItemPreview(props: {
     label: string;
     children: JSX.Element | ((close: () => void) => JSX.Element);

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

@@ -1,6 +1,6 @@
 import type { JSX } from "solid-js";
 import type { IntentTone } from "../semantics";
-export type ProgressBarTone = Extract<IntentTone, "info" | "success" | "danger">;
+export type ProgressBarTone = Extract<IntentTone, "info" | "success" | "warning" | "danger">;
 export type ProgressBarProps = {
     value: number;
     size?: "xs" | "sm" | "md";

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

@@ -0,0 +1,13 @@
+import { type JSX } from "solid-js";
+import type { IntentTone } from "../semantics";
+export type ProgressRingTone = Extract<IntentTone, "info" | "warning" | "danger">;
+export type ProgressRingProps = {
+    value: number;
+    tone?: ProgressRingTone;
+    /** Names the ring as a progressbar. Omit it inside a control that already carries the name and value. */
+    label?: string;
+    class?: string;
+};
+/** Compact determinate ring without a number. Warning and danger add a centre mark, so tone is never colour alone. */
+export declare function ProgressRing(props: ProgressRingProps): JSX.Element;
+export default ProgressRing;

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

@@ -14,6 +14,8 @@ export type { PlaceholderAlign, PlaceholderProps, PlaceholderState, PlaceholderS
 export { default as Placeholder } from "./Placeholder";
 export type { ProgressBarProps, ProgressBarTone } from "./ProgressBar";
 export { ProgressBar } from "./ProgressBar";
+export type { ProgressRingProps, ProgressRingTone } from "./ProgressRing";
+export { ProgressRing } from "./ProgressRing";
 export type { StatCellAccent, StatCellProps, StatCellTone } from "./StatCell";
 export { StatCell } from "./StatCell";
 export type { StatGridAction, StatGridColumns, StatGridProps, StatGridSize, StatGridSurface, } from "./StatGrid";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@fontsource/ibm-plex-mono": "5.3.0",
     "@fontsource/ibm-plex-sans": "5.3.0",
-    "@k2b/stdlib": "0.26.0",
-    "@tabler/icons-webfont": "3.46.0",
-    "marked": "17.0.6"
+    "@k2b/stdlib": "0.27.0",
+    "@tabler/icons-webfont": "3.48.0",
+    "marked": "18.0.14"
   },
   "peerDependencies": {
     "@k2b/ssr": "^0.12.0 || ^0.13.0 || ^0.14.0",
@@ -60,13 +60,14 @@
     "@types/bun": "1.4.2",
     "babel-preset-solid": "1.9.15",
     "bun-plugin-tailwind": "0.1.2",
-    "happy-dom": "20.11.2",
-    "hono": "4.13.8",
-    "playwright": "1.62.0",
+    "happy-dom": "20.14.5",
+    "hono": "4.13.9",
+    "playwright": "1.63.0",
     "seroval": "1.6.7",
     "solid-js": "1.9.15",
     "tailwindcss": "4.3.3",
-    "typescript": "5.9.3"
+    "typescript": "7.0.2",
+    "@typescript/typescript6": "6.0.2"
   },
   "publishConfig": {
     "access": "public"