@threadlabs/looma 0.31.3 → 0.31.5

package/editor/chunks/extensions.js

@@ -631,17 +631,17 @@ function appendBackLinks(item, label, number, count) {
 		paragraph.append(" ", link);
 	}
 }
-var FootnoteSerializer = class extends DOMSerializer {
-	serializeFragment(fragment, options = {}, target) {
-		const dom = super.serializeFragment(fragment, options, target);
+function installSerializer(schema) {
+	const serializer = DOMSerializer.fromSchema(schema);
+	if (Object.prototype.hasOwnProperty.call(serializer, "serializeFragment")) return;
+	const serializeFragment = serializer.serializeFragment;
+	serializer.serializeFragment = function(fragment, options = {}, target) {
+		const dom = serializeFragment.call(this, fragment, options, target);
 		fragment.forEach((node, _offset, index) => {
 			if (node.type.name === NOTE) appendBackLinks(dom.childNodes[index], String(node.attrs.label), index + 1, Number(node.attrs.count) || 1);
 		});
 		return dom;
-	}
-};
-function installSerializer(schema) {
-	if (!(schema.cached.domSerializer instanceof FootnoteSerializer)) schema.cached.domSerializer = new FootnoteSerializer(DOMSerializer.nodesFromSchema(schema), DOMSerializer.marksFromSchema(schema));
+	};
 }
 /**
 * A footnote reference, `[^label]`, saved as `<sup><a data-footnote-ref>`. Typing or pasting
@@ -11155,21 +11155,31 @@ var TableHeader = Node$1.create({
 });
 //#endregion
 //#region src/editor/extensions/table-formatting.ts
-/** Table chrome lives outside the horizontal scroller, within the table's document block. */
-var LoomaTableView = class extends TableView {
+/**
+* Table chrome lives outside the horizontal scroller, within the table's document block.
+* @invariant It holds Tiptap's TableView rather than extending it: a bundler that lowers classes
+* calls the base as a function, which a native class rejects.
+*/
+var LoomaTableView = class {
+	table;
+	dom;
+	contentDOM;
 	toolbarHost;
 	constructor(node, cellMinWidth) {
-		super(node, cellMinWidth);
-		const scroller = this.dom;
+		this.table = new TableView(node, cellMinWidth);
+		this.contentDOM = this.table.contentDOM;
 		this.dom = document.createElement("div");
 		this.dom.dataset.loomaTableBlock = "";
 		this.toolbarHost = document.createElement("div");
 		this.toolbarHost.dataset.loomaTableToolbarHost = "";
 		this.toolbarHost.contentEditable = "false";
-		this.dom.append(scroller, this.toolbarHost);
+		this.dom.append(this.table.dom, this.toolbarHost);
+	}
+	update(node) {
+		return this.table.update(node);
 	}
 	ignoreMutation(mutation) {
-		return mutation.type !== "selection" && this.toolbarHost.contains(mutation.target) || super.ignoreMutation(mutation);
+		return mutation.type !== "selection" && this.toolbarHost.contains(mutation.target) || this.table.ignoreMutation(mutation);
 	}
 	stopEvent(event) {
 		return event.target instanceof globalThis.Node && this.toolbarHost.contains(event.target);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.31.3",
+  "version": "0.31.5",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -112,7 +112,7 @@
     "expressmark": "0.1.6"
   },
   "peerDependencies": {
-    "@nextwebwg/html-next": "1.0.0-alpha.67",
+    "@nextwebwg/html-next": "1.0.0-alpha.69",
     "@tiptap/core": ">=2 <3",
     "@tiptap/pm": ">=2 <3",
     "@tiptap/vue-3": ">=2 <3",
@@ -133,7 +133,7 @@
     }
   },
   "devDependencies": {
-    "@nextwebwg/html-next": "1.0.0-alpha.67",
+    "@nextwebwg/html-next": "1.0.0-alpha.69",
     "@vitejs/plugin-vue": "^6.0.9",
     "vite": "^8.3.0",
     "vue": "^3.5.43",

package/styles/ui-action-bar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-affordance-scope.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-avatar-group.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-avatar.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-badge.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-breadcrumb-item.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-breadcrumbs.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-button.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-callout.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-card.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-checkbox.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-cluster.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-combobox.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -421,3 +421,395 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
+@scope ([data-slotted~="ui-combobox"]:not([data-component])) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-combobox-affordance-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-item-input-min-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-item-item-max-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-item-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-label-font-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-label-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-max-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-message-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-option-check {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-option-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-popup-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-popup-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-popup-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-popup-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :where([data-component~="ui-combobox"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-combobox-label-text: var(--ui-combobox-label-text);
+      --_ui-combobox-label-font-size: var(--ui-combobox-label-font-size);
+      --_ui-combobox-affordance-text: var(--ui-combobox-affordance-text);
+      --_ui-combobox-max-block-size: var(--ui-combobox-max-block-size);
+      --_ui-combobox-option-text: var(--ui-combobox-option-text);
+      --_ui-combobox-message-text: var(--ui-combobox-message-text);
+      --_ui-combobox-option-check: var(--ui-combobox-option-check);
+      --_ui-combobox-item-min-block-size: var(--ui-combobox-item-min-block-size);
+      --_ui-combobox-item-input-min-inline-size: var(--ui-combobox-item-input-min-inline-size);
+      --_ui-combobox-item-item-max-inline-size: var(--ui-combobox-item-item-max-inline-size);
+      --_ui-combobox-radius: var(--ui-combobox-radius);
+      --_ui-combobox-invalid-border: var(--ui-combobox-invalid-border);
+      --_ui-combobox-popup-surface: var(--ui-combobox-popup-surface);
+      --_ui-combobox-popup-border: var(--ui-combobox-popup-border);
+      --_ui-combobox-popup-radius: var(--ui-combobox-popup-radius);
+      --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
+
+      --_row: var(--ui-control-size-md);
+      display: grid;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+      color: var(--ui-text-primary);
+      font: inherit;
+    }
+    label:where(:scope, :scope *) {
+      color: var(--_ui-combobox-label-text, var(--ui-text-primary));
+      font-size: var(--_ui-combobox-label-font-size, var(--ui-font-size-sm));
+      font-weight: 500;
+    }
+    /* The field and anything that annotates it sit on one row; the help button is beside the box,
+       not inside it, because a control's box holds its value. */
+    .control:where(:scope, :scope *) {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+    }
+
+    .field:where(:scope, :scope *) {
+      box-sizing: border-box;
+      min-block-size: var(--_row);
+      flex: 1 1 auto;
+      display: flex;
+      min-inline-size: 0;
+      border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-default));
+      border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
+      background: var(--ui-control-surface, var(--ui-surface-default));
+      box-shadow: var(--ui-control-inset);
+      transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+    .field:focus-within:where(:scope, :scope *) {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      box-shadow:
+        var(--ui-control-inset),
+        var(--ui-control-focus-halo-shadow);
+    }
+    .entry:where(:scope, :scope *) {
+      display: flex;
+      flex: 1 1 auto;
+      min-inline-size: 0;
+    }
+    /* A ghost icon button: the affordance is the mark, not a box around it. */
+    .help:where(:scope, :scope *) {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--ui-control-size-sm);
+      block-size: var(--ui-control-size-sm);
+      padding: 0;
+      border: 0;
+      border-radius: var(--ui-radius-round);
+      background: transparent;
+      color: var(--ui-text-secondary);
+      cursor: pointer;
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .help:hover:enabled:where(:scope, :scope *), .help[aria-expanded="true"]:where(:scope, :scope *) {
+      background: color-mix(in srgb, currentColor 8%, transparent);
+      color: var(--ui-text-primary);
+    }
+
+    .help:focus-visible:where(:scope, :scope *) {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    .help:disabled:where(:scope, :scope *) {
+      color: var(--ui-disabled-text);
+      cursor: not-allowed;
+    }
+
+    .help-icon:where(:scope, :scope *) {
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
+    }
+
+    input:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))):where(:scope, :scope *)::selection {
+      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+      color: inherit;
+    }
+    input:where(:scope, :scope *) {
+      appearance: none;
+      width: 100%;
+      min-inline-size: 0;
+      min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+      box-sizing: border-box;
+      border: 0;
+      border-radius: inherit;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      line-height: var(--ui-line-height-tight);
+      padding: var(--ui-space-2) var(--ui-space-3);
+      margin: 0;
+      outline: none;
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      --_row: var(--ui-control-size-sm);
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      padding: var(--ui-space-1) var(--ui-space-2);
+      font-size: var(--ui-font-size-sm);
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      --_row: var(--ui-control-size-lg);
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      padding: var(--ui-space-3) var(--ui-space-4);
+      font-size: var(--ui-font-size-md);
+    }
+    button:where(:scope, :scope *) {
+      appearance: none;
+      display: inline-grid;
+      place-items: center;
+      align-self: stretch;
+      border: 0;
+      border-radius: var(--ui-radius-md);
+      background: transparent;
+      color: var(--_ui-combobox-affordance-text, var(--ui-text-secondary));
+      font: inherit;
+      font-weight: 400;
+      min-inline-size: 2rem;
+      padding: 0 var(--ui-space-1);
+      cursor: pointer;
+    }
+    .affordance-icon:where(:scope, :scope *) {
+      display: block;
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
+    }
+    button:hover:enabled:where(:scope, :scope *) {
+      background: var(--ui-surface-muted);
+      color: var(--ui-text-primary);
+    }
+    button:focus-visible:where(:scope, :scope *) {
+      outline: none;
+      background: var(--ui-surface-muted);
+      box-shadow: inset 0 0 0 var(--ui-focus-width) color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+    }
+    input:disabled:where(:scope, :scope *), button:disabled:where(:scope, :scope *) {
+      color: var(--ui-disabled-text);
+      cursor: not-allowed;
+    }
+    .field:has(input:disabled):where(:scope, :scope *) {
+      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="validationStatus=error"] .field:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))), :where([data-component~="ui-combobox"])[data-ui-combobox-state~="invalid"] .field:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      border-color: var(--_ui-combobox-invalid-border, var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active))));
+    }
+    .popup:where(:scope, :scope *) {
+      box-sizing: border-box;
+      min-inline-size: 12rem;
+      max-inline-size: calc(100vw - 1rem);
+      max-block-size: var(--_ui-combobox-max-block-size, 18rem);
+      overflow: auto;
+      margin: 0;
+      padding: var(--ui-space-1);
+      border: var(--ui-border-width) solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
+      background: var(--_ui-combobox-popup-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      color: var(--ui-text-primary);
+      box-shadow: var(--_ui-combobox-popup-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
+    }
+    [hidden]:where(:scope, :scope *) {
+      display: none;
+    }
+    .option[aria-disabled="true"]:where(:scope, :scope *) .primary, .option[aria-disabled="true"]:where(:scope, :scope *) .secondary {
+      color: var(--ui-disabled-text);
+    }
+    .primary:where(:scope, :scope *) {
+      display: block;
+      color: var(--_ui-combobox-option-text, inherit);
+      font-weight: 500;
+    }
+    /* A row with a tag or a description: the label and its tag on one line, the description under them. */
+    .detail:where(:scope, :scope *) {
+      display: grid;
+      gap: var(--ui-space-0-5);
+      min-inline-size: 0;
+    }
+    .line:where(:scope, :scope *) {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-2);
+    }
+    .description:where(:scope, :scope *) {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height-md);
+    }
+    .message:where(:scope, :scope *), .group:where(:scope, :scope *) {
+      color: var(--_ui-combobox-message-text, var(--ui-text-secondary));
+      font-weight: 400;
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height-md);
+      overflow-wrap: anywhere;
+    }
+    .group:where(:scope, :scope *), .popup:where(:scope, :scope *) .message {
+      padding: var(--ui-space-2) var(--ui-space-3);
+    }
+    .sr-only:where(:scope, :scope *) {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    @media (pointer: coarse) {
+      :where([data-component~="ui-combobox"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+        --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+      button:where(:scope, :scope *) {
+        min-inline-size: 2.75rem;
+        min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+      }
+      /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+         body-size text: below 16px, iOS zooms the page into the focused field. */
+      :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+        --_row: var(--ui-control-min-block-size);
+      }
+      :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+        font-size: inherit;
+      }
+    }
+    @media (forced-colors: active) {
+      .field:where(:scope, :scope *), .popup:where(:scope, :scope *) {
+        border-color: CanvasText;
+      }
+      .option.active:where(:scope, :scope *) {
+        outline-color: Highlight;
+      }
+    }
+
+    /* Multiple mode keeps one control height. Chips and the input scroll within the entry,
+       while the clear and disclosure controls remain fixed at the end of the field. */
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] .field:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      align-items: center;
+      min-block-size: var(--_ui-combobox-item-min-block-size, var(--_row));
+      padding: var(--ui-space-1);
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] .entry:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      align-items: center;
+      gap: var(--ui-space-1);
+      overflow-x: auto;
+      scrollbar-width: none;
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] .entry:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"])))::-webkit-scrollbar {
+      display: none;
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
+      width: auto;
+      min-block-size: 1.75rem;
+      padding: var(--ui-space-0-5) var(--ui-space-1);
+    }
+    /* Size variants keep their control height as selections are added. */
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] .field:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      min-block-size: 0;
+      padding: var(--ui-space-0-5);
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
+      padding: 0 var(--ui-space-1);
+    }
+    /* A large multiple field starts at the large control height, as sm starts at the small one. */
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] .field:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      min-block-size: 0;
+    }
+    :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"]:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      min-block-size: calc(var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1));
+    }
+    .item:where(:scope, :scope *) {
+      appearance: none;
+      display: inline-flex;
+      flex: none;
+      min-inline-size: 0;
+      max-inline-size: min(100%, var(--_ui-combobox-item-item-max-inline-size, 12rem));
+      overflow: hidden;
+      padding: 0;
+      border: 0;
+      border-radius: var(--ui-radius-sm);
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      cursor: default;
+    }
+    .item:focus-visible:where(:scope, :scope *) {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-border-width);
+    }
+    .item:disabled:where(:scope, :scope *) {
+      color: var(--ui-disabled-text);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :where([data-component~="ui-combobox"])[hidden]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      display: none;
+    }
+}

package/styles/ui-container.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-context-menu.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-cover.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-description-item.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/styles/ui-description-list.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }