@threadlabs/looma 0.32.1 → 0.33.0

package/components/ui-disclosure/ui-disclosure.html

@@ -89,7 +89,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. */
     :host {
-      display: block;
+      display: block !important;
       inline-size: 100%;
       overflow: clip;
       border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
@@ -97,13 +97,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;
@@ -134,13 +134,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);
@@ -158,7 +158,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;
     }
@@ -166,21 +166,21 @@
     .panel-inner {
       min-block-size: 0;
       overflow: hidden;
-      padding-inline: var(--ui-space-3);
+      padding-inline: var(--ui-space-3) !important;
     }
 
     :host(:state(internalOpen)) .panel {
       grid-template-rows: 1fr;
     }
     :host(: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. */
     :host([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);
@@ -201,26 +201,26 @@
       min-block-size: 0;
     }
     :host([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;
     }
 
     :host([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);
     }
     :host([variant="navigation"][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);
     }
@@ -248,7 +248,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-editable/ui-editable.html

@@ -59,10 +59,10 @@
   </div>
   <style>
     :host {
-      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);
     }
@@ -70,7 +70,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%;
     }
@@ -78,10 +78,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;
@@ -94,9 +94,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;
@@ -145,16 +145,16 @@
     }
 
     .actions {
-      display: none;
-      gap: var(--ui-space-1);
+      display: none !important;
+      gap: var(--ui-space-1) !important;
     }
     :host(: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);
@@ -184,7 +184,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html

@@ -36,7 +36,7 @@
   </div>
   <style>
     :host {
-      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);
@@ -44,17 +44,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;
@@ -82,7 +82,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);
@@ -100,8 +100,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;
     }
@@ -125,7 +125,7 @@
     }
 
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-editor-link-form/ui-editor-link-form.html

@@ -95,8 +95,7 @@
           >
             <ui-icon slot="leading" name="file-text"></ui-icon>
             <ui-text slot="title" as="strong" size="sm" weight="medium" truncate from:title="$result.label">{$result.label}</ui-text>
-            <ui-text $if="$result.detail" slot="meta" as="span" size="xs" tone="secondary" truncate from:title="$result.detail"
-            >{$result.detail}</ui-text>
+            <ui-text $if="$result.detail" slot="meta" as="span" size="xs" tone="secondary" truncate from:title="$result.detail">{$result.detail}</ui-text>
             <ui-icon $if="$result.id = $selected" slot="trailing" name="check"></ui-icon>
           </ui-search-result-row>
         </ui-scroll-area>

package/components/ui-editor-mention-menu/ui-editor-mention-menu.html

@@ -47,7 +47,7 @@
     :host[popover] {
       position: fixed;
       inset: auto;
-      margin: 0;
+      margin: 0 !important;
     }
 
     :host {
@@ -55,9 +55,9 @@
     }
 
     :host {
-      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);
@@ -65,11 +65,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);
@@ -77,11 +77,11 @@
     }
 
     :host > .header:empty, :host > .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);
     }
@@ -96,8 +96,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;
@@ -121,11 +121,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;
     }
 
@@ -141,9 +141,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;
@@ -155,9 +155,9 @@
     }
 
     .body {
-      display: flex;
+      display: flex !important;
       min-width: 0;
-      flex-direction: column;
+      flex-direction: column !important;
     }
 
     .label,
@@ -181,7 +181,7 @@
 
     .loading {
       min-height: 44px;
-      padding: var(--ui-space-3);
+      padding: var(--ui-space-3) !important;
     }
 
     @media (max-width: 767px) {
@@ -196,7 +196,7 @@
     }
 
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-editor-mention-menu-item/ui-editor-mention-menu-item.html

@@ -10,11 +10,11 @@
   </li>
   <style>
     :host {
-      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;
     }
@@ -38,9 +38,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;
@@ -52,9 +52,9 @@
     }
 
     .body {
-      display: flex;
+      display: flex !important;
       min-inline-size: 0;
-      flex-direction: column;
+      flex-direction: column !important;
     }
 
     .label, .detail {
@@ -75,7 +75,7 @@
     }
 
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-editor-slash-menu/ui-editor-slash-menu.html

@@ -46,7 +46,7 @@
     :host[popover] {
       position: fixed;
       inset: auto;
-      margin: 0;
+      margin: 0 !important;
     }
 
     :host {
@@ -59,8 +59,8 @@
       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) {
@@ -71,10 +71,10 @@
     }
 
     .header {
-      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);
@@ -84,25 +84,25 @@
     }
 
     :host > .header:empty, :host > .footer:empty, :host > .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);
     }
 
     @media (max-width: 767px) {
       .header {
-        display: flex;
+        display: flex !important;
       }
     }
 
     .list {
       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;
@@ -128,15 +128,15 @@
     @media (max-width: 767px) {
       .list {
         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;
       }
     }
 
     .item {
-      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;
@@ -147,9 +147,9 @@
     }
 
     .icon {
-      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);
@@ -175,10 +175,10 @@
     }
 
     .body {
-      display: flex;
+      display: flex !important;
       min-width: 0;
-      flex-direction: column;
-      gap: 1px;
+      flex-direction: column !important;
+      gap: 1px !important;
     }
 
     .title {
@@ -199,27 +199,27 @@
     }
 
     .footer {
-      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);
     }
 
     :host kbd {
-      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);
     }
 
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-editor-slash-menu-group/ui-editor-slash-menu-group.html

@@ -10,22 +10,22 @@
   </li>
   <style>
     :host {
-      display: block;
+      display: block !important;
       list-style: none;
     }
     .heading {
-      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);
     }
     ul {
-      margin: 0;
-      padding: 0;
+      margin: 0 !important;
+      padding: 0 !important;
       list-style: none;
     }
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-editor-slash-menu-item/ui-editor-slash-menu-item.html

@@ -13,11 +13,11 @@
   </li>
   <style>
     :host {
-      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;
     }
@@ -36,9 +36,9 @@
     }
 
     .icon {
-      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;
@@ -53,10 +53,10 @@
     }
 
     .body {
-      display: flex;
+      display: flex !important;
       min-inline-size: 0;
-      flex-direction: column;
-      gap: 1px;
+      flex-direction: column !important;
+      gap: 1px !important;
     }
     .title, .description {
       overflow: hidden;
@@ -74,7 +74,7 @@
     }
 
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-editor-surface/ui-editor-surface.html

@@ -7,8 +7,8 @@
   <div><slot></slot></div>
   <style>
     :host {
-      display: flex;
-      flex-direction: column;
+      display: flex !important;
+      flex-direction: column !important;
       min-inline-size: 0;
       max-inline-size: 100%;
     }