@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/catalog-projection-cli.mjs

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+
+import { readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { projectConsumerCatalog } from './catalog-projection.mjs';
+
+const usage =
+  'Usage: kerf-catalog-demo --extension <catalog.json> --out <catalog.generated.ts> --repo-base <blob-url> [--kerf-catalog <catalog.json>] [--category <name>] [--source-template <path>] [--demo-template <path>] [--documentation-template <path>] [--design-template <path>] (--write|--check)';
+
+function parseArgs(argv) {
+  const options = {};
+  const values = new Map([
+    ['--extension', 'extension'],
+    ['--out', 'out'],
+    ['--repo-base', 'repoBase'],
+    ['--kerf-catalog', 'kerfCatalog'],
+    ['--category', 'category'],
+    ['--source-template', 'sourceTemplate'],
+    ['--demo-template', 'demoTemplate'],
+    ['--documentation-template', 'documentationTemplate'],
+    ['--design-template', 'designTemplate'],
+  ]);
+  for (let index = 0; index < argv.length; index += 1) {
+    const arg = argv[index];
+    if (arg === '--check' || arg === '--write') {
+      if (options.mode)
+        throw new Error('Choose exactly one of --write or --check');
+      options.mode = arg;
+    } else if (values.has(arg)) {
+      const value = argv[++index];
+      if (!value || value.startsWith('--'))
+        throw new Error(`${arg} needs a value`);
+      options[values.get(arg)] = value;
+    } else {
+      throw new Error(`Unknown option ${arg}`);
+    }
+  }
+  if (!options.mode || !options.extension || !options.out || !options.repoBase)
+    throw new Error(usage);
+  if (!/^https?:\/\//.test(options.repoBase))
+    throw new Error('--repo-base must be an HTTP(S) URL');
+  return options;
+}
+
+export function renderConsumerCatalog(rows, repoBase) {
+  const base = repoBase.endsWith('/') ? repoBase : `${repoBase}/`;
+  return (
+    '// Generated by kerf-catalog-demo. Do not edit.\n' +
+    `export const catalogRepositoryBlobUrl = ${JSON.stringify(base)} as const;\n` +
+    `export const generatedConsumerCatalog = ${JSON.stringify(rows, null, 2)} as const;\n`
+  );
+}
+
+export async function runCatalogProjection(argv) {
+  const options = parseArgs(argv);
+  const extension = JSON.parse(
+    await readFile(resolve(options.extension), 'utf8'),
+  );
+  const kerfCatalog = JSON.parse(
+    await readFile(
+      options.kerfCatalog
+        ? resolve(options.kerfCatalog)
+        : new URL('./ai/component-catalog.json', import.meta.url),
+      'utf8',
+    ),
+  );
+  const rows = projectConsumerCatalog(extension, kerfCatalog, options);
+  const output = renderConsumerCatalog(rows, options.repoBase);
+  const outputPath = resolve(options.out);
+  if (options.mode === '--write') {
+    await writeFile(outputPath, output);
+    process.stdout.write(`Wrote ${outputPath}\n`);
+  } else {
+    let current;
+    try {
+      current = await readFile(outputPath, 'utf8');
+    } catch {
+      // A missing generated file is the same drift as stale content.
+    }
+    if (current !== output)
+      throw new Error(`${outputPath} is stale; run kerf-catalog-demo --write`);
+    process.stdout.write(`${outputPath} is in sync.\n`);
+  }
+}
+
+if (
+  process.argv[1] &&
+  resolve(process.argv[1]) === fileURLToPath(import.meta.url)
+) {
+  runCatalogProjection(process.argv.slice(2)).catch((error) => {
+    process.stderr.write(`kerf-catalog-demo: ${error.message}\n`);
+    process.exitCode = 1;
+  });
+}

package/catalog-projection.d.mts

@@ -0,0 +1,55 @@
+export interface CatalogProjectionRow {
+  id: string;
+  name: string;
+  category: string;
+  kind: string;
+  source: string;
+  description: string;
+  recommendation?: string;
+  uses: readonly string[];
+  demoSource: string;
+  componentSource?: string;
+  designTemplate?: string;
+  documentation?: string;
+}
+
+export interface CatalogProjectionEntry {
+  id: string;
+  name: string;
+  kind: string;
+  purpose: string;
+  category?: string;
+  source?: string;
+  demoSource?: string;
+  documentation?: string;
+  recommendation?: string;
+  uses?: string[];
+}
+
+export interface CatalogProjectionOptions {
+  identity?: (entry: CatalogProjectionEntry) => string;
+  category?: (entry: CatalogProjectionEntry) => string;
+  componentSource?: (entry: CatalogProjectionEntry) => string | undefined;
+  demoSource?: (entry: CatalogProjectionEntry) => string | undefined;
+  documentation?: (entry: CatalogProjectionEntry) => string | undefined;
+  designTemplate?: (entry: CatalogProjectionEntry) => string | undefined;
+}
+
+export interface ConsumerProjectionOptions {
+  category?: string;
+  sourceTemplate?: string;
+  demoTemplate?: string;
+  documentationTemplate?: string;
+  designTemplate?: string;
+}
+
+export function projectCatalogEntries(
+  entries: readonly CatalogProjectionEntry[],
+  options?: CatalogProjectionOptions,
+): CatalogProjectionRow[];
+
+export function projectConsumerCatalog(
+  extension: { package: string; entries: CatalogProjectionEntry[] },
+  kerfCatalog: { entries: { id: string }[] },
+  options?: ConsumerProjectionOptions,
+): CatalogProjectionRow[];

package/catalog-projection.mjs

@@ -0,0 +1,62 @@
+import {
+  isRepositoryPath,
+  validateCatalogExtensionReferences,
+} from './scripts/component-catalog-extension-validation.mjs';
+
+const substitute = (template, entry, packageName) =>
+  template.replace(/\{(id|name|kind|package)\}/g, (_, field) =>
+    field === 'package' ? packageName : entry[field],
+  );
+
+/** Project catalog entries into the row shape used by a UX demo. */
+export function projectCatalogEntries(entries, options = {}) {
+  return entries.map((entry) => {
+    const componentSource = options.componentSource?.(entry);
+    const designTemplate = options.designTemplate?.(entry);
+    return {
+      id: entry.id,
+      name: entry.name,
+      category: options.category?.(entry) ?? entry.category ?? 'Application',
+      kind: entry.kind,
+      source: options.identity?.(entry) ?? entry.source ?? 'consumer',
+      description: entry.purpose,
+      ...(entry.recommendation ? { recommendation: entry.recommendation } : {}),
+      uses: entry.uses ?? [],
+      demoSource: options.demoSource?.(entry) ?? entry.demoSource,
+      ...(componentSource ? { componentSource } : {}),
+      ...(designTemplate ? { designTemplate } : {}),
+      documentation: options.documentation?.(entry) ?? entry.documentation,
+    };
+  });
+}
+
+/** Project a validated consumer extension alongside Kerf's reference catalog. */
+export function projectConsumerCatalog(extension, kerfCatalog, options = {}) {
+  const failures = validateCatalogExtensionReferences(extension, kerfCatalog);
+  if (failures.length) throw new Error(failures.join('\n'));
+  const fill = (template, entry) =>
+    template ? substitute(template, entry, extension.package) : undefined;
+  const rows = projectCatalogEntries(extension.entries, {
+    identity: () => 'consumer',
+    category: () => options.category ?? 'Application',
+    componentSource: (entry) =>
+      entry.source ?? fill(options.sourceTemplate, entry),
+    demoSource: (entry) =>
+      entry.demoSource ??
+      fill(options.demoTemplate ?? 'ux-demo/demos/{id}.tsx', entry),
+    documentation: (entry) =>
+      entry.documentation ?? fill(options.documentationTemplate, entry),
+    designTemplate: (entry) => fill(options.designTemplate, entry),
+  });
+  for (const row of rows) {
+    if (!isRepositoryPath(row.demoSource))
+      throw new Error(`${row.id} requires a repository-relative demoSource`);
+    if (row.componentSource && !isRepositoryPath(row.componentSource))
+      throw new Error(`${row.id} has an invalid repository-relative source`);
+    if (!row.documentation)
+      throw new Error(
+        `${row.id} requires documentation or documentationTemplate`,
+      );
+  }
+  return rows;
+}

package/dist/anchored-surface.d.ts

@@ -0,0 +1,69 @@
+import { PopoverOptions, OverlayContent, OverlayHandle } from 'kerfjs/overlay';
+
+/** App-facing options for a non-modal, arbitrary-content help surface. */
+interface AnchoredSurfaceOptions extends Pick<PopoverOptions, 'placement' | 'align' | 'gap' | 'dismiss' | 'initialFocus' | 'onDismiss' | 'outsideIgnore' | 'container'> {
+    /** Accessible name for the non-modal dialog. */
+    label: string;
+    /**
+     * Gutter in px kept between the surface and the viewport edges when it is
+     * clamped horizontally and fitted vertically. Default `8`, the same gutter as
+     * the surface's maximum size.
+     */
+    viewportMargin?: number;
+    /**
+     * Where to append the surface. Default: inside the anchor's open modal
+     * dialog — a native `<dialog>`'s host slot, or a slot kerf creates in a
+     * `wa-dialog` / `wa-drawer` — so the surface stays interactive there;
+     * otherwise `document.body`. Pass an element only for a modal context kerf
+     * cannot resolve; an element inside an open modal closes the surface with it.
+     */
+    container?: Element;
+    /**
+     * Surface tone. `'default'` follows the anchor's color scheme. `'dark'` is
+     * the loud, inverse tone of a `ToolbarControlGroup` / `ToolbarText`
+     * `tone="dark"`, for a popup anchored to dark media chrome (a volume popup
+     * over a video preview): dark beside a light page and light beside a dark
+     * one, so the popup matches the control group that opened it. The surface
+     * takes the opposite of the anchor's color scheme, so it and every Kerf UI
+     * or Web Awesome component inside it resolve the same semantic
+     * `light-dark()` tokens to the other side: no new colors, no child
+     * overrides. While open it follows a live switch of that scheme (the OS
+     * preference, or an app theme class or attribute on an ancestor). Default
+     * `'default'`.
+     */
+    tone?: AnchoredSurfaceTone;
+}
+/** {@link AnchoredSurfaceOptions.tone}: follow the anchor's scheme, or invert it. */
+type AnchoredSurfaceTone = 'default' | 'dark';
+/** A viewport pointer location; `context` is the element under the pointer. */
+interface AnchoredSurfacePoint {
+    x: number;
+    y: number;
+    /**
+     * Pass the event target when opening from inside a modal dialog, native or
+     * Web Awesome (`wa-dialog`, `wa-drawer`). The dark tone also reads its
+     * color scheme from `context`, so a region with its own `color-scheme` is
+     * honored; without it the scheme is the modal scope's (or the page's).
+     */
+    context?: Element;
+}
+/**
+ * Open app-owned content beside an element. The surface owns its Kerf UI chrome;
+ * kerfjs/overlay owns positioning, top-layer/modal hosting, focus, and dismissal.
+ * The surface stays `viewportMargin` inside the viewport edges and fits its
+ * height to the room beside the anchor (the roomier side when neither holds it),
+ * scrolling its content; `--kui-anchored-surface-available-height` exposes that
+ * room to the content, updated as the page scrolls or resizes.
+ * The caller owns content, action policy, and calling `close()` when an action
+ * completes. `initialFocus` defaults to the first focusable descendant; set it
+ * to `false` for read-only help that should leave focus on its trigger.
+ */
+declare function openAnchoredSurface(anchor: Element, content: OverlayContent, options: AnchoredSurfaceOptions): OverlayHandle;
+/**
+ * Open the same surface at pointer coordinates. The temporary anchor has no
+ * layout or hit target. `context` keeps a surface opened inside a modal dialog
+ * in that dialog's interactive host slot; it is removed on close or failure.
+ */
+declare function openAnchoredSurfaceAt(point: AnchoredSurfacePoint, content: OverlayContent, options: AnchoredSurfaceOptions): OverlayHandle;
+
+export { type AnchoredSurfaceOptions, type AnchoredSurfacePoint, type AnchoredSurfaceTone, openAnchoredSurface, openAnchoredSurfaceAt };

package/dist/anchored-surface.js

@@ -0,0 +1,3 @@
+export { openAnchoredSurface, openAnchoredSurfaceAt } from './chunk-3WYREXW4.js';
+
+//# sourceMappingURL=anchored-surface.js.map

package/dist/anchored-surface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"anchored-surface.js"}

package/dist/app-tab.d.ts

@@ -1,4 +1,5 @@
 import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 type AppTabRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
@@ -7,15 +8,36 @@ type AppTabRootAttributes = Readonly<Record<`data-${string}`, string | undefined
     'data-selected'?: never;
     'data-tab-dragging'?: never;
     'data-tab-drop-position'?: never;
+    'data-attention'?: never;
+    'data-drop-target'?: never;
+    'data-name-overflow'?: never;
+    'data-pinned'?: never;
 }>;
+type AppTabPresentation = 'pill' | 'segmented' | 'icon-only';
+type AppTabSize = 'default' | 'compact';
+type AppTabNameOverflow = 'ellipsis' | 'visible';
 interface AppTabProps {
     id: string;
     name: string;
     selected?: boolean;
+    /** Emphasize the visible tab name with the attention color token. */
+    attention?: boolean;
+    /** Highlight this tab as the target of a drag over its content. */
+    dropTarget?: boolean;
+    /** Keep the leading tab visible within its TabBar tablist while peers scroll. */
+    pinned?: boolean;
     closable?: boolean;
     draggable?: boolean;
-    leading?: SafeHtml;
-    trailing?: SafeHtml;
+    leading?: KerfUiContent;
+    trailing?: KerfUiContent;
+    /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */
+    presentation?: AppTabPresentation;
+    /** Compact tabs use the 32px application-rail height. */
+    size?: AppTabSize;
+    /** Maximum visible label width in CSS pixels before ellipsis. */
+    labelMaxWidth?: number;
+    /** Keep the full name visible for an inline loading treatment. */
+    nameOverflow?: AppTabNameOverflow;
     /** Decorative dormant content for the close button. Must not contain interactive descendants. */
     closeIcon?: SafeHtml;
     selectAction?: string;
@@ -23,8 +45,21 @@ interface AppTabProps {
     className?: string;
     /** Render as an unanimated loading skeleton, disabling select/close and dragging. */
     placeholder?: boolean;
+    /**
+     * Named and still opening: the tab is known but its content is loading.
+     * Keeps `name` visible in the quiet text color and as the tab's accessible
+     * name, shows `trailing` (for example a `LoadingSpinner`), and marks the
+     * tab `aria-busy`. Unlike `placeholder` it stays selectable — the
+     * application shows placeholder content in its panel until loading
+     * completes — while close and dragging stay disabled. Same pill geometry
+     * as the live tab, so swapping it in place does not shift the bar.
+     * `placeholder` wins when both are set.
+     */
+    pending?: boolean;
     rootAttributes?: AppTabRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function AppTab({ id, name, selected, closable, draggable, leading, trailing, closeIcon, selectAction, closeAction, className, placeholder, rootAttributes, }: AppTabProps): SafeHtml;
+declare function AppTab({ id, name, selected, attention, dropTarget, pinned, closable, draggable, leading, trailing, presentation, size, labelMaxWidth, nameOverflow, closeIcon, selectAction, closeAction, className, placeholder, pending, rootAttributes, slot, }: AppTabProps): SafeHtml;
 
-export { AppTab, type AppTabProps };
+export { AppTab, type AppTabNameOverflow, type AppTabPresentation, type AppTabProps, type AppTabSize };

package/dist/app-tab.js

@@ -1,4 +1,5 @@
-export { AppTab } from './chunk-Y45PPBDV.js';
+export { AppTab } from './chunk-TGLUDQP2.js';
+
 
 
 

package/dist/badge.d.ts

@@ -0,0 +1,83 @@
+import { SafeHtml } from 'kerfjs';
+import { CssLength } from './css-values.js';
+import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
+
+/** @deprecated Use SemanticTone. */
+type BadgeTone = SemanticTone;
+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';
+/** Application `data-*` identity on the badge root; Badge-owned markers stay protected. */
+type BadgeRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-tone'?: never;
+    'data-appearance'?: never;
+    'data-shape'?: never;
+    'data-size'?: never;
+    'data-has-icon'?: never;
+    'data-truncate'?: never;
+}>;
+interface BadgeCommonProps {
+    tone?: SemanticTone;
+    /** Native tooltip text that explains the badge on hover. */
+    title?: string;
+    /** Safe `data-*` identity, such as a status band, on the badge root. */
+    rootAttributes?: BadgeRootAttributes;
+    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;
+    /** Decorative leading icon, normally an unsized LucideIcon, 4px before the text. */
+    icon?: SafeHtml;
+    appearance?: BadgeAppearance;
+    shape?: BadgeShape;
+    size?: BadgeSize;
+    /**
+     * Cap the badge's width and truncate longer text with an ellipsis, for
+     * app-supplied text such as a tag or category name. String and number
+     * content becomes the native `title` tooltip unless `title` is supplied, so
+     * the full text stays available on hover; SafeHtml content needs `title`.
+     */
+    maxWidth?: CssLength;
+    /**
+     * Accessible name that replaces the visible content when it is abbreviated
+     * or symbolic (`"82% confidence"` for `82`); the badge is then exposed as a
+     * labeled image.
+     */
+    label?: string;
+    /** Hide a repeated visual badge from assistive technology. */
+    ariaHidden?: boolean;
+}
+/** 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;
+    maxWidth?: never;
+} & (BadgeDotLabeled | BadgeDotDecorative);
+type BadgeProps = BadgeTextProps | BadgeDotProps;
+/** Compact, non-interactive metadata whose tone, emphasis, and shape are configured by props. */
+declare function Badge(props: BadgeProps): SafeHtml;
+
+export { Badge, type BadgeAppearance, type BadgeDotProps, type BadgeProps, type BadgeRootAttributes, type BadgeShape, type BadgeSize, type BadgeTextProps, type BadgeTone, SemanticTone };

package/dist/badge.js

@@ -0,0 +1,4 @@
+export { Badge } from './chunk-U6QYTMDB.js';
+
+
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"badge.js"}

package/dist/browser/anchored-surface.js

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

package/dist/browser/badge.js

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

package/dist/browser/catalog.js

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

package/dist/browser/chip.js

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

package/dist/browser/choice-chips.js

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

package/dist/browser/collapsible-panel.js

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

package/dist/browser/column-track.js

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

package/dist/browser/combobox.js

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

package/dist/browser/composer.js

@@ -0,0 +1,4 @@
+import '../styles/foundation.css';
+import '../styles/text.css';
+import '../styles/composer.css';
+export * from '../composer.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/content-swap.js

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

package/dist/browser/corner-status.js

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

package/dist/browser/edge-activity-indicator.js

@@ -0,0 +1,3 @@
+import '../styles/foundation.css';
+import '../styles/edge-activity-indicator.css';
+export * from '../edge-activity-indicator.js';

package/dist/browser/file-picker.js

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

package/dist/browser/framed-list.js

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

package/dist/browser/grid.js

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

package/dist/browser/icon-button.js

@@ -0,0 +1,4 @@
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
+import '../styles/icon-button.css';
+export * from '../icon-button.js';

package/dist/browser/icon-toggle-button.js

@@ -0,0 +1,4 @@
+import '../styles/foundation.css';
+import '../styles/lucide-icon.css';
+import '../styles/icon-toggle-button.css';
+export * from '../icon-toggle-button.js';

package/dist/browser/list-action-row.js

@@ -1,4 +1,6 @@
 import '../styles/foundation.css';
+import '../styles/popup-menu.css';
+import '../styles/loading-spinner.css';
 import '../styles/skeleton.css';
 import '../styles/list-action-row.css';
 export * from '../list-action-row.js';

package/dist/browser/list-header.js

@@ -1,6 +1,8 @@
 import '../styles/foundation.css';
+import '../styles/badge.css';
+import '../styles/skeleton.css';
 import '../styles/lucide-icon.css';
 import '../styles/disclosure-arrow.css';
-import '../styles/skeleton.css';
+import '../styles/text.css';
 import '../styles/list-header.css';
 export * from '../list-header.js';

package/dist/browser/list-item.js

@@ -1,4 +1,5 @@
 import '../styles/foundation.css';
+import '../styles/loading-spinner.css';
 import '../styles/skeleton.css';
 import '../styles/list-item.css';
 export * from '../list-item.js';

package/dist/browser/nav-stack.js

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

package/dist/browser/popup-menu.js

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

package/dist/browser/row.js

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

package/dist/browser/segmented-control.js

@@ -1,4 +1,3 @@
 import '../styles/foundation.css';
-import '../styles/skeleton.css';
 import '../styles/segmented-control.css';
 export * from '../segmented-control.js';

package/dist/browser/select.js

@@ -1,5 +1,6 @@
 import '../styles/foundation.css';
-import '../styles/lucide-icon.css';
+import '../styles/badge.css';
 import '../styles/skeleton.css';
+import '../styles/lucide-icon.css';
 import '../styles/select.css';
 export * from '../select.js';