Packages
noora
0.85.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
custom-elements.json
{
"schemaVersion": "1.0.0",
"readme": "./README.md",
"modules": [
{
"kind": "javascript-module",
"path": "./priv/static/noora-web-components.js",
"declarations": [
{
"kind": "class",
"description": "Labels an item with compact status or categorization information.",
"name": "NooraBadge",
"tagName": "noora-badge",
"customElement": true,
"superclass": {
"name": "LitElement",
"package": "lit"
},
"members": [
{
"kind": "field",
"name": "appearance",
"description": "Controls whether the badge uses a solid or light fill.",
"type": {
"text": "\"fill\" | \"light-fill\""
},
"attribute": "appearance",
"default": "\"fill\""
},
{
"kind": "field",
"name": "color",
"description": "Controls the semantic color. Disabled badges ignore this value.",
"type": {
"text": "\"neutral\" | \"destructive\" | \"warning\" | \"attention\" | \"success\" | \"information\" | \"focus\" | \"primary\" | \"secondary\""
},
"attribute": "color",
"default": "\"neutral\""
},
{
"kind": "field",
"name": "size",
"description": "Controls the badge dimensions and text size.",
"type": {
"text": "\"small\" | \"large\""
},
"attribute": "size",
"default": "\"small\""
},
{
"kind": "field",
"name": "disabled",
"description": "Uses the disabled presentation regardless of color.",
"type": {
"text": "boolean"
},
"attribute": "disabled",
"default": "false"
},
{
"kind": "field",
"name": "dot",
"description": "Displays a dot before the label when the icon slot is empty.",
"type": {
"text": "boolean"
},
"attribute": "dot",
"default": "false"
},
{
"kind": "field",
"name": "iconOnly",
"description": "Hides the label and displays only the icon slot.",
"type": {
"text": "boolean"
},
"attribute": "icon-only",
"default": "false"
},
{
"kind": "field",
"name": "label",
"description": "Provides fallback text when the default slot is empty.",
"type": {
"text": "string"
},
"attribute": "label",
"default": "\"\""
}
],
"attributes": [
{
"name": "aria-label",
"description": "Provides an accessible name when visible text is unavailable.",
"type": {
"text": "string"
}
},
{
"name": "appearance",
"description": "Controls whether the badge uses a solid or light fill.",
"type": {
"text": "\"fill\" | \"light-fill\""
},
"fieldName": "appearance",
"default": "\"fill\""
},
{
"name": "color",
"description": "Controls the semantic color. Disabled badges ignore this value.",
"type": {
"text": "\"neutral\" | \"destructive\" | \"warning\" | \"attention\" | \"success\" | \"information\" | \"focus\" | \"primary\" | \"secondary\""
},
"fieldName": "color",
"default": "\"neutral\""
},
{
"name": "size",
"description": "Controls the badge dimensions and text size.",
"type": {
"text": "\"small\" | \"large\""
},
"fieldName": "size",
"default": "\"small\""
},
{
"name": "disabled",
"description": "Uses the disabled presentation regardless of color.",
"type": {
"text": "boolean"
},
"fieldName": "disabled",
"default": "false"
},
{
"name": "dot",
"description": "Displays a dot before the label when the icon slot is empty.",
"type": {
"text": "boolean"
},
"fieldName": "dot",
"default": "false"
},
{
"name": "icon-only",
"description": "Hides the label and displays only the icon slot.",
"type": {
"text": "boolean"
},
"fieldName": "iconOnly",
"default": "false"
},
{
"name": "label",
"description": "Provides fallback text when the default slot is empty.",
"type": {
"text": "string"
},
"fieldName": "label",
"default": "\"\""
}
],
"slots": [
{
"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."
}
]
},
{
"kind": "class",
"description": "Triggers an action, submits a form, or navigates to another location.",
"name": "NooraButton",
"tagName": "noora-button",
"customElement": true,
"superclass": {
"name": "LitElement",
"package": "lit"
},
"members": [
{
"kind": "field",
"name": "autofocus",
"description": "Focuses the button when the page loads.",
"type": {
"text": "boolean"
},
"attribute": "autofocus",
"default": "false"
},
{
"kind": "field",
"name": "disabled",
"description": "Prevents activation and form submission.",
"type": {
"text": "boolean"
},
"attribute": "disabled",
"default": "false"
},
{
"kind": "field",
"name": "download",
"description": "Downloads the linked resource, optionally using this value as the filename.",
"type": {
"text": "string | undefined"
},
"attribute": "download"
},
{
"kind": "field",
"name": "formId",
"description": "Associates the button with a form by element identifier.",
"type": {
"text": "string | undefined"
},
"attribute": "form"
},
{
"kind": "field",
"name": "formAction",
"description": "Overrides the associated form action for this submit button.",
"type": {
"text": "string | undefined"
},
"attribute": "formaction"
},
{
"kind": "field",
"name": "formEnctype",
"description": "Overrides the associated form encoding type for this submit button.",
"type": {
"text": "string | undefined"
},
"attribute": "formenctype"
},
{
"kind": "field",
"name": "formMethod",
"description": "Overrides the associated form method for this submit button.",
"type": {
"text": "string | undefined"
},
"attribute": "formmethod"
},
{
"kind": "field",
"name": "formNoValidate",
"description": "Skips validation when this button submits its associated form.",
"type": {
"text": "boolean"
},
"attribute": "formnovalidate",
"default": "false"
},
{
"kind": "field",
"name": "formTarget",
"description": "Overrides where the associated form response is displayed.",
"type": {
"text": "string | undefined"
},
"attribute": "formtarget"
},
{
"kind": "field",
"name": "href",
"description": "Renders the control as a link to this location.",
"type": {
"text": "string"
},
"attribute": "href",
"default": "\"\""
},
{
"kind": "field",
"name": "iconOnly",
"description": "Uses the default slot as the entire button content. An accessible label is required.",
"type": {
"text": "boolean"
},
"attribute": "icon-only",
"default": "false"
},
{
"kind": "field",
"name": "label",
"description": "Provides fallback text when the default slot is empty.",
"type": {
"text": "string"
},
"attribute": "label",
"default": "\"\""
},
{
"kind": "field",
"name": "name",
"description": "Sets the form field name submitted with the button value.",
"type": {
"text": "string"
},
"attribute": "name",
"default": "\"\""
},
{
"kind": "field",
"name": "rel",
"description": "Sets the relationship between the current page and a linked resource.",
"type": {
"text": "string | undefined"
},
"attribute": "rel"
},
{
"kind": "field",
"name": "size",
"description": "Controls the button dimensions and text size.",
"type": {
"text": "\"small\" | \"medium\" | \"large\""
},
"attribute": "size",
"default": "\"large\""
},
{
"kind": "field",
"name": "target",
"description": "Controls where a linked resource is opened.",
"type": {
"text": "string | undefined"
},
"attribute": "target"
},
{
"kind": "field",
"name": "type",
"description": "Controls native button behavior when href is absent.",
"type": {
"text": "\"button\" | \"reset\" | \"submit\""
},
"attribute": "type",
"default": "\"submit\""
},
{
"kind": "field",
"name": "value",
"description": "Sets the form value submitted with the button name.",
"type": {
"text": "string"
},
"attribute": "value",
"default": "\"\""
},
{
"kind": "field",
"name": "variant",
"description": "Controls the visual emphasis and semantic intent.",
"type": {
"text": "\"primary\" | \"secondary\" | \"destructive\""
},
"attribute": "variant",
"default": "\"primary\""
},
{
"kind": "field",
"name": "control",
"description": "The native link or button rendered inside the component.",
"type": {
"text": "HTMLAnchorElement | HTMLButtonElement | null"
},
"readonly": true
},
{
"kind": "field",
"name": "form",
"description": "The form associated with the button, if one exists.",
"type": {
"text": "HTMLFormElement | null"
},
"readonly": true
}
],
"attributes": [
{
"name": "aria-describedby",
"description": "Identifies the element that describes the button.",
"type": {
"text": "string"
}
},
{
"name": "aria-label",
"description": "Provides an accessible name when visible text is unavailable.",
"type": {
"text": "string"
}
},
{
"name": "aria-labelledby",
"description": "Identifies the element that labels the button.",
"type": {
"text": "string"
}
},
{
"name": "title",
"description": "Provides advisory information for the button.",
"type": {
"text": "string"
}
},
{
"name": "autofocus",
"description": "Focuses the button when the page loads.",
"type": {
"text": "boolean"
},
"fieldName": "autofocus",
"default": "false"
},
{
"name": "disabled",
"description": "Prevents activation and form submission.",
"type": {
"text": "boolean"
},
"fieldName": "disabled",
"default": "false"
},
{
"name": "download",
"description": "Downloads the linked resource, optionally using this value as the filename.",
"type": {
"text": "string"
},
"fieldName": "download"
},
{
"name": "form",
"description": "Associates the button with a form by element identifier.",
"type": {
"text": "string"
},
"fieldName": "formId"
},
{
"name": "formaction",
"description": "Overrides the associated form action for this submit button.",
"type": {
"text": "string"
},
"fieldName": "formAction"
},
{
"name": "formenctype",
"description": "Overrides the associated form encoding type for this submit button.",
"type": {
"text": "string"
},
"fieldName": "formEnctype"
},
{
"name": "formmethod",
"description": "Overrides the associated form method for this submit button.",
"type": {
"text": "string"
},
"fieldName": "formMethod"
},
{
"name": "formnovalidate",
"description": "Skips validation when this button submits its associated form.",
"type": {
"text": "boolean"
},
"fieldName": "formNoValidate",
"default": "false"
},
{
"name": "formtarget",
"description": "Overrides where the associated form response is displayed.",
"type": {
"text": "string"
},
"fieldName": "formTarget"
},
{
"name": "href",
"description": "Renders the control as a link to this location.",
"type": {
"text": "string"
},
"fieldName": "href",
"default": "\"\""
},
{
"name": "icon-only",
"description": "Uses the default slot as the entire button content. An accessible label is required.",
"type": {
"text": "boolean"
},
"fieldName": "iconOnly",
"default": "false"
},
{
"name": "label",
"description": "Provides fallback text when the default slot is empty.",
"type": {
"text": "string"
},
"fieldName": "label",
"default": "\"\""
},
{
"name": "name",
"description": "Sets the form field name submitted with the button value.",
"type": {
"text": "string"
},
"fieldName": "name",
"default": "\"\""
},
{
"name": "rel",
"description": "Sets the relationship between the current page and a linked resource.",
"type": {
"text": "string"
},
"fieldName": "rel"
},
{
"name": "size",
"description": "Controls the button dimensions and text size.",
"type": {
"text": "\"small\" | \"medium\" | \"large\""
},
"fieldName": "size",
"default": "\"large\""
},
{
"name": "target",
"description": "Controls where a linked resource is opened.",
"type": {
"text": "string"
},
"fieldName": "target"
},
{
"name": "type",
"description": "Controls native button behavior when href is absent.",
"type": {
"text": "\"button\" | \"reset\" | \"submit\""
},
"fieldName": "type",
"default": "\"submit\""
},
{
"name": "value",
"description": "Sets the form value submitted with the button name.",
"type": {
"text": "string"
},
"fieldName": "value",
"default": "\"\""
},
{
"name": "variant",
"description": "Controls the visual emphasis and semantic intent.",
"type": {
"text": "\"primary\" | \"secondary\" | \"destructive\""
},
"fieldName": "variant",
"default": "\"primary\""
}
],
"slots": [
{
"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."
}
]
}
],
"exports": [
{
"kind": "js",
"name": "NooraBadge",
"declaration": {
"name": "NooraBadge",
"module": "./priv/static/noora-web-components.js"
}
},
{
"kind": "custom-element-definition",
"name": "noora-badge",
"declaration": {
"name": "NooraBadge",
"module": "./priv/static/noora-web-components.js"
}
},
{
"kind": "js",
"name": "NooraButton",
"declaration": {
"name": "NooraButton",
"module": "./priv/static/noora-web-components.js"
}
},
{
"kind": "custom-element-definition",
"name": "noora-button",
"declaration": {
"name": "NooraButton",
"module": "./priv/static/noora-web-components.js"
}
}
]
}
]
}