@threadlabs/looma 0.38.0 → 0.39.1

package/docs/README.md

@@ -12,12 +12,12 @@ In a project with a `package.json`, install Looma and its documentation tools:
 
 ```sh
 pnpm add @threadlabs/looma @nextwebwg/html-next@1.0.0-alpha.69
-pnpm add -D markupress@^0.9.1 @nextwebwg/htmlkit@1.0.0-alpha.69 vite
+pnpm add -D 'markupress@>=0.10.0 <1' '@threadlabs/markupkit@>=0.2.0 <1' vite
 pnpm exec looma-docs init --title "The Fellowship"
 pnpm exec looma-docs dev
 ```
 
-Use the tool versions accepted by Looma's optional peer dependencies. Markupress 0.9 supplies the current documentation theme, including one appearance button that cycles Automatic, Light and Dark. Regular component imports do not load the documentation server. Vue and Tiptap remain optional; install them when your own authored documentation mounts the Vue editor.
+Use the tool versions accepted by Looma's optional peer dependencies. Markupress 0.10 and later compatible 0.x releases supply the current documentation theme, including one appearance button that cycles Automatic, Light and Dark. Regular component imports do not load the documentation server. Vue and Tiptap remain optional; install them when your own authored documentation mounts the Vue editor.
 
 Initialization creates three project-owned files:
 
@@ -44,7 +44,7 @@ pnpm exec looma-docs build
 pnpm exec looma-docs preview
 ```
 
-`build` produces a static HTMLKit site in the configured output directory. `preview` serves that output without a repository writer. All commands accept `--root`; `dev` and `preview` also accept `--port`.
+`build` produces a static MarkupKit site in the configured output directory. `preview` serves that output without a repository writer. All commands accept `--root`; `dev` and `preview` also accept `--port`.
 
 ## Name your local design system
 

package/docs/catalog.json

@@ -458,7 +458,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.38.0",
+  "version": "0.39.1",
   "groups": [
     {
       "id": "layout",
@@ -20455,7 +20455,7 @@
       "tag": "ui-skeleton",
       "package": "@threadlabs/looma",
       "root": "span",
-      "description": "Reserve the shape of incoming content without announcing each placeholder. Text follows the surrounding line metrics; circles and rectangles stand in for avatars and media. Use one status message and aria-busy on the loading region, then replace the placeholders with real content. Keep existing content visible during refresh when possible. Animation is optional and respects reduced motion.",
+      "description": "Reserve the shape of incoming content without announcing each placeholder. Text follows the surrounding line metrics; circles and rectangles stand in for avatars and media. Use one status message and aria-busy on the loading region, then replace the placeholders with real content. Keep existing content visible during refresh when possible. A broad shimmer sweeps across the placeholders together by default, continuously from left to right. Reduced-motion preferences always keep it static.",
       "designTokens": {
         "sources": [
           "packages/looma/src/components/ui-skeleton/ui-skeleton.html"
@@ -20499,9 +20499,9 @@
         {
           "name": "animated",
           "property": "animated",
-          "description": "Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.",
+          "description": "Moves a subtle highlight from left to right. On by default; pass false to keep it static. Reduced-motion preferences always disable the shimmer.",
           "type": "boolean",
-          "default": false
+          "default": true
         },
         {
           "name": "height",
@@ -20533,9 +20533,9 @@
       "properties": [
         {
           "name": "animated",
-          "description": "Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.",
+          "description": "Moves a subtle highlight from left to right. On by default; pass false to keep it static. Reduced-motion preferences always disable the shimmer.",
           "type": "boolean",
-          "default": false
+          "default": true
         },
         {
           "name": "height",
@@ -20605,9 +20605,9 @@
         {
           "id": "@threadlabs/looma/ui-skeleton/04-animation",
           "name": "04-animation",
-          "title": "Optional motion",
-          "description": "Still by default. Opt in to a gentle pulse when it helps convey loading; reduced-motion preferences always keep it still.",
-          "markup": "<ui-stack gap=\"s\">\n  <ui-text tone=\"secondary\" size=\"sm\">Still</ui-text>\n  <ui-skeleton width=\"75%\"></ui-skeleton>\n  <ui-text tone=\"secondary\" size=\"sm\">Animated when motion is welcome</ui-text>\n  <ui-skeleton animated width=\"75%\"></ui-skeleton>\n</ui-stack>",
+          "title": "Shared shimmer",
+          "description": "One broad gradient stays fixed to the viewport, so every placeholder reveals the same moving highlight. It loops continuously and stops for reduced motion.",
+          "markup": "<ui-stack gap=\"s\">\n  <ui-cluster gap=\"s\">\n    <ui-skeleton shape=\"circle\"></ui-skeleton>\n    <ui-skeleton width=\"50%\"></ui-skeleton>\n  </ui-cluster>\n  <ui-skeleton shape=\"rectangle\" width=\"75%\" height=\"3rem\"></ui-skeleton>\n</ui-stack>",
           "resizable": false,
           "bindings": "",
           "frameworks": {}

package/docs/cli.mjs

@@ -6,7 +6,7 @@ try {
   const { values, positionals } = parseArgs({ allowPositionals: true, options: { root: { type: 'string' }, port: { type: 'string' }, title: { type: 'string' }, help: { type: 'boolean', short: 'h' } } });
   const [command = 'help'] = positionals;
   if (values.help || command === 'help') {
-    console.log('looma-docs init | dev | build | preview\n\n  --root <project>  Project directory\n  --port <number>   Local server port (default 3000)\n  --title <name>    Documentation title for init\n\nInstall the optional documentation peers: markupress, @nextwebwg/htmlkit and vite.');
+    console.log('looma-docs init | dev | build | preview\n\n  --root <project>  Project directory\n  --port <number>   Local server port (default 3000)\n  --title <name>    Documentation title for init\n\nInstall the optional documentation peers: markupress, @threadlabs/markupkit and vite.');
   } else {
     const options = { ...(values.root ? { root: values.root } : {}), ...(values.title ? { title: values.title } : {}) };
     if (values.port) { const port = Number(values.port); if (!Number.isInteger(port) || port < 0 || port > 65535) throw new Error('Port must be an integer from 0 to 65535.'); options.port = port; }

package/docs/commands.mjs

@@ -47,11 +47,11 @@ export async function buildProjectDocumentation({ root = process.cwd(), config,
 }
 export async function previewProjectDocumentation({ root = process.cwd(), config, port = 3000 } = {}) {
   if (!config) ({ root, config } = await readConfiguration(root));
-  const { previewApplication } = await tool('@nextwebwg/htmlkit', root);
+  const { previewApplication } = await tool('@threadlabs/markupkit', root);
   return previewApplication({ root, outDir: config.outDir ?? '.looma/site', base: config.base ?? '/', host: '127.0.0.1', port });
 }
 
-/** HTMLKit serves the build; this local-only gateway adds the constrained repository writer. */
+/** MarkupKit serves the build; this local-only gateway adds the constrained repository writer. */
 export async function devProjectDocumentation({ root = process.cwd(), config, catalog, port = 3000, onError = console.error } = {}) {
   const configured = Boolean(config);
   if (!config) ({ root, config } = await readConfiguration(root));

package/docs/index.d.ts

@@ -39,9 +39,9 @@ export function discoverComponents(input: DiscoveryRoot & { root: string }): Pro
 export function mergeCatalogs(catalogs: DocumentationCatalog[], options?: { categories?: Record<string, string> }): DocumentationCatalog;
 export function prepareDocumentation(input: DocumentationInput & { root: string }): Promise<DocumentationSite>;
 export function buildDocumentation(input?: DocumentationInput): Promise<DocumentationBuild>;
-/** Optional HTMLKit integration; server tooling peers are loaded only when invoked. */
-export function documentationOptions(site: DocumentationSite): Promise<import('@nextwebwg/htmlkit').ApplicationOptions>;
-export function documentationPlugin(site: DocumentationSite): import('@nextwebwg/htmlkit').HtmlKitPlugin;
+/** Optional MarkupKit integration; server tooling peers are loaded only when invoked. */
+export function documentationOptions(site: DocumentationSite): Promise<import('@threadlabs/markupkit').ApplicationOptions>;
+export function documentationPlugin(site: DocumentationSite): import('@threadlabs/markupkit').MarkupKitPlugin;
 export function initializeDocumentation(input?: { root?: string; title?: string }): Promise<{ config: DocumentationConfiguration; files: string[]; applicationImport: string }>;
 export function readConfiguration(root?: string): Promise<{ root: string; config: DocumentationConfiguration }>;
 export function buildProjectDocumentation(input?: DocumentationInput): Promise<DocumentationBuild>;

package/docs/local-server.mjs

@@ -17,7 +17,7 @@ async function body(request) {
 /** Local capabilities stay in the parent editor; opaque example frames receive only theme CSS. */
 export async function serveLocalDocumentation({ upstream, store, base = '/', port = 0, onSaved = async () => {} }) {
   const target = new URL(upstream);
-  if (target.protocol !== 'http:' || target.hostname !== '127.0.0.1') throw new Error('The documentation upstream must be a loopback HTMLKit server.');
+  if (target.protocol !== 'http:' || target.hostname !== '127.0.0.1') throw new Error('The documentation upstream must be a loopback MarkupKit server.');
   const capability = randomBytes(32).toString('hex');
   let origin;
   const json = (response, status, data) => {

package/docs/site.mjs

@@ -13,7 +13,7 @@ import { cacheDirectory, rejectSymlink, withBuildLock } from './workspace.mjs';
 const own = name => fileURLToPath(new URL(name, import.meta.url));
 /** Resolve import-only optional tooling peers in the consumer's ESM package scope. */
 export async function tool(name, root) {
-  if (!['markupress', '@nextwebwg/htmlkit', 'vite'].includes(name)) throw new Error(`Unknown documentation tool ${name}.`);
+  if (!['markupress', '@threadlabs/markupkit', 'vite'].includes(name)) throw new Error(`Unknown documentation tool ${name}.`);
   const directory = await cacheDirectory(root, 'tooling');
   const file = path.join(directory, name.replaceAll('/', '-').replace('@', '') + '.mjs');
   await rejectSymlink(file);
@@ -89,7 +89,7 @@ export async function prepareDocumentation({ root, config = {}, catalog }) {
   for (const file of ['customizer.js', 'theme.mjs', 'theme-session.mjs', 'value-editors.mjs', 'palette.mjs', 'fonts.mjs']) await cp(own(file), path.join(generated, file));
   const write = async (file, source) => { await mkdir(path.dirname(file), { recursive: true }); await writeFile(file, source); };
   const examples = [];
-  // HTMLKit route groups retain their labels/order in navigation without changing public URLs.
+  // MarkupKit route groups retain their labels/order in navigation without changing public URLs.
   const groupDirectories = new Map(combined.groups.map((group, index) => [group.id,
     `${String(index + 1).padStart(2, '0')}.(${group.label.replace(/[\\/()]/g, '-')})`]));
   const generatedReferences = new Set();
@@ -114,7 +114,7 @@ export async function prepareDocumentation({ root, config = {}, catalog }) {
       const setup = path.join(previews, key + '.js');
       const behavior = example.behavior;
       await write(setup, `import { connect as connectPreview } from '../preview.js';\n${behavior ? `import setupExample from ${JSON.stringify(behavior)};\n` : ''}export function connect(host) { const stopPreview = connectPreview(host); ${behavior ? 'const stopExample = setupExample(host.element);' : ''} return () => { ${behavior ? 'stopExample?.();' : ''} stopPreview(); }; }\n`);
-      await write(file, ` ${links}\n<template component="looma-preview-${key}" module="./${key}.js"><defs><meta name="hk:navigation" content="hidden"><title>${escapeHtml(example.title)}</title></defs><div data-preview="${escapeHtml(example.id)}"${component.group === 'layout' ? ' data-preview-layout' : ''}>${example.markup}${anchors}</div></template>\n`);
+      await write(file, ` ${links}\n<template component="looma-preview-${key}" module="./${key}.js"><defs><meta name="mk:navigation" content="hidden"><title>${escapeHtml(example.title)}</title></defs><div data-preview="${escapeHtml(example.id)}"${component.group === 'layout' ? ' data-preview-layout' : ''}>${example.markup}${anchors}</div></template>\n`);
       examples.push({ ...example, file, component: component.id, path: base + previewPath(example).slice(1) });
     }
   }
@@ -155,7 +155,7 @@ export async function prepareDocumentation({ root, config = {}, catalog }) {
   return { root, config, base, catalog: combined, examples, generated, content, previews, redirects };
 }
 
-/** Bundle validated theme restoration into HTMLKit's before-paint head hook. */
+/** Bundle validated theme restoration into MarkupKit's before-paint head hook. */
 async function themeBootstrap(site) {
   const { build } = await tool('vite', site.root);
   const entry = path.join(site.generated, 'theme-bootstrap.mjs');
@@ -210,11 +210,11 @@ async function portableThemeStyles(site) {
   return styles;
 }
 
-/** Build through HTMLKit, then make opaque preview scripts portable to static hosts without CORS. */
+/** Build through MarkupKit, then make opaque preview scripts portable to static hosts without CORS. */
 export async function buildDocumentation({ root = process.cwd(), config = {}, catalog } = {}) {
   return withBuildLock(root, async () => {
     const site = await prepareDocumentation({ root, config, catalog });
-    const { buildApplication } = await tool('@nextwebwg/htmlkit', site.root);
+    const { buildApplication } = await tool('@threadlabs/markupkit', site.root);
     const built = await buildApplication(await documentationOptions(site));
     return { ...built, site };
   });

package/editor/expressmark.js

@@ -109,7 +109,7 @@ function safeBackground(value, path) {
 			value: "color",
 			attributes: { style }
 		}]
-	})), (node) => typeof node.attributes?.style === "string")?.attributes?.style;
+	}), { syntax: "compatible" }), (node) => typeof node.attributes?.style === "string")?.attributes?.style;
 	if (typeof accepted !== "string" || accepted.replace(/\s/g, "").replace(/;$/, "") !== style.replace(/\s/g, "")) fail(path, "unsafe or unsupported table background");
 }
 function safeNavigation(value, image, path) {
@@ -129,7 +129,7 @@ function safeNavigation(value, image, path) {
 				value: "link"
 			}]
 		}]
-	})), (child) => child.type === (image ? "image" : "link"))?.url !== value) fail(path, "unsafe or unsupported navigation URL");
+	}), { syntax: "compatible" }), (child) => child.type === (image ? "image" : "link"))?.url !== value) fail(path, "unsafe or unsupported navigation URL");
 }
 var MARKS = {
 	bold: "strong",
@@ -605,6 +605,7 @@ function editorDocumentToExpressmark(document, options = {}) {
 	return {
 		type: "document",
 		version: 1,
+		syntax: options.syntax ?? "compatible",
 		body: (document.content ?? []).map((node, index) => {
 			const child = toNode(node, `document.body[${index}]`, context);
 			return child.type === "image" ? {
@@ -1007,7 +1008,11 @@ function expressmarkToEditorDocument(document) {
 * @failure Unsupported editor data raises EditorMarkdownConversionError before any input is changed.
 */
 function editorDocumentToMarkdown(document, options = {}) {
-	return stringify(editorDocumentToExpressmark(document, options), options);
+	const conversion = {
+		syntax: "compatible",
+		...options
+	};
+	return stringify(editorDocumentToExpressmark(document, conversion), conversion);
 }
 /**
 * Serializes the current editor, including its current display cache and concrete TOC entries.
@@ -1024,7 +1029,10 @@ function editorToMarkdown(editor, options = {}) {
 * @failure Unsupported content or root metadata stops conversion instead of being silently flattened.
 */
 function markdownToEditorDocument(markdown, options = {}) {
-	return expressmarkToEditorDocument(parse(markdown, options));
+	return expressmarkToEditorDocument(parse(markdown, {
+		syntax: "compatible",
+		...options
+	}));
 }
 //#endregion
 export { EditorMarkdownConversionError, editorDocumentToExpressmark, editorDocumentToMarkdown, editorToMarkdown, expressmarkToEditorDocument, markdownToEditorDocument };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.38.0",
+  "version": "0.39.1",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -119,7 +119,7 @@
     "lowlight": "^3.3.0",
     "markdown-it": "14.3.1",
     "lucide": "~0.554.0",
-    "expressmark": "0.1.6"
+    "expressmark": ">=0.2.0 <1"
   },
   "peerDependencies": {
     "@nextwebwg/html-next": "1.0.0-alpha.69",
@@ -127,9 +127,9 @@
     "@tiptap/pm": ">=2 <3",
     "@tiptap/vue-3": ">=2 <3",
     "vue": "^3.5.43",
-    "markupress": "^0.9.1",
-    "@nextwebwg/htmlkit": "1.0.0-alpha.69",
-    "vite": "^8.3.4"
+    "markupress": ">=0.10.0 <1",
+    "@threadlabs/markupkit": ">=0.2.0 <1",
+    "vite": ">=7.2.7 <9"
   },
   "peerDependenciesMeta": {
     "@tiptap/core": {
@@ -147,7 +147,7 @@
     "markupress": {
       "optional": true
     },
-    "@nextwebwg/htmlkit": {
+    "@threadlabs/markupkit": {
       "optional": true
     },
     "vite": {

package/styles/ui-skeleton.css

@@ -16,8 +16,20 @@
       syntax: "*";
       inherits: false;
     }
+    @property --_ui-skeleton-viewport-x {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 0px;
+    }
+    @property --_ui-skeleton-viewport-scale {
+      syntax: "<number>";
+      inherits: false;
+      initial-value: 1;
+    }
 
     :scope:where([data-component~="ui-skeleton"]) {
+      --_ui-skeleton-paint-x: var(--_ui-skeleton-viewport-x);
+      --_ui-skeleton-paint-scale: var(--_ui-skeleton-viewport-scale);
       display: block !important;
       position: relative;
       box-sizing: border-box !important;
@@ -59,23 +71,36 @@
     }
 
     :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="animated"]::before {
-      animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
-    }
-    @keyframes ui-skeleton-pulse {
-      50% {
-        opacity: 0.45;
+      background-image: linear-gradient(
+        90deg,
+        transparent,
+        light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.14)) 50%,
+        transparent
+      );
+      background-size: calc(100vw / var(--_ui-skeleton-paint-scale)) 100%;
+      background-position: calc(0vw - var(--_ui-skeleton-paint-x)) 0;
+      background-repeat: repeat-x;
+      animation: ui-skeleton-shimmer 3s linear infinite;
+    }
+    @keyframes ui-skeleton-shimmer {
+      to {
+        background-position: calc(100vw / var(--_ui-skeleton-paint-scale) - var(--_ui-skeleton-paint-x)) 0;
       }
     }
     @media (prefers-reduced-motion: reduce) {
       :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="animated"]::before {
         animation: none;
+        background-image: none;
       }
     }
     @media (forced-colors: active) {
       :scope:where([data-component~="ui-skeleton"])::before {
         background: CanvasText;
         opacity: 0.2;
+      }
+      :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="animated"]::before {
         animation: none;
+        background-image: none;
       }
     }
     :scope:where([data-component~="ui-skeleton"])[hidden] {

package/vanilla/UiSkeleton.js

@@ -1,9 +1,11 @@
 // Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
-import { attachGeneratedController, toText, writeAttribute, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, checkBoolean, checkFormat, checkString, defineComponent } from "@nextwebwg/html-next/generated-runtime";
+import { attachGeneratedController, toText, writeAttribute, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, checkBoolean, checkFormat, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
+import * as controller from "../components/ui-skeleton/ui-skeleton.js";
 import "../styles/ui-skeleton.css";
 
-const S = { n: [], t: [], f: import.meta.url, g: "ui-skeleton", b: generatedInputs };
-const D = { g: "ui-skeleton", props: { "animated": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "height": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["text","circle","rectangle"],"default":"text", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "width": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
+const S = { n: [], t: [], f: import.meta.url, g: "ui-skeleton", a: (host, I) => C(host, I), b: generatedInputs };
+const D = { g: "ui-skeleton", props: { "animated": { "required":false,"default":true, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "height": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["text","circle","rectangle"],"default":"text", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "width": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" } } };
+const C = (host) => activateModule(controller, host);
 
 export function createUiSkeleton(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiSkeleton.vue

@@ -1,13 +1,20 @@
 <!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, watchSyncEffect } from 'vue'
+import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkHydratedRoot, nativeAttrs, useReflectedProp } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import {
   BINDING_INPUTS_PROP,
   checkedProp,
   checkPropInput,
   type InputBindings,
+  propValidityState,
   READY_INPUT,
   requireInputStatus,
   UNRESOLVED_INPUT,
@@ -24,8 +31,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'animated' },
       description:
-        'Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.',
-      default: false,
+        'Moves a subtle highlight from left to right. On by default; pass false to keep it static. Reduced-motion preferences always disable the shimmer.',
+      default: true,
     },
     height: {
       type: { kind: 'terminal', name: 'string' },
@@ -62,13 +69,13 @@ const props = defineProps({
   [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
-  animated: false,
+  animated: true,
   height: '',
   shape: 'text',
   width: '',
 }
 const inputTracking = vuePropInputs(acceptedProps, {
-  animated: false,
+  animated: true,
   height: '',
   shape: 'text',
   width: '',
@@ -124,7 +131,9 @@ watchSyncEffect(() => {
   void checkedProps.value
 })
 const reflectedProp = useReflectedProp()
+const hydrationInstance = getCurrentInstance()
 
+const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('span', 'ui-skeleton')
 
 /** The values the styles' :host() and :state() rules test. */
@@ -135,6 +144,31 @@ const hostState = computed(() =>
     checkedProps.value.animated && 'animated',
   ].filter(Boolean).join(' ')
 )
+
+const dispatch = createDispatch(root)
+
+useComponentHost(() => import('../components/ui-skeleton/ui-skeleton.js'), {
+  root,
+  module: true,
+  dispatch,
+  controllerSource: {
+    specifier: '../components/ui-skeleton/ui-skeleton.js',
+    definition: './components/ui-skeleton/ui-skeleton.html',
+  },
+  props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['animated', 'height', 'shape', 'width'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+})
 </script>
 
 <template>
@@ -153,6 +187,7 @@ const hostState = computed(() =>
     :data-ui-skeleton-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-skeleton-prop-width="reflectedProp('width', 'width', checkedProps.width, undefined, false)"
     :data-ui-skeleton-state="hostState || undefined"
+    ref="root"
   ></span>
 </template>
 
@@ -166,13 +201,26 @@ const hostState = computed(() =>
   syntax: "*";
   inherits: false;
 }
-@keyframes ui-skeleton-pulse {
-  50% {
-    opacity: 0.45;
+@property --_ui-skeleton-viewport-x {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --_ui-skeleton-viewport-scale {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+@keyframes ui-skeleton-shimmer {
+  to {
+    background-position: calc(100vw / var(--_ui-skeleton-paint-scale) - var(--_ui-skeleton-paint-x))
+      0;
   }
 }
 @scope (.ui-skeleton) to ([data-hn]) {
   :global(:scope) {
+    --_ui-skeleton-paint-x: var(--_ui-skeleton-viewport-x);
+    --_ui-skeleton-paint-scale: var(--_ui-skeleton-viewport-scale);
     display: block !important;
     position: relative;
     box-sizing: border-box !important;
@@ -214,18 +262,31 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-skeleton-state~="animated"]::before) {
-    animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
+    background-image: linear-gradient(
+      90deg,
+      transparent,
+      light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.14)) 50%,
+      transparent
+    );
+    background-size: calc(100vw / var(--_ui-skeleton-paint-scale)) 100%;
+    background-position: calc(0vw - var(--_ui-skeleton-paint-x)) 0;
+    background-repeat: repeat-x;
+    animation: ui-skeleton-shimmer 3s linear infinite;
   }
   @media (prefers-reduced-motion: reduce) {
     :global(:scope[data-ui-skeleton-state~="animated"]::before) {
       animation: none;
+      background-image: none;
     }
   }
   @media (forced-colors: active) {
     :global(:scope::before) {
       background: CanvasText;
       opacity: 0.2;
+    }
+    :global(:scope[data-ui-skeleton-state~="animated"]::before) {
       animation: none;
+      background-image: none;
     }
   }
   :global(:scope[hidden]) {

package/vue/chunks/UiSkeleton.js

@@ -1,6 +1,6 @@
-import { C as useReflectedProp, _ as nativeAttrs, a as checkHydratedRoot, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { h as vuePropInputs, i as checkPropInput, m as vPropValidity, t as BINDING_INPUTS_PROP } from "./props.js";
-import { computed, createElementBlock, defineComponent, mergeProps, openBlock, unref, watchSyncEffect, withDirectives } from "vue";
+import { C as useReflectedProp, S as useComponentHost, _ as nativeAttrs, a as checkHydratedRoot, s as createDispatch, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { d as propValidityState, h as vuePropInputs, i as checkPropInput, m as vPropValidity, t as BINDING_INPUTS_PROP } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiSkeleton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-ui-skeleton-prop-animated",
@@ -30,8 +30,8 @@ var UiSkeleton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				},
 				required: false,
 				target: { attribute: "animated" },
-				description: "Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.",
-				default: false
+				description: "Moves a subtle highlight from left to right. On by default; pass false to keep it static. Reduced-motion preferences always disable the shimmer.",
+				default: true
 			},
 			height: {
 				type: {
@@ -71,12 +71,12 @@ var UiSkeleton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		} };
 		const props = __props;
 		const inputTracking = vuePropInputs({
-			animated: false,
+			animated: true,
 			height: "",
 			shape: "text",
 			width: ""
 		}, {
-			animated: false,
+			animated: true,
 			height: "",
 			shape: "text",
 			width: ""
@@ -118,6 +118,8 @@ var UiSkeleton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			checkedProps.value;
 		});
 		const reflectedProp = useReflectedProp();
+		const hydrationInstance = getCurrentInstance();
+		const root = ref(null);
 		checkHydratedRoot("span", "ui-skeleton");
 		/** The values the styles' :host() and :state() rules test. */
 		const hostState = computed(() => [
@@ -125,6 +127,34 @@ var UiSkeleton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			checkedProps.value.shape != null && `shape=${encodeURIComponent(checkedProps.value.shape)}`,
 			checkedProps.value.animated && "animated"
 		].filter(Boolean).join(" "));
+		const dispatch = createDispatch(root);
+		useComponentHost(() => import("@threadlabs/looma/components/ui-skeleton/ui-skeleton.js"), {
+			root,
+			module: true,
+			dispatch,
+			controllerSource: {
+				specifier: "../components/ui-skeleton/ui-skeleton.js",
+				definition: "./components/ui-skeleton/ui-skeleton.html"
+			},
+			props: checkedProps,
+			inputs: propInputs,
+			inputTracking,
+			propInputs: (name) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: [
+				"animated",
+				"height",
+				"shape",
+				"width"
+			],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name)
+		});
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("span", mergeProps({
 				class: "ui-skeleton",
@@ -139,13 +169,15 @@ var UiSkeleton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"data-ui-skeleton-prop-height": unref(reflectedProp)("height", "height", checkedProps.value.height, void 0, false),
 				"data-ui-skeleton-prop-shape": unref(reflectedProp)("shape", "shape", checkedProps.value.shape, void 0, false),
 				"data-ui-skeleton-prop-width": unref(reflectedProp)("width", "width", checkedProps.value.width, void 0, false),
-				"data-ui-skeleton-state": hostState.value || void 0
+				"data-ui-skeleton-state": hostState.value || void 0,
+				ref_key: "root",
+				ref: root
 			}), null, 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ee40410c"]]);
+}), [["__scopeId", "data-v-908ae327"]]);
 //#endregion
 export { UiSkeleton_default as t };