carbon-custom-elements

{ "version": "experimental", "tags": [ { "name": "bx-accordion", "description": "Accordion container." }, { "name": "bx-accordion-item", "description": "Accordion item.", "attributes": [ { "name": "open", "description": "`true` if the check box should be open.", "type": "boolean", "default": "false" }, { "name": "title-text", "description": "The title text.", "type": "string", "default": "\"\"" } ], "properties": [ { "name": "open", "attribute": "open", "description": "`true` if the check box should be open.", "type": "boolean", "default": "false" }, { "name": "titleText", "attribute": "title-text", "description": "The title text.", "type": "string", "default": "\"\"" } ], "events": [ { "name": "bx-accordion-item-beingtoggled", "description": "The custom event fired before this accordion item is being toggled upon a user gesture.\nCancellation of this event stops the user-initiated action of toggling this accordion item." }, { "name": "bx-accordion-item-toggled", "description": "The custom event fired after this accordion item is toggled upon a user gesture." } ] }, { "name": "bx-btn", "description": "Button.", "attributes": [ { "name": "autofocus", "description": "`true` if the button should have input focus when the page loads.", "type": "boolean", "default": "false" }, { "name": "disabled", "description": "`true` if the button should be disabled.", "type": "boolean", "default": "false" }, { "name": "download", "description": "The default file name, used if this button is rendered as `<a>`.", "type": "string" }, { "name": "href", "description": "Link `href`. If present, this button is rendered as `<a>`.", "type": "string" }, { "name": "hreflang", "description": "The language of what `href` points to, if this button is rendered as `<a>`.", "type": "string" }, { "name": "kind", "description": "Button kind.", "type": "BUTTON_KIND", "default": "\"primary\"" }, { "name": "ping", "description": "URLs to ping, if this button is rendered as `<a>`.", "type": "string" }, { "name": "rel", "description": "The link type, if this button is rendered as `<a>`.", "type": "string" }, { "name": "size", "description": "Button size.", "type": "BUTTON_SIZE", "default": "\"\"" }, { "name": "target", "description": "The link target, if this button is rendered as `<a>`.", "type": "string" }, { "name": "type", "description": "The default behavior if the button is rendered as `<button>`. MIME type of the `target`if this button is rendered as `<a>`.", "type": "string" } ], "properties": [ { "name": "autofocus", "attribute": "autofocus", "description": "`true` if the button should have input focus when the page loads.", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "`true` if the button should be disabled.", "type": "boolean", "default": "false" }, { "name": "download", "attribute": "download", "description": "The default file name, used if this button is rendered as `<a>`.", "type": "string" }, { "name": "href", "attribute": "href", "description": "Link `href`. If present, this button is rendered as `<a>`.", "type": "string" }, { "name": "hreflang", "attribute": "hreflang", "description": "The language of what `href` points to, if this button is rendered as `<a>`.", "type": "string" }, { "name": "kind", "attribute": "kind", "description": "Button kind.", "type": "BUTTON_KIND", "default": "\"primary\"" }, { "name": "ping", "attribute": "ping", "description": "URLs to ping, if this button is rendered as `<a>`.", "type": "string" }, { "name": "rel", "attribute": "rel", "description": "The link type, if this button is rendered as `<a>`.", "type": "string" }, { "name": "size", "attribute": "size", "description": "Button size.", "type": "BUTTON_SIZE", "default": "\"\"" }, { "name": "target", "attribute": "target", "description": "The link target, if this button is rendered as `<a>`.", "type": "string" }, { "name": "type", "attribute": "type", "description": "The default behavior if the button is rendered as `<button>`. MIME type of the `target`if this button is rendered as `<a>`.", "type": "string" } ] }, { "name": "bx-breadcrumb", "description": "Breadcrumb." }, { "name": "bx-checkbox", "description": "Check box.", "attributes": [ { "name": "checked", "description": "`true` if the check box should be checked.", "type": "boolean", "default": "false" }, { "name": "disabled", "description": "`true` if the check box should be disabled.", "type": "boolean", "default": "false" }, { "name": "hide-label", "description": "`true` if the label should be hidden.", "type": "boolean", "default": "false" }, { "name": "indeterminate", "description": "`true` if the check box should show its UI of the indeterminate state.", "type": "boolean", "default": "false" }, { "name": "label-text", "description": "The label text.", "type": "string", "default": "\"\"" }, { "name": "name", "description": "The form name.", "type": "string" }, { "name": "value", "description": "The value.", "type": "string" } ], "properties": [ { "name": "checked", "attribute": "checked", "description": "`true` if the check box should be checked.", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "`true` if the check box should be disabled.", "type": "boolean", "default": "false" }, { "name": "hideLabel", "attribute": "hide-label", "description": "`true` if the label should be hidden.", "type": "boolean", "default": "false" }, { "name": "indeterminate", "attribute": "indeterminate", "description": "`true` if the check box should show its UI of the indeterminate state.", "type": "boolean", "default": "false" }, { "name": "labelText", "attribute": "label-text", "description": "The label text.", "type": "string", "default": "\"\"" }, { "name": "name", "attribute": "name", "description": "The form name.", "type": "string" }, { "name": "value", "attribute": "value", "description": "The value.", "type": "string" } ], "events": [ { "name": "bx-checkbox-changed", "description": "The custom event fired after this changebox changes its checked state." } ] }, { "name": "bx-copy-button", "description": "Copy button.", "attributes": [ { "name": "button-assistive-text", "description": "An assistive text for screen reader to announce, telling that the button copies the content to the clipboard.", "type": "string", "default": "\"Copy to clipboard\"" }, { "name": "feedback-text", "description": "The feedback text.", "type": "string", "default": "\"Copied!\"" }, { "name": "feedback-timeout", "description": "The number in milliseconds to determine how long the tooltip should remain.", "type": "number", "default": "2000" } ], "properties": [ { "name": "buttonAssistiveText", "attribute": "button-assistive-text", "description": "An assistive text for screen reader to announce, telling that the button copies the content to the clipboard.", "type": "string", "default": "\"Copy to clipboard\"" }, { "name": "feedbackText", "attribute": "feedback-text", "description": "The feedback text.", "type": "string", "default": "\"Copied!\"" }, { "name": "feedbackTimeout", "attribute": "feedback-timeout", "description": "The number in milliseconds to determine how long the tooltip should remain.", "type": "number", "default": "2000" } ] }, { "name": "bx-code-snippet", "description": "Basic code snippet.", "attributes": [ { "name": "code-assistive-text", "description": "An assistive text for screen reader to advice a DOM node is for code snippet.", "type": "string", "default": "\"code-snippet\"" }, { "name": "collapse-button-text", "description": "The context content for the collapse button.", "type": "string", "default": "\"Show less\"" }, { "name": "color-scheme", "description": "The color scheme.", "type": "FORM_ELEMENT_COLOR_SCHEME", "default": "\"\"" }, { "name": "copy-button-assistive-text", "description": "An assistive text for screen reader to announce, telling that the button copies the content to the clipboard.", "type": "string", "default": "\"Copy to clipboard\"" }, { "name": "copy-button-feedback-text", "description": "The feedback text for the copy button.", "type": "string", "default": "\"Copied!\"" }, { "name": "copy-button-feedback-timeout", "description": "The number in milliseconds to determine how long the tooltip for the copy button should remain.", "type": "number", "default": "2000" }, { "name": "expand-button-text", "description": "The context content for the expand button.", "type": "string", "default": "\"Show more\"" }, { "name": "type", "description": "The type of code snippet.", "type": "CODE_SNIPPET_TYPE", "default": "\"single\"" } ], "properties": [ { "name": "codeAssistiveText", "attribute": "code-assistive-text", "description": "An assistive text for screen reader to advice a DOM node is for code snippet.", "type": "string", "default": "\"code-snippet\"" }, { "name": "collapseButtonText", "attribute": "collapse-button-text", "description": "The context content for the collapse button.", "type": "string", "default": "\"Show less\"" }, { "name": "colorScheme", "attribute": "color-scheme", "description": "The color scheme.", "type": "FORM_ELEMENT_COLOR_SCHEME", "default": "\"\"" }, { "name": "copyButtonAssistiveText", "attribute": "copy-button-assistive-text", "description": "An assistive text for screen reader to announce, telling that the button copies the content to the clipboard.", "type": "string", "default": "\"Copy to clipboard\"" }, { "name": "copyButtonFeedbackText", "attribute": "copy-button-feedback-text", "description": "The feedback text for the copy button.", "type": "string", "default": "\"Copied!\"" }, { "name": "copyButtonFeedbackTimeout", "attribute": "copy-button-feedback-timeout", "description": "The number in milliseconds to determine how long the tooltip for the copy button should remain.", "type": "number", "default": "2000" }, { "name": "expandButtonText", "attribute": "expand-button-text", "description": "The context content for the expand button.", "type": "string", "default": "\"Show more\"" }, { "name": "type", "attribute": "type", "description": "The type of code snippet.", "type": "CODE_SNIPPET_TYPE", "default": "\"single\"" } ] }, { "name": "bx-dropdown-item", "description": "Dropdown item.", "attributes": [ { "name": "disabled", "description": "`true` if this dropdown item should be disabled.", "type": "boolean", "default": "false" }, { "name": "size", "description": "Dropdown size.", "type": "DROPDOWN_SIZE", "default": "\"\"" }, { "name": "value", "description": "The `value` attribute that is set to the parent `<bx-dropdown>` when this dropdown item is selected.", "type": "string", "default": "\"\"" } ], "properties": [ { "name": "disabled", "attribute": "disabled", "description": "`true` if this dropdown item should be disabled.", "type": "boolean", "default": "false" }, { "name": "size", "attribute": "size", "description": "Dropdown size.", "type": "DROPDOWN_SIZE", "default": "\"\"" }, { "name": "value", "attribute": "value", "description": "The `value` attribute that is set to the parent `<bx-dropdown>` when this dropdown item is selected.", "type": "string", "default": "\"\"" } ] }, { "name": "bx-dropdown", "description": "Dropdown.", "attributes": [ { "name": "color-scheme", "description": "The color scheme.", "type": "FORM_ELEMENT_COLOR_SCHEME", "default": "\"\"" }, { "name": "disabled", "description": "`true` if this dropdown should be disabled.", "type": "boolean", "default": "false" }, { "name": "helper-text", "description": "The helper text.", "type": "string", "default": "\"\"" }, { "name": "label-text", "description": "The label text.", "type": "string", "default": "\"\"" }, { "name": "open", "description": "`true` if this dropdown should be open.", "type": "boolean", "default": "false" }, { "name": "selecting-items-assistive-text", "description": "An assistive text for screen reader to announce, telling the open state.", "type": "string", "default": "\"Selecting items. Use up and down arrow keys to navigate.\"" }, { "name": "selected-item-assistive-text", "description": "An assistive text for screen reader to announce, telling that an item is selected.", "type": "string", "default": "\"Selected an item.\"" }, { "name": "size", "description": "Dropdown size.", "type": "DROPDOWN_SIZE", "default": "\"\"" }, { "name": "toggle-label-closed", "description": "The `aria-label` attribute for the UI indicating the closed state.", "type": "string", "default": "\"\"" }, { "name": "toggle-label-open", "description": "The `aria-label` attribute for the UI indicating the open state.", "type": "string", "default": "\"\"" }, { "name": "trigger-content", "description": "The content of the trigger button.", "type": "string", "default": "\"\"" }, { "name": "type", "description": "`true` if this dropdown should use the inline UI variant.", "type": "DROPDOWN_TYPE", "default": "\"\"" }, { "name": "invalid", "description": "`true` to show the UI of the invalid state.", "type": "boolean", "default": "false" }, { "name": "required", "description": "`true` if the value is required.", "type": "boolean", "default": "false" }, { "name": "required-validity-message", "description": "The special validity message for `required`.", "type": "string", "default": "\"Please fill out this field.\"" }, { "name": "validity-message", "description": "The validity message.", "type": "string", "default": "\"\"" }, { "name": "value", "description": "The value of the selected item.", "type": "string", "default": "\"\"" } ], "properties": [ { "name": "colorScheme", "attribute": "color-scheme", "description": "The color scheme.", "type": "FORM_ELEMENT_COLOR_SCHEME", "default": "\"\"" }, { "name": "disabled", "attribute": "disabled", "description": "`true` if this dropdown should be disabled.", "type": "boolean", "default": "false" }, { "name": "helperText", "attribute": "helper-text", "description": "The helper text.", "type": "string", "default": "\"\"" }, { "name": "labelText", "attribute": "label-text", "description": "The label text.", "type": "string", "default": "\"\"" }, { "name": "open", "attribute": "open", "description": "`true` if this dropdown should be open.", "type": "boolean", "default": "false" }, { "name": "selectingItemsAssistiveText", "attribute": "selecting-items-assistive-text", "description": "An assistive text for screen reader to announce, telling the open state.", "type": "string", "default": "\"Selecting items. Use up and down arrow keys to navigate.\"" }, { "name": "selectedItemAssistiveText", "attribute": "selected-item-assistive-text", "description": "An assistive text for screen reader to announce, telling that an item is selected.", "type": "string", "default": "\"Selected an item.\"" }, { "name": "size", "attribute": "size", "description": "Dropdown size.", "type": "DROPDOWN_SIZE", "default": "\"\"" }, { "name": "toggleLabelClosed", "attribute": "toggle-label-closed", "description": "The `aria-label` attribute for the UI indicating the closed state.", "type": "string", "default": "\"\"" }, { "name": "toggleLabelOpen", "attribute": "toggle-label-open", "description": "The `aria-label` attribute for the UI indicating the open state.", "type": "string", "default": "\"\"" }, { "name": "triggerContent", "attribute": "trigger-content", "description": "The content of the trigger button.", "type": "string", "default": "\"\"" }, { "name": "type", "attribute": "type", "description": "`true` if this dropdown should use the inline UI variant.", "type": "DROPDOWN_TYPE", "default": "\"\"" }, { "name": "invalid", "attribute": "invalid", "description": "`true` to show the UI of the invalid state.", "type": "boolean", "default": "false" }, { "name": "required", "attribute": "required", "description": "`true` if the value is required.", "type": "boolean", "default": "false" }, { "name": "requiredValidityMessage", "attribute": "required-validity-message", "description": "The special validity message for `required`.", "type": "string", "default": "\"Please fill out this field.\"" }, { "name": "validityMessage", "attribute": "validity-message", "description": "The validity message.", "type": "string", "default": "\"\"" }, { "name": "value", "attribute": "value", "description": "The value of the selected item.", "type": "string", "default": "\"\"" } ], "events": [ { "name": "bx-dropdown-beingselected", "description": "The custom event fired before a dropdown item is selected upon a user gesture.\nCancellation of this event stops changing the user-initiated selection." }, { "name": "bx-dropdown-selected", "description": "The custom event fired after a a dropdown item is selected upon a user gesture." }, { "name": "invalid" } ], "cssParts": [ { "name": "label", "description": "text The label text." }, { "name": "helper", "description": "text The helper text." }, { "name": "trigger", "description": "button The trigger button." }, { "name": "menu", "description": "body The menu body." }, { "name": "validity", "description": "message The validity message." } ] }, { "name": "bx-combo-box-item", "description": "Combo box item.", "attributes": [ { "name": "disabled", "description": "`true` if this dropdown item should be disabled.", "type": "boolean", "default": "false" }, { "name": "size", "description": "Dropdown size.", "type": "DROPDOWN_SIZE", "default": "\"\"" }, { "name": "value", "description": "The `value` attribute that is set to the parent `<bx-dropdown>` when this dropdown item is selected.", "type": "string", "default": "\"\"" } ], "properties": [ { "name": "disabled", "attribute": "disabled", "description": "`true` if this dropdown item should be disabled.", "type": "boolean", "default": "false" }, { "name": "size", "attribute": "size", "description": "Dropdown size.", "type": "DROPDOWN_SIZE", "default": "\"\"" }, { "name": "value", "attribute": "value", "description": "The `value` attribute that is set to the parent `<bx-dropdown>` when this dropdown item is selected.", "type": "string", "default": "\"\"" } ] }, { "name": "bx-combo-box", "description": "Combo box.", "attributes": [ { "name": "clear-selection-label", "description": "The `aria-label` attribute for the icon to clear selection.", "type": "string", "default": "\"\"" }, { "name": "input-label", "description": "The `aria-label` attribute for the `<input>` for filtering.", "type": "string", "default": "\"\"" }, { "name": "color-scheme", "description": "The color scheme.", "type": "FORM_ELEMENT_COLOR_SCHEME", "default": "\"\"" }, { "name": "disabled", "description": "`true` if this dropdown should be disabled.", "type": "boolean", "default": "false" }, { "name": "helper-text", "description": "The helper text.", "type": "string", "default": "\"\"" }, { "name": "label-text", "description": "The label text.", "type": "string", "default": "\"\"" }, { "name": "open", "description": "`true` if this dropdown should be open.", "type": "boolean", "default": "false" }, { "name": "selecting-items-assistive-text", "description": "An assistive text for screen reader to announce, telling the open state.", "type": "string", "default": "\"Selecting items. Use up and down arrow keys to navigate.\"" }, { "name": "selected-item-assistive-text", "description": "An assistive text for screen reader to announce, telling that an item is selected.", "type": "string", "default": "\"Selected an item.\"" }, { "name": "size", "description": "Dropdown size.", "type": "DROPDOWN_SIZE", "default": "\"\"" }, { "name": "toggle-label-closed", "description": "The `aria-label` attribute for the UI indicating the closed state.", "type": "string", "default": "\"\"" }, { "name": "toggle-label-open", "description": "The `aria-label` attribute for the UI indicating the open state.", "type": "string", "default": "\"\"" }, { "name": "trigger-content", "description": "The content of the trigger button.", "type": "string", "default": "\"\"" }, { "name": "type", "description": "`true` if this dropdown should use the inline UI variant.", "type": "DROPDOWN_TYPE", "default": "\"\"" }, { "name": "invalid", "description": "`true` to show the UI of the invalid state.", "type": "boolean", "default": "false" }, { "name": "required", "description": "`true` if the value is required.", "type": "boolean", "default": "false" }, { "name": "required-validity-message", "description": "The special validity message for `required`.", "type": "string", "default": "\"Please fill out this field.\"" }, { "name": "validity-message", "description": "The validity message.", "type": "string", "default": "\"\"" }, { "name": "value", "description": "The value of the selected item.", "type": "string", "default": "\"\"" } ], "properties": [ { "name": "clearSelectionLabel", "attribute": "clear-selection-label", "description": "The `aria-label` attribute for the icon to clear selection.", "type": "string", "default": "\"\"" }, { "name": "inputLabel", "attribute": "input-label", "description": "The `aria-label` attribute for the `<input>` for filtering.", "type": "string", "default": "\"\"" }, { "name": "itemMatches", "description": "The custom item matching callback.", "type": "(item: BXComboBoxItem, queryText: string) => boolean" }, { "name": "colorScheme", "attribute": "color-scheme", "description": "The color scheme.", "type": "FORM_ELEMENT_COLOR_SCHEME", "default": "\"\"" }, { "name": "disabled", "attribute": "disabled", "description": "`true` if this dropdown should be disabled.", "type": "boolean", "default": "false" }, { "name": "helperText", "attribute": "helper-text", "description": "The helper text.", "type": "string", "default": "\"\"" }, { "name": "labelText", "attribute": "label-text", "description": "The label text.", "type": "string", "default": "\"\"" }, { "name": "open", "attribute": "open", "description": "`true` if this dropdown should be open.", "type": "boolean", "default": "false" }, { "name": "selectingItemsAssistiveText", "attribute": "selecting-items-assistive-text", "description": "An assistive text for screen reader to announce, telling the open state.", "type": "string", "default": "\"Selecting items. Use up and down arrow keys to navigate.\"" }, { "name": "selectedItemAssistiveText", "attribute": "selected-item-assistive-text", "description": "An assistive text for screen reader to announce, telling that an item is selected.", "type": "string", "default": "\"Selected an item.\"" }, { "name": "size", "attribute": "size", "description": "Dropdown size.", "type": "DROPDOWN_SIZE", "default": "\"\"" }, { "name": "toggleLabelClosed", "attribute": "toggle-label-closed", "description": "The `aria-label` attribute for the UI indicating the closed state.", "type": "string", "default": "\"\"" }, { "name": "toggleLabelOpen", "attribute": "toggle-label-open", "description": "The `aria-label` attribute for the UI indicating the open state.", "type": "string", "default": "\"\"" }, { "name": "triggerContent", "attribute": "trigger-content", "description": "The content of the trigger button.", "type": "string", "default": "\"\"" }, { "name": "type", "attribute": "type", "description": "`true` if this dropdown should use the inline UI variant.", "type": "DROPDOWN_TYPE", "default": "\"\"" }, { "name": "invalid", "attribute": "invalid", "description": "`true` to show the UI of the invalid state.", "type": "boolean", "default": "false" }, { "name": "required", "attribute": "required", "description": "`true` if the value is required.", "type": "boolean", "default": "false" }, { "name": "requiredValidityMessage", "attribute": "required-validity-message", "description": "The special validity message for `required`.", "type": "string", "default": "\"Please fill out this field.\"" }, { "name": "validityMessage", "attribute": "validity-message", "description": "The validity message.", "type": "string", "default": "\"\"" }, { "name": "value", "attribute": "value", "description": "The value of the selected item.", "type": "string", "default": "\"\"" } ], "events": [ { "name": "bx-combo-box-beingselected", "description": "The custom event fired before a combo box item is selected upon a user gesture.\nCancellation of this event stops changing the user-initiated selection." }, { "name": "bx-combo-box-selected", "description": "The custom event fired after a a combo box item is selected upon a user gesture." }, { "name": "bx-dropdown-beingselected", "description": "The custom event fired before a dropdown item is selected upon a user gesture.\nCancellation of this event stops changing the user-initiated selection." }, { "name": "bx-dropdown-selected", "description": "The custom event fired after a a dropdown item is selected upon a user gesture." }, { "name": "invalid" } ], "cssParts": [ { "name": "label", "description": "text The label text." }, { "name": "helper", "description": "text The helper text." }, { "name": "trigger", "description": "button The trigger button." }, { "name": "menu", "description": "body The menu body." }, { "name": "validity", "description": "message The validity message." } ] }, { "name": "bx-content-switcher-item", "description": "Content switcher button.", "attributes": [ { "name": "disabled", "description": "`true` if this content switcher item should be disabled.", "type": "boolean", "default": "false" }, { "name": "target", "description": "The element ID of target panel.", "type": "string" }, { "name": "value", "description": "The `value` attribute that is set to the parent `<bx-content-switcher>` when this content switcher item is selected.", "type": "string", "default": "\"\"" } ], "properties": [ { "name": "disabled", "attribute": "disabled", "description": "`true` if this content switcher item should be disabled.", "type": "boolean", "default": "false" }, { "name": "target", "attribute": "target", "description": "The element ID of target panel.", "type": "string" }, { "name": "value", "attribute": "value", "description": "The `value` attribute that is set to the parent `<bx-content-switcher>` when this content switcher item is selected.", "type": "string", "default": "\"\"" } ] }, { "name": "bx-content-switcher", "description": "Content switcher.", "attributes": [ { "name": "value", "description": "The value of the selected item.", "type": "string", "default": "\"\"" } ], "properties": [ { "name": "value", "attribute": "value", "description": "The value of the selected item.", "type": "string", "default": "\"\"" } ], "events": [ { "name": "bx-content-switcher-beingselected", "description": "The custom event fired before a content switcher item is selected upon a user gesture.\nCancellation of this event stops changing the user-initiated selection." }, { "name": "bx-content-switcher-selected", "description": "The custom event fired after a a content switcher item is selected upon a user gesture." } ] }, { "name": "bx-table", "description": "Data table.", "attributes": [ { "name": "size", "description": "The table size.", "type": "TABLE_SIZE", "default": "\"\"" }, { "name": "sort", "description": "`true` if this table should support sorting.", "type": "boolean", "default": "false" } ], "properties": [ { "name": "size", "attribute": "size", "description": "The table size.", "type": "TABLE_SIZE", "default": "\"\"" }, { "name": "sort", "attribute": "sort", "description": "`true` if this table should support sorting.", "type": "boolean", "default": "false" } ] }, { "name": "bx-table-batch-actions", "description": "Table batch actions.", "attributes": [ { "name": "active", "description": "`true` if this batch actions bar should be active.", "type": "boolean", "default": "false" }, { "name": "selected-rows-count", "description": "Numeric representation of the total number of items selected in a table.\nThis number is used to derive the selection message.", "type": "number", "default": "0" } ], "properties": [ { "name": "active", "attribute": "active", "description": "`true` if this batch actions bar should be active.", "type": "boolean", "default": "false" }, { "name": "formatSelectedItemsCount", "description": "The formatter for selected items. Should be changed upon the locale the UI is rendered with.", "type": "({ count }: { count: any; }) => string", "default": "\"({ count }) => `${count} item${count <= 1 ? '' : 's'} selected`\"" }, { "name": "selectedRowsCount", "attribute": "selected-rows-count", "description": "Numeric representation of the total number of items selected in a table.\nThis number is used to derive the selection message.", "type": "number", "default": "0" } ], "events": [ { "name": "bx-table-batch-actions-cancel-clicked", "description": "The custom event fired after the Cancel button is clicked." } ] }, { "name": "bx-table-row", "description": "Data table row.", "attributes": [ { "name": "disabled", "description": "`true` if this table row should be disabled.", "type": "boolean", "default": "false" }, { "name": "selected", "description": "`true` if this table row should be selected.", "type": "boolean", "default": "false" }, { "name": "selection-label", "description": "The `aria-label` attribute for the `<label>` for selection.", "type": "string", "default": "\"\"" }, { "name": "selection-name", "description": "The `name` attribute for the `<input>` for selection.\nIf present, this table row will be a selectable one.", "type": "string", "default": "\"\"" }, { "name": "selection-value", "description": "The `value` attribute for the `<input>` for selection.", "type": "string", "default": "\"\"" } ], "properties": [ { "name": "disabled", "attribute": "disabled", "description": "`true` if this table row should be disabled.", "type": "boolean", "default": "false" }, { "name": "selected", "attribute": "selected", "description": "`true` if this table row should be selected.", "type": "boolean", "default": "false" }, { "name": "selectionLabel", "attribute": "selection-label", "description": "The `aria-label` attribute for the `<label>` for selection.", "type": "string", "default": "\"\"" }, { "name": "selectionName", "attribute": "selection-name", "description": "The `name` attribute for the `<input>` for selection.\nIf present, this table row will be a selectable one.", "type": "string", "default": "\"\"" }, { "name": "selectionValue", "attribute": "selection-value", "description": "The `value` attribute for the `<input>` for selection.", "type": "string", "default": "\"\"" } ], "events": [ { "name": "bx-table-row-change-selection", "description": "The custom event fired before this row is selected/unselected upon a user gesture.\nCancellation of this event stops the user-initiated change in selection." } ] }, { "name": "bx-table-body", "description": "Data table body.", "attributes": [ { "name": "color-scheme", "description": "The color scheme.", "type": "TABLE_COLOR_SCHEME", "default": "\"\"" } ], "properties": [ { "name": "colorScheme", "attribute": "color-scheme", "description": "The color scheme.", "type": "TABLE_COLOR_SCHEME", "default": "\"\"" } ] }, { "name": "bx-table-cell", "description": "Data table cell." }, { "name": "bx-table-head", "description": "Data table header." }, { "name": "bx-table-header-cell", "description": "Data table header cell.", "attributes": [ { "name": "sort-active", "description": "`true` if this table header cell is of a primary sorting column.", "type": "boolean", "default": "false" }, { "name": "sort-cycle", "description": "The table sort cycle in use.", "type": "TABLE_SORT_CYCLE | undefined" }, { "name": "sort-direction", "description": "The table sort direction.\nIf present, this table header cell will have a sorting UI.", "type": "TABLE_SORT_DIRECTION | undefined" } ], "properties": [ { "name": "sortActive", "attribute": "sort-active", "description": "`true` if this table header cell is of a primary sorting column.", "type": "boolean", "default": "false" }, { "name": "sortCycle", "attribute": "sort-cycle", "description": "The table sort cycle in use.", "type": "TABLE_SORT_CYCLE | undefined" }, { "name": "sortDirection", "attribute": "sort-direction", "description": "The table sort direction.\nIf present, this table header cell will have a sorting UI.", "type": "TABLE_SORT_DIRECTION | undefined" } ], "events": [ { "name": "bx-table-header-cell-sort", "description": "The custom event fired before a new sort direction is set upon a user gesture.\nCancellation of this event stops the user-initiated change in sort direction." } ] }, { "name": "bx-table-header-row", "description": "Data table header row.", "attributes": [ { "name": "disabled", "description": "`true` if this table row should be disabled.", "type": "boolean", "default": "false" }, { "name": "selected", "description": "`true` if this table row should be selected.", "type": "boolean", "default": "false" }, { "name": "selection-label", "description": "The `aria-label` attribute for the `<label>` for selection.", "type": "string", "default": "\"\"" }, { "name": "selection-name", "description": "The `name` attribute for the `<input>` for selection.\nIf present, this table row will be a selectable one.", "type": "string", "default": "\"\"" }, { "name": "selection-value", "description": "The `value` attribute for the `<input>` for selection.", "type": "string", "default": "\"\"" } ], "properties": [ { "name": "disabled", "attribute": "disabled", "description": "`true` if this table row should be disabled.", "type": "boolean", "default": "false" }, { "name": "selected", "attribute": "selected", "description": "`true` if this table row should be selected.", "type": "boolean", "default": "false" }, { "name": "selectionLabel", "attribute": "selection-label", "description": "The `aria-label` attribute for the `<label>` for selection.", "type": "string", "default": "\"\"" }, { "name": "selectionName", "attribute": "selection-name", "description": "The `name` attribute for the `<input>` for selection.\nIf present, this table row will be a selectable one.", "type": "string", "default": "\"\"" }, { "name": "selectionValue", "attribute": "selection-value", "description": "The `value` attribute for the `<input>` for selection.", "type": "string", "default": "\"\"" } ], "events": [ { "name": "bx-table-row-change-selection", "description": "The custom event fired before this row is selected/unselected upon a user gesture.\nCancellation of this event stops the user-initiated change in selection." } ] }, { "name": "bx-table-toolbar-content", "description": "Table toolbar content.", "attributes": [ { "name": "has-batch-actions", "description": "`true` if this batch actions bar is active.", "type": "boolean", "default": "false" } ], "properties": [ { "name": "hasBatchActions", "attribute": "has-batch-actions", "description": "`true` if this batch actions bar is active.", "type": "boolean", "default": "false" } ] }, { "name": "bx-input", "description": "Input element. Supports all the usual attributes for textual input types", "attributes": [ { "name": "autocomplete", "description": "May be any of the standard HTML autocomplete options", "type": "string", "default": "\"\"" }, { "name": "autofocus", "description": "Sets the input to be focussed automatically on page load. Defaults to false", "type": "boolean", "default": "false" }, { "name": "color-scheme", "description": "The color scheme.", "type": "FORM_ELEMENT_COLOR_SCHEME", "default": "\"\"" }, { "name": "disabled", "description": "Controls the disabled state of the input", "type": "boolean", "default": "false" }, { "name": "helper-text", "description": "The helper text.", "type": "string", "default": "\"\"" }, { "name": "label-text", "description": "The label text.", "type": "string", "default": "\"\"" }, { "name": "name", "description": "Name for the input in the `FormData`", "type": "string", "default": "\"\"" }, { "name": "pattern", "description": "Pattern to validate the input against for HTML validity checking", "type": "string", "default": "\"\"" }, { "name": "placeholder", "description": "Value to display when the input has an empty `value`", "type": "string", "