@threadlabs/looma 0.32.1 → 0.33.1

package/vue/UiFormField.vue

@@ -31,7 +31,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'disabled' },
       description:
-        'Disables the field\'s control: the first input, textarea, or select inside it. The field writes this to the control whenever it updates, so set it here\n      rather than on the control.',
+        'Disables the control named by the label\'s for attribute, or the first field control inside it. Composite controls supply their focus target and form value.\n      The field writes this to the control whenever it updates, so set it here rather than on the control.',
       default: false,
     },
     invalid: {
@@ -222,16 +222,16 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
     --_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);
   }
   :global(.label:where([data-hn-ui-form-field])),
   :global(.help:where([data-hn-ui-form-field])),
   :global(.error:where([data-hn-ui-form-field])) {
-    display: contents;
+    display: contents !important;
   }
 
   :global(.label:where([data-hn-ui-form-field])) {
@@ -239,19 +239,19 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
     font-size: var(--_ui-form-field-label-font-size, var(--ui-font-size-sm));
   }
   :global(.label:has(> .label-action > *):where([data-hn-ui-form-field])) {
-    display: flex;
-    align-items: start;
-    gap: var(--ui-space-1);
+    display: flex !important;
+    align-items: start !important;
+    gap: var(--ui-space-1) !important;
   }
 
   :global(.label-action:where([data-hn-ui-form-field])) {
-    display: flex;
-    align-items: unsafe center;
+    display: flex !important;
+    align-items: unsafe center !important;
     block-size: 1lh;
   }
 
   :global(.label-action:not(:has(> *)):where([data-hn-ui-form-field])) {
-    display: none;
+    display: none !important;
   }
 
   :global(.help:where([data-hn-ui-form-field])) {
@@ -265,11 +265,11 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
   }
 
   :global(.error:where([data-hn-ui-form-field])) {
-    display: none;
+    display: none !important;
   }
 
   :global(:scope[data-ui-form-field-state~="invalid"] .error:where([data-hn-ui-form-field])) {
-    display: contents;
+    display: contents !important;
   }
   :global(.error:where([data-hn-ui-form-field])),
   :global(:where(:not([data-hn-ui-form-field])):is([role="alert"])) {
@@ -277,7 +277,7 @@ useComponentHost(() => import('../components/ui-form-field/ui-form-field.js'), {
     font-size: var(--ui-font-size-sm);
   }
   :global(:scope[hidden]:where([data-hn-ui-form-field])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiGrid.vue

@@ -144,8 +144,8 @@ const hostState = computed(() =>
   :global(:scope:where([data-hn-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,
@@ -171,7 +171,7 @@ const hostState = computed(() =>
       );
     min-inline-size: 0;
     max-inline-size: 100%;
-    margin: 0;
+    margin: 0 !important;
   }
 
   :global(:scope[data-ui-grid-state~="gap=xs"]:where([data-hn-ui-grid])) {
@@ -196,7 +196,7 @@ const hostState = computed(() =>
     --_grid-min: 20rem;
   }
   :global(:scope[hidden]:where([data-hn-ui-grid])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiIcon.vue

@@ -359,6 +359,10 @@ const shapes: ReturnType<typeof inputComputed<any>> = inputComputed<any>(
         tag: 'path',
         d: 'M3 9h18',
       }],
+      paperclip: [{
+        tag: 'path',
+        d: 'm16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551',
+      }],
       pencil: [{
         tag: 'path',
         d: 'M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z',
@@ -570,7 +574,7 @@ const hostState = computed(() =>
        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));
@@ -590,7 +594,7 @@ const hostState = computed(() =>
     stroke-width: var(--_ui-icon-stroke-width, 2);
   }
   :global(:scope[hidden]) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiIconButton.vue

@@ -88,7 +88,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'revealed' },
       description:
-        'Keeps an anticipatory button visible while its context is active, such as a selected block or an open popup. It does not imply a pressed or expanded state.',
+        'Keeps an anticipatory button visible while its context is active, such as a selected block or an open popup. It does not imply a pressed or expanded\n      state.',
       default: false,
     },
     round: {
@@ -526,7 +526,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     --_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);
   }
 
@@ -616,22 +616,22 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     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) {
@@ -793,7 +793,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(:scope:active:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button])) {
-    scale: var(--ui-icon-button-active-scale, 0.96);
+    scale: var(--ui-icon-button-active-scale, var(--ui-press-scale, 0.96));
   }
 
   :global(:is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"]):where([data-hn-ui-icon-button])) {
@@ -801,14 +801,14 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(.content:where([data-hn-ui-icon-button])) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
   }
 
   :global(:is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"])
     .content:where([data-hn-ui-icon-button])) {
-    display: none;
+    display: none !important;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -893,7 +893,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
   }
   :global(:scope[hidden]:where([data-hn-ui-icon-button])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiImage.vue

@@ -307,24 +307,24 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
 <style scoped>
 @scope (.ui-image) to ([data-hn]) {
   :global(:scope:where([data-hn-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;
   }
   :global(:scope[data-ui-image-state~="placement=center"]:where([data-hn-ui-image])) {
-    justify-content: center;
+    justify-content: center !important;
   }
   :global(:scope[data-ui-image-state~="placement=wrap-left"]:where([data-hn-ui-image])) {
     float: left;
-    padding-inline-end: var(--ui-space-4);
+    padding-inline-end: var(--ui-space-4) !important;
   }
   :global(:scope[data-ui-image-state~="placement=wrap-right"]:where([data-hn-ui-image])) {
     float: right;
-    padding-inline-start: var(--ui-space-4);
+    padding-inline-start: var(--ui-space-4) !important;
   }
   :global(:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]):where([data-hn-ui-image])) {
     inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
@@ -352,10 +352,10 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
   }
   :global(.frame img:where([data-hn-ui-image])),
   :global(.frame :where(:not([data-hn-ui-image])):is(img)) {
-    display: block;
+    display: block !important;
     max-inline-size: 100%;
     block-size: auto;
-    margin: 0;
+    margin: 0 !important;
     border-radius: inherit;
   }
   :global(:scope[data-resizing] .frame img:where([data-hn-ui-image])),
@@ -371,7 +371,7 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
     z-index: 1;
     inline-size: 24px;
     block-size: 24px;
-    padding: 0;
+    padding: 0 !important;
     border: 0;
     background: transparent;
     touch-action: none;
@@ -410,17 +410,17 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
   }
   :global(.handles[hidden]:where([data-hn-ui-image])),
   :global(:scope[hidden]:where([data-hn-ui-image])) {
-    display: none;
+    display: none !important;
   }
   @media (max-width: 767px) {
     :global(:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]):where([data-hn-ui-image])) {
       float: none;
       inline-size: 100%;
-      padding-inline: 0;
+      padding-inline: 0 !important;
     }
     :global(:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
       .handles:where([data-hn-ui-image])) {
-      display: none;
+      display: none !important;
     }
   }
   @media (pointer: coarse) {

package/vue/UiInput.vue

@@ -556,18 +556,19 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
 
 @scope (.ui-input) to ([data-hn]) {
   :global(:scope) {
-    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))
@@ -598,7 +599,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
       --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);
   }
 
@@ -607,7 +608,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
       --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);
   }
   @media (pointer: coarse) {
@@ -707,7 +708,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
     }
   }
   :global(:scope[hidden]) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiInputGroup.vue

@@ -291,9 +291,9 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     --_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);
@@ -376,16 +376,16 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   }
 
   :global(.field:where([data-hn-ui-input-group])) {
-    display: flex;
+    display: flex !important;
     flex: 1;
     min-inline-size: 0;
   }
 
   :global(.affix:where([data-hn-ui-input-group])) {
-    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);
@@ -409,18 +409,18 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   }
   :global(:scope[data-ui-input-group-state~="prefixKind=icon"]
     .affix:first-child:where([data-hn-ui-input-group])) {
-    padding-inline-end: 0;
+    padding-inline-end: 0 !important;
     border-inline-end: 0;
     background: transparent;
   }
   :global(.action:where([data-hn-ui-input-group])) {
-    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;
   }
   :global(:scope[data-ui-input-group-state~="multiline"]:where([data-hn-ui-input-group])) {
-    display: grid;
+    display: grid !important;
     grid-template-columns: auto minmax(0, 1fr) auto;
   }
 
@@ -430,9 +430,9 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
 
   :global(:scope[data-ui-input-group-state~="multiline"] .action:where([data-hn-ui-input-group])) {
     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;
   }
   :global(:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]:where([data-hn-ui-input-group])) {
     --_ui-default-textarea-padding-inline-end: calc(
@@ -451,15 +451,15 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
     grid-row: 1;
     align-self: start;
     justify-self: end;
-    padding: var(--ui-space-2);
+    padding: var(--ui-space-2) !important;
   }
 
   :global(.affix:empty:where([data-hn-ui-input-group])),
   :global(.action:empty:where([data-hn-ui-input-group])) {
-    display: none;
+    display: none !important;
   }
   :global(:scope[hidden]:where([data-hn-ui-input-group])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiList.vue

@@ -207,19 +207,19 @@ const hostState = computed(() =>
   :global(:scope:where([data-hn-ui-list])) {
     --_list-gap: var(--ui-list-gap, var(--ui-space-1));
     --_list-min-item-width: var(--ui-list-min-item-width, 14rem);
-    display: flex;
-    flex-direction: column;
+    display: flex !important;
+    flex-direction: column !important;
     inline-size: 100%;
-    gap: var(--_list-gap);
+    gap: var(--_list-gap) !important;
     min-inline-size: 0;
-    margin: 0;
-    padding: 0;
+    margin: 0 !important;
+    padding: 0 !important;
     list-style: none;
   }
 
   :global(:scope[data-ui-list-state~="as=ol"]:where([data-hn-ui-list])),
   :global(:scope[data-ui-list-state~="markers=disc"]:where([data-hn-ui-list])) {
-    padding-inline-start: var(--ui-space-5);
+    padding-inline-start: var(--ui-space-5) !important;
   }
 
   :global(:scope[data-ui-list-state~="as=ol"]:where([data-hn-ui-list])) {
@@ -231,10 +231,10 @@ const hostState = computed(() =>
   }
 
   :global(:scope > :where(:not([data-hn-ui-list])):is(li)) {
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     min-inline-size: 0;
     padding: var(--_ui-list-native-padding-block, var(--ui-space-2))
-      var(--_ui-list-native-padding-inline, var(--ui-space-3));
+      var(--_ui-list-native-padding-inline, var(--ui-space-3)) !important;
     border-radius: var(--ui-radius-md);
     color: var(--ui-text-primary);
     list-style: inherit;
@@ -242,7 +242,7 @@ const hostState = computed(() =>
 
   :global(:scope > :where(:not([data-hn-ui-list])):is(li.card)) {
     padding: var(--_ui-list-native-padding-block, var(--ui-space-3))
-      var(--_ui-list-native-padding-inline, var(--ui-space-4));
+      var(--_ui-list-native-padding-inline, var(--ui-space-4)) !important;
     border: var(--ui-border-width) solid var(--ui-border-strong);
     border-radius: var(--ui-radius-lg);
     background: var(--ui-surface-raised);
@@ -260,11 +260,11 @@ const hostState = computed(() =>
 
   :global(:scope[data-ui-list-state~="layout=grid"]:where([data-hn-ui-list])) {
     --_list-gap: var(--ui-list-gap, var(--ui-space-3));
-    display: grid;
+    display: grid !important;
     grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));
   }
   :global(:scope[hidden]:where([data-hn-ui-list])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiListItem.vue

@@ -262,20 +262,20 @@ const hostState = computed(() =>
     --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
 
     position: relative;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    gap: var(--ui-list-item-gap, var(--ui-space-3));
+    box-sizing: border-box !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-list-item-gap, var(--ui-space-3)) !important;
     min-inline-size: 0;
     min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
     padding-block: var(
       --ui-list-item-padding-block,
       var(--_ui-list-item-padding-block, var(--ui-space-2))
-    );
+    ) !important;
     padding-inline: var(
       --ui-list-item-padding-inline,
       var(--_ui-list-item-padding-inline, var(--ui-space-3))
-    );
+    ) !important;
     border-radius: var(--ui-selection-radius);
     color: var(--ui-text-primary);
     transition:
@@ -284,8 +284,8 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-list-item-state~="variant=card"]:where([data-hn-ui-list-item])) {
-    padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
-    padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+    padding-block: var(--ui-list-item-padding-block, var(--ui-space-3)) !important;
+    padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4)) !important;
     border: var(--ui-border-width) solid var(--ui-border-strong);
     border-radius: var(--ui-radius-lg);
     background: var(--ui-surface-raised);
@@ -317,10 +317,10 @@ const hostState = computed(() =>
 
   :global(.leading:where([data-hn-ui-list-item])),
   :global(.trailing:where([data-hn-ui-list-item])) {
-    display: inline-flex;
+    display: inline-flex !important;
     flex: none;
-    align-items: center;
-    gap: var(--ui-space-2);
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
   }
 
   :global(.leading:where([data-hn-ui-list-item])) {
@@ -344,16 +344,16 @@ const hostState = computed(() =>
   }
 
   :global(.content:where([data-hn-ui-list-item])) {
-    display: flex;
+    display: flex !important;
     flex: 1;
-    flex-direction: column;
-    gap: var(--ui-space-0-5, 2px);
+    flex-direction: column !important;
+    gap: var(--ui-space-0-5, 2px) !important;
     min-inline-size: 0;
   }
 
   :global(.title:where([data-hn-ui-list-item])),
   :global(.description:where([data-hn-ui-list-item])) {
-    display: block;
+    display: block !important;
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -372,7 +372,7 @@ const hostState = computed(() =>
     line-height: var(--ui-line-height-tight);
   }
   :global(:scope[data-ui-list-item-state~="align=title"]:where([data-hn-ui-list-item])) {
-    align-items: flex-start;
+    align-items: flex-start !important;
   }
 
   :global(:scope[data-ui-list-item-state~="align=title"] .leading:where([data-hn-ui-list-item])),
@@ -405,7 +405,7 @@ const hostState = computed(() =>
   :global(.leading:empty:where([data-hn-ui-list-item])),
   :global(.description:empty:where([data-hn-ui-list-item])),
   :global(.trailing:empty:where([data-hn-ui-list-item])) {
-    display: none;
+    display: none !important;
   }
 
   @media (forced-colors: active) {
@@ -419,7 +419,7 @@ const hostState = computed(() =>
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-list-item])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>