{ "version": 1.1, "tags": [ { "name": "ic-accordion", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "disabled", "description": "If `true`, the accordion will be disabled." }, { "name": "expanded", "description": "If `true`, the accordion appears expanded." }, { "name": "heading", "description": "The section header outlining section content." }, { "name": "message", "description": "The main body message of the accordion." }, { "name": "size", "description": "The size of the accordion.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-accordion-group", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "accessible-button-label", "description": "The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users." }, { "name": "expanded", "description": "If `true`, the accordion will load in an expanded state." }, { "name": "label", "description": "The header for the accordion group." }, { "name": "single-expansion", "description": "If `true`, only one accordion will open at a time." }, { "name": "size", "description": "The size of the accordion.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-action-chip", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "disabled", "description": "If `true`, the chip will appear disabled." }, { "name": "download", "description": "If `true`, the user can save the linked URL instead of navigating to it." }, { "name": "form", "description": "The
element to associate the chip with." }, { "name": "formaction", "description": "The URL that processes the information submitted by the chip. It overrides the action attribute of the chip's form owner. Does nothing if there is no form owner." }, { "name": "formenctype", "description": "The way the submitted form data is encoded." }, { "name": "formmethod", "description": "The HTTP method used to submit the form." }, { "name": "formnovalidate", "description": "If `true`, the form will not be validated when submitted." }, { "name": "formtarget", "description": "The place to display the response from submitting the form. It overrides the target attribute of the chip's form owner." }, { "name": "href", "description": "The URL that the link points to. This will render the chip as an \"a\" tag." }, { "name": "hreflang", "description": "The human language of the linked URL." }, { "name": "label", "description": "The text rendered within the chip." }, { "name": "monochrome", "description": "If `true`, the button will display as monochromatic in either `light` or `dark` theme." }, { "name": "referrerpolicy", "description": "How much of the referrer to send when following the link.", "values": [ { "name": "no-referrer" }, { "name": "no-referrer-when-downgrade" }, { "name": "origin" }, { "name": "origin-when-cross-origin" }, { "name": "same-origin" }, { "name": "strict-origin" }, { "name": "strict-origin-when-cross-origin" }, { "name": "unsafe-url" } ] }, { "name": "rel", "description": "The relationship of the linked URL as space-separated link types." }, { "name": "size", "description": "The size of the chip.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "target", "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)." }, { "name": "theme", "description": "Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "transparent-background", "description": "If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color." }, { "name": "type", "description": "The type of the chip.", "values": [ { "name": "button" }, { "name": "reset" }, { "name": "submit" } ] }, { "name": "variant", "description": "The emphasis of the chip.", "values": [ { "name": "filled" }, { "name": "outlined" } ] } ] }, { "name": "ic-alert", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "announced", "description": "If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers." }, { "name": "dismiss-label", "description": "The text in the dismiss button tooltip. Makes the user aware of the action resulting from clicking the 'Dismiss' button." }, { "name": "dismissible", "description": "If `true`, the alert will have a close icon at the end to dismiss it." }, { "name": "heading", "description": "The optional title to display at the start of the alert." }, { "name": "message", "description": "The main body message of the alert." }, { "name": "show-default-icon", "description": "If `true`, the default icon for the neutral variant will appear on the left of the alert." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "title-above", "description": "If `true`, the title and message will appear above and below instead of inline." }, { "name": "variant", "description": "The variant of the alert which will be rendered.", "values": [ { "name": "ai" }, { "name": "error" }, { "name": "info" }, { "name": "neutral" }, { "name": "success" }, { "name": "warning" } ] } ] }, { "name": "ic-back-to-top", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "position", "description": "The horizontal position of the element.", "values": [ { "name": "center" }, { "name": "left" }, { "name": "right" } ] }, { "name": "target", "description": "The ID of the element to jump back to when the link is clicked." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "variant", "description": "The variant of the button to render", "values": [ { "name": "default" }, { "name": "icon" } ] } ] }, { "name": "ic-badge", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "accessible-label", "description": "The accessible label of the badge component to provide context for screen reader users." }, { "name": "custom-color", "description": "The custom badge colour. This will only style the badge component if variant=\"custom\".\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"." }, { "name": "label", "description": "The text displayed in the badge. This will only be displayed if type=\"text\"." }, { "name": "max-number", "description": "The maximum number shown on the badge appended with a +.\nThis will only be displayed if type=\"text\" and label is not empty." }, { "name": "position", "description": "The positioning of the badge in reference to the parent element.", "values": [ { "name": "far" }, { "name": "inline" }, { "name": "near" } ] }, { "name": "size", "description": "The size of the badge to be displayed.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "type", "description": "The type of badge to be displayed.", "values": [ { "name": "dot" }, { "name": "icon" }, { "name": "text" } ] }, { "name": "variant", "description": "The variant of the badge to be displayed.", "values": [ { "name": "ai" }, { "name": "custom" }, { "name": "error" }, { "name": "info" }, { "name": "light" }, { "name": "neutral" }, { "name": "success" }, { "name": "warning" } ] }, { "name": "visible", "description": "If `true`, the badge will be displayed." } ] }, { "name": "ic-breadcrumb", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "current", "description": "If `true`, aria-current will be set on the breadcrumb." }, { "name": "href", "description": "The URL that the breadcrumb link points to." }, { "name": "page-title", "description": "The title of the breadcrumb." } ] }, { "name": "ic-breadcrumb-group", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "back-breadcrumb-only", "description": "If `true`, display only a single breadcrumb for the parent page with a back icon." }, { "name": "collapsed", "description": "If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed." }, { "name": "monochrome", "description": "If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-button", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "accept", "description": "If `fileUpload` is set to `true`, this is the accepted list of file types." }, { "name": "disable-tooltip", "description": "If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied." }, { "name": "disabled", "description": "If `true`, the button will be in disabled state." }, { "name": "download", "description": "If `true`, the user can save the linked URL instead of navigating to it." }, { "name": "dropdown", "description": "If `true`, the button will show a dropdown icon." }, { "name": "dropdown-expanded", "description": "If `true`, the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true." }, { "name": "file-input-name", "description": "The name of the control for the file input, which is submitted with the form data." }, { "name": "file-upload", "description": "If `true`, when the button is clicked the native file explorer will be launched." }, { "name": "form", "description": "The element to associate the button with." }, { "name": "formaction", "description": "The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner." }, { "name": "formenctype", "description": "The way the submitted form data is encoded." }, { "name": "formmethod", "description": "The HTTP method used to submit the form." }, { "name": "formnovalidate", "description": "If `true`, the form will not be validated when submitted." }, { "name": "formtarget", "description": "The place to display the response from submitting the form. It overrides the target attribute of the button's form owner." }, { "name": "full-width", "description": "If `true`, the button will fill the width of the container." }, { "name": "href", "description": "The URL that the link points to. This will render the button as an \"a\" tag." }, { "name": "hreflang", "description": "The human language of the linked URL." }, { "name": "loading", "description": "If `true`, the button will be in loading state." }, { "name": "monochrome", "description": "If `true`, the button will display as monochromatic in either `light` or `dark` theme." }, { "name": "multiple", "description": "If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted." }, { "name": "referrerpolicy", "description": "How much of the referrer to send when following the link.", "values": [ { "name": "no-referrer" }, { "name": "no-referrer-when-downgrade" }, { "name": "origin" }, { "name": "origin-when-cross-origin" }, { "name": "same-origin" }, { "name": "strict-origin" }, { "name": "strict-origin-when-cross-origin" }, { "name": "unsafe-url" } ] }, { "name": "rel", "description": "The relationship of the linked URL as space-separated link types." }, { "name": "size", "description": "The size of the button to be displayed.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "target", "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "tooltip-fixed-positioning", "description": "Setting to `true` can help in situations where tooltip content is clipped by a parent element." }, { "name": "tooltip-placement", "description": "The position of the tooltip in relation to the button.", "values": [ { "name": "bottom" }, { "name": "left" }, { "name": "right" }, { "name": "top" } ] }, { "name": "transparent-background", "description": "If `true`, the secondary & tertiary variants of button will have a transparent background when not hovered, pressed or loading." }, { "name": "type", "description": "The type of the button.", "values": [ { "name": "button" }, { "name": "reset" }, { "name": "submit" } ] }, { "name": "variant", "description": "The variant of the button to be displayed.", "values": [ { "name": "destructive" }, { "name": "icon" }, { "name": "icon-destructive" }, { "name": "icon-primary" }, { "name": "icon-secondary" }, { "name": "icon-tertiary" }, { "name": "primary" }, { "name": "secondary" }, { "name": "tertiary" } ] } ] }, { "name": "ic-card-horizontal", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "clickable", "description": "If `true`, the horizontal card will be a clickable variant, instead of static." }, { "name": "density", "description": "The padding of the horizontal card.", "values": [ { "name": "default" }, { "name": "spacious" } ] }, { "name": "disabled", "description": "If `true`, the horizontal card will be disabled if it is clickable." }, { "name": "heading", "description": "The heading for the horizontal card. This is required, unless a slotted heading is used." }, { "name": "href", "description": "The URL that the clickable horizontal card link points to. If set, the clickable horizontal card will render as an \"a\" tag, otherwise it will render as a button." }, { "name": "hreflang", "description": "The human language of the linked URL." }, { "name": "message", "description": "The main body message of the horizontal card." }, { "name": "referrerpolicy", "description": "How much of the referrer to send when following the link.", "values": [ { "name": "no-referrer" }, { "name": "no-referrer-when-downgrade" }, { "name": "origin" }, { "name": "origin-when-cross-origin" }, { "name": "same-origin" }, { "name": "strict-origin" }, { "name": "strict-origin-when-cross-origin" }, { "name": "unsafe-url" } ] }, { "name": "rel", "description": "The relationship of the linked URL as space-separated link types." }, { "name": "size", "description": "The size of the horizontal card.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "subheading", "description": "The subheading for the card." }, { "name": "target", "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-card-vertical", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "clickable", "description": "If `true`, the card will be a clickable variant, instead of static." }, { "name": "disabled", "description": "If `true`, the card will be disabled if it is clickable." }, { "name": "expandable", "description": "If `true`, the card will have an expandable area and expansion toggle button." }, { "name": "full-width", "description": "If `true`, the card will fill the width of the container." }, { "name": "heading", "description": "The heading for the card. This is required, unless a slotted heading is used." }, { "name": "href", "description": "The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button." }, { "name": "hreflang", "description": "The human language of the linked URL." }, { "name": "message", "description": "The main body message of the card." }, { "name": "referrerpolicy", "description": "How much of the referrer to send when following the link.", "values": [ { "name": "no-referrer" }, { "name": "no-referrer-when-downgrade" }, { "name": "origin" }, { "name": "origin-when-cross-origin" }, { "name": "same-origin" }, { "name": "strict-origin" }, { "name": "strict-origin-when-cross-origin" }, { "name": "unsafe-url" } ] }, { "name": "rel", "description": "The relationship of the linked URL as space-separated link types." }, { "name": "subheading", "description": "The subheading for the card." }, { "name": "target", "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-checkbox", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "additional-field-display", "description": "The style of additionalField that will be displayed if used.", "values": [ { "name": "dynamic" }, { "name": "static" } ] }, { "name": "checked", "description": "If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked." }, { "name": "disabled", "description": "If `true`, the checkbox will be set to the disabled state." }, { "name": "dynamic-text", "description": "The text to be displayed when dynamic." }, { "name": "form", "description": "The element to associate the checkbox with." }, { "name": "group-label", "description": "The group label for the checkbox." }, { "name": "hide-label", "description": "If `true`, the label will be hidden and the required label value will be applied as an aria-label." }, { "name": "indeterminate", "description": "If `true`, the indeterminate state will be displayed when checked." }, { "name": "label", "description": "The label for the checkbox." }, { "name": "name", "description": "The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name." }, { "name": "native-indeterminate-behaviour", "description": "If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state." }, { "name": "size", "description": "The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "value", "description": "The value for the checkbox." } ] }, { "name": "ic-checkbox-group", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "disabled", "description": "If `true`, the checkbox group will be set to the disabled state." }, { "name": "helper-text", "description": "The helper text that will be displayed for additional field guidance." }, { "name": "hide-label", "description": "If `true`, the label will be hidden and the required label value will be applied as an aria-label." }, { "name": "label", "description": "The label for the checkbox group to be displayed." }, { "name": "name", "description": "The name for the checkbox group to differentiate from other groups." }, { "name": "required", "description": "If `true`, the checkbox group will require a value." }, { "name": "size", "description": "The size of the checkboxes to be displayed. This does not affect the font size of the label.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "validation-aria-live", "description": "The value of the `aria-live` attribute on the validation message.", "values": [ { "name": "assertive" }, { "name": "off" }, { "name": "polite" } ] }, { "name": "validation-status", "description": "The validation status - e.g. 'error' | 'warning' | 'success'.", "values": [ { "name": "error" }, { "name": "success" }, { "name": "warning" } ] }, { "name": "validation-text", "description": "The text to display as the validation message." } ] }, { "name": "ic-chip", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "custom-color", "description": "The custom chip colour. This will override the theme colour.\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"." }, { "name": "disabled", "description": "If `true`, the chip will appear disabled." }, { "name": "dismiss-label", "description": "The text in the dismiss button tooltip and aria label. Makes the user aware of the action resulting from clicking the 'Dismiss chip' button." }, { "name": "dismissible", "description": "If `true`, the chip will have a close button at the end to dismiss it." }, { "name": "full-width", "description": "Specify whether the chip fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable." }, { "name": "label", "description": "The text rendered within the chip." }, { "name": "size", "description": "The size of the chip.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\nSetting the \"customColor\" prop will override this.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "transparent-background", "description": "If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color." }, { "name": "variant", "description": "The emphasis of the chip.", "values": [ { "name": "filled" }, { "name": "outlined" } ] } ] }, { "name": "ic-classification-banner", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "additional-selectors", "description": "The additional information that will be displayed after the classification." }, { "name": "classification", "description": "The classification level to be displayed - also determines the banner and text colour.", "values": [ { "name": "default" }, { "name": "official" }, { "name": "official-sensitive" }, { "name": "secret" }, { "name": "top-secret" } ] }, { "name": "country", "description": "The optional text that will be displayed before classification to specify relevant country/countries." }, { "name": "custom-classification-text", "description": "The custom text that will appear on the banner. If set, the `additionalSelectors`, `country` and `upTo` props are ignored." }, { "name": "inline", "description": "If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page." }, { "name": "up-to", "description": "If `true`, \"Up to\" will be displayed before the classification and country." } ] }, { "name": "ic-data-list", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "heading", "description": "The title for the data list." }, { "name": "size", "description": "The size of the data list component.", "values": [ { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-data-row", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "label", "description": "The label in the leftmost cell of the row." }, { "name": "size", "description": "The size of the data row component.", "values": [ { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "value", "description": "The value of the middle (right if no end-component supplied) cell of the row." } ] }, { "name": "ic-dialog", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "close-on-backdrop-click", "description": "If set to `false`, the dialog will not close when the backdrop is clicked." }, { "name": "destructive", "description": "If 'true', sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button." }, { "name": "disable-height-constraint", "description": "If set to `true`, the content area max height and overflow properties are removed allowing the dialog to stretch below the fold.\nThis prop also prevents popover elements from being cut off within the content area." }, { "name": "disable-width-constraint", "description": "If set to `true`, the content area width property is removed, allowing content to take the full width of the dialog when using the large variant." }, { "name": "dismiss-label", "description": "Sets the dismiss label tooltip and aria label." }, { "name": "heading", "description": "Sets the heading for the dialog." }, { "name": "hide-close-button", "description": "If `true`, the close button will not be displayed." }, { "name": "hide-default-controls", "description": "If set to `true`, default button controls will not be shown, but slotted dialog controls will still be displayed." }, { "name": "label", "description": "Sets the optional label for the dialog which appears above the heading." }, { "name": "open", "description": "If `true`, the dialog will be displayed." }, { "name": "size", "description": "Sets the maximum and minimum height and width for the dialog.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-divider", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "border-style", "description": "The line style of the divider.", "values": [ { "name": "dashed" }, { "name": "solid" } ] }, { "name": "label", "description": "The label for the divider. The label placement will need to be set for the label to be displayed correctly." }, { "name": "label-placement", "description": "The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.", "values": [ { "name": "bottom" }, { "name": "center" }, { "name": "left" }, { "name": "right" }, { "name": "top" } ] }, { "name": "monochrome", "description": "If `true`, the divider will be displayed in a grey colour." }, { "name": "orientation", "description": "The orientation of the divider.", "values": [ { "name": "horizontal" }, { "name": "vertical" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "default" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "weight", "description": "The thickness of the divider.", "values": [ { "name": "medium" }, { "name": "thick" }, { "name": "thin" }, { "name": "very-thick" } ] } ] }, { "name": "ic-empty-state", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "aligned", "description": "The alignment of the empty state container.", "values": [ { "name": "center" }, { "name": "left" }, { "name": "right" } ] }, { "name": "body", "description": "The body text rendered in the empty state container." }, { "name": "heading", "description": "The title rendered in the empty state container." }, { "name": "image-size", "description": "The size of the image or icon used in the image slot.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "max-lines", "description": "The number of lines of body text to display before truncating." }, { "name": "subheading", "description": "The subtitle rendered in the empty state container." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-footer", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "aligned", "description": "The alignment of the section containers used within the footer.", "values": [ { "name": "center" }, { "name": "full-width" }, { "name": "left" } ] }, { "name": "breakpoint", "description": "The screen size breakpoint at which to switch to the small layout.", "values": [ { "name": "extra large" }, { "name": "extra small" }, { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "caption", "description": "The caption displayed at the bottom of the footer." }, { "name": "copyright", "description": "If `true`, the footer will display the crown copyright at the bottom." }, { "name": "copyright-text", "description": "The text displayed for the copyright notice if `copyright` is `true`." }, { "name": "description", "description": "The description displayed at the top of the footer." }, { "name": "group-links", "description": "If `true`, the footer will be set up to handle link groups instead of standalone links." } ] }, { "name": "ic-footer-link", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "download", "description": "If `true`, the user can save the linked URL instead of navigating to it." }, { "name": "href", "description": "The URL that the link points to." }, { "name": "hreflang", "description": "The human language of the linked URL." }, { "name": "referrerpolicy", "description": "How much of the referrer to send when following the link.", "values": [ { "name": "no-referrer" }, { "name": "no-referrer-when-downgrade" }, { "name": "origin" }, { "name": "origin-when-cross-origin" }, { "name": "same-origin" }, { "name": "strict-origin" }, { "name": "strict-origin-when-cross-origin" }, { "name": "unsafe-url" } ] }, { "name": "rel", "description": "The relationship of the linked URL as space-separated link types." }, { "name": "target", "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)." } ] }, { "name": "ic-footer-link-group", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "label", "description": "The title of the link group to be displayed." } ] }, { "name": "ic-hero", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "aligned", "description": "The alignment of the hero.", "values": [ { "name": "center" }, { "name": "full-width" }, { "name": "left" } ] }, { "name": "background-image", "description": "The optional background image." }, { "name": "content-aligned", "description": "The alignment of the hero content.", "values": [ { "name": "center" }, { "name": "left" } ] }, { "name": "disable-background-parallax", "description": "If `true`, the background image (if set) will not scroll using a parallax effect." }, { "name": "heading", "description": "The heading of the hero. An

level heading." }, { "name": "secondary-heading", "description": "The optional secondary heading, an

level heading. Replaced by slotted right content." }, { "name": "secondary-subheading", "description": "The optional secondary subheading, replaced by slotted right content." }, { "name": "size", "description": "The size of the hero component.", "values": [ { "name": "medium" }, { "name": "small" } ] }, { "name": "subheading", "description": "The description for the hero." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-horizontal-scroll", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "appearance", "description": "The appearance of the horizontal scroll, e.g. dark, light or the default.", "values": [ { "name": "dark" }, { "name": "default" }, { "name": "light" } ] } ] }, { "name": "ic-input-component-container", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "disabled", "description": "If `true`, the disabled state will be set." }, { "name": "full-width", "description": "If `true`, the input component container will fill the width of the container it is in." }, { "name": "multi-line", "description": "If `true`, the input component container will allow for multiple lines." }, { "name": "readonly", "description": "If `true`, the readonly state will be set." }, { "name": "size", "description": "The size of the input component container component.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "validation-inline", "description": "If `true`, the validation will display inline." }, { "name": "validation-status", "description": "The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.", "values": [ { "name": "error" }, { "name": "success" }, { "name": "warning" } ] } ] }, { "name": "ic-input-container", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "disabled", "description": "If `true`, the disabled state will be set." }, { "name": "readonly", "description": "If `true`, the readonly state will be set." } ] }, { "name": "ic-input-label", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "disabled", "description": "If `true`, the disabled state will be set." }, { "name": "for", "description": "The ID of the form element the label is bound to." }, { "name": "helper-text", "description": "The helper text that will be displayed." }, { "name": "hide-label", "description": "The label will be visually hidden." }, { "name": "label", "description": "The text content of the label." }, { "name": "readonly", "description": "If `true`, the readonly state will be set." }, { "name": "required", "description": "If `true`, the input label will require a value." }, { "name": "status", "description": "The status of the label - e.g. 'error'.", "values": [ { "name": "error" } ] } ] }, { "name": "ic-input-validation", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "aria-live-mode", "description": "The ARIA live mode to apply to the message.", "values": [ { "name": "assertive" }, { "name": "off" }, { "name": "polite" } ] }, { "name": "for", "description": "The ID of the form element the validation is bound to." }, { "name": "full-width", "description": "If `true`, the input validation will fill the width of the container." }, { "name": "message", "description": "The validation message to display." }, { "name": "status", "description": "The status of the validation - e.g. 'error' | 'warning' | 'success'.", "values": [ { "name": "error" }, { "name": "success" }, { "name": "warning" } ] } ] }, { "name": "ic-layout-grid", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "aligned", "description": "The alignment of the grid.", "values": [ { "name": "center" }, { "name": "full-width" }, { "name": "left" } ] }, { "name": "columns", "description": "The number of columns in the grid.\nThis can be a number or an object specifying different values for each breakpoint." }, { "name": "default-col-span", "description": "The default column span for grid items." }, { "name": "default-col-width", "description": "The default column width for grid items.\nThis is used when the grid type is set to \"fixed\"." }, { "name": "default-row-span", "description": "The default row span for grid items." }, { "name": "full-height", "description": "If `true`, the standard vertical padding from the grid will be removed." }, { "name": "grid-spacing", "description": "The space between grid items, in multiples of the base spacing unit (`var(--ic-space-xs)`)." }, { "name": "rows", "description": "The number of rows in the grid." }, { "name": "type", "description": "The layout type of the grid.", "values": [ { "name": "fixed" }, { "name": "fluid" } ] } ] }, { "name": "ic-layout-grid-item", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "col-span", "description": "The number of columns the grid item should span." }, { "name": "col-start", "description": "The column the grid item should start at." }, { "name": "hide-in-mobile-mode", "description": "If `true`, the grid item will be hidden on smaller screens." }, { "name": "row-span", "description": "The number of rows the grid item should span." }, { "name": "row-start", "description": "The row the grid item should start at." } ] }, { "name": "ic-link", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "download", "description": "If `true`, the user can save the linked URL instead of navigating to it. If the value is a string, it will be used as the filename for the download." }, { "name": "href", "description": "The URL that the link points to." }, { "name": "hreflang", "description": "The human language of the linked URL." }, { "name": "monochrome", "description": "If `true`, the link will display as black in the light theme, and white in the dark theme." }, { "name": "referrerpolicy", "description": "How much of the referrer to send when following the link.", "values": [ { "name": "no-referrer" }, { "name": "no-referrer-when-downgrade" }, { "name": "origin" }, { "name": "origin-when-cross-origin" }, { "name": "same-origin" }, { "name": "strict-origin" }, { "name": "strict-origin-when-cross-origin" }, { "name": "unsafe-url" } ] }, { "name": "rel", "description": "The relationship of the linked URL as space-separated link types." }, { "name": "target", "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-loading-indicator", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "description", "description": "The description that will be set as the aria-label of the loading indicator when not using a visible label." }, { "name": "full-width", "description": "If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed." }, { "name": "label", "description": "The label to be displayed beneath the loading indicator.\nDisplay a changing label by supplying an array of messages." }, { "name": "label-duration", "description": "The time in milliseconds before the label changes." }, { "name": "max", "description": "The maximum value that the progress value can take.\nUsed to calculate the proportional width of the progress bar." }, { "name": "min", "description": "The minimum value that the progress value can take.\nUsed to calculate the proportional width of the progress bar." }, { "name": "monochrome", "description": "If `true`, the element will display as black and white." }, { "name": "progress", "description": "The current amount of progress made.\nIf not provided, component acts as an indeterminate loading indicator." }, { "name": "size", "description": "The size of the loading indicator.", "values": [ { "name": "icon" }, { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "type", "description": "The type of indicator, either linear or circular. When size is set to 'icon' the type will be set to circular.", "values": [ { "name": "circular" }, { "name": "linear" } ] } ] }, { "name": "ic-menu", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "activation-type", "description": "Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.", "values": [ { "name": "automatic" }, { "name": "manual" } ] }, { "name": "close-on-select", "description": "If `true`, the menu will close when an option is selected." }, { "name": "full-width", "description": "If `true`, the menu will fill the width of the container." }, { "name": "input-label", "description": "The label for the input element." }, { "name": "label-field", "description": "The custom name for the label field for IcMenuOption." }, { "name": "menu-id", "description": "The ID of the menu." }, { "name": "open", "description": "If `true`, the menu will be displayed open." }, { "name": "search-mode", "description": "Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.", "values": [ { "name": "navigation" }, { "name": "query" } ] }, { "name": "size", "description": "The size of the menu.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "value", "description": "The value of the currently selected option - or array of values (if multiple options allowed)." }, { "name": "value-field", "description": "The custom name for the value field for IcMenuOption." } ] }, { "name": "ic-menu-group", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "label", "description": "The label to display as the title of the menu group." } ] }, { "name": "ic-menu-item", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "checked", "description": "If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`." }, { "name": "description", "description": "The description displayed in the menu item, below the label." }, { "name": "disabled", "description": "If `true`, the menu item will be in disabled state." }, { "name": "href", "description": "The URL that the link points to. This will render the menu item as an \"a\" tag." }, { "name": "hreflang", "description": "The human language of the linked URL." }, { "name": "keyboard-shortcut-label", "description": "The label describing the keyboard shortcut for a menu item's action." }, { "name": "label", "description": "The label to display in the menu item." }, { "name": "referrerpolicy", "description": "How much of the referrer to send when following the link.", "values": [ { "name": "no-referrer" }, { "name": "no-referrer-when-downgrade" }, { "name": "origin" }, { "name": "origin-when-cross-origin" }, { "name": "same-origin" }, { "name": "strict-origin" }, { "name": "strict-origin-when-cross-origin" }, { "name": "unsafe-url" } ] }, { "name": "rel", "description": "The relationship of the linked URL as space-separated link types." }, { "name": "submenu-trigger-for", "description": "This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default." }, { "name": "target", "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)." }, { "name": "variant", "description": "The variant of the menu item.", "values": [ { "name": "default" }, { "name": "destructive" }, { "name": "toggle" } ] } ] }, { "name": "ic-navigation-button", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "download", "description": "If `true`, the user can save the linked URL instead of navigating to it." }, { "name": "href", "description": "The URL that the link points to. This will render the button as an \"a\" tag." }, { "name": "hreflang", "description": "The human language of the linked URL." }, { "name": "label", "description": "The label info to display." }, { "name": "referrerpolicy", "description": "How much of the referrer to send when following the link.", "values": [ { "name": "no-referrer" }, { "name": "no-referrer-when-downgrade" }, { "name": "origin" }, { "name": "origin-when-cross-origin" }, { "name": "same-origin" }, { "name": "strict-origin" }, { "name": "strict-origin-when-cross-origin" }, { "name": "unsafe-url" } ] }, { "name": "rel", "description": "The relationship of the linked URL as space-separated link types." }, { "name": "target", "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-navigation-group", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "expandable", "description": "If `true`, the group will be expandable when in an ic-side-navigation component, or, when in an ic-top-navigation component, in the side menu displayed at small screen sizes." }, { "name": "expanded", "description": "If `true`, the expandable group will be expanded by default when in an ic-side-navigation component. To enable this prop, `expandable` must also be set to `true`." }, { "name": "label", "description": "The label to display on the group." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-navigation-item", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "download", "description": "If `true`, the user can save the linked URL instead of navigating to it." }, { "name": "href", "description": "The destination of the navigation item." }, { "name": "hreflang", "description": "The human language of the linked URL." }, { "name": "label", "description": "The label of the navigation item." }, { "name": "referrerpolicy", "description": "How much of the referrer to send when following the link.", "values": [ { "name": "no-referrer" }, { "name": "no-referrer-when-downgrade" }, { "name": "origin" }, { "name": "origin-when-cross-origin" }, { "name": "same-origin" }, { "name": "strict-origin" }, { "name": "strict-origin-when-cross-origin" }, { "name": "unsafe-url" } ] }, { "name": "rel", "description": "The relationship of the linked URL as space-separated link types." }, { "name": "selected", "description": "If `true`, the navigation item will be set in a selected state." }, { "name": "target", "description": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-navigation-menu", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "status", "description": "The status info to display." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "version", "description": "The version info to display." } ] }, { "name": "ic-page-header", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "aligned", "description": "The alignment of the page header.", "values": [ { "name": "center" }, { "name": "full-width" }, { "name": "left" } ] }, { "name": "border", "description": "If `true`, a border will be displayed along the bottom of the page header." }, { "name": "heading", "description": "The title to render on the page header." }, { "name": "reverse-order", "description": "If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped." }, { "name": "size", "description": "The size of the page header component.", "values": [ { "name": "medium" }, { "name": "small" } ] }, { "name": "sticky", "description": "If `true`, the page header will be sticky at all breakpoints." }, { "name": "sticky-desktop-only", "description": "If `true`, the page header will only be sticky for viewport widths of 992px and above." }, { "name": "subheading", "description": "The subtitle to render on the page header." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-pagination", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "accessible-label", "description": "The accessible label of the pagination component to provide context for screen reader users." }, { "name": "adjacent-page-count", "description": "The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2." }, { "name": "boundary-page-count", "description": "The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2." }, { "name": "current-page", "description": "The current page displayed by the pagination." }, { "name": "default-page", "description": "The default page to display." }, { "name": "disabled", "description": "If `true`, the pagination will not allow interaction." }, { "name": "hide-current-page", "description": "If `true`, the current page of the simple pagination will not be displayed." }, { "name": "hide-first-and-last-page-button", "description": "If `true`, the first and last page buttons will not be displayed." }, { "name": "label", "description": "The label for the pagination item (applicable when simple pagination is being used)." }, { "name": "monochrome", "description": "If `true`, the pagination will display as black in the light theme, and white in dark theme." }, { "name": "pages", "description": "The total number of pages." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "type", "description": "The type of pagination to be used.", "values": [ { "name": "complex" }, { "name": "simple" } ] } ] }, { "name": "ic-pagination-bar", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "accessible-label", "description": "The accessible label passed down to the pagination component to provide context for screen reader users." }, { "name": "alignment", "description": "Sets the alignment of the items in the pagination bar.", "values": [ { "name": "left" }, { "name": "right" }, { "name": "space-between" } ] }, { "name": "current-page", "description": "The current page number to be displayed on the pagination bar." }, { "name": "hide-all-from-items-per-page", "description": "If `true`, the 'All' option will be hidden from the 'items per page' select input." }, { "name": "hide-current-page", "description": "If `true`, the current page of the simple pagination will not be displayed." }, { "name": "hide-first-and-last-page-button", "description": "If `true`, the first and last page buttons will not be displayed." }, { "name": "hide-range-label", "description": "If `true`, the number of total items and current item range or number of total pages and current page will be hidden." }, { "name": "item-label", "description": "The text which will be used in place of 'Item' on the pagination bar." }, { "name": "monochrome", "description": "If `true`, the pagination bar will display as black in the light theme, and white in dark theme." }, { "name": "page-label", "description": "The text which will be used in place of 'Page' on the pagination bar." }, { "name": "range-label-type", "description": "Whether total number of items and current item range or total number of pages and current page is displayed.", "values": [ { "name": "data" }, { "name": "page" } ] }, { "name": "select-items-per-page-on-enter", "description": "If `false`, the value in the items per page control will be set immediately on ArrowUp and ArrowDown instead of when Enter is pressed." }, { "name": "selected-items-per-page", "description": "The items per page option to be selected." }, { "name": "set-to-first-page-on-pagination-change", "description": "If `true`, the pagination bar is set to the first page when the 'items per page' changes" }, { "name": "show-go-to-page-control", "description": "If `true`, the 'go to page' control should be displayed." }, { "name": "show-items-per-page-control", "description": "If `true`, the select input to control 'items per page' should be displayed." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "total-items", "description": "Total number of items to be displayed across all pages." }, { "name": "type", "description": "Whether the displayed pagination is simple or complex.", "values": [ { "name": "complex" }, { "name": "simple" } ] } ] }, { "name": "ic-pagination-item", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "disabled", "description": "If `true`, the pagination item will be disabled." }, { "name": "label", "description": "The label for the pagination item (applicable when simple pagination is being used)." }, { "name": "monochrome", "description": "If `true`, the pagination item will display as black in the light theme, and white in dark theme." }, { "name": "page", "description": "The current page number." }, { "name": "selected", "description": "If `true`, the pagination item will be selected." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "type", "description": "The type of pagination item - 'page' or 'ellipsis'.", "values": [ { "name": "ellipsis" }, { "name": "page" }, { "name": "simple-current" } ] } ] }, { "name": "ic-popover-menu", "description": { "kind": "markdown", "value": "This is a wrapper component to be placed around one or more ic-menu-item components." }, "attributes": [ { "name": "anchor", "description": "The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu." }, { "name": "fixed-positioning", "description": "Setting to `true` can help in situations where tooltip content is clipped by a parent element." }, { "name": "open", "description": "If `true`, the popover menu will be displayed." }, { "name": "submenu-id", "description": "The unique identifier for a popover submenu." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-radio-group", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "disabled", "description": "If `true`, the disabled state will be set." }, { "name": "helper-text", "description": "The helper text that will be displayed for additional field guidance." }, { "name": "hide-label", "description": "If `true`, the label will be hidden and the required label value will be applied as an aria-label." }, { "name": "label", "description": "The label for the radio group to be displayed." }, { "name": "name", "description": "The name for the radio group to differentiate from other groups." }, { "name": "orientation", "description": "The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.", "values": [ { "name": "horizontal" }, { "name": "vertical" } ] }, { "name": "required", "description": "If `true`, the radio group will require a value." }, { "name": "size", "description": "The size of the radio group component.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "validation-aria-live", "description": "The value of the `aria-live` attribute on the validation message.", "values": [ { "name": "assertive" }, { "name": "off" }, { "name": "polite" } ] }, { "name": "validation-status", "description": "The validation status - e.g. 'error' | 'warning' | 'success'.", "values": [ { "name": "error" }, { "name": "success" }, { "name": "warning" } ] }, { "name": "validation-text", "description": "The text to display as the validation message." } ] }, { "name": "ic-radio-option", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "additional-field-display", "description": "The style of additionalField that will be displayed if used.", "values": [ { "name": "dynamic" }, { "name": "static" } ] }, { "name": "disabled", "description": "If `true`, the disabled state will be set." }, { "name": "dynamic-text", "description": "The text to be displayed when dynamic." }, { "name": "form", "description": "The element to associate the radio with." }, { "name": "group-label", "description": "The group label for the radio option." }, { "name": "label", "description": "The label for the radio option." }, { "name": "name", "description": "The name for the radio option." }, { "name": "selected", "description": "If `true`, the radio option will be displayed in a selected state." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "value", "description": "The value for the radio option." } ] }, { "name": "ic-search-bar", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "assistive-hint-text", "description": "The hint text for the hidden assistive description element." }, { "name": "autocapitalize", "description": "The automatic capitalisation of the text value as it is entered/edited by the user.\nAvailable options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\"." }, { "name": "autocomplete", "description": "The state of autocompletion the browser can apply on the text value.", "values": [ { "name": "on" }, { "name": "off" }, { "name": "name" }, { "name": "honorific-prefix" }, { "name": "given-name" }, { "name": "additional-name" }, { "name": "family-name" }, { "name": "honorific-suffix" }, { "name": "nickname" }, { "name": "email" }, { "name": "username" }, { "name": "new-password" }, { "name": "current-password" }, { "name": "one-time-code" }, { "name": "organization-title" }, { "name": "organization" }, { "name": "street-address" }, { "name": "address-line1" }, { "name": "address-line2" }, { "name": "address-line3" }, { "name": "address-level4" }, { "name": "address-level3" }, { "name": "address-level2" }, { "name": "address-level1" }, { "name": "country" }, { "name": "country-name" }, { "name": "postal-code" }, { "name": "cc-name" }, { "name": "cc-given-name" }, { "name": "cc-additional-name" }, { "name": "cc-family-name" }, { "name": "cc-number" }, { "name": "cc-exp" }, { "name": "cc-exp-month" }, { "name": "cc-exp-year" }, { "name": "cc-csc" }, { "name": "cc-type" }, { "name": "transaction-currency" }, { "name": "transaction-amount" }, { "name": "language" }, { "name": "bday" }, { "name": "bday-day" }, { "name": "bday-month" }, { "name": "bday-year" }, { "name": "sex" }, { "name": "tel" }, { "name": "tel-country-code" }, { "name": "tel-national" }, { "name": "tel-area-code" }, { "name": "tel-local" }, { "name": "tel-extension" }, { "name": "impp" }, { "name": "url" }, { "name": "photo" } ] }, { "name": "autocorrect", "description": "The state of autocorrection the browser can apply when the user is entering/editing the text value.", "values": [ { "name": "off" }, { "name": "on" } ] }, { "name": "autofocus", "description": "If `true`, the form control will have input focus when the page loads." }, { "name": "characters-until-suggestion", "description": "The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number." }, { "name": "debounce", "description": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke." }, { "name": "disable-auto-filtering", "description": "Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\nIf `true`, all options provided will be displayed." }, { "name": "disabled", "description": "If `true`, the disabled state will be set." }, { "name": "empty-option-list-text", "description": "The text displayed when there are no options in the option list." }, { "name": "focus-on-load", "description": "If `true`, the search bar will be focused when component loaded." }, { "name": "full-width", "description": "Specify whether the search bar fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable." }, { "name": "helper-text", "description": "The helper text that will be displayed for additional field guidance." }, { "name": "hide-label", "description": "If `true`, the label will be hidden and the required label value will be applied as an aria-label." }, { "name": "label", "description": "The label for the search bar." }, { "name": "label-field", "description": "The custom name for the label field to correspond with the IcMenuOption type." }, { "name": "loading", "description": "Trigger loading state when fetching options asynchronously" }, { "name": "loading-error-label", "description": "Change the message displayed when external loading times out." }, { "name": "loading-label", "description": "Change the message displayed whilst the options are being loaded externally." }, { "name": "name", "description": "The name of the control, which is submitted with the form data." }, { "name": "placeholder", "description": "The placeholder value to display." }, { "name": "prevent-form-submit-on-search", "description": "If `true` the parent form will not submit when the icSubmitSearch event fires." }, { "name": "readonly", "description": "If `true`, the readonly state will be set." }, { "name": "required", "description": "If `true`, the search bar will require a value." }, { "name": "search-mode", "description": "Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.", "values": [ { "name": "navigation" }, { "name": "query" } ] }, { "name": "size", "description": "The size of the search bar component.", "values": [ { "name": "medium" }, { "name": "small" } ] }, { "name": "spellcheck", "description": "If `true`, the value of the search will have its spelling and grammar checked." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "timeout", "description": "If using external filtering, set a timeout for when loading takes too long." }, { "name": "value", "description": "The value of the search input." }, { "name": "value-field", "description": "The custom name for the value field to correspond with the IcMenuOption type." } ] }, { "name": "ic-section-container", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "aligned", "description": "The alignment of the container.", "values": [ { "name": "center" }, { "name": "full-width" }, { "name": "left" } ] }, { "name": "full-height", "description": "If `true`, the standard vertical padding from the container will be removed." } ] }, { "name": "ic-select", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "debounce", "description": "The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke." }, { "name": "disable-auto-filtering", "description": "If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source." }, { "name": "disabled", "description": "If `true`, the disabled state will be set." }, { "name": "empty-option-list-text", "description": "The text displayed when there are no options in the option list." }, { "name": "form", "description": "The element to associate the select with." }, { "name": "full-width", "description": "If `true`, the select will fill the width of the container." }, { "name": "helper-text", "description": "The helper text that will be displayed for additional field guidance." }, { "name": "hide-label", "description": "If `true`, the label will be hidden and the required label value will be applied as an aria-label." }, { "name": "include-descriptions-in-search", "description": "If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering." }, { "name": "include-group-titles-in-search", "description": "If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering." }, { "name": "label", "description": "The label for the select." }, { "name": "loading", "description": "If `true`, the loading state will be triggered when fetching options asynchronously." }, { "name": "loading-error-label", "description": "The message displayed when external loading times out." }, { "name": "loading-label", "description": "The message displayed whilst the options are being loaded externally." }, { "name": "multiple", "description": "If `true`, multiple options can be selected." }, { "name": "name", "description": "The name of the control, which is submitted with the form data." }, { "name": "placeholder", "description": "The placeholder value to be displayed." }, { "name": "readonly", "description": "If `true`, the readonly state will be set." }, { "name": "required", "description": "If `true`, the select will require a value." }, { "name": "search-match-position", "description": "Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.", "values": [ { "name": "anywhere" }, { "name": "start" } ] }, { "name": "searchable", "description": "If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component." }, { "name": "select-on-enter", "description": "If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select." }, { "name": "show-clear-button", "description": "If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select." }, { "name": "size", "description": "The size of the select.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "timeout", "description": "If using external filtering, set a timeout for when loading takes too long." }, { "name": "use-native-select-on-mobile", "description": "If `true` and on a mobile or tablet device, the native select element will be used instead of the custom select component for better usability." }, { "name": "validation-aria-live", "description": "The value of the `aria-live` attribute on the validation message.", "values": [ { "name": "assertive" }, { "name": "off" }, { "name": "polite" } ] }, { "name": "validation-status", "description": "The validation status - e.g. 'error' | 'warning' | 'success'.", "values": [ { "name": "error" }, { "name": "success" }, { "name": "warning" } ] }, { "name": "validation-text", "description": "The text to display as the validation message." }, { "name": "value", "description": "The value of the select, reflected by the value of the currently selected option.\nFor the searchable variant, the value is also reflected by the user input.\nFor the multi-select variant, the value must be an array of option values." } ] }, { "name": "ic-side-navigation", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "app-title", "description": "The app title to be displayed. This is required, unless a slotted app title link is used." }, { "name": "close-on-nav-item-click", "description": "If `true`, the side navigation will close when a navigation item is clicked. This behaviour is only applicable on larger device sizes." }, { "name": "collapsed-icon-labels", "description": "If `true`, the icon and label will appear when side navigation is collapsed." }, { "name": "disable-auto-parent-styling", "description": "If `true`, automatic parent wrapper styling will be disabled." }, { "name": "disable-top-bar-behaviour", "description": "If `true`, the side navigation will not display as a top bar on small devices." }, { "name": "expanded", "description": "If `true`, the side navigation will display in an expanded state." }, { "name": "href", "description": "The URL that the app title link points to." }, { "name": "short-app-title", "description": "The short title of the app to be displayed at small screen sizes in place of the app title." }, { "name": "static", "description": "If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)." }, { "name": "status", "description": "The status of the app to be displayed." }, { "name": "version", "description": "The version of the app to be displayed." } ] }, { "name": "ic-skeleton", "description": { "kind": "markdown", "value": "When using the skeleton component, an aria-live level should be applied to the parent element of the skeleton and the element that it is\nrepresenting so that any changes, such as the real element replacing the skeleton placeholder, are announced to assistive technology like screen readers. The recommendation is to use aria-live=\"polite\" over aria-live=\"recommended\" unless changes are critically important." }, "attributes": [ { "name": "height", "description": "Height of the skeleton. Accepts any valid CSS length (e.g. \"24px\", \"2rem\", \"100%\")." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "variant", "description": "The variant of the skeleton that will be displayed.", "values": [ { "name": "circle" }, { "name": "rectangle" }, { "name": "text" } ] }, { "name": "width", "description": "Width of the skeleton. Accepts any valid CSS length (e.g. \"24px\", \"2rem\", \"100%\")." } ] }, { "name": "ic-skip-link", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "full-width", "description": "If `true`, the skip link will fill the width of the page." }, { "name": "inline", "description": "If `true`, the skip link will appear inline with surrounding page content when focused." }, { "name": "label", "description": "The label displayed when the skip link is focused." }, { "name": "monochrome", "description": "If `true`, the skip link will display as black in the light theme, and white in the dark theme." }, { "name": "target", "description": "The target ID for the element which should receive focus when triggering the skip link." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. `inherit` will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "transparent-background", "description": "If `true`, the background will be hidden." } ] }, { "name": "ic-status-tag", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "announced", "description": "If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\nScreen readers will announce changes to the `label`, but not the initial value." }, { "name": "label", "description": "The content rendered within the status tag." }, { "name": "size", "description": "The size of the status tag component.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "status", "description": "The colour of the status tag.", "values": [ { "name": "danger" }, { "name": "neutral" }, { "name": "success" }, { "name": "warning" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "uppercase", "description": "The letter case of the status tag's label." }, { "name": "variant", "description": "The emphasis of the status tag.", "values": [ { "name": "filled" }, { "name": "outlined" } ] } ] }, { "name": "ic-step", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "heading", "description": "The title of the step within the stepper." }, { "name": "status", "description": "The status of the step. Use this prop to display a status message on the step if it is required or optional.", "values": [ { "name": "optional" }, { "name": "required" } ] }, { "name": "subheading", "description": "Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status." }, { "name": "type", "description": "The state of the step within the stepper.", "values": [ { "name": "active" }, { "name": "completed" }, { "name": "current" }, { "name": "disabled" } ] } ] }, { "name": "ic-stepper", "description": { "kind": "markdown", "value": "This is a wrapper component to be placed around one or more ic-step components" }, "attributes": [ { "name": "aligned", "description": "The alignment of the default stepper within its container.", "values": [ { "name": "full-width" }, { "name": "left" } ] }, { "name": "connector-width", "description": "The length of the connector between each step in pixels. Minimum length is 100px." }, { "name": "hide-step-info", "description": "If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "variant", "description": "The variant of the stepper.", "values": [ { "name": "compact" }, { "name": "default" } ] } ] }, { "name": "ic-switch", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "checked", "description": "If `true`, the switch will display as checked." }, { "name": "disabled", "description": "If `true`, the disabled state will be set." }, { "name": "helper-text", "description": "The helper text that will be displayed for additional field guidance." }, { "name": "hide-label", "description": "If `true`, the label will be hidden and the required label value will be applied as an aria-label." }, { "name": "label", "description": "The aria-label applied to the switch when no visual 'name' is provided." }, { "name": "name", "description": "The name of the control, which is submitted with the form data." }, { "name": "size", "description": "The size of the switch component.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "value", "description": "The value of the toggle does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a toggle is analogous to the value of a ``,\nit's only used when the toggle participates in a native ``." } ] }, { "name": "ic-tab", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "disabled", "description": "If `true`, the disabled state will be set." } ] }, { "name": "ic-tab-context", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "activation-type", "description": "Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.", "values": [ { "name": "automatic" }, { "name": "manual" } ] }, { "name": "context-id", "description": "The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel." }, { "name": "monochrome", "description": "If `true`, the tabs will display as black in the light theme." }, { "name": "selected-tab-index", "description": "The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-tab-group", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "inline", "description": "If `true`, the tabs and tab panels will be positioned separately." }, { "name": "label", "description": "The label to describe the purpose of the set of tabs to screen reader users." } ] }, { "name": "ic-tab-panel", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "ic-text-field", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "autocapitalize", "description": "The automatic capitalisation of the text value as it is entered/edited by the user.\nAvailable options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\"." }, { "name": "autocomplete", "description": "The state of autocompletion the browser can apply on the text value." }, { "name": "autocorrect", "description": "The state of autocorrection the browser can apply when the user is entering/editing the text value.", "values": [ { "name": "off" }, { "name": "on" } ] }, { "name": "autofocus", "description": "If `true`, the form control will have input focus when the page loads." }, { "name": "debounce", "description": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke." }, { "name": "disabled", "description": "If `true`, the disabled state will be set." }, { "name": "full-width", "description": "Specify whether the text field fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable." }, { "name": "helper-text", "description": "The helper text that will be displayed for additional field guidance." }, { "name": "hide-char-count", "description": "If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden." }, { "name": "hide-label", "description": "If `true`, the label will be hidden and the required label value will be applied as an aria-label." }, { "name": "input-id", "description": "The ID for the input." }, { "name": "inputmode", "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.", "values": [ { "name": "decimal" }, { "name": "email" }, { "name": "none" }, { "name": "numeric" }, { "name": "search" }, { "name": "tel" }, { "name": "text" }, { "name": "url" } ] }, { "name": "label", "description": "The label for the input." }, { "name": "max", "description": "The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)" }, { "name": "max-characters", "description": "The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)" }, { "name": "max-characters-message", "description": "The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached." }, { "name": "max-message", "description": "The text to display as the error message when the maximum value (the `max` prop value) has been exceeded." }, { "name": "min", "description": "The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)" }, { "name": "min-characters", "description": "The minimum number of characters that can be entered in the field." }, { "name": "min-characters-message", "description": "The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met." }, { "name": "min-message", "description": "The text to display as the error message when the minimum value (the `min` prop value) has not been met." }, { "name": "name", "description": "The name of the control, which is submitted with the form data." }, { "name": "placeholder", "description": "The placeholder value to be displayed." }, { "name": "readonly", "description": "If `true`, the read only state will be set." }, { "name": "required", "description": "If `true`, the input will require a value." }, { "name": "resize", "description": "If `true`, the multiline text area will be resizeable." }, { "name": "rows", "description": "The number of rows to transform the text field into a text area with a specific height." }, { "name": "size", "description": "The size of the text field component.", "values": [ { "name": "medium" }, { "name": "small" } ] }, { "name": "spellcheck", "description": "If `true`, the value of the text field will have its spelling and grammar checked." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "type", "description": "The type of control to display. The default type is text.", "values": [ { "name": "email" }, { "name": "number" }, { "name": "password" }, { "name": "search" }, { "name": "tel" }, { "name": "text" }, { "name": "url" } ] }, { "name": "validation-aria-live", "description": "The value of the `aria-live` attribute on the validation message. When set to \"default\", the `aria-live` value will be handled automatically, e.g. \"assertive\" for `validation-status=\"error\"`.", "values": [ { "name": "assertive" }, { "name": "default" }, { "name": "off" }, { "name": "polite" } ] }, { "name": "validation-inline", "description": "If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'." }, { "name": "validation-status", "description": "The validation state - e.g. 'error' | 'warning' | 'success'.", "values": [ { "name": "error" }, { "name": "success" }, { "name": "warning" } ] }, { "name": "validation-text", "description": "The text to display as the validation message." }, { "name": "value", "description": "The value of the text field." } ] }, { "name": "ic-theme", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "brand-color", "description": "The brand colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"." }, { "name": "theme", "description": "The theme mode. Can be \"dark\", \"light\", or \"system\". \"system\" will use the device or browser settings.", "values": [ { "name": "dark" }, { "name": "light" }, { "name": "system" } ] } ] }, { "name": "ic-toast", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "auto-dismiss-timeout", "description": "If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n(NOTE: Has a minimum value of `5000ms`)" }, { "name": "dismiss-button-aria-label", "description": "If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component" }, { "name": "dismiss-mode", "description": "How the toast will be dismissed. If manual will display a dismiss button.", "values": [ { "name": "automatic" }, { "name": "manual" } ] }, { "name": "heading", "description": "The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)" }, { "name": "message", "description": "The main body message of the toast. (NOTE: Should be no more than `140` characters)" }, { "name": "neutral-icon-aria-label", "description": "Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon" }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "variant", "description": "The variant of the toast being rendered", "values": [ { "name": "ai" }, { "name": "error" }, { "name": "info" }, { "name": "neutral" }, { "name": "success" }, { "name": "warning" } ] } ] }, { "name": "ic-toast-region", "description": { "kind": "markdown", "value": "" }, "attributes": [] }, { "name": "ic-toggle-button", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "accessible-label", "description": "The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons." }, { "name": "checked", "description": "If `true`, the toggle button will be in a checked state." }, { "name": "disabled", "description": "If `true`, the toggle button will be in disabled state." }, { "name": "full-width", "description": "If `true`, the toggle button will fill the width of the container." }, { "name": "icon-placement", "description": "The placement of the icon in relation to the toggle button label.", "values": [ { "name": "left" }, { "name": "right" }, { "name": "top" } ] }, { "name": "label", "description": "The label to display in the toggle button. This is required for the default variant of toggle buttons." }, { "name": "loading", "description": "If `true`, the toggle button will be in loading state." }, { "name": "monochrome", "description": "If `true`, the toggle button will display as black in the light theme, and white in dark theme." }, { "name": "outline", "description": "If `true`, the toggle button will display with an outline." }, { "name": "size", "description": "The size of the toggle button to be displayed.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "tooltip-placement", "description": "The position of the tooltip in relation to the toggle button.", "values": [ { "name": "bottom" }, { "name": "left" }, { "name": "right" }, { "name": "top" } ] }, { "name": "variant", "description": "The variant of the toggle button.", "values": [ { "name": "default" }, { "name": "icon" } ] } ] }, { "name": "ic-toggle-button-group", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "accessible-label", "description": "The accessible label of the toggle button group component to provide context for screen reader users." }, { "name": "disabled", "description": "If `true`, the toggle button group will be set to the disabled state." }, { "name": "full-width", "description": "If `true`, the toggle button group will fill the width of the container." }, { "name": "icon-placement", "description": "The placement of the icons in relation to the toggle button labels.", "values": [ { "name": "left" }, { "name": "right" }, { "name": "top" } ] }, { "name": "loading", "description": "If `true`, the toggle button group will be in loading state." }, { "name": "monochrome", "description": "If `true`, the toggle button group will display as black in the light theme, and white in dark theme." }, { "name": "outline", "description": "If `true`, the toggle button group will display with an outline." }, { "name": "select-method", "description": "If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.", "values": [ { "name": "auto" }, { "name": "manual" } ] }, { "name": "select-type", "description": "Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.", "values": [ { "name": "multi" }, { "name": "single" } ] }, { "name": "size", "description": "The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.", "values": [ { "name": "large" }, { "name": "medium" }, { "name": "small" } ] }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "tooltip-placement", "description": "The position of the tooltip in relation to the toggle buttons.", "values": [ { "name": "bottom" }, { "name": "left" }, { "name": "right" }, { "name": "top" } ] }, { "name": "variant", "description": "The variant of the toggle button.", "values": [ { "name": "default" }, { "name": "icon" } ] } ] }, { "name": "ic-tooltip", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "disable-click", "description": "If `true`, the tooltip will not be displayed on click, it will require hover or using the display method." }, { "name": "disable-hover", "description": "If `true`, the tooltip will not be displayed on hover, it will require a click." }, { "name": "fixed-positioning", "description": "Setting to `true` can help in situations where tooltip content is clipped by a parent element." }, { "name": "icon-alt-text", "description": "The alt text to be used alongside a slotted icon." }, { "name": "label", "description": "The text to display on the tooltip." }, { "name": "max-lines", "description": "The number of lines to display before truncating the text." }, { "name": "placement", "description": "The position of the tooltip in relation to the parent element.", "values": [ { "name": "bottom" }, { "name": "bottom-end" }, { "name": "bottom-start" }, { "name": "left" }, { "name": "left-end" }, { "name": "left-start" }, { "name": "right" }, { "name": "right-end" }, { "name": "right-start" }, { "name": "top" }, { "name": "top-end" }, { "name": "top-start" } ] }, { "name": "target", "description": "The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used." }, { "name": "theme", "description": "Sets the tooltip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] } ] }, { "name": "ic-top-navigation", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "app-title", "description": "The app title to be displayed. This is required, unless a slotted app title link is used." }, { "name": "content-aligned", "description": "The alignment of the top navigation content.", "values": [ { "name": "center" }, { "name": "full-width" }, { "name": "left" } ] }, { "name": "custom-mobile-breakpoint", "description": "Can set a custom breakpoint for the top navigation to switch to mobile mode.\nMust be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`." }, { "name": "hide-app-title", "description": "If `true`, the app title will be hidden, but still accessible to screen readers." }, { "name": "href", "description": "The URL to navigate to when the app title or app icon is clicked." }, { "name": "inline", "description": "If `true`, the flyout navigation menu on small devices will be contained by the parent element." }, { "name": "short-app-title", "description": "The short title of the app to be displayed at small screen sizes in place of the app title." }, { "name": "status", "description": "The status info to be displayed." }, { "name": "theme", "description": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "version", "description": "The version info to be displayed." } ] }, { "name": "ic-typography", "description": { "kind": "markdown", "value": "" }, "attributes": [ { "name": "apply-vertical-margins", "description": "If `true`, appropriate top and bottom margins will be applied to the typography." }, { "name": "bold", "description": "If `true`, the typography will have a bold font weight.\nNote: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large)." }, { "name": "italic", "description": "If `true`, the typography will have an italic font style." }, { "name": "max-lines", "description": "The number of lines to display before truncating the text, only used for the 'body' variant." }, { "name": "strikethrough", "description": "If `true`, the typography will have a line through it." }, { "name": "theme", "description": "Sets the text color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.", "values": [ { "name": "dark" }, { "name": "inherit" }, { "name": "light" } ] }, { "name": "underline", "description": "If `true`, the typography will have a line under it." }, { "name": "variant", "description": "The ICDS typography style to use.", "values": [ { "name": "badge" }, { "name": "badge-small" }, { "name": "body" }, { "name": "caption" }, { "name": "caption-uppercase" }, { "name": "code-extra-small" }, { "name": "code-large" }, { "name": "code-small" }, { "name": "h1" }, { "name": "h2" }, { "name": "h3" }, { "name": "h4" }, { "name": "label" }, { "name": "label-uppercase" }, { "name": "subtitle-large" }, { "name": "subtitle-small" } ] } ] } ] }