@kerfjs/ui 5.0.0-beta.69 → 5.0.0-beta.70

package/ai/component-catalog.json

@@ -159,7 +159,16 @@
       ],
       "variants": [
         "decorative",
-        "labeled"
+        "labeled",
+        "outline (default appearance)",
+        "solid (appearance=solid)"
+      ],
+      "usageExamples": [
+        {
+          "title": "Solid selected glyph",
+          "description": "The solid appearance fills a compatible Lucide glyph with currentColor while retaining its stroke and accessible name policy.",
+          "code": "<LucideIcon icon={Star} name=\"star\" appearance=\"solid\" />"
+        }
       ],
       "accessibility": [
         "Decorative icons are aria-hidden; meaningful icons require a label."
@@ -4665,6 +4674,7 @@
     {
       "id": "loading-spinner",
       "name": "LoadingSpinner",
+      "rootElement": "svg",
       "category": "Feedback",
       "kind": "component",
       "source": "kerf",

package/ai/component-catalog.schema.json

@@ -60,7 +60,7 @@
         "accessibility": { "type": "array", "items": { "type": "string" } },
         "publicClasses": { "type": "array", "items": { "type": "string" }, "uniqueItems": true },
         "placeableClasses": { "description": "Public classes an application may place on its own elements (layout utilities, a document root, or item geometry on a non-div carrier). Every other public class is component anatomy: render the component instead.", "type": "array", "items": { "type": "string" }, "uniqueItems": true },
-        "rootElement": { "description": "The intrinsic element the component renders at its root. Required for a component whose placeableClasses it renders itself: a placeable class on a plain element of this tag is the component recreated, so render the component instead; another carrier element may keep the class.", "type": "string", "pattern": "^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$" },
+        "rootElement": { "description": "The intrinsic element the component renders at its root. Required when a component renders placeableClasses; also enables classless child-root ownership checks.", "type": "string", "pattern": "^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$" },
         "publicTokens": { "type": "array", "items": { "type": "string" }, "uniqueItems": true },
         "cssValueProps": { "type": "array", "items": { "$ref": "#/$defs/cssValueProp" }, "uniqueItems": true },
         "geometry": { "$ref": "#/$defs/geometry" },

package/ai/component-composition.json

@@ -3873,6 +3873,7 @@
       "boundaries": {
         "rootClass": "kui-loading-spinner",
         "publicClasses": ["kui-loading-spinner"],
+        "rootElement": "svg",
         "publicTokens": []
       },
       "diagnostics": [],

package/ai/component-composition.schema.json

@@ -333,7 +333,7 @@
             "rootElement": {
               "type": "string",
               "pattern": "^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$",
-              "description": "The intrinsic element the component renders at its root. A placeableClasses class on a plain element of this tag recreates the component; the class stays placeable on any other carrier element."
+              "description": "The intrinsic element the component renders at its root. It identifies composed child roots for ownership checks; a placeableClasses class on a plain element of this tag recreates the component, while the class stays placeable on another carrier."
             },
             "publicTokens": { "$ref": "#/$defs/stringList" },
             "publicParts": { "$ref": "#/$defs/stringList" }

package/ai/components/lucide-icon.md

@@ -32,6 +32,8 @@ Exact prop names and types: [`@kerfjs/ui/lucide-icon`](../public-api-signatures-
 
 - decorative
 - labeled
+- outline (default appearance)
+- solid (appearance=solid)
 
 ## Composition
 
@@ -53,6 +55,16 @@ Margin: none · border: none · padding: none (layout role: foundation). `self`
 
 - Decorative icons are aria-hidden; meaningful icons require a label.
 
+## Usage examples
+
+### Solid selected glyph
+
+The solid appearance fills a compatible Lucide glyph with currentColor while retaining its stroke and accessible name policy.
+
+```tsx
+<LucideIcon icon={Star} name="star" appearance="solid" />
+```
+
 ## Styling boundary
 
 The component owns its own styles. Configure it through its props and variants; do not override its internals.

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.69` and `kerfjs@5.0.0-beta.69`. 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.70` and `kerfjs@5.0.0-beta.70`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
 
 ## `@kerfjs/ui/css-values`
 
@@ -1110,11 +1110,13 @@ interface TabBarProps {
     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, end, className, activation, allocation, presentation, iconOnlyAt, trailingPlacement, slot, }: TabBarProps): kerfjs.SafeHtml;
+declare function TabBar({ id, label, children, leading, trailing, end, className, activation, allocation, presentation, iconOnlyAt, trailingPlacement, snapTabs, slot, }: TabBarProps): kerfjs.SafeHtml;
 
 export { type TabActivation, TabBar, type TabBarAllocation, type TabBarIconOnlyAt, type TabBarPresentation, type TabBarProps, type TabBarTrailingPlacement };
 ```
@@ -3258,6 +3260,8 @@ type LucideIconSize = 'xs' | 's' | 'm' | 'l' | 'xl' | number;
 interface LucideIconProps {
     icon: LucideNode;
     name: string;
+    /** Outline by default; solid fills compatible glyphs with the current text color. */
+    appearance?: 'outline' | 'solid';
     className?: string;
     label?: string;
     /** Named icon scale or positive pixel size, converted to rem. Omit for 1em. */
@@ -3266,7 +3270,7 @@ interface LucideIconProps {
     slot?: string;
 }
 /** Render a Lucide-compatible icon node without copying icon SVG strings. */
-declare function LucideIcon({ icon, name, className, label, size, slot, }: LucideIconProps): kerfjs.SafeHtml;
+declare function LucideIcon({ icon, name, appearance, className, label, size, slot, }: LucideIconProps): kerfjs.SafeHtml;
 
 export { LucideIcon, type LucideIconProps, type LucideIconSize, type LucideNode };
 ```

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.69` 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.70` 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/analyzer/component-ownership.d.mts

@@ -33,7 +33,23 @@ export function restyledComponents(
   selectorList: string,
   facts: ComponentOwnershipFacts,
   isForeign: (entry: OwnershipCatalogEntry) => boolean,
+  options?: {
+    componentMode?: boolean;
+    ownPackage?: string;
+    hooks?: Map<string, OwnershipCatalogEntry>;
+    composedChildren?: Map<string, OwnershipCatalogEntry>;
+  },
 ): RestyledComponent[];
+export function contextualComponents(
+  selectorList: string,
+  facts: ComponentOwnershipFacts,
+  isForeign: (entry: OwnershipCatalogEntry) => boolean,
+  ownPackage: string | undefined,
+): Array<{
+  entry: OwnershipCatalogEntry;
+  name: string;
+  position: 'subject' | 'ancestor' | 'sibling' | 'has' | 'is' | 'where' | 'not';
+}>;
 export function privateVariableOwner(
   property: string,
   facts: ComponentOwnershipFacts,

package/analyzer/component-ownership.mjs

@@ -1,6 +1,6 @@
 /**
  * Downstream component-ownership facts for `kerf-ui-analyze` (`KUI-L019` –
- * `KUI-L022`): the consumer-side form of the package's own
+ * `KUI-L023`): the consumer-side form of the package's own
  * `check:css-ownership` rules.
  *
  * Components own their styles and are configured, never overridden. An
@@ -9,13 +9,15 @@
  * application's stylesheet), but it never makes another package's component
  * the subject of a rule, writes that component's private variables, overrides
  * a token its typed prop configures, or restyles it through a hook class on
- * its root. Every fact here comes from the loaded composition catalogs, so
- * third-party component packages get the same protection as `@kerfjs/ui`.
+ * its root. Facts come from composition and selection catalogs, plus optional
+ * source inference, so third-party packages get the same protection as
+ * `@kerfjs/ui`.
  */
 import {
   classNames,
   complexSelectorParts,
   dataComponents,
+  pseudoArguments,
   subjectTypes,
   withoutRelationalArguments,
 } from './selectors.mjs';
@@ -95,7 +97,17 @@ export function componentOwnershipFacts(entries) {
  * Returns `{ entry, via, name }` records; `isForeign(entry)` decides which
  * entries the stylesheet does not own.
  */
-export function restyledComponents(selectorList, facts, isForeign) {
+export function restyledComponents(
+  selectorList,
+  facts,
+  isForeign,
+  {
+    componentMode = false,
+    ownPackage,
+    hooks = new Map(),
+    composedChildren = new Map(),
+  } = {},
+) {
   const found = [];
   const seen = new Set();
   const add = (entry, via, name) => {
@@ -127,10 +139,29 @@ export function restyledComponents(selectorList, facts, isForeign) {
     // that component. Do not infer ownership through its root, where an app
     // may place its own children, or through an app-named intermediate node.
     if (subjectClasses.length || parts.length < 2) continue;
+    if (componentMode && parts.at(-1).combinator === '>') {
+      const types = subjectTypes(subject) ?? [];
+      for (const name of classNames(
+        withoutRelationalArguments(parts.at(-2).compound),
+      ))
+        for (const type of types)
+          add(
+            composedChildren.get(`${name}|${type}`),
+            'descendant',
+            `.${name}`,
+          );
+    }
     for (let index = parts.length - 2; index >= 0; index -= 1) {
       const classes = classNames(
         withoutRelationalArguments(parts[index].compound),
       );
+      const hook = componentMode
+        ? classes.find((name) => hooks.has(name))
+        : undefined;
+      if (hook) {
+        add(hooks.get(hook), 'descendant', `.${hook}`);
+        break;
+      }
       if (classes.some((name) => !facts.classOwners.has(name))) break;
       const anatomy = classes.find(
         (name) => name.includes('__') && facts.classOwners.has(name),
@@ -139,6 +170,58 @@ export function restyledComponents(selectorList, facts, isForeign) {
         add(facts.classOwners.get(anatomy), 'descendant', `.${anatomy}`);
         break;
       }
+      if (componentMode) {
+        const root = classes.find((name) => facts.classOwners.has(name));
+        if (root) {
+          const entry = facts.classOwners.get(root);
+          if (entry.package === ownPackage)
+            add(entry, 'descendant', `.${root}`);
+          break;
+        }
+      }
+    }
+  }
+  return found;
+}
+
+/** Same-package classes used to key another component's selector. */
+export function contextualComponents(
+  selectorList,
+  facts,
+  isForeign,
+  ownPackage,
+) {
+  const found = [];
+  const seen = new Set();
+  const selectorClasses = (text) => classNames(text.replace(/\[[^\]]*\]/g, ''));
+  for (const parts of complexSelectorParts(selectorList)) {
+    for (const [index, part] of parts.entries()) {
+      const compound = part.compound;
+      for (const name of selectorClasses(compound)) {
+        const entry = facts.classOwners.get(name);
+        if (!entry || entry.package !== ownPackage || !isForeign(entry))
+          continue;
+        const pseudo = ['has', 'is', 'where', 'not'].find((candidate) =>
+          pseudoArguments(compound, candidate).some((argument) =>
+            selectorClasses(argument).includes(name),
+          ),
+        );
+        const position = pseudo
+          ? pseudo
+          : index === parts.length - 1
+            ? 'subject'
+            : ['+', '~'].includes(parts[index + 1].combinator)
+              ? 'sibling'
+              : 'ancestor';
+        const key = `${entry.key}|${name}|${position}`;
+        if (seen.has(key)) continue;
+        seen.add(key);
+        found.push({
+          entry,
+          name: `.${name}`,
+          position,
+        });
+      }
     }
   }
   return found;

package/analyzer/index.d.mts

@@ -44,6 +44,8 @@ export function analyzeUiProject(options?: {
   knownRules?: Iterable<string>;
   adoption?: boolean;
   ownership?: 'package' | 'component';
+  ownershipContext?: 'subject' | 'any';
+  implicitComponentOwnership?: boolean;
 }): Promise<UiAnalysisReport>;
 
 export function formatUiAnalysisText(report: UiAnalysisReport): string;