{"components":[{"name":"Accordion","dir":"accordion","entry":"omaris","importPath":"import { Accordion } from 'omaris'","summary":"MD3 expansion panels.","details":["`type=\"single\"` is the classic accordion — opening one closes the rest. `type=\"multiple\"` lets several stay open. Either way the open set is one bindable `value`, so it can be driven from a URL or restored from storage without the component owning the state."],"examples":[],"classesType":null,"parts":[],"variants":[{"name":"variant","doc":"","default":"plain","values":[{"name":"plain","doc":"Rows separated by hairlines, flush with the page."},{"name":"separated","doc":"Each panel its own raised card."},{"name":"outlined","doc":"One outlined block, rows divided inside it."}]}],"story":{"title":"Containment/Accordion","category":"Containment","own":true,"stories":["Playground","Single","Multiple","Variants","With icons and badges"]},"props":[{"name":"value","optional":true,"type":"string[]","default":"[]","bindable":true,"doc":"Open item values. Bindable.","details":[],"examples":[]},{"name":"type","optional":true,"type":"'single' | 'multiple'","default":"'single'","bindable":false,"doc":"`single` closes the others on open; `multiple` doesn't.","details":[],"examples":[]},{"name":"variant","optional":true,"type":"AccordionVariant","default":"'plain'","bindable":false,"doc":"","details":[],"examples":[]},{"name":"collapsible","optional":true,"type":"boolean","default":"true","bindable":false,"doc":"Stop the last open item from being closed.","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"","details":[],"examples":[]}]},{"name":"AccordionItem","dir":"accordion","entry":"omaris","importPath":"import { AccordionItem } from 'omaris'","summary":"One panel of an `Accordion`: a header you press and the content it reveals.","details":["`value` is how the parent tracks it, so it has to be unique within the set."],"examples":[],"classesType":"AccordionItemClasses","parts":[{"name":"root","doc":""},{"name":"trigger","doc":""},{"name":"headline","doc":""},{"name":"supporting","doc":""},{"name":"wrapper","doc":"The animated wrapper. A grid row going 0fr → 1fr is the one way to transition to a content-derived height without measuring it."},{"name":"content","doc":""},{"name":"inner","doc":""},{"name":"chevron","doc":""}],"variants":[{"name":"variant","doc":"","values":[{"name":"plain","doc":""},{"name":"separated","doc":""},{"name":"outlined","doc":""}]},{"name":"open","doc":"","values":[{"name":"true","doc":""},{"name":"false","doc":""}]}],"story":{"title":"Containment/Accordion","category":"Containment","own":false,"stories":["Playground","Single","Multiple","Variants","With icons and badges"]},"props":[{"name":"value","optional":false,"type":"string","bindable":false,"doc":"Identifies the panel in the accordion's `value`.","details":[],"examples":[]},{"name":"title","optional":true,"type":"string","bindable":false,"doc":"Trigger text.","details":[],"examples":[]},{"name":"supportingText","optional":true,"type":"string","bindable":false,"doc":"Second line in the trigger.","details":[],"examples":[]},{"name":"disabled","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"classes","optional":true,"type":"AccordionItemClasses","bindable":false,"doc":"Per-part Tailwind overrides. `class` still covers the root.","details":[],"examples":[]},{"name":"icon","optional":true,"type":"Snippet","bindable":false,"doc":"Leading icon in the trigger.","details":[],"examples":[]},{"name":"heading","optional":true,"type":"Snippet","bindable":false,"doc":"Rich trigger content, in place of `title`.","details":[],"examples":[]},{"name":"end","optional":true,"type":"Snippet","bindable":false,"doc":"Trailing content before the chevron — a badge, a count.","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"The panel body.","details":[],"examples":[]}]},{"name":"AiChat","dir":"ai-chat","entry":"omaris","importPath":"import { AiChat } from 'omaris'","summary":"A conversation with a model — the thread, the streaming reply, the composer, the stop button — wired to whichever model you have.","details":["The smallest call is one prop:","The person's messages sit in a compact bubble on the end side; the model's reply runs as plain text the width of the column, markdown and code blocks rendered. The thread follows the reply as it streams until the person scrolls up, and a button brings them back. Replies can be stopped, retried, regenerated and copied, and the person's own messages edited. `send` is any `(messages, ctx) => reply`, and a reply can be a string, an async iterable, a `ReadableStream` or the raw `Response` from a `fetch` — the component reads all of them.","The column is 48rem at most, centred; set `--chat-measure` on the root for another width."],"examples":[{"lang":"svelte","code":""}],"classesType":"AiChatClasses","parts":[{"name":"root","doc":""},{"name":"header","doc":"Above the thread — a title, a model picker. Only rendered with a `header` snippet."},{"name":"thread","doc":"The scrolling area, full width so its scrollbar sits at the edge."},{"name":"content","doc":"The centred column inside the thread."},{"name":"user","doc":"One of the person's messages, on the end side: the bubble, and its tools — beside it on hover with a mouse, under it on touch."},{"name":"bubble","doc":"The bubble around the person's message."},{"name":"assistant","doc":"One reply: the optional avatar and the text column."},{"name":"avatar","doc":"The circle beside a reply, with `avatar`."},{"name":"reply","doc":"The reply's column: reasoning, text, error, tools."},{"name":"prose","doc":"Rendered markdown."},{"name":"cursor","doc":"The dot at the end of a reply still arriving."},{"name":"typing","doc":"The three dots before the first word."},{"name":"tools","doc":"The copy / regenerate / edit row under a message."},{"name":"reasoning","doc":"The model's reasoning, folded above its answer when it sent any."},{"name":"alert","doc":"A failed reply's message and retry."},{"name":"empty","doc":"Before the first message."},{"name":"mark","doc":"The circle above the headline."},{"name":"title","doc":""},{"name":"description","doc":""},{"name":"suggestions","doc":""},{"name":"footer","doc":"The composer, the jump button over it and the disclaimer under it."},{"name":"jump","doc":"The \"jump to latest\" button, floating over the composer."},{"name":"composer","doc":"The single rounded surface: text field and send button."},{"name":"input","doc":""},{"name":"disclaimer","doc":"The line under the composer: \"Can make mistakes\"."}],"variants":[{"name":"tone","doc":"","default":"primary","values":[{"name":"primary","doc":""},{"name":"secondary","doc":""},{"name":"tertiary","doc":""},{"name":"destructive","doc":""},{"name":"success","doc":""},{"name":"warning","doc":""},{"name":"info","doc":""}]},{"name":"disabled","doc":"","values":[{"name":"true","doc":""}]}],"story":{"title":"Communication/AI Chat","category":"Communication","own":true,"stories":["Playground","Empty","History","Avatar","Streaming","Error","Reasoning","Long thread","Headless","Overridden"]},"props":[{"name":"send","optional":true,"type":"SendFn","bindable":false,"doc":"Answers the conversation. `chatEndpoint('/api/chat')`, `mockChat()`, or any `(messages, ctx) => reply` of your own — a `fetch` whose `Response` you return as is will do.","details":[],"examples":[]},{"name":"messages","optional":true,"type":"AiChatMessage[]","default":"[]","bindable":true,"doc":"The conversation. Bindable; give it a history to resume one.","details":[],"examples":[]},{"name":"prompt","optional":true,"type":"string","default":"''","bindable":true,"doc":"The text in the composer. Bindable.","details":[],"examples":[]},{"name":"system","optional":true,"type":"string","bindable":false,"doc":"A system prompt, carried in the request by `chatEndpoint()`.","details":[],"examples":[]},{"name":"status","optional":true,"type":"AiChatStatus","default":"'idle'","bindable":true,"doc":"Where it is. Bindable, read-only in practice.","details":[],"examples":[]},{"name":"tone","optional":true,"type":"AiChatTone","default":"'primary'","bindable":false,"doc":"Colours the send button, the focus ring, links and the assistant's mark.","details":[],"examples":[]},{"name":"height","optional":true,"type":"number | string","default":"'32rem'","bindable":false,"doc":"Height of the whole thing, in px or any CSS length. `class=\"h-full\"` also works.","details":[],"examples":[]},{"name":"avatar","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"A small mark beside each reply. The `icon` snippet replaces what is in it.","details":[],"examples":[]},{"name":"suggestions","optional":true,"type":"string[]","default":"[]","bindable":false,"doc":"Prompts offered as chips before the first message.","details":[],"examples":[]},{"name":"assistantName","optional":true,"type":"string","default":"'Assistant'","bindable":false,"doc":"The name the assistant goes by, for screen readers.","details":[],"examples":[]},{"name":"title","optional":true,"type":"string","default":"'How can I help?'","bindable":false,"doc":"The headline before the first message.","details":[],"examples":[]},{"name":"hint","optional":true,"type":"string","bindable":false,"doc":"The line under it.","details":[],"examples":[]},{"name":"placeholder","optional":true,"type":"string","default":"'Message…'","bindable":false,"doc":"","details":[],"examples":[]},{"name":"disclaimer","optional":true,"type":"string","bindable":false,"doc":"The line under the composer.","details":[],"examples":[]},{"name":"disabled","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"","details":[],"examples":[]},{"name":"onsend","optional":true,"type":"(message: AiChatMessage) => void","bindable":false,"doc":"Called with the message the person sent.","details":[],"examples":[]},{"name":"onfinish","optional":true,"type":"(message: AiChatMessage) => void","bindable":false,"doc":"Called with the finished reply.","details":[],"examples":[]},{"name":"onerror","optional":true,"type":"(error: Error) => void","bindable":false,"doc":"","details":[],"examples":[]},{"name":"onchange","optional":true,"type":"(messages: AiChatMessage[]) => void","bindable":false,"doc":"Called after any change to the conversation.","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"classes","optional":true,"type":"AiChatClasses","bindable":false,"doc":"Per-part Tailwind overrides. `class` still covers the root.","details":[],"examples":[]},{"name":"header","optional":true,"type":"Snippet","bindable":false,"doc":"Above the thread.","details":[],"examples":[]},{"name":"icon","optional":true,"type":"Snippet","bindable":false,"doc":"The assistant's mark, in the empty state and the `avatar`. Defaults to sparkles.","details":[],"examples":[]},{"name":"empty","optional":true,"type":"Snippet<[AiChatEmptyContext]>","bindable":false,"doc":"Replaces the empty thread.","details":[],"examples":[]},{"name":"message","optional":true,"type":"Snippet<[AiChatMessageContext]>","bindable":false,"doc":"Replaces what a message shows — the bubble's text, or the reply's.","details":[],"examples":[]},{"name":"actions","optional":true,"type":"Snippet<[AiChatMessageContext]>","bindable":false,"doc":"Extra buttons under a message, after copy, regenerate and edit.","details":[],"examples":[]},{"name":"composer","optional":true,"type":"Snippet<[AiChatComposerContext]>","bindable":false,"doc":"Replaces the composer. An empty snippet takes it away.","details":[],"examples":[]}]},{"name":"AiImage","dir":"ai-image","entry":"omaris","importPath":"import { AiImage } from 'omaris'","summary":"A picture made from a sentence — the frame, the prompt bar, the wait and the picture, wired to whichever model you have.","details":["The smallest call is one prop:","That already has a prompt bar, suggestion chips, a spinner on the frame's surface while the model works, a picture that fades in once it has loaded, and download / regenerate / edit on it. `generate` is any function of `(request, ctx) => results`; three ship: `gemini()` and `openaiImages()` for those APIs, `endpoint()` for a route of yours, and `mockGenerate()` for a screen with no backend yet. Swapping models is swapping that one prop.","Everything after that is opt-in. `prompt` + `auto` makes a picture with nothing to press — a hero image, a product placeholder. `count` asks for a grid. `composer=\"none\"` takes the prompt bar away so your own UI calls `generate()` through `bind:this`. `history` keeps every result on a strip. `attach` lets a person drop a picture in to edit, and the edit tool feeds a result back in as the reference for the next one. Every part is a slot in `classes`, and every state is a snippet."],"examples":[{"lang":"svelte","code":""}],"classesType":"AiImageClasses","parts":[{"name":"root","doc":""},{"name":"frame","doc":"The picture area. `--ai-aspect` is its shape; `aspect-auto` plus a height overrides it."},{"name":"canvas","doc":"Holds the finished picture, or the grid of them."},{"name":"grid","doc":"`count` above one lays the results out here."},{"name":"cell","doc":"One result's cell. Also the button that selects it from the grid."},{"name":"image","doc":"The picture. Fades in when a new one lands."},{"name":"loader","doc":"The wait: the frame's surface, covering it while the model works."},{"name":"spinner","doc":"The spinner in the middle of the wait."},{"name":"empty","doc":"Nothing made yet."},{"name":"emptyIcon","doc":""},{"name":"title","doc":""},{"name":"description","doc":""},{"name":"suggestions","doc":""},{"name":"alert","doc":"What went wrong, with a retry."},{"name":"tools","doc":"The corner toolbar over a finished picture."},{"name":"caption","doc":"The model's words about the picture, under it."},{"name":"composer","doc":"The prompt bar."},{"name":"attachment","doc":"The attached reference, as a small tile at the start of the bar."},{"name":"input","doc":""},{"name":"controls","doc":"The attach and the send/stop buttons."},{"name":"history","doc":"The strip of past results."},{"name":"thumb","doc":""}],"variants":[{"name":"tone","doc":"","default":"primary","values":[{"name":"primary","doc":""},{"name":"secondary","doc":""},{"name":"tertiary","doc":""},{"name":"destructive","doc":""},{"name":"success","doc":""},{"name":"warning","doc":""},{"name":"info","doc":""}]},{"name":"variant","doc":"","default":"filled","values":[{"name":"filled","doc":"A tinted surface — the default, reads as a card."},{"name":"outlined","doc":"A hairline, for a frame inside a form."},{"name":"ghost","doc":"Nothing but the picture."}]},{"name":"size","doc":"","default":"md","values":[{"name":"sm","doc":""},{"name":"md","doc":""},{"name":"lg","doc":""}]},{"name":"composer","doc":"Where the prompt bar sits.","default":"below","values":[{"name":"below","doc":""},{"name":"overlay","doc":""},{"name":"none","doc":""}]},{"name":"fresh","doc":"A picture just made, rather than one handed in: it fades in.","values":[{"name":"true","doc":""}]},{"name":"sized","doc":"A height was given, so the aspect steps aside.","values":[{"name":"true","doc":""}]},{"name":"disabled","doc":"","values":[{"name":"true","doc":""}]}],"story":{"title":"Inputs/AI Image","category":"Inputs","own":true,"stories":["Playground","Idle","Generating","Regenerating","Done","Grid and history","Error","Overlay composer","Editing a reference","Headless","Auto, no controls","Sizes","Variants and tones","Overridden","Overridden loader"]},"props":[{"name":"generate","optional":true,"type":"GenerateFn","bindable":false,"doc":"Makes the pictures. `gemini({ apiKey })`, `openaiImages({ apiKey })`, `endpoint('/api/image')`, `mockGenerate()`, or any `(request, ctx) => results` of your own.","details":[],"examples":[]},{"name":"prompt","optional":true,"type":"string","default":"''","bindable":true,"doc":"The prompt in the bar. Bindable.","details":[],"examples":[]},{"name":"auto","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Generate as soon as there is a prompt — on mount, and again when it changes.","details":[],"examples":[]},{"name":"aspect","optional":true,"type":"AiImageAspect","default":"'1:1'","bindable":false,"doc":"The shape of the picture. Also the shape of the frame.","details":[],"examples":[]},{"name":"height","optional":true,"type":"number | string","bindable":false,"doc":"Frame height, in px or any CSS length. Replaces the aspect.","details":[],"examples":[]},{"name":"count","optional":true,"type":"number","default":"1","bindable":false,"doc":"How many pictures per prompt. Above one they tile in the frame.","details":[],"examples":[]},{"name":"reference","optional":true,"type":"string | Blob","default":"undefined","bindable":true,"doc":"A picture to edit or draw from — a URL, data URL or `Blob`. Bindable: the attach button and the edit tool set it.","details":[],"examples":[]},{"name":"params","optional":true,"type":"Record void","bindable":false,"doc":"","details":[],"examples":[]},{"name":"onresult","optional":true,"type":"(images: AiImageItem[]) => void","bindable":false,"doc":"","details":[],"examples":[]},{"name":"onerror","optional":true,"type":"(error: Error) => void","bindable":false,"doc":"","details":[],"examples":[]},{"name":"oncancel","optional":true,"type":"() => void","bindable":false,"doc":"","details":[],"examples":[]},{"name":"onchange","optional":true,"type":"(image: AiImageItem | undefined) => void","bindable":false,"doc":"Called when the picture on show changes — a new result, a history pick, a clear.","details":[],"examples":[]},{"name":"ondownload","optional":true,"type":"(image: AiImageItem) => void","bindable":false,"doc":"","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"classes","optional":true,"type":"AiImageClasses","bindable":false,"doc":"Per-part Tailwind overrides. `class` still covers the root.","details":[],"examples":[]},{"name":"empty","optional":true,"type":"Snippet<[AiImageEmptyContext]>","bindable":false,"doc":"Replaces the empty frame.","details":[],"examples":[]},{"name":"loading","optional":true,"type":"Snippet<[AiImageLoadingContext]>","bindable":false,"doc":"Replaces the spinner. Drawn on the loader's surface.","details":[],"examples":[]},{"name":"image","optional":true,"type":"Snippet<[AiImageResultContext]>","bindable":false,"doc":"Replaces one finished picture.","details":[],"examples":[]},{"name":"error","optional":true,"type":"Snippet<[AiImageErrorContext]>","bindable":false,"doc":"Replaces the error.","details":[],"examples":[]},{"name":"bar","optional":true,"type":"Snippet<[AiImageComposerContext]>","bindable":false,"doc":"Replaces the prompt bar.","details":[],"examples":[]},{"name":"actions","optional":true,"type":"Snippet<[AiImageResultContext]>","bindable":false,"doc":"Extra buttons in the corner toolbar.","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"Content under the frame, before the bar — a caption, a legend.","details":[],"examples":[]}]},{"name":"Alert","dir":"alert","entry":"omaris","importPath":"import { Alert } from 'omaris'","summary":"Alert — MD3's banner, for a message that belongs to the page rather than floating over it.","details":["A default icon comes with each tone, so the common case is one line of markup; pass the `icon` snippet to override it, or `icon={false}`-style by setting `showIcon={false}` to drop it entirely.","`role` follows the tone: a destructive alert announces itself immediately, everything else waits its turn."],"examples":[],"classesType":"AlertClasses","parts":[{"name":"root","doc":""},{"name":"icon","doc":""},{"name":"body","doc":""},{"name":"title","doc":""},{"name":"description","doc":""},{"name":"actions","doc":""},{"name":"close","doc":""}],"variants":[{"name":"tone","doc":"","default":"info","values":[{"name":"primary","doc":""},{"name":"secondary","doc":""},{"name":"tertiary","doc":""},{"name":"destructive","doc":""},{"name":"success","doc":""},{"name":"warning","doc":""},{"name":"info","doc":""}]},{"name":"variant","doc":"","default":"tonal","values":[{"name":"tonal","doc":"Tinted block — the default banner."},{"name":"outlined","doc":"Hairline frame, for a quieter note inside a form."},{"name":"bar","doc":"A rule down the leading edge — the log-entry look."},{"name":"plain","doc":"No container at all — an inline form error."}]},{"name":"size","doc":"","default":"md","values":[{"name":"sm","doc":""},{"name":"md","doc":""},{"name":"lg","doc":""}]}],"story":{"title":"Communication/Alert","category":"Communication","own":true,"stories":["Playground","Tones","Variants","Sizes","With actions","Without icon"]},"props":[{"name":"tone","optional":true,"type":"AlertTone","default":"'info'","bindable":false,"doc":"","details":[],"examples":[]},{"name":"variant","optional":true,"type":"AlertVariant","default":"'tonal'","bindable":false,"doc":"","details":[],"examples":[]},{"name":"size","optional":true,"type":"AlertSize","default":"'md'","bindable":false,"doc":"","details":[],"examples":[]},{"name":"title","optional":true,"type":"string","bindable":false,"doc":"Heading line.","details":[],"examples":[]},{"name":"description","optional":true,"type":"string","bindable":false,"doc":"Body text. Use children for rich content.","details":[],"examples":[]},{"name":"showIcon","optional":true,"type":"boolean","default":"true","bindable":false,"doc":"Draw the tone's default icon.","details":[],"examples":[]},{"name":"dismissible","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Adds the trailing ×.","details":[],"examples":[]},{"name":"ondismiss","optional":true,"type":"() => void","bindable":false,"doc":"","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"classes","optional":true,"type":"AlertClasses","bindable":false,"doc":"Per-part Tailwind overrides. `class` still covers the root.","details":[],"examples":[]},{"name":"icon","optional":true,"type":"Snippet","bindable":false,"doc":"Replaces the tone's default icon.","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"Body content, in place of `description`.","details":[],"examples":[]},{"name":"actions","optional":true,"type":"Snippet","bindable":false,"doc":"Buttons under the body.","details":[],"examples":[]}]},{"name":"AppShell","dir":"app-shell","entry":"omaris","importPath":"import { AppShell } from 'omaris'","summary":"The frame a dashboard is built in.","details":["The thing that goes wrong in a hand-rolled dashboard is always the same: the whole document scrolls, so the sidebar — which is only as tall as the viewport — slides up out of the window with everything else. The fix is to decide *once* which element scrolls, and this is where that decision lives:","- `scroll=\"main\"` (the default) pins the shell to the viewport and lets only the content column scroll. The sidebar and the app bar stay exactly where they are, forever, with no `sticky` anywhere. - `scroll=\"page\"` lets the document scroll instead, and sticks the sidebar to the top of it. Better for long reading pages, and the only one where a phone's address bar still collapses on the way down.","Either way the shell hands the scrolling element to its children through context, so a `TopAppBar` inside it lifts and collapses against the right thing without being told which — `scrollContainer` becomes a thing you only reach for when the layout isn't a shell."],"examples":[{"lang":"svelte","code":"\n \n …\n \n\n \n \n …\n \n"}],"classesType":null,"parts":[],"variants":[{"name":"scroll","doc":"","default":"main","values":[]}],"story":{"title":"Layout/App Shell","category":"Layout","own":true,"stories":["Dashboard","Scroll modes","Sticky footer","Inspector","Plain panel"]},"props":[{"name":"scroll","optional":true,"type":"NonNullable","default":"'main'","bindable":false,"doc":"Which element scrolls: the content column, or the document.","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"","details":[],"examples":[]}]},{"name":"AppShellContent","dir":"app-shell","entry":"omaris","importPath":"import { AppShellContent } from 'omaris'","summary":"The padded well a page's content sits in.","details":["A dashboard reads badly at 2000px wide and badly again at 320px with no gutter, so this is the one place that owns both: a measure that caps the line length and a gutter that grows with the viewport."],"examples":[],"classesType":null,"parts":[],"variants":[{"name":"width","doc":"The measure. `full` fills the column — right for a wide table.","default":"full","values":[{"name":"sm","doc":""},{"name":"md","doc":""},{"name":"lg","doc":""},{"name":"xl","doc":""},{"name":"full","doc":""}]},{"name":"padded","doc":"","default":"true","values":[{"name":"true","doc":""},{"name":"false","doc":""}]}],"story":{"title":"Layout/App Shell","category":"Layout","own":false,"stories":["Dashboard","Scroll modes","Sticky footer","Inspector","Plain panel"]},"props":[{"name":"width","optional":true,"type":"NonNullable","default":"'full'","bindable":false,"doc":"","details":[],"examples":[]},{"name":"padded","optional":true,"type":"boolean","default":"true","bindable":false,"doc":"Gutter and the rhythm between sections. Off when the page brings its own.","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"","details":[],"examples":[]}]},{"name":"AppShellFooter","dir":"app-shell","entry":"omaris","importPath":"import { AppShellFooter } from 'omaris'","summary":"The bottom band of the content column.","details":["`sticky` keeps it against the bottom of the viewport — the bar a table with a selection or a form with unsaved changes needs."],"examples":[],"classesType":null,"parts":[],"variants":[],"story":{"title":"Layout/App Shell","category":"Layout","own":false,"stories":["Dashboard","Scroll modes","Sticky footer","Inspector","Plain panel"]},"props":[{"name":"sticky","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Hold it at the bottom of the column rather than after the content.","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"","details":[],"examples":[]}]},{"name":"AppShellHeader","dir":"app-shell","entry":"omaris","importPath":"import { AppShellHeader } from 'omaris'","summary":"A band that stays at the top of the content column while it scrolls.","details":["A `TopAppBar` can stick on its own, so this is for the cases it can't cover alone: a bar plus a filter row, a banner above the bar, anything that has to stay up there as one piece."],"examples":[],"classesType":null,"parts":[],"variants":[],"story":{"title":"Layout/App Shell","category":"Layout","own":false,"stories":["Dashboard","Scroll modes","Sticky footer","Inspector","Plain panel"]},"props":[{"name":"sticky","optional":true,"type":"boolean","default":"true","bindable":false,"doc":"Ride up with the content instead of staying put.","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"","details":[],"examples":[]}]},{"name":"AppShellMain","dir":"app-shell","entry":"omaris","importPath":"import { AppShellMain } from 'omaris'","summary":"The content column of an `AppShell` — and, in the default scroll mode, the element that scrolls.","details":["It registers itself with the shell, so everything inside that cares about scrolling (a `TopAppBar`, mostly) finds it on its own."],"examples":[],"classesType":null,"parts":[],"variants":[],"story":{"title":"Layout/App Shell","category":"Layout","own":false,"stories":["Dashboard","Scroll modes","Sticky footer","Inspector","Plain panel"]},"props":[{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"","details":[],"examples":[]}]},{"name":"AppShellSidebar","dir":"app-shell","entry":"omaris","importPath":"import { AppShellSidebar } from 'omaris'","summary":"The column an `AppShell` puts beside its main area — a navigation drawer, usually.","details":["It stays put while the content scrolls, and drops out below `breakpoint`, where the drawer should be modal instead."],"examples":[],"classesType":null,"parts":[],"variants":[],"story":{"title":"Layout/App Shell","category":"Layout","own":false,"stories":["Dashboard","Scroll modes","Sticky footer","Inspector","Plain panel"]},"props":[{"name":"side","optional":true,"type":"'start' | 'end'","default":"'start'","bindable":false,"doc":"Which edge it sits on. `end` gives you an inspector panel instead.","details":[],"examples":[]},{"name":"breakpoint","optional":true,"type":"AppShellSidebarBreakpoint","default":"'md'","bindable":false,"doc":"Viewport width at which the column appears. `false` keeps it at every size — what you want when the thing inside is already responsive.","details":[],"examples":[]},{"name":"label","optional":true,"type":"string","bindable":false,"doc":"Accessible name, when the column isn't a single labelled drawer.","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"","details":[],"examples":[]}]},{"name":"AreaChart","dir":"chart","entry":"omaris/chart","importPath":"import { AreaChart } from 'omaris/chart'","summary":"Area chart.","details":["Several values per row become several bands: pass `series` and each one takes the next colour in the palette, gets a legend entry, and appears in the tooltip. `stacked` piles them instead of overlapping them."],"examples":[{"lang":"svelte","code":""}],"classesType":null,"parts":[],"variants":[],"story":{"title":"Data Display/Charts","category":"Data Display","own":false,"stories":["Area","Line","Bar","Pie and donut","Scatter","Sparkline","Empty","References and annotations","Brush and zoom","Legend isolate and CSV","Error","Combo","Radar","Radial bar and gauge","Funnel","Treemap","Candlestick"]},"props":[{"name":"stacked","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Pile the series on top of each other rather than overlapping them.","details":[],"examples":[]},{"name":"curve","optional":true,"type":"ChartCurve","default":"'smooth'","bindable":false,"doc":"","details":[],"examples":[]},{"name":"fillOpacity","optional":true,"type":"number","default":"0.18","bindable":false,"doc":"Opacity of the fill under each line.","details":[],"examples":[]},{"name":"points","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Mark each data point.","details":[],"examples":[]},{"name":"data","optional":false,"type":"T[]","bindable":false,"doc":"","details":[],"examples":[]},{"name":"x","optional":true,"type":"Field","bindable":false,"doc":"The category or time field.","details":[],"examples":[]},{"name":"y","optional":true,"type":"Field","bindable":false,"doc":"The value field. Ignored once `series` names its own.","details":[],"examples":[]},{"name":"series","optional":true,"type":"ChartSeries[]","bindable":false,"doc":"Several values per row. Each gets a colour and a legend entry.","details":[],"examples":[]},{"name":"height","optional":true,"type":"number | string","default":"260","bindable":false,"doc":"Plot height. A number is px; a string is any CSS length.","details":[],"examples":[]},{"name":"axis","optional":true,"type":"boolean | 'x' | 'y'","default":"true","bindable":false,"doc":"`true` for both, or just the one you want.","details":[],"examples":[]},{"name":"grid","optional":true,"type":"boolean","default":"true","bindable":false,"doc":"","details":[],"examples":[]},{"name":"legend","optional":true,"type":"ChartLegend","default":"false","bindable":false,"doc":"`true` shows the legend and lets a click toggle a series off. `'isolate'` makes a click show that series alone, and a second one bring the rest back — which is the move you actually want on a chart with six lines on it.","details":[],"examples":[]},{"name":"tooltip","optional":true,"type":"boolean","default":"true","bindable":false,"doc":"","details":[],"examples":[]},{"name":"formatX","optional":true,"type":"(value: never) => string","bindable":false,"doc":"Tick labels along the x axis.","details":[],"examples":[]},{"name":"formatY","optional":true,"type":"(value: never) => string","bindable":false,"doc":"Tick labels along the y axis, and the tooltip's values.","details":[],"examples":[]},{"name":"colors","optional":true,"type":"readonly string[]","default":"CHART_COLORS","bindable":false,"doc":"Palette override, cycled across the series.","details":[],"examples":[]},{"name":"padding","optional":true,"type":"number | { top?: number; right?: number; bottom?: number; left?: number }","bindable":false,"doc":"Space around the plot, in px — room for long axis labels.","details":[],"examples":[]},{"name":"label","optional":true,"type":"string","bindable":false,"doc":"Accessible description of what the chart shows.","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"empty","optional":true,"type":"Snippet","bindable":false,"doc":"Shown in place of the plot when `data` is empty.","details":[],"examples":[]},{"name":"emptyText","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"error","optional":true,"type":"boolean | string | Error","bindable":false,"doc":"Something went wrong. Truthy puts the chart into its error state; a string or an `Error` supplies the message.","details":[],"examples":[]},{"name":"errorText","optional":true,"type":"string","bindable":false,"doc":"The message, when `error` is just `true`.","details":[],"examples":[]},{"name":"errorState","optional":true,"type":"Snippet<[{ message: string }]>","bindable":false,"doc":"Replaces the whole error state.","details":[],"examples":[]},{"name":"onRetry","optional":true,"type":"() => void","bindable":false,"doc":"Offers a \"Try again\" button in the error state.","details":[],"examples":[]},{"name":"csv","optional":true,"type":"boolean | string","default":"false","bindable":false,"doc":"Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.","details":[],"examples":[]},{"name":"csvColumns","optional":true,"type":"(string | { key: string; label?: string; value?: (row: T) => unknown })[]","bindable":false,"doc":"Which fields the download writes, in order. Defaults to every field.","details":[],"examples":[]},{"name":"references","optional":true,"type":"ChartReference[]","bindable":false,"doc":"Lines and bands at fixed values — targets, thresholds, windows.","details":[],"examples":[]},{"name":"annotations","optional":true,"type":"ChartAnnotation[]","bindable":false,"doc":"Notes pinned to a point.","details":[],"examples":[]},{"name":"brush","optional":true,"type":"ChartBrush","bindable":false,"doc":"Drag across the plot to select a range, and zoom the chart to it.","details":[],"examples":[]},{"name":"zoom","optional":true,"type":"ChartZoom","bindable":false,"doc":"Wheel or pinch to zoom, drag to pan.","details":[],"examples":[]}]},{"name":"Avatar","dir":"avatar","entry":"omaris","importPath":"import { Avatar } from 'omaris'","summary":"Avatar — image, initials, or icon, in that order of preference.","details":["The image is only shown once it has actually decoded, so a broken or slow URL falls back to the initials instead of flashing a blank hole. Initials get a deterministic tint derived from the name, so the same person is the same color everywhere in the app."],"examples":[],"classesType":"AvatarClasses","parts":[{"name":"root","doc":"Sizing, shape and the fallback colours live here — and nothing clips. The presence dot is a child of this box and is meant to sit proud of a circle's edge; `overflow-hidden` here is what used to shave a slice off it."},{"name":"media","doc":"The clipping layer. Only the picture and the initials are cut to the shape, so the dot outside it survives."},{"name":"image","doc":""},{"name":"status","doc":"The ring that marks a live/away state, MD3 presence style."}],"variants":[{"name":"size","doc":"","default":"md","values":[{"name":"sm","doc":""},{"name":"md","doc":""},{"name":"lg","doc":""},{"name":"xl","doc":""}]},{"name":"shape","doc":"","default":"circle","values":[{"name":"circle","doc":""},{"name":"square","doc":"MD3's rounded square, for org and product avatars."}]},{"name":"status","doc":"","default":"none","values":[{"name":"none","doc":""},{"name":"online","doc":""},{"name":"away","doc":""},{"name":"busy","doc":""},{"name":"offline","doc":""}]}],"story":{"title":"Data Display/Avatar","category":"Data Display","own":true,"stories":["Playground","Fallbacks","Sizes","Shapes","Presence","Presence, overridden","Derived colours","Groups"]},"props":[{"name":"size","optional":true,"type":"AvatarSize","default":"'md'","bindable":false,"doc":"","details":[],"examples":[]},{"name":"shape","optional":true,"type":"AvatarShape","default":"'circle'","bindable":false,"doc":"","details":[],"examples":[]},{"name":"status","optional":true,"type":"AvatarStatus","default":"'none'","bindable":false,"doc":"Presence dot in the bottom corner.","details":[],"examples":[]},{"name":"src","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"alt","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"name","optional":true,"type":"string","bindable":false,"doc":"Full name. Initials and the fallback tint are derived from it.","details":[],"examples":[]},{"name":"initials","optional":true,"type":"string","bindable":false,"doc":"Override the derived initials.","details":[],"examples":[]},{"name":"colorize","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Paint the initials fallback with the name-derived tint.","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"classes","optional":true,"type":"AvatarClasses","bindable":false,"doc":"Per-part Tailwind overrides. `class` still covers the root.","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"Shown when there's no image and no name — an icon, usually.","details":[],"examples":[]}]},{"name":"AvatarGroup","dir":"avatar","entry":"omaris","importPath":"import { AvatarGroup } from 'omaris'","summary":"A stack of overlapping avatars — the people on a thread, the members of a team.","details":["Give it the same `size` as the avatars inside it, or the overlap will not match. `overflow` adds the trailing \"+n\" for the ones that did not fit."],"examples":[],"classesType":null,"parts":[],"variants":[{"name":"size","doc":"","default":"md","values":[{"name":"xs","doc":""},{"name":"sm","doc":""},{"name":"md","doc":""},{"name":"lg","doc":""},{"name":"xl","doc":""}]}],"story":{"title":"Data Display/Avatar","category":"Data Display","own":false,"stories":["Playground","Fallbacks","Sizes","Shapes","Presence","Presence, overridden","Derived colours","Groups"]},"props":[{"name":"size","optional":true,"type":"AvatarSize","default":"'md'","bindable":false,"doc":"Overlap amount. Must match the avatars' own `size` to look right.","details":[],"examples":[]},{"name":"overflow","optional":true,"type":"number","bindable":false,"doc":"Renders a \"+n\" chip after the children.","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"classes","optional":true,"type":"ClassesOf","bindable":false,"doc":"Tailwind per part.","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"","details":[],"examples":[]}]},{"name":"Badge","dir":"badge","entry":"omaris","importPath":"import { Badge } from 'omaris'","summary":"Badge — a status pill, or the count that rides on an icon.","details":["Same two axes as the button: `variant` is the fill style and `tone` the color role, resolved through the shared `--btn-*` properties. `dot` and `count` are MD3's small and large notification badges; both take `anchor` to pin themselves to the corner of a `relative` parent."],"examples":[],"classesType":null,"parts":[],"variants":[{"name":"tone","doc":"","default":"primary","values":[{"name":"primary","doc":""},{"name":"secondary","doc":""},{"name":"tertiary","doc":""},{"name":"destructive","doc":""},{"name":"success","doc":""},{"name":"warning","doc":""},{"name":"info","doc":""}]},{"name":"variant","doc":"","default":"filled","values":[{"name":"filled","doc":""},{"name":"tonal","doc":""},{"name":"outlined","doc":""},{"name":"text","doc":"Ghosted — the label carries the color, nothing else."}]},{"name":"size","doc":"","default":"md","values":[{"name":"sm","doc":""},{"name":"md","doc":""},{"name":"lg","doc":""}]},{"name":"dot","doc":"MD3 small badge: a 6dp dot with no label.","values":[{"name":"true","doc":""}]},{"name":"count","doc":"MD3 large badge: a count that stays circular until it needs room.","values":[{"name":"true","doc":""}]},{"name":"anchor","doc":"Pins the badge to the corner of a `relative` parent — a sibling of what it counts, not a wrapper around it. Without a positioned ancestor the badge's containing block is the page, and it lands in the top corner of the screen rather than of the bell.","default":"none","values":[{"name":"none","doc":""},{"name":"top-end","doc":""},{"name":"top-start","doc":""}]}],"story":{"title":"Communication/Badge","category":"Communication","own":true,"stories":["Playground","Variants","Tones","Sizes","Counts and dots","Anchored","As status"]},"props":[{"name":"variant","optional":true,"type":"BadgeVariant","default":"'filled'","bindable":false,"doc":"","details":[],"examples":[]},{"name":"tone","optional":true,"type":"BadgeTone","default":"'primary'","bindable":false,"doc":"","details":[],"examples":[]},{"name":"size","optional":true,"type":"BadgeSize","default":"'md'","bindable":false,"doc":"","details":[],"examples":[]},{"name":"dot","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Renders the 6dp dot instead of a label.","details":[],"examples":[]},{"name":"value","optional":true,"type":"number","bindable":false,"doc":"A number badge. Values above `max` render as \"99+\", and the pill stays a circle until two digits force it wider.","details":["The number *is* the content: a badge given a `value` draws it and nothing else, so anything passed as children is dropped. Put the thing being counted beside the badge, inside a `relative` box."],"examples":[]},{"name":"max","optional":true,"type":"number","default":"99","bindable":false,"doc":"Cap for `value`.","details":[],"examples":[]},{"name":"anchor","optional":true,"type":"BadgeAnchor","default":"'none'","bindable":false,"doc":"Corner of the `relative` parent to pin to.","details":[],"examples":[]},{"name":"label","optional":true,"type":"string","bindable":false,"doc":"Screen-reader text — \"3 unread\", not \"3\".","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"","details":[],"examples":[]}]},{"name":"BarChart","dir":"chart","entry":"omaris/chart","importPath":"import { BarChart } from 'omaris/chart'","summary":"Bar chart.","details":["`horizontal` turns it on its side, which is what long category names actually want; `stacked` and `grouped` decide what several series do with the same band."],"examples":[{"lang":"svelte","code":""}],"classesType":null,"parts":[],"variants":[],"story":{"title":"Data Display/Charts","category":"Data Display","own":false,"stories":["Area","Line","Bar","Pie and donut","Scatter","Sparkline","Empty","References and annotations","Brush and zoom","Legend isolate and CSV","Error","Combo","Radar","Radial bar and gauge","Funnel","Treemap","Candlestick"]},"props":[{"name":"horizontal","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Bars run along the x axis, categories down the y one.","details":[],"examples":[]},{"name":"stacked","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Pile several series into one bar.","details":[],"examples":[]},{"name":"grouped","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Sit several series side by side within the band.","details":[],"examples":[]},{"name":"radius","optional":true,"type":"number","default":"4","bindable":false,"doc":"Corner radius on the bars, in px.","details":[],"examples":[]},{"name":"labels","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Print the value on each bar.","details":[],"examples":[]},{"name":"data","optional":false,"type":"T[]","bindable":false,"doc":"","details":[],"examples":[]},{"name":"x","optional":true,"type":"Field","bindable":false,"doc":"The category or time field.","details":[],"examples":[]},{"name":"y","optional":true,"type":"Field","bindable":false,"doc":"The value field. Ignored once `series` names its own.","details":[],"examples":[]},{"name":"series","optional":true,"type":"ChartSeries[]","bindable":false,"doc":"Several values per row. Each gets a colour and a legend entry.","details":[],"examples":[]},{"name":"height","optional":true,"type":"number | string","default":"260","bindable":false,"doc":"Plot height. A number is px; a string is any CSS length.","details":[],"examples":[]},{"name":"axis","optional":true,"type":"boolean | 'x' | 'y'","default":"true","bindable":false,"doc":"`true` for both, or just the one you want.","details":[],"examples":[]},{"name":"grid","optional":true,"type":"boolean","default":"true","bindable":false,"doc":"","details":[],"examples":[]},{"name":"legend","optional":true,"type":"ChartLegend","default":"false","bindable":false,"doc":"`true` shows the legend and lets a click toggle a series off. `'isolate'` makes a click show that series alone, and a second one bring the rest back — which is the move you actually want on a chart with six lines on it.","details":[],"examples":[]},{"name":"tooltip","optional":true,"type":"boolean","default":"true","bindable":false,"doc":"","details":[],"examples":[]},{"name":"formatX","optional":true,"type":"(value: never) => string","bindable":false,"doc":"Tick labels along the x axis.","details":[],"examples":[]},{"name":"formatY","optional":true,"type":"(value: never) => string","bindable":false,"doc":"Tick labels along the y axis, and the tooltip's values.","details":[],"examples":[]},{"name":"colors","optional":true,"type":"readonly string[]","default":"CHART_COLORS","bindable":false,"doc":"Palette override, cycled across the series.","details":[],"examples":[]},{"name":"padding","optional":true,"type":"number | { top?: number; right?: number; bottom?: number; left?: number }","bindable":false,"doc":"Space around the plot, in px — room for long axis labels.","details":[],"examples":[]},{"name":"label","optional":true,"type":"string","bindable":false,"doc":"Accessible description of what the chart shows.","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"empty","optional":true,"type":"Snippet","bindable":false,"doc":"Shown in place of the plot when `data` is empty.","details":[],"examples":[]},{"name":"emptyText","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"error","optional":true,"type":"boolean | string | Error","bindable":false,"doc":"Something went wrong. Truthy puts the chart into its error state; a string or an `Error` supplies the message.","details":[],"examples":[]},{"name":"errorText","optional":true,"type":"string","bindable":false,"doc":"The message, when `error` is just `true`.","details":[],"examples":[]},{"name":"errorState","optional":true,"type":"Snippet<[{ message: string }]>","bindable":false,"doc":"Replaces the whole error state.","details":[],"examples":[]},{"name":"onRetry","optional":true,"type":"() => void","bindable":false,"doc":"Offers a \"Try again\" button in the error state.","details":[],"examples":[]},{"name":"csv","optional":true,"type":"boolean | string","default":"false","bindable":false,"doc":"Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.","details":[],"examples":[]},{"name":"csvColumns","optional":true,"type":"(string | { key: string; label?: string; value?: (row: T) => unknown })[]","bindable":false,"doc":"Which fields the download writes, in order. Defaults to every field.","details":[],"examples":[]},{"name":"references","optional":true,"type":"ChartReference[]","bindable":false,"doc":"Lines and bands at fixed values — targets, thresholds, windows.","details":[],"examples":[]},{"name":"annotations","optional":true,"type":"ChartAnnotation[]","bindable":false,"doc":"Notes pinned to a point.","details":[],"examples":[]},{"name":"brush","optional":true,"type":"ChartBrush","bindable":false,"doc":"Drag across the plot to select a range, and zoom the chart to it.","details":[],"examples":[]},{"name":"zoom","optional":true,"type":"ChartZoom","bindable":false,"doc":"Wheel or pinch to zoom, drag to pan.","details":[],"examples":[]}]},{"name":"Breadcrumb","dir":"breadcrumb","entry":"omaris","importPath":"import { Breadcrumb } from 'omaris'","summary":"Breadcrumbs.","details":["Long trails collapse in the middle rather than wrapping or truncating the labels — the first and last few crumbs are the ones that carry meaning, and the \"…\" expands the rest in place."],"examples":[],"classesType":"BreadcrumbClasses","parts":[{"name":"root","doc":""},{"name":"list","doc":""},{"name":"item","doc":""},{"name":"link","doc":""},{"name":"current","doc":""},{"name":"separator","doc":""},{"name":"expand","doc":"The button that expands a collapsed middle."}],"variants":[{"name":"size","doc":"","default":"md","values":[{"name":"sm","doc":""},{"name":"md","doc":""}]}],"story":{"title":"Navigation/Breadcrumb","category":"Navigation","own":true,"stories":["Playground","Collapsing","Sizes","Custom separator","Buttons instead of links"]},"props":[{"name":"items","optional":false,"type":"BreadcrumbItem[]","bindable":false,"doc":"","details":[],"examples":[]},{"name":"size","optional":true,"type":"BreadcrumbSize","default":"'md'","bindable":false,"doc":"","details":[],"examples":[]},{"name":"maxItems","optional":true,"type":"number","default":"5","bindable":false,"doc":"Collapse the middle once the trail is longer than this. `0` never collapses.","details":[],"examples":[]},{"name":"itemsBeforeCollapse","optional":true,"type":"number","default":"1","bindable":false,"doc":"Crumbs kept at the start of a collapsed trail.","details":[],"examples":[]},{"name":"itemsAfterCollapse","optional":true,"type":"number","default":"2","bindable":false,"doc":"Crumbs kept at the end of a collapsed trail.","details":[],"examples":[]},{"name":"label","optional":true,"type":"string","default":"'Breadcrumb'","bindable":false,"doc":"Accessible name.","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"classes","optional":true,"type":"BreadcrumbClasses","bindable":false,"doc":"Per-part Tailwind overrides. `class` still covers the root.","details":[],"examples":[]},{"name":"separator","optional":true,"type":"Snippet","bindable":false,"doc":"Custom separator, in place of the chevron.","details":[],"examples":[]}]},{"name":"Button","dir":"button","entry":"omaris","importPath":"import { Button } from 'omaris'","summary":"MD3 buttons, the Expressive way.","details":["Two axes instead of one long variant list: `variant` is the *fill style* (elevated / filled / tonal / outlined / text) and `tone` is the *color role* (primary / secondary / … / destructive), which resolves to the `--btn-*` custom properties in `tones.ts`. Every fill style works with every tone, with no combinatorial explosion of classes."],"examples":[],"classesType":null,"parts":[],"variants":[{"name":"tone","doc":"","default":"primary","values":[{"name":"primary","doc":""},{"name":"secondary","doc":""},{"name":"tertiary","doc":""},{"name":"destructive","doc":""},{"name":"success","doc":""},{"name":"warning","doc":""},{"name":"info","doc":""}]},{"name":"variant","doc":"","default":"filled","values":[{"name":"filled","doc":""},{"name":"tonal","doc":""},{"name":"elevated","doc":""},{"name":"outlined","doc":""},{"name":"text","doc":""},{"name":"link","doc":""}]},{"name":"size","doc":"MD3 Expressive's five heights: 32 / 40 / 56 / 96 / 136dp. `sm` is the classic Material button and stays the default.","default":"sm","values":[{"name":"xs","doc":""},{"name":"sm","doc":""},{"name":"md","doc":""},{"name":"lg","doc":""},{"name":"xl","doc":""}]},{"name":"shape","doc":"A pill, or MD3's rounded-rectangle. Fixed — it never morphs.","default":"round","values":[{"name":"round","doc":""},{"name":"square","doc":""}]},{"name":"icon","doc":"Square, label-less button. Requires an `aria-label`.","values":[{"name":"true","doc":""}]},{"name":"toggle","doc":"An unselected toggle reads as a neutral surface whatever its tone; selecting it brings the tone's real colors back.","values":[{"name":"true","doc":""}]}],"story":{"title":"Actions/Button","category":"Actions","own":true,"stories":["Playground","Variants","Tones","Sizes","Shapes","With icons","Loading","Toggle","Button group","Disabled","As link"]},"props":[{"name":"variant","optional":true,"type":"ButtonVariant","default":"'filled'","bindable":false,"doc":"Fill style. MD3's five, plus `link` for inline navigation.","details":[],"examples":[]},{"name":"tone","optional":true,"type":"ButtonTone","default":"'primary'","bindable":false,"doc":"Color role the fill style paints with.","details":[],"examples":[]},{"name":"size","optional":true,"type":"ButtonSize","default":"'sm'","bindable":false,"doc":"MD3 Expressive heights: 32 / 40 / 56 / 96 / 136dp.","details":[],"examples":[]},{"name":"shape","optional":true,"type":"ButtonShape","default":"'round'","bindable":false,"doc":"Pill (`round`) or MD3 rounded rectangle (`square`).","details":[],"examples":[]},{"name":"icon","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Square, label-less button. Requires an `aria-label`.","details":[],"examples":[]},{"name":"ripple","optional":true,"type":"boolean","default":"true","bindable":false,"doc":"Material ripple on press. Set false for a flat, instant button.","details":[],"examples":[]},{"name":"confetti","optional":true,"type":"boolean | ConfettiOptions","default":"false","bindable":false,"doc":"Confetti on press. `true` for the default burst, or any `ConfettiOptions` — `confetti={{ preset: 'fireworks' }}`.","details":[],"examples":[]},{"name":"loading","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Grows a spinner in at the start of the button and blocks interaction. The label stays put; only an `icon` button swaps its icon out.","details":[],"examples":[]},{"name":"toggle","optional":true,"type":"boolean","default":"false","bindable":false,"doc":"Turns the button into a two-state toggle driven by `pressed`. Ignored when `href` is set — a link has no pressed state.","details":[],"examples":[]},{"name":"pressed","optional":true,"type":"boolean","default":"false","bindable":true,"doc":"Selected state of a toggle button. Bindable.","details":[],"examples":[]},{"name":"class","optional":true,"type":"string","bindable":false,"doc":"","details":[],"examples":[]},{"name":"children","optional":true,"type":"Snippet","bindable":false,"doc":"","details":[],"examples":[]}]},{"name":"ButtonGroup","dir":"button-group","entry":"omaris","importPath":"import { ButtonGroup } from 'omaris'","summary":"MD3 button group — a row of buttons that reads as one control.","details":["`connected` is the segmented look: a hairline gap between children, pill ends on the outside, squared corners on the inside. `spaced` just lays buttons out on the MD3 8dp rhythm and leaves their shapes alone.","The group restyles whatever buttons you put in it, so children can stay plain `