@threadlabs/looma 0.32.1 → 0.33.0

package/components/ui-color-picker/ui-color-picker.js

@@ -0,0 +1,76 @@
+import { afterFormReset } from "../shared/form-reset.js";
+import { closeOverlay, createAnchoredSurface, openOverlay } from "../shared/overlay.js";
+
+export function connect(host) {
+  const { trigger, editor, colour, hex, red, green, blue, field } = host.refs;
+  const document = trigger.ownerDocument;
+  const id = `ui-color-picker-${Math.random().toString(36).slice(2, 11)}`;
+  editor.id = id;
+  trigger.setAttribute("aria-controls", id);
+  const surface = createAnchoredSurface(editor, { anchor: trigger });
+  surface.hide();
+  let opened = false;
+  let current = "#000000";
+  let external;
+  // A hidden input’s value writes also change defaultValue; reset needs the last valid external colour.
+  let resetValue = "#000000";
+  const valid = value => /^#[0-9a-f]{6}$/i.test(String(value));
+  const paint = value => {
+    current = value.toLowerCase();
+    field.value = current;
+    hex.removeAttribute("aria-invalid");
+    colour.style.backgroundColor = current;
+    trigger.title = current;
+    hex.value = current;
+    [red, green, blue].forEach((input, i) => { input.value = String(parseInt(current.slice(i * 2 + 1, i * 2 + 3), 16)); });
+  };
+  paint(current);
+  const close = reason => {
+    opened = false;
+    trigger.setAttribute("aria-expanded", "false");
+    surface.hide();
+    closeOverlay(document, id);
+    if (reason === "escape") trigger.focus();
+  };
+  const toggle = () => {
+    if (host.props.disabled.value) return;
+    if (opened) { close("action"); return; }
+    opened = true;
+    trigger.setAttribute("aria-expanded", "true");
+    surface.show();
+    openOverlay({ id, modal: false, element: editor, relatedElements: [trigger], dismissible: true, requestClose: close });
+    hex.focus();
+  };
+  const edit = event => {
+    event.stopPropagation();
+    const value = event.currentTarget === hex ? hex.value : "#" + [red, green, blue].map(input => Number(input.value).toString(16).padStart(2, "0")).join("");
+    if (!valid(value)) { hex.setAttribute("aria-invalid", "true"); return; }
+    paint(value);
+    host.dispatch(event.type, { value: current });
+  };
+  const escape = event => {
+    if (event.key === "Escape" && opened) { event.preventDefault(); close("escape"); }
+  };
+  trigger.addEventListener("click", toggle);
+  editor.addEventListener("keydown", escape);
+  for (const input of [hex, red, green, blue]) for (const type of ["input", "change"]) input.addEventListener(type, edit);
+  const stop = host.effect(() => {
+    const value = host.props.value.value;
+    if (value !== external) {
+      external = value;
+      if (valid(value)) {
+        resetValue = String(value).toLowerCase();
+        field.defaultValue = resetValue;
+        paint(value);
+      }
+    }
+    if (host.props.disabled.value && opened) close("disabled");
+  });
+  const stopReset = afterFormReset(field, () => { paint(resetValue); close("reset"); });
+  return () => {
+    stop(); stopReset(); close("disconnect"); surface.destroy();
+    trigger.removeEventListener("click", toggle);
+    editor.removeEventListener("keydown", escape);
+    for (const input of [hex, red, green, blue]) for (const type of ["input", "change"]) input.removeEventListener(type, edit);
+  };
+}

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

@@ -655,8 +655,8 @@
       --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
 
       --_row: var(--ui-control-size-md);
-      display: grid;
-      gap: var(--ui-space-1);
+      display: grid !important;
+      gap: var(--ui-space-1) !important;
       min-inline-size: 0;
       color: var(--ui-text-primary);
       font: inherit;
@@ -669,17 +669,17 @@
     /* The field and anything that annotates it sit on one row; the help button is beside the box,
        not inside it, because a control's box holds its value. */
     .control {
-      display: flex;
-      align-items: center;
-      gap: var(--ui-space-2);
+      display: flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
       min-inline-size: 0;
     }
 
     .field {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       min-block-size: var(--_row);
       flex: 1 1 auto;
-      display: flex;
+      display: flex !important;
       min-inline-size: 0;
       border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-default));
       border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
@@ -694,19 +694,19 @@
         var(--ui-control-focus-halo-shadow);
     }
     .entry {
-      display: flex;
+      display: flex !important;
       flex: 1 1 auto;
       min-inline-size: 0;
     }
     /* A ghost icon button: the affordance is the mark, not a box around it. */
     .help {
       flex: none;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       inline-size: var(--ui-control-size-sm);
       block-size: var(--ui-control-size-sm);
-      padding: 0;
+      padding: 0 !important;
       border: 0;
       border-radius: var(--ui-radius-round);
       background: transparent;
@@ -745,34 +745,34 @@
       width: 100%;
       min-inline-size: 0;
       min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       border: 0;
       border-radius: inherit;
       background: transparent;
       color: inherit;
       font: inherit;
       line-height: var(--ui-line-height-tight);
-      padding: var(--ui-space-2) var(--ui-space-3);
-      margin: 0;
+      padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
+      margin: 0 !important;
       outline: none;
     }
     :host([size="sm"]) {
       --_row: var(--ui-control-size-sm);
     }
     :host([size="sm"]) input {
-      padding: var(--ui-space-1) var(--ui-space-2);
+      padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
       font-size: var(--ui-font-size-sm);
     }
     :host([size="lg"]) {
       --_row: var(--ui-control-size-lg);
     }
     :host([size="lg"]) input {
-      padding: var(--ui-space-3) var(--ui-space-4);
+      padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
       font-size: var(--ui-font-size-md);
     }
     button {
       appearance: none;
-      display: inline-grid;
+      display: inline-grid !important;
       place-items: center;
       align-self: stretch;
       border: 0;
@@ -782,11 +782,11 @@
       font: inherit;
       font-weight: 400;
       min-inline-size: 2rem;
-      padding: 0 var(--ui-space-1);
+      padding: 0 var(--ui-space-1) !important;
       cursor: pointer;
     }
     .affordance-icon {
-      display: block;
+      display: block !important;
       inline-size: var(--ui-icon-size-sm);
       block-size: var(--ui-icon-size-sm);
     }
@@ -811,13 +811,13 @@
       border-color: var(--_ui-combobox-invalid-border, var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active))));
     }
     .popup {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       min-inline-size: 12rem;
       max-inline-size: calc(100vw - 1rem);
       max-block-size: var(--_ui-combobox-max-block-size, 18rem);
       overflow: auto;
-      margin: 0;
-      padding: var(--ui-space-1);
+      margin: 0 !important;
+      padding: var(--ui-space-1) !important;
       border: var(--ui-border-width) solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
       background: var(--_ui-combobox-popup-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
@@ -825,28 +825,28 @@
       box-shadow: var(--_ui-combobox-popup-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
     [hidden] {
-      display: none;
+      display: none !important;
     }
     .option[aria-disabled="true"] .primary,
     .option[aria-disabled="true"] .secondary {
       color: var(--ui-disabled-text);
     }
     .primary {
-      display: block;
+      display: block !important;
       color: var(--_ui-combobox-option-text, inherit);
       font-weight: 500;
     }
     /* A row with a tag or a description: the label and its tag on one line, the description under them. */
     .detail {
-      display: grid;
-      gap: var(--ui-space-0-5);
+      display: grid !important;
+      gap: var(--ui-space-0-5) !important;
       min-inline-size: 0;
     }
     .line {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--ui-space-2);
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
     }
     .description {
       color: var(--ui-text-muted);
@@ -861,7 +861,7 @@
       overflow-wrap: anywhere;
     }
     .group, .popup .message {
-      padding: var(--ui-space-2) var(--ui-space-3);
+      padding: var(--ui-space-2) var(--ui-space-3) !important;
     }
     .sr-only {
       position: absolute;
@@ -900,33 +900,33 @@
     /* Multiple mode keeps one control height. Chips and the input scroll within the entry,
        while the clear and disclosure controls remain fixed at the end of the field. */
     :host([multiple]) .field {
-      align-items: center;
+      align-items: center !important;
       min-block-size: var(--_ui-combobox-item-min-block-size, var(--_row));
-      padding: var(--ui-space-1);
+      padding: var(--ui-space-1) !important;
     }
     :host([multiple]) .entry {
-      align-items: center;
-      gap: var(--ui-space-1);
+      align-items: center !important;
+      gap: var(--ui-space-1) !important;
       overflow-x: auto;
       scrollbar-width: none;
     }
     :host([multiple]) .entry::-webkit-scrollbar {
-      display: none;
+      display: none !important;
     }
     :host([multiple]) input {
       flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
       width: auto;
       min-block-size: 1.75rem;
-      padding: var(--ui-space-0-5) var(--ui-space-1);
+      padding: var(--ui-space-0-5) var(--ui-space-1) !important;
     }
     /* Size variants keep their control height as selections are added. */
     :host([multiple]):host([size="sm"]) .field {
       min-block-size: 0;
-      padding: var(--ui-space-0-5);
+      padding: var(--ui-space-0-5) !important;
     }
     :host([multiple]):host([size="sm"]) input {
       min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
-      padding: 0 var(--ui-space-1);
+      padding: 0 var(--ui-space-1) !important;
     }
     /* A large multiple field starts at the large control height, as sm starts at the small one. */
     :host([multiple]):host([size="lg"]) .field {
@@ -937,12 +937,12 @@
     }
     .item {
       appearance: none;
-      display: inline-flex;
+      display: inline-flex !important;
       flex: none;
       min-inline-size: 0;
       max-inline-size: min(100%, var(--_ui-combobox-item-item-max-inline-size, 12rem));
       overflow: hidden;
-      padding: 0;
+      padding: 0 !important;
       border: 0;
       border-radius: var(--ui-radius-sm);
       background: transparent;
@@ -960,7 +960,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-container/ui-container.html

@@ -25,20 +25,20 @@
     :host {
       --_container-measure: 65ch;
       --_container-gutters: var(--ui-space-4);
-      display: block;
+      display: block !important;
       inline-size: 100%;
       max-inline-size: var(--ui-container-measure, var(--_container-measure));
-      margin-inline: auto;
-      padding-inline: var(--ui-container-gutters, var(--_container-gutters));
+      margin-inline: auto !important;
+      padding-inline: var(--ui-container-gutters, var(--_container-gutters)) !important;
     }
 
     :host([measure="narrow"]) {
       --_container-measure: 45ch;
     }
     :host([fill]) {
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
+      box-sizing: border-box !important;
+      display: flex !important;
+      flex-direction: column !important;
       flex: 1;
       min-inline-size: 0;
       min-block-size: 0;
@@ -58,7 +58,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-context-menu/ui-context-menu.html

@@ -57,17 +57,17 @@
       --_ui-context-menu-shadow: var(--ui-context-menu-shadow);
       --_ui-context-menu-z-index: var(--ui-context-menu-z-index);
 
-      display: contents;
+      display: contents !important;
     }
 
     .menu {
       position: fixed;
       inset: auto;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      padding: var(--ui-space-1);
+      margin: 0 !important;
+      display: flex !important;
+      flex-direction: column !important;
+      box-sizing: border-box !important;
+      padding: var(--ui-space-1) !important;
       background: var(--_ui-context-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       border: var(--ui-border-width) solid var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
@@ -88,7 +88,7 @@
     .menu hr {
       align-self: stretch;
       block-size: 0;
-      margin: var(--ui-space-1) 0;
+      margin: var(--ui-space-1) 0 !important;
       border: 0;
       border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
@@ -107,7 +107,7 @@
 
     .menu[hidden],
     .menu[popover]:not(:popover-open) {
-      display: none;
+      display: none !important;
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -118,7 +118,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-cover/ui-cover.html

@@ -9,15 +9,15 @@
     /* A layout primitive that centres its content in the space, both ways, with room around it: the
        frame for a view that is one card or one message. */
     :host {
-      display: flex;
-      flex-direction: column;
+      display: flex !important;
+      flex-direction: column !important;
       /* Safe: a child wider than the cover keeps its start edge in view instead of overflowing both ways. */
-      align-items: safe center;
-      justify-content: center;
-      gap: var(--ui-space-6);
-      box-sizing: border-box;
+      align-items: safe center !important;
+      justify-content: center !important;
+      gap: var(--ui-space-6) !important;
+      box-sizing: border-box !important;
       min-block-size: 100dvh;
-      padding: var(--ui-space-6) var(--ui-space-4);
+      padding: var(--ui-space-6) var(--ui-space-4) !important;
     }
 
     :host([size="fill"]) {
@@ -27,7 +27,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-description-item/ui-description-item.html

@@ -9,14 +9,14 @@
   <style>
     /* One term and its value in a ui-description-list, laid out by the list's layout. */
     :host {
-      display: var(--_ui-description-display, grid);
+      display: var(--_ui-description-display, grid) !important;
       grid-column: var(--_ui-description-column, 1 / -1);
       grid-template-columns: subgrid;
-      flex-direction: column;
-      align-items: var(--_ui-description-align, baseline);
-      gap: var(--ui-space-1) var(--ui-space-6);
+      flex-direction: column !important;
+      align-items: var(--_ui-description-align, baseline) !important;
+      gap: var(--ui-space-1) var(--ui-space-6) !important;
       min-inline-size: 0;
-      padding: var(--_ui-description-padding, 0);
+      padding: var(--_ui-description-padding, 0) !important;
       border-width: var(--_ui-description-border-width, 0);
       border-style: solid;
       border-color: var(--_ui-description-border-color, var(--ui-border-default));
@@ -29,7 +29,7 @@
     }
 
     dd {
-      margin: 0;
+      margin: 0 !important;
       min-inline-size: 0;
       color: var(--ui-text-primary);
       font-weight: var(--ui-font-medium);
@@ -40,7 +40,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-description-list/ui-description-list.html

@@ -21,11 +21,11 @@
       --_min: 10rem;
       --_track: var(--_min);
       --_tile-padding: var(--ui-space-3);
-      display: grid;
+      display: grid !important;
       grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
-      gap: var(--_gap) var(--_column-gap);
+      gap: var(--_gap) var(--_column-gap) !important;
       min-inline-size: 0;
-      margin: 0;
+      margin: 0 !important;
     }
 
     /* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
@@ -78,7 +78,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-dialog/ui-dialog.html

@@ -80,17 +80,17 @@
 
       position: fixed;
       inset: 0;
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       inline-size: min(
         calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
         var(--ui-dialog-max-width, var(--_ui-dialog-size, 440px))
       );
       max-inline-size: none;
       max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
-      margin: auto;
-      padding: 0;
+      margin: auto !important;
+      padding: 0 !important;
       overflow: hidden;
-      flex-direction: column;
+      flex-direction: column !important;
       background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       border: var(--ui-border-width) solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
@@ -108,7 +108,7 @@
     }
 
     :host[open] {
-      display: flex;
+      display: flex !important;
       visibility: visible;
       pointer-events: auto;
       opacity: 1;
@@ -129,36 +129,36 @@
       inline-size: 100%;
       block-size: 100dvh;
       max-block-size: none;
-      margin: 0;
+      margin: 0 !important;
       border-radius: var(--ui-dialog-radius, 0);
     }
 
     :host([alert]) .close {
-      display: none;
+      display: none !important;
     }
 
     /* Own the layout wrapper; nested component roots are outside these scoped rules. */
     header {
-      display: flex;
-      align-items: center;
-      gap: var(--ui-space-3);
+      display: flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-3) !important;
       flex: none;
       /* The title's ink sits inside its line box and the taller close target. Balance that
          visible top inset against the action row's bottom inset, not just the boxes. */
-      padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
+      padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5) !important;
     }
 
     /* Alerts have no close target to add height above the title. */
     :host([alert]) header {
-      padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
+      padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3) !important;
     }
 
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
     :host .title {
       flex: 1;
       min-inline-size: 0;
-      margin: 0;
-      padding: 0;
+      margin: 0 !important;
+      padding: 0 !important;
       border: 0;
       color: var(--ui-text-primary);
       letter-spacing: normal;
@@ -168,13 +168,13 @@
     }
 
     .close {
-      display: inline-grid;
+      display: inline-grid !important;
       place-items: center;
       flex: none;
-      margin-inline-start: auto;
+      margin-inline-start: auto !important;
       inline-size: var(--ui-control-size-sm);
       block-size: var(--ui-control-size-sm);
-      padding: 0;
+      padding: 0 !important;
       border: 0;
       border-radius: var(--ui-radius-round);
       background: transparent;
@@ -223,24 +223,24 @@
     }
 
     .body {
-      display: flex;
-      flex-direction: column;
+      display: flex !important;
+      flex-direction: column !important;
       flex: 1 1 auto;
       min-block-size: 0;
-      padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
+      padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5) !important;
     }
 
     footer {
-      display: flex;
+      display: flex !important;
       flex: none;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      gap: var(--ui-space-2);
-      padding: 0 var(--ui-space-5) var(--ui-space-5);
+      flex-wrap: wrap !important;
+      justify-content: flex-end !important;
+      gap: var(--ui-space-2) !important;
+      padding: 0 var(--ui-space-5) var(--ui-space-5) !important;
     }
 
     footer:empty {
-      display: none;
+      display: none !important;
     }
 
     @keyframes ui-dialog-enter {