@threadlabs/looma 0.12.2 → 0.12.4

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.2",
+  "version": "0.12.4",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-badge.css

@@ -3,7 +3,8 @@
 :scope {
       --_badge-surface: var(--ui-surface-subtle);
       --_badge-text: var(--ui-text-secondary);
-      --_badge-border: color-mix(in srgb, var(--ui-text-secondary) 30%, transparent);
+      /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
+      --_badge-border: var(--ui-surface-subtle);
 
       display: inline-flex;
       align-items: center;
@@ -21,12 +22,12 @@
       white-space: nowrap;
     }
 
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
     /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
-     * Trimming applies to block containers, so the box is a block with centred content. */
+     * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
+     * replaces, still sizes to its label rather than filling its container. */
     @supports (text-box-trim: trim-both) {
       :scope {
-        display: block;
+        display: inline-block;
         min-block-size: var(--ui-badge-min-block-size, 1.5rem);
         text-align: center;
         align-content: center;
@@ -119,9 +120,9 @@
     }
 }
 @scope ([data-component~="ui-badge"]) to ([data-component]) {
-/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
-     * Trimming applies to block containers, so the box is a block with centred content. */
+/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
+     * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
+     * replaces, still sizes to its label rather than filling its container. */
     @supports (text-box-trim: trim-both) {
     }
 

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/UiBadge.vue

@@ -39,7 +39,8 @@ const hostState = computed(() =>
 [data-component~="ui-badge"] {
   --_badge-surface: var(--ui-surface-subtle);
   --_badge-text: var(--ui-text-secondary);
-  --_badge-border: color-mix(in srgb, var(--ui-text-secondary) 30%, transparent);
+  /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
+  --_badge-border: var(--ui-surface-subtle);
 
   display: inline-flex;
   align-items: center;
@@ -58,12 +59,12 @@ const hostState = computed(() =>
   white-space: nowrap;
 }
 
-/* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
 /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
- * Trimming applies to block containers, so the box is a block with centred content. */
+ * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
+ * replaces, still sizes to its label rather than filling its container. */
 @supports (text-box-trim: trim-both) {
   [data-component~="ui-badge"] {
-    display: block;
+    display: inline-block;
     min-block-size: var(--ui-badge-min-block-size, 1.5rem);
     text-align: center;
     align-content: center;

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 };