@threadlabs/looma 0.1.22 → 0.1.24

package/editor.css

@@ -62,7 +62,8 @@
 .looma-editor .ProseMirror ul,
 .looma-editor .ProseMirror ol {
   margin: 0 0 var(--ui-space-3);
-  padding-left: var(--ui-space-6);
+  /* Nested lists retain the browser's hierarchy; this is only the root inset. */
+  padding-inline-start: var(--ui-editor-list-inset, var(--ui-space-5));
 }
 
 .looma-editor .ProseMirror li {
@@ -77,52 +78,68 @@
   font-style: italic;
 }
 
-.looma-editor .ProseMirror aside[data-looma-callout] {
-  --ui-editor-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
+.looma-editor .ProseMirror aside[data-looma-callout][data-tone] {
+  --ui-callout-padding-block: var(--ui-space-2);
+  --ui-callout-padding-inline: var(--ui-space-3);
+  --ui-callout-icon-column: 1rem;
+  --ui-callout-gap: var(--ui-space-2);
+  --ui-callout-icon-size: 1rem;
+  --ui-callout-border-width: 1px;
+  --ui-callout-leading-border-width: 4px;
+  --ui-callout-surface: var(--ui-accent-soft);
+  --ui-callout-text: var(--ui-text-primary);
+  --ui-callout-border: var(--ui-accent-solid);
+  --ui-callout-icon: var(--ui-accent-solid);
+  --ui-editor-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4'/%3E%3Cpath d='M2 6h4'/%3E%3Cpath d='M2 10h4'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M2 18h4'/%3E%3Cpath d='M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z'/%3E%3C/svg%3E");
 
   display: grid;
-  grid-template-columns: 1.25rem minmax(0, 1fr);
+  grid-template-columns: var(--ui-callout-icon-column) minmax(0, 1fr);
   align-items: start;
-  column-gap: var(--ui-space-3);
+  column-gap: var(--ui-callout-gap);
   margin: var(--ui-space-4) 0;
-  padding: var(--ui-space-3) var(--ui-space-4);
-  border-left: 4px solid var(--ui-editor-callout-color, var(--ui-accent-solid));
+  padding: var(--ui-callout-padding-block) var(--ui-callout-padding-inline);
+  border: var(--ui-callout-border-width) solid color-mix(in srgb, var(--ui-callout-border) 35%, transparent);
+  border-inline-start: var(--ui-callout-leading-border-width) solid var(--ui-callout-border);
   border-radius: var(--ui-radius-2);
-  background: var(--ui-editor-callout-background, var(--ui-accent-soft));
+  background: var(--ui-callout-surface);
+  color: var(--ui-callout-text);
 }
 
-.looma-editor .ProseMirror aside[data-looma-callout]::before {
-  width: 1.125rem;
-  height: 1.125rem;
+.looma-editor .ProseMirror aside[data-looma-callout][data-tone]::before {
+  width: var(--ui-callout-icon-size);
+  height: var(--ui-callout-icon-size);
   margin-top: 0.2em;
-  background: var(--ui-editor-callout-color, var(--ui-accent-solid));
+  background: var(--ui-callout-icon);
   content: "";
   mask: var(--ui-editor-callout-icon) center / contain no-repeat;
   -webkit-mask: var(--ui-editor-callout-icon) center / contain no-repeat;
 }
 
-.looma-editor .ProseMirror aside[data-looma-callout] > * {
+.looma-editor .ProseMirror aside[data-looma-callout][data-tone] > * {
   grid-column: 2;
 }
 
-.looma-editor .ProseMirror aside[data-looma-callout] > :last-child {
+.looma-editor .ProseMirror aside[data-looma-callout][data-tone] > :last-child {
   margin-bottom: 0;
 }
 
 .looma-editor .ProseMirror aside[data-looma-callout][data-tone="info"] {
-  --ui-editor-callout-color: var(--ui-info-solid);
-  --ui-editor-callout-background: var(--ui-info-soft);
+  --ui-callout-surface: var(--ui-info-soft);
+  --ui-callout-border: var(--ui-info-solid);
+  --ui-callout-icon: var(--ui-info-solid);
   --ui-editor-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
 }
 
 .looma-editor .ProseMirror aside[data-looma-callout][data-tone="note"] {
-  --ui-editor-callout-color: var(--ui-accent-solid);
-  --ui-editor-callout-background: var(--ui-accent-soft);
+  --ui-callout-surface: var(--ui-accent-soft);
+  --ui-callout-border: var(--ui-accent-solid);
+  --ui-callout-icon: var(--ui-accent-solid);
 }
 
 .looma-editor .ProseMirror aside[data-looma-callout][data-tone="warning"] {
-  --ui-editor-callout-color: var(--ui-warning-solid);
-  --ui-editor-callout-background: var(--ui-warning-soft);
+  --ui-callout-surface: var(--ui-warning-soft);
+  --ui-callout-border: var(--ui-warning-solid);
+  --ui-callout-icon: var(--ui-warning-solid);
   --ui-editor-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "type": "module",
   "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",
@@ -67,7 +67,11 @@
     "./theme-high-contrast.css": "./theme-high-contrast.css",
     "./layout.css": "./layout.css",
     "./styles.css": "./styles.css",
-    "./editor.css": "./editor.css"
+    "./editor.css": "./editor.css",
+    "./valibot": {
+      "types": "./dist/valibot.d.ts",
+      "import": "./dist/valibot.js"
+    }
   },
   "files": [
     "dist/",
@@ -101,7 +105,8 @@
     "@tiptap/core": ">=2 <3",
     "@tiptap/pm": ">=2 <3",
     "@tiptap/vue-3": ">=2 <3",
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "valibot": "^1.1.0"
   },
   "peerDependenciesMeta": {
     "@tiptap/core": {
@@ -115,6 +120,9 @@
     },
     "vue": {
       "optional": true
+    },
+    "valibot": {
+      "optional": true
     }
   },
   "engines": {

package/styles.css

@@ -17,6 +17,8 @@
   ui-radio-group,
   ui-radio,
   ui-badge,
+  ui-chip,
+  ui-callout,
   ui-avatar,
   ui-avatar-group,
   ui-tree,
@@ -40,6 +42,8 @@
   ui-radio-group,
   ui-radio,
   ui-badge,
+  ui-chip,
+  ui-callout,
   ui-avatar,
   ui-avatar-group,
   ui-tree,
@@ -63,6 +67,8 @@
   ui-radio-group,
   ui-radio,
   ui-badge,
+  ui-chip,
+  ui-callout,
   ui-avatar,
   ui-avatar-group,
   ui-tree,
@@ -86,6 +92,8 @@
   ui-radio-group,
   ui-radio,
   ui-badge,
+  ui-chip,
+  ui-callout,
   ui-avatar,
   ui-avatar-group,
   ui-tree,
@@ -112,6 +120,8 @@
   ui-radio-group,
   ui-radio,
   ui-badge,
+  ui-chip,
+  ui-callout,
   ui-avatar,
   ui-avatar-group,
   ui-tree,
@@ -194,14 +204,19 @@
   ui-button {
     display: inline-flex;
     vertical-align: middle;
-    color: var(--ui-text-primary);
+    color: var(--ui-action-secondary-text, var(--ui-text-primary));
+  }
+
+  ui-button[variant="solid"] {
+    color: var(--ui-action-primary-text, var(--ui-text-on-accent));
   }
 
   ui-button > button {
     appearance: none;
-    border: 1px solid var(--ui-border-default);
+    min-block-size: var(--ui-button-min-block-size, 2.5rem);
+    border: 1px solid var(--ui-control-border, var(--ui-border-default));
     border-radius: var(--ui-button-radius, var(--ui-radius-2));
-    background: var(--ui-surface-default);
+    background: var(--ui-action-secondary-surface, var(--ui-surface-default));
     color: inherit;
     font: inherit;
     font-weight: var(--ui-font-medium, 500);
@@ -223,13 +238,14 @@
   }
 
   ui-button[data-size="lg"] > button {
+    min-block-size: var(--ui-control-min-block-size, 2.75rem);
     padding: var(--ui-space-3) var(--ui-space-4);
     font-size: 1rem;
   }
 
   ui-button > button:hover:enabled {
-    background: var(--ui-surface-muted);
-    border-color: var(--ui-border-strong);
+    background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
+    border-color: var(--ui-control-border-hover, var(--ui-border-strong));
   }
 
   ui-button > button:active:enabled {
@@ -237,22 +253,22 @@
   }
 
   ui-button[variant="solid"] > button {
-    border-color: var(--ui-accent-solid);
-    background: var(--ui-accent-solid);
-    color: var(--ui-text-on-accent);
+    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));
   }
 
   ui-button[variant="solid"] > button:hover:enabled {
-    background: var(--ui-accent-hover);
-    border-color: var(--ui-accent-hover);
+    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);
   }
 
   ui-button[variant="solid"] > button:active:enabled {
-    background: var(--ui-accent-active);
-    border-color: var(--ui-accent-active);
+    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);
   }
@@ -299,23 +315,29 @@
     outline-offset: 2px;
   }
 
-  ui-button > button:disabled,
-  ui-button[data-disabled] {
+  ui-button[data-disabled="true"],
+  ui-button[disabled] {
     opacity: 0.6;
     cursor: not-allowed;
   }
 
+  ui-button > button:disabled {
+    cursor: not-allowed;
+  }
+
   ui-input {
     display: inline-flex;
+    min-inline-size: 0;
     color: var(--ui-text-primary);
   }
 
   ui-input > input {
     width: 100%;
     appearance: none;
-    border: 1px solid var(--ui-border-default);
+    min-block-size: var(--ui-control-min-block-size, 2.75rem);
+    border: 1px solid var(--ui-control-border, var(--ui-border-default));
     border-radius: var(--ui-radius-2);
-    background: var(--ui-surface-default);
+    background: var(--ui-control-surface, var(--ui-surface-default));
     color: inherit;
     font: inherit;
     line-height: var(--ui-line-height-md);
@@ -328,12 +350,12 @@
   }
 
   ui-input > input:hover:not(:focus):not(:disabled) {
-    border-color: var(--ui-border-strong);
+    border-color: var(--ui-control-border-hover, var(--ui-border-strong));
   }
 
   ui-input > input:focus {
-    border-color: var(--ui-focus-ring);
-    box-shadow: 0 0 0 3px var(--ui-accent-soft);
+    border-color: var(--ui-control-focus, var(--ui-focus-ring));
+    box-shadow: 0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft));
   }
 
   ui-input[invalid] > input,
@@ -344,7 +366,7 @@
   }
 
   ui-input > input:disabled {
-    background: var(--ui-surface-muted);
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
     color: var(--ui-text-muted);
     cursor: not-allowed;
   }
@@ -352,6 +374,8 @@
   ui-form-field {
     display: grid;
     gap: var(--ui-space-2);
+    min-inline-size: 0;
+    align-content: start;
     color: var(--ui-text-primary);
   }
 
@@ -361,8 +385,10 @@
   }
 
   ui-form-field [data-slot="help"] {
+    min-block-size: var(--ui-form-field-help-min-block-size, 0);
     color: var(--ui-text-muted);
     font-size: 0.875rem;
+    line-height: var(--ui-line-height-md);
   }
 
   ui-form-field [data-slot="error"],

package/theme-high-contrast.css

@@ -1,6 +1,12 @@
 @layer base {
   @media (prefers-contrast: more) {
     :root:not([data-contrast]) {
+      color-scheme: light;
+      --ui-surface-canvas: #ffffff;
+      --ui-surface-default: #ffffff;
+      --ui-surface-muted: #f8f8f6;
+      --ui-surface-subtle: #f0f0ec;
+      --ui-surface-elevated: #ffffff;
       --ui-text-primary: #000000;
       --ui-text-secondary: #111111;
       --ui-text-muted: #222222;
@@ -11,6 +17,12 @@
   }
 
   [data-contrast="high"] {
+    color-scheme: light;
+    --ui-surface-canvas: #ffffff;
+    --ui-surface-default: #ffffff;
+    --ui-surface-muted: #f8f8f6;
+    --ui-surface-subtle: #f0f0ec;
+    --ui-surface-elevated: #ffffff;
     --ui-text-primary: #000000;
     --ui-text-secondary: #111111;
     --ui-text-muted: #222222;

package/tokens.css

@@ -39,6 +39,8 @@
       source-sans-pro,
       sans-serif;
     --ui-font-family-sans: var(--ui-font-stack-system);
+    /* Quiet metadata scale for compact, non-interactive component labels. */
+    --ui-font-size-2xs: 0.6875rem;
     --ui-font-size-xs: 0.75rem;
     --ui-font-size-sm: 0.875rem;
     /* Dense interactive text: legible at 15px without body-copy spacing. */
@@ -56,6 +58,7 @@
     --ui-font-semibold: 600;
     --ui-font-bold: 700;
 
+    --ui-space-0-5: 0.125rem;
     --ui-space-1: 0.25rem;
     --ui-space-2: 0.5rem;
     --ui-space-3: 0.75rem;
@@ -124,6 +127,8 @@
     --ui-info-solid: #0066cc;
     --ui-info-soft: #e8f0fb;
 
+    --ui-control-min-block-size: 2.75rem;
+
     /* Compatibility aliases used by the editor's public styling surface.
        Each alias resolves through the canonical semantic token so an app only
        needs to override the canonical Looma theme contract. */
@@ -142,6 +147,27 @@
     --ui-text-sm: var(--ui-font-size-sm);
   }
 
+  /* Custom-property references resolve where declared, before inheritance.
+     Rebind semantic roles at theme boundaries to use the local palette. */
+  :root,
+  :where([data-theme], [data-contrast]) {
+    /* Semantic interaction roles. Products can theme intent without coupling
+       every component to a single brand accent. */
+    --ui-action-primary-surface: var(--ui-accent-solid);
+    --ui-action-primary-surface-hover: var(--ui-accent-hover);
+    --ui-action-primary-surface-active: var(--ui-accent-active);
+    --ui-action-primary-text: var(--ui-text-on-accent);
+    --ui-action-secondary-surface: var(--ui-surface-default);
+    --ui-action-secondary-surface-hover: var(--ui-surface-muted);
+    --ui-action-secondary-text: var(--ui-text-primary);
+    --ui-control-surface: var(--ui-surface-default);
+    --ui-control-surface-disabled: var(--ui-surface-muted);
+    --ui-control-border: var(--ui-border-default);
+    --ui-control-border-hover: var(--ui-border-strong);
+    --ui-control-focus: var(--ui-focus-ring);
+    --ui-control-focus-halo: var(--ui-accent-soft);
+  }
+
   @supports (color: oklch(0.5 0.1 240)) {
     :root {
       --ui-surface-canvas: oklch(0.99 0.01 250);

package/vue/{chunk-5KWCMTXB.js → chunk-D4AJULDE.js}

@@ -94,7 +94,89 @@ function createAdapterComponent(tagName, displayName, additionalEventBindings =
   });
 }
 
+// src/Combobox.ts
+import { defineComponent as defineComponent2, h as h2, shallowRef as shallowRef2, watchEffect as watchEffect2 } from "vue";
+var Combobox = defineComponent2({
+  name: "Combobox",
+  inheritAttrs: false,
+  props: {
+    label: { type: String, required: true },
+    modelValue: { type: String, default: void 0 },
+    query: { type: String, default: void 0 },
+    defaultValue: String,
+    defaultQuery: String,
+    config: { type: Object, default: () => ({}) },
+    placeholder: String,
+    name: String,
+    size: { type: String, default: "md" },
+    disabled: Boolean,
+    readOnly: Boolean,
+    required: Boolean,
+    disclosure: Boolean,
+    clearable: Boolean,
+    help: String
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    "update:query": (_query) => true,
+    queryChange: (_detail) => true,
+    valueChange: (_detail) => true,
+    freeEntry: (_detail) => true,
+    createEntry: (_detail) => true,
+    dependencyInvalidate: (_detail) => true,
+    validationChange: (_detail) => true
+  },
+  slots: Object,
+  setup(props, { attrs, slots, emit, expose }) {
+    const element = shallowRef2();
+    const rows = shallowRef2(props.config.options ?? []);
+    watchEffect2(() => {
+      if (!element.value) return;
+      element.value.config = props.config;
+      element.value.value = props.modelValue;
+      element.value.query = props.query;
+    });
+    expose({ validate: () => element.value.validate() });
+    return () => h2("ui-combobox", {
+      ...attrs,
+      ...Object.fromEntries(Object.entries(props).filter(([key]) => !["modelValue", "config", "query"].includes(key))),
+      // Property binding is explicit for non-serializable config; strings remain
+      // SSR-compatible attributes until the element upgrades.
+      value: props.modelValue,
+      query: props.query,
+      "data-allow-mismatch": "class",
+      ref: element,
+      class: [attrs.class, element.value?.shadowRoot && "hydrated"],
+      "onOptions-change": (event) => {
+        rows.value = event.detail;
+      },
+      "onQuery-change": (event) => {
+        emit("update:query", event.detail.query);
+        emit("queryChange", event.detail);
+      },
+      "onValue-change": (event) => {
+        emit("update:modelValue", event.detail.value);
+        emit("valueChange", event.detail);
+      },
+      "onFree-entry": (event) => emit("freeEntry", event.detail),
+      "onCreate-entry": (event) => emit("createEntry", event.detail),
+      "onDependency-invalidate": (event) => emit("dependencyInvalidate", event.detail),
+      "onValidation-change": (event) => emit("validationChange", event.detail)
+    }, [
+      h2("label", { slot: "fallback" }, [props.label, h2("input", {
+        value: props.query ?? props.defaultQuery ?? "",
+        disabled: props.disabled,
+        readonly: props.readOnly,
+        required: props.required
+      })]),
+      ...slots.option ? rows.value.map((option) => h2("div", { slot: `option-${option.id}`, key: option.id }, slots.option({ option }))) : [],
+      ...["loading", "empty", "error", "create"].flatMap((name) => slots[name] ? [h2("div", { slot: name }, slots[name]({}))] : [])
+    ]);
+  }
+});
+
 // src/index.ts
+var Combobox2 = Combobox;
 var Stack = createAdapterComponent("ui-stack", "Stack");
 var Inline = createAdapterComponent("ui-inline", "Inline");
 var Cluster = createAdapterComponent("ui-cluster", "Cluster");
@@ -104,27 +186,29 @@ var Switcher = createAdapterComponent("ui-switcher", "Switcher");
 var Sidebar = createAdapterComponent("ui-sidebar", "Sidebar", [], "");
 var Reel = createAdapterComponent("ui-reel", "Reel");
 var Separator = createAdapterComponent("ui-separator", "Separator");
-var Disclosure = createAdapterComponent("ui-disclosure", "Disclosure");
-var Tabs = createAdapterComponent("ui-tabs", "Tabs");
-var Dialog = createAdapterComponent("ui-dialog", "Dialog");
-var Popover = createAdapterComponent("ui-popover", "Popover");
-var Menu = createAdapterComponent("ui-menu", "Menu");
+var Disclosure = createAdapterComponent("ui-disclosure", "Disclosure", [], "class", ["open"]);
+var Tabs = createAdapterComponent("ui-tabs", "Tabs", [], "class", ["value"]);
+var Dialog = createAdapterComponent("ui-dialog", "Dialog", [], "class", ["open"]);
+var Popover = createAdapterComponent("ui-popover", "Popover", [], "class", ["open"]);
+var Menu = createAdapterComponent("ui-menu", "Menu", [], "class", ["open"]);
 var MenuItem = createAdapterComponent("ui-menu-item", "MenuItem");
-var ContextMenu = createAdapterComponent("ui-context-menu", "ContextMenu");
+var ContextMenu = createAdapterComponent("ui-context-menu", "ContextMenu", [], "class", ["open"]);
 var AffordanceScope = createAdapterComponent("ui-affordance-scope", "AffordanceScope");
 var Button = createAdapterComponent("ui-button", "Button");
 var IconButton = createAdapterComponent("ui-icon-button", "IconButton");
-var Input = createAdapterComponent("ui-input", "Input");
-var Select = createAdapterComponent("ui-select", "Select");
-var Textarea = createAdapterComponent("ui-textarea", "Textarea");
+var Input = createAdapterComponent("ui-input", "Input", [], "class", ["value"]);
+var Select = createAdapterComponent("ui-select", "Select", [], "class", ["value"]);
+var Textarea = createAdapterComponent("ui-textarea", "Textarea", [], "class", ["value"]);
 var FormField = createAdapterComponent("ui-form-field", "FormField");
-var Tooltip = createAdapterComponent("ui-tooltip", "Tooltip");
-var ToastRegion = createAdapterComponent("ui-toast-region", "ToastRegion");
-var Checkbox = createAdapterComponent("ui-checkbox", "Checkbox");
-var Switch = createAdapterComponent("ui-switch", "Switch");
-var RadioGroup = createAdapterComponent("ui-radio-group", "RadioGroup");
-var Radio = createAdapterComponent("ui-radio", "Radio");
+var Tooltip = createAdapterComponent("ui-tooltip", "Tooltip", [], "class", ["open"]);
+var ToastRegion = createAdapterComponent("ui-toast-region", "ToastRegion", [], "class", ["open"]);
+var Checkbox = createAdapterComponent("ui-checkbox", "Checkbox", [], "class", ["checked"]);
+var Switch = createAdapterComponent("ui-switch", "Switch", [], "class", ["checked"]);
+var RadioGroup = createAdapterComponent("ui-radio-group", "RadioGroup", [], "class", ["value"]);
+var Radio = createAdapterComponent("ui-radio", "Radio", [], "class", ["checked"]);
 var Badge = createAdapterComponent("ui-badge", "Badge");
+var Chip = createAdapterComponent("ui-chip", "Chip");
+var Callout = createAdapterComponent("ui-callout", "Callout");
 var Avatar = createAdapterComponent("ui-avatar", "Avatar");
 var AvatarGroup = createAdapterComponent("ui-avatar-group", "AvatarGroup");
 var FloatingActionButton = createAdapterComponent(
@@ -134,9 +218,19 @@ var FloatingActionButton = createAdapterComponent(
 var SearchShell = createAdapterComponent("ui-search-shell", "SearchShell");
 var SearchResultRow = createAdapterComponent("ui-search-result-row", "SearchResultRow");
 var TopBar = createAdapterComponent("ui-top-bar", "TopBar");
-var Tree = createAdapterComponent("ui-tree", "Tree", [["reorder", "onReorder"]]);
-var TreeItem = createAdapterComponent("ui-tree-item", "TreeItem", [["expand", "onExpand"]]);
+var Tree = createAdapterComponent("ui-tree", "Tree", [
+  ["reorder", "onReorder"],
+  ["reorder-rejected", "onReorderRejected"]
+]);
+var TreeItem = createAdapterComponent(
+  "ui-tree-item",
+  "TreeItem",
+  [["expand", "onExpand"]],
+  "class",
+  ["expanded"]
+);
 var ADAPTER_COMPONENT_TAG_MAP = {
+  Combobox: "ui-combobox",
   Stack: "ui-stack",
   Inline: "ui-inline",
   Cluster: "ui-cluster",
@@ -167,6 +261,8 @@ var ADAPTER_COMPONENT_TAG_MAP = {
   RadioGroup: "ui-radio-group",
   Radio: "ui-radio",
   Badge: "ui-badge",
+  Chip: "ui-chip",
+  Callout: "ui-callout",
   Avatar: "ui-avatar",
   AvatarGroup: "ui-avatar-group",
   FloatingActionButton: "ui-floating-action-button",
@@ -181,6 +277,7 @@ var VUE_ADAPTER_NOTE = "Thin adapter only: attrs and slots pass through to custo
 export {
   toHTMLElement,
   createAdapterComponent,
+  Combobox2 as Combobox,
   Stack,
   Inline,
   Cluster,
@@ -211,6 +308,8 @@ export {
   RadioGroup,
   Radio,
   Badge,
+  Chip,
+  Callout,
   Avatar,
   AvatarGroup,
   FloatingActionButton,

package/vue/editor/index.d.ts

@@ -135,21 +135,11 @@ declare const EditorMentionMenu: vue.DefineComponent<vue.ExtractPropTypes<{
     anchorRect: SlashMenuAnchorRect | null;
     loading: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const EditorToolbar: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const EditorTableContextMenu: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const EditorTableToolbar: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const EditorInsertTableGrid: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare const EditorTableOverlay: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const EditorToolbar: vue.DefineComponent<Record<string, never>>;
+declare const EditorTableContextMenu: vue.DefineComponent<Record<string, never>>;
+declare const EditorTableToolbar: vue.DefineComponent<Record<string, never>>;
+declare const EditorInsertTableGrid: vue.DefineComponent<Record<string, never>>;
+declare const EditorTableOverlay: vue.DefineComponent<Record<string, never>>;
 declare const EDITOR_ADAPTER_COMPONENT_TAG_MAP: {
     readonly EditorToolbar: "ui-editor-toolbar";
     readonly EditorSlashMenu: "ui-editor-slash-menu";

package/vue/editor/index.js

@@ -3,7 +3,7 @@ import {
   Popover,
   createAdapterComponent,
   toHTMLElement
-} from "../chunk-5KWCMTXB.js";
+} from "../chunk-D4AJULDE.js";
 
 // src/editor/index.ts
 import "@threadlabs/looma/editor";