@threadlabs/looma 0.32.0 → 0.33.0

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

@@ -27,7 +27,8 @@
     >The idle marker of an anticipatory button: dot for contextual actions, or a slim neutral rounded bar for a panel-edge control. The icon appears on hover or
       keyboard focus; touch always shows the icon.</prop>
     <prop name="revealed" type="boolean" default="false"
-    >Keeps an anticipatory button visible while its context is active, such as a selected block or an open popup. It does not imply a pressed or expanded state.</prop>
+    >Keeps an anticipatory button visible while its context is active, such as a selected block or an open popup. It does not imply a pressed or expanded
+      state.</prop>
     <prop name="round" type="boolean" default="false">Use a fully circular shape.</prop>
   </defs>
   <button
@@ -135,7 +136,7 @@
       --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
       --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
 
-      display: inline-flex;
+      display: inline-flex !important;
       color: var(--ui-text-secondary);
     }
 
@@ -223,22 +224,22 @@
       block-size: var(--ui-icon-button-size, var(--_size));
       min-inline-size: var(--ui-icon-button-size, var(--_size));
       min-block-size: var(--ui-icon-button-size, var(--_size));
-      padding: 0;
-      margin: 0;
+      padding: 0 !important;
+      margin: 0 !important;
       border: var(--ui-border-width) solid transparent;
       border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
       background-color: var(--ui-icon-button-surface, transparent);
       color: inherit;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       cursor: pointer;
       transition:
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         color var(--ui-motion-fast) var(--ui-motion-ease),
         box-shadow var(--ui-motion-base) var(--ui-motion-ease),
-        scale var(--ui-motion-fast) var(--ui-motion-ease);
+        scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease);
     }
 
     @media (hover: none), (pointer: coarse) {
@@ -368,7 +369,7 @@
     }
 
     :host:active:enabled:not([aria-disabled="true"]) {
-      scale: var(--ui-icon-button-active-scale, 0.96);
+      scale: var(--ui-icon-button-active-scale, var(--ui-press-scale, 0.96));
     }
 
     :is(:host([loading]), :host([pending])) {
@@ -376,13 +377,13 @@
     }
 
     .content {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
     }
 
     :is(:host([loading]), :host([pending])) .content {
-      display: none;
+      display: none !important;
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -470,7 +471,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-image/ui-image.html

@@ -32,24 +32,24 @@
   </figure>
   <style>
     :host {
-      display: flex;
-      justify-content: flex-start;
-      box-sizing: border-box;
+      display: flex !important;
+      justify-content: flex-start !important;
+      box-sizing: border-box !important;
       max-inline-size: 100%;
       min-inline-size: 0;
-      margin: 0;
-      padding: var(--ui-space-3) 0;
+      margin: 0 !important;
+      padding: var(--ui-space-3) 0 !important;
     }
     :host([placement="center"]) {
-      justify-content: center;
+      justify-content: center !important;
     }
     :host([placement="wrap-left"]) {
       float: left;
-      padding-inline-end: var(--ui-space-4);
+      padding-inline-end: var(--ui-space-4) !important;
     }
     :host([placement="wrap-right"]) {
       float: right;
-      padding-inline-start: var(--ui-space-4);
+      padding-inline-start: var(--ui-space-4) !important;
     }
     :host:is(:host([placement="wrap-left"]), :host([placement="wrap-right"])) {
       inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
@@ -71,10 +71,10 @@
       border-radius: var(--ui-radius-md);
     }
     .frame img, .frame :slotted(img) {
-      display: block;
+      display: block !important;
       max-inline-size: 100%;
       block-size: auto;
-      margin: 0;
+      margin: 0 !important;
       border-radius: inherit;
     }
     :host[data-resizing] .frame img, :host[data-resizing] .frame :slotted(img) {
@@ -89,7 +89,7 @@
       z-index: 1;
       inline-size: 24px;
       block-size: 24px;
-      padding: 0;
+      padding: 0 !important;
       border: 0;
       background: transparent;
       touch-action: none;
@@ -127,16 +127,16 @@
       cursor: nwse-resize;
     }
     .handles[hidden], :host[hidden] {
-      display: none;
+      display: none !important;
     }
     @media (max-width: 767px) {
       :host:is(:host([placement="wrap-left"]), :host([placement="wrap-right"])) {
         float: none;
         inline-size: 100%;
-        padding-inline: 0;
+        padding-inline: 0 !important;
       }
       :host:is(:host([placement="wrap-left"]), :host([placement="wrap-right"])) .handles {
-        display: none;
+        display: none !important;
       }
     }
     @media (pointer: coarse) {

package/components/ui-input/ui-input.html

@@ -96,15 +96,15 @@
     }
 
     :host {
-      box-sizing: border-box;
-      display: inline-block;
+      box-sizing: border-box !important;
+      display: inline-block !important;
       inline-size: var(--ui-input-inline-size, 100%);
       min-inline-size: 0;
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-md)));
-      margin: 0;
-      padding: var(--ui-space-2) var(--ui-space-3);
+      margin: 0 !important;
+      padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
       appearance: none;
-      padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3));
+      padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3)) !important;
       border: var(--ui-input-border-width, var(--_ui-default-input-border-width, var(--ui-border-width))) solid
         var(--ui-input-border, var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong))));
       border-radius: var(--ui-input-radius, var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md))));
@@ -122,13 +122,13 @@
     /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
     :host([size="sm"]) {
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-sm)));
-      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"]) {
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-lg)));
-      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);
     }
 
@@ -215,7 +215,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-input-group/ui-input-group.html

@@ -65,9 +65,9 @@
       --_ui-default-textarea-radius: 0;
       --_ui-default-textarea-surface: transparent;
 
-      display: flex;
-      align-items: stretch;
-      box-sizing: border-box;
+      display: flex !important;
+      align-items: stretch !important;
+      box-sizing: border-box !important;
       inline-size: 100%;
       min-inline-size: 0;
       min-block-size: var(--ui-control-size-md);
@@ -152,16 +152,16 @@
     }
 
     .field {
-      display: flex;
+      display: flex !important;
       flex: 1;
       min-inline-size: 0;
     }
 
     .affix {
-      display: inline-flex;
+      display: inline-flex !important;
       flex: none;
-      align-items: center;
-      padding-inline: var(--ui-space-2);
+      align-items: center !important;
+      padding-inline: var(--ui-space-2) !important;
       color: var(--ui-text-muted);
       font-family: var(--ui-font-family-mono);
       font-size: var(--ui-font-size-sm);
@@ -186,7 +186,7 @@
       --_ui-default-input-padding-inline-start: var(--ui-space-2);
     }
     :host([prefixKind="icon"]) .affix:first-child {
-      padding-inline-end: 0;
+      padding-inline-end: 0 !important;
       border-inline-end: 0;
       background: transparent;
     }
@@ -194,15 +194,15 @@
     /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
        small button sits inside it with the difference split evenly, and the field keeps its height. */
     .action {
-      display: flex;
+      display: flex !important;
       flex: none;
-      align-items: center;
-      padding-inline: var(--ui-space-1);
+      align-items: center !important;
+      padding-inline: var(--ui-space-1) !important;
     }
 
     /* Multiline text owns the first row; its action remains inside the same frame below it. */
     :host([multiline]) {
-      display: grid;
+      display: grid !important;
       grid-template-columns: auto minmax(0, 1fr) auto;
     }
 
@@ -212,9 +212,9 @@
 
     :host([multiline]) .action {
       grid-column: 1 / -1;
-      justify-content: end;
-      padding: var(--ui-space-2);
-      padding-block-start: 0;
+      justify-content: end !important;
+      padding: var(--ui-space-2) !important;
+      padding-block-start: 0 !important;
     }
 
     /* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
@@ -232,17 +232,17 @@
       grid-row: 1;
       align-self: start;
       justify-self: end;
-      padding: var(--ui-space-2);
+      padding: var(--ui-space-2) !important;
     }
 
     .affix:empty,
     .action:empty {
-      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-list/ui-list.html

@@ -31,19 +31,19 @@
     :host {
       --_list-gap: var(--ui-list-gap, var(--ui-space-1));
       --_list-min-item-width: var(--ui-list-min-item-width, 14rem);
-      display: flex;
-      flex-direction: column;
+      display: flex !important;
+      flex-direction: column !important;
       inline-size: 100%;
-      gap: var(--_list-gap);
+      gap: var(--_list-gap) !important;
       min-inline-size: 0;
-      margin: 0;
-      padding: 0;
+      margin: 0 !important;
+      padding: 0 !important;
       list-style: none;
     }
 
     :host([as="ol"]),
     :host([markers="disc"]) {
-      padding-inline-start: var(--ui-space-5);
+      padding-inline-start: var(--ui-space-5) !important;
     }
 
     :host([as="ol"]) {
@@ -55,16 +55,16 @@
     }
 
     :host > :slotted(li) {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       min-inline-size: 0;
-      padding: var(--_ui-list-native-padding-block, var(--ui-space-2)) var(--_ui-list-native-padding-inline, var(--ui-space-3));
+      padding: var(--_ui-list-native-padding-block, var(--ui-space-2)) var(--_ui-list-native-padding-inline, var(--ui-space-3)) !important;
       border-radius: var(--ui-radius-md);
       color: var(--ui-text-primary);
       list-style: inherit;
     }
 
     :host > :slotted(li.card) {
-      padding: var(--_ui-list-native-padding-block, var(--ui-space-3)) var(--_ui-list-native-padding-inline, var(--ui-space-4));
+      padding: var(--_ui-list-native-padding-block, var(--ui-space-3)) var(--_ui-list-native-padding-inline, var(--ui-space-4)) !important;
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
@@ -84,13 +84,13 @@
 
     :host([layout="grid"]) {
       --_list-gap: var(--ui-list-gap, var(--ui-space-3));
-      display: grid;
+      display: grid !important;
       grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));
     }
 
     /* 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-list-item/ui-list-item.html

@@ -59,22 +59,22 @@
       --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
 
       position: relative;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      gap: var(--ui-list-item-gap, var(--ui-space-3));
+      box-sizing: border-box !important;
+      display: flex !important;
+      align-items: center !important;
+      gap: var(--ui-list-item-gap, var(--ui-space-3)) !important;
       min-inline-size: 0;
       min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
-      padding-block: var(--ui-list-item-padding-block, var(--_ui-list-item-padding-block, var(--ui-space-2)));
-      padding-inline: var(--ui-list-item-padding-inline, var(--_ui-list-item-padding-inline, var(--ui-space-3)));
+      padding-block: var(--ui-list-item-padding-block, var(--_ui-list-item-padding-block, var(--ui-space-2))) !important;
+      padding-inline: var(--ui-list-item-padding-inline, var(--_ui-list-item-padding-inline, var(--ui-space-3))) !important;
       border-radius: var(--ui-selection-radius);
       color: var(--ui-text-primary);
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     :host([variant="card"]) {
-      padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
-      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+      padding-block: var(--ui-list-item-padding-block, var(--ui-space-3)) !important;
+      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4)) !important;
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
@@ -106,10 +106,10 @@
 
     .leading,
     .trailing {
-      display: inline-flex;
+      display: inline-flex !important;
       flex: none;
-      align-items: center;
-      gap: var(--ui-space-2);
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
     }
 
     .leading {
@@ -136,16 +136,16 @@
     }
 
     .content {
-      display: flex;
+      display: flex !important;
       flex: 1;
-      flex-direction: column;
-      gap: var(--ui-space-0-5, 2px);
+      flex-direction: column !important;
+      gap: var(--ui-space-0-5, 2px) !important;
       min-inline-size: 0;
     }
 
     .title,
     .description {
-      display: block;
+      display: block !important;
       min-inline-size: 0;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -166,7 +166,7 @@
 
     /* Keep identity and disclosure marks beside the first line, even with a long description. */
     :host([align="title"]) {
-      align-items: flex-start;
+      align-items: flex-start !important;
     }
 
     :host([align="title"]) .leading,
@@ -201,7 +201,7 @@
     .leading:empty,
     .description:empty,
     .trailing:empty {
-      display: none;
+      display: none !important;
     }
 
     @media (forced-colors: active) {
@@ -217,7 +217,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-listbox/ui-listbox.html

@@ -101,12 +101,12 @@
 
     :host {
       position: relative;
-      box-sizing: border-box;
-      display: block;
+      box-sizing: border-box !important;
+      display: block !important;
       inline-size: 100%;
       min-inline-size: 0;
-      margin: 0;
-      padding: var(--ui-space-1);
+      margin: 0 !important;
+      padding: var(--ui-space-1) !important;
       border: var(--ui-border-width) solid var(--ui-listbox-border, var(--ui-control-border));
       border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-listbox-surface, var(--ui-control-surface));
@@ -119,13 +119,13 @@
 
     /* Its own box around the nested Scroll Area, which it shrinks into so the choices scroll. */
     .choices {
-      display: flex;
-      flex-direction: column;
+      display: flex !important;
+      flex-direction: column !important;
       max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
     }
 
     :host:not([data-enhanced]) {
-      padding: 0;
+      padding: 0 !important;
       border: 0;
       background: transparent;
       box-shadow: none;
@@ -133,11 +133,11 @@
 
     :host:not([data-enhanced]) .choices,
     :host[data-enhanced] .fallback {
-      display: none;
+      display: none !important;
     }
 
     .fallback {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       inline-size: 100%;
       font: inherit;
     }
@@ -171,7 +171,7 @@
     }
 
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

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

@@ -2,7 +2,8 @@
   <defs>
     <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
     >Compact trades padding and type size for rows that fit more on screen.</prop>
-    <prop name="icons" type="boolean" default="false">Reserves a fixed icon column in every item, including items without an icon. Supply item icons through their icon slot.</prop>
+    <prop name="icons" type="boolean" default="false"
+    >Reserves a fixed icon column in every item, including items without an icon. Supply item icons through their icon slot.</prop>
     <prop name="size" type="keyword" values="sm, md" default="md"
     >sm sizes the menu to a small trigger, such as an xs or sm button: smallest text, short rows, a small check, and a narrower minimum width. md is the
       standard size.</prop>
@@ -61,8 +62,8 @@
       --_ui-default-menu-item-padding-inline: var(--ui-space-2);
       --_ui-default-menu-item-font-size: var(--ui-font-size-sm);
       --_ui-default-menu-item-radius: var(--ui-radius-sm);
-      padding: var(--ui-space-1);
-      gap: 0;
+      padding: var(--ui-space-1) !important;
+      gap: 0 !important;
     }
 
     /* Small follows its trigger down: an item's own hooks still win. */
@@ -74,8 +75,8 @@
       --_ui-default-menu-item-min-block-size: 1.5rem;
       --_ui-default-menu-indicator-size: 0.75rem;
       min-inline-size: min(8rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
-      padding: var(--ui-space-1);
-      gap: 0;
+      padding: var(--ui-space-1) !important;
+      gap: 0 !important;
     }
 
     :host([icons]) {
@@ -95,13 +96,13 @@
       --_ui-default-menu-item-min-block-size: initial;
       --_ui-default-menu-indicator-size: initial;
       --_ui-default-menu-icon-display: none;
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
+      display: flex !important;
+      flex-direction: column !important;
+      box-sizing: border-box !important;
       inline-size: max-content;
       min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
       max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
-      padding: 0;
+      padding: 0 !important;
       border: 0;
       outline: 0;
       border-radius: 0;
@@ -111,11 +112,11 @@
     }
 
     .surface {
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
+      display: flex !important;
+      flex-direction: column !important;
+      box-sizing: border-box !important;
       max-inline-size: inherit;
-      padding: var(--ui-space-1);
+      padding: var(--ui-space-1) !important;
       background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       border: var(--ui-border-width) solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
@@ -127,19 +128,19 @@
     .surface 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);
     }
 
     :host(:not(:state(internalOpen))):not(:host([inline])) {
-      display: none;
+      display: none !important;
     }
 
     :host[popover] {
       position: fixed;
       inset: auto;
-      margin: 0;
+      margin: 0 !important;
       overflow: visible;
       max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
       opacity: 0;
@@ -164,7 +165,7 @@
     }
 
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
 
     @media (prefers-reduced-motion: reduce) {

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

@@ -8,20 +8,20 @@
   </div>
   <style>
     :host {
-      display: flex;
-      flex-direction: column;
+      display: flex !important;
+      flex-direction: column !important;
       min-inline-size: 0;
     }
 
     .heading {
-      padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
+      padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1) !important;
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);
       font-weight: var(--ui-font-semibold);
     }
 
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>