@threadlabs/looma 0.27.3 → 0.27.5

package/components/ui-badge/ui-badge.html

@@ -3,7 +3,7 @@
     <prop name="variant" type="keyword" values="solid, subtle, outline, inverse, overlay" default="subtle"
     >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.
       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
-      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
+      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
       20px. When space is constrained, the label truncates with an ellipsis while its full text remains available.</prop>
     <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
     >Which colour the badge speaks in. neutral is a quiet grey for plain labels; accent draws the eye in the accent colour; info, success, warning, and danger
@@ -317,11 +317,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. */
     :host([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/components/ui-callout/ui-callout.html

@@ -1,8 +1,11 @@
 <template component="ui-callout">
   <defs>
-    <prop name="tone" type="keyword" values="info, neutral, note, warning, success, danger" default="info"
-    >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
-      caution, success for a confirmation, and danger for a harmful consequence. note remains as an alias for neutral.</prop>
+    <prop name="tone" type="keyword" values="info, neutral, note, tip, important, warning, caution, success, danger" default="info"
+    >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
+      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
+      a confirmation. These are the tones of VitePress, Docusaurus and GitHub alerts.</prop>
+    <prop name="heading" type="string" default=""
+    >A short heading above the message, such as "Before you upgrade". Optional; without it the message stands alone.</prop>
   </defs>
   <div role="note">
     <span class="icon" aria-hidden="true">
@@ -24,6 +27,16 @@
         <path d="M13 2v7h7"></path>
         <path d="m9.5 17.5 4-4 2 2-4 4H9.5v-2Z"></path>
       </svg>
+      <svg $if="$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 $if="$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 $if="$tone = 'warning'" 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>
         <path d="M12 9v4"></path>
@@ -33,13 +46,24 @@
         <circle cx="12" cy="12" r="10"></circle>
         <path d="m9 12 2 2 4-4"></path>
       </svg>
-      <svg $if="$tone = 'danger'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        $if="$tone = 'danger' or $tone = 'caution'"
+        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"></circle>
         <path d="m15 9-6 6"></path>
         <path d="m9 9 6 6"></path>
       </svg>
     </span>
-    <div class="content"><slot></slot></div>
+    <div class="content">
+      <strong class="heading" $if="$heading">{$heading}</strong>
+      <slot></slot>
+    </div>
   </div>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
@@ -147,6 +171,11 @@
       min-inline-size: 0;
     }
 
+    .heading {
+      display: block;
+      font-weight: var(--ui-font-semibold);
+    }
+
     :host([tone="neutral"]), :host([tone="note"]) {
       --_ui-selection-context-surface: initial;
       --_ui-selection-context-border: initial;
@@ -156,6 +185,18 @@
       --_callout-icon: var(--ui-text-secondary);
     }
 
+    :host([tone="tip"]) {
+      --_callout-surface: var(--ui-success-soft);
+      --_callout-border: var(--ui-success-solid);
+      --_callout-icon: var(--ui-success-solid);
+    }
+
+    :host([tone="important"]) {
+      --_callout-surface: var(--ui-accent-soft);
+      --_callout-border: var(--ui-accent-solid);
+      --_callout-icon: var(--ui-accent-solid);
+    }
+
     :host([tone="warning"]) {
       --_callout-surface: var(--ui-warning-soft);
       --_callout-border: var(--ui-warning-solid);
@@ -168,7 +209,7 @@
       --_callout-icon: var(--ui-success-solid);
     }
 
-    :host([tone="danger"]) {
+    :host([tone="danger"]), :host([tone="caution"]) {
       --_callout-surface: var(--ui-danger-soft);
       --_callout-border: var(--ui-danger-solid);
       --_callout-icon: var(--ui-danger-solid);

package/components/ui-tabs/ui-tabs.html

@@ -14,6 +14,9 @@
     >In auto mode, arrow keys move focus and select the next panel. In manual mode, arrows move focus while Enter or Space selects a panel. Use manual when
       displaying a panel takes time.</prop>
     <prop name="stretch" type="boolean" default="false">Share the full width of the tab list equally between tabs instead of sizing each to its label.</prop>
+    <prop name="group" type="string" default=""
+    >Tabs with the same nonempty group share one selection: choosing a tab selects the tab with the same label in every other Tabs of that group in the
+      document, and the choice is remembered for the next visit. Use it for alternatives a reader picks once, such as a package manager or language.</prop>
     <state type="string" name="internalValue" value=""></state>
     <state name="tabs" type="list(object({ id: string, label: string }))" value="[]"></state>
     <event name="select" type="object">

package/components/ui-tabs/ui-tabs.js

@@ -1,6 +1,16 @@
 import { trackTrigger } from "../shared/trigger.js";
 
 let panelIds = 0;
+const GROUP_EVENT = "looma-tabs-group";
+const storageKey = (group) => `looma-tabs:${group}`;
+
+// Storage can be missing or throw (private windows, blocked site data); the selection still syncs in the page.
+function readStored(group) {
+  try { return globalThis.localStorage?.getItem(storageKey(group)) ?? null; } catch { return null; }
+}
+function writeStored(group, label) {
+  try { globalThis.localStorage?.setItem(storageKey(group), label); } catch { /* not remembered */ }
+}
 
 /** Lists the authored panels (each labelled by its aria-label) as tabs and shows the selected one. */
 function connect(host) {
@@ -56,10 +66,30 @@ function connect(host) {
     syncButtons();
   });
 
+  const group = () => String(host.props.group.value || "");
+  const document = host.element.ownerDocument;
+  // A group shares a selection by tab label, since panel ids are unique in a document.
+  const selectLabel = (label) => {
+    const tab = host.state.tabs.find((candidate) => candidate.label === label);
+    if (!tab || tab.id === host.state.internalValue) return false;
+    host.state.internalValue = tab.id;
+    return true;
+  };
   const select = (button, how) => {
     const previousValue = host.state.internalValue || undefined;
     host.state.internalValue = button.value;
     host.dispatch("select", { value: button.value, previousValue, trigger: how });
+    const name = group();
+    const label = host.state.tabs.find((tab) => tab.id === button.value)?.label;
+    if (!name || label === undefined) return;
+    writeStored(name, label);
+    document.dispatchEvent(new CustomEvent(GROUP_EVENT, { detail: { group: name, label, source: host.element } }));
+  };
+  const onGroupSelect = (event) => {
+    const { group: name, label, source } = event.detail;
+    if (source === host.element || name !== group()) return;
+    const previousValue = host.state.internalValue || undefined;
+    if (selectLabel(label)) host.dispatch("select", { value: host.state.internalValue, previousValue, trigger: "programmatic" });
   };
   const onClick = (event) => {
     const button = event.target.closest?.('[role="tab"]');
@@ -104,7 +134,14 @@ function connect(host) {
   const tabObserver = new MutationObserver(syncButtons);
   tabObserver.observe(list, { childList: true });
   readPanels();
+  document.addEventListener(GROUP_EVENT, onGroupSelect);
+  // A remembered choice applies when the page does not choose a panel itself.
+  if (group() && !external) {
+    const stored = readStored(group());
+    if (stored !== null) selectLabel(stored);
+  }
   return () => {
+    document.removeEventListener(GROUP_EVENT, onGroupSelect);
     stop();
     stopTracking();
     observer.disconnect();