{ "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json", "name": "@eurodata/eurodata-ui", "version": "0.9.0", "description-markup": "markdown", "contributions": { "html": { "elements": [ { "name": "ed-icon", "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **ed-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n- **ed-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.\n- **use** - The `` element generated when using `spriteSheet: true`", "doc-url": "", "attributes": [ { "name": "name", "description": "The name of the icon to draw. Available names depend on the icon library being used.", "value": { "type": "string | undefined" } }, { "name": "family", "description": "The family of icons to choose from. When using empty state icons you can add the mono to get the mono-colored icons.", "value": { "type": "string" } }, { "name": "variant", "description": "The name of the icon's variant. Our Libraries do not use any variants, but it is use-full for some custom added libraries.", "value": { "type": "string" } }, { "name": "auto-width", "description": "Sets the width of the icon to match the cropped SVG viewBox. This operates like the Font `fa-width-auto` class.", "value": { "type": "boolean", "default": "false" } }, { "name": "swap-opacity", "description": "Swaps the opacity of duotone icons.", "value": { "type": "boolean", "default": "false" } }, { "name": "src", "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.", "value": { "type": "string | undefined" } }, { "name": "label", "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.", "value": { "type": "string", "default": "''" } }, { "name": "library", "description": "The name of a registered custom icon library.", "value": { "type": "string", "default": "'default'" } }, { "name": "no-recolor", "description": "Disables the recoloring of the icon with currentColor and instead keeps the initial fill color for each path", "value": { "type": "boolean", "default": "false" } }, { "name": "rotate", "description": "Sets the rotation degree of the icon", "value": { "type": "number", "default": "0" } }, { "name": "flip", "description": "Sets the flip direction of the icon along the 'x' (horizontal), 'y' (vertical), or 'both' axes.", "value": { "type": "'x' | 'y' | 'both' | undefined" } }, { "name": "dir", "value": { "type": "string" } }, { "name": "lang", "value": { "type": "string" } }, { "name": "did-ssr", "value": { "type": "string" } } ], "slots": [], "events": [ { "name": "ed-load", "description": "Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit." }, { "name": "ed-error", "description": "Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit." } ], "js": { "properties": [ { "name": "name", "description": "The name of the icon to draw. Available names depend on the icon library being used.", "type": "string | undefined" }, { "name": "family", "description": "The family of icons to choose from. When using empty state icons you can add the mono to get the mono-colored icons.", "type": "string" }, { "name": "variant", "description": "The name of the icon's variant. Our Libraries do not use any variants, but it is use-full for some custom added libraries.", "type": "string" }, { "name": "autoWidth", "description": "Sets the width of the icon to match the cropped SVG viewBox. This operates like the Font `fa-width-auto` class.", "type": "boolean" }, { "name": "swapOpacity", "description": "Swaps the opacity of duotone icons.", "type": "boolean" }, { "name": "src", "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.", "type": "string | undefined" }, { "name": "label", "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.", "type": "string" }, { "name": "library", "description": "The name of a registered custom icon library.", "type": "string" }, { "name": "noRecolor", "description": "Disables the recoloring of the icon with currentColor and instead keeps the initial fill color for each path", "type": "boolean" }, { "name": "rotate", "description": "Sets the rotation degree of the icon", "type": "number" }, { "name": "flip", "description": "Sets the flip direction of the icon along the 'x' (horizontal), 'y' (vertical), or 'both' axes.", "type": "'x' | 'y' | 'both' | undefined" }, { "name": "initialReflectedProperties", "type": "Map" }, { "name": "internals", "type": "ElementInternals" }, { "name": "dir", "type": "string" }, { "name": "lang", "type": "string" }, { "name": "didSSR" } ], "events": [ { "name": "ed-load", "description": "Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit." }, { "name": "ed-error", "description": "Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit." } ] } }, { "name": "ed-checkbox", "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **change** - Emitted when the checked state changes.\n- **blur** - Emitted when the checkbox loses focus.\n- **focus** - Emitted when the checkbox gains focus.\n- **input** - Emitted when the checkbox receives input.\n- **ed-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **setCustomValidity(message: _string_)** - Do not use this when creating a \"Validator\". This is intended for end users of components.\nWe track manually defined custom errors so we don't clear them on accident in our validators.\n- **formStateRestoreCallback(state: _string | File | FormData | null_, reason: _'autocomplete' | 'restore'_)** - Called when the browser is trying to restore element’s state to state in which case reason is \"restore\", or when\nthe browser is trying to fulfill autofill on behalf of user in which case reason is \"autocomplete\". In the case of\n\"restore\", state is a string, File, or FormData object previously set as the second argument to setFormValue.\n- **resetValidity()** - Reset validity is a way of removing manual custom errors and native validation.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **hint** - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.\n\n### **CSS Properties:**\n - **--checked-icon-color** - The color of the checked and indeterminate icons. _(default: undefined)_\n- **--checked-icon-size** - The size of the checked and indeterminate icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's label .\n- **control** - The square container that wraps the checkbox's checked state.\n- **checked-icon** - The checked icon, a `` element.\n- **indeterminate-icon** - The indeterminate icon, a `` element.\n- **label** - The container that wraps the checkbox's label.\n- **hint** - The hint's wrapper.", "doc-url": "", "attributes": [ { "name": "title", "value": { "type": "string", "default": "''" } }, { "name": "name", "description": "The name of the checkbox, submitted as a name/value pair with form data.", "value": { "type": "string | null", "default": "null" } }, { "name": "value", "description": "The value of the checkbox, submitted as a name/value pair with form data.", "value": { "type": "string | null" } }, { "name": "disabled", "description": "Disables the checkbox.", "value": { "type": "boolean", "default": "false" } }, { "name": "readonly", "description": "Makes the checkbox readonly.", "value": { "type": "boolean", "default": "false" } }, { "name": "indeterminate", "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.", "value": { "type": "boolean", "default": "false" } }, { "name": "alternative", "description": "Enables alternative styling", "value": { "type": "boolean", "default": "false" } }, { "name": "checked", "description": "The default value of the form control. Primarily used for resetting the form control.", "value": { "type": "boolean" } }, { "name": "required", "description": "Makes the checkbox a required field.", "value": { "type": "boolean", "default": "false" } }, { "name": "error", "description": "Draws an error-style input with danger colored border and icon. Set to an empty string (or use the bare attribute ``) to render error styling without a visible message; submission is still blocked with a localized fallback validation message. Set to a non-empty string to additionally display that message in the hint area and use it as the validation message. Set to `null` (the default) or remove the attribute to clear the error.", "value": { "type": "string | null", "default": "null" } }, { "name": "warning", "description": "Draws a warning-style input with warning colored border and icon. Set to an empty string (or use the bare attribute ``) to render warning styling without a visible message. Set to a non-empty string to additionally display that message in the hint area. Warnings do not block form submission. Set to `null` (the default) or remove the attribute to clear the warning.", "value": { "type": "string | null", "default": "null" } }, { "name": "ai", "description": "Draws an ai-style input with AI colored border and icon.", "value": { "type": "boolean", "default": "false" } }, { "name": "hint", "description": "The form control's hint text. If you need to display HTML, use the `hint` slot instead.", "value": { "type": "string", "default": "''" } }, { "name": "dir", "value": { "type": "string" } }, { "name": "lang", "value": { "type": "string" } }, { "name": "did-ssr", "value": { "type": "string" } } ], "slots": [ { "name": "", "description": "The checkbox's label." }, { "name": "hint", "description": "Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute." } ], "events": [ { "name": "change", "type": "Event", "description": "Emitted when the checked state changes." }, { "name": "blur", "description": "Emitted when the checkbox loses focus." }, { "name": "focus", "description": "Emitted when the checkbox gains focus." }, { "name": "input", "description": "Emitted when the checkbox receives input." }, { "name": "ed-invalid", "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied." } ], "js": { "properties": [ { "name": "input", "type": "(HTMLElement & { value: unknown }) | HTMLInputElement | HTMLTextAreaElement | undefined" }, { "name": "title", "type": "string" }, { "name": "name", "description": "The name of the checkbox, submitted as a name/value pair with form data.", "type": "string | null" }, { "name": "value", "description": "The value of the checkbox, submitted as a name/value pair with form data.", "type": "string | null" }, { "name": "disabled", "description": "Disables the checkbox.", "type": "boolean" }, { "name": "readonly", "description": "Makes the checkbox readonly.", "type": "boolean" }, { "name": "indeterminate", "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.", "type": "boolean" }, { "name": "alternative", "description": "Enables alternative styling", "type": "boolean" }, { "name": "_checked", "type": "boolean | null" }, { "name": "checked", "description": "Draws the checkbox in a checked state." }, { "name": "defaultChecked", "description": "The default value of the form control. Primarily used for resetting the form control.", "type": "boolean" }, { "name": "required", "description": "Makes the checkbox a required field.", "type": "boolean" }, { "name": "error", "description": "Draws an error-style input with danger colored border and icon. Set to an empty string (or use the bare attribute ``) to render error styling without a visible message; submission is still blocked with a localized fallback validation message. Set to a non-empty string to additionally display that message in the hint area and use it as the validation message. Set to `null` (the default) or remove the attribute to clear the error.", "type": "string | null" }, { "name": "warning", "description": "Draws a warning-style input with warning colored border and icon. Set to an empty string (or use the bare attribute ``) to render warning styling without a visible message. Set to a non-empty string to additionally display that message in the hint area. Warnings do not block form submission. Set to `null` (the default) or remove the attribute to clear the warning.", "type": "string | null" }, { "name": "ai", "description": "Draws an ai-style input with AI colored border and icon.", "type": "boolean" }, { "name": "hint", "description": "The form control's hint text. If you need to display HTML, use the `hint` slot instead.", "type": "string" }, { "name": "assumeInteractionOn", "type": "string[]" }, { "name": "assumeInteractionOnMode", "type": "'combined' | 'separated' | string" }, { "name": "valueHasChanged", "type": "boolean" }, { "name": "hasInteracted", "type": "boolean" }, { "name": "states", "type": "CustomStateSet" }, { "name": "emitInvalid" }, { "name": "labels" }, { "name": "form", "description": "By default, form controls are associated with the nearest containing `
` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.", "type": "HTMLFormElement | null" }, { "name": "validity" }, { "name": "willValidate" }, { "name": "validationMessage" }, { "name": "validationTarget", "description": "Override this to change where constraint validation popups are anchored.", "type": "undefined | HTMLElement" }, { "name": "allValidators" }, { "name": "initialReflectedProperties", "type": "Map" }, { "name": "internals", "type": "ElementInternals" }, { "name": "dir", "type": "string" }, { "name": "lang", "type": "string" }, { "name": "didSSR" } ], "events": [ { "name": "change", "type": "Event", "description": "Emitted when the checked state changes." }, { "name": "blur", "description": "Emitted when the checkbox loses focus." }, { "name": "focus", "description": "Emitted when the checkbox gains focus." }, { "name": "input", "description": "Emitted when the checkbox receives input." }, { "name": "ed-invalid", "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied." } ] } }, { "name": "ed-progress-ring", "description": "Progress rings show the progress of an operation in a circular fashion. Set `indeterminate` for a loading spinner.\n---\n\n\n### **Slots:**\n - **label** - The progress ring's label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--size** - The diameter of the ring. _(default: 3rem)_\n- **--track-width** - The width of the track stroke (SVG user units). _(default: 5)_\n- **--track-color** - The color of the track. _(default: var(--ed-color-neutral-fill-normal))_\n- **--indicator-width** - The width of the indicator stroke. _(default: var(--track-width))_\n- **--indicator-color** - The color of the indicator. _(default: var(--ed-color-brand-fill-normal))_\n- **--indicator-transition-duration** - The transition duration for determinate value changes. _(default: 0.35s)_\n\n### **CSS Parts:**\n - **form-control-label** - The label element below the ring.\n- **base** - The component's base wrapper.\n- **track** - The SVG track circle.\n- **indicator** - The SVG indicator circle.", "doc-url": "", "attributes": [ { "name": "value", "description": "The current progress as a percentage, 0 to 100.", "value": { "type": "number", "default": "0" } }, { "name": "indeterminate", "description": "When true, percentage is ignored and a loading spinner animation is shown.", "value": { "type": "boolean", "default": "false" } }, { "name": "label", "description": "The progress ring's label. If you need to display HTML, use the `label` slot instead.", "value": { "type": "string", "default": "''" } }, { "name": "dir", "value": { "type": "string" } }, { "name": "lang", "value": { "type": "string" } }, { "name": "did-ssr", "value": { "type": "string" } } ], "slots": [ { "name": "label", "description": "The progress ring's label. Alternatively, you can use the `label` attribute." } ], "events": [], "js": { "properties": [ { "name": "value", "description": "The current progress as a percentage, 0 to 100.", "type": "number" }, { "name": "indeterminate", "description": "When true, percentage is ignored and a loading spinner animation is shown.", "type": "boolean" }, { "name": "label", "description": "The progress ring's label. If you need to display HTML, use the `label` slot instead.", "type": "string" }, { "name": "initialReflectedProperties", "type": "Map" }, { "name": "internals", "type": "ElementInternals" }, { "name": "dir", "type": "string" }, { "name": "lang", "type": "string" }, { "name": "didSSR" } ], "events": [] } }, { "name": "ed-tree-item", "description": "A tree item serves as a hierarchical node that lives inside a [tree](/a/eurodata-ui/docs/components/tree).\n---\n\n\n### **Events:**\n - **ed-expand** - Emitted when the tree item expands.\n- **ed-after-expand** - Emitted after the tree item expands and all animations are complete.\n- **ed-collapse** - Emitted when the tree item collapses.\n- **ed-after-collapse** - Emitted after the tree item collapses and all animations are complete.\n- **ed-lazy-change** - Emitted when the tree item's lazy state changes.\n- **ed-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _EdTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot.\n- **start** - Content placed before the label, e.g. an icon.\n- **end** - Content placed after the label, e.g. an action button or badge.\n- **description** - Secondary text rendered below the label. Stays at default styling regardless of selection state (does not adopt the active or path-highlight color/weight).\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Properties:**\n - **--show-duration** - The animation duration when expanding tree items. _(default: 200ms)_\n- **--hide-duration** - The animation duration when collapsing tree items. _(default: 200ms)_\n- **--background** - The background color the tree item sits on. Hover and active states are mixed on top of this value, so override it when placing the tree on a non-default surface (e.g. a raised panel or card) to keep hover/active feedback coherent. _(default: var(--ed-color-surface-default))_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item** - The tree item's container. This element wraps everything except slotted tree item children.\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The container that wraps the tree item's expand button and spinner.\n- **spinner** - The spinner that shows when a lazy tree item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **start** - The container for the `start` slot, rendered before the label.\n- **text** - The vertical container that wraps the label and the description.\n- **label** - The tree item's label.\n- **description** - The container for the `description` slot, rendered below the label.\n- **end** - The container for the `end` slot, rendered after the label.\n- **children** - The container that wraps the tree item's nested children.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.", "doc-url": "", "attributes": [ { "name": "expanded", "description": "Expands the tree item.", "value": { "type": "boolean", "default": "false" } }, { "name": "selected", "description": "Draws the tree item in a selected state.", "value": { "type": "boolean", "default": "false" } }, { "name": "disabled", "description": "Disables the tree item.", "value": { "type": "boolean", "default": "false" } }, { "name": "lazy", "description": "Enables lazy loading behavior.", "value": { "type": "boolean", "default": "false" } }, { "name": "dir", "value": { "type": "string" } }, { "name": "lang", "value": { "type": "string" } }, { "name": "did-ssr", "value": { "type": "string" } } ], "slots": [ { "name": "", "description": "The default slot." }, { "name": "start", "description": "Content placed before the label, e.g. an icon." }, { "name": "end", "description": "Content placed after the label, e.g. an action button or badge." }, { "name": "description", "description": "Secondary text rendered below the label. Stays at default styling regardless of selection state (does not adopt the active or path-highlight color/weight)." }, { "name": "expand-icon", "description": "The icon to show when the tree item is expanded." }, { "name": "collapse-icon", "description": "The icon to show when the tree item is collapsed." } ], "events": [ { "name": "ed-expand", "description": "Emitted when the tree item expands." }, { "name": "ed-after-expand", "description": "Emitted after the tree item expands and all animations are complete." }, { "name": "ed-collapse", "description": "Emitted when the tree item collapses." }, { "name": "ed-after-collapse", "description": "Emitted after the tree item collapses and all animations are complete." }, { "name": "ed-lazy-change", "description": "Emitted when the tree item's lazy state changes." }, { "name": "ed-lazy-load", "description": "Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree." } ], "js": { "properties": [ { "name": "indeterminate", "type": "boolean" }, { "name": "isLeaf", "type": "boolean" }, { "name": "loading", "type": "boolean" }, { "name": "selectable", "type": "boolean" }, { "name": "expanded", "description": "Expands the tree item.", "type": "boolean" }, { "name": "selected", "description": "Draws the tree item in a selected state.", "type": "boolean" }, { "name": "disabled", "description": "Disables the tree item.", "type": "boolean" }, { "name": "lazy", "description": "Enables lazy loading behavior.", "type": "boolean" }, { "name": "defaultSlot", "type": "HTMLSlotElement" }, { "name": "childrenSlot", "type": "HTMLSlotElement" }, { "name": "itemElement", "type": "HTMLDivElement" }, { "name": "childrenContainer", "type": "HTMLDivElement" }, { "name": "expandButtonSlot", "type": "HTMLSlotElement" }, { "name": "initialReflectedProperties", "type": "Map" }, { "name": "internals", "type": "ElementInternals" }, { "name": "dir", "type": "string" }, { "name": "lang", "type": "string" }, { "name": "didSSR" } ], "events": [ { "name": "ed-expand", "description": "Emitted when the tree item expands." }, { "name": "ed-after-expand", "description": "Emitted after the tree item expands and all animations are complete." }, { "name": "ed-collapse", "description": "Emitted when the tree item collapses." }, { "name": "ed-after-collapse", "description": "Emitted after the tree item collapses and all animations are complete." }, { "name": "ed-lazy-change", "description": "Emitted when the tree item's lazy state changes." }, { "name": "ed-lazy-load", "description": "Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree." } ] } }, { "name": "ed-side-menu-item", "description": "A navigation item for use inside [ed-side-menu](/a/eurodata-ui/docs/components/side-menu). Extends ed-tree-item with link support.\n---\n\n\n### **Events:**\n - **ed-navigate** - Emitted when a navigable item (with `href`) is clicked. Can be `preventDefault()`'d for SPA routing.\n- **ed-expand** - Emitted when the item expands.\n- **ed-after-expand** - Emitted after the item expands and all animations are complete.\n- **ed-collapse** - Emitted when the item collapses.\n- **ed-after-collapse** - Emitted after the item collapses and all animations are complete.\n- **ed-lazy-change** - Emitted when the tree item's lazy state changes.\n- **ed-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _EdTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot for the item label.\n- **start** - Content placed before the label, e.g. an icon.\n- **end** - Content placed after the label, e.g. a badge.\n- **description** - Secondary text rendered below the label.\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Properties:**\n - **--show-duration** - The animation duration when expanding tree items. _(default: 200ms)_\n- **--hide-duration** - The animation duration when collapsing tree items. _(default: 200ms)_\n- **--background** - The background color the tree item sits on. Hover and active states are mixed on top of this value, so override it when placing the tree on a non-default surface (e.g. a raised panel or card) to keep hover/active feedback coherent. _(default: var(--ed-color-surface-default))_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item-wrapper** - The wrapper around indentation, chevron, and the clickable row.\n- **item** - The clickable row (renders as `` when `href` is set, `
` otherwise).\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The chevron container (sibling of the row — clicking it does not navigate).\n- **start** - Container for the start slot.\n- **text** - Wrapper for label and description.\n- **label** - The item's label.\n- **description** - Container for the description slot.\n- **end** - Container for the end slot.\n- **children** - Container for nested child items.\n- **spinner** - The spinner that shows when a lazy tree item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.", "doc-url": "", "attributes": [ { "name": "pinned", "description": "Marks the item as a permanently expanded parent. The chevron is not rendered, attempts to collapse are ignored,\nand `aria-expanded` is omitted (no disclosure semantics). Use for top-level navigation groups whose children\nshould always be visible. Implies `expanded = true` on connect.", "value": { "type": "boolean", "default": "false" } }, { "name": "href", "description": "The URL the item navigates to. When set, the item renders as an `` element with proper link semantics.", "value": { "type": "string" } }, { "name": "target", "description": "Where to open the linked URL (e.g. `_blank`, `_self`). Only used when `href` is set.", "value": { "type": "string" } }, { "name": "active", "description": "True when this item's href matches the parent side-menu's `current-href`. Set by the parent; do not write directly.", "value": { "type": "boolean", "default": "false" } }, { "name": "expanded", "description": "Expands the tree item.", "value": { "type": "boolean", "default": "false" } }, { "name": "selected", "description": "Draws the tree item in a selected state.", "value": { "type": "boolean", "default": "false" } }, { "name": "disabled", "description": "Disables the tree item.", "value": { "type": "boolean", "default": "false" } }, { "name": "lazy", "description": "Enables lazy loading behavior.", "value": { "type": "boolean", "default": "false" } }, { "name": "dir", "value": { "type": "string" } }, { "name": "lang", "value": { "type": "string" } }, { "name": "did-ssr", "value": { "type": "string" } } ], "slots": [ { "name": "", "description": "The default slot for the item label." }, { "name": "start", "description": "Content placed before the label, e.g. an icon." }, { "name": "end", "description": "Content placed after the label, e.g. a badge." }, { "name": "description", "description": "Secondary text rendered below the label." }, { "name": "expand-icon", "description": "The icon to show when the tree item is expanded." }, { "name": "collapse-icon", "description": "The icon to show when the tree item is collapsed." } ], "events": [ { "name": "ed-navigate", "description": "Emitted when a navigable item (with `href`) is clicked. Can be `preventDefault()`'d for SPA routing." }, { "name": "ed-expand", "description": "Emitted when the item expands." }, { "name": "ed-after-expand", "description": "Emitted after the item expands and all animations are complete." }, { "name": "ed-collapse", "description": "Emitted when the item collapses." }, { "name": "ed-after-collapse", "description": "Emitted after the item collapses and all animations are complete." }, { "name": "ed-lazy-change", "description": "Emitted when the tree item's lazy state changes." }, { "name": "ed-lazy-load", "description": "Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree." } ], "js": { "properties": [ { "name": "href", "description": "The URL the item navigates to. When set, the item renders as an `` element with proper link semantics.", "type": "string" }, { "name": "target", "description": "Where to open the linked URL (e.g. `_blank`, `_self`). Only used when `href` is set.", "type": "string" }, { "name": "active", "description": "True when this item's href matches the parent side-menu's `current-href`. Set by the parent; do not write directly.", "type": "boolean" }, { "name": "pinned", "description": "Marks the item as a permanently expanded parent. The chevron is not rendered, attempts to collapse are ignored,\nand `aria-expanded` is omitted (no disclosure semantics). Use for top-level navigation groups whose children\nshould always be visible. Implies `expanded = true` on connect.", "type": "boolean" }, { "name": "indeterminate", "type": "boolean" }, { "name": "isLeaf", "type": "boolean" }, { "name": "loading", "type": "boolean" }, { "name": "selectable", "type": "boolean" }, { "name": "expanded", "description": "Expands the tree item.", "type": "boolean" }, { "name": "selected", "description": "Draws the tree item in a selected state.", "type": "boolean" }, { "name": "disabled", "description": "Disables the tree item.", "type": "boolean" }, { "name": "lazy", "description": "Enables lazy loading behavior.", "type": "boolean" }, { "name": "defaultSlot", "type": "HTMLSlotElement" }, { "name": "childrenSlot", "type": "HTMLSlotElement" }, { "name": "itemElement", "type": "HTMLDivElement" }, { "name": "childrenContainer", "type": "HTMLDivElement" }, { "name": "expandButtonSlot", "type": "HTMLSlotElement" }, { "name": "initialReflectedProperties", "type": "Map" }, { "name": "internals", "type": "ElementInternals" }, { "name": "dir", "type": "string" }, { "name": "lang", "type": "string" }, { "name": "didSSR" } ], "events": [ { "name": "ed-navigate", "description": "Emitted when a navigable item (with `href`) is clicked. Can be `preventDefault()`'d for SPA routing." }, { "name": "ed-expand", "description": "Emitted when the item expands." }, { "name": "ed-after-expand", "description": "Emitted after the item expands and all animations are complete." }, { "name": "ed-collapse", "description": "Emitted when the item collapses." }, { "name": "ed-after-collapse", "description": "Emitted after the item collapses and all animations are complete." }, { "name": "ed-lazy-change", "description": "Emitted when the tree item's lazy state changes." }, { "name": "ed-lazy-load", "description": "Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree." } ] } }, { "name": "ed-table-cell", "description": "A table cell that functions as either a `columnheader` or `gridcell` depending on its context.\n---\n\n\n### **Events:**\n \n\n### **Slots:**\n - _default_ - The cell's content.\n\n### **CSS Parts:**\n - **base** - The cell's content wrapper.\n- **sort-indicator** - The sort direction icon (header cells only).\n- **resize-handle** - The resize grip (header cells only).", "doc-url": "", "attributes": [ { "name": "sortable", "description": "Allow sorting by this column (header cells only).", "value": { "type": "'single' | 'multi' | undefined" } }, { "name": "sort-key", "description": "Key emitted in sort events. Defaults to the cell's text content.", "value": { "type": "string", "default": "''" } }, { "name": "resizable", "description": "Show a resize handle on this cell (header cells only).", "value": { "type": "boolean", "default": "false" } }, { "name": "min-width", "description": "Minimum column width (e.g. `8rem`, `120px`). Applied as CSS min-width.", "value": { "type": "string", "default": "''" } }, { "name": "align", "description": "Text alignment for this cell. Applied as `text-align` on the host.", "value": { "type": "'start' | 'center' | 'end' | undefined" } }, { "name": "colspan", "description": "Column span for multi-column headers. Sets the cell to span multiple columns.", "value": { "type": "number", "default": "1" } }, { "name": "rowspan", "description": "Row span for multi-column headers. Sets the cell to span multiple rows.", "value": { "type": "number", "default": "1" } }, { "name": "dir", "value": { "type": "string" } }, { "name": "lang", "value": { "type": "string" } }, { "name": "did-ssr", "value": { "type": "string" } } ], "slots": [{ "name": "", "description": "The cell's content." }], "events": [], "js": { "properties": [ { "name": "sortable", "description": "Allow sorting by this column (header cells only).", "type": "'single' | 'multi' | undefined" }, { "name": "sortKey", "description": "Key emitted in sort events. Defaults to the cell's text content.", "type": "string" }, { "name": "resizable", "description": "Show a resize handle on this cell (header cells only).", "type": "boolean" }, { "name": "minWidth", "description": "Minimum column width (e.g. `8rem`, `120px`). Applied as CSS min-width.", "type": "string" }, { "name": "align", "description": "Text alignment for this cell. Applied as `text-align` on the host.", "type": "'start' | 'center' | 'end' | undefined" }, { "name": "colspan", "description": "Column span for multi-column headers. Sets the cell to span multiple columns.", "type": "number" }, { "name": "rowspan", "description": "Row span for multi-column headers. Sets the cell to span multiple rows.", "type": "number" }, { "name": "initialReflectedProperties", "type": "Map" }, { "name": "internals", "type": "ElementInternals" }, { "name": "dir", "type": "string" }, { "name": "lang", "type": "string" }, { "name": "didSSR" } ], "events": [] } }, { "name": "ed-table-row", "description": "A table row that contains table cells.\n---\n\n\n### **Slots:**\n - _default_ - The row's cells. Must be `` elements.\n\n### **CSS Properties:**\n - **** - the height of the row _(default: undefined)_", "doc-url": "", "attributes": [ { "name": "selected", "description": "Whether the row is selected.", "value": { "type": "boolean", "default": "false" } }, { "name": "multi-line", "description": "Allow cells in this row to wrap content across multiple lines instead of truncating.", "value": { "type": "boolean", "default": "false" } }, { "name": "dir", "value": { "type": "string" } }, { "name": "lang", "value": { "type": "string" } }, { "name": "did-ssr", "value": { "type": "string" } } ], "slots": [ { "name": "", "description": "The row's cells. Must be `` elements." } ], "events": [], "js": { "properties": [ { "name": "selected", "description": "Whether the row is selected.", "type": "boolean" }, { "name": "multiLine", "description": "Allow cells in this row to wrap content across multiple lines instead of truncating.", "type": "boolean" }, { "name": "initialReflectedProperties", "type": "Map" }, { "name": "internals", "type": "ElementInternals" }, { "name": "dir", "type": "string" }, { "name": "lang", "type": "string" }, { "name": "didSSR" } ], "events": [] } }, { "name": "ed-carousel-item", "description": "A carousel item represent a slide within a carousel.\n---\n\n\n### **Slots:**\n - _default_ - The carousel item's content.\n\n### **CSS Properties:**\n - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_", "doc-url": "", "attributes": [ { "name": "dir", "value": { "type": "string" } }, { "name": "lang", "value": { "type": "string" } }, { "name": "did-ssr", "value": { "type": "string" } } ], "slots": [ { "name": "", "description": "The carousel item's content." } ], "events": [], "js": { "properties": [ { "name": "initialReflectedProperties", "type": "Map" }, { "name": "internals", "type": "ElementInternals" }, { "name": "dir", "type": "string" }, { "name": "lang", "type": "string" }, { "name": "didSSR" } ], "events": [] } }, { "name": "ed-button", "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **blur** - Emitted when the button loses focus.\n- **focus** - Emitted when the button gains focus.\n- **ed-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **setCustomValidity(message: _string_)** - Do not use this when creating a \"Validator\". This is intended for end users of components.\nWe track manually defined custom errors so we don't clear them on accident in our validators.\n- **formStateRestoreCallback(state: _string | File | FormData | null_, reason: _'autocomplete' | 'restore'_)** - Called when the browser is trying to restore element’s state to state in which case reason is \"restore\", or when\nthe browser is trying to fulfill autofill on behalf of user in which case reason is \"autocomplete\". In the case of\n\"restore\", state is a string, File, or FormData object previously set as the second argument to setFormValue.\n- **resetValidity()** - Reset validity is a way of removing manual custom errors and native validation.\n\n### **Slots:**\n - _default_ - The button's label.\n- **start** - An element, such as ``, placed before the label.\n- **end** - An element, such as ``, placed after the label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **start** - The container that wraps the `start` slot.\n- **label** - The button's label.\n- **end** - The container that wraps the `end` slot.\n- **caret** - The button's caret icon, a `` element.\n- **spinner** - The spinner that shows when the button is in the loading state.", "doc-url": "", "attributes": [ { "name": "title", "value": { "type": "string", "default": "''" } }, { "name": "variant", "description": "The button's theme variant. Defaults to `brand` if not within another element with a variant.", "value": { "type": "'brand' | 'ai' | 'info' | 'neutral' | 'success' | 'warning' | 'danger' | 'new'", "default": "'brand'" } }, { "name": "navbar", "description": "Flags the buttons as a navbar button. This is for convenience to make a full-height, at least squared, header-colored button.", "value": { "type": "boolean", "default": "false" } }, { "name": "appearance", "description": "The button's visual appearance.", "value": { "type": "'accent' | 'filled-outlined' | 'filled' | 'outlined' | 'plain'", "default": "'accent'" } }, { "name": "density", "description": "Controls the component's spacing density without affecting font-size.", "value": { "type": "'compact' | 'default' | 'spacious'", "default": "'default'" } }, { "name": "with-caret", "description": "Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.", "value": { "type": "boolean", "default": "false" } }, { "name": "with-start", "description": "Only required for SSR. Set to `true` if you're slotting in a `start` element so the server-rendered markup\nincludes the start slot before the component hydrates on the client.", "value": { "type": "boolean", "default": "false" } }, { "name": "with-end", "description": "Only required for SSR. Set to `true` if you're slotting in an `end` element so the server-rendered markup\nincludes the end slot before the component hydrates on the client.", "value": { "type": "boolean", "default": "false" } }, { "name": "disabled", "description": "Disables the button. Does not apply to link buttons.", "value": { "type": "boolean", "default": "false" } }, { "name": "loading", "description": "Draws the button in a loading state.", "value": { "type": "boolean", "default": "false" } }, { "name": "pill", "description": "Draws a pill-style button with rounded edges.", "value": { "type": "boolean", "default": "false" } }, { "name": "type", "description": "The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n`