@kerfjs/ui 5.0.0-beta.62 → 5.0.0-beta.64

package/dist/styles/list-item.css

@@ -1,9 +1,4 @@
 .kui-list-item {
-  --kui-list-group-divider-color: var(--kui-color-neutral-border-quiet);
-  --kui-list-item-color: var(--kui-color-neutral-on-normal);
-  --kui-list-item-hover-background: var(--kui-color-neutral-fill-quiet);
-  --kui-list-item-selected-color: var(--kui-color-neutral-on-normal);
-  --kui-list-item-selected-background: var(--kui-color-brand-fill-normal);
   display: grid;
   width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
   min-height: var(--kui-list-item-min-height, 2.75rem);
@@ -24,7 +19,7 @@
     --kui-list-item-radius,
     var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
   );
-  color: var(--kui-list-item-color);
+  color: var(--kui-list-item-color, var(--kui-color-neutral-on-normal));
   background: var(--kui-list-item-background, transparent);
   cursor: pointer;
   grid-template-columns: var(--kui-list-item-columns, minmax(0, 1fr) auto);
@@ -55,14 +50,20 @@
 
 .kui-list-item[data-divider="before"],
 .kui-list-item[data-divider="both"] {
-  border-block-start-color: var(--kui-list-group-divider-color);
+  border-block-start-color: var(
+    --kui-list-group-divider-color,
+    var(--kui-color-neutral-border-quiet)
+  );
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
 
 .kui-list-item[data-divider="after"],
 .kui-list-item[data-divider="both"] {
-  border-block-end-color: var(--kui-list-group-divider-color);
+  border-block-end-color: var(
+    --kui-list-group-divider-color,
+    var(--kui-color-neutral-border-quiet)
+  );
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
@@ -99,7 +100,10 @@
     --kui-list-item-hover-border,
     var(--kui-color-neutral-border-normal)
   );
-  background: var(--kui-list-item-hover-background);
+  background: var(
+    --kui-list-item-hover-background,
+    var(--kui-color-neutral-fill-quiet)
+  );
 }
 
 /* A placeholder is disabled to stay inert, but it is loading, not unavailable:
@@ -124,8 +128,14 @@
     --kui-list-item-selected-border,
     var(--kui-color-brand-border-quiet)
   );
-  color: var(--kui-list-item-selected-color);
-  background: var(--kui-list-item-selected-background);
+  color: var(
+    --kui-list-item-selected-color,
+    var(--kui-color-neutral-on-normal)
+  );
+  background: var(
+    --kui-list-item-selected-background,
+    var(--kui-color-brand-fill-normal)
+  );
   font-weight: 650;
 }
 

package/dist/styles/lucide-icon.css

@@ -4,3 +4,8 @@
   height: 1em;
   flex: none;
 }
+
+[data-lucide][data-size] {
+  width: var(--_kui-lucide-size);
+  height: var(--_kui-lucide-size);
+}

package/dist/styles/pane.css

@@ -176,9 +176,10 @@
 
 /* Chrome dividers: one line under the header and one over the footer, where
    the pinned chrome meets the scrolling content, whatever the chrome holds.
-   `chromeDividers="scroll"` (the default, no attribute) draws each only while
+   `chromeDividers="scroll"` (the plain-pane default, no attribute) draws each only while
    `wireScrollDividers` reports content scrolled away beneath it through
-   `data-scroll-divider` on the slot; `always` draws both; `none` neither. The
+   `data-scroll-divider` on the slot; a sunken pane defaults to `always`, which
+   draws both; `none` draws neither. The
    line is an inset shadow inside the slot, so showing or hiding it never
    moves the chrome or the content. */
 .kui-pane > :is(.kui-pane__header, .kui-pane__toolbar, .kui-pane__footer) {

package/dist/styles/popup-menu.css

@@ -11,10 +11,9 @@
   clip-path: inset(50%);
 }
 
-/* A PopupMenu draws exactly the Select's popup: the same caret motion, surface
-   inset, row geometry, reserved check column, current-row fill, and group
-   titles, all read from the private popup-choice contract in foundation.css
-   (select.css reads the same values). */
+/* PopupMenu shares the Select's caret motion, surface inset, row rhythm,
+   current-row fill, and group titles from the popup-choice contract in
+   foundation.css. Only checkbox items reserve a check column. */
 
 /* The trigger caret turns to face the open menu, like the Select's. */
 .kui-popup-menu > wa-button::part(caret) {
@@ -34,14 +33,29 @@
 }
 
 .kui-popup-menu wa-dropdown-item {
-  /* Leading inset plus the Select's check column, so item icons and labels
-     start where a Select option's do. */
+  /* A plain command starts at the checkbox glyph's leading edge. The glyph
+     sits half a smaller-font em beyond the row's base inset; its label starts
+     after the full check column below. */
   padding: var(--_kui-popup-row-padding-block)
     var(--_kui-popup-row-padding-inline-end) var(--_kui-popup-row-padding-block)
-    calc(
-      var(--_kui-popup-row-padding-inline-start) +
-        var(--_kui-popup-row-check-width)
-    );
+    calc(var(--_kui-popup-row-padding-inline-start) + 0.4375em);
+}
+.kui-popup-menu wa-dropdown-item[type="checkbox"] {
+  /* Web Awesome marks every sibling checkbox-adjacent; reserve this column
+     only on items whose checked state was explicitly supplied. */
+  padding-inline-start: calc(
+    var(--_kui-popup-row-padding-inline-start) +
+      var(--_kui-popup-row-check-width)
+  );
+}
+/* Web Awesome's nested submenu owns its item host padding. Move its exposed
+   checkmark inside the panel and leave room for the label beside it. */
+.kui-popup-menu
+  wa-dropdown-item[slot="submenu"][type="checkbox"]::part(checkmark) {
+  margin-inline-start: 0;
+}
+.kui-popup-menu wa-dropdown-item[slot="submenu"][type="checkbox"]::part(label) {
+  padding-inline-start: 1em;
 }
 .kui-popup-menu wa-dropdown-item::part(label) {
   padding-block: var(--_kui-popup-row-label-padding-block);

package/dist/styles/segmented-control.css

@@ -119,6 +119,9 @@
   line-height: 1;
   white-space: nowrap;
   cursor: pointer;
+  /* Web Awesome's native button transition includes color. During a theme
+     switch that briefly puts the old text tone on the new filled track. */
+  transition-property: background, border, box-shadow;
 }
 
 .kui-segmented-control[data-size="small"] .kui-segmented-control__item {

package/dist/styles/select.css

@@ -222,6 +222,17 @@
   min-width: 0;
   flex: 1 1 auto;
 }
+/* A label can use the free start-slot width to truncate, but a caret-free
+   icon must keep its intrinsic width so the combobox can center the glyph. */
+.kui-select--custom-selected[data-selected-presentation="icon-only"][data-caret="false"]::part(
+    start
+  ) {
+  flex: 0 0 auto;
+}
+.kui-select--custom-selected[data-selected-presentation="icon-only"][data-caret="false"]
+  .kui-select__custom-selected {
+  margin-inline-end: 0 !important;
+}
 .kui-select--custom-selected::part(display-input) {
   position: absolute;
   width: 1px;

package/dist/styles/sunken-panel.css

@@ -1,9 +1,12 @@
 .kui-sunken-panel {
+  /* Reset the private value on each panel so nested panels do not inherit it. */
+  --_kui-sunken-panel-flex: 0 1 auto;
   display: flex;
   min-width: 0;
   min-height: 0;
   padding: var(--kui-sunken-panel-padding, 0.5rem);
   box-sizing: border-box;
+  flex: var(--_kui-sunken-panel-flex, initial);
   border-radius: var(
     --kui-sunken-panel-radius,
     var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
@@ -17,6 +20,10 @@
   gap: var(--kui-sunken-panel-gap, 0.5rem);
 }
 
+.kui-sunken-panel[data-fill="true"] {
+  height: 100%;
+}
+
 .kui-sunken-panel[data-shape="square"] {
   border-radius: 0;
 }

package/dist/styles/text.css

@@ -3,6 +3,35 @@
   box-sizing: border-box;
   border: 1px solid transparent;
   margin: 0;
+  white-space: normal;
+  overflow-wrap: normal;
+}
+
+.kui-text[data-wrap="anywhere"] {
+  overflow-wrap: anywhere;
+}
+
+.kui-text[data-wrap="nowrap"] {
+  white-space: nowrap;
+}
+
+.kui-text[data-wrap="truncate"] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+span.kui-text[data-wrap="truncate"] {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.kui-text__clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--_kui-text-max-lines);
 }
 
 .kui-text[data-tone="quiet"] {

package/dist/styles/token-search-field.css

@@ -6,6 +6,7 @@
   --kui-token-search-line-size: 2.125rem;
 
   display: grid;
+  position: relative;
   width: 100%;
   min-width: 0;
   min-height: 2.75rem;
@@ -84,7 +85,8 @@
 }
 
 .kui-token-search__token button,
-.kui-token-search__clear {
+.kui-token-search__clear,
+.kui-token-search__trailing-action {
   appearance: none;
   display: inline-grid;
   padding: 0;
@@ -109,12 +111,15 @@
 .kui-token-search__token-remove:hover,
 .kui-token-search__token-remove:focus-visible,
 .kui-token-search__clear:hover,
-.kui-token-search__clear:focus-visible {
+.kui-token-search__clear:focus-visible,
+.kui-token-search__trailing-action:hover,
+.kui-token-search__trailing-action:focus-visible {
   background: color-mix(in srgb, currentColor 12%, transparent);
 }
 
 .kui-token-search__token button:focus-visible,
-.kui-token-search__clear:focus-visible {
+.kui-token-search__clear:focus-visible,
+.kui-token-search__trailing-action:focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
@@ -129,7 +134,8 @@
 }
 
 .kui-token-search__clear,
-.kui-token-search__trailing {
+.kui-token-search__trailing,
+.kui-token-search__trailing-action {
   display: inline-grid;
   width: 1.5rem;
   height: var(--kui-token-search-line-size);
@@ -139,21 +145,38 @@
 
 .kui-token-search__clear {
   grid-column: 3;
+  border-radius: var(--kui-radius-pill);
 }
 
 .kui-token-search__trailing {
   grid-column: 4;
 }
 
+.kui-token-search__trailing-action {
+  grid-column: 4;
+  border-radius: var(--kui-radius-pill);
+}
+
 .kui-token-search__suggestions {
   display: grid;
-  grid-column: 2 / -1;
-  min-width: 0;
-  padding: 0.25rem;
-  border: 1px solid var(--kui-token-search-border);
+  position: absolute;
+  z-index: 20;
+  inset-block-start: calc(100% + 0.25rem);
+  inset-inline-start: 0;
+  width: min(max(100%, 15rem), calc(100vw - 1rem));
+  max-height: 15rem;
+  padding: var(--_kui-popup-inset);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
   border-radius: var(--kui-radius-pill);
-  background: var(--kui-token-search-background);
-  gap: 0.125rem;
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-m);
+  gap: var(--_kui-popup-row-gap);
+  overflow-y: auto;
+}
+
+.kui-token-search__suggestions:has(> :nth-child(2)) {
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
 }
 
 .kui-token-search__suggestion {
@@ -165,6 +188,7 @@
   background: transparent;
   font: inherit;
   text-align: start;
+  justify-content: flex-start;
   cursor: pointer;
 }
 
@@ -179,7 +203,8 @@
 }
 
 .kui-token-search__clear svg,
-.kui-token-search__trailing svg {
+.kui-token-search__trailing svg,
+.kui-token-search__trailing-action svg {
   width: 0.85rem;
   height: 0.85rem;
 }
@@ -200,6 +225,17 @@
     border-color 0.2s ease;
 }
 
+.kui-token-search[data-collapsible="true"][data-expanded="true"][data-fill="true"] {
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+.kui-token-search[data-collapsible="true"][data-expanded="true"]:has(
+    .kui-token-search__suggestions
+  ) {
+  overflow: visible;
+}
+
 .kui-token-search[data-collapsible="true"][data-expanded="false"] {
   width: 2.75rem;
   min-width: 2.75rem;
@@ -256,6 +292,10 @@
   box-shadow: none;
 }
 
+.kui-token-search[data-presentation="toolbar-group"] .kui-token-search__clear {
+  border-radius: var(--kui-control-highlight-radius);
+}
+
 .kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"]:focus-within {
   border-color: var(--kui-color-focus);
   background: var(--kui-token-search-background);

package/dist/styles/toolbar-control-group.css

@@ -33,6 +33,7 @@
   --_kui-toolbar-control-group-slot-overlap: 0px;
   --_kui-toolbar-control-group-slot-radius: var(--kui-toolbar-item-radius);
   display: inline-flex;
+  position: relative;
   height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   padding: 1px;
@@ -46,6 +47,34 @@
   gap: 0;
 }
 
+.kui-toolbar-control-group[data-busy="true"] > svg,
+.kui-toolbar-control-group[data-busy="true"]
+  > :not(.kui-toolbar-control-group__busy-spinner)
+  svg {
+  visibility: hidden;
+}
+
+.kui-toolbar-control-group__busy-spinner {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  display: grid;
+  width: 1rem;
+  height: 1rem;
+  transform: translate(-50%, -50%);
+  place-items: center;
+  pointer-events: none;
+}
+
+.kui-toolbar-control-group__busy-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 /* In a Toolbar zone, a group shorter than the toolbar's control band (the
    `--_kui-toolbar-band` the Toolbar provides) takes half the difference as a
    top margin, so it centers in the band by its own size. */
@@ -126,10 +155,30 @@
     background-color 0.2s ease,
     border-color 0.2s ease;
 }
+
+.kui-toolbar-control-group[data-content="search"]:has(
+    > .kui-token-search[data-expanded="true"][data-fill="true"]
+  ) {
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+.kui-toolbar-control-group[data-content="search"]:has(
+    .kui-token-search__suggestions
+  ) {
+  overflow: visible;
+}
 .kui-toolbar-control-group[data-content="search"][data-expanded="false"] {
   width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   flex: 0 0 auto;
 }
+
+.kui-toolbar-control-group[data-content="search"]:has(
+    > .kui-token-search[data-expanded="false"][data-fill="true"]
+  ) {
+  width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  flex: 0 0 auto;
+}
 .kui-toolbar-control-group[data-content="text"]
   > :is(button, wa-button, .kui-toolbar-action-link),
 .kui-toolbar-control-group[data-content="mixed"]

package/dist/styles/workbench.css

@@ -568,6 +568,25 @@
   inset-block-end: 0;
 }
 
+/* Optional shared backdrop sits over work-area controls and restores, below
+   the overlay drawer and rails. It is last in document order so an equal-z
+   restore control cannot receive the outside press. */
+.kui-workbench__backdrop {
+  position: absolute;
+  z-index: calc(var(--kui-workbench-overlay-z, 41) - 2);
+  display: none;
+  inset: 0;
+  background: var(--kui-color-scrim, rgb(0 0 0 / 32%));
+}
+
+.kui-workbench[data-overlay-backdrop="true"]:is(
+    [data-rail-overlay-expanded="true"],
+    [data-drawer-overlay-expanded="true"]
+  )
+  > .kui-workbench__backdrop {
+  display: block;
+}
+
 /* A collapsed overlay keeps its box for the slide-out, so it drops its surface
    and shadow; the sliding content carries the surface instead. */
 .kui-workbench__rail[data-presentation="overlay"][data-collapsed="true"],
@@ -609,7 +628,94 @@
   container: kui-workbench / inline-size;
 }
 
+/* A numeric pixel threshold is measured by wireWorkbench and marked on the
+   panel. Keep its overlay geometry and covered work area in step with that
+   single mark, including when the app changes the threshold at render time. */
+.kui-workbench__rail[data-responsive-overlay-active="true"] {
+  position: absolute;
+  z-index: var(--kui-workbench-overlay-z, 41);
+  width: var(--_kui-workbench-rail-extent);
+  max-width: var(--kui-workbench-overlay-max-width, 85vw);
+  inset-block: 0;
+  box-shadow: var(--kui-shadow-l);
+  clip-path: none;
+}
+
+.kui-workbench__rail--left[data-responsive-overlay-active="true"] {
+  inset-inline-start: 0;
+}
+
+.kui-workbench__rail--right[data-responsive-overlay-active="true"] {
+  inset-inline-end: 0;
+}
+
+.kui-workbench__rail[data-responsive-overlay-active="true"][data-collapsed="true"],
+.kui-workbench__drawer[data-responsive-overlay-active="true"][data-collapsed="true"] {
+  background: transparent;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+.kui-workbench__rail[data-responsive-overlay-active="true"]
+  > .kui-workbench__panel-content {
+  width: 100%;
+  background: var(--kui-color-surface);
+}
+
+.kui-workbench__rail[data-responsive-overlay-active="true"]
+  > .kui-workbench__handle,
+.kui-workbench__drawer[data-responsive-overlay-active="true"]
+  > .kui-workbench__handle {
+  display: none;
+}
+
+.kui-workbench[data-numeric-overlays~="left"] > .kui-workbench__center {
+  --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
+}
+
+.kui-workbench[data-numeric-overlays~="right"] > .kui-workbench__center {
+  --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
+}
+
+.kui-workbench__drawer[data-responsive-overlay-active="true"] {
+  position: absolute;
+  anchor-name: none;
+  z-index: calc(var(--kui-workbench-overlay-z, 41) - 1);
+  height: var(--_kui-workbench-drawer-extent);
+  max-height: var(--kui-workbench-overlay-max-height, 85vh);
+  inset-inline: 0;
+  inset-block-end: 0;
+  box-shadow: var(--kui-shadow-l);
+  clip-path: none;
+}
+
+.kui-workbench__drawer[data-responsive-overlay-active="true"]
+  > .kui-workbench__panel-content {
+  height: 100%;
+  background: var(--kui-color-surface);
+}
+
+.kui-workbench[data-numeric-overlays~="drawer"]
+  > .kui-workbench__center
+  > .kui-workbench__main {
+  --_kui-workbench-content-edge-block-end: var(--_kui-workbench-safe-block-end);
+}
+
+.kui-workbench[data-overlay-backdrop="true"][data-numeric-overlays~="open"]
+  > .kui-workbench__backdrop {
+  display: block;
+}
+
 @container kui-workbench (max-width: 44rem) {
+  .kui-workbench[data-overlay-backdrop="true"]:is(
+      [data-left-responsive-expanded="narrow"],
+      [data-right-responsive-expanded="narrow"],
+      [data-drawer-responsive-expanded="narrow"]
+    )
+    > .kui-workbench__backdrop {
+    display: block;
+  }
+
   .kui-workbench__rail[data-responsive-overlay-at="narrow"] {
     position: absolute;
     z-index: var(--kui-workbench-overlay-z, 41);
@@ -692,6 +798,15 @@
 }
 
 @container kui-workbench (max-width: 28rem) {
+  .kui-workbench[data-overlay-backdrop="true"]:is(
+      [data-left-responsive-expanded="compact"],
+      [data-right-responsive-expanded="compact"],
+      [data-drawer-responsive-expanded="compact"]
+    )
+    > .kui-workbench__backdrop {
+    display: block;
+  }
+
   .kui-workbench__rail[data-responsive-overlay-at="compact"] {
     position: absolute;
     z-index: var(--kui-workbench-overlay-z, 41);
@@ -895,6 +1010,11 @@
   --_kui-workbench-covered: hidden;
 }
 
+.kui-workbench[data-numeric-overlays~="rail-open"]
+  > :is(.kui-workbench__center, .kui-workbench__restore) {
+  --_kui-workbench-covered: hidden;
+}
+
 @container kui-workbench (max-width: 44rem) {
   .kui-workbench:is(
       [data-left-responsive-expanded="narrow"],
@@ -926,14 +1046,22 @@
    closes it (the wiring's outside press); `compactOverlay: "full"` fills the
    Workbench. The rail's resize and configured size stop applying there. */
 @container kui-workbench (max-width: 28rem) {
-  .kui-workbench__rail[data-responsive-overlay-at] {
+  .kui-workbench__rail:is(
+    [data-responsive-overlay-at="narrow"],
+    [data-responsive-overlay-at="compact"],
+    [data-responsive-overlay-active="true"]
+  ) {
     width: calc(
       100% - var(--kui-workbench-overlay-dismiss-margin, 2.75rem)
     );
     max-width: none;
   }
 
-  .kui-workbench__rail[data-responsive-overlay-at][data-compact-overlay="full"] {
+  .kui-workbench__rail:is(
+      [data-responsive-overlay-at="narrow"],
+      [data-responsive-overlay-at="compact"],
+      [data-responsive-overlay-active="true"]
+    )[data-compact-overlay="full"] {
     width: 100%;
   }
 }

package/dist/sunken-panel.d.ts

@@ -1,4 +1,5 @@
 import * as kerfjs from 'kerfjs';
+import { CssFlexKeyword, CssFlex } from './css-values.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 type SunkenPanelShape = 'rounded' | 'square';
@@ -8,6 +9,10 @@ interface SunkenPanelProps {
     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;
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
@@ -17,6 +22,6 @@ interface SunkenPanelProps {
  * stack. The panel owns its background and padding; children own their own
  * borders and internal geometry.
  */
-declare function SunkenPanel({ children, ariaLabel, shape, className, slot, }: SunkenPanelProps): kerfjs.SafeHtml;
+declare function SunkenPanel({ children, ariaLabel, shape, flex, fill, className, slot, }: SunkenPanelProps): kerfjs.SafeHtml;
 
 export { SunkenPanel, type SunkenPanelProps, type SunkenPanelShape };

package/dist/sunken-panel.js

@@ -1,3 +1,3 @@
-export { SunkenPanel } from './chunk-6ZXOQEAN.js';
+export { SunkenPanel } from './chunk-WF75U3V4.js';
 
 //# sourceMappingURL=sunken-panel.js.map

package/dist/text.d.ts

@@ -8,8 +8,9 @@ type TextSize = 'compact' | 'default' | 'large' | 'xlarge';
 type TextFont = 'default' | 'monospace';
 type TextBorder = 'transparent' | 'none';
 type TextLineHeight = 'default' | 'tight';
+type TextWrap = 'normal' | 'anywhere' | 'nowrap' | 'truncate';
 type TextContent = KerfUiContent | string | number | readonly TextContent[];
-type TextProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
+type TextCommonProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
     /** Native heading, paragraph, or inline span element to render. Defaults to `p`. */
     variant?: TextVariant;
     /** Semantic foreground treatment. Defaults to the inherited foreground. */
@@ -28,11 +29,21 @@ type TextProps = Omit<KerfBaseAttrs, 'children' | 'class' | 'className'> & {
     class?: string;
     className?: string;
 };
+type TextProps = TextCommonProps & ({
+    /** Wrap normally or break long unbroken strings. Defaults to normal. */
+    wrap?: 'normal' | 'anywhere';
+    /** Cap wrapped text to this positive number of lines. */
+    maxLines?: number;
+} | {
+    /** Keep one line, with or without an ellipsis. */
+    wrap: 'nowrap' | 'truncate';
+    maxLines?: never;
+});
 /**
  * Semantic heading, paragraph, or inline text. Block variants use the standard
  * content-item padding; `span` adds no box geometry.
  * All ordinary native heading/paragraph attributes pass through to the element.
  */
-declare function Text({ variant: Variant, tone, size, font, border, flush, lineHeight, children, class: classValue, className, ...attributes }: TextProps): kerfjs.SafeHtml;
+declare function Text({ variant: Variant, tone, size, font, border, flush, lineHeight, wrap, maxLines, children, class: classValue, className, ...attributes }: TextProps): kerfjs.SafeHtml;
 
-export { Text, type TextBorder, type TextContent, type TextFont, type TextLineHeight, type TextProps, type TextSize, type TextTone, type TextVariant };
+export { Text, type TextBorder, type TextContent, type TextFont, type TextLineHeight, type TextProps, type TextSize, type TextTone, type TextVariant, type TextWrap };