@kerfjs/ui 5.0.0-beta.15 → 5.0.0-beta.16

package/ai/component-catalog.json

@@ -1198,7 +1198,8 @@
       },
       "wiring": [],
       "publicClasses": [
-        "kui-list-inset-text"
+        "kui-list-inset-text",
+        "kui-list-inset-text--horizontal"
       ],
       "publicTokens": [],
       "links": {

package/ai/public-api-signatures-v1.md

@@ -1,6 +1,6 @@
 # Public API signatures for the UI authoring corpus
 
-Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.15` and `kerfjs@5.0.0-beta.15`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
+Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.16` and `kerfjs@5.0.0-beta.16`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
 
 ## `@kerfjs/ui/disclosure-arrow`
 
@@ -294,6 +294,13 @@ import { SafeHtml } from 'kerfjs';
 interface ListInsetTextProps {
     /** Text (or inline content) that carries no margin, border, or padding of its own. */
     children: SafeHtml | SafeHtml[] | string;
+    /**
+     * Keep only the horizontal geometry (inline margin, left/right border, and
+     * left/right padding) and drop the vertical margin, border, and padding. Use it
+     * when the text edge must still align with bordered items but the line should not
+     * add its own vertical box space — tight text layout inside a content region.
+     */
+    horizontalOnly?: boolean;
     className?: string;
 }
 /**
@@ -301,8 +308,10 @@ interface ListInsetTextProps {
  * transparent border, and 8px padding — so a plain string lines up with
  * bordered `.kui-content` items (its text edge lands at the same 17px inset).
  * Use it for text elements that have no margin, border, or padding of their own.
+ * Pass `horizontalOnly` to keep the horizontal inset but drop the vertical box
+ * space for tight text layout.
  */
-declare function ListInsetText({ children, className }: ListInsetTextProps): SafeHtml;
+declare function ListInsetText({ children, horizontalOnly, className }: ListInsetTextProps): SafeHtml;
 
 export { ListInsetText, type ListInsetTextProps };
 ```

package/ai/webawesome-jsx-signatures-v1.md

@@ -1,6 +1,6 @@
 # Web Awesome JSX signatures for the UI authoring corpus
 
-Generated from the emitted `@kerfjs/ui@5.0.0-beta.15` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
+Generated from the emitted `@kerfjs/ui@5.0.0-beta.16` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
 
 ```ts
 import { KerfCustomElement } from 'kerfjs/jsx-runtime';

package/dist/chunk-AHQI52QO.js

@@ -0,0 +1,11 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/list-inset-text.tsx
+function ListInsetText({ children, horizontalOnly = false, className = "" }) {
+  const cls = `kui-list-inset-text${horizontalOnly ? " kui-list-inset-text--horizontal" : ""} ${className}`.trim();
+  return /* @__PURE__ */ jsx("div", { class: cls, "data-component": "list-inset-text", children });
+}
+
+export { ListInsetText };
+
+//# sourceMappingURL=chunk-AHQI52QO.js.map

package/dist/chunk-AHQI52QO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list-inset-text.tsx"],"names":[],"mappings":";;;AAuBO,SAAS,cAAc,EAAE,QAAA,EAAU,iBAAiB,KAAA,EAAO,SAAA,GAAY,IAAG,EAAuB;AACtG,EAAA,MAAM,GAAA,GAAM,sBAAsB,cAAA,GAAiB,kCAAA,GAAqC,EAAE,CAAA,CAAA,EAAI,SAAS,GAAG,IAAA,EAAK;AAC/G,EAAA,2BAAQ,KAAA,EAAA,EAAI,KAAA,EAAO,GAAA,EAAK,gBAAA,EAAe,mBAAmB,QAAA,EAAS,CAAA;AACrE","file":"chunk-AHQI52QO.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface ListInsetTextProps {\n  /** Text (or inline content) that carries no margin, border, or padding of its own. */\n  children: SafeHtml | SafeHtml[] | string;\n  /**\n   * Keep only the horizontal geometry (inline margin, left/right border, and\n   * left/right padding) and drop the vertical margin, border, and padding. Use it\n   * when the text edge must still align with bordered items but the line should not\n   * add its own vertical box space — tight text layout inside a content region.\n   */\n  horizontalOnly?: boolean;\n  className?: string;\n}\n\n/**\n * Gives bare text the content-item geometry — an 8px inline margin, a 1px\n * transparent border, and 8px padding — so a plain string lines up with\n * bordered `.kui-content` items (its text edge lands at the same 17px inset).\n * Use it for text elements that have no margin, border, or padding of their own.\n * Pass `horizontalOnly` to keep the horizontal inset but drop the vertical box\n * space for tight text layout.\n */\nexport function ListInsetText({ children, horizontalOnly = false, className = '' }: ListInsetTextProps) {\n  const cls = `kui-list-inset-text${horizontalOnly ? ' kui-list-inset-text--horizontal' : ''} ${className}`.trim();\n  return <div class={cls} data-component=\"list-inset-text\">{children}</div>;\n}\n"]}

package/dist/index.js

@@ -11,7 +11,7 @@ export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chu
 export { StateBanner } from './chunk-I7INRJO4.js';
 export { ListActionRow } from './chunk-7JB7VPRI.js';
 export { ListInsetControl } from './chunk-VPCTCUED.js';
-export { ListInsetText } from './chunk-XE4OX6AZ.js';
+export { ListInsetText } from './chunk-AHQI52QO.js';
 export { ToolbarText } from './chunk-RUNWEPR4.js';
 export { AppTab } from './chunk-2Z5TWHKQ.js';
 export { ToolbarControlGroup } from './chunk-RNPGFQ33.js';

package/dist/list-inset-text.d.ts

@@ -3,6 +3,13 @@ import { SafeHtml } from 'kerfjs';
 interface ListInsetTextProps {
     /** Text (or inline content) that carries no margin, border, or padding of its own. */
     children: SafeHtml | SafeHtml[] | string;
+    /**
+     * Keep only the horizontal geometry (inline margin, left/right border, and
+     * left/right padding) and drop the vertical margin, border, and padding. Use it
+     * when the text edge must still align with bordered items but the line should not
+     * add its own vertical box space — tight text layout inside a content region.
+     */
+    horizontalOnly?: boolean;
     className?: string;
 }
 /**
@@ -10,7 +17,9 @@ interface ListInsetTextProps {
  * transparent border, and 8px padding — so a plain string lines up with
  * bordered `.kui-content` items (its text edge lands at the same 17px inset).
  * Use it for text elements that have no margin, border, or padding of their own.
+ * Pass `horizontalOnly` to keep the horizontal inset but drop the vertical box
+ * space for tight text layout.
  */
-declare function ListInsetText({ children, className }: ListInsetTextProps): SafeHtml;
+declare function ListInsetText({ children, horizontalOnly, className }: ListInsetTextProps): SafeHtml;
 
 export { ListInsetText, type ListInsetTextProps };

package/dist/list-inset-text.js

@@ -1,3 +1,3 @@
-export { ListInsetText } from './chunk-XE4OX6AZ.js';
+export { ListInsetText } from './chunk-AHQI52QO.js';
 
 //# sourceMappingURL=list-inset-text.js.map

package/dist/styles/list-inset-text.css

@@ -3,3 +3,12 @@
   border: 1px solid transparent;
   padding: 0.5rem;
 }
+
+/* Horizontal-only: keep the inline inset (margin + left/right border + left/right
+   padding) so the text edge still aligns with bordered items, but drop the vertical
+   box space for tight text layout. */
+.kui-list-inset-text--horizontal {
+  margin-block: 0;
+  border-block: 0;
+  padding-block: 0;
+}

package/docs/component-selection.md

@@ -70,7 +70,7 @@ an upstream component or recipe request.
 | Navigation row with trailing action — `ListActionRow` | A full-width row needs a selectable primary action and an independently focusable trailing action. | Use `ListItem` when trailing content is dormant metadata. Do not put controls inside the row's `label`, `icon`, or `trailingActionIcon` SafeHtml slots. Do not use `AppTab` outside tablist semantics or `ToolbarControlGroup` outside a toolbar. | Delegate both action strings; update controlled selection and any popover/context-menu state in the app. | Routing, selection, both action policies, domain metadata, and popover/context-menu behavior. | `@kerfjs/ui/list-action-row` | [Accessibility](./accessibility.md#listactionrow) |
 | Navigation section heading — `ListHeader` | A menu section needs a full-width label, semantic count, non-count badge, logical-end action, or real disclosure state. | Do not concatenate counts into `label` or put numeric content in `badge`; use `count` with the localized full phrase in `countLabel`. Do not add a disclosure arrow to navigation that reveals nothing. Do not shrink its 44px action target to the 18px visual. Do not use it as a page, panel, or dialog title; use `PanelHeader`. | Delegate its optional action; the app controls expanded state and revealed content. Toggle mode supplies `DisclosureArrow` unless `actionIcon` replaces it. Use `triggerAttributes` only for domain `data-*` or a native popover relationship. | Section organization, valid count and localized count label, disclosure state and content, non-count badge content, popover target behavior, and policy. | `@kerfjs/ui/list-header` | [Pane geometry](../README.md#pane-and-content-geometry) |
 | Inset self-bordered control — `ListInsetControl` | A control that owns its own border and padding but no outer margin (a search input, a `SegmentedControl`) must line up inside a `.kui-content` list with the standard 8px inline margins and stretch to fill the row. | Do not wrap a `.kui-content-item` or a `ListItem`/`ListHeader` that already owns its inline margin — that double-insets it. Do not add ad-hoc `margin`/`padding` around a bare control to align it; use this instead. | Place the self-bordered control(s) as children; they stretch to fill. It applies only the inline margin, flex stretch, and 8px gap — the child owns its own border and padding. | The control(s), their state, and action wiring. | `@kerfjs/ui/list-inset-control` | [Pane geometry](../README.md#component-subpaths) |
-| Inset bare text — `ListInsetText` | A plain string or inline content with no margin, border, or padding of its own must sit in a `.kui-content` list with its text edge aligned to the bordered items around it. | Do not use it to wrap a component that already owns content-item geometry (`ListItem`, `StateBanner`, a `.kui-content-item`) — that double-insets it. Do not hand-roll the 8px margin / 1px border / 8px padding. | Pass the text or inline `SafeHtml` as children; it supplies the 8px inline margin, 1px transparent border, and 8px padding so the text edge lands at the standard 17px inset. | The text, copy, and localization. | `@kerfjs/ui/list-inset-text` | [Pane geometry](../README.md#component-subpaths) |
+| Inset bare text — `ListInsetText` | A plain string or inline content with no margin, border, or padding of its own must sit in a `.kui-content` list with its text edge aligned to the bordered items around it. | Do not use it to wrap a component that already owns content-item geometry (`ListItem`, `StateBanner`, a `.kui-content-item`) — that double-insets it. Do not hand-roll the 8px margin / 1px border / 8px padding. | Pass the text or inline `SafeHtml` as children; it supplies the 8px inline margin, 1px transparent border, and 8px padding so the text edge lands at the standard 17px inset. Pass `horizontalOnly` to keep that horizontal inset but drop the vertical margin, border, and padding for tight text layout. | The text, copy, and localization. | `@kerfjs/ui/list-inset-text` | [Pane geometry](../README.md#component-subpaths) |
 | Application layout composition | A sidebar, main area, inspector, or dialog needs shared toolbar/content/footer and child geometry. | Do not pad the pane shell, wrap child-owned geometry in competing insets, invent unrelated centered measures, or leave an icon-only rail for a hidden pane. | Use `.kui-pane` and one `.kui-pane__content`; add `.kui-content` and `.kui-content-item` as needed. A visible pane owns collapse in its toolbar; move a hidden inline-start pane's restore control to the main toolbar leading edge and an inline-end pane's restore control to its trailing edge. | Layout hierarchy, reading width, scroll ownership, responsive relocation, and pane visibility state. | `@kerfjs/ui/layout.css` | [Pane anatomy](./layout.md#anatomy) |
 | Menu composition | Navigation sections need full-size rows and the same content-item geometry as every other pane. | Do not add sidebar-specific wrapper padding, shrink targets to icon size, nest an interactive trailing control in `ListItem`, or use a chevron on a row that does not disclose content. Use ordinary links for a different navigation contract. | Compose `ListHeader`, `ListItem`, and `ListActionRow` in `.kui-content`; use `ListHeader` toggle mode with real controlled content, and use `.kui-content-item` for other surfaces plus a pane footer for toolbar actions. | Information architecture, disclosure content and state, responsive drawer/shell behavior, and token overrides. | `@kerfjs/ui/layout.css` | [Pane geometry](../README.md#pane-and-content-geometry) |
 | Resizable application pane — `ResizableRegion`, `clampRegionSize`, `resizeRegionFromPointer` | A controlled split pane needs the Kerf separator, collapse state, pointer plus keyboard resizing, or a product-specific decorative grip. | Do not use it for a static two-column layout; use CSS grid. Prefer it over Web Awesome `wa-split-panel` unless that component's distinct API is required. Keep `handleIcon` noninteractive. | Call `wireResizableRegions` from `@kerfjs/ui/wire-resizable-regions` once and retain its disposer. | Size signal, min/max policy, collapse policy, persistence, and optional decorative handle icon. | `@kerfjs/ui/resizable-region` | [ResizableRegion contract](./accessibility.md#resizableregion) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.15",
+  "version": "5.0.0-beta.16",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",

package/dist/chunk-XE4OX6AZ.js

@@ -1,10 +0,0 @@
-import { jsx } from 'kerfjs/jsx-runtime';
-
-// src/list-inset-text.tsx
-function ListInsetText({ children, className = "" }) {
-  return /* @__PURE__ */ jsx("div", { class: `kui-list-inset-text ${className}`.trim(), "data-component": "list-inset-text", children });
-}
-
-export { ListInsetText };
-
-//# sourceMappingURL=chunk-XE4OX6AZ.js.map

package/dist/chunk-XE4OX6AZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/list-inset-text.tsx"],"names":[],"mappings":";;;AAcO,SAAS,aAAA,CAAc,EAAE,QAAA,EAAU,SAAA,GAAY,IAAG,EAAuB;AAC9E,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,oBAAA,EAAuB,SAAS,GAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,iBAAA,EAAmB,QAAA,EAAS,CAAA;AAC3G","file":"chunk-XE4OX6AZ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface ListInsetTextProps {\n  /** Text (or inline content) that carries no margin, border, or padding of its own. */\n  children: SafeHtml | SafeHtml[] | string;\n  className?: string;\n}\n\n/**\n * Gives bare text the content-item geometry — an 8px inline margin, a 1px\n * transparent border, and 8px padding — so a plain string lines up with\n * bordered `.kui-content` items (its text edge lands at the same 17px inset).\n * Use it for text elements that have no margin, border, or padding of their own.\n */\nexport function ListInsetText({ children, className = '' }: ListInsetTextProps) {\n  return <div class={`kui-list-inset-text ${className}`.trim()} data-component=\"list-inset-text\">{children}</div>;\n}\n"]}