@threadlabs/looma 0.27.3 → 0.27.5

package/package.json

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

package/styles/ui-badge.css

@@ -280,11 +280,11 @@
     }
 
     /* A count can keep its containing control's contrasting ink instead of reversing it.
-       The faint fill is painted over that control; no second rim or shadow competes with it. */
+       The faint fill preserves text contrast; a quiet boundary separates the count from its control. */
     :scope[data-ui-badge-state~="variant=overlay"] {
       --_badge-outline-surface: var(--ui-badge-surface, color-mix(in srgb, currentColor 6%, transparent));
       color: var(--ui-badge-text, inherit);
-      border-color: var(--ui-badge-border, transparent);
+      border-color: var(--ui-badge-border, color-mix(in srgb, currentColor 20%, transparent));
       box-shadow: none;
     }
 
@@ -533,7 +533,7 @@
        Dark controls retain a shaded surface and theme ink with a quieter rim. */
 
     /* A count can keep its containing control's contrasting ink instead of reversing it.
-       The faint fill is painted over that control; no second rim or shadow competes with it. */
+       The faint fill preserves text contrast; a quiet boundary separates the count from its control. */
 
     /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
        surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */

package/styles/ui-callout.css

@@ -105,6 +105,11 @@
       min-inline-size: 0;
     }
 
+    .heading {
+      display: block;
+      font-weight: var(--ui-font-semibold);
+    }
+
     :scope[data-ui-callout-state~="tone=neutral"], :scope[data-ui-callout-state~="tone=note"] {
       --_ui-selection-context-surface: initial;
       --_ui-selection-context-border: initial;
@@ -114,6 +119,18 @@
       --_callout-icon: var(--ui-text-secondary);
     }
 
+    :scope[data-ui-callout-state~="tone=tip"] {
+      --_callout-surface: var(--ui-success-soft);
+      --_callout-border: var(--ui-success-solid);
+      --_callout-icon: var(--ui-success-solid);
+    }
+
+    :scope[data-ui-callout-state~="tone=important"] {
+      --_callout-surface: var(--ui-accent-soft);
+      --_callout-border: var(--ui-accent-solid);
+      --_callout-icon: var(--ui-accent-solid);
+    }
+
     :scope[data-ui-callout-state~="tone=warning"] {
       --_callout-surface: var(--ui-warning-soft);
       --_callout-border: var(--ui-warning-solid);
@@ -126,7 +143,7 @@
       --_callout-icon: var(--ui-success-solid);
     }
 
-    :scope[data-ui-callout-state~="tone=danger"] {
+    :scope[data-ui-callout-state~="tone=danger"], :scope[data-ui-callout-state~="tone=caution"] {
       --_callout-surface: var(--ui-danger-soft);
       --_callout-border: var(--ui-danger-solid);
       --_callout-icon: var(--ui-danger-solid);

package/vanilla/UiCallout.d.ts

@@ -6,7 +6,8 @@ export interface UiCalloutElement extends HTMLDivElement {
   removeEventListener<K extends keyof UiCalloutEventMap>(type: K, listener: (this: UiCalloutElement, event: UiCalloutEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiCalloutProps {
-  tone?: "info" | "neutral" | "note" | "warning" | "success" | "danger" | null;
+  heading?: string | null;
+  tone?: "info" | "neutral" | "note" | "tip" | "important" | "warning" | "caution" | "success" | "danger" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiCallout.js

@@ -1,17 +1,20 @@
 // Generated by HTML Next 1.0.0-alpha.35 for Vanilla DOM. Do not edit.
-import { attachGeneratedController, buildTemplate, clearRegion, writeAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkFormat } from "@nextwebwg/html-next/generated-runtime";
+import { attachGeneratedController, buildTemplate, clearRegion, toText, truthy, writeAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, project, fillSlot, checkFormat, checkString } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-callout.css";
 
-const T0 = ["",[],["span",["class","icon","aria-hidden","true"],1,1,1,1,1],["div",["class","content"],4]];
+const T0 = ["",[],["span",["class","icon","aria-hidden","true"],1,1,1,1,1,1,1],["div",["class","content"],1,4]];
 const T1 = ["svg",["viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round"],["circle",["cx","12","cy","12","r","10"]],["path",["d","M12 16v-4"]],["path",["d","M12 8h.01"]]];
 const T2 = ["svg",["viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round"],["path",["d","M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z"]],["path",["d","M13 2v7h7"]],["path",["d","m9.5 17.5 4-4 2 2-4 4H9.5v-2Z"]]];
-const T3 = ["svg",["viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round"],["path",["d","m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"]],["path",["d","M12 9v4"]],["path",["d","M12 17h.01"]]];
-const T4 = ["svg",["viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round"],["circle",["cx","12","cy","12","r","10"]],["path",["d","m9 12 2 2 4-4"]]];
-const T5 = ["svg",["viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round"],["circle",["cx","12","cy","12","r","10"]],["path",["d","m15 9-6 6"]],["path",["d","m9 9 6 6"]]];
-const T6 = ["",[]];
-let P0, P1, P2, P3, P4, P5, P6;
+const T3 = ["svg",["viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round"],["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"]],["path",["d","M9 18h6"]],["path",["d","M10 22h4"]]];
+const T4 = ["svg",["viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round"],["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"]],["path",["d","M12 15h.01"]],["path",["d","M12 7v4"]]];
+const T5 = ["svg",["viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round"],["path",["d","m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"]],["path",["d","M12 9v4"]],["path",["d","M12 17h.01"]]];
+const T6 = ["svg",["viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round"],["circle",["cx","12","cy","12","r","10"]],["path",["d","m9 12 2 2 4-4"]]];
+const T7 = ["svg",["viewBox","0 0 24 24","fill","none","stroke","currentColor","stroke-width","2","stroke-linecap","round","stroke-linejoin","round"],["circle",["cx","12","cy","12","r","10"]],["path",["d","m15 9-6 6"]],["path",["d","m9 9 6 6"]]];
+const T8 = ["strong",["class","heading"],0];
+const T9 = ["",[]];
+let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-callout" };
-const D = { props: { "tone": { "required":false,"values":["info","neutral","note","warning","success","danger"],"default":"info", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "heading": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["info","neutral","note","tip","important","warning","caution","success","danger"],"default":"info", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 
 export function createUiCallout(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -23,7 +26,7 @@ export function createUiCallout(options = {}, html) {
   if (!element.hasAttribute("role")) element.setAttribute("role", "note");
   element.setAttribute("data-component", "ui-callout");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null];
+  const v = [null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, [], html);
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
@@ -73,14 +76,44 @@ export function createUiCallout(options = {}, html) {
   };
   const p6 = (r, c, d) => {
   };
-  const p0 = (r, c, d) => {
+  const m7 = (d) => {
+    const n = (P7 ??= buildTemplate(T7)).cloneNode(true);
+    const r = { n };
+    p7(r, -1, d);
+    return r;
+  };
+  const p7 = (r, c, d) => {
+  };
+  const m8 = (d) => {
+    const n = (P8 ??= buildTemplate(T8)).cloneNode(true);
+    const t0 = n.firstChild;
+    const r = { n, a0: t0, v0: "" };
+    p8(r, -1, d);
+    return r;
+  };
+  const p8 = (r, c, d) => {
     if (c & 1) {
-      const x0 = hostState(["tone"], [v[0]]);
+      const x0 = v[0];
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.a0.data = r.v0 = s0;
+    }
+  };
+  const m9 = (d) => {
+    const n = (P9 ??= buildTemplate(T9)).cloneNode(true);
+    const r = { n };
+    p9(r, -1, d);
+    return r;
+  };
+  const p9 = (r, c, d) => {
+  };
+  const p0 = (r, c, d) => {
+    if (c & 2) {
+      const x0 = hostState(["tone"], [v[1]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-callout-state", (r.v0 = s0) === "" ? null : s0);
     }
-    if (c & 1) {
-      const t0 = (v[0] === "info");
+    if (c & 2) {
+      const t0 = (v[1] === "info");
       if (true) {
         {
           r.b0 = undefined;
@@ -89,8 +122,8 @@ export function createUiCallout(options = {}, html) {
         }
       } else if (r.b0 !== undefined) p1(r.b0, c, d);
     } else if (r.b0 !== undefined) p1(r.b0, c, d);
-    if (c & 1) {
-      const t1 = ((v[0] === "neutral") || (v[0] === "note"));
+    if (c & 2) {
+      const t1 = ((v[1] === "neutral") || (v[1] === "note"));
       if (true) {
         {
           r.b1 = undefined;
@@ -99,8 +132,8 @@ export function createUiCallout(options = {}, html) {
         }
       } else if (r.b1 !== undefined) p2(r.b1, c, d);
     } else if (r.b1 !== undefined) p2(r.b1, c, d);
-    if (c & 1) {
-      const t2 = (v[0] === "warning");
+    if (c & 2) {
+      const t2 = (v[1] === "tip");
       if (true) {
         {
           r.b2 = undefined;
@@ -109,8 +142,8 @@ export function createUiCallout(options = {}, html) {
         }
       } else if (r.b2 !== undefined) p3(r.b2, c, d);
     } else if (r.b2 !== undefined) p3(r.b2, c, d);
-    if (c & 1) {
-      const t3 = (v[0] === "success");
+    if (c & 2) {
+      const t3 = (v[1] === "important");
       if (true) {
         {
           r.b3 = undefined;
@@ -119,8 +152,8 @@ export function createUiCallout(options = {}, html) {
         }
       } else if (r.b3 !== undefined) p4(r.b3, c, d);
     } else if (r.b3 !== undefined) p4(r.b3, c, d);
-    if (c & 1) {
-      const t4 = (v[0] === "danger");
+    if (c & 2) {
+      const t4 = (v[1] === "warning");
       if (true) {
         {
           r.b4 = undefined;
@@ -129,9 +162,39 @@ export function createUiCallout(options = {}, html) {
         }
       } else if (r.b4 !== undefined) p5(r.b4, c, d);
     } else if (r.b4 !== undefined) p5(r.b4, c, d);
-    if (r.f5 === undefined) { r.f5 = 1; const at = fillSlot(r.a5, r.e5, "", J, false, undefined, d);
-      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b5 = m6(d); at.before(r.b5.n); } }
-    else if (r.b5 !== undefined) p6(r.b5, c, d);
+    if (c & 2) {
+      const t5 = (v[1] === "success");
+      if (true) {
+        {
+          r.b5 = undefined;
+          clearRegion(r.a5, r.e5);
+          if (t5) { r.b5 = m6(d); r.e5.before(r.b5.n); }
+        }
+      } else if (r.b5 !== undefined) p6(r.b5, c, d);
+    } else if (r.b5 !== undefined) p6(r.b5, c, d);
+    if (c & 2) {
+      const t6 = ((v[1] === "danger") || (v[1] === "caution"));
+      if (true) {
+        {
+          r.b6 = undefined;
+          clearRegion(r.a6, r.e6);
+          if (t6) { r.b6 = m7(d); r.e6.before(r.b6.n); }
+        }
+      } else if (r.b6 !== undefined) p7(r.b6, c, d);
+    } else if (r.b6 !== undefined) p7(r.b6, c, d);
+    if (c & 1) {
+      const t7 = truthy(v[0]);
+      if (true) {
+        {
+          r.b7 = undefined;
+          clearRegion(r.a7, r.e7);
+          if (t7) { r.b7 = m8(d); r.e7.before(r.b7.n); }
+        }
+      } else if (r.b7 !== undefined) p8(r.b7, c, d);
+    } else if (r.b7 !== undefined) p8(r.b7, c, d);
+    if (r.f8 === undefined) { r.f8 = 1; const at = fillSlot(r.a8, r.e8, "", J, false, undefined, d);
+      if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b8 = m9(d); at.before(r.b8.n); } }
+    else if (r.b8 !== undefined) p9(r.b8, c, d);
   };
   const t0 = element.firstChild;
   const t1 = t0.firstChild;
@@ -139,8 +202,12 @@ export function createUiCallout(options = {}, html) {
   const t3 = t2.nextSibling.nextSibling;
   const t4 = t3.nextSibling.nextSibling;
   const t5 = t4.nextSibling.nextSibling;
-  const t6 = t0.nextSibling.firstChild;
-  const R = { n: element, v0: undefined, a0: t1, e0: t1.nextSibling, b0: undefined, a1: t2, e1: t2.nextSibling, b1: undefined, a2: t3, e2: t3.nextSibling, b2: undefined, a3: t4, e3: t4.nextSibling, b3: undefined, a4: t5, e4: t5.nextSibling, b4: undefined, a5: t6, e5: t6.nextSibling, b5: undefined, f5: undefined };
+  const t6 = t5.nextSibling.nextSibling;
+  const t7 = t6.nextSibling.nextSibling;
+  const t8 = t0.nextSibling;
+  const t9 = t8.firstChild;
+  const t10 = t9.nextSibling.nextSibling;
+  const R = { n: element, v0: undefined, a0: t1, e0: t1.nextSibling, b0: undefined, a1: t2, e1: t2.nextSibling, b1: undefined, a2: t3, e2: t3.nextSibling, b2: undefined, a3: t4, e3: t4.nextSibling, b3: undefined, a4: t5, e4: t5.nextSibling, b4: undefined, a5: t6, e5: t6.nextSibling, b5: undefined, a6: t7, e6: t7.nextSibling, b6: undefined, a7: t9, e7: t9.nextSibling, b7: undefined, a8: t10, e8: t10.nextSibling, b8: undefined, f8: undefined };
   const I = { B };
   const J = project(I, children, slots);
   attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);

package/vanilla/UiTabs.d.ts

@@ -9,6 +9,7 @@ export interface UiTabsElement extends HTMLDivElement {
 export interface UiTabsProps {
   activation?: "auto" | "manual" | null;
   density?: "comfortable" | "compact" | null;
+  group?: string | null;
   label?: string | null;
   orientation?: "horizontal" | "vertical" | null;
   stretch?: boolean | null;

package/vanilla/UiTabs.js

@@ -10,7 +10,7 @@ const T3 = ["",[]];
 let P0, P1, P2, P3;
 const E = new Map();
 const S = { n: ["internalValue","tabs"], t: ["s",["l",["o",["id","s","label","s"]]]], f: import.meta.url, g: "ui-tabs", d: { "select": [detailCheck(checkObject([["value", checkString, false], ["previousValue", checkString, false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared };
-const D = { props: { "activation": { "required":false,"values":["auto","manual"],"default":"auto", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "density": { "required":false,"values":["comfortable","compact"],"default":"comfortable", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "label": { "required":false,"default":"Tabs", c: checkString, t: "string", j: 0, m: "s" }, "orientation": { "required":false,"values":["horizontal","vertical"],"default":"horizontal", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "value": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
+const D = { props: { "activation": { "required":false,"values":["auto","manual"],"default":"auto", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "density": { "required":false,"values":["comfortable","compact"],"default":"comfortable", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "group": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "label": { "required":false,"default":"Tabs", c: checkString, t: "string", j: 0, m: "s" }, "orientation": { "required":false,"values":["horizontal","vertical"],"default":"horizontal", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "value": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
 const C = (host) => controller.default(host);
 
 export function createUiTabs(options = {}, html) {
@@ -22,7 +22,7 @@ export function createUiTabs(options = {}, html) {
   }
   element.setAttribute("data-component", "ui-tabs");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = ["", [], null, null, null, null, null, null];
+  const v = ["", [], null, null, null, null, null, null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, [], html);
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
@@ -74,18 +74,18 @@ export function createUiTabs(options = {}, html) {
   const p3 = (r, c, d) => {
   };
   const p0 = (r, c, d) => {
-    if (c & 16) {
-      const x0 = v[4];
+    if (c & 32) {
+      const x0 = v[5];
       const s0 = toAttribute(x0, "aria-label");
       if (s0 !== r.v0) writeAttribute(r.a0, "aria-label", r.v0 = s0);
     }
-    if (c & 1073741856) {
-      const x1 = v[5];
+    if (c & 1073741888) {
+      const x1 = v[6];
       const s1 = toAttribute(x1, "aria-orientation");
       if (s1 !== r.v1) writeAttribute(r.a0, "aria-orientation", r.v1 = s1);
     }
-    if (c & 104) {
-      const x2 = hostState(["density","stretch","orientation"], [v[3], v[6], v[5]]);
+    if (c & 200) {
+      const x2 = hostState(["density","stretch","orientation"], [v[3], v[7], v[6]]);
       const s2 = x2;
       if (s2 !== r.v2) writeAttribute(r.n, "data-ui-tabs-state", (r.v2 = s2) === "" ? null : s2);
     }

package/vue/UiBadge.vue

@@ -40,7 +40,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'variant' },
       description:
-        'Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and\n      subtle. overlay inherits the containing filled control\'s text colour on a faint translucent fill, without a visible rim or shadow. Its small circle is\n      20px. When space is constrained, the label truncates with an ellipsis while its full text remains available.',
+        'Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and\n      subtle. overlay inherits the containing filled control\'s text colour on a faint translucent fill, with a quiet single-pixel boundary and no shadow. Its small circle is\n      20px. When space is constrained, the label truncates with an ellipsis while its full text remains available.',
       values: ['solid', 'subtle', 'outline', 'inverse', 'overlay'],
       default: 'subtle',
     },
@@ -536,14 +536,14 @@ const hostState = computed(() =>
 }
 
 /* A count can keep its containing control's contrasting ink instead of reversing it.
-   The faint fill is painted over that control; no second rim or shadow competes with it. */
+   The faint fill preserves text contrast; a quiet boundary separates the count from its control. */
 [data-component~="ui-badge"][data-ui-badge-state~="variant=overlay"] {
   --_badge-outline-surface: var(
     --ui-badge-surface,
     color-mix(in srgb, currentColor 6%, transparent)
   );
   color: var(--ui-badge-text, inherit);
-  border-color: var(--ui-badge-border, transparent);
+  border-color: var(--ui-badge-border, color-mix(in srgb, currentColor 20%, transparent));
   box-shadow: none;
 }
 

package/vue/UiCallout.d.ts

@@ -4,17 +4,26 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    heading: {
+        type: PropType<string | null>;
+        default: string;
+    };
     tone: {
-        type: PropType<"info" | "neutral" | "note" | "warning" | "success" | "danger" | null>;
+        type: PropType<"info" | "neutral" | "note" | "tip" | "important" | "warning" | "caution" | "success" | "danger" | null>;
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    heading: {
+        type: PropType<string | null>;
+        default: string;
+    };
     tone: {
-        type: PropType<"info" | "neutral" | "note" | "warning" | "success" | "danger" | null>;
+        type: PropType<"info" | "neutral" | "note" | "tip" | "important" | "warning" | "caution" | "success" | "danger" | null>;
         default: string;
     };
 }>> & Readonly<{}>, {
-    tone: "info" | "neutral" | "success" | "warning" | "danger" | "note" | null;
+    tone: "info" | "neutral" | "success" | "warning" | "danger" | "note" | "tip" | "important" | "caution" | null;
+    heading: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiCallout.vue

@@ -8,34 +8,74 @@ defineOptions({ inheritAttrs: false })
 
 const propValidityContract = {
   props: {
+    heading: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'heading' },
+      description:
+        'A short heading above the message, such as "Before you upgrade". Optional; without it the message stands alone.',
+      default: '',
+    },
     tone: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
       target: { attribute: 'tone' },
       description:
-        'Which kind of message the callout carries, shown by its icon and colour: info (the default) for information, neutral for a muted aside, warning for a\n      caution, success for a confirmation, and danger for a harmful consequence. note remains as an alias for neutral.',
-      values: ['info', 'neutral', 'note', 'warning', 'success', 'danger'],
+        'Which kind of message the callout carries, shown by its icon and colour: info (the default) for information, note or neutral for a muted aside, tip for\n      advice, important for something the reader must not miss, warning for a caution, danger (or its alias caution) for a harmful consequence, and success for\n      a confirmation. These are the tones of VitePress, Docusaurus and GitHub alerts.',
+      values: [
+        'info',
+        'neutral',
+        'note',
+        'tip',
+        'important',
+        'warning',
+        'caution',
+        'success',
+        'danger',
+      ],
       default: 'info',
     },
   },
 } as const
 const props = defineProps({
+  heading: { type: null as unknown as PropType<string | null>, default: '' },
   tone: {
     type: null as unknown as PropType<
-      'info' | 'neutral' | 'note' | 'warning' | 'success' | 'danger' | null
+      | 'info'
+      | 'neutral'
+      | 'note'
+      | 'tip'
+      | 'important'
+      | 'warning'
+      | 'caution'
+      | 'success'
+      | 'danger'
+      | null
     >,
     default: 'info',
   },
 })
-const acceptedProps: Record<string, unknown> = { tone: 'info' }
+const acceptedProps: Record<string, unknown> = { heading: '', tone: 'info' }
 const checkedProps = computed(() => ({
-  tone: checkedProp<'info' | 'neutral' | 'note' | 'warning' | 'success' | 'danger'>(
-    props['tone'],
-    { kind: 'terminal', name: 'keyword' },
+  heading: checkedProp<string>(
+    props['heading'],
+    { kind: 'terminal', name: 'string' },
     false,
-    'tone',
+    'heading',
     acceptedProps,
-  ) as 'info' | 'neutral' | 'note' | 'warning' | 'success' | 'danger',
+  ) as string,
+  tone: checkedProp<
+    'info' | 'neutral' | 'note' | 'tip' | 'important' | 'warning' | 'caution' | 'success' | 'danger'
+  >(props['tone'], { kind: 'terminal', name: 'keyword' }, false, 'tone', acceptedProps) as
+    | 'info'
+    | 'neutral'
+    | 'note'
+    | 'tip'
+    | 'important'
+    | 'warning'
+    | 'caution'
+    | 'success'
+    | 'danger',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -107,6 +147,7 @@ const hostState = computed(() =>
     role="note"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-heading="reflectedProp('heading', 'heading', checkedProps.heading, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-ui-callout-state="hostState || undefined"
   >
@@ -136,6 +177,34 @@ const hostState = computed(() =>
         <path d="M13 2v7h7"></path>
         <path d="m9.5 17.5 4-4 2 2-4 4H9.5v-2Z"></path>
       </svg>
+      <svg
+        v-if="checkedProps.tone === 'tip'"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <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">
+        </path>
+        <path d="M9 18h6"></path>
+        <path d="M10 22h4"></path>
+      </svg>
+      <svg
+        v-if="checkedProps.tone === 'important'"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <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">
+        </path>
+        <path d="M12 15h.01"></path>
+        <path d="M12 7v4"></path>
+      </svg>
       <svg
         v-if="checkedProps.tone === 'warning'"
         viewBox="0 0 24 24"
@@ -162,7 +231,7 @@ const hostState = computed(() =>
         <path d="m9 12 2 2 4-4"></path>
       </svg>
       <svg
-        v-if="checkedProps.tone === 'danger'"
+        v-if="checkedProps.tone === 'danger' || checkedProps.tone === 'caution'"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -174,7 +243,10 @@ const hostState = computed(() =>
         <path d="m15 9-6 6"></path>
         <path d="m9 9 6 6"></path>
       </svg></span>
-    <div class="content"><slot /></div>
+    <div class="content">
+      <strong v-if="checkedProps.heading" class="heading">{{ checkedProps.heading }}</strong>
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -306,6 +378,11 @@ const hostState = computed(() =>
   min-inline-size: 0;
 }
 
+.heading {
+  display: block;
+  font-weight: var(--ui-font-semibold);
+}
+
 [data-component~="ui-callout"][data-ui-callout-state~="tone=neutral"],
 [data-component~="ui-callout"][data-ui-callout-state~="tone=note"] {
   --_ui-selection-context-surface: initial;
@@ -316,6 +393,18 @@ const hostState = computed(() =>
   --_callout-icon: var(--ui-text-secondary);
 }
 
+[data-component~="ui-callout"][data-ui-callout-state~="tone=tip"] {
+  --_callout-surface: var(--ui-success-soft);
+  --_callout-border: var(--ui-success-solid);
+  --_callout-icon: var(--ui-success-solid);
+}
+
+[data-component~="ui-callout"][data-ui-callout-state~="tone=important"] {
+  --_callout-surface: var(--ui-accent-soft);
+  --_callout-border: var(--ui-accent-solid);
+  --_callout-icon: var(--ui-accent-solid);
+}
+
 [data-component~="ui-callout"][data-ui-callout-state~="tone=warning"] {
   --_callout-surface: var(--ui-warning-soft);
   --_callout-border: var(--ui-warning-solid);
@@ -328,7 +417,8 @@ const hostState = computed(() =>
   --_callout-icon: var(--ui-success-solid);
 }
 
-[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"] {
+[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"],
+[data-component~="ui-callout"][data-ui-callout-state~="tone=caution"] {
   --_callout-surface: var(--ui-danger-soft);
   --_callout-border: var(--ui-danger-solid);
   --_callout-icon: var(--ui-danger-solid);

package/vue/UiStatusMessage.d.ts

@@ -33,8 +33,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     kind: "loading" | "error" | "empty" | null;
-    layout: "fill" | "inline" | "panel" | null;
     heading: string | null;
+    layout: "fill" | "inline" | "panel" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiTabs.d.ts

@@ -14,6 +14,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"comfortable" | "compact" | null>;
         default: string;
     };
+    group: {
+        type: PropType<string | null>;
+        default: string;
+    };
     label: {
         type: PropType<string | null>;
         default: string;
@@ -46,6 +50,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"comfortable" | "compact" | null>;
         default: string;
     };
+    group: {
+        type: PropType<string | null>;
+        default: string;
+    };
     label: {
         type: PropType<string | null>;
         default: string;
@@ -72,6 +80,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>, {
     label: string | null;
     value: string | null;
+    group: string | null;
     stretch: boolean | null;
     density: "comfortable" | "compact" | null;
     orientation: "vertical" | "horizontal" | null;