@threadlabs/looma 0.32.0 → 0.33.0

package/vue/UiDialog.vue

@@ -392,17 +392,17 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
 
     position: fixed;
     inset: 0;
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     inline-size: min(
       calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
       var(--ui-dialog-max-width, var(--_ui-dialog-size, 440px))
     );
     max-inline-size: none;
     max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
-    margin: auto;
-    padding: 0;
+    margin: auto !important;
+    padding: 0 !important;
     overflow: hidden;
-    flex-direction: column;
+    flex-direction: column !important;
     background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
     border: var(--ui-border-width) solid
       var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
@@ -424,7 +424,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   }
 
   :global(:scope[open]:where([data-hn-ui-dialog])) {
-    display: flex;
+    display: flex !important;
     visibility: visible;
     pointer-events: auto;
     opacity: 1;
@@ -446,31 +446,31 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     inline-size: 100%;
     block-size: 100dvh;
     max-block-size: none;
-    margin: 0;
+    margin: 0 !important;
     border-radius: var(--ui-dialog-radius, 0);
   }
 
   :global(:scope[data-ui-dialog-state~="alert"] .close:where([data-hn-ui-dialog])) {
-    display: none;
+    display: none !important;
   }
   :global(header:where([data-hn-ui-dialog])) {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-3);
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-3) !important;
     flex: none;
     /* The title's ink sits inside its line box and the taller close target. Balance that
        visible top inset against the action row's bottom inset, not just the boxes. */
     padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3)
-      var(--ui-space-5);
+      var(--ui-space-5) !important;
   }
   :global(:scope[data-ui-dialog-state~="alert"] header:where([data-hn-ui-dialog])) {
-    padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
+    padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3) !important;
   }
   :global(:scope .title:where([data-hn-ui-dialog])) {
     flex: 1;
     min-inline-size: 0;
-    margin: 0;
-    padding: 0;
+    margin: 0 !important;
+    padding: 0 !important;
     border: 0;
     color: var(--ui-text-primary);
     letter-spacing: normal;
@@ -480,13 +480,13 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   }
 
   :global(.close:where([data-hn-ui-dialog])) {
-    display: inline-grid;
+    display: inline-grid !important;
     place-items: center;
     flex: none;
-    margin-inline-start: auto;
+    margin-inline-start: auto !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;
@@ -533,24 +533,24 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   }
 
   :global(.body:where([data-hn-ui-dialog])) {
-    display: flex;
-    flex-direction: column;
+    display: flex !important;
+    flex-direction: column !important;
     flex: 1 1 auto;
     min-block-size: 0;
-    padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
+    padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5) !important;
   }
 
   :global(footer:where([data-hn-ui-dialog])) {
-    display: flex;
+    display: flex !important;
     flex: none;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: var(--ui-space-2);
-    padding: 0 var(--ui-space-5) var(--ui-space-5);
+    flex-wrap: wrap !important;
+    justify-content: flex-end !important;
+    gap: var(--ui-space-2) !important;
+    padding: 0 var(--ui-space-5) var(--ui-space-5) !important;
   }
 
   :global(footer:empty:where([data-hn-ui-dialog])) {
-    display: none;
+    display: none !important;
   }
 
   :global(:scope:where([data-hn-ui-dialog])::backdrop) {
@@ -583,17 +583,17 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
 
     position: fixed;
     inset: 0;
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     inline-size: min(
       calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
       var(--ui-dialog-max-width, var(--_ui-dialog-size, 440px))
     );
     max-inline-size: none;
     max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
-    margin: auto;
-    padding: 0;
+    margin: auto !important;
+    padding: 0 !important;
     overflow: hidden;
-    flex-direction: column;
+    flex-direction: column !important;
     background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
     border: var(--ui-border-width) solid
       var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
@@ -615,7 +615,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   }
 
   :global(:where(.ui-dialog)[open]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
-    display: flex;
+    display: flex !important;
     visibility: visible;
     pointer-events: auto;
     opacity: 1;
@@ -637,34 +637,34 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     inline-size: 100%;
     block-size: 100dvh;
     max-block-size: none;
-    margin: 0;
+    margin: 0 !important;
     border-radius: var(--ui-dialog-radius, 0);
   }
 
   :global(:where(.ui-dialog)[data-ui-dialog-state~="alert"]
     .close:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
-    display: none;
+    display: none !important;
   }
   :global(header:where(:scope, :scope *):where([data-hn-ui-dialog])) {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-3);
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-3) !important;
     flex: none;
     /* The title's ink sits inside its line box and the taller close target. Balance that
        visible top inset against the action row's bottom inset, not just the boxes. */
     padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3)
-      var(--ui-space-5);
+      var(--ui-space-5) !important;
   }
   :global(:where(.ui-dialog)[data-ui-dialog-state~="alert"]
     header:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
-    padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
+    padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3) !important;
   }
   :global(:where(.ui-dialog)
     .title:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
     flex: 1;
     min-inline-size: 0;
-    margin: 0;
-    padding: 0;
+    margin: 0 !important;
+    padding: 0 !important;
     border: 0;
     color: var(--ui-text-primary);
     letter-spacing: normal;
@@ -674,13 +674,13 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   }
 
   :global(.close:where(:scope, :scope *):where([data-hn-ui-dialog])) {
-    display: inline-grid;
+    display: inline-grid !important;
     place-items: center;
     flex: none;
-    margin-inline-start: auto;
+    margin-inline-start: auto !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;
@@ -732,24 +732,24 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   }
 
   :global(.body:where(:scope, :scope *):where([data-hn-ui-dialog])) {
-    display: flex;
-    flex-direction: column;
+    display: flex !important;
+    flex-direction: column !important;
     flex: 1 1 auto;
     min-block-size: 0;
-    padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
+    padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5) !important;
   }
 
   :global(footer:where(:scope, :scope *):where([data-hn-ui-dialog])) {
-    display: flex;
+    display: flex !important;
     flex: none;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: var(--ui-space-2);
-    padding: 0 var(--ui-space-5) var(--ui-space-5);
+    flex-wrap: wrap !important;
+    justify-content: flex-end !important;
+    gap: var(--ui-space-2) !important;
+    padding: 0 var(--ui-space-5) var(--ui-space-5) !important;
   }
 
   :global(footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog])) {
-    display: none;
+    display: none !important;
   }
 
   :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop) {

package/vue/UiDisclosure.vue

@@ -447,7 +447,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     --_trigger-padding-inline: var(--ui-space-2);
   }
   :global(:scope:where([data-hn-ui-disclosure])) {
-    display: block;
+    display: block !important;
     inline-size: 100%;
     overflow: clip;
     border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
@@ -455,13 +455,13 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   }
 
   :global(.trigger:where([data-hn-ui-disclosure])) {
-    display: flex;
-    gap: var(--ui-space-3);
-    align-items: center;
+    display: flex !important;
+    gap: var(--ui-space-3) !important;
+    align-items: center !important;
     inline-size: 100%;
     min-block-size: var(--_ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
     padding: var(--_ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
-      var(--_ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
+      var(--_ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline)) !important;
     border: 0;
     background: transparent;
     color: inherit;
@@ -493,13 +493,13 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
 
   :global(.leading:where([data-hn-ui-disclosure])),
   :global(.indicator:where([data-hn-ui-disclosure])) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     flex: none;
   }
   :global(.leading:empty:where([data-hn-ui-disclosure])) {
-    display: none;
+    display: none !important;
   }
   :global(.indicator:where([data-hn-ui-disclosure])) {
     transition: transform var(--ui-motion-feedback) var(--ui-motion-feedback-ease);
@@ -518,7 +518,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   }
 
   :global(.panel:where([data-hn-ui-disclosure])) {
-    display: grid;
+    display: grid !important;
     grid-template-rows: 0fr;
     transition:
       grid-template-rows var(--ui-motion-reveal) var(--ui-motion-reveal-ease),
@@ -528,7 +528,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   :global(.panel-inner:where([data-hn-ui-disclosure])) {
     min-block-size: 0;
     overflow: hidden;
-    padding-inline: var(--ui-space-3);
+    padding-inline: var(--ui-space-3) !important;
   }
 
   :global(:scope[data-ui-disclosure-state~="internalOpen"] .panel:where([data-hn-ui-disclosure])) {
@@ -536,11 +536,11 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   }
   :global(:scope[data-ui-disclosure-state~="internalOpen"]
     .panel-inner:where([data-hn-ui-disclosure])) {
-    padding-block: 0 var(--ui-space-3);
+    padding-block: 0 var(--ui-space-3) !important;
   }
   :global(:scope[data-ui-disclosure-state~="fill"]:where([data-hn-ui-disclosure])) {
-    display: flex;
-    flex-direction: column;
+    display: flex !important;
+    flex-direction: column !important;
     flex: 0 0 var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size));
     min-block-size: calc(
       var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size)) + var(--ui-border-width)
@@ -563,19 +563,19 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     min-block-size: 0;
   }
   :global(:scope[data-ui-disclosure-state~="fill"] .panel-inner:where([data-hn-ui-disclosure])) {
-    display: flex;
-    flex-direction: column;
+    display: flex !important;
+    flex-direction: column !important;
     flex: 1;
     min-block-size: 0;
-    padding: 0;
+    padding: 0 !important;
   }
 
   :global(:scope[data-ui-disclosure-state~="variant=navigation"]
     .trigger:where([data-hn-ui-disclosure])) {
-    gap: var(--ui-nav-gap);
-    padding-inline: var(--ui-nav-padding-inline);
+    gap: var(--ui-nav-gap) !important;
+    padding-inline: var(--ui-nav-padding-inline) !important;
     min-block-size: var(--ui-nav-min-block-size);
-    padding-block: var(--ui-nav-padding-block);
+    padding-block: var(--ui-nav-padding-block) !important;
     border-radius: var(--ui-selection-radius);
     font-size: var(--ui-font-size-md);
     font-weight: var(--ui-font-normal);
@@ -583,8 +583,8 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   }
   :global(:scope[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"]
     .trigger:where([data-hn-ui-disclosure])) {
-    padding-inline: var(--ui-nav-compact-padding-inline);
-    padding-block: var(--ui-nav-compact-padding-block);
+    padding-inline: var(--ui-nav-compact-padding-inline) !important;
+    padding-block: var(--ui-nav-compact-padding-block) !important;
     min-block-size: var(--ui-nav-compact-min-block-size);
     font-size: var(--ui-font-size-sm);
   }
@@ -613,7 +613,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-disclosure])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiEditable.vue

@@ -459,25 +459,25 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
 
 @scope (.ui-editable) to ([data-hn]) {
   :global(: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;
     min-inline-size: 0;
     color: var(--ui-text-primary);
   }
   :global(.field) {
-    display: inline-grid;
+    display: inline-grid !important;
     min-inline-size: 8rem;
     max-inline-size: 100%;
   }
 
   :global(.preview), :global(.input) {
     grid-area: 1 / 1;
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     min-block-size: var(--ui-control-size-sm);
-    margin: 0;
-    padding: var(--ui-space-1) var(--ui-space-2);
+    margin: 0 !important;
+    padding: var(--ui-space-1) var(--ui-space-2) !important;
     border: var(--ui-border-width) solid transparent;
     border-radius: var(--ui-radius-md);
     font: inherit;
@@ -490,9 +490,9 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
   }
 
   :global(.preview) {
-    display: inline-flex;
-    gap: var(--ui-space-2);
-    align-items: center;
+    display: inline-flex !important;
+    gap: var(--ui-space-2) !important;
+    align-items: center !important;
     background: transparent;
     text-align: start;
     cursor: pointer;
@@ -539,16 +539,16 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
   }
 
   :global(.actions) {
-    display: none;
-    gap: var(--ui-space-1);
+    display: none !important;
+    gap: var(--ui-space-1) !important;
   }
   :global(:scope[data-ui-editable-state~="internalEdit"] .actions) {
-    display: inline-flex;
+    display: inline-flex !important;
   }
 
   :global(.actions button) {
     min-block-size: var(--ui-control-size-sm);
-    padding: 0 var(--ui-space-3);
+    padding: 0 var(--ui-space-3) !important;
     border: var(--ui-border-width) solid var(--ui-border-strong);
     border-radius: var(--ui-radius-md);
     background: var(--ui-surface-elevated);
@@ -576,7 +576,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
     cursor: not-allowed;
   }
   :global(:scope[hidden]) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiEditorInsertTableGrid.vue

@@ -278,23 +278,23 @@ useComponentHost(
 <style scoped>
 @scope (.ui-editor-insert-table-grid) to ([data-hn]) {
   :global(:scope) {
-    padding: var(--ui-space-3);
+    padding: var(--ui-space-3) !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));
   }
   :global(.hint) {
-    margin: 0 0 var(--ui-space-2);
+    margin: 0 0 var(--ui-space-2) !important;
     font-size: var(--ui-font-size-sm);
     color: var(--ui-text-muted);
   }
   :global(.grid) {
-    display: grid;
+    display: grid !important;
     grid-template-columns: repeat(var(--_cols, 8), 1.25rem);
     grid-template-rows: repeat(var(--_rows, 8), 1.25rem);
-    gap: 2px;
-    margin-bottom: var(--ui-space-2);
+    gap: 2px !important;
+    margin-bottom: var(--ui-space-2) !important;
     max-inline-size: 100%;
     overflow: auto;
     --_ui-scroll-fade-direction: to right;
@@ -324,7 +324,7 @@ useComponentHost(
   :global(.cell) {
     width: 1.25rem;
     height: 1.25rem;
-    padding: 0;
+    padding: 0 !important;
     border: var(--ui-border-width) solid var(--ui-control-border);
     border-radius: var(--ui-radius-sm);
     background: var(--ui-surface);
@@ -339,8 +339,8 @@ useComponentHost(
     outline-offset: calc(-1 * var(--ui-focus-width));
   }
   :global(.header) {
-    display: block;
-    margin-bottom: var(--ui-space-2);
+    display: block !important;
+    margin-bottom: var(--ui-space-2) !important;
     font-size: var(--ui-font-size-sm);
     cursor: pointer;
   }
@@ -361,7 +361,7 @@ useComponentHost(
     }
   }
   :global(:scope[hidden]) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiEditorMentionMenu.vue

@@ -448,26 +448,26 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
   :global(:scope[popover]:where([data-hn-ui-editor-mention-menu])) {
     position: fixed;
     inset: auto;
-    margin: 0;
+    margin: 0 !important;
   }
   :global(:scope:where([data-hn-ui-editor-mention-menu])) {
     user-select: none;
   }
   :global(:scope:where([data-hn-ui-editor-mention-menu])) {
-    display: flex;
+    display: flex !important;
     overflow: hidden;
-    flex-direction: column;
+    flex-direction: column !important;
     background: var(--ui-surface);
     border: var(--ui-border-width) solid var(--ui-border-strong);
     border-radius: var(--ui-radius-dialog);
     box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
   }
   :global(.header:where([data-hn-ui-editor-mention-menu])) {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--ui-space-3);
-    padding: var(--ui-space-2) var(--ui-space-3);
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    gap: var(--ui-space-3) !important;
+    padding: var(--ui-space-2) var(--ui-space-3) !important;
     color: var(--ui-text-secondary);
     border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
     font-size: var(--ui-font-size-xs);
@@ -475,10 +475,10 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
   }
   :global(:scope > .header:empty:where([data-hn-ui-editor-mention-menu])),
   :global(:scope > .empty:empty:where([data-hn-ui-editor-mention-menu])) {
-    display: none;
+    display: none !important;
   }
   :global(.empty:where([data-hn-ui-editor-mention-menu])) {
-    padding: var(--ui-space-3);
+    padding: var(--ui-space-3) !important;
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
   }
@@ -491,8 +491,8 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
   }
   :global(.list:where([data-hn-ui-editor-mention-menu])) {
     max-height: 280px;
-    padding: var(--ui-space-1) 0;
-    margin: 0;
+    padding: var(--ui-space-1) 0 !important;
+    margin: 0 !important;
     overflow-y: auto;
     overscroll-behavior: contain;
     list-style: none;
@@ -519,11 +519,11 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
       calc(100% - var(--_ui-scroll-fade-size)) 100%;
   }
   :global(.item:where([data-hn-ui-editor-mention-menu])) {
-    display: flex;
-    align-items: center;
+    display: flex !important;
+    align-items: center !important;
     min-height: 44px;
-    padding: var(--ui-space-2) var(--ui-space-3);
-    gap: var(--ui-space-3);
+    padding: var(--ui-space-2) var(--ui-space-3) !important;
+    gap: var(--ui-space-3) !important;
     cursor: pointer;
   }
   :global(.item.active:where([data-hn-ui-editor-mention-menu])) {
@@ -535,9 +535,9 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
   }
 
   :global(.avatar:where([data-hn-ui-editor-mention-menu])) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     width: 32px;
     height: 32px;
     flex: 0 0 auto;
@@ -549,9 +549,9 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
   }
 
   :global(.body:where([data-hn-ui-editor-mention-menu])) {
-    display: flex;
+    display: flex !important;
     min-width: 0;
-    flex-direction: column;
+    flex-direction: column !important;
   }
 
   :global(.label:where([data-hn-ui-editor-mention-menu])),
@@ -575,7 +575,7 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
 
   :global(.loading:where([data-hn-ui-editor-mention-menu])) {
     min-height: 44px;
-    padding: var(--ui-space-3);
+    padding: var(--ui-space-3) !important;
   }
 
   @media (max-width: 767px) {
@@ -590,7 +590,7 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
   }
 
   :global(:scope[hidden]:where([data-hn-ui-editor-mention-menu])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiEditorMentionMenuItem.vue

@@ -139,11 +139,11 @@ checkHydratedRoot('li', 'ui-editor-mention-menu-item')
 
 @scope (.ui-editor-mention-menu-item) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-editor-mention-menu-item])) {
-    display: flex;
-    align-items: center;
+    display: flex !important;
+    align-items: center !important;
     min-block-size: 44px;
-    padding: var(--ui-space-2) var(--ui-space-3);
-    gap: var(--ui-space-3);
+    padding: var(--ui-space-2) var(--ui-space-3) !important;
+    gap: var(--ui-space-3) !important;
     cursor: pointer;
     list-style: none;
   }
@@ -161,9 +161,9 @@ checkHydratedRoot('li', 'ui-editor-mention-menu-item')
   }
 
   :global(.avatar:where([data-hn-ui-editor-mention-menu-item])) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     inline-size: 32px;
     block-size: 32px;
     flex: 0 0 auto;
@@ -175,9 +175,9 @@ checkHydratedRoot('li', 'ui-editor-mention-menu-item')
   }
 
   :global(.body:where([data-hn-ui-editor-mention-menu-item])) {
-    display: flex;
+    display: flex !important;
     min-inline-size: 0;
-    flex-direction: column;
+    flex-direction: column !important;
   }
 
   :global(.label:where([data-hn-ui-editor-mention-menu-item])),
@@ -199,7 +199,7 @@ checkHydratedRoot('li', 'ui-editor-mention-menu-item')
   }
 
   :global(:scope[hidden]:where([data-hn-ui-editor-mention-menu-item])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>