{ "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json", "name": "@arclux/arc-ui", "version": "4.2.2", "description-markup": "markdown", "contributions": { "html": { "elements": [ { "name": "arc-accordion-item", "description": "An individual collapsible section inside an Accordion. The question attribute supplies the\nclickable header text, and slotted children become the expandable body content.\n---\n\n\n### **Slots:**\n - _default_ - Default content.", "doc-url": "", "attributes": [ { "name": "question", "description": "The heading text displayed on the trigger button. Should be a concise, scannable label or question.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "answer", "description": "Answer content from slotted children" }, { "name": "question", "description": "The heading text displayed on the trigger button. Should be a concise, scannable label or question.", "type": "string" } ], "events": [] } }, { "name": "arc-accordion", "description": "Expandable content sections with smooth height animations. Ideal for FAQs, settings panels, and\nany UI that benefits from progressive disclosure.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **accordion**", "doc-url": "", "attributes": [ { "name": "multiple", "description": "When true, allows multiple accordion panels to be open simultaneously. When false (default), opening one panel closes any other open panel.", "value": { "type": "boolean", "default": "false" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "multiple", "description": "When true, allows multiple accordion panels to be open simultaneously. When false (default), opening one panel closes any other open panel.", "type": "boolean" } ], "events": [] } }, { "name": "arc-aspect-ratio", "description": "Container that enforces a consistent width-to-height ratio on its content, ideal for images,\nvideos, and embedded media.\n---\n\n\n### **Methods:**\n - **parseRatio(value)** - `W/H` if the string is a usable ratio, else null.\n\nA zero on either side is rejected rather than passed through: `0/5` matched\nthe old format check, reached the CSS as `aspect-ratio: 0 / 5`, and\ncollapsed the box. The guard for exactly that (`if (w === 0) …`) existed —\ninside `_paddingFallback`, a getter the render never called, so the check\nhad been written and then stranded. That getter is gone; its docstring\npromised a padding-top fallback \"for browsers that don't support the\naspect-ratio CSS property\" and nothing rendered one, which is the same\ndoc/code drift as the rest of this batch.\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **container**\n- **inner**", "doc-url": "", "attributes": [ { "name": "ratio", "description": "Aspect ratio as a `W/H` string. Supports integers and decimals. An unparseable value, or one with a zero on either side, is normalised **on the property** to `16/9` — so reading `ratio` back always gives the ratio the component is actually using.", "value": { "type": "string", "default": "'16/9'" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "ratio", "description": "Aspect ratio as a `W/H` string. Supports integers and decimals. An unparseable value, or one with a zero on either side, is normalised **on the property** to `16/9` — so reading `ratio` back always gives the ratio the component is actually using.", "type": "string" } ], "events": [] } }, { "name": "arc-avatar-group", "description": "Stack of avatars with overflow count badge.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **group**\n- **overflow**", "doc-url": "", "attributes": [ { "name": "max", "description": "Maximum number of avatars to display. Excess avatars are hidden and a \"+N\" overflow badge is shown.", "value": { "type": "number", "default": "Infinity" } }, { "name": "overlap", "description": "Overlap density preset. sm = -8px, md = -12px, lg = -16px negative margin between avatars.", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "max", "description": "Maximum number of avatars to display. Excess avatars are hidden and a \"+N\" overflow badge is shown.", "type": "number" }, { "name": "overlap", "description": "Overlap density preset. sm = -8px, md = -12px, lg = -16px negative margin between avatars.", "type": "'sm' | 'md' | 'lg'" } ], "events": [] } }, { "name": "arc-avatar", "description": "User avatar with image or initials fallback.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **img**\n- **initials**\n- **avatar**\n- **status**", "doc-url": "", "attributes": [ { "name": "src", "description": "Image URL for the avatar. When provided, renders an `` element. When empty, displays initials derived from the `name` prop.", "value": { "type": "string", "default": "''" } }, { "name": "name", "description": "User name used to generate initials (first letter, uppercased) and as the `alt` text / `aria-label` for the avatar.", "value": { "type": "string", "default": "''" } }, { "name": "size", "description": "Controls avatar dimensions: `sm` (32px), `md` (40px), `lg` (56px).", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" } }, { "name": "shape", "description": "Controls the avatar shape. Options: 'circle', 'square', 'rounded'.", "value": { "type": "'circle' | 'square' | 'rounded'", "default": "'circle'" } }, { "name": "status", "description": "Shows a status indicator dot. Empty (the default) shows none. An unrecognised value falls back to empty rather than rendering an uncoloured dot that screen readers announce by its bogus name.", "value": { "type": "'' | 'online' | 'offline' | 'busy' | 'away'", "default": "''" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "src", "description": "Image URL for the avatar. When provided, renders an `` element. When empty, displays initials derived from the `name` prop.", "type": "string" }, { "name": "name", "description": "User name used to generate initials (first letter, uppercased) and as the `alt` text / `aria-label` for the avatar.", "type": "string" }, { "name": "size", "description": "Controls avatar dimensions: `sm` (32px), `md` (40px), `lg` (56px).", "type": "'sm' | 'md' | 'lg'" }, { "name": "status", "description": "Shows a status indicator dot. Empty (the default) shows none. An unrecognised value falls back to empty rather than rendering an uncoloured dot that screen readers announce by its bogus name.", "type": "'' | 'online' | 'offline' | 'busy' | 'away'" }, { "name": "shape", "description": "Controls the avatar shape. Options: 'circle', 'square', 'rounded'.", "type": "'circle' | 'square' | 'rounded'" } ], "events": [] } }, { "name": "arc-card", "description": "Content container with subtle border styling and hover effects. Links the entire card surface\nwhen an href is provided, creating a seamless clickable area with an animated gradient border.\n---\n\n\n### **Slots:**\n - _default_ - Default content. Wrapping the content in a single `` adopts it as the card's link — the recommended form for cards that must work before hydration or without JavaScript. The anchor fills the padded surface; the `footer` slot stays outside it so footer actions remain separately clickable.\n- **footer**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **body**\n- **footer**\n- **card**\n- **inner**", "doc-url": "", "attributes": [ { "name": "href", "description": "When set, renders the card as an anchor element, making the entire card surface a clickable link. On hover, the border transitions to a blue-to-violet gradient and the inner surface gains a lift shadow.", "value": { "type": "string", "default": "''" } }, { "name": "padding", "description": "Controls internal spacing. Options: 'none', 'sm', 'md', 'lg'.", "value": { "type": "'none' | 'sm' | 'md' | 'lg'", "default": "'md'" } }, { "name": "interactive", "description": "Enables hover effects for clickable cards that trigger JS instead of navigating via href.", "value": { "type": "boolean", "default": "false" } } ], "slots": [ { "name": "", "description": "Default content. Wrapping the content in a single `` adopts it as the card's link — the recommended form for cards that must work before hydration or without JavaScript. The anchor fills the padded surface; the `footer` slot stays outside it so footer actions remain separately clickable." }, { "name": "footer" } ], "events": [], "js": { "properties": [ { "name": "href", "description": "When set, renders the card as an anchor element, making the entire card surface a clickable link. On hover, the border transitions to a blue-to-violet gradient and the inner surface gains a lift shadow.", "type": "string" }, { "name": "padding", "description": "Controls internal spacing. Options: 'none', 'sm', 'md', 'lg'.", "type": "'none' | 'sm' | 'md' | 'lg'" }, { "name": "interactive", "description": "Enables hover effects for clickable cards that trigger JS instead of navigating via href.", "type": "boolean" } ], "events": [] } }, { "name": "arc-carousel", "description": "A scrollable slide container with navigation arrows, dot indicators, auto-play, looping, and\nkeyboard controls.\n---\n\n\n### **Events:**\n - **arc-change** - Fired when the active slide changes\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **carousel**\n- **viewport**\n- **arrow-prev**\n- **arrow-next**\n- **dots**\n- **dot**", "doc-url": "", "attributes": [ { "name": "autoPlay", "description": "Enables automatic slide advancement on a timer. Pauses on hover and focus, respects prefers-reduced-motion.", "value": { "type": "boolean", "default": "false" } }, { "name": "interval", "description": "Auto-play interval in milliseconds between slide transitions.", "value": { "type": "number", "default": "5000" } }, { "name": "loop", "description": "Enables wrapping at the edges so the last slide connects to the first and vice versa.", "value": { "type": "boolean", "default": "true" } }, { "name": "showDots", "description": "Shows dot indicators below the viewport for direct slide navigation.", "value": { "type": "boolean", "default": "true" } }, { "name": "showArrows", "description": "Shows previous/next arrow buttons on the left and right edges of the viewport.", "value": { "type": "boolean", "default": "true" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [ { "name": "arc-change", "type": "CustomEvent", "description": "Fired when the active slide changes" } ], "js": { "properties": [ { "name": "autoPlay", "description": "Enables automatic slide advancement on a timer. Pauses on hover and focus, respects prefers-reduced-motion.", "type": "boolean" }, { "name": "interval", "description": "Auto-play interval in milliseconds between slide transitions.", "type": "number" }, { "name": "loop", "description": "Enables wrapping at the edges so the last slide connects to the first and vice versa.", "type": "boolean" }, { "name": "showDots", "description": "Shows dot indicators below the viewport for direct slide navigation.", "type": "boolean" }, { "name": "showArrows", "description": "Shows previous/next arrow buttons on the left and right edges of the viewport.", "type": "boolean" } ], "events": [ { "name": "arc-change", "type": "CustomEvent", "description": "Fired when the active slide changes" } ] } }, { "name": "arc-collapsible", "description": "A disclosure widget with a clickable heading that toggles the visibility of its slotted content\nusing a smooth CSS grid animation.\n---\n\n\n### **Events:**\n - **arc-toggle** - Fired when the collapsible expands or collapses\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **collapsible**\n- **trigger**\n- **heading**\n- **body**", "doc-url": "", "attributes": [ { "name": "open", "description": "Controls whether the content is visible. Reflected as an attribute and toggleable by clicking the heading.", "value": { "type": "boolean", "default": "false" } }, { "name": "heading", "description": "Text displayed in the clickable trigger row. Also used as the ARIA label for the content region.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [ { "name": "arc-toggle", "type": "CustomEvent<{ open: boolean }>", "description": "Fired when the collapsible expands or collapses" } ], "js": { "properties": [ { "name": "heading", "description": "Text displayed in the clickable trigger row. Also used as the ARIA label for the content region.", "type": "string" }, { "name": "open", "description": "Controls whether the content is visible. Reflected as an attribute and toggleable by clicking the heading.", "type": "boolean" } ], "events": [ { "name": "arc-toggle", "type": "CustomEvent<{ open: boolean }>", "description": "Fired when the collapsible expands or collapses" } ] } }, { "name": "arc-color-swatch", "description": "Color sample square with label — useful for token docs.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **swatch**\n- **color**\n- **label**", "doc-url": "", "attributes": [ { "name": "color", "description": "Any valid CSS color value applied as the swatch background", "value": { "type": "string", "default": "'#4d7ef7'" } }, { "name": "label", "description": "Display label below the swatch; falls back to the color value if empty", "value": { "type": "string", "default": "''" } }, { "name": "size", "description": "Controls swatch dimensions: sm (32px), md (48px), lg (64px)", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "color", "description": "Any valid CSS color value applied as the swatch background", "type": "string" }, { "name": "label", "description": "Display label below the swatch; falls back to the color value if empty", "type": "string" }, { "name": "size", "description": "Controls swatch dimensions: sm (32px), md (48px), lg (64px)", "type": "'sm' | 'md' | 'lg'" } ], "events": [] } }, { "name": "arc-cta-banner", "description": "Full-width call-to-action banner with gradient background, eyebrow text, headline, body copy,\nand action buttons. Ideal for landing page CTAs, marketing sections, and page closers.\n---\n\n\n### **Slots:**\n - **eyebrow**\n- **headline**\n- _default_ - Default content.\n- **actions**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **container**\n- **background**\n- **inner**\n- **eyebrow**\n- **headline**\n- **body**\n- **actions**", "doc-url": "", "attributes": [ { "name": "eyebrow", "description": "Small label text displayed above the headline. Typically a short phrase like \"Ready to build?\" that sets context.", "value": { "type": "string", "default": "''" } }, { "name": "headline", "description": "Main headline text rendered with gradient display styling. Keep it concise and action-oriented.", "value": { "type": "string", "default": "''" } }, { "name": "nogradient", "description": "When true, disables the radial gradient background effect for quieter contexts.", "value": { "type": "boolean", "default": "false" } } ], "slots": [ { "name": "eyebrow" }, { "name": "headline" }, { "name": "", "description": "Default content." }, { "name": "actions" } ], "events": [], "js": { "properties": [ { "name": "eyebrow", "description": "Small label text displayed above the headline. Typically a short phrase like \"Ready to build?\" that sets context.", "type": "string" }, { "name": "headline", "description": "Main headline text rendered with gradient display styling. Keep it concise and action-oriented.", "type": "string" }, { "name": "nogradient", "description": "When true, disables the radial gradient background effect for quieter contexts.", "type": "boolean" } ], "events": [] } }, { "name": "arc-divider", "description": "Horizontal rule with multiple visual styles from subtle to glowing.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **divider**\n- **line**\n- **label**", "doc-url": "", "attributes": [ { "name": "variant", "description": "Visual style. `subtle`, `glow` and the three `line-*` styles are the illuminated set. `dashed`, `dotted` and `fade` are the plain rule styles absorbed from `arc-separator` when it was merged here, along with `line`, its flat single-color rule. `fade` is the flat edge-to-edge fade, as distinct from `subtle`, which is the token gradient; `line` is the flat rule with no fade at all.", "value": { "type": "'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient' | 'dashed' | 'dotted' | 'fade' | 'line'", "default": "'subtle'" } }, { "name": "align", "description": "Shifts the gradient origin so it fades from one edge instead of both. Empty (the default) fades from both edges. Useful for asymmetric layouts where the divider should visually connect to content on one side.", "value": { "type": "'' | 'left' | 'right'", "default": "''" } }, { "name": "vertical", "description": "Renders the divider as a vertical line. Switches to `inline-flex` display and rotates gradient directions to run top-to-bottom. Use inside flex rows to separate inline content.", "value": { "type": "boolean", "default": "false" } }, { "name": "label", "description": "Text displayed in the center of the divider, splitting it into two lines. Common use: 'OR' between form options. Only applies to horizontal dividers.", "value": { "type": "string", "default": "''" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "label", "description": "Text displayed in the center of the divider, splitting it into two lines. Common use: 'OR' between form options. Only applies to horizontal dividers.", "type": "string" }, { "name": "variant", "description": "Visual style. `subtle`, `glow` and the three `line-*` styles are the illuminated set. `dashed`, `dotted` and `fade` are the plain rule styles absorbed from `arc-separator` when it was merged here, along with `line`, its flat single-color rule. `fade` is the flat edge-to-edge fade, as distinct from `subtle`, which is the token gradient; `line` is the flat rule with no fade at all.", "type": "'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient' | 'dashed' | 'dotted' | 'fade' | 'line'" }, { "name": "align", "description": "Shifts the gradient origin so it fades from one edge instead of both. Empty (the default) fades from both edges. Useful for asymmetric layouts where the divider should visually connect to content on one side.", "type": "'' | 'left' | 'right'" }, { "name": "vertical", "description": "Renders the divider as a vertical line. Switches to `inline-flex` display and rotates gradient directions to run top-to-bottom. Use inside flex rows to separate inline content.", "type": "boolean" } ], "events": [] } }, { "name": "arc-empty-state", "description": "Placeholder for empty lists or search results.\n---\n\n\n### **Slots:**\n - **icon**\n- **actions**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **container**\n- **icon**\n- **heading**\n- **description**\n- **actions**", "doc-url": "", "attributes": [ { "name": "heading", "description": "Main heading text displayed below the icon", "value": { "type": "string", "default": "''" } }, { "name": "description", "description": "Supporting text displayed below the heading, max-width 360px", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "icon" }, { "name": "actions" } ], "events": [], "js": { "properties": [ { "name": "heading", "description": "Main heading text displayed below the icon", "type": "string" }, { "name": "description", "description": "Supporting text displayed below the heading, max-width 360px", "type": "string" } ], "events": [] } }, { "name": "arc-feature-card", "description": "Card with icon, heading, description, and animated hover effects.\n---\n\n\n### **Slots:**\n - **icon**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **inner**\n- **icon**\n- **title**\n- **description**\n- **action**\n- **card**", "doc-url": "", "attributes": [ { "name": "icon", "description": "Icon text or emoji displayed in the icon box", "value": { "type": "string", "default": "''" } }, { "name": "heading", "description": "Card title", "value": { "type": "string", "default": "''" } }, { "name": "description", "description": "Card body text", "value": { "type": "string", "default": "''" } }, { "name": "href", "description": "Makes the card a link", "value": { "type": "string", "default": "''" } }, { "name": "action", "description": "Action label (e.g. \"Learn more\") shown at the bottom of the card when href is set. Hidden when empty or when no href is provided.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "icon" } ], "events": [], "js": { "properties": [ { "name": "icon", "description": "Icon text or emoji displayed in the icon box", "type": "string" }, { "name": "heading", "description": "Card title", "type": "string" }, { "name": "description", "description": "Card body text", "type": "string" }, { "name": "href", "description": "Makes the card a link", "type": "string" }, { "name": "action", "description": "Action label (e.g. \"Learn more\") shown at the bottom of the card when href is set. Hidden when empty or when no href is provided.", "type": "string" } ], "events": [] } }, { "name": "arc-hotspot", "description": "A single glowing pin inside an Image Hotspots surface. The pin sits at percentage coordinates\nover the slotted image and opens a small anchored popover holding the slotted detail content.\nInside an arc-image-hotspots parent, opening one pin closes any other open pin.\n---\n\n\n### **Events:**\n - **arc-open** - Fired when the popover opens. detail.value carries the label, or the pin's index within its parent when no label is set.\n- **arc-close** - Fired before the popover closes and cancelable — preventDefault() vetoes the close. detail.value matches arc-open.\n\n### **Methods:**\n - **close(restoreFocus: _boolean_): _void_** - Close the popover, firing the cancelable `arc-close` first — so a listener\nthat calls `preventDefault()` keeps it open, whoever asked for the close.\n\narc-image-hotspots calls this to enforce one-open-at-a-time, which is why\na consumer's veto is honoured there too and not only on a manual close.\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **pin**\n- **panel**", "doc-url": "", "attributes": [ { "name": "x", "description": "Horizontal position of the pin as a percentage of the image width, from 0 (left edge) to 100 (right edge). Values outside the range are clamped; a non-numeric value falls back to 50.", "value": { "type": "number", "default": "50" } }, { "name": "y", "description": "Vertical position of the pin as a percentage of the image height, from 0 (top edge) to 100 (bottom edge). Values outside the range are clamped; a non-numeric value falls back to 50.", "value": { "type": "number", "default": "50" } }, { "name": "label", "description": "Accessible name for the pin button, repeated as the heading of the popover. Always set it — without a label the pin announces nothing useful to a screen reader.", "value": { "type": "string", "default": "''" } }, { "name": "open", "description": "Whether the pin's popover is currently visible. Reflected as an attribute. Opens on click; closes on Escape, outside click, or a second click on the pin.", "value": { "type": "boolean", "default": "false" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [ { "name": "arc-open", "type": "CustomEvent<{value: string | number}>", "description": "Fired when the popover opens. detail.value carries the label, or the pin's index within its parent when no label is set." }, { "name": "arc-close", "type": "CustomEvent<{value: string | number}>", "description": "Fired before the popover closes and cancelable — preventDefault() vetoes the close. detail.value matches arc-open." } ], "js": { "properties": [ { "name": "label", "description": "Accessible name for the pin button, repeated as the heading of the popover. Always set it — without a label the pin announces nothing useful to a screen reader.", "type": "string" }, { "name": "x", "description": "Horizontal position of the pin as a percentage of the image width, from 0 (left edge) to 100 (right edge). Values outside the range are clamped; a non-numeric value falls back to 50.", "type": "number" }, { "name": "y", "description": "Vertical position of the pin as a percentage of the image height, from 0 (top edge) to 100 (bottom edge). Values outside the range are clamped; a non-numeric value falls back to 50.", "type": "number" }, { "name": "open", "description": "Whether the pin's popover is currently visible. Reflected as an attribute. Opens on click; closes on Escape, outside click, or a second click on the pin.", "type": "boolean" } ], "events": [ { "name": "arc-open", "type": "CustomEvent<{value: string | number}>", "description": "Fired when the popover opens. detail.value carries the label, or the pin's index within its parent when no label is set." }, { "name": "arc-close", "type": "CustomEvent<{value: string | number}>", "description": "Fired before the popover closes and cancelable — preventDefault() vetoes the close. detail.value matches arc-open." } ] } }, { "name": "arc-icon-library", "description": "Switches the icon set every arc-icon on the page resolves against. Renders nothing itself —\nput one anywhere in the document and it applies globally.\n---\n", "doc-url": "", "attributes": [ { "name": "name", "description": "Which registered icon library to resolve names against — `phosphor` or `lucide` from `@arclux/arc-ui-icons`, or the name a custom library was registered under.", "value": { "type": "string", "default": "''" } } ], "events": [], "js": { "properties": [ { "name": "name", "description": "Which registered icon library to resolve names against — `phosphor` or `lucide` from `@arclux/arc-ui-icons`, or the name a custom library was registered under.", "type": "string" } ], "events": [] } }, { "name": "arc-icon", "description": "Renders icons by name from any registered library — Phosphor (1,500+) and Lucide (1,900+) ship in\n`@arclux/arc-ui-icons` — with one-line library switching and custom icon registration.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **icon**", "doc-url": "", "attributes": [ { "name": "name", "description": "Icon name to look up in the icon registry. When provided, renders the matching SVG. When empty, falls back to slotted content.", "value": { "type": "string", "default": "''" } }, { "name": "size", "description": "Icon dimensions: `xs` (12px), `sm` (16px), `md` (20px), `lg` (24px), `xl` (32px).", "value": { "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'", "default": "'sm'" } }, { "name": "label", "description": "Accessibility label. When provided, sets `role=\"img\"` and `aria-label`. When empty, sets `role=\"presentation\"` and `aria-hidden=\"true\"`.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "name", "description": "Icon name to look up in the icon registry. When provided, renders the matching SVG. When empty, falls back to slotted content.", "type": "string" }, { "name": "size", "description": "Icon dimensions: `xs` (12px), `sm` (16px), `md` (20px), `lg` (24px), `xl` (32px).", "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, { "name": "label", "description": "Accessibility label. When provided, sets `role=\"img\"` and `aria-label`. When empty, sets `role=\"presentation\"` and `aria-hidden=\"true\"`.", "type": "string" } ], "events": [] } }, { "name": "arc-image-compare", "description": "Before/after image comparison: two layered images with a draggable divider revealing one over\nthe other. The `before` layer sits on top, clipped to the region between the start edge and the\ndivider; dragging the handle (or pressing arrow keys on it) moves the reveal line.\n\nThe clip is pure CSS driven by a private custom property, so the component server-renders at\nits initial position with no client-side measurement.\n\n`orientation` is named for the axis the divider *moves* along: `horizontal` (the default)\nslides a vertical divider line left and right; `vertical` slides a horizontal divider line up\nand down.\n\nThe position axis is logical: 0 is the inline-start edge (left in LTR, right in RTL) for\nhorizontal orientation, and the block-start edge (top) for vertical. Before/after has no\ninherent screen direction — unlike an audio timeline there is no convention fixing it — so the\ncontrol mirrors with the document like the rest of the reading order. Arrow keys follow the\ndivider's visible motion.\n---\n\n\n### **Events:**\n - **arc-input** - Fired continuously while dragging (every pointer move) and on each keyboard nudge. `value` is the position, 0-100. Use for live readouts.\n- **arc-change** - Fired once when the position commits: on pointer release, or with each keyboard nudge. Use for persisting the position.\n\n### **Slots:**\n - **before** - The \"before\" image (`` or ``), revealed between the start edge and the divider.\n- **after** - The \"after\" image (`` or ``). Sits underneath and sizes the component.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **container** - The clipping frame wrapping both layers.\n- **before** - The clipped before layer.\n- **after** - The base after layer.\n- **divider** - The hairline divider.\n- **handle** - The circular grab handle (the focusable slider).\n- **label-before** - The before caption chip.\n- **label-after** - The after caption chip.", "doc-url": "", "attributes": [ { "name": "position", "description": "Divider position as a percentage, 0 to 100. 0 shows only the after layer, 100 only the before layer. Clamped, reflected, and updated as the user drags.", "value": { "type": "number", "default": "50" } }, { "name": "orientation", "description": "Axis the divider moves along. `horizontal` (default) moves a vertical divider line left-right; `vertical` moves a horizontal line up-down.", "value": { "type": "'horizontal' | 'vertical'", "default": "'horizontal'" } }, { "name": "before-label", "description": "Optional caption for the before layer, rendered as a floating chip in the start corner.", "value": { "type": "string", "default": "''" } }, { "name": "after-label", "description": "Optional caption for the after layer, rendered as a floating chip in the end corner.", "value": { "type": "string", "default": "''" } }, { "name": "label", "description": "Accessible name for the divider handle, announced as the slider label.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "before", "description": "The \"before\" image (`` or ``), revealed between the start edge and the divider." }, { "name": "after", "description": "The \"after\" image (`` or ``). Sits underneath and sizes the component." } ], "events": [ { "name": "arc-input", "type": "CustomEvent<{ value: number }>", "description": "Fired continuously while dragging (every pointer move) and on each keyboard nudge. `value` is the position, 0-100. Use for live readouts." }, { "name": "arc-change", "type": "CustomEvent<{ value: number }>", "description": "Fired once when the position commits: on pointer release, or with each keyboard nudge. Use for persisting the position." } ], "js": { "properties": [ { "name": "beforeLabel", "description": "Optional caption for the before layer, rendered as a floating chip in the start corner.", "type": "string" }, { "name": "afterLabel", "description": "Optional caption for the after layer, rendered as a floating chip in the end corner.", "type": "string" }, { "name": "label", "description": "Accessible name for the divider handle, announced as the slider label.", "type": "string" }, { "name": "position", "description": "Divider position as a percentage, 0 to 100. 0 shows only the after layer, 100 only the before layer. Clamped, reflected, and updated as the user drags.", "type": "number" }, { "name": "orientation", "description": "Axis the divider moves along. `horizontal` (default) moves a vertical divider line left-right; `vertical` moves a horizontal line up-down.", "type": "'horizontal' | 'vertical'" } ], "events": [ { "name": "arc-input", "type": "CustomEvent<{ value: number }>", "description": "Fired continuously while dragging (every pointer move) and on each keyboard nudge. `value` is the position, 0-100. Use for live readouts." }, { "name": "arc-change", "type": "CustomEvent<{ value: number }>", "description": "Fired once when the position commits: on pointer release, or with each keyboard nudge. Use for persisting the position." } ] } }, { "name": "arc-image-hotspots", "description": "An annotated image: glowing pins positioned over a slotted picture, each opening a small\npopover of detail content. Built for product-feature callouts, annotated screenshots, and\nsimple maps. Slot the image and the arc-hotspot pins together as children — the pins position\nthemselves by percentage coordinates, so source order never matters. The parent keeps one\npopover open at a time; open and close activity arrives as the arc-open and arc-close events\nbubbling up from each arc-hotspot child, with detail.value naming the hotspot.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **container**", "doc-url": "", "attributes": [], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [], "events": [] } }, { "name": "arc-image", "description": "Enhanced image component with shimmer loading skeleton, smooth fade-in transition, error\nfallback, and aspect ratio presets.\n---\n\n\n### **Events:**\n - **arc-load** - Fired when the image successfully loads.\n- **arc-error** - Fired when the image fails to load.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **wrapper**\n- **fallback**\n- **image**", "doc-url": "", "attributes": [ { "name": "src", "description": "Image source URL.", "value": { "type": "string", "default": "''" } }, { "name": "alt", "description": "Alt text for the image. Used as the accessible description.", "value": { "type": "string", "default": "''" } }, { "name": "aspect", "description": "Constrains the container to a fixed aspect ratio, preventing layout shift during loading. Empty (the default) leaves the container unconstrained; an unrecognised ratio falls back to it.", "value": { "type": "'' | '1/1' | '4/3' | '16/9' | '21/9' | '3/4' | '9/16'", "default": "''" } }, { "name": "fit", "description": "CSS object-fit mode controlling how the image fills its container.", "value": { "type": "'cover' | 'contain' | 'fill' | 'none' | 'scale-down'", "default": "'cover'" } }, { "name": "loading", "description": "Native loading strategy. Lazy defers off-screen images until they approach the viewport.", "value": { "type": "'lazy' | 'eager'", "default": "'lazy'" } }, { "name": "fallback", "description": "URL of a fallback image to display if the primary `src` fails to load.", "value": { "type": "string", "default": "''" } } ], "slots": [], "events": [ { "name": "arc-load", "type": "CustomEvent", "description": "Fired when the image successfully loads." }, { "name": "arc-error", "type": "CustomEvent", "description": "Fired when the image fails to load." } ], "js": { "properties": [ { "name": "src", "description": "Image source URL.", "type": "string" }, { "name": "alt", "description": "Alt text for the image. Used as the accessible description.", "type": "string" }, { "name": "fallback", "description": "URL of a fallback image to display if the primary `src` fails to load.", "type": "string" }, { "name": "aspect", "description": "Constrains the container to a fixed aspect ratio, preventing layout shift during loading. Empty (the default) leaves the container unconstrained; an unrecognised ratio falls back to it.", "type": "'' | '1/1' | '4/3' | '16/9' | '21/9' | '3/4' | '9/16'" }, { "name": "fit", "description": "CSS object-fit mode controlling how the image fills its container.", "type": "'cover' | 'contain' | 'fill' | 'none' | 'scale-down'" }, { "name": "loading", "description": "Native loading strategy. Lazy defers off-screen images until they approach the viewport.", "type": "'lazy' | 'eager'" } ], "events": [ { "name": "arc-load", "type": "CustomEvent", "description": "Fired when the image successfully loads." }, { "name": "arc-error", "type": "CustomEvent", "description": "Fired when the image fails to load." } ] } }, { "name": "arc-infinite-scroll", "description": "Intersection Observer-powered container that fires a load event when the user scrolls near the\nbottom, with built-in loading spinner and end-of-list state.\n---\n\n\n### **Events:**\n - **arc-load-more** - Fired when the scroll sentinel enters the viewport, signaling more content should load\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **container**\n- **content**\n- **footer**\n- **end-text**\n- **spinner**", "doc-url": "", "attributes": [ { "name": "threshold", "description": "Distance in pixels from the bottom of the content at which `arc-load-more` fires. Controls how eagerly new data is requested.", "value": { "type": "number", "default": "200" } }, { "name": "loading", "description": "When true, displays a spinner in the footer and suppresses additional `arc-load-more` events.", "value": { "type": "boolean", "default": "false" } }, { "name": "finished", "description": "When true, disconnects the observer and displays \"No more items\" text in the footer.", "value": { "type": "boolean", "default": "false" } }, { "name": "disabled", "description": "Disables the component, disconnects the observer, and reduces opacity to 40%.", "value": { "type": "boolean", "default": "false" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [ { "name": "arc-load-more", "type": "CustomEvent", "description": "Fired when the scroll sentinel enters the viewport, signaling more content should load" } ], "js": { "properties": [ { "name": "threshold", "description": "Distance in pixels from the bottom of the content at which `arc-load-more` fires. Controls how eagerly new data is requested.", "type": "number" }, { "name": "loading", "description": "When true, displays a spinner in the footer and suppresses additional `arc-load-more` events.", "type": "boolean" }, { "name": "finished", "description": "When true, disconnects the observer and displays \"No more items\" text in the footer.", "type": "boolean" }, { "name": "disabled", "description": "Disables the component, disconnects the observer, and reduces opacity to 40%.", "type": "boolean" } ], "events": [ { "name": "arc-load-more", "type": "CustomEvent", "description": "Fired when the scroll sentinel enters the viewport, signaling more content should load" } ] } }, { "name": "arc-lightbox", "description": "Full-screen image viewer on the overlay stack: open from a thumbnail, step through a gallery\nwith wrapping prev/next navigation, zoom to 2x with drag-to-pan, and dismiss with Escape or a\nbackdrop click.\n\nThe gallery is data, not layout: images are supplied through the `images` property rather than\nslotted children, so the closed component renders nothing. Entries may be plain `src` strings or\n`{ src, alt, caption }` objects; the two forms mix freely. The server render stays empty either\nway — a property is one it never sees, and the static JSON attribute form it does see is skipped\nas a closed overlay, which is what keeps a full-size photograph from being fetched for a first\npaint that cannot show it.\n---\n\n\n### **Events:**\n - **arc-change** - Fired when the displayed image changes. `detail.value` is the new index.\n- **arc-close** - Fired when the lightbox closes. Cancelable: call `preventDefault()` to veto the close.\n- **arc-open** - Fired when the lightbox opens\n\n### **Methods:**\n - **show(index: _number_): _void_** - Open the viewer, optionally jumping to a specific image first.\n- **close(): _void_** - Closes the viewer through the cancelable arc-close contract.\n- **next(): _void_** - Advances to the next image, wrapping past the end.\n- **prev(): _void_** - Steps to the previous image, wrapping past the start.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **backdrop**\n- **bar**\n- **counter**\n- **zoom**\n- **close**\n- **prev**\n- **next**\n- **figure**\n- **image**\n- **caption**", "doc-url": "", "attributes": [ { "name": "images", "description": "The gallery to display. Each entry is either a `src` string or an object of shape `{ src, alt, caption }`; `alt` and `caption` are optional. Set as a property, or as a JSON attribute for a gallery that is static.", "value": { "type": "Array", "default": "[]" } }, { "name": "index", "description": "Index of the image currently displayed. Navigation wraps at both ends, so setting it out of range shows the nearest valid image.", "value": { "type": "number", "default": "0" } }, { "name": "open", "description": "Controls the visible state of the viewer. Set to `true` to open at the current `index` and activate the focus trap; set to `false` to close and restore focus to the previously-focused element.", "value": { "type": "boolean", "default": "false" } } ], "slots": [], "events": [ { "name": "arc-change", "type": "CustomEvent<{value: number, index: number}>", "description": "Fired when the displayed image changes. `detail.value` is the new index." }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the lightbox closes. Cancelable: call `preventDefault()` to veto the close." }, { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the lightbox opens" } ], "js": { "properties": [ { "name": "images", "description": "The gallery to display. Each entry is either a `src` string or an object of shape `{ src, alt, caption }`; `alt` and `caption` are optional. Set as a property, or as a JSON attribute for a gallery that is static.", "type": "Array" }, { "name": "index", "description": "Index of the image currently displayed. Navigation wraps at both ends, so setting it out of range shows the nearest valid image.", "type": "number" }, { "name": "open", "description": "Controls the visible state of the viewer. Set to `true` to open at the current `index` and activate the focus trap; set to `false` to close and restore focus to the previously-focused element.", "type": "boolean" } ], "events": [ { "name": "arc-change", "type": "CustomEvent<{value: number, index: number}>", "description": "Fired when the displayed image changes. `detail.value` is the new index." }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the lightbox closes. Cancelable: call `preventDefault()` to veto the close." }, { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the lightbox opens" } ] } }, { "name": "arc-marquee", "description": "Continuously scrolling content strip with configurable speed, direction, gap, and pause-on-hover\nbehavior for logos, testimonials, and announcements.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **track**\n- **group**\n- **group-duplicate**", "doc-url": "", "attributes": [ { "name": "speed", "description": "Scroll speed in pixels per second. The animation duration is calculated from the content width divided by this value.", "value": { "type": "number", "default": "40" } }, { "name": "direction", "description": "Scroll direction. `left` scrolls content from right to left (default), `right` reverses the direction.", "value": { "type": "'left' | 'right'", "default": "'left'" } }, { "name": "pauseOnHover", "description": "When true, the animation pauses while the cursor hovers over the marquee.", "value": { "type": "boolean", "default": "true" } }, { "name": "gap", "description": "CSS length value for the gap between slotted items. Accepts any valid CSS length or custom property.", "value": { "type": "string", "default": "'var(--space-xl)'" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "gap", "description": "CSS length value for the gap between slotted items. Accepts any valid CSS length or custom property.", "type": "string" }, { "name": "speed", "description": "Scroll speed in pixels per second. The animation duration is calculated from the content width divided by this value.", "type": "number" }, { "name": "direction", "description": "Scroll direction. `left` scrolls content from right to left (default), `right` reverses the direction.", "type": "'left' | 'right'" }, { "name": "pauseOnHover", "description": "When true, the animation pauses while the cursor hovers over the marquee.", "type": "boolean" } ], "events": [] } }, { "name": "arc-qr-code", "description": "Client-side QR code renderer that encodes any string into a crisp inline SVG. Themes\nautomatically via currentColor, with an optional contrast card for guaranteed scanability on\ndark backgrounds.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element. Which element that is depends on `contrast`: the card wrapper when it is set, the svg otherwise — which is the case `base` exists for.\n- **svg**\n- **card**", "doc-url": "", "attributes": [ { "name": "value", "description": "The content to encode (URL, text, Wi-Fi string, 2FA URI, …). Empty values render nothing. Values exceeding QR capacity for the chosen level also render nothing.", "value": { "type": "string", "default": "''" } }, { "name": "size", "description": "Rendered width and height of the SVG in pixels. The code is vector-based and stays crisp at any size.", "value": { "type": "number", "default": "160" } }, { "name": "level", "description": "Error-correction level: L (~7% recovery), M (~15%), Q (~25%), H (~30%). Higher levels tolerate more damage/occlusion but produce denser codes.", "value": { "type": "'L' | 'M' | 'Q' | 'H'", "default": "'M'" } }, { "name": "label", "description": "Accessible description announced to screen readers (falls back to \"QR code\"). Describe the purpose, not the encoded value — the value is never exposed by default since it may be a secret.", "value": { "type": "string", "default": "''" } }, { "name": "quietZone", "description": "Width of the empty border around the code, measured in modules. Scanners rely on this margin to find the code; keep at least 2 against busy backgrounds.", "value": { "type": "number", "default": "2" } }, { "name": "contrast", "description": "Renders the code on a white rounded card with forced dark modules, guaranteeing dark-on-light scanability in both themes. Overrides --qr-fg/--qr-bg. Recommended for scan-critical codes.", "value": { "type": "boolean", "default": "false" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "value", "description": "The content to encode (URL, text, Wi-Fi string, 2FA URI, …). Empty values render nothing. Values exceeding QR capacity for the chosen level also render nothing.", "type": "string" }, { "name": "size", "description": "Rendered width and height of the SVG in pixels. The code is vector-based and stays crisp at any size.", "type": "number" }, { "name": "label", "description": "Accessible description announced to screen readers (falls back to \"QR code\"). Describe the purpose, not the encoded value — the value is never exposed by default since it may be a secret.", "type": "string" }, { "name": "level", "description": "Error-correction level: L (~7% recovery), M (~15%), Q (~25%), H (~30%). Higher levels tolerate more damage/occlusion but produce denser codes.", "type": "'L' | 'M' | 'Q' | 'H'" }, { "name": "quietZone", "description": "Width of the empty border around the code, measured in modules. Scanners rely on this margin to find the code; keep at least 2 against busy backgrounds.", "type": "number" }, { "name": "contrast", "description": "Renders the code on a white rounded card with forced dark modules, guaranteeing dark-on-light scanability in both themes. Overrides --qr-fg/--qr-bg. Recommended for scan-critical codes.", "type": "boolean" } ], "events": [] } }, { "name": "arc-scroll-area", "description": "Styled scrollable container with custom thin scrollbar styling for Webkit and Firefox,\nconfigurable orientation, and optional max-height constraint.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **scroll-area**", "doc-url": "", "attributes": [ { "name": "max-height", "description": "CSS max-height value applied to the scrollable container. Use any valid CSS length (e.g. `300px`, `50vh`).", "value": { "type": "string", "default": "''" } }, { "name": "orientation", "description": "Scroll direction. `vertical` shows a vertical scrollbar, `horizontal` shows a horizontal scrollbar, `both` shows both.", "value": { "type": "'vertical' | 'horizontal' | 'both'", "default": "'vertical'" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "maxHeight", "description": "CSS max-height value applied to the scrollable container. Use any valid CSS length (e.g. `300px`, `50vh`).", "type": "string" }, { "name": "orientation", "description": "Scroll direction. `vertical` shows a vertical scrollbar, `horizontal` shows a horizontal scrollbar, `both` shows both.", "type": "'vertical' | 'horizontal' | 'both'" } ], "events": [] } }, { "name": "arc-scroll-indicator", "description": "Thin progress bar that tracks scroll position of the page or a target container. Sticks to the\ntop or bottom edge with accent or gradient fill.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **bar**\n- **fill**", "doc-url": "", "attributes": [ { "name": "target", "description": "CSS selector for the scroll container to track. Defaults to the window when empty.", "value": { "type": "string", "default": "''" } }, { "name": "position", "description": "Which edge the indicator sticks to.", "value": { "type": "'top' | 'bottom'", "default": "'top'" } }, { "name": "size", "description": "Bar thickness: sm (2px), md (3px), lg (4px).", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'sm'" } }, { "name": "color", "description": "Fill color mode. Accent uses `--accent-primary`. Gradient blends from primary to secondary.", "value": { "type": "'accent' | 'gradient'", "default": "'accent'" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "target", "description": "CSS selector for the scroll container to track. Defaults to the window when empty.", "type": "string" }, { "name": "position", "description": "Which edge the indicator sticks to.", "type": "'top' | 'bottom'" }, { "name": "size", "description": "Bar thickness: sm (2px), md (3px), lg (4px).", "type": "'sm' | 'md' | 'lg'" }, { "name": "color", "description": "Fill color mode. Accent uses `--accent-primary`. Gradient blends from primary to secondary.", "type": "'accent' | 'gradient'" } ], "events": [] } }, { "name": "arc-skeleton", "description": "Loading placeholder with shimmer animation.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **skeleton**", "doc-url": "", "attributes": [ { "name": "variant", "description": "Shape of the skeleton: text for lines, circle for avatars, rect for blocks", "value": { "type": "'text' | 'circle' | 'rect'", "default": "'text'" } }, { "name": "width", "description": "CSS width value (e.g. \"200px\", \"100%\")", "value": { "type": "string", "default": "''" } }, { "name": "height", "description": "CSS height value; circle auto-matches width when omitted", "value": { "type": "string", "default": "''" } }, { "name": "count", "description": "Renders multiple skeleton items stacked vertically with spacing. Useful for placeholder lists.", "value": { "type": "number", "default": "1" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "width", "description": "CSS width value (e.g. \"200px\", \"100%\")", "type": "string" }, { "name": "height", "description": "CSS height value; circle auto-matches width when omitted", "type": "string" }, { "name": "variant", "description": "Shape of the skeleton: text for lines, circle for avatars, rect for blocks", "type": "'text' | 'circle' | 'rect'" }, { "name": "count", "description": "Renders multiple skeleton items stacked vertically with spacing. Useful for placeholder lists.", "type": "number" } ], "events": [] } }, { "name": "arc-spinner", "description": "Animated loading spinner in three sizes.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **spinner**", "doc-url": "", "attributes": [ { "name": "size", "description": "Spinner dimensions: sm (16px), md (24px), lg (40px)", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" } }, { "name": "variant", "description": "Color of the spinner ring", "value": { "type": "'primary' | 'secondary' | 'white'", "default": "'primary'" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "size", "description": "Spinner dimensions: sm (16px), md (24px), lg (40px)", "type": "'sm' | 'md' | 'lg'" }, { "name": "variant", "description": "Color of the spinner ring", "type": "'primary' | 'secondary' | 'white'" } ], "events": [] } }, { "name": "arc-stack", "description": "Flexbox layout component for vertical or horizontal stacking with token-based spacing.\n---\n\n\n### **Slots:**\n - _default_ - Default content.", "doc-url": "", "attributes": [ { "name": "direction", "description": "Flex direction — vertical is column, horizontal is row", "value": { "type": "'vertical' | 'horizontal'", "default": "'vertical'" } }, { "name": "gap", "description": "Gap between children, maps to --space-* tokens", "value": { "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'", "default": "'md'" } }, { "name": "align", "description": "Cross-axis alignment (align-items)", "value": { "type": "'start' | 'center' | 'end' | 'stretch'", "default": "'stretch'" } }, { "name": "justify", "description": "Main-axis alignment (justify-content)", "value": { "type": "'start' | 'center' | 'end' | 'between' | 'around'", "default": "'start'" } }, { "name": "wrap", "description": "Enable flex-wrap for responsive wrapping", "value": { "type": "boolean", "default": "false" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "direction", "description": "Flex direction — vertical is column, horizontal is row", "type": "'vertical' | 'horizontal'" }, { "name": "gap", "description": "Gap between children, maps to --space-* tokens", "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'" }, { "name": "align", "description": "Cross-axis alignment (align-items)", "type": "'start' | 'center' | 'end' | 'stretch'" }, { "name": "justify", "description": "Main-axis alignment (justify-content)", "type": "'start' | 'center' | 'end' | 'between' | 'around'" }, { "name": "wrap", "description": "Enable flex-wrap for responsive wrapping", "type": "boolean" } ], "events": [] } }, { "name": "arc-video", "description": "House-styled video player. Before the first play it shows the poster with a large glowing\nplay button; once playback starts, a minimal custom control bar rides the native video —\nplay/pause, a mono time readout, a scrub bar that seeks directly, a mute toggle, and a\nfullscreen button. During playback the bar dims after two seconds of idle rather than\nleaving — it stays visible and clickable, and returns to full strength when the pointer is\nanywhere over the player or a control takes focus. Standard player\nkeys work on the focused player: Space or K toggles playback, the arrow keys seek five\nseconds, M toggles mute, F toggles fullscreen.\n\nTakes a single `src` — there is no source-element fallback chain for multiple formats.\nServe one broadly supported encoding (H.264/MP4 plays everywhere), or reach for the native\nvideo element directly when you need format negotiation or adaptive streaming.\n---\n\n\n### **Events:**\n - **arc-play** - Fired when playback starts or resumes. `detail.value` is the current time in seconds.\n- **arc-pause** - Fired when playback pauses. `detail.value` is the current time in seconds.\n- **arc-ended** - Fired when playback reaches the end. `detail.value` is the final time in seconds.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **wrapper** - The player frame.\n- **video** - The native video element.\n- **overlay** - The pre-play overlay covering the poster.\n- **play-button** - The large centered play button inside the overlay.\n- **controls** - The control bar.\n- **play-toggle** - The play/pause button in the control bar.\n- **time** - The current/total time readout.\n- **scrubber** - The seek range input.\n- **mute-button** - The mute toggle button.\n- **fullscreen-button** - The fullscreen button.", "doc-url": "", "attributes": [ { "name": "src", "description": "Video source URL. A single source only; no multi-format machinery.", "value": { "type": "string", "default": "''" } }, { "name": "poster", "description": "Poster image URL shown before the first play.", "value": { "type": "string", "default": "''" } }, { "name": "label", "description": "Accessible name for the player region. Falls back to a generic label when empty.", "value": { "type": "string", "default": "''" } }, { "name": "autoplay", "description": "Starts playback as soon as the browser allows. Browsers only honor autoplay when the video is muted, so pair it with `muted`; when autoplay is blocked, the play overlay simply remains and the user starts playback themselves.", "value": { "type": "boolean", "default": "false" } }, { "name": "loop", "description": "Restarts playback from the beginning when the video ends.", "value": { "type": "boolean", "default": "false" } }, { "name": "muted", "description": "Mutes the audio track. Toggled live by the mute button and the M key.", "value": { "type": "boolean", "default": "false" } }, { "name": "controls", "description": "Shows the custom control bar once playback has started, and enables the player keyboard shortcuts. Defaults to true; set `controls=\"false\"` for ambient or presentation video.", "value": { "type": "boolean", "default": "true" } }, { "name": "preload", "description": "Passed through to the native video element. The default `metadata` loads dimensions and duration without buffering content.", "value": { "type": "'none' | 'metadata' | 'auto'", "default": "'metadata'" } } ], "slots": [], "events": [ { "name": "arc-play", "type": "CustomEvent<{ value: number }>", "description": "Fired when playback starts or resumes. `detail.value` is the current time in seconds." }, { "name": "arc-pause", "type": "CustomEvent<{ value: number }>", "description": "Fired when playback pauses. `detail.value` is the current time in seconds." }, { "name": "arc-ended", "type": "CustomEvent<{ value: number }>", "description": "Fired when playback reaches the end. `detail.value` is the final time in seconds." } ], "js": { "properties": [ { "name": "src", "description": "Video source URL. A single source only; no multi-format machinery.", "type": "string" }, { "name": "poster", "description": "Poster image URL shown before the first play.", "type": "string" }, { "name": "label", "description": "Accessible name for the player region. Falls back to a generic label when empty.", "type": "string" }, { "name": "controls", "description": "Shows the custom control bar once playback has started, and enables the player keyboard shortcuts. Defaults to true; set `controls=\"false\"` for ambient or presentation video.", "type": "boolean" }, { "name": "autoplay", "description": "Starts playback as soon as the browser allows. Browsers only honor autoplay when the video is muted, so pair it with `muted`; when autoplay is blocked, the play overlay simply remains and the user starts playback themselves.", "type": "boolean" }, { "name": "loop", "description": "Restarts playback from the beginning when the video ends.", "type": "boolean" }, { "name": "muted", "description": "Mutes the audio track. Toggled live by the mute button and the M key.", "type": "boolean" }, { "name": "preload", "description": "Passed through to the native video element. The default `metadata` loads dimensions and duration without buffering content.", "type": "'none' | 'metadata' | 'auto'" } ], "events": [ { "name": "arc-play", "type": "CustomEvent<{ value: number }>", "description": "Fired when playback starts or resumes. `detail.value` is the current time in seconds." }, { "name": "arc-pause", "type": "CustomEvent<{ value: number }>", "description": "Fired when playback pauses. `detail.value` is the current time in seconds." }, { "name": "arc-ended", "type": "CustomEvent<{ value: number }>", "description": "Fired when playback reaches the end. `detail.value` is the final time in seconds." } ] } }, { "name": "arc-virtual-list", "description": "Windowed list that renders only the visible slice of a large array.\nFixed row height with configurable overscan.\n\nTwo ways to supply rows, because \"render a row\" means something different\ninside a framework than it does outside one:\n\n - `renderItem` — a callback returning the row's content. The component\n mounts only the visible rows, so a million-row array puts a screenful of\n nodes in the DOM. This is the direct path: plain JS, HTML, Lit.\n - windowed slots — the component renders an `item-N` slot for each index in\n the visible range only, and announces that range as it scrolls. (Spelled\n without the tag on purpose: prism scans this whole file for slot markup,\n and a literal one in a comment invents a slot named `item-N`.)\n Whoever owns\n the light DOM supplies just those rows. This is how the framework\n wrappers do it, so a React consumer writes JSX and a Svelte consumer\n writes markup, rather than a callback returning nodes their framework\n didn't create.\n\nBoth paths share one geometry engine, so scrolling behaves identically.\n`renderItem` wins if both are present.\n---\n\n\n### **Events:**\n - **arc-range-change** - Fired when the visible range changes. `end` is exclusive.\n\n### **Methods:**\n - **scrollToIndex(index: _number_): _void_** - Scroll a row into view.\n\n### **Slots:**\n - **item-${index}**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **spacer**\n- **item**", "doc-url": "", "attributes": [ { "name": "items", "description": "The full data array. Only the visible slice is rendered at any given time.", "value": { "type": "Array", "default": "[]" } }, { "name": "itemHeight", "description": "Height in pixels of each row. Must match what actually renders, and must be at least 1 — it is a divisor, so a zero would put NaN through every window calculation.", "value": { "type": "number", "default": "40" } }, { "name": "overscan", "description": "Rows rendered above and below the visible window to cover fast scrolling. Never negative.", "value": { "type": "number", "default": "5" } } ], "slots": [ { "name": "item-${index}" } ], "events": [ { "name": "arc-range-change", "type": "CustomEvent<{value: {start: number, end: number}, start: number, end: number}>", "description": "Fired when the visible range changes. `end` is exclusive." } ], "js": { "properties": [ { "name": "visibleRange", "description": "The range of currently rendered indices. `end` is exclusive." }, { "name": "renderItem", "description": "`(item, index) => unknown` returning one row's content. Anything Lit can render: a template, a DOM node, a string. When set, rows come from here and the slots are not used.", "type": "Function" }, { "name": "itemHeight", "description": "Height in pixels of each row. Must match what actually renders, and must be at least 1 — it is a divisor, so a zero would put NaN through every window calculation.", "type": "number" }, { "name": "overscan", "description": "Rows rendered above and below the visible window to cover fast scrolling. Never negative.", "type": "number" }, { "name": "items", "description": "The full data array. Only the visible slice is rendered at any given time.", "type": "Array" } ], "events": [ { "name": "arc-range-change", "type": "CustomEvent<{value: {start: number, end: number}, start: number, end: number}>", "description": "Fired when the visible range changes. `end` is exclusive." } ] } }, { "name": "arc-activity-heatmap", "description": "GitHub-style contribution calendar: a year of day cells laid out as one\ncolumn per week, each cell tinted by that day's activity on a five-step\naccent ramp. Hovering or arrow-keying a cell raises it with the house glow\nand shows its detail — the date and the day's label or value — in the same\nbuilt-in bubble arc-uptime carries. Month labels run along the top, sparse\nweekday labels down the side, and a Less→More legend sits below.\n\nThe grid is a pure function of its props. When `end-date` is unset the\nanchor is today, adopted in the browser one render after the first; before\nthat — the server render, and the client render that hydrates it — the\nanchor is derived from the newest date present in `data`, so both are\ndeterministic and identical. Pin `end-date` explicitly whenever server and\nclient must agree exactly.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **heatmap**\n- **months**\n- **month**\n- **weekdays**\n- **weekday**\n- **grid**\n- **cell**\n- **detail**\n- **legend**\n- **swatch**", "doc-url": "", "attributes": [ { "name": "data", "description": "One entry per day with activity: an ISO `date` (YYYY-MM-DD), a numeric `value` mapped to the intensity ramp, and an optional `label` shown in the hover detail in place of the bare value (e.g. \"7 commits\"). Days in the rendered span with no entry render as empty cells, so sparse data is fine. Set it from script, a framework binding, or a JSON attribute.", "value": { "type": "Array<{date: string, value: number, label?: string}>", "default": "[]" } }, { "name": "end-date", "description": "The newest day shown, as an ISO string (YYYY-MM-DD). Unset: today in the browser; on the server, the newest date in `data` (see above).", "value": { "type": "string", "default": "''" } }, { "name": "weeks", "description": "How many week columns to render, counting back from the week containing the end date (default 52), at least 1. The last column is truncated after the end date, so the newest cell is always the end date itself.", "value": { "type": "number", "default": "52" } }, { "name": "weekStart", "description": "Which day starts each column: \"sunday\" (default, the GitHub convention) or \"monday\". An unrecognised value falls back to sunday.", "value": { "type": "'sunday' | 'monday'", "default": "'sunday'" } }, { "name": "max", "description": "When set, intensity is a linear scale from 0 to this value instead of the default quartile mapping: each nonzero value lands on step 1-4 by `value / max`. Values at or above `max` render as step 4.", "value": { "type": "number", "default": "0" } }, { "name": "legend", "description": "Whether to render the Less→More swatch strip under the grid. Default true; disable from markup with either `no-legend` or `legend=\"false\"`.", "value": { "type": "boolean", "default": "true" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "endDate", "description": "The newest day shown, as an ISO string (YYYY-MM-DD). Unset: today in the browser; on the server, the newest date in `data` (see above).", "type": "string" }, { "name": "weeks", "description": "How many week columns to render, counting back from the week containing the end date (default 52), at least 1. The last column is truncated after the end date, so the newest cell is always the end date itself.", "type": "number" }, { "name": "weekStart", "description": "Which day starts each column: \"sunday\" (default, the GitHub convention) or \"monday\". An unrecognised value falls back to sunday.", "type": "'sunday' | 'monday'" }, { "name": "legend", "description": "Whether to render the Less→More swatch strip under the grid. Default true; disable from markup with either `no-legend` or `legend=\"false\"`.", "type": "boolean" }, { "name": "data", "description": "One entry per day with activity: an ISO `date` (YYYY-MM-DD), a numeric `value` mapped to the intensity ramp, and an optional `label` shown in the hover detail in place of the bare value (e.g. \"7 commits\"). Days in the rendered span with no entry render as empty cells, so sparse data is fine. Set it from script, a framework binding, or a JSON attribute.", "type": "Array<{date: string, value: number, label?: string}>" }, { "name": "max", "description": "When set, intensity is a linear scale from 0 to this value instead of the default quartile mapping: each nonzero value lands on step 1-4 by `value / max`. Values at or above `max` render as step 4.", "type": "number" } ], "events": [] } }, { "name": "arc-animated-number", "description": "Smooth count-up/down number animation with formatting options.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **value**", "doc-url": "", "attributes": [ { "name": "value", "description": "Target number to animate to", "value": { "type": "number", "default": "0" } }, { "name": "duration", "description": "Animation duration in milliseconds", "value": { "type": "number", "default": "1000" } }, { "name": "format", "description": "Controls how the number is formatted using Intl.NumberFormat. Use currency with a prefix like $ or percent with a suffix like %.", "value": { "type": "'number' | 'currency' | 'percent'", "default": "'number'" } }, { "name": "prefix", "description": "String prepended before the number (e.g., \"$\")", "value": { "type": "string", "default": "''" } }, { "name": "suffix", "description": "String appended after the number (e.g., \"%\")", "value": { "type": "string", "default": "''" } }, { "name": "decimals", "description": "Number of fixed decimal places", "value": { "type": "number", "default": "0" } }, { "name": "locale", "description": "BCP 47 locale tag passed to Intl.NumberFormat for locale-aware number formatting (thousands separators, decimal marks).", "value": { "type": "string", "default": "'en-US'" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "value", "description": "Target number to animate to", "type": "number" }, { "name": "prefix", "description": "String prepended before the number (e.g., \"$\")", "type": "string" }, { "name": "suffix", "description": "String appended after the number (e.g., \"%\")", "type": "string" }, { "name": "decimals", "description": "Number of fixed decimal places", "type": "number" }, { "name": "locale", "description": "BCP 47 locale tag passed to Intl.NumberFormat for locale-aware number formatting (thousands separators, decimal marks).", "type": "string" }, { "name": "duration", "description": "Animation duration in milliseconds", "type": "number" }, { "name": "format", "description": "Controls how the number is formatted using Intl.NumberFormat. Use currency with a prefix like $ or percent with a suffix like %.", "type": "'number' | 'currency' | 'percent'" } ], "events": [] } }, { "name": "arc-badge", "description": "Compact pill-shaped label for status indicators, category tags, and notification counts. Seven\ncolor variants let you encode meaning at a glance across dashboards, tables, and card layouts.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **badge**", "doc-url": "", "attributes": [ { "name": "variant", "description": "Controls the badge color scheme. Default renders a neutral gray. Primary and secondary use the accent token colors. Success, warning, error, and info map to the corresponding semantic color tokens for status-oriented labels.", "value": { "type": "'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'", "default": "'default'" } }, { "name": "size", "description": "Controls the badge size. Options: 'sm', 'md', 'lg'.", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" } }, { "name": "color", "description": "Custom RGB color value (e.g. `\"255, 100, 50\"`) that overrides the variant color. Sets the border, text, background tint, and hover glow to the specified color.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "color", "description": "Custom RGB color value (e.g. `\"255, 100, 50\"`) that overrides the variant color. Sets the border, text, background tint, and hover glow to the specified color.", "type": "string" }, { "name": "variant", "description": "Controls the badge color scheme. Default renders a neutral gray. Primary and secondary use the accent token colors. Success, warning, error, and info map to the corresponding semantic color tokens for status-oriented labels.", "type": "'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'" }, { "name": "size", "description": "Controls the badge size. Options: 'sm', 'md', 'lg'.", "type": "'sm' | 'md' | 'lg'" } ], "events": [] } }, { "name": "arc-chart", "description": "An SVG chart component for dashboards with line, area, bar, and donut types. Data-driven from a\nseries array, with automatic nice-tick scales, a legend, hover crosshair and tooltips, and a\nvisually-hidden data table for assistive technology.\n---\n\n\n### **Events:**\n - **arc-mark-click** - Fired when a mark (bar, stacked segment, line point column, or donut segment) is clicked. detail: { seriesIndex, index, value }. Indices refer to displayed series after any \"Other\" folding; a folded donut segment reports seriesIndex -1.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **axis**\n- **tooltip**\n- **chart**\n- **legend**", "doc-url": "", "attributes": [ { "name": "type", "description": "The chart form. Line and area share the x axis across all series; bar renders grouped columns (or stacked with the `stacked` attribute); donut renders one segment per series (or per category when a single series is given).", "value": { "type": "'line' | 'area' | 'bar' | 'donut'", "default": "'line'" } }, { "name": "series", "description": "The data that drives the chart. Each entry is one series; all series share the x axis defined by `labels`. Set as a property, or as a JSON attribute for a chart that is static. Colors are assigned in fixed order from --chart-1 to --chart-6; series beyond six are summed into an \"Other\" series noted in the legend.", "value": { "type": "Array<{label:string,data:number[]}>", "default": "[]" } }, { "name": "labels", "description": "Category labels for the x axis (or donut segment names when a single series is given). Labels that would collide are automatically thinned — every Nth label renders based on available width.", "value": { "type": "string[]", "default": "[]" } }, { "name": "stacked", "description": "Bar type only. Stacks series segments on a shared baseline with 2px surface gaps between segments; only the outermost segment gets the rounded value end. Assumes non-negative data.", "value": { "type": "boolean", "default": "false" } }, { "name": "hideLegend", "description": "Suppresses the legend. By default the legend renders for two or more series and is omitted for a single series.", "value": { "type": "boolean", "default": "false" } }, { "name": "hideAxis", "description": "Removes the axis layer — gridlines, y tick labels, and x category labels — for compact trend panels where exact values are read from the tooltip.", "value": { "type": "boolean", "default": "false" } }, { "name": "height", "description": "Chart height in pixels. Width is fluid and tracked with a ResizeObserver.", "value": { "type": "number", "default": "260" } }, { "name": "valueFormat", "description": "How values are formatted in tooltips, the axis, and the accessible data table, via Intl.NumberFormat. Percent expects fractional data (0.24 → 24%). Axis numbers are abbreviated (1.2k, 3.4M).", "value": { "type": "'number' | 'percent' | 'currency'", "default": "'number'" } }, { "name": "currency", "description": "ISO 4217 currency code used when value-format=\"currency\".", "value": { "type": "string", "default": "'USD'" } } ], "slots": [], "events": [ { "name": "arc-mark-click", "type": "CustomEvent", "description": "Fired when a mark (bar, stacked segment, line point column, or donut segment) is clicked. detail: { seriesIndex, index, value }. Indices refer to displayed series after any \"Other\" folding; a folded donut segment reports seriesIndex -1." } ], "js": { "properties": [ { "name": "currency", "description": "ISO 4217 currency code used when value-format=\"currency\".", "type": "string" }, { "name": "type", "description": "The chart form. Line and area share the x axis across all series; bar renders grouped columns (or stacked with the `stacked` attribute); donut renders one segment per series (or per category when a single series is given).", "type": "'line' | 'area' | 'bar' | 'donut'" }, { "name": "series", "description": "The data that drives the chart. Each entry is one series; all series share the x axis defined by `labels`. Set as a property, or as a JSON attribute for a chart that is static. Colors are assigned in fixed order from --chart-1 to --chart-6; series beyond six are summed into an \"Other\" series noted in the legend.", "type": "Array<{label:string,data:number[]}>" }, { "name": "labels", "description": "Category labels for the x axis (or donut segment names when a single series is given). Labels that would collide are automatically thinned — every Nth label renders based on available width.", "type": "string[]" }, { "name": "stacked", "description": "Bar type only. Stacks series segments on a shared baseline with 2px surface gaps between segments; only the outermost segment gets the rounded value end. Assumes non-negative data.", "type": "boolean" }, { "name": "hideLegend", "description": "Suppresses the legend. By default the legend renders for two or more series and is omitted for a single series.", "type": "boolean" }, { "name": "hideAxis", "description": "Removes the axis layer — gridlines, y tick labels, and x category labels — for compact trend panels where exact values are read from the tooltip.", "type": "boolean" }, { "name": "height", "description": "Chart height in pixels. Width is fluid and tracked with a ResizeObserver.", "type": "number" }, { "name": "valueFormat", "description": "How values are formatted in tooltips, the axis, and the accessible data table, via Intl.NumberFormat. Percent expects fractional data (0.24 → 24%). Axis numbers are abbreviated (1.2k, 3.4M).", "type": "'number' | 'percent' | 'currency'" } ], "events": [ { "name": "arc-mark-click", "type": "CustomEvent", "description": "Fired when a mark (bar, stacked segment, line point column, or donut segment) is clicked. detail: { seriesIndex, index, value }. Indices refer to displayed series after any \"Other\" folding; a folded donut segment reports seriesIndex -1." } ] } }, { "name": "arc-clock", "description": "Live clock with a digital or analog face, optionally pinned to an IANA timezone.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **container**\n- **face**\n- **time**\n- **timezone**\n- **label**\n- **svg**\n- **hand-hour**\n- **hand-minute**\n- **hand-second**\n- **pin**", "doc-url": "", "attributes": [ { "name": "variant", "description": "Which face to render. Digital shows a mono-spaced time string; analog shows an SVG dial with hands.", "value": { "type": "'digital' | 'analog'", "default": "'digital'" } }, { "name": "timezone", "description": "IANA timezone name (e.g. \"Asia/Tokyo\"). Defaults to the viewer's local timezone; an unrecognized value falls back to local.", "value": { "type": "string", "default": "''" } }, { "name": "label", "description": "Optional caption rendered under the face.", "value": { "type": "string", "default": "''" } }, { "name": "showSeconds", "description": "Show seconds on the digital face, or the second hand on the analog face.", "value": { "type": "boolean", "default": "false" } }, { "name": "hour12", "description": "Force 12-hour display on the digital face. When unset, the viewer's locale decides. Set the property to false to force 24-hour display.", "value": { "type": "boolean", "default": "false" } }, { "name": "showTimezone", "description": "Render the timezone abbreviation, muted, beside the digital time.", "value": { "type": "boolean", "default": "false" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "timezone", "description": "IANA timezone name (e.g. \"Asia/Tokyo\"). Defaults to the viewer's local timezone; an unrecognized value falls back to local.", "type": "string" }, { "name": "label", "description": "Optional caption rendered under the face.", "type": "string" }, { "name": "variant", "description": "Which face to render. Digital shows a mono-spaced time string; analog shows an SVG dial with hands.", "type": "'digital' | 'analog'" }, { "name": "showSeconds", "description": "Show seconds on the digital face, or the second hand on the analog face.", "type": "boolean" }, { "name": "hour12", "description": "Force 12-hour display on the digital face. When unset, the viewer's locale decides. Set the property to false to force 24-hour display.", "type": "boolean" }, { "name": "showTimezone", "description": "Render the timezone abbreviation, muted, beside the digital time.", "type": "boolean" } ], "events": [] } }, { "name": "arc-comparison-column", "description": "Data-holder child element that defines a single column in the comparison grid. Renders nothing\nvisible — it provides heading, highlight, and values data to the parent.\n---\n", "doc-url": "", "attributes": [ { "name": "heading", "description": "Column header text displayed at the top of this column (e.g., \"Free\", \"Pro\").", "value": { "type": "string", "default": "''" } }, { "name": "highlight", "description": "When true, adds an accent background to the header and all cells in this column.", "value": { "type": "boolean", "default": "false" } }, { "name": "values", "description": "Values matching the features order. Settable as a property, or as a JSON array in markup. Use \"true\"/\"false\" for check/cross icons, or any string for text values.", "value": { "type": "string[]", "default": "[]" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "heading", "description": "Column header text displayed at the top of this column (e.g., \"Free\", \"Pro\").", "type": "string" }, { "name": "highlight", "description": "When true, adds an accent background to the header and all cells in this column.", "type": "boolean" }, { "name": "values", "description": "Values matching the features order. Settable as a property, or as a JSON array in markup. Use \"true\"/\"false\" for check/cross icons, or any string for text values.", "type": "string[]" } ], "events": [] } }, { "name": "arc-comparison", "description": "A two-column or multi-column comparison table for pricing tiers, feature breakdowns, or\nbefore/after comparisons. Each column is defined with an arc-comparison-column child element.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **table**\n- **header**\n- **feature**\n- **cell**", "doc-url": "", "attributes": [ { "name": "features", "description": "Feature label strings, one row each. Settable as a property, or as a JSON array in markup: `features='[\"Storage\",\"Bandwidth\"]'`. A malformed value falls back to an empty list rather than throwing.", "value": { "type": "string[]", "default": "[]" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "features", "description": "Feature label strings, one row each. Settable as a property, or as a JSON array in markup: `features='[\"Storage\",\"Bandwidth\"]'`. A malformed value falls back to an empty list rather than throwing.", "type": "string[]" } ], "events": [] } }, { "name": "arc-countdown-timer", "description": "Live countdown to a target date/time with days, hours, minutes, and seconds segments.\n---\n\n\n### **Events:**\n - **arc-expired** - Fired when the countdown reaches zero\n\n### **CSS Parts:**\n - **base** - The root element.\n- **separator**\n- **segment**\n- **number**\n- **label**\n- **container**", "doc-url": "", "attributes": [ { "name": "target", "description": "ISO date string or parseable date for the countdown target", "value": { "type": "string", "default": "''" } }, { "name": "label", "description": "Optional label displayed above the countdown", "value": { "type": "string", "default": "''" } }, { "name": "expired", "description": "Text shown when the countdown reaches zero", "value": { "type": "string", "default": "'Expired'" } }, { "name": "hideZeroSegments", "description": "Hide leading segments that are zero", "value": { "type": "boolean", "default": "false" } } ], "slots": [], "events": [ { "name": "arc-expired", "type": "CustomEvent", "description": "Fired when the countdown reaches zero" } ], "js": { "properties": [ { "name": "target", "description": "ISO date string or parseable date for the countdown target", "type": "string" }, { "name": "label", "description": "Optional label displayed above the countdown", "type": "string" }, { "name": "expired", "description": "Text shown when the countdown reaches zero", "type": "string" }, { "name": "hideZeroSegments", "description": "Hide leading segments that are zero", "type": "boolean" } ], "events": [ { "name": "arc-expired", "type": "CustomEvent", "description": "Fired when the countdown reaches zero" } ] } }, { "name": "arc-data-grid", "description": "A spreadsheet-grade grid for working with tabular data: inline cell editing, multi-column\nsorting, pinned columns, row selection, and virtualized rendering. Columns are defined as a\nJavaScript array, and the grid implements the full WAI-ARIA grid keyboard pattern with a single\ntab stop.\n---\n\n\n### **Events:**\n - **arc-sort** - Fired when the user changes sorting. detail: { sort } with the full multi-sort array in priority order\n- **arc-select** - Fired when row selection changes. detail: { value, selectedIndices } — sorted indices into the original rows array\n- **arc-cell-change** - Fired when an inline cell edit is committed. detail: { rowIndex, key, value, row } — rowIndex refers to the original rows array\n\n### **CSS Parts:**\n - **base** - The root element.\n- **header-cell**\n- **cell**\n- **editor**\n- **row**\n- **wrapper**\n- **table**\n- **header**\n- **body**", "doc-url": "", "attributes": [ { "name": "columns", "description": "Column definitions. Each entry maps a `key` in your row objects to a rendered column with a `label` header. Optional flags enable sorting, inline editing, and inline-start-edge pinning per column; `width` sets a fixed CSS width (required for accurate pinned offsets) and `align` controls text alignment. Pinned columns are always displayed first. Set via JavaScript property.", "value": { "type": "Array<{key:string,label:string,sortable?:boolean,editable?:boolean,pinned?:boolean,width?:string,align?:string}>", "default": "[]" } }, { "name": "rows", "description": "The data array. Each object becomes a row keyed by column `key`. The grid works on an internal shallow copy — sorting and inline edits never mutate the array you pass in. Set via JavaScript property; reassigning it resets selection and any open editor.", "value": { "type": "Array>", "default": "[]" } }, { "name": "sort", "description": "Multi-sort state in priority order. Clicking a sortable header cycles it asc → desc → none; Shift+click appends it as a secondary sort. When more than one sort is active, headers show a direction arrow plus priority number. Set this property to pre-sort the grid.", "value": { "type": "Array<{key:string,direction:'asc'|'desc'}>", "default": "[]" } }, { "name": "manualSort", "description": "Skips internal sorting. Rows render in the order given, while headers still cycle the `sort` state and emit `arc-sort` — use this to implement server-side sorting.", "value": { "type": "boolean", "default": "false" } }, { "name": "selectable", "description": "Adds a checkbox column with a select-all header checkbox (indeterminate when partially selected). Space toggles selection from the keyboard. Emits `arc-select` with the selected row indices.", "value": { "type": "boolean", "default": "false" } }, { "name": "virtual", "description": "Enables virtual scrolling for large datasets. Only visible rows plus an overscan buffer are rendered, keeping performance constant regardless of row count.", "value": { "type": "boolean", "default": "false" } }, { "name": "rowHeight", "description": "Height in pixels of each row when virtual scrolling is enabled. Must match the actual rendered row height for correct scroll calculations.", "value": { "type": "number", "default": "40" } }, { "name": "overscan", "description": "Rows rendered above and below the visible window when `virtual` is on, to cover fast scrolling. Raising it trades DOM nodes for fewer blank rows on a fling; lowering it does the reverse. Never negative.", "value": { "type": "number", "default": "5" } }, { "name": "density", "description": "Row density. `compact` reduces cell padding for dense data displays. Absorbed from `arc-table`.", "value": { "type": "'default' | 'compact'", "default": "'default'" } }, { "name": "striped", "description": "Alternating row backgrounds. On by default, which is what this grid has always drawn; `no-striped` turns them off, which is what an unstriped `arc-table` looked like.", "value": { "type": "boolean", "default": "true" } } ], "slots": [], "events": [ { "name": "arc-sort", "type": "CustomEvent", "description": "Fired when the user changes sorting. detail: { sort } with the full multi-sort array in priority order" }, { "name": "arc-select", "type": "CustomEvent", "description": "Fired when row selection changes. detail: { value, selectedIndices } — sorted indices into the original rows array" }, { "name": "arc-cell-change", "type": "CustomEvent", "description": "Fired when an inline cell edit is committed. detail: { rowIndex, key, value, row } — rowIndex refers to the original rows array" } ], "js": { "properties": [ { "name": "columns", "description": "Column definitions. Each entry maps a `key` in your row objects to a rendered column with a `label` header. Optional flags enable sorting, inline editing, and inline-start-edge pinning per column; `width` sets a fixed CSS width (required for accurate pinned offsets) and `align` controls text alignment. Pinned columns are always displayed first. Set via JavaScript property.", "type": "Array<{key:string,label:string,sortable?:boolean,editable?:boolean,pinned?:boolean,width?:string,align?:string}>" }, { "name": "rows", "description": "The data array. Each object becomes a row keyed by column `key`. The grid works on an internal shallow copy — sorting and inline edits never mutate the array you pass in. Set via JavaScript property; reassigning it resets selection and any open editor.", "type": "Array>" }, { "name": "sort", "description": "Multi-sort state in priority order. Clicking a sortable header cycles it asc → desc → none; Shift+click appends it as a secondary sort. When more than one sort is active, headers show a direction arrow plus priority number. Set this property to pre-sort the grid.", "type": "Array<{key:string,direction:'asc'|'desc'}>" }, { "name": "manualSort", "description": "Skips internal sorting. Rows render in the order given, while headers still cycle the `sort` state and emit `arc-sort` — use this to implement server-side sorting.", "type": "boolean" }, { "name": "selectable", "description": "Adds a checkbox column with a select-all header checkbox (indeterminate when partially selected). Space toggles selection from the keyboard. Emits `arc-select` with the selected row indices.", "type": "boolean" }, { "name": "virtual", "description": "Enables virtual scrolling for large datasets. Only visible rows plus an overscan buffer are rendered, keeping performance constant regardless of row count.", "type": "boolean" }, { "name": "rowHeight", "description": "Height in pixels of each row when virtual scrolling is enabled. Must match the actual rendered row height for correct scroll calculations.", "type": "number" }, { "name": "overscan", "description": "Rows rendered above and below the visible window when `virtual` is on, to cover fast scrolling. Raising it trades DOM nodes for fewer blank rows on a fling; lowering it does the reverse. Never negative.", "type": "number" }, { "name": "density", "description": "Row density. `compact` reduces cell padding for dense data displays. Absorbed from `arc-table`.", "type": "'default' | 'compact'" }, { "name": "striped", "description": "Alternating row backgrounds. On by default, which is what this grid has always drawn; `no-striped` turns them off, which is what an unstriped `arc-table` looked like.", "type": "boolean" } ], "events": [ { "name": "arc-sort", "type": "CustomEvent", "description": "Fired when the user changes sorting. detail: { sort } with the full multi-sort array in priority order" }, { "name": "arc-select", "type": "CustomEvent", "description": "Fired when row selection changes. detail: { value, selectedIndices } — sorted indices into the original rows array" }, { "name": "arc-cell-change", "type": "CustomEvent", "description": "Fired when an inline cell edit is committed. detail: { rowIndex, key, value, row } — rowIndex refers to the original rows array" } ] } }, { "name": "arc-description-item", "description": "A single term/detail pair within a description list. The term is rendered as an uppercase label,\nand the default slot holds the detail content.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **item**\n- **term**\n- **detail**", "doc-url": "", "attributes": [ { "name": "term", "description": "The key or label for this description entry, displayed as an uppercase heading.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "term", "description": "The key or label for this description entry, displayed as an uppercase heading.", "type": "string" } ], "events": [] } }, { "name": "arc-description-list", "description": "Structured term/detail pair list in a responsive grid layout with optional dividers.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **list**", "doc-url": "", "attributes": [ { "name": "columns", "description": "Number of grid columns for laying out items side by side.", "value": { "type": "number", "default": "1" } }, { "name": "layout", "description": "How each item arranges its own term and detail. `stacked` (the default) puts the term above the detail; `horizontal` puts them side by side on a shared two-column grid, so terms align down the list. This composes with `columns`, which is about how many *items* sit across — one item can be horizontal inside a three-column list.", "value": { "type": "'stacked' | 'horizontal'", "default": "'stacked'" } }, { "name": "dividers", "description": "Show horizontal dividers between rows and vertical dividers between columns.", "value": { "type": "boolean", "default": "true" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "columns", "description": "Number of grid columns for laying out items side by side.", "type": "number" }, { "name": "layout", "description": "How each item arranges its own term and detail. `stacked` (the default) puts the term above the detail; `horizontal` puts them side by side on a shared two-column grid, so terms align down the list. This composes with `columns`, which is about how many *items* sit across — one item can be horizontal inside a three-column list.", "type": "'stacked' | 'horizontal'" }, { "name": "dividers", "description": "Show horizontal dividers between rows and vertical dividers between columns.", "type": "boolean" } ], "events": [] } }, { "name": "arc-diff", "description": "Line-based text diff viewer with inline and side-by-side display modes.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **line**\n- **line-number**\n- **prefix**\n- **container**", "doc-url": "", "attributes": [ { "name": "original", "description": "The original text to compare (split by newlines).", "value": { "type": "string", "default": "''" } }, { "name": "revised", "description": "The modified text to compare (split by newlines).", "value": { "type": "string", "default": "''" } }, { "name": "mode", "description": "Display mode: 'inline' renders changes in a single column, 'side-by-side' renders two panes in a grid.", "value": { "type": "'inline' | 'side-by-side'", "default": "'inline'" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "original", "description": "The original text to compare (split by newlines).", "type": "string" }, { "name": "revised", "description": "The modified text to compare (split by newlines).", "type": "string" }, { "name": "mode", "description": "Display mode: 'inline' renders changes in a single column, 'side-by-side' renders two panes in a grid.", "type": "'inline' | 'side-by-side'" } ], "events": [] } }, { "name": "arc-gauge", "description": "Radial gauge displaying a scalar value on an arc with color-coded zones (success, warning,\nerror) and an animated sweep. The radial companion to arc-meter: same threshold semantics,\nwith the reading rendered center-stage.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **gauge**\n- **svg**\n- **track**\n- **arc**\n- **readout**\n- **value**\n- **unit**\n- **label**", "doc-url": "", "attributes": [ { "name": "value", "description": "Current gauge value. Clamped between `min` and `max`. Reflected as an attribute.", "value": { "type": "number", "default": "0" } }, { "name": "min", "description": "Minimum value representing the empty end of the arc.", "value": { "type": "number", "default": "0" } }, { "name": "max", "description": "Maximum value representing the full end of the arc.", "value": { "type": "number", "default": "100" } }, { "name": "low", "description": "Threshold below which the value is considered low. Used for color zone calculation.", "value": { "type": "number", "default": "0" } }, { "name": "high", "description": "Threshold above which the value is considered high. Used for color zone calculation.", "value": { "type": "number", "default": "0" } }, { "name": "optimum", "description": "The optimal value. Determines which end of the range is \"good\" for color zone logic.", "value": { "type": "number", "default": "0" } }, { "name": "label", "description": "Label text displayed beneath the value and used as the accessible name.", "value": { "type": "string", "default": "''" } }, { "name": "unit", "description": "Unit suffix rendered after the value (e.g. \"%\", \"ms\", \"GB\").", "value": { "type": "string", "default": "''" } }, { "name": "variant", "description": "Arc shape: `full` is a 270-degree horseshoe, `half` a 180-degree semicircle.", "value": { "type": "'full' | 'half'", "default": "'full'" } }, { "name": "showValue", "description": "Whether to render the numeric value in the center of the arc. Defaults to true; disable via the `showValue` property.", "value": { "type": "boolean", "default": "true" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "label", "description": "Label text displayed beneath the value and used as the accessible name.", "type": "string" }, { "name": "unit", "description": "Unit suffix rendered after the value (e.g. \"%\", \"ms\", \"GB\").", "type": "string" }, { "name": "value", "description": "Current gauge value. Clamped between `min` and `max`. Reflected as an attribute.", "type": "number" }, { "name": "min", "description": "Minimum value representing the empty end of the arc.", "type": "number" }, { "name": "max", "description": "Maximum value representing the full end of the arc.", "type": "number" }, { "name": "low", "description": "Threshold below which the value is considered low. Used for color zone calculation.", "type": "number" }, { "name": "high", "description": "Threshold above which the value is considered high. Used for color zone calculation.", "type": "number" }, { "name": "optimum", "description": "The optimal value. Determines which end of the range is \"good\" for color zone logic.", "type": "number" }, { "name": "variant", "description": "Arc shape: `full` is a 270-degree horseshoe, `half` a 180-degree semicircle.", "type": "'full' | 'half'" }, { "name": "showValue", "description": "Whether to render the numeric value in the center of the arc. Defaults to true; disable via the `showValue` property.", "type": "boolean" } ], "events": [] } }, { "name": "arc-json-tree", "description": "Collapsible JSON explorer with house syntax coloring — the dev-tools\ninspector for API payloads, configuration objects, and structured state.\nPure recursive rendering with zero dependencies: unlike arc-code-block it\nloads no highlighter, so it ships in the register barrel.\n---\n\n\n### **Events:**\n - **arc-toggle** - Fired when a node is expanded or collapsed, with the node path and new expanded state\n\n### **CSS Parts:**\n - **base** - The root element.\n- **container**\n- **item**\n- **row**\n- **key**\n- **value**\n- **preview**\n- **error**", "doc-url": "", "attributes": [ { "name": "json", "description": "JSON string alternative to the data property, for attribute-only use. Parsed with try/catch; invalid input renders a small inline error state instead of throwing.", "value": { "type": "string", "default": "''" } }, { "name": "expanded", "description": "How many levels open initially (default 1). As a bare boolean attribute, every level opens.", "value": { "type": "number | boolean", "default": "1" } }, { "name": "keysQuoted", "description": "Render object keys with quotes. Off by default, matching devtools.", "value": { "type": "boolean", "default": "false" } } ], "slots": [], "events": [ { "name": "arc-toggle", "type": "CustomEvent", "description": "Fired when a node is expanded or collapsed, with the node path and new expanded state" } ], "js": { "properties": [ { "name": "data", "description": "The value to render. Set as a property for objects and arrays; takes precedence over the json attribute when both are set.", "type": "object" }, { "name": "json", "description": "JSON string alternative to the data property, for attribute-only use. Parsed with try/catch; invalid input renders a small inline error state instead of throwing.", "type": "string" }, { "name": "expanded", "description": "How many levels open initially (default 1). As a bare boolean attribute, every level opens.", "type": "number | boolean" }, { "name": "keysQuoted", "description": "Render object keys with quotes. Off by default, matching devtools.", "type": "boolean" } ], "events": [ { "name": "arc-toggle", "type": "CustomEvent", "description": "Fired when a node is expanded or collapsed, with the node path and new expanded state" } ] } }, { "name": "arc-kanban", "description": "A drag-and-drop kanban board driven by a `columns` data array. Cards can be dragged between and\nwithin columns with the pointer, or moved entirely from the keyboard with live screen-reader\nannouncements. Column limits, tags, and descriptions are supported per card, and every move\nemits an `arc-card-move` event so the consumer can sync its source of truth.\n---\n\n\n### **Events:**\n - **arc-card-move** - Fired when a card is dropped in a new position (pointer or keyboard). detail: { cardId, fromColumn, toColumn, index } where index is the final position in the target column.\n- **arc-card-click** - Fired when a card is clicked without being dragged. detail: { cardId, columnId }.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **card-label**\n- **card-description**\n- **card**\n- **column**\n- **column-header**\n- **column-title**\n- **column-count**\n- **list**\n- **dropzone**\n- **board**", "doc-url": "", "attributes": [ { "name": "columns", "description": "The data array that drives the board. Each entry becomes a column with a header (title plus count badge) and a list of cards. `limit` renders the count as `count/limit` and turns it error-colored when exceeded. Each card needs a unique `id` and a `label`; `description` renders below the label with a two-line clamp, and `tag` renders an arc-tag chip styled by `variant`. Set as a property, or as a JSON attribute for a board that is static. The component works on an internal copy for immediate drag feedback; sync your source of truth from `arc-card-move` and assign a new array to re-render.", "value": { "type": "Array<{id:string,title?:string,limit?:number,items:Array<{id:string,label:string,description?:string,tag?:string,variant?:string}>}>", "default": "[]" } }, { "name": "disabled", "description": "Disables all pointer and keyboard interaction and dims the board.", "value": { "type": "boolean", "default": "false" } } ], "slots": [], "events": [ { "name": "arc-card-move", "type": "CustomEvent", "description": "Fired when a card is dropped in a new position (pointer or keyboard). detail: { cardId, fromColumn, toColumn, index } where index is the final position in the target column." }, { "name": "arc-card-click", "type": "CustomEvent", "description": "Fired when a card is clicked without being dragged. detail: { cardId, columnId }." } ], "js": { "properties": [ { "name": "columns", "description": "The data array that drives the board. Each entry becomes a column with a header (title plus count badge) and a list of cards. `limit` renders the count as `count/limit` and turns it error-colored when exceeded. Each card needs a unique `id` and a `label`; `description` renders below the label with a two-line clamp, and `tag` renders an arc-tag chip styled by `variant`. Set as a property, or as a JSON attribute for a board that is static. The component works on an internal copy for immediate drag feedback; sync your source of truth from `arc-card-move` and assign a new array to re-render.", "type": "Array<{id:string,title?:string,limit?:number,items:Array<{id:string,label:string,description?:string,tag?:string,variant?:string}>}>" }, { "name": "disabled", "description": "Disables all pointer and keyboard interaction and dims the board.", "type": "boolean" } ], "events": [ { "name": "arc-card-move", "type": "CustomEvent", "description": "Fired when a card is dropped in a new position (pointer or keyboard). detail: { cardId, fromColumn, toColumn, index } where index is the final position in the target column." }, { "name": "arc-card-click", "type": "CustomEvent", "description": "Fired when a card is clicked without being dragged. detail: { cardId, columnId }." } ] } }, { "name": "arc-level-meter", "description": "Segmented audio level meter with peak-hold — the live vertical sibling of arc-meter,\nbuilt for signal-rate updates (audio levels, buffer fill, realtime telemetry).\nSegments below the warn threshold render success-tinted, between warn and clip\nwarning-tinted, and above clip error-tinted, with the house glow on lit segments.\nA thin peak-hold line rides the highest recent level and decays toward the\ncurrent value; feed the `peak` property to drive it yourself instead.\n\nOne element is one channel. There is deliberately no stereo mode — compose two\nmeters side by side for a stereo pair, one per channel, so channel count is the\nconsumer's decision rather than a prop fork.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **meter** - The outer wrapper carrying role=\"meter\".\n- **track** - The tinted track containing segments or the continuous fill.\n- **segment** - Each discrete segment (segmented mode only).\n- **fill** - The continuous fill bar (segments=0 only).\n- **peak** - The thin peak-hold line.", "doc-url": "", "attributes": [ { "name": "value", "description": "Current level. Interpreted against `min` and `max`, so with the defaults (0 and 1) it is a linear fraction, and with `min=\"-60\" max=\"0\"` it is a dB reading. Values outside the range are clamped.", "value": { "type": "number", "default": "0" } }, { "name": "min", "description": "Value at the empty end of the meter. Defaults to 0.", "value": { "type": "number", "default": "0" } }, { "name": "max", "description": "Value at the full end of the meter. Defaults to 1. Use -60..0 (or your headroom of choice) for dB scales.", "value": { "type": "number", "default": "1" } }, { "name": "peak", "description": "Externally supplied peak-hold level, in the same units as `value`. When set, the component renders the hold line exactly there and does no tracking of its own. When absent, the meter tracks its own peak from incoming values, holds it briefly, then decays it toward the current level.", "value": { "type": "number", "default": "0" } }, { "name": "orientation", "description": "Meter direction. Vertical (the default) fills bottom-up like a channel strip; horizontal fills from the inline start. Unknown values fall back to vertical.", "value": { "type": "'vertical' | 'horizontal'", "default": "'vertical'" } }, { "name": "segments", "description": "Number of discrete segments. Defaults to 20. Set 0 for a continuous, unsegmented bar.", "value": { "type": "number", "default": "20" } }, { "name": "warn", "description": "Fraction of the range (0..1) where the warning zone begins, regardless of units. Defaults to 0.75.", "value": { "type": "number", "default": "0.75" } }, { "name": "clip", "description": "Fraction of the range (0..1) where the clip (error) zone begins. Defaults to 0.9.", "value": { "type": "number", "default": "0.9" } }, { "name": "label", "description": "Accessible name applied as aria-label on the meter. The component renders no visible text, so this is the only name screen readers get — use something like \"Master left\" rather than \"Level\".", "value": { "type": "string", "default": "''" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "label", "description": "Accessible name applied as aria-label on the meter. The component renders no visible text, so this is the only name screen readers get — use something like \"Master left\" rather than \"Level\".", "type": "string" }, { "name": "value", "description": "Current level. Interpreted against `min` and `max`, so with the defaults (0 and 1) it is a linear fraction, and with `min=\"-60\" max=\"0\"` it is a dB reading. Values outside the range are clamped.", "type": "number" }, { "name": "min", "description": "Value at the empty end of the meter. Defaults to 0.", "type": "number" }, { "name": "max", "description": "Value at the full end of the meter. Defaults to 1. Use -60..0 (or your headroom of choice) for dB scales.", "type": "number" }, { "name": "peak", "description": "Externally supplied peak-hold level, in the same units as `value`. When set, the component renders the hold line exactly there and does no tracking of its own. When absent, the meter tracks its own peak from incoming values, holds it briefly, then decays it toward the current level.", "type": "number" }, { "name": "orientation", "description": "Meter direction. Vertical (the default) fills bottom-up like a channel strip; horizontal fills from the inline start. Unknown values fall back to vertical.", "type": "'vertical' | 'horizontal'" }, { "name": "segments", "description": "Number of discrete segments. Defaults to 20. Set 0 for a continuous, unsegmented bar.", "type": "number" }, { "name": "warn", "description": "Fraction of the range (0..1) where the warning zone begins, regardless of units. Defaults to 0.75.", "type": "number" }, { "name": "clip", "description": "Fraction of the range (0..1) where the clip (error) zone begins. Defaults to 0.9.", "type": "number" } ], "events": [] } }, { "name": "arc-list-item", "description": "Individual row within an arc-list. Supports prefix/suffix slots, a description slot for\nsecondary text, links, and selection state.\n---\n\n\n### **Events:**\n - **arc-select** - Fired when the item is activated by click. The parent arc-list dispatches the same event from this element for Enter and Space.\n\n### **Slots:**\n - **prefix**\n- _default_ - Default content.\n- **description**\n- **suffix**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **label**\n- **description**\n- **item**", "doc-url": "", "attributes": [ { "name": "value", "description": "Unique identifier used for selection tracking.", "value": { "type": "string", "default": "''" } }, { "name": "selected", "description": "Whether this item is currently selected. Managed automatically by the parent list.", "value": { "type": "boolean", "default": "false" } }, { "name": "disabled", "description": "Prevents interaction and dims the item.", "value": { "type": "boolean", "default": "false" } }, { "name": "href", "description": "When set, renders the item as an anchor tag for navigation.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "prefix" }, { "name": "", "description": "Default content." }, { "name": "description" }, { "name": "suffix" } ], "events": [ { "name": "arc-select", "type": "CustomEvent<{ value: string }>", "description": "Fired when the item is activated by click. The parent arc-list dispatches the same event from this element for Enter and Space." } ], "js": { "properties": [ { "name": "value", "description": "Unique identifier used for selection tracking.", "type": "string" }, { "name": "href", "description": "When set, renders the item as an anchor tag for navigation.", "type": "string" }, { "name": "selected", "description": "Whether this item is currently selected. Managed automatically by the parent list.", "type": "boolean" }, { "name": "disabled", "description": "Prevents interaction and dims the item.", "type": "boolean" } ], "events": [ { "name": "arc-select", "type": "CustomEvent<{ value: string }>", "description": "Fired when the item is activated by click. The parent arc-list dispatches the same event from this element for Enter and Space." } ] } }, { "name": "arc-list", "description": "Structured list container with optional selection, keyboard navigation, and multiple visual\nvariants. Pairs with arc-list-item for rich content rows.\n---\n\n\n### **Events:**\n - **arc-select** - Fired from the activated arc-list-item when a selectable list is driven by Enter or Space.\n- **arc-change** - Fired when the selection changes. `event.detail.value` contains the new value string.\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **list**", "doc-url": "", "attributes": [ { "name": "variant", "description": "Visual style. Bordered wraps the list in an outlined container. Separated adds bottom borders between items.", "value": { "type": "'default' | 'bordered' | 'separated'", "default": "'default'" } }, { "name": "size", "description": "Controls the base font size for the list and its children.", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" } }, { "name": "selectable", "description": "Enables selection mode. Sets `role=\"listbox\"` and manages `aria-selected` on child items.", "value": { "type": "boolean", "default": "false" } }, { "name": "multiple", "description": "Allows multiple items to be selected simultaneously. Only applies when `selectable` is true.", "value": { "type": "boolean", "default": "false" } }, { "name": "value", "description": "The currently selected value(s). Comma-separated when `multiple` is true. The selection itself is held as a list of values, so a value containing a comma is selected and rendered correctly; only the *serialised* multi-select string cannot represent one, since the comma is its separator. Single-select is exact for any value.", "value": { "type": "string", "default": "''" } }, { "name": "label", "description": "Accessible name for the list, applied as `aria-label`. Required when `selectable` is set so the listbox has an accessible name.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [ { "name": "arc-select", "type": "CustomEvent<{ value: string }>", "description": "Fired from the activated arc-list-item when a selectable list is driven by Enter or Space." }, { "name": "arc-change", "type": "CustomEvent<{ value: string }>", "description": "Fired when the selection changes. `event.detail.value` contains the new value string." } ], "js": { "properties": [ { "name": "value", "description": "The currently selected value(s). Comma-separated when `multiple` is true. The selection itself is held as a list of values, so a value containing a comma is selected and rendered correctly; only the *serialised* multi-select string cannot represent one, since the comma is its separator. Single-select is exact for any value.", "type": "string" }, { "name": "label", "description": "Accessible name for the list, applied as `aria-label`. Required when `selectable` is set so the listbox has an accessible name.", "type": "string" }, { "name": "variant", "description": "Visual style. Bordered wraps the list in an outlined container. Separated adds bottom borders between items.", "type": "'default' | 'bordered' | 'separated'" }, { "name": "size", "description": "Controls the base font size for the list and its children.", "type": "'sm' | 'md' | 'lg'" }, { "name": "selectable", "description": "Enables selection mode. Sets `role=\"listbox\"` and manages `aria-selected` on child items.", "type": "boolean" }, { "name": "multiple", "description": "Allows multiple items to be selected simultaneously. Only applies when `selectable` is true.", "type": "boolean" } ], "events": [ { "name": "arc-select", "type": "CustomEvent<{ value: string }>", "description": "Fired from the activated arc-list-item when a selectable list is driven by Enter or Space." }, { "name": "arc-change", "type": "CustomEvent<{ value: string }>", "description": "Fired when the selection changes. `event.detail.value` contains the new value string." } ] } }, { "name": "arc-meter", "description": "Semantic gauge display with color-coded fill zones (success, warning, error) based on\nconfigurable low/high/optimum thresholds.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **meter**\n- **header**\n- **label**\n- **value**\n- **track**\n- **fill**", "doc-url": "", "attributes": [ { "name": "value", "description": "Current meter value. Clamped between `min` and `max`. Reflected as an attribute.", "value": { "type": "number", "default": "0" } }, { "name": "min", "description": "Minimum value representing the left edge (empty) of the meter.", "value": { "type": "number", "default": "0" } }, { "name": "max", "description": "Maximum value representing the right edge (full) of the meter.", "value": { "type": "number", "default": "100" } }, { "name": "low", "description": "Threshold below which the value is considered low. Used for color zone calculation.", "value": { "type": "number", "default": "0" } }, { "name": "high", "description": "Threshold above which the value is considered high. Used for color zone calculation.", "value": { "type": "number", "default": "0" } }, { "name": "optimum", "description": "The optimal value. Determines which end of the range is \"good\" for color zone logic.", "value": { "type": "number", "default": "0" } }, { "name": "label", "description": "Label text displayed in the header row alongside the current percentage.", "value": { "type": "string", "default": "''" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "label", "description": "Label text displayed in the header row alongside the current percentage.", "type": "string" }, { "name": "value", "description": "Current meter value. Clamped between `min` and `max`. Reflected as an attribute.", "type": "number" }, { "name": "min", "description": "Minimum value representing the left edge (empty) of the meter.", "type": "number" }, { "name": "max", "description": "Maximum value representing the right edge (full) of the meter.", "type": "number" }, { "name": "low", "description": "Threshold below which the value is considered low. Used for color zone calculation.", "type": "number" }, { "name": "high", "description": "Threshold above which the value is considered high. Used for color zone calculation.", "type": "number" }, { "name": "optimum", "description": "The optimal value. Determines which end of the range is \"good\" for color zone logic.", "type": "number" } ], "events": [] } }, { "name": "arc-sparkline", "description": "Tiny inline SVG chart for embedding lightweight line or bar visualizations inside tables, stat\ncards, and dashboards. Renders from a simple comma-separated data string with no external\ncharting dependencies.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **area**\n- **line**\n- **bar**\n- **svg**", "doc-url": "", "attributes": [ { "name": "data", "description": "Comma-separated numeric values that define the chart data points (e.g. \"10,25,18,30,22,35,28\"). Parsed into a number array at render time. Non-numeric entries are silently dropped.", "value": { "type": "string", "default": "''" } }, { "name": "type", "description": "Chart type. Line renders a polyline with optional area fill; bar renders evenly spaced rectangles.", "value": { "type": "'line' | 'bar'", "default": "'line'" } }, { "name": "color", "description": "CSS color override applied to strokes and fills. Accepts any valid CSS color value. Defaults to var(--accent-primary) when not set.", "value": { "type": "string", "default": "''" } }, { "name": "width", "description": "SVG viewport width in pixels.", "value": { "type": "number", "default": "120" } }, { "name": "height", "description": "SVG viewport height in pixels.", "value": { "type": "number", "default": "32" } }, { "name": "fill", "description": "When true and type is \"line\", fills the area beneath the curve with a semi-transparent accent color.", "value": { "type": "boolean", "default": "false" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "data", "description": "Comma-separated numeric values that define the chart data points (e.g. \"10,25,18,30,22,35,28\"). Parsed into a number array at render time. Non-numeric entries are silently dropped.", "type": "string" }, { "name": "color", "description": "CSS color override applied to strokes and fills. Accepts any valid CSS color value. Defaults to var(--accent-primary) when not set.", "type": "string" }, { "name": "type", "description": "Chart type. Line renders a polyline with optional area fill; bar renders evenly spaced rectangles.", "type": "'line' | 'bar'" }, { "name": "width", "description": "SVG viewport width in pixels.", "type": "number" }, { "name": "height", "description": "SVG viewport height in pixels.", "type": "number" }, { "name": "fill", "description": "When true and type is \"line\", fills the area beneath the curve with a semi-transparent accent color.", "type": "boolean" } ], "events": [] } }, { "name": "arc-stat", "description": "Numeric statistic display with gradient value and label.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **stat**\n- **value**\n- **label**\n- **trend**", "doc-url": "", "attributes": [ { "name": "value", "description": "The stat value (e.g. \"99%\")", "value": { "type": "string", "default": "''" } }, { "name": "label", "description": "Label below the value", "value": { "type": "string", "default": "''" } }, { "name": "trend", "description": "Shows a trend indicator arrow below the label. Empty (the default) shows none; an unrecognised value falls back to empty rather than rendering an uncoloured dash that no `:host([trend=...])` rule matches.", "value": { "type": "'' | 'up' | 'down' | 'neutral'", "default": "''" } }, { "name": "change", "description": "Text displayed next to the trend arrow, typically a percentage like '+12%' or '-3.5%'.", "value": { "type": "string", "default": "''" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "value", "description": "The stat value (e.g. \"99%\")", "type": "string" }, { "name": "label", "description": "Label below the value", "type": "string" }, { "name": "trend", "description": "Shows a trend indicator arrow below the label. Empty (the default) shows none; an unrecognised value falls back to empty rather than rendering an uncoloured dash that no `:host([trend=...])` rule matches.", "type": "'' | 'up' | 'down' | 'neutral'" }, { "name": "change", "description": "Text displayed next to the trend arrow, typically a percentage like '+12%' or '-3.5%'.", "type": "string" } ], "events": [] } }, { "name": "arc-step", "description": "Individual step within a Stepper.\n---\n\n\n### **Slots:**\n - _default_ - Default content.", "doc-url": "", "attributes": [ { "name": "label", "description": "Step label text", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "label", "description": "Step label text", "type": "string" } ], "events": [] } }, { "name": "arc-stepper", "description": "Step indicator for multi-step workflows.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **stepper**\n- **step**\n- **line**\n- **circle**\n- **label**", "doc-url": "", "attributes": [ { "name": "active", "description": "Zero-indexed active step — steps before this index show as completed. Clamped to the range of rendered steps.", "value": { "type": "number", "default": "0" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "active", "description": "Zero-indexed active step — steps before this index show as completed. Clamped to the range of rendered steps.", "type": "number" } ], "events": [] } }, { "name": "arc-tag", "description": "Compact pill-shaped label with color variants, custom color support, and an optional remove\nbutton, for categorisation, filtering, and selection feedback.\n---\n\n\n### **Events:**\n - **arc-remove** - Fired when the remove button on a removable tag is clicked\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **tag**\n- **label**\n- **remove**", "doc-url": "", "attributes": [ { "name": "variant", "description": "Color variant. Default is neutral. Primary and secondary use accent tints. Success, warning, error and info provide semantic status colors.", "value": { "type": "'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'", "default": "'default'" } }, { "name": "size", "description": "Controls the tag size.", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" } }, { "name": "removable", "description": "When true, shows a close button that fires `arc-remove` when clicked.", "value": { "type": "boolean", "default": "false" } }, { "name": "disabled", "description": "Disables the tag, reducing opacity to 40% and blocking pointer events including the remove button.", "value": { "type": "boolean", "default": "false" } }, { "name": "color", "description": "Custom color as an RGB triplet (e.g. `\"77, 126, 247\"`). When set, overrides the variant colors for border, text, background, and hover glow. Useful for data-driven category colors.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [ { "name": "arc-remove", "type": "CustomEvent", "description": "Fired when the remove button on a removable tag is clicked" } ], "js": { "properties": [ { "name": "color", "description": "Custom color as an RGB triplet (e.g. `\"77, 126, 247\"`). When set, overrides the variant colors for border, text, background, and hover glow. Useful for data-driven category colors.", "type": "string" }, { "name": "variant", "description": "Color variant. Default is neutral. Primary and secondary use accent tints. Success, warning, error and info provide semantic status colors.", "type": "'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'" }, { "name": "size", "description": "Controls the tag size.", "type": "'sm' | 'md' | 'lg'" }, { "name": "removable", "description": "When true, shows a close button that fires `arc-remove` when clicked.", "type": "boolean" }, { "name": "disabled", "description": "Disables the tag, reducing opacity to 40% and blocking pointer events including the remove button.", "type": "boolean" } ], "events": [ { "name": "arc-remove", "type": "CustomEvent", "description": "Fired when the remove button on a removable tag is clicked" } ] } }, { "name": "arc-timeline-item", "description": "Individual event within a Timeline.\n---\n\n\n### **Slots:**\n - _default_ - Default content.", "doc-url": "", "attributes": [ { "name": "heading", "description": "Event heading", "value": { "type": "string", "default": "''" } }, { "name": "date", "description": "Date string to display", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "description", "description": "Description from slotted text content" }, { "name": "heading", "description": "Event heading", "type": "string" }, { "name": "date", "description": "Date string to display", "type": "string" } ], "events": [] } }, { "name": "arc-timeline", "description": "Vertical timeline with dated events.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **timeline**\n- **item**\n- **marker**\n- **dot**\n- **line**\n- **content**\n- **title**\n- **description**\n- **date**", "doc-url": "", "attributes": [ { "name": "headingLevel", "description": "ARIA heading level for each event title. Clamped to 1 or greater: `aria-level` below 1 is invalid and is dropped by assistive technology.", "value": { "type": "number", "default": "3" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "headingLevel", "description": "ARIA heading level for each event title. Clamped to 1 or greater: `aria-level` below 1 is invalid and is dropped by assistive technology.", "type": "number" } ], "events": [] } }, { "name": "arc-uptime", "description": "Status-page uptime history strip: one slim tick per period, colored by\nstatus. Hovering or arrow-keying across the strip raises a tick with the\nhouse status glow and shows its detail in a small built-in bubble. Accepts\nplain uptime fractions (thresholds decide the status) or explicit status\nobjects, and renders the computed overall percentage above the track.\n---\n\n\n### **Methods:**\n - **statusOf(value)** - Map an uptime fraction to a status name; anything non-finite is none.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **uptime**\n- **summary**\n- **track**\n- **tick**\n- **detail**\n- **caption**", "doc-url": "", "attributes": [ { "name": "data", "description": "One entry per period, oldest first. A number is an uptime fraction from 0 to 1, mapped to a status by threshold (0.99 and up is \"up\", 0.95 and up is \"degraded\", below is \"down\"). An object may carry an explicit `status` (which wins over any threshold), a `value` used for the summary math, and a `label` shown in the hover detail. An entry with neither a finite value nor a status renders as the neutral \"none\" track. Set it from script, a framework binding, or a JSON attribute.", "value": { "type": "Array", "default": "[]" } }, { "name": "start-label", "description": "Caption under the oldest end of the track (e.g. \"90 days ago\").", "value": { "type": "string", "default": "''" } }, { "name": "end-label", "description": "Caption under the newest end of the track (e.g. \"Today\").", "value": { "type": "string", "default": "''" } }, { "name": "summary", "description": "Whether to render the overall percentage above the track (default true; set the attribute to the string \"false\" to disable from markup). The percentage is the mean of every finite value in the data; when no entry carries a value the line is omitted regardless.", "value": { "type": "boolean", "default": "true" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "startLabel", "description": "Caption under the oldest end of the track (e.g. \"90 days ago\").", "type": "string" }, { "name": "endLabel", "description": "Caption under the newest end of the track (e.g. \"Today\").", "type": "string" }, { "name": "summary", "description": "Whether to render the overall percentage above the track (default true; set the attribute to the string \"false\" to disable from markup). The percentage is the mean of every finite value in the data; when no entry carries a value the line is omitted regardless.", "type": "boolean" }, { "name": "data", "description": "One entry per period, oldest first. A number is an uptime fraction from 0 to 1, mapped to a status by threshold (0.99 and up is \"up\", 0.95 and up is \"degraded\", below is \"down\"). An object may carry an explicit `status` (which wins over any threshold), a `value` used for the summary math, and a `label` shown in the hover detail. An entry with neither a finite value nor a status renders as the neutral \"none\" track. Set it from script, a framework binding, or a JSON attribute.", "type": "Array" } ], "events": [] } }, { "name": "arc-value-card", "description": "Horizontal card with icon and text, for values or features lists.\n---\n\n\n### **Slots:**\n - **icon**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **card**\n- **icon**\n- **title**\n- **description**", "doc-url": "", "attributes": [ { "name": "icon", "description": "Icon text displayed beside content", "value": { "type": "string", "default": "''" } }, { "name": "heading", "description": "Card title", "value": { "type": "string", "default": "''" } }, { "name": "description", "description": "Card body text", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "icon" } ], "events": [], "js": { "properties": [ { "name": "icon", "description": "Icon text displayed beside content", "type": "string" }, { "name": "heading", "description": "Card title", "type": "string" }, { "name": "description", "description": "Card body text", "type": "string" } ], "events": [] } }, { "name": "arc-waveform", "description": "Audio waveform visualization that doubles as a scrubber. Renders a peaks array as an SVG\nwaveform — the played region in accent with a soft glow, the unplayed region muted, and a\nglowing playhead line at the current position. With `interactive` set it becomes a seek\ncontrol: pointer scrubbing and keyboard arrows move the playhead, emitting `arc-input`\nwhile the gesture is in flight and `arc-change` when the value commits.\n\nThe component never touches audio itself — no AudioContext, no decoding. The consumer\ncomputes peak amplitudes (one number per bar, 0 to 1) however it likes and hands them\nover as an array. This keeps the component a pure function of its props, so it\nserver-renders and stays cheap enough for a lane of clips in a DAW timeline.\n\nThe time axis is deliberately direction-fixed: audio time flows left-to-right even in\nRTL contexts, matching every DAW, player, and editor convention.\n---\n\n\n### **Events:**\n - **arc-input** - Fired continuously while scrubbing (every pointer move and each keyboard nudge). `value` is the position fraction 0-1; `time` is seconds when `duration` is set, otherwise null. Use for live preview — updating a time display or audibly scrubbing.\n- **arc-change** - Fired once when the seek commits: on pointer release, or with each keyboard nudge. Use for the actual seek on your audio source.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **waveform** - The interactive track region wrapping the SVG and playhead.\n- **svg** - The SVG element.\n- **unplayed** - The unplayed (muted) waveform layer. Named `base` before v4, which is the name the root element takes across every component now.\n- **played** - The played (accent) waveform layer.\n- **playhead** - The playhead line.\n- **time** - The time readout row (renders only when duration is set).", "doc-url": "", "attributes": [ { "name": "peaks", "description": "Peak amplitudes as a number array, each value 0 to 1. Set it from script, a framework binding, or a JSON attribute. Values outside the range are clamped. An empty or missing array renders an empty track.", "value": { "type": "Array", "default": "[]" } }, { "name": "position", "description": "Current playhead position as a fraction of the total, 0 to 1. Not seconds: multiply by `duration` yourself if you track seconds. Updated by the component during scrubbing and reflected as an attribute.", "value": { "type": "number", "default": "0" } }, { "name": "duration", "description": "Total duration in seconds. Optional; when set, time readouts render below the waveform and the slider announces times instead of percentages.", "value": { "type": "number", "default": "0" } }, { "name": "interactive", "description": "Enables scrubbing. The waveform becomes a focusable slider: click or drag to seek, arrow keys to nudge, Home/End to jump. Without it the waveform is a static image.", "value": { "type": "boolean", "default": "false" } }, { "name": "variant", "description": "Rendering style. `bars` draws discrete bar pairs mirrored around the center line; `mirror` draws a filled min/max envelope.", "value": { "type": "'bars' | 'mirror'", "default": "'bars'" } }, { "name": "label", "description": "Accessible name for the waveform. Announced as the slider label when interactive, or as the image description otherwise.", "value": { "type": "string", "default": "''" } } ], "slots": [], "events": [ { "name": "arc-input", "type": "CustomEvent<{ value: number, time: number | null }>", "description": "Fired continuously while scrubbing (every pointer move and each keyboard nudge). `value` is the position fraction 0-1; `time` is seconds when `duration` is set, otherwise null. Use for live preview — updating a time display or audibly scrubbing." }, { "name": "arc-change", "type": "CustomEvent<{ value: number, time: number | null }>", "description": "Fired once when the seek commits: on pointer release, or with each keyboard nudge. Use for the actual seek on your audio source." } ], "js": { "properties": [ { "name": "label", "description": "Accessible name for the waveform. Announced as the slider label when interactive, or as the image description otherwise.", "type": "string" }, { "name": "peaks", "description": "Peak amplitudes as a number array, each value 0 to 1. Set it from script, a framework binding, or a JSON attribute. Values outside the range are clamped. An empty or missing array renders an empty track.", "type": "Array" }, { "name": "position", "description": "Current playhead position as a fraction of the total, 0 to 1. Not seconds: multiply by `duration` yourself if you track seconds. Updated by the component during scrubbing and reflected as an attribute.", "type": "number" }, { "name": "duration", "description": "Total duration in seconds. Optional; when set, time readouts render below the waveform and the slider announces times instead of percentages.", "type": "number" }, { "name": "interactive", "description": "Enables scrubbing. The waveform becomes a focusable slider: click or drag to seek, arrow keys to nudge, Home/End to jump. Without it the waveform is a static image.", "type": "boolean" }, { "name": "variant", "description": "Rendering style. `bars` draws discrete bar pairs mirrored around the center line; `mirror` draws a filled min/max envelope.", "type": "'bars' | 'mirror'" } ], "events": [ { "name": "arc-input", "type": "CustomEvent<{ value: number, time: number | null }>", "description": "Fired continuously while scrubbing (every pointer move and each keyboard nudge). `value` is the position fraction 0-1; `time` is seconds when `duration` is set, otherwise null. Use for live preview — updating a time display or audibly scrubbing." }, { "name": "arc-change", "type": "CustomEvent<{ value: number, time: number | null }>", "description": "Fired once when the seek commits: on pointer release, or with each keyboard nudge. Use for the actual seek on your audio source." } ] } }, { "name": "arc-alert", "description": "Contextual alert banner with five semantic variants and optional dismiss button for delivering\ntimely, prominent feedback to users.\n---\n\n\n### **Events:**\n - **arc-close** - Fired when a dismissible alert is closed\n\n### **Slots:**\n - **icon** - Replaces the built-in status glyph. Absorbed from arc-callout, whose icon was slottable.\n- _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **alert**\n- **icon**\n- **heading**\n- **content**\n- **dismiss**", "doc-url": "", "attributes": [ { "name": "variant", "description": "Controls the semantic color palette, the icon, and — through the `ROLES` table — the ARIA role and whether the alert is announced. Use \"info\" for neutral guidance, \"tip\" for advice, \"success\" for confirmations, \"warning\" for caution states, and \"error\" for failures or blocking issues.", "value": { "type": "'info' | 'tip' | 'success' | 'warning' | 'error'", "default": "'info'" } }, { "name": "live", "description": "Announcement behaviour. `auto` (the default) derives it from `variant`: error and warning are assertive, success is polite, info and tip are not announced at all. Set it explicitly when severity and urgency disagree — an `info` alert injected after a background save wants `polite`; a `warning` rendered in the initial page probably wants `off`.", "value": { "type": "'auto' | 'off' | 'polite' | 'assertive'", "default": "'auto'" } }, { "name": "density", "description": "Visual density. 'compact' reduces padding and font sizes for inline or space-constrained usage.", "value": { "type": "'default' | 'compact'", "default": "'default'" } }, { "name": "dismissible", "description": "When true, renders a close button in the top-right corner. Clicking it removes the alert from the DOM and fires an \"arc-close\" event that parent components can listen to.", "value": { "type": "boolean", "default": "false" } }, { "name": "heading", "description": "Optional bold heading rendered above the body slot. Use it for a scannable one-line summary so users can quickly gauge the alert's importance before reading the full message.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "icon", "description": "Replaces the built-in status glyph. Absorbed from arc-callout, whose icon was slottable." }, { "name": "", "description": "Default content." } ], "events": [ { "name": "arc-close", "type": "CustomEvent", "description": "Fired when a dismissible alert is closed" } ], "js": { "properties": [ { "name": "heading", "description": "Optional bold heading rendered above the body slot. Use it for a scannable one-line summary so users can quickly gauge the alert's importance before reading the full message.", "type": "string" }, { "name": "variant", "description": "Controls the semantic color palette, the icon, and — through the `ROLES` table — the ARIA role and whether the alert is announced. Use \"info\" for neutral guidance, \"tip\" for advice, \"success\" for confirmations, \"warning\" for caution states, and \"error\" for failures or blocking issues.", "type": "'info' | 'tip' | 'success' | 'warning' | 'error'" }, { "name": "live", "description": "Announcement behaviour. `auto` (the default) derives it from `variant`: error and warning are assertive, success is polite, info and tip are not announced at all. Set it explicitly when severity and urgency disagree — an `info` alert injected after a background save wants `polite`; a `warning` rendered in the initial page probably wants `off`.", "type": "'auto' | 'off' | 'polite' | 'assertive'" }, { "name": "dismissible", "description": "When true, renders a close button in the top-right corner. Clicking it removes the alert from the DOM and fires an \"arc-close\" event that parent components can listen to.", "type": "boolean" }, { "name": "density", "description": "Visual density. 'compact' reduces padding and font sizes for inline or space-constrained usage.", "type": "'default' | 'compact'" } ], "events": [ { "name": "arc-close", "type": "CustomEvent", "description": "Fired when a dismissible alert is closed" } ] } }, { "name": "arc-announcement", "description": "ARIA live-region wrapper with no visual output. Announces dynamic content changes to screen\nreaders. Zero visual footprint — pure accessibility utility.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **region**", "doc-url": "", "attributes": [ { "name": "politeness", "description": "Controls the ARIA live region politeness level. Polite waits for the screen reader to finish before announcing; assertive interrupts immediately.", "value": { "type": "'polite' | 'assertive'", "default": "'polite'" } }, { "name": "message", "description": "The text to announce to screen readers. Each time this property changes, a new announcement is triggered.", "value": { "type": "string", "default": "''" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "message", "description": "The text to announce to screen readers. Each time this property changes, a new announcement is triggered.", "type": "string" }, { "name": "politeness", "description": "Controls the ARIA live region politeness level. Polite waits for the screen reader to finish before announcing; assertive interrupts immediately.", "type": "'polite' | 'assertive'" } ], "events": [] } }, { "name": "arc-banner", "description": "Full-width persistent strip pinned to viewport or section top. Uses semantic variants like alert\nbut edge-to-edge with no border-radius and a subtle gradient wash.\n---\n\n\n### **Events:**\n - **arc-close** - Fired when a dismissible banner is closed by the user\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **banner**\n- **icon**\n- **message**\n- **dismiss**", "doc-url": "", "attributes": [ { "name": "variant", "description": "Controls the semantic color palette and icon. Use \"info\" for neutral announcements, \"success\" for positive confirmations, \"warning\" for caution states, and \"error\" for outages or critical failures.", "value": { "type": "'info' | 'success' | 'warning' | 'error'", "default": "'info'" } }, { "name": "dismissible", "description": "When true, renders a close button on the right side. Clicking it collapses the banner and fires an \"arc-close\" event.", "value": { "type": "boolean", "default": "false" } }, { "name": "sticky", "description": "When true, pins the banner to the top of the viewport with position: sticky so it remains visible as the user scrolls.", "value": { "type": "boolean", "default": "false" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [ { "name": "arc-close", "type": "CustomEvent", "description": "Fired when a dismissible banner is closed by the user" } ], "js": { "properties": [ { "name": "variant", "description": "Controls the semantic color palette and icon. Use \"info\" for neutral announcements, \"success\" for positive confirmations, \"warning\" for caution states, and \"error\" for outages or critical failures.", "type": "'info' | 'success' | 'warning' | 'error'" }, { "name": "dismissible", "description": "When true, renders a close button on the right side. Clicking it collapses the banner and fires an \"arc-close\" event.", "type": "boolean" }, { "name": "sticky", "description": "When true, pins the banner to the top of the viewport with position: sticky so it remains visible as the user scrolls.", "type": "boolean" } ], "events": [ { "name": "arc-close", "type": "CustomEvent", "description": "Fired when a dismissible banner is closed by the user" } ] } }, { "name": "arc-command-group", "description": "Groups CommandItems under a small uppercase heading in the results list. Items inside a group\nstill filter and keyboard-navigate as one flat list; headings disappear when none of their items\nmatch.\n---\n\n\n### **Slots:**\n - _default_ - Default content.", "doc-url": "", "attributes": [ { "name": "heading", "description": "Heading text displayed above the group’s items.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "heading", "description": "Heading text displayed above the group’s items.", "type": "string" } ], "events": [] } }, { "name": "arc-command-item", "description": "Action item inside a CommandPalette.\n---\n\n\n### **Slots:**\n - _default_ - Default content.", "doc-url": "", "attributes": [ { "name": "shortcut", "description": "Keyboard shortcut hint", "value": { "type": "string", "default": "''" } }, { "name": "icon", "description": "Name of the icon to display before the item label.", "value": { "type": "string", "default": "''" } }, { "name": "keywords", "description": "Extra space-separated terms the search filter matches against but never displays — e.g. keywords=\"dialog popup\" on a Modal item.", "value": { "type": "string", "default": "''" } }, { "name": "description", "description": "Secondary line shown under the label and matched by search. Use it for the sentence that tells two similar results apart; a docs site can put the matching passage here so a query finds page content rather than only page titles.", "value": { "type": "string", "default": "''" } }, { "name": "value", "description": "Stable identifier carried on the arc-select detail. Defaults to the label, which is fine until two items share one — give anything a handler must act on its own value rather than matching against display text.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "label" }, { "name": "selectionValue", "description": "What arc-select reports. Falls back to the label so an item that never sets\n`value` behaves as it always did." }, { "name": "shortcut", "description": "Keyboard shortcut hint", "type": "string" }, { "name": "icon", "description": "Name of the icon to display before the item label.", "type": "string" }, { "name": "keywords", "description": "Extra space-separated terms the search filter matches against but never displays — e.g. keywords=\"dialog popup\" on a Modal item.", "type": "string" }, { "name": "description", "description": "Secondary line shown under the label and matched by search. Use it for the sentence that tells two similar results apart; a docs site can put the matching passage here so a query finds page content rather than only page titles.", "type": "string" }, { "name": "value", "description": "Stable identifier carried on the arc-select detail. Defaults to the label, which is fine until two items share one — give anything a handler must act on its own value rather than matching against display text.", "type": "string" } ], "events": [] } }, { "name": "arc-command-palette", "description": "Spotlight-style command palette with fuzzy search and keyboard shortcuts.\n\nMatching is fuzzy and ranked — see shared/fuzzy-match.js for the scoring.\n\"cmdpal\" finds \"Command Palette\", terms may be typed in any order, and\nresults come back best-first rather than in DOM order, with the matched\ncharacters marked. Items are searched on their label, their `keywords`, and\ntheir `description`; the description is also the second line the palette\nrenders, which is what lets a consumer search page content rather than only\npage titles.\n---\n\n\n### **Events:**\n - **arc-select** - Fired when a command item is selected. `detail.value` is the item's `value`, falling back to its label.\n- **arc-close** - Fired when the palette closes\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **item**\n- **match**\n- **description**\n- **dialog** - The palette panel. The scrim is `::backdrop`, which is not an element and so cannot be a part — style it with the `--palette-backdrop` custom property.\n- **search**\n- **input**\n- **results**\n- **empty**\n- **group-heading**\n- **footer**", "doc-url": "", "attributes": [ { "name": "open", "description": "Controls whether the palette is visible. When set to true, the dialog animates in, the search input auto-focuses, and body scroll is locked. Set to false to close.", "value": { "type": "boolean", "default": "false" } }, { "name": "placeholder", "description": "Placeholder text displayed in the search input when the query is empty.", "value": { "type": "string", "default": "'Type a command...'" } }, { "name": "max-results", "description": "How many ranked results to render. Truncation happens after ranking, so what survives is the best of the set. Raise it for a short command list; the default suits a large one.", "value": { "type": "number", "default": "50" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [ { "name": "arc-select", "type": "CustomEvent<{ value: string, item: { label: string, shortcut: string, value: string } }>", "description": "Fired when a command item is selected. `detail.value` is the item's `value`, falling back to its label." }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the palette closes" } ], "js": { "properties": [ { "name": "placeholder", "description": "Placeholder text displayed in the search input when the query is empty.", "type": "string" }, { "name": "maxResults", "description": "How many ranked results to render. Truncation happens after ranking, so what survives is the best of the set. Raise it for a short command list; the default suits a large one.", "type": "number" }, { "name": "open", "description": "Controls whether the palette is visible. When set to true, the dialog animates in, the search input auto-focuses, and body scroll is locked. Set to false to close.", "type": "boolean" } ], "events": [ { "name": "arc-select", "type": "CustomEvent<{ value: string, item: { label: string, shortcut: string, value: string } }>", "description": "Fired when a command item is selected. `detail.value` is the item's `value`, falling back to its label." }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the palette closes" } ] } }, { "name": "arc-confirm", "description": "Confirmation prompt, in both of the shapes a confirmation needs.\n\n**Imperative:** `ArcConfirm.open({ heading, message, variant })` returns a `Promise` —\nthe shape you want at a call site that has to decide something before continuing.\n**Declarative:** the element itself, with `open` bound and `arc-confirm`/`arc-cancel` listened\nfor — the shape you want when the prompt is part of a template.\n\nV4-SCOPE §3.3: those two are different shapes rather than duplicates of each other, which is why\nboth survive. The duplicate was the old `` — a third spelling of this same prompt,\nwith a strict subset of these props and no slot — and it merged in here. The `arc-dialog` tag\nnow names the modal primitive this is built on (renamed from `arc-modal`), and that component\nthrows in dev if it is handed `message` or `confirmLabel`, so the reuse of the name cannot fail\nquietly.\n---\n\n\n### **Events:**\n - **arc-confirm** - Fired when the user clicks the confirm button\n- **arc-cancel** - Fired when the user clicks cancel, presses Escape, or clicks the backdrop\n\n### **Slots:**\n - _default_ - Body content, for when the confirmation needs markup the `message` string cannot carry — a filename in ``, an emphasized consequence, a short list of what is about to change. Falls back to `message` when nothing is slotted.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **message**\n- **cancel**\n- **confirm**", "doc-url": "", "attributes": [ { "name": "open", "description": "Controls whether the confirmation dialog is visible. For declarative usage; the imperative API manages this automatically.", "value": { "type": "boolean", "default": "false" } }, { "name": "heading", "description": "The heading text displayed at the top of the confirmation dialog.", "value": { "type": "string", "default": "''" } }, { "name": "message", "description": "The body message explaining what the user is confirming. Used as the fallback for the default slot, so it is the simplest way to set the body and the only one available to the imperative `ArcConfirm.open()` API.", "value": { "type": "string", "default": "''" } }, { "name": "confirm-label", "description": "Label for the confirm button. Use a specific verb like \"Delete\" or \"Publish\" instead of generic \"OK\".", "value": { "type": "string", "default": "'Confirm'" } }, { "name": "cancel-label", "description": "Label for the cancel button. Use a specific alternative like \"Keep\" or \"Go back\" when possible.", "value": { "type": "string", "default": "'Cancel'" } }, { "name": "variant", "description": "Controls the confirm button style. Use \"error\" for destructive actions — the confirm button renders in the error color.", "value": { "type": "'default' | 'error'", "default": "'default'" } } ], "slots": [ { "name": "", "description": "Body content, for when the confirmation needs markup the `message` string cannot carry — a filename in ``, an emphasized consequence, a short list of what is about to change. Falls back to `message` when nothing is slotted." } ], "events": [ { "name": "arc-confirm", "type": "CustomEvent", "description": "Fired when the user clicks the confirm button" }, { "name": "arc-cancel", "type": "CustomEvent", "description": "Fired when the user clicks cancel, presses Escape, or clicks the backdrop" } ], "js": { "properties": [ { "name": "heading", "description": "The heading text displayed at the top of the confirmation dialog.", "type": "string" }, { "name": "message", "description": "The body message explaining what the user is confirming. Used as the fallback for the default slot, so it is the simplest way to set the body and the only one available to the imperative `ArcConfirm.open()` API.", "type": "string" }, { "name": "confirmLabel", "description": "Label for the confirm button. Use a specific verb like \"Delete\" or \"Publish\" instead of generic \"OK\".", "type": "string" }, { "name": "cancelLabel", "description": "Label for the cancel button. Use a specific alternative like \"Keep\" or \"Go back\" when possible.", "type": "string" }, { "name": "variant", "description": "Controls the confirm button style. Use \"error\" for destructive actions — the confirm button renders in the error color.", "type": "'default' | 'error'" } ], "events": [ { "name": "arc-confirm", "type": "CustomEvent", "description": "Fired when the user clicks the confirm button" }, { "name": "arc-cancel", "type": "CustomEvent", "description": "Fired when the user clicks cancel, presses Escape, or clicks the backdrop" } ] } }, { "name": "arc-connection-status", "description": "Auto-detects online/offline via navigator API. Offline triggers a persistent warning bar with\namber glow pulse. Reconnection auto-dismisses with success flash.\n---\n\n\n### **Events:**\n - **arc-online** - Fired when the browser regains network connectivity\n- **arc-offline** - Fired when the browser loses network connectivity\n\n### **CSS Parts:**\n - **base** - The root element.\n- **status**\n- **dot**\n- **label**", "doc-url": "", "attributes": [ { "name": "online", "value": { "type": "boolean", "default": "true" } } ], "slots": [], "events": [ { "name": "arc-online", "type": "CustomEvent", "description": "Fired when the browser regains network connectivity" }, { "name": "arc-offline", "type": "CustomEvent", "description": "Fired when the browser loses network connectivity" } ], "js": { "properties": [ { "name": "online", "type": "boolean" } ], "events": [ { "name": "arc-online", "type": "CustomEvent", "description": "Fired when the browser regains network connectivity" }, { "name": "arc-offline", "type": "CustomEvent", "description": "Fired when the browser loses network connectivity" } ] } }, { "name": "arc-context-menu", "description": "Right-click context menu with keyboard shortcuts.\n---\n\n\n### **Events:**\n - **arc-open** - Fired when the context menu opens\n- **arc-close** - Fired when the context menu closes\n- **arc-select** - Fired when a menu item is selected\n\n### **Slots:**\n - _default_ - Default content.\n- **content**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **menu**\n- **divider**", "doc-url": "", "attributes": [ { "name": "open", "description": "Controls the visibility of the context menu. Set to true when the contextmenu event fires; set to false when the user selects an item, clicks the backdrop, or presses Escape.", "value": { "type": "boolean", "default": "false" } } ], "slots": [ { "name": "", "description": "Default content." }, { "name": "content" } ], "events": [ { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the context menu opens" }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the context menu closes" }, { "name": "arc-select", "type": "CustomEvent", "description": "Fired when a menu item is selected" } ], "js": { "properties": [ { "name": "open", "description": "Controls the visibility of the context menu. Set to true when the contextmenu event fires; set to false when the user selects an item, clicks the backdrop, or presses Escape.", "type": "boolean" } ], "events": [ { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the context menu opens" }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the context menu closes" }, { "name": "arc-select", "type": "CustomEvent", "description": "Fired when a menu item is selected" } ] } }, { "name": "arc-conversation", "description": "A chat transcript: the scrollable column that holds arc-message children. Built for AI\nassistant panels — the layout, the role alignment, and the scroll behavior all assume messages\narrive while the user is reading. While the reader sits near the bottom, new or growing\nmessages keep the view pinned to the latest; once they scroll up to re-read, the transcript\nnever yanks them back down. The arc-scroll-away and arc-scroll-return events report those\ntransitions with the distance from the bottom, so a consumer can float a \"jump to latest\" chip\nand wire it to scrollToEnd().\n---\n\n\n### **Events:**\n - **arc-scroll-away** - Fired once when the reader scrolls up out of the near-bottom zone of the transcript. detail.value is the distance from the bottom in pixels.\n- **arc-scroll-return** - Fired once when the reader comes back within the near-bottom zone. detail.value is the distance from the bottom in pixels.\n\n### **Methods:**\n - **scrollToEnd(): _void_** - Scroll the transcript to its newest message.\n\n### **Slots:**\n - _default_ - Default content: the arc-message children making up the transcript.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **conversation**", "doc-url": "", "attributes": [ { "name": "autoScroll", "description": "Follow new content: when a message is added or grows while the reader is near the bottom, scroll to keep the latest visible. A reader who has scrolled up is never pulled back down. Defaults to true; set the property to false to leave scrolling entirely to the consumer.", "value": { "type": "boolean", "default": "true" } } ], "slots": [ { "name": "", "description": "Default content: the arc-message children making up the transcript." } ], "events": [ { "name": "arc-scroll-away", "type": "CustomEvent<{value: number}>", "description": "Fired once when the reader scrolls up out of the near-bottom zone of the transcript. detail.value is the distance from the bottom in pixels." }, { "name": "arc-scroll-return", "type": "CustomEvent<{value: number}>", "description": "Fired once when the reader comes back within the near-bottom zone. detail.value is the distance from the bottom in pixels." } ], "js": { "properties": [ { "name": "autoScroll", "description": "Follow new content: when a message is added or grows while the reader is near the bottom, scroll to keep the latest visible. A reader who has scrolled up is never pulled back down. Defaults to true; set the property to false to leave scrolling entirely to the consumer.", "type": "boolean" } ], "events": [ { "name": "arc-scroll-away", "type": "CustomEvent<{value: number}>", "description": "Fired once when the reader scrolls up out of the near-bottom zone of the transcript. detail.value is the distance from the bottom in pixels." }, { "name": "arc-scroll-return", "type": "CustomEvent<{value: number}>", "description": "Fired once when the reader comes back within the near-bottom zone. detail.value is the distance from the bottom in pixels." } ] } }, { "name": "arc-dialog", "description": "General-purpose modal overlay on the platform's ``: the browser's focus containment,\ninert background, Escape handling and top layer, with the library's sizing, header/body/footer\nstructure and cancelable close contract on top.\n\nNamed `arc-modal` before v4. The rename is V4-SCOPE §2.4 — the element is a dialog, the platform\ncalls it a dialog, and `modal` names one of its behaviours rather than what it is. `arc-modal`\nstays as a deprecated alias for the whole of v4.\n\n**This is not the confirm prompt that used to be called `arc-dialog`.** That one is\n`` now, and it absorbed both of its old spellings. The tag name is reused here for\na different component, so this one throws in dev when it is handed `message` or `confirmLabel` —\nthe two props that would otherwise be silently ignored, leaving an empty panel.\n---\n\n\n### **Events:**\n - **arc-close** - Fired when the dialog closes. Cancelable: `preventDefault()` vetoes the close.\n- **arc-open** - Fired when the dialog opens\n\n### **Slots:**\n - **header**\n- _default_ - Default content.\n- **footer**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **dialog** - The dialog panel. Same element as `base`; the scrim is `::backdrop`, which is not an element and so cannot be a part — style it with the `--dialog-backdrop` and `--dialog-backdrop-filter` custom properties.\n- **header**\n- **close**\n- **body**\n- **footer**", "doc-url": "", "attributes": [ { "name": "open", "description": "Controls the visible state of the dialog. Set to `true` to open it and move focus inside; set to `false` to run the exit animation and restore focus to wherever it came from.", "value": { "type": "boolean", "default": "false" } }, { "name": "heading", "description": "Text displayed in the header bar, and the dialog's accessible name. Keep it short and action-oriented (e.g. \"Delete Project\" rather than \"Are you sure?\").", "value": { "type": "string", "default": "''" } }, { "name": "size", "description": "Controls the maximum width of the dialog panel. `sm` (400px) is ideal for simple confirmations, `md` (560px) for standard forms, and `lg` (720px) for content-heavy dialogs with tables or multi-column layouts.", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" } }, { "name": "fullscreen", "description": "Makes the dialog fill the entire viewport. Useful for mobile forms or complex workflows.", "value": { "type": "boolean", "default": "false" } }, { "name": "dismissible", "description": "When `true`, renders the built-in X close button and allows dismissal via Escape key and backdrop click. Set to `false` for critical decisions the user must resolve through the footer buttons. Note the default: a dialog is dismissible unless you say otherwise, where an alert is not dismissible unless you say so — the name is the convention, the default belongs to the component.", "value": { "type": "boolean", "default": "true" } } ], "slots": [ { "name": "header" }, { "name": "", "description": "Default content." }, { "name": "footer" } ], "events": [ { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the dialog closes. Cancelable: `preventDefault()` vetoes the close." }, { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the dialog opens" } ], "js": { "properties": [ { "name": "heading", "description": "Text displayed in the header bar, and the dialog's accessible name. Keep it short and action-oriented (e.g. \"Delete Project\" rather than \"Are you sure?\").", "type": "string" }, { "name": "open", "description": "Controls the visible state of the dialog. Set to `true` to open it and move focus inside; set to `false` to run the exit animation and restore focus to wherever it came from.", "type": "boolean" }, { "name": "size", "description": "Controls the maximum width of the dialog panel. `sm` (400px) is ideal for simple confirmations, `md` (560px) for standard forms, and `lg` (720px) for content-heavy dialogs with tables or multi-column layouts.", "type": "'sm' | 'md' | 'lg'" }, { "name": "dismissible", "description": "When `true`, renders the built-in X close button and allows dismissal via Escape key and backdrop click. Set to `false` for critical decisions the user must resolve through the footer buttons. Note the default: a dialog is dismissible unless you say otherwise, where an alert is not dismissible unless you say so — the name is the convention, the default belongs to the component.", "type": "boolean" }, { "name": "fullscreen", "description": "Makes the dialog fill the entire viewport. Useful for mobile forms or complex workflows.", "type": "boolean" } ], "events": [ { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the dialog closes. Cancelable: `preventDefault()` vetoes the close." }, { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the dialog opens" } ] } }, { "name": "arc-dropdown-menu", "description": "Menu dropdown triggered by a button with keyboard navigation.\n---\n\n\n### **Events:**\n - **arc-close** - Fired when the dropdown closes\n- **arc-select** - Fired when a menu item is selected\n\n### **Slots:**\n - _default_ - Default content.\n- **trigger**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **divider**\n- **item**\n- **shortcut**\n- **trigger**\n- **panel**", "doc-url": "", "attributes": [ { "name": "open", "description": "Controls whether the menu panel is visible. Toggled by clicking the trigger. Set to false when the user selects an item, clicks outside, or presses Escape.", "value": { "type": "boolean", "default": "false" } } ], "slots": [ { "name": "", "description": "Default content." }, { "name": "trigger" } ], "events": [ { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the dropdown closes" }, { "name": "arc-select", "type": "CustomEvent", "description": "Fired when a menu item is selected" } ], "js": { "properties": [ { "name": "open", "description": "Controls whether the menu panel is visible. Toggled by clicking the trigger. Set to false when the user selects an item, clicks outside, or presses Escape.", "type": "boolean" } ], "events": [ { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the dropdown closes" }, { "name": "arc-select", "type": "CustomEvent", "description": "Fired when a menu item is selected" } ] } }, { "name": "arc-hover-card", "description": "Card that appears on hover with a delay.\n---\n\n\n### **Events:**\n - **arc-open** - Fired when the hover card becomes visible\n- **arc-close** - Fired when the hover card hides\n\n### **Slots:**\n - _default_ - Default content.\n- **content**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **trigger**\n- **card**", "doc-url": "", "attributes": [ { "name": "position", "description": "Controls which side of the trigger the card appears on. The card is centered along the perpendicular axis using CSS transforms.", "value": { "type": "'bottom' | 'top' | 'left' | 'right'", "default": "'bottom'" } }, { "name": "open-delay", "description": "Milliseconds to wait after hover/focus before showing the card. Prevents accidental activation during fast cursor movement.", "value": { "type": "number", "default": "400" } }, { "name": "close-delay", "description": "Milliseconds to wait after the cursor leaves the trigger before hiding the card. Moving into the card cancels this timer.", "value": { "type": "number", "default": "300" } } ], "slots": [ { "name": "", "description": "Default content." }, { "name": "content" } ], "events": [ { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the hover card becomes visible" }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the hover card hides" } ], "js": { "properties": [ { "name": "openDelay", "description": "Milliseconds to wait after hover/focus before showing the card. Prevents accidental activation during fast cursor movement.", "type": "number" }, { "name": "closeDelay", "description": "Milliseconds to wait after the cursor leaves the trigger before hiding the card. Moving into the card cancels this timer.", "type": "number" }, { "name": "position", "description": "Controls which side of the trigger the card appears on. The card is centered along the perpendicular axis using CSS transforms.", "type": "'bottom' | 'top' | 'left' | 'right'" } ], "events": [ { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the hover card becomes visible" }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the hover card hides" } ] } }, { "name": "arc-loading-overlay", "description": "Semi-transparent surface-overlay with backdrop blur covering a container or page. Centers a\nspinner with optional progress text.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **overlay**\n- **spinner**\n- **message**", "doc-url": "", "attributes": [ { "name": "active", "description": "Controls whether the loading overlay is visible. When true, the overlay fades in and blocks interaction with the content behind it.", "value": { "type": "boolean", "default": "false" } }, { "name": "message", "description": "Optional text displayed below the spinner. Use it to communicate what is loading or the current progress step.", "value": { "type": "string", "default": "''" } }, { "name": "global", "description": "When true, the overlay uses fixed positioning to cover the entire viewport instead of just its parent container. Includes a focus trap in this mode.", "value": { "type": "boolean", "default": "false" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "message", "description": "Optional text displayed below the spinner. Use it to communicate what is loading or the current progress step.", "type": "string" }, { "name": "active", "description": "Controls whether the loading overlay is visible. When true, the overlay fades in and blocks interaction with the content behind it.", "type": "boolean" }, { "name": "global", "description": "When true, the overlay uses fixed positioning to cover the entire viewport instead of just its parent container. Includes a focus trap in this mode.", "type": "boolean" } ], "events": [] } }, { "name": "arc-message", "description": "One message in a conversation transcript. The speaker attribute decides the voice: user messages\nsit at the inline end on a faint accent tint, assistant messages sit at the inline start on a\nneutral surface, and system messages run centered, muted and small. The default slot is the\nmessage body — append text to it to stream a reply in — and with the markdown attribute set,\nthat slotted text renders through arc-markdown, re-rendering as the text grows. A pending\nmessage shows the typing indicator in place of its body. Slot an avatar for either speaker if\nthe product wants faces; none is built in.\n---\n\n\n### **Slots:**\n - _default_ - The message body. Text when markdown is set; any markup otherwise.\n- **avatar** - An optional avatar beside the bubble; the component ships none of its own.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **message**\n- **meta**\n- **bubble**", "doc-url": "", "attributes": [ { "name": "speaker", "description": "Whose message this is. \"user\" aligns to the inline end on an accent-tinted surface, \"assistant\" to the inline start on a neutral surface, and \"system\" runs centered and muted for notices in the transcript's own voice. An unrecognized value renders as \"user\".", "value": { "type": "'user' | 'assistant' | 'system'", "default": "'user'" } }, { "name": "author", "description": "Display name shown in the muted meta line above the bubble. Omit it and the meta line only appears when a timestamp is set.", "value": { "type": "string", "default": "''" } }, { "name": "timestamp", "description": "When the message was sent, as an ISO 8601 string. Rendered as house relative time (\"3 minutes ago\") through arc-time-ago, with the absolute date on its title.", "value": { "type": "string", "default": "''" } }, { "name": "pending", "description": "Renders the typing indicator — three pulsing dots — in place of the body while a reply is being produced. Under prefers-reduced-motion the dots give way to a static ellipsis.", "value": { "type": "boolean", "default": "false" } }, { "name": "markdown", "description": "Render the slotted text through the house markdown renderer. The slot's text content is the source; it re-parses whenever the slot changes, so streaming into the slot streams through the renderer. When false, slotted content renders as-is.", "value": { "type": "boolean", "default": "false" } } ], "slots": [ { "name": "", "description": "The message body. Text when markdown is set; any markup otherwise." }, { "name": "avatar", "description": "An optional avatar beside the bubble; the component ships none of its own." } ], "events": [], "js": { "properties": [ { "name": "author", "description": "Display name shown in the muted meta line above the bubble. Omit it and the meta line only appears when a timestamp is set.", "type": "string" }, { "name": "timestamp", "description": "When the message was sent, as an ISO 8601 string. Rendered as house relative time (\"3 minutes ago\") through arc-time-ago, with the absolute date on its title.", "type": "string" }, { "name": "speaker", "description": "Whose message this is. \"user\" aligns to the inline end on an accent-tinted surface, \"assistant\" to the inline start on a neutral surface, and \"system\" runs centered and muted for notices in the transcript's own voice. An unrecognized value renders as \"user\".", "type": "'user' | 'assistant' | 'system'" }, { "name": "pending", "description": "Renders the typing indicator — three pulsing dots — in place of the body while a reply is being produced. Under prefers-reduced-motion the dots give way to a static ellipsis.", "type": "boolean" }, { "name": "markdown", "description": "Render the slotted text through the house markdown renderer. The slot's text content is the source; it re-parses whenever the slot changes, so streaming into the slot streams through the renderer. When false, slotted content renders as-is.", "type": "boolean" } ], "events": [] } }, { "name": "arc-notification-panel", "description": "Notification dropdown panel triggered by a button.\n---\n\n\n### **Events:**\n - **arc-open** - Fired when the notification panel opens\n- **arc-close** - Fired when the notification panel closes\n\n### **Slots:**\n - **trigger**\n- **header**\n- _default_ - Default content.\n- **footer**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **trigger**\n- **panel**\n- **header**\n- **body**\n- **footer**", "doc-url": "", "attributes": [ { "name": "open", "description": "Controls whether the notification panel is visible. Toggle this programmatically or let the built-in trigger click handler manage it.", "value": { "type": "boolean", "default": "false" } }, { "name": "position", "description": "Horizontal alignment of the panel relative to the trigger element. Use top-right when the trigger is near the right edge of the viewport.", "value": { "type": "'top-right' | 'top-left'", "default": "'top-right'" } }, { "name": "max-height", "description": "Maximum height of the scrollable body area. Prevents long notification lists from overflowing the viewport.", "value": { "type": "string", "default": "'400px'" } } ], "slots": [ { "name": "trigger" }, { "name": "header" }, { "name": "", "description": "Default content." }, { "name": "footer" } ], "events": [ { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the notification panel opens" }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the notification panel closes" } ], "js": { "properties": [ { "name": "maxHeight", "description": "Maximum height of the scrollable body area. Prevents long notification lists from overflowing the viewport.", "type": "string" }, { "name": "open", "description": "Controls whether the notification panel is visible. Toggle this programmatically or let the built-in trigger click handler manage it.", "type": "boolean" }, { "name": "position", "description": "Horizontal alignment of the panel relative to the trigger element. Use top-right when the trigger is near the right edge of the viewport.", "type": "'top-right' | 'top-left'" } ], "events": [ { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the notification panel opens" }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the notification panel closes" } ] } }, { "name": "arc-popover", "description": "Floating content panel anchored to a trigger element, with four placement positions and\nautomatic outside-click dismissal.\n---\n\n\n### **Events:**\n - **arc-open** - Fired when the popover opens.\n- **arc-close** - Fired when the popover closes.\n\n### **Slots:**\n - **trigger**\n- _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **trigger**\n- **panel**", "doc-url": "", "attributes": [ { "name": "open", "description": "Whether the popover panel is currently visible. Reflected as an attribute.", "value": { "type": "boolean", "default": "false" } }, { "name": "position", "description": "Placement of the panel relative to the trigger element.", "value": { "type": "'top' | 'bottom' | 'left' | 'right'", "default": "'bottom'" } }, { "name": "trigger", "description": "Reserved for future trigger-mode configuration (click, hover, manual).", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "trigger" }, { "name": "", "description": "Default content." } ], "events": [ { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the popover opens." }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the popover closes." } ], "js": { "properties": [ { "name": "trigger", "description": "Reserved for future trigger-mode configuration (click, hover, manual).", "type": "string" }, { "name": "open", "description": "Whether the popover panel is currently visible. Reflected as an attribute.", "type": "boolean" }, { "name": "position", "description": "Placement of the panel relative to the trigger element.", "type": "'top' | 'bottom' | 'left' | 'right'" } ], "events": [ { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the popover opens." }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the popover closes." } ] } }, { "name": "arc-progress", "description": "Progress indicator as a bar or spinner, with determinate and indeterminate modes. Shows\ncompletion state for uploads, installations, and long-running operations.\n---\n\n\n### **CSS Parts:**\n - **base** - The root element.\n- **progress**\n- **label**\n- **spinner**\n- **value**\n- **track**\n- **fill**", "doc-url": "", "attributes": [ { "name": "value", "description": "Current completion percentage from 0 to 100. Only meaningful in determinate mode. The bar fills proportionally and aria-valuenow updates to match, giving screen readers a live reading.", "value": { "type": "number", "default": "0" } }, { "name": "variant", "description": "Selects the visual shape. Bar renders a horizontal track with a fill that grows from left to right — best for wide containers and known percentages. Spinner renders a circular indicator suited to compact inline or button contexts.", "value": { "type": "'bar' | 'spinner'", "default": "'bar'" } }, { "name": "size", "description": "Controls the thickness of the bar track or the diameter of the spinner. Small (sm) fits inside table cells and tight layouts. Medium (md) is the standard default. Large (lg) is appropriate for page-level or hero loading states.", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" } }, { "name": "indeterminate", "description": "When true, the bar pulses or the spinner loops without a fixed endpoint. Use this when the total work is unknown. Switch to determinate (indeterminate=false) and set a value as soon as real progress data becomes available.", "value": { "type": "boolean", "default": "false" } }, { "name": "showValue", "description": "Displays the current percentage value next to the label.", "value": { "type": "boolean", "default": "false" } }, { "name": "label", "description": "Accessible label text applied as aria-label on the underlying progressbar role element. This is the only way screen readers can convey the purpose of the indicator. Always provide a meaningful label such as \"Uploading report.pdf\" rather than a generic \"Loading\".", "value": { "type": "string", "default": "''" } } ], "slots": [], "events": [], "js": { "properties": [ { "name": "label", "description": "Accessible label text applied as aria-label on the underlying progressbar role element. This is the only way screen readers can convey the purpose of the indicator. Always provide a meaningful label such as \"Uploading report.pdf\" rather than a generic \"Loading\".", "type": "string" }, { "name": "value", "description": "Current completion percentage from 0 to 100. Only meaningful in determinate mode. The bar fills proportionally and aria-valuenow updates to match, giving screen readers a live reading.", "type": "number" }, { "name": "variant", "description": "Selects the visual shape. Bar renders a horizontal track with a fill that grows from left to right — best for wide containers and known percentages. Spinner renders a circular indicator suited to compact inline or button contexts.", "type": "'bar' | 'spinner'" }, { "name": "size", "description": "Controls the thickness of the bar track or the diameter of the spinner. Small (sm) fits inside table cells and tight layouts. Medium (md) is the standard default. Large (lg) is appropriate for page-level or hero loading states.", "type": "'sm' | 'md' | 'lg'" }, { "name": "indeterminate", "description": "When true, the bar pulses or the spinner loops without a fixed endpoint. Use this when the total work is unknown. Switch to determinate (indeterminate=false) and set a value as soon as real progress data becomes available.", "type": "boolean" }, { "name": "showValue", "description": "Displays the current percentage value next to the label.", "type": "boolean" } ], "events": [] } }, { "name": "arc-sheet", "description": "A sliding overlay panel that emerges from the bottom or right edge of the viewport, with a\nblurred backdrop, header, scrollable body, and footer slot.\n---\n\n\n### **Events:**\n - **arc-close** - Fired when the sheet closes\n- **arc-open** - Fired when the sheet opens\n\n### **Slots:**\n - **header**\n- _default_ - Default content.\n- **footer**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **close**\n- **panel** - The sliding panel. The scrim is `::backdrop`, which is not an element and so cannot be a part — style it with the `--sheet-backdrop` and `--sheet-backdrop-filter` custom properties.\n- **handle**\n- **header**\n- **body**\n- **footer**", "doc-url": "", "attributes": [ { "name": "open", "description": "Controls whether the sheet is visible. Reflected as an attribute and toggleable programmatically.", "value": { "type": "boolean", "default": "false" } }, { "name": "side", "description": "Which edge the panel slides in from. Bottom sheets have a max-height of 80vh; right sheets are 400px wide.", "value": { "type": "'bottom' | 'right'", "default": "'bottom'" } }, { "name": "heading", "description": "Text displayed in the header row. Also used as the `aria-label` for the dialog panel.", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "header" }, { "name": "", "description": "Default content." }, { "name": "footer" } ], "events": [ { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the sheet closes" }, { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the sheet opens" } ], "js": { "properties": [ { "name": "heading", "description": "Text displayed in the header row. Also used as the `aria-label` for the dialog panel.", "type": "string" }, { "name": "open", "description": "Controls whether the sheet is visible. Reflected as an attribute and toggleable programmatically.", "type": "boolean" }, { "name": "side", "description": "Which edge the panel slides in from. Bottom sheets have a max-height of 80vh; right sheets are 400px wide.", "type": "'bottom' | 'right'" } ], "events": [ { "name": "arc-close", "type": "CustomEvent", "description": "Fired when the sheet closes" }, { "name": "arc-open", "type": "CustomEvent", "description": "Fired when the sheet opens" } ] } }, { "name": "arc-toast", "description": "Stack-managed notification toasts with auto-dismiss, variant-colored indicators, configurable\nposition, smooth enter/exit animations, and the stacking policy that used to live in a separate\narc-toast-manager: a cap on how many show at once, a FIFO queue for the overflow, and\ndeduplication of repeated messages.\n\nQueueing belongs here rather than in a wrapper. As a separate component it could only reach\narc-toast's public surface, so a duplicate of a *visible* toast had to be dismissed and re-shown\nto gain its \"(×N)\" suffix — a visible flicker for what is conceptually a counter increment. Owning\nthe render state makes that an in-place update.\n\nEvery method has a document-level event beside it, so a consumer who cannot\nreach the element — a framework wrapper that exposes no handle, a module with\nno reference to the page's toast host — can still drive it:\n`arc-toast` (show), `arc-toast-update`, `arc-toast-complete`,\n`arc-toast-dismiss` and `arc-toast-clear`. Pass `detail.id` to `arc-toast` to\nname the toast yourself; the other four take that id back. A CustomEvent's\n`detail` is never cloned, so an `action` callback survives the trip.\n---\n\n\n### **Events:**\n - **arc-queue-overflow** - Fired when the queue exceeds queueLimit and the oldest queued entries are dropped. detail: { dropped }.\n- **arc-queue-change** - Fired whenever the visible or queued count changes. detail: { visible, queued }.\n- **arc-complete** - Fired when a progress toast is completed with complete(id). detail: { id }.\n- **arc-cancel** - Fired when the user clicks a progress toast's cancel button. detail: { id }.\n- **arc-action** - Fired when the user clicks a toast's action button, before it dismisses. detail: { id }. Absorbed from arc-snackbar, whose action was reachable as an event as well as the `action` callback — a callback cannot be attached declaratively.\n- **arc-close** - Fired when a toast notification is dismissed. detail: { id } — the id show() returned.\n\n### **Methods:**\n - **show(options: _{ id?: number|string, message?: string, variant?: 'info' | 'success' | 'warning' | 'error', duration?: number, persistent?: boolean, progress?: number, action?: () => void, actionLabel?: string, onCancel?: () => void }_): _number|string_** - Show a toast, or coalesce it into an identical one that is already showing.\n\nPassing `progress` puts the toast in progress mode, absorbed from\narc-progress-toast in 4.2: it renders a track beneath the message, exempts\nitself from dedupe and from the auto-dismiss timer, and — given `onCancel`\n— offers a cancel button that fires `arc-cancel`. Move the bar with\n`updateToast(id, { progress })` and end it with `complete(id)`, which fires\n`arc-complete`. The mode is chosen here and is not switchable afterwards: a\ntrack appearing mid-life would relayout a notification the reader is\nalready reading.\n\n`action` and `actionLabel` arrive from arc-snackbar the same way. The label\nrenders a ghost button; a click runs the callback and fires `arc-action`\nbefore the toast dismisses.\n- **dismiss(id: _number|string_): _void_** - Dismiss a toast by the id show() returned, whether it is visible or still\nqueued. Unknown ids are ignored.\n- **clear(): _void_** - Dismiss everything on screen and discard the queue.\n- **updateToast(id: _number|string_, changes: _{ progress?: number, message?: string }_): _void_** - Move a progress toast's bar, its message, or both. Unknown ids are ignored,\nmatching dismiss().\n\nNamed `updateToast` rather than `update` because `update` is Lit's — the\nname arc-progress-toast used, and the reason it also carried a do-nothing\n`update(changedProps) { super.update(changedProps); }` override that read\nas if it meant something.\n- **complete(id: _number|string_): _void_** - Finish a progress toast: dismiss it and fire `arc-complete`.\n\nDistinct from `dismiss()` on purpose — the operation finishing and the user\nclosing the toast are different events, and a consumer waiting on the first\nshould not be woken by the second.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **container**\n- **toast**\n- **action**\n- **dismiss**\n- **track**\n- **fill**\n- **cancel**", "doc-url": "", "attributes": [ { "name": "position", "description": "Anchors the toast stack to a fixed edge of the viewport. Top-right is the most conventional position for web applications. Bottom positions work well for media players or editors where the top area is occupied by toolbars.", "value": { "type": "'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center'", "default": "'top-right'" } }, { "name": "duration", "description": "Time in milliseconds before a toast auto-dismisses. Applies as the default for every show() call but can be overridden per-toast via the duration option in the show() payload. Set to 0 to disable auto-dismiss entirely, requiring the user to click the close button.", "value": { "type": "number", "default": "4000" } }, { "name": "max-visible", "description": "Maximum toasts on screen at once (attribute: max-visible). Further show() calls queue FIFO and release as visible toasts dismiss. Set to 0 for no cap.", "value": { "type": "number", "default": "3" } }, { "name": "dedupe", "description": "When true, a show() whose message and variant match a visible or queued toast is coalesced: the existing toast gains a \"(×N)\" counter and a fresh timer instead of a second toast appearing. Set the property to false from JS to disable.", "value": { "type": "boolean", "default": "true" } }, { "name": "queueLimit", "description": "Maximum queued (not visible) toasts (attribute: queue-limit). Beyond it the oldest queued entries are dropped and arc-queue-overflow fires with the drop count.", "value": { "type": "number", "default": "20" } } ], "slots": [], "events": [ { "name": "arc-queue-overflow", "type": "CustomEvent", "description": "Fired when the queue exceeds queueLimit and the oldest queued entries are dropped. detail: { dropped }." }, { "name": "arc-queue-change", "type": "CustomEvent", "description": "Fired whenever the visible or queued count changes. detail: { visible, queued }." }, { "name": "arc-complete", "type": "CustomEvent", "description": "Fired when a progress toast is completed with complete(id). detail: { id }." }, { "name": "arc-cancel", "type": "CustomEvent", "description": "Fired when the user clicks a progress toast's cancel button. detail: { id }." }, { "name": "arc-action", "type": "CustomEvent", "description": "Fired when the user clicks a toast's action button, before it dismisses. detail: { id }. Absorbed from arc-snackbar, whose action was reachable as an event as well as the `action` callback — a callback cannot be attached declaratively." }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when a toast notification is dismissed. detail: { id } — the id show() returned." } ], "js": { "properties": [ { "name": "duration", "description": "Time in milliseconds before a toast auto-dismisses. Applies as the default for every show() call but can be overridden per-toast via the duration option in the show() payload. Set to 0 to disable auto-dismiss entirely, requiring the user to click the close button.", "type": "number" }, { "name": "maxVisible", "description": "Maximum toasts on screen at once (attribute: max-visible). Further show() calls queue FIFO and release as visible toasts dismiss. Set to 0 for no cap.", "type": "number" }, { "name": "position", "description": "Anchors the toast stack to a fixed edge of the viewport. Top-right is the most conventional position for web applications. Bottom positions work well for media players or editors where the top area is occupied by toolbars.", "type": "'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center'" }, { "name": "dedupe", "description": "When true, a show() whose message and variant match a visible or queued toast is coalesced: the existing toast gains a \"(×N)\" counter and a fresh timer instead of a second toast appearing. Set the property to false from JS to disable.", "type": "boolean" }, { "name": "queueLimit", "description": "Maximum queued (not visible) toasts (attribute: queue-limit). Beyond it the oldest queued entries are dropped and arc-queue-overflow fires with the drop count.", "type": "number" } ], "events": [ { "name": "arc-queue-overflow", "type": "CustomEvent", "description": "Fired when the queue exceeds queueLimit and the oldest queued entries are dropped. detail: { dropped }." }, { "name": "arc-queue-change", "type": "CustomEvent", "description": "Fired whenever the visible or queued count changes. detail: { visible, queued }." }, { "name": "arc-complete", "type": "CustomEvent", "description": "Fired when a progress toast is completed with complete(id). detail: { id }." }, { "name": "arc-cancel", "type": "CustomEvent", "description": "Fired when the user clicks a progress toast's cancel button. detail: { id }." }, { "name": "arc-action", "type": "CustomEvent", "description": "Fired when the user clicks a toast's action button, before it dismisses. detail: { id }. Absorbed from arc-snackbar, whose action was reachable as an event as well as the `action` callback — a callback cannot be attached declaratively." }, { "name": "arc-close", "type": "CustomEvent", "description": "Fired when a toast notification is dismissed. detail: { id } — the id show() returned." } ] } }, { "name": "arc-tooltip", "description": "Contextual hint that appears on hover or focus, providing supplementary information without\ncluttering the UI. Supports four placement positions and a configurable show delay.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **trigger**\n- **popup**", "doc-url": "", "attributes": [ { "name": "content", "description": "The plain-text string displayed inside the tooltip popup. Keep this concise — one short phrase that describes the trigger element or provides a supplementary hint. HTML is not supported; for rich content, use the Popover component instead.", "value": { "type": "string", "default": "''" } }, { "name": "position", "description": "Controls which side of the trigger the tooltip appears on. Top is the most common default. Switch to bottom, left, or right when the trigger sits near a viewport edge or when the surrounding layout makes another direction more natural.", "value": { "type": "'top' | 'bottom' | 'left' | 'right'", "default": "'top'" } }, { "name": "delay", "description": "Time in milliseconds to wait after mouseenter or focusin before the tooltip becomes visible. The default of 200 ms prevents accidental activation during casual pointer movement. Increase to 400-600 ms in dense toolbars; avoid setting to 0 as it creates a jittery experience.", "value": { "type": "number", "default": "200" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "content", "description": "The plain-text string displayed inside the tooltip popup. Keep this concise — one short phrase that describes the trigger element or provides a supplementary hint. HTML is not supported; for rich content, use the Popover component instead.", "type": "string" }, { "name": "delay", "description": "Time in milliseconds to wait after mouseenter or focusin before the tooltip becomes visible. The default of 200 ms prevents accidental activation during casual pointer movement. Increase to 400-600 ms in dense toolbars; avoid setting to 0 as it creates a jittery experience.", "type": "number" }, { "name": "position", "description": "Controls which side of the trigger the tooltip appears on. Top is the most common default. Switch to bottom, left, or right when the trigger sits near a viewport edge or when the surrounding layout makes another direction more natural.", "type": "'top' | 'bottom' | 'left' | 'right'" } ], "events": [] } }, { "name": "arc-button-group", "description": "Connects multiple buttons into a single visual unit with shared borders and collapsed radii.\nSupports horizontal and vertical orientations.\n---\n\n\n### **Slots:**\n - _default_ - Default content.\n\n### **CSS Parts:**\n - **base** - The root element.\n- **group**", "doc-url": "", "attributes": [ { "name": "orientation", "description": "Layout direction. Vertical stacks buttons top-to-bottom.", "value": { "type": "'horizontal' | 'vertical'", "default": "'horizontal'" } }, { "name": "size", "description": "Size cascaded to all child buttons.", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" } }, { "name": "variant", "description": "Button variant cascaded to all children (e.g., \"ghost\", \"outline\").", "value": { "type": "string", "default": "''" } } ], "slots": [ { "name": "", "description": "Default content." } ], "events": [], "js": { "properties": [ { "name": "variant", "description": "Button variant cascaded to all children (e.g., \"ghost\", \"outline\").", "type": "string" }, { "name": "orientation", "description": "Layout direction. Vertical stacks buttons top-to-bottom.", "type": "'horizontal' | 'vertical'" }, { "name": "size", "description": "Size cascaded to all child buttons.", "type": "'sm' | 'md' | 'lg'" } ], "events": [] } }, { "name": "arc-button", "description": "Primary call-to-action element with three visual variants that map to action hierarchy. Supports\nprefix and suffix slots for icons. Renders as an anchor when given an href, making it ideal for\nnavigation-driven actions across landing pages, toolbars, and forms.\n---\n\n\n### **Slots:**\n - **prefix**\n- _default_ - Default content. Slotting a single `` as the only child adopts it as the button's control — the recommended form for links that must work before hydration or without JavaScript, since the anchor is real HTML in the initial markup. Put any icons inside that anchor; the `prefix`/`suffix` slots and `::part(button)` do not apply in this form.\n- **suffix**\n\n### **CSS Parts:**\n - **base** - The root element.\n- **button**", "doc-url": "", "attributes": [ { "name": "variant", "description": "Controls the visual weight and emphasis. Primary is a filled button with a neon glow hover suited for the top-level CTA. Secondary uses a bordered outline for supporting actions. Ghost renders with no border or background, ideal for low-priority or tertiary actions.", "value": { "type": "'primary' | 'secondary' | 'ghost'", "default": "'primary'" } }, { "name": "size", "description": "Sets the button size. Large (lg) is intended for hero sections and high-impact areas. Medium (md) is the default for general UI. Small (sm) fits compact toolbars, table rows, and inline contexts.", "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" } }, { "name": "href", "description": "When provided, the button renders as an element instead of a