@threadlabs/looma 0.15.1 → 0.15.3

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

@@ -5,7 +5,8 @@
       Neutral looks the same in solid and subtle.</prop>
     <prop name="tone" type="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
-      mark a status, so match the tone to what the badge says.</prop>
+      mark a status, so match the tone to what the badge says. For a category rather than a status, set the --ui-badge-color hook on the badge instead: any CSS
+      colour, which overrides the tone.</prop>
     <prop name="shape" type="pill | tag" default="pill"
     >Silhouette. pill is rounded at both ends; tag is a label: flat at the start and coming to a point at the end, for a tag or a chosen chip.</prop>
   </defs>
@@ -16,6 +17,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-badge-color {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-badge-font-size {
       syntax: "*";
       inherits: false;
@@ -58,17 +63,26 @@
       --_badge-text: var(--ui-text-secondary);
       /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
       --_badge-border: var(--ui-surface-subtle);
-      --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-surface));
+      /* --ui-badge-color derives a wash and an ink from one colour, between the tone and the explicit
+         surface, text, and border hooks. Each value is invalid, so the tone shows, while it is unset. The
+         mixes keep 4.5:1 text contrast for any colour, in a light theme or a dark one. */
+      --_ui-badge-color: var(--ui-badge-color);
+      --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 15%, var(--ui-surface-default));
+      --_badge-color-ink: color-mix(in oklab, var(--_ui-badge-color) 35%, var(--ui-text-primary));
+      --_badge-color-surface: var(--_badge-color-wash);
+      --_badge-color-border: var(--_badge-color-wash);
+      --_badge-color-text: var(--_badge-color-ink);
+      --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-color-surface, var(--_badge-surface)));
 
       display: inline-flex;
       align-items: center;
       justify-content: center;
       max-width: 100%;
       padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
-      border: 1px solid var(--ui-badge-border, var(--_badge-border));
+      border: 1px solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
       border-radius: var(--ui-radius-round);
       background: var(--_badge-outline-surface);
-      color: var(--ui-badge-text, var(--_badge-text));
+      color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-text)));
       font-family: var(--ui-font-family-sans);
       font-size: var(--ui-badge-font-size, var(--ui-font-size-sm));
       font-weight: var(--ui-badge-font-weight, var(--ui-font-medium));
@@ -150,10 +164,21 @@
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
+    /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
+       invalid while the hook is unset. */
+    :host-state([variant="solid"]) {
+      --_badge-color-surface: var(--_badge-color-ink);
+      --_badge-color-border: var(--_badge-color-ink);
+      --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
+    }
+
     :host-state([variant="outline"]) {
       --_badge-surface: var(--ui-surface-default);
       --_badge-border: var(--ui-border-strong);
       --_badge-text: var(--ui-text-secondary);
+      /* An outline colour keeps the surface and draws its edge and text in the ink. */
+      --_badge-color-surface: initial;
+      --_badge-color-border: var(--_badge-color-ink);
     }
 
     :host-state([variant="outline"][tone="accent"]) {
@@ -204,7 +229,7 @@
     :host-state([variant="outline"][shape="tag"]) {
       position: relative;
       isolation: isolate;
-      background: var(--ui-badge-border, var(--_badge-border));
+      background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
     }
 
     :host-state([variant="outline"][shape="tag"])::before {

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

@@ -16,7 +16,7 @@
       this value.</prop>
     <prop
       name="items"
-      type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }))"
+      type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }))"
     >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
@@ -73,7 +73,7 @@
       it.</prop>
     <state
       name="internalItems"
-      type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }))"
+      type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }))"
       :value="[]"
     ></state>
     <state name="raw" :value="''"></state>
@@ -82,7 +82,7 @@
     <state name="expanded" :value="false"></state>
     <state
       name="rows"
-      type="list(object({ id: string, value: string, label: string, group?: string, disabled: boolean, selected: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }))"
+      type="list(object({ id: string, value: string, label: string, group?: string, disabled: boolean, selected: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }))"
       :value="[]"
     ></state>
     <state name="active" :value="-1"></state>
@@ -97,7 +97,7 @@
     <state name="submitted" :value="''"></state>
     <state
       name="groups"
-      type="list(object({ name: string, role: group | presentation, label: string | null, rows: list(object({ id: string, value: string, label: string, group?: string, disabled: boolean, selected: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }), index: integer, labelledBy: string | null, detail: string | null })) }))"
+      type="list(object({ name: string, role: group | presentation, label: string | null, rows: list(object({ id: string, value: string, label: string, group?: string, disabled: boolean, selected: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }), index: integer, labelledBy: string | null, detail: string | null })) }))"
       :value="[]"
     ></state>
     <state name="creatable" :value="false"></state>
@@ -108,15 +108,15 @@
     <event name="query-change" type="object({ query: string, display: string, trigger: keyboard | pointer | programmatic })"></event>
     <event
       name="value-change"
-      type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic }) | list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }))"
+      type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic }) | list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }))"
     ></event>
     <event
       name="free-entry"
-      type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })"
+      type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })"
     ></event>
     <event
       name="create-entry"
-      type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })"
+      type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })"
     ></event>
     <event
       name="validation-change"
@@ -124,15 +124,15 @@
     ></event>
     <event
       name="options-change"
-      type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }))"
+      type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }))"
     ></event>
     <event
       name="add-item"
-      type="object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }), index: integer, trigger: keyboard | pointer | programmatic })"
+      type="object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }), index: integer, trigger: keyboard | pointer | programmatic })"
     ></event>
     <event
       name="remove-item"
-      type="object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }), index: integer, trigger: keyboard | pointer | programmatic })"
+      type="object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }), 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>
@@ -246,7 +246,10 @@
               <span $if="row.detail" class="detail">
                 <span class="line">
                   <span class="primary" :id="format('%s-option-%s-label', uid, row.index)" $value="row.label"></span>
-                  <ui-badge $if="row.tag" :tone="row.tag.tone"><span :id="format('%s-option-%s-tag', uid, row.index)" $value="row.tag.label"></span></ui-badge>
+                  <ui-badge $if="row.tag" :tone="row.tag.tone" style:--ui-badge-color="row.tag.color"><span
+                      :id="format('%s-option-%s-tag', uid, row.index)"
+                      $value="row.tag.label"
+                    ></span></ui-badge>
                 </span>
                 <span $if="row.description" class="description" :id="format('%s-option-%s-description', uid, row.index)" $value="row.description"></span>
               </span>

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

@@ -9,7 +9,7 @@ let comboboxes = 0;
 // it would run into its label before JavaScript. A row without them keeps the declared shape exactly.
 function authoredOptions(container) {
   return Array.from(container.querySelectorAll("option")).map((option, index) => {
-    const { description, tag, tagTone } = option.dataset;
+    const { description, tag, tagTone, tagColor } = option.dataset;
     return {
       id: option.id || option.value || `option-${index}`,
       value: option.value,
@@ -17,7 +17,7 @@ function authoredOptions(container) {
       group: option.closest("optgroup")?.label || undefined,
       disabled: option.disabled,
       ...(description ? { description } : {}),
-      ...(tag ? { tag: tagTone ? { label: tag, tone: tagTone } : { label: tag } } : {}),
+      ...(tag ? { tag: { label: tag, ...(tagTone ? { tone: tagTone } : {}), ...(tagColor ? { color: tagColor } : {}) } } : {}),
     };
   });
 }

package/components/ui-form-field/ui-form-field.html

@@ -11,7 +11,10 @@
       adds no visual marker; show one in the label if the form needs it.</prop>
   </defs>
   <div>
-    <div class="label"><slot name="label"></slot></div>
+    <div class="label">
+      <slot name="label"></slot>
+      <span class="label-action"><slot name="label-action"></slot></span>
+    </div>
     <slot></slot>
     <div class="help"><slot name="help"></slot></div>
     <div class="error"><slot name="error"></slot></div>
@@ -52,6 +55,25 @@
       font-size: var(--ui-font-size-sm);
     }
 
+    /* A label action, such as a small help button, sits after the label text in a box one line
+       tall, centred on the first line and overflowing it. A button taller than a line of label
+       text then never makes this field's label row taller than its neighbours' in a grid row. */
+    .label:has(> .label-action > *) {
+      display: flex;
+      align-items: start;
+      gap: var(--ui-space-1);
+    }
+
+    .label-action {
+      display: flex;
+      align-items: unsafe center;
+      block-size: 1lh;
+    }
+
+    .label-action:not(:has(> *)) {
+      display: none;
+    }
+
     .help {
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);