@threadlabs/looma 0.23.4 → 0.23.6

package/editor/icons.d.ts

@@ -5,6 +5,7 @@ export declare const LOOMA_ICONS: {
     'align-left': IconNode;
     'align-right': IconNode;
     'arrow-left': IconNode;
+    bell: IconNode;
     bold: IconNode;
     'book-user': IconNode;
     search: IconNode;

package/editor/index.js

@@ -1,7 +1,7 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS } from "./chunks/table-backgrounds.js";
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
 import { A as LoomaChip, C as LoomaMentionSuggestionPluginKey, D as filterLoomaMentionItems, E as MAX_MENTION_RESULT_LIMIT, F as LOOMA_ACTIVE_BLOCK_CLASS, I as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, L as LoomaActiveBlock, M as LOOMA_CALLOUT_TONES, N as LoomaCallout, O as normalizeMentionResultLimit, P as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, R as LoomaActiveBlockPluginKey, S as siteRelativeHref, T as DEFAULT_MENTION_RESULT_LIMIT, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as normalizeLoomaChipColor, k as LOOMA_CHIP_COLORS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as createLoomaMentionExtension, x as createSiteRelativeLinks, y as setActiveTableCellBackground } from "./chunks/extensions.js";
-import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, Compass, CreditCard, Ellipsis, Eraser, ExternalLink, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, History, Image, Info, Italic, LayoutDashboard, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Table2, Tag, Trash2, TriangleAlert, Truck, Underline, Undo2, Unlink, UserRound, Users, X } from "lucide";
+import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bell, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, Compass, CreditCard, Ellipsis, Eraser, ExternalLink, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, History, Image, Info, Italic, LayoutDashboard, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Table2, Tag, Trash2, TriangleAlert, Truck, Underline, Undo2, Unlink, UserRound, Users, X } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
 var LOOMA_ICONS = {
@@ -9,6 +9,7 @@ var LOOMA_ICONS = {
 	"align-left": AlignLeft,
 	"align-right": AlignRight,
 	"arrow-left": ArrowLeft,
+	bell: Bell,
 	bold: Bold,
 	"book-user": BookUser,
 	"search": Search,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.23.4",
+  "version": "0.23.6",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-badge.css

@@ -3,6 +3,10 @@
       syntax: "*";
       inherits: false;
     }
+@property --ui-badge-dot-size {
+      syntax: "*";
+      inherits: false;
+    }
 @property --ui-badge-color {
       syntax: "*";
       inherits: false;
@@ -203,6 +207,29 @@
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
+    /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
+    :scope[data-ui-badge-state~="shape=dot"] {
+      position: relative;
+      box-sizing: border-box;
+      flex: none;
+      inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
+      block-size: var(--ui-badge-dot-size, var(--ui-space-2));
+      min-inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
+      min-block-size: var(--ui-badge-dot-size, var(--ui-space-2));
+      padding: 0;
+      border-radius: var(--ui-radius-round);
+      text-box-trim: none;
+    }
+
+    :scope[data-ui-badge-state~="shape=dot"] .label {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+
     /* The clipped point needs an inset surface over an outer border-colour shape: a native border
        has no diagonal edge to follow. Keep this edge for every tag variant. */
     :scope[data-ui-badge-state~="shape=tag"] {
@@ -238,6 +265,12 @@
     }
 
     @media (forced-colors: active) {
+      :scope[data-ui-badge-state~="shape=dot"] {
+        forced-color-adjust: none;
+        border-color: CanvasText;
+        background: CanvasText;
+      }
+
       :scope[data-ui-badge-state~="shape=tag"] {
         forced-color-adjust: none;
         background: CanvasText;
@@ -266,6 +299,8 @@
     /* 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. */
 
+    /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
+
     /* The clipped point needs an inset surface over an outer border-colour shape: a native border
        has no diagonal edge to follow. Keep this edge for every tag variant. */
 

package/styles/ui-list-item.css

@@ -61,6 +61,10 @@
       border-color: var(--ui-border-strong);
     }
 
+    :scope[data-ui-list-item-state~="highlighted"] {
+      background: var(--ui-selection-surface);
+    }
+
     :scope[data-ui-list-item-state~="current"] {
       background: var(--ui-selection-surface);
       color: var(--ui-selection-text);
@@ -112,6 +116,12 @@
       white-space: nowrap;
     }
 
+    :scope[data-ui-list-item-state~="wrap"] .title,
+    :scope[data-ui-list-item-state~="wrap"] .description {
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
     .title {
       font-size: var(--ui-font-size-md);
       font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
@@ -136,7 +146,7 @@
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-focus-width));
       }
-      :scope[data-ui-list-item-state~="current"]:not(:has(a:focus-visible)) {
+      :is(:scope[data-ui-list-item-state~="current"], :scope[data-ui-list-item-state~="highlighted"]):not(:has(a:focus-visible)) {
         outline: var(--ui-border-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-border-width));
       }

package/vanilla/UiBadge.d.ts

@@ -6,7 +6,7 @@ export interface UiBadgeElement extends HTMLSpanElement {
   removeEventListener<K extends keyof UiBadgeEventMap>(type: K, listener: (this: UiBadgeElement, event: UiBadgeEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiBadgeProps {
-  shape?: "pill" | "tag" | null;
+  shape?: "pill" | "tag" | "dot" | null;
   size?: "xs" | "md" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
   variant?: "solid" | "subtle" | "outline" | null;

package/vanilla/UiBadge.js

@@ -15,17 +15,20 @@ export function createUiBadge(options = {}) {
     element.setAttribute(name, value === true ? "" : String(value));
   }
   element.setAttribute("data-component", "ui-badge");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "label");
   if (children.length > 0) {
     for (const child of children) {
       const node = typeof child === "string" ? document.createTextNode(child) : child;
       if (node.nodeType === 1) node.setAttribute("data-slotted", "");
       projected.push([node, ""]);
-      element.append(node);
+      element0.append(node);
     }
   } else {
   }
+  element.append(element0);
   manageGeneratedProps(element, [
-    { name: "shape", attribute: "data-shape", value: componentProps["shape"], default: "pill", type: ["pill","tag"], required: false },
+    { name: "shape", attribute: "data-shape", value: componentProps["shape"], default: "pill", type: ["pill","tag","dot"], required: false },
     { name: "size", attribute: "data-size", value: componentProps["size"], default: "md", type: ["xs","md"], required: false },
     { name: "tone", attribute: "data-tone", value: componentProps["tone"], default: "neutral", type: ["neutral","accent","info","success","warning","danger"], required: false },
     { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "subtle", type: ["solid","subtle","outline"], required: false },