@threadlabs/looma 0.32.0 → 0.33.0

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]) {

package/styles/ui-editor-mention-menu-item.css

@@ -8,11 +8,11 @@
 }
 @scope ([data-component~="ui-editor-mention-menu-item"]) to ([data-component], [data-slotted]) {
 :scope:where([data-component~="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;
     }
@@ -36,9 +36,9 @@
     }
 
     .avatar {
-      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;
@@ -50,9 +50,9 @@
     }
 
     .body {
-      display: flex;
+      display: flex !important;
       min-inline-size: 0;
-      flex-direction: column;
+      flex-direction: column !important;
     }
 
     .label, .detail {
@@ -73,7 +73,7 @@
     }
 
     :scope:where([data-component~="ui-editor-mention-menu-item"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-editor-mention-menu-item"]) to ([data-component]) {

package/styles/ui-editor-mention-menu.css

@@ -10,7 +10,7 @@
 :scope:where([data-component~="ui-editor-mention-menu"])[popover] {
       position: fixed;
       inset: auto;
-      margin: 0;
+      margin: 0 !important;
     }
 
     :scope:where([data-component~="ui-editor-mention-menu"]) {
@@ -18,9 +18,9 @@
     }
 
     :scope:where([data-component~="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);
@@ -28,11 +28,11 @@
     }
 
     .header {
-      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);
@@ -40,11 +40,11 @@
     }
 
     :scope:where([data-component~="ui-editor-mention-menu"]) > .header:empty, :scope:where([data-component~="ui-editor-mention-menu"]) > .empty:empty {
-      display: none;
+      display: none !important;
     }
 
     .empty {
-      padding: var(--ui-space-3);
+      padding: var(--ui-space-3) !important;
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);
     }
@@ -59,8 +59,8 @@
 
     .list {
       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;
@@ -84,11 +84,11 @@
     }
 
     .item {
-      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;
     }
 
@@ -104,9 +104,9 @@
     }
 
     .avatar {
-      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;
@@ -118,9 +118,9 @@
     }
 
     .body {
-      display: flex;
+      display: flex !important;
       min-width: 0;
-      flex-direction: column;
+      flex-direction: column !important;
     }
 
     .label,
@@ -144,7 +144,7 @@
 
     .loading {
       min-height: 44px;
-      padding: var(--ui-space-3);
+      padding: var(--ui-space-3) !important;
     }
 
     @media (max-width: 767px) {
@@ -159,7 +159,7 @@
     }
 
     :scope:where([data-component~="ui-editor-mention-menu"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-editor-mention-menu"]) to ([data-component]) {