@threadlabs/looma 0.14.0 → 0.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-description-list.css

@@ -3,24 +3,63 @@
 /* Named values: a term and what it is, for each item (ui-description-item). */
     /* Rows line every term up in one column and every value in the next, through subgrid. */
     :scope {
+      --_gap: var(--ui-space-2);
+      --_gap-compact: var(--ui-space-1);
+      --_column-gap: var(--ui-space-6);
+      --_min: 10rem;
+      --_track: var(--_min);
+      --_tile-padding: var(--ui-space-3);
       display: grid;
       grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
-      gap: var(--ui-space-2) var(--ui-space-6);
+      gap: var(--_gap) var(--_column-gap);
       min-inline-size: 0;
       margin: 0;
     }
 
-    /* Tiles pass their shape to the items through private properties, which cross into each item. */
+    /* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
+       private properties, which cross into each item. */
+    :scope[data-ui-description-list-state~="layout=stacked"],
+    :scope[data-ui-description-list-state~="layout=grid"],
     :scope[data-ui-description-list-state~="layout=tiles"] {
       --_ui-description-display: flex;
       --_ui-description-column: auto;
+      --_ui-description-align: stretch;
+      --_gap: var(--ui-space-4);
+      --_gap-compact: var(--ui-space-2);
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    /* A column is at least --_min wide; with columns set, at least its share of the width, so no more
+       than that many fit. */
+    :scope[data-ui-description-list-state~="layout=grid"],
+    :scope[data-ui-description-list-state~="layout=tiles"] {
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
+    }
+
+    :scope[data-ui-description-list-state~="layout=tiles"] {
       --_ui-description-align: flex-start;
       --_ui-description-value-size: var(--ui-font-size-lg);
-      --_ui-description-padding: var(--ui-space-3);
+      --_ui-description-padding: var(--_tile-padding);
       --_ui-description-border-width: 1px;
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
-      gap: var(--ui-space-3);
+      --_gap: var(--ui-space-3);
+      --_gap-compact: var(--ui-space-2);
+      --_column-gap: var(--_gap);
+    }
+
+    :scope[data-ui-description-list-state~="columns=2"] {
+      --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
+    }
+    :scope[data-ui-description-list-state~="columns=3"] {
+      --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
+    }
+    :scope[data-ui-description-list-state~="columns=4"] {
+      --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
+    }
+
+    /* Compact takes each layout's closer spacing. */
+    :scope[data-ui-description-list-state~="density=compact"] {
+      --_gap: var(--_gap-compact);
+      --_tile-padding: var(--ui-space-2);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
@@ -32,7 +71,13 @@
 /* Named values: a term and what it is, for each item (ui-description-item). */
     /* Rows line every term up in one column and every value in the next, through subgrid. */
 
-    /* Tiles pass their shape to the items through private properties, which cross into each item. */
+    /* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
+       private properties, which cross into each item. */
+
+    /* A column is at least --_min wide; with columns set, at least its share of the width, so no more
+       than that many fit. */
+
+    /* Compact takes each layout's closer spacing. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-meter.css

@@ -0,0 +1,81 @@
+/* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@property --ui-meter-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
+@scope ([data-component~="ui-meter"]) to ([data-component], [data-slotted]) {
+/* How far along something is: a track, filled from the start in the tone's colour. The track is a
+       quiet border colour, so an empty meter still shows; every tone's fill keeps 3:1 against the
+       track and the page. */
+
+    :scope {
+      --_meter-fill: var(--ui-text-muted);
+
+      display: inline-block;
+      flex: none;
+      vertical-align: middle;
+      inline-size: var(--ui-meter-inline-size, 8rem);
+      max-inline-size: 100%;
+      block-size: var(--ui-space-2);
+      overflow: hidden;
+      border-radius: var(--ui-radius-round);
+      background: var(--ui-border);
+      /* Unseen until forced colours draw it, where the track's own colour is gone. */
+      outline: 1px solid transparent;
+    }
+
+    :scope[data-ui-meter-state~="size=sm"] {
+      inline-size: var(--ui-meter-inline-size, 5rem);
+      block-size: var(--ui-space-1);
+    }
+
+    .fill {
+      display: block;
+      block-size: 100%;
+      background: var(--_meter-fill);
+    }
+
+    :scope[data-ui-meter-state~="tone=accent"] {
+      --_meter-fill: var(--ui-accent-solid);
+    }
+
+    :scope[data-ui-meter-state~="tone=info"] {
+      --_meter-fill: var(--ui-info-solid);
+    }
+
+    :scope[data-ui-meter-state~="tone=success"] {
+      --_meter-fill: var(--ui-success-solid);
+    }
+
+    :scope[data-ui-meter-state~="tone=warning"] {
+      --_meter-fill: var(--ui-warning-solid);
+    }
+
+    :scope[data-ui-meter-state~="tone=danger"] {
+      --_meter-fill: var(--ui-danger-solid);
+    }
+
+    /* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
+    @media (forced-colors: active) {
+      .fill {
+        forced-color-adjust: none;
+        background: CanvasText;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-meter"]) to ([data-component]) {
+/* How far along something is: a track, filled from the start in the tone's colour. The track is a
+       quiet border colour, so an empty meter still shows; every tone's fill keeps 3:1 against the
+       track and the page. */
+
+    /* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
+    @media (forced-colors: active) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-table.css

@@ -0,0 +1,134 @@
+/* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@scope ([data-component~="ui-table"]) to ([data-component], [data-slotted]) {
+/* Styles an authored <table> (caption, thead, tbody, th scope) without replacing it: the table is
+       meaningful before JavaScript, and a screen reader reads it as a table. The root scrolls a table
+       wider than it, or taller than a bounded height; while it does, the controller makes the root a named, focusable region so a
+       keyboard can scroll it. A cell's data-ui-align (start, center, or end; start by default) sets its
+       content along the row, such as end for a column of figures. */
+    :scope {
+      --_pad-block: var(--ui-space-1);
+      --_pad-inline: var(--ui-space-3);
+      --_row-size: var(--ui-control-size);
+      display: block;
+      box-sizing: border-box;
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: 0;
+      overflow: auto;
+      overscroll-behavior-inline: contain;
+      /* The sideways scroll fade every Looma scroller uses (see ui-scroll-area). Only the inline edges
+         fade, so a sticky header never fades. */
+      --_ui-scroll-fade-direction: to right;
+      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self inline);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
+    }
+
+    :scope:dir(rtl) {
+      --_ui-scroll-fade-direction: to left;
+    }
+
+    :scope:focus-visible {
+      outline: 2px solid var(--ui-focus-ring);
+      outline-offset: -2px;
+    }
+
+    :scope[data-ui-table-state~="density=compact"] {
+      --_pad-block: var(--ui-space-0-5);
+      --_pad-inline: var(--ui-space-2);
+      --_row-size: var(--ui-control-size-sm);
+    }
+
+    /* Separate borders stay on their cells when a sticky header scrolls; collapsed ones stay behind. */
+
+    /* Every row is at least one control tall, so a row holding a checkbox, select, or input keeps the
+       rhythm of the rows around it. A cell's height is its minimum. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-table"]) to ([data-component]) {
+/* Styles an authored <table> (caption, thead, tbody, th scope) without replacing it: the table is
+       meaningful before JavaScript, and a screen reader reads it as a table. The root scrolls a table
+       wider than it, or taller than a bounded height; while it does, the controller makes the root a named, focusable region so a
+       keyboard can scroll it. A cell's data-ui-align (start, center, or end; start by default) sets its
+       content along the row, such as end for a column of figures. */
+
+    /* Separate borders stay on their cells when a sticky header scrolls; collapsed ones stay behind. */
+    :where([data-slotted], [data-slotted] *):is(table) {
+      inline-size: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+      font-variant-numeric: tabular-nums;
+    }
+
+    :where([data-slotted], [data-slotted] *):is(caption) {
+      padding-block-end: var(--ui-space-2);
+      color: var(--ui-text-secondary);
+      font-weight: var(--ui-font-medium);
+      text-align: start;
+    }
+
+    /* Every row is at least one control tall, so a row holding a checkbox, select, or input keeps the
+       rhythm of the rows around it. A cell's height is its minimum. */
+    :where([data-slotted], [data-slotted] *):is(th),
+    :where([data-slotted], [data-slotted] *):is(td) {
+      block-size: var(--_row-size);
+      padding: var(--_pad-block) var(--_pad-inline);
+      border-block-end: 1px solid var(--ui-border-subtle);
+      text-align: start;
+      vertical-align: middle;
+    }
+
+    :where([data-slotted], [data-slotted] *):is(thead th) {
+      block-size: auto;
+      padding-block: var(--ui-space-2);
+      border-block-end-color: var(--ui-border-default);
+      background: var(--ui-surface);
+      color: var(--ui-text-muted);
+      font-weight: var(--ui-font-medium);
+      white-space: nowrap;
+      vertical-align: bottom;
+    }
+
+    :where([data-slotted], [data-slotted] *):is(tbody th) {
+      font-weight: var(--ui-font-medium);
+    }
+
+    :where([data-slotted], [data-slotted] *):is(tbody tr:last-child > *) {
+      border-block-end-width: 0;
+    }
+
+    :where([data-slotted], [data-slotted] *):is([data-ui-align="center"]) {
+      text-align: center;
+    }
+
+    :where([data-slotted], [data-slotted] *):is([data-ui-align="end"]) {
+      text-align: end;
+    }
+
+    :scope[data-ui-table-state~="stickyHeader"] :where([data-slotted], [data-slotted] *):is(thead th) {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: 1;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/vanilla/UiDescriptionList.d.ts

@@ -6,7 +6,9 @@ export interface UiDescriptionListElement extends HTMLDListElement {
   removeEventListener<K extends keyof UiDescriptionListEventMap>(type: K, listener: (this: UiDescriptionListElement, event: UiDescriptionListEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiDescriptionListProps {
-  layout?: "rows" | "tiles" | null;
+  columns?: "2" | "3" | "4" | null;
+  density?: "comfortable" | "compact" | null;
+  layout?: "rows" | "stacked" | "grid" | "tiles" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiDescriptionList.js

@@ -5,7 +5,9 @@ import "../styles/ui-description-list.css";
 export function createUiDescriptionList(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
   const projected = [];
-  const prop0 = componentProps["layout"] === undefined ? "rows" : componentProps["layout"];
+  const prop0 = componentProps["columns"] === undefined ? undefined : componentProps["columns"];
+  const prop1 = componentProps["density"] === undefined ? "comfortable" : componentProps["density"];
+  const prop2 = componentProps["layout"] === undefined ? "rows" : componentProps["layout"];
   const element = document.createElement("dl");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -21,7 +23,9 @@ export function createUiDescriptionList(options = {}) {
   } else {
   }
   manageGeneratedProps(element, [
-    { name: "layout", attribute: "data-layout", value: componentProps["layout"], default: "rows", type: ["rows","tiles"], required: false },
+    { name: "columns", attribute: "data-columns", value: componentProps["columns"], type: ["2","3","4"], required: false },
+    { name: "density", attribute: "data-density", value: componentProps["density"], default: "comfortable", type: ["comfortable","compact"], required: false },
+    { name: "layout", attribute: "data-layout", value: componentProps["layout"], default: "rows", type: ["rows","stacked","grid","tiles"], required: false },
   ]);
   return element;
 }

package/vanilla/UiMeter.d.ts

@@ -0,0 +1,19 @@
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+export interface UiMeterEventMap {
+}
+export interface UiMeterElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiMeterEventMap>(type: K, listener: (this: UiMeterElement, event: UiMeterEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiMeterEventMap>(type: K, listener: (this: UiMeterElement, event: UiMeterEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiMeterProps {
+  label?: string | null;
+  max?: number | null;
+  size?: "sm" | "md" | null;
+  tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
+  value?: number | null;
+  valueText?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiMeter(props?: UiMeterProps): UiMeterElement;

package/vanilla/UiMeter.js

@@ -0,0 +1,28 @@
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import "../styles/ui-meter.css";
+
+const definition = {...{"contract":{"tag":"ui-meter","props":{"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"max":{"type":"number","required":false,"target":{"attribute":"aria-valuemax"},"default":1},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"},"tone":{"type":{"enum":["neutral","accent","info","success","warning","danger"]},"required":false,"target":{"attribute":"tone"},"default":"neutral"},"value":{"type":"number","required":false,"target":{"attribute":"value"},"default":0},"valueText":{"type":"string","required":false,"target":{"attribute":"valuetext"},"default":""}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"role","value":"meter"},{"kind":"literal","name":"aria-valuemin","value":"0"},{"kind":"attribute","name":"aria-valuemax","expression":"max","expressionPlan":{"source":"max","ast":{"kind":"id","name":"max"},"dependencies":["max"]}},{"kind":"attribute","name":"aria-valuenow","expression":"amount","expressionPlan":{"source":"amount","ast":{"kind":"id","name":"amount"},"dependencies":["amount"]}},{"kind":"attribute","name":"aria-valuetext","expression":"{ true: valueText, false: format('%s%', whole) }[format('%s', valueText != '')]","expressionPlan":{"source":"{ true: valueText, false: format('%s%', whole) }[format('%s', valueText != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"valueText"}},{"key":"false","value":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s%"},{"kind":"id","name":"whole"}]}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"valueText"},"right":{"kind":"literal","value":""}}]}},"dependencies":["valueText","whole"]}},{"kind":"attribute","name":"aria-label","expression":"{ true: label, false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: label, false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"label"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"fill"},{"kind":"attribute","name":"inline-size","expression":"format('%s%', percent)","expressionPlan":{"source":"format('%s%', percent)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s%"},{"kind":"id","name":"percent"}]},"dependencies":["percent"]},"target":"style"}],"children":[]}]},"declarations":[{"kind":"computed","name":"amount","expression":{"source":"clamp(0, value, max)","ast":{"kind":"call","fn":"clamp","args":[{"kind":"literal","value":0},{"kind":"id","name":"value"},{"kind":"id","name":"max"}]},"dependencies":["max","value"]}},{"kind":"computed","name":"percent","expression":{"source":"{ true: amount / max * 100, false: 0 }[format('%s', max > 0)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"binary","op":"*","left":{"kind":"binary","op":"/","left":{"kind":"id","name":"amount"},"right":{"kind":"id","name":"max"}},"right":{"kind":"literal","value":100}}},{"key":"false","value":{"kind":"literal","value":0}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":">","left":{"kind":"id","name":"max"},"right":{"kind":"literal","value":0}}]}},"dependencies":["amount","max"]}},{"kind":"computed","name":"whole","expression":{"source":"percent + 0.5 - (percent + 0.5) % 1","ast":{"kind":"binary","op":"-","left":{"kind":"binary","op":"+","left":{"kind":"id","name":"percent"},"right":{"kind":"literal","value":0.5}},"right":{"kind":"binary","op":"%","left":{"kind":"binary","op":"+","left":{"kind":"id","name":"percent"},"right":{"kind":"literal","value":0.5}},"right":{"kind":"literal","value":1}}},"dependencies":["percent"]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+
+export function createUiMeter(options = {}) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  if (!element.hasAttribute("role")) element.setAttribute("role", "meter");
+  if (!element.hasAttribute("aria-valuemin")) element.setAttribute("aria-valuemin", "0");
+  const value0 = componentProps["max"] === undefined ? 1 : componentProps["max"];
+  if (value0 === null || value0 === undefined) element.removeAttribute("aria-valuemax");
+  else element.setAttribute("aria-valuemax", String(value0));
+  element.setAttribute("data-component", "ui-meter");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "fill");
+  element.append(element0);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
+  return element;
+}
+

package/vanilla/UiTable.d.ts

@@ -0,0 +1,15 @@
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+export interface UiTableEventMap {
+}
+export interface UiTableElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiTableEventMap>(type: K, listener: (this: UiTableElement, event: UiTableEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiTableEventMap>(type: K, listener: (this: UiTableElement, event: UiTableEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiTableProps {
+  density?: "comfortable" | "compact" | null;
+  stickyHeader?: boolean | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiTable(props?: UiTableProps): UiTableElement;

package/vanilla/UiTable.js

@@ -0,0 +1,30 @@
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import * as controller from "../components/ui-table/ui-table.js";
+import "../styles/ui-table.css";
+
+const definition = {...{"contract":{"tag":"ui-table","props":{"density":{"type":{"enum":["comfortable","compact"]},"required":false,"target":{"attribute":"density"},"default":"comfortable"},"stickyHeader":{"type":"boolean","required":false,"target":{"attribute":"stickyheader"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+
+export function createUiTable(options = {}) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-table");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element.append(node);
+    }
+  } else {
+  }
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+    controller,
+  });
+  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 "./UiMeter.js";
 export * from "./UiNavItem.js";
 export * from "./UiPageHeader.js";
 export * from "./UiPopover.js";
@@ -55,6 +56,7 @@ export * from "./UiStack.js";
 export * from "./UiStatusMessage.js";
 export * from "./UiSwitch.js";
 export * from "./UiSwitcher.js";
+export * from "./UiTable.js";
 export * from "./UiTabs.js";
 export * from "./UiText.js";
 export * from "./UiTextarea.js";

package/vue/UiDescriptionList.d.ts

@@ -1,12 +1,15 @@
 type __VLS_Props = {
-    layout?: 'rows' | 'tiles';
+    columns?: '2' | '3' | '4';
+    density?: 'comfortable' | 'compact';
+    layout?: 'rows' | 'stacked' | 'grid' | 'tiles';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    layout: "rows" | "tiles";
+    density: "comfortable" | "compact";
+    layout: "rows" | "stacked" | "grid" | "tiles";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiDescriptionList.vue

@@ -6,9 +6,12 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
-    layout?: 'rows' | 'tiles'
+    columns?: '2' | '3' | '4'
+    density?: 'comfortable' | 'compact'
+    layout?: 'rows' | 'stacked' | 'grid' | 'tiles'
   }>(),
   {
+    density: 'comfortable',
     layout: 'rows',
   },
 )
@@ -17,6 +20,8 @@ const props = withDefaults(
 const hostState = computed(() =>
   [
     props.layout && `layout layout=${props.layout}`,
+    props.columns && `columns columns=${props.columns}`,
+    props.density && `density density=${props.density}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -35,24 +40,63 @@ const hostState = computed(() =>
 /* Named values: a term and what it is, for each item (ui-description-item). */
 /* Rows line every term up in one column and every value in the next, through subgrid. */
 [data-component~="ui-description-list"] {
+  --_gap: var(--ui-space-2);
+  --_gap-compact: var(--ui-space-1);
+  --_column-gap: var(--ui-space-6);
+  --_min: 10rem;
+  --_track: var(--_min);
+  --_tile-padding: var(--ui-space-3);
   display: grid;
   grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
-  gap: var(--ui-space-2) var(--ui-space-6);
+  gap: var(--_gap) var(--_column-gap);
   min-inline-size: 0;
   margin: 0;
 }
 
-/* Tiles pass their shape to the items through private properties, which cross into each item. */
+/* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
+   private properties, which cross into each item. */
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=stacked"],
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=grid"],
 [data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"] {
   --_ui-description-display: flex;
   --_ui-description-column: auto;
+  --_ui-description-align: stretch;
+  --_gap: var(--ui-space-4);
+  --_gap-compact: var(--ui-space-2);
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* A column is at least --_min wide; with columns set, at least its share of the width, so no more
+   than that many fit. */
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=grid"],
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"] {
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
+}
+
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"] {
   --_ui-description-align: flex-start;
   --_ui-description-value-size: var(--ui-font-size-lg);
-  --_ui-description-padding: var(--ui-space-3);
+  --_ui-description-padding: var(--_tile-padding);
   --_ui-description-border-width: 1px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
-  gap: var(--ui-space-3);
+  --_gap: var(--ui-space-3);
+  --_gap-compact: var(--ui-space-2);
+  --_column-gap: var(--_gap);
+}
+
+[data-component~="ui-description-list"][data-ui-description-list-state~="columns=2"] {
+  --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
+}
+[data-component~="ui-description-list"][data-ui-description-list-state~="columns=3"] {
+  --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
+}
+[data-component~="ui-description-list"][data-ui-description-list-state~="columns=4"] {
+  --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
+}
+
+/* Compact takes each layout's closer spacing. */
+[data-component~="ui-description-list"][data-ui-description-list-state~="density=compact"] {
+  --_gap: var(--_gap-compact);
+  --_tile-padding: var(--ui-space-2);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiList.d.ts

@@ -7,8 +7,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    layout: "rows" | "grid";
     density: "comfortable" | "compact";
+    layout: "rows" | "grid";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiMeter.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    label?: string;
+    max?: number;
+    size?: 'sm' | 'md';
+    tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+    value?: number;
+    valueText?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    size: "sm" | "md";
+    value: number;
+    max: number;
+    tone: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
+    valueText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiMeter.js

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