@threadlabs/looma 0.32.0 → 0.33.0

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

@@ -83,42 +83,42 @@
     :host[popover] {
       position: fixed;
       inset: auto;
-      margin: 0;
+      margin: 0 !important;
     }
 
     :host {
       /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       min-width: min(14rem, calc(100vw - 24px));
       max-width: min(17rem, calc(100vw - 24px));
       max-height: min(28rem, calc(100vh - 24px));
-      padding: var(--ui-space-2);
+      padding: var(--ui-space-2) !important;
       background: var(--ui-surface);
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
+      display: flex !important;
+      flex-direction: column !important;
+      gap: 2px !important;
       overflow-y: auto;
       overscroll-behavior: contain;
       scrollbar-width: thin;
     }
 
     .section {
-      display: flex;
-      flex-direction: column;
-      gap: 3px;
+      display: flex !important;
+      flex-direction: column !important;
+      gap: 3px !important;
     }
 
     :host button {
-      display: flex;
-      align-items: center;
-      gap: var(--ui-space-2);
+      display: flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
       width: 100%;
       text-align: left;
       min-height: 32px;
-      padding: var(--ui-space-2) var(--ui-space-2);
+      padding: var(--ui-space-2) var(--ui-space-2) !important;
       border: none;
       border-radius: var(--ui-radius-sm);
       background: none;
@@ -146,24 +146,24 @@
 
     /* Swatches wrap like words: the row asks for the menu's full width, and a narrower menu fits fewer. */
     .swatches {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 3px;
+      display: flex !important;
+      flex-wrap: wrap !important;
+      gap: 3px !important;
     }
 
     /* Three to a row at the menu's full width; 5rem keeps the longest label, "Default", whole. */
     :host .swatch-button {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ui-space-2);
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
       flex: 1 0 5rem;
       min-width: 5rem;
       max-width: calc((100% - 6px) / 3);
-      padding-inline-end: var(--ui-space-1);
+      padding-inline-end: var(--ui-space-1) !important;
     }
 
     .swatch {
-      display: inline-flex;
+      display: inline-flex !important;
       width: 1rem;
       height: 1rem;
       border-radius: var(--ui-radius-round);
@@ -192,7 +192,7 @@
     }
 
     .heading {
-      padding: var(--ui-space-1) var(--ui-space-2);
+      padding: var(--ui-space-1) var(--ui-space-2) !important;
       font-size: var(--ui-font-size-2xs);
       font-weight: 700;
       letter-spacing: 0.05em;
@@ -203,16 +203,16 @@
     .sep {
       height: 1px;
       background: var(--ui-border-divider);
-      margin: var(--ui-space-1) 0;
+      margin: var(--ui-space-1) 0 !important;
     }
 
     /* Separators divide sections, so none sits above the first. */
     .sep:first-child {
-      display: none;
+      display: none !important;
     }
 
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-editor-table-overlay/ui-editor-table-overlay.html

@@ -199,7 +199,7 @@
   </div>
   <style>
     :host {
-      display: block;
+      display: block !important;
       width: 100%;
       height: 100%;
       overflow: visible;
@@ -238,12 +238,12 @@
 
     .handle {
       position: absolute;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       width: 24px;
       height: 24px;
-      padding: 0;
+      padding: 0 !important;
       border: var(--ui-border-width) solid var(--ui-affordance-near-color, var(--ui-border-strong));
       border-radius: var(--ui-radius-round);
       background: color-mix(in srgb, var(--ui-surface-elevated) 96%, transparent);
@@ -366,7 +366,7 @@
       left: 50%;
       width: max-content;
       max-width: 14rem;
-      padding: var(--ui-space-1) var(--ui-space-2);
+      padding: var(--ui-space-1) var(--ui-space-2) !important;
       border-radius: var(--ui-radius-sm);
       background: var(--ui-text-primary);
       color: var(--ui-surface-elevated);
@@ -395,10 +395,10 @@
     .cell-menu {
       position: absolute;
       z-index: 2;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      padding: 0 !important;
       border: var(--ui-border-width) solid transparent;
       background: transparent;
       color: var(--ui-text-secondary);
@@ -442,7 +442,7 @@
     }
 
     .selector .glyph {
-      display: block;
+      display: block !important;
       width: 14px;
       height: 14px;
       --_ui-default-icon-size: 14px;
@@ -533,11 +533,11 @@
     }
 
     .drop-indicator[hidden] {
-      display: none;
+      display: none !important;
     }
 
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -122,7 +122,7 @@
     .looma-editor__mobile-toolbar-shell :host {
       min-width: max-content;
       min-height: 100%;
-      padding: 0;
+      padding: 0 !important;
       background: transparent;
       border: 0;
       border-radius: 0;
@@ -141,10 +141,10 @@
     }
 
     :host {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ui-space-1);
-      padding: var(--ui-space-1);
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-1) !important;
+      padding: var(--ui-space-1) !important;
       background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: calc(var(--ui-radius-md) + 2 * var(--ui-border-width));
@@ -153,9 +153,9 @@
     }
 
     .group {
-      display: inline-flex;
-      align-items: center;
-      gap: 2px;
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: 2px !important;
       overflow: hidden;
     }
 
@@ -170,10 +170,10 @@
     }
 
     :host button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--ui-space-2);
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      gap: var(--ui-space-2) !important;
       min-height: 32px;
       border: 0;
       border-radius: var(--ui-radius-sm);
@@ -183,7 +183,7 @@
       font-size: var(--ui-font-size-sm);
       font-weight: 500;
       line-height: 1;
-      padding: var(--ui-space-2) var(--ui-space-2);
+      padding: var(--ui-space-2) var(--ui-space-2) !important;
       white-space: nowrap;
     }
 
@@ -219,30 +219,30 @@
     }
 
     .chevron {
-      display: inline-flex;
+      display: inline-flex !important;
       --_ui-default-icon-size: 0.875rem;
     }
 
     :host .icon-button {
       width: 32px;
-      padding-inline: 0;
+      padding-inline: 0 !important;
     }
 
     .menu {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       position: fixed;
       inset: auto;
-      margin: 0;
+      margin: 0 !important;
       min-width: 12rem;
       max-width: min(17rem, calc(100vw - 24px));
-      padding: var(--ui-space-1);
+      padding: var(--ui-space-1) !important;
       background: var(--ui-surface);
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-md);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
+      display: flex !important;
+      flex-direction: column !important;
+      gap: 2px !important;
       z-index: 2;
       overflow-y: auto;
       overscroll-behavior: contain;
@@ -250,13 +250,13 @@
     }
 
     .menu-section + .menu-section {
-      margin-top: var(--ui-space-1);
-      padding-top: var(--ui-space-1);
+      margin-top: var(--ui-space-1) !important;
+      padding-top: var(--ui-space-1) !important;
       border-top: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     .menu-heading {
-      padding: var(--ui-space-1) var(--ui-space-2);
+      padding: var(--ui-space-1) var(--ui-space-2) !important;
       font-size: var(--ui-font-size-2xs);
       font-weight: 700;
       letter-spacing: 0.05em;
@@ -265,21 +265,21 @@
     }
 
     .menu button {
-      display: flex;
-      justify-content: flex-start;
+      display: flex !important;
+      justify-content: flex-start !important;
       width: 100%;
       text-align: left;
     }
 
     .swatches {
-      display: grid;
+      display: grid !important;
       grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 2px;
+      gap: 2px !important;
     }
 
     :host .swatch-button {
-      gap: var(--ui-space-1);
-      justify-content: flex-start;
+      gap: var(--ui-space-1) !important;
+      justify-content: flex-start !important;
     }
 
     .swatch {
@@ -302,7 +302,7 @@
     }
 
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

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

@@ -8,9 +8,9 @@
       position: sticky;
       top: 0;
       z-index: var(--ui-editor-toolbar-z-index, 10);
-      display: flex;
-      align-items: center;
-      padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
+      display: flex !important;
+      align-items: center !important;
+      padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px) !important;
       min-height: var(--ui-editor-toolbar-min-height, 48px);
       background: var(--ui-editor-toolbar-surface, var(--ui-surface));
       border-bottom: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
@@ -19,11 +19,11 @@
     /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
        wrapping into several lines, and a fade at each edge that has more to show says so. */
     .strip {
-      display: flex;
+      display: flex !important;
       flex: 1 1 auto;
-      align-items: center;
-      justify-content: flex-start;
-      gap: var(--ui-editor-toolbar-gap, 2px);
+      align-items: center !important;
+      justify-content: flex-start !important;
+      gap: var(--ui-editor-toolbar-gap, 2px) !important;
       min-width: 0;
       overflow-x: auto;
       overflow-y: hidden;
@@ -32,7 +32,7 @@
     }
 
     .strip::-webkit-scrollbar {
-      display: none;
+      display: none !important;
     }
 
     .strip > :slotted(*) {
@@ -69,17 +69,17 @@
       height: 20px;
       background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
       flex-shrink: 0;
-      margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
+      margin: 0 var(--ui-editor-toolbar-divider-margin, 4px) !important;
     }
 
     :host([floating]) {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       position: relative;
       top: auto;
       width: max-content;
       max-width: min(calc(100vw - 24px), 100%);
       min-height: auto;
-      padding: var(--ui-editor-toolbar-floating-padding, 4px);
+      padding: var(--ui-editor-toolbar-floating-padding, 4px) !important;
       background: color-mix(in srgb, var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%, transparent);
       border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
       border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
@@ -124,7 +124,7 @@
       width: 100%;
       max-width: none;
       min-height: 100%;
-      padding: 0;
+      padding: 0 !important;
       background: transparent;
       border: 0;
       border-radius: 0;
@@ -138,7 +138,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-floating-action-button/ui-floating-action-button.html

@@ -31,7 +31,7 @@
       );
       inline-size: var(--ui-control-min-block-size);
       block-size: var(--ui-control-min-block-size);
-      display: inline-flex;
+      display: inline-flex !important;
       z-index: var(--ui-floating-action-button-z-index, 100);
     }
 
@@ -39,11 +39,11 @@
       appearance: none;
       border: none;
       border-radius: var(--ui-radius-round);
-      margin: 0;
-      padding: 0;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      margin: 0 !important;
+      padding: 0 !important;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       background: var(--ui-accent);
       color: var(--ui-on-accent);
       box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 40%, transparent);
@@ -83,13 +83,13 @@
 
     @media (min-width: 768px) {
       :host([mobileOnly]) {
-        display: none;
+        display: none !important;
       }
     }
 
     /* 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-form-field/ui-form-field.html

@@ -4,8 +4,8 @@
     >Marks the field's control invalid by setting aria-invalid on it. Only while invalid, the error slot appears and becomes part of the control's
       description.</prop>
     <prop name="disabled" type="boolean" default="false"
-    >Disables the field's control: the first input, textarea, or select inside it. The field writes this to the control whenever it updates, so set it here
-      rather than on the control.</prop>
+    >Disables the control named by the label's for attribute, or the first field control inside it. Composite controls supply their focus target and form value.
+      The field writes this to the control whenever it updates, so set it here rather than on the control.</prop>
     <prop name="required" type="boolean" default="false"
     >Marks the field's control required, for native form validation. Like disabled, it is written to the control, so set it here rather than on the control. It
       adds no visual marker; show one in the label if the form needs it.</prop>
@@ -59,10 +59,10 @@
       --_ui-form-field-help-text: var(--ui-form-field-help-text);
       --_ui-form-field-help-font-size: var(--ui-form-field-help-font-size);
 
-      display: grid;
-      gap: var(--ui-space-2);
+      display: grid !important;
+      gap: var(--ui-space-2) !important;
       min-inline-size: var(--ui-form-field-min-inline-size, 0);
-      align-content: start;
+      align-content: start !important;
       color: var(--ui-text-primary);
     }
 
@@ -71,7 +71,7 @@
     .label,
     .help,
     .error {
-      display: contents;
+      display: contents !important;
     }
 
     .label {
@@ -83,19 +83,19 @@
        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);
+      display: flex !important;
+      align-items: start !important;
+      gap: var(--ui-space-1) !important;
     }
 
     .label-action {
-      display: flex;
-      align-items: unsafe center;
+      display: flex !important;
+      align-items: unsafe center !important;
       block-size: 1lh;
     }
 
     .label-action:not(:has(> *)) {
-      display: none;
+      display: none !important;
     }
 
     .help {
@@ -109,11 +109,11 @@
     }
 
     .error {
-      display: none;
+      display: none !important;
     }
 
     :host([invalid]) .error {
-      display: contents;
+      display: contents !important;
     }
 
     /* An error reads in the danger colour, the one the invalid control's border takes. */
@@ -125,7 +125,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-form-field/ui-form-field.js

@@ -25,10 +25,15 @@ export function connect(host) {
   };
   const wire = () => {
     const label = element.querySelector('[slot="label"], label');
-    const input = element.querySelector("input, textarea, select");
+    const selector = "[data-ui-field-control], input:not([type=hidden]), textarea, select";
+    const target = label?.getAttribute("for") ? element.ownerDocument.getElementById(label.getAttribute("for")) : null;
+    const requested = target && element.contains(target) ? (target.matches(selector) ? target : target.querySelector(selector)) : null;
+    const input = requested ?? element.querySelector(selector);
     // A Vue named slot carries no slot attribute, so the help and error regions are read too.
-    const help = element.querySelector(':scope > .help > *, [slot="help"]');
-    const error = element.querySelector(':scope > .error > *, [slot="error"], [role="alert"]');
+    const helpRegion = element.querySelector(':scope > .help');
+    const help = element.querySelector(':scope > .help > *, [slot="help"]') ?? (helpRegion?.textContent.trim() ? helpRegion : null);
+    const errorRegion = element.querySelector(':scope > .error');
+    const error = element.querySelector(':scope > .error > *, [slot="error"], [role="alert"]') ?? (errorRegion?.textContent.trim() ? errorRegion : null);
     if (input !== activeInput) {
       removeOwned(activeInput);
       activeInput = input;
@@ -37,7 +42,7 @@ export function connect(host) {
     if (!input) return;
     if (DEV) warnOnce(warned, fieldProblems(label, input), element);
     if (!input.id) input.id = id("form-field-input");
-    if (label && !label.getAttribute("for")) label.setAttribute("for", input.id);
+    if (label && (!label.getAttribute("for") || target && target !== input && target.contains(input))) label.setAttribute("for", input.id);
     const external = descriptionIds(input).filter((value) => !owned.has(value));
     const described = [];
     if (help) {
@@ -53,6 +58,9 @@ export function connect(host) {
     if (next && input.getAttribute("aria-describedby") !== next) input.setAttribute("aria-describedby", next);
     else if (!next && input.hasAttribute("aria-describedby")) input.removeAttribute("aria-describedby");
     input.disabled = Boolean(host.props.disabled.value);
+    if (input.matches("[data-ui-field-control]")) {
+      for (const value of element.querySelectorAll("[data-ui-field-value]")) value.disabled = input.disabled;
+    }
     input.required = Boolean(host.props.required.value);
     input.setAttribute("aria-invalid", String(Boolean(host.props.invalid.value)));
   };

package/components/ui-grid/ui-grid.html

@@ -24,8 +24,8 @@
     :host {
       --_grid-gap: var(--ui-space-4);
       --_grid-min: 12rem;
-      display: grid;
-      gap: var(--ui-grid-gap, var(--_grid-gap));
+      display: grid !important;
+      gap: var(--ui-grid-gap, var(--_grid-gap)) !important;
       grid-template-columns:
         repeat(
         auto-fit,
@@ -42,7 +42,7 @@
       );
       min-inline-size: 0;
       max-inline-size: 100%;
-      margin: 0;
+      margin: 0 !important;
     }
 
     :host([gap="xs"]) {
@@ -69,7 +69,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-icon/ui-icon.html

@@ -61,6 +61,7 @@
         'panel-left': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M9 3v18' }],
         'panel-right': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M15 3v18' }],
         'panel-top': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M3 9h18' }],
+        'paperclip': [{ tag: 'path', d: 'm16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551' }],
         'pencil': [{ tag: 'path', d: 'M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z' }, { tag: 'path', d: 'm15 5 4 4' }],
         'pilcrow': [{ tag: 'path', d: 'M13 4v16' }, { tag: 'path', d: 'M17 4v16' }, { tag: 'path', d: 'M19 4H9.5a4.5 4.5 0 0 0 0 9H13' }],
         'plus': [{ tag: 'path', d: 'M5 12h14' }, { tag: 'path', d: 'M12 5v14' }],
@@ -122,7 +123,7 @@
          sizes the icons it renders sets --_ui-default-icon-*, which the icon's own hooks override. */
       --_ui-icon-stroke-width: var(--ui-icon-stroke-width, var(--_ui-default-icon-stroke-width));
 
-      display: inline-flex;
+      display: inline-flex !important;
       flex: none;
       inline-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
       block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
@@ -144,7 +145,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>