{ "version": "experimental", "tags": [ { "name": "d2l-alert-toast", "path": "./components/alert/alert-toast.js", "description": "A component for communicating important information relating to the state of the system and the user's work flow, displayed as a pop-up at the bottom of the screen that automatically dismisses itself by default.", "attributes": [ { "name": "button-text", "description": "Text that is displayed within the alert's action button. If no text is provided the button is not displayed.", "type": "string" }, { "name": "subtext", "description": "The text that is displayed below the main alert message", "type": "string" }, { "name": "type", "description": "Type of the alert being displayed", "type": "'default'|'critical'|'success'|'warning'", "default": "\"\\\"default\\\"\"" }, { "name": "hide-close-button", "description": "Hide the close button to prevent users from manually closing the alert", "type": "boolean", "default": "false" }, { "name": "no-auto-close", "description": "Prevents the alert from automatically closing 4 seconds after opening", "type": "boolean", "default": "false" }, { "name": "open", "description": "Open or close the toast alert", "type": "boolean", "default": "false" } ], "properties": [ { "name": "buttonText", "attribute": "button-text", "description": "Text that is displayed within the alert's action button. If no text is provided the button is not displayed.", "type": "string" }, { "name": "subtext", "attribute": "subtext", "description": "The text that is displayed below the main alert message", "type": "string" }, { "name": "type", "attribute": "type", "description": "Type of the alert being displayed", "type": "'default'|'critical'|'success'|'warning'", "default": "\"\\\"default\\\"\"" }, { "name": "hideCloseButton", "attribute": "hide-close-button", "description": "Hide the close button to prevent users from manually closing the alert", "type": "boolean", "default": "false" }, { "name": "noAutoClose", "attribute": "no-auto-close", "description": "Prevents the alert from automatically closing 4 seconds after opening", "type": "boolean", "default": "false" }, { "name": "open", "attribute": "open", "description": "Open or close the toast alert", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-alert-toast-button-press", "description": "Dispatched when the toast's action button is clicked" }, { "name": "d2l-alert-toast-close", "description": "Dispatched when the toast is closed" } ], "slots": [ { "name": "", "description": "Default content placed inside of the component" } ] }, { "name": "d2l-alert", "path": "./components/alert/alert.js", "description": "A component for communicating important information relating to the state of the system and the user's work flow.", "attributes": [ { "name": "button-text", "description": "Text that is displayed within the alert's action button. If no text is provided the button is not displayed.", "type": "string" }, { "name": "subtext", "description": "The text that is displayed below the main alert message", "type": "string" }, { "name": "has-close-button", "description": "Gives the alert a close button that will close the alert when clicked", "type": "boolean", "default": "false" }, { "name": "no-padding", "description": "Opt out of default padding/whitespace around the alert", "type": "boolean", "default": "false" }, { "name": "type", "description": "Type of the alert being displayed", "type": "'default'|'critical'|'success'|'warning'", "default": "\"default\"" } ], "properties": [ { "name": "buttonText", "attribute": "button-text", "description": "Text that is displayed within the alert's action button. If no text is provided the button is not displayed.", "type": "string" }, { "name": "subtext", "attribute": "subtext", "description": "The text that is displayed below the main alert message", "type": "string" }, { "name": "hasCloseButton", "attribute": "has-close-button", "description": "Gives the alert a close button that will close the alert when clicked", "type": "boolean", "default": "false" }, { "name": "noPadding", "attribute": "no-padding", "description": "Opt out of default padding/whitespace around the alert", "type": "boolean", "default": "false" }, { "name": "type", "attribute": "type", "description": "Type of the alert being displayed", "type": "'default'|'critical'|'success'|'warning'", "default": "\"default\"" } ], "events": [ { "name": "d2l-alert-close", "description": "Dispatched when the alert's close button is clicked" }, { "name": "d2l-alert-button-press", "description": "Dispatched when the alert's action button is clicked" } ], "slots": [ { "name": "", "description": "Default content placed inside of the component" } ] }, { "name": "d2l-backdrop-dirty-overlay", "path": "./components/backdrop/backdrop-dirty-overlay.js", "description": "The `d2l-backdrop-dirty-overlay` component is used to render a dialog with text and an action over another element that needs to be refreshed after user input.", "attributes": [ { "name": "description", "description": "The text displayed on the dirty state overlay.", "type": "string" }, { "name": "action", "description": "The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.", "type": "string" } ], "properties": [ { "name": "description", "attribute": "description", "description": "The text displayed on the dirty state overlay.", "type": "string" }, { "name": "action", "attribute": "action", "description": "The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.", "type": "string" } ], "events": [ { "name": "d2l-backdrop-dirty-overlay-action", "description": "Dispatched when the action button on the overlay is clicked" } ] }, { "name": "d2l-backdrop-loading", "path": "./components/backdrop/backdrop-loading.js", "description": "A component for displaying a semi-transparent backdrop and a loading spinner over the containing element", "attributes": [ { "name": "for", "description": "Used to identify content that the backdrop should make inert", "type": "string" }, { "name": "dirty-text", "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.", "type": "string" }, { "name": "dirty-button-text", "description": "The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.", "type": "string" }, { "name": "dataState", "description": "The state of data in the element being overlaid. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed", "type": "'clean'|'dirty'|'loading'", "default": "\"clean\"" } ], "properties": [ { "name": "for", "attribute": "for", "description": "Used to identify content that the backdrop should make inert", "type": "string" }, { "name": "dirtyText", "attribute": "dirty-text", "description": "The text displayed on the dirty state overlay when the 'dirty' dataState is set.", "type": "string" }, { "name": "dirtyButtonText", "attribute": "dirty-button-text", "description": "The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.", "type": "string" }, { "name": "dataState", "attribute": "dataState", "description": "The state of data in the element being overlaid. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed", "type": "'clean'|'dirty'|'loading'", "default": "\"clean\"" } ] }, { "name": "d2l-backdrop", "path": "./components/backdrop/backdrop.js", "description": "A component for displaying a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying 'aria-hidden=\"true\"'.", "attributes": [ { "name": "for-target", "description": "REQUIRED: id of the target element to display backdrop behind", "type": "string" }, { "name": "shown", "description": "Used to control whether the backdrop is shown", "type": "boolean", "default": "false" }, { "name": "no-animate-hide", "description": "Disables the fade-out transition while the backdrop is being hidden", "type": "boolean", "default": "false" } ], "properties": [ { "name": "forTarget", "attribute": "for-target", "description": "REQUIRED: id of the target element to display backdrop behind", "type": "string" }, { "name": "shown", "attribute": "shown", "description": "Used to control whether the backdrop is shown", "type": "boolean", "default": "false" }, { "name": "noAnimateHide", "attribute": "no-animate-hide", "description": "Disables the fade-out transition while the backdrop is being hidden", "type": "boolean", "default": "false" } ] }, { "name": "d2l-breadcrumb-current-page", "path": "./components/breadcrumbs/breadcrumb-current-page.js", "description": "An entry within a parent representing the current page.", "attributes": [ { "name": "text", "description": "REQUIRED: The title of the current page", "type": "string" } ], "properties": [ { "name": "text", "attribute": "text", "description": "REQUIRED: The title of the current page", "type": "string" } ] }, { "name": "d2l-breadcrumb", "path": "./components/breadcrumbs/breadcrumb.js", "description": "An entry within a parent.", "attributes": [ { "name": "href", "description": "The Url that breadcrumb is pointing to", "type": "string" }, { "name": "target", "description": "The target of breadcrumb link", "type": "string" }, { "name": "aria-label", "description": "ACCESSIBILITY: ARIA label for the breadcrumb, used if `text` does not provide enough context for screen reader users", "type": "string" }, { "name": "text", "description": "REQUIRED: The text of the breadcrumb link", "type": "string", "default": "\"\"" } ], "properties": [ { "name": "href", "attribute": "href", "description": "The Url that breadcrumb is pointing to", "type": "string" }, { "name": "target", "attribute": "target", "description": "The target of breadcrumb link", "type": "string" }, { "name": "ariaLabel", "attribute": "aria-label", "description": "ACCESSIBILITY: ARIA label for the breadcrumb, used if `text` does not provide enough context for screen reader users", "type": "string" }, { "name": "text", "attribute": "text", "description": "REQUIRED: The text of the breadcrumb link", "type": "string", "default": "\"\"" } ] }, { "name": "d2l-breadcrumbs", "path": "./components/breadcrumbs/breadcrumbs.js", "description": "Help users understand where they are within the application, and provide useful clues about how the space is organized. They also provide a convenient navigation mechanism.", "attributes": [ { "name": "compact", "description": "Renders in compact mode, displaying only the last item", "type": "boolean", "default": "false" } ], "properties": [ { "name": "compact", "attribute": "compact", "description": "Renders in compact mode, displaying only the last item", "type": "boolean", "default": "false" } ], "slots": [ { "name": "", "description": "Breadcrumb items" } ] }, { "name": "d2l-button-add", "path": "./components/button/button-add.js", "description": "A component for quickly adding items to a specific locaiton.", "attributes": [ { "name": "text", "description": "ACCESSIBILITY: The text associated with the button. When mode is `icon-and-text` this text is displayed next to the icon, otherwise this text is in a tooltip.", "type": "string" }, { "name": "mode", "description": "Display mode of the component. Defaults to `icon` (plus icon is always visible). Other options are `icon-and-text` (plus icon and text are always visible), and `icon-when-interacted` (plus icon is only visible when hover or focus).", "type": "'icon'|'icon-and-text'|'icon-when-interacted'", "default": "\"icon\"" } ], "properties": [ { "name": "text", "attribute": "text", "description": "ACCESSIBILITY: The text associated with the button. When mode is `icon-and-text` this text is displayed next to the icon, otherwise this text is in a tooltip.", "type": "string" }, { "name": "mode", "attribute": "mode", "description": "Display mode of the component. Defaults to `icon` (plus icon is always visible). Other options are `icon-and-text` (plus icon and text are always visible), and `icon-when-interacted` (plus icon is only visible when hover or focus).", "type": "'icon'|'icon-and-text'|'icon-when-interacted'", "default": "\"icon\"" } ] }, { "name": "d2l-button-add-icon-text", "path": "./components/button/button-add.js", "attributes": [ { "name": "text", "type": "string" } ], "properties": [ { "name": "text", "attribute": "text", "type": "string" }, { "name": "animationType", "type": "string", "default": "\"opacity-transform\"" }, { "name": "visibleOnAncestor", "type": "boolean", "default": "false" } ] }, { "name": "d2l-button-copy", "path": "./components/button/button-copy.js", "description": "A button component that copies to the clipboard.", "attributes": [ { "name": "text", "description": "Description of the content being copied to clipboard", "type": "string" }, { "name": "disabled", "description": "Disables the button", "type": "boolean", "default": "false" } ], "properties": [ { "name": "text", "attribute": "text", "description": "Description of the content being copied to clipboard", "type": "string" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the button", "type": "boolean", "default": "false" } ], "events": [ { "name": "click", "description": "Dispatched when button is clicked. Use the event detail's `writeTextToClipboard` to write to the clipboard." } ] }, { "name": "d2l-button-icon", "path": "./components/button/button-icon.js", "description": "A button component that can be used just like the native button for instances where only an icon is displayed.", "attributes": [ { "name": "description", "description": "ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context", "type": "string" }, { "name": "h-align", "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts", "type": "'text'|'text-end'|''" }, { "name": "text", "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button", "type": "string" }, { "name": "translucent", "description": "Indicates to display translucent (e.g., on rich backgrounds)", "type": "boolean", "default": "false" }, { "name": "icon", "description": "Preset icon key (e.g. \"tier1:gear\")", "type": "string" }, { "name": "expanded", "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'", "type": "'true' | 'false'" }, { "name": "disabled-tooltip", "description": "Tooltip text when disabled", "type": "string" }, { "name": "disabled", "description": "Disables the button", "type": "boolean", "default": "false" } ], "properties": [ { "name": "description", "attribute": "description", "description": "ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context", "type": "string" }, { "name": "hAlign", "attribute": "h-align", "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts", "type": "'text'|'text-end'|''" }, { "name": "text", "attribute": "text", "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button", "type": "string" }, { "name": "translucent", "attribute": "translucent", "description": "Indicates to display translucent (e.g., on rich backgrounds)", "type": "boolean", "default": "false" }, { "name": "icon", "attribute": "icon", "description": "Preset icon key (e.g. \"tier1:gear\")", "type": "string" }, { "name": "expanded", "attribute": "expanded", "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'", "type": "'true' | 'false'" }, { "name": "disabledTooltip", "attribute": "disabled-tooltip", "description": "Tooltip text when disabled", "type": "string" }, { "name": "isButtonMixin", "type": "boolean" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the button", "type": "boolean", "default": "false" }, { "name": "animationType", "type": "string", "default": "\"opacity-transform\"" }, { "name": "visibleOnAncestor", "type": "boolean", "default": "false" } ], "slots": [ { "name": "icon", "description": "Optional slot for a custom icon" } ] }, { "name": "d2l-button-move", "path": "./components/button/button-move.js", "description": "A button component that provides a move action via a single button.", "attributes": [ { "name": "description", "description": "ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context", "type": "string" }, { "name": "disabled-down", "description": "Disables the down interaction", "type": "boolean" }, { "name": "disabled-end", "description": "Disables the end interaction", "type": "boolean" }, { "name": "disabled-home", "description": "Disables the home interaction", "type": "boolean" }, { "name": "disabled-left", "description": "Disables the left interaction", "type": "boolean" }, { "name": "disabled-right", "description": "Disables the right interaction", "type": "boolean" }, { "name": "disabled-up", "description": "Disables the up interaction", "type": "boolean" }, { "name": "text", "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button", "type": "string" } ], "properties": [ { "name": "description", "attribute": "description", "description": "ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context", "type": "string" }, { "name": "disabledDown", "attribute": "disabled-down", "description": "Disables the down interaction", "type": "boolean" }, { "name": "disabledEnd", "attribute": "disabled-end", "description": "Disables the end interaction", "type": "boolean" }, { "name": "disabledHome", "attribute": "disabled-home", "description": "Disables the home interaction", "type": "boolean" }, { "name": "disabledLeft", "attribute": "disabled-left", "description": "Disables the left interaction", "type": "boolean" }, { "name": "disabledRight", "attribute": "disabled-right", "description": "Disables the right interaction", "type": "boolean" }, { "name": "disabledUp", "attribute": "disabled-up", "description": "Disables the up interaction", "type": "boolean" }, { "name": "text", "attribute": "text", "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button", "type": "string" } ], "events": [ { "name": "d2l-button-move-action", "description": "Dispatched when move action occurs" } ] }, { "name": "d2l-button-split-item", "path": "./components/button/button-split-item.js", "description": "An split button item component used with JS handlers.", "attributes": [ { "name": "key", "description": "REQUIRED: Key of the action", "type": "string" }, { "name": "text", "description": "REQUIRED: Text displayed by the menu item", "type": "string" }, { "name": "description", "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context", "type": "string" }, { "name": "disabled", "description": "Disables the menu item", "type": "boolean", "default": "false" }, { "name": "lines", "description": "The number of lines to display before truncating text with an ellipsis. Defaults to 2.", "type": "number", "default": "2" } ], "properties": [ { "name": "key", "attribute": "key", "description": "REQUIRED: Key of the action", "type": "string" }, { "name": "text", "attribute": "text", "description": "REQUIRED: Text displayed by the menu item", "type": "string" }, { "name": "description", "attribute": "description", "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context", "type": "string" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the menu item", "type": "boolean", "default": "false" }, { "name": "lines", "attribute": "lines", "description": "The number of lines to display before truncating text with an ellipsis. Defaults to 2.", "type": "number", "default": "2" } ], "events": [ { "name": "d2l-menu-item-select", "description": "Dispatched when the menu item is selected" }, { "name": "d2l-menu-item-visibility-change", "description": "Dispatched when the visibility of the menu item changes" } ] }, { "name": "d2l-button-split", "path": "./components/button/button-split.js", "description": "A split button that provides a main action button and slot for a menu.", "attributes": [ { "name": "description", "description": "ACCESSIBILITY: A description to be added to the main action button for accessibility when text does not provide enough context", "type": "string" }, { "name": "disabled-tooltip", "description": "Tooltip text when disabled", "type": "string" }, { "name": "key", "description": "REQUIRED: Key of the main action", "type": "string" }, { "name": "text", "description": "ACCESSIBILITY: REQUIRED: Accessible text for the main action button", "type": "string" }, { "name": "disabled", "description": "Disables the main action and dropdown opener buttons", "type": "boolean", "default": "false" }, { "name": "primary", "description": "Styles the buttons as a primary buttons", "type": "boolean", "default": "false" } ], "properties": [ { "name": "description", "attribute": "description", "description": "ACCESSIBILITY: A description to be added to the main action button for accessibility when text does not provide enough context", "type": "string" }, { "name": "disabledTooltip", "attribute": "disabled-tooltip", "description": "Tooltip text when disabled", "type": "string" }, { "name": "key", "attribute": "key", "description": "REQUIRED: Key of the main action", "type": "string" }, { "name": "text", "attribute": "text", "description": "ACCESSIBILITY: REQUIRED: Accessible text for the main action button", "type": "string" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the main action and dropdown opener buttons", "type": "boolean", "default": "false" }, { "name": "primary", "attribute": "primary", "description": "Styles the buttons as a primary buttons", "type": "boolean", "default": "false" } ], "events": [ { "name": "click", "description": "Dispatched when a split button is clicked. The `key` is provided on the event detail." } ] }, { "name": "d2l-button-subtle-copy", "path": "./components/button/button-subtle-copy.js", "description": "A button component that copies to the clipboard, using the \"subtle\" button style.", "attributes": [ { "name": "description", "description": "ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context", "type": "string" }, { "name": "text", "description": "ACCESSIBILITY: REQUIRED: Text for the button", "type": "string" }, { "name": "slim", "description": "Whether to render the slimmer version of the button", "type": "boolean" }, { "name": "disabled", "description": "Disables the button", "type": "boolean", "default": "false" } ], "properties": [ { "name": "description", "attribute": "description", "description": "ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context", "type": "string" }, { "name": "text", "attribute": "text", "description": "ACCESSIBILITY: REQUIRED: Text for the button", "type": "string" }, { "name": "slim", "attribute": "slim", "description": "Whether to render the slimmer version of the button", "type": "boolean" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the button", "type": "boolean", "default": "false" } ], "events": [ { "name": "click", "description": "Dispatched when button is clicked. Use the event detail's `writeTextToClipboard` to write to the clipboard." } ] }, { "name": "d2l-button-subtle", "path": "./components/button/button-subtle.js", "description": "A button component that can be used just like the native button, but for advanced or de-emphasized actions.", "attributes": [ { "name": "description", "description": "ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context", "type": "string" }, { "name": "h-align", "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts", "type": "'text'|'text-end'|''" }, { "name": "text", "description": "ACCESSIBILITY: REQUIRED: Text for the button", "type": "string" }, { "name": "icon-right", "description": "Indicates that the icon should be rendered on right", "type": "boolean", "default": "false" }, { "name": "slim", "description": "Whether to render the slimmer version of the button", "type": "boolean", "default": "false" }, { "name": "icon", "description": "Preset icon key (e.g. \"tier1:gear\")", "type": "string" }, { "name": "expanded", "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'", "type": "'true' | 'false'" }, { "name": "disabled-tooltip", "description": "Tooltip text when disabled", "type": "string" }, { "name": "disabled", "description": "Disables the button", "type": "boolean", "default": "false" } ], "properties": [ { "name": "description", "attribute": "description", "description": "ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context", "type": "string" }, { "name": "hAlign", "attribute": "h-align", "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts", "type": "'text'|'text-end'|''" }, { "name": "text", "attribute": "text", "description": "ACCESSIBILITY: REQUIRED: Text for the button", "type": "string" }, { "name": "iconRight", "attribute": "icon-right", "description": "Indicates that the icon should be rendered on right", "type": "boolean", "default": "false" }, { "name": "slim", "attribute": "slim", "description": "Whether to render the slimmer version of the button", "type": "boolean", "default": "false" }, { "name": "icon", "attribute": "icon", "description": "Preset icon key (e.g. \"tier1:gear\")", "type": "string" }, { "name": "expanded", "attribute": "expanded", "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'", "type": "'true' | 'false'" }, { "name": "disabledTooltip", "attribute": "disabled-tooltip", "description": "Tooltip text when disabled", "type": "string" }, { "name": "isButtonMixin", "type": "boolean" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the button", "type": "boolean", "default": "false" } ], "slots": [ { "name": "", "description": "Default content placed inside of the button" }, { "name": "icon", "description": "Optional slot for a custom icon" } ] }, { "name": "d2l-button-toggle", "path": "./components/button/button-toggle.js", "description": "A button container component for button toggles.", "attributes": [ { "name": "pressed", "description": "Pressed state", "type": "boolean", "default": "false" } ], "properties": [ { "name": "pressed", "attribute": "pressed", "description": "Pressed state", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-button-toggle-before-change", "description": "Dispatched before pressed state is updated. Can be canceled to allow the consumer to handle toggling pressed state. This is useful if something needs to happen prior to the pressed state being toggled." }, { "name": "d2l-button-toggle-change", "description": "Dispatched when the pressed state changes" } ] }, { "name": "d2l-button", "path": "./components/button/button.js", "description": "A button component that can be used just like the native button element.", "attributes": [ { "name": "description", "description": "ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context", "type": "string" }, { "name": "primary", "description": "Styles the button as a primary button", "type": "boolean", "default": "false" }, { "name": "expanded", "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'", "type": "'true' | 'false'" }, { "name": "disabled-tooltip", "description": "Tooltip text when disabled", "type": "string" }, { "name": "disabled", "description": "Disables the button", "type": "boolean", "default": "false" } ], "properties": [ { "name": "description", "attribute": "description", "description": "ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context", "type": "string" }, { "name": "primary", "attribute": "primary", "description": "Styles the button as a primary button", "type": "boolean", "default": "false" }, { "name": "expanded", "attribute": "expanded", "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'", "type": "'true' | 'false'" }, { "name": "disabledTooltip", "attribute": "disabled-tooltip", "description": "Tooltip text when disabled", "type": "string" }, { "name": "isButtonMixin", "type": "boolean" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the button", "type": "boolean", "default": "false" } ], "slots": [ { "name": "", "description": "Default content placed inside of the button" } ] }, { "name": "d2l-floating-buttons", "path": "./components/button/floating-buttons.js", "description": "A wrapper component to display floating workflow buttons. When the normal position of the workflow buttons is below the bottom edge of the viewport, they will dock at the bottom edge. When the normal position becomes visible, they will undock.", "attributes": [ { "name": "always-float", "description": "Indicates to display buttons as always floating", "type": "boolean", "default": "false" } ], "properties": [ { "name": "alwaysFloat", "attribute": "always-float", "description": "Indicates to display buttons as always floating", "type": "boolean", "default": "false" }, { "name": "loadingComplete", "type": "Promise" }, { "name": "resolveLoadingComplete", "type": "() => void" } ], "slots": [ { "name": "", "description": "Content to be displayed in the floating container" } ] }, { "name": "d2l-calendar", "path": "./components/calendar/calendar.js", "description": "A component can be used to display a responsively sized calendar that allows for date selection.", "attributes": [ { "name": "day-infos", "description": "Additional info for each day (ex. events on [{\"date\": \"2024-09-19\"}])", "type": "Array" }, { "name": "label", "description": "Unique label text for calendar (necessary if multiple calendars on page)", "type": "string" }, { "name": "initial-value", "description": "ADVANCED: Initial date to override the logic for determining default date to initially show", "type": "string" }, { "name": "max-value", "description": "Maximum valid date that could be selected by a user", "type": "string" }, { "name": "min-value", "description": "Minimum valid date that could be selected by a user", "type": "string" }, { "name": "selected-value", "description": "Currently selected date", "type": "string" }, { "name": "summary", "description": "ACCESSIBILITY: Summary of the calendar used by screen reader users for identifying the calendar and/or summarizing its purpose", "type": "string" } ], "properties": [ { "name": "dayInfos", "attribute": "day-infos", "description": "Additional info for each day (ex. events on [{\"date\": \"2024-09-19\"}])", "type": "Array" }, { "name": "label", "attribute": "label", "description": "Unique label text for calendar (necessary if multiple calendars on page)", "type": "string" }, { "name": "initialValue", "attribute": "initial-value", "description": "ADVANCED: Initial date to override the logic for determining default date to initially show", "type": "string" }, { "name": "maxValue", "attribute": "max-value", "description": "Maximum valid date that could be selected by a user", "type": "string" }, { "name": "minValue", "attribute": "min-value", "description": "Minimum valid date that could be selected by a user", "type": "string" }, { "name": "selectedValue", "attribute": "selected-value", "description": "Currently selected date", "type": "string" }, { "name": "summary", "attribute": "summary", "description": "ACCESSIBILITY: Summary of the calendar used by screen reader users for identifying the calendar and/or summarizing its purpose", "type": "string" } ], "events": [ { "name": "d2l-calendar-view-change", "description": "Dispatched when the calender view changes. \"e.detail\" provides the year and month in view." }, { "name": "d2l-calendar-selected", "description": "Dispatched when a date is selected through click, space, or enter. \"e.detail.date\" is in ISO 8601 calendar date format (\"YYYY-MM-DD\")." } ], "slots": [ { "name": "", "description": "Content displayed under the calendar (e.g., buttons)" } ] }, { "name": "d2l-card-content-meta", "path": "./components/card/card-content-meta.js", "description": "A helper for providing layout/style for meta data within the `content` slot.", "slots": [ { "name": "", "description": "Slot for meta data text" } ] }, { "name": "d2l-card-content-title", "path": "./components/card/card-content-title.js", "description": "A helper for providing layout/style for a title within the `content` slot.", "slots": [ { "name": "", "description": "Slot for title text" } ] }, { "name": "d2l-card-footer-link", "path": "./components/card/card-footer-link.js", "description": "An icon link that can be placed in the `footer` slot.", "attributes": [ { "name": "href", "description": "URL or URL fragment of the link", "type": "string" }, { "name": "hreflang", "description": "Indicates the human language of the linked resource; purely advisory, with no built-in functionality", "type": "string" }, { "name": "icon", "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\"). Must be a tier 1 icon.", "type": "string" }, { "name": "rel", "description": "Specifies the relationship of the target object to the link object", "type": "string" }, { "name": "secondary-count", "description": "Secondary count to display as a count bubble on the icon", "type": "number" }, { "name": "secondary-count-max-digits", "description": "Maximum digits to display in the secondary count. Defaults to no limit", "type": "number" }, { "name": "target", "description": "Where to display the linked URL", "type": "string" }, { "name": "text", "description": "ACCESSIBILITY: REQUIRED: Accessible text for the link", "type": "string" }, { "name": "type", "description": "Specifies the media type in the form of a MIME type for the linked URL; purely advisory, with no built-in functionality", "type": "string" }, { "name": "download", "description": "Download a URL instead of navigating to it", "type": "boolean", "default": "false" }, { "name": "secondary-count-type", "description": "Controls the style of the secondary count bubble", "type": "'count'|'notification'", "default": "\"notification\"" } ], "properties": [ { "name": "href", "attribute": "href", "description": "URL or URL fragment of the link", "type": "string" }, { "name": "hreflang", "attribute": "hreflang", "description": "Indicates the human language of the linked resource; purely advisory, with no built-in functionality", "type": "string" }, { "name": "icon", "attribute": "icon", "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\"). Must be a tier 1 icon.", "type": "string" }, { "name": "rel", "attribute": "rel", "description": "Specifies the relationship of the target object to the link object", "type": "string" }, { "name": "secondaryCount", "attribute": "secondary-count", "description": "Secondary count to display as a count bubble on the icon", "type": "number" }, { "name": "secondaryCountMaxDigits", "attribute": "secondary-count-max-digits", "description": "Maximum digits to display in the secondary count. Defaults to no limit", "type": "number" }, { "name": "target", "attribute": "target", "description": "Where to display the linked URL", "type": "string" }, { "name": "text", "attribute": "text", "description": "ACCESSIBILITY: REQUIRED: Accessible text for the link", "type": "string" }, { "name": "type", "attribute": "type", "description": "Specifies the media type in the form of a MIME type for the linked URL; purely advisory, with no built-in functionality", "type": "string" }, { "name": "download", "attribute": "download", "description": "Download a URL instead of navigating to it", "type": "boolean", "default": "false" }, { "name": "secondaryCountType", "attribute": "secondary-count-type", "description": "Controls the style of the secondary count bubble", "type": "'count'|'notification'", "default": "\"notification\"" } ], "slots": [ { "name": "tooltip", "description": "slot for the link tooltip" } ] }, { "name": "d2l-card-loading-shimmer", "path": "./components/card/card-loading-shimmer.js", "description": "A card layout component for when the card header is loading.", "attributes": [ { "name": "loading", "description": "Whether the header content is being loaded", "type": "boolean", "default": "false" } ], "properties": [ { "name": "loading", "attribute": "loading", "description": "Whether the header content is being loaded", "type": "boolean", "default": "false" } ], "slots": [ { "name": "", "description": "Slot for header content being loaded" } ] }, { "name": "d2l-card", "path": "./components/card/card.js", "description": "A container element that provides specific layout using several slots.", "attributes": [ { "name": "href", "description": "Location for the primary action/navigation", "type": "string" }, { "name": "hreflang", "description": "Indicates the human language of the linked resource; purely advisory, with no built-in functionality", "type": "string" }, { "name": "rel", "description": "Specifies the relationship of the target object to the link object", "type": "string" }, { "name": "target", "description": "Where to display the linked URL", "type": "string" }, { "name": "text", "description": "ACCESSIBILITY: Accessible text for the card; required if `href` is set", "type": "string" }, { "name": "type", "description": "Specifies the media type in the form of a MIME type for the linked URL; purely advisory, with no built-in functionality", "type": "string" }, { "name": "align-center", "description": "Style the card's content and footer as centered horizontally", "type": "boolean", "default": "false" }, { "name": "download", "description": "Download a URL instead of navigating to it", "type": "boolean", "default": "false" }, { "name": "subtle", "description": "Subtle aesthetic on non-white backgrounds", "type": "boolean", "default": "false" } ], "properties": [ { "name": "href", "attribute": "href", "description": "Location for the primary action/navigation", "type": "string" }, { "name": "hreflang", "attribute": "hreflang", "description": "Indicates the human language of the linked resource; purely advisory, with no built-in functionality", "type": "string" }, { "name": "rel", "attribute": "rel", "description": "Specifies the relationship of the target object to the link object", "type": "string" }, { "name": "target", "attribute": "target", "description": "Where to display the linked URL", "type": "string" }, { "name": "text", "attribute": "text", "description": "ACCESSIBILITY: Accessible text for the card; required if `href` is set", "type": "string" }, { "name": "type", "attribute": "type", "description": "Specifies the media type in the form of a MIME type for the linked URL; purely advisory, with no built-in functionality", "type": "string" }, { "name": "alignCenter", "attribute": "align-center", "description": "Style the card's content and footer as centered horizontally", "type": "boolean", "default": "false" }, { "name": "download", "attribute": "download", "description": "Download a URL instead of navigating to it", "type": "boolean", "default": "false" }, { "name": "subtle", "attribute": "subtle", "description": "Subtle aesthetic on non-white backgrounds", "type": "boolean", "default": "false" } ], "slots": [ { "name": "content", "description": "Slot for primary content such as title and supplementary info (no actionable elements)" }, { "name": "actions", "description": "Slot for buttons and dropdown openers to be placed in top right corner of header" }, { "name": "badge", "description": "Slot for badge content, such as a profile image or status indicator" }, { "name": "footer", "description": "Slot for footer content, such secondary actions" }, { "name": "header", "description": "Slot for header content, such as course image (no actionable elements)" } ] }, { "name": "d2l-collapsible-panel-group", "path": "./components/collapsible-panel/collapsible-panel-group.js", "description": "A component that renders a container and layout for collapsible panels", "attributes": [ { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "properties": [ { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "slots": [ { "name": "", "description": "Slot for panels. Only accepts `d2l-collapsible-panel`" } ] }, { "name": "d2l-collapsible-panel-summary-item", "path": "./components/collapsible-panel/collapsible-panel-summary-item.js", "description": "A component for a \"summary item\" child component that describes the content in a collapsible panel.", "attributes": [ { "name": "text", "description": "REQUIRED: Text that is displayed", "type": "string", "default": "\"\"" }, { "name": "lines", "description": "The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified.", "type": "number", "default": "0" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "properties": [ { "name": "text", "attribute": "text", "description": "REQUIRED: Text that is displayed", "type": "string", "default": "\"\"" }, { "name": "lines", "attribute": "lines", "description": "The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified.", "type": "number", "default": "0" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ] }, { "name": "d2l-collapsible-panel", "path": "./components/collapsible-panel/collapsible-panel.js", "description": "A container with a title that can be expanded/collapsed to show/hide content.", "attributes": [ { "name": "panel-title", "description": "REQUIRED: The title of the panel", "type": "string" }, { "name": "expand-collapse-label", "description": "ACCESSIBILITY: Label describing the contents of the header for screen reader users", "type": "string" }, { "name": "expanded", "description": "Whether or not the panel is expanded", "type": "boolean", "default": "false" }, { "name": "heading-level", "description": "The semantic heading level (h1-h6)", "type": "'1'|'2'|'3'|'4'|'5'|'6'", "default": "\"\\\"3\\\"\"" }, { "name": "heading-style", "description": "The heading style to use", "type": "'1'|'2'|'3'|'4'", "default": "\"\\\"3\\\"\"" }, { "name": "padding-type", "description": "Horizontal padding of the panel", "type": "'default'|'large'", "default": "\"\\\"default\\\"\"" }, { "name": "type", "description": "Type of collapsible panel", "type": "'default'|'subtle'|'inline'", "default": "\"\\\"default\\\"\"" }, { "name": "no-sticky", "description": "Disables sticky positioning for the header", "type": "boolean", "default": "false" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "properties": [ { "name": "panelTitle", "attribute": "panel-title", "description": "REQUIRED: The title of the panel", "type": "string" }, { "name": "expandCollapseLabel", "attribute": "expand-collapse-label", "description": "ACCESSIBILITY: Label describing the contents of the header for screen reader users", "type": "string" }, { "name": "expanded", "attribute": "expanded", "description": "Whether or not the panel is expanded", "type": "boolean", "default": "false" }, { "name": "headingLevel", "attribute": "heading-level", "description": "The semantic heading level (h1-h6)", "type": "'1'|'2'|'3'|'4'|'5'|'6'", "default": "\"\\\"3\\\"\"" }, { "name": "headingStyle", "attribute": "heading-style", "description": "The heading style to use", "type": "'1'|'2'|'3'|'4'", "default": "\"\\\"3\\\"\"" }, { "name": "paddingType", "attribute": "padding-type", "description": "Horizontal padding of the panel", "type": "'default'|'large'", "default": "\"\\\"default\\\"\"" }, { "name": "type", "attribute": "type", "description": "Type of collapsible panel", "type": "'default'|'subtle'|'inline'", "default": "\"\\\"default\\\"\"" }, { "name": "noSticky", "attribute": "no-sticky", "description": "Disables sticky positioning for the header", "type": "boolean", "default": "false" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "events": [ { "name": "d2l-collapsible-panel-expand", "description": "Dispatched when the panel is expanded" }, { "name": "d2l-collapsible-panel-collapse", "description": "Dispatched when the panel is collapsed" } ], "slots": [ { "name": "before", "description": "Slot for content to be placed at the left side of the header, aligned with the title and header slot" }, { "name": "header", "description": "Slot for supporting header content" }, { "name": "summary", "description": "Slot for the summary of the expanded content. Only accepts `d2l-collapsible-panel-summary-item`" }, { "name": "", "description": "Slot for the expanded content" }, { "name": "actions", "description": "Slot for buttons and dropdown openers to be placed in top right corner of header" } ] }, { "name": "d2l-color-swatch", "path": "./components/colors/demo/color-swatch.js", "attributes": [ { "name": "name", "type": "string" } ], "properties": [ { "name": "name", "attribute": "name", "type": "string" } ] }, { "name": "d2l-count-badge-icon", "path": "./components/count-badge/count-badge-icon.js", "attributes": [ { "name": "icon", "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\")", "type": "string" }, { "name": "max-digits", "description": "Specifies a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and five for \"count\" type.", "type": "number" }, { "name": "number", "description": "REQUIRED: The number to be displayed on the badge; must be a positive integer", "type": "number" }, { "name": "announce-changes", "description": "ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users", "type": "boolean", "default": "false" }, { "name": "focus-ring", "description": "Forces the focus ring around the badge", "type": "boolean", "default": "false" }, { "name": "has-tooltip", "description": "ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction", "type": "boolean", "default": "false" }, { "name": "hide-zero", "description": "Hides the count badge when `number` is zero", "type": "boolean", "default": "false" }, { "name": "size", "description": "The size of the badge", "type": "'small'|'large'", "default": "\"small\"" }, { "name": "tab-stop", "description": "ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge", "type": "boolean", "default": "false" }, { "name": "text", "description": "ACCESSIBILITY: REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled", "type": "string", "default": "\"\"" }, { "name": "type", "description": "The type of the badge", "type": "'count'|'notification'", "default": "\"count\"" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "properties": [ { "name": "icon", "attribute": "icon", "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\")", "type": "string" }, { "name": "maxDigits", "attribute": "max-digits", "description": "Specifies a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and five for \"count\" type.", "type": "number" }, { "name": "number", "attribute": "number", "description": "REQUIRED: The number to be displayed on the badge; must be a positive integer", "type": "number" }, { "name": "announceChanges", "attribute": "announce-changes", "description": "ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users", "type": "boolean", "default": "false" }, { "name": "forceFocusRing", "attribute": "focus-ring", "description": "Forces the focus ring around the badge", "type": "boolean", "default": "false" }, { "name": "hasTooltip", "attribute": "has-tooltip", "description": "ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction", "type": "boolean", "default": "false" }, { "name": "hideZero", "attribute": "hide-zero", "description": "Hides the count badge when `number` is zero", "type": "boolean", "default": "false" }, { "name": "size", "attribute": "size", "description": "The size of the badge", "type": "'small'|'large'", "default": "\"small\"" }, { "name": "tabStop", "attribute": "tab-stop", "description": "ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge", "type": "boolean", "default": "false" }, { "name": "text", "attribute": "text", "description": "ACCESSIBILITY: REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled", "type": "string", "default": "\"\"" }, { "name": "type", "attribute": "type", "description": "The type of the badge", "type": "'count'|'notification'", "default": "\"count\"" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ] }, { "name": "d2l-count-badge", "path": "./components/count-badge/count-badge.js", "attributes": [ { "name": "max-digits", "description": "Specifies a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and five for \"count\" type.", "type": "number" }, { "name": "number", "description": "REQUIRED: The number to be displayed on the badge; must be a positive integer", "type": "number" }, { "name": "announce-changes", "description": "ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users", "type": "boolean", "default": "false" }, { "name": "focus-ring", "description": "Forces the focus ring around the badge", "type": "boolean", "default": "false" }, { "name": "has-tooltip", "description": "ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction", "type": "boolean", "default": "false" }, { "name": "hide-zero", "description": "Hides the count badge when `number` is zero", "type": "boolean", "default": "false" }, { "name": "size", "description": "The size of the badge", "type": "'small'|'large'", "default": "\"small\"" }, { "name": "tab-stop", "description": "ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge", "type": "boolean", "default": "false" }, { "name": "text", "description": "ACCESSIBILITY: REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled", "type": "string", "default": "\"\"" }, { "name": "type", "description": "The type of the badge", "type": "'count'|'notification'", "default": "\"count\"" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "properties": [ { "name": "maxDigits", "attribute": "max-digits", "description": "Specifies a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and five for \"count\" type.", "type": "number" }, { "name": "number", "attribute": "number", "description": "REQUIRED: The number to be displayed on the badge; must be a positive integer", "type": "number" }, { "name": "announceChanges", "attribute": "announce-changes", "description": "ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users", "type": "boolean", "default": "false" }, { "name": "forceFocusRing", "attribute": "focus-ring", "description": "Forces the focus ring around the badge", "type": "boolean", "default": "false" }, { "name": "hasTooltip", "attribute": "has-tooltip", "description": "ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction", "type": "boolean", "default": "false" }, { "name": "hideZero", "attribute": "hide-zero", "description": "Hides the count badge when `number` is zero", "type": "boolean", "default": "false" }, { "name": "size", "attribute": "size", "description": "The size of the badge", "type": "'small'|'large'", "default": "\"small\"" }, { "name": "tabStop", "attribute": "tab-stop", "description": "ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge", "type": "boolean", "default": "false" }, { "name": "text", "attribute": "text", "description": "ACCESSIBILITY: REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled", "type": "string", "default": "\"\"" }, { "name": "type", "attribute": "type", "description": "The type of the badge", "type": "'count'|'notification'", "default": "\"count\"" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ] }, { "name": "d2l-code-view", "path": "./components/demo/code-view.js", "attributes": [ { "name": "hide-language", "type": "boolean" }, { "name": "language", "type": "string", "default": "\"html\"" } ], "properties": [ { "name": "hideLanguage", "attribute": "hide-language", "type": "boolean" }, { "name": "language", "attribute": "language", "type": "string", "default": "\"html\"" } ] }, { "name": "d2l-demo-page-settings", "path": "./components/demo/demo-page-settings.js", "attributes": [ { "name": "panel-title", "type": "string" } ], "properties": [ { "name": "panelTitle", "attribute": "panel-title", "type": "string" } ] }, { "name": "d2l-demo-page", "path": "./components/demo/demo-page.js", "attributes": [ { "name": "page-title", "type": "string" } ], "properties": [ { "name": "pageTitle", "attribute": "page-title", "type": "string" } ] }, { "name": "d2l-demo-snippet", "path": "./components/demo/demo-snippet.js", "attributes": [ { "name": "code-view-hidden", "type": "boolean" }, { "name": "no-padding", "type": "boolean" }, { "name": "overflow-hidden", "type": "boolean" }, { "name": "full-width", "type": "boolean", "default": "false" } ], "properties": [ { "name": "codeViewHidden", "attribute": "code-view-hidden", "type": "boolean" }, { "name": "noPadding", "attribute": "no-padding", "type": "boolean" }, { "name": "overflowHidden", "attribute": "overflow-hidden", "type": "boolean" }, { "name": "fullWidth", "attribute": "full-width", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-demo-snippet-fullscreen-toggle" } ] }, { "name": "d2l-test-dl", "path": "./components/description-list/demo/description-list-test.js", "attributes": [ { "name": "breakpoint", "description": "Width for component to use a stacked layout", "type": "number" }, { "name": "force-stacked", "description": "Force the component to always use a stacked layout; will override breakpoint attribute", "type": "boolean" } ], "properties": [ { "name": "breakpoint", "attribute": "breakpoint", "description": "Width for component to use a stacked layout", "type": "number" }, { "name": "forceStacked", "attribute": "force-stacked", "description": "Force the component to always use a stacked layout; will override breakpoint attribute", "type": "boolean" }, { "name": "type", "type": "string", "default": "\"default\"" } ] }, { "name": "d2l-dl-wrapper", "path": "./components/description-list/description-list-wrapper.js", "description": "Wraps a native
element, providing styling and resize behavior.", "attributes": [ { "name": "breakpoint", "description": "Width for component to use a stacked layout", "type": "number", "default": "240" }, { "name": "force-stacked", "description": "Force the component to always use a stacked layout; will override breakpoint attribute", "type": "boolean", "default": "false" } ], "properties": [ { "name": "breakpoint", "attribute": "breakpoint", "description": "Width for component to use a stacked layout", "type": "number", "default": "240" }, { "name": "forceStacked", "attribute": "force-stacked", "description": "Force the component to always use a stacked layout; will override breakpoint attribute", "type": "boolean", "default": "false" } ], "slots": [ { "name": "", "description": "Content to wrap" } ] }, { "name": "d2l-dialog-demo-async-content-until", "path": "./components/dialog/demo/dialog-async-content-until.js", "attributes": [ { "name": "href", "type": "string" } ], "properties": [ { "name": "href", "attribute": "href", "type": "string" }, { "name": "loadingComplete", "type": "Promise" }, { "name": "resolveLoadingComplete", "type": "() => void" } ] }, { "name": "d2l-dialog-demo-async-content", "path": "./components/dialog/demo/dialog-async-content.js", "attributes": [ { "name": "href", "type": "string" } ], "properties": [ { "name": "href", "attribute": "href", "type": "string" }, { "name": "loadingComplete", "type": "Promise" }, { "name": "resolveLoadingComplete", "type": "() => void" } ] }, { "name": "d2l-dialog-demo-container", "path": "./components/dialog/demo/dialog-container.js", "attributes": [ { "name": "opened", "type": "boolean", "default": "false" } ], "properties": [ { "name": "opened", "attribute": "opened", "type": "boolean", "default": "false" } ] }, { "name": "d2l-dialog-confirm", "path": "./components/dialog/dialog-confirm.js", "description": "A simple confirmation dialog for prompting the user. Apply the \"data-dialog-action\" attribute to workflow buttons to automatically close the confirm dialog with the action value.", "attributes": [ { "name": "text", "description": "REQUIRED: The text content for the confirmation dialog. Newline characters (` ` in HTML or `\\n` in JavaScript) will render as multiple paragraphs.", "type": "string" }, { "name": "critical", "description": "Whether the dialog should indicate that its message is important to the user", "type": "boolean", "default": "false" }, { "name": "title-text", "description": "The optional title for the dialog", "type": "string" }, { "name": "no-content-scroll", "description": "ADVANCED: Opt out of dialog content scrolling", "type": "boolean", "default": "false" }, { "name": "opened", "description": "Whether or not the dialog is open", "type": "boolean", "default": "false" } ], "properties": [ { "name": "text", "attribute": "text", "description": "REQUIRED: The text content for the confirmation dialog. Newline characters (` ` in HTML or `\\n` in JavaScript) will render as multiple paragraphs.", "type": "string" }, { "name": "critical", "attribute": "critical", "description": "Whether the dialog should indicate that its message is important to the user", "type": "boolean", "default": "false" }, { "name": "titleText", "attribute": "title-text", "description": "The optional title for the dialog", "type": "string" }, { "name": "focusableContentElemPresent", "type": "boolean", "default": "false" }, { "name": "noContentScroll", "attribute": "no-content-scroll", "description": "ADVANCED: Opt out of dialog content scrolling", "type": "boolean", "default": "false" }, { "name": "opened", "attribute": "opened", "description": "Whether or not the dialog is open", "type": "boolean", "default": "false" }, { "name": "preferNative", "default": "false" } ], "events": [ { "name": "d2l-dialog-before-close", "description": "Dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing" }, { "name": "d2l-dialog-close", "description": "Dispatched with the action value when the dialog is closed for any reason" }, { "name": "d2l-dialog-open", "description": "Dispatched when the dialog is opened" } ], "slots": [ { "name": "footer", "description": "Slot for footer content such as workflow buttons" } ] }, { "name": "d2l-dialog-fullscreen", "path": "./components/dialog/dialog-fullscreen.js", "description": "A generic fullscreen dialog that provides a slot for arbitrary content and a \"footer\" slot for workflow buttons. Apply the \"data-dialog-action\" attribute to workflow buttons to automatically close the dialog with the action value.", "attributes": [ { "name": "async", "description": "Whether to render a loading-spinner and wait for state changes via AsyncContainerMixin", "type": "boolean", "default": "false" }, { "name": "no-padding", "description": "Render with no content padding", "type": "boolean", "default": "false" }, { "name": "width", "description": "The preferred width (unit-less) for the dialog. Minimum 1170 (anything smaller will have no effect).", "type": "number", "default": "1170" }, { "name": "title-text", "description": "REQUIRED: the title for the dialog", "type": "string" }, { "name": "no-content-scroll", "description": "ADVANCED: Opt out of dialog content scrolling", "type": "boolean", "default": "false" }, { "name": "opened", "description": "Whether or not the dialog is open", "type": "boolean", "default": "false" } ], "properties": [ { "name": "async", "attribute": "async", "description": "Whether to render a loading-spinner and wait for state changes via AsyncContainerMixin", "type": "boolean", "default": "false" }, { "name": "noPadding", "attribute": "no-padding", "description": "Render with no content padding", "type": "boolean", "default": "false" }, { "name": "width", "attribute": "width", "description": "The preferred width (unit-less) for the dialog. Minimum 1170 (anything smaller will have no effect).", "type": "number", "default": "1170" }, { "name": "asyncContainerCustom", "type": "boolean" }, { "name": "asyncPendingDelay", "type": "number", "default": "0" }, { "name": "titleText", "attribute": "title-text", "description": "REQUIRED: the title for the dialog", "type": "string" }, { "name": "focusableContentElemPresent", "type": "boolean", "default": "false" }, { "name": "noContentScroll", "attribute": "no-content-scroll", "description": "ADVANCED: Opt out of dialog content scrolling", "type": "boolean", "default": "false" }, { "name": "opened", "attribute": "opened", "description": "Whether or not the dialog is open", "type": "boolean", "default": "false" }, { "name": "preferNative", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-dialog-before-close", "description": "Dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing" }, { "name": "d2l-dialog-close", "description": "Dispatched with the action value when the dialog is closed for any reason" }, { "name": "d2l-dialog-open", "description": "Dispatched when the dialog is opened" } ], "slots": [ { "name": "", "description": "Default slot for content inside dialog" }, { "name": "footer", "description": "Slot for footer content such as workflow buttons" } ] }, { "name": "d2l-dialog", "path": "./components/dialog/dialog.js", "description": "A generic dialog that provides a slot for arbitrary content and a \"footer\" slot for workflow buttons. Apply the \"data-dialog-action\" attribute to workflow buttons to automatically close the dialog with the action value.", "attributes": [ { "name": "async", "description": "Whether to render a loading-spinner and wait for state changes via AsyncContainerMixin", "type": "boolean", "default": "false" }, { "name": "critical", "description": "Whether the dialog should indicate that its message is important to the user", "type": "boolean", "default": "false" }, { "name": "describe-content", "description": "Causes screen readers to announce the content of the dialog on open. Only use if the content is concise and contains only text since screen readers ignore HTML semantics and some have a ~250 character limit.", "type": "boolean", "default": "false" }, { "name": "full-height", "description": "Whether to render the dialog at the maximum height", "type": "boolean", "default": "false" }, { "name": "width", "description": "The preferred width (unit-less) for the dialog", "type": "number", "default": "600" }, { "name": "title-text", "description": "REQUIRED: the title for the dialog", "type": "string" }, { "name": "no-content-scroll", "description": "ADVANCED: Opt out of dialog content scrolling", "type": "boolean", "default": "false" }, { "name": "opened", "description": "Whether or not the dialog is open", "type": "boolean", "default": "false" } ], "properties": [ { "name": "async", "attribute": "async", "description": "Whether to render a loading-spinner and wait for state changes via AsyncContainerMixin", "type": "boolean", "default": "false" }, { "name": "critical", "attribute": "critical", "description": "Whether the dialog should indicate that its message is important to the user", "type": "boolean", "default": "false" }, { "name": "describeContent", "attribute": "describe-content", "description": "Causes screen readers to announce the content of the dialog on open. Only use if the content is concise and contains only text since screen readers ignore HTML semantics and some have a ~250 character limit.", "type": "boolean", "default": "false" }, { "name": "fullHeight", "attribute": "full-height", "description": "Whether to render the dialog at the maximum height", "type": "boolean", "default": "false" }, { "name": "width", "attribute": "width", "description": "The preferred width (unit-less) for the dialog", "type": "number", "default": "600" }, { "name": "asyncContainerCustom", "type": "boolean" }, { "name": "asyncPendingDelay", "type": "number", "default": "0" }, { "name": "titleText", "attribute": "title-text", "description": "REQUIRED: the title for the dialog", "type": "string" }, { "name": "focusableContentElemPresent", "type": "boolean", "default": "false" }, { "name": "noContentScroll", "attribute": "no-content-scroll", "description": "ADVANCED: Opt out of dialog content scrolling", "type": "boolean", "default": "false" }, { "name": "opened", "attribute": "opened", "description": "Whether or not the dialog is open", "type": "boolean", "default": "false" }, { "name": "preferNative", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-dialog-before-close", "description": "Dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing" }, { "name": "d2l-dialog-close", "description": "Dispatched with the action value when the dialog is closed for any reason" }, { "name": "d2l-dialog-open", "description": "Dispatched when the dialog is opened" } ], "slots": [ { "name": "", "description": "Default slot for content inside dialog" }, { "name": "footer", "description": "Slot for footer content such as workflow buttons" } ] }, { "name": "d2l-dropdown-menu-demo-view", "path": "./components/dropdown/demo/dropdown-menu-demo-view.js" }, { "name": "d2l-dropdown-button-subtle", "path": "./components/dropdown/dropdown-button-subtle.js", "description": "A \"d2l-button-subtle\" opener for dropdown content.", "attributes": [ { "name": "description", "description": "A description to be added to the opener button for accessibility when text on button does not provide enough context", "type": "string" }, { "name": "h-align", "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts", "type": "'text'|'text-end'|''" }, { "name": "text", "description": "REQUIRED: Text for the button", "type": "string" }, { "name": "no-auto-open", "description": "Prevents the dropdown from opening automatically on or on key press", "type": "boolean", "default": "false" }, { "name": "open-on-hover", "description": "Optionally open dropdown on click or hover action", "type": "boolean", "default": "false" }, { "name": "disabled", "description": "Disables the dropdown opener", "type": "boolean", "default": "false" } ], "properties": [ { "name": "description", "attribute": "description", "description": "A description to be added to the opener button for accessibility when text on button does not provide enough context", "type": "string" }, { "name": "hAlign", "attribute": "h-align", "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts", "type": "'text'|'text-end'|''" }, { "name": "text", "attribute": "text", "description": "REQUIRED: Text for the button", "type": "string" }, { "name": "dropdownOpener", "type": "boolean", "default": "true" }, { "name": "noAutoOpen", "attribute": "no-auto-open", "description": "Prevents the dropdown from opening automatically on or on key press", "type": "boolean", "default": "false" }, { "name": "openOnHover", "attribute": "open-on-hover", "description": "Optionally open dropdown on click or hover action", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the dropdown opener", "type": "boolean", "default": "false" }, { "name": "dropdownOpened", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-dropdown-opener-click", "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled" } ], "slots": [ { "name": "", "description": "Dropdown content (e.g., \"d2l-dropdown-content\", \"d2l-dropdown-menu\" or \"d2l-dropdown-tabs\")" } ] }, { "name": "d2l-dropdown-button", "path": "./components/dropdown/dropdown-button.js", "description": "A \"d2l-button\" opener for dropdown content.", "attributes": [ { "name": "text", "description": "REQUIRED: Text for the button", "type": "string" }, { "name": "primary", "description": "Optionally render button as primary button", "type": "boolean", "default": "false" }, { "name": "no-auto-open", "description": "Prevents the dropdown from opening automatically on or on key press", "type": "boolean", "default": "false" }, { "name": "open-on-hover", "description": "Optionally open dropdown on click or hover action", "type": "boolean", "default": "false" }, { "name": "disabled", "description": "Disables the dropdown opener", "type": "boolean", "default": "false" } ], "properties": [ { "name": "text", "attribute": "text", "description": "REQUIRED: Text for the button", "type": "string" }, { "name": "primary", "attribute": "primary", "description": "Optionally render button as primary button", "type": "boolean", "default": "false" }, { "name": "dropdownOpener", "type": "boolean", "default": "true" }, { "name": "noAutoOpen", "attribute": "no-auto-open", "description": "Prevents the dropdown from opening automatically on or on key press", "type": "boolean", "default": "false" }, { "name": "openOnHover", "attribute": "open-on-hover", "description": "Optionally open dropdown on click or hover action", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the dropdown opener", "type": "boolean", "default": "false" }, { "name": "dropdownOpened", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-dropdown-opener-click", "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled" } ], "slots": [ { "name": "", "description": "Dropdown content (e.g., \"d2l-dropdown-content\", \"d2l-dropdown-menu\" or \"d2l-dropdown-tabs\")" } ] }, { "name": "d2l-dropdown-content", "path": "./components/dropdown/dropdown-content.js", "description": "A generic container for dropdown content. It provides behavior such as sizing, positioning, and managing focus gain/loss.", "attributes": [ { "name": "align", "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.", "type": "'start'|'end'" }, { "name": "max-height", "description": "Override max-height. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.", "type": "number" }, { "name": "max-width", "description": "Override default max-width (undefined). Specify a number that would be the px value.", "type": "number" }, { "name": "min-height", "description": "Override default height used for required space when `no-auto-fit` is true. Specify a number that would be the px value. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.", "type": "number" }, { "name": "min-width", "description": "Override default min-width (undefined). Specify a number that would be the px value.", "type": "number" }, { "name": "mobile-breakpoint", "description": "Override the breakpoint at which mobile styling is used. Defaults to 616px.", "type": "number" }, { "name": "mobile-tray", "description": "Mobile dropdown style.", "type": "'left'|'right'|'bottom'" }, { "name": "no-mobile-close-button", "description": "Opt-out of showing a close button in the footer of tray-style mobile dropdowns.", "type": "boolean" }, { "name": "vertical-offset", "description": "Provide custom offset, positive or negative", "type": "string" }, { "name": "opened", "description": "Whether the dropdown is open or not", "type": "boolean", "default": "false" }, { "name": "no-auto-close", "description": "Opt out of automatically closing on focus or click outside of the dropdown content", "type": "boolean", "default": "false" }, { "name": "no-auto-fit", "description": "Opt out of auto-sizing", "type": "boolean", "default": "false" }, { "name": "no-auto-focus", "description": "Opt out of focus being automatically moved to the first focusable element in the dropdown when opened", "type": "boolean", "default": "false" }, { "name": "no-padding", "description": "Render with no padding", "type": "boolean", "default": "false" }, { "name": "no-padding-footer", "description": "Render the footer with no padding (if it has content)", "type": "boolean", "default": "false" }, { "name": "no-padding-header", "description": "Render the header with no padding (if it has content)", "type": "boolean", "default": "false" }, { "name": "no-pointer", "description": "Render without a pointer", "type": "boolean", "default": "false" }, { "name": "trap-focus", "description": "Optionally render a d2l-focus-trap around the dropdown content", "type": "boolean", "default": "false" } ], "properties": [ { "name": "align", "attribute": "align", "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.", "type": "'start'|'end'" }, { "name": "maxHeight", "attribute": "max-height", "description": "Override max-height. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.", "type": "number" }, { "name": "maxWidth", "attribute": "max-width", "description": "Override default max-width (undefined). Specify a number that would be the px value.", "type": "number" }, { "name": "minHeight", "attribute": "min-height", "description": "Override default height used for required space when `no-auto-fit` is true. Specify a number that would be the px value. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.", "type": "number" }, { "name": "minWidth", "attribute": "min-width", "description": "Override default min-width (undefined). Specify a number that would be the px value.", "type": "number" }, { "name": "mobileBreakpointOverride", "attribute": "mobile-breakpoint", "description": "Override the breakpoint at which mobile styling is used. Defaults to 616px.", "type": "number" }, { "name": "mobileTray", "attribute": "mobile-tray", "description": "Mobile dropdown style.", "type": "'left'|'right'|'bottom'" }, { "name": "noMobileCloseButton", "attribute": "no-mobile-close-button", "description": "Opt-out of showing a close button in the footer of tray-style mobile dropdowns.", "type": "boolean" }, { "name": "verticalOffset", "attribute": "vertical-offset", "description": "Provide custom offset, positive or negative", "type": "string" }, { "name": "opened", "attribute": "opened", "description": "Whether the dropdown is open or not", "type": "boolean", "default": "false" }, { "name": "noAutoClose", "attribute": "no-auto-close", "description": "Opt out of automatically closing on focus or click outside of the dropdown content", "type": "boolean", "default": "false" }, { "name": "noAutoFit", "attribute": "no-auto-fit", "description": "Opt out of auto-sizing", "type": "boolean", "default": "false" }, { "name": "noAutoFocus", "attribute": "no-auto-focus", "description": "Opt out of focus being automatically moved to the first focusable element in the dropdown when opened", "type": "boolean", "default": "false" }, { "name": "noPadding", "attribute": "no-padding", "description": "Render with no padding", "type": "boolean", "default": "false" }, { "name": "noPaddingFooter", "attribute": "no-padding-footer", "description": "Render the footer with no padding (if it has content)", "type": "boolean", "default": "false" }, { "name": "noPaddingHeader", "attribute": "no-padding-header", "description": "Render the header with no padding (if it has content)", "type": "boolean", "default": "false" }, { "name": "noPointer", "attribute": "no-pointer", "description": "Render without a pointer", "type": "boolean", "default": "false" }, { "name": "trapFocus", "attribute": "trap-focus", "description": "Optionally render a d2l-focus-trap around the dropdown content", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-dropdown-open", "description": "Dispatched when the dropdown is opened" }, { "name": "d2l-dropdown-close", "description": "Dispatched when the dropdown is closed" }, { "name": "d2l-dropdown-focus-enter", "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)" }, { "name": "d2l-dropdown-position", "description": "Dispatched when the dropdown position finishes adjusting" } ], "slots": [ { "name": "", "description": "Anything inside of \"d2l-dropdown-content\" that isn't in the \"header\" or \"footer\" slots appears as regular content" }, { "name": "header", "description": "Sticky container at the top of the dropdown" }, { "name": "footer", "description": "Sticky container at the bottom of the dropdown" } ] }, { "name": "d2l-dropdown-context-menu", "path": "./components/dropdown/dropdown-context-menu.js", "description": "A simple/minimal opener for dropdown content.", "attributes": [ { "name": "text", "description": "REQUIRED: Label for the context-menu button", "type": "string" }, { "name": "translucent", "description": "Attribute for busy/rich backgrounds", "type": "boolean", "default": "false" }, { "name": "no-auto-open", "description": "Prevents the dropdown from opening automatically on or on key press", "type": "boolean", "default": "false" }, { "name": "open-on-hover", "description": "Optionally open dropdown on click or hover action", "type": "boolean", "default": "false" }, { "name": "disabled", "description": "Disables the dropdown opener", "type": "boolean", "default": "false" } ], "properties": [ { "name": "text", "attribute": "text", "description": "REQUIRED: Label for the context-menu button", "type": "string" }, { "name": "translucent", "attribute": "translucent", "description": "Attribute for busy/rich backgrounds", "type": "boolean", "default": "false" }, { "name": "dropdownOpener", "type": "boolean", "default": "true" }, { "name": "noAutoOpen", "attribute": "no-auto-open", "description": "Prevents the dropdown from opening automatically on or on key press", "type": "boolean", "default": "false" }, { "name": "openOnHover", "attribute": "open-on-hover", "description": "Optionally open dropdown on click or hover action", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the dropdown opener", "type": "boolean", "default": "false" }, { "name": "dropdownOpened", "type": "boolean", "default": "false" }, { "name": "animationType", "type": "string", "default": "\"opacity-transform\"" }, { "name": "visibleOnAncestor", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-dropdown-opener-click", "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled" } ], "slots": [ { "name": "", "description": "Dropdown content (e.g., \"d2l-dropdown-content\", \"d2l-dropdown-menu\" or \"d2l-dropdown-tabs\")" } ] }, { "name": "d2l-dropdown-menu", "path": "./components/dropdown/dropdown-menu.js", "description": "A container for a \"d2l-menu\". It provides additional support on top of \"d2l-dropdown-content\" for closing the menu when menu items are selected, resetting to the root of nested menus when reopening and automatic resizing when the menu resizes.", "attributes": [ { "name": "align", "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.", "type": "'start'|'end'" }, { "name": "max-height", "description": "Override max-height. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.", "type": "number" }, { "name": "max-width", "description": "Override default max-width (undefined). Specify a number that would be the px value.", "type": "number" }, { "name": "min-height", "description": "Override default height used for required space when `no-auto-fit` is true. Specify a number that would be the px value. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.", "type": "number" }, { "name": "min-width", "description": "Override default min-width (undefined). Specify a number that would be the px value.", "type": "number" }, { "name": "mobile-breakpoint", "description": "Override the breakpoint at which mobile styling is used. Defaults to 616px.", "type": "number" }, { "name": "mobile-tray", "description": "Mobile dropdown style.", "type": "'left'|'right'|'bottom'" }, { "name": "no-mobile-close-button", "description": "Opt-out of showing a close button in the footer of tray-style mobile dropdowns.", "type": "boolean" }, { "name": "vertical-offset", "description": "Provide custom offset, positive or negative", "type": "string" }, { "name": "opened", "description": "Whether the dropdown is open or not", "type": "boolean", "default": "false" }, { "name": "no-auto-close", "description": "Opt out of automatically closing on focus or click outside of the dropdown content", "type": "boolean", "default": "false" }, { "name": "no-auto-fit", "description": "Opt out of auto-sizing", "type": "boolean", "default": "false" }, { "name": "no-auto-focus", "description": "Opt out of focus being automatically moved to the first focusable element in the dropdown when opened", "type": "boolean", "default": "true" }, { "name": "no-padding", "description": "Render with no padding", "type": "boolean", "default": "true" }, { "name": "no-padding-footer", "description": "Render the footer with no padding (if it has content)", "type": "boolean", "default": "false" }, { "name": "no-padding-header", "description": "Render the header with no padding (if it has content)", "type": "boolean", "default": "false" }, { "name": "no-pointer", "description": "Render without a pointer", "type": "boolean", "default": "false" }, { "name": "trap-focus", "description": "Optionally render a d2l-focus-trap around the dropdown content", "type": "boolean", "default": "false" } ], "properties": [ { "name": "align", "attribute": "align", "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.", "type": "'start'|'end'" }, { "name": "maxHeight", "attribute": "max-height", "description": "Override max-height. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.", "type": "number" }, { "name": "maxWidth", "attribute": "max-width", "description": "Override default max-width (undefined). Specify a number that would be the px value.", "type": "number" }, { "name": "minHeight", "attribute": "min-height", "description": "Override default height used for required space when `no-auto-fit` is true. Specify a number that would be the px value. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.", "type": "number" }, { "name": "minWidth", "attribute": "min-width", "description": "Override default min-width (undefined). Specify a number that would be the px value.", "type": "number" }, { "name": "mobileBreakpointOverride", "attribute": "mobile-breakpoint", "description": "Override the breakpoint at which mobile styling is used. Defaults to 616px.", "type": "number" }, { "name": "mobileTray", "attribute": "mobile-tray", "description": "Mobile dropdown style.", "type": "'left'|'right'|'bottom'" }, { "name": "noMobileCloseButton", "attribute": "no-mobile-close-button", "description": "Opt-out of showing a close button in the footer of tray-style mobile dropdowns.", "type": "boolean" }, { "name": "verticalOffset", "attribute": "vertical-offset", "description": "Provide custom offset, positive or negative", "type": "string" }, { "name": "opened", "attribute": "opened", "description": "Whether the dropdown is open or not", "type": "boolean", "default": "false" }, { "name": "noAutoClose", "attribute": "no-auto-close", "description": "Opt out of automatically closing on focus or click outside of the dropdown content", "type": "boolean", "default": "false" }, { "name": "noAutoFit", "attribute": "no-auto-fit", "description": "Opt out of auto-sizing", "type": "boolean", "default": "false" }, { "name": "noAutoFocus", "attribute": "no-auto-focus", "description": "Opt out of focus being automatically moved to the first focusable element in the dropdown when opened", "type": "boolean", "default": "true" }, { "name": "noPadding", "attribute": "no-padding", "description": "Render with no padding", "type": "boolean", "default": "true" }, { "name": "noPaddingFooter", "attribute": "no-padding-footer", "description": "Render the footer with no padding (if it has content)", "type": "boolean", "default": "false" }, { "name": "noPaddingHeader", "attribute": "no-padding-header", "description": "Render the header with no padding (if it has content)", "type": "boolean", "default": "false" }, { "name": "noPointer", "attribute": "no-pointer", "description": "Render without a pointer", "type": "boolean", "default": "false" }, { "name": "trapFocus", "attribute": "trap-focus", "description": "Optionally render a d2l-focus-trap around the dropdown content", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-dropdown-open", "description": "Dispatched when the dropdown is opened" }, { "name": "d2l-dropdown-close", "description": "Dispatched when the dropdown is closed" }, { "name": "d2l-dropdown-focus-enter", "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)" }, { "name": "d2l-dropdown-position", "description": "Dispatched when the dropdown position finishes adjusting" } ], "slots": [ { "name": "", "description": "Anything inside of \"d2l-dropdown-content\" that isn't in the \"header\" or \"footer\" slots appears as regular content" }, { "name": "header", "description": "Sticky container at the top of the dropdown" }, { "name": "footer", "description": "Sticky container at the bottom of the dropdown" } ] }, { "name": "d2l-dropdown-more", "path": "./components/dropdown/dropdown-more.js", "description": "A simple/minimal opener for dropdown content.", "attributes": [ { "name": "text", "description": "REQUIRED: Label for the more button", "type": "string" }, { "name": "translucent", "description": "Attribute for busy/rich backgrounds", "type": "boolean", "default": "false" }, { "name": "no-auto-open", "description": "Prevents the dropdown from opening automatically on or on key press", "type": "boolean", "default": "false" }, { "name": "open-on-hover", "description": "Optionally open dropdown on click or hover action", "type": "boolean", "default": "false" }, { "name": "disabled", "description": "Disables the dropdown opener", "type": "boolean", "default": "false" } ], "properties": [ { "name": "text", "attribute": "text", "description": "REQUIRED: Label for the more button", "type": "string" }, { "name": "translucent", "attribute": "translucent", "description": "Attribute for busy/rich backgrounds", "type": "boolean", "default": "false" }, { "name": "dropdownOpener", "type": "boolean", "default": "true" }, { "name": "noAutoOpen", "attribute": "no-auto-open", "description": "Prevents the dropdown from opening automatically on or on key press", "type": "boolean", "default": "false" }, { "name": "openOnHover", "attribute": "open-on-hover", "description": "Optionally open dropdown on click or hover action", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the dropdown opener", "type": "boolean", "default": "false" }, { "name": "dropdownOpened", "type": "boolean", "default": "false" }, { "name": "animationType", "type": "string", "default": "\"opacity-transform\"" }, { "name": "visibleOnAncestor", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-dropdown-opener-click", "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled" } ], "slots": [ { "name": "", "description": "Dropdown content (e.g., \"d2l-dropdown-content\", \"d2l-dropdown-menu\" or \"d2l-dropdown-tabs\")" } ] }, { "name": "d2l-dropdown-tabs", "path": "./components/dropdown/dropdown-tabs.js", "description": "A container for a \"d2l-tabs\" component. It provides additional support on top of \"d2l-dropdown-content\" for automatic resizing when the tab changes.", "attributes": [ { "name": "align", "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.", "type": "'start'|'end'" }, { "name": "max-height", "description": "Override max-height. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.", "type": "number" }, { "name": "max-width", "description": "Override default max-width (undefined). Specify a number that would be the px value.", "type": "number" }, { "name": "min-height", "description": "Override default height used for required space when `no-auto-fit` is true. Specify a number that would be the px value. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.", "type": "number" }, { "name": "min-width", "description": "Override default min-width (undefined). Specify a number that would be the px value.", "type": "number" }, { "name": "mobile-breakpoint", "description": "Override the breakpoint at which mobile styling is used. Defaults to 616px.", "type": "number" }, { "name": "mobile-tray", "description": "Mobile dropdown style.", "type": "'left'|'right'|'bottom'" }, { "name": "no-mobile-close-button", "description": "Opt-out of showing a close button in the footer of tray-style mobile dropdowns.", "type": "boolean" }, { "name": "vertical-offset", "description": "Provide custom offset, positive or negative", "type": "string" }, { "name": "opened", "description": "Whether the dropdown is open or not", "type": "boolean", "default": "false" }, { "name": "no-auto-close", "description": "Opt out of automatically closing on focus or click outside of the dropdown content", "type": "boolean", "default": "false" }, { "name": "no-auto-fit", "description": "Opt out of auto-sizing", "type": "boolean", "default": "false" }, { "name": "no-auto-focus", "description": "Opt out of focus being automatically moved to the first focusable element in the dropdown when opened", "type": "boolean", "default": "false" }, { "name": "no-padding", "description": "Render with no padding", "type": "boolean", "default": "false" }, { "name": "no-padding-footer", "description": "Render the footer with no padding (if it has content)", "type": "boolean", "default": "false" }, { "name": "no-padding-header", "description": "Render the header with no padding (if it has content)", "type": "boolean", "default": "false" }, { "name": "no-pointer", "description": "Render without a pointer", "type": "boolean", "default": "false" }, { "name": "trap-focus", "description": "Optionally render a d2l-focus-trap around the dropdown content", "type": "boolean", "default": "false" } ], "properties": [ { "name": "align", "attribute": "align", "description": "Optionally align dropdown to either start or end. If not set, the dropdown will attempt to be centred.", "type": "'start'|'end'" }, { "name": "maxHeight", "attribute": "max-height", "description": "Override max-height. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.", "type": "number" }, { "name": "maxWidth", "attribute": "max-width", "description": "Override default max-width (undefined). Specify a number that would be the px value.", "type": "number" }, { "name": "minHeight", "attribute": "min-height", "description": "Override default height used for required space when `no-auto-fit` is true. Specify a number that would be the px value. Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed.", "type": "number" }, { "name": "minWidth", "attribute": "min-width", "description": "Override default min-width (undefined). Specify a number that would be the px value.", "type": "number" }, { "name": "mobileBreakpointOverride", "attribute": "mobile-breakpoint", "description": "Override the breakpoint at which mobile styling is used. Defaults to 616px.", "type": "number" }, { "name": "mobileTray", "attribute": "mobile-tray", "description": "Mobile dropdown style.", "type": "'left'|'right'|'bottom'" }, { "name": "noMobileCloseButton", "attribute": "no-mobile-close-button", "description": "Opt-out of showing a close button in the footer of tray-style mobile dropdowns.", "type": "boolean" }, { "name": "verticalOffset", "attribute": "vertical-offset", "description": "Provide custom offset, positive or negative", "type": "string" }, { "name": "opened", "attribute": "opened", "description": "Whether the dropdown is open or not", "type": "boolean", "default": "false" }, { "name": "noAutoClose", "attribute": "no-auto-close", "description": "Opt out of automatically closing on focus or click outside of the dropdown content", "type": "boolean", "default": "false" }, { "name": "noAutoFit", "attribute": "no-auto-fit", "description": "Opt out of auto-sizing", "type": "boolean", "default": "false" }, { "name": "noAutoFocus", "attribute": "no-auto-focus", "description": "Opt out of focus being automatically moved to the first focusable element in the dropdown when opened", "type": "boolean", "default": "false" }, { "name": "noPadding", "attribute": "no-padding", "description": "Render with no padding", "type": "boolean", "default": "false" }, { "name": "noPaddingFooter", "attribute": "no-padding-footer", "description": "Render the footer with no padding (if it has content)", "type": "boolean", "default": "false" }, { "name": "noPaddingHeader", "attribute": "no-padding-header", "description": "Render the header with no padding (if it has content)", "type": "boolean", "default": "false" }, { "name": "noPointer", "attribute": "no-pointer", "description": "Render without a pointer", "type": "boolean", "default": "false" }, { "name": "trapFocus", "attribute": "trap-focus", "description": "Optionally render a d2l-focus-trap around the dropdown content", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-dropdown-open", "description": "Dispatched when the dropdown is opened" }, { "name": "d2l-dropdown-close", "description": "Dispatched when the dropdown is closed" }, { "name": "d2l-dropdown-focus-enter", "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)" }, { "name": "d2l-dropdown-position", "description": "Dispatched when the dropdown position finishes adjusting" } ], "slots": [ { "name": "", "description": "Anything inside of \"d2l-dropdown-content\" that isn't in the \"header\" or \"footer\" slots appears as regular content" }, { "name": "header", "description": "Sticky container at the top of the dropdown" }, { "name": "footer", "description": "Sticky container at the bottom of the dropdown" } ] }, { "name": "d2l-dropdown", "path": "./components/dropdown/dropdown.js", "description": "A generic opener for dropdown content, enabling alternate opener implementation using existing elements/components. Provide and indicate your own opener element with the class attribute value \"d2l-dropdown-opener\". Wire-up is automatic.", "attributes": [ { "name": "no-auto-open", "description": "Prevents the dropdown from opening automatically on or on key press", "type": "boolean", "default": "false" }, { "name": "open-on-hover", "description": "Optionally open dropdown on click or hover action", "type": "boolean", "default": "false" }, { "name": "disabled", "description": "Disables the dropdown opener", "type": "boolean", "default": "false" } ], "properties": [ { "name": "dropdownOpener", "type": "boolean", "default": "true" }, { "name": "noAutoOpen", "attribute": "no-auto-open", "description": "Prevents the dropdown from opening automatically on or on key press", "type": "boolean", "default": "false" }, { "name": "openOnHover", "attribute": "open-on-hover", "description": "Optionally open dropdown on click or hover action", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the dropdown opener", "type": "boolean", "default": "false" }, { "name": "dropdownOpened", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-dropdown-opener-click", "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled" } ], "slots": [ { "name": "", "description": "Dropdown content (e.g., \"d2l-dropdown-content\", \"d2l-dropdown-menu\" or \"d2l-dropdown-tabs\")" } ] }, { "name": "d2l-empty-state-action-button", "path": "./components/empty-state/empty-state-action-button.js", "description": "`d2l-empty-state-action-button` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a button action to the component.", "attributes": [ { "name": "text", "description": "REQUIRED: The action text to be used in the button", "type": "string" }, { "name": "primary", "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components", "type": "boolean" } ], "properties": [ { "name": "text", "attribute": "text", "description": "REQUIRED: The action text to be used in the button", "type": "string" }, { "name": "primary", "attribute": "primary", "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components", "type": "boolean" } ], "events": [ { "name": "d2l-empty-state-action", "description": "Dispatched when the action button is clicked" }, { "name": "d2l-empty-state-illustrated-check", "description": "Internal event" } ] }, { "name": "d2l-empty-state-action-link", "path": "./components/empty-state/empty-state-action-link.js", "description": "`d2l-empty-state-action-link` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a link action to the component.", "attributes": [ { "name": "text", "description": "REQUIRED: The action text to be used in the subtle button", "type": "string" }, { "name": "href", "description": "REQUIRED: The action URL or URL fragment of the link", "type": "string" } ], "properties": [ { "name": "text", "attribute": "text", "description": "REQUIRED: The action text to be used in the subtle button", "type": "string" }, { "name": "href", "attribute": "href", "description": "REQUIRED: The action URL or URL fragment of the link", "type": "string" } ] }, { "name": "d2l-empty-state-illustrated", "path": "./components/empty-state/empty-state-illustrated.js", "description": "The `d2l-empty-state-illustrated` component is an empty state component that displays a title and description with an illustration. An empty state action component can be placed inside of the default slot to add an optional action.", "attributes": [ { "name": "description", "description": "REQUIRED: A description giving details about the empty state", "type": "string" }, { "name": "illustration-name", "description": "The name of the preset image you would like to display in the component", "type": "string" }, { "name": "title-text", "description": "REQUIRED: A title for the empty state", "type": "string" } ], "properties": [ { "name": "description", "attribute": "description", "description": "REQUIRED: A description giving details about the empty state", "type": "string" }, { "name": "illustrationName", "attribute": "illustration-name", "description": "The name of the preset image you would like to display in the component", "type": "string" }, { "name": "titleText", "attribute": "title-text", "description": "REQUIRED: A title for the empty state", "type": "string" }, { "name": "loadingComplete", "type": "Promise" }, { "name": "resolveLoadingComplete", "type": "() => void" } ], "slots": [ { "name": "", "description": "Slot for empty state actions" }, { "name": "illustration", "description": "Slot for custom SVG content if `illustration-name` property is not set" } ] }, { "name": "d2l-empty-state-simple", "path": "./components/empty-state/empty-state-simple.js", "description": "The `d2l-empty-state-simple` component is an empty state component that displays a description. An empty state action component can be placed inside of the default slot to add an optional action.", "attributes": [ { "name": "description", "description": "REQUIRED: A description giving details about the empty state", "type": "string" } ], "properties": [ { "name": "description", "attribute": "description", "description": "REQUIRED: A description giving details about the empty state", "type": "string" } ], "slots": [ { "name": "", "description": "Slot for empty state actions" } ] }, { "name": "d2l-expand-collapse-content", "path": "./components/expand-collapse/expand-collapse-content.js", "description": "A component used to minimize the display of long content, while providing a way to reveal the full content.", "attributes": [ { "name": "expanded", "description": "Specifies the expanded/collapsed state of the content", "type": "boolean", "default": "false" } ], "properties": [ { "name": "expanded", "attribute": "expanded", "description": "Specifies the expanded/collapsed state of the content", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-expand-collapse-content-expand", "description": "Dispatched when the content starts to expand. The `detail` contains an `expandComplete` promise that can be waited on to determine when the content has finished expanding." }, { "name": "d2l-expand-collapse-content-collapse", "description": "Dispatched when the content starts to collapse. The `detail` contains a `collapseComplete` promise that can be waited on to determine when the content has finished collapsing." } ], "slots": [ { "name": "", "description": "Default content placed inside of the component" } ] }, { "name": "d2l-filter-load-more-demo", "path": "./components/filter/demo/filter-load-more-demo.js", "attributes": [ { "name": "use-overflow-group", "type": "boolean" } ], "properties": [ { "name": "useOverflowGroup", "attribute": "use-overflow-group", "type": "boolean" } ] }, { "name": "d2l-filter-search-demo", "path": "./components/filter/demo/filter-search-demo.js" }, { "name": "d2l-filter-dimension-set-date-text-value", "path": "./components/filter/filter-dimension-set-date-text-value.js", "description": "A component to represent a possible date value that can be selected for a dimension set (the main filter dimension type) for predefined date ranges.\nA range property is used to define the preset text shown, as well as the start and end date values formatted as UTC strings.\nThis component does not render anything, but instead gathers data needed for the d2l-filter.", "attributes": [ { "name": "key", "description": "REQUIRED: Unique key to represent this value in the dimension", "type": "string" }, { "name": "range", "description": "REQUIRED: The preset date/time range that the list item represents", "type": "'today'|'lastHour'|'24hours'|'48hours'|'7days'|'14days'|'30days'|'6months'" }, { "name": "disabled", "description": "Whether this value in the filter is disabled or not", "type": "boolean", "default": "false" }, { "name": "selected", "description": "Whether this value in the filter is selected or not", "type": "boolean", "default": "false" } ], "properties": [ { "name": "key", "attribute": "key", "description": "REQUIRED: Unique key to represent this value in the dimension", "type": "string" }, { "name": "range", "attribute": "range", "description": "REQUIRED: The preset date/time range that the list item represents", "type": "'today'|'lastHour'|'24hours'|'48hours'|'7days'|'14days'|'30days'|'6months'" }, { "name": "disabled", "attribute": "disabled", "description": "Whether this value in the filter is disabled or not", "type": "boolean", "default": "false" }, { "name": "selected", "attribute": "selected", "description": "Whether this value in the filter is selected or not", "type": "boolean", "default": "false" }, { "name": "text", "type": "string", "default": "\"\"" } ] }, { "name": "d2l-filter-dimension-set-date-time-range-value", "path": "./components/filter/filter-dimension-set-date-time-range-value.js", "description": "A component to represent a possible custom date range or date-time range value that can be selected for a dimension set (the main filter dimension type).\nThe start-value and end-value will be included in the d2l-filter-change event and formatted as an ISO string in UTC time.\nThis component does not render anything, but instead gathers data needed for the d2l-filter.", "attributes": [ { "name": "end-value", "description": "Value of the end date or date-time input. Expected to be in UTC.", "type": "string" }, { "name": "key", "description": "REQUIRED: Unique key to represent this value in the dimension", "type": "string" }, { "name": "start-value", "description": "Value of the start date or date-time input. Expected to be in UTC.", "type": "string" }, { "name": "text", "description": "Defaults to \"Custom Date Range\" (localized). Can be overridden if desired.", "type": "string" }, { "name": "disabled", "description": "Whether this value in the filter is disabled or not", "type": "boolean", "default": "false" }, { "name": "selected", "description": "Whether this value in the filter is selected or not", "type": "boolean", "default": "false" }, { "name": "type", "description": "Date/time range input type", "type": "'date'|'date-time'", "default": "\"date-time\"" } ], "properties": [ { "name": "endValue", "attribute": "end-value", "description": "Value of the end date or date-time input. Expected to be in UTC.", "type": "string" }, { "name": "key", "attribute": "key", "description": "REQUIRED: Unique key to represent this value in the dimension", "type": "string" }, { "name": "startValue", "attribute": "start-value", "description": "Value of the start date or date-time input. Expected to be in UTC.", "type": "string" }, { "name": "text", "attribute": "text", "description": "Defaults to \"Custom Date Range\" (localized). Can be overridden if desired.", "type": "string" }, { "name": "disabled", "attribute": "disabled", "description": "Whether this value in the filter is disabled or not", "type": "boolean", "default": "false" }, { "name": "inactive", "type": "boolean", "default": "false" }, { "name": "selected", "attribute": "selected", "description": "Whether this value in the filter is selected or not", "type": "boolean", "default": "false" }, { "name": "type", "attribute": "type", "description": "Date/time range input type", "type": "'date'|'date-time'", "default": "\"date-time\"" } ] }, { "name": "d2l-filter-dimension-set-empty-state", "path": "./components/filter/filter-dimension-set-empty-state.js", "description": "A component to customize the empty state parameters for a particular filter-dimension-set.\nThis component does not render anything, but instead gathers data needed for the d2l-filter.", "attributes": [ { "name": "action-href", "description": "The href that will be used for the empty state action. When set with action-text, d2l-filter will render a link action.", "type": "string", "default": "\"\"" }, { "name": "action-text", "description": "The text that will be displayed in the empty state action. When set, d2l-filter renders a button action, or a link if action-href is also defined.", "type": "string", "default": "\"\"" }, { "name": "description", "description": "REQUIRED: The text that is displayed in the empty state description", "type": "string", "default": "\"\"" } ], "properties": [ { "name": "actionHref", "attribute": "action-href", "description": "The href that will be used for the empty state action. When set with action-text, d2l-filter will render a link action.", "type": "string", "default": "\"\"" }, { "name": "actionText", "attribute": "action-text", "description": "The text that will be displayed in the empty state action. When set, d2l-filter renders a button action, or a link if action-href is also defined.", "type": "string", "default": "\"\"" }, { "name": "description", "attribute": "description", "description": "REQUIRED: The text that is displayed in the empty state description", "type": "string", "default": "\"\"" } ] }, { "name": "d2l-filter-dimension-set-value", "path": "./components/filter/filter-dimension-set-value.js", "description": "A component to represent a possible value that can be selected for a dimension set (the main filter dimension type).\nThis component does not render anything, but instead gathers data needed for the d2l-filter.", "attributes": [ { "name": "key", "description": "REQUIRED: Unique key to represent this value in the dimension", "type": "string" }, { "name": "count", "description": "Count for the value in the list. If no count is provided, no count will be displayed", "type": "number" }, { "name": "disabled", "description": "Whether this value in the filter is disabled or not", "type": "boolean", "default": "false" }, { "name": "selected", "description": "Whether this value in the filter is selected or not", "type": "boolean", "default": "false" }, { "name": "text", "description": "REQUIRED: The text that is displayed for the value", "type": "string", "default": "\"\"" } ], "properties": [ { "name": "key", "attribute": "key", "description": "REQUIRED: Unique key to represent this value in the dimension", "type": "string" }, { "name": "count", "attribute": "count", "description": "Count for the value in the list. If no count is provided, no count will be displayed", "type": "number" }, { "name": "disabled", "attribute": "disabled", "description": "Whether this value in the filter is disabled or not", "type": "boolean", "default": "false" }, { "name": "selected", "attribute": "selected", "description": "Whether this value in the filter is selected or not", "type": "boolean", "default": "false" }, { "name": "text", "attribute": "text", "description": "REQUIRED: The text that is displayed for the value", "type": "string", "default": "\"\"" } ] }, { "name": "d2l-filter-dimension-set", "path": "./components/filter/filter-dimension-set.js", "description": "A component to represent the main filter dimension type - a set of possible values that can be selected.\nThis component does not render anything, but instead gathers data needed for the d2l-filter.", "attributes": [ { "name": "key", "description": "REQUIRED: Unique key to represent this dimension in the filter", "type": "string" }, { "name": "header-text", "description": "A heading displayed above the list items. This is usually unnecessary, but can be used to emphasize or promote something specific about the list of items to help orient users.", "type": "string", "default": "\"\"" }, { "name": "introductory-text", "description": "The introductory text to display at the top of the filter dropdown", "type": "string", "default": "\"\"" }, { "name": "loading", "description": "Whether the values for this dimension are still loading and a loading spinner should be displayed", "type": "boolean", "default": "false" }, { "name": "has-more", "description": "Whether the dimension has more values to load. Manual search and selected first should be set if has more is being used", "type": "boolean", "default": "false" }, { "name": "ignore-enforce-selection-single", "description": "ADVANCED: Whether to ignore the enforce single selection setting for this dimension.", "type": "boolean", "default": "false" }, { "name": "search-type", "description": "Whether to hide the search input, perform a simple text search, or fire an event on search", "type": "'none'|'automatic'|'manual'", "default": "\"automatic\"" }, { "name": "select-all", "description": "Adds a select all checkbox and summary for this dimension", "type": "boolean", "default": "false" }, { "name": "selected-first", "description": "Whether to render the selected items at the top of the filter. Forced on if load more paging is being used", "type": "boolean", "default": "false" }, { "name": "selection-single", "description": "Whether only one value can be selected at a time for this dimension", "type": "boolean", "default": "false" }, { "name": "text", "description": "REQUIRED: The text that is displayed for the dimension title", "type": "string", "default": "\"\"" }, { "name": "value-only-active-filter-text", "description": "Whether to hide the dimension in the text sent to active filter subscribers", "type": "boolean", "default": "false" } ], "properties": [ { "name": "key", "attribute": "key", "description": "REQUIRED: Unique key to represent this dimension in the filter", "type": "string" }, { "name": "headerText", "attribute": "header-text", "description": "A heading displayed above the list items. This is usually unnecessary, but can be used to emphasize or promote something specific about the list of items to help orient users.", "type": "string", "default": "\"\"" }, { "name": "introductoryText", "attribute": "introductory-text", "description": "The introductory text to display at the top of the filter dropdown", "type": "string", "default": "\"\"" }, { "name": "loading", "attribute": "loading", "description": "Whether the values for this dimension are still loading and a loading spinner should be displayed", "type": "boolean", "default": "false" }, { "name": "hasMore", "attribute": "has-more", "description": "Whether the dimension has more values to load. Manual search and selected first should be set if has more is being used", "type": "boolean", "default": "false" }, { "name": "ignoreEnforceSelectionSingle", "attribute": "ignore-enforce-selection-single", "description": "ADVANCED: Whether to ignore the enforce single selection setting for this dimension.", "type": "boolean", "default": "false" }, { "name": "searchType", "attribute": "search-type", "description": "Whether to hide the search input, perform a simple text search, or fire an event on search", "type": "'none'|'automatic'|'manual'", "default": "\"automatic\"" }, { "name": "selectAll", "attribute": "select-all", "description": "Adds a select all checkbox and summary for this dimension", "type": "boolean", "default": "false" }, { "name": "selectedFirst", "attribute": "selected-first", "description": "Whether to render the selected items at the top of the filter. Forced on if load more paging is being used", "type": "boolean", "default": "false" }, { "name": "selectionSingle", "attribute": "selection-single", "description": "Whether only one value can be selected at a time for this dimension", "type": "boolean", "default": "false" }, { "name": "text", "attribute": "text", "description": "REQUIRED: The text that is displayed for the dimension title", "type": "string", "default": "\"\"" }, { "name": "valueOnlyActiveFilterText", "attribute": "value-only-active-filter-text", "description": "Whether to hide the dimension in the text sent to active filter subscribers", "type": "boolean", "default": "false" } ], "slots": [ { "name": "", "description": "For d2l-filter-dimension-set-value components" }, { "name": "search-empty-state", "description": "The empty state that is displayed when the search returns no results" }, { "name": "set-empty-state", "description": "The empty state that is displayed when the dimension-set has no values" } ] }, { "name": "d2l-filter-overflow-group", "path": "./components/filter/filter-overflow-group.js", "description": "A component that can be used to display a group of filters that will be put into an overflow filter when they no longer fit on the first line of their container", "attributes": [ { "name": "tags", "description": "Show `d2l-filter-tags` beneath the filters. Tags will be shown for all filters in the group.", "type": "boolean" }, { "name": "max-to-show", "description": "maximum amount of slotted items to show", "type": "number", "default": "-1" }, { "name": "min-to-show", "description": "minimum amount of slotted items to show", "type": "number", "default": "1" } ], "properties": [ { "name": "tags", "attribute": "tags", "description": "Show `d2l-filter-tags` beneath the filters. Tags will be shown for all filters in the group.", "type": "boolean" }, { "name": "autoShow", "type": "boolean", "default": "false" }, { "name": "maxToShow", "attribute": "max-to-show", "description": "maximum amount of slotted items to show", "type": "number", "default": "-1" }, { "name": "minToShow", "attribute": "min-to-show", "description": "minimum amount of slotted items to show", "type": "number", "default": "1" }, { "name": "openerType", "type": "string", "default": "\"DEFAULT\"" } ], "events": [ { "name": "d2l-overflow-group-updated", "description": "Dispatched when there is an update performed to the overflow group" } ], "slots": [ { "name": "", "description": "d2l-filters to be added to the container" } ] }, { "name": "d2l-filter-tags", "path": "./components/filter/filter-tags.js", "attributes": [ { "name": "filter-ids", "description": "REQUIRED: Id(s) (space-delimited) of the filter component(s) to subscribe to", "type": "string" } ], "properties": [ { "name": "filterIds", "attribute": "filter-ids", "description": "REQUIRED: Id(s) (space-delimited) of the filter component(s) to subscribe to", "type": "string" } ] }, { "name": "d2l-filter", "path": "./components/filter/filter.js", "description": "A filter component that contains one or more dimensions a user can filter by.\nThis component is in charge of all rendering.", "attributes": [ { "name": "text", "description": "Optional override for the button text used for a multi-dimensional filter", "type": "string" }, { "name": "disabled", "description": "Disables the dropdown opener for the filter", "type": "boolean", "default": "false" }, { "name": "opened", "description": "Indicates if the filter is open", "type": "boolean", "default": "false" } ], "properties": [ { "name": "text", "attribute": "text", "description": "Optional override for the button text used for a multi-dimensional filter", "type": "string" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the dropdown opener for the filter", "type": "boolean", "default": "false" }, { "name": "opened", "attribute": "opened", "description": "Indicates if the filter is open", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-filter-change", "description": "Dispatched when a dimension's value(s) have changed" }, { "name": "d2l-filter-dimension-empty-state-action", "description": "Dispatched when an empty state action button is clicked" }, { "name": "d2l-filter-dimension-first-open", "description": "Dispatched when a dimension is opened for the first time" }, { "name": "d2l-filter-dimension-search", "description": "Dispatched when a dimension that supports searching and has the \"manual\" search-type is searched" }, { "name": "d2l-filter-dimension-load-more", "description": "Dispatched when a dimension load more pager clicked" } ], "slots": [ { "name": "", "description": "Dimension components used by the filter to construct the different dimensions locally" } ] }, { "name": "d2l-focus-trap", "path": "./components/focus-trap/focus-trap.js", "description": "A generic container component to trap user focus.", "attributes": [ { "name": "trap", "description": "Whether the component should trap user focus.", "type": "boolean", "default": "false" } ], "properties": [ { "name": "trap", "attribute": "trap", "description": "Whether the component should trap user focus.", "type": "boolean", "default": "false" } ], "events": [ { "name": "d2l-focus-trap-enter", "description": "Dispatched when focus enters the trap. May be used to override initial focus placement when focus enters the trap." } ] }, { "name": "d2l-custom-form-element-container", "path": "./components/form/demo/custom-form-element-container.js", "properties": [ { "name": "styles", "type": "CSSResult[]", "default": "[\"inputStyles\",\"inputLabelStyles\"]" }, { "name": "isCustomFormElementContainer", "type": "boolean" } ] }, { "name": "d2l-form-demo", "path": "./components/form/demo/form-demo.js" }, { "name": "d2l-form-dialog-demo", "path": "./components/form/demo/form-dialog-demo.js" }, { "name": "d2l-form-panel-demo", "path": "./components/form/demo/form-panel-demo.js" }, { "name": "d2l-form-error-summary", "path": "./components/form/form-error-summary.js", "properties": [ { "name": "errors", "type": "object", "default": "[]" } ] }, { "name": "d2l-form", "path": "./components/form/form.js", "description": "A component that can be used to build sections containing interactive controls that are validated and submitted as a group.\nValues of these interactive controls are aggregated but the user is responsible for handling submission via the", "attributes": [ { "name": "no-nesting", "description": "Indicates that the form should opt-out of nesting.\nThis means that it will not be submitted or validated if an ancestor form is submitted or validated.\nHowever, directly submitting or validating a form with `no-nesting` will still trigger submission and validation for its descendant forms unless they also opt-out using `no-nesting`.", "type": "boolean" }, { "name": "track-changes", "description": "Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.", "type": "boolean", "default": "false" }, { "name": "summary-id", "description": "Id for an alternative error summary element", "type": "string" } ], "properties": [ { "name": "noNesting", "attribute": "no-nesting", "description": "Indicates that the form should opt-out of nesting.\nThis means that it will not be submitted or validated if an ancestor form is submitted or validated.\nHowever, directly submitting or validating a form with `no-nesting` will still trigger submission and validation for its descendant forms unless they also opt-out using `no-nesting`.", "type": "boolean" }, { "name": "errorSummary", "type": "{ href: string; message: any; onClick: () => any; }[]" }, { "name": "trackChanges", "attribute": "track-changes", "description": "Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.", "type": "boolean", "default": "false" }, { "name": "summaryId", "attribute": "summary-id", "description": "Id for an alternative error summary element", "type": "string" } ], "events": [ { "name": "d2l-form-connect", "description": "Internal event" }, { "name": "d2l-form-invalid", "description": "Dispatched when the form fails validation. The error map can be obtained from the `detail`'s `errors` property." }, { "name": "d2l-form-dirty", "description": "Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not." }, { "name": "d2l-form-submit", "description": "Dispatched when the form is submitted. The form data can be obtained from the `detail`'s `formData` property." } ], "slots": [ { "name": "", "description": "The native and custom form elements that participate in validation and submission" } ] }, { "name": "d2l-test-form-element", "path": "./components/form/test/form-element.js", "attributes": [ { "name": "tooltipMessage", "type": "string" }, { "name": "isValidationCustomValid", "type": "boolean", "default": "true" }, { "name": "value", "type": "string", "default": "\"\"" }, { "name": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "properties": [ { "name": "tooltipMessage", "attribute": "tooltipMessage", "type": "string" }, { "name": "label", "type": "string" }, { "name": "validationMessage" }, { "name": "validity" }, { "name": "isValidationCustomValid", "attribute": "isValidationCustomValid", "type": "boolean", "default": "true" }, { "name": "value", "attribute": "value", "type": "string", "default": "\"\"" }, { "name": "name", "attribute": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ] }, { "name": "d2l-test-two-forms", "path": "./components/form/test/form.test.js" }, { "name": "d2l-test-nested-form", "path": "./components/form/test/nested-form.js", "attributes": [ { "name": "no-nesting", "type": "boolean", "default": "false" } ], "properties": [ { "name": "noNesting", "attribute": "no-nesting", "type": "boolean", "default": "false" } ] }, { "name": "d2l-hierarchical-view", "path": "./components/hierarchical-view/hierarchical-view.js", "events": [ { "name": "d2l-hierarchical-view-show-start", "description": "Dispatched when child view will be shown (before animation begins)" }, { "name": "d2l-hierarchical-view-show-complete", "description": "Dispatched when child view is shown (when animation ends)" }, { "name": "d2l-hierarchical-view-hide-start", "description": "Dispatched when child view will be hidden (before animation begins)" }, { "name": "d2l-hierarchical-view-hide-complete", "description": "Dispatched when child view is hidden (when animation ends)" }, { "name": "d2l-hierarchical-view-resize", "description": "Dispatched when child view is resized" } ] }, { "name": "d2l-html-block", "path": "./components/html-block/html-block.js", "description": "A component for displaying user-authored HTML.", "attributes": [ { "name": "compact", "description": "Whether compact styles should be applied", "type": "Boolean", "default": "false" }, { "name": "html", "description": "The HTML to be rendered. Ignored if slotted content is provided.", "type": "String", "default": "\"\"" }, { "name": "inline", "description": "Whether to display the HTML in inline mode", "type": "Boolean", "default": "false" }, { "name": "no-deferred-rendering", "description": "Whether to disable deferred rendering of the user-authored HTML. Do *not* set this\nunless your HTML relies on script executions that may break upon stamping.", "type": "Boolean", "default": "false" } ], "properties": [ { "name": "compact", "attribute": "compact", "description": "Whether compact styles should be applied", "type": "Boolean", "default": "false" }, { "name": "html", "attribute": "html", "description": "The HTML to be rendered. Ignored if slotted content is provided.", "type": "String", "default": "\"\"" }, { "name": "inline", "attribute": "inline", "description": "Whether to display the HTML in inline mode", "type": "Boolean", "default": "false" }, { "name": "noDeferredRendering", "attribute": "no-deferred-rendering", "description": "Whether to disable deferred rendering of the user-authored HTML. Do *not* set this\nunless your HTML relies on script executions that may break upon stamping.", "type": "Boolean", "default": "false" }, { "name": "loadingComplete", "type": "Promise" }, { "name": "resolveLoadingComplete", "type": "() => void" } ] }, { "name": "d2l-icon-demo-color-override", "path": "./components/icons/demo/icon-color-override.js" }, { "name": "d2l-icon-demo-size-override", "path": "./components/icons/demo/icon-size-override.js" }, { "name": "d2l-icon-custom", "path": "./components/icons/icon-custom.js", "attributes": [ { "name": "size", "type": "string" } ], "properties": [ { "name": "size", "attribute": "size", "type": "string" } ] }, { "name": "d2l-icon", "path": "./components/icons/icon.js", "attributes": [ { "name": "icon", "type": "string" } ], "properties": [ { "name": "icon", "attribute": "icon", "type": "string" } ] }, { "name": "d2l-test-input-color-palette", "path": "./components/inputs/demo/input-color-palette.js", "attributes": [ { "name": "value", "type": "string" } ], "properties": [ { "name": "value", "attribute": "value", "type": "string" } ], "events": [ { "name": "d2l-input-color-dropdown-close" } ] }, { "name": "d2l-test-input-radio-label", "path": "./components/inputs/demo/input-radio-label-test.js" }, { "name": "d2l-test-input-radio-solo", "path": "./components/inputs/demo/input-radio-solo-test.js", "attributes": [ { "name": "checked", "description": "Selection state", "type": "boolean" }, { "name": "disabled", "description": "Disables the input", "type": "boolean" }, { "name": "invalid", "description": "Marks the input as invalid, which is shown in style and also is reflected in `aria-invalid`", "type": "boolean" } ], "properties": [ { "name": "checked", "attribute": "checked", "description": "Selection state", "type": "boolean" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the input", "type": "boolean" }, { "name": "invalid", "attribute": "invalid", "description": "Marks the input as invalid, which is shown in style and also is reflected in `aria-invalid`", "type": "boolean" } ] }, { "name": "d2l-test-input-select", "path": "./components/inputs/demo/input-select-test.js", "attributes": [ { "name": "disabled", "description": "Disables the input", "type": "boolean" }, { "name": "invalid", "description": "Marks the input as invalid, which is shown in style and also is reflected in `aria-invalid`", "type": "boolean" }, { "name": "overflow", "description": "Sets a max-width on the select element in order to show overflow styles", "type": "boolean" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "properties": [ { "name": "disabled", "attribute": "disabled", "description": "Disables the input", "type": "boolean" }, { "name": "invalid", "attribute": "invalid", "description": "Marks the input as invalid, which is shown in style and also is reflected in `aria-invalid`", "type": "boolean" }, { "name": "overflow", "attribute": "overflow", "description": "Sets a max-width on the select element in order to show overflow styles", "type": "boolean" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ] }, { "name": "d2l-input-checkbox-group", "path": "./components/inputs/input-checkbox-group.js", "description": "A wrapper for components which provides spacing between the items.", "attributes": [ { "name": "label", "description": "REQUIRED: Label for the group of checkboxes", "type": "string" }, { "name": "label-hidden", "description": "Hides the label visually", "type": "boolean", "default": "false" } ], "properties": [ { "name": "label", "attribute": "label", "description": "REQUIRED: Label for the group of checkboxes", "type": "string" }, { "name": "labelHidden", "attribute": "label-hidden", "description": "Hides the label visually", "type": "boolean", "default": "false" } ], "slots": [ { "name": "", "description": "Checkbox components" } ] }, { "name": "d2l-input-checkbox", "path": "./components/inputs/input-checkbox.js", "description": "A component that can be used to show a checkbox and optional visible label.", "attributes": [ { "name": "description", "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input", "type": "string" }, { "name": "disabled-tooltip", "description": "Tooltip text when disabled", "type": "string" }, { "name": "checked", "description": "Checked state", "type": "boolean", "default": "false" }, { "name": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "indeterminate", "description": "Sets checkbox to an indeterminate state", "type": "boolean", "default": "false" }, { "name": "label", "description": "REQUIRED: Label for the input", "type": "string", "default": "\"\"" }, { "name": "label-hidden", "description": "Hides the label visually", "type": "boolean", "default": "false" }, { "name": "supporting-hidden-when-unchecked", "description": "Hides the supporting slot when unchecked", "type": "boolean", "default": "false" }, { "name": "value", "description": "Value of the input", "type": "string", "default": "\"on\"" }, { "name": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string", "default": "\"\"" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "properties": [ { "name": "description", "attribute": "description", "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input", "type": "string" }, { "name": "disabledTooltip", "attribute": "disabled-tooltip", "description": "Tooltip text when disabled", "type": "string" }, { "name": "checked", "attribute": "checked", "description": "Checked state", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "indeterminate", "attribute": "indeterminate", "description": "Sets checkbox to an indeterminate state", "type": "boolean", "default": "false" }, { "name": "label", "attribute": "label", "description": "REQUIRED: Label for the input", "type": "string", "default": "\"\"" }, { "name": "labelHidden", "attribute": "label-hidden", "description": "Hides the label visually", "type": "boolean", "default": "false" }, { "name": "supportingHiddenWhenUnchecked", "attribute": "supporting-hidden-when-unchecked", "description": "Hides the supporting slot when unchecked", "type": "boolean", "default": "false" }, { "name": "value", "attribute": "value", "description": "Value of the input", "type": "string", "default": "\"on\"" }, { "name": "name", "attribute": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string", "default": "\"\"" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "events": [ { "name": "change", "description": "Dispatched when the checkbox's state changes" } ], "slots": [ { "name": "inline-help", "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label." }, { "name": "supporting", "description": "Supporting information which will appear below and be aligned with the checkbox." } ] }, { "name": "d2l-input-color", "path": "./components/inputs/input-color.js", "description": "This component allows for inputting a HEX color value.", "attributes": [ { "name": "label", "description": "ACCESSIBILITY: REQUIRED: Label for the input, comes with a default value for background & foreground types.", "type": "string" }, { "name": "associated-value", "description": "ACCESSIBILITY: Value of an associated color as a HEX which will be used for color contrast analysis", "type": "string" }, { "name": "value", "description": "Value of the input as a HEX color", "type": "string" }, { "name": "disabled", "description": "Puts the input into a disabled state", "type": "boolean", "default": "false" }, { "name": "disallow-none", "description": "Disallows the user from selecting \"None\" as a color value", "type": "boolean", "default": "false" }, { "name": "label-hidden", "description": "Hides the label visually", "type": "boolean", "default": "false" }, { "name": "readonly", "description": "Puts the input into a read-only state", "type": "boolean", "default": "false" }, { "name": "type", "description": "Type of color being chosen", "type": "'background'|'foreground'|'custom'", "default": "\"end\"" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "properties": [ { "name": "label", "attribute": "label", "description": "ACCESSIBILITY: REQUIRED: Label for the input, comes with a default value for background & foreground types.", "type": "string" }, { "name": "associatedValue", "attribute": "associated-value", "description": "ACCESSIBILITY: Value of an associated color as a HEX which will be used for color contrast analysis", "type": "string" }, { "name": "value", "attribute": "value", "description": "Value of the input as a HEX color", "type": "string" }, { "name": "disabled", "attribute": "disabled", "description": "Puts the input into a disabled state", "type": "boolean", "default": "false" }, { "name": "disallowNone", "attribute": "disallow-none", "description": "Disallows the user from selecting \"None\" as a color value", "type": "boolean", "default": "false" }, { "name": "labelHidden", "attribute": "label-hidden", "description": "Hides the label visually", "type": "boolean", "default": "false" }, { "name": "launchType", "type": "string", "default": "\"dialog\"" }, { "name": "readonly", "attribute": "readonly", "description": "Puts the input into a read-only state", "type": "boolean", "default": "false" }, { "name": "type", "attribute": "type", "description": "Type of color being chosen", "type": "'background'|'foreground'|'custom'", "default": "\"end\"" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "attribute": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "events": [ { "name": "change", "description": "Dispatched when an alteration to the value is committed by the user." } ], "slots": [ { "name": "", "description": "Dropdown content for the color input" }, { "name": "inline-help", "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label." } ] }, { "name": "d2l-input-date-range", "path": "./components/inputs/input-date-range.js", "description": "A component consisting of two input-date components - one for start of range and one for end of range. Values specified for these components (through start-value and/or end-value attributes) should be localized to the user's time zone if applicable and must be in ISO 8601 calendar date format (\"YYYY-MM-DD\").", "attributes": [ { "name": "end-label", "description": "ACCESSIBILITY: Label for the end date input. Defaults to localized \"End Date\".", "type": "string", "default": "\"\\\"End Date\\\"\"" }, { "name": "end-value", "description": "Value of the end date input", "type": "string" }, { "name": "label", "description": "ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date inputs", "type": "string" }, { "name": "max-value", "description": "Maximum valid date that could be selected by a user", "type": "string" }, { "name": "min-value", "description": "Minimum valid date that could be selected by a user", "type": "string" }, { "name": "start-label", "description": "ACCESSIBILITY: Label for the start date input. Defaults to localized \"Start Date\".", "type": "string", "default": "\"\\\"Start Date\\\"\"" }, { "name": "start-value", "description": "Value of the start date input", "type": "string" }, { "name": "auto-shift-dates", "description": "ADVANCED: Automatically shifts end date when start date changes to keep same range", "type": "boolean", "default": "false" }, { "name": "child-labels-hidden", "description": "Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.", "type": "boolean", "default": "false" }, { "name": "disabled", "description": "Disables the inputs", "type": "boolean", "default": "false" }, { "name": "end-opened", "description": "ADVANCED: Indicates if the end calendar dropdown is open", "type": "boolean", "default": "false" }, { "name": "inclusive-date-range", "description": "Validates on inclusive range (i.e., it is valid for start and end dates to be equal)", "type": "boolean", "default": "false" }, { "name": "label-hidden", "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.", "type": "boolean", "default": "false" }, { "name": "required", "description": "Indicates that values are required", "type": "boolean", "default": "false" }, { "name": "start-opened", "description": "ADVANCED: Indicates if the start calendar dropdown is open", "type": "boolean", "default": "false" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "properties": [ { "name": "endLabel", "attribute": "end-label", "description": "ACCESSIBILITY: Label for the end date input. Defaults to localized \"End Date\".", "type": "string", "default": "\"\\\"End Date\\\"\"" }, { "name": "endValue", "attribute": "end-value", "description": "Value of the end date input", "type": "string" }, { "name": "label", "attribute": "label", "description": "ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date inputs", "type": "string" }, { "name": "maxValue", "attribute": "max-value", "description": "Maximum valid date that could be selected by a user", "type": "string" }, { "name": "minValue", "attribute": "min-value", "description": "Minimum valid date that could be selected by a user", "type": "string" }, { "name": "startLabel", "attribute": "start-label", "description": "ACCESSIBILITY: Label for the start date input. Defaults to localized \"Start Date\".", "type": "string", "default": "\"\\\"Start Date\\\"\"" }, { "name": "startValue", "attribute": "start-value", "description": "Value of the start date input", "type": "string" }, { "name": "autoShiftDates", "attribute": "auto-shift-dates", "description": "ADVANCED: Automatically shifts end date when start date changes to keep same range", "type": "boolean", "default": "false" }, { "name": "childLabelsHidden", "attribute": "child-labels-hidden", "description": "Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the inputs", "type": "boolean", "default": "false" }, { "name": "endOpened", "attribute": "end-opened", "description": "ADVANCED: Indicates if the end calendar dropdown is open", "type": "boolean", "default": "false" }, { "name": "inclusiveDateRange", "attribute": "inclusive-date-range", "description": "Validates on inclusive range (i.e., it is valid for start and end dates to be equal)", "type": "boolean", "default": "false" }, { "name": "labelHidden", "attribute": "label-hidden", "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.", "type": "boolean", "default": "false" }, { "name": "required", "attribute": "required", "description": "Indicates that values are required", "type": "boolean", "default": "false" }, { "name": "startOpened", "attribute": "start-opened", "description": "ADVANCED: Indicates if the start calendar dropdown is open", "type": "boolean", "default": "false" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "attribute": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "events": [ { "name": "change", "description": "Dispatched when there is a change to selected start date or selected end date. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar date format (`YYYY-MM-DD`)." } ], "slots": [ { "name": "inline-help", "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label." } ] }, { "name": "d2l-input-date-time-range-to", "path": "./components/inputs/input-date-time-range-to.js", "attributes": [ { "name": "block-display", "description": "Force block (stacked) range display if true", "type": "boolean", "default": "false" }, { "name": "display-to", "description": "Display localized \"to\" between the left and right slot contents", "type": "boolean", "default": "false" }, { "name": "top-margin", "description": "Add margin-top for case where there would be a label above the range", "type": "boolean", "default": "false" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "properties": [ { "name": "blockDisplay", "attribute": "block-display", "description": "Force block (stacked) range display if true", "type": "boolean", "default": "false" }, { "name": "displayTo", "attribute": "display-to", "description": "Display localized \"to\" between the left and right slot contents", "type": "boolean", "default": "false" }, { "name": "topMargin", "attribute": "top-margin", "description": "Add margin-top for case where there would be a label above the range", "type": "boolean", "default": "false" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ] }, { "name": "d2l-input-date-time-range", "path": "./components/inputs/input-date-time-range.js", "description": "A component consisting of two input-date-time components - one for start of range and one for end of range. The time input only appears once a date is selected.", "attributes": [ { "name": "end-label", "description": "ACCESSIBILITY: Label for the end date-time input. Defaults to localized \"End Date\".", "type": "string", "default": "\"\\\"End Date\\\"\"" }, { "name": "end-value", "description": "Value of the end date-time input", "type": "string" }, { "name": "label", "description": "ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date-time inputs", "type": "string" }, { "name": "max-value", "description": "Maximum valid date/time that could be selected by a user", "type": "string" }, { "name": "min-value", "description": "Minimum valid date/time that could be selected by a user", "type": "string" }, { "name": "start-label", "description": "ACCESSIBILITY: Label for the start date-time input. Defaults to localized \"Start Date\".", "type": "string", "default": "\"\\\"Start Date\\\"\"" }, { "name": "start-value", "description": "Value of the start date-time input", "type": "string" }, { "name": "time-zone-id", "description": "Time zone identifier for the time inputs to use.", "type": "string" }, { "name": "time-zone-hidden", "description": "Hides the time zone inside the time selection dropdowns. Should only be used when the time input values are not related to any one time zone", "type": "Boolean" }, { "name": "auto-shift-dates", "description": "ADVANCED: Automatically shifts end date when start date changes to keep same range. If start and end date are equal, automatically shifts end time when start time changes.", "type": "boolean", "default": "false" }, { "name": "child-labels-hidden", "description": "Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.", "type": "boolean", "default": "false" }, { "name": "disabled", "description": "Disables the inputs", "type": "boolean", "default": "false" }, { "name": "end-opened", "description": "ADVANCED: Indicates if the end date or time dropdown is open", "type": "boolean", "default": "false" }, { "name": "inclusive-date-range", "description": "Validates on inclusive range (i.e., it is valid for start and end date-times to be equal)", "type": "boolean", "default": "false" }, { "name": "label-hidden", "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.", "type": "boolean", "default": "false" }, { "name": "localized", "description": "Indicates that localization will be handled by the consumer. `*value` will not be converted from/to UTC.", "type": "boolean", "default": "false" }, { "name": "required", "description": "Indicates that values are required", "type": "boolean", "default": "false" }, { "name": "start-opened", "description": "ADVANCED: Indicates if the start date or time dropdown is open", "type": "boolean", "default": "false" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "properties": [ { "name": "endLabel", "attribute": "end-label", "description": "ACCESSIBILITY: Label for the end date-time input. Defaults to localized \"End Date\".", "type": "string", "default": "\"\\\"End Date\\\"\"" }, { "name": "endValue", "attribute": "end-value", "description": "Value of the end date-time input", "type": "string" }, { "name": "label", "attribute": "label", "description": "ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date-time inputs", "type": "string" }, { "name": "maxValue", "attribute": "max-value", "description": "Maximum valid date/time that could be selected by a user", "type": "string" }, { "name": "minValue", "attribute": "min-value", "description": "Minimum valid date/time that could be selected by a user", "type": "string" }, { "name": "startLabel", "attribute": "start-label", "description": "ACCESSIBILITY: Label for the start date-time input. Defaults to localized \"Start Date\".", "type": "string", "default": "\"\\\"Start Date\\\"\"" }, { "name": "startValue", "attribute": "start-value", "description": "Value of the start date-time input", "type": "string" }, { "name": "timeZoneId", "attribute": "time-zone-id", "description": "Time zone identifier for the time inputs to use.", "type": "string" }, { "name": "timeZoneHidden", "attribute": "time-zone-hidden", "description": "Hides the time zone inside the time selection dropdowns. Should only be used when the time input values are not related to any one time zone", "type": "Boolean" }, { "name": "autoShiftDates", "attribute": "auto-shift-dates", "description": "ADVANCED: Automatically shifts end date when start date changes to keep same range. If start and end date are equal, automatically shifts end time when start time changes.", "type": "boolean", "default": "false" }, { "name": "childLabelsHidden", "attribute": "child-labels-hidden", "description": "Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the inputs", "type": "boolean", "default": "false" }, { "name": "endOpened", "attribute": "end-opened", "description": "ADVANCED: Indicates if the end date or time dropdown is open", "type": "boolean", "default": "false" }, { "name": "inclusiveDateRange", "attribute": "inclusive-date-range", "description": "Validates on inclusive range (i.e., it is valid for start and end date-times to be equal)", "type": "boolean", "default": "false" }, { "name": "labelHidden", "attribute": "label-hidden", "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.", "type": "boolean", "default": "false" }, { "name": "localized", "attribute": "localized", "description": "Indicates that localization will be handled by the consumer. `*value` will not be converted from/to UTC.", "type": "boolean", "default": "false" }, { "name": "required", "attribute": "required", "description": "Indicates that values are required", "type": "boolean", "default": "false" }, { "name": "startOpened", "attribute": "start-opened", "description": "ADVANCED: Indicates if the start date or time dropdown is open", "type": "boolean", "default": "false" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "attribute": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "events": [ { "name": "change", "description": "Dispatched when there is a change to selected start date-time or selected end date-time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`)." } ], "slots": [ { "name": "start", "description": "Optional content that would appear below the start input-date-time" }, { "name": "end", "description": "Optional content that would appear below the end input-date-time" }, { "name": "inline-help", "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label." } ] }, { "name": "d2l-input-date-time", "path": "./components/inputs/input-date-time.js", "description": "A component that consists of a \"\" and a \"\" component. The time input only appears once a date is selected. This component displays the \"value\" if one is specified, and reflects the selected value when one is selected or entered.", "attributes": [ { "name": "time-zone-id", "description": "Time zone identifier for the time input to use.", "type": "string" }, { "name": "time-zone-hidden", "description": "Hides the time zone inside the time selection dropdown. Should only be used when the time input value is not related to any one time zone", "type": "Boolean" }, { "name": "max-value", "description": "Maximum valid date/time that could be selected by a user", "type": "string" }, { "name": "min-value", "description": "Minimum valid date/time that could be selected by a user", "type": "string" }, { "name": "value", "description": "Value of the input", "type": "string" }, { "name": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "label-hidden", "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.", "type": "boolean", "default": "false" }, { "name": "localized", "description": "Indicates that localization will be handled by the consumer. `*value` will not be converted from/to UTC.", "type": "boolean", "default": "false" }, { "name": "opened", "description": "Indicates if the date or time dropdown is open", "type": "boolean", "default": "false" }, { "name": "required", "description": "Indicates that a value is required", "type": "boolean", "default": "false" }, { "name": "time-default-value", "description": "Default value of time input. Accepts times formatted as \"hh:mm:ss\", and the keywords \"startOfDay\" and \"endOfDay\".", "type": "string", "default": "\"startOfDay\"" }, { "name": "labelled-by", "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.", "type": "string" }, { "name": "label", "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element", "type": "string" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "properties": [ { "name": "timeZoneId", "attribute": "time-zone-id", "description": "Time zone identifier for the time input to use.", "type": "string" }, { "name": "timeZoneHidden", "attribute": "time-zone-hidden", "description": "Hides the time zone inside the time selection dropdown. Should only be used when the time input value is not related to any one time zone", "type": "Boolean" }, { "name": "maxValue", "attribute": "max-value", "description": "Maximum valid date/time that could be selected by a user", "type": "string" }, { "name": "minValue", "attribute": "min-value", "description": "Minimum valid date/time that could be selected by a user", "type": "string" }, { "name": "value", "attribute": "value", "description": "Value of the input", "type": "string" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "labelHidden", "attribute": "label-hidden", "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.", "type": "boolean", "default": "false" }, { "name": "localized", "attribute": "localized", "description": "Indicates that localization will be handled by the consumer. `*value` will not be converted from/to UTC.", "type": "boolean", "default": "false" }, { "name": "opened", "attribute": "opened", "description": "Indicates if the date or time dropdown is open", "type": "boolean", "default": "false" }, { "name": "required", "attribute": "required", "description": "Indicates that a value is required", "type": "boolean", "default": "false" }, { "name": "timeDefaultValue", "attribute": "time-default-value", "description": "Default value of time input. Accepts times formatted as \"hh:mm:ss\", and the keywords \"startOfDay\" and \"endOfDay\".", "type": "string", "default": "\"startOfDay\"" }, { "name": "labelledBy", "attribute": "labelled-by", "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.", "type": "string" }, { "name": "label", "attribute": "label", "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element", "type": "string" }, { "name": "labelRequired", "type": "boolean", "default": "true" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "attribute": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "events": [ { "name": "change", "description": "Dispatched when there is a change to selected date or selected time. `value` corresponds to the selected value and is formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`)." } ], "slots": [ { "name": "inline-help", "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label." } ] }, { "name": "d2l-input-date", "path": "./components/inputs/input-date.js", "description": "A component that consists of a text input field for typing a date and an attached calendar (d2l-calendar) dropdown. It displays the \"value\" if one is specified, or a placeholder if not, and reflects the selected value when one is selected in the calendar or entered in the text input.", "attributes": [ { "name": "max-value", "description": "Maximum valid date that could be selected by a user", "type": "string" }, { "name": "min-value", "description": "Minimum valid date that could be selected by a user", "type": "string" }, { "name": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "label-hidden", "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.", "type": "boolean", "default": "false" }, { "name": "opened", "description": "Indicates if the calendar dropdown is open", "type": "boolean", "default": "false" }, { "name": "required", "description": "Indicates that a value is required", "type": "boolean", "default": "false" }, { "name": "value", "description": "Value of the input", "type": "string", "default": "\"\"" }, { "name": "labelled-by", "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.", "type": "string" }, { "name": "label", "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element", "type": "string" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "properties": [ { "name": "maxValue", "attribute": "max-value", "description": "Maximum valid date that could be selected by a user", "type": "string" }, { "name": "minValue", "attribute": "min-value", "description": "Minimum valid date that could be selected by a user", "type": "string" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "labelHidden", "attribute": "label-hidden", "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.", "type": "boolean", "default": "false" }, { "name": "opened", "attribute": "opened", "description": "Indicates if the calendar dropdown is open", "type": "boolean", "default": "false" }, { "name": "required", "attribute": "required", "description": "Indicates that a value is required", "type": "boolean", "default": "false" }, { "name": "value", "attribute": "value", "description": "Value of the input", "type": "string", "default": "\"\"" }, { "name": "labelledBy", "attribute": "labelled-by", "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.", "type": "string" }, { "name": "label", "attribute": "label", "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element", "type": "string" }, { "name": "labelRequired", "type": "boolean", "default": "true" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "attribute": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "events": [ { "name": "change", "description": "Dispatched when there is a change to selected date. `value` corresponds to the selected value and is formatted in ISO 8601 calendar date format (`YYYY-MM-DD`)." } ], "slots": [ { "name": "inline-help", "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label." } ] }, { "name": "d2l-input-fieldset", "path": "./components/inputs/input-fieldset.js", "description": "A component wrapper to be used when a page contains multiple inputs which are related (for example to form an address) to wrap those related inputs.", "attributes": [ { "name": "label", "description": "REQUIRED: Label for the fieldset", "type": "string" }, { "name": "label-hidden", "description": "Hides the label visually", "type": "boolean", "default": "false" }, { "name": "label-style", "description": "Style of the fieldset label", "type": "'default'|'heading'", "default": "\"default\"" }, { "name": "required", "description": "Indicates that a value is required for inputs in the fieldset", "type": "boolean", "default": "false" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "properties": [ { "name": "label", "attribute": "label", "description": "REQUIRED: Label for the fieldset", "type": "string" }, { "name": "labelHidden", "attribute": "label-hidden", "description": "Hides the label visually", "type": "boolean", "default": "false" }, { "name": "labelStyle", "attribute": "label-style", "description": "Style of the fieldset label", "type": "'default'|'heading'", "default": "\"default\"" }, { "name": "required", "attribute": "required", "description": "Indicates that a value is required for inputs in the fieldset", "type": "boolean", "default": "false" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "slots": [ { "name": "", "description": "Related input components" }, { "name": "inline-help", "description": "Help text that will appear below the fieldset. Use this only when other helpful cues are not sufficient, such as a carefully-worded label." } ] }, { "name": "d2l-input-group", "path": "./components/inputs/input-group.js", "description": "Wraps a collection of input components, providing vertical spacing between them.", "slots": [ { "name": "", "description": "Input components" } ] }, { "name": "d2l-input-number", "path": "./components/inputs/input-number.js", "description": "The `` element is similar to ``, except it's intended for inputting numbers only.", "attributes": [ { "name": "autocomplete", "description": "Specifies which types of values [can be autofilled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) by the browser.", "type": "string" }, { "name": "hide-invalid-icon", "description": "ADVANCED: Hide the alert icon when input is invalid", "type": "boolean" }, { "name": "max", "description": "Maximum value allowed", "type": "number" }, { "name": "min", "description": "Minimum value allowed", "type": "number" }, { "name": "unit", "description": "Unit associated with the input value, displayed next to input and announced as part of the label", "type": "string" }, { "name": "unit-label", "description": "ACCESSIBILITY: Label for the unit, which is only picked up by screenreaders. Required if `unit` is used.", "type": "string" }, { "name": "max-fraction-digits", "description": "Maximum number of digits allowed after the decimal place. Must be between 0 and 20 and greater than or equal to `minFractionDigits`. Default is Greater of `minFractionDigits` or `3`.", "type": "number" }, { "name": "min-fraction-digits", "description": "Minimum number of digits allowed after the decimal place. Must be between 0 and 20 and less than or equal to `maxFractionDigits`. Default is `0`.", "type": "number" }, { "name": "value", "description": "Value of the input", "type": "number" }, { "name": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "input-width", "description": "Restricts the maximum width of the input box without restricting the width of the label", "type": "string", "default": "\"4rem\"" }, { "name": "label-hidden", "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.", "type": "boolean", "default": "false" }, { "name": "max-exclusive", "description": "Indicates whether the max value is exclusive", "type": "boolean", "default": "false" }, { "name": "min-exclusive", "description": "Indicates whether the min value is exclusive", "type": "boolean", "default": "false" }, { "name": "required", "description": "Indicates that a value is required", "type": "boolean", "default": "false" }, { "name": "value-align", "description": "Alignment of the value text within the input", "type": "'start'|'end'", "default": "\"start\"" }, { "name": "labelled-by", "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.", "type": "string" }, { "name": "label", "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element", "type": "string" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "properties": [ { "name": "autocomplete", "attribute": "autocomplete", "description": "Specifies which types of values [can be autofilled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) by the browser.", "type": "string" }, { "name": "hideInvalidIcon", "attribute": "hide-invalid-icon", "description": "ADVANCED: Hide the alert icon when input is invalid", "type": "boolean" }, { "name": "max", "attribute": "max", "description": "Maximum value allowed", "type": "number" }, { "name": "min", "attribute": "min", "description": "Minimum value allowed", "type": "number" }, { "name": "unit", "attribute": "unit", "description": "Unit associated with the input value, displayed next to input and announced as part of the label", "type": "string" }, { "name": "unitLabel", "attribute": "unit-label", "description": "ACCESSIBILITY: Label for the unit, which is only picked up by screenreaders. Required if `unit` is used.", "type": "string" }, { "name": "maxFractionDigits", "attribute": "max-fraction-digits", "description": "Maximum number of digits allowed after the decimal place. Must be between 0 and 20 and greater than or equal to `minFractionDigits`. Default is Greater of `minFractionDigits` or `3`.", "type": "number" }, { "name": "minFractionDigits", "attribute": "min-fraction-digits", "description": "Minimum number of digits allowed after the decimal place. Must be between 0 and 20 and less than or equal to `maxFractionDigits`. Default is `0`.", "type": "number" }, { "name": "trailingZeroes", "type": "boolean" }, { "name": "value", "attribute": "value", "description": "Value of the input", "type": "number" }, { "name": "valueTrailingZeroes", "type": "string" }, { "name": "autofocus", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "inputWidth", "attribute": "input-width", "description": "Restricts the maximum width of the input box without restricting the width of the label", "type": "string", "default": "\"4rem\"" }, { "name": "labelHidden", "attribute": "label-hidden", "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.", "type": "boolean", "default": "false" }, { "name": "maxExclusive", "attribute": "max-exclusive", "description": "Indicates whether the max value is exclusive", "type": "boolean", "default": "false" }, { "name": "minExclusive", "attribute": "min-exclusive", "description": "Indicates whether the min value is exclusive", "type": "boolean", "default": "false" }, { "name": "required", "attribute": "required", "description": "Indicates that a value is required", "type": "boolean", "default": "false" }, { "name": "valueAlign", "attribute": "value-align", "description": "Alignment of the value text within the input", "type": "'start'|'end'", "default": "\"start\"" }, { "name": "labelledBy", "attribute": "labelled-by", "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.", "type": "string" }, { "name": "label", "attribute": "label", "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element", "type": "string" }, { "name": "labelRequired", "type": "boolean", "default": "true" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "attribute": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "events": [ { "name": "change", "description": "Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value." } ], "slots": [ { "name": "after", "description": "Slot beside the input on the right side. Useful for an \"icon\" or \"button-icon\"." }, { "name": "left", "description": "Slot within the input on the left side. Useful for an \"icon\" or \"button-icon\"." }, { "name": "right", "description": "Slot within the input on the right side. Useful for an \"icon\" or \"button-icon\"." }, { "name": "inline-help", "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label." } ] }, { "name": "d2l-input-percent", "path": "./components/inputs/input-percent.js", "description": "This component wraps the \"\" tag and is intended for inputting percent values.", "attributes": [ { "name": "input-width", "description": "Restricts the maximum width of the input box without restricting the width of the label.", "type": "string" }, { "name": "max-fraction-digits", "description": "Maximum number of decimal values to show (rounds value up or down).", "type": "number" }, { "name": "min-fraction-digits", "description": "Minimum number of decimal values to show.", "type": "number" }, { "name": "value", "description": "Value of the input", "type": "number" }, { "name": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "label-hidden", "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.", "type": "boolean", "default": "false" }, { "name": "required", "description": "Indicates that a value is required", "type": "boolean", "default": "false" }, { "name": "labelled-by", "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.", "type": "string" }, { "name": "label", "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element", "type": "string" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "properties": [ { "name": "inputWidth", "attribute": "input-width", "description": "Restricts the maximum width of the input box without restricting the width of the label.", "type": "string" }, { "name": "maxFractionDigits", "attribute": "max-fraction-digits", "description": "Maximum number of decimal values to show (rounds value up or down).", "type": "number" }, { "name": "minFractionDigits", "attribute": "min-fraction-digits", "description": "Minimum number of decimal values to show.", "type": "number" }, { "name": "value", "attribute": "value", "description": "Value of the input", "type": "number" }, { "name": "autofocus", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "labelHidden", "attribute": "label-hidden", "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.", "type": "boolean", "default": "false" }, { "name": "required", "attribute": "required", "description": "Indicates that a value is required", "type": "boolean", "default": "false" }, { "name": "labelledBy", "attribute": "labelled-by", "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.", "type": "string" }, { "name": "label", "attribute": "label", "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element", "type": "string" }, { "name": "labelRequired", "type": "boolean", "default": "true" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "attribute": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "events": [ { "name": "change", "description": "Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value." } ], "slots": [ { "name": "after", "description": "Slot beside the input on the right side. Useful for an \"icon\" or \"button-icon\"." }, { "name": "inline-help", "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label." } ] }, { "name": "d2l-input-radio-group", "path": "./components/inputs/input-radio-group.js", "description": "A group of components.", "attributes": [ { "name": "label", "description": "REQUIRED: Label for the group of radio inputs", "type": "string" }, { "name": "horizontal", "description": "Display the radio buttons horizontally", "type": "boolean", "default": "false" }, { "name": "label-hidden", "description": "Hides the label visually", "type": "boolean", "default": "false" }, { "name": "required", "description": "Indicates that a value is required", "type": "boolean", "default": "false" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "properties": [ { "name": "label", "attribute": "label", "description": "REQUIRED: Label for the group of radio inputs", "type": "string" }, { "name": "horizontal", "attribute": "horizontal", "description": "Display the radio buttons horizontally", "type": "boolean", "default": "false" }, { "name": "labelHidden", "attribute": "label-hidden", "description": "Hides the label visually", "type": "boolean", "default": "false" }, { "name": "required", "attribute": "required", "description": "Indicates that a value is required", "type": "boolean", "default": "false" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" }, { "name": "name", "attribute": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" } ], "events": [ { "name": "change", "description": "Dispatched when the radio group's state changes" } ], "slots": [ { "name": "", "description": "Radio components" } ] }, { "name": "d2l-input-radio-spacer", "path": "./components/inputs/input-radio-spacer.js", "description": "Used to align related content below radio buttons", "slots": [ { "name": "", "description": "Additional related content" } ] }, { "name": "d2l-input-radio", "path": "./components/inputs/input-radio.js", "description": "A radio input within a .", "attributes": [ { "name": "description", "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input", "type": "string" }, { "name": "disabled-tooltip", "description": "Tooltip text displayed when the input is disabled", "type": "string" }, { "name": "label", "description": "REQUIRED: Label for the input", "type": "string" }, { "name": "checked", "description": "Checked state", "type": "boolean" }, { "name": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "supporting-hidden-when-unchecked", "description": "Hides the supporting slot when unchecked", "type": "boolean", "default": "false" }, { "name": "value", "description": "Value of the input", "type": "string", "default": "\"on\"" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "properties": [ { "name": "description", "attribute": "description", "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input", "type": "string" }, { "name": "disabledTooltip", "attribute": "disabled-tooltip", "description": "Tooltip text displayed when the input is disabled", "type": "string" }, { "name": "label", "attribute": "label", "description": "REQUIRED: Label for the input", "type": "string" }, { "name": "checked", "attribute": "checked", "description": "Checked state", "type": "boolean" }, { "name": "focusDisabled", "type": "boolean" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "supportingHiddenWhenUnchecked", "attribute": "supporting-hidden-when-unchecked", "description": "Hides the supporting slot when unchecked", "type": "boolean", "default": "false" }, { "name": "value", "attribute": "value", "description": "Value of the input", "type": "string", "default": "\"on\"" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "slots": [ { "name": "inline-help", "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label." }, { "name": "supporting", "description": "Supporting information which will appear below and be aligned with the input." } ] }, { "name": "d2l-input-search", "path": "./components/inputs/input-search.js", "description": "This component wraps the native \"\"\" element and is for text searching.", "attributes": [ { "name": "description", "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input", "type": "string" }, { "name": "label", "description": "ACCESSIBILITY: REQUIRED: Acts as the primary label for the input. Not visible.", "type": "string" }, { "name": "maxlength", "description": "Imposes an upper character limit", "type": "number" }, { "name": "placeholder", "description": "Placeholder text (default: \"Search...\")", "type": "string" }, { "name": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "no-clear", "description": "Prevents the \"clear\" button from appearing", "type": "boolean", "default": "false" }, { "name": "search-on-input", "description": "Dispatch search events after each input event", "type": "boolean", "default": "false" }, { "name": "value", "description": "Value of the input", "type": "string", "default": "\"\"" } ], "properties": [ { "name": "description", "attribute": "description", "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input", "type": "string" }, { "name": "label", "attribute": "label", "description": "ACCESSIBILITY: REQUIRED: Acts as the primary label for the input. Not visible.", "type": "string" }, { "name": "maxlength", "attribute": "maxlength", "description": "Imposes an upper character limit", "type": "number" }, { "name": "placeholder", "attribute": "placeholder", "description": "Placeholder text (default: \"Search...\")", "type": "string" }, { "name": "lastSearchValue", "type": "string" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "noClear", "attribute": "no-clear", "description": "Prevents the \"clear\" button from appearing", "type": "boolean", "default": "false" }, { "name": "searchOnInput", "attribute": "search-on-input", "description": "Dispatch search events after each input event", "type": "boolean", "default": "false" }, { "name": "value", "attribute": "value", "description": "Value of the input", "type": "string", "default": "\"\"" } ], "events": [ { "name": "d2l-input-search-searched", "description": "Dispatched when a search is performed. When the input is cleared, this will be fired with an empty value." } ], "slots": [ { "name": "inline-help", "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label." } ] }, { "name": "d2l-input-text", "path": "./components/inputs/input-text.js", "description": "This component wraps the native \"\" tag and is intended primarily for inputting generic text, email addresses and URLs.", "attributes": [ { "name": "aria-haspopup", "description": "ADVANCED: Indicates that the input has a popup menu", "type": "string" }, { "name": "aria-invalid", "description": "ADVANCED: Indicates that the input value is invalid", "type": "string" }, { "name": "autocomplete", "description": "ADVANCED: Specifies which types of values can be autofilled by the browser", "type": "string" }, { "name": "description", "description": "Additional information communicated in the aria-describedby on the input", "type": "string" }, { "name": "input-width", "description": "Restricts the maximum width of the input box without restricting the width of the label.", "type": "string" }, { "name": "instructions", "description": "ADVANCED: Additional information relating to how to use the component", "type": "string" }, { "name": "max", "description": "For number inputs, maximum value", "type": "string" }, { "name": "maxlength", "description": "Imposes an upper character limit", "type": "number" }, { "name": "min", "description": "For number inputs, minimum value", "type": "string" }, { "name": "minlength", "description": "Imposes a lower character limit", "type": "number" }, { "name": "pattern", "description": "ADVANCED: Regular expression pattern to validate the value", "type": "string" }, { "name": "pattern-failure-text", "description": "ADVANCED: Text to display when input fails validation against the pattern. If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`.", "type": "string" }, { "name": "size", "description": "Size of the input", "type": "number" }, { "name": "step", "description": "ADVANCED: For number inputs, sets the step size", "type": "number" }, { "name": "unit", "description": "Unit associated with the input value, displayed next to input and announced as part of the label", "type": "string" }, { "name": "unit-label", "description": "Accessible label for the unit which will not be visually rendered", "type": "string" }, { "name": "value", "description": "Value of the input", "type": "string" }, { "name": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "hide-invalid-icon", "description": "ADVANCED: Hide the alert icon when input is invalid", "type": "boolean", "default": "false" }, { "name": "hide-invalid-tooltip", "description": "ADVANCED: Hide the tooltip when input is invalid", "type": "boolean", "default": "false" }, { "name": "label-hidden", "description": "Hides the label visually (moves it to the input's \"aria-label\" attribute)", "type": "boolean", "default": "false" }, { "name": "prevent-submit", "description": "Prevents pressing ENTER from submitting forms", "type": "boolean", "default": "false" }, { "name": "readonly", "description": "ADVANCED: Makes the input read-only", "type": "boolean", "default": "false" }, { "name": "required", "description": "Indicates that a value is required", "type": "boolean", "default": "false" }, { "name": "type", "description": "The type of the text input", "type": "'text'|'email'|'number'|'password'|'search'|'tel'|'url'", "default": "\"text\"" }, { "name": "value-align", "description": "ADVANCED: Alignment of the value text within the input", "type": "'start'|'end'", "default": "\"start\"" }, { "name": "labelled-by", "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.", "type": "string" }, { "name": "label", "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element", "type": "string" }, { "name": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" }, { "name": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "properties": [ { "name": "ariaHaspopup", "attribute": "aria-haspopup", "description": "ADVANCED: Indicates that the input has a popup menu", "type": "string" }, { "name": "ariaInvalid", "attribute": "aria-invalid", "description": "ADVANCED: Indicates that the input value is invalid", "type": "string" }, { "name": "autocomplete", "attribute": "autocomplete", "description": "ADVANCED: Specifies which types of values can be autofilled by the browser", "type": "string" }, { "name": "description", "attribute": "description", "description": "Additional information communicated in the aria-describedby on the input", "type": "string" }, { "name": "inputWidth", "attribute": "input-width", "description": "Restricts the maximum width of the input box without restricting the width of the label.", "type": "string" }, { "name": "instructions", "attribute": "instructions", "description": "ADVANCED: Additional information relating to how to use the component", "type": "string" }, { "name": "max", "attribute": "max", "description": "For number inputs, maximum value", "type": "string" }, { "name": "maxlength", "attribute": "maxlength", "description": "Imposes an upper character limit", "type": "number" }, { "name": "min", "attribute": "min", "description": "For number inputs, minimum value", "type": "string" }, { "name": "minlength", "attribute": "minlength", "description": "Imposes a lower character limit", "type": "number" }, { "name": "pattern", "attribute": "pattern", "description": "ADVANCED: Regular expression pattern to validate the value", "type": "string" }, { "name": "patternFailureText", "attribute": "pattern-failure-text", "description": "ADVANCED: Text to display when input fails validation against the pattern. If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`.", "type": "string" }, { "name": "size", "attribute": "size", "description": "Size of the input", "type": "number" }, { "name": "step", "attribute": "step", "description": "ADVANCED: For number inputs, sets the step size", "type": "number" }, { "name": "unit", "attribute": "unit", "description": "Unit associated with the input value, displayed next to input and announced as part of the label", "type": "string" }, { "name": "unitLabel", "attribute": "unit-label", "description": "Accessible label for the unit which will not be visually rendered", "type": "string" }, { "name": "value", "attribute": "value", "description": "Value of the input", "type": "string" }, { "name": "autofocus", "type": "boolean", "default": "false" }, { "name": "disabled", "attribute": "disabled", "description": "Disables the input", "type": "boolean", "default": "false" }, { "name": "hideInvalidIcon", "attribute": "hide-invalid-icon", "description": "ADVANCED: Hide the alert icon when input is invalid", "type": "boolean", "default": "false" }, { "name": "hideInvalidTooltip", "attribute": "hide-invalid-tooltip", "description": "ADVANCED: Hide the tooltip when input is invalid", "type": "boolean", "default": "false" }, { "name": "labelHidden", "attribute": "label-hidden", "description": "Hides the label visually (moves it to the input's \"aria-label\" attribute)", "type": "boolean", "default": "false" }, { "name": "preventSubmit", "attribute": "prevent-submit", "description": "Prevents pressing ENTER from submitting forms", "type": "boolean", "default": "false" }, { "name": "readonly", "attribute": "readonly", "description": "ADVANCED: Makes the input read-only", "type": "boolean", "default": "false" }, { "name": "required", "attribute": "required", "description": "Indicates that a value is required", "type": "boolean", "default": "false" }, { "name": "type", "attribute": "type", "description": "The type of the text input", "type": "'text'|'email'|'number'|'password'|'search'|'tel'|'url'", "default": "\"text\"" }, { "name": "valueAlign", "attribute": "value-align", "description": "ADVANCED: Alignment of the value text within the input", "type": "'start'|'end'", "default": "\"start\"" }, { "name": "labelledBy", "attribute": "labelled-by", "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.", "type": "string" }, { "name": "label", "attribute": "label", "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element", "type": "string" }, { "name": "labelRequired", "type": "boolean", "default": "true" }, { "name": "name", "attribute": "name", "description": "Name of the form control. Submitted with the form as part of a name/value pair.", "type": "string" }, { "name": "skeleton", "attribute": "skeleton", "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).", "type": "boolean" } ], "events": [ { "name": "change", "description": "Dispatched when an alteration to the value is committed (typically after focus is lost) by the user" }, { "name": "input", "description": "Dispatched immediately after changes by the user" } ], "slots": [ { "name": "left", "description": "Slot within the input on the left side. Useful for an \"icon\" or \"button-icon\"." }, { "name": "right", "description": "Slot within the input on the right side. Useful for an \"icon\" or \"button-icon\"." }, { "name": "after", "description": "Slot beside the input on the right side. Useful for an \"icon\" or \"button-icon\"." }, { "name": "inline-help", "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label." } ] }, { "name": "d2l-input-textarea", "path": "./components/inputs/input-textarea.js", "description": "A wrapper around the native `