@threadlabs/looma 0.32.0 → 0.33.0

package/styles/ui-floating-action-button.css

@@ -30,7 +30,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);
     }
 
@@ -38,11 +38,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);
@@ -76,13 +76,13 @@
 
     @media (min-width: 768px) {
       :scope:where([data-component~="ui-floating-action-button"])[data-ui-floating-action-button-state~="mobileOnly"] {
-        display: none;
+        display: none !important;
       }
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-floating-action-button"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-floating-action-button"]) to ([data-component]) {

package/styles/ui-form-field.css

@@ -46,10 +46,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);
     }
 
@@ -58,7 +58,7 @@
     .label,
     .help,
     .error {
-      display: contents;
+      display: contents !important;
     }
 
     .label {
@@ -70,19 +70,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 {
@@ -92,18 +92,18 @@
     }
 
     .error {
-      display: none;
+      display: none !important;
     }
 
     :scope:where([data-component~="ui-form-field"])[data-ui-form-field-state~="invalid"] .error {
-      display: contents;
+      display: contents !important;
     }
 
     /* An error reads in the danger colour, the one the invalid control's border takes. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-form-field"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-form-field"]) to ([data-component]) {

package/styles/ui-grid.css

@@ -20,8 +20,8 @@
     :scope:where([data-component~="ui-grid"]) {
       --_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,
@@ -38,7 +38,7 @@
       );
       min-inline-size: 0;
       max-inline-size: 100%;
-      margin: 0;
+      margin: 0 !important;
     }
 
     :scope:where([data-component~="ui-grid"])[data-ui-grid-state~="gap=xs"] {
@@ -65,7 +65,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-grid"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-grid"]) to ([data-component]) {

package/styles/ui-icon-button.css

@@ -100,7 +100,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);
     }
 
@@ -188,22 +188,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) {
@@ -333,7 +333,7 @@
     }
 
     :scope:where([data-component~="ui-icon-button"]):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(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"]) {
@@ -341,13 +341,13 @@
     }
 
     .content {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
     }
 
     :is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"]) .content {
-      display: none;
+      display: none !important;
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -428,7 +428,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-icon-button"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-icon-button"]) to ([data-component]) {

package/styles/ui-icon.css

@@ -22,7 +22,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));
@@ -44,7 +44,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-icon"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-icon"]) to ([data-component]) {

package/styles/ui-image.css

@@ -8,24 +8,24 @@
 }
 @scope ([data-component~="ui-image"]) to ([data-component], [data-slotted]) {
 :scope:where([data-component~="ui-image"]) {
-      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;
     }
     :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=center"] {
-      justify-content: center;
+      justify-content: center !important;
     }
     :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"] {
       float: left;
-      padding-inline-end: var(--ui-space-4);
+      padding-inline-end: var(--ui-space-4) !important;
     }
     :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"] {
       float: right;
-      padding-inline-start: var(--ui-space-4);
+      padding-inline-start: var(--ui-space-4) !important;
     }
     :scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) {
       inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
@@ -51,7 +51,7 @@
       z-index: 1;
       inline-size: 24px;
       block-size: 24px;
-      padding: 0;
+      padding: 0 !important;
       border: 0;
       background: transparent;
       touch-action: none;
@@ -89,16 +89,16 @@
       cursor: nwse-resize;
     }
     .handles[hidden], :scope:where([data-component~="ui-image"])[hidden] {
-      display: none;
+      display: none !important;
     }
     @media (max-width: 767px) {
       :scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) {
         float: none;
         inline-size: 100%;
-        padding-inline: 0;
+        padding-inline: 0 !important;
       }
       :scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) .handles {
-        display: none;
+        display: none !important;
       }
     }
     @media (pointer: coarse) {
@@ -142,10 +142,10 @@
       inline-size: 100%;
     }
     .frame img, .frame :where([data-slotted], [data-slotted] *):is(img) {
-      display: block;
+      display: block !important;
       max-inline-size: 100%;
       block-size: auto;
-      margin: 0;
+      margin: 0 !important;
       border-radius: inherit;
     }
     :scope:where([data-component~="ui-image"])[data-resizing] .frame img, :scope:where([data-component~="ui-image"])[data-resizing] .frame :where([data-slotted], [data-slotted] *):is(img) {

package/styles/ui-input-group.css

@@ -54,9 +54,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);
@@ -141,16 +141,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);
@@ -175,7 +175,7 @@
       --_ui-default-input-padding-inline-start: var(--ui-space-2);
     }
     :scope:where([data-component~="ui-input-group"])[data-ui-input-group-state~="prefixKind=icon"] .affix:first-child {
-      padding-inline-end: 0;
+      padding-inline-end: 0 !important;
       border-inline-end: 0;
       background: transparent;
     }
@@ -183,15 +183,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. */
     :scope:where([data-component~="ui-input-group"])[data-ui-input-group-state~="multiline"] {
-      display: grid;
+      display: grid !important;
       grid-template-columns: auto minmax(0, 1fr) auto;
     }
 
@@ -201,9 +201,9 @@
 
     :scope:where([data-component~="ui-input-group"])[data-ui-input-group-state~="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,
@@ -221,17 +221,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. */
     :scope:where([data-component~="ui-input-group"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-input-group"]) to ([data-component]) {

package/styles/ui-input.css

@@ -63,15 +63,15 @@
     }
 
     :scope:where([data-component~="ui-input"]) {
-      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))));
@@ -89,13 +89,13 @@
     /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
     :scope:where([data-component~="ui-input"])[data-ui-input-state~="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);
     }
 
     :scope:where([data-component~="ui-input"])[data-ui-input-state~="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);
     }
 
@@ -182,7 +182,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-input"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-input"]) to ([data-component]) {

package/styles/ui-list-item.css

@@ -39,22 +39,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);
     }
 
     :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="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);
@@ -86,10 +86,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 {
@@ -116,16 +116,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;
@@ -146,7 +146,7 @@
 
     /* Keep identity and disclosure marks beside the first line, even with a long description. */
     :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="align=title"] {
-      align-items: flex-start;
+      align-items: flex-start !important;
     }
 
     :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="align=title"] .leading,
@@ -164,7 +164,7 @@
     .leading:empty,
     .description:empty,
     .trailing:empty {
-      display: none;
+      display: none !important;
     }
 
     @media (forced-colors: active) {
@@ -180,7 +180,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-list-item"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-list-item"]) to ([data-component]) {

package/styles/ui-list.css

@@ -23,19 +23,19 @@
     :scope:where([data-component~="ui-list"]) {
       --_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;
     }
 
     :scope:where([data-component~="ui-list"])[data-ui-list-state~="as=ol"],
     :scope:where([data-component~="ui-list"])[data-ui-list-state~="markers=disc"] {
-      padding-inline-start: var(--ui-space-5);
+      padding-inline-start: var(--ui-space-5) !important;
     }
 
     :scope:where([data-component~="ui-list"])[data-ui-list-state~="as=ol"] {
@@ -59,13 +59,13 @@
 
     :scope:where([data-component~="ui-list"])[data-ui-list-state~="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. */
     :scope:where([data-component~="ui-list"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-list"]) to ([data-component]) {
@@ -76,16 +76,16 @@
        markers. */
 
     :scope:where([data-component~="ui-list"]) > :where([data-slotted], [data-slotted] *):is(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;
     }
 
     :scope:where([data-component~="ui-list"]) > :where([data-slotted], [data-slotted] *):is(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);