@threadlabs/looma 0.1.23 → 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.23",
+  "version": "0.1.24",
   "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-D4AJULDE.js}

@@ -186,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(
@@ -220,7 +222,13 @@ 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",
   Stack: "ui-stack",
@@ -253,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",
@@ -298,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-JLW23USW.js";
+} from "../chunk-D4AJULDE.js";
 
 // src/editor/index.ts
 import "@threadlabs/looma/editor";