@exponential_app/eui 0.2.1 → 0.4.0

package/catalog/a11y.json

@@ -208,11 +208,21 @@
         "Tab reaches the copy button; Enter, Space: copy and announce `copied`"
       ]
     },
+    "Motion": {
+      "role": "img",
+      "notes": "img named by label; decorative (hidden) without one; with on.press it is a button (focusable, named by label) and its state machine gets the click",
+      "keys": ["Enter/Space: press (with on.press)"]
+    },
     "Image": {
       "role": "img",
       "notes": "img (alt = name; decorative when alt is empty)",
       "keys": []
     },
+    "ZoomableImage": {
+      "role": "img",
+      "notes": "img (alt = name), focusable; the zoom pill's buttons are named `$string.zoomOut`, `$string.zoomIn`, `$string.zoomToFit` (pressed while at rest) and the percent button `$string.zoomLevel` (its value = the percent, opening a menu whose first row is `$string.zoomFit`)",
+      "keys": ["+ / =: zoom in a step", "-: zoom out a step", "0: back to the opening zoom", "1: 100%"]
+    },
     "Icon": {
       "role": "img",
       "notes": "img when labelled, hidden otherwise",
@@ -244,12 +254,19 @@
     },
     "Carousel": {
       "role": "region",
-      "notes": "region, roledescription carousel; each page a group `page i of n`",
+      "notes": "region, roledescription carousel; each page a group `page i of n`; the counter `$string.pageCounter` is hidden (each page already says page i of n); each thumbnail a button `page i of n`, aria-current on the current one",
       "keys": [
         "ArrowLeft/ArrowRight: previous/next page while focus is inside",
         "Home/End: first/last page"
       ]
     },
+    "Mosaic": {
+      "role": "group",
+      "notes": "group labelled `label`; each tile a button named its picture's `alt`; the `+N` tile reads `alt` then `+N` ($string.morePictures).",
+      "keys": [
+        "Tab through the tiles; Enter, Space: select"
+      ]
+    },
     "Tabs": {
       "role": "tablist",
       "notes": "tablist / tab / tabpanel",
@@ -595,6 +612,13 @@
         "Tab through the links; Enter: select"
       ]
     },
+    "Outline": {
+      "role": "navigation",
+      "notes": "navigation labelled by `caption`; each row a link (aria-current=location on the active row) named `title` then the count; press fires `select {id}`.",
+      "keys": [
+        "Tab through the rows; Enter, Space: select"
+      ]
+    },
     "Stepper": {
       "role": "list",
       "notes": "list; the current step aria-current=step. Each step a listitem labelled `stepDone`/`stepCurrent`/`stepUpcoming`; the current one aria-current=step ($a11y).",

package/catalog/core.catalog.json

@@ -319,6 +319,27 @@
       "running",
       "done",
       "declined"
+    ],
+    "zoomInitial": [
+      "auto",
+      "fit",
+      "fitWidth",
+      "actual"
+    ],
+    "zoomControls": [
+      "auto",
+      "always",
+      "none"
+    ],
+    "motionDirection": [
+      "forward",
+      "reverse",
+      "alternate"
+    ],
+    "motionFit": [
+      "contain",
+      "cover",
+      "fill"
     ]
   },
   "defs": {
@@ -594,7 +615,7 @@
         },
         "width": {
           "type": "number",
-          "description": "A fixed width in px; otherwise columns share the width."
+          "description": "A fixed width in px; otherwise columns share the width, never under 120 (a wider table scrolls)."
         },
         "align": {
           "type": "enum",
@@ -618,6 +639,11 @@
         "decimals": {
           "type": "number",
           "description": "Fixed fraction digits of a number, currency or percent column."
+        },
+        "truncate": {
+          "type": "boolean",
+          "default": false,
+          "description": "One line with an ellipsis; cells wrap otherwise."
         }
       }
     },
@@ -698,6 +724,41 @@
           "description": "The step's state."
         }
       }
+    },
+    "outlineItem": {
+      "description": "One Outline row.",
+      "properties": {
+        "id": {
+          "type": "string",
+          "required": true,
+          "description": "Reported by `select`."
+        },
+        "title": {
+          "type": "string",
+          "required": true,
+          "bindable": true,
+          "description": "The row text."
+        },
+        "count": {
+          "type": "number",
+          "bindable": true,
+          "description": "A muted count."
+        }
+      }
+    },
+    "picture": {
+      "description": "One picture of a Mosaic.",
+      "properties": {
+        "src": {
+          "type": "url",
+          "required": true,
+          "description": "The image URL."
+        },
+        "alt": {
+          "type": "string",
+          "description": "The accessibility description."
+        }
+      }
     }
   },
   "functions": {
@@ -1037,7 +1098,10 @@
     "Toast.icon.success": "ui-success",
     "Toast.icon.warning": "ui-warning",
     "Toast.icon.error": "ui-error",
-    "Unknown.root": "ui-warning"
+    "Unknown.root": "ui-warning",
+    "ZoomableImage.zoomOut": "ui-minus",
+    "ZoomableImage.zoomIn": "ui-add",
+    "ZoomableImage.fit": "ui-fullscreen"
   },
   "components": {
     "Box": {
@@ -1876,6 +1940,71 @@
         "aspectRatio": 1.7777778
       }
     },
+    "ZoomableImage": {
+      "kind": "native",
+      "group": "media",
+      "lite": false,
+      "children": "none",
+      "description": "A picture that zooms (pinch, ⌘-wheel, double-tap) and pans.",
+      "props": {
+        "src": {
+          "type": "url",
+          "required": true,
+          "bindable": true,
+          "description": "The image URL."
+        },
+        "alt": {
+          "type": "string",
+          "required": true,
+          "bindable": true,
+          "description": "The accessibility description."
+        },
+        "naturalWidth": {
+          "type": "number",
+          "description": "Pixel width."
+        },
+        "naturalHeight": {
+          "type": "number",
+          "description": "Pixel height."
+        },
+        "initial": {
+          "type": "enum",
+          "enum": "zoomInitial",
+          "default": "auto",
+          "description": "auto = fitWidth when tall."
+        },
+        "maxScale": {
+          "type": "number",
+          "default": 8,
+          "description": "Largest zoom."
+        },
+        "controls": {
+          "type": "enum",
+          "enum": "zoomControls",
+          "default": "auto",
+          "description": "The zoom pill."
+        },
+        "scale": {
+          "type": "number",
+          "bindable": true,
+          "description": "1 = 100%."
+        },
+        "style": {
+          "type": "style",
+          "description": "Extra Box styles for the viewport."
+        }
+      },
+      "events": [
+        "zoom",
+        "tap"
+      ],
+      "example": {
+        "src": "https://example.com/screenshot.png",
+        "alt": "Screenshot",
+        "naturalWidth": 1440,
+        "naturalHeight": 900
+      }
+    },
     "Icon": {
       "kind": "native",
       "group": "media",
@@ -2069,6 +2198,18 @@
           "type": "boolean",
           "default": true,
           "description": "Shows the page dots."
+        },
+        "counter": {
+          "type": "boolean",
+          "default": false,
+          "description": "Shows `i / n`."
+        },
+        "thumbnails": {
+          "type": "array",
+          "items": {
+            "type": "url"
+          },
+          "description": "A thumbnail URL per page."
         }
       },
       "events": [
@@ -2079,6 +2220,51 @@
         "indicators": true
       }
     },
+    "Mosaic": {
+      "kind": "macro",
+      "group": "media",
+      "lite": false,
+      "children": "none",
+      "description": "Pictures: halves, or one large + two small with `+N`; press fires `select {index}`.",
+      "props": {
+        "pictures": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "shape": "picture"
+          },
+          "required": true,
+          "description": "The pictures in order."
+        },
+        "label": {
+          "type": "string",
+          "description": "The a11y label."
+        }
+      },
+      "events": [
+        "select"
+      ],
+      "example": {
+        "pictures": [
+          {
+            "src": "https://example.com/editor.png",
+            "alt": "Editor"
+          },
+          {
+            "src": "https://example.com/preview.png",
+            "alt": "Preview"
+          },
+          {
+            "src": "https://example.com/data.png",
+            "alt": "Data"
+          },
+          {
+            "src": "https://example.com/versions.png",
+            "alt": "Versions"
+          }
+        ]
+      }
+    },
     "Tabs": {
       "kind": "native",
       "group": "navigation",
@@ -2129,8 +2315,8 @@
             "value": "issue"
           },
           {
-            "label": "Run",
-            "value": "run"
+            "label": "Session",
+            "value": "session"
           }
         ],
         "value": "issue"
@@ -2492,6 +2678,56 @@
         ]
       }
     },
+    "Outline": {
+      "kind": "macro",
+      "group": "navigation",
+      "lite": true,
+      "children": "none",
+      "description": "Anchor rows under a caption, one active; press fires `select {id}`.",
+      "props": {
+        "items": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "shape": "outlineItem"
+          },
+          "required": true,
+          "description": "The rows in order."
+        },
+        "value": {
+          "type": "string",
+          "bindable": true,
+          "description": "The active row id."
+        },
+        "caption": {
+          "type": "string",
+          "description": "The heading."
+        }
+      },
+      "events": [
+        "select"
+      ],
+      "example": {
+        "caption": "Outline",
+        "value": "part-a",
+        "items": [
+          {
+            "id": "current",
+            "title": "Current state"
+          },
+          {
+            "id": "part-a",
+            "title": "Part A: editor-first creation",
+            "count": 5
+          },
+          {
+            "id": "part-b",
+            "title": "Part B: MCP for eApps",
+            "count": 2
+          }
+        ]
+      }
+    },
     "Stepper": {
       "kind": "macro",
       "group": "navigation",
@@ -3404,7 +3640,7 @@
         "*"
       ],
       "slotScope": "row",
-      "description": "A data table of typed columns: sorting, selection, widths, alignment, windowed; `slot` columns render components.",
+      "description": "A table of typed columns: sorting, selection, widths, alignment, windowed; `slot` columns render components.",
       "props": {
         "columns": {
           "type": "array",
@@ -3472,7 +3708,7 @@
         "stickyHeader": {
           "type": "boolean",
           "default": false,
-          "description": "Keeps the header visible while the rows scroll."
+          "description": "Pins the header while rows scroll."
         }
       },
       "events": [
@@ -5185,6 +5421,190 @@
       "example": {
         "component": "Gauge"
       }
+    },
+    "Motion": {
+      "kind": "native",
+      "group": "media",
+      "lite": true,
+      "children": "none",
+      "description": "A vector animation (Lottie-compatible) drawn identically everywhere: loaders, success states, illustrated empty states, small explainers.",
+      "props": {
+        "layers": {
+          "type": "array",
+          "items": {
+            "type": "object"
+          },
+          "description": "The animation, top layer first, in the composition's px (origin top-left). Layer: {type: shape|solid|null|precomp|text, id?, parent?: id, in?/out? ms, transform?: {anchor, position [x,y], scale [100,100] %, rotation deg clockwise, opacity 0–100}, shapes: […], matte?: {source: id, mode: alpha|luma}, masks?: [{path, mode: add|subtract|intersect}]}. Shapes draw top first; a style paints every shape before it in its group: rect {position (centre), size, radius}, ellipse {position, size}, star|polygon {points, outerRadius, innerRadius}, path {d: SVG path data}; fill {color}, stroke {color, width, cap, join, dash: [len, gap]}, gradient-fill {kind: linear|radial, start, end, stops: [[0, colour], [1, colour]]}; trim {start, end, offset} (percent, draw-on lines), repeater {copies, transform}, round-corners {radius}; group {shapes, transform}. Colours: $color.* tokens (follow light/dark), #hex, or {light, dark}. Animate any value: {keys: [{t: ms, v: value, ease: linear|ease-in|ease-out|ease-in-out|hold|[x1,y1,x2,y2]}, …]}; tokens cannot animate. Keep it small; loops end on their first pose. No expressions."
+        },
+        "size": {
+          "type": "array",
+          "items": {
+            "type": "number"
+          },
+          "description": "The composition [width, height] px (with layers)."
+        },
+        "duration": {
+          "type": "number",
+          "description": "Length in ms (with layers)."
+        },
+        "fps": {
+          "type": "number",
+          "default": 60,
+          "description": "Frames per second."
+        },
+        "assets": {
+          "type": "object",
+          "description": "Precomps {id: {layers}}."
+        },
+        "markers": {
+          "type": "array",
+          "items": {
+            "type": "object"
+          },
+          "description": "Named segments [{name, time, duration}] ms."
+        },
+        "lottie": {
+          "type": "object",
+          "description": "Lottie JSON instead of layers (no expressions)."
+        },
+        "src": {
+          "type": "url",
+          "description": "An attached .json or .lottie instead of layers."
+        },
+        "autoplay": {
+          "type": "boolean",
+          "default": true,
+          "description": "Plays when visible; false shows the poster."
+        },
+        "loop": {
+          "type": "boolean",
+          "default": true,
+          "description": "Repeats; false plays once and holds."
+        },
+        "plays": {
+          "type": "number",
+          "description": "Plays this many times (overrides loop)."
+        },
+        "direction": {
+          "type": "enum",
+          "enum": "motionDirection",
+          "default": "forward",
+          "description": "Forward, reverse, or back and forth."
+        },
+        "speed": {
+          "type": "number",
+          "default": 1,
+          "description": "Speed multiplier."
+        },
+        "segment": {
+          "type": "array",
+          "items": {
+            "type": "number"
+          },
+          "description": "Plays only [from, to] ms."
+        },
+        "marker": {
+          "type": "string",
+          "description": "Plays only this marker."
+        },
+        "progress": {
+          "type": "number",
+          "bindable": true,
+          "description": "Scrubs (0–1) instead of playing."
+        },
+        "play": {
+          "type": "boolean",
+          "bindable": true,
+          "default": true,
+          "description": "Pauses while false."
+        },
+        "poster": {
+          "type": "number",
+          "description": "The still frame (ms) for reduced motion and before play."
+        },
+        "fit": {
+          "type": "enum",
+          "enum": "motionFit",
+          "default": "contain",
+          "description": "How it fills the box."
+        },
+        "slots": {
+          "type": "object",
+          "description": "Lottie slot overrides {slotId: value}."
+        },
+        "stateMachine": {
+          "type": "object",
+          "description": "A dotLottie state machine driving playback (a .lottie src brings its own)."
+        },
+        "inputs": {
+          "type": "object",
+          "bindable": true,
+          "description": "State-machine inputs {name: value}; bind to drive states from data."
+        },
+        "label": {
+          "type": "string",
+          "description": "What it shows, for screen readers."
+        },
+        "style": {
+          "type": "style",
+          "description": "Extra Box styles for the box."
+        }
+      },
+      "events": [
+        "press",
+        "hover",
+        "visible",
+        "complete",
+        "state"
+      ],
+      "example": {
+        "size": [
+          48,
+          48
+        ],
+        "duration": 1000,
+        "layers": [
+          {
+            "type": "shape",
+            "transform": {
+              "position": [
+                24,
+                24
+              ],
+              "rotation": {
+                "keys": [
+                  {
+                    "t": 0,
+                    "v": 0
+                  },
+                  {
+                    "t": 1000,
+                    "v": 360
+                  }
+                ]
+              }
+            },
+            "shapes": [
+              {
+                "type": "ellipse",
+                "size": [
+                  36,
+                  36
+                ]
+              },
+              {
+                "type": "trim",
+                "end": 70
+              },
+              {
+                "type": "stroke",
+                "color": "$color.primary",
+                "width": 4
+              }
+            ]
+          }
+        ]
+      }
     }
   }
 }