@kerfjs/ui 5.0.0-beta.72 → 5.0.0-beta.73

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-M6DEEBEF.js';
+export { ListHeader } from './chunk-HFBI4ZGP.js';
 
 
 

package/dist/list-item.js

@@ -1,4 +1,4 @@
-export { ListItem, ListItemLink } from './chunk-NC4CFOID.js';
+export { ListItem, ListItemLink } from './chunk-6LAQWWEX.js';
 
 
 

package/dist/loading-spinner.js

@@ -1,4 +1,4 @@
-export { LoadingSpinner } from './chunk-KVBRMEPM.js';
+export { LoadingSpinner } from './chunk-I6FTU27I.js';
 
 
 //# sourceMappingURL=loading-spinner.js.map

package/dist/nav-stack.js

@@ -1,4 +1,4 @@
-export { NavStack } from './chunk-VLYIPBCQ.js';
+export { NavStack } from './chunk-L67OYMGE.js';
 
 
 

package/dist/popup-menu.js

@@ -1,3 +1,3 @@
-export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-J3KGJ6P6.js';
+export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-4NG4Y2Q6.js';
 
 //# sourceMappingURL=popup-menu.js.map

package/dist/resizable-region.js

@@ -1,3 +1,3 @@
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-KLJKU6ZL.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-TDN5EE3S.js';
 
 //# sourceMappingURL=resizable-region.js.map

package/dist/select.js

@@ -1,4 +1,4 @@
-export { Select } from './chunk-K67Y2JNF.js';
+export { Select } from './chunk-2IGHGE3M.js';
 
 
 

package/dist/skeleton.js

@@ -1,4 +1,4 @@
-export { Skeleton } from './chunk-AHEG27M7.js';
+export { Skeleton } from './chunk-TT5ROTQK.js';
 
 
 //# sourceMappingURL=skeleton.js.map

package/dist/spacer.js

@@ -1,4 +1,4 @@
-export { Spacer } from './chunk-MEY33VWB.js';
+export { Spacer } from './chunk-KZRR7NNV.js';
 
 
 //# sourceMappingURL=spacer.js.map

package/dist/split-view.js

@@ -1,5 +1,5 @@
-import { NavStack } from './chunk-VLYIPBCQ.js';
-import { ResizableRegion } from './chunk-KLJKU6ZL.js';
+import { NavStack } from './chunk-L67OYMGE.js';
+import { ResizableRegion } from './chunk-TDN5EE3S.js';
 
 
 

package/dist/state-banner.js

@@ -1,4 +1,4 @@
-export { StateBanner } from './chunk-GLDWRCAM.js';
+export { StateBanner } from './chunk-RT5WKYX3.js';
 
 
 

package/dist/tab-scaffold.js

@@ -1,4 +1,4 @@
-import { Badge } from './chunk-MP2GDBQZ.js';
+import { Badge } from './chunk-ALGYHYXP.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 function TabScaffold({

package/dist/toolbar-control-group.js

@@ -1,4 +1,4 @@
-export { ToolbarActionLink, ToolbarControlGroup } from './chunk-QJ5VFCW3.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-BGD7EHUE.js';
 
 
 

package/dist/toolbar-text.js

@@ -1,4 +1,4 @@
-export { ToolbarText } from './chunk-R5F5XUJ7.js';
+export { ToolbarText } from './chunk-IJNYCPAU.js';
 
 
 

package/dist/value-table.js

@@ -1,4 +1,4 @@
-export { ValueTable, ValueTableRow } from './chunk-P7D3EMXM.js';
+export { ValueTable, ValueTableRow } from './chunk-KFJSNWO4.js';
 
 
 

package/dist/wire-catalog.js

@@ -1,4 +1,4 @@
-import { wireWorkbench } from './chunk-TJK44RQC.js';
+import { wireWorkbench } from './chunk-V4WLBOVJ.js';
 
 import { wireScrollDividers } from './chunk-6DFDTWGG.js';
 

package/dist/wire-resizable-regions.js

@@ -1,4 +1,4 @@
-export { wireResizableRegions } from './chunk-UIDKY4UB.js';
+export { wireResizableRegions } from './chunk-DPAUKNB6.js';
 
 
 

package/dist/wire-workbench.js

@@ -1,4 +1,4 @@
-export { wireWorkbench } from './chunk-TJK44RQC.js';
+export { wireWorkbench } from './chunk-V4WLBOVJ.js';
 
 
 

package/dist/workbench.js

@@ -1,4 +1,4 @@
-export { Workbench } from './chunk-3UE24JSC.js';
+export { Workbench } from './chunk-33EOFAUN.js';
 
 
 

package/docs/ui-analyzer.md

@@ -237,6 +237,10 @@ stylesheet co-own its classes, whether the stylesheet was declared or directly
 imported; a source that imports none of an owner's stylesheets remains foreign.
 When several entries infer the same class from a shared stylesheet, the
 analyzer does not arbitrarily assign that class to one of them for `KUI-L019`.
+It reports one `KUI-L019` for a rule whose subject is that class or a dynamic
+member of its BEM block when the stylesheet is foreign to every co-owner. The
+finding names the co-owner set in `evidence.components`; their shared
+stylesheet remains allowed.
 Other sibling files are foreign.
 Paths are relative to the entry's package root. Set
 `implicitComponentOwnership: true` to apply the same source and stylesheet

package/docs/ui-doctor.md

@@ -67,7 +67,9 @@ block. An owned root or styled literal owns its whole `block__*` and `block--*`
 family, including dynamic names and classes placed on imported components.
 Modules sharing one of those stylesheets co-own its classes, so their
 own markup does not borrow from one another. A class inferred by several
-co-owners has no arbitrary single owner for CSS subject diagnostics.
+co-owners has no arbitrary single owner for CSS subject diagnostics. A
+stylesheet foreign to all co-owners receives one `KUI-L019` per subject rule,
+including dynamic BEM modifiers; `evidence.components` names the co-owner set.
 Set `"implicitComponentOwnership": true` to include uncataloged modules
 that directly import CSS. Component mode reports sibling CSS and hook-class
 restyles while allowing a component's own stylesheet and module.
@@ -76,7 +78,11 @@ For an entry stylesheet shared by modules without direct CSS imports, configure
 These package-relative paths define one owner: its stylesheet and every listed
 source file or directory prefix. Doctor reports sibling CSS restyles and markup
 class use as `KUI-L019` and `KUI-L023`. Source paths ending in `/` match a
-directory subtree; other paths match exactly.
+directory subtree; other paths match exactly. When implicit ownership is also
+enabled, the group takes precedence over listed source modules and any direct
+import of its stylesheet. An unrelated importer still borrows the group's
+classes; its other stylesheets can retain their own implicit ownership.
+
 Set `"ownershipContext": "any"` to also report a same-package sibling's class
 used as ancestor or sibling context or within `:has()`, `:is()`, `:where()`, or
 `:not()`. The default `"subject"` keeps subject-only context policy; classes

package/docs/ux-demo.md

@@ -23,7 +23,7 @@ deterministic state, and semantic layout owners from the [recipe guide](./recipe
 - It imports public component subpaths, exercising their browser-selected reachable CSS rather than a catalog-only style path.
 - The `ListActionRow` route demonstrates sibling primary/trailing native controls, independent disabled states, controlled selection, first-line leading-icon alignment for wrapped labels, and an application-owned native popover relationship without nesting controls. The `ListItem` route demonstrates the same multiline leading-icon anchor alongside its single-control navigation contract.
 - The `PopupMenu` route's context example opens one app-owned menu either at the row's right-click point or below its adjacent, keyboard-operable Demand actions button. Its interactive row/button composition opts out of the catalog geometry overlay so the overlay's border and margin highlights do not masquerade as a row inset during activation. The Nested decisions example shows the automatic phone-width submenu placement above or below its parent list, with native ArrowLeft return, Escape dismissal, and child selection.
-- The `AppTab` and `TabBar` routes are focused component specimens: AppTab shows its selected, compact, segmented, icon-only, truncation, placeholder, pending, metadata, and close-icon axes inside the required tablist context; TabBar shows its rail, segmented, inspector, allocation, placement, and accessory-zone axes, including an adjacent action plus a separately pinned end action whose tabs overflow at narrow widths, without application readouts. The separate `Application tabs` composition route demonstrates controlled selection, matching panel content, overflow, adding (a new tab opens `pending` with a spinner and stays selectable while its panel shows a `Skeleton` heading until a simulated load completes), closing, keyboard/pointer reordering, and application-owned ordering. The `ResizableRegion` route likewise replaces only the decorative handle glyph while retaining separator semantics and shared wiring.
+- The `AppTab` and `TabBar` routes are focused component specimens: AppTab shows its selected, compact, segmented, icon-only, truncation, placeholder, pending, metadata, and close-icon axes inside the required tablist context; TabBar shows its rail, segmented, inspector, allocation, placement, and accessory-zone axes, including an adjacent action plus a separately pinned end action whose tabs overflow at narrow widths, without application readouts. The pinned leading-tab specimen uses native strip scrolling so momentum and the final tab's end position remain natural; `snapTabs` stays an opt-in for applications that want whole-tab settling. The separate `Application tabs` composition route demonstrates controlled selection, matching panel content, overflow, adding (a new tab opens `pending` with a spinner and stays selectable while its panel shows a `Skeleton` heading until a simulated load completes), closing, keyboard/pointer reordering, and application-owned ordering. The `ResizableRegion` route likewise replaces only the decorative handle glyph while retaining separator semantics and shared wiring.
 - Every first-party visual component and every free Web Awesome 3.12 component has its own stable `?component=<id>` URL and focused demo. Composite header, menu, and feedback scenarios remain addressable alongside their subcomponents; the root opens the first Kerf component. The former aggregate Web Awesome theme specimen is intentionally omitted because its component families are covered by those focused routes.
 - `ai/component-catalog.json` is the canonical catalog metadata. A deterministic checked-in projection supplies the demo's unique id, category, kind (`component`, `composition`, or `recipe`), source (`kerf` or `webawesome`), name, description, recommendation, direct `uses` dependencies, existing documentation path, and demo-source path; first-party, recipe, and Web Awesome renderer maps are exhaustively typed against its generated id unions. Functional groups follow their authored importance order; components precede compositions inside each group, equal-importance entries use alphabetical order, and the Recipes group comes last. Composition names stay concise and project a visible `Composition` sidebar tag. Non-supported Web Awesome recommendations project to a visible `Discouraged` tag, with Popup as the deliberate conditional exception. Demo paths resolve to the matching `ui/ux-demo/demos/<id>.tsx` or `ui/ux-demo/recipes/*.tsx` file, or to `ui/ux-demo/webawesome-demos.tsx` for Web Awesome entries. `ui/ux-demo/main.tsx` owns only the catalog shell, shared state, routing, and interaction wiring. First-party component entries additionally derive `ui/src/<public-subpath>.tsx` from their canonical `delivery.browserImport` or opt-in `delivery.moduleImport`.
 - Every detail footer groups compact `Demo source` and `Guidance` actions; first-party component details also expose `Component source`. Web Awesome details say `Integration guidance` to distinguish the local integration contract from the upstream component implementation. Each button retains its repository-relative path in the DOM for verification and uses a deploy-safe absolute GitHub blob URL with a contextual new-tab name; the demo does not depend on a local source server or add a package runtime export. At phone widths, the resource group and related-component selector stack as full-width rows, with any resource overflow contained locally so labels cannot overlap the selector or widen the document.

package/package.json

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

package/ux-demo/recipes/composer-form.tsx

@@ -100,7 +100,7 @@ export const createRecipe: RecipeFactory = (announce) => {
             hint="Summarize the outcome in one line."
             required
             value={title.value}
-          ></wa-input>
+          />
           <wa-textarea
             name="recipe-body"
             label="Details"
@@ -109,7 +109,7 @@ export const createRecipe: RecipeFactory = (announce) => {
             maxlength="400"
             with-count
             value={body.value}
-          ></wa-textarea>
+          />
           <Select<string>
             name="recipe-audience"
             value={audience.value}

package/dist/chunk-KLJKU6ZL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/resize-grip.tsx","../src/resizable-region.tsx"],"names":["jsxs","Fragment","jsx"],"mappings":"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","file":"chunk-KLJKU6ZL.js","sourcesContent":["import type { ResizableRegionAxis } from './resizable-region.js';\n\n/**\n * The dormant two-line grip a resize separator shows on hover and focus. Shared\n * by `ResizableRegion` and resizable `Workbench` panels so both separators read\n * the same. Internal.\n */\nexport function ResizeGrip({ axis }: { axis: ResizableRegionAxis }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    >\n      {axis === 'horizontal' ? (\n        <>\n          <path d=\"M9 6v12\"></path>\n          <path d=\"M15 6v12\"></path>\n        </>\n      ) : (\n        <>\n          <path d=\"M6 9h12\"></path>\n          <path d=\"M6 15h12\"></path>\n        </>\n      )}\n    </svg>\n  );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nimport type { CssLength } from './css-values.js';\nimport { ResizeGrip } from './resize-grip.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport type ResizableRegionAxis = 'horizontal' | 'vertical';\nexport type ResizableRegionEdge = 'start' | 'end';\nexport type ResizableRegionSeparator = 'auto' | 'hidden';\nexport type ResizableRegionCollapseMotion = 'none' | 'slide' | 'fade-slide';\nexport type ResizableRegionContentOverflow = 'clip' | 'auto' | 'visible';\nexport type ResizableRegionPresentation = 'inline' | 'overlay' | 'hidden';\nexport type ResizableRegionRestorePosition =\n  'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';\nexport type ResizableRegionResponsiveFillAt = 'compact' | 'narrow';\n\nexport interface ResizableRegionProps {\n  id: string;\n  label: string;\n  size: number;\n  min: number;\n  max: number;\n  axis?: ResizableRegionAxis;\n  edge?: ResizableRegionEdge;\n  /** Snap the track to zero. The region renders `inert` and `aria-hidden`\n   * while collapsed, so neither Tab nor assistive technology reaches it or\n   * lands on an empty landmark; `restoreControl` renders outside the region. */\n  collapsed?: boolean;\n  transitioning?: boolean;\n  /** Whether the separator line is painted. The resize hit target remains available. */\n  separator?: ResizableRegionSeparator;\n  /** Keep the track change instant while optionally sliding the fixed-size content. */\n  collapseMotion?: ResizableRegionCollapseMotion;\n  /** Use `visible` while an anchored popup must escape the content box; it raises the region to the popup layer. */\n  contentOverflow?: ResizableRegionContentOverflow;\n  /** Inline layout, an edge overlay, or a responsive replacement that removes the region. */\n  presentation?: ResizableRegionPresentation;\n  /** Always-available control rendered while collapsed, outside the clipped region. */\n  restoreControl?: SafeHtml;\n  /** Safe-area-aware corner of the region's container (not the viewport) for `restoreControl`. */\n  restorePosition?: ResizableRegionRestorePosition;\n  /** Position a restore control in its container corner or leave it in normal flow. */\n  restorePlacement?: 'corner' | 'inline';\n  /** Corner distance before the container's safe-area inset. */\n  restoreInset?: CssLength;\n  /** Fill the available inline track and hide the separator below a container breakpoint. */\n  responsiveFillAt?: ResizableRegionResponsiveFillAt;\n  /** Decorative dormant content for the separator handle. Must not contain interactive descendants. */\n  handleIcon?: SafeHtml;\n  children: KerfUiContent;\n}\n\nexport const clampRegionSize = (size: number, min: number, max: number) =>\n  Math.min(max, Math.max(min, Math.round(size)));\nexport const resizeRegionFromPointer = (\n  startSize: number,\n  delta: number,\n  edge: ResizableRegionEdge,\n) => startSize + delta * (edge === 'start' ? -1 : 1);\n\nexport function ResizableRegion({\n  id,\n  label,\n  size,\n  min,\n  max,\n  axis = 'horizontal',\n  edge = 'end',\n  collapsed = false,\n  transitioning = false,\n  separator = 'auto',\n  collapseMotion = 'slide',\n  contentOverflow = 'clip',\n  presentation = 'inline',\n  restoreControl,\n  restorePosition = axis === 'horizontal' && edge === 'end'\n    ? 'bottom-start'\n    : 'bottom-end',\n  restorePlacement = 'corner',\n  restoreInset,\n  responsiveFillAt,\n  handleIcon,\n  children,\n}: ResizableRegionProps) {\n  const expandedSize = clampRegionSize(size, min, max);\n  const resolved = collapsed ? 0 : expandedSize;\n  const orientation = axis === 'horizontal' ? 'vertical' : 'horizontal';\n  return (\n    <>\n      <section\n        class=\"kui-resizable-region\"\n        data-component=\"resizable-region\"\n        data-region-id={id}\n        data-axis={axis}\n        data-edge={edge}\n        data-collapsed={String(collapsed)}\n        data-transitioning={String(transitioning)}\n        data-separator={separator}\n        data-collapse-motion={collapseMotion}\n        data-content-overflow={contentOverflow}\n        data-presentation={presentation}\n        data-responsive-fill-at={responsiveFillAt}\n        style={`--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`}\n        aria-label={label}\n        // Collapsed, the labeled region leaves the accessibility tree whole\n        // (its content is inert and its separator already hidden), so no\n        // empty landmark stays behind; the restore control is a sibling.\n        aria-hidden={\n          collapsed || presentation === 'hidden' ? 'true' : undefined\n        }\n        inert={collapsed}\n      >\n        <div class=\"kui-resizable-region__content\" inert={collapsed}>\n          {children}\n        </div>\n        <div\n          class=\"kui-resizable-region__handle\"\n          role=\"separator\"\n          tabindex={collapsed || presentation !== 'inline' ? '-1' : '0'}\n          aria-label={`Resize ${label}`}\n          aria-orientation={orientation}\n          aria-valuemin={collapsed ? 0 : min}\n          aria-valuemax={max}\n          aria-valuenow={resolved}\n          aria-hidden={\n            collapsed || presentation !== 'inline' ? 'true' : undefined\n          }\n          data-kui-resize-handle\n          data-region-id={id}\n        >\n          <span class=\"kui-resizable-region__handle-icon\" aria-hidden=\"true\">\n            {handleIcon ?? <ResizeGrip axis={axis} />}\n          </span>\n        </div>\n      </section>\n      {collapsed && restoreControl && presentation !== 'hidden' && (\n        <div\n          class=\"kui-resizable-region__restore\"\n          data-region-restore={id}\n          data-position={restorePosition}\n          data-placement={restorePlacement}\n          style={\n            restoreInset\n              ? `--kui-resizable-region-restore-inset:${restoreInset}`\n              : undefined\n          }\n        >\n          {restoreControl}\n        </div>\n      )}\n    </>\n  );\n}\n"]}