@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/docs/splitter.json

@@ -0,0 +1,142 @@
+{
+  "family": "splitter",
+  "ui": "splitter",
+  "binding": "angular",
+  "catalog": {
+    "group": "Layout",
+    "summary": "Resizable panes divided by a handle."
+  },
+  "axes": {
+    "orientation": [
+      "vertical",
+      "horizontal"
+    ]
+  },
+  "members": {
+    "splitter": {
+      "nativeElement": "div",
+      "defaults": {
+        "orientation": "vertical",
+        "defaultValue": 0.5,
+        "min": 0,
+        "max": 1,
+        "collapsible": false,
+        "collapsedValue": 0,
+        "disabled": false,
+        "snapPoints": []
+      },
+      "capabilities": [
+        "extent",
+        "open",
+        "orientation",
+        "disabled",
+        "focusable"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "dragging",
+        "expanded"
+      ],
+      "parts": [
+        "root",
+        "line",
+        "grip"
+      ]
+    }
+  },
+  "docs": {
+    "accessibility": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "anatomy": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "api": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "composition": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "events": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "imports": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "scenes": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "snippets": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-width-thin",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-border",
+    "--slotted-duration-instant",
+    "--slotted-duration-short",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-radius-sm",
+    "--slotted-space-12",
+    "--slotted-space-2",
+    "--slotted-space-4",
+    "--slotted-space-6",
+    "--slotted-space-9",
+    "--slotted-splitter-disabled-line-color",
+    "--slotted-splitter-line-active-color",
+    "--slotted-splitter-line-color",
+    "--slotted-target-min",
+    "--slotted-text-muted"
+  ],
+  "examples": []
+}

package/docs/splitter.md

@@ -0,0 +1,14 @@
+<!-- index: ./index.md -->
+# splitter
+
+`data-ui="splitter"` · Resizable panes divided by a handle.
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `orientation` | `vertical`, `horizontal` | `vertical` |
+
+## Tokens
+
+`--slotted-border-strong`, `--slotted-border-width-thin`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-border`, `--slotted-duration-instant`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-sm`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-space-9`, `--slotted-splitter-disabled-line-color`, `--slotted-splitter-line-active-color`, `--slotted-splitter-line-color`, `--slotted-target-min`, `--slotted-text-muted`

package/docs/stack.json

@@ -0,0 +1,135 @@
+{
+  "family": "stack",
+  "ui": "stack",
+  "binding": "angular",
+  "catalog": {
+    "group": "Layout",
+    "summary": "Column of items with a gap."
+  },
+  "axes": {
+    "gap": [
+      "0",
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ],
+    "align": [
+      "start",
+      "center",
+      "end",
+      "stretch"
+    ],
+    "justify": [
+      "start",
+      "center",
+      "end",
+      "between",
+      "around",
+      "evenly"
+    ]
+  },
+  "members": {
+    "stack": {
+      "nativeElement": "div",
+      "defaults": {
+        "gap": "6"
+      },
+      "capabilities": [
+        "arrangement"
+      ],
+      "states": [
+        "default"
+      ],
+      "parts": [
+        "root"
+      ]
+    }
+  },
+  "docs": {
+    "stack": {
+      "imports": null,
+      "anatomy": [],
+      "api": [
+        {
+          "name": "gap",
+          "type": "0 | 1 | … | 12",
+          "defaultValue": "6",
+          "appliesTo": "slStack",
+          "description": "Separation between children, as a step on the space scale"
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end' | 'stretch'",
+          "defaultValue": "—",
+          "appliesTo": "slStack",
+          "description": "Positions children across the flow, which for a stack is the inline axis"
+        },
+        {
+          "name": "justify",
+          "type": "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'",
+          "defaultValue": "—",
+          "appliesTo": "slStack",
+          "description": "Positions children along the flow; moves nothing until the stack has a block size"
+        }
+      ],
+      "composition": [],
+      "events": [],
+      "accessibility": [
+        "slStack has no role and no ARIA. It arranges what the consumer wrote, and the children keep whatever semantics they already had.",
+        "The directive selector is an attribute, so the element is always the consumer’s. Write ul when the children are list items and form when they are fields.",
+        "There is no input that reverses the children. Visual order stays DOM order, which is what WCAG 2.2 SC 1.3.2 asks for (technique C27, failure F1) and what keeps the Tab order matching the page.",
+        "Separation is a step on the space scale, stated in rem, so it grows with the browser zoom WCAG 1.4.4 requires.",
+        "Alignment uses the logical keywords, so a right-to-left document is the same component mirrored rather than a second stylesheet."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-space-1",
+    "--slotted-space-10",
+    "--slotted-space-11",
+    "--slotted-space-12",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-7",
+    "--slotted-space-8",
+    "--slotted-space-9"
+  ],
+  "examples": [
+    {
+      "id": "stack-angular-form",
+      "title": "The element is the consumer’s",
+      "note": null,
+      "language": "html",
+      "source": "<form slStack [gap]=\"6\" (ngSubmit)=\"save()\">\n  <input slInput name=\"email\" />\n  <input slInput name=\"password\" />\n</form>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "stack-angular-nested",
+      "title": "The outer stack separates sections, the inner separates lines",
+      "note": null,
+      "language": "html",
+      "source": "<div slStack [gap]=\"8\">\n  <div slStack [gap]=\"2\">\n    <span slText weight=\"semibold\">Payment method</span>\n    <span slText tone=\"muted\">Visa ending 4242</span>\n  </div>\n  <div slStack [gap]=\"2\">\n    <span slText weight=\"semibold\">Billing address</span>\n    <span slText tone=\"muted\">Rua da Alfândega 200</span>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "stack-angular-shell",
+      "title": "Header, body and footer pushed apart",
+      "note": null,
+      "language": "html",
+      "source": "<div slStack [gap]=\"4\" justify=\"between\" style=\"block-size: 100%\">\n  <app-header />\n  <app-body />\n  <app-footer />\n</div>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}

package/docs/stack.md

@@ -0,0 +1,74 @@
+<!-- index: ./index.md -->
+# stack
+
+`data-ui="stack"` · Column of items with a gap.
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```html
+<form slStack [gap]="6" (ngSubmit)="save()">
+  <input slInput name="email" />
+  <input slInput name="password" />
+</form>
+```
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `gap` | `0 \| 1 \| … \| 12` | 6 | slStack | Separation between children, as a step on the space scale |
+| `align` | `'start' \| 'center' \| 'end' \| 'stretch'` | — | slStack | Positions children across the flow, which for a stack is the inline axis |
+| `justify` | `'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'` | — | slStack | Positions children along the flow; moves nothing until the stack has a block size |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `gap` | `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12` | `6` |
+| `align` | `start`, `center`, `end`, `stretch` | — |
+| `justify` | `start`, `center`, `end`, `between`, `around`, `evenly` | — |
+
+## Rules
+
+- slStack has no role and no ARIA. It arranges what the consumer wrote, and the children keep whatever semantics they already had.
+- The directive selector is an attribute, so the element is always the consumer’s. Write ul when the children are list items and form when they are fields.
+- There is no input that reverses the children. Visual order stays DOM order, which is what WCAG 2.2 SC 1.3.2 asks for (technique C27, failure F1) and what keeps the Tab order matching the page.
+- Separation is a step on the space scale, stated in rem, so it grows with the browser zoom WCAG 1.4.4 requires.
+- Alignment uses the logical keywords, so a right-to-left document is the same component mirrored rather than a second stylesheet.
+
+## Tokens
+
+`--slotted-space-1`, `--slotted-space-10`, `--slotted-space-11`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`
+
+## Examples
+
+### The outer stack separates sections, the inner separates lines
+
+Excerpt — not a complete module
+
+```html
+<div slStack [gap]="8">
+  <div slStack [gap]="2">
+    <span slText weight="semibold">Payment method</span>
+    <span slText tone="muted">Visa ending 4242</span>
+  </div>
+  <div slStack [gap]="2">
+    <span slText weight="semibold">Billing address</span>
+    <span slText tone="muted">Rua da Alfândega 200</span>
+  </div>
+</div>
+```
+
+### Header, body and footer pushed apart
+
+Excerpt — not a complete module
+
+```html
+<div slStack [gap]="4" justify="between" style="block-size: 100%">
+  <app-header />
+  <app-body />
+  <app-footer />
+</div>
+```