{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "src/content/accordion-item.js",
"declarations": [
{
"kind": "class",
"description": "An individual collapsible section inside an Accordion. The question attribute supplies the\nclickable header text, and slotted children become the expandable body content.",
"name": "ArcAccordionItem",
"slots": [
{
"description": "Default content.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "answer",
"description": "Answer content from slotted children",
"readonly": true
},
{
"kind": "field",
"name": "question",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "The heading text displayed on the trigger button. Should be a concise, scannable label or question.",
"attribute": "question",
"reflects": true
}
],
"attributes": [
{
"name": "question",
"type": {
"text": "string"
},
"default": "''",
"description": "The heading text displayed on the trigger button. Should be a concise, scannable label or question.",
"fieldName": "question"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-accordion-item",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcAccordionItem",
"declaration": {
"name": "ArcAccordionItem",
"module": "src/content/accordion-item.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/accordion.js",
"declarations": [
{
"kind": "class",
"description": "Expandable content sections with smooth height animations. Ideal for FAQs, settings panels, and\nany UI that benefits from progressive disclosure.",
"name": "ArcAccordion",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "accordion"
}
],
"slots": [
{
"description": "Default content.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "multiple",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "When true, allows multiple accordion panels to be open simultaneously. When false (default), opening one panel closes any other open panel.",
"attribute": "multiple",
"default": "false",
"reflects": true
}
],
"attributes": [
{
"name": "multiple",
"type": {
"text": "boolean"
},
"description": "When true, allows multiple accordion panels to be open simultaneously. When false (default), opening one panel closes any other open panel.",
"fieldName": "multiple",
"default": "false"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-accordion",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcAccordion",
"declaration": {
"name": "ArcAccordion",
"module": "src/content/accordion.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/aspect-ratio.js",
"declarations": [
{
"kind": "class",
"description": "Container that enforces a consistent width-to-height ratio on its content, ideal for images,\nvideos, and embedded media.",
"name": "ArcAspectRatio",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "container"
},
{
"name": "inner"
}
],
"slots": [
{
"description": "Default content.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "DEFAULT_RATIO",
"type": {
"text": "string"
},
"static": true,
"default": "'16/9'",
"description": "The documented default, and what anything unusable normalises to."
},
{
"kind": "method",
"name": "parseRatio",
"static": true,
"parameters": [
{
"name": "value"
}
],
"description": "`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."
},
{
"kind": "field",
"name": "ratio",
"privacy": "public",
"type": {
"text": "string"
},
"default": "'16/9'",
"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.",
"attribute": "ratio",
"reflects": true
}
],
"attributes": [
{
"name": "ratio",
"type": {
"text": "string"
},
"default": "'16/9'",
"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.",
"fieldName": "ratio"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-aspect-ratio",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcAspectRatio",
"declaration": {
"name": "ArcAspectRatio",
"module": "src/content/aspect-ratio.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/avatar-group.js",
"declarations": [
{
"kind": "class",
"description": "Stack of avatars with overflow count badge.",
"name": "ArcAvatarGroup",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "group"
},
{
"name": "overflow"
}
],
"slots": [
{
"description": "Default content.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "max",
"privacy": "public",
"type": {
"text": "number"
},
"default": "Infinity",
"description": "Maximum number of avatars to display. Excess avatars are hidden and a \"+N\" overflow badge is shown.",
"attribute": "max"
},
{
"kind": "field",
"name": "overlap",
"privacy": "public",
"type": {
"text": "'sm' | 'md' | 'lg'"
},
"description": "Overlap density preset. sm = -8px, md = -12px, lg = -16px negative margin between avatars.",
"attribute": "overlap",
"default": "'md'",
"reflects": true
}
],
"attributes": [
{
"name": "max",
"type": {
"text": "number"
},
"default": "Infinity",
"description": "Maximum number of avatars to display. Excess avatars are hidden and a \"+N\" overflow badge is shown.",
"fieldName": "max"
},
{
"name": "overlap",
"type": {
"text": "'sm' | 'md' | 'lg'"
},
"description": "Overlap density preset. sm = -8px, md = -12px, lg = -16px negative margin between avatars.",
"fieldName": "overlap",
"default": "'md'"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-avatar-group",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcAvatarGroup",
"declaration": {
"name": "ArcAvatarGroup",
"module": "src/content/avatar-group.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/avatar.js",
"declarations": [
{
"kind": "class",
"description": "User avatar with image or initials fallback.",
"name": "ArcAvatar",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "img"
},
{
"name": "initials"
},
{
"name": "avatar"
},
{
"name": "status"
}
],
"slots": [],
"members": [
{
"kind": "field",
"name": "src",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Image URL for the avatar. When provided, renders an `![]()
` element. When empty, displays initials derived from the `name` prop.",
"attribute": "src"
},
{
"kind": "field",
"name": "name",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "User name used to generate initials (first letter, uppercased) and as the `alt` text / `aria-label` for the avatar.",
"attribute": "name",
"reflects": true
},
{
"kind": "field",
"name": "size",
"privacy": "public",
"type": {
"text": "'sm' | 'md' | 'lg'"
},
"description": "Controls avatar dimensions: `sm` (32px), `md` (40px), `lg` (56px).",
"attribute": "size",
"default": "'md'",
"reflects": true
},
{
"kind": "field",
"name": "status",
"privacy": "public",
"type": {
"text": "'' | 'online' | 'offline' | 'busy' | 'away'"
},
"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.",
"attribute": "status",
"default": "''",
"reflects": true
},
{
"kind": "field",
"name": "shape",
"privacy": "public",
"type": {
"text": "'circle' | 'square' | 'rounded'"
},
"description": "Controls the avatar shape. Options: 'circle', 'square', 'rounded'.",
"attribute": "shape",
"default": "'circle'",
"reflects": true
}
],
"attributes": [
{
"name": "src",
"type": {
"text": "string"
},
"default": "''",
"description": "Image URL for the avatar. When provided, renders an `![]()
` element. When empty, displays initials derived from the `name` prop.",
"fieldName": "src"
},
{
"name": "name",
"type": {
"text": "string"
},
"default": "''",
"description": "User name used to generate initials (first letter, uppercased) and as the `alt` text / `aria-label` for the avatar.",
"fieldName": "name"
},
{
"name": "size",
"type": {
"text": "'sm' | 'md' | 'lg'"
},
"description": "Controls avatar dimensions: `sm` (32px), `md` (40px), `lg` (56px).",
"fieldName": "size",
"default": "'md'"
},
{
"name": "shape",
"type": {
"text": "'circle' | 'square' | 'rounded'"
},
"description": "Controls the avatar shape. Options: 'circle', 'square', 'rounded'.",
"fieldName": "shape",
"default": "'circle'"
},
{
"name": "status",
"type": {
"text": "'' | 'online' | 'offline' | 'busy' | 'away'"
},
"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.",
"fieldName": "status",
"default": "''"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-avatar",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcAvatar",
"declaration": {
"name": "ArcAvatar",
"module": "src/content/avatar.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/card.js",
"declarations": [
{
"kind": "class",
"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.",
"name": "ArcCard",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "body"
},
{
"name": "footer"
},
{
"name": "card"
},
{
"name": "inner"
}
],
"slots": [
{
"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": ""
},
{
"name": "footer"
}
],
"members": [
{
"kind": "field",
"name": "href",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"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.",
"attribute": "href"
},
{
"kind": "field",
"name": "padding",
"privacy": "public",
"type": {
"text": "'none' | 'sm' | 'md' | 'lg'"
},
"description": "Controls internal spacing. Options: 'none', 'sm', 'md', 'lg'.",
"attribute": "padding",
"default": "'md'",
"reflects": true
},
{
"kind": "field",
"name": "interactive",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "Enables hover effects for clickable cards that trigger JS instead of navigating via href.",
"attribute": "interactive",
"default": "false",
"reflects": true
}
],
"attributes": [
{
"name": "href",
"type": {
"text": "string"
},
"default": "''",
"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.",
"fieldName": "href"
},
{
"name": "padding",
"type": {
"text": "'none' | 'sm' | 'md' | 'lg'"
},
"description": "Controls internal spacing. Options: 'none', 'sm', 'md', 'lg'.",
"fieldName": "padding",
"default": "'md'"
},
{
"name": "interactive",
"type": {
"text": "boolean"
},
"description": "Enables hover effects for clickable cards that trigger JS instead of navigating via href.",
"fieldName": "interactive",
"default": "false"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-card",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcCard",
"declaration": {
"name": "ArcCard",
"module": "src/content/card.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/carousel.js",
"declarations": [
{
"kind": "class",
"description": "A scrollable slide container with navigation arrows, dot indicators, auto-play, looping, and\nkeyboard controls.",
"name": "ArcCarousel",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "carousel"
},
{
"name": "viewport"
},
{
"name": "arrow-prev"
},
{
"name": "arrow-next"
},
{
"name": "dots"
},
{
"name": "dot"
}
],
"slots": [
{
"description": "Default content.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "autoPlay",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "Enables automatic slide advancement on a timer. Pauses on hover and focus, respects prefers-reduced-motion.",
"attribute": "autoPlay",
"default": "false",
"reflects": true
},
{
"kind": "field",
"name": "interval",
"privacy": "public",
"type": {
"text": "number"
},
"description": "Auto-play interval in milliseconds between slide transitions.",
"attribute": "interval",
"default": "5000"
},
{
"kind": "field",
"name": "loop",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "Enables wrapping at the edges so the last slide connects to the first and vice versa.",
"attribute": "loop",
"default": "true",
"reflects": true
},
{
"kind": "field",
"name": "showDots",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "Shows dot indicators below the viewport for direct slide navigation.",
"attribute": "showDots",
"default": "true",
"reflects": true
},
{
"kind": "field",
"name": "showArrows",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "Shows previous/next arrow buttons on the left and right edges of the viewport.",
"attribute": "showArrows",
"default": "true",
"reflects": true
}
],
"events": [
{
"name": "arc-change",
"type": {
"text": "CustomEvent"
},
"description": "Fired when the active slide changes"
}
],
"attributes": [
{
"name": "autoPlay",
"type": {
"text": "boolean"
},
"description": "Enables automatic slide advancement on a timer. Pauses on hover and focus, respects prefers-reduced-motion.",
"fieldName": "autoPlay",
"default": "false"
},
{
"name": "interval",
"type": {
"text": "number"
},
"description": "Auto-play interval in milliseconds between slide transitions.",
"fieldName": "interval",
"default": "5000"
},
{
"name": "loop",
"type": {
"text": "boolean"
},
"description": "Enables wrapping at the edges so the last slide connects to the first and vice versa.",
"fieldName": "loop",
"default": "true"
},
{
"name": "showDots",
"type": {
"text": "boolean"
},
"description": "Shows dot indicators below the viewport for direct slide navigation.",
"fieldName": "showDots",
"default": "true"
},
{
"name": "showArrows",
"type": {
"text": "boolean"
},
"description": "Shows previous/next arrow buttons on the left and right edges of the viewport.",
"fieldName": "showArrows",
"default": "true"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-carousel",
"customElement": true,
"group": "marketing",
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcCarousel",
"declaration": {
"name": "ArcCarousel",
"module": "src/content/carousel.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/collapsible.js",
"declarations": [
{
"kind": "class",
"description": "A disclosure widget with a clickable heading that toggles the visibility of its slotted content\nusing a smooth CSS grid animation.",
"name": "ArcCollapsible",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "collapsible"
},
{
"name": "trigger"
},
{
"name": "heading"
},
{
"name": "body"
}
],
"slots": [
{
"description": "Default content.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "heading",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Text displayed in the clickable trigger row. Also used as the ARIA label for the content region.",
"attribute": "heading"
},
{
"kind": "field",
"name": "open",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "Controls whether the content is visible. Reflected as an attribute and toggleable by clicking the heading.",
"attribute": "open",
"default": "false",
"reflects": true
}
],
"events": [
{
"name": "arc-toggle",
"type": {
"text": "CustomEvent<{ open: boolean }>"
},
"description": "Fired when the collapsible expands or collapses"
}
],
"attributes": [
{
"name": "open",
"type": {
"text": "boolean"
},
"description": "Controls whether the content is visible. Reflected as an attribute and toggleable by clicking the heading.",
"fieldName": "open",
"default": "false"
},
{
"name": "heading",
"type": {
"text": "string"
},
"default": "''",
"description": "Text displayed in the clickable trigger row. Also used as the ARIA label for the content region.",
"fieldName": "heading"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-collapsible",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcCollapsible",
"declaration": {
"name": "ArcCollapsible",
"module": "src/content/collapsible.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/color-swatch.js",
"declarations": [
{
"kind": "class",
"description": "Color sample square with label — useful for token docs.",
"name": "ArcColorSwatch",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "swatch"
},
{
"name": "color"
},
{
"name": "label"
}
],
"slots": [],
"members": [
{
"kind": "field",
"name": "color",
"privacy": "public",
"type": {
"text": "string"
},
"default": "'#4d7ef7'",
"description": "Any valid CSS color value applied as the swatch background",
"attribute": "color"
},
{
"kind": "field",
"name": "label",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Display label below the swatch; falls back to the color value if empty",
"attribute": "label"
},
{
"kind": "field",
"name": "size",
"privacy": "public",
"type": {
"text": "'sm' | 'md' | 'lg'"
},
"description": "Controls swatch dimensions: sm (32px), md (48px), lg (64px)",
"attribute": "size",
"default": "'md'",
"reflects": true
}
],
"attributes": [
{
"name": "color",
"type": {
"text": "string"
},
"default": "'#4d7ef7'",
"description": "Any valid CSS color value applied as the swatch background",
"fieldName": "color"
},
{
"name": "label",
"type": {
"text": "string"
},
"default": "''",
"description": "Display label below the swatch; falls back to the color value if empty",
"fieldName": "label"
},
{
"name": "size",
"type": {
"text": "'sm' | 'md' | 'lg'"
},
"description": "Controls swatch dimensions: sm (32px), md (48px), lg (64px)",
"fieldName": "size",
"default": "'md'"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-color-swatch",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcColorSwatch",
"declaration": {
"name": "ArcColorSwatch",
"module": "src/content/color-swatch.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/cta-banner.js",
"declarations": [
{
"kind": "class",
"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.",
"name": "ArcCtaBanner",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "container"
},
{
"name": "background"
},
{
"name": "inner"
},
{
"name": "eyebrow"
},
{
"name": "headline"
},
{
"name": "body"
},
{
"name": "actions"
}
],
"slots": [
{
"name": "eyebrow"
},
{
"name": "headline"
},
{
"description": "Default content.",
"name": ""
},
{
"name": "actions"
}
],
"members": [
{
"kind": "field",
"name": "eyebrow",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Small label text displayed above the headline. Typically a short phrase like \"Ready to build?\" that sets context.",
"attribute": "eyebrow"
},
{
"kind": "field",
"name": "headline",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Main headline text rendered with gradient display styling. Keep it concise and action-oriented.",
"attribute": "headline"
},
{
"kind": "field",
"name": "nogradient",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "When true, disables the radial gradient background effect for quieter contexts.",
"attribute": "nogradient",
"default": "false",
"reflects": true
}
],
"attributes": [
{
"name": "eyebrow",
"type": {
"text": "string"
},
"default": "''",
"description": "Small label text displayed above the headline. Typically a short phrase like \"Ready to build?\" that sets context.",
"fieldName": "eyebrow"
},
{
"name": "headline",
"type": {
"text": "string"
},
"default": "''",
"description": "Main headline text rendered with gradient display styling. Keep it concise and action-oriented.",
"fieldName": "headline"
},
{
"name": "nogradient",
"type": {
"text": "boolean"
},
"description": "When true, disables the radial gradient background effect for quieter contexts.",
"fieldName": "nogradient",
"default": "false"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-cta-banner",
"customElement": true,
"group": "marketing",
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcCtaBanner",
"declaration": {
"name": "ArcCtaBanner",
"module": "src/content/cta-banner.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/divider.js",
"declarations": [
{
"kind": "class",
"description": "Horizontal rule with multiple visual styles from subtle to glowing.",
"name": "ArcDivider",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "divider"
},
{
"name": "line"
},
{
"name": "label"
}
],
"slots": [],
"members": [
{
"kind": "field",
"name": "label",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"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.",
"attribute": "label"
},
{
"kind": "field",
"name": "variant",
"privacy": "public",
"type": {
"text": "'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient' | 'dashed' | 'dotted' | 'fade' | 'line'"
},
"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.",
"attribute": "variant",
"default": "'subtle'",
"reflects": true
},
{
"kind": "field",
"name": "align",
"privacy": "public",
"type": {
"text": "'' | 'left' | 'right'"
},
"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.",
"attribute": "align",
"default": "''",
"reflects": true
},
{
"kind": "field",
"name": "vertical",
"privacy": "public",
"type": {
"text": "boolean"
},
"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.",
"attribute": "vertical",
"default": "false",
"reflects": true
}
],
"attributes": [
{
"name": "variant",
"type": {
"text": "'subtle' | 'glow' | 'line-white' | 'line-primary' | 'line-gradient' | 'dashed' | 'dotted' | 'fade' | 'line'"
},
"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.",
"fieldName": "variant",
"default": "'subtle'"
},
{
"name": "align",
"type": {
"text": "'' | 'left' | 'right'"
},
"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.",
"fieldName": "align",
"default": "''"
},
{
"name": "vertical",
"type": {
"text": "boolean"
},
"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.",
"fieldName": "vertical",
"default": "false"
},
{
"name": "label",
"type": {
"text": "string"
},
"default": "''",
"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.",
"fieldName": "label"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-divider",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcDivider",
"declaration": {
"name": "ArcDivider",
"module": "src/content/divider.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/empty-state.js",
"declarations": [
{
"kind": "class",
"description": "Placeholder for empty lists or search results.",
"name": "ArcEmptyState",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "container"
},
{
"name": "icon"
},
{
"name": "heading"
},
{
"name": "description"
},
{
"name": "actions"
}
],
"slots": [
{
"name": "icon"
},
{
"name": "actions"
}
],
"members": [
{
"kind": "field",
"name": "heading",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Main heading text displayed below the icon",
"attribute": "heading"
},
{
"kind": "field",
"name": "description",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Supporting text displayed below the heading, max-width 360px",
"attribute": "description"
}
],
"attributes": [
{
"name": "heading",
"type": {
"text": "string"
},
"default": "''",
"description": "Main heading text displayed below the icon",
"fieldName": "heading"
},
{
"name": "description",
"type": {
"text": "string"
},
"default": "''",
"description": "Supporting text displayed below the heading, max-width 360px",
"fieldName": "description"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-empty-state",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcEmptyState",
"declaration": {
"name": "ArcEmptyState",
"module": "src/content/empty-state.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/feature-card.js",
"declarations": [
{
"kind": "class",
"description": "Card with icon, heading, description, and animated hover effects.",
"name": "ArcFeatureCard",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "inner"
},
{
"name": "icon"
},
{
"name": "title"
},
{
"name": "description"
},
{
"name": "action"
},
{
"name": "card"
}
],
"slots": [
{
"name": "icon"
}
],
"members": [
{
"kind": "field",
"name": "icon",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Icon text or emoji displayed in the icon box",
"attribute": "icon"
},
{
"kind": "field",
"name": "heading",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Card title",
"attribute": "heading"
},
{
"kind": "field",
"name": "description",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Card body text",
"attribute": "description"
},
{
"kind": "field",
"name": "href",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Makes the card a link",
"attribute": "href"
},
{
"kind": "field",
"name": "action",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"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.",
"attribute": "action",
"reflects": true
}
],
"attributes": [
{
"name": "icon",
"type": {
"text": "string"
},
"default": "''",
"description": "Icon text or emoji displayed in the icon box",
"fieldName": "icon"
},
{
"name": "heading",
"type": {
"text": "string"
},
"default": "''",
"description": "Card title",
"fieldName": "heading"
},
{
"name": "description",
"type": {
"text": "string"
},
"default": "''",
"description": "Card body text",
"fieldName": "description"
},
{
"name": "href",
"type": {
"text": "string"
},
"default": "''",
"description": "Makes the card a link",
"fieldName": "href"
},
{
"name": "action",
"type": {
"text": "string"
},
"default": "''",
"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.",
"fieldName": "action"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-feature-card",
"customElement": true,
"group": "marketing",
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcFeatureCard",
"declaration": {
"name": "ArcFeatureCard",
"module": "src/content/feature-card.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/hotspot.js",
"declarations": [
{
"kind": "class",
"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.",
"name": "ArcHotspot",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "pin"
},
{
"name": "panel"
}
],
"slots": [
{
"description": "Default content.",
"name": ""
}
],
"members": [
{
"kind": "method",
"name": "close",
"parameters": [
{
"name": "restoreFocus",
"default": "true",
"description": "Return focus to the pin that opened it.\nPass false when closing as a side effect of opening another pin, so\nfocus lands on the new one instead of bouncing back.",
"optional": true,
"type": {
"text": "boolean"
}
}
],
"description": "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.",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "field",
"name": "label",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"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.",
"attribute": "label",
"reflects": true
},
{
"kind": "field",
"name": "x",
"privacy": "public",
"type": {
"text": "number"
},
"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.",
"attribute": "x",
"default": "50",
"reflects": true
},
{
"kind": "field",
"name": "y",
"privacy": "public",
"type": {
"text": "number"
},
"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.",
"attribute": "y",
"default": "50",
"reflects": true
},
{
"kind": "field",
"name": "open",
"privacy": "public",
"type": {
"text": "boolean"
},
"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.",
"attribute": "open",
"default": "false",
"reflects": true
}
],
"events": [
{
"name": "arc-open",
"type": {
"text": "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": {
"text": "CustomEvent<{value: string | number}>"
},
"description": "Fired before the popover closes and cancelable — preventDefault() vetoes the close. detail.value matches arc-open."
}
],
"attributes": [
{
"name": "x",
"type": {
"text": "number"
},
"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.",
"fieldName": "x",
"default": "50"
},
{
"name": "y",
"type": {
"text": "number"
},
"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.",
"fieldName": "y",
"default": "50"
},
{
"name": "label",
"type": {
"text": "string"
},
"default": "''",
"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.",
"fieldName": "label"
},
{
"name": "open",
"type": {
"text": "boolean"
},
"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.",
"fieldName": "open",
"default": "false"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-hotspot",
"customElement": true,
"group": "marketing",
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcHotspot",
"declaration": {
"name": "ArcHotspot",
"module": "src/content/hotspot.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/icon-library.js",
"declarations": [
{
"kind": "class",
"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.",
"name": "ArcIconLibrary",
"members": [
{
"kind": "field",
"name": "name",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"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.",
"attribute": "name",
"reflects": true
}
],
"attributes": [
{
"name": "name",
"type": {
"text": "string"
},
"default": "''",
"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.",
"fieldName": "name"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-icon-library",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcIconLibrary",
"declaration": {
"name": "ArcIconLibrary",
"module": "src/content/icon-library.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/icon-registry.js",
"declarations": [
{
"kind": "variable",
"name": "iconRegistry",
"type": {
"text": "object"
},
"default": "{ /** * Register an icon library under a name. * * @param {string} name - What `use()` and `` will call it. * @param {object} library * @param {Record Promise<{default: string}>)>} library.icons - * Name → SVG source, or a thunk that imports it. A thunk is what the built-in * packs pass, one per glyph, so a bundler can split them; a plain string is * the easy shape for a small hand-rolled set. * @param {Record} [library.aliases] - ARC UI's canonical icon * name → this library's spelling. Built-in components ask for Lucide names; * supply this and they resolve against a library that calls them something * else. See @arclux/arc-ui-icons/aliases. * * Selects this library if nothing is selected yet, so a single * `import '@arclux/arc-ui-icons/phosphor'` is a complete setup. * Registering a second pack never takes the choice back from a page that has * already made one — which does mean that importing both packs and calling * neither `use()` nor `` leaves the first-imported one * active. Say which you want. */ register(name, library) { if (typeof name !== 'string' || !name) { throw new Error('iconRegistry.register: a library needs a name.'); } if (!library?.icons || typeof library.icons !== 'object') { throw new Error( `iconRegistry.register(\"${name}\"): expected { icons } mapping icon names to SVG ` + 'sources or to functions that import them.', ); } _libraries.set(name, { icons: library.icons, aliases: library.aliases ?? {} }); if (_libraryName === null) _libraryName = name; }, /** Names of every registered library, in registration order. */ libraries() { return [..._libraries.keys()]; }, /** * Whether the active library is registered — the question arc-icon asks * before blaming a missing glyph on its name. False also means `get()` has * already said the useful thing about it. */ hasLibrary() { return _libraryName !== null && _libraries.has(_libraryName); }, /** * Select which registered library names resolve against. * * Takes any name, including one whose pack has not been imported yet — see * `_libraryName` above for why this no longer throws. */ use(library) { if (typeof library !== 'string' || !library) { throw new Error('iconRegistry.use: expected a library name.'); } _libraryName = library; }, /** Register additional custom icons (merged on top of the active library). */ set(icons) { for (const [key, val] of Object.entries(icons)) { const kebab = key .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2') .replace(/([a-z])([A-Z])/g, '$1-$2') .toLowerCase(); _custom[kebab] = val; } }, /** Look up an icon by kebab-case name. Returns a Promise. */ async get(name) { readInlinePayload(); // 1. Custom icons first, and before any complaint about a library: a page // whose icons are all registered by hand, or inlined by a server build, // is a working page with no library at all. if (_custom[name]) return _custom[name]; // 2. Otherwise the active library's entry for the name, aliased. const library = activeLibrary(name); if (!library) return null; try { const entry = library.icons[library.aliases[name] ?? name] ?? library.icons[name]; if (!entry) return null; const svg = typeof entry === 'function' ? (await entry()).default : entry; if (typeof svg !== 'string') return null; _resolved.set(`${_libraryName}:${name}`, svg); return svg; } catch { return null; } }, /** * Look up an icon without awaiting — the source string if it is already in * memory, otherwise null. * * `get()` is async because the icon packs are code-split one file per glyph, * and 1,900 icons have no business being in anyone's bundle. But rendering is * synchronous, and on the server there is no second chance: `updated()` never * runs there, so an icon that is not resolvable *during render* is an icon * that does not appear in the server's HTML at all. * * So this reads the cache that `get()` fills, plus anything registered * through `set()`. Server-side, warm it with `preload()` first. Client-side * it is a fast path — and, on a hydrated page whose icons were inlined at * build time, the thing that makes the client's first render match the * server's. * * Never warns: a miss here is the ordinary \"not loaded yet\" case, which * happens once per icon on every page that works correctly. */ getSync(name) { if (!name) return null; readInlinePayload(); if (_custom[name]) return _custom[name]; return _resolved.get(`${_libraryName}:${name}`) ?? null; }, /** * Resolve icons into the synchronous cache, for rendering that cannot await. * * Names that do not exist are skipped rather than throwing: a page listing * the icons it uses should not fail to build over one typo. */ async preload(names) { await Promise.all([...new Set(names)].filter(Boolean).map((name) => this.get(name))); }, /** * List all icon names in a library (defaults to active). Returns a * Promise. * * Async for compatibility rather than necessity — it used to import a * generated manifest, and now reads keys off a registration that is already in * memory. Callers all `await` it and would keep working if it were made * synchronous, but nothing is gained by making them change. */ async list(library) { const name = library ?? _libraryName; const entry = name === null ? null : _libraries.get(name); if (!entry) { warnNoLibrary(name); return Object.keys(_custom); } return [...Object.keys(_custom), ...Object.keys(entry.icons)]; }, }"
}
],
"exports": [
{
"kind": "js",
"name": "iconRegistry",
"declaration": {
"name": "iconRegistry",
"module": "src/content/icon-registry.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/icon.js",
"declarations": [
{
"kind": "class",
"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.",
"name": "ArcIcon",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "icon"
}
],
"slots": [
{
"description": "Default content.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "name",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Icon name to look up in the icon registry. When provided, renders the matching SVG. When empty, falls back to slotted content.",
"attribute": "name",
"reflects": true
},
{
"kind": "field",
"name": "size",
"privacy": "public",
"type": {
"text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
},
"default": "'sm'",
"description": "Icon dimensions: `xs` (12px), `sm` (16px), `md` (20px), `lg` (24px), `xl` (32px).",
"attribute": "size",
"reflects": true
},
{
"kind": "field",
"name": "label",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Accessibility label. When provided, sets `role=\"img\"` and `aria-label`. When empty, sets `role=\"presentation\"` and `aria-hidden=\"true\"`.",
"attribute": "label"
}
],
"attributes": [
{
"name": "name",
"type": {
"text": "string"
},
"default": "''",
"description": "Icon name to look up in the icon registry. When provided, renders the matching SVG. When empty, falls back to slotted content.",
"fieldName": "name"
},
{
"name": "size",
"type": {
"text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
},
"default": "'sm'",
"description": "Icon dimensions: `xs` (12px), `sm` (16px), `md` (20px), `lg` (24px), `xl` (32px).",
"fieldName": "size"
},
{
"name": "label",
"type": {
"text": "string"
},
"default": "''",
"description": "Accessibility label. When provided, sets `role=\"img\"` and `aria-label`. When empty, sets `role=\"presentation\"` and `aria-hidden=\"true\"`.",
"fieldName": "label"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-icon",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcIcon",
"declaration": {
"name": "ArcIcon",
"module": "src/content/icon.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/image-compare.js",
"declarations": [
{
"kind": "class",
"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.",
"name": "ArcImageCompare",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"description": "The clipping frame wrapping both layers.",
"name": "container"
},
{
"description": "The clipped before layer.",
"name": "before"
},
{
"description": "The base after layer.",
"name": "after"
},
{
"description": "The hairline divider.",
"name": "divider"
},
{
"description": "The circular grab handle (the focusable slider).",
"name": "handle"
},
{
"description": "The before caption chip.",
"name": "label-before"
},
{
"description": "The after caption chip.",
"name": "label-after"
}
],
"slots": [
{
"description": "The \"before\" image (`![]()
` or ``), revealed between the start edge and the divider.",
"name": "before"
},
{
"description": "The \"after\" image (`![]()
` or ``). Sits underneath and sizes the component.",
"name": "after"
}
],
"members": [
{
"kind": "field",
"name": "beforeLabel",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Optional caption for the before layer, rendered as a floating chip in the start corner.",
"attribute": "before-label"
},
{
"kind": "field",
"name": "afterLabel",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Optional caption for the after layer, rendered as a floating chip in the end corner.",
"attribute": "after-label"
},
{
"kind": "field",
"name": "label",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Accessible name for the divider handle, announced as the slider label.",
"attribute": "label"
},
{
"kind": "field",
"name": "position",
"privacy": "public",
"type": {
"text": "number"
},
"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.",
"attribute": "position",
"default": "50",
"reflects": true
},
{
"kind": "field",
"name": "orientation",
"privacy": "public",
"type": {
"text": "'horizontal' | 'vertical'"
},
"description": "Axis the divider moves along. `horizontal` (default) moves a vertical divider line left-right; `vertical` moves a horizontal line up-down.",
"attribute": "orientation",
"default": "'horizontal'",
"reflects": true
}
],
"events": [
{
"name": "arc-input",
"type": {
"text": "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": {
"text": "CustomEvent<{ value: number }>"
},
"description": "Fired once when the position commits: on pointer release, or with each keyboard nudge. Use for persisting the position."
}
],
"attributes": [
{
"name": "position",
"type": {
"text": "number"
},
"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.",
"fieldName": "position",
"default": "50"
},
{
"name": "orientation",
"type": {
"text": "'horizontal' | 'vertical'"
},
"description": "Axis the divider moves along. `horizontal` (default) moves a vertical divider line left-right; `vertical` moves a horizontal line up-down.",
"fieldName": "orientation",
"default": "'horizontal'"
},
{
"name": "before-label",
"type": {
"text": "string"
},
"default": "''",
"description": "Optional caption for the before layer, rendered as a floating chip in the start corner.",
"fieldName": "beforeLabel"
},
{
"name": "after-label",
"type": {
"text": "string"
},
"default": "''",
"description": "Optional caption for the after layer, rendered as a floating chip in the end corner.",
"fieldName": "afterLabel"
},
{
"name": "label",
"type": {
"text": "string"
},
"default": "''",
"description": "Accessible name for the divider handle, announced as the slider label.",
"fieldName": "label"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-image-compare",
"customElement": true,
"group": "marketing",
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcImageCompare",
"declaration": {
"name": "ArcImageCompare",
"module": "src/content/image-compare.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/image-hotspots.js",
"declarations": [
{
"kind": "class",
"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.",
"name": "ArcImageHotspots",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "container"
}
],
"slots": [
{
"description": "Default content.",
"name": ""
}
],
"members": [],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-image-hotspots",
"customElement": true,
"group": "marketing",
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcImageHotspots",
"declaration": {
"name": "ArcImageHotspots",
"module": "src/content/image-hotspots.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/image.js",
"declarations": [
{
"kind": "class",
"description": "Enhanced image component with shimmer loading skeleton, smooth fade-in transition, error\nfallback, and aspect ratio presets.",
"name": "ArcImage",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "wrapper"
},
{
"name": "fallback"
},
{
"name": "image"
}
],
"slots": [],
"members": [
{
"kind": "field",
"name": "src",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Image source URL.",
"attribute": "src"
},
{
"kind": "field",
"name": "alt",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "Alt text for the image. Used as the accessible description.",
"attribute": "alt"
},
{
"kind": "field",
"name": "fallback",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"description": "URL of a fallback image to display if the primary `src` fails to load.",
"attribute": "fallback"
},
{
"kind": "field",
"name": "aspect",
"privacy": "public",
"type": {
"text": "'' | '1/1' | '4/3' | '16/9' | '21/9' | '3/4' | '9/16'"
},
"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.",
"attribute": "aspect",
"default": "''",
"reflects": true
},
{
"kind": "field",
"name": "fit",
"privacy": "public",
"type": {
"text": "'cover' | 'contain' | 'fill' | 'none' | 'scale-down'"
},
"description": "CSS object-fit mode controlling how the image fills its container.",
"attribute": "fit",
"default": "'cover'",
"reflects": true
},
{
"kind": "field",
"name": "loading",
"privacy": "public",
"type": {
"text": "'lazy' | 'eager'"
},
"description": "Native loading strategy. Lazy defers off-screen images until they approach the viewport.",
"attribute": "loading",
"default": "'lazy'"
}
],
"events": [
{
"name": "arc-load",
"type": {
"text": "CustomEvent"
},
"description": "Fired when the image successfully loads."
},
{
"name": "arc-error",
"type": {
"text": "CustomEvent"
},
"description": "Fired when the image fails to load."
}
],
"attributes": [
{
"name": "src",
"type": {
"text": "string"
},
"default": "''",
"description": "Image source URL.",
"fieldName": "src"
},
{
"name": "alt",
"type": {
"text": "string"
},
"default": "''",
"description": "Alt text for the image. Used as the accessible description.",
"fieldName": "alt"
},
{
"name": "aspect",
"type": {
"text": "'' | '1/1' | '4/3' | '16/9' | '21/9' | '3/4' | '9/16'"
},
"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.",
"fieldName": "aspect",
"default": "''"
},
{
"name": "fit",
"type": {
"text": "'cover' | 'contain' | 'fill' | 'none' | 'scale-down'"
},
"description": "CSS object-fit mode controlling how the image fills its container.",
"fieldName": "fit",
"default": "'cover'"
},
{
"name": "loading",
"type": {
"text": "'lazy' | 'eager'"
},
"description": "Native loading strategy. Lazy defers off-screen images until they approach the viewport.",
"fieldName": "loading",
"default": "'lazy'"
},
{
"name": "fallback",
"type": {
"text": "string"
},
"default": "''",
"description": "URL of a fallback image to display if the primary `src` fails to load.",
"fieldName": "fallback"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-image",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcImage",
"declaration": {
"name": "ArcImage",
"module": "src/content/image.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/infinite-scroll.js",
"declarations": [
{
"kind": "class",
"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.",
"name": "ArcInfiniteScroll",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "container"
},
{
"name": "content"
},
{
"name": "footer"
},
{
"name": "end-text"
},
{
"name": "spinner"
}
],
"slots": [
{
"description": "Default content.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "threshold",
"privacy": "public",
"type": {
"text": "number"
},
"default": "200",
"description": "Distance in pixels from the bottom of the content at which `arc-load-more` fires. Controls how eagerly new data is requested.",
"attribute": "threshold"
},
{
"kind": "field",
"name": "loading",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "When true, displays a spinner in the footer and suppresses additional `arc-load-more` events.",
"attribute": "loading",
"default": "false",
"reflects": true
},
{
"kind": "field",
"name": "finished",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "When true, disconnects the observer and displays \"No more items\" text in the footer.",
"attribute": "finished",
"default": "false",
"reflects": true
},
{
"kind": "field",
"name": "disabled",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "Disables the component, disconnects the observer, and reduces opacity to 40%.",
"attribute": "disabled",
"default": "false",
"reflects": true
}
],
"events": [
{
"type": {
"text": "CustomEvent"
},
"description": "Fired when the scroll sentinel enters the viewport, signaling more content should load",
"name": "arc-load-more"
}
],
"attributes": [
{
"name": "threshold",
"type": {
"text": "number"
},
"default": "200",
"description": "Distance in pixels from the bottom of the content at which `arc-load-more` fires. Controls how eagerly new data is requested.",
"fieldName": "threshold"
},
{
"name": "loading",
"type": {
"text": "boolean"
},
"description": "When true, displays a spinner in the footer and suppresses additional `arc-load-more` events.",
"fieldName": "loading",
"default": "false"
},
{
"name": "finished",
"type": {
"text": "boolean"
},
"description": "When true, disconnects the observer and displays \"No more items\" text in the footer.",
"fieldName": "finished",
"default": "false"
},
{
"name": "disabled",
"type": {
"text": "boolean"
},
"description": "Disables the component, disconnects the observer, and reduces opacity to 40%.",
"fieldName": "disabled",
"default": "false"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-infinite-scroll",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcInfiniteScroll",
"declaration": {
"name": "ArcInfiniteScroll",
"module": "src/content/infinite-scroll.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/lightbox.js",
"declarations": [
{
"kind": "class",
"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.",
"name": "ArcLightbox",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "backdrop"
},
{
"name": "bar"
},
{
"name": "counter"
},
{
"name": "zoom"
},
{
"name": "close"
},
{
"name": "prev"
},
{
"name": "next"
},
{
"name": "figure"
},
{
"name": "image"
},
{
"name": "caption"
}
],
"slots": [],
"members": [
{
"kind": "method",
"name": "show",
"parameters": [
{
"name": "index",
"description": "Zero-based; wraps, so -1 opens the last image.",
"optional": true,
"type": {
"text": "number"
}
}
],
"description": "Open the viewer, optionally jumping to a specific image first.",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "method",
"name": "close",
"description": "Closes the viewer through the cancelable arc-close contract.",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "method",
"name": "next",
"description": "Advances to the next image, wrapping past the end.",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "method",
"name": "prev",
"description": "Steps to the previous image, wrapping past the start.",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "field",
"name": "images",
"privacy": "public",
"type": {
"text": "Array"
},
"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.",
"attribute": "images",
"default": "[]"
},
{
"kind": "field",
"name": "index",
"privacy": "public",
"type": {
"text": "number"
},
"description": "Index of the image currently displayed. Navigation wraps at both ends, so setting it out of range shows the nearest valid image.",
"attribute": "index",
"default": "0"
},
{
"kind": "field",
"name": "open",
"privacy": "public",
"type": {
"text": "boolean"
},
"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.",
"attribute": "open",
"default": "false",
"reflects": true
}
],
"events": [
{
"name": "arc-change",
"type": {
"text": "CustomEvent<{value: number, index: number}>"
},
"description": "Fired when the displayed image changes. `detail.value` is the new index."
},
{
"name": "arc-close",
"type": {
"text": "CustomEvent"
},
"description": "Fired when the lightbox closes. Cancelable: call `preventDefault()` to veto the close."
},
{
"name": "arc-open",
"type": {
"text": "CustomEvent"
},
"description": "Fired when the lightbox opens"
}
],
"attributes": [
{
"name": "images",
"type": {
"text": "Array"
},
"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.",
"fieldName": "images",
"default": "[]"
},
{
"name": "index",
"type": {
"text": "number"
},
"description": "Index of the image currently displayed. Navigation wraps at both ends, so setting it out of range shows the nearest valid image.",
"fieldName": "index",
"default": "0"
},
{
"name": "open",
"type": {
"text": "boolean"
},
"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.",
"fieldName": "open",
"default": "false"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-lightbox",
"customElement": true,
"group": null,
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcLightbox",
"declaration": {
"name": "ArcLightbox",
"module": "src/content/lightbox.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/marquee.js",
"declarations": [
{
"kind": "class",
"description": "Continuously scrolling content strip with configurable speed, direction, gap, and pause-on-hover\nbehavior for logos, testimonials, and announcements.",
"name": "ArcMarquee",
"cssParts": [
{
"description": "The root element.",
"name": "base"
},
{
"name": "track"
},
{
"name": "group"
},
{
"name": "group-duplicate"
}
],
"slots": [
{
"description": "Default content.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "gap",
"privacy": "public",
"type": {
"text": "string"
},
"default": "'var(--space-xl)'",
"description": "CSS length value for the gap between slotted items. Accepts any valid CSS length or custom property.",
"attribute": "gap"
},
{
"kind": "field",
"name": "speed",
"privacy": "public",
"type": {
"text": "number"
},
"description": "Scroll speed in pixels per second. The animation duration is calculated from the content width divided by this value.",
"attribute": "speed",
"default": "40"
},
{
"kind": "field",
"name": "direction",
"privacy": "public",
"type": {
"text": "'left' | 'right'"
},
"description": "Scroll direction. `left` scrolls content from right to left (default), `right` reverses the direction.",
"attribute": "direction",
"default": "'left'",
"reflects": true
},
{
"kind": "field",
"name": "pauseOnHover",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "When true, the animation pauses while the cursor hovers over the marquee.",
"attribute": "pauseOnHover",
"default": "true",
"reflects": true
}
],
"attributes": [
{
"name": "speed",
"type": {
"text": "number"
},
"description": "Scroll speed in pixels per second. The animation duration is calculated from the content width divided by this value.",
"fieldName": "speed",
"default": "40"
},
{
"name": "direction",
"type": {
"text": "'left' | 'right'"
},
"description": "Scroll direction. `left` scrolls content from right to left (default), `right` reverses the direction.",
"fieldName": "direction",
"default": "'left'"
},
{
"name": "pauseOnHover",
"type": {
"text": "boolean"
},
"description": "When true, the animation pauses while the cursor hovers over the marquee.",
"fieldName": "pauseOnHover",
"default": "true"
},
{
"name": "gap",
"type": {
"text": "string"
},
"default": "'var(--space-xl)'",
"description": "CSS length value for the gap between slotted items. Accepts any valid CSS length or custom property.",
"fieldName": "gap"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-marquee",
"customElement": true,
"group": "marketing",
"status": "stable"
}
],
"exports": [
{
"kind": "js",
"name": "ArcMarquee",
"declaration": {
"name": "ArcMarquee",
"module": "src/content/marquee.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/qr-code.js",
"declarations": [
{
"kind": "class",
"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.",
"name": "ArcQrCode",
"cssParts": [
{
"description": "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.",
"name": "base"
},
{
"name": "svg"
},
{
"name": "card"
}
],
"slots": [],
"members": [
{
"kind": "field",
"name": "value",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"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.",
"attribute": "value"
},
{
"kind": "field",
"name": "size",
"privacy": "public",
"type": {
"text": "number"
},
"default": "160",
"description": "Rendered width and height of the SVG in pixels. The code is vector-based and stays crisp at any size.",
"attribute": "size"
},
{
"kind": "field",
"name": "label",
"privacy": "public",
"type": {
"text": "string"
},
"default": "''",
"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.",
"attribute": "label"
},
{
"kind": "field",
"name": "level",
"privacy": "public",
"type": {
"text": "'L' | 'M' | 'Q' | 'H'"
},
"description": "Error-correction level: L (~7% recovery), M (~15%), Q (~25%), H (~30%). Higher levels tolerate more damage/occlusion but produce denser codes.",
"attribute": "level",
"default": "'M'",
"reflects": true
},
{
"kind": "field",
"name": "quietZone",
"privacy": "public",
"type": {
"text": "number"
},
"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.",
"attribute": "quietZone",
"default": "2"
},
{
"kind": "field",
"name": "contrast",
"privacy": "public",
"type": {
"text": "boolean"
},
"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.",
"attribute": "contrast",
"default": "false",
"reflects": true
}
],
"attributes": [
{
"name": "value",
"type": {
"text": "string"
},
"default": "''",
"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.",
"fieldName": "value"
},
{
"name": "size",
"type": {
"text": "number"
},
"default": "160",
"description": "Rendered width and height of the SVG in pixels. The code is vector-based and stays crisp at any size.",
"fieldName": "size"
},
{
"name": "level",
"type": {
"text": "'L' | 'M' | 'Q' | 'H'"
},
"description": "Error-correction level: L (~7% recovery), M (~15%), Q (~25%), H (~30%). Higher levels tolerate more damage/occlusion but produce denser codes.",
"fieldName": "level",
"default": "'M'"
},
{
"name": "label",
"type": {
"text": "string"
},
"default": "''",
"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.",
"fieldName": "label"
},
{
"name": "quietZone",
"type": {
"text": "number"
},
"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.",
"fieldName": "quietZone",
"default": "2"
},
{
"name": "contrast",
"type": {
"text": "boolean"
},
"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.",
"fieldName": "contrast",
"default": "false"
}
],
"mixins": [
{
"name": "DeclaredPropsMixin",
"module": "/src/shared/props.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "arc-qr-code",
"customElement": true,
"group": null,
"status": "beta"
}
],
"exports": [
{
"kind": "js",
"name": "ArcQrCode",
"declaration": {
"name": "ArcQrCode",
"module": "src/content/qr-code.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/content/sanitize-svg.js",
"declarations": [
{
"kind": "function",
"name": "sanitizeSvg",
"parameters": [
{
"name": "source"
}
],
"description": "Sanitize an SVG source string, returning markup safe to pass to `unsafeHTML`,\nor `null` if it contains no `