@threadlabs/looma 0.39.0 → 0.39.1

package/docs/catalog.json

@@ -458,7 +458,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.39.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/package.json

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

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 };

package/vue/components.css

@@ -10486,13 +10486,26 @@ dialog:where([data-hn-ui-search-shell]) {
   syntax: "*";
   inherits: false;
 }
-@keyframes ui-skeleton-pulse-ee40410c {
-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-908ae327 {
+to {
+    background-position: calc(100vw / var(--_ui-skeleton-paint-scale) - var(--_ui-skeleton-paint-x))
+      0;
 }
 }
 @scope (.ui-skeleton) to ([data-hn]) {
 :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;
@@ -10529,18 +10542,31 @@ dialog:where([data-hn-ui-search-shell]) {
     border-radius: var(--ui-radius-md);
 }
 :scope[data-ui-skeleton-state~="animated"]::before {
-    animation: ui-skeleton-pulse-ee40410c 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-908ae327 3s linear infinite;
 }
 @media (prefers-reduced-motion: reduce) {
 :scope[data-ui-skeleton-state~="animated"]::before {
       animation: none;
+      background-image: none;
 }
 }
 @media (forced-colors: active) {
 :scope::before {
       background: CanvasText;
       opacity: 0.2;
+}
+:scope[data-ui-skeleton-state~="animated"]::before {
       animation: none;
+      background-image: none;
 }
 }
 :scope[hidden] {