@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

package/dist/summary-row.d.ts

@@ -0,0 +1,56 @@
+import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
+
+/** `row` for a list section; `card` for a board column. */
+type SummaryRowPresentation = 'row' | 'card';
+/** A row's place in a rounded list section, so its corners match. */
+type SummaryRowListEdge = 'start' | 'end' | 'only';
+type SummaryRowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-presentation'?: never;
+    'data-list-edge'?: never;
+    'data-rail'?: never;
+    'data-selected'?: never;
+    'data-dimmed'?: never;
+}>;
+interface SummaryRowProps {
+    /** The identity line: an identifier, inline status glyphs, and the title. */
+    title: KerfUiContent;
+    /** Optional leading glyph, such as a category icon. */
+    leading?: SafeHtml;
+    /** Quiet text at the end of the title line, such as a relative time. */
+    trailingMeta?: string | SafeHtml;
+    /** A wrapping line of badges, chips, and quiet text below the title. */
+    metadata?: KerfUiContent;
+    /** `row` (default) or `card`. */
+    presentation?: SummaryRowPresentation;
+    /** Title lines before clipping; default 2 for a row and 4 for a card. */
+    titleLines?: number;
+    /** A leading state rail in a semantic tone (Up Next, blocked, …). */
+    rail?: SemanticTone;
+    /** Selected state, exposed as `aria-selected`. */
+    selected?: boolean;
+    /** Dim a finished or cut item; hover and selection restore it. */
+    dimmed?: boolean;
+    /** Round the corners that meet a rounded list section's edge. */
+    listEdge?: SummaryRowListEdge;
+    /** Skip rendering while off screen in long lists (`content-visibility`). */
+    deferRendering?: boolean;
+    /** Accessible name when the visible content is not a good one. */
+    ariaLabel?: string;
+    id?: string;
+    className?: string;
+    /** Safe `data-*` identity (an item id or delegated action) on the option. */
+    rootAttributes?: SummaryRowRootAttributes;
+}
+/**
+ * A selectable, keyboard-focusable summary of one item, as a list row or a
+ * board card: an optional leading glyph and state rail, a clamped identity line
+ * with trailing quiet metadata, and a wrapping metadata line. It is a
+ * `role="option"`; place rows in a labeled `role="listbox"` and own selection
+ * and keyboard movement in the application.
+ */
+declare function SummaryRow({ title, leading, trailingMeta, metadata, presentation, titleLines, rail, selected, dimmed, listEdge, deferRendering, ariaLabel, id, className, rootAttributes, }: SummaryRowProps): SafeHtml;
+
+export { SummaryRow, type SummaryRowListEdge, type SummaryRowPresentation, type SummaryRowProps };

package/dist/summary-row.js

@@ -0,0 +1,4 @@
+export { SummaryRow } from './chunk-4UB5Z3ZZ.js';
+
+
+//# sourceMappingURL=summary-row.js.map

package/dist/summary-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"summary-row.js"}

package/dist/sunken-panel.d.ts

@@ -0,0 +1,38 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssFlexKeyword, CssFlex } from './css-values.js';
+
+/**
+ * Generate the sunken texture once for a document. Sunken surfaces call this
+ * as they render; it is idempotent, and on a server (no document) or without
+ * a 2D canvas it does nothing, leaving the flat lowered surface.
+ */
+declare function ensureSunkenTexture(doc?: Document | undefined): void;
+
+type SunkenPanelShape = 'rounded' | 'square';
+interface SunkenPanelProps {
+    children?: KerfUiContent;
+    /** Optional accessible landmark name for a distinct application region. */
+    ariaLabel?: string;
+    /** Corner shape: a rounded rectangle (default) or square corners. */
+    shape?: SunkenPanelShape;
+    /** Grow or shrink within a flex parent, using Grid's typed flex contract. */
+    flex?: boolean | CssFlexKeyword | CssFlex;
+    /** Fill a parent with a definite height; use flex inside a flex layout. */
+    fill?: boolean;
+    /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel. */
+    tabIndex?: 0 | -1;
+    /** Keep the standard focus outline visible, such as for a drop target. */
+    outlined?: boolean;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A lowered application surface with one compact inset and a vertical content
+ * stack. The panel owns its background and padding; children own their own
+ * borders and internal geometry.
+ */
+declare function SunkenPanel({ children, ariaLabel, shape, flex, fill, tabIndex, outlined, className, slot, }: SunkenPanelProps): kerfjs.SafeHtml;
+
+export { SunkenPanel, type SunkenPanelProps, type SunkenPanelShape, ensureSunkenTexture };

package/dist/sunken-panel.js

@@ -0,0 +1,4 @@
+export { SunkenPanel } from './chunk-D5RGM3XA.js';
+export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
+
+//# sourceMappingURL=sunken-panel.js.map

package/dist/sunken-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"sunken-panel.js"}

package/dist/surface-scaffold-register.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Importing this module wires every DialogSurface in the document: the close
+ * button, `data-dialog-close`, Escape, and backdrop requests through the
+ * cancelable `kui-request-close`. `openDialog` also wires the dialogs it
+ * opens, measuring a floating header's or footer's body clearance, showing a
+ * floating header's divider while content scrolls beneath it, and following a
+ * bottom sheet's keyboard clearance and resize grabber, all kept across
+ * application re-renders while the dialog is open.
+ */
+declare const surfaceScaffoldElementsRegistered = true;
+
+export { surfaceScaffoldElementsRegistered };

package/dist/surface-scaffold-register.js

@@ -0,0 +1,10 @@
+import { installDialogSurfaces } from './chunk-ATGAJVZ6.js';
+
+
+// src/components/surfaces/surface-scaffold/register/surface-scaffold-register.ts
+installDialogSurfaces();
+var surfaceScaffoldElementsRegistered = true;
+
+export { surfaceScaffoldElementsRegistered };
+
+//# sourceMappingURL=surface-scaffold-register.js.map

package/dist/surface-scaffold-register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/surface-scaffold/register/surface-scaffold-register.ts"],"names":[],"mappings":";;;;AAEA,qBAAA,EAAsB;AAWf,IAAM,iCAAA,GAAoC","file":"surface-scaffold-register.js","sourcesContent":["import { installDialogSurfaces } from '../internal/dialog-surface-controller.js';\n\ninstallDialogSurfaces();\n\n/**\n * Importing this module wires every DialogSurface in the document: the close\n * button, `data-dialog-close`, Escape, and backdrop requests through the\n * cancelable `kui-request-close`. `openDialog` also wires the dialogs it\n * opens, measuring a floating header's or footer's body clearance, showing a\n * floating header's divider while content scrolls beneath it, and following a\n * bottom sheet's keyboard clearance and resize grabber, all kept across\n * application re-renders while the dialog is open.\n */\nexport const surfaceScaffoldElementsRegistered = true;\n"]}

package/dist/surface-scaffold.d.ts

@@ -0,0 +1,280 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
+
+/** What asked an open DialogSurface to close. */
+type DialogCloseSource = 'close-button' | 'escape' | 'backdrop';
+/** The detail of a DialogSurface's cancelable `kui-request-close` event. */
+interface DialogRequestCloseDetail {
+    readonly source: DialogCloseSource;
+}
+/**
+ * Open a DialogSurface as a modal dialog: in the top layer, the rest of the
+ * page inert, focus on its `autofocus` element or else the panel. It plays
+ * its enter motion and, with the controller installed here, keeps its
+ * measured chrome, sheet height, and keyboard clearance across application
+ * re-renders. Opening an open dialog does nothing.
+ */
+declare function openDialog(dialog: HTMLDialogElement): void;
+/**
+ * Close an open DialogSurface after its exit motion. The application's own
+ * close is never refused: no `kui-request-close` is dispatched. The native
+ * `close` event fires once it has closed.
+ */
+declare function closeDialog(dialog: HTMLDialogElement): void;
+
+type DialogSurfaceSize = 'small' | 'medium' | 'large';
+/**
+ * How the dialog is presented: `modal` (default) centered on the screen,
+ * `side-sheet` against the inline end, `fullscreen`, or `bottom-sheet`
+ * attached to the bottom edge (square bottom corners, safe-area and
+ * virtual-keyboard clearance, optionally user-resizable).
+ */
+type DialogSurfacePresentation = 'modal' | 'side-sheet' | 'fullscreen' | 'bottom-sheet';
+/**
+ * How a bottom sheet appears or leaves: `slide` (default) moves the panel in
+ * from, or out to, the bottom edge; `standard` keeps the dialog's
+ * scale-and-fade. Both honor `prefers-reduced-motion`.
+ */
+type DialogSurfaceSheetMotion = 'slide' | 'standard';
+type SurfaceInset = 'none' | 'compact' | 'comfortable';
+type DialogSurfaceMaxHeight = CssLength | 'viewport';
+/** A definite modal height: a length or the full viewport, minus both gutters. */
+type DialogSurfaceHeight = CssLength | 'viewport';
+/**
+ * How the dialog body lays out its children: `flow` (default) scrolls ordinary
+ * content in the body; `fill` gives one child the body's whole height and
+ * lets it own scrolling (a SplitView, a Pane, an editor); `fill-last` stacks
+ * the leading children at their natural height and gives the last child the
+ * remaining height to own its scrolling (a heading and notices above a
+ * scrolling transcript).
+ */
+type DialogSurfaceBodyLayout = 'flow' | 'fill' | 'fill-last';
+/**
+ * Where the dialog footer sits: `docked` (default) below the body, or
+ * `floating` over the body's block end, inset from the panel's inline and
+ * block-end edges on a transparent background (a chat composer).
+ */
+type DialogSurfaceFooterPresentation = 'docked' | 'floating';
+/**
+ * Where the dialog header sits: `docked` (default) above the body, or
+ * `floating` over the body's block-start edge on the translucent chrome
+ * material, so content scrolls visibly beneath the title bar.
+ */
+type DialogSurfaceHeaderPresentation = 'docked' | 'floating';
+/**
+ * Application `data-*` identity on the DialogSurface root, such as
+ * `data-key`; the surface's own configuration attributes stay protected.
+ */
+type DialogSurfaceRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+/**
+ * The dialog's accessible name: its `label` text (also the default title), or
+ * the id of an element that names it, such as a `heading` ToolbarText.
+ */
+type DialogSurfaceName = {
+    label: string;
+    labelledBy?: never;
+} | {
+    label?: never;
+    labelledBy: string;
+};
+type DialogSurfaceProps = DialogSurfaceName & DialogSurfaceOptions;
+interface DialogSurfaceOptions {
+    /** The dialog's id, for `openDialog(document.getElementById(id))`. */
+    id?: string;
+    /**
+     * Id of the element whose text is the dialog's accessible description,
+     * such as the `heading` ToolbarText's `descriptionId` or app-owned summary
+     * copy in the body; rendered as `aria-describedby` on the `<dialog>`.
+     */
+    describedBy?: string;
+    /**
+     * An alert dialog: a confirmation that interrupts the person to report
+     * something urgent or ask before a destructive action ("Delete this
+     * topic?"). Renders `role="alertdialog"` on the `<dialog>`; set
+     * `describedBy` to the element holding the message, and leave
+     * `lightDismiss` off so the person answers it.
+     */
+    alert?: boolean;
+    /** The body content. */
+    children: KerfUiContent;
+    /**
+     * Header title content in place of the `label` text, such as an xl
+     * `ToolbarText` with a description. The dialog keeps its `label` (or
+     * `labelledBy`) name.
+     */
+    heading?: KerfUiContent;
+    /** Controls before the close button in the header. */
+    headerActions?: KerfUiContent;
+    /** The footer, below the body (or floating over it); usually its buttons. */
+    footer?: KerfUiContent;
+    /**
+     * Render no header: no title and no close button. The content then owns its
+     * heading and a way to close (an element with `data-dialog-close`).
+     */
+    withoutHeader?: boolean;
+    /** Close on a press on the backdrop; otherwise the panel pulses. */
+    lightDismiss?: boolean;
+    /** The close button's accessible name (default `Close`). */
+    closeLabel?: string;
+    size?: DialogSurfaceSize;
+    presentation?: DialogSurfacePresentation;
+    /** Modal preferred width. Takes precedence over size, within the viewport cap. */
+    preferredWidth?: CssLength;
+    bodyInset?: SurfaceInset;
+    footerInset?: SurfaceInset;
+    /** Modal edge clearance. Omit to retain Web Awesome's default viewport cap. */
+    viewportGutter?: CssLength;
+    /**
+     * Modal height cap, bounded by the dynamic viewport minus both gutters. On a
+     * bottom sheet, the cap (and the resize ceiling), bounded by the dynamic
+     * viewport minus the top safe area and one gutter.
+     */
+    maxHeight?: DialogSurfaceMaxHeight;
+    /**
+     * Modal definite height, bounded the same way, so a filling child has a
+     * height to fill. Takes precedence over `maxHeight`. On a bottom sheet, the
+     * height it opens at (the visible height above the safe area or keyboard).
+     */
+    height?: DialogSurfaceHeight;
+    /**
+     * A resizable bottom sheet's resize floor (default 160px), the visible
+     * height above the safe area or keyboard.
+     */
+    minHeight?: CssLength;
+    /**
+     * Let the person resize a bottom sheet by its top grabber (drag, or the
+     * arrow, Page Up/Down, Home and End keys) between `minHeight` and the
+     * sheet's cap. Needs the `/register` entry; each opening starts at `height`
+     * (or the content height). Ignored by other presentations.
+     */
+    resizable?: boolean;
+    /** How a bottom sheet appears (default `slide` up from the bottom edge). */
+    enterMotion?: DialogSurfaceSheetMotion;
+    /** How a bottom sheet is dismissed (default `slide` down off the bottom edge). */
+    exitMotion?: DialogSurfaceSheetMotion;
+    /**
+     * Body layout (default `flow`); `fill` lets one child own the body and
+     * `fill-last` stacks fixed rows above one filling last child.
+     */
+    bodyLayout?: DialogSurfaceBodyLayout;
+    /**
+     * Header placement (default `docked`); `floating` lays the dialog's header
+     * (its title and close control) over the body's block-start edge on the
+     * translucent chrome material (`--kui-chrome-material-raised`, opaque under
+     * `prefers-reduced-transparency`, increased contrast, forced colors, or
+     * without `backdrop-filter`). The `/register` entry measures the header;
+     * the body reserves that height before its own inset, so its first content
+     * rests below the title bar. A `fill`/`fill-last` child that is the body's
+     * only child and opts into block-start `scrollClearance` (a `List` or
+     * `Pane`) takes the clearance inside its own scroll area instead, published
+     * as `--kui-scroll-clearance-block-start`, so its content scrolls visibly
+     * beneath the header. Unmeasured (without the register), the header stays
+     * docked. Keep header text in the normal text color: quiet text can fall
+     * below AA over the content passing beneath it.
+     */
+    headerPresentation?: DialogSurfaceHeaderPresentation;
+    /**
+     * Footer placement (default `docked`); `floating` lays the footer over the
+     * body's block end. The body reserves the footer's measured height so its
+     * last content is never hidden beneath it. A `fill`/`fill-last` child that
+     * opts into block-end `scrollClearance` (a `List` or `Pane`) takes that
+     * clearance inside its own scroll area instead, published as
+     * `--kui-scroll-clearance-block-end`, so its content scrolls visibly beneath
+     * the transparent footer.
+     */
+    footerPresentation?: DialogSurfaceFooterPresentation;
+    /**
+     * A floating footer's clearance from the panel's inline and block-end edges
+     * (default the 16px container inset). Choose a phone value such as
+     * `remify(8)` from `deviceClass()`; the scaffold adds no breakpoint.
+     */
+    footerOffset?: CssLength;
+    /**
+     * Safe `data-*` identity on the root. Give sibling dialogs distinct
+     * `data-key`s so a re-render morphs each surface into itself instead of
+     * reusing one dialog's element for another (structurally identical roots
+     * are otherwise matched by position).
+     */
+    rootAttributes?: DialogSurfaceRootAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A modal dialog: a native `<dialog>` with Kerf's header, body, and footer
+ * chrome, sized and presented by its props. Render it closed, then open it
+ * with `openDialog()` and close it with `closeDialog()`, the close button, an
+ * element with `data-dialog-close`, Escape, or (with `lightDismiss`) a press
+ * on the backdrop. Import `@kerfjs/ui/surface-scaffold/register` for the
+ * floating header and footer measurement, the bottom sheet's keyboard
+ * clearance and grabber, and re-render resilience while open.
+ */
+declare function DialogSurface({ id, label, labelledBy, describedBy, alert, heading, headerActions, footer, withoutHeader, lightDismiss, closeLabel, children, size, presentation, preferredWidth, bodyInset, footerInset, viewportGutter, maxHeight, height, minHeight, resizable, enterMotion, exitMotion, bodyLayout, headerPresentation, footerPresentation, footerOffset, rootAttributes, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
+/** Where a PopoverDialogSurface appears: the top layer, or in flow. */
+type PopoverDialogSurfacePresentation = 'overlay' | 'embedded';
+/** Application `data-*` metadata on the surface root. */
+type PopoverDialogSurfaceDataAttributes = Readonly<Record<`data-${string}`, string>>;
+type PopoverDialogSurfaceName = {
+    label: string;
+    labelledBy?: never;
+} | {
+    label?: never;
+    labelledBy: string;
+};
+type PopoverDialogSurfaceProps = PopoverDialogSurfaceName & {
+    /** The root id: what an opening control's `popovertarget` names. */
+    id?: string;
+    /**
+     * Id of the element whose text is the dialog's accessible description,
+     * such as a title `ToolbarText`'s `descriptionId`; rendered as
+     * `aria-describedby` on the `role="dialog"` root.
+     */
+    describedBy?: string;
+    children: KerfUiContent;
+    /**
+     * `overlay` (default) is a native `popover="auto"` in the top layer:
+     * non-modal, light dismiss (Escape or a press outside), nothing inert.
+     * `embedded` renders the same surface in flow for a catalog or inline use.
+     */
+    presentation?: PopoverDialogSurfacePresentation;
+    /** Preferred width preset: 400px, 560px (default), or 800px. */
+    size?: DialogSurfaceSize;
+    /** Preferred width; takes precedence over `size`, within the viewport cap. */
+    preferredWidth?: CssLength;
+    /** Definite height, bounded by the dynamic viewport minus both gutters. */
+    height?: DialogSurfaceHeight;
+    /** Height cap, bounded the same way, for a surface that sizes to content. */
+    maxHeight?: DialogSurfaceMaxHeight;
+    /** Edge clearance on each side of the viewport (default 16px). */
+    viewportGutter?: CssLength;
+    /**
+     * Body layout (default `flow`); `fill` lets one child own the surface and
+     * `fill-last` stacks fixed rows above one filling last child.
+     */
+    bodyLayout?: DialogSurfaceBodyLayout;
+    rootAttributes?: PopoverDialogSurfaceDataAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+};
+/**
+ * A non-modal dialog surface on the native Popover API: Kerf's dialog chrome,
+ * viewport-bounded size, and single-child fill without application CSS.
+ * Open it with a `popovertarget` control or `showPopover()`; it light
+ * dismisses and leaves the page interactive. Use `DialogSurface` when the
+ * task must block the page.
+ */
+declare function PopoverDialogSurface({ id, children, label, labelledBy, describedBy, presentation, size, preferredWidth, height, maxHeight, viewportGutter, bodyLayout, rootAttributes, className, slot, }: PopoverDialogSurfaceProps): kerfjs.SafeHtml;
+type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';
+interface PopupSurfaceProps {
+    children: KerfUiContent;
+    inset?: PopupSurfaceInset;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */
+declare function PopupSurface({ children, inset, className, slot, }: PopupSurfaceProps): kerfjs.SafeHtml;
+
+export { type DialogCloseSource, type DialogRequestCloseDetail, DialogSurface, type DialogSurfaceBodyLayout, type DialogSurfaceFooterPresentation, type DialogSurfaceHeaderPresentation, type DialogSurfaceHeight, type DialogSurfaceMaxHeight, type DialogSurfaceName, type DialogSurfaceOptions, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceRootAttributes, type DialogSurfaceSheetMotion, type DialogSurfaceSize, PopoverDialogSurface, type PopoverDialogSurfaceDataAttributes, type PopoverDialogSurfacePresentation, type PopoverDialogSurfaceProps, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset, closeDialog, openDialog };

package/dist/surface-scaffold.js

@@ -0,0 +1,8 @@
+export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-6CDILXF4.js';
+export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
+
+
+
+
+
+//# sourceMappingURL=surface-scaffold.js.map

package/dist/surface-scaffold.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"surface-scaffold.js"}

package/dist/switch.d.ts

@@ -0,0 +1,38 @@
+import * as kerfjs from 'kerfjs';
+
+/** `default` is a 35×20 track beside 16px text; `compact` 31.5×18 and 14px. */
+type SwitchSize = 'default' | 'compact';
+/** Application `data-*` metadata; the Switch's own markers stay protected. */
+type SwitchRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface SwitchProps {
+    /** The visible label, which is also the switch's accessible name. */
+    label: string;
+    /** Whether the setting is on. */
+    checked?: boolean;
+    name?: string;
+    /** The value submitted while on (native default `on`). */
+    value?: string;
+    /** Supporting text below the label, also the switch's description. */
+    hint?: string;
+    size?: SwitchSize;
+    disabled?: boolean;
+    /** Delegated `data-action` on the input; listen for `change`. */
+    action?: string;
+    /** Associate the input with a form outside its ancestor chain. */
+    form?: string;
+    /** The input's id. */
+    id?: string;
+    className?: string;
+    /** Safe `data-*` metadata (a `data-key`). */
+    rootAttributes?: SwitchRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * An on/off setting that applies immediately: a native checkbox with
+ * `role="switch"`, drawn as a track and thumb beside its label, with an
+ * optional hint aligned under the label.
+ */
+declare function Switch({ label, checked, name, value, hint, size, disabled, action, form, id, className, rootAttributes, slot, }: SwitchProps): kerfjs.SafeHtml;
+
+export { Switch, type SwitchProps, type SwitchRootAttributes, type SwitchSize };

package/dist/switch.js

@@ -0,0 +1,4 @@
+export { Switch } from './chunk-LTBVP6VN.js';
+
+
+//# sourceMappingURL=switch.js.map

package/dist/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"switch.js"}

package/dist/tab-bar-item.d.ts

@@ -0,0 +1,65 @@
+import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+type TabBarItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-action'?: never;
+    'data-tab-id'?: never;
+    'data-selected'?: never;
+    'data-tab-dragging'?: never;
+    'data-tab-drop-position'?: never;
+    'data-attention'?: never;
+    'data-drop-target'?: never;
+    'data-name-overflow'?: never;
+    'data-pinned'?: never;
+}>;
+type TabBarItemPresentation = 'pill' | 'segmented' | 'icon-only';
+type TabBarItemSize = 'default' | 'compact';
+type TabBarItemNameOverflow = 'ellipsis' | 'visible';
+interface TabBarItemProps {
+    id: string;
+    name: string;
+    selected?: boolean;
+    /** Emphasize the visible tab name with the attention color token. */
+    attention?: boolean;
+    /** Highlight this tab as the target of a drag over its content. */
+    dropTarget?: boolean;
+    /** Keep the leading tab visible within its TabBar tablist while peers scroll. */
+    pinned?: boolean;
+    closable?: boolean;
+    draggable?: boolean;
+    leading?: KerfUiContent;
+    trailing?: KerfUiContent;
+    /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */
+    presentation?: TabBarItemPresentation;
+    /** Compact tabs use the 32px application-rail height. */
+    size?: TabBarItemSize;
+    /** Maximum visible label width in CSS pixels before ellipsis. */
+    labelMaxWidth?: number;
+    /** Keep the full name visible for an inline loading treatment. */
+    nameOverflow?: TabBarItemNameOverflow;
+    /** Decorative dormant content for the close button. Must not contain interactive descendants. */
+    closeIcon?: SafeHtml;
+    selectAction?: string;
+    closeAction?: string;
+    className?: string;
+    /** Render as an unanimated loading skeleton, disabling select/close and dragging. */
+    placeholder?: boolean;
+    /**
+     * Named and still opening: the tab is known but its content is loading.
+     * Keeps `name` visible in the quiet text color and as the tab's accessible
+     * name, shows `trailing` (for example a `LoadingSpinner`), and marks the
+     * tab `aria-busy`. Unlike `placeholder` it stays selectable — the
+     * application shows placeholder content in its panel until loading
+     * completes — while close and dragging stay disabled. Same pill geometry
+     * as the live tab, so swapping it in place does not shift the bar.
+     * `placeholder` wins when both are set.
+     */
+    pending?: boolean;
+    rootAttributes?: TabBarItemRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+declare function TabBarItem({ id, name, selected, attention, dropTarget, pinned, closable, draggable, leading, trailing, presentation, size, labelMaxWidth, nameOverflow, closeIcon, selectAction, closeAction, className, placeholder, pending, rootAttributes, slot, }: TabBarItemProps): SafeHtml;
+
+export { TabBarItem, type TabBarItemNameOverflow, type TabBarItemPresentation, type TabBarItemProps, type TabBarItemSize };

package/dist/tab-bar-item.js

@@ -0,0 +1,6 @@
+export { TabBarItem } from './chunk-ZCDRLN3B.js';
+
+
+
+
+//# sourceMappingURL=tab-bar-item.js.map

package/dist/tab-bar-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tab-bar-item.js"}

package/dist/tab-bar.d.ts

@@ -1,11 +1,25 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
+type TabActivation = 'automatic' | 'manual';
+type TabBarAllocation = 'intrinsic' | 'fill';
+type TabBarPresentation = 'rail' | 'segmented' | 'inspector';
+type TabBarTrailingPlacement = 'separate' | 'adjacent';
+/** Tablist width where segmented TabBarItems switch to icon-only. */
+type TabBarIconOnlyAt = 'wide' | 'narrow' | 'compact';
 interface TabBarProps {
     id: string;
     label: string;
-    children: SafeHtml | readonly SafeHtml[];
-    leading?: SafeHtml;
-    trailing?: SafeHtml;
+    children: KerfUiContent;
+    leading?: KerfUiContent;
+    /** Tab-local action: one ToolbarControlGroup, Kerf Button, or Web Awesome button. */
+    trailing?: KerfUiContent;
+    /**
+     * Action pinned to the far edge of the bar. Combine with an adjacent `trailing`
+     * action when the tab-local and workspace-level actions must remain distinct.
+     * Accepts one ToolbarControlGroup, Kerf Button, or Web Awesome button.
+     */
+    end?: KerfUiContent;
     className?: string;
     /**
      * Keyboard activation mode for this strip, emitted as `data-tab-activation` for
@@ -13,9 +27,21 @@ interface TabBarProps {
      * selects on arrow / Home / End; `'manual'` moves roving focus only and the user
      * selects with Enter / Space / click — use it when selecting a tab is a heavy action.
      */
-    activation?: 'automatic' | 'manual';
+    activation?: TabActivation;
+    /** How available strip width is allocated across child TabBarItems. */
+    allocation?: TabBarAllocation;
+    /** Named strip chrome for application rails, segmented tabs, or inspectors. */
+    presentation?: TabBarPresentation;
+    /** Switch segmented TabBarItems to icon-only at tablist widths of 832, 704, or 448px. Each tab needs a leading icon. */
+    iconOnlyAt?: TabBarIconOnlyAt;
+    /** Keep a trailing action beside the final tab or at the far edge of the bar. */
+    trailingPlacement?: TabBarTrailingPlacement;
+    /** Settle scrolling peers at whole-tab starts; wireTabBars measures a pinned leading tab's inset. */
+    snapTabs?: boolean;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /** Render a controlled tab strip. The application owns selection, order, and persistence. */
-declare function TabBar({ id, label, children, leading, trailing, className, activation }: TabBarProps): SafeHtml;
+declare function TabBar({ id, label, children, leading, trailing, end, className, activation, allocation, presentation, iconOnlyAt, trailingPlacement, snapTabs, slot, }: TabBarProps): kerfjs.SafeHtml;
 
-export { TabBar, type TabBarProps };
+export { type TabActivation, TabBar, type TabBarAllocation, type TabBarIconOnlyAt, type TabBarPresentation, type TabBarProps, type TabBarTrailingPlacement };

package/dist/tab-bar.js

@@ -1,3 +1,3 @@
-export { TabBar } from './chunk-AVZHJN6C.js';
+export { TabBar } from './chunk-7AK5I7U7.js';
 
 //# sourceMappingURL=tab-bar.js.map