@threadlabs/looma 0.11.6 → 0.12.0

package/components/shared/describe.js

@@ -0,0 +1,9 @@
+let descriptions = 0;
+
+// A choice's description (Radio, Checkbox, Switch) sits inside its label, so a press on it still
+// chooses. It is hidden from the label and named as the input's description instead, so a screen
+// reader says "Private, radio button, Only the people you add can open it" rather than one long name.
+export function describeInput(input, description) {
+  description.id ||= `ui-description-${++descriptions}`;
+  input.setAttribute("aria-describedby", description.id);
+}

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

@@ -220,31 +220,19 @@
         var(--ui-focus-halo);
     }
 
-    /* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
-       disabled outline is still an outline and a disabled ghost still has no edge. Intent goes — an
-       unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
-       highlight and shadow, because nothing that cannot be pressed should look raised. */
+    /* Disabled keeps the shape and washes out the rest: every variant keeps its own structure, so a
+       disabled outline is still an outline and a disabled ghost still has no edge. One filter fades
+       fill, border, and text together (--ui-disabled-filter), and the theme decides which way is
+       toward the page. The highlight and shadow go, because nothing that cannot be pressed should
+       look raised. */
     :host:is(:disabled, [aria-disabled="true"]) {
-      /* Derived from the tone itself, not from a separate disabled palette: faded toward the
-         page, which desaturates it at the same time. Toward the page rather than toward white,
-         so a dark theme dims where a light one lightens — the same rule, both schemes. */
-      --_tone: color-mix(in oklab, var(--_hue) 58%, var(--ui-surface));
-      --_tone-hover: var(--_tone);
-      --_tone-active: var(--_tone);
-      --_tone-text: color-mix(in oklab, var(--_hue-text) 72%, var(--ui-surface));
-      --_on-tone: var(--_tone-text);
-
+      filter: var(--ui-button-disabled-filter, var(--ui-disabled-filter));
       opacity: var(--ui-button-disabled-opacity, 1);
       cursor: not-allowed;
       background-image: none;
       box-shadow: none;
     }
 
-    /* A filled button keeps its fill, faded further so its text stays legible on it. */
-    :is(:host-state([variant="solid"]), :host-state([variant="danger"])):is(:disabled, [aria-disabled="true"]) {
-      --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
-    }
-
     /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
        it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
        the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
@@ -311,7 +299,6 @@
     :host-state([variant="link"]):is(:disabled, [aria-disabled="true"]) {
       background: none;
       border-color: transparent;
-      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
     }
 
     :host-state([variant="link"]):focus-visible {

package/components/ui-checkbox/ui-checkbox.html

@@ -28,7 +28,10 @@
       :name="name"
       :value="value"
     >
-    <span class="label"><slot></slot></span>
+    <span class="text">
+      <span class="label"><slot></slot></span>
+      <span class="description" $ref="description" aria-hidden="true"><slot name="description"></slot></span>
+    </span>
   </label>
   <style>
     :host {
@@ -40,11 +43,29 @@
       cursor: pointer;
     }
 
+    /* The label, and under it an optional line saying what the choice means. */
+    .text {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+    }
+
     .label {
       min-inline-size: 0;
       line-height: var(--ui-line-height-md);
     }
 
+    .description {
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+
+    .description:empty {
+      display: none;
+    }
+
     input {
       appearance: none;
       -webkit-appearance: none;

package/components/ui-checkbox/ui-checkbox.js

@@ -1,4 +1,5 @@
 import { afterFormReset } from "../shared/form-reset.js";
+import { describeInput } from "../shared/describe.js";
 import { trackTrigger } from "../shared/trigger.js";
 
 // `checked` sets the control initially and whenever it changes; the user's changes update the state.
@@ -6,6 +7,7 @@ import { trackTrigger } from "../shared/trigger.js";
 // the native default alone cannot hold it there.
 export default function controller(host) {
   const input = host.refs.input;
+  describeInput(input, host.refs.description);
   const [trigger, stopTracking] = trackTrigger(host);
   let external = host.state.checked;
   host.state.internalChecked = Boolean(external);

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

@@ -1,7 +1,7 @@
 <template component="ui-icon-button" controller="./ui-icon-button.js">
   <defs>
     <prop name="disabled" type="boolean" default="false"
-    >Disables the button, so it cannot be pressed or focused, and greys the icon; outline and solid also take the disabled surface.</prop>
+    >Disables the button, so it cannot be pressed or focused, and washes it out: the same shape, with less colour and contrast (--ui-disabled-filter).</prop>
     <prop name="label" type="string">Accessible name for the icon.</prop>
     <prop name="size" type="sm | md | lg" default="md"
     >Button and icon size together: sm is 1.75rem with a small icon, md is 2rem, and lg is 2.5rem with a large icon. On touch, every size gets an invisible hit
@@ -177,22 +177,12 @@
     }
 
     /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
+    /* Disabled washes the button out the way Button does: the same shape, one filter. */
     :host:disabled {
+      filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
       opacity: var(--ui-icon-button-disabled-opacity, 1);
-      color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
       cursor: not-allowed;
-    }
-
-    :host-state([variant="outline"]):disabled {
-      border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
-      background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
-      color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
-    }
-
-    :host-state([variant="solid"]):disabled {
-      border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
-      background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
-      color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
+      box-shadow: none;
     }
 
     :host {

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

@@ -17,7 +17,10 @@
   </defs>
   <label>
     <input type="radio" $ref="input" .checked="internalChecked" :disabled="disabled" :required="required" :value="value" :name="name">
-    <span class="label"><slot></slot></span>
+    <span class="text">
+      <span class="label"><slot></slot></span>
+      <span class="description" $ref="description" aria-hidden="true"><slot name="description"></slot></span>
+    </span>
   </label>
   <style>
     :host {
@@ -29,11 +32,29 @@
       cursor: pointer;
     }
 
+    /* The label, and under it an optional line saying what the choice means. */
+    .text {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+    }
+
     .label {
       min-inline-size: 0;
       line-height: var(--ui-line-height-md);
     }
 
+    .description {
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+
+    .description:empty {
+      display: none;
+    }
+
     input {
       flex: 0 0 auto;
       inline-size: var(--ui-radio-size, 1.125rem);

package/components/ui-radio/ui-radio.js

@@ -1,4 +1,5 @@
 import { afterFormReset } from "../shared/form-reset.js";
+import { describeInput } from "../shared/describe.js";
 import { trackTrigger } from "../shared/trigger.js";
 
 // `checked` sets the control initially and whenever it changes; the user's changes update the state.
@@ -6,6 +7,7 @@ import { trackTrigger } from "../shared/trigger.js";
 // the native default alone cannot hold it there.
 export default function controller(host) {
   const input = host.refs.input;
+  describeInput(input, host.refs.description);
   const [trigger, stopTracking] = trackTrigger(host);
   let external = host.state.checked;
   host.state.internalChecked = Boolean(external);

package/components/ui-sidebar/ui-sidebar.js

@@ -130,8 +130,10 @@ export default function controller(host) {
     if (!invoker || !element.id || invoker.getAttribute("commandfor") !== element.id) return;
     toggle(triggerOf(invoker));
   };
+  // The sidebar's own toggle event shares the popover's event name and bubbles; hearing it here would
+  // report it again, forever. Only the drawer's own popover ToggleEvent, which has a newState, counts.
   const onPopoverToggle = (event) => {
-    if (!host.state.drawer) return;
+    if (!host.state.drawer || event.target !== element || typeof event.newState !== "string") return;
     host.dispatch("toggle", { open: event.newState === "open", mode: "drawer", trigger: "programmatic" });
   };
 

package/components/ui-switch/ui-switch.html

@@ -14,7 +14,10 @@
   </defs>
   <label>
     <input type="checkbox" role="switch" $ref="input" .checked="internalChecked" :disabled="disabled" :required="required" :name="name" :value="value">
-    <span class="label"><slot></slot></span>
+    <span class="text">
+      <span class="label"><slot></slot></span>
+      <span class="description" $ref="description" aria-hidden="true"><slot name="description"></slot></span>
+    </span>
   </label>
   <style>
     :host {
@@ -26,11 +29,29 @@
       cursor: pointer;
     }
 
+    /* The label, and under it an optional line saying what the choice means. */
+    .text {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+    }
+
     .label {
       min-inline-size: 0;
       line-height: var(--ui-line-height-md);
     }
 
+    .description {
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+
+    .description:empty {
+      display: none;
+    }
+
     input {
       appearance: none;
       -webkit-appearance: none;

package/components/ui-switch/ui-switch.js

@@ -1,4 +1,5 @@
 import { afterFormReset } from "../shared/form-reset.js";
+import { describeInput } from "../shared/describe.js";
 import { trackTrigger } from "../shared/trigger.js";
 
 // `checked` sets the control initially and whenever it changes; the user's changes update the state.
@@ -6,6 +7,7 @@ import { trackTrigger } from "../shared/trigger.js";
 // the native default alone cannot hold it there.
 export default function controller(host) {
   const input = host.refs.input;
+  describeInput(input, host.refs.description);
   const [trigger, stopTracking] = trackTrigger(host);
   let external = host.state.checked;
   host.state.internalChecked = Boolean(external);