@threadlabs/looma 0.12.3 → 0.12.5

package/editor/icons.d.ts

@@ -6,7 +6,9 @@ export declare const LOOMA_ICONS: {
     'align-right': IconNode;
     'arrow-left': IconNode;
     bold: IconNode;
+    'book-user': IconNode;
     braces: IconNode;
+    calculator: IconNode;
     'circle-check': IconNode;
     'circle-x': IconNode;
     'chevron-down': IconNode;
@@ -14,6 +16,7 @@ export declare const LOOMA_ICONS: {
     'chevron-right': IconNode;
     'code-xml': IconNode;
     columns: IconNode;
+    'credit-card': IconNode;
     ellipsis: IconNode;
     eraser: IconNode;
     'file-text': IconNode;
@@ -27,6 +30,7 @@ export declare const LOOMA_ICONS: {
     image: IconNode;
     info: IconNode;
     italic: IconNode;
+    'layout-dashboard': IconNode;
     list: IconNode;
     'list-ordered': IconNode;
     'list-todo': IconNode;
@@ -42,14 +46,18 @@ export declare const LOOMA_ICONS: {
     pilcrow: IconNode;
     plus: IconNode;
     quote: IconNode;
+    receipt: IconNode;
     redo: IconNode;
     rows: IconNode;
+    settings: IconNode;
     split: IconNode;
     strikethrough: IconNode;
     table: IconNode;
     trash: IconNode;
     'triangle-alert': IconNode;
+    truck: IconNode;
     underline: IconNode;
+    users: IconNode;
     undo: IconNode;
 };
 /** Stable key selecting an icon from Looma's shipped interaction vocabulary. */

package/editor/index.js

@@ -1,7 +1,7 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS } from "./chunks/table-backgrounds.js";
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
 import { A as LOOMA_ACTIVE_BLOCK_CLASS, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, M as LoomaActiveBlock, N as LoomaActiveBlockPluginKey, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, k as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "./chunks/extensions.js";
-import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bold, Braces, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleX, CodeXml, Columns3, Ellipsis, Eraser, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, Image, Info, Italic, List, ListOrdered, ListTodo, LoaderCircle, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pilcrow, Plus, Quote, Redo2, Rows3, Split, Strikethrough, Table2, Trash2, TriangleAlert, Underline, Undo2 } from "lucide";
+import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bold, BookUser, Braces, Calculator, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleX, CodeXml, Columns3, CreditCard, Ellipsis, Eraser, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, Image, Info, Italic, LayoutDashboard, List, ListOrdered, ListTodo, LoaderCircle, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Settings, Split, Strikethrough, Table2, Trash2, TriangleAlert, Truck, Underline, Undo2, Users } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
 var LOOMA_ICONS = {
@@ -10,7 +10,9 @@ var LOOMA_ICONS = {
 	"align-right": AlignRight,
 	"arrow-left": ArrowLeft,
 	bold: Bold,
+	"book-user": BookUser,
 	braces: Braces,
+	calculator: Calculator,
 	"circle-check": CircleCheck,
 	"circle-x": CircleX,
 	"chevron-down": ChevronDown,
@@ -18,6 +20,7 @@ var LOOMA_ICONS = {
 	"chevron-right": ChevronRight,
 	"code-xml": CodeXml,
 	columns: Columns3,
+	"credit-card": CreditCard,
 	ellipsis: Ellipsis,
 	eraser: Eraser,
 	"file-text": FileText,
@@ -31,6 +34,7 @@ var LOOMA_ICONS = {
 	image: Image,
 	info: Info,
 	italic: Italic,
+	"layout-dashboard": LayoutDashboard,
 	list: List,
 	"list-ordered": ListOrdered,
 	"list-todo": ListTodo,
@@ -46,14 +50,18 @@ var LOOMA_ICONS = {
 	pilcrow: Pilcrow,
 	plus: Plus,
 	quote: Quote,
+	receipt: Receipt,
 	redo: Redo2,
 	rows: Rows3,
+	settings: Settings,
 	split: Split,
 	strikethrough: Strikethrough,
 	table: Table2,
 	trash: Trash2,
 	"triangle-alert": TriangleAlert,
+	truck: Truck,
 	underline: Underline,
+	users: Users,
 	undo: Undo2
 };
 function serializeAttributes(attributes) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.12.3",
+  "version": "0.12.5",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -77,7 +77,7 @@
     "./*.css"
   ],
   "dependencies": {
-    "@nextwebwg/html-next": "^1.0.0-alpha.5",
+    "@nextwebwg/html-next": "1.0.0-alpha.5",
     "lowlight": "^3.3.0",
     "markdown-it": "14.3.1",
     "lucide": "~0.554.0"

package/styles/ui-nav-item.css

@@ -0,0 +1,141 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-nav-item"]) to ([data-component], [data-slotted]) {
+/* One destination in a side or rail navigation: an icon to find it by (leading), its name (the
+       default slot), and an optional line under it (description), such as the record a section
+       belongs to. Label and description are one line each and end in an ellipsis, so every item in a
+       navigation has the same height and the rail never grows sideways. */
+    :scope {
+      --_indicator-width: var(--ui-nav-item-indicator-width, 3px);
+      --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-3);
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size, 2.5rem);
+      margin: 0;
+      padding-block: var(--ui-space-2);
+      padding-inline: var(--ui-space-3);
+      border: 0;
+      border-radius: var(--ui-radius-md);
+      background: transparent;
+      color: var(--ui-text-secondary);
+      font: inherit;
+      font-weight: var(--ui-font-medium);
+      text-align: start;
+      text-decoration: none;
+      cursor: pointer;
+      appearance: none;
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :scope:hover:not([aria-current]) {
+      background: var(--ui-surface-hover);
+      color: var(--ui-text-primary);
+    }
+
+    /* The ring is an outline, drawn inside the item: forced colors keep an outline where they drop a
+       box shadow, and a scrolling rail cannot clip a ring that stays within the item. */
+    :scope:focus-visible {
+      outline: 2px solid var(--ui-focus-ring);
+      outline-offset: -2px;
+    }
+
+    :scope[aria-current] {
+      background: var(--ui-nav-item-current-surface, var(--ui-accent-soft));
+      color: var(--ui-accent-subtle-text, var(--ui-text-primary));
+      font-weight: var(--ui-font-semibold);
+    }
+
+    /* The bar on the start edge is a border, not a fill: forced colors replace backgrounds but keep a
+       border, so the current item stays marked in high contrast. Logical edges mirror it in a
+       right-to-left page. */
+    .indicator {
+      position: absolute;
+      inset-block: var(--ui-space-2);
+      inset-inline-start: 0;
+      display: none;
+      border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
+      border-radius: var(--ui-radius-round);
+    }
+
+    :scope[aria-current] .indicator {
+      display: block;
+    }
+
+    @media (forced-colors: active) {
+      .indicator {
+        border-inline-start-color: Highlight;
+      }
+    }
+
+    .leading {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      color: inherit;
+      font-size: var(--ui-font-size-lg);
+    }
+
+    .content {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: var(--ui-space-0-5, 2px);
+      min-inline-size: 0;
+    }
+
+    .label,
+    .description {
+      display: block;
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .label {
+      font-size: var(--ui-font-size-md);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    .description {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-normal);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    /* An unused region takes no space. */
+    .leading:empty,
+    .description:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-nav-item"]) to ([data-component]) {
+/* One destination in a side or rail navigation: an icon to find it by (leading), its name (the
+       default slot), and an optional line under it (description), such as the record a section
+       belongs to. Label and description are one line each and end in an ellipsis, so every item in a
+       navigation has the same height and the rail never grows sideways. */
+
+    /* The ring is an outline, drawn inside the item: forced colors keep an outline where they drop a
+       box shadow, and a scrolling rail cannot clip a ring that stays within the item. */
+
+    /* The bar on the start edge is a border, not a fill: forced colors replace backgrounds but keep a
+       border, so the current item stays marked in high contrast. Logical edges mirror it in a
+       right-to-left page. */
+
+    @media (forced-colors: active) {
+    }
+
+    /* An unused region takes no space. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/vanilla/UiIcon.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-icon/ui-icon.js";
 import "../styles/ui-icon.css";
 
-const definition = {...{"contract":{"tag":"ui-icon","props":{"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"},{"kind":"literal","name":"focusable","value":"false"}],"children":[{"kind":"element","name":"g","attributes":[],"children":[{"kind":"element","name":"path","attributes":[{"kind":"attribute","name":"d","expression":"shape.d","expressionPlan":{"source":"shape.d","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"d"},"dependencies":["shape.d"]}}],"children":[],"flow":{"kind":"if","test":"shape.tag = 'path'","testPlan":{"source":"shape.tag = 'path'","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"tag"},"right":{"kind":"literal","value":"path"}},"dependencies":["shape.tag"]}}},{"kind":"element","name":"circle","attributes":[{"kind":"attribute","name":"cx","expression":"shape.cx","expressionPlan":{"source":"shape.cx","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"cx"},"dependencies":["shape.cx"]}},{"kind":"attribute","name":"cy","expression":"shape.cy","expressionPlan":{"source":"shape.cy","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"cy"},"dependencies":["shape.cy"]}},{"kind":"attribute","name":"r","expression":"shape.r","expressionPlan":{"source":"shape.r","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"r"},"dependencies":["shape.r"]}}],"children":[],"flow":{"kind":"if","test":"shape.tag = 'circle'","testPlan":{"source":"shape.tag = 'circle'","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"tag"},"right":{"kind":"literal","value":"circle"}},"dependencies":["shape.tag"]}}},{"kind":"element","name":"rect","attributes":[{"kind":"attribute","name":"x","expression":"shape.x","expressionPlan":{"source":"shape.x","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"x"},"dependencies":["shape.x"]}},{"kind":"attribute","name":"y","expression":"shape.y","expressionPlan":{"source":"shape.y","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"y"},"dependencies":["shape.y"]}},{"kind":"attribute","name":"width","expression":"shape.width","expressionPlan":{"source":"shape.width","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"width"},"dependencies":["shape.width"]}},{"kind":"attribute","name":"height","expression":"shape.height","expressionPlan":{"source":"shape.height","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"height"},"dependencies":["shape.height"]}},{"kind":"attribute","name":"rx","expression":"shape.rx","expressionPlan":{"source":"shape.rx","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"rx"},"dependencies":["shape.rx"]}}],"children":[],"flow":{"kind":"if","test":"shape.tag = 'rect'","testPlan":{"source":"shape.tag = 'rect'","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"tag"},"right":{"kind":"literal","value":"rect"}},"dependencies":["shape.tag"]}}}],"flow":{"kind":"each","item":"shape","list":"shapes","listPlan":{"source":"shapes","ast":{"kind":"id","name":"shapes"},"dependencies":["shapes"]}}}]}]},"declarations":[{"kind":"state","name":"shapes","type":"list(object({ tag: path | circle | rect, d?: string, cx?: string, cy?: string, r?: string, x?: string, y?: string, width?: string, height?: string, rx?: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-icon","props":{"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"},{"kind":"literal","name":"focusable","value":"false"}],"children":[{"kind":"element","name":"g","attributes":[],"children":[{"kind":"element","name":"path","attributes":[{"kind":"attribute","name":"d","expression":"shape.d","expressionPlan":{"source":"shape.d","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"d"},"dependencies":["shape.d"]}}],"children":[],"flow":{"kind":"if","test":"shape.tag = 'path'","testPlan":{"source":"shape.tag = 'path'","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"tag"},"right":{"kind":"literal","value":"path"}},"dependencies":["shape.tag"]}}},{"kind":"element","name":"circle","attributes":[{"kind":"attribute","name":"cx","expression":"shape.cx","expressionPlan":{"source":"shape.cx","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"cx"},"dependencies":["shape.cx"]}},{"kind":"attribute","name":"cy","expression":"shape.cy","expressionPlan":{"source":"shape.cy","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"cy"},"dependencies":["shape.cy"]}},{"kind":"attribute","name":"r","expression":"shape.r","expressionPlan":{"source":"shape.r","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"r"},"dependencies":["shape.r"]}}],"children":[],"flow":{"kind":"if","test":"shape.tag = 'circle'","testPlan":{"source":"shape.tag = 'circle'","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"tag"},"right":{"kind":"literal","value":"circle"}},"dependencies":["shape.tag"]}}},{"kind":"element","name":"rect","attributes":[{"kind":"attribute","name":"x","expression":"shape.x","expressionPlan":{"source":"shape.x","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"x"},"dependencies":["shape.x"]}},{"kind":"attribute","name":"y","expression":"shape.y","expressionPlan":{"source":"shape.y","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"y"},"dependencies":["shape.y"]}},{"kind":"attribute","name":"width","expression":"shape.width","expressionPlan":{"source":"shape.width","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"width"},"dependencies":["shape.width"]}},{"kind":"attribute","name":"height","expression":"shape.height","expressionPlan":{"source":"shape.height","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"height"},"dependencies":["shape.height"]}},{"kind":"attribute","name":"rx","expression":"shape.rx","expressionPlan":{"source":"shape.rx","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"rx"},"dependencies":["shape.rx"]}}],"children":[],"flow":{"kind":"if","test":"shape.tag = 'rect'","testPlan":{"source":"shape.tag = 'rect'","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"tag"},"right":{"kind":"literal","value":"rect"}},"dependencies":["shape.tag"]}}},{"kind":"element","name":"line","attributes":[{"kind":"attribute","name":"x1","expression":"shape.x1","expressionPlan":{"source":"shape.x1","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"x1"},"dependencies":["shape.x1"]}},{"kind":"attribute","name":"x2","expression":"shape.x2","expressionPlan":{"source":"shape.x2","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"x2"},"dependencies":["shape.x2"]}},{"kind":"attribute","name":"y1","expression":"shape.y1","expressionPlan":{"source":"shape.y1","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"y1"},"dependencies":["shape.y1"]}},{"kind":"attribute","name":"y2","expression":"shape.y2","expressionPlan":{"source":"shape.y2","ast":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"y2"},"dependencies":["shape.y2"]}}],"children":[],"flow":{"kind":"if","test":"shape.tag = 'line'","testPlan":{"source":"shape.tag = 'line'","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"shape"},"key":"tag"},"right":{"kind":"literal","value":"line"}},"dependencies":["shape.tag"]}}}],"flow":{"kind":"each","item":"shape","list":"shapes","listPlan":{"source":"shapes","ast":{"kind":"id","name":"shapes"},"dependencies":["shapes"]}}}]}]},"declarations":[{"kind":"state","name":"shapes","type":"list(object({ tag: path | circle | rect | line, d?: string, cx?: string, cy?: string, r?: string, x?: string, y?: string, width?: string, height?: string, rx?: string, x1?: string, x2?: string, y1?: string, y2?: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
 
 export function createUiIcon(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
@@ -30,6 +30,8 @@ export function createUiIcon(options = {}) {
   element1.append(element3);
   const element4 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   element1.append(element4);
+  const element5 = document.createElementNS("http://www.w3.org/2000/svg", "line");
+  element1.append(element5);
   element0.append(element1);
   element.append(element0);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,

package/vanilla/UiNavItem.d.ts

@@ -0,0 +1,18 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiNavItemEventMap {
+}
+export interface UiNavItemElement extends HTMLButtonElement {
+  addEventListener<K extends keyof UiNavItemEventMap>(type: K, listener: (this: UiNavItemElement, event: UiNavItemEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiNavItemEventMap>(type: K, listener: (this: UiNavItemElement, event: UiNavItemEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiNavItemProps {
+  current?: boolean | "page" | "step" | "location" | null;
+  href?: string | null;
+  rel?: string | null;
+  target?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+  as?: "button" | "a";
+}
+export declare function createUiNavItem(props?: UiNavItemProps): UiNavItemElement;

package/vanilla/UiNavItem.js

@@ -0,0 +1,69 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import "../styles/ui-nav-item.css";
+
+const definition = {...{"contract":{"tag":"ui-nav-item","props":{"current":{"type":{"kind":"union","members":[{"kind":"terminal","name":"boolean"},{"kind":"keyword","value":"page"},{"kind":"keyword","value":"step"},{"kind":"keyword","value":"location"}]},"required":false,"target":{"attribute":"current"},"default":false},"href":{"type":"string","required":false,"target":{"attribute":"href"}},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"target":{"type":"string","required":false,"target":{"attribute":"target"}}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"type","expression":"{ true: 'button', false: null }[format('%s', not href)]","expressionPlan":{"source":"{ true: 'button', false: null }[format('%s', not href)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"button"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"unary","op":"not","operand":{"kind":"id","name":"href"}}]}},"dependencies":["href"]}},{"kind":"attribute","name":"href","expression":"href","expressionPlan":{"source":"href","ast":{"kind":"id","name":"href"},"dependencies":["href"]}},{"kind":"attribute","name":"target","expression":"target","expressionPlan":{"source":"target","ast":{"kind":"id","name":"target"},"dependencies":["target"]}},{"kind":"attribute","name":"rel","expression":"rel","expressionPlan":{"source":"rel","ast":{"kind":"id","name":"rel"},"dependencies":["rel"]}},{"kind":"attribute","name":"aria-current","expression":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","expressionPlan":{"source":"{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"page"}},{"key":"false","value":{"kind":"literal","value":null}},{"key":"page","value":{"kind":"literal","value":"page"}},{"key":"step","value":{"kind":"literal","value":"step"}},{"key":"location","value":{"kind":"literal","value":"location"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"current"}]}},"dependencies":["current"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"}],"children":[{"kind":"slot","fallback":[],"name":"description"}]}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button","a"]}},source:{file:import.meta.url},css:""};
+
+export function createUiNavItem(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement(as ?? "button");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = componentProps["href"] === undefined ? undefined : componentProps["href"];
+  if (value0 === null || value0 === undefined) element.removeAttribute("href");
+  else element.setAttribute("href", String(value0));
+  const value1 = componentProps["target"] === undefined ? undefined : componentProps["target"];
+  if (value1 === null || value1 === undefined) element.removeAttribute("target");
+  else element.setAttribute("target", String(value1));
+  const value2 = componentProps["rel"] === undefined ? undefined : componentProps["rel"];
+  if (value2 === null || value2 === undefined) element.removeAttribute("rel");
+  else element.setAttribute("rel", String(value2));
+  element.setAttribute("data-component", "ui-nav-item");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "indicator");
+  element0.setAttribute("aria-hidden", "true");
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "leading");
+  if (slots["leading"] ?? [].length > 0) {
+    for (const child of slots["leading"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "leading"]);
+      element1.append(node);
+    }
+  } else {
+  }
+  element.append(element1);
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "content");
+  const element3 = document.createElement("span");
+  element3.setAttribute("class", "label");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element3.append(node);
+    }
+  } else {
+  }
+  element2.append(element3);
+  const element4 = document.createElement("span");
+  element4.setAttribute("class", "description");
+  if (slots["description"] ?? [].length > 0) {
+    for (const child of slots["description"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "description"]);
+      element4.append(node);
+    }
+  } else {
+  }
+  element2.append(element4);
+  element.append(element2);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
+  return element;
+}
+

package/vanilla/index.js

@@ -37,6 +37,7 @@ export * from "./UiList.js";
 export * from "./UiListItem.js";
 export * from "./UiMenu.js";
 export * from "./UiMenuItem.js";
+export * from "./UiNavItem.js";
 export * from "./UiPageHeader.js";
 export * from "./UiPopover.js";
 export * from "./UiRadio.js";

package/vue/UiIcon.vue

@@ -18,7 +18,7 @@ const props = withDefaults(
 const root = ref<HTMLElement | null>(null)
 const shapes = ref<
   {
-    tag: 'path' | 'circle' | 'rect'
+    tag: 'path' | 'circle' | 'rect' | 'line'
     d?: string
     cx?: string
     cy?: string
@@ -28,6 +28,10 @@ const shapes = ref<
     width?: string
     height?: string
     rx?: string
+    x1?: string
+    x2?: string
+    y1?: string
+    y2?: string
   }[]
 >([])
 
@@ -63,6 +67,14 @@ useComponentHost(controllerModule.default, {
           :rx="shape.rx"
         >
         </rect>
+        <line
+          v-if="shape.tag === 'line'"
+          :x1="shape.x1"
+          :x2="shape.x2"
+          :y1="shape.y1"
+          :y2="shape.y2"
+        >
+        </line>
       </g>
     </svg></span>
 </template>

package/vue/UiNavItem.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    as?: 'button' | 'a';
+    current?: boolean | 'page' | 'step' | 'location';
+    href?: string;
+    rel?: string;
+    target?: string;
+};
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    description?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    current: boolean | "page" | "step" | "location";
+    as: "button" | "a";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiNavItem.js

@@ -0,0 +1,2 @@
+import { t as UiNavItem_default } from "./chunks/UiNavItem.js";
+export { UiNavItem_default as default };

package/vue/UiNavItem.vue

@@ -0,0 +1,180 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+withDefaults(
+  defineProps<{
+    as?: 'button' | 'a'
+    current?: boolean | 'page' | 'step' | 'location'
+    href?: string
+    rel?: string
+    target?: string
+  }>(),
+  {
+    as: 'button',
+    current: false,
+  },
+)
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
+</script>
+
+<template>
+  <component
+    :is="as"
+    data-component="ui-nav-item"
+    v-bind="$attrs"
+    :type="attribute(({ true: 'button', false: null })[`${!href}`])"
+    :href="href"
+    :target="target"
+    :rel="rel"
+    :aria-current="typeof (({ true: 'page', false: null, page: 'page', step: 'step', location: 'location' })[
+      `${current}`
+    ]) === 'boolean'
+    ? String(
+      ({ true: 'page', false: null, page: 'page', step: 'step', location: 'location' })[`${current}`],
+    )
+    : attribute(
+      ({ true: 'page', false: null, page: 'page', step: 'step', location: 'location' })[`${current}`],
+    )"
+  >
+    <span class="indicator" aria-hidden="true"></span>
+    <span class="leading"><slot name="leading" /></span>
+    <span class="content"><span class="label"><slot /></span>
+      <span class="description"><slot name="description" /></span></span>
+  </component>
+</template>
+
+<style scoped>
+/* One destination in a side or rail navigation: an icon to find it by (leading), its name (the
+       default slot), and an optional line under it (description), such as the record a section
+       belongs to. Label and description are one line each and end in an ellipsis, so every item in a
+       navigation has the same height and the rail never grows sideways. */
+[data-component~="ui-nav-item"] {
+  --_indicator-width: var(--ui-nav-item-indicator-width, 3px);
+  --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-3);
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: var(--ui-control-size, 2.5rem);
+  margin: 0;
+  padding-block: var(--ui-space-2);
+  padding-inline: var(--ui-space-3);
+  border: 0;
+  border-radius: var(--ui-radius-md);
+  background: transparent;
+  color: var(--ui-text-secondary);
+  font: inherit;
+  font-weight: var(--ui-font-medium);
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  appearance: none;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+[data-component~="ui-nav-item"]:hover:not([aria-current]) {
+  background: var(--ui-surface-hover);
+  color: var(--ui-text-primary);
+}
+
+/* The ring is an outline, drawn inside the item: forced colors keep an outline where they drop a
+   box shadow, and a scrolling rail cannot clip a ring that stays within the item. */
+[data-component~="ui-nav-item"]:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: -2px;
+}
+
+[data-component~="ui-nav-item"][aria-current] {
+  background: var(--ui-nav-item-current-surface, var(--ui-accent-soft));
+  color: var(--ui-accent-subtle-text, var(--ui-text-primary));
+  font-weight: var(--ui-font-semibold);
+}
+
+/* The bar on the start edge is a border, not a fill: forced colors replace backgrounds but keep a
+   border, so the current item stays marked in high contrast. Logical edges mirror it in a
+   right-to-left page. */
+.indicator {
+  position: absolute;
+  inset-block: var(--ui-space-2);
+  inset-inline-start: 0;
+  display: none;
+  border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
+  border-radius: var(--ui-radius-round);
+}
+
+[data-component~="ui-nav-item"][aria-current] .indicator {
+  display: block;
+}
+
+@media (forced-colors: active) {
+  .indicator {
+    border-inline-start-color: Highlight;
+  }
+}
+
+.leading {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: inherit;
+  font-size: var(--ui-font-size-lg);
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--ui-space-0-5, 2px);
+  min-inline-size: 0;
+}
+
+.label,
+.description {
+  display: block;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.label {
+  font-size: var(--ui-font-size-md);
+  line-height: var(--ui-line-height-tight);
+}
+
+.description {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-normal);
+  line-height: var(--ui-line-height-tight);
+}
+
+/* An unused region takes no space. */
+.leading:empty,
+.description:empty {
+  display: none;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-nav-item"][hidden] {
+  display: none;
+}
+</style>