@threadlabs/looma 0.32.1 → 0.33.0

package/vue/UiEditorSlashMenu.vue

@@ -384,7 +384,7 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
   :global(:scope[popover]:where([data-hn-ui-editor-slash-menu])) {
     position: fixed;
     inset: auto;
-    margin: 0;
+    margin: 0 !important;
   }
   :global(:scope:where([data-hn-ui-editor-slash-menu])) {
     user-select: none;
@@ -395,8 +395,8 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
     border-radius: var(--ui-radius-dialog);
     box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
     overflow: hidden;
-    display: flex;
-    flex-direction: column;
+    display: flex !important;
+    flex-direction: column !important;
   }
   @media (max-width: 767px) {
     :global(:scope:where([data-hn-ui-editor-slash-menu])) {
@@ -405,10 +405,10 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
     }
   }
   :global(.header:where([data-hn-ui-editor-slash-menu])) {
-    display: none;
-    align-items: center;
-    gap: var(--ui-space-2);
-    padding: var(--ui-space-3) var(--ui-space-4);
+    display: none !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
+    padding: var(--ui-space-3) var(--ui-space-4) !important;
     border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-muted);
@@ -419,22 +419,22 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
   :global(:scope > .header:empty:where([data-hn-ui-editor-slash-menu])),
   :global(:scope > .footer:empty:where([data-hn-ui-editor-slash-menu])),
   :global(:scope > .empty:empty:where([data-hn-ui-editor-slash-menu])) {
-    display: none;
+    display: none !important;
   }
   :global(.empty:where([data-hn-ui-editor-slash-menu])) {
-    padding: var(--ui-space-3);
+    padding: var(--ui-space-3) !important;
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-sm);
   }
   @media (max-width: 767px) {
     :global(.header:where([data-hn-ui-editor-slash-menu])) {
-      display: flex;
+      display: flex !important;
     }
   }
   :global(.list:where([data-hn-ui-editor-slash-menu])) {
     list-style: none;
-    margin: 0;
-    padding: var(--ui-space-1) 0;
+    margin: 0 !important;
+    padding: var(--ui-space-1) 0 !important;
     overflow-y: auto;
     max-height: 280px;
     overscroll-behavior: contain;
@@ -463,14 +463,14 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
   @media (max-width: 767px) {
     :global(.list:where([data-hn-ui-editor-slash-menu])) {
       max-height: calc(60dvh - 80px);
-      padding: var(--ui-space-1) 0 var(--ui-space-2);
+      padding: var(--ui-space-1) 0 var(--ui-space-2) !important;
     }
   }
   :global(.item:where([data-hn-ui-editor-slash-menu])) {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-3);
-    padding: var(--ui-space-2) var(--ui-space-3);
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-3) !important;
+    padding: var(--ui-space-2) var(--ui-space-3) !important;
     min-height: 44px;
     cursor: pointer;
     transition: background-color 120ms ease;
@@ -479,9 +479,9 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
     background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
   }
   :global(.icon:where([data-hn-ui-editor-slash-menu])) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     width: 32px;
     height: 32px;
     background: var(--ui-surface-hover);
@@ -504,10 +504,10 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
     --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
   }
   :global(.body:where([data-hn-ui-editor-slash-menu])) {
-    display: flex;
+    display: flex !important;
     min-width: 0;
-    flex-direction: column;
-    gap: 1px;
+    flex-direction: column !important;
+    gap: 1px !important;
   }
   :global(.title:where([data-hn-ui-editor-slash-menu])) {
     font-size: var(--ui-font-size-sm);
@@ -525,25 +525,25 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
     text-overflow: ellipsis;
   }
   :global(.footer:where([data-hn-ui-editor-slash-menu])) {
-    padding: var(--ui-space-2) var(--ui-space-3);
+    padding: var(--ui-space-2) var(--ui-space-3) !important;
     border-top: var(--ui-border-width) solid var(--ui-border-divider);
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-muted);
   }
   :global(:scope kbd:where([data-hn-ui-editor-slash-menu])) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     font-family: var(--ui-font-family-mono, ui-monospace, monospace);
     font-size: var(--ui-font-size-2xs);
     background: var(--ui-surface-hover);
     border: var(--ui-border-width) solid var(--ui-border);
     border-radius: var(--ui-radius-sm);
-    padding: 0 3px;
+    padding: 0 3px !important;
     color: var(--ui-text-secondary);
   }
   :global(:scope[hidden]:where([data-hn-ui-editor-slash-menu])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiEditorSlashMenuGroup.vue

@@ -92,22 +92,22 @@ checkHydratedRoot('li', 'ui-editor-slash-menu-group')
 <style scoped>
 @scope (.ui-editor-slash-menu-group) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-editor-slash-menu-group])) {
-    display: block;
+    display: block !important;
     list-style: none;
   }
   :global(.heading:where([data-hn-ui-editor-slash-menu-group])) {
-    padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
+    padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1) !important;
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-semibold);
   }
   :global(ul:where([data-hn-ui-editor-slash-menu-group])) {
-    margin: 0;
-    padding: 0;
+    margin: 0 !important;
+    padding: 0 !important;
     list-style: none;
   }
   :global(:scope[hidden]:where([data-hn-ui-editor-slash-menu-group])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiEditorSlashMenuItem.vue

@@ -186,11 +186,11 @@ checkHydratedRoot('li', 'ui-editor-slash-menu-item')
 <style scoped>
 @scope (.ui-editor-slash-menu-item) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-editor-slash-menu-item])) {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-3);
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-3) !important;
     min-block-size: 44px;
-    padding: var(--ui-space-2) var(--ui-space-3);
+    padding: var(--ui-space-2) var(--ui-space-3) !important;
     cursor: pointer;
     list-style: none;
   }
@@ -207,9 +207,9 @@ checkHydratedRoot('li', 'ui-editor-slash-menu-item')
     color: var(--ui-disabled-text);
   }
   :global(.icon:where([data-hn-ui-editor-slash-menu-item])) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     inline-size: 32px;
     block-size: 32px;
     flex: 0 0 auto;
@@ -222,10 +222,10 @@ checkHydratedRoot('li', 'ui-editor-slash-menu-item')
     --_ui-default-icon-size: 1rem;
   }
   :global(.body:where([data-hn-ui-editor-slash-menu-item])) {
-    display: flex;
+    display: flex !important;
     min-inline-size: 0;
-    flex-direction: column;
-    gap: 1px;
+    flex-direction: column !important;
+    gap: 1px !important;
   }
   :global(.title:where([data-hn-ui-editor-slash-menu-item])),
   :global(.description:where([data-hn-ui-editor-slash-menu-item])) {
@@ -243,7 +243,7 @@ checkHydratedRoot('li', 'ui-editor-slash-menu-item')
     font-size: var(--ui-font-size-xs);
   }
   :global(:scope[hidden]:where([data-hn-ui-editor-slash-menu-item])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiEditorSurface.vue

@@ -102,8 +102,8 @@ const hostState = computed(() =>
 /* The document renderer consumes these inherited surface settings. They do not style controls. */
 @scope (.ui-editor-surface) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-editor-surface])) {
-    display: flex;
-    flex-direction: column;
+    display: flex !important;
+    flex-direction: column !important;
     min-inline-size: 0;
     max-inline-size: 100%;
   }

package/vue/UiEditorTableContextMenu.vue

@@ -572,39 +572,39 @@ useComponentHost(
   :global(:scope[popover]) {
     position: fixed;
     inset: auto;
-    margin: 0;
+    margin: 0 !important;
   }
   :global(:scope) {
     /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     min-width: min(14rem, calc(100vw - 24px));
     max-width: min(17rem, calc(100vw - 24px));
     max-height: min(28rem, calc(100vh - 24px));
-    padding: var(--ui-space-2);
+    padding: var(--ui-space-2) !important;
     background: var(--ui-surface);
     border: var(--ui-border-width) solid var(--ui-border-strong);
     border-radius: var(--ui-radius-lg);
     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;
     overflow-y: auto;
     overscroll-behavior: contain;
     scrollbar-width: thin;
   }
   :global(.section) {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 3px !important;
   }
   :global(:scope button) {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-2);
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
     width: 100%;
     text-align: left;
     min-height: 32px;
-    padding: var(--ui-space-2) var(--ui-space-2);
+    padding: var(--ui-space-2) var(--ui-space-2) !important;
     border: none;
     border-radius: var(--ui-radius-sm);
     background: none;
@@ -626,22 +626,22 @@ useComponentHost(
     color: var(--ui-danger);
   }
   :global(.swatches) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 3px;
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 3px !important;
   }
   :global(:scope .swatch-button) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-2);
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
     flex: 1 0 5rem;
     min-width: 5rem;
     max-width: calc((100% - 6px) / 3);
-    padding-inline-end: var(--ui-space-1);
+    padding-inline-end: var(--ui-space-1) !important;
   }
 
   :global(.swatch) {
-    display: inline-flex;
+    display: inline-flex !important;
     width: 1rem;
     height: 1rem;
     border-radius: var(--ui-radius-round);
@@ -670,7 +670,7 @@ useComponentHost(
   }
 
   :global(.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;
@@ -681,14 +681,14 @@ useComponentHost(
   :global(.sep) {
     height: 1px;
     background: var(--ui-border-divider);
-    margin: var(--ui-space-1) 0;
+    margin: var(--ui-space-1) 0 !important;
   }
   :global(.sep:first-child) {
-    display: none;
+    display: none !important;
   }
 
   :global(:scope[hidden]) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiEditorTableOverlay.vue

@@ -773,7 +773,7 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
 <style scoped>
 @scope (.ui-editor-table-overlay) to ([data-hn]) {
   :global(:scope) {
-    display: block;
+    display: block !important;
     width: 100%;
     height: 100%;
     overflow: visible;
@@ -805,12 +805,12 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
   }
   :global(.handle) {
     position: absolute;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     width: 24px;
     height: 24px;
-    padding: 0;
+    padding: 0 !important;
     border: var(--ui-border-width) solid var(--ui-affordance-near-color, var(--ui-border-strong));
     border-radius: var(--ui-radius-round);
     background: color-mix(in srgb, var(--ui-surface-elevated) 96%, transparent);
@@ -914,7 +914,7 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
     left: 50%;
     width: max-content;
     max-width: 14rem;
-    padding: var(--ui-space-1) var(--ui-space-2);
+    padding: var(--ui-space-1) var(--ui-space-2) !important;
     border-radius: var(--ui-radius-sm);
     background: var(--ui-text-primary);
     color: var(--ui-surface-elevated);
@@ -938,10 +938,10 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
   :global(.selector), :global(.cell-menu) {
     position: absolute;
     z-index: 2;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding: 0 !important;
     border: var(--ui-border-width) solid transparent;
     background: transparent;
     color: var(--ui-text-secondary);
@@ -979,7 +979,7 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
     pointer-events: none;
   }
   :global(.selector .glyph) {
-    display: block;
+    display: block !important;
     width: 14px;
     height: 14px;
     --_ui-default-icon-size: 14px;
@@ -1055,10 +1055,10 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
     height: 100%;
   }
   :global(.drop-indicator[hidden]) {
-    display: none;
+    display: none !important;
   }
   :global(:scope[hidden]) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiEditorTableToolbar.vue

@@ -674,7 +674,7 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
   :global(.looma-editor__mobile-toolbar-shell :scope) {
     min-width: max-content;
     min-height: 100%;
-    padding: 0;
+    padding: 0 !important;
     background: transparent;
     border: 0;
     border-radius: 0;
@@ -690,10 +690,10 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     background: var(--ui-accent-soft, var(--ui-accent-subtle));
   }
   :global(:scope) {
-    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));
@@ -701,9 +701,9 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     backdrop-filter: blur(10px);
   }
   :global(.group) {
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 2px !important;
     overflow: hidden;
   }
   :global(.sep) {
@@ -715,10 +715,10 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     position: relative;
   }
   :global(:scope 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);
@@ -728,7 +728,7 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     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;
   }
   :global(:scope button:hover) {
@@ -756,40 +756,40 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
   }
   :global(.chevron) {
-    display: inline-flex;
+    display: inline-flex !important;
     --_ui-default-icon-size: 0.875rem;
   }
   :global(:scope .icon-button) {
     width: 32px;
-    padding-inline: 0;
+    padding-inline: 0 !important;
   }
   :global(.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;
     scrollbar-width: thin;
   }
   :global(.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);
   }
   :global(.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;
@@ -797,19 +797,19 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     color: var(--ui-text-muted);
   }
   :global(.menu button) {
-    display: flex;
-    justify-content: flex-start;
+    display: flex !important;
+    justify-content: flex-start !important;
     width: 100%;
     text-align: left;
   }
   :global(.swatches) {
-    display: grid;
+    display: grid !important;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 2px;
+    gap: 2px !important;
   }
   :global(:scope .swatch-button) {
-    gap: var(--ui-space-1);
-    justify-content: flex-start;
+    gap: var(--ui-space-1) !important;
+    justify-content: flex-start !important;
   }
   :global(.swatch) {
     width: 14px;
@@ -828,7 +828,7 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     background: var(--ui-accent-soft, var(--ui-accent-subtle));
   }
   :global(:scope[hidden]) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiEditorToolbar.vue

@@ -152,21 +152,21 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     position: sticky;
     top: 0;
     z-index: var(--ui-editor-toolbar-z-index, 10);
-    display: flex;
-    align-items: center;
+    display: flex !important;
+    align-items: center !important;
     padding: var(--ui-editor-toolbar-padding-block, 6px)
-      var(--ui-editor-toolbar-padding-inline, 12px);
+      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));
   }
   :global(.strip:where([data-hn-ui-editor-toolbar])) {
-    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;
@@ -175,7 +175,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
   }
 
   :global(.strip:where([data-hn-ui-editor-toolbar])::-webkit-scrollbar) {
-    display: none;
+    display: none !important;
   }
 
   :global(.strip > :where(:not([data-hn-ui-editor-toolbar])):is(*)) {
@@ -213,17 +213,17 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     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;
   }
 
   :global(:scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar])) {
-    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%,
@@ -276,7 +276,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     width: 100%;
     max-width: none;
     min-height: 100%;
-    padding: 0;
+    padding: 0 !important;
     background: transparent;
     border: 0;
     border-radius: 0;
@@ -290,7 +290,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     scroll-snap-type: x mandatory;
   }
   :global(:scope[hidden]:where([data-hn-ui-editor-toolbar])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>

package/vue/UiFloatingActionButton.vue

@@ -161,7 +161,7 @@ const hostState = computed(() =>
     );
     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);
   }
 
@@ -169,11 +169,11 @@ const hostState = computed(() =>
     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);
@@ -213,11 +213,11 @@ const hostState = computed(() =>
 
   @media (min-width: 768px) {
     :global(:scope[data-ui-floating-action-button-state~="mobileOnly"]:where([data-hn-ui-floating-action-button])) {
-      display: none;
+      display: none !important;
     }
   }
   :global(:scope[hidden]:where([data-hn-ui-floating-action-button])) {
-    display: none;
+    display: none !important;
   }
 }
 </style>