npm - @exponential_app/eui - Versions diffs - 0.3.0 → 0.4.0 - Mend

@exponential_app/eui 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (442) hide show

package/fixtures/conformance-known.json CHANGED Viewed

@@ -728,448 +728,448 @@
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/dark/390/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/dark/600/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/dark/600/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/dark/900/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/dark/900/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/dark/1280/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/dark/1280/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/light/390/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/light/390/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/light/600/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/light/600/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/light/900/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/light/900/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/light/1280/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/exponential/light/1280/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/dark/390/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/dark/390/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/dark/600/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/dark/600/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/dark/900/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/dark/900/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/dark/1280/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/dark/1280/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/light/390/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/light/390/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/light/600/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/light/600/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/light/900/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/light/900/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/light/1280/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/neutral/light/1280/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/dark/390/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/dark/390/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/dark/600/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/dark/600/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/dark/900/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/dark/900/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/dark/1280/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/dark/1280/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/light/390/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/light/390/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/light/600/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/light/600/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/light/900/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/light/900/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/light/1280/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/playful/light/1280/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/dark/390/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/dark/390/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/dark/600/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/dark/600/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/dark/900/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/dark/900/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/dark/1280/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/dark/1280/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/light/390/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/light/390/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/light/600/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/light/600/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/light/900/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/light/900/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/light/1280/ltr": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "kitchen-sink/orange/light/1280/rtl": {
       "size": 0,
       "position": 0,
       "wrap": 0,
-      "onlyRef": 6,
+      "onlyRef": 5,
       "onlyCand": 2
     },
     "responsive/exponential/dark/390/ltr": {
@@ -2112,12 +2112,6 @@
       "only": "ref",
       "cases": 64,
       "reason": "Ring centre label: painted inside the Ring leaf."
-    },
-    {
-      "id": "video.controls",
-      "only": "ref",
-      "cases": 64,
-      "reason": "Video controls bar: painted inside the Video leaf (16:9 box compared)."
     }
   ]
 }

package/fixtures/kitchen-sink.expanded.json CHANGED Viewed

@@ -4597,6 +4597,65 @@
                   }
                 ]
               },
+              {
+                "id": "motion",
+                "component": "Motion",
+                "props": {
+                  "size": [
+                    48,
+                    48
+                  ],
+                  "duration": 1000,
+                  "progress": 0.25,
+                  "label": "Loading",
+                  "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
+                        }
+                      ]
+                    }
+                  ]
+                },
+                "children": [],
+                "style": {
+                  "width": "48px",
+                  "height": "48px"
+                }
+              },
               {
                 "id": "call",
                 "component": "Box",
@@ -7362,6 +7421,18 @@
                   }
                 ]
               },
+              {
+                "id": "zoomable",
+                "component": "ZoomableImage",
+                "props": {
+                  "src": "https://example.com/1.jpg",
+                  "alt": "Zoomable",
+                  "naturalWidth": 1440,
+                  "naturalHeight": 900,
+                  "controls": "always"
+                },
+                "children": []
+              },
               {
                 "id": "mosaic",
                 "component": "Box",
@@ -9389,6 +9460,7 @@
                   "display": "flex",
                   "flexDirection": "row",
                   "alignItems": "stretch",
+                  "gap": "$spacing.lg",
                   "width": "100%",
                   "minHeight": 160
                 },

package/fixtures/kitchen-sink.json CHANGED Viewed

@@ -1220,6 +1220,28 @@
             }
           ]
         },
+        {
+          "id": "motion",
+          "component": "Motion",
+          "props": {
+            "size": [48, 48],
+            "duration": 1000,
+            "progress": 0.25,
+            "label": "Loading",
+            "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 }
+                ]
+              }
+            ]
+          },
+          "style": { "width": "48px", "height": "48px" }
+        },
         {
           "id": "call",
           "component": "CallSurface",
@@ -1735,6 +1757,17 @@
             }
           ]
         },
+        {
+          "id": "zoomable",
+          "component": "ZoomableImage",
+          "props": {
+            "src": "https://example.com/1.jpg",
+            "alt": "Zoomable",
+            "naturalWidth": 1440,
+            "naturalHeight": 900,
+            "controls": "always"
+          }
+        },
         {
           "id": "mosaic",
           "component": "Mosaic",