@threadlabs/looma 0.32.1 → 0.33.1

package/styles/ui-editor-table-toolbar.css

@@ -10,7 +10,7 @@
 .looma-editor__mobile-toolbar-shell :scope:where([data-component~="ui-editor-table-toolbar"]) {
       min-width: max-content;
       min-height: 100%;
-      padding: 0;
+      padding: 0 !important;
       background: transparent;
       border: 0;
       border-radius: 0;
@@ -29,10 +29,10 @@
     }
 
     :scope:where([data-component~="ui-editor-table-toolbar"]) {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ui-space-1);
-      padding: var(--ui-space-1);
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-1) !important;
+      padding: var(--ui-space-1) !important;
       background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: calc(var(--ui-radius-md) + 2 * var(--ui-border-width));
@@ -41,9 +41,9 @@
     }
 
     .group {
-      display: inline-flex;
-      align-items: center;
-      gap: 2px;
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: 2px !important;
       overflow: hidden;
     }
 
@@ -58,10 +58,10 @@
     }
 
     :scope:where([data-component~="ui-editor-table-toolbar"]) button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--ui-space-2);
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      gap: var(--ui-space-2) !important;
       min-height: 32px;
       border: 0;
       border-radius: var(--ui-radius-sm);
@@ -71,7 +71,7 @@
       font-size: var(--ui-font-size-sm);
       font-weight: 500;
       line-height: 1;
-      padding: var(--ui-space-2) var(--ui-space-2);
+      padding: var(--ui-space-2) var(--ui-space-2) !important;
       white-space: nowrap;
     }
 
@@ -107,30 +107,30 @@
     }
 
     .chevron {
-      display: inline-flex;
+      display: inline-flex !important;
       --_ui-default-icon-size: 0.875rem;
     }
 
     :scope:where([data-component~="ui-editor-table-toolbar"]) .icon-button {
       width: 32px;
-      padding-inline: 0;
+      padding-inline: 0 !important;
     }
 
     .menu {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       position: fixed;
       inset: auto;
-      margin: 0;
+      margin: 0 !important;
       min-width: 12rem;
       max-width: min(17rem, calc(100vw - 24px));
-      padding: var(--ui-space-1);
+      padding: var(--ui-space-1) !important;
       background: var(--ui-surface);
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-md);
       box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
+      display: flex !important;
+      flex-direction: column !important;
+      gap: 2px !important;
       z-index: 2;
       overflow-y: auto;
       overscroll-behavior: contain;
@@ -138,13 +138,13 @@
     }
 
     .menu-section + .menu-section {
-      margin-top: var(--ui-space-1);
-      padding-top: var(--ui-space-1);
+      margin-top: var(--ui-space-1) !important;
+      padding-top: var(--ui-space-1) !important;
       border-top: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     .menu-heading {
-      padding: var(--ui-space-1) var(--ui-space-2);
+      padding: var(--ui-space-1) var(--ui-space-2) !important;
       font-size: var(--ui-font-size-2xs);
       font-weight: 700;
       letter-spacing: 0.05em;
@@ -153,21 +153,21 @@
     }
 
     .menu button {
-      display: flex;
-      justify-content: flex-start;
+      display: flex !important;
+      justify-content: flex-start !important;
       width: 100%;
       text-align: left;
     }
 
     .swatches {
-      display: grid;
+      display: grid !important;
       grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 2px;
+      gap: 2px !important;
     }
 
     :scope:where([data-component~="ui-editor-table-toolbar"]) .swatch-button {
-      gap: var(--ui-space-1);
-      justify-content: flex-start;
+      gap: var(--ui-space-1) !important;
+      justify-content: flex-start !important;
     }
 
     .swatch {
@@ -190,6 +190,6 @@
     }
 
     :scope:where([data-component~="ui-editor-table-toolbar"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }

package/styles/ui-editor-toolbar.css

@@ -11,9 +11,9 @@
       position: sticky;
       top: 0;
       z-index: var(--ui-editor-toolbar-z-index, 10);
-      display: flex;
-      align-items: center;
-      padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
+      display: flex !important;
+      align-items: center !important;
+      padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px) !important;
       min-height: var(--ui-editor-toolbar-min-height, 48px);
       background: var(--ui-editor-toolbar-surface, var(--ui-surface));
       border-bottom: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
@@ -22,11 +22,11 @@
     /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
        wrapping into several lines, and a fade at each edge that has more to show says so. */
     .strip {
-      display: flex;
+      display: flex !important;
       flex: 1 1 auto;
-      align-items: center;
-      justify-content: flex-start;
-      gap: var(--ui-editor-toolbar-gap, 2px);
+      align-items: center !important;
+      justify-content: flex-start !important;
+      gap: var(--ui-editor-toolbar-gap, 2px) !important;
       min-width: 0;
       overflow-x: auto;
       overflow-y: hidden;
@@ -35,7 +35,7 @@
     }
 
     .strip:where(:not([data-component], [data-slotted]))::-webkit-scrollbar {
-      display: none;
+      display: none !important;
     }
 
     /* The edge fades are the scroll fade every Looma scroller uses (see ui-scroll-area), a mask on the
@@ -64,13 +64,13 @@
     }
 
     :scope:where([data-component~="ui-editor-toolbar"])[data-ui-editor-toolbar-state~="floating"] {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       position: relative;
       top: auto;
       width: max-content;
       max-width: min(calc(100vw - 24px), 100%);
       min-height: auto;
-      padding: var(--ui-editor-toolbar-floating-padding, 4px);
+      padding: var(--ui-editor-toolbar-floating-padding, 4px) !important;
       background: color-mix(in srgb, var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%, transparent);
       border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
       border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
@@ -115,7 +115,7 @@
       width: 100%;
       max-width: none;
       min-height: 100%;
-      padding: 0;
+      padding: 0 !important;
       background: transparent;
       border: 0;
       border-radius: 0;
@@ -129,7 +129,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-editor-toolbar"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-editor-toolbar"]) to ([data-component]) {
@@ -148,7 +148,7 @@
       height: 20px;
       background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
       flex-shrink: 0;
-      margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
+      margin: 0 var(--ui-editor-toolbar-divider-margin, 4px) !important;
     }
 
     @media (max-width: 767px) {

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