mosnicat

Live examples and copy-paste snippets for every documented class in the drop-in stylesheet. Each example is rendered from, and its snippet shown verbatim from, the same fragment in docs/examples/ — the two cannot drift apart.

Alert

Changes saved. 
<div class="alert success">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
  >
    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
    <polyline points="22 4 12 14.01 9 11.01"></polyline>
  </svg>
  <span>Changes saved.</span>
</div>

Badge

New Active Failed 

<p>
  <span class="badge primary">New</span>
  <span class="badge success">Active</span>
  <span class="badge error">Failed</span>
</p>

Btn Block

<div class="panel">
  <button class="btn btn-block">Continue</button>
</div>

Btn

<div class="panel">
  <button class="btn">Continue</button>
</div>

Content Container

Release notes

0002 adds the component layer on top of the existing primitives.

<div class="content-container">
  <h2>Release notes</h2>
  <p>0002 adds the component layer on top of the existing primitives.</p>
</div>

Divider

Above the divider.

Below the divider.

<p>Above the divider.</p>
<hr class="divider" />
<p>Below the divider.</p>

Layout

<div class="content">
  <div class="menu-content">
    <nav class="menu">
      <div class="menu-entry selected">
        <span class="menu-entry-title">Overview</span>
        <span class="menu-entry-subtitle">Summary and status</span>
      </div>
      <div class="menu-entry">
        <span class="menu-entry-title">Settings</span>
        <span class="menu-entry-subtitle">Preferences</span>
      </div>
    </nav>
  </div>
</div>

Components

Every surface below ships two first-class authoring paths that render pixel-identically (D-17): drop in the custom element tag (<mosni-header>, …) for attribute-driven terseness, or hand-write the plain HTML/class version (<header class="header">, …) for full control and the strongest no-JS story — neither path is deprecated or secondary. Each section below is a live <mosni-*> example (this page loads mosnicat.js at the end of <body>, so the tag upgrades in-browser) followed by its attribute/slot/event contract.

Mosni Accordion

What is mosnicat?

The shared visual chrome for every app on the mosni stack.

How do I include it?

Add one script tag to the page's head — see mosnicat.md.

 
<mosni-accordion exclusive>
  <details open>
    <summary>What is mosnicat?</summary>
    <p>The shared visual chrome for every app on the mosni stack.</p>
  </details>
  <details>
    <summary>How do I include it?</summary>
    <p>Add one script tag to the page's head — see mosnicat.md.</p>
  </details>
</mosni-accordion>

Attributes

Name Type Observed Description
exclusive boolean no Only one section open at a time — sets a shared generated name on every child <details>.

Events

Name Description
toggle Native toggle, bubbling from each child <details>.

Mosni Code

export const define = (tag: string, cls: CustomElementConstructor): void => {
  if (!customElements.get(tag)) customElements.define(tag, cls);
};
 
<mosni-code language="ts">
  <pre>
export const define = (tag: string, cls: CustomElementConstructor): void => {
  if (!customElements.get(tag)) customElements.define(tag, cls);
};</pre>
</mosni-code>

Attributes

Name Type Observed Description
language string no Prism language id (ts, js, html, css, bash, json, md).
label string no Header label (defaults to language when the header shows).
no-copy boolean no Hide the copy button (shown by default).
no-header boolean no Hide the header row entirely.

Mosni Field

<mosni-field
  label="Email"
  type="email"
  required
  help="We'll never share your email."
></mosni-field>
<mosni-field label="Display name">
  <input type="text" placeholder="Jane Doe" />
</mosni-field>

Attributes

Name Type Observed Description
label string no Field label text.
type string no Control kind when generating: text (default)/password/email/number/url/search/tel/date/textarea/select/checkbox/radio.
name string no Control name (form submission).
value string no Initial value.
required boolean no Adds the * marker + control required.
help string no Help text under the control.
error string yes Error message; presence sets .field.error + aria-invalid + shows the message.

Events

Name Description
change Native change from the (authored or generated) control; bubbles from light DOM already.
input Native input from the (authored or generated) control; bubbles from light DOM already.

Mosni Header

<mosni-header
  brand="MOSNI'S"
  accent="CAT HEADER"
  href="https://mosni.dev"
  tagline="made with mosnicat"
></mosni-header>

Attributes

Name Type Observed Description
brand string no Brand text (left). Plain leading text of the brand.
accent string no Optional trailing brand text wrapped in .purple (exordium's split-brand look).
href string no If set, the brand is a link to it.
tagline string no Plain text for the right-side little-link region.

Slots

Name Description
brand Rich brand content overriding brand/accent (wrapped in an <a href> if href is set).
tagline Rich right-side content overriding tagline.

Mosni Layout

Main content goes here.

 
<mosni-layout>
  <mosni-header slot="header" brand="MOSNI'S" accent="APP"></mosni-header>
  <mosni-menu slot="menu" label="Primary">
    <mosni-menu-item
      title="Overview"
      subtitle="Summary and status"
      href="#"
      selected
    ></mosni-menu-item>
    <mosni-menu-item
      title="Settings"
      subtitle="Preferences"
      href="#"
    ></mosni-menu-item>
  </mosni-menu>
  <p>Main content goes here.</p>
</mosni-layout>

Slots

Name Description
header A <mosni-header> or any header.
menu A <mosni-menu>.
footer An optional <mosni-footer>.

Mosni Lightbox

The mosnicat 
<mosni-lightbox caption="A moody cat, deep in thought.">
  <img src="mosnicat.png" alt="The mosnicat" width="240" />
</mosni-lightbox>

Attributes

Name Type Observed Description
full string no Full-resolution src for the overlay (defaults to the thumbnail's src).
caption string no Optional caption under the enlarged image.

Events

Name Description
close Native <dialog> close on the generated overlay.

Mosni Menu

<mosni-menu label="Primary">
  <mosni-menu-item
    title="Overview"
    subtitle="Summary and status"
    href="#"
    selected
  ></mosni-menu-item>
  <mosni-menu-item
    title="Settings"
    subtitle="Preferences"
    href="#"
  ></mosni-menu-item>
</mosni-menu>

Attributes

Name Type Observed Description
label string no Sets aria-label on the nav (role=navigation).

Mosni Modal

This action can't be undone.

 
<div class="panel">
  <button class="btn" onclick="this.nextElementSibling.show()">
    Open modal
  </button>
  <mosni-modal heading="Delete project?">
    <p>This action can't be undone.</p>
    <button slot="footer" class="btn">Cancel</button>
    <button slot="footer" class="btn">Delete</button>
  </mosni-modal>
</div>

Attributes

Name Type Observed Description
open boolean yes Open state — drives dialog.showModal()/close(); reflects back on native close.
heading string no Dialog heading (<h1 class="modal-heading">).

Slots

Name Description
heading Rich heading, overrides the heading attribute.
footer The action button row.

Events

Name Description
close Native <dialog> close (dialog.returnValue carries the value).
cancel Native <dialog> cancel (Esc).

Mosni Panel

Use your passkey to continue.

 
<mosni-panel heading="Sign in">
  <p>Use your passkey to continue.</p>
</mosni-panel>

Attributes

Name Type Observed Description
heading string no Injected as <h1> unless an authored heading child is present.

Slots

Name Description
heading Enhance-first: an authored <h1> or slot="heading" child always wins over the heading attribute.

Mosni Switch

<mosni-switch label="Enable notifications" checked></mosni-switch>

Attributes

Name Type Observed Description
checked boolean yes On/off; mirrors the inner checkbox.
disabled boolean yes Disabled.
label string no Optional inline label (clickable).
name string no Form field name.
value string no Submitted value when checked.

Events

Name Description
change Native change; bubbles from the inner checkbox.

Mosni Tabs

mosnicat ships components and utility classes from one file.

Add one script tag to your page's head.

Override the CSS custom properties in :root.

 
<mosni-tabs>
  <mosni-tab label="Overview" selected>
    <p>mosnicat ships components and utility classes from one file.</p>
  </mosni-tab>
  <mosni-tab label="Installation">
    <p>Add one script tag to your page's head.</p>
  </mosni-tab>
  <mosni-tab label="Theming">
    <p>Override the CSS custom properties in :root.</p>
  </mosni-tab>
</mosni-tabs>

Events

Name Description
mosni-tab-change Bubbles on selection change; detail: { index, label }. Also settable via tabs.selectedIndex.

Mosni Toast

<div class="panel">
  <button
    class="btn"
    onclick="window.mosni.toast('Saved successfully.', { variant: 'success' })"
  >
    Show toast
  </button>
</div>
<!-- Declarative form: <mosni-toast variant="success">Saved successfully.</mosni-toast> -->

Attributes

Name Type Observed Description
variant string no info (default)/success/error — read once on connect, forwarded to the created toast.

Events

Name Description
mosni-toast-dismiss Bubbles from a toast element when it is dismissed (button, timeout, or handle.dismiss()).

Mosni Tooltip

<mosni-tooltip text="Copies the API key to your clipboard.">
  <button class="btn">Copy key</button>
</mosni-tooltip>

Attributes

Name Type Observed Description
text string yes Tooltip text (ignored once a slot="tip" child is used); mirrored property.

Slots

Name Description
tip Rich tip content, overrides the text attribute.

Panel Input

<div class="panel">
  <input type="email" placeholder="you@example.com" />
  <input type="password" placeholder="Password" />
</div>

Panel

Sign in

Use your passkey to continue.

<div class="panel">
  <h1>Sign in</h1>
  <p>Use your passkey to continue.</p>
</div>

Progress

<div class="progress" style="--progress: 60%"></div>

Prose

About mosnicat

mosnicat is the shared visual chrome for every app on the mosni stack.

Flat colours, few gradients.
<div class="prose">
  <h2>About mosnicat</h2>
  <p>mosnicat is the shared visual chrome for every app on the mosni stack.</p>
  <blockquote>Flat colours, few gradients.</blockquote>
</div>

Purple

The .purple utility applies the mosnicat accent colour to any inline element. 

<p>
  The <span class="purple">.purple</span> utility applies the mosnicat accent
  colour to any inline element.
</p>

Spinner

<span class="spinner" role="status" aria-label="Loading"></span>

Status

Passkey verified.

<div class="panel">
  <p class="status">Passkey verified.</p>
</div>

Table

Name Role
Hannah Owner
Mosni Cat 
<table class="table interactive">
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hannah</td>
      <td>Owner</td>
    </tr>
    <tr>
      <td>Mosni</td>
      <td>Cat</td>
    </tr>
  </tbody>
</table>

Text Container

This is an element of class "text-container".

<div class="text-container">
  <p>This is an element of class "text-container".</p>
</div>