{
  "slug": "css-tab-shape",
  "version": "1.0.0",
  "params": [
    {
      "key": "technique",
      "attr": "data-technique",
      "type": "string",
      "default": "folder",
      "min": null,
      "max": null,
      "step": null,
      "unit": null,
      "options": [
        "folder",
        "clip-path",
        "mask"
      ],
      "label": "Technique",
      "section": "Shape",
      "help": "Folder: shape() with a slanted right edge. Clip-path: shape() with flared feet. Mask: a border cut away with mask layers."
    },
    {
      "key": "radius",
      "attr": "data-radius",
      "type": "number",
      "default": 8,
      "min": 2,
      "max": 32,
      "step": 1,
      "unit": null,
      "options": null,
      "label": "Radius",
      "section": "Shape",
      "help": "Corner radius in px. The folder slant scales with it."
    },
    {
      "key": "paddingX",
      "attr": "data-padding-x",
      "type": "number",
      "default": 24,
      "min": 0,
      "max": 64,
      "step": 1,
      "unit": null,
      "options": null,
      "label": "Padding X",
      "section": "Shape",
      "help": "Space left and right of the label."
    },
    {
      "key": "paddingY",
      "attr": "data-padding-y",
      "type": "number",
      "default": 8,
      "min": 0,
      "max": 32,
      "step": 1,
      "unit": null,
      "options": null,
      "label": "Padding Y",
      "section": "Shape",
      "help": "Space above and below the label."
    },
    {
      "key": "gap",
      "attr": "data-gap",
      "type": "number",
      "default": 0,
      "min": 0,
      "max": 24,
      "step": 1,
      "unit": null,
      "options": null,
      "label": "Gap",
      "section": "Shape",
      "help": "Space between tabs."
    },
    {
      "key": "overlap",
      "attr": "data-overlap",
      "type": "number",
      "default": 0,
      "min": 0,
      "max": 32,
      "step": 1,
      "unit": null,
      "options": null,
      "label": "Overlap",
      "section": "Shape",
      "help": "How far each tab slides under the one before it."
    },
    {
      "key": "tabColor",
      "attr": "data-tab-color",
      "type": "color",
      "default": "#60A5FA",
      "min": null,
      "max": null,
      "step": null,
      "unit": null,
      "options": null,
      "label": "Tab",
      "section": "Color",
      "help": "Fill of every tab."
    },
    {
      "key": "activeColor",
      "attr": "data-active-color",
      "type": "color",
      "default": "#67E8F9",
      "min": null,
      "max": null,
      "step": null,
      "unit": null,
      "options": null,
      "label": "Active",
      "section": "Color",
      "help": "Fill of the first and the hovered tab when hover highlight is on."
    },
    {
      "key": "textColor",
      "attr": "data-text-color",
      "type": "color",
      "default": "#18181B",
      "min": null,
      "max": null,
      "step": null,
      "unit": null,
      "options": null,
      "label": "Text",
      "section": "Color",
      "help": "Label colour."
    },
    {
      "key": "trackColor",
      "attr": "data-track-color",
      "type": "color",
      "default": "#FFFFFF",
      "min": null,
      "max": null,
      "step": null,
      "unit": null,
      "options": null,
      "label": "Strip",
      "section": "Color",
      "help": "Colour of the strip behind the tabs."
    },
    {
      "key": "bgColor",
      "attr": "data-bg-color",
      "type": "color",
      "default": "#FFFFFF",
      "min": null,
      "max": null,
      "step": null,
      "unit": null,
      "options": null,
      "label": "Background",
      "section": "Color",
      "help": "Colour of the page around the strip."
    },
    {
      "key": "hoverHighlight",
      "attr": "data-hover-highlight",
      "type": "boolean",
      "default": false,
      "min": null,
      "max": null,
      "step": null,
      "unit": null,
      "options": null,
      "label": "Hover highlight",
      "section": "Color",
      "help": "Only the first and the hovered tab are filled, with the active colour."
    }
  ]
}