@threadlabs/looma 0.32.0 → 0.33.0

package/editor/chunks/extensions.js

@@ -11986,7 +11986,7 @@ var CALLOUT_COMMANDS = [
 * @ownership Returned command objects belong to the caller and are recreated
 * per call so one editor cannot mutate another editor's command inventory.
 */
-function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLinkEditor) {
+function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLinkEditor, onOpenFilePicker) {
 	return [
 		{
 			title: "Text",
@@ -12209,6 +12209,21 @@ function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLink
 				onOpenLinkEditor();
 			}
 		}] : [],
+		...onOpenFilePicker ? [{
+			title: "File attachment",
+			description: "Attach a file",
+			icon: "paperclip",
+			keywords: [
+				"file",
+				"attachment",
+				"upload",
+				"pdf"
+			],
+			command: ({ editor, range }) => {
+				editor.chain().focus().deleteRange(range).run();
+				onOpenFilePicker();
+			}
+		}] : [],
 		...onOpenImagePicker ? [{
 			title: "Image",
 			description: "Upload an image",
@@ -12228,6 +12243,7 @@ function getDefaultSlashCommands(onOpenImagePicker, onOpenChipEditor, onOpenLink
 		...command,
 		id: command.title.toLowerCase().replaceAll(" ", "-"),
 		group: CALLOUT_COMMANDS.some((callout) => callout.title === command.title) ? "Callouts" : [
+			"File attachment",
 			"Chip",
 			"Inline code",
 			"Link",

package/editor/extensions/slash-command.d.ts

@@ -79,7 +79,7 @@ declare module "@tiptap/core" {
  * @ownership Returned command objects belong to the caller and are recreated
  * per call so one editor cannot mutate another editor's command inventory.
  */
-export declare function getDefaultSlashCommands(onOpenImagePicker?: () => void, onOpenChipEditor?: (editor: Editor, position: number) => void, onOpenLinkEditor?: () => void): LoomaSlashCommand[];
+export declare function getDefaultSlashCommands(onOpenImagePicker?: () => void, onOpenChipEditor?: (editor: Editor, position: number) => void, onOpenLinkEditor?: () => void, onOpenFilePicker?: () => void): LoomaSlashCommand[];
 /**
  * Ranks exact names/aliases before partial matches, then matching categories.
  * Other ties retain inventory order.

package/editor/file-uploads.d.ts

@@ -0,0 +1,31 @@
+import type { Editor } from '@tiptap/core';
+/** A retained file, represented as a readable ordinary link in the document. */
+export interface LoomaFileDescriptor {
+    href: string;
+    name: string;
+    size: number;
+    contentType: string;
+}
+/** The application retains the bytes and returns their authorized download URL. */
+export type LoomaFileUpload = (file: File, init: {
+    signal: AbortSignal;
+    progress: (loaded: number, total: number) => void;
+}) => PromiseLike<LoomaFileDescriptor | null> | LoomaFileDescriptor | null;
+/** File insertion status, independent of the document and its undo history. */
+export interface LoomaFileUploadsState {
+    uploading: boolean;
+    progress: {
+        loaded: number;
+        total: number;
+    } | null;
+}
+/** Captures the caret before asynchronous transport; later transactions map that caret. */
+export declare function createFileUploads(options: {
+    editor: Editor;
+    upload: () => LoomaFileUpload | undefined;
+    onError: (error: unknown, file: File) => void;
+    onState?: (state: LoomaFileUploadsState) => void;
+}): {
+    cancel(): void;
+    insert(file: File): Promise<void>;
+};

package/editor/icons.d.ts

@@ -38,6 +38,7 @@ export declare const LOOMA_ICONS: {
     highlighter: IconNode;
     history: IconNode;
     image: IconNode;
+    paperclip: IconNode;
     info: IconNode;
     italic: IconNode;
     'layout-dashboard': IconNode;

package/editor/index.js

@@ -2,7 +2,7 @@ import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
 import { $ as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, A as filterLoomaMentionItems, B as LOOMA_FOOTNOTE_LABEL, C as loomaMarkdownToHtml, D as createLoomaMentionExtension, E as LoomaMentionSuggestionPluginKey, F as LoomaTableOfContents, G as LoomaFigcaption, H as LoomaFootnoteReference, I as getTableOfContentsEntries, J as revealLoomaExpandAt, K as LoomaFigure, L as normalizeTableOfContentsConfig, M as LoomaImage, N as normalizeImageDimension, O as DEFAULT_MENTION_RESULT_LIMIT, P as normalizeImagePlacement, Q as LoomaCallout, R as LoomaTab, S as loomaMarkdownFromDoc, T as siteRelativeHref, U as LoomaFootnotes, V as LoomaFootnote, W as findLoomaFootnote, X as LoomaChip, Y as LOOMA_CHIP_COLORS, Z as normalizeLoomaChipColor, _ as getActiveTableCellAlignment, a as getActiveTableUiState, b as setActiveTableCellBackground, c as insertTableAtRange, d as LoomaTableKit, et as LOOMA_ACTIVE_BLOCK_CLASS, f as getDefaultEditorExtensions, g as LoomaTableHeader, h as LoomaTableCell, i as getDefaultSlashCommands, j as normalizeMentionResultLimit, k as MAX_MENTION_RESULT_LIMIT, l as normalizeActiveTableColumnWidths, m as LoomaTable, n as createLoomaSlashCommandExtension, nt as LoomaActiveBlock, o as handleTableAction, p as getLoomaTableExtensions, q as LoomaExpand, r as filterLoomaSlashCommands, rt as LoomaActiveBlockPluginKey, s as handleTableOverlayAction, t as LoomaSlashCommand, tt as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, u as shouldShowTextFormattingToolbar, v as getActiveTableCellBackground, w as createSiteRelativeLinks, x as LoomaSmartPaste, y as setActiveTableCellAlignment, z as LoomaTabs } from "./chunks/extensions.js";
 import { a as setReferenceDisplay, i as referenceDisplay, n as LoomaReferencePresentation, o as LOOMA_CALLOUT_TONES, r as getReferenceDisplay, t as LoomaReference } from "./chunks/reference-display.js";
-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, Lightbulb, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, MessageSquareWarning, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Superscript, 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, Lightbulb, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, MessageSquareWarning, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Paperclip, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Superscript, 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 = {
@@ -43,6 +43,7 @@ var LOOMA_ICONS = {
 	highlighter: Highlighter,
 	history: History,
 	image: Image,
+	paperclip: Paperclip,
 	info: Info,
 	italic: Italic,
 	"layout-dashboard": LayoutDashboard,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -82,7 +82,8 @@
       "types": "./editor/expressmark.d.ts",
       "import": "./editor/expressmark.js",
       "default": "./editor/expressmark.js"
-    }
+    },
+    "./theme-system.css": "./theme-system.css"
   },
   "files": [
     "dist/",

package/styles/ui-action-bar.css

@@ -21,7 +21,7 @@
       --_ui-action-bar-gap: var(--ui-action-bar-gap);
 
       --_gap: var(--ui-space-2);
-      display: block;
+      display: block !important;
       /* A size container sizes itself from its container, never its content. */
       container-type: inline-size;
       inline-size: 100%;
@@ -32,16 +32,16 @@
     .tertiary,
     .secondary,
     .primary {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--_ui-action-bar-gap, var(--_gap));
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      gap: var(--_ui-action-bar-gap, var(--_gap)) !important;
     }
 
     /* The tertiary group takes the spare space, pushing the rest to the end edge; without it, the
        rest still ends the row. */
     .bar {
-      justify-content: flex-end;
+      justify-content: flex-end !important;
     }
 
     .tertiary {
@@ -51,7 +51,7 @@
     .tertiary:empty,
     .secondary:empty,
     .primary:empty {
-      display: none;
+      display: none !important;
     }
 
     /* A narrow container stacks the actions full width, primary on top: the row turned on its end,
@@ -61,9 +61,9 @@
       .tertiary,
       .secondary,
       .primary {
-        flex-direction: column-reverse;
-        flex-wrap: nowrap;
-        align-items: stretch;
+        flex-direction: column-reverse !important;
+        flex-wrap: nowrap !important;
+        align-items: stretch !important;
       }
 
       .tertiary {
@@ -73,7 +73,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-action-bar"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-action-bar"]) to ([data-component]) {

package/styles/ui-affordance-scope.css

@@ -8,7 +8,7 @@
 }
 @scope ([data-component~="ui-affordance-scope"]) to ([data-component], [data-slotted]) {
 :scope:where([data-component~="ui-affordance-scope"]) {
-      display: contents;
+      display: contents !important;
       --ui-affordance-scope-engaged: 0;
       --ui-affordance-scope-guide: 1;
     }
@@ -24,7 +24,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-affordance-scope"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-affordance-scope"]) to ([data-component]) {

package/styles/ui-avatar-group.css

@@ -26,10 +26,10 @@
        * a white gap out of the avatar underneath. */
       --_overlap-shadow: -1px 0 0 0 rgb(0 0 0 / 0.22);
 
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      gap: 0;
+      display: flex !important;
+      align-items: center !important;
+      flex-direction: row !important;
+      gap: 0 !important;
     }
 
     /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
@@ -40,10 +40,10 @@
     }
 
     .overflow {
-      margin-inline-start: -0.5rem;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      margin-inline-start: -0.5rem !important;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       inline-size: 2.5rem;
       block-size: 2.5rem;
       border-radius: var(--ui-radius-round);
@@ -60,13 +60,13 @@
     }
 
     :scope:where([data-component~="ui-avatar-group"])[data-ui-avatar-group-state~="size=sm"] .overflow {
-      margin-inline-start: -0.25rem;
+      margin-inline-start: -0.25rem !important;
       inline-size: 1.75rem;
       block-size: 1.75rem;
     }
 
     :scope:where([data-component~="ui-avatar-group"])[data-ui-avatar-group-state~="size=xs"] .overflow {
-      margin-inline-start: -0.1875rem;
+      margin-inline-start: -0.1875rem !important;
       inline-size: 1.25rem;
       block-size: 1.25rem;
       /* Matches the xs Avatar's initials. */
@@ -75,12 +75,12 @@
     }
 
     .overflow[hidden] {
-      display: none;
+      display: none !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-avatar-group"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-avatar-group"]) to ([data-component]) {
@@ -89,12 +89,12 @@
     /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
      * component roots outside this style scope. */
     :where([data-slotted], [data-slotted] *):is(*) {
-      margin-inline-start: -0.5rem;
+      margin-inline-start: -0.5rem !important;
       flex-shrink: 0;
     }
 
     :where([data-slotted], [data-slotted] *):is(*:first-child) {
-      margin-inline-start: 0;
+      margin-inline-start: 0 !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-avatar.css

@@ -31,7 +31,7 @@
 
     :scope:where([data-component~="ui-avatar"]) {
       --_ui-default-icon-size: 1.25rem;
-      display: inline-grid;
+      display: inline-grid !important;
       place-items: center;
       overflow: hidden;
       inline-size: 2.5rem;
@@ -85,9 +85,9 @@
 
     .fallback {
       grid-area: 1 / 1;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       inline-size: 100%;
       block-size: 100%;
     }
@@ -97,21 +97,21 @@
      * Trimming applies to block containers, so the box is a block with centred content. */
     @supports (text-box-trim: trim-both) {
       .fallback {
-        display: block;
+        display: block !important;
         text-align: center;
-        align-content: center;
+        align-content: center !important;
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
     }
 
     [hidden] {
-      display: none;
+      display: none !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-avatar"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-avatar"]) to ([data-component]) {

package/styles/ui-badge.css

@@ -85,14 +85,14 @@
       --_badge-color-text: var(--_badge-color-ink);
       --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-color-surface, var(--_badge-surface)));
 
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--ui-space-1);
-      box-sizing: border-box;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      gap: var(--ui-space-1) !important;
+      box-sizing: border-box !important;
       min-inline-size: 0;
       max-inline-size: 100%;
-      padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
+      padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2)) !important;
       border: var(--ui-border-width) solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
       border-radius: var(--ui-radius-round);
       background: var(--_badge-outline-surface);
@@ -107,26 +107,26 @@
     /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
        text stays in the DOM for accessible names and consumers' selected values. */
     .label {
-      display: block;
+      display: block !important;
       min-inline-size: 0;
       overflow: hidden;
       text-overflow: ellipsis;
     }
 
     .label:empty {
-      display: none;
+      display: none !important;
     }
 
     /* Icon content has its own flex item so label ellipsis never clips its strokes. */
     .icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       flex: none;
     }
 
     .icon:empty {
-      display: none;
+      display: none !important;
     }
 
     /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
@@ -139,15 +139,15 @@
        Vertical ink remains visible so trimming never cuts off ascenders or descenders. */
     @supports (text-box-trim: trim-both) {
       :scope:where([data-component~="ui-badge"]) {
-        display: inline-block;
+        display: inline-block !important;
         min-block-size: var(--ui-badge-min-block-size, 1.5rem);
         text-align: center;
-        align-content: center;
+        align-content: center !important;
         text-box-trim: none;
       }
       :scope:where([data-component~="ui-badge"]):has(.icon:not(:empty)),
       :scope:where([data-component~="ui-badge"]):has(.label svg) {
-        display: inline-flex;
+        display: inline-flex !important;
         text-box-trim: none;
       }
       .label:not(:has(svg)) {
@@ -159,12 +159,12 @@
     }
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="size=xs"] {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       min-inline-size: 1rem;
       min-block-size: var(--ui-badge-min-block-size, 1rem);
       /* Compact text still needs room at both rounded edges. Fixed marks override this
          padding below; ordinary text badges retain their larger spacing. */
-      padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, var(--ui-space-1));
+      padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, var(--ui-space-1)) !important;
       font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
       line-height: var(--ui-badge-line-height, 1);
     }
@@ -338,14 +338,14 @@
     /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] {
       --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
-      display: inline-flex;
-      box-sizing: border-box;
+      display: inline-flex !important;
+      box-sizing: border-box !important;
       flex: none;
       inline-size: var(--_badge-square-size);
       block-size: var(--_badge-square-size);
       min-inline-size: var(--_badge-square-size);
       min-block-size: var(--_badge-square-size);
-      padding: 0;
+      padding: 0 !important;
       border-radius: var(--ui-radius-md);
       text-box-trim: none;
     }
@@ -359,25 +359,25 @@
     }
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
     }
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label:empty {
-      display: none;
+      display: none !important;
     }
 
     /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] {
       --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
-      display: inline-flex;
+      display: inline-flex !important;
       flex: none;
       inline-size: var(--_badge-circle-size);
       block-size: var(--_badge-circle-size);
       min-inline-size: var(--_badge-circle-size);
       min-block-size: var(--_badge-circle-size);
-      padding: 0;
+      padding: 0 !important;
       border-radius: var(--ui-radius-round);
       text-box-trim: none;
     }
@@ -395,15 +395,15 @@
     }
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] .label {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       line-height: 1;
       text-box-trim: none;
     }
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] .label:empty {
-      display: none;
+      display: none !important;
     }
 
     /* Center capital and numeral ink, rather than the font's ascent/descent line box.
@@ -411,7 +411,7 @@
     @supports (text-box-trim: trim-both) {
       :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] .label:not(:has(svg)),
       :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label:not(:has(svg)) {
-        display: block;
+        display: block !important;
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
         overflow: visible;
@@ -421,13 +421,13 @@
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=dot"] {
       position: relative;
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       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;
+      padding: 0 !important;
       border-radius: var(--ui-radius-round);
       text-box-trim: none;
     }
@@ -451,7 +451,7 @@
       border-color: transparent;
       border-radius: 0;
       background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
-      padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
+      padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)) !important;
       clip-path: polygon(0 0, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
     }
 
@@ -470,8 +470,8 @@
     }
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=tag"]: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));
+      padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2)) !important;
+      padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)) !important;
       clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
     }
 
@@ -499,7 +499,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-badge"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-badge"]) to ([data-component]) {
@@ -511,7 +511,7 @@
     /* Icon content has its own flex item so label ellipsis never clips its strokes. */
 
     .icon :where([data-slotted], [data-slotted] *):is(svg) {
-      display: block;
+      display: block !important;
       inline-size: 1em;
       block-size: 1em;
       flex: none;
@@ -522,7 +522,7 @@
       inline-size: 1em;
       block-size: 1em;
       vertical-align: middle;
-      margin-inline-end: var(--ui-space-1);
+      margin-inline-end: var(--ui-space-1) !important;
     }
 
     /* Center the capital/baseline text box, while clipping only inline overflow for ellipsis.
@@ -548,13 +548,13 @@
     /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label :where([data-slotted], [data-slotted] *):is(svg) {
-      margin-inline-end: 0;
+      margin-inline-end: 0 !important;
     }
 
     /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] .label :where([data-slotted], [data-slotted] *):is(svg) {
-      margin-inline-end: 0;
+      margin-inline-end: 0 !important;
     }
 
     /* Center capital and numeral ink, rather than the font's ascent/descent line box.

package/styles/ui-breadcrumb-item.css

@@ -10,27 +10,27 @@
 /* One step in a ui-breadcrumbs trail: a link up to that place, or the current view. A chevron leads
        every step but the first. An icon slotted before the name sits with it. */
     :scope:where([data-component~="ui-breadcrumb-item"]) {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ui-space-2);
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
       min-inline-size: 0;
-      margin: 0;
+      margin: 0 !important;
     }
 
     .separator {
-      display: inline-flex;
+      display: inline-flex !important;
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);
     }
 
     :scope:where([data-component~="ui-breadcrumb-item"]):first-child .separator {
-      display: none;
+      display: none !important;
     }
 
     .content {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ui-space-1);
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-1) !important;
       min-inline-size: 0;
     }
 
@@ -41,7 +41,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-breadcrumb-item"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-breadcrumb-item"]) to ([data-component]) {
@@ -49,9 +49,9 @@
        every step but the first. An icon slotted before the name sits with it. */
 
     .content > :where([data-slotted], [data-slotted] *):is(a) {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ui-space-1);
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-1) !important;
       color: var(--ui-text-secondary);
       text-decoration: none;
     }

package/styles/ui-breadcrumbs.css

@@ -10,25 +10,25 @@
 /* Where a view sits: a trail of ui-breadcrumb-item, from the top down to the current view. It wraps
        rather than scrolls, so every step stays reachable. */
     :scope:where([data-component~="ui-breadcrumbs"]) {
-      display: block;
+      display: block !important;
       min-inline-size: 0;
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);
     }
 
     ol {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--ui-space-1) var(--ui-space-2);
-      margin: 0;
-      padding: 0;
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      gap: var(--ui-space-1) var(--ui-space-2) !important;
+      margin: 0 !important;
+      padding: 0 !important;
       list-style: none;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-breadcrumbs"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-breadcrumbs"]) to ([data-component]) {