{ "name": "stories", "displayName": "Stories", "type": "custom", "isCustomElement": true, "tag": "l-stories", "nativeTag": null, "selector": "l-stories", "subItemOf": null, "summary": "A horizontal row of `` thumbnails. Click opens the linked\n`` (matched by `for` → `id`). If `for` is omitted and no\nviewer exists, a singleton viewer is appended to `` on first click.", "status": "experimental", "appearances": [], "import": { "css": "luxen-ui/css/stories", "js": "luxen-ui/stories" }, "properties": [ { "name": "for", "attribute": "for", "type": "string", "default": "''", "reflects": true, "description": "ID of the linked ``." }, { "name": "appearance", "attribute": "appearance", "type": "StoriesAppearance", "default": "'rounded'", "reflects": true, "description": "Visual appearance of the thumbnails." } ], "attributes": [], "events": [ { "name": "story-open", "description": "Fired when the viewer opens. Properties: `index: number`, `story: LuxenStory`.", "cancelable": false } ], "methods": [ { "name": "open", "params": [ { "name": "index", "type": null } ], "returns": null, "description": "Open the linked viewer at the given index." }, { "name": "stories", "params": [], "returns": "LuxenStory[]", "description": "All `` children." } ], "slots": [], "cssClasses": [], "cssParts": [], "cssProperties": [ { "name": "--size", "default": null, "description": "Thumbnail size (width). Default per appearance." }, { "name": "--radius", "default": null, "description": "Thumbnail border radius. Default per appearance (`--radius-full` for rounded, `1rem` for portrait)." }, { "name": "--gap", "default": "1rem", "description": "Gap between thumbnails." }, { "name": "--ring-color", "default": null, "description": "Ring color around fresh thumbnails." }, { "name": "--ring-color-seen", "default": null, "description": "Ring color for `[seen]` thumbnails." }, { "name": "--ring-width", "default": "2px", "description": "Ring width." }, { "name": "--label-color", "default": null, "description": "Label text color." } ], "commands": [], "examples": [ { "title": null, "language": "html", "code": "\n \n \n\n" } ] }