animl-cli 0.0.0-stage → 0.1.1

package/modules/a11y/examples/focus-ancestor-policy.animl

@@ -0,0 +1,16 @@
+<anima version="0.1" name="focus-ancestor-policy" grid="100" requires="a11y focus">
+  <bool name="hideChild"/>
+  <group id="parent">
+    <focus bounds="8 8 24 4"/>
+    <a11y role="group" label="parent"/>
+    <rect id="child" x0="8" y0="8" width="4" height="4" fill="#111">
+      <a11y role="button" label="child" hidden="hideChild"/>
+    </rect>
+    <rect id="sibling" x0="28" y0="8" width="4" height="4" fill="#111">
+      <a11y role="button" label="sibling"/>
+    </rect>
+  </group>
+  <rect id="outside" x0="48" y0="8" width="4" height="4" fill="#111">
+    <a11y role="button" label="outside"/>
+  </rect>
+</anima>

package/modules/a11y/examples/painted-extents.ani

@@ -0,0 +1,331 @@
+{
+  "anima": "0.1",
+  "name": "painted-extents",
+  "grid": 100,
+  "requires": ["a11y", "composite", "contour", "paint", "surface"],
+  "nodes": [
+    {
+      "id": "clip-example",
+      "type": "group",
+      "x": 0,
+      "y": 0,
+      "children": [
+        {
+          "id": "clip-clipped",
+          "type": "group",
+          "x": 5,
+          "children": [
+            {
+              "id": "clip-target",
+              "type": "rect",
+              "x0": 0,
+              "y0": 0,
+              "w": 20,
+              "h": 10,
+              "fill": {
+                "color": "#000"
+              },
+              "a11y": {
+                "role": "img"
+              }
+            }
+          ],
+          "clip": {
+            "source": "clip-edge"
+          },
+          "a11y": {
+            "role": "group"
+          }
+        },
+        {
+          "id": "clip-edge",
+          "type": "rect",
+          "x0": 0,
+          "y0": 2,
+          "w": 6,
+          "h": 20,
+          "x": 7,
+          "visible": false,
+          "stroke": {
+            "color": "#000",
+            "width": 10
+          }
+        }
+      ]
+    },
+    {
+      "id": "mask-example",
+      "type": "group",
+      "x": 40,
+      "y": 0,
+      "children": [
+        {
+          "id": "mask-target",
+          "type": "rect",
+          "x0": 0,
+          "y0": 0,
+          "w": 20,
+          "h": 10,
+          "x": 5,
+          "fill": {
+            "color": "#000"
+          },
+          "mask": {
+            "source": "mask-source",
+            "mode": "alpha",
+            "sourceDraws": false
+          },
+          "a11y": {
+            "role": "img"
+          }
+        },
+        {
+          "id": "mask-source",
+          "type": "group",
+          "x": 7,
+          "children": [
+            {
+              "id": "mask-edge",
+              "type": "rect",
+              "x0": 0,
+              "y0": 2,
+              "w": 6,
+              "h": 4,
+              "stroke": {
+                "color": "#000",
+                "width": 2
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "trim-example",
+      "type": "group",
+      "x": 0,
+      "y": 22,
+      "children": [
+        {
+          "id": "trim-sequential",
+          "type": "path",
+          "d": "M0 5H10M20 5H30",
+          "stroke": {
+            "color": "#000",
+            "width": 2,
+            "cap": "square",
+            "trim": {
+              "start": 0.25,
+              "end": 0.75,
+              "mode": "sequential"
+            }
+          },
+          "a11y": {
+            "role": "img"
+          }
+        },
+        {
+          "id": "trim-synchronized",
+          "type": "path",
+          "d": "M0 10H10M20 10H30",
+          "stroke": {
+            "color": "#000",
+            "width": 2,
+            "cap": "round",
+            "trim": {
+              "start": 0.25,
+              "end": 0.75,
+              "mode": "synchronized"
+            }
+          },
+          "a11y": {
+            "role": "img"
+          }
+        },
+        {
+          "id": "trim-wrapped",
+          "type": "path",
+          "d": "M0 15H10M20 15H30",
+          "stroke": {
+            "color": "#000",
+            "width": 2,
+            "cap": "butt",
+            "trim": {
+              "start": 0.25,
+              "end": 0.75,
+              "offset": 0.5
+            }
+          },
+          "a11y": {
+            "role": "img"
+          }
+        }
+      ]
+    },
+    {
+      "id": "trim-wrap-example",
+      "type": "group",
+      "x": 40,
+      "y": 22,
+      "children": [
+        {
+          "id": "trim-wrap-wrapped",
+          "type": "path",
+          "d": "M0 5H20",
+          "stroke": {
+            "color": "#000",
+            "width": 2,
+            "cap": "square",
+            "trimStart": 0.25,
+            "trimEnd": 0.75,
+            "trimOffset": 0.5
+          },
+          "a11y": {
+            "role": "img"
+          }
+        },
+        {
+          "id": "trim-wrap-empty",
+          "type": "path",
+          "d": "M0 10H20",
+          "stroke": {
+            "color": "#000",
+            "width": 2,
+            "trimStart": 0.5,
+            "trimEnd": 0.5
+          },
+          "a11y": {
+            "role": "img"
+          }
+        }
+      ]
+    },
+    {
+      "id": "fixed-example",
+      "type": "group",
+      "x": 0,
+      "y": 44,
+      "children": [
+        {
+          "id": "fixed-fixed",
+          "type": "path",
+          "d": "M0 0H4",
+          "x": 10,
+          "y": 10,
+          "rotate": 90,
+          "scaleX": 3,
+          "scaleY": 2,
+          "stroke": {
+            "color": "#000",
+            "width": 2,
+            "cap": "square",
+            "scale": "fixed"
+          },
+          "a11y": {
+            "role": "img"
+          }
+        }
+      ]
+    },
+    {
+      "id": "feather-example",
+      "type": "group",
+      "x": 40,
+      "y": 44,
+      "children": [
+        {
+          "id": "feather-feathered",
+          "type": "rect",
+          "x0": 0,
+          "y0": 0,
+          "w": 4,
+          "h": 6,
+          "x": 10,
+          "y": 10,
+          "scaleX": 2,
+          "fill": {
+            "color": "#000",
+            "feather": {
+              "inner": 7,
+              "outer": 3,
+              "offset": [2, -1]
+            }
+          },
+          "a11y": {
+            "role": "img"
+          }
+        }
+      ]
+    },
+    {
+      "id": "dash-example",
+      "type": "group",
+      "x": 0,
+      "y": 66,
+      "children": [
+        {
+          "id": "dash-dashed",
+          "type": "path",
+          "d": "M2 5H18",
+          "stroke": {
+            "color": "#000",
+            "width": 2,
+            "cap": "butt",
+            "dash": [0.25, 0.75]
+          },
+          "a11y": {
+            "role": "img"
+          }
+        },
+        {
+          "id": "dash-before",
+          "type": "path",
+          "d": "M0 15H20",
+          "stroke": {
+            "color": "#000",
+            "width": 2,
+            "cap": "butt",
+            "effects": [
+              {
+                "type": "trim",
+                "start": 0.25,
+                "end": 0.75
+              },
+              {
+                "type": "dash",
+                "dash": [2, 8]
+              }
+            ]
+          },
+          "a11y": {
+            "role": "img"
+          }
+        },
+        {
+          "id": "dash-after",
+          "type": "path",
+          "d": "M0 20H20",
+          "stroke": {
+            "color": "#000",
+            "width": 2,
+            "cap": "butt",
+            "effects": [
+              {
+                "type": "dash",
+                "dash": [2, 8]
+              },
+              {
+                "type": "trim",
+                "start": 0.5,
+                "end": 1
+              }
+            ]
+          },
+          "a11y": {
+            "role": "img"
+          }
+        }
+      ]
+    }
+  ]
+}

package/modules/a11y/examples/painted-extents.animl

@@ -0,0 +1,62 @@
+<anima version="0.1" name="painted-extents" grid="100" requires="a11y composite contour paint surface">
+  <group id="clip-example" x="0" y="0">
+    <group id="clip-clipped" x="5">
+      <clip source="clip-edge"/>
+      <a11y role="group"/>
+      <rect id="clip-target" x0="0" y0="0" width="20" height="10" fill="#000">
+        <a11y role="img"/>
+      </rect>
+    </group>
+    <rect id="clip-edge" x0="0" y0="2" width="6" height="20" x="7" visible="false" stroke="#000" stroke-width="10"/>
+  </group>
+  <group id="mask-example" x="40" y="0">
+    <rect id="mask-target" x0="0" y0="0" width="20" height="10" x="5" fill="#000">
+      <mask source="mask-source" mode="alpha" source-draws="false"/>
+      <a11y role="img"/>
+    </rect>
+    <group id="mask-source" x="7">
+      <rect id="mask-edge" x0="0" y0="2" width="6" height="4" stroke="#000" stroke-width="2"/>
+    </group>
+  </group>
+  <group id="trim-example" x="0" y="22">
+    <path id="trim-sequential" d="M0 5H10M20 5H30" stroke="#000" stroke-width="2" stroke-linecap="square" trim="{&quot;start&quot;:0.25,&quot;end&quot;:0.75,&quot;mode&quot;:&quot;sequential&quot;}">
+      <a11y role="img"/>
+    </path>
+    <path id="trim-synchronized" d="M0 10H10M20 10H30" stroke="#000" stroke-width="2" stroke-linecap="round" trim="{&quot;start&quot;:0.25,&quot;end&quot;:0.75,&quot;mode&quot;:&quot;synchronized&quot;}">
+      <a11y role="img"/>
+    </path>
+    <path id="trim-wrapped" d="M0 15H10M20 15H30" stroke="#000" stroke-width="2" stroke-linecap="butt" trim="{&quot;start&quot;:0.25,&quot;end&quot;:0.75,&quot;offset&quot;:0.5}">
+      <a11y role="img"/>
+    </path>
+  </group>
+  <group id="trim-wrap-example" x="40" y="22">
+    <path id="trim-wrap-wrapped" d="M0 5H20" stroke="#000" stroke-width="2" stroke-linecap="square" trimStart="0.25" trimEnd="0.75" trimOffset="0.5">
+      <a11y role="img"/>
+    </path>
+    <path id="trim-wrap-empty" d="M0 10H20" stroke="#000" stroke-width="2" trimStart="0.5" trimEnd="0.5">
+      <a11y role="img"/>
+    </path>
+  </group>
+  <group id="fixed-example" x="0" y="44">
+    <path id="fixed-fixed" d="M0 0H4" x="10" y="10" rotate="90" scaleX="3" scaleY="2" stroke="#000" stroke-width="2" stroke-linecap="square" stroke-scale="fixed">
+      <a11y role="img"/>
+    </path>
+  </group>
+  <group id="feather-example" x="40" y="44">
+    <rect id="feather-feathered" x0="0" y0="0" width="4" height="6" x="10" y="10" scaleX="2" fill="#000">
+      <a11y role="img"/>
+      <feather inner="7" outer="3" offset="2 -1"/>
+    </rect>
+  </group>
+  <group id="dash-example" x="0" y="66">
+    <path id="dash-dashed" d="M2 5H18" stroke="#000" stroke-width="2" stroke-linecap="butt" stroke-dasharray="0.25 0.75">
+      <a11y role="img"/>
+    </path>
+    <path id="dash-before" d="M0 15H20" stroke="#000" stroke-width="2" stroke-linecap="butt" effects="[{&quot;type&quot;:&quot;trim&quot;,&quot;start&quot;:0.25,&quot;end&quot;:0.75},{&quot;type&quot;:&quot;dash&quot;,&quot;dash&quot;:[2,8]}]">
+      <a11y role="img"/>
+    </path>
+    <path id="dash-after" d="M0 20H20" stroke="#000" stroke-width="2" stroke-linecap="butt" effects="[{&quot;type&quot;:&quot;dash&quot;,&quot;dash&quot;:[2,8]},{&quot;type&quot;:&quot;trim&quot;,&quot;start&quot;:0.5,&quot;end&quot;:1}]">
+      <a11y role="img"/>
+    </path>
+  </group>
+</anima>

package/modules/a11y/examples/painted-groups.ani

@@ -0,0 +1,88 @@
+{
+  "anima": "0.1",
+  "name": "semantic-bounds",
+  "grid": 100,
+  "requires": ["a11y"],
+  "nodes": [
+    {
+      "id": "panel",
+      "type": "group",
+      "x": 10,
+      "y": 20,
+      "children": [
+        {
+          "id": "box",
+          "type": "rect",
+          "x0": 2,
+          "y0": 3,
+          "w": 4,
+          "h": 5,
+          "fill": {
+            "color": "#000"
+          },
+          "a11y": {
+            "role": "img",
+            "label": "Box"
+          }
+        },
+        {
+          "id": "offset",
+          "type": "group",
+          "x": -5,
+          "y": 2,
+          "children": [
+            {
+              "id": "paint",
+              "type": "rect",
+              "x0": 1,
+              "y0": 1,
+              "w": 2,
+              "h": 2,
+              "fill": {
+                "color": "#000"
+              }
+            }
+          ]
+        }
+      ],
+      "a11y": {
+        "role": "group",
+        "label": "Panel"
+      }
+    },
+    {
+      "id": "explicit",
+      "type": "group",
+      "x": 40,
+      "children": [
+        {
+          "id": "outside",
+          "type": "rect",
+          "x0": 20,
+          "y0": 20,
+          "w": 2,
+          "h": 2,
+          "fill": {
+            "color": "#000"
+          }
+        }
+      ],
+      "a11y": {
+        "role": "group",
+        "label": "Explicit",
+        "bounds": [0, 0, 1, 1]
+      }
+    },
+    {
+      "id": "empty",
+      "type": "group",
+      "x": 50,
+      "y": 60,
+      "children": [],
+      "a11y": {
+        "role": "text",
+        "label": "Point"
+      }
+    }
+  ]
+}

package/modules/a11y/examples/painted-groups.animl

@@ -0,0 +1,18 @@
+<anima version="0.1" name="semantic-bounds" grid="100" requires="a11y">
+  <group id="panel" x="10" y="20">
+    <a11y role="group" label="Panel"/>
+    <rect id="box" x0="2" y0="3" width="4" height="5" fill="#000">
+      <a11y role="img" label="Box"/>
+    </rect>
+    <group id="offset" x="-5" y="2">
+      <rect id="paint" x0="1" y0="1" width="2" height="2" fill="#000"/>
+    </group>
+  </group>
+  <group id="explicit" x="40">
+    <a11y role="group" label="Explicit" bounds="0 0 1 1"/>
+    <rect id="outside" x0="20" y0="20" width="2" height="2" fill="#000"/>
+  </group>
+  <group id="empty" x="50" y="60">
+    <a11y role="text" label="Point"/>
+  </group>
+</anima>

package/modules/a11y/examples/slider-value-text.ani

@@ -0,0 +1,53 @@
+{
+  "anima": "0.1",
+  "name": "slider-value-text",
+  "grid": 20,
+  "requires": ["a11y", "focus", "data", "bind", "derive", "convert"],
+  "nodes": [
+    {
+      "id": "volume",
+      "type": "group",
+      "children": [],
+      "a11y": {
+        "role": "slider",
+        "label": "Volume",
+        "value": "$volume",
+        "valueText": "$volumeText",
+        "step": 5,
+        "bounds": [1, 2, 18, 4]
+      }
+    }
+  ],
+  "data": {
+    "models": {
+      "Settings": {
+        "properties": {
+          "volume": {
+            "type": "number",
+            "default": 40,
+            "min": 0,
+            "max": 100
+          },
+          "volumeText": {
+            "type": "string",
+            "value": "$volume",
+            "convert": "spoken"
+          }
+        }
+      }
+    },
+    "instances": {
+      "settings": {
+        "model": "Settings",
+        "default": true,
+        "values": {}
+      }
+    }
+  },
+  "converters": {
+    "spoken": {
+      "type": "template",
+      "text": "Volume {0} %"
+    }
+  }
+}

package/modules/a11y/examples/slider-value-text.animl

@@ -0,0 +1,11 @@
+<anima version="0.1" name="slider-value-text" grid="20" requires="a11y focus data bind derive convert">
+  <model name="Settings">
+    <number name="volume" default="40" min="0" max="100"/>
+    <string name="volumeText" value="$volume" convert="spoken"/>
+  </model>
+  <instance name="settings" model="Settings" default="true"/>
+  <converter name="spoken" type="template" text="Volume {0} %"/>
+  <group id="volume">
+    <a11y role="slider" label="Volume" value="$volume" value-text="$volumeText" step="5" bounds="1 2 18 4"/>
+  </group>
+</anima>

package/modules/a11y/manifest.source

@@ -0,0 +1,49 @@
+// Ordering constraints only; optional peers are not dependencies. Budget failure: REPORT.md.
+export const after = ['data', 'focus', 'lists'];
+export default {
+  ...{
+    name: 'a11y',
+    summary:
+      'Accessible names, roles, values and states for nodes, with a headless semantic tree for tools and tests.',
+    after: [],
+    core: { entry: 'core/index.ts', export: 'a11y', svg: 'core/svg.ts', svgExport: 'a11ySVG' },
+    web: [
+      { name: 'a11y', budget: 2496 },
+      { name: 'a11y-text', budget: 576, over: 'a11y' },
+      { name: 'a11y-bounds', budget: 4096, over: 'a11y' },
+      { name: 'markup-a11y', budget: 1088, over: 'index', authoring: true },
+    ],
+    adapters: {
+      'packages/core/src/modules/a11y/index.ts': 'core/index.ts',
+      'packages/core/src/modules/a11y/svg.ts': 'core/svg.ts',
+      'packages/markup/src/a11y.ts': 'markup/index.ts',
+      'packages/web/src/a11y.ts': 'web/index.ts',
+      'packages/web/src/a11y-text.ts': 'web/text.ts',
+      'packages/web/src/a11y-bounds.ts': 'web/bounds.ts',
+      'packages/core/src/modules/a11y/text.ts': 'core/text.ts',
+      'packages/web/src/markup-a11y.ts': 'web/markup.ts',
+    },
+    exports: {
+      'core:./a11y': 'packages/core/src/modules/a11y/index.ts',
+      'markup:./a11y': 'packages/markup/src/a11y.ts',
+      'core:./a11y-text': 'packages/core/src/modules/a11y/text.ts',
+      'web:./a11y-text': 'packages/web/src/a11y-text.ts',
+      'web:./a11y-bounds': 'packages/web/src/a11y-bounds.ts',
+      'web:./a11y': 'packages/web/src/a11y.ts',
+      'web:./markup-a11y': 'packages/web/src/markup-a11y.ts',
+    },
+    tests: [
+      'modules/a11y/test/**/*.test.ts',
+      'packages/markup/test/corpus.test.ts',
+      'packages/markup/test/names.test.ts',
+    ],
+    conformance: ['a11y-', 'a11y-inferred-text', 'a11y-tree-bounds'],
+    docs: [
+      'spec/SPEC.md',
+      'modules/a11y/SPEC.md',
+      'modules/a11y/AUTHORING.md',
+      'modules/a11y/TEXT.md',
+    ],
+  },
+  after,
+};

package/modules/a11y-actions/manifest.source

@@ -0,0 +1,22 @@
+export const after = ['a11y'];
+export default {
+  name: 'a11y-actions',
+  summary:
+    'Accessibility actions (tap, increase, decrease, focus) that drive listeners like real input.',
+  after,
+  core: { entry: 'core/index.ts', export: 'a11yActions' },
+  web: [{ name: 'a11y-actions', budget: 1216, over: 'a11y' }],
+  adapters: {
+    'packages/core/src/modules/a11y-actions/index.ts': 'core/index.ts',
+    'packages/web/src/a11y-actions.ts': 'web/index.ts',
+    'packages/web/src/a11yactions.ts': 'web/index.ts',
+  },
+  exports: {
+    'core:./a11y-actions': 'packages/core/src/modules/a11y-actions/index.ts',
+    'web:./a11y-actions': 'packages/web/src/a11y-actions.ts',
+    'web:./a11yactions': 'packages/web/src/a11yactions.ts',
+  },
+  tests: ['modules/a11y/test/**/*.test.ts', 'modules/a11y-actions/test/**/*.test.ts'],
+  conformance: [],
+  docs: ['modules/a11y/SPEC.md'],
+};