@threadlabs/looma 0.14.7 → 0.15.0

package/styles/ui-context-menu.css

@@ -1,4 +1,20 @@
 /* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@property --ui-context-menu-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-context-menu-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-context-menu-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-context-menu-shadow {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-context-menu-z-index {
       syntax: "*";
       inherits: false;
@@ -8,6 +24,10 @@
 
     :scope {
       /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-context-menu-surface: var(--ui-context-menu-surface);
+      --_ui-context-menu-border: var(--ui-context-menu-border);
+      --_ui-context-menu-radius: var(--ui-context-menu-radius);
+      --_ui-context-menu-shadow: var(--ui-context-menu-shadow);
       --_ui-context-menu-z-index: var(--ui-context-menu-z-index);
 
       display: contents;
@@ -21,10 +41,10 @@
       flex-direction: column;
       box-sizing: border-box;
       padding: var(--ui-space-1);
-      background: var(--ui-surface-elevated);
-      border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-lg);
-      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      background: var(--_ui-context-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      border: 1px solid var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+      box-shadow: var(--_ui-context-menu-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       outline: 0;
       overflow: auto;
       z-index: var(--_ui-context-menu-z-index, 1000);
@@ -38,6 +58,14 @@
         overlay var(--ui-motion-fast) allow-discrete;
     }
 
+    .menu hr {
+      align-self: stretch;
+      block-size: 0;
+      margin: var(--ui-space-1) 0;
+      border: 0;
+      border-block-start: 1px solid var(--ui-border-default);
+    }
+
     .menu:popover-open {
       opacity: 1;
       transform: translateY(0) scale(1);

package/styles/ui-dialog.css

@@ -3,6 +3,22 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-dialog-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-dialog-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-dialog-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-dialog-shadow {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-dialog-max-width {
       syntax: "*";
       inherits: false;
@@ -34,7 +50,7 @@
       box-sizing: border-box;
       inline-size: min(
         calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
-        var(--ui-dialog-max-width, 440px)
+        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);
@@ -42,10 +58,10 @@
       padding: 0;
       overflow: hidden;
       flex-direction: column;
-      background: var(--ui-surface-elevated);
-      border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-dialog);
-      box-shadow: var(--ui-elevation-dialog, var(--ui-shadow-xl));
+      background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
+      box-shadow: var(--ui-dialog-shadow, var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl))));
       visibility: hidden;
       pointer-events: none;
       opacity: 0;
@@ -67,6 +83,27 @@
       animation: ui-dialog-enter var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
     }
 
+    :scope[data-ui-dialog-state~="size=sm"] {
+      --_ui-dialog-size: 360px;
+    }
+
+    :scope[data-ui-dialog-state~="size=lg"] {
+      --_ui-dialog-size: 640px;
+    }
+
+    :scope[data-ui-dialog-state~="size=fullscreen"] {
+      inset: 0;
+      inline-size: 100%;
+      block-size: 100dvh;
+      max-block-size: none;
+      margin: 0;
+      border-radius: var(--ui-dialog-radius, 0);
+    }
+
+    :scope[data-ui-dialog-state~="alert"] .close {
+      display: none;
+    }
+
     /* Header and actions stay pinned; only the body scrolls when content is long. */
     header {
       display: flex;

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

@@ -20,6 +20,28 @@
       grid-template-rows: repeat(var(--_rows, 8), 1.25rem);
       gap: 2px;
       margin-bottom: var(--ui-space-2);
+      max-inline-size: 100%;
+      overflow: auto;
+      --_ui-scroll-fade-direction: to right;
+      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self inline);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
+    }
+
+    :scope:dir(rtl) .grid {
+      --_ui-scroll-fade-direction: to left;
     }
 
     .cell {
@@ -37,6 +59,11 @@
       border-color: var(--ui-accent-solid, var(--ui-accent));
     }
 
+    .cell:focus-visible {
+      outline: 2px solid var(--ui-focus-ring);
+      outline-offset: -2px;
+    }
+
     .header {
       display: block;
       margin-bottom: var(--ui-space-2);
@@ -44,22 +71,32 @@
       cursor: pointer;
     }
 
-    :scope .insert {
-      width: 100%;
-      padding: var(--ui-space-2) var(--ui-space-3);
-      border: 1px solid var(--ui-border);
-      border-radius: var(--ui-radius-sm);
-      background: var(--ui-accent-solid, var(--ui-accent));
-      color: var(--ui-accent-contrast);
-      font-size: var(--ui-font-size-sm);
-      cursor: pointer;
+    @media (pointer: coarse) {
+      .grid {
+        grid-template-columns: repeat(var(--_cols, 8), 44px);
+        grid-template-rows: repeat(var(--_rows, 8), 44px);
+      }
+
+      .cell {
+        width: 44px;
+        height: 44px;
+      }
     }
 
-    :scope .insert:hover {
-      filter: brightness(1.05);
+    @media (forced-colors: active) {
+      .cell:focus-visible {
+        outline-color: Highlight;
+      }
     }
 
     :scope[hidden] {
       display: none;
     }
 }
+@scope ([data-component~="ui-editor-insert-table-grid"]) to ([data-component]) {
+@media (pointer: coarse) {
+    }
+
+    @media (forced-colors: active) {
+    }
+}

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

@@ -0,0 +1,57 @@
+/* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@scope ([data-component~="ui-editor-mention-menu-item"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: flex;
+      align-items: center;
+      min-block-size: 44px;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      gap: var(--ui-space-3);
+      cursor: pointer;
+      list-style: none;
+    }
+
+    :scope[aria-selected="true"] {
+      background: var(--ui-accent-subtle);
+    }
+
+    .avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 32px;
+      block-size: 32px;
+      flex: 0 0 auto;
+      color: var(--ui-accent-active);
+      background: var(--ui-accent-soft);
+      border-radius: var(--ui-radius-round);
+      font-size: var(--ui-font-size-xs);
+      font-weight: var(--ui-font-semibold);
+    }
+
+    .body {
+      display: flex;
+      min-inline-size: 0;
+      flex-direction: column;
+    }
+
+    .label, .detail {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .label {
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-medium);
+    }
+
+    .detail {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-xs);
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+}

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

@@ -26,6 +26,16 @@
       font-weight: var(--ui-font-semibold);
     }
 
+    .header:not(:has(> *)), .empty:not(:has(> *)) {
+      display: none;
+    }
+
+    .empty {
+      padding: var(--ui-space-3);
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+    }
+
     .hint {
       overflow: hidden;
       color: var(--ui-text-muted);
@@ -82,7 +92,7 @@
       flex: 0 0 auto;
       color: var(--ui-accent-active, var(--ui-accent-solid));
       background: var(--ui-accent-soft, var(--ui-accent-subtle));
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       font-size: var(--ui-font-size-xs);
       font-weight: var(--ui-font-semibold);
     }

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

@@ -0,0 +1,21 @@
+/* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@scope ([data-component~="ui-editor-slash-menu-group"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: block;
+      list-style: none;
+    }
+    .heading {
+      padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-xs);
+      font-weight: var(--ui-font-semibold);
+    }
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    :scope[hidden] {
+      display: none;
+    }
+}

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

@@ -0,0 +1,62 @@
+/* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@scope ([data-component~="ui-editor-slash-menu-item"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-3);
+      min-block-size: 44px;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      cursor: pointer;
+      list-style: none;
+    }
+
+    :scope[aria-selected="true"] {
+      background: var(--ui-accent-subtle);
+    }
+    :scope[aria-disabled="true"] {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 32px;
+      block-size: 32px;
+      flex: 0 0 auto;
+      color: var(--ui-text-secondary);
+      background: var(--ui-surface-hover);
+      border: 1px solid var(--ui-border);
+      border-radius: var(--ui-radius-md);
+    }
+
+    .icon {
+      --_ui-default-icon-size: 1rem;
+    }
+
+    .body {
+      display: flex;
+      min-inline-size: 0;
+      flex-direction: column;
+      gap: 1px;
+    }
+    .title, .description {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .title {
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-medium);
+    }
+    .description {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-xs);
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+}

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

@@ -34,23 +34,22 @@
       letter-spacing: 0.05em;
     }
 
+    .header:not(:has(> *)), .footer:not(:has(> *)), .empty:not(:has(> *)) {
+      display: none;
+    }
+
+    .empty {
+      padding: var(--ui-space-3);
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+    }
+
     @media (max-width: 767px) {
       .header {
         display: flex;
       }
     }
 
-    .header-query {
-      background: var(--ui-surface-hover);
-      border-radius: var(--ui-radius-sm);
-      padding: 0.1em 0.4em;
-      font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-      font-size: var(--ui-font-size-xs);
-      color: var(--ui-accent);
-      text-transform: none;
-      letter-spacing: 0;
-    }
-
     .list {
       list-style: none;
       margin: 0;
@@ -151,19 +150,12 @@
     }
 
     .footer {
-      display: none;
       padding: var(--ui-space-2) var(--ui-space-3);
       border-top: 1px solid var(--ui-border);
       font-size: var(--ui-font-size-xs);
       color: var(--ui-text-muted);
     }
 
-    @media (min-width: 768px) {
-      .footer {
-        display: block;
-      }
-    }
-
     :scope kbd {
       display: inline-flex;
       align-items: center;
@@ -190,7 +182,4 @@
 
     @media (max-width: 767px) {
     }
-
-    @media (min-width: 768px) {
-    }
 }

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

@@ -74,7 +74,7 @@
       display: inline-flex;
       width: 1rem;
       height: 1rem;
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       border: 1px solid var(--ui-border);
       background: var(--_swatch, #fff);
       box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);

package/styles/ui-floating-action-button.css

@@ -30,7 +30,7 @@
     :scope {
       appearance: none;
       border: none;
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       margin: 0;
       padding: 0;
       display: inline-flex;

package/styles/ui-form-field.css

@@ -1,4 +1,8 @@
 /* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@property --ui-form-field-danger {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-form-field-help-min-block-size {
       syntax: "*";
       inherits: false;
@@ -8,6 +12,7 @@
 
     :scope {
       /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-form-field-danger: var(--ui-form-field-danger);
       --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
 
       display: grid;
@@ -36,6 +41,14 @@
       line-height: var(--ui-line-height-md);
     }
 
+    .error {
+      display: none;
+    }
+
+    :scope[data-ui-form-field-state~="invalid"] .error {
+      display: contents;
+    }
+
     /* An error reads in the danger colour, the one the invalid control's border takes. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */
@@ -56,7 +69,7 @@
     /* An error reads in the danger colour, the one the invalid control's border takes. */
     .error,
     :where([data-slotted], [data-slotted] *):is([role="alert"]) {
-      color: var(--ui-danger);
+      color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
       font-size: var(--ui-font-size-sm);
     }
 

package/styles/ui-grid.css

@@ -15,7 +15,20 @@
       --_grid-min: 12rem;
       display: grid;
       gap: var(--ui-grid-gap, var(--_grid-gap));
-      grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-grid-min, var(--_grid-min)), 100%), 1fr));
+      grid-template-columns:
+        repeat(
+        auto-fit,
+        minmax(
+          min(
+            max(
+              var(--ui-grid-min, var(--_grid-min)),
+              calc((100% - (max(1, var(--_grid-column-cap, 9999)) - 1) * var(--ui-grid-gap, var(--_grid-gap))) / max(1, var(--_grid-column-cap, 9999)))
+            ),
+            100%
+          ),
+          1fr
+        )
+      );
       min-inline-size: 0;
       max-inline-size: 100%;
       margin: 0;

package/styles/ui-icon-button.css

@@ -129,7 +129,7 @@
       padding: 0;
       margin: 0;
       border: 1px solid transparent;
-      border-radius: var(--ui-icon-button-radius, var(--ui-radius-md));
+      border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
       background: var(--ui-icon-button-surface, transparent);
       color: inherit;
       display: inline-flex;
@@ -215,24 +215,36 @@
       );
     }
 
-    :scope:hover:enabled {
+    :scope:hover:enabled:not([aria-disabled="true"]) {
       /* Derived from the text colour so the ghost hover shows on any background. */
       background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
       color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
     }
 
-    :scope[data-ui-icon-button-state~="variant=outline"]:hover:enabled {
+    :scope[data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]) {
       border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
     }
 
-    :scope[data-ui-icon-button-state~="variant=solid"]:hover:enabled {
+    :scope[data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
       background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
     }
 
-    :scope:active:enabled {
+    :scope:active:enabled:not([aria-disabled="true"]) {
       transform: scale(var(--ui-icon-button-active-scale, 0.96));
     }
 
+    :scope[data-ui-icon-button-state~="pending"] {
+      cursor: progress;
+    }
+
+    .content {
+      display: contents;
+    }
+
+    :scope[data-ui-icon-button-state~="pending"] .content {
+      display: none;
+    }
+
     :scope:focus-visible {
       outline: none;
       box-shadow: var(--ui-focus-halo);

package/styles/ui-input-group.css

@@ -1,4 +1,16 @@
 /* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@property --ui-input-group-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-input-group-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-input-group-invalid-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-input-group"]) to ([data-component], [data-slotted]) {
 /* An input with fixed text before or after it, such as a domain after a site's name
        ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
@@ -32,7 +44,7 @@
       min-block-size: var(--ui-control-size-md);
       /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
       border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-radius-md);
+      border-radius: var(--ui-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-control-surface, var(--ui-surface-elevated));
       box-shadow: var(--ui-control-inset);
       overflow: hidden;
@@ -70,13 +82,15 @@
     }
 
     :scope:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
-      border-color: var(--ui-danger-solid);
+      border-color: var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
     }
 
     :scope:has(input:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
-      box-shadow:
+      box-shadow: var(
+        --ui-input-group-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+        0 0 0 3px color-mix(in srgb, var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%, transparent)
+      );
     }
 
     /* Forced colors drop box shadows, so the focus ring becomes an outline. */

package/styles/ui-input.css

@@ -62,7 +62,7 @@
       appearance: none;
       border: var(--ui-input-border-width, var(--_ui-default-input-border-width, 1px)) solid
         var(--ui-input-border, var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong))));
-      border-radius: var(--ui-input-radius, var(--_ui-default-input-radius, var(--ui-radius-md)));
+      border-radius: var(--ui-input-radius, var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md))));
       background: var(--ui-input-surface, var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
       color: var(--ui-text-primary);
       font: inherit;
@@ -120,7 +120,7 @@
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
     :scope[aria-invalid="true"],
     :scope:is(:user-invalid, [data-user-invalid]) {
-      border-color: var(--ui-input-invalid-border, var(--_ui-default-input-invalid-border, var(--ui-danger-solid)));
+      border-color: var(--ui-input-invalid-border, var(--_ui-default-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))));
     }
 
     :scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
@@ -129,7 +129,7 @@
         var(
           --_ui-default-input-invalid-focus-shadow,
           var(--ui-control-inset),
-          0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
+          0 0 0 3px color-mix(in srgb, var(--ui-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%, transparent)
         )
       );
     }