@threadlabs/looma 0.32.1 → 0.33.0

package/styles/ui-tree.css

@@ -43,22 +43,22 @@
       --_ui-default-tree-item-min-block-size: initial;
       --_ui-default-tree-item-font-size: initial;
       --_ui-default-tree-item-label-padding-block: initial;
-      display: block;
+      display: block !important;
       min-inline-size: 0;
-      padding-inline-start: var(--ui-tree-gutter, 0px);
+      padding-inline-start: var(--ui-tree-gutter, 0px) !important;
     }
 
     :scope:where([data-component~="ui-tree"])[data-move-mode]::after {
       content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
-      display: block;
-      padding: var(--ui-space-2);
+      display: block !important;
+      padding: var(--ui-space-2) !important;
       color: var(--ui-text-secondary);
       font-size: var(--ui-font-size-sm);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-tree"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-tree"]) to ([data-component]) {

package/theme-system.css

@@ -0,0 +1,80 @@
+/* Optional shared recipe. Load after tokens.css and the chosen palette.
+   Existing public roles remain the customization interface; no component selectors. */
+@layer theme {
+  :root {
+    --ui-density: 1;
+    --ui-scale-ratio: 1.2;
+    --ui-space-curve: 1;
+    --ui-outer-depth: 0.6;
+    --ui-inner-depth: 0.3;
+    --ui-edge-light: 0;
+    --ui-overlay-translucency: 0;
+  }
+
+  :where(:root, [data-theme], [data-contrast]) {
+    /* Controls use a ratio. Spacing uses an independent curve, so increasing the size
+       contrast cannot unexpectedly turn linear spacing into quadratic spacing. */
+    --_ui-theme-ratio: max(1, var(--ui-scale-ratio));
+    --_ui-theme-unit: calc(var(--ui-control-size) * 0.1 * max(0, var(--ui-density)));
+    --_ui-theme-curve: max(0, var(--ui-space-curve));
+    --ui-control-size-sm: calc(var(--ui-control-size) / var(--_ui-theme-ratio));
+    --ui-control-size-md: var(--ui-control-size);
+    --ui-control-size-lg: calc(var(--ui-control-size) * var(--_ui-theme-ratio));
+    --ui-space-1: var(--_ui-theme-unit);
+    --ui-space-2: calc(var(--_ui-theme-unit) * pow(2, var(--_ui-theme-curve)));
+    --ui-space-3: calc(var(--_ui-theme-unit) * pow(3, var(--_ui-theme-curve)));
+    --ui-space-4: calc(var(--_ui-theme-unit) * pow(4, var(--_ui-theme-curve)));
+    --ui-space-0-5: calc(var(--ui-space-1) * 0.5);
+    --ui-space-5: calc(var(--_ui-theme-unit) * pow(6, var(--_ui-theme-curve)));
+    --ui-space-6: calc(var(--_ui-theme-unit) * pow(8, var(--_ui-theme-curve)));
+    /* Vertical editing/action insets fit the shared box instead of growing with the
+       page spacing curve. Multi-line content can still grow intrinsically. */
+    --ui-control-inset-block-sm: max(0px, calc((var(--ui-control-size-sm) - var(--ui-font-size-sm) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
+    --ui-control-inset-block-md: max(0px, calc((var(--ui-control-size-md) - var(--ui-font-size-md) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
+    --ui-control-inset-block-lg: max(0px, calc((var(--ui-control-size-lg) - var(--ui-font-size-md) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
+    --ui-action-inset-sm: calc(var(--ui-control-size-sm) * 0.625 * var(--ui-density));
+    --ui-action-inset-md: calc(var(--ui-control-size-md) * 0.625 * var(--ui-density));
+    --ui-action-inset-lg: calc(var(--ui-control-size-lg) * 0.625 * var(--ui-density));
+
+    --ui-radius-sm: calc(var(--ui-radius-md) * 0.5);
+    --ui-radius-lg: calc(var(--ui-radius-md) * 1.5);
+    --ui-action-radius: var(--ui-radius-md);
+    --ui-field-radius: var(--ui-radius-md);
+    --ui-overlay-radius: calc(var(--ui-radius-md) * 1.75);
+
+    /* Depth changes elevation and recession, not motion amplitude. Neutral shadows
+       work across palettes without an extra ornamental brand colour. */
+    --_ui-theme-outer: max(0, var(--ui-outer-depth));
+    --_ui-theme-inner: max(0, var(--ui-inner-depth));
+    --_ui-theme-edge: clamp(0, var(--ui-edge-light), 1);
+    --_ui-theme-edge-paint: inset 1px 1px 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * 0.08)), inset -1px -1px 0 rgb(0 0 0 / calc(var(--_ui-theme-edge) * 0.08));
+    --ui-action-edge: var(--_ui-theme-edge-paint);
+    --ui-shadow-xs: 0 calc(1px * var(--_ui-theme-outer)) calc(2px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.08);
+    --ui-shadow-sm: 0 calc(1px * var(--_ui-theme-outer)) calc(3px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), 0 calc(4px * var(--_ui-theme-outer)) calc(12px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
+    --ui-shadow-md: var(--ui-shadow-sm);
+    --ui-shadow-lg: 0 calc(8px * var(--_ui-theme-outer)) calc(24px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), 0 calc(4px * var(--_ui-theme-outer)) calc(8px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
+    --ui-shadow-xl: var(--ui-shadow-lg);
+    --ui-action-shadow: var(--ui-shadow-sm);
+    --ui-raised: var(--ui-shadow-sm);
+    --ui-elevation-tooltip: var(--ui-shadow-sm);
+    --ui-elevation-overlay: var(--ui-shadow-lg);
+    --ui-elevation-dialog: var(--ui-shadow-lg);
+    --ui-control-inset: inset 0 calc(1px * var(--_ui-theme-inner)) calc(3px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.15), inset 0 -1px 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * 0.18));
+    --ui-pressed: inset 0 calc(2px * var(--_ui-theme-inner)) calc(4px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.2);
+    --ui-overlay-surface: color-mix(in srgb, var(--ui-surface-raised) calc((1 - clamp(0, var(--ui-overlay-translucency), 1)) * 100%), transparent);
+
+    /* Existing timing and easing names stay canonical. */
+    --ui-motion-press: calc(var(--ui-motion-fast) / 3);
+    --ui-motion-base: calc(var(--ui-motion-fast) * 1.2);
+    --ui-motion-ease-out: var(--ui-motion-ease);
+    --ui-press-scale: 0.98;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(:root, [data-theme], [data-contrast]) {
+      --ui-motion-press: 0ms;
+      --ui-motion-base: 0ms;
+      --ui-press-scale: 1;
+    }
+  }
+}

package/tokens.css

@@ -106,6 +106,12 @@
     --ui-font-family-sans: var(--ui-font-sans);
     --ui-font-family-mono: var(--ui-font-mono);
 
+    /* Text actions share the spacing scale; a theme may derive roomier action insets from its
+       control sizes without altering field padding or the common control height. */
+    --ui-action-inset-sm: var(--ui-space-2);
+    --ui-action-inset-md: var(--ui-space-3);
+    --ui-action-inset-lg: var(--ui-space-4);
+
     /* Space steps either side of the contract's four. */
     --ui-space-0-5: calc(var(--ui-space-1) * 0.5);
     --ui-space-5: calc(var(--ui-space-4) * 1.5);
@@ -243,6 +249,11 @@
     --ui-control-size-md: var(--ui-control-size);
     --ui-control-size-lg: calc(var(--ui-control-size) * 1.2);
 
+    /* Choice marks follow typography; row heights follow the shared control scale. */
+    --ui-choice-mark-size: calc(var(--ui-font-size) * 1.125);
+    --ui-choice-track-height: calc(var(--ui-font-size) * 1.5);
+    --ui-choice-track-width: calc(var(--ui-font-size) * 2.5);
+
     /* Icon sizes, used by icon buttons and field affordances. */
     --ui-icon-size-sm: var(--ui-font-size);
     --ui-icon-size-md: calc(var(--ui-font-size) * 1.25);
@@ -355,14 +366,14 @@
   [data-ui-choice-option][data-multiple]::before {
     content: "";
     flex: none;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
+    inline-size: var(--ui-choice-mark-size);
+    block-size: var(--ui-choice-mark-size);
     border: var(--ui-border-width) solid var(--ui-control-border-hover, var(--ui-border-strong));
     border-radius: var(--ui-radius-sm);
     background-color: var(--ui-control-surface);
     background-repeat: no-repeat;
     background-position: center;
-    background-size: 0.7rem;
+    background-size: calc(var(--ui-font-size) * 0.7);
   }
 
   [data-ui-choice-option][data-multiple][aria-selected="true"]::before {

package/vanilla/UiColorPicker.d.ts

@@ -0,0 +1,30 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+export interface UiColorPickerEventMap {
+  input: CustomEvent<{ readonly value: string }>;
+  change: CustomEvent<{ readonly value: string }>;
+}
+export interface UiColorPickerElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiColorPickerEventMap>(type: K, listener: (this: UiColorPickerElement, event: UiColorPickerEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiColorPickerElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiColorPickerEventMap>(type: K, listener: (this: UiColorPickerElement, event: UiColorPickerEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiColorPickerElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface UiColorPickerProps {
+  disabled?: boolean | null;
+  label?: string | null;
+  name?: string | null;
+  round?: boolean | null;
+  size?: "sm" | "md" | "lg" | null;
+  value?: 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 createUiColorPicker(props?: UiColorPickerProps): UiColorPickerElement;
+declare global {
+  interface ComponentTagMap {
+    "ui-color-picker": { element: UiColorPickerElement; props: Omit<UiColorPickerProps, "attributes" | "children" | "slots"> };
+  }
+}

package/vanilla/UiColorPicker.js

@@ -0,0 +1,77 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+import { attachGeneratedController, buildTemplate, toAttribute, writeAttribute, dispatchDeclared, detailCheck, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, checkBoolean, checkFormat, checkObject, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
+import * as controller from "../components/ui-color-picker/ui-color-picker.js";
+import "../styles/ui-color-picker.css";
+
+const T0 = ["",[],"\n    ",["input",["type","hidden","data-ui-field-value",""]],"\n    ",["button",["data-ui-field-control","","type","button","aria-haspopup","dialog","aria-expanded","false"],"\n      ",["span",["class","colour"]],"\n    "],"\n    ",["span",["class","editor","hidden","","role","dialog"],"\n      ",["label",["class","channel"],"Red",["input",["type","range","min","0","max","255","aria-label","Red"]]],"\n      ",["label",["class","channel"],"Green",["input",["type","range","min","0","max","255","aria-label","Green"]]],"\n      ",["label",["class","channel"],"Blue",["input",["type","range","min","0","max","255","aria-label","Blue"]]],"\n      ",["ui-input",["size","sm","aria-label","Hex colour","maxlength","7","spellcheck","false"]],"\n    "],"\n  "];
+let P0;
+const S = { n: [], t: [], f: import.meta.url, g: "ui-color-picker", d: { "input": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false], "change": [detailCheck(checkObject([["value", checkString, false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs };
+const D = { g: "ui-color-picker", props: { "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "label": { "required":false,"default":"Choose colour", c: checkString, t: "string", j: 0, m: "s" }, "name": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "round": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "value": { "required":false,"default":"#000000", c: checkString, t: "string", j: 0, m: "s" } } };
+const C = (host) => activateModule(controller, host);
+
+export function createUiColorPicker(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  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));
+  }
+  element.setAttribute("data-component", "ui-color-picker");
+  element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
+  const v = [null, null, null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const p0 = (r, c, d) => {
+    if (c & 4) {
+      const x0 = v[2];
+      const s0 = toAttribute(x0, "name");
+      if (s0 !== r.v0) writeAttribute(r.a0, "name", r.v0 = s0);
+    }
+    if (c & 1) {
+      const x1 = v[0];
+      const s1 = toAttribute(x1, "disabled");
+      if (s1 !== r.v1) writeAttribute(r.a0, "disabled", r.v1 = s1);
+    }
+    if (c & 2) {
+      const x2 = v[1];
+      const s2 = toAttribute(x2, "aria-label");
+      if (s2 !== r.v2) writeAttribute(r.a1, "aria-label", r.v2 = s2);
+      const s4 = toAttribute(x2, "aria-label");
+      if (s4 !== r.v4) writeAttribute(r.a3, "aria-label", r.v4 = s4);
+    }
+    if (c & 1) {
+      const x3 = v[0];
+      const s3 = toAttribute(x3, "disabled");
+      if (s3 !== r.v3) writeAttribute(r.a1, "disabled", r.v3 = s3);
+    }
+    if (c & 24) {
+      const x4 = hostState(["size","round"], [v[4], v[3]]);
+      const s5 = x4;
+      if (s5 !== r.v5) writeAttribute(r.n, "data-ui-color-picker-state", (r.v5 = s5) === "" ? null : s5);
+    }
+  };
+  const t0 = element.firstChild.nextSibling;
+  const t1 = t0.nextSibling.nextSibling;
+  const t2 = t1.firstChild.nextSibling;
+  const t3 = t1.nextSibling.nextSibling;
+  const t4 = t3.firstChild.nextSibling;
+  const t5 = t4.firstChild.nextSibling;
+  const t6 = t4.nextSibling.nextSibling;
+  const t7 = t6.firstChild.nextSibling;
+  const t8 = t6.nextSibling.nextSibling;
+  const t9 = t8.firstChild.nextSibling;
+  const t10 = t8.nextSibling.nextSibling;
+  const R = { n: element, a0: t0, a1: t1, a3: t3, v0: null, v1: null, v2: null, v3: null, v4: null, v5: undefined };
+  const I = { B };
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  manageProps(I);
+  I.r["field"] = t0;
+  I.r["trigger"] = t1;
+  I.r["colour"] = t2;
+  I.r["editor"] = t3;
+  I.r["red"] = t5;
+  I.r["green"] = t7;
+  I.r["blue"] = t9;
+  I.r["hex"] = t10;
+  return element;
+}
+defineComponent("ui-color-picker", createUiColorPicker, ["disabled","label","name","round","size","value"]);

package/vanilla/UiIcon.js

@@ -29,7 +29,7 @@ export function createUiIcon(options = {}, html) {
   const inputStatus = (j) => { if (j >= 0 && j < 1) { g(j); return CS[j] ?? UNRESOLVED_INPUT; } if (j === 1) return awaitInput(B, "name", true); if (j === 2) return awaitInput(B, "tone", true); return v[j] === undefined ? UNRESOLVED_INPUT : READY_INPUT; };
   const X = { e: 0, g: (j) => g(j), w: new Set(), a: CS, i: inputStatus };
   const ke = [];
-  const K = [() => readIndex({ "align-center": [{ "tag": "path", "d": "M21 5H3" }, { "tag": "path", "d": "M17 12H7" }, { "tag": "path", "d": "M19 19H5" }], "align-left": [{ "tag": "path", "d": "M21 5H3" }, { "tag": "path", "d": "M15 12H3" }, { "tag": "path", "d": "M17 19H3" }], "align-right": [{ "tag": "path", "d": "M21 5H3" }, { "tag": "path", "d": "M21 12H9" }, { "tag": "path", "d": "M21 19H7" }], "arrow-left": [{ "tag": "path", "d": "m12 19-7-7 7-7" }, { "tag": "path", "d": "M19 12H5" }], "bell": [{ "tag": "path", "d": "M10.268 21a2 2 0 0 0 3.464 0" }, { "tag": "path", "d": "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" }], "bold": [{ "tag": "path", "d": "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" }], "book-user": [{ "tag": "path", "d": "M15 13a3 3 0 1 0-6 0" }, { "tag": "path", "d": "M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" }, { "tag": "circle", "cx": "12", "cy": "8", "r": "2" }], "braces": [{ "tag": "path", "d": "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1" }, { "tag": "path", "d": "M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" }], "calculator": [{ "tag": "rect", "width": "16", "height": "20", "x": "4", "y": "2", "rx": "2" }, { "tag": "line", "x1": "8", "x2": "16", "y1": "6", "y2": "6" }, { "tag": "line", "x1": "16", "x2": "16", "y1": "14", "y2": "18" }, { "tag": "path", "d": "M16 10h.01" }, { "tag": "path", "d": "M12 10h.01" }, { "tag": "path", "d": "M8 10h.01" }, { "tag": "path", "d": "M12 14h.01" }, { "tag": "path", "d": "M8 14h.01" }, { "tag": "path", "d": "M12 18h.01" }, { "tag": "path", "d": "M8 18h.01" }], "check": [{ "tag": "path", "d": "M20 6 9 17l-5-5" }], "chevron-down": [{ "tag": "path", "d": "m6 9 6 6 6-6" }], "chevron-left": [{ "tag": "path", "d": "m15 18-6-6 6-6" }], "chevron-right": [{ "tag": "path", "d": "m9 18 6-6-6-6" }], "circle-check": [{ "tag": "circle", "cx": "12", "cy": "12", "r": "10" }, { "tag": "path", "d": "m9 12 2 2 4-4" }], "circle-dot": [{ "tag": "circle", "cx": "12", "cy": "12", "r": "10" }, { "tag": "circle", "cx": "12", "cy": "12", "r": "1" }], "circle-x": [{ "tag": "circle", "cx": "12", "cy": "12", "r": "10" }, { "tag": "path", "d": "m15 9-6 6" }, { "tag": "path", "d": "m9 9 6 6" }], "code-xml": [{ "tag": "path", "d": "m18 16 4-4-4-4" }, { "tag": "path", "d": "m6 8-4 4 4 4" }, { "tag": "path", "d": "m14.5 4-5 16" }], "columns": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }, { "tag": "path", "d": "M9 3v18" }, { "tag": "path", "d": "M15 3v18" }], "compass": [{ "tag": "path", "d": "m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" }, { "tag": "circle", "cx": "12", "cy": "12", "r": "10" }], "credit-card": [{ "tag": "rect", "width": "20", "height": "14", "x": "2", "y": "5", "rx": "2" }, { "tag": "line", "x1": "2", "x2": "22", "y1": "10", "y2": "10" }], "ellipsis": [{ "tag": "circle", "cx": "12", "cy": "12", "r": "1" }, { "tag": "circle", "cx": "19", "cy": "12", "r": "1" }, { "tag": "circle", "cx": "5", "cy": "12", "r": "1" }], "eraser": [{ "tag": "path", "d": "M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21" }, { "tag": "path", "d": "m5.082 11.09 8.828 8.828" }], "external-link": [{ "tag": "path", "d": "M15 3h6v6" }, { "tag": "path", "d": "M10 14 21 3" }, { "tag": "path", "d": "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }], "file-text": [{ "tag": "path", "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }, { "tag": "path", "d": "M14 2v5a1 1 0 0 0 1 1h5" }, { "tag": "path", "d": "M10 9H8" }, { "tag": "path", "d": "M16 13H8" }, { "tag": "path", "d": "M16 17H8" }], "folder": [{ "tag": "path", "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }], "grip-horizontal": [{ "tag": "circle", "cx": "12", "cy": "9", "r": "1" }, { "tag": "circle", "cx": "19", "cy": "9", "r": "1" }, { "tag": "circle", "cx": "5", "cy": "9", "r": "1" }, { "tag": "circle", "cx": "12", "cy": "15", "r": "1" }, { "tag": "circle", "cx": "19", "cy": "15", "r": "1" }, { "tag": "circle", "cx": "5", "cy": "15", "r": "1" }], "grip-vertical": [{ "tag": "circle", "cx": "9", "cy": "12", "r": "1" }, { "tag": "circle", "cx": "9", "cy": "5", "r": "1" }, { "tag": "circle", "cx": "9", "cy": "19", "r": "1" }, { "tag": "circle", "cx": "15", "cy": "12", "r": "1" }, { "tag": "circle", "cx": "15", "cy": "5", "r": "1" }, { "tag": "circle", "cx": "15", "cy": "19", "r": "1" }], "heading-1": [{ "tag": "path", "d": "M4 12h8" }, { "tag": "path", "d": "M4 18V6" }, { "tag": "path", "d": "M12 18V6" }, { "tag": "path", "d": "m17 12 3-2v8" }], "heading-2": [{ "tag": "path", "d": "M4 12h8" }, { "tag": "path", "d": "M4 18V6" }, { "tag": "path", "d": "M12 18V6" }, { "tag": "path", "d": "M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1" }], "heading-3": [{ "tag": "path", "d": "M4 12h8" }, { "tag": "path", "d": "M4 18V6" }, { "tag": "path", "d": "M12 18V6" }, { "tag": "path", "d": "M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2" }, { "tag": "path", "d": "M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2" }], "help": [{ "tag": "circle", "cx": "12", "cy": "12", "r": "10" }, { "tag": "path", "d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }, { "tag": "path", "d": "M12 17h.01" }], "highlighter": [{ "tag": "path", "d": "m9 11-6 6v3h9l3-3" }, { "tag": "path", "d": "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" }], "history": [{ "tag": "path", "d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }, { "tag": "path", "d": "M3 3v5h5" }, { "tag": "path", "d": "M12 7v5l4 2" }], "image": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2", "ry": "2" }, { "tag": "circle", "cx": "9", "cy": "9", "r": "2" }, { "tag": "path", "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }], "info": [{ "tag": "circle", "cx": "12", "cy": "12", "r": "10" }, { "tag": "path", "d": "M12 16v-4" }, { "tag": "path", "d": "M12 8h.01" }], "italic": [{ "tag": "line", "x1": "19", "x2": "10", "y1": "4", "y2": "4" }, { "tag": "line", "x1": "14", "x2": "5", "y1": "20", "y2": "20" }, { "tag": "line", "x1": "15", "x2": "9", "y1": "4", "y2": "20" }], "layout-dashboard": [{ "tag": "rect", "width": "7", "height": "9", "x": "3", "y": "3", "rx": "1" }, { "tag": "rect", "width": "7", "height": "5", "x": "14", "y": "3", "rx": "1" }, { "tag": "rect", "width": "7", "height": "9", "x": "14", "y": "12", "rx": "1" }, { "tag": "rect", "width": "7", "height": "5", "x": "3", "y": "16", "rx": "1" }], "lightbulb": [{ "tag": "path", "d": "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" }, { "tag": "path", "d": "M9 18h6" }, { "tag": "path", "d": "M10 22h4" }], "link": [{ "tag": "path", "d": "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }, { "tag": "path", "d": "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" }], "list": [{ "tag": "path", "d": "M3 5h.01" }, { "tag": "path", "d": "M3 12h.01" }, { "tag": "path", "d": "M3 19h.01" }, { "tag": "path", "d": "M8 5h13" }, { "tag": "path", "d": "M8 12h13" }, { "tag": "path", "d": "M8 19h13" }], "list-ordered": [{ "tag": "path", "d": "M11 5h10" }, { "tag": "path", "d": "M11 12h10" }, { "tag": "path", "d": "M11 19h10" }, { "tag": "path", "d": "M4 4h1v5" }, { "tag": "path", "d": "M4 9h2" }, { "tag": "path", "d": "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02" }], "list-todo": [{ "tag": "path", "d": "M13 5h8" }, { "tag": "path", "d": "M13 12h8" }, { "tag": "path", "d": "M13 19h8" }, { "tag": "path", "d": "m3 17 2 2 4-4" }, { "tag": "rect", "x": "3", "y": "4", "width": "6", "height": "6", "rx": "1" }], "loader": [{ "tag": "path", "d": "M21 12a9 9 0 1 1-6.219-8.56" }], "merge": [{ "tag": "path", "d": "m8 6 4-4 4 4" }, { "tag": "path", "d": "M12 2v10.3a4 4 0 0 1-1.172 2.872L4 22" }, { "tag": "path", "d": "m20 22-5-5" }], "message-square-warning": [{ "tag": "path", "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" }, { "tag": "path", "d": "M12 15h.01" }, { "tag": "path", "d": "M12 7v4" }], "minus": [{ "tag": "path", "d": "M5 12h14" }], "notebook-pen": [{ "tag": "path", "d": "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4" }, { "tag": "path", "d": "M2 6h4" }, { "tag": "path", "d": "M2 10h4" }, { "tag": "path", "d": "M2 14h4" }, { "tag": "path", "d": "M2 18h4" }, { "tag": "path", "d": "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z" }], "paint-bucket": [{ "tag": "path", "d": "m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z" }, { "tag": "path", "d": "m5 2 5 5" }, { "tag": "path", "d": "M2 13h15" }, { "tag": "path", "d": "M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z" }], "panel-bottom": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }, { "tag": "path", "d": "M3 15h18" }], "panel-left": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }, { "tag": "path", "d": "M9 3v18" }], "panel-right": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }, { "tag": "path", "d": "M15 3v18" }], "panel-top": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }, { "tag": "path", "d": "M3 9h18" }], "pencil": [{ "tag": "path", "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }, { "tag": "path", "d": "m15 5 4 4" }], "pilcrow": [{ "tag": "path", "d": "M13 4v16" }, { "tag": "path", "d": "M17 4v16" }, { "tag": "path", "d": "M19 4H9.5a4.5 4.5 0 0 0 0 9H13" }], "plus": [{ "tag": "path", "d": "M5 12h14" }, { "tag": "path", "d": "M12 5v14" }], "quote": [{ "tag": "path", "d": "M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" }, { "tag": "path", "d": "M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" }], "receipt": [{ "tag": "path", "d": "M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z" }, { "tag": "path", "d": "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8" }, { "tag": "path", "d": "M12 17.5v-11" }], "redo": [{ "tag": "path", "d": "m15 14 5-5-5-5" }, { "tag": "path", "d": "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13" }], "rows": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }, { "tag": "path", "d": "M21 9H3" }, { "tag": "path", "d": "M21 15H3" }], "search": [{ "tag": "path", "d": "m21 21-4.34-4.34" }, { "tag": "circle", "cx": "11", "cy": "11", "r": "8" }], "settings": [{ "tag": "path", "d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }, { "tag": "circle", "cx": "12", "cy": "12", "r": "3" }], "split": [{ "tag": "path", "d": "M16 3h5v5" }, { "tag": "path", "d": "M8 3H3v5" }, { "tag": "path", "d": "M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3" }, { "tag": "path", "d": "m15 9 6-6" }], "strikethrough": [{ "tag": "path", "d": "M16 4H9a3 3 0 0 0-2.83 4" }, { "tag": "path", "d": "M14 12a4 4 0 0 1 0 8H6" }, { "tag": "line", "x1": "4", "x2": "20", "y1": "12", "y2": "12" }], "superscript": [{ "tag": "path", "d": "m4 19 8-8" }, { "tag": "path", "d": "m12 19-8-8" }, { "tag": "path", "d": "M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06" }], "table": [{ "tag": "path", "d": "M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18" }], "tag": [{ "tag": "path", "d": "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" }, { "tag": "circle", "cx": "7.5", "cy": "7.5", "r": ".5", "fill": "currentColor" }], "trash": [{ "tag": "path", "d": "M10 11v6" }, { "tag": "path", "d": "M14 11v6" }, { "tag": "path", "d": "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }, { "tag": "path", "d": "M3 6h18" }, { "tag": "path", "d": "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }], "triangle-alert": [{ "tag": "path", "d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }, { "tag": "path", "d": "M12 9v4" }, { "tag": "path", "d": "M12 17h.01" }], "truck": [{ "tag": "path", "d": "M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" }, { "tag": "path", "d": "M15 18H9" }, { "tag": "path", "d": "M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" }, { "tag": "circle", "cx": "17", "cy": "18", "r": "2" }, { "tag": "circle", "cx": "7", "cy": "18", "r": "2" }], "underline": [{ "tag": "path", "d": "M6 4v6a6 6 0 0 0 12 0V4" }, { "tag": "line", "x1": "4", "x2": "20", "y1": "20", "y2": "20" }], "undo": [{ "tag": "path", "d": "M9 14 4 9l5-5" }, { "tag": "path", "d": "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" }], "unlink": [{ "tag": "path", "d": "m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71" }, { "tag": "path", "d": "m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71" }, { "tag": "line", "x1": "8", "x2": "8", "y1": "2", "y2": "5" }, { "tag": "line", "x1": "2", "x2": "5", "y1": "8", "y2": "8" }, { "tag": "line", "x1": "16", "x2": "16", "y1": "19", "y2": "22" }, { "tag": "line", "x1": "19", "x2": "22", "y1": "16", "y2": "16" }], "user-round": [{ "tag": "circle", "cx": "12", "cy": "8", "r": "5" }, { "tag": "path", "d": "M20 21a8 8 0 0 0-16 0" }], "users": [{ "tag": "path", "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }, { "tag": "path", "d": "M16 3.128a4 4 0 0 1 0 7.744" }, { "tag": "path", "d": "M22 21v-2a4 4 0 0 0-3-3.87" }, { "tag": "circle", "cx": "9", "cy": "7", "r": "4" }], "x": [{ "tag": "path", "d": "M18 6 6 18" }, { "tag": "path", "d": "m6 6 12 12" }] }, inputRead(v[1], inputStatus(1)))];
+  const K = [() => readIndex({ "align-center": [{ "tag": "path", "d": "M21 5H3" }, { "tag": "path", "d": "M17 12H7" }, { "tag": "path", "d": "M19 19H5" }], "align-left": [{ "tag": "path", "d": "M21 5H3" }, { "tag": "path", "d": "M15 12H3" }, { "tag": "path", "d": "M17 19H3" }], "align-right": [{ "tag": "path", "d": "M21 5H3" }, { "tag": "path", "d": "M21 12H9" }, { "tag": "path", "d": "M21 19H7" }], "arrow-left": [{ "tag": "path", "d": "m12 19-7-7 7-7" }, { "tag": "path", "d": "M19 12H5" }], "bell": [{ "tag": "path", "d": "M10.268 21a2 2 0 0 0 3.464 0" }, { "tag": "path", "d": "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" }], "bold": [{ "tag": "path", "d": "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" }], "book-user": [{ "tag": "path", "d": "M15 13a3 3 0 1 0-6 0" }, { "tag": "path", "d": "M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" }, { "tag": "circle", "cx": "12", "cy": "8", "r": "2" }], "braces": [{ "tag": "path", "d": "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1" }, { "tag": "path", "d": "M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" }], "calculator": [{ "tag": "rect", "width": "16", "height": "20", "x": "4", "y": "2", "rx": "2" }, { "tag": "line", "x1": "8", "x2": "16", "y1": "6", "y2": "6" }, { "tag": "line", "x1": "16", "x2": "16", "y1": "14", "y2": "18" }, { "tag": "path", "d": "M16 10h.01" }, { "tag": "path", "d": "M12 10h.01" }, { "tag": "path", "d": "M8 10h.01" }, { "tag": "path", "d": "M12 14h.01" }, { "tag": "path", "d": "M8 14h.01" }, { "tag": "path", "d": "M12 18h.01" }, { "tag": "path", "d": "M8 18h.01" }], "check": [{ "tag": "path", "d": "M20 6 9 17l-5-5" }], "chevron-down": [{ "tag": "path", "d": "m6 9 6 6 6-6" }], "chevron-left": [{ "tag": "path", "d": "m15 18-6-6 6-6" }], "chevron-right": [{ "tag": "path", "d": "m9 18 6-6-6-6" }], "circle-check": [{ "tag": "circle", "cx": "12", "cy": "12", "r": "10" }, { "tag": "path", "d": "m9 12 2 2 4-4" }], "circle-dot": [{ "tag": "circle", "cx": "12", "cy": "12", "r": "10" }, { "tag": "circle", "cx": "12", "cy": "12", "r": "1" }], "circle-x": [{ "tag": "circle", "cx": "12", "cy": "12", "r": "10" }, { "tag": "path", "d": "m15 9-6 6" }, { "tag": "path", "d": "m9 9 6 6" }], "code-xml": [{ "tag": "path", "d": "m18 16 4-4-4-4" }, { "tag": "path", "d": "m6 8-4 4 4 4" }, { "tag": "path", "d": "m14.5 4-5 16" }], "columns": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }, { "tag": "path", "d": "M9 3v18" }, { "tag": "path", "d": "M15 3v18" }], "compass": [{ "tag": "path", "d": "m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" }, { "tag": "circle", "cx": "12", "cy": "12", "r": "10" }], "credit-card": [{ "tag": "rect", "width": "20", "height": "14", "x": "2", "y": "5", "rx": "2" }, { "tag": "line", "x1": "2", "x2": "22", "y1": "10", "y2": "10" }], "ellipsis": [{ "tag": "circle", "cx": "12", "cy": "12", "r": "1" }, { "tag": "circle", "cx": "19", "cy": "12", "r": "1" }, { "tag": "circle", "cx": "5", "cy": "12", "r": "1" }], "eraser": [{ "tag": "path", "d": "M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21" }, { "tag": "path", "d": "m5.082 11.09 8.828 8.828" }], "external-link": [{ "tag": "path", "d": "M15 3h6v6" }, { "tag": "path", "d": "M10 14 21 3" }, { "tag": "path", "d": "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }], "file-text": [{ "tag": "path", "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }, { "tag": "path", "d": "M14 2v5a1 1 0 0 0 1 1h5" }, { "tag": "path", "d": "M10 9H8" }, { "tag": "path", "d": "M16 13H8" }, { "tag": "path", "d": "M16 17H8" }], "folder": [{ "tag": "path", "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }], "grip-horizontal": [{ "tag": "circle", "cx": "12", "cy": "9", "r": "1" }, { "tag": "circle", "cx": "19", "cy": "9", "r": "1" }, { "tag": "circle", "cx": "5", "cy": "9", "r": "1" }, { "tag": "circle", "cx": "12", "cy": "15", "r": "1" }, { "tag": "circle", "cx": "19", "cy": "15", "r": "1" }, { "tag": "circle", "cx": "5", "cy": "15", "r": "1" }], "grip-vertical": [{ "tag": "circle", "cx": "9", "cy": "12", "r": "1" }, { "tag": "circle", "cx": "9", "cy": "5", "r": "1" }, { "tag": "circle", "cx": "9", "cy": "19", "r": "1" }, { "tag": "circle", "cx": "15", "cy": "12", "r": "1" }, { "tag": "circle", "cx": "15", "cy": "5", "r": "1" }, { "tag": "circle", "cx": "15", "cy": "19", "r": "1" }], "heading-1": [{ "tag": "path", "d": "M4 12h8" }, { "tag": "path", "d": "M4 18V6" }, { "tag": "path", "d": "M12 18V6" }, { "tag": "path", "d": "m17 12 3-2v8" }], "heading-2": [{ "tag": "path", "d": "M4 12h8" }, { "tag": "path", "d": "M4 18V6" }, { "tag": "path", "d": "M12 18V6" }, { "tag": "path", "d": "M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1" }], "heading-3": [{ "tag": "path", "d": "M4 12h8" }, { "tag": "path", "d": "M4 18V6" }, { "tag": "path", "d": "M12 18V6" }, { "tag": "path", "d": "M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2" }, { "tag": "path", "d": "M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2" }], "help": [{ "tag": "circle", "cx": "12", "cy": "12", "r": "10" }, { "tag": "path", "d": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }, { "tag": "path", "d": "M12 17h.01" }], "highlighter": [{ "tag": "path", "d": "m9 11-6 6v3h9l3-3" }, { "tag": "path", "d": "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" }], "history": [{ "tag": "path", "d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }, { "tag": "path", "d": "M3 3v5h5" }, { "tag": "path", "d": "M12 7v5l4 2" }], "image": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2", "ry": "2" }, { "tag": "circle", "cx": "9", "cy": "9", "r": "2" }, { "tag": "path", "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }], "info": [{ "tag": "circle", "cx": "12", "cy": "12", "r": "10" }, { "tag": "path", "d": "M12 16v-4" }, { "tag": "path", "d": "M12 8h.01" }], "italic": [{ "tag": "line", "x1": "19", "x2": "10", "y1": "4", "y2": "4" }, { "tag": "line", "x1": "14", "x2": "5", "y1": "20", "y2": "20" }, { "tag": "line", "x1": "15", "x2": "9", "y1": "4", "y2": "20" }], "layout-dashboard": [{ "tag": "rect", "width": "7", "height": "9", "x": "3", "y": "3", "rx": "1" }, { "tag": "rect", "width": "7", "height": "5", "x": "14", "y": "3", "rx": "1" }, { "tag": "rect", "width": "7", "height": "9", "x": "14", "y": "12", "rx": "1" }, { "tag": "rect", "width": "7", "height": "5", "x": "3", "y": "16", "rx": "1" }], "lightbulb": [{ "tag": "path", "d": "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" }, { "tag": "path", "d": "M9 18h6" }, { "tag": "path", "d": "M10 22h4" }], "link": [{ "tag": "path", "d": "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }, { "tag": "path", "d": "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" }], "list": [{ "tag": "path", "d": "M3 5h.01" }, { "tag": "path", "d": "M3 12h.01" }, { "tag": "path", "d": "M3 19h.01" }, { "tag": "path", "d": "M8 5h13" }, { "tag": "path", "d": "M8 12h13" }, { "tag": "path", "d": "M8 19h13" }], "list-ordered": [{ "tag": "path", "d": "M11 5h10" }, { "tag": "path", "d": "M11 12h10" }, { "tag": "path", "d": "M11 19h10" }, { "tag": "path", "d": "M4 4h1v5" }, { "tag": "path", "d": "M4 9h2" }, { "tag": "path", "d": "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02" }], "list-todo": [{ "tag": "path", "d": "M13 5h8" }, { "tag": "path", "d": "M13 12h8" }, { "tag": "path", "d": "M13 19h8" }, { "tag": "path", "d": "m3 17 2 2 4-4" }, { "tag": "rect", "x": "3", "y": "4", "width": "6", "height": "6", "rx": "1" }], "loader": [{ "tag": "path", "d": "M21 12a9 9 0 1 1-6.219-8.56" }], "merge": [{ "tag": "path", "d": "m8 6 4-4 4 4" }, { "tag": "path", "d": "M12 2v10.3a4 4 0 0 1-1.172 2.872L4 22" }, { "tag": "path", "d": "m20 22-5-5" }], "message-square-warning": [{ "tag": "path", "d": "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" }, { "tag": "path", "d": "M12 15h.01" }, { "tag": "path", "d": "M12 7v4" }], "minus": [{ "tag": "path", "d": "M5 12h14" }], "notebook-pen": [{ "tag": "path", "d": "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4" }, { "tag": "path", "d": "M2 6h4" }, { "tag": "path", "d": "M2 10h4" }, { "tag": "path", "d": "M2 14h4" }, { "tag": "path", "d": "M2 18h4" }, { "tag": "path", "d": "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z" }], "paint-bucket": [{ "tag": "path", "d": "m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z" }, { "tag": "path", "d": "m5 2 5 5" }, { "tag": "path", "d": "M2 13h15" }, { "tag": "path", "d": "M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z" }], "panel-bottom": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }, { "tag": "path", "d": "M3 15h18" }], "panel-left": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }, { "tag": "path", "d": "M9 3v18" }], "panel-right": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }, { "tag": "path", "d": "M15 3v18" }], "panel-top": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }, { "tag": "path", "d": "M3 9h18" }], "paperclip": [{ "tag": "path", "d": "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }], "pencil": [{ "tag": "path", "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }, { "tag": "path", "d": "m15 5 4 4" }], "pilcrow": [{ "tag": "path", "d": "M13 4v16" }, { "tag": "path", "d": "M17 4v16" }, { "tag": "path", "d": "M19 4H9.5a4.5 4.5 0 0 0 0 9H13" }], "plus": [{ "tag": "path", "d": "M5 12h14" }, { "tag": "path", "d": "M12 5v14" }], "quote": [{ "tag": "path", "d": "M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" }, { "tag": "path", "d": "M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" }], "receipt": [{ "tag": "path", "d": "M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z" }, { "tag": "path", "d": "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8" }, { "tag": "path", "d": "M12 17.5v-11" }], "redo": [{ "tag": "path", "d": "m15 14 5-5-5-5" }, { "tag": "path", "d": "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13" }], "rows": [{ "tag": "rect", "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }, { "tag": "path", "d": "M21 9H3" }, { "tag": "path", "d": "M21 15H3" }], "search": [{ "tag": "path", "d": "m21 21-4.34-4.34" }, { "tag": "circle", "cx": "11", "cy": "11", "r": "8" }], "settings": [{ "tag": "path", "d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }, { "tag": "circle", "cx": "12", "cy": "12", "r": "3" }], "split": [{ "tag": "path", "d": "M16 3h5v5" }, { "tag": "path", "d": "M8 3H3v5" }, { "tag": "path", "d": "M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3" }, { "tag": "path", "d": "m15 9 6-6" }], "strikethrough": [{ "tag": "path", "d": "M16 4H9a3 3 0 0 0-2.83 4" }, { "tag": "path", "d": "M14 12a4 4 0 0 1 0 8H6" }, { "tag": "line", "x1": "4", "x2": "20", "y1": "12", "y2": "12" }], "superscript": [{ "tag": "path", "d": "m4 19 8-8" }, { "tag": "path", "d": "m12 19-8-8" }, { "tag": "path", "d": "M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06" }], "table": [{ "tag": "path", "d": "M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18" }], "tag": [{ "tag": "path", "d": "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" }, { "tag": "circle", "cx": "7.5", "cy": "7.5", "r": ".5", "fill": "currentColor" }], "trash": [{ "tag": "path", "d": "M10 11v6" }, { "tag": "path", "d": "M14 11v6" }, { "tag": "path", "d": "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }, { "tag": "path", "d": "M3 6h18" }, { "tag": "path", "d": "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }], "triangle-alert": [{ "tag": "path", "d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }, { "tag": "path", "d": "M12 9v4" }, { "tag": "path", "d": "M12 17h.01" }], "truck": [{ "tag": "path", "d": "M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" }, { "tag": "path", "d": "M15 18H9" }, { "tag": "path", "d": "M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" }, { "tag": "circle", "cx": "17", "cy": "18", "r": "2" }, { "tag": "circle", "cx": "7", "cy": "18", "r": "2" }], "underline": [{ "tag": "path", "d": "M6 4v6a6 6 0 0 0 12 0V4" }, { "tag": "line", "x1": "4", "x2": "20", "y1": "20", "y2": "20" }], "undo": [{ "tag": "path", "d": "M9 14 4 9l5-5" }, { "tag": "path", "d": "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" }], "unlink": [{ "tag": "path", "d": "m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71" }, { "tag": "path", "d": "m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71" }, { "tag": "line", "x1": "8", "x2": "8", "y1": "2", "y2": "5" }, { "tag": "line", "x1": "2", "x2": "5", "y1": "8", "y2": "8" }, { "tag": "line", "x1": "16", "x2": "16", "y1": "19", "y2": "22" }, { "tag": "line", "x1": "19", "x2": "22", "y1": "16", "y2": "16" }], "user-round": [{ "tag": "circle", "cx": "12", "cy": "8", "r": "5" }, { "tag": "path", "d": "M20 21a8 8 0 0 0-16 0" }], "users": [{ "tag": "path", "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }, { "tag": "path", "d": "M16 3.128a4 4 0 0 1 0 7.744" }, { "tag": "path", "d": "M22 21v-2a4 4 0 0 0-3-3.87" }, { "tag": "circle", "cx": "9", "cy": "7", "r": "4" }], "x": [{ "tag": "path", "d": "M18 6 6 18" }, { "tag": "path", "d": "m6 6 12 12" }] }, inputRead(v[1], inputStatus(1)))];
   const g = (j) => {
     const i = j - 0;
     if (ke[i] === X.e) return v[j];

package/vanilla/index.js

@@ -10,6 +10,7 @@ export * from "./UiCallout.js";
 export * from "./UiCard.js";
 export * from "./UiCheckbox.js";
 export * from "./UiCluster.js";
+export * from "./UiColorPicker.js";
 export * from "./UiCombobox.js";
 export * from "./UiContainer.js";
 export * from "./UiContextMenu.js";

package/vue/UiActionBar.vue

@@ -46,7 +46,7 @@ checkHydratedRoot('div', 'ui-action-bar')
     --_ui-action-bar-gap: var(--ui-action-bar-gap);
 
     --_gap: var(--ui-space-2);
-    display: block;
+    display: block !important;
     /* A size container sizes itself from its container, never its content. */
     container-type: inline-size;
     inline-size: 100%;
@@ -57,13 +57,13 @@ checkHydratedRoot('div', 'ui-action-bar')
   :global(.tertiary:where([data-hn-ui-action-bar])),
   :global(.secondary:where([data-hn-ui-action-bar])),
   :global(.primary:where([data-hn-ui-action-bar])) {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--_ui-action-bar-gap, var(--_gap));
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: var(--_ui-action-bar-gap, var(--_gap)) !important;
   }
   :global(.bar:where([data-hn-ui-action-bar])) {
-    justify-content: flex-end;
+    justify-content: flex-end !important;
   }
 
   :global(.tertiary:where([data-hn-ui-action-bar])) {
@@ -73,16 +73,16 @@ checkHydratedRoot('div', 'ui-action-bar')
   :global(.tertiary:empty:where([data-hn-ui-action-bar])),
   :global(.secondary:empty:where([data-hn-ui-action-bar])),
   :global(.primary:empty:where([data-hn-ui-action-bar])) {
-    display: none;
+    display: none !important;
   }
   @container (inline-size < 24rem) {
     :global(.bar:where([data-hn-ui-action-bar])),
     :global(.tertiary:where([data-hn-ui-action-bar])),
     :global(.secondary:where([data-hn-ui-action-bar])),
     :global(.primary:where([data-hn-ui-action-bar])) {
-      flex-direction: column-reverse;
-      flex-wrap: nowrap;
-      align-items: stretch;
+      flex-direction: column-reverse !important;
+      flex-wrap: nowrap !important;
+      align-items: stretch !important;
     }
 
     :global(.tertiary:where([data-hn-ui-action-bar])) {
@@ -90,7 +90,7 @@ checkHydratedRoot('div', 'ui-action-bar')
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-action-bar])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiAffordanceScope.vue

@@ -165,7 +165,7 @@ useComponentHost(() => import('../components/ui-affordance-scope/ui-affordance-s
 
 @scope (.ui-affordance-scope) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-affordance-scope])) {
-    display: contents;
+    display: contents !important;
     --ui-affordance-scope-engaged: 0;
     --ui-affordance-scope-guide: 1;
   }
@@ -176,7 +176,7 @@ useComponentHost(() => import('../components/ui-affordance-scope/ui-affordance-s
     --ui-affordance-scope-guide: 0;
   }
   :global(:scope[hidden]:where([data-hn-ui-affordance-scope])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiAvatar.vue

@@ -333,7 +333,7 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
 @scope (.ui-avatar) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-avatar])) {
     --_ui-default-icon-size: 1.25rem;
-    display: inline-grid;
+    display: inline-grid !important;
     place-items: center;
     overflow: hidden;
     inline-size: 2.5rem;
@@ -395,27 +395,27 @@ useComponentHost(() => import('../components/ui-avatar/ui-avatar.js'), {
 
   :global(.fallback:where([data-hn-ui-avatar])) {
     grid-area: 1 / 1;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     inline-size: 100%;
     block-size: 100%;
   }
   @supports (text-box-trim: trim-both) {
     :global(.fallback:where([data-hn-ui-avatar])) {
-      display: block;
+      display: block !important;
       text-align: center;
-      align-content: center;
+      align-content: center !important;
       text-box-trim: trim-both;
       text-box-edge: cap alphabetic;
     }
   }
 
   :global([hidden]:where([data-hn-ui-avatar])) {
-    display: none;
+    display: none !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-avatar])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiAvatarGroup.vue

@@ -250,18 +250,18 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
      * a white gap out of the avatar underneath. */
     --_overlap-shadow: -1px 0 0 0 rgb(0 0 0 / 0.22);
 
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    gap: 0;
+    display: flex !important;
+    align-items: center !important;
+    flex-direction: row !important;
+    gap: 0 !important;
   }
   :global(:where(:not([data-hn-ui-avatar-group])):is(*)) {
-    margin-inline-start: -0.5rem;
+    margin-inline-start: -0.5rem !important;
     flex-shrink: 0;
   }
 
   :global(:where(:not([data-hn-ui-avatar-group])):is(*:first-child)) {
-    margin-inline-start: 0;
+    margin-inline-start: 0 !important;
   }
 
   :global(:scope:dir(rtl):where([data-hn-ui-avatar-group])) {
@@ -269,10 +269,10 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
   }
 
   :global(.overflow:where([data-hn-ui-avatar-group])) {
-    margin-inline-start: -0.5rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    margin-inline-start: -0.5rem !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     inline-size: 2.5rem;
     block-size: 2.5rem;
     border-radius: var(--ui-radius-round);
@@ -290,14 +290,14 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
 
   :global(:scope[data-ui-avatar-group-state~="size=sm"]
     .overflow:where([data-hn-ui-avatar-group])) {
-    margin-inline-start: -0.25rem;
+    margin-inline-start: -0.25rem !important;
     inline-size: 1.75rem;
     block-size: 1.75rem;
   }
 
   :global(:scope[data-ui-avatar-group-state~="size=xs"]
     .overflow:where([data-hn-ui-avatar-group])) {
-    margin-inline-start: -0.1875rem;
+    margin-inline-start: -0.1875rem !important;
     inline-size: 1.25rem;
     block-size: 1.25rem;
     /* Matches the xs Avatar's initials. */
@@ -306,10 +306,10 @@ useComponentHost(() => import('../components/ui-avatar-group/ui-avatar-group.js'
   }
 
   :global(.overflow[hidden]:where([data-hn-ui-avatar-group])) {
-    display: none;
+    display: none !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-avatar-group])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>