Add harness workflow and Material showcase design system

packages/ui/src/lib/motion.ts

@@ -34,6 +34,12 @@ export const motionRecipes = {
   overlayExit: "motion-overlay-exit",
   exitFade: "motion-exit-fade",
   exitDrop: "motion-exit-drop",
+  float: "motion-float",
+  floatDelayed: "motion-float-delayed",
+  floatHero: "motion-float-hero",
+  breathe: "motion-breathe",
+  drift: "motion-drift",
+  glimmer: "motion-glimmer",
   ring: "motion-ring"
 } as const;
 

packages/ui/src/lib/skin.test.ts

@@ -9,16 +9,16 @@ describe("skin contract", () => {
   });
 
   it("sets the document root skin when no target element is provided", () => {
-    setSkin("glass");
+    setSkin("material");
 
-    expect(document.documentElement.dataset.skin).toBe("glass");
+    expect(document.documentElement.dataset.skin).toBe("material");
   });
 
   it("sets the provided target element instead of the document root", () => {
     const target = document.createElement("div");
 
-    setSkin("pixel", target);
+    setSkin("material", target);
 
-    expect(target.dataset.skin).toBe("pixel");
+    expect(target.dataset.skin).toBe("material");
   });
 });

packages/ui/src/lib/skin.ts

@@ -1,20 +1,12 @@
-export const skinNames = ["minimal", "glass", "pixel"] as const;
+export const skinNames = ["material"] as const;
 export type SkinName = (typeof skinNames)[number];
 
-export const defaultSkin: SkinName = "minimal";
+export const defaultSkin: SkinName = "material";
 
 export const skinDetails = {
-  minimal: {
-    label: "Minimal",
-    note: "Restrained surfaces and low-ornament defaults"
-  },
-  glass: {
-    label: "Glass",
-    note: "Translucent layers, brighter edges, and blurred panels"
-  },
-  pixel: {
-    label: "Pixel",
-    note: "Hard edges, crisp borders, and stepped shadows"
+  material: {
+    label: "Material",
+    note: "One tonal, rounded, dynamic-color-first component language"
   }
 } as const satisfies Record<SkinName, { label: string; note: string }>;