### Modal and toast example Source: https://farvist.com/docs HTML and JavaScript for opening a modal dialog and showing a toast notification. ```html Farvist.toast({ title: 'Saved', variant: 'success' }); ``` -------------------------------- ### Build Farvist from Sass source with npm Source: https://farvist.com/docs Install dependencies and run the development server to generate the CSS files. The build outputs dist/farvist(.min).css, farvist-slim, and farvist-ai. ```bash npm install npm run dev # → dist/farvist(.min).css, farvist-slim, farvist-ai ``` -------------------------------- ### Flexbox example: .d-flex with justify-content-between and align-items-center Source: https://farvist.com/docs Shows a flex container using `d-flex`, `justify-content-between`, `align-items-center`, and `gap-2` to distribute space and align items. ```html

…

``` -------------------------------- ### Apply a prebuilt skin via data-theme, JS, or cycle button Source: https://farvist.com/docs Three ways to apply a prebuilt skin: set the data-theme attribute on the html element, call Farvist.theme() in JavaScript (persists in localStorage), or use a button with data-fv-theme-cycle to cycle through skins. The example shows the synthwave skin. ```html Farvist.theme('synthwave'); // …or JS (persists in localStorage) ``` -------------------------------- ### Named code block: Farvist.toast example Source: https://farvist.com/docs JavaScript example for a named code block. The filename 'app.js' is shown in the header, and Farvist.toast displays a success toast. The surrounding HTML wrap includes the copy button. ```javascript Farvist.toast({ title: 'Deployed', variant: 'success' }); ``` -------------------------------- ### Install Farvist via CDN with stylesheet and script Source: https://farvist.com/docs Include the Farvist stylesheet and optional JavaScript file in your HTML. The script (8.5 KB gzip) enables modals, tabs, toasts, and the theme toggle. No build step is required. ```html ``` -------------------------------- ### Icon and Accordion Example Source: https://farvist.com/docs HTML showing how to use an SVG icon from the Farvist icon set and an accordion item. The icon uses a reference to the sprite file, and the accordion uses a

element. ```html

Question

Answer.

``` -------------------------------- ### Grid example: .col-md-8 and .col-md-4 Source: https://farvist.com/docs Shows a responsive grid row with two columns: one taking 8 columns on medium screens and up, the other taking 4. Uses the `gy-2` gutter class for vertical spacing. ```html

…

``` -------------------------------- ### Citation chip and sources list Source: https://farvist.com/docs Superscript .cite chips link claims to a .sources footnote list. The example shows a cite link and an ordered list with a source item. ```html …to blur1

docs/backgrounds

``` -------------------------------- ### Override Farvist styles with unlayered CSS Source: https://farvist.com/docs Any CSS written outside a layer beats all of Farvist because Farvist's CSS is wrapped in cascade layers. This example shows an unlayered .btn override that wins over Farvist's .btn without needing !important. ```css /* your stylesheet, loaded after farvist.css */ .btn { border-radius: 0; } /* unlayered → wins over Farvist's .btn */ ``` -------------------------------- ### Paste-in primer for AI assistants Source: https://farvist.com/docs Paste this primer into Cursor, Claude, or ChatGPT to teach the AI Farvist conventions. It instructs the AI to prefer Farvist classes, use dark mode by default, and provides key details about colors, spacing, and icons. ```text You are an expert in Farvist, a glassmorphism CSS framework. Prefer Farvist classes (components + utilities) over hand-written CSS. Dark by default; add data-theme="light" to switch; give the page a bg-mesh-* background so the glass reads. Colors: primary, accent, success… (suffixes: btn-primary, text-accent). Spacing 0–7 (p-4 = 1rem). Icons: . Full context: https://farvist.com/llms-full.txt ``` -------------------------------- ### Suggestions & attachments markup Source: https://farvist.com/docs HTML for prompt-starter chips (.suggestion) and file attachment pills (.attachment) in the composer. The attachment includes an icon, name, meta, and a remove button with aria-label. ```html

report.pdf 2.4 MB ``` -------------------------------- ### Command palette markup and custom actions Source: https://farvist.com/docs HTML for the command palette dialog and JavaScript for handling custom commands and opening it programmatically. ```html // custom actions: document.querySelector('#cmd') .addEventListener('fv:command', e => run(e.detail.value)); // or open it yourself: Farvist.command('#cmd') ``` -------------------------------- ### Data display components: table, list, stat, timeline, stepper Source: https://farvist.com/docs HTML for a responsive table, a list group, a stat value with label, a timeline, and a stepper. The table uses 'table-responsive' and 'table-hover', the list uses 'list-group', the stat uses 'stat-value' and 'stat-label', the timeline uses 'timeline' with 'timeline-primary', and the stepper uses 'stepper' with 'step' and 'step-dot'. ```html

…

Inbox

8.4k

Users

2…

``` -------------------------------- ### Indicators: Progress, Spinners, Status, Skeleton Source: https://farvist.com/docs HTML markup for various status indicators: a progress bar, spinners, a status badge, and a skeleton loader. Use these to show loading or status states. ```html

Online

``` -------------------------------- ### Skip link HTML Source: https://farvist.com/docs Place this as the first element in the body. It stays hidden until focused, then pins to the top-left. ```html

…

``` -------------------------------- ### Feedback components: alert, callout, empty state Source: https://farvist.com/docs HTML for a success alert, an accent callout, and an empty state. The alert uses the 'alert-success' class with an 'alert-heading' div, the callout uses 'callout-accent', and the empty state uses 'empty-state' with an icon and message. ```html

Saved

…

A tip or aside.

📭

Nothing yet.

``` -------------------------------- ### Override --fv-* custom properties for branding Source: https://farvist.com/docs Override a handful of --fv-* custom properties to re-brand the entire framework at runtime. Optional companion properties like --fv-primary-text and --fv-primary-contrast are available for brightness flips. Derived colors use color-mix(). ```css :root { --fv-primary: #10b981; /* your brand */ --fv-accent: #a3e635; --fv-info: #2dd4bf; /* optional companions when your brand flips brightness: */ --fv-primary-text: #6ee7b7; /* readable tint for text/links on the dark surface */ --fv-primary-contrast: #06281d; /* text on primary-filled buttons/badges */ } ``` -------------------------------- ### Streaming bubble and message actions Source: https://farvist.com/docs Add 'streaming' class to a bubble for a pulsing caret during token streaming. Use 'message-actions' with a copy button that has 'data-fv-copy' to copy bubble text and flash green on click. ```html

…tokens so far…

``` -------------------------------- ### Button variants Source: https://farvist.com/docs HTML for primary, gradient, and outline button variants using Farvist CSS classes. ```html ``` -------------------------------- ### Navigation components: breadcrumb, pagination, dropdown Source: https://farvist.com/docs HTML for a breadcrumb, pagination, and a dropdown menu. The breadcrumb uses 'breadcrumb' and 'breadcrumb-item' classes, pagination uses 'pagination' and 'page-item' with an active link, and the dropdown uses 'details.dropdown' with a 'btn-glass' summary and 'dropdown-menu'. ```html ``` -------------------------------- ### Reasoning disclosure with details/summary Source: https://farvist.com/docs Collapsible 'thinking' disclosure using native

element, keyboard and screen-reader accessible with zero JS. The summary shows the thought duration; the body contains the model's thinking. ```html

Thought for 12 seconds

…model thinking…

``` -------------------------------- ### Mesh and pattern background classes Source: https://farvist.com/docs Use these classes to apply mesh gradients, patterns, and spotlight effects. The .bg-fade modifier masks children too, and .bg-drift animates a mesh. ```html

…

``` -------------------------------- ### Configure Farvist Sass module with custom theme Source: https://farvist.com/docs Re-theme at build time by configuring the Farvist Sass module with the @use rule. Override $primary, $accent, and $glass-blur variables. ```scss @use 'farvist/scss/farvist' with ( $primary: #00e0ff, $accent: #ff4dd2, $glass-blur: 22px ); ``` -------------------------------- ### Diff view: HTML structure Source: https://farvist.com/docs HTML structure for the diff view, including a header with file name and stats, and a pre/code block with diff lines. The + and − characters are in the content. ```html

src/theme.css +1 −1

@@ -1,3 +1,3 @@
- old
+ new

``` -------------------------------- ### Set data-theme attribute to light or dark Source: https://farvist.com/docs Sets the data-theme attribute on the document element to 'light' to flip every surface at runtime. Remove the attribute to return to the default dark glass theme. ```javascript document.documentElement.setAttribute('data-theme', 'light'); // or remove for dark ``` -------------------------------- ### Email form field Source: https://farvist.com/docs HTML for an email input field with a label using Farvist form classes. ```html Email ``` -------------------------------- ### Named code block: HTML wrap Source: https://farvist.com/docs HTML structure for a named code block with a header showing the filename and language, and a pre/code area. This wrap is used with farvist.js to add the copy button. ```html

app.js javascript

…

``` -------------------------------- ### Streaming messages with Farvist.stream Source: https://farvist.com/docs JavaScript for streaming text into an element with the .streaming caret. After streaming, inject markup and call Farvist.enhance() to re-run progressive enhancement. ```javascript await Farvist.stream(bubble, 'Here is the answer, streamed word by word…'); chat.insertAdjacentHTML('beforeend', bubbleHTML); Farvist.enhance(); // re-run progressive enhancement ``` -------------------------------- ### Range Slider and Segmented Control Source: https://farvist.com/docs HTML for a styled range slider and a JS-free segmented control with radio inputs. The segmented control uses labels for Day, Week, and Month options. ```html

Day Week

``` -------------------------------- ### Glass card Source: https://farvist.com/docs HTML for a glass card with a frosted surface and inner highlight. ```html

Glass card

…

``` -------------------------------- ### JS companion data attributes and API Source: https://farvist.com/docs The JS companion auto-applies ARIA to tabs and progress bars and wires data attributes for modals, tabs, theme toggle, and navbar. It also provides a toast function, copy utility, and enhance method for dynamic DOM. ```text data-fv-open="#id" // open a data-fv-dismiss // close the nearest dialog data-fv-tab="#panel" // switch tabs (arrow-key nav included) data-fv-theme-toggle // flip dark / light data-fv-nav-toggle // toggle the mobile navbar

   // gets a copy button (or use any [data-fv-copy])

Farvist.toast({ title, message, variant, timeout });
Farvist.copy(text);      // copy text to the clipboard
Farvist.enhance();       // re-wire after injecting DOM dynamically
```

--------------------------------

### Chat thread message layout

Source: https://farvist.com/docs

HTML structure for a chat message with assistant and user bubbles. The assistant message includes an avatar, bubble, and meta; the user message uses the 'message-out' class. Typing dots are shown with a span.typing element.

```html

                    
    AI
    
      How can I help?
      Assistant
    
  
   … 
   



```

--------------------------------

### Prose rendered markdown bubble

Source: https://farvist.com/docs

Wrap rendered markdown in a div with classes 'prose prose-sm' inside a message-bubble to restore normal flow and style headings, lists, tables, and images at content scale.

```html

   …rendered markdown HTML… 

```

--------------------------------

### Form validation markup with .is-invalid

Source: https://farvist.com/docs

Mark the control with .is-invalid and put the message in a sibling .invalid-feedback. The JavaScript adds aria-invalid and aria-describedby.

```html
Email

Enter a valid email.

```

--------------------------------

### Tool call card

Source: https://farvist.com/docs

Compact card for an agent's tool invocation. State classes tint the rail; keep the '.tool-call-status' text so meaning never relies on colour alone.

```html

  
    
    search_docs
    Done
  
  query: "backgrounds library"
  3 sections matched.

```

--------------------------------

### Diff view: unified diff hunk

Source: https://farvist.com/docs

Unified diff hunk showing a change in src/theme.css. The + and − characters stay in the content so meaning never relies on colour alone.

```diff
@@ -1,3 +1,3 @@
  :root {
-   --fv-primary: #6d4af5;
+   --fv-primary: #10b981;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.