Packages
noora
0.85.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
types/web-components.d.ts
// Generated by scripts/generate-web-components.js. Do not edit directly.
/**
* Labels an item with compact status or categorization information.
*
* @element noora-badge
* @slot - The visible label.
* @slot icon - An icon displayed before the label. It takes precedence over dot.
* @csspart badge - The badge container.
* @csspart icon - The icon or dot container.
* @csspart label - The visible label.
*/
export class NooraBadge extends HTMLElement {
/** Controls whether the badge uses a solid or light fill. */
appearance: "fill" | "light-fill";
/** Controls the semantic color. Disabled badges ignore this value. */
color: "neutral" | "destructive" | "warning" | "attention" | "success" | "information" | "focus" | "primary" | "secondary";
/** Controls the badge dimensions and text size. */
size: "small" | "large";
/** Uses the disabled presentation regardless of color. */
disabled: boolean;
/** Displays a dot before the label when the icon slot is empty. */
dot: boolean;
/** Hides the label and displays only the icon slot. */
iconOnly: boolean;
/** Provides fallback text when the default slot is empty. */
label: string;
}
export function registerNooraBadge(): void;
/**
* Triggers an action, submits a form, or navigates to another location.
*
* @element noora-button
* @slot - The visible label, or the complete content when icon-only is present.
* @slot icon-left - An icon displayed before the label.
* @slot icon-right - An icon displayed after the label.
* @csspart control - The native link or button control.
*/
export class NooraButton extends HTMLElement {
/** Focuses the button when the page loads. */
autofocus: boolean;
/** Prevents activation and form submission. */
disabled: boolean;
/** Downloads the linked resource, optionally using this value as the filename. */
download: string | undefined;
/** Associates the button with a form by element identifier. */
formId: string | undefined;
/** Overrides the associated form action for this submit button. */
formAction: string | undefined;
/** Overrides the associated form encoding type for this submit button. */
formEnctype: string | undefined;
/** Overrides the associated form method for this submit button. */
formMethod: string | undefined;
/** Skips validation when this button submits its associated form. */
formNoValidate: boolean;
/** Overrides where the associated form response is displayed. */
formTarget: string | undefined;
/** Renders the control as a link to this location. */
href: string;
/** Uses the default slot as the entire button content. An accessible label is required. */
iconOnly: boolean;
/** Provides fallback text when the default slot is empty. */
label: string;
/** Sets the form field name submitted with the button value. */
name: string;
/** Sets the relationship between the current page and a linked resource. */
rel: string | undefined;
/** Controls the button dimensions and text size. */
size: "small" | "medium" | "large";
/** Controls where a linked resource is opened. */
target: string | undefined;
/** Controls native button behavior when href is absent. */
type: "button" | "reset" | "submit";
/** Sets the form value submitted with the button name. */
value: string;
/** Controls the visual emphasis and semantic intent. */
variant: "primary" | "secondary" | "destructive";
/** The native link or button rendered inside the component. */
readonly control: HTMLAnchorElement | HTMLButtonElement | null;
/** The form associated with the button, if one exists. */
readonly form: HTMLFormElement | null;
}
export function registerNooraButton(): void;
declare global {
interface HTMLElementTagNameMap {
"noora-badge": NooraBadge;
"noora-button": NooraButton;
}
}