@umbraco-ui/uui-tabs/custom-elements.json

This package contains two elements, <uui-tab> and <uui-tab-group>

{
  "version": "experimental",
  "tags": [
    {
      "name": "uui-tab-group",
      "path": "./lib/uui-tab-group.element.ts",
      "attributes": [
        {
          "name": "dropdown-content-direction",
          "description": "Set the flex direction of the content of the dropdown.",
          "type": "string",
          "default": "\"vertical\""
        }
      ],
      "properties": [
        {
          "name": "dropdownContentDirection",
          "attribute": "dropdown-content-direction",
          "description": "Set the flex direction of the content of the dropdown.",
          "type": "string",
          "default": "\"vertical\""
        },
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null]"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "Default slot for the tab group"
        }
      ],
      "cssProperties": [
        {
          "name": "--uui-tab-group-dropdown-tab-text",
          "description": "Define the tab text color in the dropdown"
        },
        {
          "name": "--uui-tab-group-dropdown-tab-text-hover",
          "description": "Define the tab text hover color in the dropdown"
        },
        {
          "name": "--uui-tab-group-dropdown-tab-text-active",
          "description": "Define the tab text active color in the dropdown"
        },
        {
          "name": "--uui-tab-group-dropdown-background",
          "description": "Define the background color of the dropdown"
        },
        {
          "name": "--uui-tab-group-gap",
          "description": "Define the gap between elements dropdown. Only pixel values are valid"
        }
      ]
    },
    {
      "name": "uui-tabs",
      "path": "./lib/uui-tab.element.ts",
      "description": "A single tab. Should be put into `<uui-tab-group>`,",
      "attributes": [
        {
          "name": "disabled",
          "description": "Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "href",
          "description": "Set an href, this will turns the inner button into a anchor tag.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "target",
          "description": "Set an anchor tag target, only used when using href.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "rel",
          "description": "Set the rel attribute for an anchor tag, only used when using href.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "orientation",
          "description": "Set the visual orientation of this tab, this changes the look and placement of the active indication.",
          "type": "string",
          "default": "\"horizontal\""
        },
        {
          "name": "active",
          "description": "Set this boolean to true for then the related composition is sorted.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "label",
          "description": "Label to be used for aria-label and potentially as visual label for some components",
          "type": "string"
        }
      ],
      "properties": [
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "href",
          "attribute": "href",
          "description": "Set an href, this will turns the inner button into a anchor tag.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "target",
          "attribute": "target",
          "description": "Set an anchor tag target, only used when using href.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "rel",
          "attribute": "rel",
          "description": "Set the rel attribute for an anchor tag, only used when using href.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "orientation",
          "attribute": "orientation",
          "description": "Set the visual orientation of this tab, this changes the look and placement of the active indication.",
          "type": "string",
          "default": "\"horizontal\""
        },
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null]"
        },
        {
          "name": "active",
          "attribute": "active",
          "description": "Set this boolean to true for then the related composition is sorted.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "label",
          "attribute": "label",
          "description": "Label to be used for aria-label and potentially as visual label for some components",
          "type": "string"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "for label"
        },
        {
          "name": "icon",
          "description": "for icon"
        },
        {
          "name": "extra",
          "description": "for extra"
        }
      ],
      "cssProperties": [
        {
          "name": "--uui-tab-text",
          "description": "Define the tab text color"
        },
        {
          "name": "--uui-tab-text-hover",
          "description": "Define the tab text hover color"
        },
        {
          "name": "--uui-tab-text-active",
          "description": "Define the tab text active color"
        },
        {
          "name": "--uui-tab-divider",
          "description": "Define the tab dividers color"
        },
        {
          "name": "--uui-tab-padding-horizontal",
          "description": "Define the tab horizontal padding"
        }
      ]
    },
    {
      "name": "uui-tab",
      "path": "./lib/uui-tab.element.ts",
      "description": "A single tab. Should be put into `<uui-tab-group>`,",
      "attributes": [
        {
          "name": "disabled",
          "description": "Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "href",
          "description": "Set an href, this will turns the inner button into a anchor tag.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "target",
          "description": "Set an anchor tag target, only used when using href.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "rel",
          "description": "Set the rel attribute for an anchor tag, only used when using href.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "orientation",
          "description": "Set the visual orientation of this tab, this changes the look and placement of the active indication.",
          "type": "string",
          "default": "\"horizontal\""
        },
        {
          "name": "active",
          "description": "Set this boolean to true for then the related composition is sorted.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "label",
          "description": "Label to be used for aria-label and potentially as visual label for some components",
          "type": "string"
        }
      ],
      "properties": [
        {
          "name": "disabled",
          "attribute": "disabled",
          "description": "Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.",
          "type": "boolean",
          "default": "\"false\""
        },
        {
          "name": "href",
          "attribute": "href",
          "description": "Set an href, this will turns the inner button into a anchor tag.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "target",
          "attribute": "target",
          "description": "Set an anchor tag target, only used when using href.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "rel",
          "attribute": "rel",
          "description": "Set the rel attribute for an anchor tag, only used when using href.",
          "type": "string",
          "default": "\"undefined\""
        },
        {
          "name": "orientation",
          "attribute": "orientation",
          "description": "Set the visual orientation of this tab, this changes the look and placement of the active indication.",
          "type": "string",
          "default": "\"horizontal\""
        },
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null]"
        },
        {
          "name": "active",
          "attribute": "active",
          "description": "Set this boolean to true for then the related composition is sorted.",
          "type": "boolean",
          "default": "false"
        },
        {
          "name": "label",
          "attribute": "label",
          "description": "Label to be used for aria-label and potentially as visual label for some components",
          "type": "string"
        }
      ],
      "slots": [
        {
          "name": "",
          "description": "for label"
        },
        {
          "name": "icon",
          "description": "for icon"
        },
        {
          "name": "extra",
          "description": "for extra"
        }
      ],
      "cssProperties": [
        {
          "name": "--uui-tab-text",
          "description": "Define the tab text color"
        },
        {
          "name": "--uui-tab-text-hover",
          "description": "Define the tab text hover color"
        },
        {
          "name": "--uui-tab-text-active",
          "description": "Define the tab text active color"
        },
        {
          "name": "--uui-tab-divider",
          "description": "Define the tab dividers color"
        },
        {
          "name": "--uui-tab-padding-horizontal",
          "description": "Define the tab horizontal padding"
        }
      ]
    }
  ]
}