@k2b/ui 0.26.0 → 0.28.0

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

@@ -21,6 +21,12 @@ export type SelectChipProps<T extends string | number = string> = ValueFieldProp
     /** Exact menu width as a CSS length. Without it the menu sizes to its options, at least `10rem`. */
     menuWidth?: string;
     name?: string;
+    /** Shows that a change from this chip is saving: the chip stays in place with
+     *  its size, cannot be opened, is marked busy, and shows a spinner where its
+     *  chevron (or, icon-only, its icon) is. */
+    loading?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 };
 export declare function SelectChip<T extends string | number = string>(props: SelectChipProps<T>): JSX.Element;
 export default SelectChip;

package/dist/types/inputs/file-drop.d.ts

@@ -37,6 +37,8 @@ export type FileDropTargetEntry = {
     region?: () => Element | undefined;
     /** Set for regions: where the target itself is rendered; a region whose host is hidden takes no drops. */
     host?: () => Element | undefined;
+    /** Set for specific targets that show the drop sentence themselves, so the area's overlay does not repeat it. */
+    labelled?: boolean;
 };
 export type FileDropHover = {
     entry: FileDropTargetEntry;

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

@@ -9,7 +9,7 @@ export type AppWorkspaceProps = {
     /** A host with its own phone chrome can use the full canvas below 48rem (768 px). */
     mobileSurface?: "contained" | "flush";
     /** Removes the workspace's own border, radius, and shadow for an overview that is the page itself.
-     * A host may frame the outermost workspace as its app card, as Cloud does from 1536 px on signed-in pages. */
+     * A host may frame the outermost workspace as its app card, as Cloud does from 1024 px on signed-in pages. */
     flat?: boolean;
     resizable?: boolean;
     /**
@@ -41,6 +41,10 @@ export type AppWorkspaceMainProps = {
     /** `"content"` centers the children as one reading column with the shared page width on large screens. */
     width?: "full" | "content";
     mobilePane?: string;
+    /** Levels in DOM order, shallowest first. The URL selects the deepest level by id. */
+    level?: string;
+    /** Enhanced navigation for the back step; otherwise it is a document link. */
+    onLevelNavigate?: (event: LinkNavigateEvent) => void | Promise<void>;
     scroll?: boolean;
     scrollFade?: boolean;
     scrollPreserveKey?: string | false;
@@ -49,6 +53,12 @@ export type AppWorkspaceMainProps = {
 export type AppWorkspaceMainPaneProps = {
     id: string;
     label: string;
+    /** Levels mode: URL selecting this level. Required except on the last level. */
+    href?: string;
+    /** Quiet one-line text below the level title. */
+    description?: JSX.Element;
+    /** Controls at the end of the level head. */
+    actions?: JSX.Element;
     surface?: "default" | "navigation";
     open?: boolean;
     resizable?: boolean;
@@ -68,6 +78,8 @@ export type AppWorkspaceDetailProps = {
     id: string;
     class?: string;
     width?: AppWorkspaceDetailWidth;
+    /** Below 48rem, a full page without sheet gestures for a destination such as chat info; defaults to "sheet". */
+    phone?: "sheet" | "page";
     viewTransitionName?: string;
     resizable?: boolean;
     minWidth?: number;

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

@@ -9,6 +9,14 @@ export declare const bottomSheetOptions: {
     contentClassName: string;
     initialFocus: typeof sheetInitialFocus;
 };
+/** A sheet on phones and a centered dialog from 48rem up, for decisions and forms; menus keep
+ * `bottomSheetOptions`. The stylesheet picks the mode with the phone media query, so the first
+ * frame is already right and a rotation or resize switches it in place, without a remount. */
+export declare const bottomSheetAdaptiveOptions: {
+    contentClassName: string;
+    initialFocus: typeof sheetInitialFocus;
+    panelClassName: string;
+};
 export type BottomSheetProps = {
     children: JSX.Element;
     /** Pass dialogCore's render context requestDismiss, never the completion callback. */

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

@@ -43,6 +43,9 @@ type DetailPanelSectionBaseProps = {
     icon?: string;
     tone?: DetailPanelTone;
     description?: JSX.Element;
+    /** How many things the section lists, as a chip after the title; `0` reads "None yet". */
+    count?: number;
+    /** Short state after the title, such as "2 of 4 done". */
     meta?: JSX.Element;
     class?: string;
 };
@@ -61,6 +64,10 @@ type DetailPanelActionBaseProps = {
     leading?: JSX.Element;
     trailing?: JSX.Element;
     secondaryAction?: DetailPanelActionSecondary;
+    /** Marks the row of the current place, such as the section in view, in the panel's accent. */
+    current?: boolean;
+    /** Lets the title wrap to two lines instead of ending with an ellipsis. */
+    wrap?: boolean;
     class?: string;
 };
 type DetailPanelActionMenuProps = {
@@ -102,5 +109,9 @@ type DetailPanelComponent = ((props: DetailPanelProps) => JSX.Element) & {
     Section: (props: DetailPanelSectionProps) => JSX.Element;
     Action: (props: DetailPanelActionProps) => JSX.Element;
 };
+/** A count chip, or "None yet" for zero; shared by sections and discussions. */
+export declare const DetailPanelCount: (props: {
+    count: number;
+}) => JSX.Element;
 declare const DetailPanel: DetailPanelComponent;
 export default DetailPanel;

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

@@ -30,6 +30,14 @@ export type DiscussionListProps = {
     loadingMore?: boolean;
     loadMoreLabel?: string;
     onLoadMore?: () => boolean | void | Promise<boolean | void>;
+    /**
+     * Shows only the newest `fold` entries and a "Show n older" toggle above them. Expanded, the toggle reads "Show less"
+     * and earlier pages load as usual. Omit it to show every loaded entry.
+     */
+    fold?: number;
+    /** Controls the fold, for example to reveal an older entry; `onExpandedChange` requests a change. */
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
     class?: string;
 };
 export type DiscussionItemProps = Omit<JSX.LiHTMLAttributes<HTMLLIElement>, "children" | "class"> & {

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

@@ -10,6 +10,8 @@ export type TableOfContentsProps = {
     title?: string;
     /** Element whose scrolling decides the active section. Defaults to the window. */
     scrollRoot?: MaybeAccessor<HTMLElement | undefined>;
+    /** Element that contains the section headings. Defaults to the document. */
+    contentRoot?: MaybeAccessor<HTMLElement | undefined>;
     /** Stay in view inside the caller's layout. */
     sticky?: boolean;
     /** Called when another section becomes active. */

package/dist/types/layout/detail-panel-messages.d.ts

@@ -0,0 +1,15 @@
+/** Counts and list folding shared by detail panel sections and discussions. */
+declare const detailPanelMessages: import("@k2b/stdlib").Catalog<{
+    noneYet: string;
+    showOlder: ({ count }: {
+        count: number;
+    }) => string;
+    showMore: ({ count }: {
+        count: number;
+    }) => string;
+    showLess: string;
+}>;
+export type DetailPanelMessages = ReturnType<(typeof detailPanelMessages)["resolve"]>["t"];
+export declare const useDetailPanelMessages: () => (() => DetailPanelMessages);
+export declare const checkDetailPanelMessages: () => import("@k2b/stdlib").CatalogIssue[];
+export {};

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

@@ -6,7 +6,7 @@ export type { AppWorkspaceControllerOptions } from "./app-workspace-controller";
 export { installAppWorkspaceController } from "./app-workspace-controller";
 export type { AppWorkspaceLayoutState, AppWorkspaceResizeKind, } from "./app-workspace-state";
 export { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_MAIN_MIN, APP_WORKSPACE_MAIN_MIN_HEIGHT, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSE_THRESHOLD, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable, appWorkspaceResizeLimits, normalizeAppWorkspaceLayoutState, parseAppWorkspaceLayoutState, resolveAppWorkspaceSidebarWidth, safeAppWorkspacePanelId, serializeAppWorkspaceLayoutState, shouldCollapseAppWorkspaceSidebar, } from "./app-workspace-state";
-export { type BottomSheetProps, bottomSheetOptions, default as BottomSheet } from "./BottomSheet";
+export { type BottomSheetProps, bottomSheetAdaptiveOptions, bottomSheetOptions, default as BottomSheet } from "./BottomSheet";
 export type { DataPanelProps } from "./DataPanel";
 export { DataPanel } from "./DataPanel";
 export type { DetailPanelActionButtonProps, DetailPanelActionLinkProps, DetailPanelActionProps, DetailPanelActionSecondary, DetailPanelBodyProps, DetailPanelGroupProps, DetailPanelHeaderProps, DetailPanelProps, DetailPanelSectionProps, DetailPanelSummaryProps, DetailPanelTone, } from "./DetailPanel";

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

@@ -1,5 +1,14 @@
 import { type JSX } from "solid-js";
 export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * A status ring around the avatar: `"success"` for an active state such as someone working on a task, or an explicit
+ * color, for example a collaborator's cursor color.
+ */
+export type AvatarRing = "success" | {
+    color: string;
+};
+/** `square` marks an agent or service account; people stay round. */
+export type AvatarShape = "circle" | "square";
 export type AvatarProps = {
     name: string;
     src?: string | null;
@@ -7,6 +16,9 @@ export type AvatarProps = {
     alt?: string;
     fallback?: string;
     size?: AvatarSize;
+    /** Draws a ring with a small transparent gap inside the avatar's own box, so the avatar keeps its size and no container clips the ring. */
+    ring?: AvatarRing;
+    shape?: AvatarShape;
     loading?: "eager" | "lazy";
     class?: string;
     style?: JSX.CSSProperties | string;

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

@@ -0,0 +1,41 @@
+import { type JSX } from "solid-js";
+import { type AvatarShape } from "./Avatar";
+export type AvatarStackPerson = {
+    /** Stable key, such as the account id. */
+    id: string;
+    name: string;
+    src?: string | null;
+    /** Shown instead of initials when there is no picture. */
+    icon?: string;
+    /** `square` for agents and service accounts. */
+    shape?: AvatarShape;
+    /** A short tag after the name, such as "Agent". */
+    badge?: JSX.Element;
+    /** One line below the name; it ends with an ellipsis instead of wrapping. */
+    detail?: JSX.Element;
+    /** Icon class before `detail`. */
+    detailIcon?: string;
+    /** Short text at the end of the row, such as "2 tabs". */
+    trailing?: JSX.Element;
+    /** The person viewing: listed last, below a gap, and never in the stack. */
+    self?: boolean;
+    /** Makes the row a button. The list closes first. */
+    onSelect?: () => void;
+};
+export type AvatarStackProps = {
+    people: readonly AvatarStackPerson[];
+    /** Title of the list that the stack opens, such as "Here now". */
+    title: string;
+    /** Accessible name of the stack button, such as "Here now: Jana Berger and 2 more". */
+    label: string;
+    /** One quiet line below the list. */
+    hint?: JSX.Element;
+    /** Faces before "+n". Defaults to 3. */
+    max?: number;
+    class?: string;
+};
+/**
+ * A few overlapping faces, then "+n", as one button. It opens the full list of people beside it, or as a bottom sheet
+ * on phones. People with `self` are listed last and never shown in the stack.
+ */
+export declare function AvatarStack(props: AvatarStackProps): JSX.Element;

package/dist/types/surfaces/avatar-messages.d.ts

@@ -3,6 +3,9 @@ declare const avatarMessages: import("@k2b/stdlib").Catalog<{
         name: string;
     }) => string;
     unknownUser: string;
+    moreCount: ({ count }: {
+        count: number;
+    }) => string;
 }>;
 export type AvatarMessages = ReturnType<(typeof avatarMessages)["resolve"]>["t"];
 /** Resolved from the inherited render locale. */

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

@@ -1,5 +1,7 @@
-export type { AvatarProps, AvatarSize } from "./Avatar";
+export type { AvatarProps, AvatarRing, AvatarShape, AvatarSize } from "./Avatar";
 export { Avatar } from "./Avatar";
+export type { AvatarStackPerson, AvatarStackProps } from "./AvatarStack";
+export { AvatarStack } from "./AvatarStack";
 export type { DescriptionListItem, DescriptionListProps } from "./DescriptionList";
 export { DescriptionList } from "./DescriptionList";
 export type { LinkCardColor, LinkCardProps } from "./LinkCard";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -26,6 +26,11 @@
     "./styles.css": "./dist/styles.css",
     "./fonts/plex.css": "./dist/plex.css",
     "./icons/tabler.css": "./dist/tabler.css",
+    "./chart-inspection": {
+      "types": "./dist/types/chart-inspection.d.ts",
+      "browser": "./dist/browser/chart-inspection.js",
+      "default": "./dist/browser/chart-inspection.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -37,7 +42,7 @@
     "check:declarations": "bun run scripts/check-declarations.ts",
     "fixture:build": "bun run build && NODE_ENV=production bun run fixture/scripts/build.ts",
     "fixture:typecheck": "tsc -p fixture/tsconfig.json --noEmit --pretty false",
-    "test": "bun run build && bun test --path-ignore-patterns '**/*.behavior.test.*' src scripts && bun run scripts/check-packed-consumer.ts",
+    "test": "bun run build && bun test --path-ignore-patterns '**/*.behavior.test.*' src scripts test/browser.browser.test.ts && bun run scripts/check-packed-consumer.ts",
     "typecheck": "tsc --checkers 2 -p tsconfig.json --noEmit --pretty false && bun run check:declarations && bun run typecheck:dom",
     "typecheck:dom": "tsc -p test/tsconfig.json --noEmit --pretty false",
     "prepack": "bun run build"
@@ -51,13 +56,13 @@
     "qr-scanner": "1.4.2"
   },
   "peerDependencies": {
-    "@k2b/ssr": "^0.12.0 || ^0.13.0 || ^0.14.0 || ^0.15.0 || ^0.16.0",
+    "@k2b/ssr": "^0.12.0 || ^0.13.0 || ^0.14.0 || ^0.15.0 || ^0.16.0 || ^0.17.0",
     "solid-js": "^1.9.10"
   },
   "devDependencies": {
     "@babel/core": "8.0.6",
     "@babel/preset-typescript": "8.0.1",
-    "@k2b/ssr": "0.16.0",
+    "@k2b/ssr": "0.17.0",
     "@types/babel__core": "7.20.5",
     "@types/bun": "1.4.2",
     "axe-core": "4.11.0",