@ixfx/components 0.10.7 → 0.11.0

package/docs-user/hyperbolic-tree.md

@@ -0,0 +1,282 @@
+# Hyperbolic Tree
+
+`<ixfx-hyperbolictree-list>` — a hyperbolic (Poincaré disk) browser over tree data. The focused node sits at the disk's center; its neighbourhood fans outward, shrinking toward the edge with tree-graph distance. Clicking a node re-centers the disk on it with an animated Möbius transform — the underlying layout never changes, only the projection.
+
+It implements the shared `TreeComponent` interface (see [`src/tree/README.md`](../tree/README.md)), so `TreeDataModel`, `IncrSearchTreeController`, and any `TreeComponent`-typed code work unmodified.
+
+---
+
+## Contents
+
+1. [Differences from `ixfx-tree-list`](#differences-from-ixfx-tree-list)
+2. [Data model](#data-model)
+3. [Properties](#properties)
+4. [Zoom vs. curvature](#zoom-vs-curvature)
+5. [Weighting](#weighting)
+6. [Targeting a specific node or edge](#targeting-a-specific-node-or-edge)
+7. [Custom edge rendering](#custom-edge-rendering)
+8. [Focus, selection, navigation](#focus-selection-navigation)
+9. [Events](#events)
+10. [Keyboard / pointer interaction](#keyboard--pointer-interaction)
+11. [CSS variables and parts](#css-variables-and-parts)
+12. [Types reference](#types-reference)
+
+---
+
+## Differences from `ixfx-tree-list`
+
+- **Expand/collapse is reinterpreted as focus change.** Every loaded node is always laid out; there's no expanded/collapsed state. `expand`/`collapse` still fire — when the new focus is a descendant/ancestor of the previous one — for interop with existing `TreeComponent` listeners.
+- **`interactionMode` drops `'checked'`** — no checkbox affordance at disk-edge node scale.
+- **`exclusivity` is accepted but ignored** — nothing is independently open.
+- **`filterPredicate` dims** non-matching nodes instead of hiding them.
+- Dragging empty disk space **pans** the view without changing focus or selection.
+- Drag-and-drop and `checkboxRenderer` are out of scope.
+
+## Data model
+
+Same `TreeNode` / `TreeItem` shapes as the rest of the tree family (see [`src/tree/README.md`](../tree/README.md#data-model)), including `root`, `model` (`TreeDataModel`), and `loadChildren` for lazy loading.
+
+```typescript
+el.root = {
+  item: { key: 'root', label: 'My Files' },
+  children: [
+    { item: { key: 'docs', label: 'Documents' }, children: [] },
+    { item: { key: 'img', label: 'Images', isLeaf: true } },
+  ],
+};
+```
+
+## Properties
+
+| Property (attribute) | Type | Default | Description |
+|---|---|---|---|
+| `root` | `TreeNode \| undefined` | `undefined` | Root node of the tree |
+| `model` | `TreeDataModel \| undefined` | `undefined` | Shared data model; takes precedence over `loadChildren` |
+| `loadChildren` | `LoadChildrenCallback \| undefined` | `undefined` | Callback for lazy child loading |
+| `interactionMode` (`interaction-mode`) | `'implicit' \| 'standard' \| 'manual'` | `'standard'` | Gesture mapping — see [`src/tree/README.md`](../tree/README.md#interactionmode-ixfx-tree-list--ixfx-miller-list) (`'checked'` is unsupported here) |
+| `selectionFilter` (`selection-filter`) | `'none' \| 'leaf' \| 'branch' \| 'all'` | `'all'` | Which node kinds can be selected |
+| `exclusivity` | `TreeExclusivity` | `'none'` | Accepted for interface compatibility, ignored |
+| `filterPredicate` | `TreeFilterPredicate \| undefined` | `undefined` | Non-matching nodes (and branches with no matching descendant) are dimmed, not hidden |
+| `maxRadius` (`max-radius`) | `number` | `4` | Tree-graph steps from the focus to lay out and render |
+| `nodeRadius` (`node-radius`) | `number` | `0.05` | Base node dot radius, as a fraction of the disk radius |
+| `minNodeRadius` (`min-node-radius`) | `number` | `0.015` | Nodes whose scaled radius falls below this render without a label |
+| `minWeightScale` (`min-weight-scale`) | `number` | `0.6` | Radius multiplier for a node with `weight` at the low end of the currently-visible range |
+| `maxWeightScale` (`max-weight-scale`) | `number` | `1.6` | Radius multiplier for a node with `weight` at the high end of the currently-visible range |
+| `zoom` | `number` | `1` | Post-layout SVG magnification, centered on the focus. See [Zoom vs. curvature](#zoom-vs-curvature) |
+| `curvature` | `number` | `1` | Hyperbolic distance placed between generations — how curved the space itself is. See [Zoom vs. curvature](#zoom-vs-curvature) |
+| `focusAnimationDuration` (`focus-animation-duration`) | `number` | `400` | Duration (ms) of the animated re-center on focus change; `0` snaps instantly. Respects `prefers-reduced-motion` |
+| `edgeRenderer` | `HyperbolicEdgeRenderer \| undefined` | `undefined` | Custom renderer for edges, in place of the default geodesic-arc path |
+| `disableKeyboardNavigation` (`disable-keyboard-navigation`) | `boolean` | `false` | Disables the keyboard handlers below |
+| `searchModes` (`search-modes`) | `string \| undefined` | `undefined` | Space-separated subset of `navigate select filter` — see [`src/tree/README.md`](../tree/README.md#incremental-search) |
+| `selectedNode` | `TreeNode \| undefined` | `undefined` | Primary (most recent) selected node |
+| `selectedNodes` | `ReadonlySet<TreeNode>` | `{}` | Full selection set (read-only) |
+| `focusedNode` | `TreeNode \| undefined` (read-only) | true root | The node currently centered on the disk. Pure view-state — `root` is never mutated by focus changes |
+
+---
+
+## Zoom vs. curvature
+
+Two independent knobs affect how much of the tree is visible and how it's magnified — neither mutates `root`:
+
+| | What it changes | Effect |
+|---|---|---|
+| `zoom` | A post-layout SVG `scale()`, applied after everything else | Uniformly magnifies/shrinks the rendered disk around the focus. Node positions relative to each other are unchanged — it's a camera zoom, not a re-layout. |
+| `curvature` | The hyperbolic distance placed between each generation (default `1`, matching the standard Poincaré-disk layout) | Raising it pushes each generation further out in hyperbolic terms, so the disk's own `tanh` compression crowds distant generations toward the boundary faster — a stronger fisheye. This *reshapes* the layout (relative sizes/spacing of near vs. far nodes change), which is why increasing it reads as "zooming in" on the focus even at `zoom: 1`. Lowering it spreads generations out more evenly, flattening the view toward a Euclidean-feeling layout. |
+| `maxRadius` | How many tree-graph rings are laid out at all | Independent of both — a window over the tree, not a projection change. |
+
+```html
+<ixfx-hyperbolictree-list zoom="1.5" curvature="1.8"></ixfx-hyperbolictree-list>
+```
+
+## Weighting
+
+Set `TreeItem.weight` (a plain `number`, any range) on nodes to influence their visuals:
+
+```typescript
+el.root = {
+  item: { key: 'root', label: 'Root', weight: 10 },
+  children: [
+    { item: { key: 'big', label: 'Big folder', weight: 8 } },
+    { item: { key: 'small', label: 'Small file', weight: 1 } },
+  ],
+};
+```
+
+Weight is normalized to `0..1` **against whichever nodes are currently visible** (the ring window `maxRadius` selects) — not the whole tree — and exposed as CSS custom properties:
+
+| Custom property | Where | Value |
+|---|---|---|
+| `--node-weight` | Each node's `<g part="node">` | Normalized `0..1` (defaults to `0.5` if the node, or the whole visible set, has no weight) |
+| `--node-weight-raw` | Each node's `<g part="node">` | The raw `item.weight` value, when set (otherwise unset) |
+| `--edge-weight` | Each edge's `<path part="edge">` | Average of the two endpoint nodes' `--node-weight` |
+
+By default this:
+
+- Scales node radius between `minWeightScale`× and `maxWeightScale`× (default `0.6`–`1.6`).
+- Tints node fill toward `--accent` as weight increases (`color-mix` on `--node-weight`).
+- Thickens edge strokes as `--edge-weight` increases.
+
+Override any of it with plain CSS — `::part(dot)`, `::part(edge)`, or the custom properties themselves:
+
+```css
+ixfx-hyperbolictree-list::part(dot) {
+  fill: color-mix(in oklch, gray, red calc(var(--node-weight, 0.5) * 100%));
+}
+```
+
+> **Gotcha:** because normalization is per-*visible-window*, a node whose weight is small relative to something merely nearby in the tree (e.g. a giant sibling subtree, or the root itself, both often in view) can still normalize close to `0` even if it's "big" in absolute terms. If your weight metric has a wide dynamic range (e.g. raw descendant counts across a deep tree), compress it — `Math.log2(x + 1)` rather than `x` — before assigning it to `item.weight`, or the visible spread of sizes/colours will collapse toward one end.
+
+## Targeting a specific node or edge
+
+Each node and edge exports extra `part` tokens keyed by node identity, so a single one can be styled from outside the shadow root:
+
+| Element | Exported parts |
+|---|---|
+| Node `<g>` | `node`, `node-<key>` |
+| Edge `<path>` | `edge`, `edge-to-<key>`, `edge-from-<key>` |
+
+(Non-identifier characters in a key are replaced with `-` to keep the token CSS-selectable.)
+
+```css
+/* Give the edge leading to "library" a distinct dashed line. */
+ixfx-hyperbolictree-list::part(edge-to-library) {
+  stroke: var(--accent);
+  stroke-dasharray: 8 4;
+}
+```
+
+A plain attribute selector — `[data-to="library"]` — **cannot** reach across the shadow boundary from page-level CSS; only `::part()` can. Each edge does carry `data-from`/`data-to` attributes (and each node a `data-key` attribute), but those are for JS introspection (`el.shadowRoot.querySelectorAll(...)`), not CSS.
+
+## Custom edge rendering
+
+For styling `::part()`/CSS can't express (arbitrary shapes, gradients per edge, etc.), replace the default geodesic-arc path entirely:
+
+```typescript
+import { svg } from 'lit';
+import type { HyperbolicEdgeRenderContext } from '@ixfx/components';
+
+el.edgeRenderer = ({ edge, fromNode, toNode }: HyperbolicEdgeRenderContext) => {
+  // Authored against the layout's native -1..1 disk coordinates —
+  // the component scales this up to match its internal render scale.
+  return svg`<line x1=${edge.from.x} y1=${edge.from.y} x2=${edge.to.x} y2=${edge.to.y} stroke="red" />`;
+};
+```
+
+`edge.weightNormalized` is available on `edge` for weight-driven custom rendering.
+
+## Focus, selection, navigation
+
+```typescript
+// Re-center the disk on a node (animated Möbius transform; fires `focus`, plus
+// `expand`/`collapse` when relevant)
+el.focusOn(node);
+
+// Selection — same contract as ixfx-tree-list
+el.select(node);
+el.deselect(node);
+el.clearSelection();
+el.selectAll();
+el.deselectAll();
+
+// Navigate by key path or predicate — focuses + selects the match
+el.navigateTo(['root', 'documents', 'readme.md']);
+el.navigateToNode(n => n.item.key === 'readme.md');
+
+// Snapshot of every currently laid-out node (within maxRadius of the focus),
+// including the focused node itself, in ring-major order
+const nodes = el.getNodes(); // ReadonlyArray<{ node: TreeNode; depth: number }>
+```
+
+## Events
+
+All events **bubble** and are **composed**.
+
+| Event | Detail type | When fired |
+|---|---|---|
+| `focus` | `HyperbolicFocusDetail` — `{ node: TreeNode; previous: TreeNode \| undefined }` | The focused (centered) node changes |
+| `select` | `TreeSelectDetail` | Selection set changes |
+| `tickle` | `TreeTickleDetail` | An item enters cursor focus (pointer hover or keyboard cursor) |
+| `activate` | `TreeActivateDetail` | Enter key or double-click |
+| `item-click` | `{ node: TreeNode; depth: number }` | Raw pointer click on any item |
+| `item-dblclick` | `TreeItemDblClickDetail` | Double-click (also fires `activate`) |
+| `expand` | `{ node: TreeNode; depth: number }` | New focus is a descendant of the previous one |
+| `collapse` | `{ node: TreeNode; depth: number }` | New focus is an ancestor of the previous one |
+
+## Keyboard / pointer interaction
+
+The element must be focused before keyboard navigation works (`disableKeyboardNavigation` turns it off entirely).
+
+| Key | Action |
+|---|---|
+| `Arrow Up` | Focus the child closest to screen-"up" |
+| `Arrow Down` | Focus the parent |
+| `Arrow Left` / `Arrow Right` | Cycle siblings of the focused node |
+| `Enter` | Select (unless `interactionMode="manual"`) and activate the focused node |
+| `Escape` | Return focus to the root |
+
+Pointer: click a node to focus (and select, per `interactionMode`) it; drag empty disk space to pan.
+
+## CSS variables and parts
+
+| Variable | Default | Description |
+|---|---|---|
+| `--hyperbolictree-node-color` | `var(--surface-4)` | Base node fill |
+| `--hyperbolictree-node-text` | `var(--surface-3-text)` | Label text colour |
+| `--hyperbolictree-edge-color` | `var(--surface-6)` | Edge stroke colour |
+| `--hyperbolictree-boundary-color` | `var(--border-subtle)` | Disk boundary stroke colour |
+| `--hyperbolictree-font-size` | `25px` | Label font size |
+| `--node-weight` / `--node-weight-raw` | — | See [Weighting](#weighting) |
+| `--edge-weight` | — | See [Weighting](#weighting) |
+
+| Part | Element | Notes |
+|---|---|---|
+| `boundary` | Disk-edge circle | |
+| `edges` / `nodes` | Group wrappers | |
+| `edge`, `edge-to-<key>`, `edge-from-<key>` | Each edge `<path>` | See [Targeting a specific node or edge](#targeting-a-specific-node-or-edge) |
+| `node`, `node-<key>` | Each node `<g>` | |
+| `hit` | Invisible larger hit-target circle per node | |
+| `dot` | The visible node circle | |
+| `label` | Node label `<text>` | |
+
+---
+
+## Types reference
+
+```typescript
+type HyperbolicInteractionMode = 'implicit' | 'standard' | 'manual';
+
+type HyperbolicFocusDetail = {
+  readonly node: TreeNode;
+  readonly previous: TreeNode | undefined;
+};
+
+type HyperbolicEdgeRenderContext = {
+  readonly edge: HyperbolicLayoutEdge;
+  readonly fromNode: TreeNode;
+  readonly toNode: TreeNode;
+};
+
+type HyperbolicEdgeRenderer = (context: HyperbolicEdgeRenderContext) => unknown;
+
+type HyperbolicLayoutNode = {
+  readonly node: TreeNode;
+  readonly key: string;
+  readonly depth: number;        // absolute depth from the true root
+  readonly ring: number;         // tree-graph steps from the focus (0 = focus itself)
+  readonly parentKey: string | undefined;
+  readonly position: Point;      // Poincaré-disk position, focus projected to the origin
+  readonly angularShare: number; // angular width (radians) allocated by the parent's partition
+  readonly weight: number | undefined;
+  readonly weightNormalized: number; // 0..1, normalized across the visible node set
+};
+
+type HyperbolicLayoutEdge = {
+  readonly fromKey: string;
+  readonly toKey: string;
+  readonly from: Point;
+  readonly to: Point;
+  readonly weightNormalized: number; // average of the two endpoints'
+};
+```
+
+See [`src/tree/README.md`](../tree/README.md) for `TreeNode`, `TreeItem` (including `weight`), `TreeDataModel`, `TreeComponent`, and incremental search — all shared with the rest of the tree family.

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.10.7",
-  "generated": "2026-09-17T10:14:04.576Z",
+  "version": "0.11.0",
+  "generated": "2026-09-19T12:04:31.116Z",
   "components": [
     {
       "name": "ac-text",
@@ -83,6 +83,11 @@
       "summary": "A meta-component that renders a typed item list using any sub-component you supply. Items can be displayed in a single sub-component (_ungrouped_ mode) or split into labelled groups, each with its own",
       "path": "docs-user/grouped-item-lister.md"
     },
+    {
+      "name": "hyperbolic-tree",
+      "summary": "`<ixfx-hyperbolictree-list>` — a hyperbolic (Poincaré disk) browser over tree data. The focused node sits at the disk's center; its neighbourhood fans outward, shrinking toward the edge with tree-grap",
+      "path": "docs-user/hyperbolic-tree.md"
+    },
     {
       "name": "icons",
       "summary": "A centralized SVG icon system for `@ixfx/components`. Icons are stored by name, can be overridden globally, and all components that use a given icon re-render automatically when it changes.",

package/docs-user/llms.txt

@@ -27,6 +27,7 @@ import '@ixfx/components/data-grid';
 - [form](docs-user/form.md): Primitives for typical form layout with responsive label positioning and data binding.
 - [grid-list](docs-user/grid-list.md): A virtualised grid of items — thumbnails, cards, or arbitrary slotted markup —
 - [grouped-item-lister](docs-user/grouped-item-lister.md): A meta-component that renders a typed item list using any sub-component you supply. Items can be displayed in a single sub-component (_ungrouped_ mode) or split into labelled groups, each with its own
+- [hyperbolic-tree](docs-user/hyperbolic-tree.md): `<ixfx-hyperbolictree-list>` — a hyperbolic (Poincaré disk) browser over tree data. The focused node sits at the disk's center; its neighbourhood fans outward, shrinking toward the edge with tree-grap
 - [icons](docs-user/icons.md): A centralized SVG icon system for `@ixfx/components`. Icons are stored by name, can be overridden globally, and all components that use a given icon re-render automatically when it changes.
 - [incr-search](docs-user/incr-search.md): Utilities for incremental (type-ahead) search over data collections or DOM-backed lists.
 - [labelled-radial-input](docs-user/labelled-radial-input.md): A composite radial input that pairs an editable label (`ixfx-editable-number`) with a rotary dial (`ixfx-radial-input`). The two controls are always in sync — turning the dial updates the number, and 

package/docs-user/tree.md

@@ -34,6 +34,7 @@ type TreeItem = {
   icon?: string;      // Icon name (passed to <ixfx-icon>)
   tooltip?: string;   // Tooltip content
   value?: string;     // Optional machine-readable value
+  weight?: number;    // Relative importance/magnitude; only ixfx-hyperbolictree-list uses it today
 };
 
 type TreeNode = {

package/llms.txt

@@ -27,6 +27,7 @@ import '@ixfx/components/data-grid';
 - [form](docs-user/form.md): Primitives for typical form layout with responsive label positioning and data binding.
 - [grid-list](docs-user/grid-list.md): A virtualised grid of items — thumbnails, cards, or arbitrary slotted markup —
 - [grouped-item-lister](docs-user/grouped-item-lister.md): A meta-component that renders a typed item list using any sub-component you supply. Items can be displayed in a single sub-component (_ungrouped_ mode) or split into labelled groups, each with its own
+- [hyperbolic-tree](docs-user/hyperbolic-tree.md): `<ixfx-hyperbolictree-list>` — a hyperbolic (Poincaré disk) browser over tree data. The focused node sits at the disk's center; its neighbourhood fans outward, shrinking toward the edge with tree-grap
 - [icons](docs-user/icons.md): A centralized SVG icon system for `@ixfx/components`. Icons are stored by name, can be overridden globally, and all components that use a given icon re-render automatically when it changes.
 - [incr-search](docs-user/incr-search.md): Utilities for incremental (type-ahead) search over data collections or DOM-backed lists.
 - [labelled-radial-input](docs-user/labelled-radial-input.md): A composite radial input that pairs an editable label (`ixfx-editable-number`) with a rotary dial (`ixfx-radial-input`). The two controls are always in sync — turning the dial updates the number, and 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.10.7",
+  "version": "0.11.0",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",
@@ -16,18 +16,174 @@
       "types": "./bundle/index.d.ts",
       "import": "./bundle/index.js"
     },
+    "./ac-text": {
+      "types": "./dist/ac-text.d.ts",
+      "import": "./dist/ac-text.js"
+    },
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox.d.ts",
+      "import": "./dist/checkbox.js"
+    },
+    "./colour-picker": {
+      "types": "./dist/colour-picker.d.ts",
+      "import": "./dist/colour-picker.js"
+    },
+    "./crumbs": {
+      "types": "./dist/crumbs.d.ts",
+      "import": "./dist/crumbs.js"
+    },
+    "./data-display": {
+      "types": "./dist/data-display.d.ts",
+      "import": "./dist/data-display.js"
+    },
+    "./editable-label": {
+      "types": "./dist/editable-label.d.ts",
+      "import": "./dist/editable-label.js"
+    },
+    "./hex": {
+      "types": "./dist/hex.d.ts",
+      "import": "./dist/hex.js"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.js"
+    },
     "./incr-search": {
       "types": "./dist/incr-search.d.ts",
       "import": "./dist/incr-search.js"
     },
-    "./grid-list": {
-      "types": "./dist/grid-list.d.ts",
-      "import": "./dist/grid-list.js"
+    "./labelled-radial-input": {
+      "types": "./dist/labelled-radial-input.d.ts",
+      "import": "./dist/labelled-radial-input.js"
+    },
+    "./labelled-range-input": {
+      "types": "./dist/labelled-range-input.d.ts",
+      "import": "./dist/labelled-range-input.js"
+    },
+    "./labelled-slider-input": {
+      "types": "./dist/labelled-slider-input.d.ts",
+      "import": "./dist/labelled-slider-input.js"
+    },
+    "./led": {
+      "types": "./dist/led.d.ts",
+      "import": "./dist/led.js"
+    },
+    "./menu": {
+      "types": "./dist/menu.d.ts",
+      "import": "./dist/menu.js"
+    },
+    "./miller": {
+      "types": "./dist/miller.d.ts",
+      "import": "./dist/miller.js"
+    },
+    "./narrowed-text": {
+      "types": "./dist/narrowed-text.d.ts",
+      "import": "./dist/narrowed-text.js"
+    },
+    "./panel": {
+      "types": "./dist/panel.d.ts",
+      "import": "./dist/panel.js"
+    },
+    "./plots": {
+      "types": "./dist/plots.d.ts",
+      "import": "./dist/plots.js"
+    },
+    "./polar-pad": {
+      "types": "./dist/polar-pad.d.ts",
+      "import": "./dist/polar-pad.js"
+    },
+    "./radial-input": {
+      "types": "./dist/radial-input.d.ts",
+      "import": "./dist/radial-input.js"
+    },
+    "./range-input": {
+      "types": "./dist/range-input.d.ts",
+      "import": "./dist/range-input.js"
+    },
+    "./range": {
+      "types": "./dist/range.d.ts",
+      "import": "./dist/range.js"
+    },
+    "./select-horiz": {
+      "types": "./dist/select-horiz.d.ts",
+      "import": "./dist/select-horiz.js"
+    },
+    "./slider-input": {
+      "types": "./dist/slider-input.d.ts",
+      "import": "./dist/slider-input.js"
+    },
+    "./snap-container": {
+      "types": "./dist/snap-container.d.ts",
+      "import": "./dist/snap-container.js"
+    },
+    "./split-layout": {
+      "types": "./dist/split-layout.d.ts",
+      "import": "./dist/split-layout.js"
+    },
+    "./swipe": {
+      "types": "./dist/swipe.d.ts",
+      "import": "./dist/swipe.js"
+    },
+    "./tabs": {
+      "types": "./dist/tabs.d.ts",
+      "import": "./dist/tabs.js"
+    },
+    "./timeline": {
+      "types": "./dist/timeline.d.ts",
+      "import": "./dist/timeline.js"
+    },
+    "./titlebar": {
+      "types": "./dist/titlebar.d.ts",
+      "import": "./dist/titlebar.js"
+    },
+    "./tree": {
+      "types": "./dist/tree.d.ts",
+      "import": "./dist/tree.js"
+    },
+    "./xy-pad": {
+      "types": "./dist/xy-pad.d.ts",
+      "import": "./dist/xy-pad.js"
+    },
+    "./ac-token": {
+      "types": "./dist/ac-token.d.ts",
+      "import": "./dist/ac-token.js"
+    },
+    "./data-grid": {
+      "types": "./dist/data-grid.d.ts",
+      "import": "./dist/data-grid.js"
     },
     "./detail-list": {
       "types": "./dist/detail-list.d.ts",
       "import": "./dist/detail-list.js"
     },
+    "./grid-list": {
+      "types": "./dist/grid-list.d.ts",
+      "import": "./dist/grid-list.js"
+    },
+    "./form": {
+      "types": "./dist/form.d.ts",
+      "import": "./dist/form.js"
+    },
+    "./grouped-item-lister": {
+      "types": "./dist/grouped-item-lister.d.ts",
+      "import": "./dist/grouped-item-lister.js"
+    },
+    "./notifier": {
+      "types": "./dist/notifier.d.ts",
+      "import": "./dist/notifier.js"
+    },
+    "./snackbar": {
+      "types": "./dist/snackbar.d.ts",
+      "import": "./dist/snackbar.js"
+    },
+    "./transitory-label": {
+      "types": "./dist/transitory-label.d.ts",
+      "import": "./dist/transitory-label.js"
+    },
     "./vertical-list": {
       "types": "./dist/vertical-list.d.ts",
       "import": "./dist/vertical-list.js"