@twentyfirstmedia/elements 0.1.0 → 0.2.0

package/dist/custom-elements.json

@@ -55,6 +55,22 @@
                 "text": "ThemeValues | ThemeInput"
               },
               "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."
+            },
+            {
+              "name": "surface",
+              "fieldName": "surface",
+              "type": {
+                "text": "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."
+            },
+            {
+              "name": "motion",
+              "fieldName": "motion",
+              "type": {
+                "text": "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."
             }
           ],
           "members": [
@@ -102,6 +118,24 @@
               },
               "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.",
               "attribute": "tokens"
+            },
+            {
+              "kind": "field",
+              "name": "surface",
+              "type": {
+                "text": "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.",
+              "attribute": "surface"
+            },
+            {
+              "kind": "field",
+              "name": "motion",
+              "type": {
+                "text": "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.",
+              "attribute": "motion"
             }
           ],
           "events": [],
@@ -818,8 +852,9 @@
               "name": "height",
               "fieldName": "height",
               "type": {
-                "text": "number"
-              }
+                "text": "number | string"
+              },
+              "description": "Height in px (default 320) or any CSS length, e.g. \"100%\" to fill a FloatingLayout."
             },
             {
               "name": "label",
@@ -827,6 +862,14 @@
               "type": {
                 "text": "string"
               }
+            },
+            {
+              "name": "surface",
+              "fieldName": "surface",
+              "type": {
+                "text": "Surface"
+              },
+              "description": "`\"glass\"`: the legend, controls and popup float as glass over the map (for a live map in `background`)."
             }
           ],
           "members": [
@@ -897,8 +940,9 @@
               "kind": "field",
               "name": "height",
               "type": {
-                "text": "number"
+                "text": "number | string"
               },
+              "description": "Height in px (default 320) or any CSS length, e.g. \"100%\" to fill a FloatingLayout.",
               "attribute": "height"
             },
             {
@@ -908,6 +952,15 @@
                 "text": "string"
               },
               "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "surface",
+              "type": {
+                "text": "Surface"
+              },
+              "description": "`\"glass\"`: the legend, controls and popup float as glass over the map (for a live map in `background`).",
+              "attribute": "surface"
             }
           ],
           "events": [
@@ -9620,6 +9673,14 @@
               "type": {
                 "text": "ReactNode"
               }
+            },
+            {
+              "name": "surface",
+              "fieldName": "surface",
+              "type": {
+                "text": "Surface"
+              },
+              "description": "`\"glass\"`: translucent glass over what is behind (maps, 3D, video, photos); `\"solid\"` opts out inside a glass `UIProvider`."
             }
           ],
           "members": [
@@ -9686,6 +9747,15 @@
                 "text": "ReactNode"
               },
               "attribute": "eyebrow"
+            },
+            {
+              "kind": "field",
+              "name": "surface",
+              "type": {
+                "text": "Surface"
+              },
+              "description": "`\"glass\"`: translucent glass over what is behind (maps, 3D, video, photos); `\"solid\"` opts out inside a glass `UIProvider`.",
+              "attribute": "surface"
             }
           ],
           "events": [
@@ -9883,6 +9953,14 @@
               "type": {
                 "text": "ReactNode"
               }
+            },
+            {
+              "name": "surface",
+              "fieldName": "surface",
+              "type": {
+                "text": "Surface"
+              },
+              "description": "`\"glass\"`: translucent glass over what is behind (maps, 3D, video, photos); `\"solid\"` opts out inside a glass `UIProvider`."
             }
           ],
           "members": [
@@ -9917,6 +9995,15 @@
                 "text": "ReactNode"
               },
               "attribute": "action"
+            },
+            {
+              "kind": "field",
+              "name": "surface",
+              "type": {
+                "text": "Surface"
+              },
+              "description": "`\"glass\"`: translucent glass over what is behind (maps, 3D, video, photos); `\"solid\"` opts out inside a glass `UIProvider`.",
+              "attribute": "surface"
             }
           ],
           "events": [],
@@ -10034,7 +10121,16 @@
               "fieldName": "delay",
               "type": {
                 "text": "number"
-              }
+              },
+              "description": "Extra delay before the first child, in ms."
+            },
+            {
+              "name": "reveal",
+              "fieldName": "reveal",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Below the fold, wait until the group scrolls into view (default true)."
             }
           ],
           "members": [
@@ -10052,7 +10148,17 @@
               "type": {
                 "text": "number"
               },
+              "description": "Extra delay before the first child, in ms.",
               "attribute": "delay"
+            },
+            {
+              "kind": "field",
+              "name": "reveal",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Below the fold, wait until the group scrolls into view (default true).",
+              "attribute": "reveal"
             }
           ],
           "events": [],
@@ -12098,6 +12204,14 @@
               "type": {
                 "text": "ReactNode[]"
               }
+            },
+            {
+              "name": "open",
+              "fieldName": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Optional: with `open` the component stays mounted while it animates out; without it, render it only while open."
             }
           ],
           "members": [
@@ -12140,6 +12254,15 @@
                 "text": "ReactNode[]"
               },
               "attribute": "actions"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Optional: with `open` the component stays mounted while it animates out; without it, render it only while open.",
+              "attribute": "open"
             }
           ],
           "events": [
@@ -20806,6 +20929,14 @@
               "type": {
                 "text": "string"
               }
+            },
+            {
+              "name": "surface",
+              "fieldName": "surface",
+              "type": {
+                "text": "Surface"
+              },
+              "description": "`\"glass\"`: translucent glass over what is behind (maps, 3D, video, photos); `\"solid\"` opts out inside a glass `UIProvider`."
             }
           ],
           "members": [
@@ -20824,11 +20955,303 @@
                 "text": "string"
               },
               "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "surface",
+              "type": {
+                "text": "Surface"
+              },
+              "description": "`\"glass\"`: translucent glass over what is behind (maps, 3D, video, photos); `\"solid\"` opts out inside a glass `UIProvider`.",
+              "attribute": "surface"
             }
           ],
           "events": [],
           "slots": []
         },
+        {
+          "kind": "class",
+          "customElement": true,
+          "name": "TfFloatingLayoutElement",
+          "tagName": "tf-floating-layout",
+          "description": "UI floating over a full-bleed background: a map, a 3D scene, a video or a photo.",
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "attributes": [
+            {
+              "name": "background",
+              "fieldName": "background",
+              "type": {
+                "text": "ReactNode"
+              },
+              "description": "What the UI floats over, filling the layout: a map, a 3D canvas, a video, a photo."
+            },
+            {
+              "name": "top",
+              "fieldName": "top",
+              "type": {
+                "text": "ReactNode"
+              },
+              "description": "Bar along the top edge (search, filters, title)."
+            },
+            {
+              "name": "start",
+              "fieldName": "start",
+              "type": {
+                "text": "ReactNode"
+              },
+              "description": "Column on the start side (layers, lists, settings)."
+            },
+            {
+              "name": "end",
+              "fieldName": "end",
+              "type": {
+                "text": "ReactNode"
+              },
+              "description": "Column on the end side (details of the selected thing)."
+            },
+            {
+              "name": "bottom",
+              "fieldName": "bottom",
+              "type": {
+                "text": "ReactNode"
+              },
+              "description": "Bar along the bottom edge (dock, playback, a summary)."
+            },
+            {
+              "name": "height",
+              "fieldName": "height",
+              "type": {
+                "text": "number | string"
+              },
+              "description": "Height of the layout (default 640). Below 720px of width the slots stack: top, start, end, bottom."
+            },
+            {
+              "name": "surface",
+              "fieldName": "surface",
+              "type": {
+                "text": "Surface"
+              },
+              "description": "Glass for every surface in the slots (default) or solid surfaces."
+            },
+            {
+              "name": "label",
+              "fieldName": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "Accessible name of the region."
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "background",
+              "type": {
+                "text": "ReactNode"
+              },
+              "description": "What the UI floats over, filling the layout: a map, a 3D canvas, a video, a photo.",
+              "attribute": "background"
+            },
+            {
+              "kind": "field",
+              "name": "top",
+              "type": {
+                "text": "ReactNode"
+              },
+              "description": "Bar along the top edge (search, filters, title).",
+              "attribute": "top"
+            },
+            {
+              "kind": "field",
+              "name": "start",
+              "type": {
+                "text": "ReactNode"
+              },
+              "description": "Column on the start side (layers, lists, settings).",
+              "attribute": "start"
+            },
+            {
+              "kind": "field",
+              "name": "end",
+              "type": {
+                "text": "ReactNode"
+              },
+              "description": "Column on the end side (details of the selected thing).",
+              "attribute": "end"
+            },
+            {
+              "kind": "field",
+              "name": "bottom",
+              "type": {
+                "text": "ReactNode"
+              },
+              "description": "Bar along the bottom edge (dock, playback, a summary).",
+              "attribute": "bottom"
+            },
+            {
+              "kind": "field",
+              "name": "height",
+              "type": {
+                "text": "number | string"
+              },
+              "description": "Height of the layout (default 640). Below 720px of width the slots stack: top, start, end, bottom.",
+              "attribute": "height"
+            },
+            {
+              "kind": "field",
+              "name": "surface",
+              "type": {
+                "text": "Surface"
+              },
+              "description": "Glass for every surface in the slots (default) or solid surfaces.",
+              "attribute": "surface"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "Accessible name of the region.",
+              "attribute": "label"
+            }
+          ],
+          "events": [],
+          "slots": [
+            {
+              "name": "background",
+              "description": "What the UI floats over, filling the layout: a map, a 3D canvas, a video, a photo."
+            },
+            {
+              "name": "top",
+              "description": "Bar along the top edge (search, filters, title)."
+            },
+            {
+              "name": "start",
+              "description": "Column on the start side (layers, lists, settings)."
+            },
+            {
+              "name": "end",
+              "description": "Column on the end side (details of the selected thing)."
+            },
+            {
+              "name": "bottom",
+              "description": "Bar along the bottom edge (dock, playback, a summary)."
+            },
+            {
+              "name": "",
+              "description": "Content (any HTML or tf-* elements)."
+            }
+          ]
+        },
+        {
+          "kind": "class",
+          "customElement": true,
+          "name": "TfAmbientElement",
+          "tagName": "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.",
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "attributes": [
+            {
+              "name": "colors",
+              "fieldName": "colors",
+              "type": {
+                "text": "string[]"
+              },
+              "description": "Colours of the soft fields (any CSS colour); default the kit's `--ambient-1…4`."
+            },
+            {
+              "name": "src",
+              "fieldName": "src",
+              "type": {
+                "text": "string"
+              },
+              "description": "A photo (or, with `video`, a video) instead of the fields, under a scrim that keeps it calm."
+            },
+            {
+              "name": "video",
+              "fieldName": "video",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Treat `src` as a video (muted, looping, still with motion off)."
+            },
+            {
+              "name": "animate",
+              "fieldName": "animate",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Let the fields drift slowly (default true). Still with motion off; paused off screen."
+            },
+            {
+              "name": "fixed",
+              "fieldName": "fixed",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Cover the window behind the page instead of the nearest container."
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "colors",
+              "type": {
+                "text": "string[]"
+              },
+              "description": "Colours of the soft fields (any CSS colour); default the kit's `--ambient-1…4`.",
+              "attribute": "colors"
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "description": "A photo (or, with `video`, a video) instead of the fields, under a scrim that keeps it calm.",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "video",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Treat `src` as a video (muted, looping, still with motion off).",
+              "attribute": "video"
+            },
+            {
+              "kind": "field",
+              "name": "animate",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Let the fields drift slowly (default true). Still with motion off; paused off screen.",
+              "attribute": "animate"
+            },
+            {
+              "kind": "field",
+              "name": "fixed",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Cover the window behind the page instead of the nearest container.",
+              "attribute": "fixed"
+            }
+          ],
+          "events": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "Your own layer (a canvas, WebGL, a map) instead of fields or media."
+            }
+          ]
+        },
         {
           "kind": "class",
           "customElement": true,
@@ -21929,6 +22352,14 @@
                 "text": "boolean"
               }
             },
+            {
+              "name": "open",
+              "fieldName": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Optional: with `open` the component stays mounted while it animates out; without it, render it only while open."
+            },
             {
               "name": "side",
               "fieldName": "side",
@@ -21979,6 +22410,15 @@
               },
               "attribute": "inline"
             },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Optional: with `open` the component stays mounted while it animates out; without it, render it only while open.",
+              "attribute": "open"
+            },
             {
               "kind": "field",
               "name": "side",
@@ -22055,6 +22495,14 @@
                 "text": "ReactNode"
               },
               "description": "Shown when nothing matches (default: \"Nothing matches …\")."
+            },
+            {
+              "name": "open",
+              "fieldName": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Optional: with `open` the component stays mounted while it animates out; without it, render it only while open."
             }
           ],
           "members": [
@@ -22099,6 +22547,15 @@
               },
               "description": "Shown when nothing matches (default: \"Nothing matches …\").",
               "attribute": "empty"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Optional: with `open` the component stays mounted while it animates out; without it, render it only while open.",
+              "attribute": "open"
             }
           ],
           "events": [
@@ -24431,6 +24888,22 @@
             "module": "dist/elements.js"
           }
         },
+        {
+          "kind": "custom-element-definition",
+          "name": "tf-floating-layout",
+          "declaration": {
+            "name": "TfFloatingLayoutElement",
+            "module": "dist/elements.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "tf-ambient",
+          "declaration": {
+            "name": "TfAmbientElement",
+            "module": "dist/elements.js"
+          }
+        },
         {
           "kind": "custom-element-definition",
           "name": "tf-app-shell",