[ { "name": "Alert", "tagName": "noora-alert", "elementClassName": "NooraAlert", "className": "noora-alert", "modulePath": "./priv/static/noora-web-components.js", "description": "Communicates contextual information with a semantic status.", "usage": "", "attributes": [ { "name": "type", "property": "type", "type": "string", "values": [ "primary", "secondary" ], "default": "primary", "description": "Controls the visual emphasis." }, { "name": "status", "property": "status", "type": "string", "values": [ "information", "warning", "error", "success" ], "default": "information", "description": "Sets the semantic status." }, { "name": "size", "property": "size", "type": "string", "values": [ "small", "medium", "large" ], "default": "medium", "description": "Controls the alert dimensions and content layout." }, { "name": "dismissible", "property": "dismissible", "type": "boolean", "default": false, "description": "Shows a dismiss control." }, { "name": "show-icon", "property": "showIcon", "type": "boolean", "default": true, "description": "Shows the semantic status icon." }, { "name": "title", "property": "title", "type": "string", "default": "", "description": "Sets the alert title." }, { "name": "description", "property": "description", "type": "string", "description": "Sets the description shown by large alerts." } ], "readonlyProperties": [], "slots": [ { "name": "", "description": "Rich description content that takes precedence over the description attribute." }, { "name": "action", "description": "Actions displayed beside or below the title." } ], "cssParts": [ { "name": "alert", "description": "The alert container." }, { "name": "title", "description": "The title." }, { "name": "description", "description": "The description." }, { "name": "actions", "description": "The action container." } ], "events": [ { "name": "noora-dismiss", "type": "CustomEvent>", "description": "Emitted after the alert is dismissed." } ], "notes": [ "A dismiss action emits a `noora-dismiss` event and hides the element." ], "examples": [ { "id": "types", "title": "Types", "description": "Use primary alerts by default and secondary alerts for lower emphasis.", "markup": "\n" }, { "id": "sizes", "title": "Sizes", "description": "Choose a compact, standard, or descriptive layout.", "markup": "\n\n" }, { "id": "primary-statuses", "title": "Primary statuses", "description": "Primary alerts support error, information, success, and warning states.", "markup": "\n\n\n" }, { "id": "secondary-statuses", "title": "Secondary statuses", "description": "Secondary alerts provide the same semantic states with lower emphasis.", "markup": "\n\n\n" }, { "id": "dismissible", "title": "Dismissible", "description": "Dismiss controls are available in every alert size.", "markup": "\n\n" }, { "id": "actions", "title": "Actions", "description": "Place related actions in the action slot for compact or descriptive alerts.", "markup": "\n \n\n\n \n" }, { "id": "edge-cases", "title": "Edge cases", "description": "Long content and combined actions preserve the alert layout.", "markup": "\n\n\n \n \n" } ], "properties": [] }, { "name": "Avatar", "tagName": "noora-avatar", "elementClassName": "NooraAvatar", "className": "noora-avatar", "modulePath": "./priv/static/noora-web-components.js", "description": "Displays an image, initials, or a placeholder for an account.", "usage": "", "attributes": [ { "name": "name", "property": "name", "type": "string", "default": "", "description": "Provides the account name and accessible label." }, { "name": "color", "property": "color", "type": "string", "values": [ "gray", "red", "orange", "yellow", "green", "azure", "blue", "purple", "pink" ], "default": "pink", "description": "Controls the fallback color." }, { "name": "image-href", "property": "imageHref", "type": "string", "description": "Sets the image location." }, { "name": "image-decoding", "property": "imageDecoding", "type": "string", "values": [ "sync", "async", "auto" ], "default": "async", "description": "Controls image decoding." }, { "name": "image-loading", "property": "imageLoading", "type": "string", "values": [ "eager", "lazy" ], "description": "Controls image loading." }, { "name": "fallback", "property": "fallback", "type": "string", "values": [ "initials", "placeholder" ], "default": "initials", "description": "Chooses the fallback when the image is unavailable." }, { "name": "size", "property": "size", "type": "string", "values": [ "2xsmall", "small", "medium", "large", "xlarge", "2xlarge" ], "default": "medium", "description": "Controls the avatar dimensions." } ], "readonlyProperties": [], "slots": [], "cssParts": [ { "name": "avatar", "description": "The avatar container." }, { "name": "image", "description": "The image." }, { "name": "initials", "description": "The initials fallback." } ], "events": [ { "name": "noora-status-change", "type": "CustomEvent<{ status: \"loaded\" | \"error\" }>", "description": "Emitted when the avatar image loads or fails." } ], "notes": [ "Image loading changes emit a `noora-status-change` event." ], "examples": [ { "id": "basic", "title": "Basic", "description": "Display initials, a remote image, or a placeholder fallback.", "markup": "\n\n" }, { "id": "sizes", "title": "Sizes", "description": "Avatar sizes range from twice-extra-small to twice-extra-large.", "markup": "\n\n\n\n\n" }, { "id": "colors", "title": "Colors", "description": "Use any of the fallback colors available to LiveView avatars.", "markup": "\n\n\n\n\n\n\n" }, { "id": "edge-cases", "title": "Name formats", "description": "Initials handle single names, multiple names, separators, and accented characters.", "markup": "\n\n\n\n\n" } ], "properties": [] }, { "name": "Badge", "tagName": "noora-badge", "elementClassName": "NooraBadge", "className": "noora-badge", "modulePath": "./priv/static/noora-web-components.js", "description": "Labels an item with compact status or categorization information.", "usage": "Available", "attributes": [ { "name": "aria-label", "property": "_ariaLabel", "publicProperty": false, "type": "string", "description": "Provides an accessible name when visible text is unavailable." }, { "name": "appearance", "property": "appearance", "phoenixName": "style", "type": "string", "values": [ "fill", "light-fill" ], "default": "fill", "description": "Controls whether the badge uses a solid or light fill." }, { "name": "color", "property": "color", "type": "string", "values": [ "neutral", "destructive", "warning", "attention", "success", "information", "focus", "primary", "secondary" ], "default": "neutral", "description": "Controls the semantic color. Disabled badges ignore this value." }, { "name": "size", "property": "size", "type": "string", "values": [ "small", "large" ], "default": "small", "description": "Controls the badge dimensions and text size." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "reflect": true, "description": "Uses the disabled presentation regardless of color." }, { "name": "dot", "property": "dot", "type": "boolean", "default": false, "reflect": true, "description": "Displays a dot before the label when the icon slot is empty." }, { "name": "icon-only", "property": "iconOnly", "type": "boolean", "default": false, "reflect": true, "description": "Hides the label and displays only the icon slot." }, { "name": "label", "property": "label", "type": "string", "default": "", "description": "Provides fallback text when the default slot is empty." } ], "readonlyProperties": [], "slots": [ { "name": "", "description": "The visible label." }, { "name": "icon", "description": "An icon displayed before the label. It takes precedence over dot." } ], "cssParts": [ { "name": "badge", "description": "The badge container." }, { "name": "icon", "description": "The icon or dot container." }, { "name": "label", "description": "The visible label." } ], "stylingExample": "noora-badge::part(badge) {\n text-transform: uppercase;\n}", "notes": [ "The browser component uses appearance for the visual style because style is a native element property. The Phoenix component keeps its existing style attribute, and both map to the same contract value.", "A slotted icon takes precedence over the generated dot." ], "examples": [ { "id": "colors", "title": "Colors", "description": "Colors communicate semantic meaning while sharing the same compact shape.", "markup": "Neutral\nDestructive\nWarning\nAttention\nSuccess\nInformation\nFocus\nPrimary\nSecondary" }, { "id": "appearances-and-sizes", "title": "Appearances and sizes", "description": "Use a light fill for lower emphasis and choose between small and large sizing.", "markup": "Small fill\nSmall light fill\nLarge fill\nLarge light fill" }, { "id": "icons-and-states", "title": "Icons and states", "description": "Use a generated dot, provide an icon through its named slot, or apply the disabled presentation.", "markup": "Online\n\n\n \n \n \n \n \n Needs attention\n\n\nDisabled" } ], "properties": [], "events": [] }, { "name": "Banner", "tagName": "noora-banner", "elementClassName": "NooraBanner", "className": "noora-banner", "modulePath": "./priv/static/noora-web-components.js", "description": "Displays a page-level message with an optional dismiss action.", "usage": "", "attributes": [ { "name": "status", "property": "status", "type": "string", "values": [ "primary", "error", "success", "warning", "information" ], "default": "primary", "description": "Sets the semantic status." }, { "name": "title", "property": "title", "type": "string", "default": "", "description": "Sets the banner title." }, { "name": "description", "property": "description", "type": "string", "description": "Sets the optional description." }, { "name": "dismissible", "property": "dismissible", "type": "boolean", "default": false, "description": "Shows a dismiss control." } ], "readonlyProperties": [], "slots": [ { "name": "icon", "description": "A custom icon used by primary banners." } ], "cssParts": [ { "name": "banner", "description": "The banner container." }, { "name": "title", "description": "The title." }, { "name": "description", "description": "The description." } ], "events": [ { "name": "noora-dismiss", "type": "CustomEvent>", "description": "Emitted after the banner is dismissed." } ], "notes": [ "A dismiss action emits a `noora-dismiss` event and hides the element." ], "examples": [ { "id": "statuses", "title": "Statuses", "description": "Banners support primary, error, success, warning, and information states.", "markup": "\n\n\n\n" }, { "id": "custom-icon", "title": "Custom icon", "description": "Primary banners accept a custom icon through the icon slot.", "markup": "\n \n" }, { "id": "content-variations", "title": "Content variations", "description": "Descriptions are optional, banners can be dismissible, and long content wraps.", "markup": "\n\n" } ], "properties": [] }, { "name": "BreadcrumbItem", "tagName": "noora-breadcrumb-item", "elementClassName": "NooraBreadcrumbItem", "className": "noora-breadcrumb", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one declarative item inside breadcrumbs.", "usage": "Projects", "standalone": false, "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the label instead of using text content." }, { "name": "href", "property": "href", "type": "string", "description": "Sets the navigation address." }, { "name": "icon", "property": "icon", "type": "string", "description": "Shows an icon before the label." }, { "name": "avatar", "property": "avatar", "type": "boolean", "default": false, "description": "Shows an avatar before the label." }, { "name": "avatar-name", "property": "avatarName", "type": "string", "description": "Sets the avatar name." }, { "name": "avatar-color", "property": "avatarColor", "type": "string", "description": "Sets the avatar color." }, { "name": "avatar-image-href", "property": "avatarImageHref", "type": "string", "description": "Sets the avatar image address." }, { "name": "badge-label", "property": "badgeLabel", "type": "string", "description": "Shows a badge with this label." }, { "name": "badge-color", "property": "badgeColor", "type": "string", "description": "Sets the badge color." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "The label followed by optional noora-dropdown-item children." } ], "cssParts": [], "notes": [ "Nested noora-dropdown-item children create the optional breadcrumb menu." ], "examples": [ { "id": "item", "title": "Item", "description": "Describe one level in a breadcrumb path.", "markup": "Projects" } ], "events": [] }, { "name": "Breadcrumbs", "tagName": "noora-breadcrumbs", "elementClassName": "NooraBreadcrumbs", "className": "noora-breadcrumbs", "modulePath": "./priv/static/noora-web-components.js", "description": "Shows the current location in a navigational hierarchy.", "usage": "\n Projects\n Tuist\n", "previewLayout": "stack", "attributes": [ { "name": "style-variant", "property": "styleVariant", "type": "string", "values": [ "slash", "arrow" ], "default": "slash", "description": "Controls the separator style." } ], "properties": [ { "name": "items", "type": "json", "typescriptType": "Array>", "default": [], "description": "Defines breadcrumbs programmatically when declarative noora-breadcrumb-item children are not used." } ], "readonlyProperties": [], "slots": [ { "name": "", "description": "Declarative noora-breadcrumb-item children." } ], "cssParts": [ { "name": "breadcrumbs", "description": "The breadcrumb container." } ], "events": [ { "name": "noora-open-change", "type": "CustomEvent<{ index: number; open: boolean }>", "description": "Emitted when a breadcrumb menu opens or closes." }, { "name": "noora-select", "type": "CustomEvent<{ index: number; item: Record; value: unknown }>", "description": "Emitted when a breadcrumb menu item is selected." } ], "notes": [], "examples": [ { "id": "styles", "title": "Styles", "description": "Use slash or arrow separators between breadcrumb items.", "markup": "\n Home\n \n Electronics\n Phones\n \n iPhone 15\n\n\n Home\n \n Electronics\n Phones\n \n iPhone 15\n" }, { "id": "configurations", "title": "Configurations", "description": "Breadcrumb paths can combine icons, avatars, links, and plain labels.", "markup": "\n Tuist\n \n Features\n Authentication\n \n Login Screen\n\n\n Dashboard\n Settings\n Profile\n\n\n Home\n Documentation\n Guides\n Getting Started\n" }, { "id": "badges", "title": "Badges", "description": "Add compact technology or category badges next to labels.", "markup": "\n Tuist\n \n iOS App\n Android App\n \n Cache\n\n\n Organization\n \n Alpha\n Beta\n Gamma\n \n Settings\n" }, { "id": "dropdowns", "title": "Dropdowns", "description": "Attach selectable alternatives to any breadcrumb item.", "markup": "\n \n Team Alpha\n Team Beta\n Team Gamma\n Team Delta\n \n Project X\n\n\n Company\n \n Backend Team\n Frontend Team\n \n React Components\n" } ] }, { "name": "ButtonDropdown", "tagName": "noora-button-dropdown", "elementClassName": "NooraButtonDropdown", "className": "noora-button-dropdown", "modulePath": "./priv/static/noora-web-components.js", "description": "Combines a primary button action with an attached menu.", "usage": "\n Project\n", "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the main action label." }, { "name": "size", "property": "size", "type": "string", "values": [ "medium", "large" ], "default": "large", "description": "Controls the dimensions." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables both controls." }, { "name": "open", "property": "open", "type": "boolean", "default": false, "reflect": true, "description": "Controls whether the menu is open." }, { "name": "close-on-select", "property": "closeOnSelect", "type": "boolean", "default": true, "description": "Closes the menu after a selection." }, { "name": "keep-open", "property": "keepOpen", "type": "boolean", "default": false, "description": "Keeps the menu open after selection." }, { "name": "align", "property": "align", "type": "string", "values": [ "start", "end" ], "default": "start", "description": "Aligns the menu to the button." } ], "properties": [ { "name": "items", "type": "json", "typescriptType": "Array>", "default": [], "description": "Defines menu items programmatically when declarative noora-dropdown-item children are not used." } ], "readonlyProperties": [], "slots": [ { "name": "icon-left", "description": "An icon before the main label." }, { "name": "icon-right", "description": "An icon after the main label." }, { "name": "", "description": "Declarative noora-dropdown-item children." } ], "cssParts": [ { "name": "main-button", "description": "The main action." }, { "name": "trigger", "description": "The menu trigger." }, { "name": "content", "description": "The menu content." } ], "events": [ { "name": "noora-action", "type": "CustomEvent>", "description": "Emitted when the primary button is activated." }, { "name": "noora-open-change", "type": "CustomEvent<{ open: boolean }>", "description": "Emitted when the menu opens or closes." }, { "name": "noora-select", "type": "CustomEvent<{ item: Record; value: unknown }>", "description": "Emitted when a menu item is selected." } ], "notes": [ "Selections emit a `noora-select` event." ], "examples": [ { "id": "default", "title": "Default", "description": "Attach related options to a primary action.", "markup": "\n Option 1\n Option 2\n Option 3\n" }, { "id": "sizes", "title": "Sizes", "description": "Button dropdowns are available in medium and large sizes.", "markup": "\n Option 1\n Option 2\n\n\n Option 1\n Option 2\n" }, { "id": "icons", "title": "Icons", "description": "Place icons on either side of the main action label.", "markup": "\n \n \n Option 1\n Option 2\n" }, { "id": "disabled", "title": "Disabled", "description": "The disabled state prevents both action and menu interaction.", "markup": "\n Option 1\n Option 2\n" } ] }, { "name": "ButtonGroupItem", "tagName": "noora-button-group-item", "elementClassName": "NooraButtonGroupItem", "className": "noora-button-group-item", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one declarative control inside a button group.", "usage": "Day", "standalone": false, "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the item label instead of using text content." }, { "name": "value", "property": "value", "type": "string", "description": "Sets the value emitted when the item is selected." }, { "name": "href", "property": "href", "type": "string", "description": "Renders the item as a link." }, { "name": "icon", "property": "icon", "type": "string", "description": "Sets the icon for an icon-only item." }, { "name": "icon-left", "property": "iconLeft", "type": "string", "description": "Shows an icon before the label." }, { "name": "icon-right", "property": "iconRight", "type": "string", "description": "Shows an icon after the label." }, { "name": "icon-only", "property": "iconOnly", "type": "boolean", "default": false, "description": "Uses the icon as the complete item content." }, { "name": "aria-label", "property": "ariaLabel", "type": "string", "description": "Provides an accessible label for an icon-only item." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables the item." }, { "name": "selected", "property": "selected", "type": "boolean", "default": false, "description": "Shows the item in its selected state." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "The item label." } ], "cssParts": [], "notes": [ "Use this element inside noora-button-group." ], "examples": [ { "id": "item", "title": "Item", "description": "Describe one button-group control.", "markup": "Day" } ], "events": [] }, { "name": "ButtonGroup", "tagName": "noora-button-group", "elementClassName": "NooraButtonGroup", "className": "noora-button-group", "modulePath": "./priv/static/noora-web-components.js", "description": "Groups related controls into a compact segmented surface.", "usage": "\n Day\n Week\n", "attributes": [ { "name": "size", "property": "size", "type": "string", "values": [ "small", "medium", "large" ], "default": "medium", "description": "Controls child dimensions." } ], "properties": [ { "name": "items", "type": "json", "typescriptType": "Array>", "default": [], "description": "Defines group items programmatically when declarative noora-button-group-item children are not used." } ], "readonlyProperties": [], "slots": [ { "name": "", "description": "Declarative noora-button-group-item children." } ], "cssParts": [ { "name": "group", "description": "The group container." } ], "events": [ { "name": "noora-select", "type": "CustomEvent<{ index: number; item: Record; value: unknown }>", "description": "Emitted when an enabled group item is selected." } ], "notes": [ "Use noora-button-group-item children for declarative groups.", "The items property remains available for data-driven rendering." ], "examples": [ { "id": "sizes", "title": "Sizes", "description": "Button groups range from small to large.", "markup": "\n First\n Second\n Third\n\n\n First\n Second\n Third\n\n\n First\n Second\n Third\n" }, { "id": "icons", "title": "Icon configurations", "description": "Compare labeled controls with icons, icon-only controls, and a mixture of both.", "markup": "\n Previous\n Both\n Next\n\n\n\n \n \n\n\n\n \n Page 1\n Page 2\n \n" }, { "id": "states", "title": "States", "description": "Compare a partially disabled group with a fully disabled group.", "markup": "\n Available\n Disabled\n Available\n\n\n\n First\n Second\n Third\n" }, { "id": "practical", "title": "Practical examples", "description": "Use groups for pagination controls and view switching.", "markup": "\n \n 1\n 2\n 3\n \n\n\n\n List\n Grid\n Card\n" } ] }, { "name": "Button", "tagName": "noora-button", "elementClassName": "NooraButton", "className": "noora-button", "modulePath": "./priv/static/noora-web-components.js", "description": "Triggers an action, submits a form, or navigates to another location.", "usage": "Create project", "attributes": [ { "name": "aria-describedby", "property": "_ariaDescribedBy", "publicProperty": false, "type": "string", "description": "Identifies the element that describes the button." }, { "name": "aria-label", "property": "_ariaLabel", "publicProperty": false, "type": "string", "description": "Provides an accessible name when visible text is unavailable." }, { "name": "aria-labelledby", "property": "_ariaLabelledBy", "publicProperty": false, "type": "string", "description": "Identifies the element that labels the button." }, { "name": "title", "property": "_title", "publicProperty": false, "type": "string", "description": "Provides advisory information for the button." }, { "name": "autofocus", "property": "autofocus", "type": "boolean", "default": false, "description": "Focuses the button when the page loads." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "reflect": true, "description": "Prevents activation and form submission." }, { "name": "download", "property": "download", "type": "string", "description": "Downloads the linked resource, optionally using this value as the filename." }, { "name": "form", "property": "formId", "type": "string", "description": "Associates the button with a form by element identifier." }, { "name": "formaction", "property": "formAction", "type": "string", "description": "Overrides the associated form action for this submit button." }, { "name": "formenctype", "property": "formEnctype", "type": "string", "description": "Overrides the associated form encoding type for this submit button." }, { "name": "formmethod", "property": "formMethod", "type": "string", "description": "Overrides the associated form method for this submit button." }, { "name": "formnovalidate", "property": "formNoValidate", "type": "boolean", "default": false, "description": "Skips validation when this button submits its associated form." }, { "name": "formtarget", "property": "formTarget", "type": "string", "description": "Overrides where the associated form response is displayed." }, { "name": "href", "property": "href", "type": "string", "default": "", "description": "Renders the control as a link to this location." }, { "name": "icon-only", "property": "iconOnly", "type": "boolean", "default": false, "reflect": true, "description": "Uses the default slot as the entire button content. An accessible label is required." }, { "name": "label", "property": "label", "type": "string", "default": "", "description": "Provides fallback text when the default slot is empty." }, { "name": "name", "property": "name", "type": "string", "default": "", "description": "Sets the form field name submitted with the button value." }, { "name": "rel", "property": "rel", "type": "string", "description": "Sets the relationship between the current page and a linked resource." }, { "name": "size", "property": "size", "type": "string", "values": [ "small", "medium", "large" ], "default": "large", "description": "Controls the button dimensions and text size." }, { "name": "target", "property": "target", "type": "string", "description": "Controls where a linked resource is opened." }, { "name": "type", "property": "type", "type": "string", "values": [ "button", "reset", "submit" ], "default": "submit", "description": "Controls native button behavior when href is absent." }, { "name": "value", "property": "value", "type": "string", "default": "", "description": "Sets the form value submitted with the button name." }, { "name": "variant", "property": "variant", "type": "string", "values": [ "primary", "secondary", "destructive" ], "default": "primary", "description": "Controls the visual emphasis and semantic intent." } ], "readonlyProperties": [ { "name": "control", "type": "HTMLAnchorElement | HTMLButtonElement | null", "description": "The native link or button rendered inside the component." }, { "name": "form", "type": "HTMLFormElement | null", "description": "The form associated with the button, if one exists." } ], "slots": [ { "name": "", "description": "The visible label, or the complete content when icon-only is present." }, { "name": "icon-left", "description": "An icon displayed before the label." }, { "name": "icon-right", "description": "An icon displayed after the label." } ], "cssParts": [ { "name": "control", "description": "The native link or button control." } ], "stylingExample": "noora-button::part(control) {\n inline-size: 100%;\n}", "notes": [ "The component emits the standard browser click event.", "It renders a native link when href is present and the component is enabled. Otherwise, it renders a native button and supports form submission and reset." ], "examples": [ { "id": "variants", "title": "Variants", "description": "Choose a semantic variant through the variant attribute.", "markup": "Primary\nSecondary\nDestructive" }, { "id": "sizes", "title": "Sizes", "description": "Compare the large, medium, and small button sizes.", "markup": "Large\nMedium\nSmall" }, { "id": "disabled", "title": "Disabled", "description": "Compare the disabled state across every button variant.", "markup": "Disabled\nDisabled\nDisabled" }, { "id": "icons", "title": "Icons", "description": "Place a chevron on the left, right, or both sides of the label, or render an icon-only button.", "markup": "\n \n Icon\n\n\n\n Icon\n \n\n\n\n \n Icon\n \n\n\n\n \n" } ], "properties": [], "events": [] }, { "name": "Card", "tagName": "noora-card", "elementClassName": "NooraCard", "className": "noora-card", "modulePath": "./priv/static/noora-web-components.js", "description": "Groups related content into a titled surface.", "usage": "Content", "previewLayout": "stack", "attributes": [ { "name": "icon", "property": "icon", "type": "string", "description": "Sets a Noora icon in the header." }, { "name": "title", "property": "title", "type": "string", "default": "", "description": "Sets the card title." } ], "readonlyProperties": [], "slots": [ { "name": "", "description": "The card body." }, { "name": "icon", "description": "A custom icon that takes precedence over the icon attribute." }, { "name": "actions", "description": "Header actions." }, { "name": "section", "description": "Additional independently styled card sections." } ], "cssParts": [ { "name": "card", "description": "The card container." }, { "name": "header", "description": "The card header." }, { "name": "body", "description": "The card body section." } ], "notes": [], "examples": [ { "id": "basic", "title": "Basic", "description": "Basic card configurations with different content arrangements.", "markup": "\n

This is a simple card with basic content. It contains a title, icon, and some descriptive text.

\n\n\n\n \n

This card includes action buttons in the header area. Users can interact with these actions to perform related tasks.

\n\n\n\n \n \n

Cards can contain multiple action buttons for different operations.

\n" }, { "id": "content", "title": "Content variations", "description": "Cards with different content structures and multiple sections.", "markup": "\n

Source Files

Contains all the main application source code and modules.

\n

Test Files

Unit tests, integration tests, and test utilities.

\n

Documentation

API documentation, guides, and project notes.

\n\n\n\n \n
\n
Response Time: 245ms
\n
Throughput: 1,250 req/sec
\n
Error Rate: 0.12%
\n
\n
Last updated: 2 minutes ago
\n" }, { "id": "icons", "title": "Different icons", "description": "Cards showcasing different icon types and purposes.", "markup": "\n

Current database health and connection status information.

\n\n\n\n

User account information and profile settings.

\n\n\n\n \n

Recent notifications and system alerts.

\n" } ], "properties": [], "events": [] }, { "name": "ChartAxis", "tagName": "noora-chart-axis", "elementClassName": "NooraChartAxis", "className": "noora-chart-axis", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one declarative chart axis.", "usage": "Monday", "standalone": false, "attributes": [ { "name": "dimension", "property": "dimension", "type": "string", "values": [ "x", "y" ], "default": "x", "description": "Chooses the horizontal or vertical axis." }, { "name": "type", "property": "type", "type": "string", "values": [ "category", "value" ], "default": "value", "description": "Chooses a categorical or numeric axis." }, { "name": "min", "property": "min", "type": "number", "description": "Sets the minimum numeric value." }, { "name": "max", "property": "max", "type": "number", "description": "Sets the maximum numeric value." }, { "name": "label-format", "property": "labelFormat", "type": "string", "description": "Formats axis labels using an Apache ECharts value template." }, { "name": "label-size", "property": "labelSize", "type": "number", "description": "Sets the axis-label font size." }, { "name": "label-margin", "property": "labelMargin", "type": "number", "description": "Sets the distance between labels and the axis." }, { "name": "hidden", "property": "axisHidden", "type": "boolean", "default": false, "description": "Hides the complete axis." }, { "name": "hide-line", "property": "hideLine", "type": "boolean", "default": false, "description": "Hides the axis line." }, { "name": "hide-ticks", "property": "hideTicks", "type": "boolean", "default": false, "description": "Hides axis tick marks." }, { "name": "dashed-grid", "property": "dashedGrid", "type": "boolean", "default": false, "description": "Uses dashed split lines." }, { "name": "no-boundary-gap", "property": "noBoundaryGap", "type": "boolean", "default": false, "description": "Removes the category-axis boundary gap." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "Declarative noora-chart-category children." } ], "cssParts": [], "notes": [ "Use this element inside noora-chart." ], "examples": [ { "id": "axis", "title": "Axis", "description": "Describe a categorical horizontal axis.", "markup": "Monday" } ], "events": [] }, { "name": "ChartCategory", "tagName": "noora-chart-category", "elementClassName": "NooraChartCategory", "className": "noora-chart-category", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one declarative category on a chart axis.", "usage": "Monday", "standalone": false, "attributes": [ { "name": "value", "property": "value", "type": "string", "description": "Sets the category value instead of using text content." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "The category value." } ], "cssParts": [], "notes": [ "Use this element inside noora-chart-axis." ], "examples": [ { "id": "category", "title": "Category", "description": "Describe one axis category.", "markup": "Monday" } ], "events": [] }, { "name": "ChartGrid", "tagName": "noora-chart-grid", "elementClassName": "NooraChartGrid", "className": "noora-chart-grid", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes declarative chart-grid dimensions.", "usage": "", "standalone": false, "attributes": [ { "name": "contain-label", "property": "containLabel", "type": "boolean", "default": false, "description": "Includes axis labels within the grid dimensions." }, { "name": "height", "property": "height", "type": "number", "description": "Sets the grid height." }, { "name": "width", "property": "width", "type": "number", "description": "Sets the grid width." } ], "properties": [], "readonlyProperties": [], "slots": [], "cssParts": [], "notes": [ "Use this element inside noora-chart." ], "examples": [ { "id": "grid", "title": "Grid", "description": "Keep labels within a fixed drawing grid.", "markup": "" } ], "events": [] }, { "name": "ChartPoint", "tagName": "noora-chart-point", "elementClassName": "NooraChartPoint", "className": "noora-chart-point", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one declarative chart data point.", "usage": "", "standalone": false, "attributes": [ { "name": "value", "property": "value", "type": "number", "description": "Sets the numeric data value." }, { "name": "color", "property": "color", "type": "string", "description": "Overrides the point color, including with a Noora semantic chart color." }, { "name": "url", "property": "url", "type": "string", "description": "Navigates to this address when the point is selected." } ], "properties": [], "readonlyProperties": [], "slots": [], "cssParts": [], "notes": [ "Use this element inside noora-chart-series." ], "examples": [ { "id": "point", "title": "Point", "description": "Describe one semantically colored value.", "markup": "" } ], "events": [] }, { "name": "ChartSeries", "tagName": "noora-chart-series", "elementClassName": "NooraChartSeries", "className": "noora-chart-series", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one declarative chart data series.", "usage": "", "standalone": false, "attributes": [ { "name": "name", "property": "name", "type": "string", "description": "Sets the series name." }, { "name": "type", "property": "type", "type": "string", "values": [ "bar", "line" ], "default": "line", "description": "Chooses the series visualization." }, { "name": "symbol", "property": "symbol", "type": "string", "description": "Sets the symbol used for line-series points." }, { "name": "bar-width", "property": "barWidth", "type": "number", "description": "Sets the width of bars." }, { "name": "bar-gap", "property": "barGap", "type": "string", "description": "Sets the gap between bar series." }, { "name": "border-radius", "property": "borderRadius", "type": "number", "description": "Rounds bar corners." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "Declarative noora-chart-point children." } ], "cssParts": [], "notes": [ "Use this element inside noora-chart." ], "examples": [ { "id": "series", "title": "Series", "description": "Describe one line series.", "markup": "" } ], "events": [] }, { "name": "Chart", "tagName": "noora-chart", "elementClassName": "NooraChart", "className": "noora-chart", "modulePath": "./priv/static/noora-web-components.js", "description": "Renders an Apache ECharts visualization from declarative configuration elements.", "usage": "MonTue", "previewLayout": "stack", "attributes": [ { "name": "renderer", "property": "renderer", "type": "string", "values": [ "canvas", "svg" ], "default": "canvas", "description": "Chooses the chart renderer." }, { "name": "tooltip-trigger", "property": "tooltipTrigger", "type": "string", "values": [ "axis", "item" ], "default": "axis", "description": "Shows a tooltip for an axis or an individual item." }, { "name": "hide-tooltip", "property": "hideTooltip", "type": "boolean", "default": false, "description": "Hides the chart tooltip." }, { "name": "hide-legend", "property": "hideLegend", "type": "boolean", "default": false, "description": "Hides the chart legend." }, { "name": "aria-label", "property": "_ariaLabel", "publicProperty": false, "type": "string", "description": "Provides an accessible chart label." } ], "properties": [ { "name": "options", "type": "json", "typescriptType": "Record", "default": {}, "description": "Sets an Apache ECharts configuration object when programmatic configuration is needed." } ], "readonlyProperties": [ { "name": "chart", "type": "unknown | null", "description": "The underlying Apache ECharts instance." } ], "slots": [ { "name": "", "description": "Declarative grid, axis, and series configuration elements." } ], "cssParts": [ { "name": "container", "description": "The chart wrapper." }, { "name": "chart", "description": "The chart drawing surface." } ], "events": [ { "name": "noora-chart-select", "type": "CustomEvent<{ item: unknown; parameters: unknown }>", "description": "Emitted when an interactive chart item is selected. Prevent the default action to stop navigation for items with a link target." } ], "notes": [ "Set an explicit block size on the element or its chart part.", "Use declarative configuration elements for markup-authored charts.", "Declarative charts use the same grid, axis, tooltip, legend, color, and typography defaults as the Phoenix LiveView chart component.", "The options property remains available for charts assembled or updated by JavaScript.", "Declarative configuration elements take precedence when both forms are provided." ], "examples": [ { "id": "multi-series-line", "title": "Multi-series line", "description": "Compare multiple effectiveness series over time.", "markup": "\n \n Aug\n Sep\n Oct\n Nov\n Dec\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n" }, { "id": "horizontal-bars", "title": "Horizontal bar comparison", "description": "Compare build optimization durations on a horizontal scale.", "markup": "\n \n \n \n Selective Test\n Build Cache\n \n \n \n \n \n \n \n \n \n" }, { "id": "test-duration", "title": "Test run duration", "description": "Use semantic colors to distinguish successful and failed runs.", "markup": "\n \n \n \n \n \n \n \n \n \n" } ] }, { "name": "Checkbox", "tagName": "noora-checkbox", "elementClassName": "NooraCheckbox", "className": "noora-checkbox", "modulePath": "./priv/static/noora-web-components.js", "description": "Lets a user select one or more independent options.", "usage": "", "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the visible label." }, { "name": "description", "property": "description", "type": "string", "description": "Sets supporting text." }, { "name": "checked", "property": "checked", "type": "boolean", "default": false, "reflect": true, "description": "Controls the checked state." }, { "name": "indeterminate", "property": "indeterminate", "type": "boolean", "default": false, "reflect": true, "description": "Controls the mixed state." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "reflect": true, "description": "Disables interaction." }, { "name": "name", "property": "name", "type": "string", "default": "", "description": "Sets the submitted field name." }, { "name": "value", "property": "value", "type": "string", "default": "on", "description": "Sets the submitted field value." }, { "name": "required", "property": "required", "type": "boolean", "default": false, "description": "Marks the field as required." } ], "readonlyProperties": [ { "name": "control", "type": "HTMLInputElement | null", "description": "The native checkbox input." }, { "name": "form", "type": "HTMLFormElement | null", "description": "The associated form." } ], "slots": [], "cssParts": [ { "name": "root", "description": "The checkbox label." }, { "name": "control", "description": "The visual checkbox control." }, { "name": "label", "description": "The label text." } ], "events": [ { "name": "input", "type": "InputEvent", "description": "Emitted while the checked state changes." }, { "name": "change", "type": "Event", "description": "Emitted after the checked state changes." } ], "notes": [ "The component emits standard input and change events." ], "examples": [ { "id": "basic-states", "title": "Basic states", "description": "Checkboxes support unchecked, checked, and indeterminate states.", "markup": "\n\n" }, { "id": "disabled-states", "title": "Disabled states", "description": "Every selection state has a disabled presentation.", "markup": "\n\n" }, { "id": "descriptions", "title": "Descriptions", "description": "Add supporting context below the label.", "markup": "\n" }, { "id": "practical", "title": "Practical examples", "description": "Use checkboxes for agreements, subscriptions, and optional settings.", "markup": "\n\n" } ], "properties": [] }, { "name": "DatePickerPreset", "tagName": "noora-date-picker-preset", "elementClassName": "NooraDatePickerPreset", "className": "noora-date-picker-preset", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one declarative date-range preset.", "usage": "Last 7 days", "standalone": false, "attributes": [ { "name": "value", "property": "value", "type": "string", "default": "", "description": "Sets the preset identifier." }, { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the preset label instead of using text content." }, { "name": "start", "property": "start", "type": "string", "default": "", "description": "Sets the start date in year-month-day format." }, { "name": "end", "property": "end", "type": "string", "default": "", "description": "Sets the end date in year-month-day format." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "The preset label." } ], "cssParts": [], "notes": [], "examples": [ { "id": "preset", "title": "Preset", "description": "Describe a quick date range.", "markup": "Last 7 days" } ], "events": [] }, { "name": "DatePicker", "tagName": "noora-date-picker", "elementClassName": "NooraDatePicker", "className": "noora-date-picker", "modulePath": "./priv/static/noora-web-components.js", "description": "Selects a date range with a two-month calendar, optional presets, and editable range fields.", "usage": "", "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "Select date range", "description": "Sets the trigger label when no range is selected." }, { "name": "name", "property": "name", "type": "string", "description": "Sets the submitted field-name prefix for `[start]` and `[end]` values." }, { "name": "start", "property": "start", "type": "string", "description": "Sets the start date in year-month-day format." }, { "name": "end", "property": "end", "type": "string", "description": "Sets the end date in year-month-day format." }, { "name": "min", "property": "min", "type": "string", "description": "Sets the earliest selectable date." }, { "name": "max", "property": "max", "type": "string", "description": "Sets the latest selectable date." }, { "name": "selected-preset", "property": "selectedPreset", "type": "string", "description": "Identifies the selected preset." }, { "name": "start-of-week", "property": "startOfWeek", "type": "number", "default": 0, "description": "Sets the first weekday, where zero is Sunday and one is Monday." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables interaction." }, { "name": "open", "property": "open", "type": "boolean", "default": false, "reflect": true, "description": "Controls whether the picker is open." } ], "properties": [ { "name": "presets", "type": "json", "typescriptType": "Array>", "default": [], "description": "Defines presets programmatically when declarative noora-date-picker-preset children are not used." } ], "readonlyProperties": [], "slots": [ { "name": "", "description": "Declarative noora-date-picker-preset children." }, { "name": "actions", "description": "Additional footer actions." } ], "cssParts": [ { "name": "trigger", "description": "The range trigger." }, { "name": "content", "description": "The picker content." }, { "name": "calendar", "description": "The calendar and range controls." }, { "name": "month", "description": "One calendar month." } ], "events": [ { "name": "noora-open-change", "type": "CustomEvent<{ open: boolean }>", "description": "Emitted when the date picker opens or closes." }, { "name": "noora-period-change", "type": "CustomEvent<{ start: string; end: string; preset: string | undefined }>", "description": "Emitted when a date range is applied." }, { "name": "noora-cancel", "type": "CustomEvent>", "description": "Emitted when date selection is cancelled." } ], "notes": [ "A picker named `range` submits its dates as `range[start]` and `range[end]`.", "Range changes emit a `noora-period-change` event after Apply is selected.", "Cancel emits a `noora-cancel` event.", "Slotted action buttons can use data-action=\"cancel\" or data-action=\"apply\"." ], "examples": [ { "id": "default", "title": "Default date picker", "description": "Open the picker with common presets and footer actions.", "markup": "\n Last 1 hour\n Last 24 hours\n Last 7 days\n Last 30 days\n Custom\n Cancel\n Apply\n" } ] }, { "name": "DigitInput", "tagName": "noora-digit-input", "elementClassName": "NooraDigitInput", "className": "noora-digit-input", "modulePath": "./priv/static/noora-web-components.js", "description": "Collects a fixed-length verification or personal identification code.", "usage": "", "attributes": [ { "name": "type", "property": "type", "type": "string", "values": [ "alphanumeric", "numeric", "alphabetic" ], "default": "numeric", "description": "Limits accepted characters." }, { "name": "characters", "property": "characters", "type": "number", "default": 6, "description": "Sets the number of fields." }, { "name": "placeholder", "property": "placeholder", "type": "string", "default": "", "description": "Sets each field placeholder." }, { "name": "one-time-code", "property": "oneTimeCode", "type": "boolean", "default": false, "description": "Enables one-time-code autofill." }, { "name": "error", "property": "error", "type": "boolean", "default": false, "description": "Shows the error state." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables all fields." }, { "name": "value", "property": "value", "type": "string", "default": "", "description": "Gets or sets the combined value." }, { "name": "name", "property": "name", "type": "string", "default": "", "description": "Sets the hidden submitted field name." } ], "readonlyProperties": [], "slots": [], "cssParts": [ { "name": "root", "description": "The field group." }, { "name": "input", "description": "Each character input." } ], "events": [ { "name": "input", "type": "InputEvent", "description": "Emitted while the entered code changes." }, { "name": "change", "type": "Event", "description": "Emitted when every field contains a valid character." }, { "name": "noora-input", "type": "CustomEvent<{ value: string }>", "description": "Emitted with the current code after a valid input." }, { "name": "noora-complete", "type": "CustomEvent<{ value: string }>", "description": "Emitted when every field contains a valid character." }, { "name": "noora-invalid", "type": "CustomEvent<{ value: string }>", "description": "Emitted when an entered or pasted value is rejected." } ], "notes": [ "The component emits `noora-complete` when every field contains a character." ], "examples": [ { "id": "types", "title": "Input types", "description": "Choose numeric, alphanumeric, or alphabetic validation.", "markup": "\n\n" }, { "id": "character-counts", "title": "Character counts", "description": "Collect short, medium, and long codes.", "markup": "\n\n" }, { "id": "one-time-codes", "title": "One-time codes", "description": "Enable browser-assisted one-time-code entry.", "markup": "\n" }, { "id": "states", "title": "States", "description": "Compare default, disabled, and error states.", "markup": "\n\n" }, { "id": "placeholders", "title": "Placeholders", "description": "Use dots, dashes, or empty fields.", "markup": "\n\n" } ], "properties": [] }, { "name": "DismissIcon", "tagName": "noora-dismiss-icon", "elementClassName": "NooraDismissIcon", "className": "noora-dismiss-icon", "modulePath": "./priv/static/noora-web-components.js", "description": "Provides a compact, accessible dismiss button.", "usage": "", "attributes": [ { "name": "size", "property": "size", "type": "string", "values": [ "small", "large" ], "default": "large", "description": "Controls the icon dimensions." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables the button." }, { "name": "label", "property": "label", "type": "string", "default": "Dismiss", "description": "Sets the accessible label." } ], "readonlyProperties": [], "slots": [], "cssParts": [ { "name": "button", "description": "The native button." } ], "events": [ { "name": "noora-dismiss", "type": "CustomEvent>", "description": "Emitted when the dismiss control is activated." } ], "notes": [ "Activation emits a `noora-dismiss` event." ], "examples": [ { "id": "sizes", "title": "Sizes", "description": "Use the size that matches the surrounding surface.", "markup": "\n" }, { "id": "states", "title": "States", "description": "Compare enabled and disabled controls.", "markup": "\n" }, { "id": "events", "title": "Dismiss events", "description": "Listen for the noora-dismiss event when the control is activated.", "markup": "\n" } ], "properties": [] }, { "name": "DropdownItem", "tagName": "noora-dropdown-item", "elementClassName": "NooraDropdownItem", "className": "noora-dropdown-item", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one declarative item inside a dropdown or breadcrumb menu.", "usage": "Edit", "standalone": false, "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the item label instead of using its text content." }, { "name": "value", "property": "value", "type": "string", "description": "Sets the value emitted when the item is selected." }, { "name": "icon", "property": "icon", "type": "string", "description": "Shows an icon before the label." }, { "name": "right-icon", "property": "rightIcon", "type": "string", "description": "Shows an icon after the label." }, { "name": "size", "property": "size", "type": "string", "values": [ "small", "large" ], "default": "small", "description": "Controls the item dimensions." }, { "name": "href", "property": "href", "type": "string", "description": "Renders the item as a link." }, { "name": "secondary-text", "property": "secondaryText", "type": "string", "description": "Adds compact secondary text beside the label." }, { "name": "description", "property": "description", "type": "string", "description": "Adds supporting text below the label." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables selection." }, { "name": "checkable", "property": "checkable", "type": "boolean", "default": false, "description": "Shows a checkbox indicator." }, { "name": "checked", "property": "checked", "type": "boolean", "default": false, "description": "Marks a checkable item as selected." }, { "name": "selected", "property": "selected", "type": "boolean", "default": false, "description": "Marks a breadcrumb menu item as selected." }, { "name": "avatar", "property": "avatar", "type": "boolean", "default": false, "description": "Shows an avatar before the label." }, { "name": "avatar-name", "property": "avatarName", "type": "string", "description": "Sets the avatar name." }, { "name": "avatar-color", "property": "avatarColor", "type": "string", "description": "Sets the avatar color." }, { "name": "avatar-image-href", "property": "avatarImageHref", "type": "string", "description": "Sets the avatar image address." }, { "name": "badge-label", "property": "badgeLabel", "type": "string", "description": "Shows a badge with this label." }, { "name": "badge-color", "property": "badgeColor", "type": "string", "description": "Sets the badge color." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "The item label." } ], "cssParts": [], "notes": [ "Use this element inside noora-dropdown, noora-inline-dropdown, noora-button-dropdown, or noora-breadcrumb-item." ], "examples": [ { "id": "item", "title": "Item", "description": "Describe a selectable menu item.", "markup": "Edit" } ], "events": [] }, { "name": "Dropdown", "tagName": "noora-dropdown", "elementClassName": "NooraDropdown", "className": "noora-dropdown", "modulePath": "./priv/static/noora-web-components.js", "description": "Opens a menu of actions or navigational items.", "usage": "\n Item 1\n", "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the trigger label." }, { "name": "size", "property": "size", "type": "string", "values": [ "medium", "large" ], "default": "large", "description": "Controls the trigger dimensions." }, { "name": "secondary-text", "property": "secondaryText", "type": "string", "description": "Adds text before the main label." }, { "name": "icon-only", "property": "iconOnly", "type": "boolean", "default": false, "description": "Uses the icon slot as the complete trigger." }, { "name": "hint", "property": "hint", "type": "string", "description": "Adds supporting text." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables the trigger." }, { "name": "open", "property": "open", "type": "boolean", "default": false, "reflect": true, "description": "Controls whether the menu is open." }, { "name": "close-on-select", "property": "closeOnSelect", "type": "boolean", "default": true, "description": "Closes the menu after selection." }, { "name": "keep-open", "property": "keepOpen", "type": "boolean", "default": false, "description": "Keeps the menu open after selection." } ], "properties": [ { "name": "items", "type": "json", "typescriptType": "Array>", "default": [], "description": "Defines menu items programmatically when declarative noora-dropdown-item children are not used." } ], "readonlyProperties": [], "slots": [ { "name": "icon", "description": "The trigger icon." }, { "name": "search", "description": "Search content above the item list." }, { "name": "", "description": "Declarative noora-dropdown-item children." } ], "cssParts": [ { "name": "trigger", "description": "The menu trigger." }, { "name": "content", "description": "The menu content." }, { "name": "items", "description": "The item list." } ], "events": [ { "name": "noora-open-change", "type": "CustomEvent<{ open: boolean }>", "description": "Emitted when the dropdown opens or closes." }, { "name": "noora-select", "type": "CustomEvent<{ item: Record; value: unknown }>", "description": "Emitted when an enabled item is selected." } ], "notes": [ "Selections emit a `noora-select` event with the selected item." ], "examples": [ { "id": "default", "title": "Default", "description": "Provide structured action items.", "markup": "\n Item 1\n Item 2\n Item 3\n Item 4\n Item 5\n" }, { "id": "disabled", "title": "Disabled", "description": "Disable the complete menu when its actions are unavailable.", "markup": "" }, { "id": "large-items", "title": "Large items", "description": "Use larger rows for prominent action menus.", "markup": "\n Item 1\n Item 2\n Item 3\n Item 4\n Item 5\n" }, { "id": "icons", "title": "Trigger icon", "description": "Add an icon to the dropdown trigger.", "markup": "\n \n Item 1\n" }, { "id": "secondary-text", "title": "Secondary text", "description": "Add concise context beside an item label.", "markup": "\n Item 1\n" }, { "id": "icon-and-secondary-text", "title": "Icons and secondary text", "description": "Combine visual cues with supporting text.", "markup": "\n \n Item 1\n" }, { "id": "hint", "title": "Hint", "description": "Explain the purpose of the menu below its trigger.", "markup": "\n Item 1\n" }, { "id": "many-options", "title": "Many options", "description": "Allow the menu content to scroll when it contains many choices.", "markup": "\n Option 1\n Option 2\n Option 3\n Option 4\n Option 5\n Option 6\n Option 7\n Option 8\n Option 9\n Option 10\n Option 11\n Option 12\n Option 13\n Option 14\n Option 15\n Option 16\n Option 17\n Option 18\n Option 19\n Option 20\n" }, { "id": "checkboxes", "title": "Checkbox items", "description": "Communicate selected items with checkbox indicators.", "markup": "\n Monday\n Tuesday\n Wednesday\n Thursday\n Friday\n Saturday\n Sunday\n" } ] }, { "name": "FilterDefinition", "tagName": "noora-filter-definition", "elementClassName": "NooraFilterDefinition", "className": "noora-filter-definition", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one filter that a user can add.", "usage": "Active", "standalone": false, "attributes": [ { "name": "name", "property": "name", "type": "string", "default": "", "description": "Sets the filter identifier." }, { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the filter label." }, { "name": "type", "property": "type", "type": "string", "values": [ "option", "text", "number", "percentage", "list" ], "default": "option", "description": "Sets the filter value type and available operators." }, { "name": "operator", "property": "operator", "type": "string", "values": [ "==", "!=", "=~", "!=~", "<", ">", "<=", ">=" ], "description": "Sets the initial comparison operator." }, { "name": "default-value", "property": "defaultValue", "type": "string", "description": "Sets the value used when the filter is added." }, { "name": "searchable", "property": "searchable", "type": "boolean", "default": false, "description": "Adds search to option-value menus." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "The allowed noora-filter-option children." } ], "cssParts": [], "notes": [], "examples": [ { "id": "definition", "title": "Definition", "description": "Describe an available filter and its values.", "markup": "Active" } ], "events": [] }, { "name": "FilterOption", "tagName": "noora-filter-option", "elementClassName": "NooraFilterOption", "className": "noora-filter-option", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one allowed value for a filter definition.", "usage": "Active", "standalone": false, "attributes": [ { "name": "value", "property": "value", "type": "string", "default": "", "description": "Sets the option value." }, { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the option label instead of using text content." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "The option label." } ], "cssParts": [], "notes": [], "examples": [ { "id": "option", "title": "Option", "description": "Describe an allowed filter value.", "markup": "Active" } ], "events": [] }, { "name": "FilterValue", "tagName": "noora-filter-value", "elementClassName": "NooraFilterValue", "className": "noora-filter-value", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one initially active filter.", "usage": "", "standalone": false, "attributes": [ { "name": "name", "property": "name", "type": "string", "default": "", "description": "Sets the filter identifier." }, { "name": "label", "property": "label", "type": "string", "description": "Sets the filter label." }, { "name": "type", "property": "type", "type": "string", "values": [ "option", "text", "number", "percentage", "list" ], "description": "Overrides the matching definition's value type." }, { "name": "operator", "property": "operator", "type": "string", "values": [ "==", "!=", "=~", "!=~", "<", ">", "<=", ">=" ], "description": "Sets the active comparison operator." }, { "name": "value", "property": "value", "type": "string", "default": "", "description": "Sets the active value." }, { "name": "display-value", "property": "displayValue", "type": "string", "description": "Sets a human-readable value." } ], "properties": [], "readonlyProperties": [], "slots": [], "cssParts": [], "notes": [], "examples": [ { "id": "value", "title": "Value", "description": "Describe an initially active filter.", "markup": "" } ], "events": [] }, { "name": "Filter", "tagName": "noora-filter", "elementClassName": "NooraFilter", "className": "noora-filter", "modulePath": "./priv/static/noora-web-components.js", "description": "Builds and displays a set of structured filters.", "usage": "\n \n Active\n Paused\n \n \n", "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "Filter", "description": "Sets the add-filter label." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables editing." } ], "properties": [ { "name": "availableFilters", "type": "json", "typescriptType": "Array>", "default": [], "description": "Defines available filters programmatically when declarative definitions are not used." }, { "name": "filters", "type": "json", "typescriptType": "Array>", "default": [], "description": "Gets or sets active filters programmatically." } ], "readonlyProperties": [], "slots": [ { "name": "", "description": "Declarative noora-filter-definition and noora-filter-value children." } ], "cssParts": [ { "name": "filter", "description": "The filter container." }, { "name": "active-filters", "description": "The active-filter list." }, { "name": "add", "description": "The add-filter control." }, { "name": "active-filter", "description": "An active filter control." } ], "events": [ { "name": "noora-filter-change", "type": "CustomEvent<{ filters: Array> }>", "description": "Emitted when a filter is added, changed, or removed." } ], "notes": [ "Changes emit a `noora-filter-change` event." ], "examples": [ { "id": "status", "title": "Status filter", "description": "Offer a predefined status filter.", "markup": "\n \n Active\n Paused\n \n \n \n \n" } ] }, { "name": "HintText", "tagName": "noora-hint-text", "elementClassName": "NooraHintText", "className": "noora-hint-text", "modulePath": "./priv/static/noora-web-components.js", "description": "Provides supporting or validation text for a form field.", "usage": "", "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the hint text." }, { "name": "variant", "property": "variant", "type": "string", "values": [ "default", "destructive", "disabled" ], "default": "default", "description": "Controls the semantic presentation." } ], "readonlyProperties": [], "slots": [], "cssParts": [ { "name": "hint", "description": "The hint container." } ], "notes": [], "examples": [ { "id": "variants", "title": "Variants", "description": "Communicate default, destructive, and disabled supporting text.", "markup": "\n\n" }, { "id": "content", "title": "Content examples", "description": "Support validation, guidance, limits, and availability messages.", "markup": "\n\n\n" } ], "properties": [], "events": [] }, { "name": "Icon", "tagName": "noora-icon", "elementClassName": "NooraIcon", "className": "noora-icon", "modulePath": "./priv/static/noora-web-components.js", "description": "Renders an icon from Noora's shared icon catalog.", "usage": "", "attributes": [ { "name": "name", "property": "name", "type": "string", "default": "", "description": "Selects the icon by its underscore or hyphen-separated name." }, { "name": "label", "property": "label", "type": "string", "description": "Provides an accessible label. Omit for decorative icons." }, { "name": "size", "property": "size", "type": "number", "default": 24, "description": "Sets the width and height in pixels." }, { "name": "active-name", "property": "activeName", "type": "string", "description": "Selects the icon shown while the parent element has an open data state." }, { "name": "transition", "property": "transition", "type": "string", "values": [ "morph", "crossfade_rotate", "auto" ], "default": "auto", "description": "Controls the animated transition between the default and active icons." } ], "readonlyProperties": [], "slots": [], "cssParts": [ { "name": "icon", "description": "The rendered scalable vector graphic." } ], "notes": [ "Unknown icon names render no graphic.", "When active-name is set, the icon observes its parent element's data-state attribute and switches when that state is open." ], "examples": [ { "id": "transitions", "title": "Animated transitions", "description": "Click each button to toggle its state and transition between paired icons.", "markup": "\n\n\n" } ], "properties": [], "events": [] }, { "name": "InlineDropdown", "tagName": "noora-inline-dropdown", "elementClassName": "NooraInlineDropdown", "className": "noora-inline-dropdown", "modulePath": "./priv/static/noora-web-components.js", "description": "Opens a compact inline menu.", "usage": "\n Newest\n", "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the trigger label." }, { "name": "size", "property": "size", "type": "string", "values": [ "small", "large" ], "default": "small", "description": "Controls the trigger dimensions." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables the trigger." }, { "name": "open", "property": "open", "type": "boolean", "default": false, "reflect": true, "description": "Controls whether the menu is open." }, { "name": "keep-open", "property": "keepOpen", "type": "boolean", "default": false, "description": "Keeps the menu open after selection." } ], "properties": [ { "name": "items", "type": "json", "typescriptType": "Array>", "default": [], "description": "Defines menu items programmatically when declarative noora-dropdown-item children are not used." } ], "readonlyProperties": [], "slots": [ { "name": "icon", "description": "The trigger icon." }, { "name": "", "description": "Declarative noora-dropdown-item children." } ], "cssParts": [ { "name": "trigger", "description": "The menu trigger." }, { "name": "content", "description": "The menu content." } ], "events": [ { "name": "noora-open-change", "type": "CustomEvent<{ open: boolean }>", "description": "Emitted when the dropdown opens or closes." }, { "name": "noora-select", "type": "CustomEvent<{ item: Record; value: unknown }>", "description": "Emitted when an enabled item is selected." } ], "notes": [ "Selections emit a `noora-select` event." ], "examples": [ { "id": "default", "title": "Default", "description": "Use an inline menu for compact choices.", "markup": "\n Newest\n Oldest\n" }, { "id": "disabled", "title": "Disabled", "description": "Prevent changes while the choice is unavailable.", "markup": "\n Newest\n" }, { "id": "large-items", "title": "Large items", "description": "Use larger item rows for more prominent menus.", "markup": "\n Production\n Staging\n" }, { "id": "icons", "title": "Items with icons", "description": "Pair choices with recognizable icons.", "markup": "\n Grid\n List\n" }, { "id": "secondary-text", "title": "Secondary text", "description": "Add concise context beside each label.", "markup": "\n main\n release\n" } ] }, { "name": "Label", "tagName": "noora-label", "elementClassName": "NooraLabel", "className": "noora-label", "modulePath": "./priv/static/noora-web-components.js", "description": "Labels a form control with optional supporting text.", "previewLayout": "stack", "usage": "", "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the main label." }, { "name": "sublabel", "property": "sublabel", "type": "string", "description": "Sets secondary label text." }, { "name": "required", "property": "required", "type": "boolean", "default": false, "description": "Shows the required indicator." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Shows the disabled state." }, { "name": "for", "property": "htmlFor", "type": "string", "description": "Associates the label with a control identifier." } ], "readonlyProperties": [], "slots": [], "cssParts": [ { "name": "label", "description": "The native label." }, { "name": "sublabel", "description": "The secondary label." } ], "notes": [], "examples": [ { "id": "basic", "title": "Basic labels", "description": "Show the same simple, required, and supporting-label variations as the LiveView component.", "markup": "\n\n\n" }, { "id": "disabled", "title": "Disabled labels", "description": "Use disabled label colors when the associated control is unavailable.", "markup": "\n" }, { "id": "edge-cases", "title": "Edge cases", "description": "Match the LiveView component's long and short label cases.", "markup": "\n\n" } ], "properties": [], "events": [] }, { "name": "LineDivider", "tagName": "noora-line-divider", "elementClassName": "NooraLineDivider", "className": "noora-line-divider", "modulePath": "./priv/static/noora-web-components.js", "description": "Separates adjacent content with an optional inline label.", "usage": "", "attributes": [ { "name": "text", "property": "text", "type": "string", "description": "Sets the optional inline label." } ], "readonlyProperties": [], "slots": [], "cssParts": [ { "name": "divider", "description": "The divider." }, { "name": "text", "description": "The inline label." } ], "notes": [], "examples": [ { "id": "basic", "title": "Basic dividers", "description": "Match the LiveView component with a plain divider and an inline label.", "markup": "\n" }, { "id": "text-variations", "title": "Text variations", "description": "Use the same text variations as the LiveView component.", "markup": "\n\n\n" } ], "properties": [], "events": [] }, { "name": "LinkButton", "tagName": "noora-link-button", "elementClassName": "NooraLinkButton", "className": "noora-link-button", "modulePath": "./priv/static/noora-web-components.js", "description": "Presents a text-oriented button or link.", "previewLayout": "stack-center", "usage": "", "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the visible label." }, { "name": "variant", "property": "variant", "type": "string", "values": [ "primary", "secondary", "destructive" ], "default": "primary", "description": "Controls semantic emphasis." }, { "name": "size", "property": "size", "type": "string", "values": [ "small", "medium", "large" ], "default": "large", "description": "Controls dimensions." }, { "name": "href", "property": "href", "type": "string", "description": "Renders a native link to this location." }, { "name": "underline", "property": "underline", "type": "boolean", "default": false, "description": "Underlines the label." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables activation." } ], "readonlyProperties": [], "slots": [ { "name": "icon-left", "description": "An icon before the label." }, { "name": "icon-right", "description": "An icon after the label." } ], "cssParts": [ { "name": "control", "description": "The native link or button." } ], "notes": [], "examples": [ { "id": "variants", "title": "Variant", "description": "Match the LiveView primary, secondary, and destructive variations.", "markup": "\n\n" }, { "id": "sizes", "title": "Size", "description": "Match the LiveView large, medium, and small variations.", "markup": "\n\n" }, { "id": "disabled", "title": "Disabled", "description": "Disable the primary link button.", "markup": "" }, { "id": "underline", "title": "Underline", "description": "Render an underlined link button.", "markup": "" }, { "id": "icons", "title": "Icon", "description": "Match the LiveView left, right, and two-sided icon variations.", "markup": "\n\n" } ], "properties": [], "events": [] }, { "name": "Modal", "tagName": "noora-modal", "elementClassName": "NooraModal", "className": "noora-modal", "modulePath": "./priv/static/noora-web-components.js", "description": "Presents focused content above the current page.", "usage": "

Profile form

", "attributes": [ { "name": "title", "property": "title", "type": "string", "description": "Sets the modal title." }, { "name": "description", "property": "description", "type": "string", "description": "Sets the large-header description." }, { "name": "header-type", "property": "headerType", "type": "string", "values": [ "default", "icon", "success", "info", "warning", "error" ], "default": "default", "description": "Controls the header icon and semantics." }, { "name": "header-size", "property": "headerSize", "type": "string", "values": [ "small", "large" ], "default": "large", "description": "Controls header dimensions." }, { "name": "open", "property": "open", "type": "boolean", "default": false, "description": "Controls whether the modal is open." }, { "name": "close-on-escape", "property": "closeOnEscape", "type": "boolean", "default": true, "description": "Closes the modal when Escape is pressed." }, { "name": "close-on-interact-outside", "property": "closeOnInteractOutside", "type": "boolean", "default": true, "description": "Closes the modal when its backdrop is activated." } ], "readonlyProperties": [], "slots": [ { "name": "trigger", "description": "The control that opens the modal." }, { "name": "header-icon", "description": "A custom icon for icon headers." }, { "name": "header-button", "description": "A custom header action." }, { "name": "", "description": "The modal body." }, { "name": "footer", "description": "The modal footer." } ], "cssParts": [ { "name": "backdrop", "description": "The page backdrop." }, { "name": "content", "description": "The modal surface." }, { "name": "header", "description": "The modal header." }, { "name": "body", "description": "The modal body." }, { "name": "footer", "description": "The modal footer." } ], "events": [ { "name": "noora-open-change", "type": "CustomEvent<{ open: boolean }>", "description": "Emitted when the modal opens or closes." }, { "name": "noora-dismiss", "type": "CustomEvent<{ reason: \"close-button\" | \"escape\" | \"outside\" | \"action\" }>", "description": "Emitted when the modal is dismissed without a direct open-property assignment." } ], "notes": [ "Opening and closing emits a `noora-open-change` event.", "Slotted footer buttons can use `data-action=\"close\"` to close the modal." ], "examples": [ { "id": "header-types", "title": "Header types", "description": "Use default, custom-icon, success, information, warning, or error headers.", "markup": "Default Modal

This is a basic modal with default header styling.

CancelConfirm\nIcon ModalCancelSend\nSuccess Modal

Your operation has been completed successfully!

Close\nInfo Modal

Here's some important information you should know before proceeding.

Got it\nWarning Modal

This action may have consequences. Please review before continuing.

CancelContinue\nError Modal

An error occurred while processing your request. Please try again.

Retry" }, { "id": "header-sizes", "title": "Header sizes", "description": "Small headers omit the description while large headers show it.", "markup": "Small Header

Modal with small header - description is not displayed.

Close\nLarge Header

Modal with large header - description is displayed below the title.

Close" }, { "id": "footers", "title": "Footer variations", "description": "Use no footer, one action, or multiple actions.", "markup": "No Footer

This modal doesn't have a footer. Users can close it using the X button in the header.

\nSingle Action

This modal has only one action in the footer.

Got it\nMultiple Actions

This modal demonstrates multiple action buttons in the footer.

Save DraftCancelPublish" } ], "properties": [] }, { "name": "NeutralButton", "tagName": "noora-neutral-button", "elementClassName": "NooraNeutralButton", "className": "noora-neutral-button", "modulePath": "./priv/static/noora-web-components.js", "description": "Provides a low-emphasis compact control.", "usage": "", "attributes": [ { "name": "size", "property": "size", "type": "string", "values": [ "small", "medium", "large" ], "default": "large", "description": "Controls the dimensions." }, { "name": "href", "property": "href", "type": "string", "description": "Renders a native link to this location." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables activation." }, { "name": "aria-label", "property": "_ariaLabel", "publicProperty": false, "type": "string", "description": "Provides an accessible name." } ], "readonlyProperties": [], "slots": [ { "name": "", "description": "The complete control content." } ], "cssParts": [ { "name": "control", "description": "The native link or button." } ], "notes": [], "examples": [ { "id": "sizes", "title": "Sizes", "description": "Use small, medium, or large compact controls.", "markup": "\n\n" }, { "id": "states", "title": "States", "description": "Compare enabled and disabled controls.", "markup": "\n" }, { "id": "icons", "title": "Different icons", "description": "Use the icon that matches the navigation direction.", "markup": "\n" } ], "properties": [], "events": [] }, { "name": "PaginationGroup", "tagName": "noora-pagination-group", "elementClassName": "NooraPaginationGroup", "className": "noora-pagination-group", "modulePath": "./priv/static/noora-web-components.js", "description": "Navigates a finite collection of numbered pages.", "usage": "", "attributes": [ { "name": "current-page", "property": "currentPage", "type": "number", "default": 1, "description": "Sets the selected page." }, { "name": "number-of-pages", "property": "numberOfPages", "type": "number", "default": 1, "description": "Sets the total page count." }, { "name": "href-template", "property": "hrefTemplate", "type": "string", "description": "Sets link locations by replacing `{page}` with the page number." } ], "readonlyProperties": [], "slots": [], "cssParts": [ { "name": "pagination", "description": "The pagination container." }, { "name": "page", "description": "Each page control." }, { "name": "previous", "description": "The previous-page control." }, { "name": "next", "description": "The next-page control." } ], "events": [ { "name": "noora-page-change", "type": "CustomEvent<{ page: number }>", "description": "Emitted when a page control is activated." } ], "notes": [ "Page activation emits a `noora-page-change` event." ], "examples": [ { "id": "basic", "title": "Page positions", "description": "Compare the first, middle, last, and second page positions.", "markup": "\n\n\n" }, { "id": "page-counts", "title": "Page counts", "description": "Show ellipsis behavior across small and large collections.", "markup": "\n\n" }, { "id": "edge-cases", "title": "Edge cases", "description": "Handle one-page, two-page, and near-boundary collections.", "markup": "\n\n\n\n" } ], "properties": [] }, { "name": "Popover", "tagName": "noora-popover", "elementClassName": "NooraPopover", "className": "noora-popover", "modulePath": "./priv/static/noora-web-components.js", "description": "Displays contextual content anchored to a trigger.", "usage": "

Popover content

", "attributes": [ { "name": "open", "property": "open", "type": "boolean", "default": false, "description": "Controls whether the popover is open." }, { "name": "modal", "property": "modal", "type": "boolean", "default": false, "description": "Enables modal interaction behavior." }, { "name": "auto-focus", "property": "autoFocus", "type": "boolean", "default": true, "description": "Focuses the first focusable element after opening." }, { "name": "close-on-interact-outside", "property": "closeOnInteractOutside", "type": "boolean", "default": true, "description": "Closes after outside interaction." }, { "name": "close-on-escape", "property": "closeOnEscape", "type": "boolean", "default": true, "description": "Closes when Escape is pressed." }, { "name": "placement", "property": "placement", "type": "string", "values": [ "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" ], "default": "bottom", "description": "Controls the preferred placement." } ], "readonlyProperties": [], "slots": [ { "name": "trigger", "description": "The control that toggles the popover." }, { "name": "", "description": "The popover content." } ], "cssParts": [ { "name": "trigger", "description": "The trigger wrapper." }, { "name": "content", "description": "The popover surface." } ], "events": [ { "name": "noora-open-change", "type": "CustomEvent<{ open: boolean }>", "description": "Emitted when the popover opens or closes." } ], "notes": [ "Opening and closing emits a `noora-open-change` event." ], "examples": [ { "id": "settings", "title": "Default", "description": "Show a simple popover with basic content.", "markup": "\n \n
\n

Popover Title

\n

This is the content inside the popover.

\n
\n" } ], "properties": [] }, { "name": "ProgressBar", "tagName": "noora-progress-bar", "elementClassName": "NooraProgressBar", "className": "noora-progress-bar", "modulePath": "./priv/static/noora-web-components.js", "description": "Visualizes progress toward a maximum value.", "usage": "", "previewLayout": "stack", "attributes": [ { "name": "value", "property": "value", "type": "number", "default": 0, "description": "Sets the current value." }, { "name": "max", "property": "max", "type": "number", "default": 100, "description": "Sets the maximum value." }, { "name": "title", "property": "title", "type": "string", "description": "Sets the optional title." } ], "readonlyProperties": [], "slots": [ { "name": "description", "description": "Supporting content below the bar." } ], "cssParts": [ { "name": "progress", "description": "The progress container." }, { "name": "track", "description": "The complete track." }, { "name": "value", "description": "The filled track." } ], "notes": [], "examples": [ { "id": "basic", "title": "Basic progress", "description": "Show progress with or without a title.", "markup": "\n", "previewMarkup": "\n" }, { "id": "levels", "title": "Progress levels", "description": "Compare empty, quarter, half, three-quarter, and complete states.", "markup": "\n\n\n\n", "previewMarkup": "\n\n\n\n" }, { "id": "scales", "title": "Different scales", "description": "Use any numeric range that suits the measured quantity.", "markup": "\n\n", "previewMarkup": "\n\n" }, { "id": "edge-cases", "title": "Edge cases", "description": "Show overflowing, very small, and long-title progress values.", "markup": "\n\n", "previewMarkup": "\n\n" } ], "properties": [], "events": [] }, { "name": "Select", "tagName": "noora-select", "elementClassName": "NooraSelect", "className": "noora-dropdown", "modulePath": "./priv/static/noora-web-components.js", "description": "Selects one value from a list of options.", "usage": "\n \n", "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the placeholder label." }, { "name": "name", "property": "name", "type": "string", "default": "", "description": "Sets the submitted field name." }, { "name": "value", "property": "value", "type": "string", "default": "", "description": "Gets or sets the selected value." }, { "name": "hint", "property": "hint", "type": "string", "description": "Adds supporting text." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables the select." }, { "name": "required", "property": "required", "type": "boolean", "default": false, "description": "Marks the field as required." }, { "name": "open", "property": "open", "type": "boolean", "default": false, "description": "Controls whether the options menu is open." } ], "properties": [ { "name": "options", "type": "json", "typescriptType": "Array>", "default": [], "description": "Defines options programmatically when declarative option children are not used. Each option can include label, value, icon, and disabled fields." } ], "readonlyProperties": [ { "name": "control", "type": "HTMLSelectElement | null", "description": "The native select control." }, { "name": "form", "type": "HTMLFormElement | null", "description": "The associated form." } ], "slots": [ { "name": "", "description": "Declarative native option children." } ], "cssParts": [ { "name": "select", "description": "The visible select trigger." }, { "name": "content", "description": "The options menu." }, { "name": "items", "description": "The options list." }, { "name": "hint", "description": "The supporting text." } ], "events": [ { "name": "input", "type": "InputEvent", "description": "Emitted while the selected value changes." }, { "name": "change", "type": "Event", "description": "Emitted after the selected value changes." }, { "name": "noora-open-change", "type": "CustomEvent<{ open: boolean }>", "description": "Emitted when the options menu opens or closes." }, { "name": "noora-select", "type": "CustomEvent<{ item: Record; value: string }>", "description": "Emitted with the selected option and value." } ], "notes": [ "The component emits standard input and change events.", "Use data-icon on a declarative option to show an icon in the menu and selected trigger." ], "examples": [ { "id": "country", "title": "Default", "description": "Select a country from structured options.", "markup": "\n \n \n \n" }, { "id": "selected", "title": "Selected value", "description": "Show the current value in the trigger.", "markup": "\n \n \n \n" }, { "id": "icons", "title": "Option icons", "description": "Add visual context to options and the selected trigger.", "markup": "\n \n \n \n" }, { "id": "hint", "title": "Hint", "description": "Explain how the selected value will be used.", "markup": "\n \n \n \n" }, { "id": "disabled", "title": "Disabled", "description": "Disable selection when the field is unavailable.", "markup": "\n \n \n \n" } ] }, { "name": "ShortcutKey", "tagName": "noora-shortcut-key", "elementClassName": "NooraShortcutKey", "className": "noora-shortcut-key", "modulePath": "./priv/static/noora-web-components.js", "description": "Displays a keyboard shortcut.", "usage": "⌘K", "attributes": [ { "name": "size", "property": "size", "type": "string", "values": [ "small", "large" ], "default": "large", "description": "Controls the key dimensions." } ], "readonlyProperties": [], "slots": [ { "name": "", "description": "The shortcut text." } ], "cssParts": [ { "name": "key", "description": "The keyboard key." } ], "notes": [], "examples": [ { "id": "command", "title": "Command", "description": "Display a command shortcut.", "markup": "⌘K" } ], "properties": [], "events": [] }, { "name": "SidebarGroup", "tagName": "noora-sidebar-group", "elementClassName": "NooraSidebarGroup", "className": "noora-sidebar-group", "modulePath": "./priv/static/noora-web-components.js", "description": "Groups declarative sidebar destinations.", "usage": "Tuist", "standalone": false, "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the group label." }, { "name": "default-open", "property": "defaultOpen", "type": "boolean", "default": false, "description": "Expands the group initially." }, { "name": "fixed", "property": "fixed", "type": "boolean", "default": false, "description": "Keeps the group expanded and removes its collapse interaction." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "The noora-sidebar-item children." } ], "cssParts": [], "notes": [], "examples": [ { "id": "group", "title": "Group", "description": "Group related sidebar destinations.", "markup": "Tuist" } ], "events": [] }, { "name": "SidebarItem", "tagName": "noora-sidebar-item", "elementClassName": "NooraSidebarItem", "className": "noora-sidebar-item", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one declarative sidebar destination.", "usage": "Dashboard", "standalone": false, "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the label instead of using text content." }, { "name": "href", "property": "href", "type": "string", "default": "#", "description": "Sets the navigation address." }, { "name": "icon", "property": "icon", "type": "string", "description": "Shows an icon before the label." }, { "name": "selected", "property": "selected", "type": "boolean", "default": false, "description": "Marks the destination as the current page." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "The destination label." } ], "cssParts": [], "notes": [], "examples": [ { "id": "item", "title": "Item", "description": "Describe one sidebar destination.", "markup": "Dashboard" } ], "events": [] }, { "name": "Sidebar", "tagName": "noora-sidebar", "elementClassName": "NooraSidebar", "className": "noora-sidebar", "modulePath": "./priv/static/noora-web-components.js", "description": "Provides responsive side navigation.", "usage": "\n Dashboard\n", "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "Primary navigation", "description": "Sets the accessible navigation label." } ], "properties": [ { "name": "items", "type": "json", "typescriptType": "Array>", "default": [], "description": "Defines navigation programmatically when declarative sidebar children are not used." } ], "readonlyProperties": [], "slots": [ { "name": "", "description": "Declarative noora-sidebar-item and noora-sidebar-group children." } ], "cssParts": [ { "name": "sidebar", "description": "The sidebar container." }, { "name": "viewport", "description": "The scrollable navigation viewport." } ], "notes": [], "examples": [ { "id": "navigation", "title": "Navigation", "description": "Provide structured navigation items.", "markup": "\n Dashboard\n \n Tuist\n Noora\n \n" } ], "events": [] }, { "name": "StatusBadge", "tagName": "noora-status-badge", "elementClassName": "NooraStatusBadge", "className": "noora-status-badge", "modulePath": "./priv/static/noora-web-components.js", "description": "Displays a compact workflow status with a semantic icon or dot.", "usage": "", "attributes": [ { "name": "type", "property": "type", "type": "string", "values": [ "icon", "dot" ], "default": "icon", "description": "Chooses a semantic icon or a dot indicator." }, { "name": "status", "property": "status", "type": "string", "values": [ "success", "error", "warning", "attention", "disabled", "in_progress" ], "default": "success", "description": "Sets the semantic status." }, { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the visible label." } ], "readonlyProperties": [], "slots": [ { "name": "", "description": "Custom label content that takes precedence over the label attribute." } ], "cssParts": [ { "name": "badge", "description": "The status badge container." }, { "name": "icon", "description": "The semantic icon or dot." }, { "name": "label", "description": "The visible label." } ], "notes": [], "examples": [ { "id": "statuses", "title": "Statuses", "description": "Communicate workflow state with a semantic icon.", "markup": "\n\n\n\n" }, { "id": "dots", "title": "Dot indicators", "description": "Use dots when the icon shape is unnecessary.", "markup": "\n\n\n\n" } ], "properties": [], "events": [] }, { "name": "TabItem", "tagName": "noora-tab-item", "elementClassName": "NooraTabItem", "className": "noora-tab-item", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one declarative tab item.", "usage": "Overview", "standalone": false, "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the label instead of using text content." }, { "name": "value", "property": "value", "type": "string", "description": "Sets the selected value." }, { "name": "icon", "property": "icon", "type": "string", "description": "Shows an icon before the label." }, { "name": "right-icon", "property": "rightIcon", "type": "string", "description": "Shows an icon after the label." }, { "name": "href", "property": "href", "type": "string", "description": "Renders the tab as a navigation link." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables selection." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "The tab label." } ], "cssParts": [], "notes": [], "examples": [ { "id": "item", "title": "Item", "description": "Describe one tab.", "markup": "Overview" } ], "events": [] }, { "name": "TabMenu", "tagName": "noora-tab-menu", "elementClassName": "NooraTabMenu", "className": "noora-tab-menu-horizontal", "modulePath": "./priv/static/noora-web-components.js", "description": "Switches between related views or navigation destinations.", "usage": "\n Overview\n Settings\n", "attributes": [ { "name": "orientation", "property": "orientation", "type": "string", "values": [ "horizontal", "vertical" ], "default": "horizontal", "description": "Controls the menu layout." }, { "name": "value", "property": "value", "type": "string", "description": "Gets or sets the selected item value." } ], "properties": [ { "name": "items", "type": "json", "typescriptType": "Array>", "default": [], "description": "Defines tabs programmatically when declarative noora-tab-item children are not used." } ], "readonlyProperties": [], "slots": [ { "name": "", "description": "Declarative noora-tab-item children." } ], "cssParts": [ { "name": "menu", "description": "The menu container." }, { "name": "item", "description": "Each tab item." } ], "events": [ { "name": "noora-tab-change", "type": "CustomEvent<{ item: Record; value: unknown }>", "description": "Emitted when an enabled tab is selected." } ], "notes": [ "Selection emits a `noora-tab-change` event." ], "examples": [ { "id": "horizontal", "title": "Horizontal tabs", "description": "Switch between sibling views.", "markup": "\n General\n Settings\n Members\n" }, { "id": "vertical", "title": "Vertical tabs", "description": "Use labels with left, right, or paired icons.", "markup": "\n Dashboard\n Analytics\n Settings\n Users\n" }, { "id": "vertical-edge-cases", "title": "Vertical edge cases", "description": "Handle especially long and short labels.", "markup": "\n Very Long Tab Label That Might Wrap\n A\n" } ] }, { "name": "TableCell", "tagName": "noora-table-cell", "elementClassName": "NooraTableCell", "className": "noora-table-cell", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one declarative table cell.", "usage": "Tuist", "standalone": false, "attributes": [ { "name": "column", "property": "column", "type": "string", "default": "", "description": "Associates the cell with a table column." }, { "name": "value", "property": "value", "type": "string", "description": "Sets the cell value instead of using text content." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "The cell value." } ], "cssParts": [], "notes": [], "examples": [ { "id": "cell", "title": "Cell", "description": "Describe one table value.", "markup": "Tuist" } ], "events": [] }, { "name": "TableColumn", "tagName": "noora-table-column", "elementClassName": "NooraTableColumn", "className": "noora-table-column", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one declarative table column.", "usage": "Project", "standalone": false, "attributes": [ { "name": "name", "property": "name", "type": "string", "default": "", "description": "Sets the column key." }, { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the heading instead of using text content." }, { "name": "icon", "property": "icon", "type": "string", "description": "Shows an icon in the heading." }, { "name": "sort-order", "property": "sortOrder", "type": "string", "values": [ "asc", "desc" ], "description": "Shows the current sort direction." }, { "name": "format", "property": "format", "type": "string", "values": [ "date", "number" ], "description": "Formats property-driven cell values." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "The column heading." } ], "cssParts": [], "notes": [], "examples": [ { "id": "column", "title": "Column", "description": "Describe one table column.", "markup": "Project" } ], "events": [] }, { "name": "TableRow", "tagName": "noora-table-row", "elementClassName": "NooraTableRow", "className": "noora-table-row", "modulePath": "./priv/static/noora-web-components.js", "description": "Describes one declarative table row.", "usage": "Tuist", "standalone": false, "attributes": [ { "name": "row-key", "property": "rowKey", "type": "string", "description": "Sets the row identifier." } ], "properties": [], "readonlyProperties": [], "slots": [ { "name": "", "description": "The noora-table-cell children." } ], "cssParts": [], "notes": [], "examples": [ { "id": "row", "title": "Row", "description": "Describe one table row.", "markup": "Tuist" } ], "events": [] }, { "name": "Table", "tagName": "noora-table", "elementClassName": "NooraTable", "className": "noora-table", "modulePath": "./priv/static/noora-web-components.js", "description": "Displays structured rows and columns with optional sorting and expansion.", "usage": "\n Name\n \n Tuist\n \n", "attributes": [ { "name": "row-key", "property": "rowKey", "type": "string", "default": "id", "description": "Selects the property used as each row key." }, { "name": "empty-title", "property": "emptyTitle", "type": "string", "default": "No results", "description": "Sets the empty-state title." }, { "name": "selectable", "property": "selectable", "type": "boolean", "default": false, "description": "Makes rows selectable." } ], "properties": [ { "name": "columns", "type": "json", "typescriptType": "Array>", "default": [], "description": "Defines columns programmatically when declarative noora-table-column children are not used." }, { "name": "rows", "type": "json", "typescriptType": "Record[]", "default": [], "description": "Defines rows programmatically when declarative noora-table-row children are not used." } ], "readonlyProperties": [], "slots": [ { "name": "", "description": "Declarative noora-table-column and noora-table-row children." }, { "name": "empty", "description": "A custom empty state." } ], "cssParts": [ { "name": "table", "description": "The native table." }, { "name": "row", "description": "Each body row." }, { "name": "cell", "description": "Each body cell." } ], "events": [ { "name": "noora-row-select", "type": "CustomEvent<{ index: number; row: Record }>", "description": "Emitted when a selectable row is activated." } ], "notes": [ "Row activation emits a `noora-row-select` event." ], "examples": [ { "id": "cell-types", "title": "Cell types", "description": "Render text, descriptions, tags, badges, status, actions, and time values as structured columns.", "markup": "\n Text\n Description\n Tag\n Status\n Created at\n \n Row One\n An internal identifier\n Category\n Success\n 2023-01-01T12:00:00Z\n \n \n Row Two\n Another identifier\n User\n Running\n 2023-01-02T12:00:00Z\n \n" }, { "id": "example", "title": "Command example", "description": "Combine common build and test information.", "markup": "\n Command\n Status\n Ran by\n Duration\n Created at\n \n test TuistKitAcceptanceTests\n Success\n Continuous integration\n 5 seconds\n 2 hours ago\n \n" }, { "id": "sorting", "title": "Sortable columns", "description": "Show ascending and descending sort direction indicators.", "markup": "\n Name\n Duration (desc)\n Created at (asc)\n \n Row One\n 5s\n 2 hours ago\n \n \n Row Two\n 12s\n 2 hours ago\n \n" }, { "id": "selectable-rows", "title": "Selectable rows", "description": "Allow rows to emit selection events for detail or expansion workflows.", "markup": "\n Task\n Hit\n Type\n \n GeneratedAssetSymbols.swift\n Remote\n Clang\n \n \n CompileSwiftSources.swift\n Local\n Swift\n \n \n LinkBinary\n Missed\n Clang\n \n" } ] }, { "name": "Tag", "tagName": "noora-tag", "elementClassName": "NooraTag", "className": "noora-tag", "modulePath": "./priv/static/noora-web-components.js", "description": "Displays a compact label with optional icon and dismissal.", "usage": "", "attributes": [ { "name": "label", "property": "label", "type": "string", "default": "", "description": "Sets the visible label." }, { "name": "dismissible", "property": "dismissible", "type": "boolean", "default": false, "description": "Shows a dismiss control." }, { "name": "dismiss-value", "property": "dismissValue", "type": "string", "description": "Adds a value to the dismiss event." }, { "name": "icon", "property": "icon", "type": "string", "description": "Sets a Noora icon before the label." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables dismissal." } ], "readonlyProperties": [], "slots": [ { "name": "icon", "description": "A custom icon that takes precedence over the icon attribute." } ], "cssParts": [ { "name": "tag", "description": "The tag container." }, { "name": "label", "description": "The label." }, { "name": "dismiss", "description": "The dismiss control." } ], "events": [ { "name": "noora-dismiss", "type": "CustomEvent<{ value: string | undefined }>", "description": "Emitted when the tag dismiss control is activated." } ], "notes": [ "Dismissal emits a `noora-dismiss` event." ], "examples": [ { "id": "basic", "title": "Basic tags", "description": "Render plain tags and tags with different icons.", "markup": "\n\n" }, { "id": "dismissible", "title": "Dismissible states", "description": "Allow removal when a tag represents editable input.", "markup": "\n\n" }, { "id": "disabled", "title": "Disabled states", "description": "Disable plain, icon, and dismissible tags.", "markup": "\n\n" }, { "id": "content", "title": "Content variations", "description": "Support short, long, version, and status labels.", "markup": "\n\n\n" } ], "properties": [] }, { "name": "TextArea", "tagName": "noora-text-area", "elementClassName": "NooraTextArea", "className": "noora-text-area", "modulePath": "./priv/static/noora-web-components.js", "description": "Collects multi-line text with labels, hints, errors, and character counting.", "usage": "", "attributes": [ { "name": "label", "property": "label", "type": "string", "description": "Sets the field label." }, { "name": "sublabel", "property": "sublabel", "type": "string", "description": "Sets secondary label text." }, { "name": "hint", "property": "hint", "type": "string", "description": "Sets supporting text." }, { "name": "hint-variant", "property": "hintVariant", "type": "string", "values": [ "default", "destructive", "disabled" ], "default": "default", "description": "Controls hint semantics." }, { "name": "error", "property": "error", "type": "string", "description": "Sets the validation error." }, { "name": "name", "property": "name", "type": "string", "default": "", "description": "Sets the submitted field name." }, { "name": "value", "property": "value", "type": "string", "default": "", "description": "Gets or sets the field value." }, { "name": "placeholder", "property": "placeholder", "type": "string", "description": "Sets placeholder text." }, { "name": "required", "property": "required", "type": "boolean", "default": false, "description": "Marks the field as required." }, { "name": "show-required", "property": "showRequired", "type": "boolean", "default": false, "description": "Shows the required indicator." }, { "name": "rows", "property": "rows", "type": "number", "default": 4, "description": "Sets the visible row count." }, { "name": "max-length", "property": "maxLength", "type": "number", "default": 200, "description": "Sets the maximum character count." }, { "name": "show-character-count", "property": "showCharacterCount", "type": "boolean", "default": true, "description": "Shows the current character count." }, { "name": "resize", "property": "resize", "type": "string", "values": [ "none", "both", "horizontal", "vertical" ], "default": "vertical", "description": "Controls native resizing." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables the field." } ], "readonlyProperties": [ { "name": "control", "type": "HTMLTextAreaElement | null", "description": "The native text area." }, { "name": "form", "type": "HTMLFormElement | null", "description": "The associated form." } ], "slots": [], "cssParts": [ { "name": "textarea", "description": "The native text area." }, { "name": "character-count", "description": "The character counter." } ], "events": [ { "name": "input", "type": "InputEvent", "description": "Emitted while the text value changes." }, { "name": "change", "type": "Event", "description": "Emitted after the text value is committed." } ], "notes": [ "The component emits standard input and change events." ], "examples": [ { "id": "basic", "title": "Basic", "description": "Collect longer supporting text.", "markup": "" }, { "id": "required", "title": "Required", "description": "Mark required fields visibly and semantically.", "markup": "" }, { "id": "hint", "title": "With hint", "description": "Give supporting guidance below the field.", "markup": "" }, { "id": "error", "title": "Error", "description": "Communicate validation failures.", "markup": "" }, { "id": "disabled", "title": "Disabled", "description": "Prevent editing while preserving context.", "markup": "" } ], "properties": [] }, { "name": "TextDivider", "tagName": "noora-text-divider", "elementClassName": "NooraTextDivider", "className": "noora-text-divider", "modulePath": "./priv/static/noora-web-components.js", "description": "Renders a compact textual section divider.", "usage": "", "attributes": [ { "name": "text", "property": "text", "type": "string", "default": "", "description": "Sets the divider text." } ], "readonlyProperties": [], "slots": [], "cssParts": [ { "name": "divider", "description": "The text divider." } ], "notes": [], "examples": [ { "id": "basic", "title": "Basic dividers", "description": "Separate alternatives, combined conditions, or sections.", "markup": "\n\n" }, { "id": "content", "title": "Content types", "description": "Use symbols, numbers, longer labels, or dates.", "markup": "\n\n\n" } ], "properties": [], "events": [] }, { "name": "TextInput", "tagName": "noora-text-input", "elementClassName": "NooraTextInput", "className": "noora-text-input", "modulePath": "./priv/static/noora-web-components.js", "description": "Collects single-line text with Noora labels, hints, prefixes, and suffixes.", "usage": "", "attributes": [ { "name": "type", "property": "type", "type": "string", "values": [ "basic", "email", "card_number", "search", "password" ], "default": "basic", "description": "Controls the semantic field presentation." }, { "name": "input-type", "property": "inputType", "type": "string", "default": "text", "description": "Sets the native input type for basic fields." }, { "name": "label", "property": "label", "type": "string", "description": "Sets the field label." }, { "name": "sublabel", "property": "sublabel", "type": "string", "description": "Sets secondary label text." }, { "name": "hint", "property": "hint", "type": "string", "description": "Sets supporting text." }, { "name": "hint-variant", "property": "hintVariant", "type": "string", "values": [ "default", "destructive", "disabled" ], "default": "default", "description": "Controls hint semantics." }, { "name": "error", "property": "error", "type": "string", "description": "Sets the validation error." }, { "name": "name", "property": "name", "type": "string", "default": "", "description": "Sets the submitted field name." }, { "name": "value", "property": "value", "type": "string", "default": "", "description": "Gets or sets the field value." }, { "name": "placeholder", "property": "placeholder", "type": "string", "description": "Sets placeholder text." }, { "name": "required", "property": "required", "type": "boolean", "default": false, "description": "Marks the field as required." }, { "name": "show-required", "property": "showRequired", "type": "boolean", "default": false, "description": "Shows the required indicator." }, { "name": "min", "property": "min", "type": "string", "description": "Sets the native minimum value." }, { "name": "max", "property": "max", "type": "string", "description": "Sets the native maximum value." }, { "name": "step", "property": "step", "type": "string", "description": "Sets the native step value." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables the field." } ], "readonlyProperties": [ { "name": "control", "type": "HTMLInputElement | null", "description": "The native input." }, { "name": "form", "type": "HTMLFormElement | null", "description": "The associated form." } ], "slots": [ { "name": "prefix", "description": "A custom prefix for basic fields." }, { "name": "suffix", "description": "A custom suffix." } ], "cssParts": [ { "name": "input", "description": "The native input." }, { "name": "wrapper", "description": "The input wrapper." } ], "events": [ { "name": "input", "type": "InputEvent", "description": "Emitted while the input value changes." }, { "name": "change", "type": "Event", "description": "Emitted after the input value is committed." } ], "notes": [ "The component emits standard input and change events." ], "examples": [ { "id": "types", "title": "Input types", "description": "Use basic, email, card-number, search, and password presentations.", "markup": "\n\n\n\n" }, { "id": "hint", "title": "With hint", "description": "Give supporting guidance below the input.", "markup": "" }, { "id": "error", "title": "Error", "description": "Communicate validation failures.", "markup": "" }, { "id": "custom-suffix", "title": "Custom suffix", "description": "Provide a custom element after the native input.", "markup": "" }, { "id": "labels", "title": "Labels", "description": "Show required and secondary label content.", "markup": "\n" }, { "id": "disabled", "title": "Disabled", "description": "Compare empty and filled disabled fields.", "markup": "\n" } ], "properties": [] }, { "name": "Time", "tagName": "noora-time", "elementClassName": "NooraTime", "className": "noora-time", "modulePath": "./priv/static/noora-web-components.js", "description": "Formats an absolute or relative date and time.", "usage": "", "attributes": [ { "name": "datetime", "property": "datetime", "type": "string", "description": "Sets an international date and time string." }, { "name": "show-time", "property": "showTime", "type": "boolean", "default": false, "description": "Includes the localized time." }, { "name": "relative", "property": "relative", "type": "boolean", "default": false, "description": "Shows a relative time label." } ], "readonlyProperties": [], "slots": [], "cssParts": [ { "name": "time", "description": "The native time element." } ], "notes": [], "examples": [ { "id": "formats", "title": "Display formats", "description": "Show a date, a date with time, or a relative label.", "markup": "\n\n" }, { "id": "times-of-day", "title": "Different times", "description": "Format morning, evening, midnight, and noon values.", "markup": "\n\n\n" }, { "id": "relative", "title": "Relative times", "description": "Show relative labels with absolute tooltips.", "markup": "\n\n\n" }, { "id": "special-dates", "title": "Special dates", "description": "Handle new year, leap day, and distant-future dates.", "markup": "\n\n" } ], "properties": [], "events": [] }, { "name": "Toggle", "tagName": "noora-toggle", "elementClassName": "NooraToggle", "className": "noora-toggle", "modulePath": "./priv/static/noora-web-components.js", "description": "Turns a setting on or off.", "usage": "", "attributes": [ { "name": "label", "property": "label", "type": "string", "description": "Sets the visible label." }, { "name": "description", "property": "description", "type": "string", "description": "Sets supporting text." }, { "name": "checked", "property": "checked", "type": "boolean", "default": false, "reflect": true, "description": "Controls the checked state." }, { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "reflect": true, "description": "Disables interaction." }, { "name": "name", "property": "name", "type": "string", "default": "", "description": "Sets the submitted field name." }, { "name": "value", "property": "value", "type": "string", "default": "on", "description": "Sets the submitted field value." } ], "readonlyProperties": [ { "name": "control", "type": "HTMLInputElement | null", "description": "The native checkbox input." }, { "name": "form", "type": "HTMLFormElement | null", "description": "The associated form." } ], "slots": [], "cssParts": [ { "name": "root", "description": "The toggle label." }, { "name": "control", "description": "The visual switch." }, { "name": "label", "description": "The label text." } ], "events": [ { "name": "input", "type": "InputEvent", "description": "Emitted while the checked state changes." }, { "name": "change", "type": "Event", "description": "Emitted after the checked state changes." } ], "notes": [ "The component emits standard input and change events." ], "examples": [ { "id": "states", "title": "Basic states", "description": "Compare off and on settings.", "markup": "\n" }, { "id": "disabled", "title": "Disabled states", "description": "Show disabled settings in both states.", "markup": "\n" }, { "id": "description", "title": "With description", "description": "Explain the setting below its label.", "markup": "" } ], "properties": [] }, { "name": "Tooltip", "tagName": "noora-tooltip", "elementClassName": "NooraTooltip", "className": "noora-tooltip", "modulePath": "./priv/static/noora-web-components.js", "description": "Explains an element on pointer hover or keyboard focus.", "usage": "", "attributes": [ { "name": "disabled", "property": "disabled", "type": "boolean", "default": false, "description": "Disables the tooltip." }, { "name": "size", "property": "size", "type": "string", "values": [ "small", "large" ], "default": "small", "description": "Controls the content layout." }, { "name": "title", "property": "title", "type": "string", "default": "", "description": "Sets the tooltip title." }, { "name": "description", "property": "description", "type": "string", "description": "Sets the large-tooltip description." }, { "name": "open", "property": "open", "type": "boolean", "default": false, "reflect": true, "description": "Controls whether the tooltip is open." } ], "readonlyProperties": [], "slots": [ { "name": "trigger", "description": "The described element." }, { "name": "icon", "description": "An icon shown by large tooltips." } ], "cssParts": [ { "name": "trigger", "description": "The trigger wrapper." }, { "name": "content", "description": "The tooltip content." } ], "events": [ { "name": "noora-open-change", "type": "CustomEvent<{ open: boolean }>", "description": "Emitted when the tooltip opens or closes." } ], "notes": [], "examples": [ { "id": "default", "title": "Default", "description": "Explain an icon or compact action.", "markup": "" }, { "id": "large", "title": "Large", "description": "Add an icon and supporting description.", "markup": "" } ], "properties": [] } ]