import { LuxenElement } from '../../shared/luxen-element.js'; import { LuxenStory } from '../story/story.js'; export type StoriesAppearance = 'rounded' | 'squared' | 'portrait' | 'landscape'; /** Fired when the linked stories viewer opens. */ export declare class StoryOpenEvent extends Event { readonly index: number; readonly story: LuxenStory; constructor(index: number, story: LuxenStory); } declare global { interface GlobalEventHandlersEventMap { 'story-open': StoryOpenEvent; } } /** * @summary A horizontal row of `` thumbnails. Click opens the linked * `` (matched by `for` → `id`). If `for` is omitted and no * viewer exists, a singleton viewer is appended to `` on first click. * * @example * ```html * * * * * * ``` * * @event story-open - Fired when the viewer opens. Properties: `index: number`, `story: LuxenStory`. * * @cssproperty --size - Thumbnail size (width). Default per appearance. * @cssproperty --radius - Thumbnail border radius. Default per appearance (`--radius-full` for rounded, `1rem` for portrait). * @cssproperty --gap - Gap between thumbnails. Default `1rem`. * @cssproperty --ring-color - Ring color around fresh thumbnails. * @cssproperty --ring-color-seen - Ring color for `[seen]` thumbnails. * @cssproperty --ring-width - Ring width. Default `2px`. * @cssproperty --label-color - Label text color. * * @customElement l-stories */ export declare class LuxenStories extends LuxenElement { createRenderRoot(): this; /** ID of the linked ``. */ for: string; /** Visual appearance of the thumbnails. */ appearance: StoriesAppearance; connectedCallback(): void; disconnectedCallback(): void; /** Open the linked viewer at the given index. */ open(index?: number): void; /** All `` children. */ stories(): LuxenStory[]; private _onClick; private _resolveViewer; } //# sourceMappingURL=stories.d.ts.map