@threadlabs/looma 0.13.3 → 0.13.5

package/components/shared/icons.js

@@ -25,6 +25,7 @@ export const icons = {
   "heading-1": [["path",{"d":"M4 12h8"}],["path",{"d":"M4 18V6"}],["path",{"d":"M12 18V6"}],["path",{"d":"m17 12 3-2v8"}]],
   "heading-2": [["path",{"d":"M4 12h8"}],["path",{"d":"M4 18V6"}],["path",{"d":"M12 18V6"}],["path",{"d":"M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1"}]],
   "heading-3": [["path",{"d":"M4 12h8"}],["path",{"d":"M4 18V6"}],["path",{"d":"M12 18V6"}],["path",{"d":"M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2"}],["path",{"d":"M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2"}]],
+  "help": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"}],["path",{"d":"M12 17h.01"}]],
   "highlighter": [["path",{"d":"m9 11-6 6v3h9l3-3"}],["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"}]],
   "image": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2","ry":"2"}],["circle",{"cx":"9","cy":"9","r":"2"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}]],
   "info": [["circle",{"cx":"12","cy":"12","r":"10"}],["path",{"d":"M12 16v-4"}],["path",{"d":"M12 8h.01"}]],

package/components/ui-cluster/ui-cluster.html

@@ -6,6 +6,9 @@
     <prop name="align" type="start | center | end | stretch"
     >How items line up within each row: center (the default) aligns their middles, start their tops, end their bottoms, and stretch makes every item as tall as
       its row.</prop>
+    <prop name="justify" type="start | center | end | between"
+    >Where items sit along each row: start (the default), center, end, or between, which pushes the first and last items to the ends of the row and spreads the
+      spare space between them, as for a title with its actions.</prop>
   </defs>
   <div><slot></slot></div>
   <style>
@@ -50,6 +53,15 @@
     :host-state([align="stretch"]) {
       align-items: stretch;
     }
+    :host-state([justify="center"]) {
+      justify-content: center;
+    }
+    :host-state([justify="end"]) {
+      justify-content: flex-end;
+    }
+    :host-state([justify="between"]) {
+      justify-content: space-between;
+    }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {

package/components/ui-combobox/ui-combobox.html

@@ -16,9 +16,15 @@
       this value.</prop>
     <prop name="items" type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean }))"
     >The selected items in multiple mode, as JSON; a named combobox submits each one's value. A form reset returns to these items, or to none when unset.</prop>
+    <prop name="selectedValues" type="list(string)"
+    >The selected option values in multiple mode, when the consumer controls the selection. Once set, the consumer owns it: each value shows as a badge with its
+      authored option's label, adding or removing one reports selected-values-change with the new list, and the badges follow selectedValues, not the user,
+      unless it is updated to match. Setting it reports nothing. It takes precedence over items; leave it unset to let the combobox keep its own
+      selection.</prop>
     <prop name="multiple" type="boolean" default="false"
     >Lets the user choose several options. Each choice becomes a removable badge before the input, the list stays open between picks, and choosing a checked
-      option removes it. value-change then reports the whole list of items; use items, not value, in this mode.</prop>
+      option removes it. value-change then reports the whole list of items, and selected-values-change the list of their values; use selectedValues or items,
+      not value, in this mode.</prop>
     <prop name="tokenSeparators" type="list(string)"
     >Keys that commit the typed text in multiple mode, as KeyboardEvent key values such as "," or ";". The text is added as the option whose label matches it,
       ignoring case, or with allowCreate is reported as create-item; otherwise it stays in the input.</prop>
@@ -110,6 +116,7 @@
       type="object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }), index: integer, trigger: keyboard | pointer | programmatic })"
     ></event>
     <event name="create-item" type="object({ query: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="selected-values-change" type="object({ selectedValues: list(string), trigger: keyboard | pointer | programmatic })"></event>
     <method name="validate" export="validate" returns="promise(unknown)"></method>
     <method name="focusInput" export="focusInput" returns="promise(undefined)"></method>
   </defs>

package/components/ui-combobox/ui-combobox.js

@@ -50,9 +50,32 @@ export default function controller(host) {
     allowCreate: Boolean(host.state.allowCreate),
   });
   // Selected items work uncontrolled: the component keeps them and reports every change. A consumer
-  // that owns `items` stays in charge, because the prop resyncs whatever it sets.
+  // that owns `items` stays in charge, because the prop resyncs whatever it sets. A consumer that sets
+  // `selectedValues` controls the selection: the chips follow it, and a user's change is only reported.
   const items = () => host.state.multiple && Array.isArray(host.state.internalItems) ? host.state.internalItems : [];
-  const selectedValues = () => new Set(items().map((item) => item.value));
+  const selectedSet = () => new Set(items().map((item) => item.value));
+  const controlledValues = () => Array.isArray(host.state.selectedValues);
+  // Each controlled value shows its authored option; a value no option describes yet keeps the chip it
+  // had, or shows the value itself until its option arrives. A repeated value shows once: the chips and
+  // hidden inputs are keyed by value. Array.from, not a spread: a loose transpile turns [...set] into [set].
+  const itemsForValues = () => {
+    const options = config().options;
+    return Array.from(new Set(host.state.selectedValues)).map((value) => asItem(options.find((option) => option.value === value)
+      ?? items().find((item) => item.value === value) ?? { id: value, value, label: value }));
+  };
+  const markSelectedRows = () => {
+    if (!host.state.multiple || !host.state.rows?.length) return;
+    const selected = selectedSet();
+    host.state.rows = host.state.rows.map((row) => ({ ...row, selected: selected.has(row.value) }));
+  };
+  const syncValues = () => {
+    if (!controlledValues()) return;
+    const next = itemsForValues();
+    // An equal selection (a re-rendered literal, an unrelated option edit) leaves the chips alone.
+    if (JSON.stringify(next) === JSON.stringify(items())) return;
+    host.state.internalItems = next;
+    markSelectedRows();
+  };
   const setValidation = (result, touched = host.state.validation?.touched ?? false) => {
     const issues = result.issues ?? [];
     const blocking = issues.some((issue) => issue.severity !== "warning");
@@ -113,7 +136,7 @@ export default function controller(host) {
           resetValidation();
       }
       const ids = new Set();
-      const selected = host.state.multiple ? selectedValues() : undefined;
+      const selected = host.state.multiple ? selectedSet() : undefined;
       // Multiple keeps its chosen options in the list, checked. Dropping them hid what was picked
       // from the list and from assistive technology, which only ever heard aria-selected="false".
       const filtered = options.filter((option) => {
@@ -179,9 +202,12 @@ export default function controller(host) {
       proposedChange = undefined;
     });
   };
-  const emitItems = (next) => {
-    host.state.internalItems = next;
+  const emitItems = (next, trigger) => {
+    if (!controlledValues()) host.state.internalItems = next;
     host.dispatch("value-change", next);
+    // Not `values`: Vue's adapter reads a modeled prop with `in`, and every list-shaped detail (this
+    // value-change, options-change) has Array.prototype.values, so it would emit update:values wrongly.
+    host.dispatch("selected-values-change", { selectedValues: next.map((item) => item.value), trigger });
   };
   const setMultiQuery = (query, trigger) => {
     if (host.state.query === undefined) {
@@ -203,7 +229,7 @@ export default function controller(host) {
     const option = asItem(row);
     const current = items();
     host.dispatch("add-item", { item: option, index: current.length, trigger });
-    emitItems([...current, option]);
+    emitItems([...current, option], trigger);
   };
   const createSelectedItem = (query, trigger) => { if (query) host.dispatch("create-item", { query, trigger }); };
   const choose = (index, trigger) => {
@@ -261,7 +287,8 @@ export default function controller(host) {
     const query = String(host.state.raw).trim();
     if (!query) return;
     const option = (host.state.rows ?? []).find((row) => row.label.trim().toLocaleLowerCase() === query.toLocaleLowerCase());
-    if (option) { setMultiQuery("", trigger); addSelectedItem(option, trigger); }
+    // Typing a label already chosen just clears the text; adding it again would duplicate the chip.
+    if (option) { setMultiQuery("", trigger); if (!selectedSet().has(option.value)) addSelectedItem(option, trigger); }
     else if (config().allowCreate) { setMultiQuery("", trigger); createSelectedItem(query, trigger); }
   };
   const itemButtons = () => Array.from(field.querySelectorAll(".item"));
@@ -270,7 +297,7 @@ export default function controller(host) {
     const item = current[index];
     if (!item || item.disabled || host.state.disabled || host.state.readonly) return;
     host.dispatch("remove-item", { item, index, trigger });
-    emitItems(current.filter((_, position) => position !== index));
+    emitItems(current.filter((_, position) => position !== index), trigger);
     requestAnimationFrame(() => itemButtons()[Math.min(index, itemButtons().length - 1)]?.focus?.() ?? input.focus());
   };
   const move = (key) => {
@@ -457,7 +484,7 @@ export default function controller(host) {
   const stopReset = afterFormReset(input, () => {
     close();
     lastSelection = null;
-    host.state.internalItems = Array.isArray(host.state.items) ? host.state.items : [];
+    host.state.internalItems = controlledValues() ? itemsForValues() : Array.isArray(host.state.items) ? host.state.items : [];
     applyDefaults();
     input.value = host.state.display;
     resetValidation();
@@ -468,6 +495,8 @@ export default function controller(host) {
   let lastOptionsKey = optionsKey();
   const observer = new MutationObserver(() => {
     relabel();
+    // Controlled chips show their options' current labels, including options that arrive late.
+    if (host.state.multiple) syncValues();
     const key = optionsKey();
     if (key === lastOptionsKey) return;
     lastOptionsKey = key;
@@ -475,19 +504,19 @@ export default function controller(host) {
   });
   observer.observe(authored, { childList: true, subtree: true, characterData: true, attributes: true });
   let lastItems = host.state.items;
-  if (Array.isArray(lastItems)) host.state.internalItems = lastItems;
+  let lastSelectedValues = host.state.selectedValues;
+  if (controlledValues()) host.state.internalItems = itemsForValues();
+  else if (Array.isArray(lastItems)) host.state.internalItems = lastItems;
   const stop = host.effect(() => {
-    // A consumer that sets `items` owns them; otherwise the component keeps its own.
+    // A consumer that sets `items` owns them; otherwise the component keeps its own. selectedValues wins.
     if (host.state.items !== lastItems) {
       lastItems = host.state.items;
-      if (Array.isArray(lastItems)) host.state.internalItems = lastItems;
+      if (Array.isArray(lastItems) && !controlledValues()) host.state.internalItems = lastItems;
       // The list shows the selection; a consumer that adds or removes an item later (after creating
       // it, say) is reflected at once rather than at the next search.
-      if (host.state.multiple && host.state.rows?.length) {
-        const selected = selectedValues();
-        host.state.rows = host.state.rows.map((row) => ({ ...row, selected: selected.has(row.value) }));
-      }
+      markSelectedRows();
     }
+    if (host.state.selectedValues !== lastSelectedValues) { lastSelectedValues = host.state.selectedValues; syncValues(); }
     if (host.state.value !== lastValue) { lastValue = host.state.value; syncValue(); }
     if (host.state.query !== lastQuery) { lastQuery = host.state.query; syncQuery(); }
     if (host.state.disabled || host.state.readonly) close();

package/components/ui-icon-button/ui-icon-button.html

@@ -265,6 +265,10 @@
 
     :host {
       --_icon-button-icon-default: var(--ui-icon-size-md);
+      /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
+         defaults, which its own --ui-icon-* hooks still override. */
+      --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+      --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
     }
 
     :host-state([size="sm"]) {