origam 2.23.1 → 2.24.0

package/dist/src/assets/css/tokens/dark.css

@@ -2486,13 +2486,20 @@
   --origam-grid---justify-items: stretch;
   --origam-grid---align-content: normal;
   --origam-grid---justify-content: normal;
-  --origam-skeleton---background-color: var(--origam-color__surface---overlay);
+  --origam-skeleton---background-color: color-mix(in srgb, currentColor 13%, transparent);
+  --origam-skeleton---highlight-color: color-mix(in srgb, currentColor 6.5%, transparent);
   --origam-skeleton---border-radius: var(--origam-radius---sm);
   --origam-skeleton---border-radius-circular: var(--origam-radius---full);
-  --origam-skeleton---animation-duration: var(--origam-motion__duration---xslow);
-  --origam-skeleton---opacity-min: 0.4;
-  --origam-skeleton---opacity-max: 0.8;
-  --origam-skeleton---text-height: 1.2em;
+  --origam-skeleton---border-radius-pill: var(--origam-radius---full);
+  --origam-skeleton---animation-duration: var(--origam-motion__duration---loop);
+  --origam-skeleton---animation-iterations: 6;
+  --origam-skeleton---opacity-min: 0.55;
+  --origam-skeleton---opacity-max: 1;
+  --origam-skeleton---text-height: 0.7em;
+  --origam-skeleton---text-margin-block: 0.35em;
+  --origam-skeleton---circular-size: 36px;
+  --origam-skeleton---pill-height: 1.5em;
+  --origam-skeleton---pill-width: 4em;
   --origam-skeleton---gap: var(--origam-space---3);
   --origam-kbd---background-color: var(--origam-color__surface---overlay);
   --origam-kbd---color: var(--origam-color__text---primary);
@@ -5498,13 +5505,20 @@
     --origam-grid---justify-items: stretch;
     --origam-grid---align-content: normal;
     --origam-grid---justify-content: normal;
-    --origam-skeleton---background-color: var(--origam-color__surface---overlay);
+    --origam-skeleton---background-color: color-mix(in srgb, currentColor 13%, transparent);
+    --origam-skeleton---highlight-color: color-mix(in srgb, currentColor 6.5%, transparent);
     --origam-skeleton---border-radius: var(--origam-radius---sm);
     --origam-skeleton---border-radius-circular: var(--origam-radius---full);
-    --origam-skeleton---animation-duration: var(--origam-motion__duration---xslow);
-    --origam-skeleton---opacity-min: 0.4;
-    --origam-skeleton---opacity-max: 0.8;
-    --origam-skeleton---text-height: 1.2em;
+    --origam-skeleton---border-radius-pill: var(--origam-radius---full);
+    --origam-skeleton---animation-duration: var(--origam-motion__duration---loop);
+    --origam-skeleton---animation-iterations: 6;
+    --origam-skeleton---opacity-min: 0.55;
+    --origam-skeleton---opacity-max: 1;
+    --origam-skeleton---text-height: 0.7em;
+    --origam-skeleton---text-margin-block: 0.35em;
+    --origam-skeleton---circular-size: 36px;
+    --origam-skeleton---pill-height: 1.5em;
+    --origam-skeleton---pill-width: 4em;
     --origam-skeleton---gap: var(--origam-space---3);
     --origam-kbd---background-color: var(--origam-color__surface---overlay);
     --origam-kbd---color: var(--origam-color__text---primary);

package/dist/src/assets/css/tokens/light.css

@@ -2400,13 +2400,20 @@
   --origam-grid---justify-items: stretch;
   --origam-grid---align-content: normal;
   --origam-grid---justify-content: normal;
-  --origam-skeleton---background-color: var(--origam-color__surface---overlay);
+  --origam-skeleton---background-color: color-mix(in srgb, currentColor 10%, transparent);
+  --origam-skeleton---highlight-color: color-mix(in srgb, currentColor 5%, transparent);
   --origam-skeleton---border-radius: var(--origam-radius---sm);
   --origam-skeleton---border-radius-circular: var(--origam-radius---full);
-  --origam-skeleton---animation-duration: var(--origam-motion__duration---xslow);
-  --origam-skeleton---opacity-min: 0.4;
-  --origam-skeleton---opacity-max: 0.8;
-  --origam-skeleton---text-height: 1.2em;
+  --origam-skeleton---border-radius-pill: var(--origam-radius---full);
+  --origam-skeleton---animation-duration: var(--origam-motion__duration---loop);
+  --origam-skeleton---animation-iterations: 6;
+  --origam-skeleton---opacity-min: 0.55;
+  --origam-skeleton---opacity-max: 1;
+  --origam-skeleton---text-height: 0.7em;
+  --origam-skeleton---text-margin-block: 0.35em;
+  --origam-skeleton---circular-size: 36px;
+  --origam-skeleton---pill-height: 1.5em;
+  --origam-skeleton---pill-width: 4em;
   --origam-skeleton---gap: var(--origam-space---3);
   --origam-kbd---background-color: var(--origam-color__surface---overlay);
   --origam-kbd---color: var(--origam-color__text---primary);

package/dist/src/assets/css/tokens/origam-utilities.css

@@ -153,3 +153,87 @@
 .origam--backdrop-blur-md { backdrop-filter: blur(var(--origam-blur---md)); -webkit-backdrop-filter: blur(var(--origam-blur---md)); }
 .origam--backdrop-blur-lg { backdrop-filter: blur(var(--origam-blur---lg)); -webkit-backdrop-filter: blur(var(--origam-blur---lg)); }
 .origam--backdrop-blur-xl { backdrop-filter: blur(var(--origam-blur---xl)); -webkit-backdrop-filter: blur(var(--origam-blur---xl)); }
+
+/* --- Skeleton (host placeholder state) ------------------- */
+/*                                                            */
+/* The shared mechanism that lets ANY element paint ITSELF as  */
+/* a loading placeholder — no node is added, no component is   */
+/* mounted. Put `.origam--skeleton` on the element; its         */
+/* geometry (size, radius) stays whatever the element already   */
+/* has, so the placeholder keeps the real silhouette.           */
+/*                                                            */
+/*   fill      ::after    colour = --origam-skeleton---background-color */
+/*   shimmer   ::before   only with `.origam--skeleton-wave`    */
+/*   content   hidden: glyphs via text-fill, children via       */
+/*             visibility — the layout box is untouched         */
+/*                                                            */
+/* ⛔ CONSTRAINTS, read before using it on a new host:          */
+/*  - a pseudo-element is not rendered on replaced elements:    */
+/*    `<input>`, `<textarea>`, `<select>`, images: can NOT be    */
+/*    a host (measured: the ::after never paints on <input>,    */
+/*    <textarea> or <select>, although getComputedStyle still   */
+/*    reports it).                                              */
+/*    Put the class on the wrapper that draws the field.        */
+/*  - the host's own ::before / ::after are taken over.         */
+/*  - the host becomes `position: relative` when it is static   */
+/*    (a component's own scoped `position` still wins).         */
+/*  - it is purely visual: the host still has to carry          */
+/*    `aria-busy="true"` (and `aria-disabled` on a control).    */
+/*                                                            */
+/* The fill is currentColor mixed with transparent, so it       */
+/* follows themes, modes and surfaces with no extra token.      */
+/* Motion: pulse by default, capped by                          */
+/* --origam-skeleton---animation-iterations (WCAG 2.2.2),       */
+/* and switched off under prefers-reduced-motion.               */
+.origam--skeleton {
+  position: relative;
+  -webkit-text-fill-color: transparent;
+  text-shadow: none;
+  pointer-events: none;
+  user-select: none;
+}
+.origam--skeleton > * { visibility: hidden; }
+.origam--skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--origam-skeleton---background-color);
+  animation: origam-skeleton-pulse var(--origam-skeleton---animation-duration) ease-in-out var(--origam-skeleton---animation-iterations);
+}
+.origam--skeleton-none::after { animation: none; }
+.origam--skeleton-wave { overflow: hidden; }
+.origam--skeleton-wave::after { animation: none; }
+.origam--skeleton-wave::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(105deg, transparent 35%, var(--origam-skeleton---highlight-color) 50%, transparent 65%);
+  transform: translateX(-100%);
+  animation: origam-skeleton-wave var(--origam-skeleton---animation-duration) ease-in-out var(--origam-skeleton---animation-iterations);
+}
+
+/* A group is ONE animation clock: the container pulses, its    */
+/* blocks do not, so blocks mounted at different moments still  */
+/* breathe together.                                            */
+.origam--skeleton-group-pulse {
+  animation: origam-skeleton-pulse var(--origam-skeleton---animation-duration) ease-in-out var(--origam-skeleton---animation-iterations);
+}
+.origam--skeleton-group-pulse .origam--skeleton::after { animation: none; }
+
+@keyframes origam-skeleton-pulse {
+  0%, 100% { opacity: var(--origam-skeleton---opacity-max); }
+  50% { opacity: var(--origam-skeleton---opacity-min); }
+}
+@keyframes origam-skeleton-wave {
+  to { transform: translateX(100%); }
+}
+
+/* Last on purpose: same specificity as the rules above, so      */
+/* source order makes this one win (#1074).                      */
+@media (prefers-reduced-motion: reduce) {
+  .origam--skeleton::after,
+  .origam--skeleton::before,
+  .origam--skeleton-group-pulse { animation: none; }
+}

package/dist/src/assets/css/tokens/primitive.css

@@ -139,6 +139,7 @@
   --origam-motion__duration---medium: 200ms;
   --origam-motion__duration---slow: 280ms;
   --origam-motion__duration---xslow: 400ms;
+  --origam-motion__duration---loop: 1600ms;
   --origam-motion__easing---standard: cubic-bezier(0.4, 0, 0.2, 1);
   --origam-motion__easing---decelerate: cubic-bezier(0, 0, 0.2, 1);
   --origam-motion__easing---accelerate: cubic-bezier(0.4, 0, 1, 1);

package/dist/src/assets/scss/tokens/_dark.scss

@@ -2486,13 +2486,20 @@
   --origam-grid---justify-items: stretch;
   --origam-grid---align-content: normal;
   --origam-grid---justify-content: normal;
-  --origam-skeleton---background-color: var(--origam-color__surface---overlay);
+  --origam-skeleton---background-color: color-mix(in srgb, currentColor 13%, transparent);
+  --origam-skeleton---highlight-color: color-mix(in srgb, currentColor 6.5%, transparent);
   --origam-skeleton---border-radius: var(--origam-radius---sm);
   --origam-skeleton---border-radius-circular: var(--origam-radius---full);
-  --origam-skeleton---animation-duration: var(--origam-motion__duration---xslow);
-  --origam-skeleton---opacity-min: 0.4;
-  --origam-skeleton---opacity-max: 0.8;
-  --origam-skeleton---text-height: 1.2em;
+  --origam-skeleton---border-radius-pill: var(--origam-radius---full);
+  --origam-skeleton---animation-duration: var(--origam-motion__duration---loop);
+  --origam-skeleton---animation-iterations: 6;
+  --origam-skeleton---opacity-min: 0.55;
+  --origam-skeleton---opacity-max: 1;
+  --origam-skeleton---text-height: 0.7em;
+  --origam-skeleton---text-margin-block: 0.35em;
+  --origam-skeleton---circular-size: 36px;
+  --origam-skeleton---pill-height: 1.5em;
+  --origam-skeleton---pill-width: 4em;
   --origam-skeleton---gap: var(--origam-space---3);
   --origam-kbd---background-color: var(--origam-color__surface---overlay);
   --origam-kbd---color: var(--origam-color__text---primary);
@@ -5498,13 +5505,20 @@
     --origam-grid---justify-items: stretch;
     --origam-grid---align-content: normal;
     --origam-grid---justify-content: normal;
-    --origam-skeleton---background-color: var(--origam-color__surface---overlay);
+    --origam-skeleton---background-color: color-mix(in srgb, currentColor 13%, transparent);
+    --origam-skeleton---highlight-color: color-mix(in srgb, currentColor 6.5%, transparent);
     --origam-skeleton---border-radius: var(--origam-radius---sm);
     --origam-skeleton---border-radius-circular: var(--origam-radius---full);
-    --origam-skeleton---animation-duration: var(--origam-motion__duration---xslow);
-    --origam-skeleton---opacity-min: 0.4;
-    --origam-skeleton---opacity-max: 0.8;
-    --origam-skeleton---text-height: 1.2em;
+    --origam-skeleton---border-radius-pill: var(--origam-radius---full);
+    --origam-skeleton---animation-duration: var(--origam-motion__duration---loop);
+    --origam-skeleton---animation-iterations: 6;
+    --origam-skeleton---opacity-min: 0.55;
+    --origam-skeleton---opacity-max: 1;
+    --origam-skeleton---text-height: 0.7em;
+    --origam-skeleton---text-margin-block: 0.35em;
+    --origam-skeleton---circular-size: 36px;
+    --origam-skeleton---pill-height: 1.5em;
+    --origam-skeleton---pill-width: 4em;
     --origam-skeleton---gap: var(--origam-space---3);
     --origam-kbd---background-color: var(--origam-color__surface---overlay);
     --origam-kbd---color: var(--origam-color__text---primary);

package/dist/src/assets/scss/tokens/_light.scss

@@ -2400,13 +2400,20 @@
   --origam-grid---justify-items: stretch;
   --origam-grid---align-content: normal;
   --origam-grid---justify-content: normal;
-  --origam-skeleton---background-color: var(--origam-color__surface---overlay);
+  --origam-skeleton---background-color: color-mix(in srgb, currentColor 10%, transparent);
+  --origam-skeleton---highlight-color: color-mix(in srgb, currentColor 5%, transparent);
   --origam-skeleton---border-radius: var(--origam-radius---sm);
   --origam-skeleton---border-radius-circular: var(--origam-radius---full);
-  --origam-skeleton---animation-duration: var(--origam-motion__duration---xslow);
-  --origam-skeleton---opacity-min: 0.4;
-  --origam-skeleton---opacity-max: 0.8;
-  --origam-skeleton---text-height: 1.2em;
+  --origam-skeleton---border-radius-pill: var(--origam-radius---full);
+  --origam-skeleton---animation-duration: var(--origam-motion__duration---loop);
+  --origam-skeleton---animation-iterations: 6;
+  --origam-skeleton---opacity-min: 0.55;
+  --origam-skeleton---opacity-max: 1;
+  --origam-skeleton---text-height: 0.7em;
+  --origam-skeleton---text-margin-block: 0.35em;
+  --origam-skeleton---circular-size: 36px;
+  --origam-skeleton---pill-height: 1.5em;
+  --origam-skeleton---pill-width: 4em;
   --origam-skeleton---gap: var(--origam-space---3);
   --origam-kbd---background-color: var(--origam-color__surface---overlay);
   --origam-kbd---color: var(--origam-color__text---primary);

package/dist/src/assets/scss/tokens/_origam-utilities.scss

@@ -153,3 +153,87 @@
 .origam--backdrop-blur-md { backdrop-filter: blur(var(--origam-blur---md)); -webkit-backdrop-filter: blur(var(--origam-blur---md)); }
 .origam--backdrop-blur-lg { backdrop-filter: blur(var(--origam-blur---lg)); -webkit-backdrop-filter: blur(var(--origam-blur---lg)); }
 .origam--backdrop-blur-xl { backdrop-filter: blur(var(--origam-blur---xl)); -webkit-backdrop-filter: blur(var(--origam-blur---xl)); }
+
+/* --- Skeleton (host placeholder state) ------------------- */
+/*                                                            */
+/* The shared mechanism that lets ANY element paint ITSELF as  */
+/* a loading placeholder — no node is added, no component is   */
+/* mounted. Put `.origam--skeleton` on the element; its         */
+/* geometry (size, radius) stays whatever the element already   */
+/* has, so the placeholder keeps the real silhouette.           */
+/*                                                            */
+/*   fill      ::after    colour = --origam-skeleton---background-color */
+/*   shimmer   ::before   only with `.origam--skeleton-wave`    */
+/*   content   hidden: glyphs via text-fill, children via       */
+/*             visibility — the layout box is untouched         */
+/*                                                            */
+/* ⛔ CONSTRAINTS, read before using it on a new host:          */
+/*  - a pseudo-element is not rendered on replaced elements:    */
+/*    `<input>`, `<textarea>`, `<select>`, images: can NOT be    */
+/*    a host (measured: the ::after never paints on <input>,    */
+/*    <textarea> or <select>, although getComputedStyle still   */
+/*    reports it).                                              */
+/*    Put the class on the wrapper that draws the field.        */
+/*  - the host's own ::before / ::after are taken over.         */
+/*  - the host becomes `position: relative` when it is static   */
+/*    (a component's own scoped `position` still wins).         */
+/*  - it is purely visual: the host still has to carry          */
+/*    `aria-busy="true"` (and `aria-disabled` on a control).    */
+/*                                                            */
+/* The fill is currentColor mixed with transparent, so it       */
+/* follows themes, modes and surfaces with no extra token.      */
+/* Motion: pulse by default, capped by                          */
+/* --origam-skeleton---animation-iterations (WCAG 2.2.2),       */
+/* and switched off under prefers-reduced-motion.               */
+.origam--skeleton {
+  position: relative;
+  -webkit-text-fill-color: transparent;
+  text-shadow: none;
+  pointer-events: none;
+  user-select: none;
+}
+.origam--skeleton > * { visibility: hidden; }
+.origam--skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--origam-skeleton---background-color);
+  animation: origam-skeleton-pulse var(--origam-skeleton---animation-duration) ease-in-out var(--origam-skeleton---animation-iterations);
+}
+.origam--skeleton-none::after { animation: none; }
+.origam--skeleton-wave { overflow: hidden; }
+.origam--skeleton-wave::after { animation: none; }
+.origam--skeleton-wave::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(105deg, transparent 35%, var(--origam-skeleton---highlight-color) 50%, transparent 65%);
+  transform: translateX(-100%);
+  animation: origam-skeleton-wave var(--origam-skeleton---animation-duration) ease-in-out var(--origam-skeleton---animation-iterations);
+}
+
+/* A group is ONE animation clock: the container pulses, its    */
+/* blocks do not, so blocks mounted at different moments still  */
+/* breathe together.                                            */
+.origam--skeleton-group-pulse {
+  animation: origam-skeleton-pulse var(--origam-skeleton---animation-duration) ease-in-out var(--origam-skeleton---animation-iterations);
+}
+.origam--skeleton-group-pulse .origam--skeleton::after { animation: none; }
+
+@keyframes origam-skeleton-pulse {
+  0%, 100% { opacity: var(--origam-skeleton---opacity-max); }
+  50% { opacity: var(--origam-skeleton---opacity-min); }
+}
+@keyframes origam-skeleton-wave {
+  to { transform: translateX(100%); }
+}
+
+/* Last on purpose: same specificity as the rules above, so      */
+/* source order makes this one win (#1074).                      */
+@media (prefers-reduced-motion: reduce) {
+  .origam--skeleton::after,
+  .origam--skeleton::before,
+  .origam--skeleton-group-pulse { animation: none; }
+}

package/dist/src/assets/scss/tokens/_primitive.scss

@@ -139,6 +139,7 @@
   --origam-motion__duration---medium: 200ms;
   --origam-motion__duration---slow: 280ms;
   --origam-motion__duration---xslow: 400ms;
+  --origam-motion__duration---loop: 1600ms;
   --origam-motion__easing---standard: cubic-bezier(0.4, 0, 0.2, 1);
   --origam-motion__easing---decelerate: cubic-bezier(0, 0, 0.2, 1);
   --origam-motion__easing---accelerate: cubic-bezier(0.4, 0, 1, 1);

package/dist/src/components/Breadcrumb/OrigamBreadcrumbItem.vue

@@ -5,7 +5,7 @@
 			v-contrast
 			:aria-current="isActive ? 'page' : undefined"
 			:class="breadcrumbItemClasses"
-			:href="link.href"
+			:href="link.href.value"
 			:style="breadcrumbItemStyles"
 			@click="link.navigate"
 			@mouseenter="handleMouseenter"