@threadlabs/looma 0.32.0 → 0.33.0

package/components/shared/icons.js

@@ -52,6 +52,7 @@ export const icons = {
   "panel-left": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}]],
   "panel-right": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M15 3v18"}]],
   "panel-top": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}]],
+  "paperclip": [["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": [["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"}],["path",{"d":"m15 5 4 4"}]],
   "pilcrow": [["path",{"d":"M13 4v16"}],["path",{"d":"M17 4v16"}],["path",{"d":"M19 4H9.5a4.5 4.5 0 0 0 0 9H13"}]],
   "plus": [["path",{"d":"M5 12h14"}],["path",{"d":"M12 5v14"}]],

package/components/shared/overlay.js

@@ -433,7 +433,7 @@ export function createAnchoredSurface(surface, options = {}) {
     positionAnchoredSurface(surface, rect, { placement: point ? "bottom-start" : placement, gap: gap(), viewportGap, boundary });
   };
   surface.style.position = "fixed";
-  surface.style.margin = "0";
+  surface.style.setProperty("margin", "0", "important");
   // `bare` resets the browser's popover chrome on a surface that has none of its own.
   const presentation = createViewportSurface(surface, { position, bare: options.bare });
   // Resize and scroll events do not report an ancestor's transition or layout shift.

package/components/ui-action-bar/ui-action-bar.html

@@ -23,7 +23,7 @@
       --_ui-action-bar-gap: var(--ui-action-bar-gap);
 
       --_gap: var(--ui-space-2);
-      display: block;
+      display: block !important;
       /* A size container sizes itself from its container, never its content. */
       container-type: inline-size;
       inline-size: 100%;
@@ -34,16 +34,16 @@
     .tertiary,
     .secondary,
     .primary {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--_ui-action-bar-gap, var(--_gap));
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      gap: var(--_ui-action-bar-gap, var(--_gap)) !important;
     }
 
     /* The tertiary group takes the spare space, pushing the rest to the end edge; without it, the
        rest still ends the row. */
     .bar {
-      justify-content: flex-end;
+      justify-content: flex-end !important;
     }
 
     .tertiary {
@@ -53,7 +53,7 @@
     .tertiary:empty,
     .secondary:empty,
     .primary:empty {
-      display: none;
+      display: none !important;
     }
 
     /* A narrow container stacks the actions full width, primary on top: the row turned on its end,
@@ -63,9 +63,9 @@
       .tertiary,
       .secondary,
       .primary {
-        flex-direction: column-reverse;
-        flex-wrap: nowrap;
-        align-items: stretch;
+        flex-direction: column-reverse !important;
+        flex-wrap: nowrap !important;
+        align-items: stretch !important;
       }
 
       .tertiary {
@@ -75,7 +75,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-affordance-scope/ui-affordance-scope.html

@@ -9,7 +9,7 @@
   <span><slot></slot></span>
   <style>
     :host {
-      display: contents;
+      display: contents !important;
       --ui-affordance-scope-engaged: 0;
       --ui-affordance-scope-guide: 1;
     }
@@ -25,7 +25,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-avatar/ui-avatar.html

@@ -60,7 +60,7 @@
 
     :host {
       --_ui-default-icon-size: 1.25rem;
-      display: inline-grid;
+      display: inline-grid !important;
       place-items: center;
       overflow: hidden;
       inline-size: 2.5rem;
@@ -122,9 +122,9 @@
 
     .fallback {
       grid-area: 1 / 1;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       inline-size: 100%;
       block-size: 100%;
     }
@@ -134,21 +134,21 @@
      * Trimming applies to block containers, so the box is a block with centred content. */
     @supports (text-box-trim: trim-both) {
       .fallback {
-        display: block;
+        display: block !important;
         text-align: center;
-        align-content: center;
+        align-content: center !important;
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
     }
 
     [hidden] {
-      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-avatar-group/ui-avatar-group.html

@@ -40,21 +40,21 @@
        * a white gap out of the avatar underneath. */
       --_overlap-shadow: -1px 0 0 0 rgb(0 0 0 / 0.22);
 
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      gap: 0;
+      display: flex !important;
+      align-items: center !important;
+      flex-direction: row !important;
+      gap: 0 !important;
     }
 
     /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
      * component roots outside this style scope. */
     :slotted(*) {
-      margin-inline-start: -0.5rem;
+      margin-inline-start: -0.5rem !important;
       flex-shrink: 0;
     }
 
     :slotted(*:first-child) {
-      margin-inline-start: 0;
+      margin-inline-start: 0 !important;
     }
 
     :host:dir(rtl) {
@@ -62,10 +62,10 @@
     }
 
     .overflow {
-      margin-inline-start: -0.5rem;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      margin-inline-start: -0.5rem !important;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       inline-size: 2.5rem;
       block-size: 2.5rem;
       border-radius: var(--ui-radius-round);
@@ -82,13 +82,13 @@
     }
 
     :host([size="sm"]) .overflow {
-      margin-inline-start: -0.25rem;
+      margin-inline-start: -0.25rem !important;
       inline-size: 1.75rem;
       block-size: 1.75rem;
     }
 
     :host([size="xs"]) .overflow {
-      margin-inline-start: -0.1875rem;
+      margin-inline-start: -0.1875rem !important;
       inline-size: 1.25rem;
       block-size: 1.25rem;
       /* Matches the xs Avatar's initials. */
@@ -97,12 +97,12 @@
     }
 
     .overflow[hidden] {
-      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-avatar-group/ui-avatar-group.js

@@ -9,8 +9,9 @@ export function connect(host) {
     // Small avatars overlap less, so their initials stay clear of the next one.
     const overlap = { xs: "-0.1875rem", sm: "-0.25rem" }[host.props.size.value] ?? "-0.5rem";
     avatars.forEach((avatar, index) => {
-      avatar.style.display = index >= visible ? "none" : "";
-      avatar.style.marginInlineStart = index === 0 ? "0px" : overlap;
+      if (index >= visible) avatar.style.setProperty("display", "none", "important");
+      else avatar.style.removeProperty("display");
+      avatar.style.setProperty("margin-inline-start", index === 0 ? "0px" : overlap, "important");
       // Later avatars darken only their leading edge; the first overlaps nothing.
       avatar.style.boxShadow = index === 0
         ? "var(--ui-avatar-group-edge-ring, none)"

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

@@ -3,8 +3,8 @@
     <prop name="variant" type="keyword" values="solid, subtle, outline, inverse, overlay" default="subtle"
     >Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.
       inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and
-      subtle. overlay inherits the containing filled control's text colour on a faint translucent fill, with a quiet single-pixel boundary and no shadow. Its small circle is
-      20px. When space is constrained, the label truncates with an ellipsis while its full text remains available.</prop>
+      subtle. overlay inherits the containing filled control's text colour on a faint translucent fill, with a quiet single-pixel boundary and no shadow. Its
+      small circle is 20px. When space is constrained, the label truncates with an ellipsis while its full text remains available.</prop>
     <prop name="tone" type="keyword" values="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. For a category rather than a status, set the --ui-badge-color hook on the badge instead: any CSS
@@ -102,14 +102,14 @@
       --_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;
-      gap: var(--ui-space-1);
-      box-sizing: border-box;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      gap: var(--ui-space-1) !important;
+      box-sizing: border-box !important;
       min-inline-size: 0;
       max-inline-size: 100%;
-      padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
+      padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2)) !important;
       border: var(--ui-border-width) solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
       border-radius: var(--ui-radius-round);
       background: var(--_badge-outline-surface);
@@ -124,30 +124,30 @@
     /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
        text stays in the DOM for accessible names and consumers' selected values. */
     .label {
-      display: block;
+      display: block !important;
       min-inline-size: 0;
       overflow: hidden;
       text-overflow: ellipsis;
     }
 
     .label:empty {
-      display: none;
+      display: none !important;
     }
 
     /* Icon content has its own flex item so label ellipsis never clips its strokes. */
     .icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       flex: none;
     }
 
     .icon:empty {
-      display: none;
+      display: none !important;
     }
 
     .icon :slotted(svg) {
-      display: block;
+      display: block !important;
       inline-size: 1em;
       block-size: 1em;
       flex: none;
@@ -158,7 +158,7 @@
       inline-size: 1em;
       block-size: 1em;
       vertical-align: middle;
-      margin-inline-end: var(--ui-space-1);
+      margin-inline-end: var(--ui-space-1) !important;
     }
 
     .label:has(svg) {
@@ -169,15 +169,15 @@
        Vertical ink remains visible so trimming never cuts off ascenders or descenders. */
     @supports (text-box-trim: trim-both) {
       :host {
-        display: inline-block;
+        display: inline-block !important;
         min-block-size: var(--ui-badge-min-block-size, 1.5rem);
         text-align: center;
-        align-content: center;
+        align-content: center !important;
         text-box-trim: none;
       }
       :host:has(.icon:not(:empty)),
       :host:has(.label svg) {
-        display: inline-flex;
+        display: inline-flex !important;
         text-box-trim: none;
       }
       .label:not(:has(svg)) {
@@ -189,12 +189,12 @@
     }
 
     :host([size="xs"]) {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       min-inline-size: 1rem;
       min-block-size: var(--ui-badge-min-block-size, 1rem);
       /* Compact text still needs room at both rounded edges. Fixed marks override this
          padding below; ordinary text badges retain their larger spacing. */
-      padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, var(--ui-space-1));
+      padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, var(--ui-space-1)) !important;
       font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
       line-height: var(--ui-badge-line-height, 1);
     }
@@ -368,14 +368,14 @@
     /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
     :host([shape="square"]) {
       --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
-      display: inline-flex;
-      box-sizing: border-box;
+      display: inline-flex !important;
+      box-sizing: border-box !important;
       flex: none;
       inline-size: var(--_badge-square-size);
       block-size: var(--_badge-square-size);
       min-inline-size: var(--_badge-square-size);
       min-block-size: var(--_badge-square-size);
-      padding: 0;
+      padding: 0 !important;
       border-radius: var(--ui-radius-md);
       text-box-trim: none;
     }
@@ -389,29 +389,29 @@
     }
 
     :host([shape="square"]) .label {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
     }
 
     :host([shape="square"]) .label :slotted(svg) {
-      margin-inline-end: 0;
+      margin-inline-end: 0 !important;
     }
 
     :host([shape="square"]) .label:empty {
-      display: none;
+      display: none !important;
     }
 
     /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
     :host([shape="circle"]) {
       --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
-      display: inline-flex;
+      display: inline-flex !important;
       flex: none;
       inline-size: var(--_badge-circle-size);
       block-size: var(--_badge-circle-size);
       min-inline-size: var(--_badge-circle-size);
       min-block-size: var(--_badge-circle-size);
-      padding: 0;
+      padding: 0 !important;
       border-radius: var(--ui-radius-round);
       text-box-trim: none;
     }
@@ -429,19 +429,19 @@
     }
 
     :host([shape="circle"]) .label {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       line-height: 1;
       text-box-trim: none;
     }
 
     :host([shape="circle"]) .label :slotted(svg) {
-      margin-inline-end: 0;
+      margin-inline-end: 0 !important;
     }
 
     :host([shape="circle"]) .label:empty {
-      display: none;
+      display: none !important;
     }
 
     /* Center capital and numeral ink, rather than the font's ascent/descent line box.
@@ -449,7 +449,7 @@
     @supports (text-box-trim: trim-both) {
       :host([shape="circle"]) .label:not(:has(svg)),
       :host([shape="square"]) .label:not(:has(svg)) {
-        display: block;
+        display: block !important;
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
         overflow: visible;
@@ -459,13 +459,13 @@
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
     :host([shape="dot"]) {
       position: relative;
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       flex: none;
       inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
       block-size: var(--ui-badge-dot-size, var(--ui-space-2));
       min-inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
       min-block-size: var(--ui-badge-dot-size, var(--ui-space-2));
-      padding: 0;
+      padding: 0 !important;
       border-radius: var(--ui-radius-round);
       text-box-trim: none;
     }
@@ -489,7 +489,7 @@
       border-color: transparent;
       border-radius: 0;
       background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
-      padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
+      padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)) !important;
       clip-path: polygon(0 0, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
     }
 
@@ -508,8 +508,8 @@
     }
 
     :host([shape="tag"]):dir(rtl) {
-      padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
-      padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
+      padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2)) !important;
+      padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)) !important;
       clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
     }
 
@@ -537,7 +537,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-breadcrumb-item/ui-breadcrumb-item.html

@@ -11,34 +11,34 @@
     /* One step in a ui-breadcrumbs trail: a link up to that place, or the current view. A chevron leads
        every step but the first. An icon slotted before the name sits with it. */
     :host {
-      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;
       min-inline-size: 0;
-      margin: 0;
+      margin: 0 !important;
     }
 
     .separator {
-      display: inline-flex;
+      display: inline-flex !important;
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);
     }
 
     :host:first-child .separator {
-      display: none;
+      display: none !important;
     }
 
     .content {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ui-space-1);
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-1) !important;
       min-inline-size: 0;
     }
 
     .content > :slotted(a) {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ui-space-1);
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-1) !important;
       color: var(--ui-text-secondary);
       text-decoration: none;
     }
@@ -55,7 +55,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-breadcrumbs/ui-breadcrumbs.html

@@ -7,25 +7,25 @@
     /* Where a view sits: a trail of ui-breadcrumb-item, from the top down to the current view. It wraps
        rather than scrolls, so every step stays reachable. */
     :host {
-      display: block;
+      display: block !important;
       min-inline-size: 0;
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);
     }
 
     ol {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--ui-space-1) var(--ui-space-2);
-      margin: 0;
-      padding: 0;
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      gap: var(--ui-space-1) var(--ui-space-2) !important;
+      margin: 0 !important;
+      padding: 0 !important;
       list-style: none;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>