@threadlabs/looma 0.32.0 → 0.33.0

package/styles/ui-editor-slash-menu-group.css

@@ -8,21 +8,21 @@
 }
 @scope ([data-component~="ui-editor-slash-menu-group"]) to ([data-component], [data-slotted]) {
 :scope:where([data-component~="ui-editor-slash-menu-group"]) {
-      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;
     }
     :scope:where([data-component~="ui-editor-slash-menu-group"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }

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

@@ -8,11 +8,11 @@
 }
 @scope ([data-component~="ui-editor-slash-menu-item"]) to ([data-component], [data-slotted]) {
 :scope:where([data-component~="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;
     }
@@ -31,9 +31,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;
@@ -48,10 +48,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;
@@ -69,6 +69,6 @@
     }
 
     :scope:where([data-component~="ui-editor-slash-menu-item"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }

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

@@ -10,7 +10,7 @@
 :scope:where([data-component~="ui-editor-slash-menu"])[popover] {
       position: fixed;
       inset: auto;
-      margin: 0;
+      margin: 0 !important;
     }
 
     :scope:where([data-component~="ui-editor-slash-menu"]) {
@@ -23,8 +23,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) {
@@ -35,10 +35,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);
@@ -48,25 +48,25 @@
     }
 
     :scope:where([data-component~="ui-editor-slash-menu"]) > .header:empty, :scope:where([data-component~="ui-editor-slash-menu"]) > .footer:empty, :scope:where([data-component~="ui-editor-slash-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);
     }
 
     @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;
@@ -92,15 +92,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;
@@ -111,9 +111,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);
@@ -139,10 +139,10 @@
     }
 
     .body {
-      display: flex;
+      display: flex !important;
       min-width: 0;
-      flex-direction: column;
-      gap: 1px;
+      flex-direction: column !important;
+      gap: 1px !important;
     }
 
     .title {
@@ -163,27 +163,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);
     }
 
     :scope:where([data-component~="ui-editor-slash-menu"]) 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);
     }
 
     :scope:where([data-component~="ui-editor-slash-menu"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-editor-slash-menu"]) to ([data-component]) {

package/styles/ui-editor-surface.css

@@ -8,8 +8,8 @@
 }
 @scope ([data-component~="ui-editor-surface"]) to ([data-component], [data-slotted]) {
 :scope:where([data-component~="ui-editor-surface"]) {
-      display: flex;
-      flex-direction: column;
+      display: flex !important;
+      flex-direction: column !important;
       min-inline-size: 0;
       max-inline-size: 100%;
     }

package/styles/ui-editor-table-context-menu.css

@@ -10,42 +10,42 @@
 :scope:where([data-component~="ui-editor-table-context-menu"])[popover] {
       position: fixed;
       inset: auto;
-      margin: 0;
+      margin: 0 !important;
     }
 
     :scope:where([data-component~="ui-editor-table-context-menu"]) {
       /* 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;
     }
 
     .section {
-      display: flex;
-      flex-direction: column;
-      gap: 3px;
+      display: flex !important;
+      flex-direction: column !important;
+      gap: 3px !important;
     }
 
     :scope:where([data-component~="ui-editor-table-context-menu"]) 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;
@@ -73,24 +73,24 @@
 
     /* Swatches wrap like words: the row asks for the menu's full width, and a narrower menu fits fewer. */
     .swatches {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 3px;
+      display: flex !important;
+      flex-wrap: wrap !important;
+      gap: 3px !important;
     }
 
     /* Three to a row at the menu's full width; 5rem keeps the longest label, "Default", whole. */
     :scope:where([data-component~="ui-editor-table-context-menu"]) .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;
     }
 
     .swatch {
-      display: inline-flex;
+      display: inline-flex !important;
       width: 1rem;
       height: 1rem;
       border-radius: var(--ui-radius-round);
@@ -119,7 +119,7 @@
     }
 
     .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;
@@ -130,16 +130,16 @@
     .sep {
       height: 1px;
       background: var(--ui-border-divider);
-      margin: var(--ui-space-1) 0;
+      margin: var(--ui-space-1) 0 !important;
     }
 
     /* Separators divide sections, so none sits above the first. */
     .sep:first-child {
-      display: none;
+      display: none !important;
     }
 
     :scope:where([data-component~="ui-editor-table-context-menu"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-editor-table-context-menu"]) to ([data-component]) {

package/styles/ui-editor-table-overlay.css

@@ -8,7 +8,7 @@
 }
 @scope ([data-component~="ui-editor-table-overlay"]) to ([data-component], [data-slotted]) {
 :scope:where([data-component~="ui-editor-table-overlay"]) {
-      display: block;
+      display: block !important;
       width: 100%;
       height: 100%;
       overflow: visible;
@@ -47,12 +47,12 @@
 
     .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);
@@ -175,7 +175,7 @@
       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);
@@ -204,10 +204,10 @@
     .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);
@@ -251,7 +251,7 @@
     }
 
     .selector .glyph {
-      display: block;
+      display: block !important;
       width: 14px;
       height: 14px;
       --_ui-default-icon-size: 14px;
@@ -342,11 +342,11 @@
     }
 
     .drop-indicator[hidden] {
-      display: none;
+      display: none !important;
     }
 
     :scope:where([data-component~="ui-editor-table-overlay"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-editor-table-overlay"]) to ([data-component]) {

package/styles/ui-editor-table-toolbar.css

@@ -10,7 +10,7 @@
 .looma-editor__mobile-toolbar-shell :scope:where([data-component~="ui-editor-table-toolbar"]) {
       min-width: max-content;
       min-height: 100%;
-      padding: 0;
+      padding: 0 !important;
       background: transparent;
       border: 0;
       border-radius: 0;
@@ -29,10 +29,10 @@
     }
 
     :scope:where([data-component~="ui-editor-table-toolbar"]) {
-      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));
@@ -41,9 +41,9 @@
     }
 
     .group {
-      display: inline-flex;
-      align-items: center;
-      gap: 2px;
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: 2px !important;
       overflow: hidden;
     }
 
@@ -58,10 +58,10 @@
     }
 
     :scope:where([data-component~="ui-editor-table-toolbar"]) 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);
@@ -71,7 +71,7 @@
       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;
     }
 
@@ -107,30 +107,30 @@
     }
 
     .chevron {
-      display: inline-flex;
+      display: inline-flex !important;
       --_ui-default-icon-size: 0.875rem;
     }
 
     :scope:where([data-component~="ui-editor-table-toolbar"]) .icon-button {
       width: 32px;
-      padding-inline: 0;
+      padding-inline: 0 !important;
     }
 
     .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;
@@ -138,13 +138,13 @@
     }
 
     .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);
     }
 
     .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;
@@ -153,21 +153,21 @@
     }
 
     .menu button {
-      display: flex;
-      justify-content: flex-start;
+      display: flex !important;
+      justify-content: flex-start !important;
       width: 100%;
       text-align: left;
     }
 
     .swatches {
-      display: grid;
+      display: grid !important;
       grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 2px;
+      gap: 2px !important;
     }
 
     :scope:where([data-component~="ui-editor-table-toolbar"]) .swatch-button {
-      gap: var(--ui-space-1);
-      justify-content: flex-start;
+      gap: var(--ui-space-1) !important;
+      justify-content: flex-start !important;
     }
 
     .swatch {
@@ -190,6 +190,6 @@
     }
 
     :scope:where([data-component~="ui-editor-table-toolbar"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }

package/styles/ui-editor-toolbar.css

@@ -11,9 +11,9 @@
       position: sticky;
       top: 0;
       z-index: var(--ui-editor-toolbar-z-index, 10);
-      display: flex;
-      align-items: center;
-      padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
+      display: flex !important;
+      align-items: center !important;
+      padding: var(--ui-editor-toolbar-padding-block, 6px) 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));
@@ -22,11 +22,11 @@
     /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
        wrapping into several lines, and a fade at each edge that has more to show says so. */
     .strip {
-      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;
@@ -35,7 +35,7 @@
     }
 
     .strip:where(:not([data-component], [data-slotted]))::-webkit-scrollbar {
-      display: none;
+      display: none !important;
     }
 
     /* The edge fades are the scroll fade every Looma scroller uses (see ui-scroll-area), a mask on the
@@ -64,13 +64,13 @@
     }
 
     :scope:where([data-component~="ui-editor-toolbar"])[data-ui-editor-toolbar-state~="floating"] {
-      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%, transparent);
       border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
       border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
@@ -115,7 +115,7 @@
       width: 100%;
       max-width: none;
       min-height: 100%;
-      padding: 0;
+      padding: 0 !important;
       background: transparent;
       border: 0;
       border-radius: 0;
@@ -129,7 +129,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-editor-toolbar"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-editor-toolbar"]) to ([data-component]) {
@@ -148,7 +148,7 @@
       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;
     }
 
     @media (max-width: 767px) {