balm-ui

{ "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." } }