@k2b/ui 0.11.0 → 0.13.0

package/dist/types/content/FileView.d.ts

@@ -4,6 +4,7 @@
  * without it every renderer is read-only. IDE-style chrome: editors reuse
  * the markdown editor's surface (toolbar with an in-toolbar save, Ctrl/Cmd+S),
  * previews are quiet paper panels with icon-only actions overlaid top-right.
+ * A plain preview drops the panel and sits on its host's surface instead.
  * Custom renderers are passed per instance, which keeps SSR requests and
  * independently mounted applications isolated.
  */
@@ -17,8 +18,17 @@ export type FileViewContent = {
     mediaType: string;
 };
 export type FileViewProps = {
-    /** Plain previews inherit the surrounding surface without a frame or inset padding. */
+    /**
+     * Plain previews inherit the surrounding surface without a frame or inset padding. They keep their natural height,
+     * so the host scrolls them and owns the actions around them; a host that stretches one gets its scrolling back.
+     */
     variant?: "default" | "plain";
+    /**
+     * Lifts a leading Markdown level-one heading into the host, for example a dialog title. Reports its plain text and
+     * leaves that heading out of the preview, or reports null when the shown file has none, the heading holds a link or
+     * image or is the whole document, or the file fails to load.
+     */
+    onDocumentTitle?: (title: string | null) => void;
     /** Read-only excerpt limit; omitted renders the complete preview. */
     previewLines?: number;
     onExpandPreview?: () => void;

package/dist/types/content/markdown-title.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The document title of Markdown that starts with a level-one heading: its plain text, and the Markdown after it.
+ * Null when the first block is anything else, the heading has no text or holds a link or image, or nothing follows
+ * it; the heading then stays in the document.
+ */
+export declare function leadingMarkdownTitle(markdown: string): {
+    title: string;
+    body: string;
+} | null;

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

@@ -0,0 +1,26 @@
+import { type JSX } from "solid-js";
+import type { InstallPrompt } from "./install";
+export type InstallGuideProps = {
+    /** The name people see on their Home Screen, used in the guidance text. */
+    appName: string;
+    install: InstallPrompt;
+    /**
+     * The address a browser inside another app copies, to open it in Safari or Chrome. Shown as text when copying
+     * fails, so it can be copied by hand.
+     */
+    url: string;
+    /**
+     * An application note under the installation steps or the embedded browser's link, for example what else the
+     * installed app enables.
+     */
+    note?: string;
+    class?: string;
+};
+/**
+ * Explains how to install the current page as an app on this platform: the browser's own dialog where it offers
+ * one, otherwise the steps for Safari on iPhone, iPad, and Mac, other browsers on iPhone and iPad, Android, and other
+ * browsers. A browser inside another app cannot install, so it gets a warning and the link to copy into Safari or
+ * Chrome instead. The host owns the surrounding surface, its heading, and dismissal.
+ */
+export declare function InstallGuide(props: InstallGuideProps): JSX.Element;
+export default InstallGuide;

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

@@ -0,0 +1,19 @@
+export type AnnouncePoliteness = "polite" | "assertive";
+export type AnnounceOptions = {
+    /** `polite` waits until the screen reader is idle; `assertive` interrupts it. Defaults to `polite`. */
+    politeness?: AnnouncePoliteness;
+};
+/**
+ * One pair of persistent, empty live regions per document, polite and assertive, shared by `announce` and every
+ * toast. A region that already exists when its text arrives is announced reliably, unlike one inserted with its text
+ * already inside. They sit directly in the body, outside every portal and the toast rail, which moves into a fresh
+ * top-layer element for every toast, so no scope that closes takes them along.
+ */
+export declare const ensureLiveRegions: (doc: Document) => HTMLElement;
+/**
+ * Tells screen readers about an outcome without showing anything: a change the screen shows but the focused control
+ * does not say, because a shortcut acted, the control was busy, or it was replaced. Each message is its own line, so
+ * a burst of messages or the same message twice is still read. Calls without `document`, including during SSR, do
+ * nothing.
+ */
+export declare const announce: (message: string, options?: AnnounceOptions) => void;

package/dist/types/feedback/dialog-core.d.ts

@@ -8,6 +8,11 @@ export type OpenDialogOptions = {
     initialFocus?: "first-input" | "none" | ((dialog: HTMLDialogElement) => HTMLElement | null);
     cancelBehavior?: "resolve-undefined" | "ignore";
     ariaLabel?: string;
+    /**
+     * Add a same-URL history entry while the dialog is open, so the browser's or the phone's Back closes the dialog
+     * instead of leaving the page. Closing the dialog removes the entry again; the returned promise settles after that.
+     */
+    history?: boolean;
 };
 export type DialogRender<T> = (close: DialogClose<T>, context: {
     dialog: HTMLDialogElement;

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

@@ -1,12 +1,19 @@
+export type { AnnounceOptions, AnnouncePoliteness } from "./announce";
+export { announce } from "./announce";
 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 { InstallGuideProps } from "./InstallGuide";
+export { default as InstallGuide } from "./InstallGuide";
+export type { InstallationPlatform, InstallPrompt } from "./install";
+export { createInstallPrompt, installationPlatform } from "./install";
 export type { ConfirmOptions, DialogOptions, FieldSchema, PromptFieldBase, PromptSearchInput, PromptSearchItem, PromptSearchOptions, } from "./prompts";
 export { createFormState, DialogHeader, prompts } from "./prompts";
 export type { TooltipAnchorProps, TooltipPlacement, TooltipProps, TooltipTriggerProps } from "./Tooltip";
 export { Tooltip } from "./Tooltip";
-export type { ToastAction, ToastFn, ToastHandle, ToastOptions, ToastVariant } from "./toast";
+export { syncThemeColor } from "./theme-color";
+export type { ToastAction, ToastFn, ToastHandle, ToastOptions, ToastSlot, ToastVariant } from "./toast";
 export { isPointInsideToast, toast } from "./toast";

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

@@ -0,0 +1,32 @@
+/**
+ * Which installation steps a browser needs. `apple-in-app` and `in-app` are browsers embedded in another app, on
+ * iPhone or iPad and elsewhere, which cannot install at all. `apple-browser` is Chrome, Firefox, Edge, or another
+ * browser on iPhone or iPad, which installs through its Share menu but less reliably than Safari. `android-browser`
+ * is an Android browser other than Chrome.
+ */
+export type InstallationPlatform = "in-app" | "apple-in-app" | "apple-browser" | "apple-mobile" | "apple-desktop" | "android-browser" | "android" | "generic";
+/**
+ * Classifies the browser from its user agent; `platform` and `touchPoints` only tell an iPad that reports a Mac apart.
+ * A pure function, so the server and the browser compute the same value from the same user agent. Not a device
+ * check: an installed app on iPhone may itself look like an embedded browser.
+ */
+export declare function installationPlatform(userAgent: string, platform: string, touchPoints: number): InstallationPlatform;
+export type InstallPrompt = {
+    platform: InstallationPlatform;
+    /** Running from the Home Screen or as an installed app, or installed during this visit. */
+    installed: () => boolean;
+    /** The browser offered its own installation dialog, which `install()` opens. */
+    canPrompt: () => boolean;
+    busy: () => boolean;
+    /** The person accepted the browser's dialog; the browser finishes the installation. */
+    requested: () => boolean;
+    /** The browser's dialog could not be opened. */
+    failed: () => boolean;
+    /** Opens the browser's dialog once. Call it directly from a click. */
+    install: () => Promise<void>;
+};
+/**
+ * Tracks whether the page runs installed and captures the browser's installation prompt. Browser-only; call it once,
+ * when the page loads, under an owner that lives as long as the page: Chrome offers its prompt only once, early.
+ */
+export declare function createInstallPrompt(): InstallPrompt;

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

@@ -13,6 +13,8 @@ export interface DialogOptions {
     surface?: "default" | "bare";
     header?: false;
     cancelBehavior?: OpenDialogOptions["cancelBehavior"];
+    /** Back closes the prompt like Cancel, as in a phone app; see `OpenDialogOptions.history`. */
+    history?: boolean;
 }
 export interface ConfirmOptions extends DialogOptions {
     confirmationPhrase?: string;

package/dist/types/feedback/theme-color.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Gives the browser chrome the page's current background after a theme change: the `html` background, which iOS
+ * shows behind the status bar and in overscroll, and every `theme-color` meta element. A `media` attribute is
+ * dropped, because the page's chosen theme wins over the system scheme. Browser-only.
+ */
+export declare function syncThemeColor(root?: Element): void;

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

@@ -8,8 +8,10 @@ export type ToastAction = {
 });
 export type ToastOptions = {
     variant?: ToastVariant;
+    /** Milliseconds until the toast closes; `0` keeps it until it is closed. Omit it for the default by variant, length, and action. */
     duration?: number;
     iconClass?: string;
+    /** A short line of context above the message. There is no default title. */
     title?: string;
     action?: ToastAction | null;
     /** Fraction from 0 to 1, or an indeterminate activity indicator. null removes it. */
@@ -20,10 +22,15 @@ export type ToastHandle = {
     dismiss: () => void;
     update: (description: string, options?: ToastOptions) => void;
 };
+export type ToastSlot = {
+    dismiss: () => void;
+};
 export interface ToastFn {
     (description: string, options?: ToastOptions): ToastHandle;
     success: (description: string, options?: Omit<ToastOptions, "variant">) => ToastHandle;
     error: (description: string, options?: Omit<ToastOptions, "variant">) => ToastHandle;
+    /** Places an application-owned element in the toast rail, in toast chrome; the caller owns its content and lifetime. */
+    custom: (content: HTMLElement) => ToastSlot;
     dismissAll: () => void;
 }
 export declare const K2B_TOAST_CONTAINER_ID = "k2b-ui-toast-container";

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

@@ -2,6 +2,7 @@ import { type DateContext } from "@k2b/stdlib";
 import { type JSX } from "solid-js";
 import { type DateRangeValue } from "./date-picker";
 import type { MaybeAccessor, ValueFieldProps } from "./field-contract";
+import type { ChoiceAppearance } from "./Select";
 export type { DateRangeValue } from "./date-picker";
 export type DatePreset<T> = {
     label: string;
@@ -17,9 +18,17 @@ export type DatePickerBaseProps<T> = Omit<ValueFieldProps<T>, "value"> & {
     presets?: readonly DatePreset<T>[];
     dateConfig?: DateContext;
     clearable?: boolean;
+    /** `plain` shows the value as text for property rows; a clearable picker offers clearing in its panel. */
+    appearance?: ChoiceAppearance;
+};
+export type DatePickerProps = DatePickerBaseProps<string | null> & {
+    /** Trigger content for a set value, for example the date with a relative hint. */
+    renderValue?: (value: string) => JSX.Element;
+};
+export type DateTimePickerProps = DatePickerBaseProps<string | null> & {
+    /** Trigger content for a set value, for example the date and time with a relative hint. */
+    renderValue?: (value: string) => JSX.Element;
 };
-export type DatePickerProps = DatePickerBaseProps<string | null>;
-export type DateTimePickerProps = DatePickerBaseProps<string | null>;
 export type DateRangePickerProps = DatePickerBaseProps<DateRangeValue> & {
     withTime?: boolean;
     datePresets?: readonly DatePreset<string | null>[];

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

@@ -1,7 +1,7 @@
 import { type JSX } from "solid-js";
 import { type ChoiceOption } from "./choice";
 import type { ValueFieldProps } from "./field-contract";
-import type { SelectGroup } from "./Select";
+import type { ChoiceAppearance, SelectGroup } from "./Select";
 export type MultiSelectOption = string | {
     id: string;
     label?: string;
@@ -36,6 +36,10 @@ export type MultiSelectInputProps = ValueFieldProps<string[]> & {
     emptyLabel?: string;
     retryLabel?: string;
     clearLabel?: string;
+    /** `plain` shows the selection as wrapping pills without a box; options are removed in the list. */
+    appearance?: ChoiceAppearance;
+    /** Icon class shown before the placeholder while nothing is selected. */
+    placeholderIcon?: string;
 };
 export declare function MultiSelectInput(props: MultiSelectInputProps): JSX.Element;
 export default MultiSelectInput;

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

@@ -1,5 +1,6 @@
 import { type JSX } from "solid-js";
 import type { ValueFieldProps } from "./field-contract";
+import type { ChoiceAppearance } from "./Select";
 export type NumberInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "max" | "min" | "onChange" | "onInput" | "prefix" | "step" | "type" | "value" | keyof ValueFieldProps<number | null>> & ValueFieldProps<number | null> & {
     max?: number;
     min?: number;
@@ -21,6 +22,19 @@ export type NumberInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "
     activeIcon?: string;
     prefix?: JSX.Element;
     suffix?: JSX.Element;
+    /**
+     * `plain` edits the value in place for property rows: no box and no steppers
+     * or clear button. The field sizes to its text, Enter commits, Escape
+     * restores the current value, and clearing the text clears the value. Focus
+     * stays in the field.
+     */
+    appearance?: ChoiceAppearance;
+    /**
+     * Text for a set value while a plain field is not being edited, such as
+     * `90` as "1 h 30 min". It also names the value for assistive technology.
+     * The suffix then shows only while editing.
+     */
+    formatValue?: (value: number) => string;
 };
 export declare function NumberInput(props: NumberInputProps): JSX.Element;
 export default NumberInput;

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

@@ -0,0 +1,20 @@
+import { type JSX } from "solid-js";
+export type QrScannerError = "denied" | "unavailable";
+export type QrScannerProps = {
+    /** Decoded text is untrusted. Return `true` to accept it and stop the camera, `false` to reject it and keep scanning. */
+    onResult: (text: string) => boolean;
+    /** The page was hidden or left; unmount the scanner. */
+    onStop: () => void;
+    /** The camera could not start: access was denied, or there is no usable camera. Offer another way in. */
+    onError: (reason: QrScannerError) => void;
+    /** What to point the camera at. Defaults to a generic QR code hint. */
+    instructions?: string;
+    class?: string;
+};
+/**
+ * Scans a QR code with the rear camera. Each mount owns exactly one camera session, which stops when the scanner
+ * unmounts, the page is hidden, or a result is accepted. The scanning engine loads only when the scanner mounts.
+ * Decoded content is never logged.
+ */
+export declare function QrScanner(props: QrScannerProps): JSX.Element;
+export default QrScanner;

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

@@ -8,6 +8,13 @@ export type SelectGroup = {
 };
 export type SelectView = "list" | "grid";
 export type SelectGridSize = "sm" | "md" | "lg";
+/**
+ * `field` draws the boxed form control. `plain` shows the value as text for
+ * property rows: no box, no chevron, and a quiet surface on hover or while
+ * open. Its surface and hit area cover the nearest positioned ancestor, such as
+ * a `DescriptionList` row, so the whole row opens the picker.
+ */
+export type ChoiceAppearance = "field" | "plain";
 export type SelectSourceOption = string | {
     id: string;
     label?: string;
@@ -45,6 +52,9 @@ export type SelectProps = ValueFieldProps<string | null> & {
     searchPlaceholder?: string;
     clearable?: boolean;
     name?: string;
+    appearance?: ChoiceAppearance;
+    /** Icon class shown before the placeholder while nothing is selected. */
+    placeholderIcon?: string;
 };
 export declare function Select(props: SelectProps): JSX.Element;
 export default Select;

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

@@ -27,7 +27,9 @@ export type { MarkdownEditorProps } from "./markdown/MarkdownEditor";
 export { MarkdownEditor } from "./markdown/MarkdownEditor";
 export type { NumberInputProps } from "./NumberInput";
 export { NumberInput } from "./NumberInput";
-export type { SelectGridSize, SelectGroup, SelectOption, SelectProps, SelectSourceOption, SelectView } from "./Select";
+export type { QrScannerError, QrScannerProps } from "./QrScanner";
+export { QrScanner } from "./QrScanner";
+export type { ChoiceAppearance, SelectGridSize, SelectGroup, SelectOption, SelectProps, SelectSourceOption, SelectView } from "./Select";
 export { Select } from "./Select";
 export type { SelectChipOption, SelectChipProps } from "./SelectChip";
 export { SelectChip } from "./SelectChip";

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

@@ -18,6 +18,7 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     add: string;
     addTag: string;
     addImage: string;
+    apply: string;
     attachments: string;
     assistant: string;
     avatarLabel: ({ name }: {
@@ -250,6 +251,7 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     filterActions: string;
     info: string;
     dismissNotification: string;
+    notifications: string;
     interactiveLineChart: string;
     interactiveChart: string;
     chartFields: ({ key }: {
@@ -425,6 +427,48 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     audioUnsupported: string;
     videoUnsupported: string;
     yes: string;
+    installApp: string;
+    installNative: ({ appName }: {
+        appName: string;
+    }) => string;
+    installRequested: string;
+    installFailed: string;
+    installOpenShare: string;
+    installOpenShareDetail: string;
+    installHomeScreen: string;
+    installHomeScreenDetail: string;
+    installConfirmAdd: string;
+    installConfirmAddDetail: string;
+    installOpenShareBrowserDetail: string;
+    installSafariFallback: string;
+    installSafariMenu: string;
+    installSafariMenuDetail: string;
+    installAddDock: string;
+    installAddDockDetail: string;
+    installBrowserMenu: string;
+    installBrowserMenuDetail: string;
+    installAndroidDetail: string;
+    installBrowserDetail: string;
+    installUnavailable: string;
+    installAppleInAppTitle: string;
+    installAppleInAppDetail: ({ appName }: {
+        appName: string;
+    }) => string;
+    installInAppTitle: string;
+    installInAppDetail: ({ appName }: {
+        appName: string;
+    }) => string;
+    installAppleBrowserTitle: string;
+    installAppleBrowserDetail: string;
+    installAndroidBrowserTitle: string;
+    installAndroidBrowserDetail: string;
+    installCopyLink: string;
+    installLinkCopied: string;
+    installCopyFailed: string;
+    qrCameraPreview: string;
+    qrCameraStarting: string;
+    qrCameraInstructions: string;
+    qrCameraPrivacy: string;
 }>;
 export type UiMessages = ReturnType<(typeof uiMessages)["resolve"]>["t"];
 /** Generic component chrome owned by @k2b/ui, resolved from the inherited render locale. */

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

@@ -0,0 +1,40 @@
+import { type JSX } from "solid-js";
+export type MobileShellProps = {
+    /** Usually `MobileShell.Header`; it sits above the scroll area and pads the top safe area. */
+    header: JSX.Element;
+    /** Usually a `TabBar`; it sits below the scroll area and pads the bottom safe area itself. */
+    footer?: JSX.Element;
+    /** The page content, inside the shell's only scroll area. */
+    children: JSX.Element;
+    class?: string;
+};
+export type MobileShellHeaderProps = {
+    title: string;
+    /** A Back control before the title: a link with `href`, otherwise a button. */
+    back?: {
+        href?: string;
+        onClick?: () => void;
+        label: string;
+    };
+    /** Controls after the title, such as a menu. */
+    actions?: JSX.Element;
+};
+/**
+ * Keeps a mounted shell working: the footer height on the body, which the portalled toast rail reads, the room a
+ * persistent toast takes from the scroll area, the scroll area's edge fade, and immediate feedback for link taps.
+ * The fade is the only cue at the footer's edge, which has no rule. `MobileShell` calls it itself;
+ * a page that renders the shell on the server without hydrating it calls it once in the browser. Returns the
+ * cleanup.
+ */
+export declare function observeMobileShell(root: HTMLElement): () => void;
+declare function MobileShellRoot(props: MobileShellProps): JSX.Element;
+declare function MobileShellHeader(props: MobileShellHeaderProps): JSX.Element;
+/**
+ * The full-screen frame of a phone app: a header, one scroll area, and an optional footer such as a `TabBar`. While
+ * it is mounted, the document itself never scrolls, pinch zoom and rubber-banding are off, and the toast rail sits
+ * above the footer. Mount one per page, as the page's layout.
+ */
+export declare const MobileShell: typeof MobileShellRoot & {
+    Header: typeof MobileShellHeader;
+};
+export default MobileShell;

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

@@ -22,8 +22,8 @@ export type SettingsSectionProps = {
     class?: string;
 };
 /**
- * A full-page settings group. Dialogs keep using PanelDialog.Section; this
- * component owns the quieter, observability-style paper used on admin pages.
+ * A full-page settings group: a heading, optional actions and its fields on the
+ * page surface without a card. Dialogs keep using PanelDialog.Section.
  */
 export declare function SettingsSection(props: SettingsSectionProps): JSX.Element;
 export type SettingsGroupProps = {

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

@@ -0,0 +1,23 @@
+import { type JSX } from "solid-js";
+export type TabBarItem = {
+    id: string;
+    label: string;
+    /** Icon class, for example `ti ti-home`. */
+    icon: string;
+    href: string;
+    /** The page this item leads to is open. */
+    current?: boolean;
+};
+export type TabBarProps = {
+    /** Accessible name of the navigation landmark. */
+    label: string;
+    /** Up to five destinations; further items are not rendered. Put the rest behind a "More" destination. */
+    items: readonly TabBarItem[];
+    class?: string;
+};
+/**
+ * Bottom navigation between a phone app's top-level pages: native links with equal widths, an icon above each label,
+ * and `aria-current="page"` on the open page. Place it in `MobileShell`'s footer; it pads the bottom safe area.
+ */
+export declare function TabBar(props: TabBarProps): JSX.Element;
+export default TabBar;

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

@@ -15,6 +15,8 @@ export type { DiscussionComposerProps, DiscussionItemProps, DiscussionListProps,
 export { default as Discussion } from "./Discussion";
 export type { FloatingWindowClose, FloatingWindowProps, OpenFloatingWindowOptions, } from "./FloatingWindow";
 export { default as FloatingWindow, type FloatingWindowRect, fitFloatingWindowRect, openFloatingWindow, } from "./FloatingWindow";
+export type { MobileShellHeaderProps, MobileShellProps } from "./MobileShell";
+export { default as MobileShell, observeMobileShell } from "./MobileShell";
 export { default as Navigation, type NavigationProps } from "./Navigation";
 export { createNavigation, findNavigationItem, type NavigationController, type NavigationItem, type NavigationOptions, } from "./navigation-model";
 export type { PanelDialogBodyProps, PanelDialogFooterProps, PanelDialogHeaderProps, PanelDialogProps, PanelDialogSectionProps, PanelDialogSurface, PanelDialogTabOption, PanelDialogTabsProps, } from "./PanelDialog";
@@ -35,3 +37,5 @@ export type { SettingsCollectionActionProps, SettingsCollectionItemActionsProps,
 export { default as SettingsCollection } from "./SettingsCollection";
 export type { SettingsModalFooterProps, SettingsModalGroupProps, SettingsModalProps, SettingsModalTabProps, SettingsModalTabTone, } from "./SettingsModal";
 export { default as SettingsModal } from "./SettingsModal";
+export type { TabBarItem, TabBarProps } from "./TabBar";
+export { default as TabBar } from "./TabBar";

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

@@ -4,28 +4,28 @@ export type NoticeTone = Extract<IntentTone, "neutral" | "info" | "success" | "w
 type NoticeCardContentProps = {
     title: JSX.Element;
     detail?: JSX.Element;
+    meta?: JSX.Element;
     children?: JSX.Element;
 } | {
     title?: never;
     detail?: never;
+    meta?: never;
     children: JSX.Element;
 };
 export type NoticeCardProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children" | "class" | "title"> & NoticeCardContentProps & {
     tone?: NoticeTone;
-    icon?: string | false;
     class?: string;
     bodyClass?: string;
 };
 export declare const NOTICE_CARD_CLASSES: {
     readonly root: "k2b-notice-card";
-    readonly inner: "k2b-notice-card__inner";
-    readonly icon: "k2b-notice-card__icon";
     readonly content: "k2b-notice-card__content";
+    readonly head: "k2b-notice-card__head";
     readonly title: "k2b-notice-card__title";
+    readonly meta: "k2b-notice-card__meta";
     readonly description: "k2b-notice-card__description";
     readonly body: "k2b-notice-card__body";
 };
-export declare const NOTICE_CARD_ICONS: Readonly<Record<NoticeTone, string>>;
 declare function NoticeCardComponent(props: NoticeCardProps): JSX.Element;
 export type NoticeGridProps<T> = {
     items: readonly T[];

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

@@ -7,7 +7,7 @@ export { LinkCard } from "./LinkCard";
 export type { NotFoundStateAction, NotFoundStateProps } from "./NotFoundState";
 export { NotFoundState } from "./NotFoundState";
 export type { NoticeCardProps, NoticeGridProps, NoticeTone } from "./NoticeCard";
-export { NOTICE_CARD_CLASSES, NOTICE_CARD_ICONS, NoticeCard } from "./NoticeCard";
+export { NOTICE_CARD_CLASSES, NoticeCard } from "./NoticeCard";
 export type { PaperProps, PaperTag } from "./Paper";
 export { Paper } from "./Paper";
 export type { PlaceholderAlign, PlaceholderProps, PlaceholderState, PlaceholderSurface, PlaceholderVariant, } from "./Placeholder";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -46,7 +46,8 @@
     "@fontsource/ibm-plex-sans": "5.3.0",
     "@k2b/stdlib": "0.27.0",
     "@tabler/icons-webfont": "3.48.0",
-    "marked": "18.0.14"
+    "marked": "18.0.14",
+    "qr-scanner": "1.4.2"
   },
   "peerDependencies": {
     "@k2b/ssr": "^0.12.0 || ^0.13.0 || ^0.14.0",