@threadlabs/looma 0.32.1 → 0.33.0

package/styles/ui-toast.css

@@ -33,15 +33,15 @@
       --_ui-toast-accent: var(--ui-border-strong);
       --_ui-toast-surface: var(--ui-surface-muted);
 
-      display: flex;
-      align-items: center;
-      gap: var(--ui-space-2);
-      box-sizing: border-box;
+      display: flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      box-sizing: border-box !important;
       inline-size: 100%;
-      margin: 0;
-      padding: var(--ui-space-3) var(--ui-space-4);
+      margin: 0 !important;
+      padding: var(--ui-space-3) var(--ui-space-4) !important;
       /* The close button's internal space supplies the rest of the trailing inset. */
-      padding-inline-end: var(--ui-space-2);
+      padding-inline-end: var(--ui-space-2) !important;
       border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent))));
       border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
@@ -76,10 +76,10 @@
       flex: 1;
     }
     .action:not(:has(> *)) {
-      display: none;
+      display: none !important;
     }
     :scope:where([data-component~="ui-toast"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-toast"]) to ([data-component]) {
@@ -112,15 +112,15 @@
       --_ui-toast-accent: var(--ui-border-strong);
       --_ui-toast-surface: var(--ui-surface-muted);
 
-      display: flex;
-      align-items: center;
-      gap: var(--ui-space-2);
-      box-sizing: border-box;
+      display: flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      box-sizing: border-box !important;
       inline-size: 100%;
-      margin: 0;
-      padding: var(--ui-space-3) var(--ui-space-4);
+      margin: 0 !important;
+      padding: var(--ui-space-3) var(--ui-space-4) !important;
       /* The close button's internal space supplies the rest of the trailing inset. */
-      padding-inline-end: var(--ui-space-2);
+      padding-inline-end: var(--ui-space-2) !important;
       border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent))));
       border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
@@ -155,9 +155,9 @@
       flex: 1;
     }
     .action:not(:has(> *)):where(:scope, :scope *) {
-      display: none;
+      display: none !important;
     }
     :where([data-component~="ui-toast"])[hidden]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-toast"]))) {
-      display: none;
+      display: none !important;
     }
 }

package/styles/ui-tooltip.css

@@ -63,10 +63,10 @@
 
       position: fixed;
       inset: auto;
-      margin: 0;
-      display: inline-block;
-      box-sizing: border-box;
-      padding: 0;
+      margin: 0 !important;
+      display: inline-block !important;
+      box-sizing: border-box !important;
+      padding: 0 !important;
       border: 0;
       outline: 0;
       border-radius: 0;
@@ -86,16 +86,16 @@
     .surface {
       --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-strong)));
       position: relative;
-      display: flex;
-      align-items: baseline;
-      gap: var(--ui-space-2);
-      box-sizing: border-box;
+      display: flex !important;
+      align-items: baseline !important;
+      gap: var(--ui-space-2) !important;
+      box-sizing: border-box !important;
       max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
       border: var(--ui-border-width) solid var(--_tooltip-line);
       border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
       background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--_ui-tooltip-text, var(--ui-text-primary));
-      padding: var(--ui-space-2) var(--ui-space-3);
+      padding: var(--ui-space-2) var(--ui-space-3) !important;
       font-family: var(--ui-font-family-sans);
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height-tight);
@@ -105,9 +105,9 @@
     /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
        it. The label stays first in the description, so a screen reader hears the name, then the keys. */
     .shortcut {
-      display: inline-flex;
-      align-items: center;
-      padding-inline-start: var(--ui-space-2);
+      display: inline-flex !important;
+      align-items: center !important;
+      padding-inline-start: var(--ui-space-2) !important;
       border-inline-start: 1px solid color-mix(in oklab, currentColor 28%, transparent);
       color: color-mix(in oklab, currentColor 72%, transparent);
       font-size: var(--ui-font-size-xs);
@@ -117,7 +117,7 @@
     }
 
     .shortcut:empty {
-      display: none;
+      display: none !important;
     }
 
     /* A <kbd> takes the browser's monospace; the hint reads in the tooltip's own type. */
@@ -138,7 +138,7 @@
       inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       inline-size: var(--_ui-tooltip-arrow-size, 0.625rem);
       block-size: var(--_ui-tooltip-arrow-size, 0.625rem);
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       background: inherit;
       border: 0 solid var(--_tooltip-line);
       border-inline-end-width: var(--ui-border-width);
@@ -212,7 +212,7 @@
     }
 
     :scope:where([data-component~="ui-tooltip"])[hidden] {
-      display: none;
+      display: none !important;
     }
 
     @media (prefers-reduced-motion: reduce) {

package/styles/ui-top-bar.css

@@ -45,12 +45,12 @@
       inset-block-start: 0;
       z-index: var(--ui-top-bar-z-index, 100);
       min-block-size: calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));
-      display: flex;
-      align-items: center;
-      gap: var(--ui-top-bar-gap, var(--ui-space-3));
-      padding-block-start: env(safe-area-inset-top);
-      padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-left));
-      padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-right));
+      display: flex !important;
+      align-items: center !important;
+      gap: var(--ui-top-bar-gap, var(--ui-space-3)) !important;
+      padding-block-start: env(safe-area-inset-top) !important;
+      padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-left)) !important;
+      padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-right)) !important;
       background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
       border-block-end: var(--ui-border-width) solid var(--ui-top-bar-border, var(--ui-border-divider));
     }
@@ -58,13 +58,13 @@
     .leading,
     .search,
     .actions {
-      display: flex;
-      align-items: center;
+      display: flex !important;
+      align-items: center !important;
       flex-shrink: 0;
     }
 
     .actions {
-      gap: var(--_ui-top-bar-actions-gap, var(--ui-space-1));
+      gap: var(--_ui-top-bar-actions-gap, var(--ui-space-1)) !important;
     }
 
     .title {
@@ -76,12 +76,12 @@
     .leading:empty,
     .search:empty,
     .actions: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-top-bar"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-top-bar"]) to ([data-component]) {

package/styles/ui-tree-item.css

@@ -41,16 +41,16 @@
       --_tree-disclosure-size: 16px;
 
       position: relative;
-      display: block;
+      display: block !important;
       min-inline-size: 0;
-      margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px));
+      margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px)) !important;
     }
 
     .row {
       position: relative;
-      display: grid;
+      display: grid !important;
       grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
-      align-items: center;
+      align-items: center !important;
       min-block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
       font-size: var(--_ui-tree-item-font-size, var(--ui-font-size-sm));
@@ -119,10 +119,10 @@
     }
 
     .disclosure {
-      display: grid;
+      display: grid !important;
       /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
       place-items: center start;
-      padding: 0;
+      padding: 0 !important;
       color: var(--ui-text-muted);
       background: transparent;
       border: 0;
@@ -131,11 +131,11 @@
     }
 
     .disclosure[hidden] {
-      display: none;
+      display: none !important;
     }
 
     .selection-hit {
-      display: none;
+      display: none !important;
       grid-column: 2;
       grid-row: 1;
       place-items: center;
@@ -146,7 +146,7 @@
     .selection-checkbox {
       inline-size: 1rem;
       block-size: 1rem;
-      margin: 0;
+      margin: 0 !important;
       accent-color: var(--ui-accent-solid);
     }
 
@@ -154,7 +154,7 @@
       grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
     }
     :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .selection-hit {
-      display: grid;
+      display: grid !important;
     }
     :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .leading {
       grid-column: 3;
@@ -169,7 +169,7 @@
     }
 
     .disclosure-icon {
-      display: grid;
+      display: grid !important;
       place-items: center;
       inline-size: 12px;
       block-size: 12px;
@@ -178,7 +178,7 @@
     }
 
     .disclosure-icon:where(:not([data-component], [data-slotted]))::before {
-      display: block;
+      display: block !important;
       inline-size: 0.375rem;
       block-size: 0.375rem;
       border-inline-end: 1.5px solid currentColor;
@@ -194,20 +194,20 @@
 
     /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
     .drag-handle svg {
-      display: block;
+      display: block !important;
       inline-size: 100%;
       block-size: 100%;
     }
 
     /* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
     .leading {
-      display: inline-grid;
+      display: inline-grid !important;
       place-items: center;
       grid-column: 2;
       grid-row: 1;
       inline-size: 1em;
       block-size: 1em;
-      margin-inline-start: var(--ui-space-1);
+      margin-inline-start: var(--ui-space-1) !important;
       color: var(--ui-text-muted);
       /* Above the label, so a sliding name passes under the icon. */
       position: relative;
@@ -215,7 +215,7 @@
     }
 
     .leading:empty {
-      display: none;
+      display: none !important;
     }
 
     /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
@@ -226,22 +226,22 @@
       grid-column: 3;
       grid-row: 1;
       align-self: stretch;
-      display: flex;
-      align-items: center;
+      display: flex !important;
+      align-items: center !important;
       min-inline-size: 0;
       /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
       overflow: hidden;
-      padding: var(--_ui-tree-item-label-padding-block, var(--ui-space-1)) var(--_ui-tree-item-label-padding-inline, var(--ui-space-2));
+      padding: var(--_ui-tree-item-label-padding-block, var(--ui-space-1)) var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)) !important;
       /* The length of the fade before the controls. The label's one flex child lays out no gap; this
          is where the controller reads the length in pixels to stop a sliding name before the fade. */
-      column-gap: var(--ui-space-1);
+      column-gap: var(--ui-space-1) !important;
     }
 
     /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
        its own text and reading as overflow. */
     .label-text {
-      display: flex;
-      align-items: center;
+      display: flex !important;
+      align-items: center !important;
       /* Stretches, so slotted content can still be the row's full-height hit area. */
       align-self: stretch;
       block-size: 100%;
@@ -291,8 +291,8 @@
        where it was, and fades out across the gap before the icon, fully gone where the icon begins
        to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
     .row[data-ui-marquee] > .label {
-      margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
-      padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)));
+      margin-inline-start: calc(-1 * var(--_marquee-lead, 0px)) !important;
+      padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))) !important;
       mask-image: linear-gradient(
         to right,
         transparent var(--_marquee-icon-width, 0px),
@@ -334,8 +334,8 @@
       z-index: 1;
       inset-block: 0;
       inset-inline-end: 0;
-      display: inline-flex;
-      align-items: center;
+      display: inline-flex !important;
+      align-items: center !important;
       min-inline-size: 0;
       opacity: 0;
       pointer-events: none;
@@ -360,7 +360,7 @@
         position: static;
         grid-column: 4;
         grid-row: 1;
-        padding-inline-start: 0;
+        padding-inline-start: 0 !important;
         background: none;
         opacity: 1;
         pointer-events: auto;
@@ -417,9 +417,9 @@
       inset-inline-start: 0;
       inline-size: var(--_tree-disclosure-size);
       block-size: 24px;
-      display: grid;
+      display: grid !important;
       place-items: center;
-      padding: 5px 2px;
+      padding: 5px 2px !important;
       color: var(--ui-text-muted);
       background: transparent;
       border: 0;
@@ -457,7 +457,7 @@
       position: absolute;
       z-index: 3;
       inset-inline: 1px;
-      display: none;
+      display: none !important;
       block-size: var(--ui-accent-line-width);
       border-radius: var(--ui-radius-round);
       background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
@@ -485,17 +485,17 @@
     }
 
     :scope:where([data-component~="ui-tree-item"])[data-drop-position="before"] > .row > .row-drop-indicator {
-      display: block;
+      display: block !important;
       inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     :scope:where([data-component~="ui-tree-item"])[data-drop-position="after"] > .subtree-drop-indicator {
-      display: block;
+      display: block !important;
       inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     .children[hidden] {
-      display: none;
+      display: none !important;
     }
 
     html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"]) {
@@ -514,7 +514,7 @@
       inset: auto;
       inline-size: 44px;
       block-size: 44px;
-      padding: 14px;
+      padding: 14px !important;
       opacity: 1;
       transform: none;
       cursor: pointer;
@@ -584,7 +584,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-tree-item"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-tree-item"]) to ([data-component]) {
@@ -601,7 +601,7 @@
     /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
     :where([data-slotted], [data-slotted] *):is(svg),
     :where([data-slotted], [data-slotted] *):is(img) {
-      display: block;
+      display: block !important;
       inline-size: 1em;
       block-size: 1em;
       flex: none;
@@ -697,16 +697,16 @@
       --_tree-disclosure-size: 16px;
 
       position: relative;
-      display: block;
+      display: block !important;
       min-inline-size: 0;
-      margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px));
+      margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px)) !important;
     }
 
     .row:where(:scope, :scope *) {
       position: relative;
-      display: grid;
+      display: grid !important;
       grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
-      align-items: center;
+      align-items: center !important;
       min-block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
       font-size: var(--_ui-tree-item-font-size, var(--ui-font-size-sm));
@@ -772,10 +772,10 @@
     }
 
     .disclosure:where(:scope, :scope *) {
-      display: grid;
+      display: grid !important;
       /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
       place-items: center start;
-      padding: 0;
+      padding: 0 !important;
       color: var(--ui-text-muted);
       background: transparent;
       border: 0;
@@ -784,11 +784,11 @@
     }
 
     .disclosure[hidden]:where(:scope, :scope *) {
-      display: none;
+      display: none !important;
     }
 
     .selection-hit:where(:scope, :scope *) {
-      display: none;
+      display: none !important;
       grid-column: 2;
       grid-row: 1;
       place-items: center;
@@ -799,7 +799,7 @@
     .selection-checkbox:where(:scope, :scope *) {
       inline-size: 1rem;
       block-size: 1rem;
-      margin: 0;
+      margin: 0 !important;
       accent-color: var(--ui-accent-solid);
     }
 
@@ -807,7 +807,7 @@
       grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
     }
     :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .selection-hit:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
-      display: grid;
+      display: grid !important;
     }
     :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .leading:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
       grid-column: 3;
@@ -822,7 +822,7 @@
     }
 
     .disclosure-icon:where(:scope, :scope *) {
-      display: grid;
+      display: grid !important;
       place-items: center;
       inline-size: 12px;
       block-size: 12px;
@@ -831,7 +831,7 @@
     }
 
     .disclosure-icon:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope *)::before {
-      display: block;
+      display: block !important;
       inline-size: 0.375rem;
       block-size: 0.375rem;
       border-inline-end: 1.5px solid currentColor;
@@ -847,20 +847,20 @@
 
     /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
     .drag-handle:where(:scope, :scope *) svg {
-      display: block;
+      display: block !important;
       inline-size: 100%;
       block-size: 100%;
     }
 
     /* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
     .leading:where(:scope, :scope *) {
-      display: inline-grid;
+      display: inline-grid !important;
       place-items: center;
       grid-column: 2;
       grid-row: 1;
       inline-size: 1em;
       block-size: 1em;
-      margin-inline-start: var(--ui-space-1);
+      margin-inline-start: var(--ui-space-1) !important;
       color: var(--ui-text-muted);
       /* Above the label, so a sliding name passes under the icon. */
       position: relative;
@@ -868,7 +868,7 @@
     }
 
     .leading:empty:where(:scope, :scope *) {
-      display: none;
+      display: none !important;
     }
 
     /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
@@ -879,22 +879,22 @@
       grid-column: 3;
       grid-row: 1;
       align-self: stretch;
-      display: flex;
-      align-items: center;
+      display: flex !important;
+      align-items: center !important;
       min-inline-size: 0;
       /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
       overflow: hidden;
-      padding: var(--_ui-tree-item-label-padding-block, var(--ui-space-1)) var(--_ui-tree-item-label-padding-inline, var(--ui-space-2));
+      padding: var(--_ui-tree-item-label-padding-block, var(--ui-space-1)) var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)) !important;
       /* The length of the fade before the controls. The label's one flex child lays out no gap; this
          is where the controller reads the length in pixels to stop a sliding name before the fade. */
-      column-gap: var(--ui-space-1);
+      column-gap: var(--ui-space-1) !important;
     }
 
     /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
        its own text and reading as overflow. */
     .label-text:where(:scope, :scope *) {
-      display: flex;
-      align-items: center;
+      display: flex !important;
+      align-items: center !important;
       /* Stretches, so slotted content can still be the row's full-height hit area. */
       align-self: stretch;
       block-size: 100%;
@@ -938,8 +938,8 @@
        where it was, and fades out across the gap before the icon, fully gone where the icon begins
        to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
     .row[data-ui-marquee]:where(:scope, :scope *) > .label {
-      margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
-      padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)));
+      margin-inline-start: calc(-1 * var(--_marquee-lead, 0px)) !important;
+      padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))) !important;
       mask-image: linear-gradient(
         to right,
         transparent var(--_marquee-icon-width, 0px),
@@ -981,8 +981,8 @@
       z-index: 1;
       inset-block: 0;
       inset-inline-end: 0;
-      display: inline-flex;
-      align-items: center;
+      display: inline-flex !important;
+      align-items: center !important;
       min-inline-size: 0;
       opacity: 0;
       pointer-events: none;
@@ -1004,7 +1004,7 @@
         position: static;
         grid-column: 4;
         grid-row: 1;
-        padding-inline-start: 0;
+        padding-inline-start: 0 !important;
         background: none;
         opacity: 1;
         pointer-events: auto;
@@ -1058,9 +1058,9 @@
       inset-inline-start: 0;
       inline-size: var(--_tree-disclosure-size);
       block-size: 24px;
-      display: grid;
+      display: grid !important;
       place-items: center;
-      padding: 5px 2px;
+      padding: 5px 2px !important;
       color: var(--ui-text-muted);
       background: transparent;
       border: 0;
@@ -1094,7 +1094,7 @@
       position: absolute;
       z-index: 3;
       inset-inline: 1px;
-      display: none;
+      display: none !important;
       block-size: var(--ui-accent-line-width);
       border-radius: var(--ui-radius-round);
       background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
@@ -1121,17 +1121,17 @@
     }
 
     :where([data-component~="ui-tree-item"])[data-drop-position="before"] > .row > .row-drop-indicator:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
-      display: block;
+      display: block !important;
       inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     :where([data-component~="ui-tree-item"])[data-drop-position="after"] > .subtree-drop-indicator:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
-      display: block;
+      display: block !important;
       inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     .children[hidden]:where(:scope, :scope *) {
-      display: none;
+      display: none !important;
     }
 
     html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
@@ -1149,7 +1149,7 @@
       inset: auto;
       inline-size: 44px;
       block-size: 44px;
-      padding: 14px;
+      padding: 14px !important;
       opacity: 1;
       transform: none;
       cursor: pointer;
@@ -1217,6 +1217,6 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :where([data-component~="ui-tree-item"])[hidden]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
-      display: none;
+      display: none !important;
     }
 }