@threadlabs/looma 0.6.4 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -77,7 +77,7 @@
     "./*.css"
   ],
   "dependencies": {
-    "@nextwebwg/html-next": "^1.0.0-alpha.2",
+    "@nextwebwg/html-next": "^1.0.0-alpha.3",
     "lowlight": "^3.3.0",
     "markdown-it": "14.3.1",
     "lucide": "~0.554.0"

package/styles/ui-affordance-scope.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-affordance-scope"]) to ([data-component], [data-slotted]) {
 :scope {
       display: contents;

package/styles/ui-avatar-group.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-avatar-group"]) to ([data-component], [data-slotted]) {
 :scope {
       /* Avatars separate with a tight, crisp edge, matching Looma's 1px borders rather than the

package/styles/ui-avatar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-avatar"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-grid;

package/styles/ui-badge.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-badge"]) to ([data-component], [data-slotted]) {
 :scope {
       --_badge-surface: var(--ui-surface-subtle);

package/styles/ui-button.css

@@ -1,15 +1,23 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-button"]) to ([data-component], [data-slotted]) {
 :scope {
+      --_hue: var(--ui-accent);
+      --_hue-hover: var(--ui-accent-hover);
+      --_hue-active: var(--ui-accent-active);
+      --_hue-text: var(--ui-accent-active);
+      --_on-hue: var(--ui-on-accent);
+
+      --_tone: var(--_hue);
+      --_tone-hover: var(--_hue-hover);
+      --_tone-active: var(--_hue-active);
+      --_tone-text: var(--_hue-text);
+      --_on-tone: var(--_on-hue);
+
       display: inline-flex;
       align-items: center;
       justify-content: center;
       vertical-align: middle;
-      color: var(--ui-action-secondary-text, var(--ui-text-primary));
-    }
-
-    :scope[data-ui-button-state~="variant=solid"] {
-      color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+      color: var(--_tone-text);
     }
 
     :scope[data-ui-button-state~="align=start"] {
@@ -25,23 +33,24 @@
     :scope {
       appearance: none;
       min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
-      border: 1px solid var(--ui-button-border, var(--ui-border-strong));
+      border-style: solid;
+      border-width: 1px;
+      border-color: var(--ui-button-border, var(--_tone));
       border-radius: var(--ui-button-radius, var(--ui-radius-md));
-      background: var(--ui-button-surface, var(--ui-surface-elevated));
-      color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+      background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
+      color: var(--ui-button-text, var(--_tone-text));
       font: inherit;
       font-weight: var(--ui-font-medium);
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-space-2) var(--ui-space-3);
       background-image: var(--ui-raised-highlight);
-      box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
+      box-shadow: var(--ui-button-shadow, var(--ui-raised));
       cursor: pointer;
       transition:
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         color var(--ui-motion-fast) var(--ui-motion-ease),
-        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-        transform var(--ui-motion-fast) var(--ui-motion-ease);
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
       margin: 0;
     }
 
@@ -65,128 +74,141 @@
     }
 
     :scope:hover:enabled {
-      background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
-      border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+      border-color: var(--ui-button-hover-border, var(--_tone-hover));
+      background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
     }
 
+    /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
     :scope:active:enabled {
-      background: var(--ui-surface-subtle);
-    }
-
-    :scope[data-ui-button-state~="variant=solid"] {
-      border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
-      background: var(--ui-action-primary-surface, var(--ui-accent-solid));
-      color: var(--ui-action-primary-text, var(--ui-text-on-accent));
-      box-shadow: var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs));
+      background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
+      background-image: none;
+      box-shadow: var(--ui-pressed);
     }
 
-    :scope[data-ui-button-state~="variant=solid"]:hover:enabled {
-      background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-      border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
-      box-shadow: var(--ui-shadow-sm);
-      transform: translateY(-1px);
+    :scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"] {
+      border-color: var(--_tone);
+      background-color: var(--_tone);
+      color: var(--_on-tone);
+      box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
     }
 
-    :scope[data-ui-button-state~="variant=solid"]:active:enabled {
-      background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-      border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
-      box-shadow: none;
-      transform: translateY(0);
+    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):hover:enabled {
+      background-color: var(--_tone-hover);
+      border-color: var(--_tone-hover);
     }
 
-    :scope[data-ui-button-state~="variant=danger"] {
-      border-color: var(--ui-danger-solid);
-      background: var(--ui-danger-solid);
-      color: var(--ui-text-on-accent);
-      box-shadow: var(--ui-button-danger-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs));
+    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):active:enabled {
+      background-color: var(--_tone-active);
+      border-color: var(--_tone-active);
+      background-image: none;
+      box-shadow: var(--ui-pressed);
     }
 
-    :scope[data-ui-button-state~="variant=danger"]:hover:enabled {
-      background: var(--ui-danger-hover);
-      border-color: var(--ui-danger-hover);
-      box-shadow: var(--ui-shadow-sm);
-      transform: translateY(-1px);
+    /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
+       destructive secondary action, not a special case. */
+    :scope[data-ui-button-state~="tone=neutral"] {
+      --_hue: var(--ui-text);
+      --_hue-hover: var(--ui-text);
+      --_hue-active: var(--ui-text);
+      --_hue-text: var(--ui-text);
+      --_on-hue: var(--ui-surface);
     }
 
-    :scope[data-ui-button-state~="variant=danger"]:active:enabled {
-      box-shadow: none;
-      transform: translateY(0);
+    :scope[data-ui-button-state~="tone=danger"], :scope[data-ui-button-state~="variant=danger"] {
+      --_hue: var(--ui-danger);
+      --_hue-hover: var(--ui-danger-hover);
+      --_hue-active: var(--ui-danger-hover);
+      --_hue-text: var(--ui-danger-hover);
+      --_on-hue: var(--ui-on-danger);
     }
 
-    /* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
-       Solid and danger already carry their own intent. */
-    :scope[data-ui-button-state~="tone=accent"]:scope[data-ui-button-state~="variant=outline"] {
-      border-color: var(--ui-button-accent-border, var(--ui-accent));
-      background: var(--ui-button-accent-surface, var(--ui-accent-subtle));
-      color: var(--ui-button-accent-text, var(--ui-accent-active));
+    :scope[data-ui-button-state~="tone=success"] {
+      --_hue: var(--ui-success);
+      --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
+      --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
+      --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
+      --_on-hue: var(--ui-surface);
     }
 
-    :scope[data-ui-button-state~="tone=accent"]:scope[data-ui-button-state~="variant=outline"]:hover:enabled {
-      border-color: var(--ui-button-accent-hover-border, var(--ui-accent-hover));
-      background: var(--ui-button-accent-hover-surface, color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)));
+    :scope[data-ui-button-state~="tone=warning"] {
+      --_hue: var(--ui-warning);
+      --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
+      --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
+      --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
+      --_on-hue: var(--ui-surface);
     }
 
-    :scope[data-ui-button-state~="tone=accent"]:is(:scope[data-ui-button-state~="variant=ghost"], :scope[data-ui-button-state~="variant=link"]) {
-      color: var(--ui-button-accent-text, var(--ui-accent-active));
+    :scope[data-ui-button-state~="tone=info"] {
+      --_hue: var(--ui-info);
+      --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
+      --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
+      --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
+      --_on-hue: var(--ui-surface);
     }
 
     :scope[data-ui-button-state~="variant=ghost"] {
       border-color: transparent;
       background: transparent;
       box-shadow: none;
-      color: var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+      color: var(--ui-button-ghost-text, var(--_tone-text));
     }
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
     :scope[data-ui-button-state~="variant=ghost"]:hover:enabled {
-      background: var(--ui-button-ghost-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
+      background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
       border-color: transparent;
     }
 
     :scope[data-ui-button-state~="variant=ghost"]:active:enabled {
-      background: var(--ui-button-ghost-active-surface, color-mix(in srgb, currentColor 14%, transparent));
+      background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
       border-color: transparent;
+      box-shadow: var(--ui-pressed);
     }
 
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
     :scope:focus-visible {
       outline: none;
       box-shadow:
-        var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs))),
+        var(--ui-button-shadow, var(--ui-raised)),
         var(--ui-focus-halo);
     }
 
     :scope[data-ui-button-state~="variant=solid"]:focus-visible {
       box-shadow:
-        var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs)),
+        var(--ui-button-solid-shadow, var(--ui-raised)),
         var(--ui-focus-halo);
     }
 
-    /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
+    /* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
+       disabled outline is still an outline and a disabled ghost is still text. Intent goes — an
+       unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
+       highlight and shadow, because nothing that cannot be pressed should look raised. */
     :scope:disabled {
+      /* Derived from the tone itself, not from a separate disabled palette: faded toward the
+         page, which desaturates it at the same time. Toward the page rather than toward white,
+         so a dark theme dims where a light one lightens — the same rule, both schemes. */
+      --_tone: color-mix(in oklab, var(--_hue) 58%, var(--ui-surface));
+      --_tone-hover: var(--_tone);
+      --_tone-active: var(--_tone);
+      --_tone-text: color-mix(in oklab, var(--_hue-text) 72%, var(--ui-surface));
+      --_on-tone: var(--_tone-text);
+
       opacity: var(--ui-button-disabled-opacity, 1);
       cursor: not-allowed;
-      border-color: var(--ui-button-disabled-border, var(--ui-border));
-      background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
-    }
-
-    :scope[data-ui-button-state~="variant=solid"]:disabled {
-      border-color: var(--ui-button-disabled-border, var(--ui-border));
-      background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
+      background-image: none;
+      box-shadow: none;
     }
 
-    :scope[data-ui-button-state~="variant=danger"]:disabled {
-      border-color: var(--ui-button-disabled-border, var(--ui-border));
-      background-color: var(--ui-button-disabled-surface, var(--ui-disabled-surface));
-      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
+    /* A filled button keeps its fill, faded further so its text stays legible on it. */
+    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):disabled {
+      --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
     }
 
+    /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
+       it takes a surface, light and tinted, rather than reading as plain text. */
     :scope[data-ui-button-state~="variant=ghost"]:disabled {
-      background: none;
+      background-color: color-mix(in oklab, var(--_hue) 28%, var(--ui-surface));
       border-color: transparent;
-      color: var(--ui-button-disabled-text, var(--ui-disabled-text));
     }
 
     @media (pointer: coarse) {
@@ -248,14 +270,24 @@
 @supports (text-box-trim: trim-both) {
     }
 
-    /* An accent-tinted secondary action: the outline, ghost, and link variants in the accent colour.
-       Solid and danger already carry their own intent. */
+    /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
+
+    /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
+       destructive secondary action, not a special case. */
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
 
-    /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
+    /* Disabled drops the tone rather than the shape: every variant keeps its own structure, so a
+       disabled outline is still an outline and a disabled ghost is still text. Intent goes — an
+       unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
+       highlight and shadow, because nothing that cannot be pressed should look raised. */
+
+    /* A filled button keeps its fill, faded further so its text stays legible on it. */
+
+    /* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
+       it takes a surface, light and tinted, rather than reading as plain text. */
 
     @media (pointer: coarse) {
     }

package/styles/ui-callout.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-callout"]) to ([data-component], [data-slotted]) {
 :scope {
       --_callout-surface: var(--ui-info-soft);

package/styles/ui-checkbox.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-checkbox"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;
@@ -52,7 +52,10 @@
       margin: auto;
       inline-size: 0.32rem;
       block-size: 0.58rem;
-      border: solid var(--ui-text-on-accent);
+      /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
+         component, which left the tick with no style and no colour. */
+      border-style: solid;
+      border-color: var(--ui-text-on-accent);
       border-width: 0 0.125rem 0.125rem 0;
       opacity: 1;
       transform: translateY(-0.11rem) rotate(45deg);

package/styles/ui-cluster.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-cluster"]) to ([data-component], [data-slotted]) {
 :scope {
       --_layout-gap: var(--ui-space-3);

package/styles/ui-combobox.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-combobox"]) to ([data-component], [data-slotted]) {
 :scope {
       display: grid;
@@ -208,6 +208,39 @@
       }
     }
 
+    /* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
+       before anything is picked. aria-selected is the state; this draws it.
+       Longhands, not shorthands: lowering drops a shorthand that omits a component. */
+    :scope[data-ui-combobox-state~="multiple"] .option {
+      display: flex;
+      gap: var(--ui-space-2);
+      align-items: center;
+    }
+
+    :scope[data-ui-combobox-state~="multiple"] .option::before {
+      content: "";
+      flex: none;
+      inline-size: 1.125rem;
+      block-size: 1.125rem;
+      border-style: solid;
+      border-width: 1px;
+      border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+      border-radius: var(--ui-radius-sm);
+      background-color: var(--ui-control-surface, var(--ui-surface-default));
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 0.7rem;
+    }
+
+    :scope[data-ui-combobox-state~="multiple"] .option[aria-selected="true"]::before {
+      border-color: var(--ui-accent-solid);
+      background-color: var(--ui-accent-solid);
+      background-image: var(
+        --ui-combobox-option-check,
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E")
+      );
+    }
+
     /* Multiple mode: chips wrap before the cursor on one flexible field line. */
     :scope[data-ui-combobox-state~="multiple"] .field {
       flex-wrap: wrap;
@@ -258,6 +291,10 @@
     @media (forced-colors: active) {
     }
 
+    /* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
+       before anything is picked. aria-selected is the state; this draws it.
+       Longhands, not shorthands: lowering drops a shorthand that omits a component. */
+
     /* Multiple mode: chips wrap before the cursor on one flexible field line. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-container.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-container"]) to ([data-component], [data-slotted]) {
 :scope {
       --_container-measure: 65ch;

package/styles/ui-context-menu.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-context-menu"]) to ([data-component], [data-slotted]) {
 :scope {
       display: contents;

package/styles/ui-dialog.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @keyframes ui-dialog-enter {
       from {
         opacity: 0;

package/styles/ui-disclosure.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-disclosure"]) to ([data-component], [data-slotted]) {
 /* Density resolves into the summary row's own values; the public tokens still override them. */
     :scope {

package/styles/ui-editable.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-editable"]) to ([data-component], [data-slotted]) {
 :scope {
       display: flex;

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

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-editor-insert-table-grid"]) to ([data-component], [data-slotted]) {
 :scope {
       padding: var(--ui-space-3);

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

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-editor-mention-menu"]) to ([data-component], [data-slotted]) {
 :scope {
       user-select: none;

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

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-editor-slash-menu"]) to ([data-component], [data-slotted]) {
 :scope {
       user-select: none;

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

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-editor-table-context-menu"]) to ([data-component], [data-slotted]) {
 :scope {
       min-width: 14rem;

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

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-editor-table-overlay"]) to ([data-component], [data-slotted]) {
 :scope {
       display: block;

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

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-editor-table-toolbar"]) to ([data-component], [data-slotted]) {
 .looma-editor__mobile-toolbar-shell :scope {
       min-width: max-content;

package/styles/ui-editor-toolbar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-editor-toolbar"]) to ([data-component], [data-slotted]) {
 :scope {
       position: sticky;

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

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-floating-action-button"]) to ([data-component], [data-slotted]) {
 :scope {
       position: fixed;

package/styles/ui-form-field.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-form-field"]) to ([data-component], [data-slotted]) {
 :scope {
       display: grid;

package/styles/ui-grid.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-grid"]) to ([data-component], [data-slotted]) {
 :scope {
       --_grid-gap: var(--ui-space-4);

package/styles/ui-icon-button.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-icon-button"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-icon.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-icon"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-input.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-input"]) to ([data-component], [data-slotted]) {
 :scope {
       box-sizing: border-box;

package/styles/ui-menu-item.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-menu-item"]) to ([data-component], [data-slotted]) {
 :scope {
       display: block;

package/styles/ui-menu.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-menu"]) to ([data-component], [data-slotted]) {
 /* Compact sets the part tokens its items read, so nothing has to rescale a global. */
     :scope[data-ui-menu-state~="density=compact"] {

package/styles/ui-popover.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-popover"]) to ([data-component], [data-slotted]) {
 :scope {
       box-sizing: border-box;

package/styles/ui-radio-group.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-radio-group"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-radio.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-radio"]) to ([data-component], [data-slotted]) {
 :scope {
       display: inline-flex;

package/styles/ui-reel.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-reel"]) to ([data-component], [data-slotted]) {
 :scope {
       --_reel-gap: var(--ui-space-4);

package/styles/ui-search-result-row.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-search-result-row"]) to ([data-component], [data-slotted]) {
 :scope {
       appearance: none;

package/styles/ui-search-shell.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.3. Do not edit. */
 @scope ([data-component~="ui-search-shell"]) to ([data-component], [data-slotted]) {
 :scope {
       display: contents;