@threadlabs/looma 0.15.7 → 0.16.1

package/vue/UiDialog.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     closedby?: 'any' | 'closerequest' | 'none';
     for?: string;
     label?: string;
+    modal?: boolean;
     modeless?: boolean;
     open?: boolean;
     size?: 'sm' | 'md' | 'lg' | 'fullscreen';
@@ -42,7 +43,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     for: string;
     open: boolean;
     alert: boolean;
-    closedby: "any" | "closerequest" | "none";
+    modal: boolean;
     modeless: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiDialog.vue

@@ -12,14 +12,15 @@ const props = withDefaults(
     closedby?: 'any' | 'closerequest' | 'none'
     for?: string
     label?: string
+    modal?: boolean
     modeless?: boolean
     open?: boolean
     size?: 'sm' | 'md' | 'lg' | 'fullscreen'
   }>(),
   {
     alert: false,
-    closedby: 'closerequest',
     for: '',
+    modal: false,
     modeless: false,
     open: false,
     size: 'md',

package/vue/UiIcon.vue

@@ -281,6 +281,10 @@ const shapes = computed(() =>
       tag: 'path',
       d: 'M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18',
     }],
+    tag: [{
+      tag: 'path',
+      d: 'M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z',
+    }, { tag: 'circle', cx: '7.5', cy: '7.5', r: '.5', fill: 'currentColor' }],
     trash: [
       { tag: 'path', d: 'M10 11v6' },
       { tag: 'path', d: 'M14 11v6' },

package/vue/UiSearchShell.d.ts

@@ -31,8 +31,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     label: string;
     open: boolean;
-    dismissible: boolean;
     modal: boolean;
+    dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/chunks/UiBadge.js

@@ -24,6 +24,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, _ctx.$attrs, { "data-ui-badge-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-3485e390"]]);
+}), [["__scopeId", "data-v-bea7b3f9"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiDialog.js

@@ -25,9 +25,13 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			type: Boolean,
 			default: false
 		},
-		closedby: { default: "closerequest" },
+		closedby: {},
 		for: { default: "" },
 		label: {},
+		modal: {
+			type: Boolean,
+			default: false
+		},
 		modeless: {
 			type: Boolean,
 			default: false
@@ -92,6 +96,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-8d67e1e0"]]);
+}), [["__scopeId", "data-v-ef5a672e"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/chunks/UiIcon.js

@@ -879,6 +879,16 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				tag: "path",
 				d: "M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"
 			}],
+			tag: [{
+				tag: "path",
+				d: "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
+			}, {
+				tag: "circle",
+				cx: "7.5",
+				cy: "7.5",
+				r: ".5",
+				fill: "currentColor"
+			}],
 			trash: [
 				{
 					tag: "path",
@@ -1042,6 +1052,6 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}), 128))]))], 16);
 		};
 	}
-}), [["__scopeId", "data-v-50d3f581"]]);
+}), [["__scopeId", "data-v-988c6eae"]]);
 //#endregion
 export { UiIcon_default as t };

package/vue/components.css

@@ -92,7 +92,7 @@
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-icon"][data-v-50d3f581] {
+[data-component~="ui-icon"][data-v-988c6eae] {
   /* Hooks do not inherit, so the svg reads the stroke from the root. A Looma component that
      sizes the icons it renders sets --_ui-default-icon-*, which the icon's own hooks override. */
   --_ui-icon-stroke-width: var(--ui-icon-stroke-width, var(--_ui-default-icon-stroke-width));
@@ -102,14 +102,14 @@
   inline-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
   block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
 }
-svg[data-v-50d3f581] {
+svg[data-v-988c6eae] {
   inline-size: 100%;
   block-size: 100%;
   stroke-width: var(--_ui-icon-stroke-width, 2);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon"][hidden][data-v-50d3f581] {
+[data-component~="ui-icon"][hidden][data-v-988c6eae] {
   display: none;
 }
 
@@ -314,11 +314,11 @@ svg[data-v-50d3f581] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-badge"][data-v-3485e390] {
+[data-component~="ui-badge"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-surface-subtle);
   --_badge-text: var(--ui-text-secondary);
-  /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
-  --_badge-border: var(--ui-surface-subtle);
+  /* Sit between the soft fill and its stronger theme ink. */
+  --_badge-border: color-mix(in srgb, var(--_badge-surface) 75%, var(--_badge-text) 25%);
   /* --ui-badge-color derives a wash and an ink from one colour, between the tone and the explicit
      surface, text, and border hooks. Each value is invalid, so the tone shows, while it is unset. The
      mixes keep 4.5:1 text contrast for any colour, in a light theme or a dark one. */
@@ -326,7 +326,11 @@ svg[data-v-50d3f581] {
   --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 15%, var(--ui-surface-default));
   --_badge-color-ink: color-mix(in oklab, var(--_ui-badge-color) 35%, var(--ui-text-primary));
   --_badge-color-surface: var(--_badge-color-wash);
-  --_badge-color-border: var(--_badge-color-wash);
+  --_badge-color-border: color-mix(
+    in srgb,
+    var(--_badge-color-wash) 75%,
+    var(--_badge-color-ink) 25%
+  );
   --_badge-color-text: var(--_badge-color-ink);
   --_badge-outline-surface: var(
     --ui-badge-surface,
@@ -354,7 +358,7 @@ svg[data-v-50d3f581] {
  * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
  * replaces, still sizes to its label rather than filling its container. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-badge"][data-v-3485e390] {
+[data-component~="ui-badge"][data-v-bea7b3f9] {
     display: inline-block;
     min-block-size: var(--ui-badge-min-block-size, 1.5rem);
     text-align: center;
@@ -363,65 +367,60 @@ svg[data-v-50d3f581] {
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-accent-soft);
-  --_badge-border: var(--ui-accent-soft);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-danger-soft);
-  --_badge-border: var(--ui-danger-soft);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-success-soft);
-  --_badge-border: var(--ui-success-soft);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-warning-soft);
-  --_badge-border: var(--ui-warning-soft);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-info-soft);
-  --_badge-border: var(--ui-info-soft);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
 /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
    invalid while the hook is unset. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-bea7b3f9] {
   --_badge-color-surface: var(--_badge-color-ink);
   --_badge-color-border: var(--_badge-color-ink);
   --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
   --_badge-text: var(--ui-text-secondary);
@@ -429,23 +428,23 @@ svg[data-v-50d3f581] {
   --_badge-color-surface: initial;
   --_badge-color-border: var(--_badge-color-ink);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-bea7b3f9] {
   --_badge-border: var(--ui-accent-solid);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-bea7b3f9] {
   --_badge-border: var(--ui-danger-solid);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-bea7b3f9] {
   --_badge-border: var(--ui-success-solid);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-bea7b3f9] {
   --_badge-border: var(--ui-warning-solid);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-bea7b3f9] {
   --_badge-border: var(--ui-info-solid);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
@@ -453,7 +452,7 @@ svg[data-v-50d3f581] {
 /* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
    outline to follow: the edge is the fill. The end padding grows by the point's depth so the
    label never runs into it. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
   border-color: transparent;
@@ -467,7 +466,7 @@ svg[data-v-50d3f581] {
     0 100%
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3485e390]:dir(rtl) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9]:dir(rtl) {
   padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
   padding-inline-start: calc(
     var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
@@ -477,12 +476,12 @@ svg[data-v-50d3f581] {
 
 /* The tag clips its point, including the native border. Draw the outer shape in the border
    colour and an inset inner shape in the surface colour to keep a visible diagonal edge. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9] {
   position: relative;
   isolation: isolate;
   background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9]::before {
   content: "";
   position: absolute;
   inset: 1px;
@@ -497,22 +496,22 @@ svg[data-v-50d3f581] {
   );
   pointer-events: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9]:dir(rtl)::before {
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
 @media (forced-colors: active) {
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9] {
     forced-color-adjust: none;
     background: CanvasText;
     color: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9]::before {
     background: Canvas;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-3485e390] {
+[data-component~="ui-badge"][hidden][data-v-bea7b3f9] {
   display: none;
 }
 
@@ -2214,7 +2213,7 @@ dd[data-v-6e5b491d] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-dialog"][data-v-8d67e1e0] {
+[data-component~="ui-dialog"][data-v-ef5a672e] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-dialog-duration: var(--ui-dialog-duration);
 
@@ -2249,21 +2248,21 @@ dd[data-v-6e5b491d] {
     display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
     overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
-[data-component~="ui-dialog"][open][data-v-8d67e1e0] {
+[data-component~="ui-dialog"][open][data-v-ef5a672e] {
   display: flex;
   visibility: visible;
   pointer-events: auto;
   opacity: 1;
   transform: scale(1);
-  animation: ui-dialog-enter-8d67e1e0 var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
+  animation: ui-dialog-enter-ef5a672e var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=sm"][data-v-8d67e1e0] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=sm"][data-v-ef5a672e] {
   --_ui-dialog-size: 360px;
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=lg"][data-v-8d67e1e0] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=lg"][data-v-ef5a672e] {
   --_ui-dialog-size: 640px;
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=fullscreen"][data-v-8d67e1e0] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=fullscreen"][data-v-ef5a672e] {
   inset: 0;
   inline-size: 100%;
   block-size: 100dvh;
@@ -2271,12 +2270,12 @@ dd[data-v-6e5b491d] {
   margin: 0;
   border-radius: var(--ui-dialog-radius, 0);
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="alert"] .close[data-v-8d67e1e0] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="alert"] .close[data-v-ef5a672e] {
   display: none;
 }
 
 /* Header and actions stay pinned; only the body scrolls when content is long. */
-header[data-v-8d67e1e0] {
+header[data-v-ef5a672e] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-3);
@@ -2286,7 +2285,7 @@ header[data-v-8d67e1e0] {
 }
 
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
-[data-component~="ui-dialog"] .title[data-v-8d67e1e0] {
+[data-component~="ui-dialog"] .title[data-v-ef5a672e] {
   flex: 1;
   min-inline-size: 0;
   margin: 0;
@@ -2298,7 +2297,7 @@ header[data-v-8d67e1e0] {
   font-weight: var(--ui-font-semibold);
   line-height: var(--ui-line-height-tight);
 }
-.close[data-v-8d67e1e0] {
+.close[data-v-ef5a672e] {
   display: inline-grid;
   place-items: center;
   flex: none;
@@ -2317,8 +2316,8 @@ header[data-v-8d67e1e0] {
 }
 
 /* A CSS-drawn X. */
-.close[data-v-8d67e1e0]::before,
-.close[data-v-8d67e1e0]::after {
+.close[data-v-ef5a672e]::before,
+.close[data-v-ef5a672e]::after {
   content: "";
   grid-area: 1 / 1;
   inline-size: 0.875rem;
@@ -2327,30 +2326,30 @@ header[data-v-8d67e1e0] {
   background: currentColor;
   transform: rotate(45deg);
 }
-.close[data-v-8d67e1e0]::after {
+.close[data-v-ef5a672e]::after {
   transform: rotate(-45deg);
 }
-.close[data-v-8d67e1e0]:hover {
+.close[data-v-ef5a672e]:hover {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-.close[data-v-8d67e1e0]:focus-visible {
+.close[data-v-ef5a672e]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
 
 /* A touch target, like Button on coarse pointers. */
 @media (pointer: coarse) {
-.close[data-v-8d67e1e0] {
+.close[data-v-ef5a672e] {
     inline-size: var(--ui-control-min-block-size);
     block-size: var(--ui-control-min-block-size);
 }
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v-8d67e1e0] {
+html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v-ef5a672e] {
   inline-size: var(--ui-control-min-block-size);
   block-size: var(--ui-control-min-block-size);
 }
-.body[data-v-8d67e1e0] {
+.body[data-v-ef5a672e] {
   flex: 1 1 auto;
   min-block-size: 0;
   overflow: auto;
@@ -2378,7 +2377,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v
     -1px calc(100% - var(--_ui-scroll-fade-size)),
     calc(100% - var(--_ui-scroll-fade-size)) 100%;
 }
-footer[data-v-8d67e1e0] {
+footer[data-v-ef5a672e] {
   display: flex;
   flex: none;
   flex-wrap: wrap;
@@ -2387,28 +2386,28 @@ footer[data-v-8d67e1e0] {
   padding: var(--ui-space-3) var(--ui-space-5);
   border-block-start: 1px solid var(--ui-border-default);
 }
-footer[data-v-8d67e1e0]:empty {
+footer[data-v-ef5a672e]:empty {
   display: none;
 }
-@keyframes ui-dialog-enter-8d67e1e0 {
+@keyframes ui-dialog-enter-ef5a672e {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-[data-component~="ui-dialog"][data-v-8d67e1e0]::backdrop {
+[data-component~="ui-dialog"][data-v-ef5a672e]::backdrop {
   background-color: transparent;
   transition:
     background-color var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
     display var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
     overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
-[data-component~="ui-dialog"][open][data-v-8d67e1e0]::backdrop {
+[data-component~="ui-dialog"][open][data-v-ef5a672e]::backdrop {
   background-color: var(--ui-overlay-backdrop);
-  animation: ui-dialog-backdrop-enter-8d67e1e0 var(--_ui-dialog-duration, var(--ui-motion-base))
+  animation: ui-dialog-backdrop-enter-ef5a672e var(--_ui-dialog-duration, var(--ui-motion-base))
     var(--ui-motion-ease);
 }
-@keyframes ui-dialog-backdrop-enter-8d67e1e0 {
+@keyframes ui-dialog-backdrop-enter-ef5a672e {
 from {
     background-color: transparent;
 }
@@ -8577,6 +8576,7 @@ html[data-ui-input-modality="touch"]
 
 .looma-editor__table-picker-popover,
 .looma-editor__link-popover,
+.looma-editor__chip-popover,
 .looma-editor__table-toolbar-shell,
 .looma-editor__table-menu-shell {
   z-index: var(--ui-editor-popover-z-index, 300);
@@ -8593,6 +8593,55 @@ html[data-ui-input-modality="touch"]
   inline-size: min(22rem, calc(100vw - 2rem));
 }
 
+.looma-editor__chip-popover {
+  inline-size: min(15rem, calc(100vw - 2rem));
+}
+
+.looma-editor__chip-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-3);
+}
+
+.looma-editor__chip-form input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--ui-control-min-block-size);
+  padding: var(--ui-space-2);
+  border: 1px solid var(--ui-control-border);
+  border-radius: var(--ui-field-radius, var(--ui-radius-md));
+  background: var(--ui-control-surface);
+  color: var(--ui-text-primary);
+  font: inherit;
+}
+
+.looma-editor__chip-colors {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--ui-space-1);
+}
+
+.looma-editor__chip-color {
+  display: grid;
+  place-items: center;
+  width: 1.65rem;
+  height: 1.65rem;
+  padding: 0;
+  border: 1px solid var(--_chip-border);
+  border-radius: 50%;
+  background: var(--_chip-surface);
+  color: var(--_chip-text);
+  font: inherit;
+  font-size: var(--ui-font-size-xs);
+  cursor: pointer;
+}
+
+.looma-editor__chip-form :is(input, button):focus-visible,
+.looma-editor .ProseMirror [data-looma-chip]:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}
+
 .looma-editor__link-form,
 .looma-editor__link-form label {
   display: flex;
@@ -8741,6 +8790,59 @@ html[data-ui-input-modality="touch"]
   white-space: nowrap;
 }
 
+.looma-editor .ProseMirror [data-looma-chip],
+.looma-editor__chip-color {
+  --_chip-tone-surface: var(--ui-surface-subtle);
+  --_chip-tone-text: var(--ui-text-secondary);
+  --_chip-surface: var(--ui-editor-chip-surface, var(--_chip-tone-surface));
+  --_chip-text: var(--ui-editor-chip-text, var(--_chip-tone-text));
+  --_chip-border: var(--ui-editor-chip-border, color-mix(in srgb, var(--_chip-surface) 75%, var(--_chip-text) 25%));
+}
+
+.looma-editor .ProseMirror [data-looma-chip][data-color="blue"],
+.looma-editor__chip-color[data-color="blue"] {
+  --_chip-tone-surface: var(--ui-info-soft);
+  --_chip-tone-text: var(--ui-info-subtle-text);
+}
+
+.looma-editor .ProseMirror [data-looma-chip][data-color="green"],
+.looma-editor__chip-color[data-color="green"] {
+  --_chip-tone-surface: var(--ui-success-soft);
+  --_chip-tone-text: var(--ui-success-subtle-text);
+}
+
+.looma-editor .ProseMirror [data-looma-chip][data-color="yellow"],
+.looma-editor__chip-color[data-color="yellow"] {
+  --_chip-tone-surface: var(--ui-warning-soft);
+  --_chip-tone-text: var(--ui-warning-subtle-text);
+}
+
+.looma-editor .ProseMirror [data-looma-chip][data-color="red"],
+.looma-editor__chip-color[data-color="red"] {
+  --_chip-tone-surface: var(--ui-danger-soft);
+  --_chip-tone-text: var(--ui-danger-subtle-text);
+}
+
+.looma-editor .ProseMirror [data-looma-chip][data-color="purple"],
+.looma-editor__chip-color[data-color="purple"] {
+  --_chip-tone-surface: var(--ui-accent-soft);
+  --_chip-tone-text: var(--ui-accent-subtle-text);
+}
+
+.looma-editor .ProseMirror [data-looma-chip] {
+  padding: 0.08em 0.45em;
+  border: 1px solid var(--_chip-border);
+  border-radius: var(--ui-radius-round);
+  background: var(--_chip-surface);
+  color: var(--_chip-text);
+  font-size: var(--ui-editor-chip-font-size, var(--ui-font-size-sm));
+  font-weight: var(--ui-font-medium);
+  line-height: var(--ui-line-height-tight);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  cursor: pointer;
+}
+
 .ProseMirror .tableWrapper {
   max-width: 100%;
   overflow-x: auto;