{
  "ui-icon": {
    "attributes": [
      "type",
      "outlined",
      "round",
      "two-tone",
      "sharp",
      "size",
      "dark",
      "light",
      "inactive"
    ],
    "description": "Material icons are delightful, beautifully crafted symbols for common actions and items."
  },
  "ui-button": {
    "attributes": [
      "type",
      "outlined",
      "raised",
      "unelevated",
      "icon",
      "disabled",
      "native-type"
    ],
    "description": "Buttons allow users to take actions, and make choices, with a single tap."
  },
  "ui-fab": {
    "attributes": [
      "type",
      "extended",
      "icon",
      "mini",
      "exited"
    ],
    "description": "A floating action button (FAB) represents the primary action of a screen."
  },
  "ui-icon-button": {
    "attributes": [
      "model-value",
      "icon",
      "toggle"
    ],
    "description": "Icon buttons (Toggle buttons) allow users to take actions, and make choices, with a single tap."
  },
  "ui-segmented-buttons": {
    "attributes": [
      "model-value",
      "items",
      "single-select"
    ],
    "description": "Segmented buttons allow users to toggle the selected states of grouped buttons."
  },
  "ui-segmented-button": {
    "attributes": [
      "selected",
      "text",
      "icon"
    ],
    "description": "A segmented button."
  },
  "ui-top-app-bar": {
    "attributes": [
      "content-selector",
      "type",
      "fixed",
      "dense",
      "prominent",
      "prominent-dense",
      "short",
      "short-collapsed",
      "title",
      "nav-icon",
      "nav-id"
    ],
    "description": "The top app bar displays information and actions relating to the current screen."
  },
  "ui-grid": {
    "attributes": [
      "fixed-column-width",
      "position"
    ],
    "description": "Material design’s responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone."
  },
  "ui-grid-cell": {
    "attributes": [
      "nested",
      "columns",
      "order",
      "align"
    ],
    "description": "A grid cell."
  },
  "ui-form": {
    "attributes": [
      "type",
      "nowrap",
      "label-top-aligned",
      "label-right-aligned",
      "label-top-right-aligned",
      "item-margin-bottom",
      "action-align",
      "label-width",
      "label-margin-right",
      "label-margin-bottom"
    ],
    "description": "A form set."
  },
  "ui-form-field": {
    "attributes": [
      "nowrap",
      "align-end",
      "space-between"
    ],
    "description": "A form field."
  },
  "ui-divider": {
    "attributes": [
      "type"
    ],
    "description": "A divider is a thin line that groups content in lists and layouts."
  },
  "ui-drawer": {
    "attributes": [
      "type",
      "nav-id",
      "model-value",
      "viewport-height"
    ],
    "description": "Navigation drawers provide access to destinations in your app."
  },
  "ui-drawer-header": {
    "description": "Non-scrollable element that exists at the top of the drawer."
  },
  "ui-drawer-title": {
    "description": "Title text element of the drawer."
  },
  "ui-drawer-subtitle": {
    "description": "Subtitle text element of the drawer."
  },
  "ui-drawer-content": {
    "description": "Scrollable content area of the drawer."
  },
  "ui-drawer-app-content": {
    "description": "Mandatory for <ui-drawer type=\"dismissible\"> only. Sibling element that is resized when the drawer opens/closes."
  },
  "ui-tabs": {
    "attributes": [
      "model-value",
      "items",
      "type",
      "stacked",
      "min-width",
      "content-indicator"
    ],
    "description": "The shorthand for <ui-tab-bar> + <ui-tab>."
  },
  "ui-tab-bar": {
    "attributes": [
      "model-value"
    ],
    "description": "Tab items container."
  },
  "ui-tab": {
    "attributes": [
      "type",
      "stacked",
      "min-width",
      "content-indicator",
      "text",
      "icon"
    ],
    "description": "Tab item."
  },
  "ui-panels": {
    "attributes": [
      "model-value"
    ],
    "description": "Tab panels container."
  },
  "ui-panel": {
    "description": "Tab panel."
  },
  "ui-tab-indicator": {
    "attributes": [
      "type",
      "fade"
    ],
    "description": "Contains the custom tab indicator content."
  },
  "ui-tab-scroller": {
    "attributes": [
      "scroll-x",
      "align"
    ],
    "description": "Contains the custom tab scroller content."
  },
  "ui-menu-anchor": {
    "attributes": [
      "position",
      "absolute"
    ],
    "description": "Used to indicate which element the menu should be anchored to."
  },
  "ui-menu": {
    "attributes": [
      "model-value",
      "items",
      "quick-open",
      "position",
      "distance",
      "fixed",
      "fullwidth",
      "css-only"
    ],
    "description": "Menus display a list of choices on temporary surfaces."
  },
  "ui-menuitem": {
    "attributes": [
      "nested",
      "item",
      "value",
      "disabled",
      "selected"
    ],
    "description": "A menu item."
  },
  "ui-menuitem-text": {
    "description": "A menu item text."
  },
  "ui-menuitem-icon": {
    "description": "Required when using a <ui-menuitem nested> to indicate which item is selected. Should contain an icon or svg that indicates the selected state of the <ui-menuitem>."
  },
  "ui-menuitem-divider": {
    "description": "A menu item divider."
  },
  "ui-pagination": {
    "attributes": [
      "model-value",
      "total",
      "page-span",
      "show-total",
      "page-size",
      "page-size-text",
      "of-text",
      "unit-text",
      "show-jumper",
      "jumper-text",
      "jumper-button-outlined",
      "jumper-button-text",
      "position",
      "mini"
    ],
    "description": "Pagination controls provide swift access to all pages while indicating that more pages exist."
  },
  "ui-textfield": {
    "attributes": [
      "type",
      "outlined",
      "model-value",
      "input-type",
      "input-id",
      "label",
      "placeholder",
      "disabled",
      "required",
      "fullwidth",
      "end-aligned",
      "icon",
      "with-leading-icon",
      "with-trailing-icon",
      "helper-text-id",
      "prefix-text",
      "suffix-text",
      "with-counter",
      "minlength",
      "maxlength",
      "pattern",
      "min",
      "max",
      "step",
      "rows",
      "cols",
      "attrs"
    ],
    "description": "Text fields let users enter and edit text."
  },
  "ui-textfield-icon": {
    "attributes": [
      "trailing",
      "unclickable"
    ],
    "description": "Textfield leading/trailing icons."
  },
  "ui-textfield-helper": {
    "attributes": [
      "valid-msg",
      "id",
      "visible",
      "with-counter"
    ],
    "description": "Styles the container of helper text and character counter elements."
  },
  "ui-autocomplete": {
    "attributes": [
      "outlined",
      "model-value",
      "source",
      "source-format",
      "input-id",
      "label",
      "placeholder",
      "disabled",
      "required",
      "autofocus",
      "delay",
      "minlength",
      "remote",
      "highlight",
      "filter-keywords",
      "fullwidth",
      "end-aligned",
      "icon",
      "with-leading-icon",
      "with-trailing-icon",
      "inside"
    ],
    "description": "An autocomplete textfield."
  },
  "ui-select": {
    "attributes": [
      "type",
      "outlined",
      "model-value",
      "options",
      "option-format",
      "default-label",
      "default-value",
      "label",
      "disabled",
      "required",
      "fullwidth",
      "icon",
      "with-leading-icon",
      "helper-text-id",
      "inside"
    ],
    "description": "A select."
  },
  "ui-select-helper": {
    "attributes": [
      "valid-msg",
      "id",
      "visible"
    ],
    "description": "Styles the container of helper text."
  },
  "ui-select-icon": {
    "attributes": [
      "unclickable"
    ],
    "description": "Select leading/trailing icons."
  },
  "ui-checkbox": {
    "attributes": [
      "model-value",
      "indeterminate",
      "input-id",
      "value",
      "disabled",
      "attrs"
    ],
    "description": "Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off."
  },
  "ui-radio": {
    "attributes": [
      "model-value",
      "input-id",
      "value",
      "disabled",
      "attrs"
    ],
    "description": "Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space."
  },
  "ui-chips": {
    "attributes": [
      "type",
      "model-value",
      "options",
      "option-format",
      "items"
    ],
    "description": "Chips are compact elements that represent an input, attribute, or action."
  },
  "ui-chip": {
    "attributes": [
      "icon",
      "selected",
      "deletable"
    ],
    "description": "A chip item."
  },
  "ui-file": {
    "attributes": [
      "input-id",
      "accept",
      "multiple",
      "disabled",
      "outlined",
      "text",
      "preview"
    ],
    "description": "File uploader."
  },
  "ui-datepicker": {
    "attributes": [
      "outlined",
      "model-value",
      "input-id",
      "label",
      "placeholder",
      "disabled",
      "required",
      "fullwidth",
      "end-aligned",
      "icon",
      "with-leading-icon",
      "with-trailing-icon",
      "config",
      "toggle",
      "clear",
      "month-options"
    ],
    "description": "Date pickers let users select a date, or a range of dates."
  },
  "ui-rangepicker": {
    "attributes": [
      "outlined",
      "model-value",
      "labels",
      "placeholders",
      "disabled",
      "config",
      "disable-range-plugin"
    ],
    "description": "A range date picker."
  },
  "ui-switch": {
    "attributes": [
      "model-value",
      "true-value",
      "false-value",
      "disabled"
    ],
    "description": "Switches toggle the state of a single item on or off. They are the preferred way to adjust settings on mobile."
  },
  "ui-slider": {
    "attributes": [
      "type",
      "discrete",
      "with-tick-marks",
      "model-value",
      "min",
      "max",
      "step",
      "disabled"
    ],
    "description": "Sliders allow users to make selections from a range of values."
  },
  "ui-list": {
    "attributes": [
      "type",
      "single-selection",
      "model-value",
      "non-interactive",
      "dense",
      "avatar"
    ],
    "description": "Lists are continuous, vertical indexes of text or images."
  },
  "ui-nav": {
    "attributes": [
      "type",
      "non-interactive",
      "dense",
      "avatar"
    ],
    "description": "A set of navigation links."
  },
  "ui-item": {
    "attributes": [
      "selected",
      "disabled"
    ],
    "description": "A item of list."
  },
  "ui-nav-item": {
    "attributes": [
      "href",
      "active"
    ],
    "description": "A item of nav list."
  },
  "ui-item-text-content": {
    "description": "Wrapper for list item text content (displayed as middle column of the list item)."
  },
  "ui-item-text1": {
    "description": "Primary text for the list item. Should be the child of <ui-item-text-content>."
  },
  "ui-item-text2": {
    "description": "Secondary text for the list item. Displayed below the primary text. Should be the child of <ui-item-text-content>."
  },
  "ui-item-first-content": {
    "description": "The first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image."
  },
  "ui-item-last-content": {
    "description": "The last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image."
  },
  "ui-list-group": {
    "description": "Wrapper around two or more <ui-list> elements to be grouped together."
  },
  "ui-list-group-subheader": {
    "description": "Heading text displayed above each list in a group."
  },
  "ui-list-divider": {
    "attributes": [
      "padded",
      "inset"
    ],
    "description": "A list divider."
  },
  "ui-item-divider": {
    "attributes": [
      "padded",
      "inset"
    ],
    "description": "A list item divider."
  },
  "ui-image-list": {
    "attributes": [
      "type",
      "masonry",
      "text-protection"
    ],
    "description": "Image lists display a collection of images in an organized grid."
  },
  "ui-image-item": {
    "attributes": [
      "image",
      "bg-image"
    ],
    "description": "Indicates each item in an Image List."
  },
  "ui-image-text": {
    "description": "Indicates the area within each item containing the supporting text label, if the Image List contains text labels."
  },
  "ui-card": {
    "attributes": [
      "outlined"
    ],
    "description": "Cards contain content and actions about a single subject."
  },
  "ui-card-content": {
    "description": "The main tappable area of the card. Typically contains most (or all) card content except <ui-card-actions>. Only applicable to cards that have a primary action that the main surface should trigger."
  },
  "ui-card-media": {
    "attributes": [
      "square",
      "rectangle"
    ],
    "description": "Media area that displays a custom `background-image` with `background-size: cover`."
  },
  "ui-card-media-content": {
    "description": "An absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the `background-image`."
  },
  "ui-card-text": {
    "description": "Additional text content."
  },
  "ui-card-actions": {
    "attributes": [
      "full-bleed"
    ],
    "description": "Row containing action buttons and/or icons."
  },
  "ui-card-buttons": {
    "description": "A group of action buttons, displayed on the left side of the card (in LTR), adjacent to <ui-card-icons>."
  },
  "ui-card-icons": {
    "description": "A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to <ui-card-buttons>."
  },
  "ui-table": {
    "attributes": [
      "data",
      "model-value",
      "thead",
      "tbody",
      "tfoot",
      "fullwidth",
      "row-checkbox",
      "row-checkbox-disabled",
      "selected-key",
      "row-id-prefix",
      "sort-icon-align-end",
      "show-progress",
      "fixed-header",
      "default-col-width",
      "scroll"
    ],
    "description": "Data tables display sets of data across rows and columns."
  },
  "ui-collapse": {
    "attributes": [
      "model-value",
      "with-icon",
      "icon-end-aligned",
      "ripple"
    ],
    "description": "A content area which can be collapsed and expanded."
  },
  "ui-badge": {
    "attributes": [
      "count",
      "overlap",
      "max-count",
      "dot",
      "state"
    ],
    "description": "Small status descriptors for UI components."
  },
  "ui-alert": {
    "attributes": [
      "state",
      "state-outlined",
      "closable"
    ],
    "description": "Alerts provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages."
  },
  "ui-dialog": {
    "attributes": [
      "model-value",
      "escape-key",
      "closable",
      "mask-closable",
      "no-scrim",
      "reset-scroll",
      "fullscreen",
      "sheet",
      "no-content-padding"
    ],
    "description": "Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks."
  },
  "ui-dialog-title": {
    "attributes": [
      "closable"
    ],
    "description": "Brief summary of the dialog's purpose."
  },
  "ui-dialog-content": {
    "description": "Primary content area. May contain a list, a form, or prose."
  },
  "ui-dialog-actions": {
    "attributes": [
      "accept-text",
      "cancel-text"
    ],
    "description": "Footer area containing the dialog's action buttons."
  },
  "ui-snackbar": {
    "attributes": [
      "action-type",
      "model-value",
      "timeout-ms",
      "message",
      "action-button-text",
      "stacked",
      "leading",
      "position"
    ],
    "description": "Snackbars provide brief messages about app processes at the bottom of the screen."
  },
  "ui-banner": {
    "attributes": [
      "model-value",
      "centered",
      "fixed",
      "with-image",
      "mobile-stacked",
      "primary-button-text",
      "secondary-button-text"
    ],
    "description": "A banner displays a prominent message and related optional actions."
  },
  "ui-progress": {
    "attributes": [
      "active",
      "progress",
      "buffer",
      "label",
      "closed"
    ],
    "description": "Linear progress indicators display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known."
  },
  "ui-spinner": {
    "attributes": [
      "active",
      "progress",
      "size",
      "four-colored",
      "label",
      "closed"
    ],
    "description": "Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card."
  },
  "ui-tooltip": {
    "attributes": [
      "type",
      "rich",
      "width"
    ],
    "description": "Tooltips display informative text when users hover over, focus on, or tap an element."
  },
  "ui-tooltip-anchor": {
    "description": "Rich tooltip wrapper."
  },
  "ui-editor": {
    "attributes": [
      "model-value",
      "options",
      "toolbar",
      "placeholder",
      "readonly",
      "fullwidth",
      "theme",
      "toolbar-icons",
      "toolbar-tips",
      "toolbar-options",
      "toolbar-handlers",
      "custom-image-handler",
      "emotions",
      "with-counter",
      "extension"
    ],
    "description": "A modern WYSIWYG editor (based on Quill with built-in extension features)."
  },
  "ui-tree": {
    "attributes": [
      "model-value",
      "filter-parent-node",
      "data",
      "data-format",
      "max-level",
      "multiple",
      "single-checked",
      "load-data",
      "auto-expand-parent",
      "auto-expand-selected",
      "auto-expand-all",
      "default-expanded-keys"
    ],
    "description": "A tree."
  },
  "ui-skeleton": {
    "attributes": [
      "loading",
      "active",
      "avatar",
      "title",
      "paragraph"
    ],
    "description": "Skeleton provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet."
  },
  "ui-bottom-navigation": {
    "attributes": [
      "content-selector",
      "stacked",
      "min",
      "max"
    ],
    "description": "Bottom navigation bars allow movement between primary destinations in an app."
  },
  "ui-bottom-sheet": {
    "attributes": [
      "model-value"
    ],
    "description": "A bottom sheet."
  },
  "ui-side-sheet": {
    "attributes": [
      "model-value",
      "closable"
    ],
    "description": "A side sheet."
  }
}