@threadlabs/looma 0.28.10 → 0.28.12

package/components/ui-editor-chip-editor/ui-editor-chip-editor.html

@@ -0,0 +1,32 @@
+<link rel="component" href="../ui-stack/ui-stack.html">
+<link rel="component" href="../ui-input/ui-input.html">
+<link rel="component" href="../ui-radio-group/ui-radio-group.html">
+<link rel="component" href="../ui-swatch/ui-swatch.html">
+<template component="ui-editor-chip-editor" controller="./ui-editor-chip-editor.js">
+  <defs>
+    <prop name="label" type="string" default="">The chip's text, shown in the field as the reader edits it.</prop>
+    <prop name="color" type="keyword" values="neutral, blue, green, yellow, red, purple" default="neutral">The chip's colour, checked among the swatches.</prop>
+    <event name="label" type="object">
+      <prop name="label" required type="string"></prop>
+      The chip's text changed.
+    </event>
+    <event name="color" type="object">
+      <prop name="color" required type="keyword" values="neutral, blue, green, yellow, red, purple"></prop>
+      A colour was chosen.
+    </event>
+    <event name="done" type="object">Enter or Escape was pressed in the text field, to close the editor and return to the chip.</event>
+  </defs>
+  <div role="dialog" aria-label="Edit chip">
+    <ui-stack gap="s">
+      <ui-input data-chip-label size="sm" placeholder="Set a label" aria-label="Chip text" from:value="$label"></ui-input>
+      <ui-radio-group label="Chip color" label-visibility="sr-only" from:value="$color">
+        <ui-swatch tone="neutral"></ui-swatch>
+        <ui-swatch tone="blue"></ui-swatch>
+        <ui-swatch tone="green"></ui-swatch>
+        <ui-swatch tone="yellow"></ui-swatch>
+        <ui-swatch tone="red"></ui-swatch>
+        <ui-swatch tone="purple"></ui-swatch>
+      </ui-radio-group>
+    </ui-stack>
+  </div>
+</template>

package/components/ui-editor-chip-editor/ui-editor-chip-editor.js

@@ -0,0 +1,33 @@
+// Reports the chip's text and colour as they change, and Enter or Escape in the text field as done.
+// A colour chosen with the pointer returns focus to the text; the arrow keys stay among the swatches.
+function connect(host) {
+  const element = host.element;
+  const text = () => element.querySelector("[data-chip-label]");
+  const onInput = (event) => {
+    if (event.target === text()) host.dispatch("label", { label: event.target.value });
+  };
+  // The radio group reports a choice as select; a text selection in the field is a native select without a value.
+  const onSelect = (event) => {
+    if (event.target === element || typeof event.detail?.value !== "string") return;
+    host.dispatch("color", { color: event.detail.value });
+    if (event.detail.trigger === "pointer") text()?.focus();
+  };
+  const onKeyDown = (event) => {
+    if (event.target !== text() || (event.key !== "Enter" && event.key !== "Escape")) return;
+    event.preventDefault();
+    host.dispatch("done", {});
+  };
+  element.addEventListener("input", onInput);
+  element.addEventListener("select", onSelect);
+  element.addEventListener("keydown", onKeyDown);
+  return () => {
+    element.removeEventListener("input", onInput);
+    element.removeEventListener("select", onSelect);
+    element.removeEventListener("keydown", onKeyDown);
+  };
+}
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-radio-group/ui-radio-group.html

@@ -8,6 +8,9 @@
       the radios together, so set it when the choice submits with a form.</prop>
     <prop name="label" type="string" default="Options"
     >The group's legend, shown above the radios and announced as the group's name. Phrase it as the question the radios answer.</prop>
+    <prop name="labelVisibility" type="keyword" values="visible, sr-only" default="visible"
+    >visible shows the legend; sr-only hides it visually but keeps it as the group's accessible name. Use sr-only only when the surrounding layout already makes
+      the choice clear, as with a row of colour swatches.</prop>
     <prop name="orientation" type="keyword" values="horizontal, vertical" default="horizontal"
     >horizontal lays the radios out in a row; vertical stacks them in a column. The arrow keys move between radios either way.</prop>
     <prop name="disabled" type="boolean" default="false"
@@ -31,7 +34,7 @@
     </event>
   </defs>
   <fieldset role="radiogroup" from:aria-required="$required" from:aria-invalid="$invalid" from:disabled="$disabled">
-    <legend>{$label}</legend>
+    <legend class:sr-only="$labelVisibility = 'sr-only'">{$label}</legend>
     <slot></slot>
   </fieldset>
   <style>
@@ -64,6 +67,15 @@
       clear: both;
     }
 
+    legend.sr-only {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+
     :host([invalid]) legend {
       color: var(--_ui-radio-group-invalid-text);
     }

package/components/ui-swatch/ui-swatch.html

@@ -0,0 +1,69 @@
+<template component="ui-swatch">
+  <defs>
+    <prop name="tone" type="keyword" values="neutral, blue, green, yellow, red, purple" default="neutral"
+    >The swatch's colour, on the same tokens as editor chips. It is also the radio's value and, by name, its label.</prop>
+    <computed name="toneName" from="{ neutral: 'Neutral', blue: 'Blue', green: 'Green', yellow: 'Yellow', red: 'Red', purple: 'Purple' }[$tone]"></computed>
+  </defs>
+  <input type="radio" from:value="$tone" from:aria-label="$toneName">
+  <style>
+    @property --ui-swatch-size {
+      syntax: "*";
+      inherits: false;
+    }
+
+    /* A native radio drawn as a round dot. Inside a ui-radio-group the group names it, applies its
+       value, and moves between swatches with the arrow keys. */
+    :host {
+      --_surface: var(--ui-surface-subtle);
+      --_text: var(--ui-text-secondary);
+
+      appearance: none;
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      inline-size: var(--ui-swatch-size, 1.65rem);
+      block-size: var(--ui-swatch-size, 1.65rem);
+      margin: 0;
+      border: var(--ui-border-width) solid color-mix(in srgb, var(--_surface) 75%, var(--_text) 25%);
+      border-radius: 50%;
+      background: var(--_surface);
+      cursor: pointer;
+    }
+
+    :host([tone="blue"]) {
+      --_surface: var(--ui-info-soft);
+      --_text: var(--ui-info-subtle-text);
+    }
+
+    :host([tone="green"]) {
+      --_surface: var(--ui-success-soft);
+      --_text: var(--ui-success-subtle-text);
+    }
+
+    :host([tone="yellow"]) {
+      --_surface: var(--ui-warning-soft);
+      --_text: var(--ui-warning-subtle-text);
+    }
+
+    :host([tone="red"]) {
+      --_surface: var(--ui-danger-soft);
+      --_text: var(--ui-danger-subtle-text);
+    }
+
+    :host([tone="purple"]) {
+      --_surface: var(--ui-accent-soft);
+      --_text: var(--ui-accent-subtle-text);
+    }
+
+    /* The chosen swatch and the focused one share one ring at the focus width (2px by default), in
+       the tone or the focus colour. */
+    :host(:checked) {
+      outline: var(--ui-focus-width) solid var(--_text);
+      outline-offset: var(--ui-focus-width);
+    }
+
+    :host(:focus-visible) {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: var(--ui-focus-width);
+    }
+  </style>
+</template>