@commercetools/nimbus-mcp 0.1.0 → 2.11.0

package/data/docs/routes/home-style-props-interactivity.json

@@ -0,0 +1,356 @@
+{
+  "meta": {
+    "id": "Style Props-Interactivity",
+    "title": "Interactivity",
+    "description": "JSX style props to enhance interactivity on an element",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/interactivity.mdx",
+    "menu": [
+      "Home",
+      "Style Props",
+      "Interactivity"
+    ],
+    "route": "home/style-props/interactivity",
+    "tags": [
+      "document"
+    ],
+    "toc": [
+      {
+        "value": "Accent Color",
+        "href": "#accent-color",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Appearance",
+        "href": "#appearance",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Caret Color",
+        "href": "#caret-color",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Cursor",
+        "href": "#cursor",
+        "depth": 2,
+        "numbering": [
+          1,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Pointer Events",
+        "href": "#pointer-events",
+        "depth": 2,
+        "numbering": [
+          1,
+          5
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resize",
+        "href": "#resize",
+        "depth": 2,
+        "numbering": [
+          1,
+          6
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Scrollbar",
+        "href": "#scrollbar",
+        "depth": 2,
+        "numbering": [
+          1,
+          7
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Scroll Behavior",
+        "href": "#scroll-behavior",
+        "depth": 2,
+        "numbering": [
+          1,
+          8
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Scroll Margin",
+        "href": "#scroll-margin",
+        "depth": 2,
+        "numbering": [
+          1,
+          9
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Scroll Padding",
+        "href": "#scroll-padding",
+        "depth": 2,
+        "numbering": [
+          1,
+          10
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Scroll Snap Margin",
+        "href": "#scroll-snap-margin",
+        "depth": 2,
+        "numbering": [
+          1,
+          11
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Scroll Snap Type",
+        "href": "#scroll-snap-type",
+        "depth": 2,
+        "numbering": [
+          1,
+          12
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Scroll Snap Strictness",
+        "href": "#scroll-snap-strictness",
+        "depth": 2,
+        "numbering": [
+          1,
+          13
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Touch Action",
+        "href": "#touch-action",
+        "depth": 2,
+        "numbering": [
+          1,
+          14
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "User Select",
+        "href": "#user-select",
+        "depth": 2,
+        "numbering": [
+          1,
+          15
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Will Change",
+        "href": "#will-change",
+        "depth": 2,
+        "numbering": [
+          1,
+          16
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Interactivity\n\nJSX style props to enhance interactivity on an element\n\n## Accent Color\n\nUse the `accentColor` prop to set the accent color for browser generated\nuser-interface controls.\n\n```jsx\n// hardcoded\n<label>\n  <chakra.input type=\"checkbox\" accentColor=\"#3b82f6\" />\n</label>\n\n// token value\n<label>\n  <chakra.input type=\"checkbox\" accentColor=\"blue.500\" />\n</label>\n```\n\n| Prop          | CSS Property   | Token Category |\n| ------------- | -------------- | -------------- |\n| `accentColor` | `accent-color` | `colors`       |\n\n## Appearance\n\nUse the `appearance` prop to set the appearance of an element.\n\n```jsx\n<chakra.select appearance=\"none\">\n  <option value=\"1\">Option 1</option>\n  <option value=\"2\">Option 2</option>\n  <option value=\"3\">Option 3</option>\n</chakra.select>\n```\n\n| Prop         | CSS Property | Token Category |\n| ------------ | ------------ | -------------- |\n| `appearance` | `appearance` | -              |\n\n## Caret Color\n\nUse the `caretColor` prop to set the color of the text cursor (caret) in an\ninput or textarea\n\n```jsx\n// hardcoded\n<chakra.input caretColor=\"#3b82f6\" />\n\n// token value\n<chakra.input caretColor=\"blue.500\" />\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `caretColor` | `caret-color` | `colors`       |\n\n## Cursor\n\nUse the `cursor` prop to set the mouse cursor image to show when the mouse\npointer is over an element.\n\n```jsx\n<Box cursor=\"pointer\" />\n```\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| `cursor` | `cursor`     | -              |\n\n## Pointer Events\n\nUse the `pointerEvents` prop to control how pointer events are handled on an\nelement.\n\n```jsx\n<Box pointerEvents=\"none\">Can't click me</Box>\n```\n\n| Prop            | CSS Property     | Token Category |\n| --------------- | ---------------- | -------------- |\n| `pointerEvents` | `pointer-events` | -              |\n\n## Resize\n\nUse the `resize` prop to control whether an element is resizable, and if so, in\nwhich directions.\n\n```jsx\n<chakra.textarea resize=\"both\" />\n<chakra.textarea resize=\"horizontal\" />\n<chakra.textarea resize=\"vertical\" />\n```\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| `resize` | `resize`     | -              |\n\n## Scrollbar\n\nUse the `scrollbar` prop to customize the appearance of scrollbars.\n\n```jsx\n<Box scrollbar=\"hidden\" maxH=\"100px\" overflowY=\"auto\">\n  Scrollbar hidden\n</Box>\n```\n\n## Scroll Behavior\n\nUse the `scrollBehavior` prop to set the behavior for a scrolling box when\nscrolling is triggered by the navigation or JavaScript code.\n\n```jsx\n<Box maxH=\"100px\" overflowY=\"auto\" scrollBehavior=\"smooth\">\n  <div>Scroll me</div>\n</Box>\n```\n\n| Prop             | CSS Property      | Token Category |\n| ---------------- | ----------------- | -------------- |\n| `scrollBehavior` | `scroll-behavior` | -              |\n\n## Scroll Margin\n\nUse the `scrollMargin*` prop to set margins around scroll containers.\n\n```jsx\n<Box maxH=\"100px\" overflowY=\"auto\" scrollMarginY=\"2\">\n  Scrollbar Container with block padding\n</Box>\n```\n\n| Prop                                  | CSS Property                 | Token Category |\n| ------------------------------------- | ---------------------------- | -------------- |\n| `scrollMarginX` ,`scrollMarginInline` | `scroll-margin-inline`       | `spacing`      |\n| `scrollMarginInlineStart`             | `scroll-margin-inline-start` | `spacing`      |\n| `scrollMarginInlineEnd`               | `scroll-margin-inline-end`   | `spacing`      |\n| `scrollMarginY` , `scrollMarginBlock` | `scroll-margin-block`        | `spacing`      |\n| `scrollMarginBlockStart`              | `scroll-margin-block-start`  | `spacing`      |\n| `scrollMarginBlockEnd`                | `scroll-margin-block-end`    | `spacing`      |\n| `scrollMarginLeft`                    | `scroll-margin-left`         | `spacing`      |\n| `scrollMarginRight`                   | `scroll-margin-right`        | `spacing`      |\n| `scrollMarginTop`                     | `scroll-margin-top`          | `spacing`      |\n| `scrollMarginBottom`                  | `scroll-margin-bottom`       | `spacing`      |\n\n## Scroll Padding\n\nUse the `scrollPadding*` prop to set padding inside scroll containers.\n\n```jsx\n<Box maxH=\"100px\" overflowY=\"auto\" scrollPaddingY=\"2\">\n  Scrollbar Container with block padding\n</Box>\n```\n\n| Prop                                     | CSS Property                  | Token Category |\n| ---------------------------------------- | ----------------------------- | -------------- |\n| `scrollPaddingX` , `scrollPaddingInline` | `scroll-padding-inline`       | `spacing`      |\n| `scrollPaddingInlineStart`               | `scroll-padding-inline-start` | `spacing`      |\n| `scrollPaddingInlineEnd`                 | `scroll-padding-inline-end`   | `spacing`      |\n| `scrollPaddingY` , `scrollPaddingBlock`  | `scroll-padding-block`        | `spacing`      |\n| `scrollPaddingBlockStart`                | `scroll-padding-block-start`  | `spacing`      |\n| `scrollPaddingBlockEnd`                  | `scroll-padding-block-end`    | `spacing`      |\n| `scrollPaddingLeft`                      | `scroll-padding-left`         | `spacing`      |\n| `scrollPaddingRight`                     | `scroll-padding-right`        | `spacing`      |\n| `scrollPaddingTop`                       | `scroll-padding-top`          | `spacing`      |\n| `scrollPaddingBottom`                    | `scroll-padding-bottom`       | `spacing`      |\n\n## Scroll Snap Margin\n\nUse the `scrollSnapMargin*` prop to set margins around scroll containers.\n\n```jsx\n<Box maxH=\"100px\" overflowY=\"auto\" scrollSnapMarginY=\"2\">\n  Scrollbar Container with block padding\n</Box>\n```\n\n| Prop                     | CSS Property           | Token Category |\n| ------------------------ | ---------------------- | -------------- |\n| `scrollSnapMargin`       | `scroll-margin`        | `spacing`      |\n| `scrollSnapMarginTop`    | `scroll-margin-top`    | `spacing`      |\n| `scrollSnapMarginBottom` | `scroll-margin-bottom` | `spacing`      |\n| `scrollSnapMarginLeft`   | `scroll-margin-left`   | `spacing`      |\n| `scrollSnapMarginRight`  | `scroll-margin-right`  | `spacing`      |\n\n## Scroll Snap Type\n\nUse the `scrollSnapType` prop to control how strictly snap points are enforced\nin a scroll container.\n\n```jsx\n<Box maxH=\"100px\" overflowY=\"auto\" scrollSnapType=\"x\">\n  Scroll container with x snap type\n</Box>\n```\n\n| Value  |                                      |\n| ------ | ------------------------------------ |\n| `none` | `none`                               |\n| `x`    | `x var(--scroll-snap-strictness)`    |\n| `y`    | `y var(--scroll-snap-strictness)`    |\n| `both` | `both var(--scroll-snap-strictness)` |\n\n## Scroll Snap Strictness\n\nUse the `scrollSnapStrictness` prop to set the scroll snap strictness of an\nelement. This requires `scrollSnapType` to be set to `x`,`y` or `both`.\n\nIt's values can be `mandatory` or `proximity` values, and maps to\n`var(--scroll-snap-strictness)`.\n\n```jsx\n<Box maxH=\"100px\" overflowY=\"auto\" scrollSnapStrictness=\"proximity\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n</Box>\n```\n\n| Prop                   | CSS Property               | Token Category |\n| ---------------------- | -------------------------- | -------------- |\n| `scrollSnapStrictness` | `--scroll-snap-strictness` | -              |\n\n## Touch Action\n\nUse the `touchAction` prop to control how an element's region can be manipulated\nby a touchscreen user\n\n```jsx\n<Box touchAction=\"none\" />\n```\n\n| Prop          | CSS Property   | Token Category |\n| ------------- | -------------- | -------------- |\n| `touchAction` | `touch-action` | -              |\n\n## User Select\n\nUse the `userSelect` prop to control whether the user can select text within an\nelement.\n\n```jsx\n<Box userSelect=\"none\">\n  <p>Can't Select me</p>\n</Box>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `userSelect` | `user-select` | -              |\n\n## Will Change\n\nUse the `willChange` prop to hint browsers how an element's property is expected\nto change.\n\n```jsx\n<Box willChange=\"transform\" />\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `willChange` | `will-change` | -              |\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Interactivity\n\nJSX style props to enhance interactivity on an element\n\n## Accent Color\n\nUse the `accentColor` prop to set the accent color for browser generated\nuser-interface controls.\n\n```jsx\n// hardcoded\n<label>\n  <chakra.input type=\"checkbox\" accentColor=\"#3b82f6\" />\n</label>\n\n// token value\n<label>\n  <chakra.input type=\"checkbox\" accentColor=\"blue.500\" />\n</label>\n```\n\n| Prop          | CSS Property   | Token Category |\n| ------------- | -------------- | -------------- |\n| `accentColor` | `accent-color` | `colors`       |\n\n## Appearance\n\nUse the `appearance` prop to set the appearance of an element.\n\n```jsx\n<chakra.select appearance=\"none\">\n  <option value=\"1\">Option 1</option>\n  <option value=\"2\">Option 2</option>\n  <option value=\"3\">Option 3</option>\n</chakra.select>\n```\n\n| Prop         | CSS Property | Token Category |\n| ------------ | ------------ | -------------- |\n| `appearance` | `appearance` | -              |\n\n## Caret Color\n\nUse the `caretColor` prop to set the color of the text cursor (caret) in an\ninput or textarea\n\n```jsx\n// hardcoded\n<chakra.input caretColor=\"#3b82f6\" />\n\n// token value\n<chakra.input caretColor=\"blue.500\" />\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `caretColor` | `caret-color` | `colors`       |\n\n## Cursor\n\nUse the `cursor` prop to set the mouse cursor image to show when the mouse\npointer is over an element.\n\n```jsx\n<Box cursor=\"pointer\" />\n```\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| `cursor` | `cursor`     | -              |\n\n## Pointer Events\n\nUse the `pointerEvents` prop to control how pointer events are handled on an\nelement.\n\n```jsx\n<Box pointerEvents=\"none\">Can't click me</Box>\n```\n\n| Prop            | CSS Property     | Token Category |\n| --------------- | ---------------- | -------------- |\n| `pointerEvents` | `pointer-events` | -              |\n\n## Resize\n\nUse the `resize` prop to control whether an element is resizable, and if so, in\nwhich directions.\n\n```jsx\n<chakra.textarea resize=\"both\" />\n<chakra.textarea resize=\"horizontal\" />\n<chakra.textarea resize=\"vertical\" />\n```\n\n| Prop     | CSS Property | Token Category |\n| -------- | ------------ | -------------- |\n| `resize` | `resize`     | -              |\n\n## Scrollbar\n\nUse the `scrollbar` prop to customize the appearance of scrollbars.\n\n```jsx\n<Box scrollbar=\"hidden\" maxH=\"100px\" overflowY=\"auto\">\n  Scrollbar hidden\n</Box>\n```\n\n## Scroll Behavior\n\nUse the `scrollBehavior` prop to set the behavior for a scrolling box when\nscrolling is triggered by the navigation or JavaScript code.\n\n```jsx\n<Box maxH=\"100px\" overflowY=\"auto\" scrollBehavior=\"smooth\">\n  <div>Scroll me</div>\n</Box>\n```\n\n| Prop             | CSS Property      | Token Category |\n| ---------------- | ----------------- | -------------- |\n| `scrollBehavior` | `scroll-behavior` | -              |\n\n## Scroll Margin\n\nUse the `scrollMargin*` prop to set margins around scroll containers.\n\n```jsx\n<Box maxH=\"100px\" overflowY=\"auto\" scrollMarginY=\"2\">\n  Scrollbar Container with block padding\n</Box>\n```\n\n| Prop                                  | CSS Property                 | Token Category |\n| ------------------------------------- | ---------------------------- | -------------- |\n| `scrollMarginX` ,`scrollMarginInline` | `scroll-margin-inline`       | `spacing`      |\n| `scrollMarginInlineStart`             | `scroll-margin-inline-start` | `spacing`      |\n| `scrollMarginInlineEnd`               | `scroll-margin-inline-end`   | `spacing`      |\n| `scrollMarginY` , `scrollMarginBlock` | `scroll-margin-block`        | `spacing`      |\n| `scrollMarginBlockStart`              | `scroll-margin-block-start`  | `spacing`      |\n| `scrollMarginBlockEnd`                | `scroll-margin-block-end`    | `spacing`      |\n| `scrollMarginLeft`                    | `scroll-margin-left`         | `spacing`      |\n| `scrollMarginRight`                   | `scroll-margin-right`        | `spacing`      |\n| `scrollMarginTop`                     | `scroll-margin-top`          | `spacing`      |\n| `scrollMarginBottom`                  | `scroll-margin-bottom`       | `spacing`      |\n\n## Scroll Padding\n\nUse the `scrollPadding*` prop to set padding inside scroll containers.\n\n```jsx\n<Box maxH=\"100px\" overflowY=\"auto\" scrollPaddingY=\"2\">\n  Scrollbar Container with block padding\n</Box>\n```\n\n| Prop                                     | CSS Property                  | Token Category |\n| ---------------------------------------- | ----------------------------- | -------------- |\n| `scrollPaddingX` , `scrollPaddingInline` | `scroll-padding-inline`       | `spacing`      |\n| `scrollPaddingInlineStart`               | `scroll-padding-inline-start` | `spacing`      |\n| `scrollPaddingInlineEnd`                 | `scroll-padding-inline-end`   | `spacing`      |\n| `scrollPaddingY` , `scrollPaddingBlock`  | `scroll-padding-block`        | `spacing`      |\n| `scrollPaddingBlockStart`                | `scroll-padding-block-start`  | `spacing`      |\n| `scrollPaddingBlockEnd`                  | `scroll-padding-block-end`    | `spacing`      |\n| `scrollPaddingLeft`                      | `scroll-padding-left`         | `spacing`      |\n| `scrollPaddingRight`                     | `scroll-padding-right`        | `spacing`      |\n| `scrollPaddingTop`                       | `scroll-padding-top`          | `spacing`      |\n| `scrollPaddingBottom`                    | `scroll-padding-bottom`       | `spacing`      |\n\n## Scroll Snap Margin\n\nUse the `scrollSnapMargin*` prop to set margins around scroll containers.\n\n```jsx\n<Box maxH=\"100px\" overflowY=\"auto\" scrollSnapMarginY=\"2\">\n  Scrollbar Container with block padding\n</Box>\n```\n\n| Prop                     | CSS Property           | Token Category |\n| ------------------------ | ---------------------- | -------------- |\n| `scrollSnapMargin`       | `scroll-margin`        | `spacing`      |\n| `scrollSnapMarginTop`    | `scroll-margin-top`    | `spacing`      |\n| `scrollSnapMarginBottom` | `scroll-margin-bottom` | `spacing`      |\n| `scrollSnapMarginLeft`   | `scroll-margin-left`   | `spacing`      |\n| `scrollSnapMarginRight`  | `scroll-margin-right`  | `spacing`      |\n\n## Scroll Snap Type\n\nUse the `scrollSnapType` prop to control how strictly snap points are enforced\nin a scroll container.\n\n```jsx\n<Box maxH=\"100px\" overflowY=\"auto\" scrollSnapType=\"x\">\n  Scroll container with x snap type\n</Box>\n```\n\n| Value  |                                      |\n| ------ | ------------------------------------ |\n| `none` | `none`                               |\n| `x`    | `x var(--scroll-snap-strictness)`    |\n| `y`    | `y var(--scroll-snap-strictness)`    |\n| `both` | `both var(--scroll-snap-strictness)` |\n\n## Scroll Snap Strictness\n\nUse the `scrollSnapStrictness` prop to set the scroll snap strictness of an\nelement. This requires `scrollSnapType` to be set to `x`,`y` or `both`.\n\nIt's values can be `mandatory` or `proximity` values, and maps to\n`var(--scroll-snap-strictness)`.\n\n```jsx\n<Box maxH=\"100px\" overflowY=\"auto\" scrollSnapStrictness=\"proximity\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n</Box>\n```\n\n| Prop                   | CSS Property               | Token Category |\n| ---------------------- | -------------------------- | -------------- |\n| `scrollSnapStrictness` | `--scroll-snap-strictness` | -              |\n\n## Touch Action\n\nUse the `touchAction` prop to control how an element's region can be manipulated\nby a touchscreen user\n\n```jsx\n<Box touchAction=\"none\" />\n```\n\n| Prop          | CSS Property   | Token Category |\n| ------------- | -------------- | -------------- |\n| `touchAction` | `touch-action` | -              |\n\n## User Select\n\nUse the `userSelect` prop to control whether the user can select text within an\nelement.\n\n```jsx\n<Box userSelect=\"none\">\n  <p>Can't Select me</p>\n</Box>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `userSelect` | `user-select` | -              |\n\n## Will Change\n\nUse the `willChange` prop to hint browsers how an element's property is expected\nto change.\n\n```jsx\n<Box willChange=\"transform\" />\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `willChange` | `will-change` | -              |\n",
+      "toc": [
+        {
+          "value": "Accent Color",
+          "href": "#accent-color",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Appearance",
+          "href": "#appearance",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Caret Color",
+          "href": "#caret-color",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Cursor",
+          "href": "#cursor",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Pointer Events",
+          "href": "#pointer-events",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resize",
+          "href": "#resize",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Scrollbar",
+          "href": "#scrollbar",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Scroll Behavior",
+          "href": "#scroll-behavior",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Scroll Margin",
+          "href": "#scroll-margin",
+          "depth": 2,
+          "numbering": [
+            1,
+            9
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Scroll Padding",
+          "href": "#scroll-padding",
+          "depth": 2,
+          "numbering": [
+            1,
+            10
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Scroll Snap Margin",
+          "href": "#scroll-snap-margin",
+          "depth": 2,
+          "numbering": [
+            1,
+            11
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Scroll Snap Type",
+          "href": "#scroll-snap-type",
+          "depth": 2,
+          "numbering": [
+            1,
+            12
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Scroll Snap Strictness",
+          "href": "#scroll-snap-strictness",
+          "depth": 2,
+          "numbering": [
+            1,
+            13
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Touch Action",
+          "href": "#touch-action",
+          "depth": 2,
+          "numbering": [
+            1,
+            14
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "User Select",
+          "href": "#user-select",
+          "depth": 2,
+          "numbering": [
+            1,
+            15
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Will Change",
+          "href": "#will-change",
+          "depth": 2,
+          "numbering": [
+            1,
+            16
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}