@kerfjs/ui 5.0.0-beta.55 → 5.0.0-beta.57

package/analyzer/selectors.mjs

@@ -0,0 +1,212 @@
+/**
+ * Selector parsing shared by the package stylesheet ownership check
+ * (`scripts/lib/css-ownership.mjs`, `npm run check:css-ownership`) and the
+ * downstream component-ownership diagnostics in `kerf-ui-analyze`
+ * (`component-ownership.mjs`). Pure string work over one selector list: no
+ * PostCSS, no filesystem. One copy means the package rule and the consumer
+ * rule agree on which compound a selector styles.
+ */
+
+export function ownsClass(rootClass, candidate) {
+  return (
+    candidate === rootClass ||
+    candidate.startsWith(`${rootClass}__`) ||
+    candidate.startsWith(`${rootClass}--`)
+  );
+}
+
+/**
+ * Split a selector list into its complex selectors, and each complex selector
+ * into compounds, ignoring commas and combinators nested inside parentheses,
+ * attribute brackets, or quotes. Each compound records the combinator that
+ * joins it to the previous one (`''` for the first).
+ */
+export function complexSelectorParts(selectorList) {
+  const selectors = [];
+  let compounds = [];
+  let current = '';
+  let combinator = '';
+  let pending = '';
+  let depth = 0;
+  let quote = null;
+  const endCompound = () => {
+    if (current.trim()) {
+      compounds.push({ combinator, compound: current.trim() });
+      combinator = '';
+    }
+    current = '';
+  };
+  for (const char of selectorList) {
+    if (quote) {
+      current += char;
+      if (char === quote) quote = null;
+    } else if (char === '"' || char === "'") {
+      quote = char;
+      current += char;
+    } else if (char === '(' || char === '[') {
+      depth += 1;
+      current += char;
+    } else if (char === ')' || char === ']') {
+      depth -= 1;
+      current += char;
+    } else if (depth === 0 && char === ',') {
+      endCompound();
+      selectors.push(compounds);
+      compounds = [];
+      pending = '';
+    } else if (depth === 0 && /[\s>+~]/.test(char)) {
+      const hadCompound = current.trim() !== '';
+      endCompound();
+      if (/[>+~]/.test(char)) pending = char;
+      else if (!pending && (hadCompound || compounds.length > 0)) pending = ' ';
+    } else {
+      if (!current && compounds.length > 0) {
+        combinator = pending || ' ';
+        pending = '';
+      }
+      current += char;
+    }
+  }
+  endCompound();
+  selectors.push(compounds);
+  return selectors;
+}
+
+/** Complex selectors as arrays of compound strings. */
+export function complexSelectors(selectorList) {
+  return complexSelectorParts(selectorList).map((parts) =>
+    parts.map(({ compound }) => compound),
+  );
+}
+
+export function kuiClasses(selector) {
+  return [...selector.matchAll(/\.((?:kui)-[a-z0-9_-]+)/gi)].map(
+    ([, name]) => name,
+  );
+}
+
+/** Every class name a selector names, in any namespace. */
+export function classNames(selector) {
+  return [...selector.matchAll(/\.(-?[_a-zA-Z][_a-zA-Z0-9-]*)/g)].map(
+    ([, name]) => name,
+  );
+}
+
+export function dataComponents(selector) {
+  return [
+    ...selector.matchAll(
+      /\[data-component\s*=\s*["']?([a-z0-9-]+)["']?\s*\]/gi,
+    ),
+  ].map(([, name]) => name);
+}
+
+/**
+ * Remove the arguments of every pseudo-class named in `names` from a
+ * compound, keeping the empty call.
+ */
+export function withoutPseudoArguments(compound, names) {
+  const opener = new RegExp(`^:(?:${names.join('|')})\\(`, 'i');
+  let result = '';
+  let skipDepth = 0;
+  for (let index = 0; index < compound.length; index += 1) {
+    if (skipDepth === 0) {
+      const match = opener.exec(compound.slice(index));
+      if (match) {
+        result += match[0];
+        skipDepth = 1;
+        index += match[0].length - 1;
+      } else result += compound[index];
+    } else if (compound[index] === '(') skipDepth += 1;
+    else if (compound[index] === ')') {
+      skipDepth -= 1;
+      if (skipDepth === 0) result += ')';
+    }
+  }
+  return result;
+}
+
+/**
+ * Remove the arguments of every `:has()` and `:not()` in a compound. A parent
+ * may key its own styles on a composed child's state
+ * (`:has(> .kui-select[open])`) or exclude a kerf child it does not own
+ * (`wa-dropdown:not(.kui-popup-menu)`): neither styles that child.
+ */
+export function withoutRelationalArguments(compound) {
+  return withoutPseudoArguments(compound, ['has', 'not']);
+}
+
+/** The top-level arguments of each `:name(...)` call in a compound. */
+export function pseudoArguments(compound, name) {
+  const args = [];
+  const opener = new RegExp(`:${name}\\(`, 'gi');
+  for (const match of compound.matchAll(opener)) {
+    let depth = 1;
+    let index = match.index + match[0].length;
+    const start = index;
+    for (; index < compound.length && depth > 0; index += 1) {
+      if (compound[index] === '(') depth += 1;
+      else if (compound[index] === ')') depth -= 1;
+    }
+    args.push(compound.slice(start, index - 1));
+  }
+  return args;
+}
+
+export function splitTopLevel(list) {
+  const parts = [];
+  let depth = 0;
+  let current = '';
+  for (const char of list) {
+    if (char === '(' || char === '[') depth += 1;
+    else if (char === ')' || char === ']') depth -= 1;
+    if (char === ',' && depth === 0) {
+      parts.push(current.trim());
+      current = '';
+    } else current += char;
+  }
+  if (current.trim()) parts.push(current.trim());
+  return parts;
+}
+
+/**
+ * The element types a subject compound can match: its own type selector and
+ * the subject types inside its `:is()` / `:where()` arguments. `null` means the
+ * compound places no type constraint (universal).
+ */
+export function subjectTypes(compound) {
+  const bare = withoutPseudoArguments(compound, [
+    'has',
+    'not',
+    'is',
+    'where',
+    'part',
+    'nth-child',
+    'nth-last-child',
+    'nth-of-type',
+    'nth-last-of-type',
+  ]);
+  const own = /^([a-z][a-z0-9-]*)/i.exec(bare);
+  if (own) return [own[1].toLowerCase()];
+  const types = [];
+  for (const name of ['is', 'where']) {
+    for (const args of pseudoArguments(
+      withoutRelationalArguments(compound),
+      name,
+    )) {
+      for (const arg of splitTopLevel(args)) {
+        const parts = complexSelectors(arg)[0] ?? [];
+        const last = parts.at(-1);
+        if (!last) return null;
+        const inner = subjectTypes(last);
+        if (inner === null) {
+          // A class-only argument constrains nothing by type, but it names an
+          // element that must carry that class.
+          if (kuiClasses(withoutRelationalArguments(last)).length > 0) continue;
+          return null;
+        }
+        types.push(...inner);
+      }
+    }
+  }
+  return types.length > 0 ? types : null;
+}

package/dist/app-tab.js

@@ -1,4 +1,4 @@
-export { AppTab } from './chunk-NE5JAOQS.js';
+export { AppTab } from './chunk-WOUF7YXM.js';
 
 
 

package/dist/badge.d.ts

@@ -3,10 +3,17 @@ import { SafeHtml } from 'kerfjs';
 type BadgeTone = 'neutral' | 'brand' | 'pop' | 'success' | 'warning' | 'danger';
 type BadgeAppearance = 'quiet' | 'solid' | 'outline';
 type BadgeShape = 'pill' | 'rounded';
+/** Size of a text badge. A text-free dot is the separate `size: 'dot'` form. */
 type BadgeSize = 'compact' | 'default';
-interface BadgeProps {
-    children: SafeHtml | string | number;
+interface BadgeCommonProps {
     tone?: BadgeTone;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/** A badge that shows a short status, count, or category as visible text. */
+interface BadgeTextProps extends BadgeCommonProps {
+    children: SafeHtml | string | number;
     appearance?: BadgeAppearance;
     shape?: BadgeShape;
     size?: BadgeSize;
@@ -14,11 +21,32 @@ interface BadgeProps {
     label?: string;
     /** Hide a repeated visual badge from assistive technology. */
     ariaHidden?: boolean;
-    className?: string;
-    /** Native named-slot assignment when composed inside a web component. */
-    slot?: string;
 }
+/** A labeled dot, announced as an image with its own accessible name. */
+interface BadgeDotLabeled {
+    /** Accessible name for the dot, for example `"New activity"`. */
+    label: string;
+    ariaHidden?: false;
+}
+/** A decorative dot whose meaning the owning component already announces. */
+interface BadgeDotDecorative {
+    label?: never;
+    ariaHidden: true;
+}
+/**
+ * A text-free status dot (the iOS "new content" dot): a small solid circle in
+ * the badge's tone. It has no visible text, so it must either carry its own
+ * accessible `label` (exposed as an image) or be `ariaHidden` because the
+ * surrounding component already folds its meaning into an accessible name.
+ */
+type BadgeDotProps = BadgeCommonProps & {
+    size: 'dot';
+    children?: never;
+    appearance?: never;
+    shape?: never;
+} & (BadgeDotLabeled | BadgeDotDecorative);
+type BadgeProps = BadgeTextProps | BadgeDotProps;
 /** Compact, non-interactive metadata whose tone, emphasis, and shape are configured by props. */
-declare function Badge({ children, tone, appearance, shape, size, label, ariaHidden, className, slot, }: BadgeProps): SafeHtml;
+declare function Badge(props: BadgeProps): SafeHtml;
 
-export { Badge, type BadgeAppearance, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeTone };
+export { Badge, type BadgeAppearance, type BadgeDotProps, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeTextProps, type BadgeTone };

package/dist/badge.js

@@ -1,3 +1,3 @@
-export { Badge } from './chunk-XD7DWYXG.js';
+export { Badge } from './chunk-MP2GDBQZ.js';
 
 //# sourceMappingURL=badge.js.map

package/dist/browser/catalog.js

@@ -0,0 +1,25 @@
+import '../styles/foundation.css';
+import '../styles/list.css';
+import '../styles/list-inset-text.css';
+import '../styles/lucide-icon.css';
+import '../styles/text.css';
+import '../styles/toolbar-control-group.css';
+import '../styles/skeleton.css';
+import '../styles/toolbar-text.css';
+import '../styles/resizable-region.css';
+import '../styles/floating-toolbar.css';
+import '../styles/pane.css';
+import '../styles/toolbar.css';
+import '../styles/workbench.css';
+import '../styles/popup-menu.css';
+import '../styles/row.css';
+import '../styles/badge.css';
+import '../styles/disclosure-arrow.css';
+import '../styles/list-header.css';
+import '../styles/loading-spinner.css';
+import '../styles/list-item.css';
+import '../styles/catalog/components/catalog-stage.css';
+import '../styles/catalog/components/catalog.css';
+import '../styles/catalog/components/catalog-example.css';
+import '../styles/catalog/components/catalog-example-stack.css';
+export * from '../catalog.js';

package/dist/browser/collapsible-panel.js

@@ -0,0 +1,7 @@
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
+import '../styles/pane.css';
+import '../styles/toolbar.css';
+import '../styles/toolbar-control-group.css';
+import '../styles/collapsible-panel.css';
+export * from '../collapsible-panel.js';

package/dist/browser/content-item.js

@@ -0,0 +1,3 @@
+import '../styles/foundation.css';
+import '../styles/content-item.css';
+export * from '../content-item.js';

package/dist/browser/nav-stack.js

@@ -0,0 +1,8 @@
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
+import '../styles/toolbar.css';
+import '../styles/toolbar-control-group.css';
+import '../styles/skeleton.css';
+import '../styles/toolbar-text.css';
+import '../styles/nav-stack.css';
+export * from '../nav-stack.js';

package/dist/browser/select.js

@@ -1,4 +1,5 @@
 import '../styles/foundation.css';
+import '../styles/badge.css';
 import '../styles/lucide-icon.css';
 import '../styles/skeleton.css';
 import '../styles/select.css';

package/dist/browser/split-view.js

@@ -0,0 +1,10 @@
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
+import '../styles/toolbar.css';
+import '../styles/toolbar-control-group.css';
+import '../styles/skeleton.css';
+import '../styles/toolbar-text.css';
+import '../styles/nav-stack.css';
+import '../styles/resizable-region.css';
+import '../styles/split-view.css';
+export * from '../split-view.js';

package/dist/browser/tab-scaffold.js

@@ -0,0 +1,4 @@
+import '../styles/foundation.css';
+import '../styles/badge.css';
+import '../styles/tab-scaffold.css';
+export * from '../tab-scaffold.js';

package/dist/browser/workbench.js

@@ -0,0 +1,10 @@
+import '../styles/foundation.css';
+import '../styles/resizable-region.css';
+import '../styles/floating-toolbar.css';
+import '../styles/list.css';
+import '../styles/pane.css';
+import '../styles/lucide-icon.css';
+import '../styles/toolbar.css';
+import '../styles/toolbar-control-group.css';
+import '../styles/workbench.css';
+export * from '../workbench.js';

package/dist/catalog-resources.d.ts

@@ -1,6 +1,17 @@
-import { C as CatalogResource } from './types-D6vzj-VT.js';
+import { C as CatalogResource } from './types-BuHELdXR.js';
 import './semantic-content-BbzjvSu9.js';
 import 'kerfjs';
+import './toolbar.js';
+import './pane.js';
+import './sides-BPSWde0A.js';
+import './workbench.js';
+import './list.js';
+import './css-values.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './resizable-region.js';
+import './panel-toolbar-BN4x0rth.js';
+import './lucide-icon.js';
+import 'lucide';
 
 /**
  * Standard resource labels for a Kerf catalog detail footer. Keep these labels

package/dist/catalog.d.ts

@@ -1,8 +1,19 @@
 import * as kerfjs from 'kerfjs';
 import { SafeHtml } from 'kerfjs';
-import { a as CatalogProps } from './types-D6vzj-VT.js';
-export { b as CatalogBrand, c as CatalogEntry, d as CatalogRelated, C as CatalogResource, e as CatalogSecondaryGroup, f as CatalogSection, g as CatalogStageRootAttributes } from './types-D6vzj-VT.js';
+import { a as CatalogProps } from './types-BuHELdXR.js';
+export { b as CatalogBrand, c as CatalogEntry, d as CatalogRelated, C as CatalogResource, e as CatalogSecondaryGroup, f as CatalogSection, g as CatalogStageRootAttributes } from './types-BuHELdXR.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import './toolbar.js';
+import './pane.js';
+import './sides-BPSWde0A.js';
+import './workbench.js';
+import './list.js';
+import './css-values.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './resizable-region.js';
+import './panel-toolbar-BN4x0rth.js';
+import './lucide-icon.js';
+import 'lucide';
 
 /**
  * Controlled, stateless component-catalog shell: a `Workbench` whose left rail
@@ -11,7 +22,7 @@ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
  * standard toggle moves into the entry toolbar while it is collapsed, and on
  * a small screen the sidebar overlays the stage like any Workbench rail.
  */
-declare function Catalog({ id, brand, sections, active, content, collapsed, theme, headerActions, secondarySections, sidebarFooter, status, geometryOverlay, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleSecondaryAction, headerPlacement, footerPlacement, className, slot, }: CatalogProps): kerfjs.SafeHtml;
+declare function Catalog({ id, brand, sections, active, content, collapsed, theme, headerActions, secondarySections, sidebarFooter, status, geometryOverlay, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleSecondaryAction, headerPlacement, footerPlacement, sidebar, mainToolbar, footerToolbar, className, slot, }: CatalogProps): kerfjs.SafeHtml;
 
 /** How a specimen aligns its visible edge with its `ListHeader` label. */
 type CatalogExampleAlign = 'glyph' | 'inline-control' | 'none';

package/dist/catalog.js

@@ -1,27 +1,28 @@
-import { Workbench } from './chunk-EAX2GSS4.js';
+import { Workbench } from './chunk-G2RKFVRB.js';
 
-import { Row } from './chunk-5I22LMCV.js';
+import { PopupMenu } from './chunk-WLG6SSNT.js';
 
-import { ListItem } from './chunk-GUIHMIT2.js';
-import { List } from './chunk-3NBL3OUQ.js';
+import { Row } from './chunk-VZOFZPSO.js';
+import { ListInsetText } from './chunk-DG6G5EPF.js';
+import { ListItem } from './chunk-QOWG4ZCL.js';
+import { List } from './chunk-NAPE7WUS.js';
 
-import { ToolbarText } from './chunk-TZ5IHWB2.js';
-import { PopupMenu } from './chunk-4BIMLITI.js';
+import { ToolbarText } from './chunk-XDKAYSVD.js';
 
 
-import { ListHeader } from './chunk-R754MHXX.js';
+
+import { ListHeader } from './chunk-553ASUK6.js';
 import { Text } from './chunk-24PHKUR3.js';
-import { ListInsetText } from './chunk-5OLVUEND.js';
 
 
 
-import { Toolbar } from './chunk-MTM43SJO.js';
+
 import { ToolbarControlGroup, ToolbarActionLink } from './chunk-ZIYOJFZD.js';
+import { Toolbar } from './chunk-6YFHCLHG.js';
 
+import { LucideIcon } from './chunk-4R777DUZ.js';
 import { filterDataAttributes } from './chunk-SRSJO5QE.js';
 
-
-import { LucideIcon } from './chunk-4R777DUZ.js';
 import { Moon, Sun, Waypoints, ExternalLink } from 'lucide';
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
@@ -48,7 +49,8 @@ function CatalogResourceFooter({
   resources,
   related,
   status,
-  selectAction
+  selectAction,
+  toolbar
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     status ? /* @__PURE__ */ jsx(
@@ -66,9 +68,11 @@ function CatalogResourceFooter({
       Toolbar,
       {
         label: `${name} resources`,
-        dividerSides: "",
-        responsive: "stack",
-        responsiveAt: "narrow",
+        dividerSides: toolbar?.dividerSides,
+        centerAlign: toolbar?.centerAlign,
+        responsive: toolbar?.responsive ?? "stack",
+        responsiveAt: toolbar?.responsiveAt ?? "narrow",
+        safeAreaEdges: toolbar?.safeAreaEdges,
         leading: resources.length > 0 ? /* @__PURE__ */ jsx(
           ToolbarControlGroup,
           {
@@ -264,8 +268,11 @@ function Catalog({
   toggleSidebarAction = "catalog-toggle-sidebar",
   toggleThemeAction = "catalog-toggle-theme",
   toggleSecondaryAction = "catalog-toggle-secondary",
-  headerPlacement = "fixed",
-  footerPlacement = "fixed",
+  headerPlacement = "auto",
+  footerPlacement = "auto",
+  sidebar = {},
+  mainToolbar,
+  footerToolbar,
   className = "",
   slot
 }) {
@@ -288,9 +295,16 @@ function Catalog({
           label: catalogName,
           leftRail: {
             label: catalogName,
-            size: 288,
+            size: sidebar.size ?? 288,
+            resizable: sidebar.resizable,
+            separator: sidebar.separator,
+            collapseMotion: sidebar.collapseMotion,
+            presentation: sidebar.presentation,
+            responsiveOverlayAt: sidebar.responsiveOverlayAt,
+            compactOverlay: sidebar.compactOverlay,
             collapsed,
             toolbar: {
+              ...sidebar.toolbar,
               label: `${catalogName} header`,
               title: /* @__PURE__ */ jsxs(Fragment, { children: [
                 brand.logoUrl ? /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", single: true, children: /* @__PURE__ */ jsx("img", { class: "kui-catalog__mark", src: brand.logoUrl, alt: "" }) }) : null,
@@ -312,9 +326,10 @@ function Catalog({
             )
           },
           mainToolbar: {
+            ...mainToolbar,
             label: `${name} header`,
             // The entry title stays whole; actions wrap below it when narrow.
-            responsive: "wrap",
+            responsive: mainToolbar?.responsive ?? "wrap",
             title: /* @__PURE__ */ jsx(ToolbarText, { text: name, size: "xlarge", headingLevel: 2 }),
             trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
               headerActions,
@@ -349,34 +364,29 @@ function Catalog({
               resources: selected?.resources ?? [],
               related: selected?.related ?? [],
               status,
-              selectAction
+              selectAction,
+              toolbar: footerToolbar
             }
           ),
+          mainHeader: selected?.description ? /* @__PURE__ */ jsx(
+            ListInsetText,
+            {
+              sides: "trbl",
+              rootAttributes: { "data-catalog-description": "" },
+              children: /* @__PURE__ */ jsx(Text, { variant: "span", children: selected.description })
+            }
+          ) : null,
           mainHeaderPlacement: headerPlacement,
           mainFooterPlacement: footerPlacement,
-          main: (
-            // The description is supporting copy, so it scrolls with the
-            // preview rather than pinning under the toolbar.
-            /* @__PURE__ */ jsxs(List, { flex: true, children: [
-              selected?.description ? /* @__PURE__ */ jsx(
-                ListInsetText,
-                {
-                  sides: "trbl",
-                  rootAttributes: { "data-catalog-description": "" },
-                  children: /* @__PURE__ */ jsx(Text, { variant: "span", children: selected.description })
-                }
-              ) : null,
-              /* @__PURE__ */ jsx(
-                CatalogStage,
-                {
-                  name,
-                  content,
-                  geometryOverlay,
-                  rootAttributes: stageRootAttributes
-                }
-              )
-            ] })
-          )
+          main: /* @__PURE__ */ jsx(List, { flex: true, children: /* @__PURE__ */ jsx(
+            CatalogStage,
+            {
+              name,
+              content,
+              geometryOverlay,
+              rootAttributes: stageRootAttributes
+            }
+          ) })
         }
       )
     }