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

package/docs/cascader.json

@@ -0,0 +1,933 @@
+{
+  "family": "cascader",
+  "ui": "cascader",
+  "binding": "angular",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Picks a value from nested option columns."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "layout": [
+      "auto",
+      "columns",
+      "drill",
+      "tree"
+    ],
+    "selectionMode": [
+      "single",
+      "multiple"
+    ],
+    "selectable": [
+      "leaf",
+      "any"
+    ],
+    "checkedStrategy": [
+      "all",
+      "parent",
+      "child"
+    ],
+    "expandOn": [
+      "press",
+      "hover"
+    ],
+    "closeOnSelect": [
+      true,
+      false
+    ],
+    "search": [
+      true,
+      false
+    ],
+    "clearable": [
+      true,
+      false
+    ],
+    "portal": [
+      true,
+      false
+    ],
+    "disabled": [
+      true,
+      false
+    ],
+    "readOnly": [
+      true,
+      false
+    ],
+    "required": [
+      true,
+      false
+    ],
+    "invalid": [
+      true,
+      false
+    ],
+    "variant": [
+      "outline",
+      "subtle",
+      "plain"
+    ],
+    "fullWidth": [
+      true,
+      false
+    ]
+  },
+  "members": {
+    "cascader": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "layout": "auto",
+        "selectionMode": "single",
+        "selectable": "leaf",
+        "checkedStrategy": "all",
+        "expandOn": "press",
+        "closeOnSelect": true,
+        "search": false,
+        "clearable": true,
+        "portal": true,
+        "disabled": false,
+        "readOnly": false,
+        "required": false,
+        "invalid": false,
+        "separator": "/",
+        "hoverDelay": 150,
+        "variant": "outline",
+        "fullWidth": true,
+        "maxColumns": 3,
+        "maxCrumbs": 4
+      },
+      "capabilities": [
+        "selection",
+        "value",
+        "open",
+        "current",
+        "size",
+        "appearance",
+        "placement",
+        "content",
+        "fullWidth",
+        "disabled",
+        "loading",
+        "readOnly",
+        "required",
+        "invalid",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "open",
+        "expanded",
+        "selected",
+        "indeterminate",
+        "current",
+        "disabled",
+        "readonly",
+        "invalid",
+        "required",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "trigger",
+        "value",
+        "value-segment",
+        "value-separator",
+        "placeholder",
+        "tags",
+        "summary",
+        "clear",
+        "busy",
+        "arrow",
+        "positioner",
+        "content",
+        "search",
+        "search-input",
+        "breadcrumb",
+        "crumb",
+        "panel",
+        "column",
+        "node",
+        "indicator",
+        "icon",
+        "label",
+        "match",
+        "description",
+        "meta",
+        "expander",
+        "loader",
+        "status",
+        "empty"
+      ]
+    }
+  },
+  "docs": {
+    "cascader": {
+      "imports": {
+        "source": "import { provideCascaderDefaults, SlCascader, SlCascaderNode, SlCascaderPanel } from '@slotted/angular/cascader';",
+        "selector": "sl-cascader, sl-cascader-panel, ng-template[slCascaderNode]",
+        "exportAs": "slCascader, slCascaderPanel"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div",
+          "required": true,
+          "purpose": "The field: select’s frame, with the size, the variant and every state as data attributes."
+        },
+        {
+          "part": "trigger",
+          "element": "button",
+          "required": true,
+          "purpose": "role=\"combobox\". It names the tree it opens with aria-haspopup=\"tree\", or dialog when search is on, and names the active node with aria-activedescendant."
+        },
+        {
+          "part": "value",
+          "element": "span",
+          "required": false,
+          "purpose": "The path of the chosen node, or the summary of a multiple selection. The whole path stays in the DOM, so the name is never the ellipsis."
+        },
+        {
+          "part": "value-segment",
+          "element": "span",
+          "required": false,
+          "purpose": "One level of the path. The middle segments give way first, the chosen place last."
+        },
+        {
+          "part": "value-separator",
+          "element": "span",
+          "required": false,
+          "purpose": "The separator between two segments, hidden from a reader who hears the segments as one name."
+        },
+        {
+          "part": "placeholder",
+          "element": "span",
+          "required": false,
+          "purpose": "What the control says while nothing is chosen."
+        },
+        {
+          "part": "tags",
+          "element": "span",
+          "required": false,
+          "purpose": "The chips of a multiple selection, beside the trigger rather than in it, each with its own remove control."
+        },
+        {
+          "part": "summary",
+          "element": "span",
+          "required": false,
+          "purpose": "“3 selected”: the name of a multiple selection, shown when the control is too narrow for chips."
+        },
+        {
+          "part": "clear",
+          "element": "button",
+          "required": false,
+          "purpose": "Clears the value and gives focus back to the trigger."
+        },
+        {
+          "part": "busy",
+          "element": "span",
+          "required": false,
+          "purpose": "The ring where the chevron stands while the value’s path is resolving."
+        },
+        {
+          "part": "arrow",
+          "element": "span",
+          "required": false,
+          "purpose": "The chevron, turned over while the popup is open."
+        },
+        {
+          "part": "positioner",
+          "element": "div",
+          "required": true,
+          "purpose": "The layer the positioner places. It carries data-layout and reserves the widest width the window of columns can reach, so a growing path never moves it."
+        },
+        {
+          "part": "content",
+          "element": "div",
+          "required": true,
+          "purpose": "The surface. role=\"dialog\" with search; on its own, with data-ui, it is the panel on the page."
+        },
+        {
+          "part": "search",
+          "element": "div",
+          "required": false,
+          "purpose": "The search row, under search."
+        },
+        {
+          "part": "search-input",
+          "element": "input",
+          "required": false,
+          "purpose": "role=\"combobox\" with aria-autocomplete=\"list\"; it holds focus and the active descendant while the popup is open."
+        },
+        {
+          "part": "breadcrumb",
+          "element": "nav",
+          "required": false,
+          "purpose": "The levels behind the ones on show: in drill always, in columns once the window has slid. One line; a deep trail folds its middle into one crumb."
+        },
+        {
+          "part": "crumb",
+          "element": "button",
+          "required": false,
+          "purpose": "A level to go back to. The level on show carries aria-current=\"location\"; the fold carries data-collapsed."
+        },
+        {
+          "part": "panel",
+          "element": "div",
+          "required": true,
+          "purpose": "role=\"tree\", aria-multiselectable under a multiple selection."
+        },
+        {
+          "part": "column",
+          "element": "div",
+          "required": true,
+          "purpose": "role=\"group\", named by the branch whose children it lists. One per level in columns, one in drill and tree."
+        },
+        {
+          "part": "node",
+          "element": "div",
+          "required": true,
+          "purpose": "role=\"treeitem\" with aria-level, aria-posinset, aria-setsize, aria-expanded on a branch and aria-selected or aria-checked."
+        },
+        {
+          "part": "indicator",
+          "element": "span",
+          "required": false,
+          "purpose": "The check of a single selection at the end, or the box of a multiple selection at the start."
+        },
+        {
+          "part": "icon",
+          "element": "span",
+          "required": false,
+          "purpose": "The node’s own picture, from the node template."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": true,
+          "purpose": "The node’s name, from the slCascaderNode template or the label. It clamps at two lines."
+        },
+        {
+          "part": "match",
+          "element": "mark",
+          "required": false,
+          "purpose": "The span of a label a query matched."
+        },
+        {
+          "part": "description",
+          "element": "span",
+          "required": false,
+          "purpose": "A line under the label, from getDescription, or the road to a search hit."
+        },
+        {
+          "part": "meta",
+          "element": "span",
+          "required": false,
+          "purpose": "The count of a branch, or how many inside it are chosen."
+        },
+        {
+          "part": "expander",
+          "element": "span",
+          "required": false,
+          "purpose": "The chevron of a branch, pointing along the reading direction; the spinner while its level loads."
+        },
+        {
+          "part": "loader",
+          "element": "div",
+          "required": false,
+          "purpose": "A row of the level on its way, the height of a node."
+        },
+        {
+          "part": "status",
+          "element": "div",
+          "required": false,
+          "purpose": "role=\"status\": how many results a query found, or a level that failed with its retry."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "A level with nothing in it, or a query with no answer."
+        }
+      ],
+      "api": [
+        {
+          "name": "nodes",
+          "type": "readonly T[]",
+          "defaultValue": "[]",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The roots, nested, or a flat list read with getParent."
+        },
+        {
+          "name": "getKey",
+          "type": "(node) => string",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "A stable key, which is also the value."
+        },
+        {
+          "name": "getLabel",
+          "type": "(node) => string",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The name, which search and typeahead read."
+        },
+        {
+          "name": "getChildren",
+          "type": "(node) => T[] | undefined",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The children of a nested node."
+        },
+        {
+          "name": "getParent",
+          "type": "(node) => string | null",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "Opts in to a flat list; an unknown parent makes a root."
+        },
+        {
+          "name": "hasChildren",
+          "type": "(node) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "A branch whose children have not arrived says so."
+        },
+        {
+          "name": "isNodeDisabled",
+          "type": "(node) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "Stays on show and reachable, never chosen."
+        },
+        {
+          "name": "isNodeLoading",
+          "type": "(node) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The children of this branch are on their way."
+        },
+        {
+          "name": "isNodeFailed",
+          "type": "(node) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The children of this branch could not be loaded."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The roots are on their way: the first level waits as rows and the control shows the ring."
+        },
+        {
+          "name": "value",
+          "type": "model<string | null | string[]>",
+          "defaultValue": "null",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "A scalar for one choice, a list for many. A model, so [(value)] is both the value and the write-back."
+        },
+        {
+          "name": "open",
+          "type": "model<boolean>",
+          "defaultValue": "false",
+          "appliesTo": "sl-cascader",
+          "description": "Whether the popup is showing."
+        },
+        {
+          "name": "path",
+          "type": "model<readonly string[]>",
+          "defaultValue": "[]",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The branches whose levels are on show, root first."
+        },
+        {
+          "name": "activeKey",
+          "type": "model<string | null>",
+          "defaultValue": "null",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The node under the cursor."
+        },
+        {
+          "name": "expandedKeys",
+          "type": "model<readonly string[]>",
+          "defaultValue": "[]",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The branches open in place, under layout=\"tree\"."
+        },
+        {
+          "name": "searchValue",
+          "type": "model<string>",
+          "defaultValue": "''",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The query, under search."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The control and the surface together."
+        },
+        {
+          "name": "variant",
+          "type": "'outline' | 'subtle' | 'plain'",
+          "defaultValue": "outline",
+          "appliesTo": "sl-cascader",
+          "description": "sl-select’s three frames."
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-cascader",
+          "description": "Whether the control fills its field."
+        },
+        {
+          "name": "layout",
+          "type": "'auto' | 'columns' | 'drill' | 'tree'",
+          "defaultValue": "auto",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "auto shows columns while two fit and drills below that."
+        },
+        {
+          "name": "selectionMode",
+          "type": "'single' | 'multiple'",
+          "defaultValue": "single",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "One place, or many."
+        },
+        {
+          "name": "selectable",
+          "type": "'leaf' | 'any' | (node) => boolean",
+          "defaultValue": "leaf",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "Which nodes a single selection may commit."
+        },
+        {
+          "name": "checkedStrategy",
+          "type": "'all' | 'parent' | 'child'",
+          "defaultValue": "all",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "Which keys a multiple selection emits."
+        },
+        {
+          "name": "expandOn",
+          "type": "'press' | 'hover'",
+          "defaultValue": "press",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "Whether a rest on a branch shows its level. Hover never commits."
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-cascader",
+          "description": "Whether a single commit closes the popup."
+        },
+        {
+          "name": "search",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "A field that finds nodes at any depth."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-cascader",
+          "description": "Whether a clear button stands in the control while it holds a value."
+        },
+        {
+          "name": "portal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-cascader",
+          "description": "Whether the layer is rendered at the end of the document."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-cascader",
+          "description": "Never opens and answers nothing; a disabled form control says the same."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "Opens and walks, and refuses every change."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-cascader",
+          "description": "Says aria-required, and the Validator reports required."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-cascader",
+          "description": "Says aria-invalid and paints the frame."
+        },
+        {
+          "name": "separator",
+          "type": "string",
+          "defaultValue": "/",
+          "appliesTo": "sl-cascader",
+          "description": "Between two segments of the path."
+        },
+        {
+          "name": "hoverDelay",
+          "type": "number",
+          "defaultValue": "150",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "How long a rest on a branch waits before its level shows, under expandOn=\"hover\"."
+        },
+        {
+          "name": "maxColumns",
+          "type": "number",
+          "defaultValue": "3",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The most columns on show at once, whatever the room."
+        },
+        {
+          "name": "maxCrumbs",
+          "type": "number",
+          "defaultValue": "4",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The most crumbs before the middle folds."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader",
+          "description": "Submits one hidden input per emitted key."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<CascaderMessages>",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "Words laid over the language in force, key by key: placeholder, clear, remove ({label}), summary ({count}), search, searchPlaceholder, root, back ({label}), breadcrumb, empty, noResults ({query}), results ({count}), loading, failed ({label}), retry"
+        },
+        {
+          "name": "valueTemplate",
+          "type": "TemplateRef<{ $implicit: T[] }>",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader",
+          "description": "The value’s path as the control prints it."
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideCascaderDefaults",
+          "type": "provider",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Sets every axis once, in the bootstrap or on a route; the words come from the language in force (provideSlotted). A cascader that states one itself still wins."
+        },
+        {
+          "name": "ng-template[slCascaderNode]",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "The label of a node, with the item as $implicit and its state as view."
+        },
+        {
+          "name": "ControlValueAccessor",
+          "type": "forms",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader",
+          "description": "formControl, formControlName and ngModel; a disabled control disables the cascader."
+        },
+        {
+          "name": "exportAs",
+          "type": "template reference",
+          "defaultValue": "—",
+          "appliesTo": "sl-cascader, sl-cascader-panel",
+          "description": "A template reaches the instance — #places=\"slCascader\" — for focus() and revealValue()."
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChangeRequest",
+          "payload": "ChangeRequest<CascaderValue>",
+          "when": "Before the value moves: pointer, keyboard, select, clear, remove or programmatic. cancel() refuses it."
+        },
+        {
+          "name": "openChangeRequest",
+          "payload": "ChangeRequest<boolean>",
+          "when": "Before the popup opens or closes, with the reason."
+        },
+        {
+          "name": "pathChangeRequest",
+          "payload": "ChangeRequest<string[]>",
+          "when": "Before a level is shown or left."
+        },
+        {
+          "name": "activeKeyChangeRequest",
+          "payload": "ChangeRequest<string | null>",
+          "when": "Before the cursor moves."
+        },
+        {
+          "name": "expandedKeysChangeRequest",
+          "payload": "ChangeRequest<string[]>",
+          "when": "Before a branch opens or closes in place, under layout=\"tree\"."
+        },
+        {
+          "name": "searchValueChangeRequest",
+          "payload": "ChangeRequest<string>",
+          "when": "Before the query changes."
+        },
+        {
+          "name": "loadChildren",
+          "payload": "{ key, signal }",
+          "when": "A level that has not arrived is shown. The signal aborts when the path moves away or the popup closes."
+        },
+        {
+          "name": "retry",
+          "payload": "string",
+          "when": "The reader pressed retry on a level that failed."
+        }
+      ],
+      "accessibility": [
+        "The control is a combobox whose popup is a tree, in all three layouts: the tree view pattern gives a branch aria-expanded, a level aria-level and a set aria-posinset and aria-setsize, so nothing has to be folded into a name.",
+        "DOM focus stays on the control — or on the search field, which the combobox pattern moves it into for a dialog popup — and the cursor is aria-activedescendant. The arrows follow the tree popup section of the pattern, mirrored in right-to-left, with one written departure: in columns and drill the vertical arrows stay in the active column.",
+        "A multiple selection is aria-multiselectable with aria-checked on each node and mixed on a branch partly chosen. A disabled node stays reachable and is never chosen.",
+        "A level on its way carries aria-busy on its column; a level that failed says so in a status row with a real retry button outside the tree; a query reports its count in a polite status."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-medium",
+    "--slotted-border-width-thin",
+    "--slotted-cascader-arrow-color",
+    "--slotted-cascader-background",
+    "--slotted-cascader-border-color",
+    "--slotted-cascader-border-subtle",
+    "--slotted-cascader-column-measure",
+    "--slotted-cascader-content-radius",
+    "--slotted-cascader-content-shadow",
+    "--slotted-cascader-highlight",
+    "--slotted-cascader-highlight-active",
+    "--slotted-cascader-highlight-ring",
+    "--slotted-cascader-hover-border-color",
+    "--slotted-cascader-icon-size-min",
+    "--slotted-cascader-indent",
+    "--slotted-cascader-invalid-border-color",
+    "--slotted-cascader-invalid-edge-width",
+    "--slotted-cascader-mark-inset",
+    "--slotted-cascader-open-border-color",
+    "--slotted-cascader-path",
+    "--slotted-cascader-placeholder-color",
+    "--slotted-cascader-radius",
+    "--slotted-cascader-selected-color",
+    "--slotted-cascader-separator-color",
+    "--slotted-cascader-surface",
+    "--slotted-control-border-color",
+    "--slotted-control-border-width",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-lg",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-lg",
+    "--slotted-control-height-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-lg",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-inner-size-lg",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-inner-size-sm",
+    "--slotted-control-invalid-edge-width",
+    "--slotted-control-padding-inline-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-radius",
+    "--slotted-control-shadow",
+    "--slotted-control-shadow-focus-geometry",
+    "--slotted-control-surface",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-background",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-radius-lg",
+    "--slotted-radius-none",
+    "--slotted-radius-sm",
+    "--slotted-radius-xs",
+    "--slotted-selection-size-lg",
+    "--slotted-selection-size-md",
+    "--slotted-selection-size-sm",
+    "--slotted-shadow-md",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-surface-raised",
+    "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-on-solid",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-secondary-surface",
+    "--slotted-z-index-popover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One cascader with the common axes on it. Open it, walk the levels with the arrows, and choose a place.",
+      "language": "html",
+      "source": "<sl-cascader\n  aria-label=\"Location\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n  [(value)]=\"place\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "columns",
+      "title": "Columns",
+      "note": "One column per level of the path, side by side: the road from the first column to the value reads as one line, and each count ends on one edge.",
+      "language": "html",
+      "source": "<sl-cascader\n  layout=\"columns\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "drill",
+      "title": "Drill",
+      "note": "One level at a time, with the levels behind it in a breadcrumb. It is what layout=\"auto\" chooses where two columns do not fit.",
+      "language": "html",
+      "source": "<sl-cascader\n  layout=\"drill\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tree",
+      "title": "Tree",
+      "note": "Every level in one indented list, branches opening in place. The chevron turns down as its level opens.",
+      "language": "html",
+      "source": "<sl-cascader\n  layout=\"tree\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "layout-auto",
+      "title": "Layout from the room",
+      "note": "The same cascader in a narrow and a wide container. The narrow one drills; the wide one shows columns, never more than maxColumns, and slides past a level when the path is deeper.",
+      "language": "html",
+      "source": "<sl-cascader\n  layout=\"auto\"\n  [maxColumns]=\"3\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "search",
+      "title": "Search",
+      "note": "A query finds a node at any depth and prints the road to it under the label. The navigation path is untouched, and clearing the query shows it again.",
+      "language": "html",
+      "source": "<sl-cascader search [nodes]=\"places\" [getKey]=\"key\" [getLabel]=\"label\" [getChildren]=\"children\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "multiple",
+      "title": "Multiple",
+      "note": "A box per node. A branch’s box takes everything below it, a branch partly chosen shows the dash, and checkedStrategy decides whether the branch or its leaves are emitted.",
+      "language": "html",
+      "source": "<sl-cascader\n  selectionMode=\"multiple\"\n  checkedStrategy=\"parent\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "any-level",
+      "title": "Any level",
+      "note": "selectable=\"any\" lets a branch be chosen: pressing it opens its level and chooses it, so a reader can stop at a country or go on to a city.",
+      "language": "html",
+      "source": "<sl-cascader\n  selectable=\"any\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "lazy",
+      "title": "Levels on demand",
+      "note": "A branch whose children have not arrived asks for them as its level is shown, with a signal the family aborts if the reader moves on. The rows wait as the shape of what is coming.",
+      "language": "html",
+      "source": "<sl-cascader\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n  [hasChildren]=\"hasChildren\"\n  [isNodeLoading]=\"isLoading\"\n  (loadChildren)=\"load($event.key, $event.signal)\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "value-path",
+      "title": "The path in the control",
+      "note": "A long path gives way in the middle, keeping the place itself, and a value template replaces the segments with anything the consumer draws.",
+      "language": "html",
+      "source": "<sl-cascader\n  separator=\"›\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "panel",
+      "title": "Panel",
+      "note": "The same tree on the page, without a control or a layer. The tree takes focus itself and walks by the same keys.",
+      "language": "html",
+      "source": "<sl-cascader-panel\n  aria-label=\"Category\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "States",
+      "note": "Disabled, read-only, invalid, a disabled node, a level that failed with its retry, and a query with no answer.",
+      "language": "html",
+      "source": "<sl-cascader\n  [disabled]=\"true\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n/>\n<sl-cascader\n  [readOnly]=\"true\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n/>\n<sl-cascader\n  [invalid]=\"true\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "Down opens; Right enters a level, Left goes back, both mirrored in right-to-left; Up and Down stay in the column; Enter chooses; a letter jumps in the level.",
+      "language": "html",
+      "source": "<sl-cascader\n  aria-label=\"Location\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "In a form",
+      "note": "A form control with ControlValueAccessor and a Validator: required, and unresolved for a key the hierarchy no longer holds.",
+      "language": "html",
+      "source": "<sl-cascader\n  aria-label=\"Delivery area\"\n  [required]=\"true\"\n  [nodes]=\"places\"\n  [getKey]=\"key\"\n  [getLabel]=\"label\"\n  [getChildren]=\"children\"\n  [formControl]=\"area\"\n/>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}