@threadlabs/looma 0.37.5 → 0.37.6

package/docs/catalog.json

@@ -365,6 +365,11 @@
       "package": "@threadlabs/looma",
       "resource": "@threadlabs/looma/components/ui-sidebar/ui-sidebar.html"
     },
+    {
+      "tag": "ui-skeleton",
+      "package": "@threadlabs/looma",
+      "resource": "@threadlabs/looma/components/ui-skeleton/ui-skeleton.html"
+    },
     {
       "tag": "ui-slider",
       "package": "@threadlabs/looma",
@@ -453,7 +458,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.37.5",
+  "version": "0.37.6",
   "groups": [
     {
       "id": "layout",
@@ -20399,6 +20404,169 @@
         }
       ]
     },
+    {
+      "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.",
+      "designTokens": {
+        "sources": [
+          "packages/looma/src/components/ui-skeleton/ui-skeleton.html"
+        ],
+        "component": [
+          {
+            "name": "--ui-skeleton-height",
+            "fallbacks": [
+              "1lh",
+              "auto",
+              "8rem"
+            ]
+          },
+          {
+            "name": "--ui-skeleton-width",
+            "fallbacks": [
+              "100%",
+              "calc(2.5rem + 2 * var(--ui-border-width))"
+            ]
+          }
+        ],
+        "shared": [
+          {
+            "name": "--ui-border-width"
+          },
+          {
+            "name": "--ui-radius-md"
+          },
+          {
+            "name": "--ui-radius-round"
+          },
+          {
+            "name": "--ui-radius-sm"
+          },
+          {
+            "name": "--ui-text-primary"
+          }
+        ]
+      },
+      "attributes": [
+        {
+          "name": "animated",
+          "property": "animated",
+          "description": "Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "height",
+          "property": "height",
+          "description": "Block size as a CSS length. Empty reserves one line for text, a square for circles, or 8rem for rectangles. Set only width to keep a circle square.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "shape",
+          "property": "shape",
+          "description": "The content's silhouette. text reserves one inherited line box with a shorter bar inside it; circle matches a medium Avatar; rectangle reserves a media area.",
+          "type": "keyword",
+          "default": "text",
+          "options": [
+            "text",
+            "circle",
+            "rectangle"
+          ]
+        },
+        {
+          "name": "width",
+          "property": "width",
+          "description": "Inline size as a CSS length or percentage, constrained to the container. Empty fills the available width for text and rectangles, or matches a medium Avatar's outer size for circles.",
+          "type": "string",
+          "default": ""
+        }
+      ],
+      "properties": [
+        {
+          "name": "animated",
+          "description": "Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "height",
+          "description": "Block size as a CSS length. Empty reserves one line for text, a square for circles, or 8rem for rectangles. Set only width to keep a circle square.",
+          "type": "string",
+          "default": ""
+        },
+        {
+          "name": "shape",
+          "description": "The content's silhouette. text reserves one inherited line box with a shorter bar inside it; circle matches a medium Avatar; rectangle reserves a media area.",
+          "type": "\"text\" | \"circle\" | \"rectangle\"",
+          "default": "text",
+          "options": [
+            "text",
+            "circle",
+            "rectangle"
+          ]
+        },
+        {
+          "name": "width",
+          "description": "Inline size as a CSS length or percentage, constrained to the container. Empty fills the available width for text and rectangles, or matches a medium Avatar's outer size for circles.",
+          "type": "string",
+          "default": ""
+        }
+      ],
+      "events": [],
+      "slots": [],
+      "group": "display",
+      "id": "@threadlabs/looma/ui-skeleton",
+      "title": "Skeleton",
+      "resource": "@threadlabs/looma/components/ui-skeleton/ui-skeleton.html",
+      "targets": [
+        "html-next",
+        "vue"
+      ],
+      "examples": [
+        {
+          "id": "@threadlabs/looma/ui-skeleton/01-text",
+          "name": "01-text",
+          "title": "Text lines",
+          "description": "Each placeholder reserves a whole text line. Vary the widths to suggest the content without pretending to know its words.",
+          "markup": "<ui-stack gap=\"none\">\n  <ui-skeleton></ui-skeleton>\n  <ui-skeleton width=\"85%\"></ui-skeleton>\n  <ui-skeleton width=\"60%\"></ui-skeleton>\n</ui-stack>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        },
+        {
+          "id": "@threadlabs/looma/ui-skeleton/02-shapes",
+          "name": "02-shapes",
+          "title": "Avatar and media shapes",
+          "description": "The default circle matches a medium Avatar. Supply dimensions for a thumbnail or a larger media area; narrow containers constrain the width.",
+          "markup": "<ui-stack gap=\"m\">\n  <ui-cluster gap=\"m\">\n    <ui-skeleton shape=\"circle\"></ui-skeleton>\n    <ui-skeleton shape=\"circle\" width=\"1.75rem\"></ui-skeleton>\n    <ui-skeleton shape=\"rectangle\" width=\"6rem\" height=\"2.5rem\"></ui-skeleton>\n  </ui-cluster>\n  <ui-skeleton shape=\"rectangle\"></ui-skeleton>\n</ui-stack>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        },
+        {
+          "id": "@threadlabs/looma/ui-skeleton/03-loading-card",
+          "name": "03-loading-card",
+          "title": "Loading a profile",
+          "description": "One status describes the work; the section stays busy until the application replaces its decorative placeholders. Compare the loaded card's avatar and text metrics.",
+          "markup": "<ui-stack gap=\"m\">\n  <ui-status-message kind=\"loading\">Loading a profile…</ui-status-message>\n  <ui-grid>\n    <ui-card as=\"section\" aria-label=\"Profile\" aria-busy=\"true\">\n      <ui-cluster gap=\"s\">\n        <ui-skeleton shape=\"circle\"></ui-skeleton>\n        <ui-stack fill gap=\"none\">\n          <ui-skeleton width=\"65%\"></ui-skeleton>\n          <ui-skeleton width=\"45%\"></ui-skeleton>\n        </ui-stack>\n      </ui-cluster>\n      <ui-stack gap=\"none\">\n        <ui-skeleton></ui-skeleton>\n        <ui-skeleton width=\"80%\"></ui-skeleton>\n      </ui-stack>\n    </ui-card>\n    <ui-card as=\"section\" aria-label=\"Loaded profile\">\n      <ui-cluster gap=\"s\">\n        <ui-avatar name=\"Ada Lovelace\" decorative></ui-avatar>\n        <ui-stack fill gap=\"none\">\n          <ui-text weight=\"semibold\">Ada Lovelace</ui-text>\n          <ui-text tone=\"secondary\">Mathematician</ui-text>\n        </ui-stack>\n      </ui-cluster>\n      <ui-text>Notes on an analytical engine and the possibilities of computation.</ui-text>\n    </ui-card>\n  </ui-grid>\n</ui-stack>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        },
+        {
+          "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>",
+          "resizable": false,
+          "bindings": "",
+          "frameworks": {}
+        }
+      ]
+    },
     {
       "tag": "ui-slider",
       "package": "@threadlabs/looma",

package/package.json

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

package/styles/ui-skeleton.css

@@ -0,0 +1,91 @@
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-skeleton"] { --html-next-scope-owner: "ui-skeleton" !important; }
+}
+@scope ([data-component~="ui-skeleton"]) to ([data-component], [data-slotted]) {
+/* Dimensions belong to this placeholder, never a nested or neighbouring one. */
+    @property --ui-skeleton-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-skeleton-height {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :scope:where([data-component~="ui-skeleton"]) {
+      display: block !important;
+      position: relative;
+      box-sizing: border-box !important;
+      flex: none;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      inline-size: var(--ui-skeleton-width, 100%);
+      block-size: var(--ui-skeleton-height, 1lh);
+      margin: 0 !important;
+      font: inherit;
+    }
+
+    :scope:where([data-component~="ui-skeleton"])::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: var(--ui-radius-sm);
+      background: color-mix(in srgb, var(--ui-text-primary) 16%, transparent);
+    }
+
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=text"]::before {
+      inset-block: 22%;
+    }
+
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=circle"] {
+      inline-size: var(--ui-skeleton-width, calc(2.5rem + 2 * var(--ui-border-width)));
+      block-size: var(--ui-skeleton-height, auto);
+      aspect-ratio: 1;
+    }
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=circle"]::before {
+      border-radius: var(--ui-radius-round);
+    }
+
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=rectangle"] {
+      block-size: var(--ui-skeleton-height, 8rem);
+    }
+    :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="shape=rectangle"]::before {
+      border-radius: var(--ui-radius-md);
+    }
+
+    :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;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :scope:where([data-component~="ui-skeleton"])[data-ui-skeleton-state~="animated"]::before {
+        animation: none;
+      }
+    }
+    @media (forced-colors: active) {
+      :scope:where([data-component~="ui-skeleton"])::before {
+        background: CanvasText;
+        opacity: 0.2;
+        animation: none;
+      }
+    }
+    :scope:where([data-component~="ui-skeleton"])[hidden] {
+      display: none !important;
+    }
+}
+@scope ([data-component~="ui-skeleton"]) to ([data-component]) {
+/* Dimensions belong to this placeholder, never a nested or neighbouring one. */
+    @media (prefers-reduced-motion: reduce) {
+    }
+    @media (forced-colors: active) {
+    }
+}

package/vanilla/UiSkeleton.d.ts

@@ -0,0 +1,26 @@
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
+export interface UiSkeletonEventMap {
+}
+export interface UiSkeletonElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiSkeletonEventMap>(type: K, listener: (this: UiSkeletonElement, event: UiSkeletonEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiSkeletonElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiSkeletonEventMap>(type: K, listener: (this: UiSkeletonElement, event: UiSkeletonEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: UiSkeletonElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface UiSkeletonProps {
+  animated?: boolean | null;
+  height?: string | null;
+  shape?: "text" | "circle" | "rectangle" | null;
+  width?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiSkeleton(props?: UiSkeletonProps): UiSkeletonElement;
+declare global {
+  interface ComponentTagMap {
+    "ui-skeleton": { element: UiSkeletonElement; props: Omit<UiSkeletonProps, "attributes" | "children" | "slots"> };
+  }
+}

package/vanilla/UiSkeleton.js

@@ -0,0 +1,42 @@
+// 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 "../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" } } };
+
+export function createUiSkeleton(options = {}, html) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  if (!element.hasAttribute("aria-hidden")) element.setAttribute("aria-hidden", "true");
+  element.setAttribute("data-component", "ui-skeleton");
+  const v = [null, null, null, null];
+  const B = acceptProps(element, D, S.n, v, componentProps, [], html);
+  const p0 = (r, c, d) => {
+    if (c & 8) {
+      const x0 = v[3];
+      const s0 = toText(x0);
+      if (s0 !== r.v0) r.n.style.setProperty("--ui-skeleton-width", r.v0 = s0);
+    }
+    if (c & 2) {
+      const x1 = v[1];
+      const s1 = toText(x1);
+      if (s1 !== r.v1) r.n.style.setProperty("--ui-skeleton-height", r.v1 = s1);
+    }
+    if (c & 5) {
+      const x2 = hostState(["shape","animated"], [v[2], v[0]]);
+      const s2 = x2;
+      if (s2 !== r.v2) writeAttribute(r.n, "data-ui-skeleton-state", (r.v2 = s2) === "" ? null : s2);
+    }
+  };
+  const R = { n: element, v0: undefined, v1: undefined, v2: undefined };
+  const I = { B };
+  attachGeneratedController(element, S, v, ((c, d) => p0(R, c, d)), undefined, undefined, I);
+  manageProps(I);
+  return element;
+}
+defineComponent("ui-skeleton", createUiSkeleton, ["animated","height","shape","width"]);

package/vanilla/index.js

@@ -71,6 +71,7 @@ export * from "./UiSection.js";
 export * from "./UiSelect.js";
 export * from "./UiSeparator.js";
 export * from "./UiSidebar.js";
+export * from "./UiSkeleton.js";
 export * from "./UiSlider.js";
 export * from "./UiSpinner.js";
 export * from "./UiStack.js";

package/vue/UiSkeleton.d.ts

@@ -0,0 +1,37 @@
+import type { PropType } from 'vue';
+import { type InputBindings } from './props.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    animated: {
+        type: PropType<boolean | null>;
+    };
+    height: {
+        type: PropType<string | null>;
+    };
+    shape: {
+        type: PropType<"text" | "circle" | "rectangle" | null>;
+    };
+    width: {
+        type: PropType<string | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    animated: {
+        type: PropType<boolean | null>;
+    };
+    height: {
+        type: PropType<string | null>;
+    };
+    shape: {
+        type: PropType<"text" | "circle" | "rectangle" | null>;
+    };
+    width: {
+        type: PropType<string | null>;
+    };
+    "\0htmlNextInputStatus": {
+        type: PropType<InputBindings>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiSkeleton.js

@@ -0,0 +1,2 @@
+import { t as UiSkeleton_default } from "./chunks/UiSkeleton.js";
+export { UiSkeleton_default as default };

package/vue/UiSkeleton.vue

@@ -0,0 +1,235 @@
+<!-- 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 type { PropType } from 'vue'
+import { checkHydratedRoot, nativeAttrs, useReflectedProp } from './host'
+import {
+  BINDING_INPUTS_PROP,
+  checkedProp,
+  checkPropInput,
+  type InputBindings,
+  READY_INPUT,
+  requireInputStatus,
+  UNRESOLVED_INPUT,
+  vPropValidity,
+  vuePropInputs,
+} from './props'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    animated: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'animated' },
+      description:
+        'Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.',
+      default: false,
+    },
+    height: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'height' },
+      description:
+        'Block size as a CSS length. Empty reserves one line for text, a square for circles, or 8rem for rectangles. Set only width to keep a circle square.',
+      default: '',
+    },
+    shape: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'shape' },
+      description:
+        'The content\'s silhouette. text reserves one inherited line box with a shorter bar inside it; circle matches a medium Avatar; rectangle reserves a media\n      area.',
+      values: ['text', 'circle', 'rectangle'],
+      default: 'text',
+    },
+    width: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'width' },
+      description:
+        'Inline size as a CSS length or percentage, constrained to the container. Empty fills the available width for text and rectangles, or matches a medium\n      Avatar\'s outer size for circles.',
+      default: '',
+    },
+  },
+} as const
+const props = defineProps({
+  animated: { type: null as unknown as PropType<boolean | null> },
+  height: { type: null as unknown as PropType<string | null> },
+  shape: { type: null as unknown as PropType<'text' | 'circle' | 'rectangle' | null> },
+  width: { type: null as unknown as PropType<string | null> },
+  [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
+})
+const acceptedProps: Record<string, unknown> = {
+  animated: false,
+  height: '',
+  shape: 'text',
+  width: '',
+}
+const inputTracking = vuePropInputs(acceptedProps, {
+  animated: false,
+  height: '',
+  shape: 'text',
+  width: '',
+}, (name, value, source, values) => {
+  switch (name) {
+    case 'animated':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
+    case 'height':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    case 'shape':
+      return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
+    case 'width':
+      return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
+    default:
+      return { ok: false }
+  }
+}, () => {
+  void checkedProps.value
+})
+const propInputs = inputTracking.inputs
+const checkedProps = computed(() => {
+  void inputTracking.version.value
+  return ({
+    animated: propInputs.value<boolean | null>(
+      'animated',
+      props['animated'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
+    height: propInputs.value<string | null>(
+      'height',
+      props['height'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+    shape: propInputs.value<'text' | 'circle' | 'rectangle' | null>(
+      'shape',
+      props['shape'],
+      props[BINDING_INPUTS_PROP],
+    ) as 'text' | 'circle' | 'rectangle',
+    width: propInputs.value<string | null>(
+      'width',
+      props['width'],
+      props[BINDING_INPUTS_PROP],
+    ) as string,
+  })
+})
+const inputStatus = (name: string, handlesError: boolean) => {
+  void checkedProps.value
+  void inputTracking.version.value
+  return requireInputStatus(propInputs.status(name), handlesError)
+}
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+const reflectedProp = useReflectedProp()
+
+checkHydratedRoot('span', 'ui-skeleton')
+
+/** The values the styles' :host() and :state() rules test. */
+const hostState = computed(() =>
+  [
+    checkedProps.value.shape && 'shape',
+    checkedProps.value.shape != null && `shape=${encodeURIComponent(checkedProps.value.shape)}`,
+    checkedProps.value.animated && 'animated',
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <span
+    class="ui-skeleton"
+    aria-hidden="true"
+    v-bind="nativeAttrs($attrs)"
+    data-hn
+    :style="{
+      '--ui-skeleton-width': checkedProps.width ?? undefined,
+      '--ui-skeleton-height': checkedProps.height ?? undefined,
+    }"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-ui-skeleton-prop-animated="reflectedProp('animated', 'animated', checkedProps.animated, undefined, false)"
+    :data-ui-skeleton-prop-height="reflectedProp('height', 'height', checkedProps.height, undefined, false)"
+    :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"
+  ></span>
+</template>
+
+<style scoped>
+/* Dimensions belong to this placeholder, never a nested or neighbouring one. */
+@property --ui-skeleton-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-skeleton-height {
+  syntax: "*";
+  inherits: false;
+}
+@keyframes ui-skeleton-pulse {
+  50% {
+    opacity: 0.45;
+  }
+}
+@scope (.ui-skeleton) to ([data-hn]) {
+  :global(:scope) {
+    display: block !important;
+    position: relative;
+    box-sizing: border-box !important;
+    flex: none;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    inline-size: var(--ui-skeleton-width, 100%);
+    block-size: var(--ui-skeleton-height, 1lh);
+    margin: 0 !important;
+    font: inherit;
+  }
+
+  :global(:scope::before) {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: var(--ui-radius-sm);
+    background: color-mix(in srgb, var(--ui-text-primary) 16%, transparent);
+  }
+
+  :global(:scope[data-ui-skeleton-state~="shape=text"]::before) {
+    inset-block: 22%;
+  }
+
+  :global(:scope[data-ui-skeleton-state~="shape=circle"]) {
+    inline-size: var(--ui-skeleton-width, calc(2.5rem + 2 * var(--ui-border-width)));
+    block-size: var(--ui-skeleton-height, auto);
+    aspect-ratio: 1;
+  }
+  :global(:scope[data-ui-skeleton-state~="shape=circle"]::before) {
+    border-radius: var(--ui-radius-round);
+  }
+
+  :global(:scope[data-ui-skeleton-state~="shape=rectangle"]) {
+    block-size: var(--ui-skeleton-height, 8rem);
+  }
+  :global(:scope[data-ui-skeleton-state~="shape=rectangle"]::before) {
+    border-radius: var(--ui-radius-md);
+  }
+
+  :global(:scope[data-ui-skeleton-state~="animated"]::before) {
+    animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :global(:scope[data-ui-skeleton-state~="animated"]::before) {
+      animation: none;
+    }
+  }
+  @media (forced-colors: active) {
+    :global(:scope::before) {
+      background: CanvasText;
+      opacity: 0.2;
+      animation: none;
+    }
+  }
+  :global(:scope[hidden]) {
+    display: none !important;
+  }
+}
+</style>