@twentyfirstmedia/elements 0.1.1 → 0.2.1

package/dist/vscode.html-custom-data.json

@@ -32,6 +32,14 @@
         {
           "name": "tokens",
           "description": "Theme colours for everything inside, like a shadcn theme: shadcn variable names without the dashes (`{ primary: \"#2563eb\", ring: \"#2563eb\" }`), or `{ light, dark, radius }` for values per mode. For a fixed theme, CSS is simpler (see `themeCss`); this is for runtime brands. (ThemeValues | ThemeInput)"
+        },
+        {
+          "name": "surface",
+          "description": "`\"glass\"` turns every top-level surface (Panel, Card, Dock, map legend and controls) and every floating layer (menus, popovers, dialogs, drawers) inside into translucent glass, for UI that floats over a map, a 3D scene, video or photos (sets `data-surface`). Single surfaces take `surface=\"glass\"` themselves; `surface=\"solid\"` on one opts it out. (Surface)"
+        },
+        {
+          "name": "motion",
+          "description": "Motion level for everything inside (sets `data-motion`): `\"standard\"` (default), `\"expressive\"` for orchestrated page entrances, or `\"off\"`, e.g. for a setting in your app. The reader's reduced-motion setting always turns motion off. (Motion)"
         }
       ],
       "references": [
@@ -285,11 +293,15 @@
         },
         {
           "name": "height",
-          "description": "(number)"
+          "description": "Height in px (default 320) or any CSS length, e.g. \"100%\" to fill a FloatingLayout. (number | string)"
         },
         {
           "name": "label",
           "description": "(string)"
+        },
+        {
+          "name": "surface",
+          "description": "`\"glass\"`: the legend, controls and popup float as glass over the map (for a live map in `background`). (Surface)"
         }
       ],
       "references": [
@@ -3207,6 +3219,10 @@
         {
           "name": "eyebrow",
           "description": "(ReactNode)"
+        },
+        {
+          "name": "surface",
+          "description": "`\"glass\"`: translucent glass over what is behind (maps, 3D, video, photos); `\"solid\"` opts out inside a glass `UIProvider`. (Surface)"
         }
       ],
       "references": [
@@ -3294,6 +3310,10 @@
         {
           "name": "action",
           "description": "(ReactNode)"
+        },
+        {
+          "name": "surface",
+          "description": "`\"glass\"`: translucent glass over what is behind (maps, 3D, video, photos); `\"solid\"` opts out inside a glass `UIProvider`. (Surface)"
         }
       ],
       "references": [
@@ -3341,7 +3361,12 @@
         },
         {
           "name": "delay",
-          "description": "(number)"
+          "description": "Extra delay before the first child, in ms. (number)"
+        },
+        {
+          "name": "reveal",
+          "description": "Below the fold, wait until the group scrolls into view (default true). (boolean)",
+          "valueSet": "v"
         }
       ],
       "references": [
@@ -4065,6 +4090,11 @@
         {
           "name": "actions",
           "description": "(ReactNode[])"
+        },
+        {
+          "name": "open",
+          "description": "Optional: with `open` the component stays mounted while it animates out; without it, render it only while open. (boolean)",
+          "valueSet": "v"
         }
       ],
       "references": [
@@ -7050,6 +7080,10 @@
         {
           "name": "label",
           "description": "(string)"
+        },
+        {
+          "name": "surface",
+          "description": "`\"glass\"`: translucent glass over what is behind (maps, 3D, video, photos); `\"solid\"` opts out inside a glass `UIProvider`. (Surface)"
         }
       ],
       "references": [
@@ -7059,6 +7093,85 @@
         }
       ]
     },
+    {
+      "name": "tf-floating-layout",
+      "description": "UI floating over a full-bleed background: a map, a 3D scene, a video or a photo.",
+      "attributes": [
+        {
+          "name": "background",
+          "description": "What the UI floats over, filling the layout: a map, a 3D canvas, a video, a photo. (ReactNode)"
+        },
+        {
+          "name": "top",
+          "description": "Bar along the top edge (search, filters, title). (ReactNode)"
+        },
+        {
+          "name": "start",
+          "description": "Column on the start side (layers, lists, settings). (ReactNode)"
+        },
+        {
+          "name": "end",
+          "description": "Column on the end side (details of the selected thing). (ReactNode)"
+        },
+        {
+          "name": "bottom",
+          "description": "Bar along the bottom edge (dock, playback, a summary). (ReactNode)"
+        },
+        {
+          "name": "height",
+          "description": "Height of the layout (default 640). Below 720px of width the slots stack: top, start, end, bottom. (number | string)"
+        },
+        {
+          "name": "surface",
+          "description": "Glass for every surface in the slots (default) or solid surfaces. (Surface)"
+        },
+        {
+          "name": "label",
+          "description": "Accessible name of the region. (string)"
+        }
+      ],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://ui.twentyfirst.media/halo/components/FloatingLayout/"
+        }
+      ]
+    },
+    {
+      "name": "tf-ambient",
+      "description": "A calm, living background for glass UI: soft colour fields from the kit (pastels in Halo, a faint aurora in Pro) that drift slowly, a photo or video under a scrim, or your own layer.",
+      "attributes": [
+        {
+          "name": "colors",
+          "description": "Colours of the soft fields (any CSS colour); default the kit's `--ambient-1…4`. (string[])"
+        },
+        {
+          "name": "src",
+          "description": "A photo (or, with `video`, a video) instead of the fields, under a scrim that keeps it calm. (string)"
+        },
+        {
+          "name": "video",
+          "description": "Treat `src` as a video (muted, looping, still with motion off). (boolean)",
+          "valueSet": "v"
+        },
+        {
+          "name": "animate",
+          "description": "Let the fields drift slowly (default true). Still with motion off; paused off screen. (boolean)",
+          "valueSet": "v"
+        },
+        {
+          "name": "fixed",
+          "description": "Cover the window behind the page instead of the nearest container. (boolean)",
+          "valueSet": "v"
+        }
+      ],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://ui.twentyfirst.media/halo/components/Ambient/"
+        }
+      ]
+    },
     {
       "name": "tf-app-shell",
       "description": "The AppShell component as a custom element.",
@@ -7410,6 +7523,11 @@
           "description": "(boolean)",
           "valueSet": "v"
         },
+        {
+          "name": "open",
+          "description": "Optional: with `open` the component stays mounted while it animates out; without it, render it only while open. (boolean)",
+          "valueSet": "v"
+        },
         {
           "name": "side",
           "description": "Edge the sheet slides in from (default right). (\"right\" | \"left\" | \"top\" | \"bottom\")",
@@ -7461,6 +7579,11 @@
         {
           "name": "empty",
           "description": "Shown when nothing matches (default: \"Nothing matches …\"). (ReactNode)"
+        },
+        {
+          "name": "open",
+          "description": "Optional: with `open` the component stays mounted while it animates out; without it, render it only while open. (boolean)",
+          "valueSet": "v"
         }
       ],
       "references": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twentyfirstmedia/elements",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Every Twentyfirst UI component as a custom element: <tf-button>, <tf-data-table> … for plain HTML, Vue, Svelte, Angular, Astro and server templates.",
   "license": "MIT",
   "author": "Twentyfirst Media (https://twentyfirst.media)",
@@ -54,7 +54,7 @@
     "dist"
   ],
   "devDependencies": {
-    "@twentyfirstmedia/ui-core": "0.1.1",
+    "@twentyfirstmedia/ui-core": "0.2.1",
     "@types/node": "26.6.6",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",