@threadlabs/looma 0.32.1 → 0.33.1

package/styles/ui-color-picker.css

@@ -0,0 +1,120 @@
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-color-picker"] { --html-next-scope-owner: "ui-color-picker" !important; }
+}
+@scope ([data-component~="ui-color-picker"]) to ([data-component], [data-slotted]) {
+:scope:where([data-component~="ui-color-picker"]) {
+      display: inline-flex !important;
+      flex: 0 0 auto;
+      margin: 0 !important;
+      padding: 0 !important;
+      --_size: var(--ui-control-size-md);
+      --_font: 1em;
+      --_padding: var(--ui-control-inset-block-md, var(--ui-space-2));
+    }
+    :scope:where([data-component~="ui-color-picker"])[data-ui-color-picker-state~="size=sm"] {
+      --_size: var(--ui-control-size-sm);
+      --_font: var(--ui-font-size-sm);
+      --_padding: var(--ui-control-inset-block-sm, var(--ui-space-1));
+    }
+    :scope:where([data-component~="ui-color-picker"])[data-ui-color-picker-state~="size=lg"] {
+      --_size: var(--ui-control-size-lg);
+      --_font: var(--ui-font-size-md);
+      --_padding: var(--ui-control-inset-block-lg, var(--ui-space-3));
+    }
+    button {
+      --_radius: min(var(--ui-field-radius, var(--ui-radius-md)), calc(var(--_size) / 4));
+      --_inset: min(calc(var(--ui-space-1) * 1.5), calc(var(--_size) / 5));
+      box-sizing: border-box !important;
+      display: inline-grid !important;
+      place-items: center;
+      margin: 0 !important;
+      padding: var(--_inset) !important;
+      inline-size: max(var(--_size), calc(var(--_font) * var(--ui-line-height-tight) + var(--_padding) * 2 + var(--ui-border-width) * 2));
+      aspect-ratio: 1;
+      flex: 0 0 auto;
+      border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
+      border-radius: var(--_radius);
+      background: var(--ui-control-surface, var(--ui-surface-elevated));
+      box-shadow: var(--ui-control-inset);
+      font: inherit;
+      cursor: pointer;
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease);
+    }
+    button:hover:not(:disabled) {
+      background: var(--ui-surface-subtle);
+    }
+    button:active:not(:disabled) {
+      scale: var(--ui-press-scale, 0.96);
+    }
+    button:focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: var(--ui-focus-width);
+    }
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .colour {
+      display: block !important;
+      inline-size: 100%;
+      block-size: 100%;
+      border-radius: max(0px, calc(var(--_radius) - var(--_inset) - var(--ui-border-width)));
+      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
+    }
+    :scope:where([data-component~="ui-color-picker"])[data-ui-color-picker-state~="round"] button {
+      border-radius: 50%;
+    }
+    :scope:where([data-component~="ui-color-picker"])[data-ui-color-picker-state~="round"] .colour {
+      border-radius: 50%;
+    }
+    .editor {
+      box-sizing: border-box !important;
+      display: grid !important;
+      gap: var(--ui-space-3) !important;
+      padding: var(--ui-space-4) !important;
+      margin: 0 !important;
+      inline-size: min(18rem, calc(100vw - 1rem));
+      border: var(--ui-border-width) solid var(--ui-border-strong);
+      border-radius: var(--ui-radius-md);
+      background: var(--ui-surface-elevated);
+      color: var(--ui-text-primary);
+      box-shadow: var(--ui-shadow-lg);
+      font: inherit;
+    }
+    .editor[hidden] {
+      display: none !important;
+    }
+    .channel {
+      display: grid !important;
+      grid-template-columns: 3.5em 1fr;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      padding: 0 !important;
+      margin: 0 !important;
+    }
+    input[type="range"] {
+      inline-size: 100%;
+      min-inline-size: 0;
+      margin: 0 !important;
+      padding: 0 !important;
+      accent-color: var(--ui-accent-solid);
+    }
+    @media (pointer: coarse) {
+      :scope:where([data-component~="ui-color-picker"]) {
+        --_size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+      :scope:where([data-component~="ui-color-picker"])[data-ui-color-picker-state~="size=sm"] {
+        --_size: var(--ui-control-min-block-size);
+        --_font: var(--ui-font-size-md);
+      }
+    }
+}
+@scope ([data-component~="ui-color-picker"]) to ([data-component]) {
+@media (pointer: coarse) {
+    }
+}

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]) {