@threadlabs/looma 0.1.23 → 0.1.25

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.23",
+  "version": "0.1.25",
   "type": "module",
   "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",

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,

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;

package/vue/{chunk-JLW23USW.js → chunk-GXQY27K2.js}

@@ -109,6 +109,7 @@ var Combobox = defineComponent2({
     placeholder: String,
     name: String,
     size: { type: String, default: "md" },
+    labelVisibility: { type: String, default: "visible" },
     disabled: Boolean,
     readOnly: Boolean,
     required: Boolean,
@@ -170,13 +171,90 @@ var Combobox = defineComponent2({
         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]({}))] : [])
+      ...["start", "footer", "loading", "empty", "error", "create"].flatMap((name) => slots[name] ? [h2("div", { slot: name }, slots[name]({}))] : [])
+    ]);
+  }
+});
+
+// src/MultiCombobox.ts
+import { defineComponent as defineComponent3, h as h3, shallowRef as shallowRef3, watch, watchEffect as watchEffect3 } from "vue";
+var MultiCombobox = defineComponent3({
+  name: "MultiCombobox",
+  inheritAttrs: false,
+  props: {
+    label: { type: String, required: true },
+    items: { type: Array, default: () => [] },
+    config: { type: Object, default: () => ({}) },
+    query: { type: String, default: void 0 },
+    defaultQuery: String,
+    placeholder: String,
+    name: String,
+    disabled: Boolean,
+    readOnly: Boolean,
+    required: Boolean
+  },
+  emits: {
+    "update:query": (_query) => true,
+    queryChange: (_detail) => true,
+    addItem: (_detail) => true,
+    removeItem: (_detail) => true,
+    createItem: (_detail) => true,
+    optionsChange: (_detail) => true
+  },
+  slots: Object,
+  setup(props, { attrs, slots, emit, expose }) {
+    const element = shallowRef3();
+    const rows = shallowRef3(props.config.options ?? []);
+    const currentQuery = shallowRef3(props.query ?? props.defaultQuery ?? "");
+    watch(() => props.query, (query) => {
+      if (query !== void 0) currentQuery.value = query;
+    });
+    watchEffect3(() => {
+      if (!element.value) return;
+      element.value.items = props.items;
+      element.value.config = props.config;
+      element.value.query = props.query;
+    });
+    expose({ focusInput: () => element.value.focusInput() });
+    return () => h3("ui-multi-combobox", {
+      ...attrs,
+      ...Object.fromEntries(Object.entries(props).filter(([key]) => !["items", "config", "query"].includes(key))),
+      items: props.items,
+      config: props.config,
+      query: props.query,
+      "data-allow-mismatch": "class",
+      ref: element,
+      class: [attrs.class, element.value?.shadowRoot && "hydrated"],
+      "onOptions-change": (event) => {
+        rows.value = event.detail;
+        emit("optionsChange", event.detail);
+      },
+      "onQuery-change": (event) => {
+        currentQuery.value = event.detail.query;
+        emit("update:query", event.detail.query);
+        emit("queryChange", event.detail);
+      },
+      "onAdd-item": (event) => emit("addItem", event.detail),
+      "onRemove-item": (event) => emit("removeItem", event.detail),
+      "onCreate-item": (event) => emit("createItem", event.detail)
+    }, [
+      h3("label", { slot: "fallback" }, [props.label, h3("input", {
+        value: props.query ?? props.defaultQuery ?? "",
+        disabled: props.disabled,
+        readonly: props.readOnly,
+        required: props.required
+      })]),
+      ...slots.item ? props.items.map((item) => h3("span", { slot: `item-${item.id}`, key: item.id }, slots.item({ item }))) : [],
+      ...slots.option ? rows.value.map((option) => h3("span", { slot: `option-${option.id}`, key: option.id }, slots.option({ option }))) : [],
+      ...slots.create ? [h3("span", { slot: "create" }, slots.create({ query: currentQuery.value }))] : [],
+      ...["footer", "loading", "empty", "error"].flatMap((name) => slots[name] ? [h3("div", { slot: name }, slots[name]({}))] : [])
     ]);
   }
 });
 
 // src/index.ts
 var Combobox2 = Combobox;
+var MultiCombobox2 = MultiCombobox;
 var Stack = createAdapterComponent("ui-stack", "Stack");
 var Inline = createAdapterComponent("ui-inline", "Inline");
 var Cluster = createAdapterComponent("ui-cluster", "Cluster");
@@ -186,27 +264,30 @@ 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 Editable = createAdapterComponent("ui-editable", "Editable", [["edit-change", "onEditChange"]], "class", ["edit"]);
+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(
@@ -220,9 +301,16 @@ var Tree = createAdapterComponent("ui-tree", "Tree", [
   ["reorder", "onReorder"],
   ["reorder-rejected", "onReorderRejected"]
 ]);
-var TreeItem = createAdapterComponent("ui-tree-item", "TreeItem", [["expand", "onExpand"]]);
+var TreeItem = createAdapterComponent(
+  "ui-tree-item",
+  "TreeItem",
+  [["expand", "onExpand"]],
+  "class",
+  ["expanded"]
+);
 var ADAPTER_COMPONENT_TAG_MAP = {
   Combobox: "ui-combobox",
+  MultiCombobox: "ui-multi-combobox",
   Stack: "ui-stack",
   Inline: "ui-inline",
   Cluster: "ui-cluster",
@@ -233,6 +321,7 @@ var ADAPTER_COMPONENT_TAG_MAP = {
   Reel: "ui-reel",
   Separator: "ui-separator",
   Disclosure: "ui-disclosure",
+  Editable: "ui-editable",
   Tabs: "ui-tabs",
   Dialog: "ui-dialog",
   Popover: "ui-popover",
@@ -253,6 +342,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",
@@ -268,6 +359,7 @@ export {
   toHTMLElement,
   createAdapterComponent,
   Combobox2 as Combobox,
+  MultiCombobox2 as MultiCombobox,
   Stack,
   Inline,
   Cluster,
@@ -278,6 +370,7 @@ export {
   Reel,
   Separator,
   Disclosure,
+  Editable,
   Tabs,
   Dialog,
   Popover,
@@ -298,6 +391,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-JLW23USW.js";
+} from "../chunk-GXQY27K2.js";
 
 // src/editor/index.ts
 import "@threadlabs/looma/editor";