@threadlabs/looma 0.4.0 → 0.5.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "type": "module",
-  "description": "Looma declarative components, responsive layout primitives, a complete editor, and supported Vue adapters.",
+  "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
   "author": "Threadlabs Studio",
   "repository": {
@@ -18,42 +18,27 @@
     "access": "public",
     "provenance": true
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     },
-    "./core": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./loader": {
-      "types": "./dist/loader.d.ts",
-      "import": "./dist/loader.js"
-    },
-    "./core/declarative": {
-      "types": "./dist/declarative.d.ts",
-      "import": "./dist/declarative.js",
-      "require": "./dist/declarative.cjs"
-    },
-    "./core/declarative-generated": {
-      "types": "./dist/declarative-generated.d.ts",
-      "import": "./dist/declarative-generated.js",
-      "require": "./dist/declarative-generated.cjs"
+    "./vue": {
+      "types": "./vue/index.d.ts",
+      "import": "./vue/index.js",
+      "default": "./vue/index.js"
     },
-    "./layout": {
-      "types": "./layout/index.d.ts",
-      "import": "./layout/index.js",
-      "require": "./layout/index.cjs"
+    "./vue.css": "./vue/components.css",
+    "./vue/editor": {
+      "types": "./vue/editor/index.d.ts",
+      "import": "./vue/editor/index.js",
+      "default": "./vue/editor/index.js"
     },
     "./editor": {
       "types": "./editor/index.d.ts",
-      "import": "./editor/index.js"
+      "import": "./editor/index.js",
+      "default": "./editor/index.js"
     },
     "./editor/ui": {
       "types": "./editor/ui.d.ts",
@@ -62,50 +47,40 @@
     },
     "./editor/extensions": {
       "types": "./editor/extensions/index.d.ts",
-      "import": "./editor/extensions/index.js"
-    },
-    "./vue": {
-      "types": "./vue/index.d.ts",
-      "import": "./vue/index.js"
-    },
-    "./vue/editor": {
-      "types": "./vue/editor/index.d.ts",
-      "import": "./vue/editor/index.js"
+      "import": "./editor/extensions/index.js",
+      "default": "./editor/extensions/index.js"
     },
+    "./vue/*": "./vue/*",
+    "./vanilla": "./vanilla/index.js",
+    "./vanilla/*": "./vanilla/*",
+    "./components/*": "./components/*",
     "./tokens.css": "./tokens.css",
     "./theme-light.css": "./theme-light.css",
     "./theme-dark.css": "./theme-dark.css",
-    "./theme-high-contrast.css": "./theme-high-contrast.css",
-    "./layout.css": "./layout.css",
-    "./styles.css": "./styles.css",
-    "./editor.css": "./editor.css"
+    "./theme-high-contrast.css": "./theme-high-contrast.css"
   },
   "files": [
     "dist/",
-    "layout/",
-    "editor/",
     "vue/",
-    "tokens.css",
-    "theme-light.css",
-    "theme-dark.css",
-    "theme-high-contrast.css",
-    "layout.css",
-    "styles.css",
-    "editor.css",
+    "editor/",
+    "vanilla/",
+    "components/",
+    "styles/",
+    "*.css",
     "README.md",
     "LICENSE"
   ],
   "sideEffects": [
     "./dist/index.js",
-    "./layout/index.js",
-    "./editor/*.js",
-    "./vue/index.js",
-    "./vue/editor/*.js",
+    "./vanilla/*.js",
+    "./styles/*.css",
     "./*.css"
   ],
   "dependencies": {
-    "lucide": "~0.554.0",
-    "lowlight": "^3.3.0"
+    "@nextwebwg/declarative-components": "^1.0.0-alpha.1",
+    "lowlight": "^3.3.0",
+    "markdown-it": "14.3.1",
+    "lucide": "~0.554.0"
   },
   "peerDependencies": {
     "@tiptap/core": ">=2 <3",
@@ -127,12 +102,61 @@
       "optional": true
     }
   },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.9",
+    "vite": "^8.3.0",
+    "vue": "^3.5.43",
+    "vue-tsc": "^3.3.11",
+    "typescript": "~5.9.3",
+    "playwright": "~1.60.0",
+    "vitest": "^3.2.6",
+    "@tiptap/core": "^2.11.5",
+    "@tiptap/extension-blockquote": "^2.11.5",
+    "@tiptap/extension-bold": "^2.11.5",
+    "@tiptap/extension-bullet-list": "^2.11.5",
+    "@tiptap/extension-code": "^2.11.5",
+    "@tiptap/extension-code-block-lowlight": "^2.11.5",
+    "@tiptap/extension-document": "^2.11.5",
+    "@tiptap/extension-dropcursor": "^2.11.5",
+    "@tiptap/extension-gapcursor": "^2.11.5",
+    "@tiptap/extension-hard-break": "^2.11.5",
+    "@tiptap/extension-heading": "^2.11.5",
+    "@tiptap/extension-highlight": "^2.11.5",
+    "@tiptap/extension-history": "^2.11.5",
+    "@tiptap/extension-horizontal-rule": "^2.11.5",
+    "@tiptap/extension-image": "^2.11.5",
+    "@tiptap/extension-italic": "^2.11.5",
+    "@tiptap/extension-link": "^2.11.5",
+    "@tiptap/extension-list-item": "^2.11.5",
+    "@tiptap/extension-mention": "^2.11.5",
+    "@tiptap/extension-ordered-list": "^2.11.5",
+    "@tiptap/extension-paragraph": "^2.11.5",
+    "@tiptap/extension-placeholder": "^2.11.5",
+    "@tiptap/extension-strike": "^2.11.5",
+    "@tiptap/extension-table": "^2.11.5",
+    "@tiptap/extension-table-cell": "^2.11.5",
+    "@tiptap/extension-table-header": "^2.11.5",
+    "@tiptap/extension-table-row": "^2.11.5",
+    "@tiptap/extension-task-item": "^2.11.5",
+    "@tiptap/extension-task-list": "^2.11.5",
+    "@tiptap/extension-text": "^2.11.5",
+    "@tiptap/extension-typography": "^2.11.5",
+    "@tiptap/extension-underline": "^2.11.5",
+    "@tiptap/pm": "^2.11.5",
+    "@tiptap/suggestion": "^2.11.5",
+    "@tiptap/vue-3": "^2.11.5",
+    "@types/markdown-it": "14.2.0",
+    "@vitest/browser": "~3.2.6",
+    "jsdom": "^27.0.0"
+  },
   "engines": {
     "node": ">=20"
   },
   "scripts": {
-    "build": "node ../../tools/scripts/build-facade.mjs",
-    "test": "node --test ../../tools/scripts/facade-*.test.mjs",
-    "typecheck": "node ../../tools/scripts/verify-facade.mjs --definition-only"
+    "build": "node build.mjs",
+    "lint": "vue-tsc -p tsconfig.json --noEmit",
+    "typecheck": "vue-tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "test:browser": "vitest run && vitest run --config vitest.browser.config.ts"
   }
 }

package/styles/ui-affordance-scope.css

@@ -0,0 +1,19 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-affordance-scope"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: contents;
+      --ui-affordance-scope-engaged: 0;
+    }
+
+    :scope[data-ui-affordance-scope-state~="engaged"] {
+      --ui-affordance-scope-engaged: 1;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-affordance-scope"]) to ([data-component]) {
+/* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-avatar-group.css

@@ -0,0 +1,56 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-avatar-group"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      gap: 0;
+    }
+
+    /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
+     * component roots outside this style scope. */
+
+    .overflow {
+      margin-inline-start: -0.625rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 2.5rem;
+      block-size: 2.5rem;
+      border-radius: 999px;
+      border: 1px solid var(--ui-border-strong);
+      background: var(--ui-surface-elevated);
+      color: var(--ui-text-primary);
+      box-shadow:
+        var(--ui-avatar-group-overlap-shadow, -2px 0 5px -1px rgb(0 0 0 / 0.28)),
+        0 0 0 1px rgb(0 0 0 / 0.06);
+      font: inherit;
+      font-size: 0.75rem;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+
+    .overflow[hidden] {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-avatar-group"]) to ([data-component]) {
+/* 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.625rem;
+      flex-shrink: 0;
+      border-radius: 999px;
+    }
+
+    :where([data-slotted], [data-slotted] *):is(*:first-child) {
+      margin-inline-start: 0;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-avatar.css

@@ -0,0 +1,47 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-avatar"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: inline-grid;
+      place-items: center;
+      overflow: hidden;
+      inline-size: 2.5rem;
+      block-size: 2.5rem;
+      border-radius: 999px;
+      border: 1px solid var(--ui-avatar-border, var(--ui-border-strong));
+      background: var(--ui-avatar-surface, var(--ui-accent-soft));
+      color: var(--ui-avatar-text, var(--ui-accent-solid));
+      font: inherit;
+      font-size: 0.875rem;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .fallback {
+      grid-area: 1 / 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
+    [hidden] {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-avatar"]) to ([data-component]) {
+.image,
+    :where([data-slotted], [data-slotted] *):is(img) {
+      grid-area: 1 / 1;
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: cover;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-badge.css

@@ -0,0 +1,91 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-badge"]) to ([data-component], [data-slotted]) {
+:scope {
+      --_badge-surface: var(--ui-surface-subtle);
+      --_badge-text: var(--ui-text-secondary);
+      --_badge-border: color-mix(in srgb, var(--ui-text-secondary) 30%, transparent);
+
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      max-width: 100%;
+      padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
+      border: 1px solid var(--ui-badge-border, var(--_badge-border));
+      border-radius: var(--ui-radius-round);
+      background: var(--ui-badge-surface, var(--_badge-surface));
+      color: var(--ui-badge-text, var(--_badge-text));
+      font-family: var(--ui-font-family-sans);
+      font-size: var(--ui-badge-font-size, var(--ui-font-size-sm));
+      font-weight: var(--ui-badge-font-weight, var(--ui-font-medium));
+      line-height: var(--ui-badge-line-height, var(--ui-line-height-tight));
+      white-space: nowrap;
+    }
+
+    :scope[data-ui-badge-state~="tone=accent"] {
+      --_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));
+    }
+
+    :scope[data-ui-badge-state~="tone=danger"] {
+      --_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));
+    }
+
+    :scope[data-ui-badge-state~="tone=success"] {
+      --_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));
+    }
+
+    :scope[data-ui-badge-state~="tone=warning"] {
+      --_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));
+    }
+
+    :scope[data-ui-badge-state~="tone=info"] {
+      --_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));
+    }
+
+    :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"] {
+      --_badge-surface: var(--ui-accent-soft);
+      --_badge-border: var(--ui-accent-soft);
+      --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
+    }
+
+    :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"] {
+      --_badge-surface: var(--ui-danger-soft);
+      --_badge-border: var(--ui-danger-soft);
+      --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
+    }
+
+    :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"] {
+      --_badge-surface: var(--ui-success-soft);
+      --_badge-border: var(--ui-success-soft);
+      --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
+    }
+
+    :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"] {
+      --_badge-surface: var(--ui-warning-soft);
+      --_badge-border: var(--ui-warning-soft);
+      --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
+    }
+
+    :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"] {
+      --_badge-surface: var(--ui-info-soft);
+      --_badge-border: var(--ui-info-soft);
+      --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-badge"]) to ([data-component]) {
+/* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-button.css

@@ -0,0 +1,236 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-button"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      vertical-align: middle;
+      color: var(--ui-action-secondary-text, var(--ui-text-primary));
+    }
+
+    :scope[data-ui-button-state~="variant=solid"] {
+      color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+    }
+
+    :scope {
+      appearance: none;
+      min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md, 2.5rem));
+      border: 1px solid var(--ui-button-border, var(--ui-border-strong));
+      border-radius: var(--ui-button-radius, var(--ui-radius-2));
+      background: var(--ui-button-surface, var(--ui-surface-elevated));
+      color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+      font: inherit;
+      font-weight: var(--ui-font-medium, 500);
+      line-height: var(--ui-line-height-tight);
+      padding: var(--ui-space-2) var(--ui-space-3);
+      background-image: var(--ui-raised-highlight, none);
+      box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
+      cursor: pointer;
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease);
+      margin: 0;
+    }
+
+    @supports (text-box-trim: trim-both) {
+      :scope {
+        text-box-trim: trim-both;
+        text-box-edge: cap alphabetic;
+      }
+    }
+
+    :scope[data-ui-button-state~="size=sm"] {
+      min-block-size: var(--ui-control-size-sm, 2rem);
+      padding: var(--ui-space-1) var(--ui-space-2);
+      font-size: 0.875rem;
+    }
+
+    :scope[data-ui-button-state~="size=lg"] {
+      min-block-size: var(--ui-control-size-lg, 3rem);
+      padding: var(--ui-space-3) var(--ui-space-4);
+      font-size: 1rem;
+    }
+
+    :scope:hover:enabled {
+      background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
+      border-color: var(--ui-control-border-hover, var(--ui-border-strong));
+    }
+
+    :scope:active:enabled {
+      background: var(--ui-surface-subtle);
+    }
+
+    :scope[data-ui-button-state~="variant=solid"] {
+      border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
+      background: var(--ui-action-primary-surface, var(--ui-accent-solid));
+      color: var(--ui-action-primary-text, var(--ui-text-on-accent));
+      box-shadow: var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs));
+    }
+
+    :scope[data-ui-button-state~="variant=solid"]:hover:enabled {
+      background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
+      border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
+      box-shadow: var(--ui-shadow-sm);
+      transform: translateY(-1px);
+    }
+
+    :scope[data-ui-button-state~="variant=solid"]:active:enabled {
+      background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
+      border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
+      box-shadow: none;
+      transform: translateY(0);
+    }
+
+    :scope[data-ui-button-state~="variant=danger"] {
+      border-color: var(--ui-danger-solid);
+      background: var(--ui-danger-solid);
+      color: var(--ui-text-on-accent);
+      box-shadow: var(--ui-button-danger-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs));
+    }
+
+    :scope[data-ui-button-state~="variant=danger"]:hover:enabled {
+      background: var(--ui-danger-hover);
+      border-color: var(--ui-danger-hover);
+      box-shadow: var(--ui-shadow-sm);
+      transform: translateY(-1px);
+    }
+
+    :scope[data-ui-button-state~="variant=danger"]:active:enabled {
+      box-shadow: none;
+      transform: translateY(0);
+    }
+
+    :scope[data-ui-button-state~="variant=ghost"] {
+      border-color: transparent;
+      background: transparent;
+      box-shadow: none;
+      color: var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
+    }
+
+    /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
+    :scope[data-ui-button-state~="variant=ghost"]:hover:enabled {
+      background: var(--ui-button-ghost-hover, color-mix(in srgb, currentColor 8%, transparent));
+      border-color: transparent;
+    }
+
+    :scope[data-ui-button-state~="variant=ghost"]:active:enabled {
+      background: var(--ui-button-ghost-active, color-mix(in srgb, currentColor 14%, transparent));
+      border-color: transparent;
+    }
+
+    /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
+    :scope:focus-visible {
+      outline: none;
+      box-shadow:
+        var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs))),
+        var(--ui-focus-halo);
+    }
+
+    :scope[data-ui-button-state~="variant=solid"]:focus-visible {
+      box-shadow:
+        var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs)),
+        var(--ui-focus-halo);
+    }
+
+    /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
+    :scope:disabled {
+      opacity: var(--ui-button-disabled-opacity, 0.6);
+      cursor: not-allowed;
+      border-color: var(--ui-button-disabled-border, var(--ui-button-border, var(--ui-border-strong)));
+      background-color: var(--ui-button-disabled-surface, var(--ui-button-surface, var(--ui-surface-elevated)));
+      color: var(--ui-button-disabled-text, var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
+    }
+
+    :scope[data-ui-button-state~="variant=solid"]:disabled {
+      border-color: var(--ui-button-disabled-border, var(--ui-action-primary-surface, var(--ui-accent-solid)));
+      background-color: var(--ui-button-disabled-surface, var(--ui-action-primary-surface, var(--ui-accent-solid)));
+      color: var(--ui-button-disabled-text, var(--ui-action-primary-text, var(--ui-text-on-accent)));
+    }
+
+    :scope[data-ui-button-state~="variant=danger"]:disabled {
+      border-color: var(--ui-button-disabled-border, var(--ui-danger-solid));
+      background-color: var(--ui-button-disabled-surface, var(--ui-danger-solid));
+      color: var(--ui-button-disabled-text, var(--ui-text-on-accent));
+    }
+
+    :scope[data-ui-button-state~="variant=ghost"]:disabled {
+      border-color: transparent;
+      background-color: transparent;
+      color: var(--ui-button-disabled-text, var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
+    }
+
+    @media (pointer: coarse) {
+      :scope {
+        min-block-size: var(--ui-control-min-block-size, 2.75rem);
+      }
+    }
+
+    /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
+       WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
+    :scope[data-ui-button-state~="variant=link"] {
+      display: inline;
+      min-block-size: 0;
+      padding: 0;
+      border: 0;
+      border-radius: var(--ui-radius-sm, 4px);
+      background: none;
+      box-shadow: none;
+      font: inherit;
+      color: var(--ui-button-link-color, var(--ui-text-secondary));
+      text-decoration-line: underline;
+      text-decoration-thickness: 1px;
+      text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+      text-underline-offset: 0.2em;
+      transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :scope[data-ui-button-state~="variant=link"]:hover:enabled {
+      color: var(--ui-button-link-hover-color, var(--ui-text-primary));
+      text-decoration-color: currentColor;
+      background: none;
+      transform: none;
+    }
+
+    :scope[data-ui-button-state~="variant=link"]:active:enabled {
+      background: none;
+      transform: none;
+    }
+
+    :scope[data-ui-button-state~="variant=link"]:disabled {
+      background: none;
+      color: var(--ui-button-disabled-text, var(--ui-button-link-color, var(--ui-text-secondary)));
+    }
+
+    :scope[data-ui-button-state~="variant=link"]:focus-visible {
+      box-shadow: none;
+      /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
+      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline-offset: 2px;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-button"]) to ([data-component]) {
+@supports (text-box-trim: trim-both) {
+    }
+
+    /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
+
+    /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
+
+    /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
+
+    @media (pointer: coarse) {
+    }
+
+    /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
+       WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}