@threadlabs/looma 0.32.1 → 0.33.0

package/styles/ui-combobox.css

@@ -93,8 +93,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;
@@ -107,17 +107,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)));
@@ -132,19 +132,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;
@@ -183,34 +183,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;
     }
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] {
       --_row: var(--ui-control-size-sm);
     }
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="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);
     }
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] {
       --_row: var(--ui-control-size-lg);
     }
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="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;
@@ -220,11 +220,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);
     }
@@ -249,13 +249,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)));
@@ -263,28 +263,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);
@@ -299,7 +299,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;
@@ -338,33 +338,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. */
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="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;
     }
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="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;
     }
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] .entry:where(:not([data-component], [data-slotted]))::-webkit-scrollbar {
-      display: none;
+      display: none !important;
     }
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="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. */
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] .field {
       min-block-size: 0;
-      padding: var(--ui-space-0-5);
+      padding: var(--ui-space-0-5) !important;
     }
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="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. */
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] .field {
@@ -375,12 +375,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;
@@ -398,7 +398,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-combobox"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-combobox"]) to ([data-component]) {
@@ -508,8 +508,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;
@@ -522,17 +522,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:where(:scope, :scope *) {
-      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:where(:scope, :scope *) {
-      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)));
@@ -547,19 +547,19 @@
         var(--ui-control-focus-halo-shadow);
     }
     .entry:where(:scope, :scope *) {
-      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:where(:scope, :scope *) {
       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;
@@ -597,34 +597,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;
     }
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
       --_row: var(--ui-control-size-sm);
     }
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
-      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);
     }
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
       --_row: var(--ui-control-size-lg);
     }
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
-      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:where(:scope, :scope *) {
       appearance: none;
-      display: inline-grid;
+      display: inline-grid !important;
       place-items: center;
       align-self: stretch;
       border: 0;
@@ -634,11 +634,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:where(:scope, :scope *) {
-      display: block;
+      display: block !important;
       inline-size: var(--ui-icon-size-sm);
       block-size: var(--ui-icon-size-sm);
     }
@@ -662,13 +662,13 @@
       border-color: var(--_ui-combobox-invalid-border, var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active))));
     }
     .popup:where(:scope, :scope *) {
-      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)));
@@ -676,27 +676,27 @@
       box-shadow: var(--_ui-combobox-popup-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
     [hidden]:where(:scope, :scope *) {
-      display: none;
+      display: none !important;
     }
     .option[aria-disabled="true"]:where(:scope, :scope *) .primary, .option[aria-disabled="true"]:where(:scope, :scope *) .secondary {
       color: var(--ui-disabled-text);
     }
     .primary:where(:scope, :scope *) {
-      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:where(:scope, :scope *) {
-      display: grid;
-      gap: var(--ui-space-0-5);
+      display: grid !important;
+      gap: var(--ui-space-0-5) !important;
       min-inline-size: 0;
     }
     .line:where(:scope, :scope *) {
-      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:where(:scope, :scope *) {
       color: var(--ui-text-muted);
@@ -711,7 +711,7 @@
       overflow-wrap: anywhere;
     }
     .group:where(:scope, :scope *), .popup:where(:scope, :scope *) .message {
-      padding: var(--ui-space-2) var(--ui-space-3);
+      padding: var(--ui-space-2) var(--ui-space-3) !important;
     }
     .sr-only:where(:scope, :scope *) {
       position: absolute;
@@ -750,33 +750,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. */
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] .field:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
-      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;
     }
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] .entry:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
-      align-items: center;
-      gap: var(--ui-space-1);
+      align-items: center !important;
+      gap: var(--ui-space-1) !important;
       overflow-x: auto;
       scrollbar-width: none;
     }
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] .entry:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"])))::-webkit-scrollbar {
-      display: none;
+      display: none !important;
     }
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
       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. */
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] .field:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
       min-block-size: 0;
-      padding: var(--ui-space-0-5);
+      padding: var(--ui-space-0-5) !important;
     }
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
       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. */
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] .field:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
@@ -787,12 +787,12 @@
     }
     .item:where(:scope, :scope *) {
       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;
@@ -810,6 +810,6 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :where([data-component~="ui-combobox"])[hidden]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
-      display: none;
+      display: none !important;
     }
 }

package/styles/ui-container.css

@@ -20,20 +20,20 @@
     :scope:where([data-component~="ui-container"]) {
       --_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;
     }
 
     :scope:where([data-component~="ui-container"])[data-ui-container-state~="measure=narrow"] {
       --_container-measure: 45ch;
     }
     :scope:where([data-component~="ui-container"])[data-ui-container-state~="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;
@@ -53,7 +53,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-container"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-container"]) to ([data-component]) {

package/styles/ui-context-menu.css

@@ -37,17 +37,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)));
@@ -68,7 +68,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);
     }
@@ -87,7 +87,7 @@
 
     .menu[hidden],
     .menu[popover]:not(:popover-open) {
-      display: none;
+      display: none !important;
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -98,7 +98,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-context-menu"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-context-menu"]) to ([data-component]) {

package/styles/ui-cover.css

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

package/styles/ui-description-item.css

@@ -9,14 +9,14 @@
 @scope ([data-component~="ui-description-item"]) to ([data-component], [data-slotted]) {
 /* One term and its value in a ui-description-list, laid out by the list's layout. */
     :scope:where([data-component~="ui-description-item"]) {
-      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. */
     :scope:where([data-component~="ui-description-item"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-description-item"]) to ([data-component]) {

package/styles/ui-description-list.css

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