@threadlabs/looma 0.32.1 → 0.33.1

package/styles/ui-context-menu.css

@@ -37,17 +37,17 @@
       --_ui-context-menu-shadow: var(--ui-context-menu-shadow);
       --_ui-context-menu-z-index: var(--ui-context-menu-z-index);
 
-      display: contents;
+      display: contents !important;
     }
 
     .menu {
       position: fixed;
       inset: auto;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      padding: var(--ui-space-1);
+      margin: 0 !important;
+      display: flex !important;
+      flex-direction: column !important;
+      box-sizing: border-box !important;
+      padding: var(--ui-space-1) !important;
       background: var(--_ui-context-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       border: var(--ui-border-width) solid var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
@@ -68,7 +68,7 @@
     .menu hr {
       align-self: stretch;
       block-size: 0;
-      margin: var(--ui-space-1) 0;
+      margin: var(--ui-space-1) 0 !important;
       border: 0;
       border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
@@ -87,7 +87,7 @@
 
     .menu[hidden],
     .menu[popover]:not(:popover-open) {
-      display: none;
+      display: none !important;
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -98,7 +98,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-context-menu"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-context-menu"]) to ([data-component]) {

package/styles/ui-cover.css

@@ -10,15 +10,15 @@
 /* A layout primitive that centres its content in the space, both ways, with room around it: the
        frame for a view that is one card or one message. */
     :scope:where([data-component~="ui-cover"]) {
-      display: flex;
-      flex-direction: column;
+      display: flex !important;
+      flex-direction: column !important;
       /* Safe: a child wider than the cover keeps its start edge in view instead of overflowing both ways. */
-      align-items: safe center;
-      justify-content: center;
-      gap: var(--ui-space-6);
-      box-sizing: border-box;
+      align-items: safe center !important;
+      justify-content: center !important;
+      gap: var(--ui-space-6) !important;
+      box-sizing: border-box !important;
       min-block-size: 100dvh;
-      padding: var(--ui-space-6) var(--ui-space-4);
+      padding: var(--ui-space-6) var(--ui-space-4) !important;
     }
 
     :scope:where([data-component~="ui-cover"])[data-ui-cover-state~="size=fill"] {
@@ -28,7 +28,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-cover"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-cover"]) to ([data-component]) {

package/styles/ui-description-item.css

@@ -9,14 +9,14 @@
 @scope ([data-component~="ui-description-item"]) to ([data-component], [data-slotted]) {
 /* One term and its value in a ui-description-list, laid out by the list's layout. */
     :scope:where([data-component~="ui-description-item"]) {
-      display: var(--_ui-description-display, grid);
+      display: var(--_ui-description-display, grid) !important;
       grid-column: var(--_ui-description-column, 1 / -1);
       grid-template-columns: subgrid;
-      flex-direction: column;
-      align-items: var(--_ui-description-align, baseline);
-      gap: var(--ui-space-1) var(--ui-space-6);
+      flex-direction: column !important;
+      align-items: var(--_ui-description-align, baseline) !important;
+      gap: var(--ui-space-1) var(--ui-space-6) !important;
       min-inline-size: 0;
-      padding: var(--_ui-description-padding, 0);
+      padding: var(--_ui-description-padding, 0) !important;
       border-width: var(--_ui-description-border-width, 0);
       border-style: solid;
       border-color: var(--_ui-description-border-color, var(--ui-border-default));
@@ -29,7 +29,7 @@
     }
 
     dd {
-      margin: 0;
+      margin: 0 !important;
       min-inline-size: 0;
       color: var(--ui-text-primary);
       font-weight: var(--ui-font-medium);
@@ -40,7 +40,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-description-item"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-description-item"]) to ([data-component]) {

package/styles/ui-description-list.css

@@ -16,11 +16,11 @@
       --_min: 10rem;
       --_track: var(--_min);
       --_tile-padding: var(--ui-space-3);
-      display: grid;
+      display: grid !important;
       grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
-      gap: var(--_gap) var(--_column-gap);
+      gap: var(--_gap) var(--_column-gap) !important;
       min-inline-size: 0;
-      margin: 0;
+      margin: 0 !important;
     }
 
     /* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
@@ -73,7 +73,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-description-list"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-description-list"]) to ([data-component]) {

package/styles/ui-dialog.css

@@ -43,17 +43,17 @@
 
       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)));
       border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
@@ -71,7 +71,7 @@
     }
 
     :scope:where([data-component~="ui-dialog"])[open] {
-      display: flex;
+      display: flex !important;
       visibility: visible;
       pointer-events: auto;
       opacity: 1;
@@ -92,36 +92,36 @@
       inline-size: 100%;
       block-size: 100dvh;
       max-block-size: none;
-      margin: 0;
+      margin: 0 !important;
       border-radius: var(--ui-dialog-radius, 0);
     }
 
     :scope:where([data-component~="ui-dialog"])[data-ui-dialog-state~="alert"] .close {
-      display: none;
+      display: none !important;
     }
 
     /* Own the layout wrapper; nested component roots are outside these scoped rules. */
     header {
-      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);
+      padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5) !important;
     }
 
     /* Alerts have no close target to add height above the title. */
     :scope:where([data-component~="ui-dialog"])[data-ui-dialog-state~="alert"] header {
-      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;
     }
 
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
     :scope:where([data-component~="ui-dialog"]) .title {
       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;
@@ -131,13 +131,13 @@
     }
 
     .close {
-      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;
@@ -186,24 +186,24 @@
     }
 
     .body {
-      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;
     }
 
     footer {
-      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;
     }
 
     footer:empty {
-      display: none;
+      display: none !important;
     }
 
     @keyframes ui-dialog-enter {
@@ -290,17 +290,17 @@
 
       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)));
       border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
@@ -318,7 +318,7 @@
     }
 
     :where([data-component~="ui-dialog"])[open]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-dialog"]))) {
-      display: flex;
+      display: flex !important;
       visibility: visible;
       pointer-events: auto;
       opacity: 1;
@@ -339,36 +339,36 @@
       inline-size: 100%;
       block-size: 100dvh;
       max-block-size: none;
-      margin: 0;
+      margin: 0 !important;
       border-radius: var(--ui-dialog-radius, 0);
     }
 
     :where([data-component~="ui-dialog"])[data-ui-dialog-state~="alert"] .close:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-dialog"]))) {
-      display: none;
+      display: none !important;
     }
 
     /* Own the layout wrapper; nested component roots are outside these scoped rules. */
     header:where(:scope, :scope *) {
-      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);
+      padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5) !important;
     }
 
     /* Alerts have no close target to add height above the title. */
     :where([data-component~="ui-dialog"])[data-ui-dialog-state~="alert"] header:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="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;
     }
 
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
     :where([data-component~="ui-dialog"]) .title:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="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;
@@ -378,13 +378,13 @@
     }
 
     .close:where(:scope, :scope *) {
-      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;
@@ -432,24 +432,24 @@
     }
 
     .body:where(:scope, :scope *) {
-      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;
     }
 
     footer:where(:scope, :scope *) {
-      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;
     }
 
     footer:empty:where(:scope, :scope *) {
-      display: none;
+      display: none !important;
     }
 
     @keyframes ui-dialog-enter {

package/styles/ui-disclosure.css

@@ -42,7 +42,7 @@
     /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
      * select or combobox. Stacked disclosures share their dividers. */
     :scope:where([data-component~="ui-disclosure"]) {
-      display: block;
+      display: block !important;
       inline-size: 100%;
       overflow: clip;
       border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
@@ -50,13 +50,13 @@
     }
 
     .trigger {
-      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;
@@ -87,13 +87,13 @@
 
     .leading,
     .indicator {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       flex: none;
     }
     .leading:empty {
-      display: none;
+      display: none !important;
     }
     .indicator {
       transition: transform var(--ui-motion-feedback) var(--ui-motion-feedback-ease);
@@ -111,7 +111,7 @@
     }
 
     .panel {
-      display: grid;
+      display: grid !important;
       grid-template-rows: 0fr;
       transition: grid-template-rows var(--ui-motion-reveal) var(--ui-motion-reveal-ease), content-visibility var(--ui-motion-reveal) allow-discrete;
     }
@@ -119,21 +119,21 @@
     .panel-inner {
       min-block-size: 0;
       overflow: hidden;
-      padding-inline: var(--ui-space-3);
+      padding-inline: var(--ui-space-3) !important;
     }
 
     :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="internalOpen"] .panel {
       grid-template-rows: 1fr;
     }
     :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="internalOpen"] .panel-inner {
-      padding-block: 0 var(--ui-space-3);
+      padding-block: 0 var(--ui-space-3) !important;
     }
 
     /* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
      * normal content-sized layout and its animation remain unchanged when fill is omitted. */
     :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"] {
-      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));
       transition: flex-grow var(--ui-motion-layout) var(--ui-motion-layout-ease);
@@ -154,26 +154,26 @@
       min-block-size: 0;
     }
     :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"] .panel-inner {
-      display: flex;
-      flex-direction: column;
+      display: flex !important;
+      flex-direction: column !important;
       flex: 1;
       min-block-size: 0;
-      padding: 0;
+      padding: 0 !important;
     }
 
     :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="variant=navigation"] .trigger {
-      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);
       color: var(--ui-text-secondary);
     }
     :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"] .trigger {
-      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);
     }
@@ -201,7 +201,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-disclosure"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-disclosure"]) to ([data-component]) {

package/styles/ui-editable.css

@@ -8,10 +8,10 @@
 }
 @scope ([data-component~="ui-editable"]) to ([data-component], [data-slotted]) {
 :scope:where([data-component~="ui-editable"]) {
-      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);
     }
@@ -19,7 +19,7 @@
     /* The value and the input share one grid cell with identical box metrics, so switching between
      * display and edit never changes the control's size or moves the text. */
     .field {
-      display: inline-grid;
+      display: inline-grid !important;
       min-inline-size: 8rem;
       max-inline-size: 100%;
     }
@@ -27,10 +27,10 @@
     .preview,
     .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;
@@ -43,9 +43,9 @@
     }
 
     .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;
@@ -94,16 +94,16 @@
     }
 
     .actions {
-      display: none;
-      gap: var(--ui-space-1);
+      display: none !important;
+      gap: var(--ui-space-1) !important;
     }
     :scope:where([data-component~="ui-editable"])[data-ui-editable-state~="internalEdit"] .actions {
-      display: inline-flex;
+      display: inline-flex !important;
     }
 
     .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);
@@ -133,7 +133,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-editable"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-editable"]) to ([data-component]) {

package/styles/ui-editor-insert-table-grid.css

@@ -8,7 +8,7 @@
 }
 @scope ([data-component~="ui-editor-insert-table-grid"]) to ([data-component], [data-slotted]) {
 :scope:where([data-component~="ui-editor-insert-table-grid"]) {
-      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);
@@ -16,17 +16,17 @@
     }
 
     .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);
     }
 
     .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;
@@ -54,7 +54,7 @@
     .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);
@@ -72,8 +72,8 @@
     }
 
     .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;
     }
@@ -97,7 +97,7 @@
     }
 
     :scope:where([data-component~="ui-editor-insert-table-grid"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-editor-insert-table-grid"]) to ([data-component]) {