Page title

Description	Qty	Price	Amount
Team plan, October	1	€190.00	€190.00
Extra entities	4	€25.00	€100.00
API calls over plan (4,210)	4.21	€0.40	€1.68

Recent invoices
	Status
INV-001	Paid	Card	€250.00
INV-002	Pending	Transfer	€150.00
INV-003	Overdue	PayPal	€350.00
INV-004	Paid	Card	€450.00
Total	€1,200.00

Noodle	Origin	Radius
Udon	Japan	12px
Pho	Vietnam	8px
Mee	Malaysia	pill
Shirataki	Japan	0

Invoice	Customer	Amount
INV-2041	Halden & Co	€1,240.00
INV-2040	Orbital GmbH	€380.50
INV-2039	Kestrel Ltd	€4,900.00
INV-2038	Marrow SRL	€96.00

). The title link covers the card. - `mn-listing-media`: The photo area; badges sit on it. - `mn-listing-price`: Price with its period or basis (“/month”, “asking”). - `mn-listing-facts`: Size, rooms, baths: a list with units. - `mn-listing-save`: A toggle button (aria-pressed) above the link. ## Accessibility - The title is the only link; the save button sits above it with its own name (“Save 2-room flat in Cotroceni”). - Facts are a list with units spelled out for screen readers (m² is read as “square metres”). - Price includes its basis (“per month”, “asking price”) in text, not colour. ## Examples ### Results grid ```html

Energy B

€780 /month

2-room flat, Cotroceni

Str. Dr. Lister 14, Bucharest

58 m²
2 rooms
1 bath

Energy A

€214,000 asking

Townhouse with garden

Str. Bucegi 3, Brașov

132 m²
4 rooms
2 baths

Energy C

€520 /month

Studio by the park

Bd. Eroilor 21, Cluj-Napoca

34 m²
1 room
1 bath

``` ## Source CSS ```css .mn-listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 1.5rem 1.25rem; } .mn-listing { position: relative; display: grid; gap: .2rem; align-content: start; min-width: 0; } .mn-listing-media { position: relative; aspect-ratio: 4 / 3; margin-bottom: .6rem; overflow: hidden; border-radius: var(--mn-radius-box); background: var(--mn-surface-2); } .mn-listing-media > svg, .mn-listing-media > img { display: block; width: 100%; height: 100%; object-fit: cover; } .mn-listing-media > .mn-badge { position: absolute; left: .6rem; top: .6rem; } .mn-listing-save { position: absolute; z-index: 2; right: .6rem; top: .6rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 999px; background: color-mix(in oklab, var(--mn-surface) 88%, transparent); color: var(--mn-fg); cursor: pointer; } .mn-listing-save svg { width: 1.1rem; height: 1.1rem; } .mn-listing-save[aria-pressed="true"] { color: var(--mn-danger-text, var(--mn-danger)); } .mn-listing-save[aria-pressed="true"] svg { fill: currentColor; } .mn-listing-price { margin: 0; font-variant-numeric: tabular-nums; } .mn-listing-price strong { font: var(--mn-heading-weight) 1.125rem/1.3 var(--mn-font-heading); color: inherit; } .mn-listing-price span { color: var(--mn-muted); font-size: var(--mn-text-sm); } .mn-listing-title { margin: 0; font: 500 1rem/1.35 var(--mn-font); } .mn-listing-title a { color: var(--mn-fg); text-decoration: none; } .mn-listing-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--mn-radius-box); } .mn-listing-title a:hover { text-decoration: underline; text-underline-offset: 3px; } .mn-listing-address { margin: 0; color: var(--mn-muted); font-size: var(--mn-text-sm); } .mn-listing-facts { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin: .35rem 0 0; padding: 0; list-style: none; color: var(--mn-fg); font-size: var(--mn-text-sm); font-variant-numeric: tabular-nums; } ``` ## Source JS (excerpt of mian.js) ```js /*
0:42
Transcript: “The proofs are in. Page six needs a wider margin, the rest is good to print.”
``` ## Source CSS ```css .mn-voice { --_p: 0%; display: inline-flex; align-items: center; gap: .7rem; max-width: 100%; min-width: 0; padding: .45rem .9rem .45rem .45rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: 999px; background: var(--mn-card); color: var(--mn-fg); } .mn-voice-play { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: var(--mn-primary); color: var(--mn-primary-fg); cursor: pointer; transition: scale var(--mn-dur-fast) var(--mn-ease-out); } .mn-voice-play:active { scale: .94; } .mn-voice-play:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 2px; } .mn-voice-play svg { width: 1rem; height: 1rem; } .mn-voice-play .mn-voice-pause, .mn-voice[data-playing] .mn-voice-play .mn-voice-go { display: none; } .mn-voice[data-playing] .mn-voice-play .mn-voice-pause { display: block; } .mn-voice-wave { display: flex; align-items: center; gap: 2px; flex: 1 1 9rem; min-width: 4rem; height: 1.75rem; cursor: pointer; touch-action: none; border-radius: 4px; } .mn-voice-wave:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 3px; } .mn-voice-wave > i { flex: 1 1 0; min-width: 2px; max-width: 3px; height: calc(var(--h, .4) * 100%); border-radius: 2px; background: color-mix(in oklab, var(--mn-fg) 28%, transparent); transition: background-color var(--mn-dur-fast) linear; } .mn-voice-wave > i.mn-on { background: var(--mn-primary-text, var(--mn-primary)); } .mn-voice-time { flex: none; color: var(--mn-muted); font: 500 .75rem/1 var(--mn-font-mono); font-variant-numeric: tabular-nums; } ``` ## Source JS (excerpt of mian.js) ```js /*

0:42
Draws the waveform bars, plays (the audio in data-src, or a silent clock for demos), fills the bars as it goes and seeks on click, drag or arrows. Emits mn:change { time, playing }. */ const clock = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`; register('voice-note', (root) => each(root, '[data-mn-voice]', 'Voice', (el) => { const wave = el.querySelector('.mn-voice-wave'), btn = el.querySelector('.mn-voice-play'), time = el.querySelector('.mn-voice-time'); if (!wave || !btn) return; let total = Number(el.dataset.duration) || 30, at = 0, raf = 0, last = 0; const audio = el.dataset.src ? new Audio(el.dataset.src) : null; if (audio) { audio.preload = 'metadata'; audio.addEventListener('loadedmetadata', () => { if (isFinite(audio.duration)) { total = audio.duration; draw(); } }); audio.addEventListener('ended', () => stop(true)); } let peaks = (wave.dataset.peaks || '').split(',').map(Number).filter((n) => n > 0); if (!peaks.length) { let s = 7 + total; peaks = Array.from({ length: 44 }, (_, i) => { s = (s * 16807) % 2147483647; return 0.22 + 0.78 * Math.abs(Math.sin(i / 3.1)) * (0.45 + 0.55 * (s / 2147483647)); }); } wave.innerHTML = peaks.map((p) => ``).join(''); const bars = [...wave.children]; wave.setAttribute('role', 'slider'); wave.setAttribute('tabindex', '0'); wave.setAttribute('aria-valuemin', '0'); if (!wave.hasAttribute('aria-label')) wave.setAttribute('aria-label', 'Position'); const draw = () => { const k = total ? at / total : 0; bars.forEach((b, i) => b.classList.toggle('mn-on', (i + 0.5) / bars.length <= k)); if (time) time.textContent = clock(el.hasAttribute('data-playing') || at > 0 ? at : total); wave.setAttribute('aria-valuemax', String(Math.round(total))); wave.setAttribute('aria-valuenow', String(Math.round(at))); wave.setAttribute('aria-valuetext', `${clock(at)} of ${clock(total)}`); }; const stop = (ended) => { cancelAnimationFrame(raf); raf = 0; el.removeAttribute('data-playing'); btn.setAttribute('aria-label', 'Play'); if (audio) audio.pause(); if (ended) at = 0; draw(); emit(el, 'change', { time: at, playing: false }); }; const tick = (t) => { if (audio) at = audio.currentTime; else { at += (t - last) / 1000; last = t; } if (at >= total) return stop(true); draw(); raf = requestAnimationFrame(tick); }; const play = () => { el.setAttribute('data-playing', ''); btn.setAttribute('aria-label', 'Pause'); if (audio) { audio.currentTime = at; audio.play().catch(() => {}); } last = performance.now(); raf = requestAnimationFrame(tick); emit(el, 'change', { time: at, playing: true }); }; const seek = (v) => { at = Math.max(0, Math.min(total, v)); if (audio) audio.currentTime = at; draw(); }; btn.addEventListener('click', () => (el.hasAttribute('data-playing') ? stop(false) : play())); const fromX = (x) => { const r = wave.getBoundingClientRect(); return ((x - r.left) / r.width) * total; }; wave.addEventListener('pointerdown', (e) => { wave.setPointerCapture(e.pointerId); seek(fromX(e.clientX)); }); wave.addEventListener('pointermove', (e) => { if (wave.hasPointerCapture(e.pointerId)) seek(fromX(e.clientX)); }); wave.addEventListener('keydown', (e) => { const d = { ArrowLeft: -total / 20, ArrowRight: total / 20, Home: -total, End: total }[e.key]; if (d != null) { e.preventDefault(); seek(at + d); } if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); btn.click(); } }); draw(); })); ``` --- # Alert · MIAN Inline messages for information, success, warnings and errors, with optional actions and dismiss. - Id: `alert` · Category: Feedback · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/alert - Use for: alert message, warning box, error message, success message, info notice. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-alert`: Soft alert, info by default. Add a colour role. - `mn-alert-solid · mn-alert-neutral`: Variants. - `mn-alert-icon · mn-alert-title · mn-alert-desc · mn-alert-actions`: Parts. - `[data-mn-dismiss]`: A button that removes the alert (emits cancelable mn:dismiss). ## Accessibility - Static alerts are plain content. For messages that appear after an action, add role="alert" (urgent) or role="status" (polite). ## Examples ### Colours ```html

A new version is available
MIAN 1.1 adds six more noodles.

Payment received
Your invoice has been paid in full.

Your trial ends in 3 days
Add a payment method to keep your projects.

Deployment failed
Build exited with code 1. Check the logs.

``` ### With actions ```html

Try the Udon noodle

Softer corners, warmer colours, roomier controls.

``` ### Solid ```html
Heads up
Scheduled maintenance tonight from 02:00 to 03:00 UTC.
``` ## Source CSS ```css .mn-alert { /* Role props do not inherit, so copy them into ordinary ones the title and icon can read. */ --_a: var(--_c, var(--mn-info)); --_at: var(--_ct, var(--mn-info-text)); --_af: var(--_cf, var(--mn-info-fg)); display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .25rem .75rem; padding: .9rem 1rem; border: var(--mn-border-w) solid color-mix(in oklab, var(--_a) 30%, var(--mn-border)); border-radius: var(--mn-radius-box); background: color-mix(in oklab, var(--_a) 8%, var(--mn-surface)); color: var(--mn-fg); font-size: var(--mn-text-sm); line-height: 1.55; } .mn-alert:not(:has(> .mn-alert-icon)) { grid-template-columns: 1fr auto; } .mn-alert-icon { grid-row: span 2; display: flex; color: var(--_at); padding-top: .1rem; } .mn-alert-icon svg { width: 1.15rem; height: 1.15rem; } .mn-alert-title { margin: 0; font-weight: 600; color: var(--_at); } .mn-alert-desc { margin: 0; grid-column: -3 / -2; color: color-mix(in oklab, var(--mn-fg) 82%, var(--_at)); } .mn-alert:not(:has(> .mn-alert-icon)) .mn-alert-desc { grid-column: 1; } .mn-alert-actions { grid-row: 1 / span 2; grid-column: -2; display: flex; gap: .4rem; align-items: center; } .mn-alert-solid { background: var(--_a); border-color: var(--_a); color: var(--_af); } .mn-alert-solid :is(.mn-alert-title, .mn-alert-icon, .mn-alert-desc) { color: var(--_af); } .mn-alert-neutral { --_a: var(--mn-fg); --_at: var(--mn-fg); background: var(--mn-surface); border-color: var(--mn-border); } ``` --- # Toast · MIAN Temporary notifications. Mian.toast() from script, or data-mn-toast on a button. Pause on hover, stack, dismiss. - Id: `toast` · Category: Feedback · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/toast - Use for: toast notification, snackbar, saved message, temporary notification. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `Mian.toast({ title, description, color, duration, action, position })`: Creates a toast. Returns { dismiss, element }. - `data-mn-toast="Title"`: Declarative trigger; add data-mn-toast-description and data-mn-toast-color. - `mn-toaster[data-position]`: bottom-right (default), top-right, top-center, bottom-center. ## Accessibility - The toaster is a polite live region; danger toasts use role="alert". Timers pause on hover and focus so there is time to read and act. - Never put the only path to an action in a toast. ## Examples ### Triggers ```html ``` ### From script, with an action ```html ``` ## Source CSS ```css .mn-toaster { position: fixed; z-index: 100; inset-block-end: 1rem; inset-inline-end: 1rem; display: flex; flex-direction: column-reverse; gap: .6rem; width: min(24rem, calc(100vw - 2rem)); pointer-events: none; } .mn-toaster[data-position="top-right"] { inset-block: 1rem auto; flex-direction: column; } .mn-toaster[data-position="top-center"] { inset-block: 1rem auto; inset-inline: 50% auto; translate: -50% 0; flex-direction: column; } .mn-toaster[data-position="bottom-center"] { inset-inline: 50% auto; translate: -50% 0; } .mn-toast { --_t: var(--_ct, var(--mn-fg)); pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; gap: .15rem .7rem; align-items: start; padding: .85rem .9rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-popover); color: var(--mn-fg); box-shadow: var(--mn-shadow-lg); font-size: var(--mn-text-sm); line-height: 1.45; animation: var(--mn-enter) calc(var(--mn-enter-duration) + 40ms) var(--mn-ease-enter); } .mn-toast:not(:has(.mn-toast-icon)) { grid-template-columns: 1fr auto; } .mn-toast[data-leaving] { animation: mn-toast-out 180ms var(--mn-ease) forwards; } .mn-toast-icon { grid-row: span 2; color: var(--_t); padding-top: .1rem; display: flex; } .mn-toast-icon svg { width: 1.1rem; height: 1.1rem; } .mn-toast-title { font-weight: 600; } .mn-toast-desc { color: var(--mn-muted); grid-column: -3 / -2; } .mn-toast:not(:has(.mn-toast-icon)) .mn-toast-desc { grid-column: 1; } .mn-toast-close { grid-row: 1 / span 2; grid-column: -2; align-self: start; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: -.2rem -.3rem 0 0; border: 0; border-radius: 6px; background: none; color: var(--mn-muted); cursor: pointer; } .mn-toast-close:hover { background: var(--mn-hover); color: var(--mn-fg); } .mn-toast-close:focus-visible { outline: none; box-shadow: var(--mn-focus); } .mn-toast-close svg { width: .9rem; height: .9rem; } .mn-toast-action { margin-top: .5rem; grid-column: -3 / -2; justify-self: start; } @keyframes mn-toast-in { from { opacity: 0; transform: translateY(8px) scale(.97); } } @keyframes mn-toast-out { to { opacity: 0; transform: translateX(16px); } } ``` ## Source JS (excerpt of mian.js) ```js /* Mian.toast({ title, description, color, duration, action: { label, onClick } }) */ const ICONS = { success: '', danger: '', warning: '', info: '', }; const X = ''; function toaster(position) { let t = document.querySelector('.mn-toaster'); if (!t) { t = document.createElement('section'); t.className = 'mn-toaster'; t.setAttribute('aria-label', 'Notifications'); t.setAttribute('aria-live', 'polite'); document.body.appendChild(t); } if (position) t.dataset.position = position; return t; } const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"' }[c])); function toast(opts = {}) { if (typeof opts === 'string') opts = { title: opts }; const { title = '', description = '', color = '', duration = 5000, action = null, position } = opts; const t = toaster(position); const el = document.createElement('div'); el.className = 'mn-toast' + (color ? ` mn-${color}` : ''); el.setAttribute('role', color === 'danger' ? 'alert' : 'status'); el.innerHTML = (ICONS[color] ? `` : '') + (title ? `
${esc(title)}
` : '') + (description ? `
${esc(description)}
` : '') + ``; if (action) { const b = document.createElement('button'); b.type = 'button'; b.className = 'mn-btn mn-btn-sm mn-btn-outline mn-toast-action'; b.textContent = action.label; b.addEventListener('click', () => { action.onClick?.(); dismiss(); }); el.appendChild(b); } let timer = 0, left = duration, started = Date.now(); const dismiss = () => { if (el.dataset.leaving) return; el.dataset.leaving = '1'; clearTimeout(timer); const done = () => el.remove(); if (matchMedia('(prefers-reduced-motion: reduce)').matches) done(); else { el.addEventListener('animationend', done, { once: true }); setTimeout(done, 400); } }; const arm = () => { if (duration > 0) { started = Date.now(); timer = setTimeout(dismiss, left); } }; const pause = () => { clearTimeout(timer); left -= Date.now() - started; }; el.querySelector('.mn-toast-close').addEventListener('click', dismiss); el.addEventListener('pointerenter', pause); el.addEventListener('pointerleave', arm); el.addEventListener('focusin', pause); el.addEventListener('focusout', arm); t.appendChild(el); // Keep the stack short. const all = t.querySelectorAll('.mn-toast:not([data-leaving])'); if (all.length > 4) all[0].querySelector('.mn-toast-close').click(); arm(); return { dismiss, element: el }; } Mian.toast = toast; document.addEventListener('click', (e) => { const b = e.target.closest('[data-mn-toast]'); if (!b) return; const d = b.dataset; toast({ title: d.mnToast, description: d.mnToastDescription || '', color: d.mnToastColor || '', position: d.mnToastPosition }); }); ``` --- # Progress · MIAN Linear progress, determinate from aria-valuenow, or indeterminate without it. - Id: `progress` · Category: Feedback · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/progress - Use for: progress bar, upload progress, loading bar, completion. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-progress`: Bar. mian.js reads aria-valuenow/aria-valuemax and keeps it in sync. - `mn-progress-sm · mn-progress-lg`: Sizes. - `mn-progress-label`: Label row above the bar. ## Accessibility - role="progressbar" with aria-valuenow, and an accessible name. Omit aria-valuenow for indeterminate. ## Examples ### Determinate ```html

Uploading report.pdf64%

``` ### Colours, sizes, indeterminate ```html

``` ## Source CSS ```css .mn-progress { --_v: 0%; --_p: var(--_c, var(--mn-primary)); position: relative; display: block; width: 100%; height: .5rem; border-radius: 999px; background: var(--mn-surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mn-input) 45%, transparent); } .mn-progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--_v); border-radius: inherit; background: var(--_p); transition: width 300ms var(--mn-ease); } .mn-progress:not([aria-valuenow])::after { width: auto; left: 0; right: 100%; animation: mn-indeterminate 1.4s var(--mn-ease) infinite; } .mn-progress-sm { height: .3rem; } .mn-progress-lg { height: .8rem; } .mn-progress-label { display: flex; justify-content: space-between; margin-bottom: .45rem; font-size: var(--mn-text-sm); } .mn-progress-label span:last-child { color: var(--mn-muted); font-variant-numeric: tabular-nums; } /* The sweep never leaves the track, so skins may drop overflow: hidden. */ @keyframes mn-indeterminate { 0% { left: 0; right: 100%; } 50% { left: 15%; right: 25%; } 100% { left: 100%; right: 0; } } @media (prefers-reduced-motion: reduce) { .mn-progress:not([aria-valuenow])::after { animation: none; left: 0; right: 0; opacity: .35; } } ``` ## Source JS (excerpt of mian.js) ```js const paintProgress = (el) => { const v = +el.getAttribute('aria-valuenow'), max = +(el.getAttribute('aria-valuemax') || 100); if (isNaN(v)) return; const pct = Math.max(0, Math.min(100, (v / max) * 100)); if (el.classList.contains('mn-radial')) el.style.setProperty('--_v', pct); else el.style.setProperty('--_v', pct + '%'); }; register('progress', (root) => { each(root, '.mn-progress, .mn-radial', 'Prg', (el) => { if (!el.getAttribute('role')) el.setAttribute('role', 'progressbar'); if (el.hasAttribute('aria-valuenow') && !el.hasAttribute('aria-valuemin')) el.setAttribute('aria-valuemin', '0'); if (el.hasAttribute('aria-valuenow') && !el.hasAttribute('aria-valuemax')) el.setAttribute('aria-valuemax', '100'); paintProgress(el); }); }); ``` --- # Radial progress · MIAN Circular progress with a centred value. - Id: `radial-progress` · Category: Feedback · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/radial-progress - Use for: circular progress, score ring, percentage circle, goal progress. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-radial`: Set aria-valuenow (0–100); mian.js paints it. - `mn-radial-sm · mn-radial-lg`: Sizes. ## Accessibility - Same semantics as the linear bar: role="progressbar", aria-valuenow, a name. ## Examples ### Sizes and colours ```html
25%

70%

92
``` ## Source CSS ```css .mn-radial { --_v: 0; --_s: 4.5rem; --_t: .45rem; position: relative; display: inline-grid; place-items: center; width: var(--_s); height: var(--_s); border-radius: 50%; background: conic-gradient(var(--_c, var(--mn-primary)) calc(var(--_v) * 1%), var(--mn-surface-2) 0); font: 650 calc(var(--_s) * .22)/1 var(--mn-font); font-variant-numeric: tabular-nums; } .mn-radial::before { content: ""; position: absolute; inset: var(--_t); border-radius: 50%; background: var(--mn-bg); } .mn-radial > * { position: relative; } .mn-radial-sm { --_s: 3rem; --_t: .3rem; } .mn-radial-lg { --_s: 6.5rem; --_t: .6rem; } ``` ## Source JS (excerpt of mian.js) ```js const paintProgress = (el) => { const v = +el.getAttribute('aria-valuenow'), max = +(el.getAttribute('aria-valuemax') || 100); if (isNaN(v)) return; const pct = Math.max(0, Math.min(100, (v / max) * 100)); if (el.classList.contains('mn-radial')) el.style.setProperty('--_v', pct); else el.style.setProperty('--_v', pct + '%'); }; register('progress', (root) => { each(root, '.mn-progress, .mn-radial', 'Prg', (el) => { if (!el.getAttribute('role')) el.setAttribute('role', 'progressbar'); if (el.hasAttribute('aria-valuenow') && !el.hasAttribute('aria-valuemin')) el.setAttribute('aria-valuemin', '0'); if (el.hasAttribute('aria-valuenow') && !el.hasAttribute('aria-valuemax')) el.setAttribute('aria-valuemax', '100'); paintProgress(el); }); }); ``` --- # Spinner · MIAN Indeterminate loading indicators: ring and dots. - Id: `spinner` · Category: Feedback · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/spinner - Use for: spinner, loading indicator, busy. - Alternatives: loader, skeleton. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-spinner`: Ring. Inherits the text colour unless a role is set. - `mn-spinner-sm · mn-spinner-lg`: Sizes. - `mn-dots`: Three-dot loader (three empty spans). ## Accessibility - Give the spinner role="status" and a label, or hide it and mark the loading region aria-busy="true". Motion slows under reduced motion. ## Examples ### Ring and dots ```html ``` ## Source CSS ```css .mn-spinner { --_s: 1.25rem; display: inline-block; width: var(--_s); height: var(--_s); flex: none; border: 2px solid color-mix(in oklab, var(--_c, currentColor) 20%, transparent); border-top-color: var(--_c, currentColor); border-radius: 50%; animation: mn-spin .7s linear infinite; vertical-align: middle; } .mn-spinner-sm { --_s: .9rem; } .mn-spinner-lg { --_s: 2rem; border-width: 3px; } .mn-dots { --_d: var(--_c, currentColor); display: inline-flex; gap: .25rem; } .mn-dots > span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--_d); animation: mn-bounce 1s var(--mn-ease) infinite; } .mn-dots > span:nth-child(2) { animation-delay: .15s; } .mn-dots > span:nth-child(3) { animation-delay: .3s; } @keyframes mn-bounce { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .mn-spinner { animation-duration: 2s; } .mn-dots > span { animation: none; opacity: .6; } } ``` --- # Banner · MIAN A full-width announcement bar for launches, maintenance notices or cookie-free notes. Dismissible. - Id: `banner` · Category: Feedback · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/banner - Use for: announcement bar, maintenance notice, top banner, launch announcement. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-banner`: The bar. Accepts colour roles (defaults to ink). - `mn-banner-soft`: A tinted version. - `mn-banner-bordered`: Rounded, for use inside a layout. - `[data-mn-dismiss=".mn-banner"]`: A close button removes it (cancelable mn:dismiss). ## Accessibility - Use role="region" with an aria-label so it can be found, or role="status" if it appears after load. - The close button needs a label. Keep the message short and put links inside the text. ## Examples ### Banners ```html

MIAN 1.3: new noodles and components.See what’s new

Scheduled maintenance on Sunday, 02:00–03:00 UTC.

``` ## Source CSS ```css .mn-banner { --_a: var(--_c, var(--mn-fg)); --_af: var(--_cf, var(--mn-bg)); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 1rem; padding: .6rem 3rem .6rem 1rem; position: relative; background: var(--_a); color: var(--_af); font: 500 var(--mn-text-sm)/1.4 var(--mn-font); text-align: center; } .mn-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } .mn-banner > .mn-close { position: absolute; right: .5rem; top: 50%; margin: 0; translate: 0 -50%; color: inherit; opacity: .8; } .mn-banner > .mn-close:hover { background: color-mix(in oklab, currentColor 14%, transparent); color: inherit; opacity: 1; } .mn-banner-soft { background: color-mix(in oklab, var(--_c, var(--mn-primary)) 12%, var(--mn-surface)); color: var(--_ct, var(--mn-fg)); } .mn-banner-bordered { border-radius: var(--mn-radius-box); } ``` --- # Onboarding checklist · MIAN The first steps of a new account, with progress, done states and one action per step. - Id: `onboarding` · Category: Feedback · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/onboarding - Use for: onboarding checklist, getting started steps, setup progress, first run. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-tasks`: The list (
). - `mn-task`: A step: mn-task-check, mn-task-title, mn-task-desc and an optional button. data-done marks it complete. ## Accessibility - Use an ordered list and say “Done” in text for completed steps (a visually hidden span). - Put the overall progress in words too (“2 of 4 done”). ## Examples ### Getting started ```html
Set up Ledger
2 of 4 done

Done: Create your workspace
Named, with your company’s currency.

Done: Connect a bank account
Read-only, takes about two minutes.

Invite your accountant
They get a free seat.
Invite

Approve your first matches
Ledger learns from every approval.
Review

``` ## Source CSS ```css .mn-tasks { display: grid; margin: 0; padding: 0; list-style: none; } .mn-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .85rem; align-items: start; padding: .9rem 0; border-top: var(--mn-border-w) solid var(--mn-border); } .mn-task:first-child { border-top: 0; } .mn-task > * { margin: 0; } .mn-task-check { display: grid; place-items: center; grid-row: span 2; width: 1.35rem; height: 1.35rem; margin-top: .05rem; border: 1.5px solid var(--mn-input); border-radius: 50%; color: transparent; } .mn-task-check svg { width: .8rem; height: .8rem; } .mn-task[data-done] .mn-task-check { border-color: var(--mn-success); background: var(--mn-success); color: var(--mn-success-fg); } .mn-task-title { font-weight: 600; font-size: .9375rem; line-height: 1.35; } .mn-task[data-done] .mn-task-title { color: var(--mn-muted); text-decoration: line-through; text-decoration-thickness: 1px; } .mn-task-desc { grid-column: 2; color: var(--mn-muted); font-size: var(--mn-text-sm); line-height: 1.5; } .mn-task > .mn-btn { grid-column: 3; grid-row: 1 / span 2; align-self: center; } ``` --- # Loader · MIAN Eight loading indicators, dots, bars, wave, grid, pulse, orbit, ring and a top-of-page line, in the current colour. - Id: `loader` · Category: Feedback · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/loader - Use for: loading animation, page loader, loading dots, progress line. - Alternatives: spinner, skeleton. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-loader`: The loader, with one variant class. Size with mn-loader-sm / -lg or --_s; colour with a colour role or currentColor. - `mn-loader-dots · -bars · -wave · -grid`: Need child elements: 3 dots, 5 bars, 5 wave, 9 grid. - `mn-loader-pulse · -ring`: No children. - `mn-loader-orbit`: Two children. - `mn-loader-line`: A full-width line for the top of a page or a card. ## Accessibility - Give the loader role="status" and an aria-label (“Loading invoices”), or put visible text next to it. - Under prefers-reduced-motion every loader slows to a gentle 3-second cycle. - For waits over a few seconds, prefer a progress bar with a value, or a skeleton. ## Examples ### Loaders Large size. Each takes the colour of a colour role or of the text around it. ```html ``` ### Sizes and a line ```html

Loading invoices…

``` ## Source CSS ```css .mn-loader { --_s: 1.5rem; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--_s) * .14); width: var(--_s); height: var(--_s); color: var(--_c, var(--mn-primary)); vertical-align: middle; flex: none; } .mn-loader-sm { --_s: 1rem; } .mn-loader-lg { --_s: 2.5rem; } .mn-loader > i { display: block; flex: none; background: currentColor; } /* dots */ .mn-loader-dots { width: calc(var(--_s) * 1.8); } .mn-loader-dots > i { width: calc(var(--_s) * .3); height: calc(var(--_s) * .3); border-radius: 50%; animation: mn-ld-bounce 1s ease-in-out infinite; } /* bars (equaliser) */ .mn-loader-bars > i { width: calc(var(--_s) * .13); height: 100%; border-radius: 2px; transform-origin: 50% 100%; animation: mn-ld-eq 1s ease-in-out infinite; } /* wave */ .mn-loader-wave { width: calc(var(--_s) * 2); } .mn-loader-wave > i { width: calc(var(--_s) * .22); height: calc(var(--_s) * .22); border-radius: 50%; animation: mn-ld-wave 1.2s ease-in-out infinite; } .mn-loader > i:nth-child(2) { animation-delay: .12s; } .mn-loader > i:nth-child(3) { animation-delay: .24s; } .mn-loader > i:nth-child(4) { animation-delay: .36s; } .mn-loader > i:nth-child(5) { animation-delay: .48s; } /* grid of nine squares */ .mn-loader-grid { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--_s) * .08); } .mn-loader-grid > i { width: 100%; aspect-ratio: 1; border-radius: 2px; animation: mn-ld-fade 1.2s ease-in-out infinite; } .mn-loader-grid > i:nth-child(3n+2) { animation-delay: .15s; } .mn-loader-grid > i:nth-child(3n) { animation-delay: .3s; } .mn-loader-grid > i:nth-child(n+4) { animation-delay: .2s; } .mn-loader-grid > i:nth-child(n+7) { animation-delay: .4s; } /* pulse */ .mn-loader-pulse::before, .mn-loader-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: mn-ld-pulse 1.6s cubic-bezier(.2, .6, .4, 1) infinite; } .mn-loader-pulse::after { animation-delay: .8s; } /* orbit */ .mn-loader-orbit { border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in oklab, currentColor 20%, transparent); animation: mn-spin 1.1s linear infinite; } .mn-loader-orbit > i { position: absolute; top: calc(var(--_s) * -.08); left: 50%; width: calc(var(--_s) * .26); height: calc(var(--_s) * .26); margin-left: calc(var(--_s) * -.13); border-radius: 50%; } .mn-loader-orbit > i + i { top: auto; bottom: calc(var(--_s) * -.08); opacity: .45; } /* ring with a fading tail */ .mn-loader-ring { border-radius: 50%; background: conic-gradient(from 0deg, transparent 10%, currentColor); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); animation: mn-spin .9s linear infinite; } /* top-of-page line */ .mn-loader-line { display: block; width: 100%; height: 3px; overflow: hidden; border-radius: 999px; background: color-mix(in oklab, currentColor 16%, transparent); } .mn-loader-line::after { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; border-radius: inherit; background: currentColor; animation: mn-ld-line 1.3s cubic-bezier(.6, 0, .4, 1) infinite; } @keyframes mn-ld-bounce { 0%, 80%, 100% { transform: scale(.5); opacity: .45; } 40% { transform: scale(1); opacity: 1; } } @keyframes mn-ld-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } } @keyframes mn-ld-wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(calc(var(--_s) * -.35)); } } @keyframes mn-ld-fade { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } } @keyframes mn-ld-pulse { from { transform: scale(0); opacity: .8; } to { transform: scale(1); opacity: 0; } } @keyframes mn-ld-line { from { left: -35%; } to { left: 100%; } } @media (prefers-reduced-motion: reduce) { .mn-loader, .mn-loader > i, .mn-loader::before, .mn-loader::after { animation-duration: 3s !important; } ``` --- # Cookie consent · MIAN A consent notice with equal-weight Accept and Reject, and per-purpose switches, honest by default, dismissible. - Id: `cookie-consent` · Category: Feedback · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/cookie-consent - Use for: cookie banner, cookie consent, gdpr consent, privacy choices, tracking consent. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-consent`: The notice (a region). Add mn-consent-fixed to pin it to the bottom of the viewport. - `mn-consent-actions`: Reject and Accept with equal weight, then Customise. - `mn-consent-options`: A
with one switch per purpose; necessary is on and disabled. ## Accessibility - It is a labelled region (role="region" with aria-label), not a modal: the page stays usable. - Reject and Accept have the same size and weight; nothing is pre-ticked except strictly necessary storage. - Buttons with data-mn-dismiss close it; store the choice and do not show it again. ## Examples ### Consent ```html

Cookies on this site. We use necessary storage to keep you signed in. With your permission we also measure visits to improve pages. Privacy notice

Customise
Necessary: always on Measurement Marketing

``` ## Source CSS ```css .mn-consent { display: grid; gap: .9rem; max-width: 34rem; padding: 1.1rem 1.25rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-surface); color: var(--mn-fg); box-shadow: var(--mn-shadow-lg); font-size: var(--mn-text-sm); line-height: 1.55; } .mn-consent > p { margin: 0; } .mn-consent-fixed { position: fixed; z-index: 60; inset: auto 1rem calc(1rem + env(safe-area-inset-bottom, 0px)) auto; width: min(34rem, calc(100vw - 2rem)); } .mn-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .mn-consent-options > summary { width: fit-content; cursor: pointer; color: var(--mn-fg); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .mn-consent-options[open] { display: grid; gap: .55rem; } .mn-consent-options[open] > summary { margin-bottom: .2rem; } ``` --- # Modal · MIAN A dialog on the native element: focus trap, Escape, inert background and focus return from the platform. - Id: `modal` · Category: Overlays · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/modal - Use for: dialog, popup, confirm dialog, modal form, lightbox. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `dialog.mn-modal`: The dialog. - `mn-modal-header · mn-modal-title · mn-modal-description · mn-modal-body · mn-modal-footer`: Parts. - `mn-modal-sm · mn-modal-lg · mn-modal-full`: Sizes. - `mn-modal-sheet`: Becomes a bottom sheet on phones. - `data-mn-open="id" · data-mn-close`: Open and close triggers. - `data-mn-static`: Ignore backdrop clicks and Escape, for flows that must be completed. - `mn-close`: The × button. ## Accessibility - showModal() makes everything else inert and traps focus. mian.js sets aria-labelledby from the title. - For destructive confirmations add role="alertdialog" and put focus on the least destructive button with autofocus. ## Examples ### Edit profile ```html

Edit profile
Make changes to your profile here. Click save when you're done.

Name

Username

``` ### Confirmation ```html
Delete account?

This permanently deletes your account and all of its data. This cannot be undone.

``` ## Source CSS ```css .mn-modal { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-popover); color: var(--mn-fg); box-shadow: var(--mn-shadow-lg); font-family: var(--mn-font); overflow: auto; overscroll-behavior: contain; } .mn-modal[open] { display: flex; flex-direction: column; animation: var(--mn-enter) calc(var(--mn-enter-duration) + 40ms) var(--mn-ease-enter); } .mn-modal::backdrop { background: var(--mn-overlay); backdrop-filter: blur(2px); animation: mn-fade 200ms var(--mn-ease); } .mn-modal-sm { width: min(24rem, calc(100vw - 2rem)); } .mn-modal-lg { width: min(48rem, calc(100vw - 2rem)); } .mn-modal-full { width: calc(100vw - 2rem); height: calc(100dvh - 2rem); } .mn-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 0; } .mn-modal-title { margin: 0; font: var(--mn-heading-weight) 1.125rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; } .mn-modal-description { margin: .35rem 0 0; font-size: var(--mn-text-sm); color: var(--mn-muted); line-height: 1.5; } .mn-modal-body { padding: 1rem 1.25rem; font-size: var(--mn-text-sm); line-height: 1.6; overflow: auto; } .mn-modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: 0 1.25rem 1.25rem; } .mn-close { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; margin: -.35rem -.5rem 0 0; border: 0; border-radius: var(--mn-radius-field); background: none; color: var(--mn-muted); cursor: pointer; } .mn-close:hover { background: var(--mn-hover); color: var(--mn-fg); } .mn-close:focus-visible { outline: none; box-shadow: var(--mn-focus); } .mn-close svg { width: 1rem; height: 1rem; } @keyframes mn-modal-in { from { opacity: 0; transform: translateY(8px) scale(.97); } } @media (max-width: 40rem) { .mn-modal.mn-modal-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--mn-radius-box) var(--mn-radius-box) 0 0; border-bottom: 0; } .mn-modal.mn-modal-sheet[open] { animation: mn-sheet-in 240ms var(--mn-ease); } } @keyframes mn-sheet-in { from { transform: translateY(100%); } } html:has(dialog[open].mn-modal, dialog[open].mn-drawer) { overflow: hidden; scrollbar-gutter: stable; } ``` ## Source JS (excerpt of mian.js) ```js /* Modals and drawers are native elements: focus trapping, Escape, inert background and focus return all come from the platform. */ register('dialog', (root) => { each(root, 'dialog.mn-modal, dialog.mn-drawer', 'Dlg', (dlg) => { const title = dlg.querySelector('.mn-modal-title, .mn-drawer-title, h1, h2, h3'); if (title && !dlg.hasAttribute('aria-labelledby')) dlg.setAttribute('aria-labelledby', id(title, 'mn-dlg-title')); // Click on the backdrop closes, unless the dialog is marked static. dlg.addEventListener('pointerdown', (e) => { dlg._downOnBackdrop = e.target === dlg; }); dlg.addEventListener('click', (e) => { if (e.target !== dlg || !dlg._downOnBackdrop || dlg.hasAttribute('data-mn-static')) return; const r = dlg.getBoundingClientRect(); const inside = e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom; if (!inside) dlg.close('backdrop'); }); dlg.addEventListener('cancel', (e) => { if (dlg.hasAttribute('data-mn-static')) e.preventDefault(); }); dlg.addEventListener('close', () => emit(dlg, 'close', { returnValue: dlg.returnValue })); }); }); document.addEventListener('click', (e) => { const opener = e.target.closest('[data-mn-open]'); if (opener) { const dlg = document.getElementById(opener.dataset.mnOpen); if (dlg?.showModal && !dlg.open) { dlg.showModal(); emit(dlg, 'open'); } return; } const closer = e.target.closest('[data-mn-close]'); if (closer) closer.closest('dialog')?.close(closer.dataset.mnClose || closer.value || ''); }); ``` --- # Drawer · MIAN A panel that slides in from the right, left or bottom. Also a native . - Id: `drawer` · Category: Overlays · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/drawer - Use for: side panel, slide over, filter drawer, mobile menu panel, bottom sheet. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `dialog.mn-drawer`: Right side by default. - `mn-drawer-left · mn-drawer-bottom`: Other edges. - `mn-drawer-header · mn-drawer-body · mn-drawer-footer`: Parts. ## Accessibility - Same guarantees as Modal: focus trap, Escape, inert page, focus return. ## Examples ### Edges ```html
Filters

In stock On sale
Max price

Menu

Home Inbox Settings

Share
Choose where to send this.

``` ## Source CSS ```css .mn-drawer { --_w: min(24rem, 88vw); position: fixed; inset: 0 0 0 auto; width: var(--_w); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-inline-start: var(--mn-border-w) solid var(--mn-border); background: var(--mn-popover); color: var(--mn-fg); box-shadow: var(--mn-shadow-lg); font-family: var(--mn-font); overflow: auto; } .mn-drawer[open] { display: flex; flex-direction: column; animation: mn-drawer-right 260ms var(--mn-ease); } .mn-drawer::backdrop { background: var(--mn-overlay); animation: mn-fade 260ms var(--mn-ease); } .mn-drawer-left { inset: 0 auto 0 0; border-inline-start: 0; border-inline-end: var(--mn-border-w) solid var(--mn-border); } .mn-drawer-left[open] { animation-name: mn-drawer-left; } .mn-drawer-bottom { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 85dvh; border: 0; border-top: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box) var(--mn-radius-box) 0 0; } .mn-drawer-bottom[open] { animation-name: mn-drawer-bottom; } .mn-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: var(--mn-border-w) solid var(--mn-border); } .mn-drawer-body { flex: 1; padding: 1.25rem; overflow: auto; font-size: var(--mn-text-sm); } .mn-drawer-footer { display: flex; gap: .5rem; justify-content: flex-end; padding: 1rem 1.25rem; border-top: var(--mn-border-w) solid var(--mn-border); } .mn-drawer-bottom::before { content: ""; display: block; width: 2.5rem; height: 4px; margin: .6rem auto 0; border-radius: 999px; background: var(--mn-input); } @keyframes mn-drawer-right { from { transform: translateX(100%); } } @keyframes mn-drawer-left { from { transform: translateX(-100%); } } @keyframes mn-drawer-bottom { from { transform: translateY(100%); } } ``` ## Source JS (excerpt of mian.js) ```js /* Modals and drawers are native elements: focus trapping, Escape, inert background and focus return all come from the platform. */ register('dialog', (root) => { each(root, 'dialog.mn-modal, dialog.mn-drawer', 'Dlg', (dlg) => { const title = dlg.querySelector('.mn-modal-title, .mn-drawer-title, h1, h2, h3'); if (title && !dlg.hasAttribute('aria-labelledby')) dlg.setAttribute('aria-labelledby', id(title, 'mn-dlg-title')); // Click on the backdrop closes, unless the dialog is marked static. dlg.addEventListener('pointerdown', (e) => { dlg._downOnBackdrop = e.target === dlg; }); dlg.addEventListener('click', (e) => { if (e.target !== dlg || !dlg._downOnBackdrop || dlg.hasAttribute('data-mn-static')) return; const r = dlg.getBoundingClientRect(); const inside = e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom; if (!inside) dlg.close('backdrop'); }); dlg.addEventListener('cancel', (e) => { if (dlg.hasAttribute('data-mn-static')) e.preventDefault(); }); dlg.addEventListener('close', () => emit(dlg, 'close', { returnValue: dlg.returnValue })); }); }); document.addEventListener('click', (e) => { const opener = e.target.closest('[data-mn-open]'); if (opener) { const dlg = document.getElementById(opener.dataset.mnOpen); if (dlg?.showModal && !dlg.open) { dlg.showModal(); emit(dlg, 'open'); } return; } const closer = e.target.closest('[data-mn-close]'); if (closer) closer.closest('dialog')?.close(closer.dataset.mnClose || closer.value || ''); }); ``` --- # Popover · MIAN Rich, non-modal content anchored to a trigger, on the native Popover API. - Id: `popover` · Category: Overlays · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/popover - Use for: popover, floating panel, date picker popup, info bubble. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-popover + popover`: The panel. Point popovertarget at it. - `data-placement`: bottom (default), top, left, right, with -start or -end. - `mn-popover-title`: Heading. ## Accessibility - The browser handles Escape, light dismiss and aria-expanded on the invoker. Use a Modal instead if the content must be completed. ## Examples ### Dimensions ```html

Dimensions

Set the layer size.

Width

Height

``` ## Source CSS ```css .mn-popover { position: fixed; inset: auto; margin: 0; width: max-content; max-width: min(20rem, calc(100vw - 16px)); padding: 1rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-popover); color: var(--mn-fg); box-shadow: var(--mn-shadow-lg); font: 400 var(--mn-text-sm)/1.55 var(--mn-font); } .mn-popover:popover-open { animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter); } .mn-popover-title { margin: 0 0 .3rem; font-weight: 600; } ``` ## Source JS (excerpt of mian.js) ```js /* Dropdown menus and popovers use the native Popover API for top-layer rendering, light dismiss and Escape. MIAN adds anchoring and keyboard navigation. */ const invokers = new WeakMap(); document.addEventListener('click', (e) => { const btn = e.target.closest('[popovertarget]'); if (btn) { const target = document.getElementById(btn.getAttribute('popovertarget')); if (target) invokers.set(target, btn); } }, true); const menuItems = (menu) => [...menu.querySelectorAll('.mn-menu-item')] .filter((i) => !i.matches(':disabled, [aria-disabled="true"]') && !i.closest('[hidden]')); register('popover', (root) => { each(root, '.mn-menu[popover], .mn-popover[popover]', 'Pop', (pop) => { const isMenu = pop.classList.contains('mn-menu'); if (isMenu && !pop.getAttribute('role')) pop.setAttribute('role', 'menu'); if (isMenu) pop.querySelectorAll('.mn-menu-item').forEach((i) => { if (!i.getAttribute('role')) i.setAttribute('role', i.hasAttribute('aria-checked') ? 'menuitemcheckbox' : 'menuitem'); i.tabIndex = -1; }); // Wire aria on every invoker we can find. document.querySelectorAll(`[popovertarget="${id(pop, 'mn-pop')}"]`).forEach((b) => { b.setAttribute('aria-expanded', 'false'); if (isMenu) b.setAttribute('aria-haspopup', 'menu'); }); let anchor = null; const reposition = () => { if (anchor && pop.matches(':popover-open')) place(pop, anchor, pop.dataset.placement || 'bottom-start'); }; pop.addEventListener('toggle', (e) => { anchor = invokers.get(pop) || document.querySelector(`[popovertarget="${pop.id}"]`); const open = e.newState === 'open'; anchor?.setAttribute('aria-expanded', String(open)); if (open) { reposition(); addEventListener('scroll', reposition, true); addEventListener('resize', reposition); if (isMenu) (menuItems(pop)[0] || pop).focus({ preventScroll: true }); } else { removeEventListener('scroll', reposition, true); removeEventListener('resize', reposition); } }); if (!isMenu) return; let buffer = '', timer = 0; pop.addEventListener('keydown', (e) => { const items = menuItems(pop); const i = items.indexOf(document.activeElement); let n = -1; if (e.key === 'ArrowDown') n = (i + 1) % items.length; else if (e.key === 'ArrowUp') n = (i - 1 + items.length) % items.length; else if (e.key === 'Home') n = 0; else if (e.key === 'End') n = items.length - 1; else if (e.key === 'Tab') { pop.hidePopover(); return; } else if (e.key.length === 1 && /\S/.test(e.key)) { clearTimeout(timer); buffer += e.key.toLowerCase(); timer = setTimeout(() => (buffer = ''), 500); n = items.findIndex((it, k) => k > i - (buffer.length > 1 ? 1 : 0) && it.textContent.trim().toLowerCase().startsWith(buffer)); if (n < 0) n = items.findIndex((it) => it.textContent.trim().toLowerCase().startsWith(buffer)); } if (n >= 0) { e.preventDefault(); items[n].focus(); } }); pop.addEventListener('click', (e) => { const item = e.target.closest('.mn-menu-item'); if (!item || item.matches(':disabled, [aria-disabled="true"]')) return; if (item.hasAttribute('aria-checked')) { item.setAttribute('aria-checked', String(item.getAttribute('aria-checked') !== 'true')); return; // checkable items keep the menu open } emit(pop, 'select', { item, value: item.dataset.value ?? item.textContent.trim() }); pop.hidePopover(); anchor?.focus({ preventScroll: true }); }); }); }); ``` --- # Tooltip · MIAN Short labels on hover and focus. Pure CSS; the text is a real element referenced by aria-describedby. - Id: `tooltip` · Category: Overlays · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/tooltip - Use for: tooltip, hover hint, icon label. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-tooltip`: Wrapper around the trigger and a role="tooltip" element. - `mn-tooltip-bottom · mn-tooltip-left · mn-tooltip-right`: Placement (top is default). ## Accessibility - Link the tooltip with aria-describedby so screen readers read it. Tooltips appear on keyboard focus, not only hover. Never put essential or interactive content in a tooltip. ## Examples ### Placements ```html ``` ## Source CSS ```css .mn-tooltip { position: relative; display: inline-flex; } /* Hidden tooltips are display:none so they never widen the page; they fade in with @starting-style and fade out with allow-discrete transitions. */ .mn-tooltip > [role="tooltip"] { position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 8px); display: none; width: max-content; max-width: min(16rem, calc(100vw - 1.5rem)); padding: .35rem .6rem; border-radius: min(6px, var(--mn-radius-field)); background: var(--mn-fg); color: var(--mn-bg); font: 500 .75rem/1.4 var(--mn-font); text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, 3px); transition: opacity var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease), display var(--mn-duration) allow-discrete; transition-delay: 0ms; } .mn-tooltip:hover > [role="tooltip"], .mn-tooltip:focus-within > [role="tooltip"] { display: block; opacity: 1; transform: translate(-50%, 0); transition-delay: 350ms; } .mn-tooltip:focus-within > [role="tooltip"] { transition-delay: 0ms; } .mn-tooltip-bottom > [role="tooltip"] { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -3px); } .mn-tooltip-right > [role="tooltip"] { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translate(-3px, -50%); } .mn-tooltip-left > [role="tooltip"] { left: auto; right: calc(100% + 8px); bottom: auto; top: 50%; transform: translate(3px, -50%); } .mn-tooltip-right:is(:hover, :focus-within) > [role="tooltip"], .mn-tooltip-left:is(:hover, :focus-within) > [role="tooltip"] { transform: translate(0, -50%); } @starting-style { .mn-tooltip:is(:hover, :focus-within) > [role="tooltip"] { opacity: 0; transform: translate(-50%, 3px); } .mn-tooltip-bottom:is(:hover, :focus-within) > [role="tooltip"] { transform: translate(-50%, -3px); } .mn-tooltip-right:is(:hover, :focus-within) > [role="tooltip"] { transform: translate(-3px, -50%); } .mn-tooltip-left:is(:hover, :focus-within) > [role="tooltip"] { transform: translate(3px, -50%); } } @media (hover: none) { .mn-tooltip:hover:not(:focus-within) > [role="tooltip"] { display: none; } } ``` --- # Command palette · MIAN Search-and-run: filterable, grouped, keyboard-driven. Inline or in a dialog opened with ⌘K. - Id: `command` · Category: Overlays · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/command - Use for: command palette, search dialog, cmd k, quick actions, spotlight search. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-command`: Container. - `mn-command-input · mn-command-list · mn-command-group · mn-command-heading · mn-command-item · mn-command-empty · mn-command-footer`: Parts. - `dialog.mn-modal.mn-command-dialog[data-mn-hotkey="k"]`: Opens on ⌘K / Ctrl+K. - `data-keywords`: Extra search terms for an item. ## Accessibility - The input is a combobox controlling a listbox; aria-activedescendant follows the highlight so focus stays in the input. Emits cancelable mn:select. ## Examples ### Inline ```html

Suggestions

Calendar

Search emoji

Launch

Settings

Profile ⌘P

Billing ⌘B

Settings ⌘S

↑↓navigate↵select

``` ## Source CSS ```css .mn-command { display: flex; flex-direction: column; min-width: 0; font: 400 var(--mn-text-sm)/1.4 var(--mn-font); color: var(--mn-fg); } .mn-command-input { display: flex; align-items: center; gap: .6rem; padding: 0 1rem; border-bottom: var(--mn-border-w) solid var(--mn-border); } .mn-command-input svg { width: 1rem; height: 1rem; color: var(--mn-muted); flex: none; } .mn-command-input input { flex: 1; min-width: 0; height: 3rem; border: 0; background: none; color: var(--mn-fg); font: inherit; font-size: calc(var(--mn-text-sm) + 1px); } .mn-command-input input:focus { outline: none; } .mn-command-input input::placeholder { color: var(--mn-muted); } .mn-command-list { max-height: min(22rem, 60dvh); overflow: auto; padding: .4rem; scroll-padding: .4rem; } .mn-command-group + .mn-command-group { margin-top: .25rem; padding-top: .25rem; border-top: var(--mn-border-w) solid var(--mn-border); } .mn-command-group[hidden], .mn-command-item[hidden] { display: none; } .mn-command-heading { padding: .5rem .6rem .3rem; font-size: .75rem; font-weight: 600; color: var(--mn-muted); } .mn-command-item { display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem; border-radius: calc(var(--mn-radius-box) - 4px); color: inherit; text-decoration: none; cursor: pointer; scroll-margin: .4rem; } .mn-command-item[aria-selected="true"] { background: var(--mn-hover); } .mn-command-item svg { width: 1rem; height: 1rem; color: var(--mn-muted); flex: none; } .mn-command-item small { margin-inline-start: auto; color: var(--mn-muted); font-size: .75rem; } .mn-command-empty { padding: 2rem 1rem; text-align: center; color: var(--mn-muted); } .mn-command-empty[hidden] { display: none; } .mn-command-footer { display: flex; gap: 1rem; padding: .55rem 1rem; border-top: var(--mn-border-w) solid var(--mn-border); color: var(--mn-muted); font-size: .75rem; } .mn-command-footer .mn-kbd { height: 1.25rem; min-width: 1.25rem; font-size: .6875rem; margin-inline-end: .25rem; } .mn-modal.mn-command-dialog { width: min(36rem, calc(100vw - 2rem)); margin-top: 12vh; } .mn-command-bordered { border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-popover); box-shadow: var(--mn-shadow-md); overflow: hidden; } ``` ## Source JS (excerpt of mian.js) ```js register('command', (root) => { each(root, '.mn-command', 'Cmd', (c) => { const input = c.querySelector('.mn-command-input input'); const list = c.querySelector('.mn-command-list'); const empty = c.querySelector('.mn-command-empty'); if (!input || !list) return; const items = () => [...list.querySelectorAll('.mn-command-item')]; input.setAttribute('role', 'combobox'); input.setAttribute('aria-expanded', 'true'); input.setAttribute('aria-controls', id(list, 'mn-cmdl')); input.setAttribute('aria-autocomplete', 'list'); list.setAttribute('role', 'listbox'); items().forEach((it) => { it.setAttribute('role', 'option'); id(it, 'mn-cmd'); it.tabIndex = -1; }); let active = 0; const visible = () => items().filter((i) => !i.hidden); const mark = (i) => { const v = visible(); items().forEach((x) => x.setAttribute('aria-selected', 'false')); if (!v.length) { input.removeAttribute('aria-activedescendant'); return; } active = (i + v.length) % v.length; v[active].setAttribute('aria-selected', 'true'); input.setAttribute('aria-activedescendant', v[active].id); v[active].scrollIntoView({ block: 'nearest' }); }; const filter = () => { const terms = input.value.toLowerCase().trim().split(/\s+/).filter(Boolean); items().forEach((it) => { const hay = (it.textContent + ' ' + (it.dataset.keywords || '')).toLowerCase(); it.hidden = !terms.every((t) => hay.includes(t)); }); c.querySelectorAll('.mn-command-group').forEach((g) => { g.hidden = !g.querySelector('.mn-command-item:not([hidden])'); }); if (empty) empty.hidden = visible().length > 0; mark(0); }; // Enter performs a real click on the highlighted item, so links navigate // and any click behaviour on the item (e.g. data-mn-set-noodle) runs. input.addEventListener('input', filter); input.addEventListener('keydown', (e) => { if (e.key === 'ArrowDown') { e.preventDefault(); mark(active + 1); } else if (e.key === 'ArrowUp') { e.preventDefault(); mark(active - 1); } else if (e.key === 'Enter') { e.preventDefault(); visible()[active]?.click(); } }); list.addEventListener('pointermove', (e) => { const it = e.target.closest('.mn-command-item'); if (it && !it.hidden) mark(visible().indexOf(it)); }); list.addEventListener('click', (e) => { const it = e.target.closest('.mn-command-item'); if (!it) return; if (!emit(c, 'select', { item: it, value: it.dataset.value ?? it.textContent.trim() }, true)) { e.preventDefault(); return; } it.closest('dialog')?.close(); }); const dlg = c.closest('dialog'); dlg?.addEventListener('close', () => { input.value = ''; filter(); }); filter(); }); }); // ⌘K / Ctrl+K opens any dialog marked data-mn-hotkey="k". document.addEventListener('keydown', (e) => { if (!(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey) return; const dlg = document.querySelector(`dialog[data-mn-hotkey="${e.key.toLowerCase()}"]`); if (!dlg) return; e.preventDefault(); if (dlg.open) dlg.close(); else { dlg.showModal(); dlg.querySelector('input')?.focus(); } }); ``` --- # Hover card · MIAN A preview card that appears when hovering or focusing a link, profiles, link previews, definitions. - Id: `hover-card` · Category: Overlays · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/hover-card - Use for: link preview, profile preview on hover, definition popup. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-hover-card`: Wrapper around the trigger and the card. - `mn-hover-card-content`: The card (combine with mn-card). - `mn-hover-card-start`: Align to the start instead of centring. ## Accessibility - It appears on keyboard focus as well as hover, after a short delay on hover. - Only put supplementary information in it, never the only way to reach something. The trigger must work on its own. ## Examples ### Profile preview ```html
Made by @btn-group 面 BTN GROUP SRL
Makers of MIAN: 54+ components and many noodles. .
``` ## Source CSS ```css .mn-hover-card { position: relative; display: inline-block; } .mn-hover-card-content { position: absolute; z-index: 60; top: calc(100% + 8px); left: 50%; display: none; width: max-content; max-width: min(20rem, calc(100vw - 1.5rem)); opacity: 0; transform: translate(-50%, 4px); transition: opacity var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease), display var(--mn-duration) allow-discrete; transition-delay: 0ms; box-shadow: var(--mn-shadow-lg); } .mn-hover-card:hover > .mn-hover-card-content, .mn-hover-card:focus-within > .mn-hover-card-content { display: block; opacity: 1; transform: translate(-50%, 0); transition-delay: 400ms; } .mn-hover-card:focus-within > .mn-hover-card-content { transition-delay: 0ms; } @starting-style { .mn-hover-card:is(:hover, :focus-within) > .mn-hover-card-content { opacity: 0; transform: translate(-50%, 4px); } } .mn-hover-card-start > .mn-hover-card-content { left: 0; transform: translate(0, 4px); } .mn-hover-card-start:is(:hover, :focus-within) > .mn-hover-card-content { transform: none; } ``` --- # Context menu · MIAN A menu that opens at the pointer on right-click, or from the keyboard with Shift+F10. - Id: `context-menu` · Category: Overlays · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/context-menu - Use for: right click menu, context menu. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `[data-mn-context="menu-id"]`: The area that opens the menu. - `mn-menu[popover]`: The menu: the same markup as the dropdown menu. - `mn-context-area-dashed`: A dashed drop-zone look for demos and canvases. ## Accessibility - The area is focusable and announces aria-haspopup="menu". Shift+F10 or the Menu key opens it at the area. - Menu keyboard support (arrows, Home/End, typeahead, Escape) comes from the dropdown module; focus returns to the area on close. - Right-click is not discoverable: offer the same actions elsewhere too. ## Examples ### Right-click area ```html
Right-click here (or focus and press Shift+F10)

``` ## Source CSS ```css .mn-context-area { position: relative; } .mn-context-area:focus-visible { outline: none; box-shadow: var(--mn-focus); } .mn-context-area-dashed { display: grid; place-items: center; min-height: 9rem; padding: 1.5rem; border: 1.5px dashed var(--mn-input); border-radius: var(--mn-radius-box); color: var(--mn-muted); font-size: var(--mn-text-sm); text-align: center; user-select: none; } ``` ## Source JS (excerpt of mian.js) ```js /*
…
+
Opens the menu at the pointer on right-click (or long-press where the browser fires contextmenu), and from the keyboard with Shift+F10 or the Menu key. Keyboard navigation comes from the dropdown module. */ register('context-menu', (root) => { each(root, '[data-mn-context]', 'Ctx', (area) => { const menu = document.getElementById(area.dataset.mnContext); if (!menu || !menu.hasAttribute('popover')) return; if (!area.hasAttribute('tabindex')) area.tabIndex = 0; area.setAttribute('aria-haspopup', 'menu'); const open = (x, y) => { if (menu.matches(':popover-open')) menu.hidePopover(); menu.showPopover(); const r = menu.getBoundingClientRect(); const vw = document.documentElement.clientWidth, vh = window.innerHeight; menu.style.left = Math.round(Math.max(8, Math.min(x, vw - r.width - 8))) + 'px'; menu.style.top = Math.round(Math.max(8, Math.min(y, vh - r.height - 8))) + 'px'; const back = (ev) => { if (ev.newState === 'closed') { menu.removeEventListener('toggle', back); if (!menu.contains(document.activeElement) || document.activeElement === document.body) area.focus({ preventScroll: true }); } }; menu.addEventListener('toggle', back); }; area.addEventListener('contextmenu', (e) => { e.preventDefault(); open(e.clientX, e.clientY); }); area.addEventListener('keydown', (e) => { if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) { e.preventDefault(); const r = area.getBoundingClientRect(); open(r.left + Math.min(24, r.width / 2), r.top + Math.min(24, r.height / 2)); } }); }); }); ``` --- # Navbar · MIAN A top bar with brand, links and actions. Sticky and translucent; collapses behind a menu button on small screens. - Id: `navbar` · Category: Navigation · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/navbar - Use for: app top bar, navigation bar, sticky header. - Alternatives: site-header. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-navbar`: Bar. - `mn-navbar-sticky · mn-navbar-collapse`: Stick to top · collapse links on mobile. - `mn-navbar-brand · mn-navbar-nav · mn-navbar-link · mn-navbar-end`: Parts. - `mn-navbar-toggle`: Mobile menu button; mian.js toggles it. ## Accessibility - Wrap links in
. Mark the current page with aria-current="page". The toggle updates aria-expanded. ## Examples ### Responsive ```html
Acme

Dashboard

Projects

Team

AP

``` ## Source CSS ```css .mn-navbar { display: flex; align-items: center; gap: 1rem; min-height: 3.75rem; padding: .5rem 1rem; border-bottom: var(--mn-border-w) solid var(--mn-border); background: color-mix(in srgb, var(--mn-bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: var(--mn-text-sm); } .mn-navbar-sticky { position: sticky; top: 0; z-index: 40; } .mn-navbar-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1rem; color: var(--mn-fg); text-decoration: none; white-space: nowrap; } .mn-navbar-brand svg { width: 1.4rem; height: 1.4rem; } .mn-navbar-nav { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; } .mn-navbar-link { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 .75rem; border-radius: var(--mn-radius-field); color: var(--mn-muted); text-decoration: none; font-weight: 500; } .mn-navbar-link:hover { color: var(--mn-fg); background: var(--mn-hover); } .mn-navbar-link[aria-current="page"] { color: var(--mn-fg); } .mn-navbar-link:focus-visible { outline: none; box-shadow: var(--mn-focus); } .mn-navbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; } .mn-navbar-toggle { display: none; } @media (max-width: 48rem) { .mn-navbar-collapse .mn-navbar-nav { display: none; } .mn-navbar-collapse .mn-navbar-toggle { display: inline-flex; } .mn-navbar-collapse[data-open] { flex-wrap: wrap; } .mn-navbar-collapse[data-open] .mn-navbar-nav { display: flex; flex-direction: column; align-items: stretch; order: 10; width: 100%; padding-top: .5rem; } ``` ## Source JS (excerpt of mian.js) ```js document.addEventListener('click', (e) => { const t = e.target.closest('.mn-navbar-toggle'); if (!t) return; const nav = t.closest('.mn-navbar'); const open = !nav.hasAttribute('data-open'); nav.toggleAttribute('data-open', open); t.setAttribute('aria-expanded', String(open)); }); ``` --- # Tabs · MIAN Switch between views. Underlined, boxed (segmented), pill and vertical variants; full WAI-ARIA keyboard support. - Id: `tabs` · Category: Navigation · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/tabs - Use for: tabs, switch views, segmented tabs, settings sections. - Alternatives: toggle-group. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-tabs`: Container. - `mn-tab-list · mn-tab · mn-tab-panel`: Parts. mian.js adds the roles and ids. - `mn-tabs-boxed · mn-tabs-pills · mn-tabs-vertical`: Variants. ## Accessibility - role="tablist", "tab", "tabpanel" with aria-controls, aria-labelledby and aria-selected. Arrow keys, Home and End move and activate; Tab moves into the panel. ## Examples ### Underlined ```html

Make changes to your account here.

Change your password here.

Choose what we email you about.

``` ### Boxed ```html

Daily figures.
Weekly figures.
Monthly figures.
Yearly figures.

``` ### Pills with icons ```html

Overview content.
Analytics content.
Reports content.

``` ## Source CSS ```css .mn-tabs { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .mn-tab-list { position: relative; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: var(--mn-border-w) solid var(--mn-border); } .mn-tab-list::-webkit-scrollbar { display: none; } .mn-tab { position: relative; display: inline-flex; align-items: center; gap: .45rem; flex: none; height: var(--mn-size-md); padding: 0 .9rem; border: 0; background: none; color: var(--mn-muted); font: 500 var(--mn-text-sm)/1 var(--mn-font); white-space: nowrap; cursor: pointer; transition: color var(--mn-duration) var(--mn-ease); } .mn-tab::after { content: ""; position: absolute; inset: auto .5rem calc(var(--mn-border-w) * -1); height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background-color var(--mn-duration) var(--mn-ease); } .mn-tab:hover { color: var(--mn-fg); } .mn-tab[aria-selected="true"] { color: var(--mn-fg); } .mn-tab[aria-selected="true"]::after { background: var(--mn-fg); } .mn-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); border-radius: var(--mn-radius-field); } .mn-tab svg { width: 1rem; height: 1rem; } @media (max-width: 26rem) { .mn-tab { padding-inline: .5rem; } } .mn-tab-panel:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: var(--mn-radius-field); } .mn-tab-panel[hidden] { display: none; } /* Boxed variant: the segmented look. */ .mn-tabs-boxed .mn-tab-list { display: inline-flex; align-self: flex-start; max-width: 100%; gap: 2px; padding: 3px; border: 0; border-radius: calc(var(--mn-radius-field) + 3px); background: var(--mn-surface-2); } .mn-tabs-boxed .mn-tab { height: calc(var(--mn-size-md) - 6px); border-radius: var(--mn-radius-field); } .mn-tabs-boxed .mn-tab::after { display: none; } .mn-tabs-boxed .mn-tab[aria-selected="true"] { background: var(--mn-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--mn-border); } .mn-tabs-pills .mn-tab-list { border: 0; gap: .25rem; } .mn-tabs-pills .mn-tab { border-radius: 999px; height: var(--mn-size-sm); } .mn-tabs-pills .mn-tab::after { display: none; } .mn-tabs-pills .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); } .mn-tabs-vertical { flex-direction: row; } .mn-tabs-vertical .mn-tab-list { flex-direction: column; border-bottom: 0; border-inline-end: var(--mn-border-w) solid var(--mn-border); min-width: 10rem; } .mn-tabs-vertical .mn-tab { justify-content: flex-start; } .mn-tabs-vertical .mn-tab::after { inset: .4rem calc(var(--mn-border-w) * -1) .4rem auto; width: 2px; height: auto; } ``` ## Source JS (excerpt of mian.js) ```js /* WAI-ARIA tabs with automatic activation and a roving tabindex. */ register('tabs', (root) => { each(root, '.mn-tabs', 'Tabs', (el) => { const list = el.querySelector('.mn-tab-list'); if (!list) return; list.setAttribute('role', 'tablist'); const vertical = el.classList.contains('mn-tabs-vertical'); if (vertical) list.setAttribute('aria-orientation', 'vertical'); const tabs = [...list.querySelectorAll('.mn-tab')]; const panels = [...el.querySelectorAll(':scope > .mn-tab-panel, :scope > * > .mn-tab-panel')]; tabs.forEach((t, i) => { t.setAttribute('role', 'tab'); const p = t.getAttribute('aria-controls') ? document.getElementById(t.getAttribute('aria-controls')) : panels[i]; if (p) { p.setAttribute('role', 'tabpanel'); t.setAttribute('aria-controls', id(p, 'mn-panel')); p.setAttribute('aria-labelledby', id(t, 'mn-tab')); if (!p.hasAttribute('tabindex')) p.tabIndex = 0; } }); const select = (tab, focus) => { tabs.forEach((t) => { const on = t === tab; t.setAttribute('aria-selected', String(on)); t.tabIndex = on ? 0 : -1; const p = document.getElementById(t.getAttribute('aria-controls')); if (p) p.hidden = !on; }); if (focus) tab.focus(); measure(tab); emit(el, 'change', { index: tabs.indexOf(tab), tab }); }; // Some noodles draw one indicator that glides between tabs. const measure = (tab) => { list.style.setProperty('--_ix', tab.offsetLeft + 'px'); list.style.setProperty('--_iw', tab.offsetWidth + 'px'); list.style.setProperty('--_iy', tab.offsetTop + 'px'); list.style.setProperty('--_ih', tab.offsetHeight + 'px'); }; if ('ResizeObserver' in window) new ResizeObserver(() => { const t = tabs.find((x) => x.getAttribute('aria-selected') === 'true'); if (t) measure(t); }).observe(list); select(tabs.find((t) => t.getAttribute('aria-selected') === 'true') || tabs[0], false); list.addEventListener('click', (e) => { const t = e.target.closest('.mn-tab'); if (t && !t.disabled) select(t, false); }); list.addEventListener('keydown', (e) => { const i = tabs.indexOf(document.activeElement); if (i < 0) return; const next = vertical ? 'ArrowDown' : 'ArrowRight', prev = vertical ? 'ArrowUp' : 'ArrowLeft'; const live = tabs.filter((t) => !t.disabled); const j = live.indexOf(tabs[i]); let n = null; if (e.key === next) n = live[(j + 1) % live.length]; else if (e.key === prev) n = live[(j - 1 + live.length) % live.length]; else if (e.key === 'Home') n = live[0]; else if (e.key === 'End') n = live[live.length - 1]; if (n) { e.preventDefault(); select(n, true); } }); }); }); ``` --- # Breadcrumbs · MIAN Where you are in a hierarchy, with links back up. - Id: `breadcrumbs` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/breadcrumbs - Use for: breadcrumbs, where am i, category path. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-breadcrumbs`: On a
, containing an
. ## Accessibility -
, an ordered list, and aria-current="page" on the last item. ## Examples ### Basic ```html

Home

Components

Navigation

Breadcrumbs

``` ## Source CSS ```css .mn-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: var(--mn-text-sm); color: var(--mn-muted); } .mn-breadcrumbs li { display: inline-flex; align-items: center; gap: .4rem; } .mn-breadcrumbs li + li::before { content: ""; width: .35rem; height: .35rem; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; margin-inline-end: .2rem; } .mn-breadcrumbs a { color: inherit; text-decoration: none; border-radius: 4px; } .mn-breadcrumbs a:hover { color: var(--mn-fg); } .mn-breadcrumbs a:focus-visible { outline: none; box-shadow: var(--mn-focus); } .mn-breadcrumbs [aria-current="page"] { color: var(--mn-fg); font-weight: 500; } .mn-breadcrumbs svg { width: .95rem; height: .95rem; } ``` --- # Pagination · MIAN Move between pages of results. - Id: `pagination` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/pagination - Use for: pagination, next previous, page numbers, results pages. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-pagination`: On a
. - `mn-page`: A page link or button. aria-current="page" marks the current one. - `mn-page-ellipsis`: Gap. ## Accessibility -
. Give arrows text labels. Disabled links use aria-disabled="true". ## Examples ### Basic ```html

Previous

1

2

3

12

Next

``` ## Source CSS ```css .mn-pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; } .mn-page { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: var(--mn-size-md); height: var(--mn-size-md); padding: 0 .6rem; border: var(--mn-border-w) solid transparent; border-radius: var(--mn-radius-field); background: none; color: var(--mn-fg); font: 500 var(--mn-text-sm)/1 var(--mn-font); text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums; } .mn-page:hover { background: var(--mn-hover); } .mn-page[aria-current="page"] { border-color: var(--mn-input); background: var(--mn-surface); box-shadow: var(--mn-shadow-sm); } .mn-page:focus-visible { outline: none; box-shadow: var(--mn-focus); } .mn-page[aria-disabled="true"] { opacity: .45; pointer-events: none; } .mn-page svg { width: 1rem; height: 1rem; } .mn-page-ellipsis { display: inline-grid; place-items: center; min-width: var(--mn-size-md); color: var(--mn-muted); } ``` --- # Steps · MIAN Progress through a multi-step flow, horizontal or vertical. - Id: `steps` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/steps - Use for: checkout steps, wizard progress, multi-step form, stepper. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-steps`: On an
. - `mn-step`: A step. data-state="complete" or aria-current="step". - `mn-step-title · mn-step-desc`: Text. - `mn-steps-vertical`: Vertical layout. ## Accessibility - aria-current="step" marks the current step. Add visually hidden "completed" text to finished steps if the tick alone carries the meaning. ## Examples ### Horizontal ```html

Account

Shipping

Payment

Review

``` ### Vertical ```html

Create projectDone in 2 minutes

Invite your teamAdd people by email

Go liveConnect a domain

``` ## Source CSS ```css .mn-steps { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: mn-step; font-size: var(--mn-text-sm); } .mn-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; position: relative; text-align: center; counter-increment: mn-step; min-width: 0; } .mn-step::before { content: counter(mn-step); position: relative; z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--mn-border); background: var(--mn-bg); color: var(--mn-muted); font-weight: 600; font-size: .8125rem; } .mn-step + .mn-step::after { content: ""; position: absolute; top: 1rem; right: calc(50% + 1.25rem); left: calc(-50% + 1.25rem); height: 2px; background: var(--mn-border); } .mn-step-title { font-weight: 550; color: var(--mn-muted); } .mn-step-desc { font-size: .75rem; color: var(--mn-muted); } .mn-step[data-state="complete"]::before { content: "✓"; background: var(--mn-primary); border-color: var(--mn-primary); color: var(--mn-primary-fg); } .mn-step[data-state="complete"] + .mn-step::after, .mn-step[data-state="complete"] + .mn-step[aria-current="step"]::after { background: var(--mn-primary); } .mn-step[aria-current="step"]::before { border-color: var(--mn-primary); color: var(--mn-primary-text); box-shadow: 0 0 0 4px color-mix(in oklab, var(--mn-primary) 15%, transparent); } .mn-step:is([aria-current="step"], [data-state="complete"]) .mn-step-title { color: var(--mn-fg); } .mn-steps-vertical { flex-direction: column; gap: 1.5rem; } .mn-steps-vertical .mn-step { flex-direction: row; align-items: flex-start; text-align: start; gap: .85rem; } .mn-steps-vertical .mn-step::before { flex: none; } .mn-steps-vertical .mn-step + .mn-step::after { left: calc(1rem - 1px); right: auto; top: -1.5rem; height: 1.5rem; width: 2px; } .mn-steps-vertical .mn-step > div { padding-top: .35rem; display: flex; flex-direction: column; gap: .15rem; } ``` --- # Sidebar · MIAN Vertical application navigation with groups, icons and badges. - Id: `sidebar` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/sidebar - Use for: app sidebar, side navigation, admin menu, docs navigation. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-sidebar`: On a
. - `mn-sidebar-group · mn-sidebar-heading · mn-sidebar-link`: Parts. aria-current="page" marks the active link. ## Accessibility - Give the
an aria-label. Group headings are text; if they collapse, use
. ## Examples ### App sidebar ```html

Dashboard Inbox 4 Reports

Workspace
Team Settings

``` ## Source CSS ```css .mn-sidebar { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; font-size: var(--mn-text-sm); } .mn-sidebar-group { display: flex; flex-direction: column; gap: 1px; } .mn-sidebar-heading { padding: 0 .65rem .35rem; font-size: .75rem; font-weight: 600; color: var(--mn-muted); letter-spacing: .01em; } .mn-sidebar-link { display: flex; align-items: center; gap: .6rem; min-height: 2.1rem; padding: .35rem .65rem; border-radius: var(--mn-radius-field); color: var(--mn-muted); text-decoration: none; font-weight: 450; } .mn-sidebar-link:hover { color: var(--mn-fg); background: var(--mn-hover); } .mn-sidebar-link[aria-current="page"] { color: var(--mn-fg); background: var(--mn-active); font-weight: 550; } .mn-sidebar-link:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); } .mn-sidebar-link svg { width: 1rem; height: 1rem; flex: none; } .mn-sidebar-link .mn-badge { margin-inline-start: auto; } ``` --- # Dock · MIAN A bottom navigation bar for mobile apps and compact layouts, floating or in the page. - Id: `dock` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/dock - Use for: bottom navigation, mobile tab bar, app dock. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-dock`: The bar (a
). - `mn-dock-item`: A link or button with an icon and a label; aria-current="page" marks the current one. - `mn-dock-fixed`: Float it at the bottom of the viewport. - `mn-dock-compact`: Icons only (keep aria-labels). ## Accessibility - Use
. Keep visible labels where you can; with mn-dock-compact every item needs an aria-label. - Targets are at least 48 × 48 px. ## Examples ### Dock ```html
Home Search Inbox Profile
``` ## Source CSS ```css .mn-dock { display: flex; align-items: stretch; justify-content: space-around; gap: .25rem; padding: .35rem; max-width: 100%; border: var(--mn-border-w) solid var(--mn-border); border-radius: calc(var(--mn-radius-box) + 4px); background: color-mix(in srgb, var(--mn-surface) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--mn-shadow-md); } .mn-dock-fixed { position: fixed; z-index: 40; left: 50%; bottom: max(.75rem, env(safe-area-inset-bottom)); translate: -50% 0; width: min(28rem, calc(100vw - 1.5rem)); } .mn-dock-item { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-width: 3rem; min-height: 3rem; padding: .35rem .5rem; border: 0; border-radius: var(--mn-radius-box); background: none; color: var(--mn-muted); font: 500 .6875rem/1 var(--mn-font); text-decoration: none; cursor: pointer; transition: color var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease); } .mn-dock-item svg { width: 1.25rem; height: 1.25rem; } .mn-dock-item:hover { color: var(--mn-fg); background: var(--mn-hover); } .mn-dock-item[aria-current="page"] { color: var(--mn-primary-text); } .mn-dock-item[aria-current="page"] svg { transform: translateY(-1px); } .mn-dock-item:focus-visible { outline: none; box-shadow: var(--mn-focus); } .mn-dock-compact .mn-dock-item > span { display: none; } ``` --- # Stories bar · MIAN A scrolling row of avatars with a ring for new stories and a grey ring for seen ones. - Id: `stories-bar` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/stories-bar - Use for: stories, story avatars, social stories row. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-storybar`: The row (
). - `mn-storybar-ring`: The ring around an avatar; data-seen on the link makes it grey. - `mn-storybar-label`: The name under it. ## Accessibility - Each item is a link or button whose name says whose story it is and whether it is new (“Ana, new story”). - The row scrolls horizontally with the keyboard focus. ## Examples ### Stories ```html

``` ## Source CSS ```css .mn-storybar { display: flex; gap: .9rem; margin: 0; padding: .3rem .25rem .5rem; list-style: none; overflow-x: auto; scrollbar-width: none; } .mn-storybar::-webkit-scrollbar { display: none; } .mn-storybar a, .mn-storybar button { display: grid; justify-items: center; gap: .4rem; width: 4.5rem; padding: 0; border: 0; background: none; color: var(--mn-fg); font: 500 .75rem/1.2 var(--mn-font); text-decoration: none; cursor: pointer; } .mn-storybar-ring { padding: 3.5px; border-radius: 50%; background: conic-gradient(from 200deg, var(--mn-accent), var(--mn-primary), var(--mn-accent)); } .mn-storybar-ring > .mn-avatar { --_s: 3.4rem; box-shadow: 0 0 0 3px var(--mn-bg); } .mn-storybar [data-seen] .mn-storybar-ring { background: var(--mn-input); } .mn-storybar-label { width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; } ``` --- # Page header · MIAN The top of an application page: where you are, what this is, its facts and the actions you can take. - Id: `page-header` · Category: Navigation · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/page-header - Use for: app page header, page title with actions, detail page heading, title and buttons, record header. - Alternatives: breadcrumbs, navbar. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-pagehead`: The header, with a rule beneath. - `mn-pagehead-row`: Title block on the left, actions on the right; wraps on narrow widths. - `mn-pagehead-title · mn-pagehead-desc`: The
and one sentence under it. - `mn-pagehead-meta`: A list of facts with icons: owner, status, updated. - `mn-pagehead-actions`: Buttons. One primary at most. ## Accessibility - The title is the page’s only
. - Breadcrumbs go in a
above the title. - Put the primary action last in the source so it sits at the end, where people look for it. ## Examples ### Detail page ```html

Projects
Harbour office
Fit-out

Fit-out, floors 2–4

Ilse Brandt
Due 14 Nov 2026
On track

``` ## Source CSS ```css .mn-pagehead { display: grid; gap: .8rem; min-width: 0; padding-bottom: 1.1rem; border-bottom: var(--mn-border-w) solid var(--mn-border); } .mn-pagehead-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; min-width: 0; } .mn-pagehead-title { margin: 0; font: var(--mn-heading-weight) 1.5rem/1.2 var(--mn-font-heading); letter-spacing: -.02em; color: var(--mn-fg); } .mn-pagehead-desc { margin: .3rem 0 0; max-width: 44rem; color: var(--mn-muted); font-size: .9375rem; line-height: 1.5; } .mn-pagehead-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .5rem 0 0; padding: 0; list-style: none; color: var(--mn-muted); font-size: var(--mn-text-sm); } .mn-pagehead-meta > li { display: inline-flex; align-items: center; gap: .35rem; } .mn-pagehead-actions { display: flex; flex-wrap: wrap; gap: .5rem; } .mn-pagehead:has(> .mn-tab-list) { padding-bottom: 0; border-bottom: 0; } ``` --- # Collapse · MIAN A single show/hide section. Native
, no JavaScript. - Id: `collapse` · Category: Layout & utilities · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/collapse - Use for: show more, expandable section, read more. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-collapse`: On a
. - `mn-collapse-content`: Body. - `mn-collapse-plain`: No border. ## Accessibility - Native disclosure semantics and keyboard support. ## Examples ### Basic ```html

Advanced settings

Enable experimental features

``` ## Source CSS ```css .mn-collapse { border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); overflow: hidden; } .mn-collapse-content { padding: 0 1.15rem 1.1rem; font-size: var(--mn-text-sm); line-height: 1.65; color: var(--mn-muted); } .mn-collapse-plain { border: 0; background: none; } .mn-collapse-plain > summary { padding-inline: 0; } .mn-collapse-plain > summary:hover { background: none; } .mn-collapse-plain > .mn-collapse-content { padding-inline: 0; } ``` --- # Carousel · MIAN A horizontally scrolling, snapping track. Swipe, trackpad and keyboard; optional arrows and dots. - Id: `carousel` · Category: Layout & utilities · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/carousel - Use for: carousel, slider of cards, horizontal scroll, image slider. - Avoid: As the only way to reach content, carousels hide things. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-carousel`: Wrapper. - `mn-carousel-track · mn-carousel-item`: Scroll-snap track and slides. - `mn-carousel-prev · mn-carousel-next · mn-carousel-dots`: Controls; dots are generated if empty. - `mn-carousel-peek · mn-carousel-multi`: Show a peek of the next slide · three per view. ## Accessibility - The track is a focusable region; arrow keys move one slide. Each slide is labelled "n of N". Nothing auto-advances. ## Examples ### With controls ```html

Udon

Soba

Ramen

Pho

Mee

``` ## Source CSS ```css .mn-carousel { position: relative; } .mn-carousel-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--mn-radius-box); } .mn-carousel-track::-webkit-scrollbar { display: none; } .mn-carousel-track:focus-visible { outline: none; box-shadow: var(--mn-focus); } .mn-carousel-item { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; } .mn-carousel-peek .mn-carousel-item { flex-basis: 82%; } .mn-carousel-multi .mn-carousel-item { flex-basis: calc((100% - 2rem) / 3); } @media (max-width: 40rem) { .mn-carousel-multi .mn-carousel-item { flex-basis: 82%; } } .mn-carousel-prev, .mn-carousel-next { position: absolute; top: 50%; translate: 0 -50%; z-index: 1; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: 50%; background: var(--mn-popover); color: var(--mn-fg); box-shadow: var(--mn-shadow-md); cursor: pointer; } .mn-carousel-prev { left: .6rem; } .mn-carousel-next { right: .6rem; } .mn-carousel-prev:disabled, .mn-carousel-next:disabled { opacity: 0; pointer-events: none; } .mn-carousel-prev:focus-visible, .mn-carousel-next:focus-visible { outline: none; box-shadow: var(--mn-focus); } .mn-carousel-prev svg, .mn-carousel-next svg { width: 1rem; height: 1rem; } .mn-carousel-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .75rem; } .mn-carousel-dots button { width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 999px; background: var(--mn-input); cursor: pointer; transition: width var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease); } .mn-carousel-dots button[aria-current="true"] { width: 1.25rem; background: var(--mn-fg); } .mn-carousel-dots button:focus-visible { outline: none; box-shadow: var(--mn-focus); } @media (prefers-reduced-motion: reduce) { .mn-carousel-track { scroll-behavior: auto; } } ``` ## Source JS (excerpt of mian.js) ```js register('carousel', (root) => { each(root, '.mn-carousel', 'Car', (c) => { const track = c.querySelector('.mn-carousel-track'); if (!track) return; const items = [...track.querySelectorAll('.mn-carousel-item')]; const prev = c.querySelector('.mn-carousel-prev'), next = c.querySelector('.mn-carousel-next'); const dots = c.querySelector('.mn-carousel-dots'); if (!track.hasAttribute('tabindex')) track.tabIndex = 0; track.setAttribute('role', 'region'); if (!track.getAttribute('aria-label')) track.setAttribute('aria-label', c.getAttribute('aria-label') || 'Carousel'); items.forEach((it, i) => { it.setAttribute('role', 'group'); it.setAttribute('aria-roledescription', 'slide'); it.setAttribute('aria-label', `${i + 1} of ${items.length}`); }); if (dots && !dots.children.length) { dots.innerHTML = items.map((_, i) => ``).join(''); } const current = () => { const x = track.scrollLeft; let best = 0, bd = Infinity; items.forEach((it, i) => { const d = Math.abs(it.offsetLeft - track.offsetLeft - x); if (d < bd) { bd = d; best = i; } }); return best; }; const go = (i) => { const it = items[Math.max(0, Math.min(items.length - 1, i))]; track.scrollTo({ left: it.offsetLeft - track.offsetLeft }); }; const update = () => { const i = current(); if (prev) prev.disabled = track.scrollLeft < 4; if (next) next.disabled = track.scrollLeft + track.clientWidth >= track.scrollWidth - 4; dots?.querySelectorAll('button').forEach((b, k) => b.setAttribute('aria-current', String(k === i))); }; prev?.addEventListener('click', () => go(current() - 1)); next?.addEventListener('click', () => go(current() + 1)); dots?.addEventListener('click', (e) => { const b = e.target.closest('button'); if (b) go([...dots.children].indexOf(b)); }); track.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight') { e.preventDefault(); go(current() + 1); } else if (e.key === 'ArrowLeft') { e.preventDefault(); go(current() - 1); } }); let t = 0; track.addEventListener('scroll', () => { cancelAnimationFrame(t); t = requestAnimationFrame(update); }, { passive: true }); update(); }); }); ``` --- # Theme controller · MIAN Switch noodle and light/dark mode for a page, or scope a noodle to any element. - Id: `theme-controller` · Category: Layout & utilities · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/theme-controller - Use for: theme switcher, dark mode toggle, change noodle, appearance setting. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `data-noodle="…" · data-mode="light | dark"`: On for the page, or on any element to scope it. - `select[data-mn-noodle-select]`: A select that switches the page noodle. - `data-mn-target="#id"`: On any control: act on that element only, without persisting. - `[data-mn-set-noodle] · [data-mn-set-mode] · [data-mn-toggle-mode]`: Buttons. - `Mian.setNoodle(id) · Mian.setMode(mode)`: Script API; persisted in localStorage. - `mn-swatch`: A 4-colour preview of the current noodle. ## Accessibility - Buttons report aria-pressed. Without data-mode the page follows the operating system. ## Examples ### Scoped controls data-mn-target points the controls at one element, so only it changes. Leave data-mn-target out to switch the whole page (and remember the choice). ```html

New

``` ### Scoped noodles Any element can carry its own noodle and mode. ```html

udon

fensi

yinzhen

mee

``` ## Source CSS ```css .mn-swatch { display: inline-grid; grid-template-columns: repeat(2, .55rem); gap: 2px; padding: 3px; border-radius: 5px; background: var(--mn-bg); box-shadow: 0 0 0 1px var(--mn-border); } .mn-swatch > i { width: .55rem; height: .55rem; border-radius: 2px; } .mn-swatch > i:nth-child(1) { background: var(--mn-primary); } .mn-swatch > i:nth-child(2) { background: var(--mn-accent); } .mn-swatch > i:nth-child(3) { background: var(--mn-fg); } .mn-swatch > i:nth-child(4) { background: var(--mn-surface-2); } ``` ## Source JS (excerpt of mian.js) ```js /* Mian.setNoodle('udon'), Mian.setMode('dark' | 'light' | 'auto'). Persisted. Any control can instead act on one element: add data-mn-target="#id" and the noodle or mode is set on that element only (not persisted). */ const KEY_N = 'mian:noodle', KEY_M = 'mian:mode'; const store = (k, v) => { try { v == null ? localStorage.removeItem(k) : localStorage.setItem(k, v); } catch (_) {} }; const targetOf = (el) => { const sel = el.getAttribute('data-mn-target'); return sel ? document.querySelector(sel) : null; }; const modeOf = (el) => el.getAttribute('data-mode') || (el === document.documentElement ? null : el.closest('[data-mode]')?.getAttribute('data-mode')) || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); Mian.setNoodle = (n, target) => { const el = target || document.documentElement; if (!target) store(KEY_N, n); // The change cross-fades (see Mian.transition) instead of snapping. const run = () => { el.setAttribute('data-noodle', n); syncTheme(); emit(el, 'theme', { noodle: n, scoped: Boolean(target) }); }; Mian.transition ? Mian.transition(run) : run(); }; Mian.setMode = (m, target) => { const el = target || document.documentElement; if (!target) store(KEY_M, m === 'auto' ? null : m); const run = () => { if (m === 'auto') el.removeAttribute('data-mode'); else el.setAttribute('data-mode', m); syncTheme(); emit(el, 'theme', { mode: m, scoped: Boolean(target) }); }; Mian.transition ? Mian.transition(run) : run(); }; Mian.resolvedMode = (target) => modeOf(target || document.documentElement); function syncTheme() { const root = document.documentElement; const noodleOf = (c) => (targetOf(c) || root).getAttribute('data-noodle') || 'mian'; const setModeOf = (c) => (targetOf(c) || root).getAttribute('data-mode') || 'auto'; document.querySelectorAll('[data-mn-noodle-select]').forEach((s) => { s.value = noodleOf(s); }); document.querySelectorAll('[data-mn-set-noodle]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.mnSetNoodle === noodleOf(b)))); document.querySelectorAll('[data-mn-set-mode]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.mnSetMode === setModeOf(b)))); document.querySelectorAll('[data-mn-toggle-mode]').forEach((b) => b.setAttribute('aria-pressed', String(Mian.resolvedMode(targetOf(b)) === 'dark'))); } document.addEventListener('click', (e) => { const n = e.target.closest('[data-mn-set-noodle]'); if (n) Mian.setNoodle(n.dataset.mnSetNoodle, targetOf(n)); const m = e.target.closest('[data-mn-set-mode]'); if (m) Mian.setMode(m.dataset.mnSetMode, targetOf(m)); const t = e.target.closest('[data-mn-toggle-mode]'); if (t) Mian.setMode(Mian.resolvedMode(targetOf(t)) === 'dark' ? 'light' : 'dark', targetOf(t)); }); document.addEventListener('change', (e) => { if (e.target.matches('[data-mn-noodle-select]')) Mian.setNoodle(e.target.value, targetOf(e.target)); }); register('theme', () => syncTheme()); ``` --- # Scroll area · MIAN A scrolling region with thin scrollbars and shadows that appear only where more content is hidden. - Id: `scroll-area` · Category: Layout & utilities · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/scroll-area - Use for: scrollable panel, overflow region, scroll shadows. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-scroll-area`: The region. Set --h for its maximum height. - `mn-scroll-area-x`: Horizontal scrolling. ## Accessibility - Make it focusable (tabindex="0") with role="region" and an aria-label so keyboard users can scroll it. - The shadows are pure CSS (background-attachment: local), no script, no layout shift. ## Examples ### Release notes ```html

1.3
More noodles and components

1.2
Design languages for every noodle

1.1
Contact form and admin

1.0
The component library

0.9
Noodles become design languages

0.8
Charts

0.7
First public version

``` ## Source CSS ```css .mn-scroll-area { --_bg: var(--mn-card); overflow: auto; overscroll-behavior: contain; max-height: var(--h, 16rem); border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--mn-fg) 25%, transparent) transparent; /* Scroll shadows: the covers move with the content, the shadows stay. */ background: linear-gradient(var(--_bg) 30%, transparent) center top / 100% 2rem no-repeat local, linear-gradient(transparent, var(--_bg) 70%) center bottom / 100% 2rem no-repeat local, radial-gradient(farthest-side at 50% 0, color-mix(in oklab, var(--mn-fg) 14%, transparent), transparent) center top / 100% .6rem no-repeat scroll, radial-gradient(farthest-side at 50% 100%, color-mix(in oklab, var(--mn-fg) 14%, transparent), transparent) center bottom / 100% .6rem no-repeat scroll, var(--_bg); } .mn-scroll-area:focus-visible { outline: none; box-shadow: var(--mn-focus); } .mn-scroll-area::-webkit-scrollbar { width: 8px; height: 8px; } .mn-scroll-area::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in oklab, var(--mn-fg) 25%, transparent) padding-box; } .mn-scroll-area-x { max-height: none; overflow-y: hidden; white-space: nowrap; } ``` --- # Mockup · MIAN Browser, window and phone frames for screenshots, demos and landing pages. - Id: `mockup` · Category: Layout & utilities · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/mockup - Use for: browser frame, phone mockup, app screenshot frame, device frame. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-mockup-browser`: A browser window: mn-mockup-bar (with mn-mockup-url) and mn-mockup-body. - `mn-mockup-window`: A terminal/code window. - `mn-mockup-phone`: A phone frame with mn-mockup-screen inside; --_w sets the width. ## Accessibility - Frames are decoration: the content inside must make sense on its own. If a frame only holds an image, give the image good alt text. ## Examples ### Browser ```html

mian.ro

Interfaces cooked differently.

``` ### Window and phone ```html

zsh

$ curl -O https://mian.ro/r/calendar.json ✓ calendar.json saved

Mian
``` ## Source CSS ```css .mn-mockup-browser, .mn-mockup-window { width: 100%; overflow: hidden; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); box-shadow: var(--mn-shadow-lg); } .mn-mockup-bar { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-bottom: var(--mn-border-w) solid var(--mn-border); background: var(--mn-surface-2); } .mn-mockup-bar::before { content: ""; flex: none; width: 2.6rem; height: .7rem; background: radial-gradient(circle, var(--mn-input) 0 .3rem, transparent .32rem) 0 0 / .95rem .7rem repeat-x; } .mn-mockup-url { flex: 1; min-width: 0; max-width: 28rem; margin-inline: auto; padding: .3rem .75rem; border-radius: 999px; background: var(--mn-card); color: var(--mn-muted); font: 400 .75rem/1.2 var(--mn-font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mn-mockup-body { padding: 1.25rem; } .mn-mockup-window .mn-mockup-body { background: var(--mn-fg); color: var(--mn-bg); font: 400 .8125rem/1.7 var(--mn-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; } .mn-mockup-window .mn-mockup-bar { justify-content: flex-start; color: var(--mn-muted); font: 500 .75rem/1 var(--mn-font); } .mn-mockup-phone { --_w: 17rem; position: relative; width: min(var(--_w), 100%); aspect-ratio: 9 / 19; padding: .6rem; border-radius: 2.6rem; background: var(--mn-fg); box-shadow: var(--mn-shadow-lg); } .mn-mockup-phone::before { content: ""; position: absolute; z-index: 1; top: 1.05rem; left: 50%; width: 30%; height: 1.35rem; translate: -50% 0; border-radius: 999px; background: var(--mn-fg); } .mn-mockup-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 2.05rem; background: var(--mn-bg); color: var(--mn-fg); } ``` --- # Dashboard grid · MIAN A twelve-track grid for dashboards and a widget frame: title, period, body, footer. It lays out for the width it gets, so it works beside a sidebar. - Id: `dashboard` · Category: Layout & utilities · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/dashboard - Use for: dashboard layout, dashboard grid, widget panel, admin overview page, analytics overview. - Alternatives: app-shell, bento. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-dash`: The grid: one column, then halves, then twelve tracks. - `mn-dash-3 · -4 · -5 · -6 · -7 · -8 · -9`: How many of twelve tracks a child spans on wide containers. Without one, a child spans the full row. - `mn-widget`: A panel. Add mn-card for the surface. - `mn-widget-head`: Title on the left, a control (period, menu) on the right. - `mn-widget-title · mn-widget-sub`: Heading and one line under it. - `mn-widget-body`: Content. mn-widget-flush on the widget removes the side padding (tables, lists). - `mn-widget-foot`: A footer line: a link to the full report, or when the data was updated. ## Accessibility - Each widget is a
with a real heading, so it appears in the page outline. - Order widgets in the source by importance; the grid only changes how wide they are. - Say when the data was last updated, in text. ## Examples ### Overview ```html

Orders
Last 12 weeks

Updated 4 minutes agoFull report

Fulfilment

86%
shipped within 24 hours · target 90%

Needs attention
3

Order Issue Age
#48213 Address not found 2 d
#48190 Payment review 1 d
#48177 Out of stock: 1 item 6 h

Sales by channel

Own shop€26,03054%
Marketplace€13,02027%
Wholesale€6,27013%
Other€2,8906%

``` ## Source CSS ```css .mn-dash { container: mn-dash / inline-size; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--mn-gap, 1rem); } .mn-dash > * { grid-column: span 12; min-width: 0; } @container mn-dash (min-width: 38rem) { .mn-dash > :is(.mn-dash-3, .mn-dash-4, .mn-dash-6) { grid-column: span 6; } } @container mn-dash (min-width: 62rem) { .mn-dash > .mn-dash-3 { grid-column: span 3; } .mn-dash > .mn-dash-4 { grid-column: span 4; } .mn-dash > .mn-dash-5 { grid-column: span 5; } .mn-dash > .mn-dash-7 { grid-column: span 7; } .mn-dash > .mn-dash-8 { grid-column: span 8; } .mn-dash > .mn-dash-9 { grid-column: span 9; } } .mn-widget { display: flex; flex-direction: column; min-width: 0; } .mn-widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .95rem 1.15rem .2rem; } .mn-widget-title { margin: 0; font: 600 .9375rem/1.35 var(--mn-font); color: var(--mn-fg); } .mn-widget-sub { margin: .1rem 0 0; color: var(--mn-muted); font-size: .8125rem; } .mn-widget-body { flex: 1; min-width: 0; padding: .8rem 1.15rem 1.15rem; } .mn-widget-flush > .mn-widget-body { padding: .5rem 0 0; } .mn-widget-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1.15rem; border-top: var(--mn-border-w) solid var(--mn-border); color: var(--mn-muted); font-size: var(--mn-text-sm); } ``` --- # Gradient backdrop · MIAN Soft mesh gradients for a band, a hero or a media frame. By default they are mixed from the noodle’s own colours, so they follow the noodle and the mode; eight named palettes are there when you want a fixed mood. - Id: `gradient` · Category: Layout & utilities · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/gradient - Use for: gradient background, mesh gradient, hero backdrop, colour wash, grain texture, aurora background. - Alternatives: media. - Avoid: Never a purple-to-blue wash behind a centred headline, and never gradient-filled text. One gradient per page, as a backdrop or a media frame. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-gradient`: A four-point mesh from the noodle’s primary, accent, info and success colours, at a strength that keeps text readable. - `mn-gradient-aurora · -dawn · -tide · -ember · -moss · -dusk · -steel · -sand`: Named palettes. - `mn-gradient-vivid`: Full strength. For artwork and media frames, not behind body text. - `mn-gradient-linear · mn-gradient-conic`: A two-colour sweep or a conic sweep instead of a mesh. --g-angle sets the direction. - `mn-gradient-animate`: A slow drift (26 s). Stops under reduced motion. - `mn-gradient-flow`: Soft blurred shapes that turn and breathe slowly, like light through liquid. Add mn-gradient-still to freeze it. Stops under reduced motion. - `mn-gradient-halo · -lagoon · -citrus · -nightfall`: Three- and four-colour palettes made for the flowing variant. - `mn-gridlines`: A fine grid of lines as a backdrop; --grid sets the cell size. - `mn-grain`: A fine film grain over the element, which breaks up banding. - `--g1 … --g4 · --g-mix`: Your own four colours and the strength (default 24%). ## Accessibility - Text on the default strength keeps the noodle’s contrast; with mn-gradient-vivid put text on a surface (a card) or check the pair yourself. - A gradient is decoration: never let it carry meaning. - The drift is slow and stops under prefers-reduced-motion. ## Examples ### From the noodle Change the noodle above and the wash changes with it. ```html

Quarterly review
The wash is mixed from this noodle’s primary, accent, info and success colours at 24%, so the text keeps its contrast.

``` ### Named palettes ```html

mn-gradient-aurora

mn-gradient-dawn

mn-gradient-tide

mn-gradient-ember

mn-gradient-moss

mn-gradient-dusk

mn-gradient-steel

mn-gradient-sand

``` ### Flowing Blurred shapes that move slowly. Use one per page, behind a short statement. ```html

mn-gradient-flow mn-gradient-halo

mn-gradient-flow mn-gradient-lagoon

mn-gradient-flow mn-gradient-citrus

mn-gradient-flow mn-gradient-nightfall

``` ### Drifting, behind a card ```html

Text sits on a surface
At full strength the backdrop is artwork. Put words on an opaque surface.

``` ## Source CSS ```css .mn-gradient { --g1: var(--mn-primary); --g2: var(--mn-accent); --g3: var(--mn-info); --g4: var(--mn-success); --g-mix: 24%; --g-base: var(--mn-bg); position: relative; isolation: isolate; background-color: var(--g-base); background-image: radial-gradient(80% 110% at 6% 0%, color-mix(in oklab, var(--g1) var(--g-mix), transparent), transparent 75%), radial-gradient(70% 100% at 98% 8%, color-mix(in oklab, var(--g2) var(--g-mix), transparent), transparent 72%), radial-gradient(90% 100% at 72% 112%, color-mix(in oklab, var(--g3) var(--g-mix), transparent), transparent 75%), radial-gradient(65% 90% at 12% 104%, color-mix(in oklab, var(--g4) var(--g-mix), transparent), transparent 72%); } .mn-gradient-vivid { --g-mix: 88%; --g-base: color-mix(in oklab, var(--g2) 50%, var(--g4)); } .mn-gradient-aurora { --g1: #2bd4a4; --g2: #3d8bfd; --g3: #b6e84a; --g4: #19b8d6; } .mn-gradient-dawn { --g1: #ff9a6c; --g2: #ffc75f; --g3: #f76d8e; --g4: #ffd9b0; } .mn-gradient-tide { --g1: #0b5cad; --g2: #12a5b8; --g3: #0a3d7a; --g4: #55d3c8; } .mn-gradient-ember { --g1: #e2432c; --g2: #f59e0b; --g3: #a61e2b; --g4: #ff7a3d; } .mn-gradient-moss { --g1: #6f8f3a; --g2: #d6c48a; --g3: #2f6b4f; --g4: #a7b86a; } .mn-gradient-dusk { --g1: #7a2f4f; --g2: #e07a5f; --g3: #1f3358; --g4: #c9596b; } .mn-gradient-steel { --g1: #6b7c93; --g2: #a9b6c6; --g3: #3d4c63; --g4: #8fa3b8; } .mn-gradient-sand { --g1: #d9c3a0; --g2: #e9d9c0; --g3: #b89b72; --g4: #cdb893; } .mn-gradient-linear { background-image: linear-gradient(var(--g-angle, 135deg), color-mix(in oklab, var(--g1) var(--g-mix), var(--mn-bg)), color-mix(in oklab, var(--g2) var(--g-mix), var(--mn-bg))); } .mn-gradient-conic { background-image: conic-gradient(from var(--g-angle, 210deg) at 60% 55%, color-mix(in oklab, var(--g1) var(--g-mix), var(--mn-bg)), color-mix(in oklab, var(--g2) var(--g-mix), var(--mn-bg)), color-mix(in oklab, var(--g3) var(--g-mix), var(--mn-bg)), color-mix(in oklab, var(--g4) var(--g-mix), var(--mn-bg)), color-mix(in oklab, var(--g1) var(--g-mix), var(--mn-bg))); } .mn-gradient-animate { background-size: 170% 170%; animation: mn-gradient-drift 26s ease-in-out infinite alternate; } @keyframes mn-gradient-drift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 40%; } 100% { background-position: 30% 100%; } } .mn-grain::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: var(--grain, .28); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); } .mn-grain { position: relative; isolation: isolate; } @media (prefers-reduced-motion: reduce) { .mn-gradient-animate { animation: none; } } ``` --- # Motion · MIAN A small motion system: three durations, three curves, the noodle’s own entrance for anything you add, staggered lists, press and lift feedback, drawn lines, counted numbers and cross-faded changes. All of it stops under reduced motion. - Id: `motion` · Category: Layout & utilities · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/motion - Use for: animation, entrance animation, staggered list, hover lift, count up number, page transition, micro interactions. - Avoid: Do not fade sections in on scroll and do not animate everything. Motion explains a change: something arrived, moved or was pressed. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `--mn-dur-fast · --mn-dur · --mn-dur-slow`: 120, 200 and 360 ms: feedback, state change, layout change. - `--mn-ease-out · --mn-ease-in-out · --mn-ease-spring`: Arriving, moving across the screen, and a soft overshoot for playful noodles. - `mn-enter`: Plays the current noodle’s entrance once, when the element is added. - `mn-stagger`: On a container: its first eight children enter 45 ms apart (--mn-stagger-step). - `mn-press`: Shrinks to 97% while pressed. - `mn-lift`: Rises 2px with a shadow on hover, for whole-card links. - `mn-draw`: On an SVG path with pathLength="1": draws the line in. - `data-mn-count`: Counts up to the element’s own number once, when first seen. - `Mian.transition(fn)`: Runs a DOM change inside a view transition, so it cross-fades. Mian.setNoodle and Mian.setMode use it. ## Accessibility - Everything here is disabled by prefers-reduced-motion: reduce; nothing depends on an animation finishing. - Animate to explain a change (something arrived, moved, was pressed), not to decorate. Do not fade sections in as the reader scrolls. - Keep motion under 400 ms and never loop it near text. - Counted numbers keep their final value in the DOM, so assistive technology never reads a partial count. ## Examples ### Entrance and stagger Press the button: the list is re-inserted and enters in this noodle’s own style. ```html

Invoice sent
Reminder scheduled
Payment received
Receipt emailed

``` ### Press, lift and count ```html
Orders today
1,284
``` ## Source CSS ```css .mn-enter { animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter) both; } .mn-stagger > * { animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter) both; animation-delay: calc(var(--mn-stagger-step, 45ms) * var(--i, 8)); } .mn-stagger > :nth-child(1) { --i: 0; } .mn-stagger > :nth-child(2) { --i: 1; } .mn-stagger > :nth-child(3) { --i: 2; } .mn-stagger > :nth-child(4) { --i: 3; } .mn-stagger > :nth-child(5) { --i: 4; } .mn-stagger > :nth-child(6) { --i: 5; } .mn-stagger > :nth-child(7) { --i: 6; } .mn-stagger > :nth-child(8) { --i: 7; } .mn-press { transition: scale var(--mn-dur-fast) var(--mn-ease-out); } .mn-press:active { scale: .97; } @media (hover: hover) { .mn-lift { transition: translate var(--mn-dur) var(--mn-ease-out), box-shadow var(--mn-dur) var(--mn-ease-out); } .mn-lift:hover { translate: 0 -2px; box-shadow: var(--mn-shadow-md); } } .mn-draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: mn-draw var(--mn-dur-draw, 900ms) var(--mn-ease-out) both; } @keyframes mn-draw { from { stroke-dashoffset: 1; } } @keyframes mn-vt-out { to { opacity: 0; } } @keyframes mn-vt-in { from { opacity: 0; } } html.mn-vt::view-transition-old(root) { animation: mn-vt-out 140ms var(--mn-ease-out) both; } html.mn-vt::view-transition-new(root) { animation: mn-vt-in 240ms var(--mn-ease-out) both; } @media (prefers-reduced-motion: reduce) { .mn-enter, .mn-stagger > *, .mn-draw { animation: none; } .mn-press, .mn-lift { transition: none; } .mn-press:active { scale: none; } .mn-lift:hover { translate: none; } } } @layer mian.components { ``` ## Source JS (excerpt of mian.js) ```js /* Mian.transition(update): runs a DOM update inside a view transition, so the change cross-fades instead of snapping. Falls back to a plain call where the API is missing or the reader prefers reduced motion. €45,231 counts up to its own text once, the first time it is seen. The final text stays in the DOM for assistive tech. */ const calm = () => matchMedia('(prefers-reduced-motion: reduce)').matches; Mian.transition = (update) => { if (!document.startViewTransition || calm() || document.visibilityState !== 'visible') { update(); return null; } const root = document.documentElement; root.classList.add('mn-vt'); let vt; try { vt = document.startViewTransition(update); } catch (_) { root.classList.remove('mn-vt'); update(); return null; } vt.finished.finally(() => root.classList.remove('mn-vt')); return vt; }; function countUp(el) { const text = el.textContent, m = text.match(/-?\d[\d.,\s]*\d|\d/); if (!m || calm()) return; const raw = m[0], decimal = /[.,]\d{1,2}$/.exec(raw); const sep = decimal ? decimal[0][0] : '', digits = decimal ? decimal[0].length - 1 : 0; const group = (raw.replace(decimal ? decimal[0] : '', '').match(/[.,\s]/) || [''])[0]; const target = Number(raw.replace(decimal ? decimal[0] : '', '').replace(/[.,\s]/g, '') + (decimal ? '.' + decimal[0].slice(1) : '')); if (!isFinite(target)) return; const fmtN = (v) => { const [a, b] = v.toFixed(digits).split('.'); return a.replace(/\B(?=(\d{3})+(?!\d))/g, group) + (digits ? sep + b : ''); }; const pre = text.slice(0, m.index), post = text.slice(m.index + raw.length); el.setAttribute('aria-label', text.trim()); const t0 = performance.now(), dur = 700; const step = (t) => { const k = Math.min(1, (t - t0) / dur), e = 1 - Math.pow(1 - k, 4); el.textContent = pre + fmtN(target * e) + post; if (k < 1) requestAnimationFrame(step); else { el.textContent = text; el.removeAttribute('aria-label'); } }; requestAnimationFrame(step); } register('motion', (root) => each(root, '[data-mn-count]', 'Count', (el) => { if (!('IntersectionObserver' in window)) return; const io = new IntersectionObserver((entries) => { if (entries.some((x) => x.isIntersecting)) { io.disconnect(); countUp(el); } }, { threshold: .6 }); io.observe(el); })); ``` --- # Slides · MIAN A presentation website: full-height slides that snap, with arrow-key navigation, a counter and progress. - Id: `slides` · Category: Sections · Needs mian.js: yes · License: MIAN License (free to use) - Docs: https://mian.ro/components/slides - Use for: presentation website, pitch deck, keynote, slides, investor deck, one idea per screen. - On a page: frame · prominence high · density low. - Alternatives: article. - Avoid: Paragraphs on slides; decks that only work with a clicker. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-deck`: The wrapper for the slides, the bar and the progress line. - `mn-slides`: The scrolling deck (focusable, with an aria-label). --h sets its height (default 100dvh). - `mn-slide`: A slide; mn-slide-center centres it. - `mn-deck-bar`: Counter ([data-mn-slide-count]) and prev/next buttons (data-mn-slide="prev|next"). - `mn-deck-progress`: A thin progress line at the top. ## Accessibility - The deck is focusable with an aria-label; arrow keys, Page Up/Down, Space, Home and End move between slides. - Each slide gets aria-roledescription="slide" and a “3 of 8” label; the counter is visible text. - Scroll snapping stays usable with a mouse wheel, touch and assistive tech: nothing is hidden. ## Examples ### Deck ```html

Series A · 2026
Close the books in four days.
Ledger, for finance teams of 5 to 500.

The problem
Month-end takes 14 days. 10 of them are data entry.

Customers
1,400
ARR
€8.2 M
Net retention
131%

1 / 3

``` ## Source CSS ```css .mn-deck { position: relative; } .mn-slides { container: mn / inline-size; height: var(--h, 100dvh); overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scroll-behavior: smooth; scrollbar-width: none; } .mn-slides::-webkit-scrollbar { display: none; } .mn-slides:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: -2px; } .mn-slide { display: grid; align-content: center; gap: 1.5rem; min-height: 100%; padding: clamp(1.5rem, 7cqi, 6rem); scroll-snap-align: start; scroll-snap-stop: always; } .mn-slide > * { margin: 0; } .mn-slide-center { justify-items: center; text-align: center; } .mn-deck-bar { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: flex; align-items: center; gap: .35rem; padding: .3rem .3rem .3rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--mn-surface) 88%, transparent); box-shadow: var(--mn-shadow-md); color: var(--mn-muted); font: 500 .8125rem/1 var(--mn-font); font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .mn-deck-progress { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 3px; background: color-mix(in oklab, var(--mn-fg) 8%, transparent); } .mn-deck-progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--_v, 0%); background: var(--mn-primary); transition: width 300ms var(--mn-ease); } @media (prefers-reduced-motion: reduce) { .mn-slides { scroll-behavior: auto; } } ``` ## Source JS (excerpt of mian.js) ```js /*

…
…
Arrow keys, Page Up/Down, Space, Home and End move between slides; a counter ([data-mn-slide-count]) and a progress bar (.mn-deck-progress) follow the slide in view; buttons with data-mn-slide="next|prev" step. Emits mn:change { index, total } on the deck. */ register('slides', (root) => { each(root, '.mn-slides', 'Deck', (deck) => { const slides = () => [...deck.querySelectorAll(':scope > .mn-slide')]; const wrap = deck.closest('.mn-deck') || deck.parentElement; let index = 0; const horizontal = getComputedStyle(deck).scrollSnapType.startsWith('x'); const go = (i) => { const s = slides(); i = Math.max(0, Math.min(s.length - 1, i)); const t = s[i]; if (!t) return; deck.scrollTo({ [horizontal ? 'left' : 'top']: horizontal ? t.offsetLeft - deck.offsetLeft : t.offsetTop - deck.offsetTop, behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' }); }; const update = (i) => { index = i; const total = slides().length; slides().forEach((s, k) => { s.setAttribute('aria-roledescription', 'slide'); s.setAttribute('aria-label', `${k + 1} of ${total}`); }); wrap.querySelectorAll('[data-mn-slide-count]').forEach((c) => { c.textContent = `${i + 1} / ${total}`; }); wrap.querySelector('.mn-deck-progress')?.style.setProperty('--_v', `${((i + 1) / total) * 100}%`); wrap.querySelectorAll('[data-mn-slide="prev"]').forEach((b) => { b.disabled = i === 0; }); wrap.querySelectorAll('[data-mn-slide="next"]').forEach((b) => { b.disabled = i === total - 1; }); emit(deck, 'change', { index: i, total }); }; if ('IntersectionObserver' in window) { const io = new IntersectionObserver((entries) => { for (const en of entries) if (en.isIntersecting && en.intersectionRatio >= .6) update(slides().indexOf(en.target)); }, { root: deck, threshold: [.6] }); slides().forEach((s) => io.observe(s)); } deck.addEventListener('keydown', (e) => { if (e.target !== deck && e.target.closest('input, textarea, select, [contenteditable]')) return; const map = { ArrowDown: 1, ArrowRight: 1, PageDown: 1, ' ': 1, ArrowUp: -1, ArrowLeft: -1, PageUp: -1 }; if (e.key in map) { e.preventDefault(); go(index + (e.shiftKey && e.key === ' ' ? -1 : map[e.key])); } else if (e.key === 'Home') { e.preventDefault(); go(0); } else if (e.key === 'End') { e.preventDefault(); go(slides().length - 1); } }); wrap.addEventListener('click', (e) => { const b = e.target.closest('[data-mn-slide]'); if (!b) return; go(index + (b.dataset.mnSlide === 'next' ? 1 : -1)); }); update(0); }); }); ``` --- # Jobs list · MIAN Open roles for a careers page: title, team, location and type, the whole row one link. - Id: `jobs` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/jobs - Use for: careers page, open positions, job listings, we are hiring, vacancies. - On a page: catalogue · prominence medium · density medium. - Alternatives: list, table. - Avoid: Roles without location, remote policy or team. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-jobs`: The list (
). - `mn-job`: A role: mn-job-title (with the link), mn-job-meta (badges), an arrow icon. ## Accessibility - Only the title is a link, stretched over the row, so each role is one tab stop with a clear name. - Write location and remote policy as text, not only icons. ## Examples ### Open roles ```html

Senior product designer
DesignBerlin or remote (EU)Full-time

Backend engineer, reconciliation
EngineeringCluj-NapocaFull-time

Customer success lead
CustomersRemote (CET ±2)Full-time

Finance intern
FinanceBerlin6 months

``` ## Source CSS ```css .mn-jobs { margin: 0; padding: 0; list-style: none; border-top: var(--mn-border-w) solid var(--mn-border); } .mn-job { position: relative; display: grid; gap: .45rem 1.5rem; padding: 1.15rem 2rem 1.15rem 0; border-bottom: var(--mn-border-w) solid var(--mn-border); } .mn-job > * { margin: 0; min-width: 0; } .mn-job-title { font: 600 1.0625rem/1.35 var(--mn-font-heading); letter-spacing: -.01em; } .mn-job-title a { color: var(--mn-fg); text-decoration: none; } .mn-job-title a::after { content: ""; position: absolute; inset: 0; } .mn-job-title a:focus-visible { outline: none; } .mn-job:has(.mn-job-title a:focus-visible) { outline: 2px solid var(--mn-ring); outline-offset: 2px; border-radius: var(--mn-radius-field); } .mn-job:hover .mn-job-title a { text-decoration: underline; text-underline-offset: 4px; } .mn-job-meta { display: flex; flex-wrap: wrap; gap: .4rem; } .mn-job > svg { position: absolute; right: 0; top: 50%; width: 1.1rem; height: 1.1rem; translate: 0 -50%; color: var(--mn-muted); transition: translate var(--mn-duration) var(--mn-ease); } .mn-job:hover > svg { translate: 4px -50%; color: var(--mn-fg); } @container mn (min-width: 44rem) { .mn-job { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } } ``` --- # Work grid · MIAN Selected projects for an agency or portfolio in mixed sizes: the image, client, what was made and the outcome, each tile one link. - Id: `work-grid` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/work-grid - Use for: portfolio projects, show four portfolio projects, case studies grid, selected work, agency work, client projects. - On a page: showcase · prominence high · density medium. Usually after: hero. Usually before: feature-grid, process, testimonial. - Alternatives: bento, story-card. - Avoid: Twelve small thumbnails, or tiles without client and outcome. Four to six projects, mixed sizes. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-work`: The grid: one column, then two, then six tracks. - `mn-work-item`: A project (
); the title link covers it. Spans 3 of 6. - `mn-work-wide · mn-work-narrow · mn-work-full`: Span 4, 2 or 6 of 6 tracks. Pair a wide tile with a narrow one. - `mn-work-media`: The image in a fixed ratio. - `mn-work-client`: Client and year, small. - `mn-work-outcome`: One line of result, in plain words. ## Accessibility - Each project is an article whose heading is the link, so the list of links reads as project names. - The image is decorative when the title says the same; otherwise give it alt text describing the work. - Do not rely on hover to reveal the title or client. ## Examples ### Selected work ```html

Selected work

Transilvania Rail · 2026
A timetable people can read on a platform
Ticket questions at stations down by a third in six months.

Muzeul Satului · 2025
An archive of 300 houses
Opened to schools across Romania.

Halden Audio · 2025
Identity for a speaker maker
Launched in 11 countries.

Orto · 2024
Ordering for 140 farms
Orders placed a week earlier on average.

``` ## Source CSS ```css .mn-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5cqi, 3.5rem) clamp(1.25rem, 3cqi, 2rem); } @container mn (min-width: 40rem) { .mn-work { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-work-full { grid-column: 1 / -1; } } @container mn (min-width: 62rem) { .mn-work { grid-template-columns: repeat(6, minmax(0, 1fr)); } .mn-work-item { grid-column: span 3; } .mn-work-wide { grid-column: span 4; } .mn-work-narrow { grid-column: span 2; } .mn-work-full { grid-column: 1 / -1; } } .mn-work-item { position: relative; display: grid; gap: .35rem; align-content: start; min-width: 0; } .mn-work-media { aspect-ratio: 4 / 3; margin-bottom: .75rem; overflow: hidden; border-radius: var(--mn-radius-box); background: var(--mn-surface-2); } .mn-work-wide .mn-work-media, .mn-work-full .mn-work-media { aspect-ratio: 16 / 10; } @container mn (min-width: 62rem) { .mn-work-narrow .mn-work-media { aspect-ratio: 4 / 5.2; } } .mn-work-media > svg, .mn-work-media > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale calc(var(--mn-duration) * 3) var(--mn-ease); } .mn-work-item:hover .mn-work-media > * { scale: 1.02; } .mn-work-client { margin: 0; color: var(--mn-muted); font-size: var(--mn-text-sm); } .mn-work-title { margin: 0; font: var(--mn-heading-weight) clamp(1.125rem, 2.2cqi, 1.5rem)/1.25 var(--mn-font-heading); letter-spacing: -.01em; text-wrap: balance; } .mn-work-title a { color: var(--mn-fg); text-decoration: none; } .mn-work-title a::after { content: ""; position: absolute; inset: 0; } .mn-work-title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .mn-work-outcome { margin: 0; color: var(--mn-muted); line-height: 1.55; } ``` --- # Comparison table · MIAN Plans or products side by side: grouped feature rows, included and not-included marks, a highlighted column and a sticky header. - Id: `comparison` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/comparison - Use for: compare plans, feature comparison table, plan matrix, versus competitors, which plan. - On a page: decision · prominence medium · density high. Usually after: pricing. Usually before: faq, cta. - Alternatives: pricing, table. - Avoid: Comparing against named competitors without facts you can back up. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-compare`: The table (inside mn-table-wrap). Header row sticks while scrolling. - `mn-compare-group`: A row that names a group of features (a ). - `mn-compare-featured`: On the or cells of the plan to highlight. - `mn-compare-yes · mn-compare-no`: Included / not included marks, with text for screen readers. ## Accessibility - It is a real table: plans are column headers, features are row headers, so each cell is announced as “Team, Audit log, Included”. - Marks carry visually hidden text; never rely on the tick alone. - On narrow screens the table scrolls inside mn-table-wrap with the feature column kept visible. ## Examples ### Compare plans ```html
Plan comparison
Feature Starter€0 Team€12 / seat Business€29 / seat

Books

Entities 1 5 Unlimited

Bank feeds Included Included Included

Multi-currency Not included Included Included

Control

Approval flows Not included Included Included

Audit log Not included 90 days Unlimited

SSO Not included Not included Included

``` ## Source CSS ```css .mn-compare { min-width: 36rem; } .mn-compare thead th { position: sticky; top: 0; z-index: 1; background: var(--mn-surface); vertical-align: bottom; font: var(--mn-heading-weight) 1rem/1.3 var(--mn-font-heading); } .mn-compare thead th small { display: block; margin-top: .15rem; color: inherit; font: 400 var(--mn-text-sm) var(--mn-font); font-variant-numeric: tabular-nums; } .mn-compare tbody th[scope="row"] { font-weight: 400; color: var(--mn-fg); } .mn-compare th[scope="row"], .mn-compare thead th:first-child { position: sticky; left: 0; background: var(--mn-surface); } .mn-compare td { text-align: center; font-variant-numeric: tabular-nums; } .mn-compare thead th:not(:first-child) { text-align: center; } .mn-compare .mn-compare-featured { background: color-mix(in oklab, var(--mn-primary) 7%, var(--mn-surface)); } .mn-compare-group th { padding-top: 1.25rem; background: none; color: var(--mn-muted); font: 600 .75rem/1 var(--mn-font); letter-spacing: .06em; text-transform: uppercase; text-align: start; } .mn-compare-yes { display: inline-grid; place-items: center; color: var(--mn-primary-text); } .mn-compare-yes svg { width: 1.1rem; height: 1.1rem; } .mn-compare-no { display: inline-block; width: .8rem; height: 2px; vertical-align: middle; background: var(--mn-input); } ``` --- # Changelog · MIAN Release notes by date: version, a headline, and changes tagged New, Improved or Fixed. - Id: `changelog` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/changelog - Use for: release notes, changelog, what is new, product updates, version history. - On a page: content · prominence low · density medium. - Alternatives: timeline. - Avoid: Marketing copy instead of what changed. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-changelog`: The list of releases. - `mn-release`: One release (
): the date column and the notes. - `mn-release-meta`: Date () and version. - `mn-change`: A change line; the tag is a badge with a colour role. ## Accessibility - Each release is an article with a heading; dates are elements. - Tags are words (“Fixed”), coloured as a second signal only. ## Examples ### Release notes ```html

24 Sep 20261.6.0

Bank rules that learn from you
Categorise a transaction twice and the third one is done for you.

New Rules suggested from your last 90 days
Improved Reconciliation is 2× faster for accounts with 10,000+ lines
Fixed VAT rounding on credit notes in RON

2 Sep 20261.5.2

Exports your accountant asked for
New SAF-T export for Romanian companies
Fixed CSV dates in the wrong locale

``` ## Source CSS ```css .mn-changelog { display: grid; border-top: var(--mn-border-w) solid var(--mn-border); } .mn-release { container: mn-release / inline-size; display: grid; gap: .75rem 2rem; padding: 1.75rem 0; border-bottom: var(--mn-border-w) solid var(--mn-border); } @container mn (min-width: 40rem) { .mn-release { grid-template-columns: 11rem minmax(0, 1fr); } } .mn-release-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; align-content: start; color: var(--mn-muted); font-size: var(--mn-text-sm); font-variant-numeric: tabular-nums; } .mn-release h3 { margin: 0 0 .4rem; font: var(--mn-heading-weight) 1.25rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; color: var(--mn-fg); } .mn-release p { margin: 0 0 .75rem; color: var(--mn-muted); max-width: 42rem; } .mn-release ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; } .mn-change { display: flex; align-items: baseline; gap: .6rem; line-height: 1.5; } .mn-change > .mn-badge { flex: none; min-width: 5.2rem; justify-content: center; } ``` --- # Integrations · MIAN A directory of integrations or partners: mark, name, category and one line on what it does, each tile one link. - Id: `integrations` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/integrations - Use for: integrations directory, works with, app marketplace, connectors, partners grid. - On a page: catalogue · prominence medium · density medium. Usually after: bento, feature-grid. Usually before: cta. - Alternatives: logo-cloud. - Avoid: Listing integrations that do not exist yet as if they did. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-integrations`: The grid (auto-fills columns). - `mn-integration`: A tile (
); its name is the link. - `mn-integration-mark`: The logo or initials, in a square. - `mn-integration-cat`: The category, small. ## Accessibility - Each integration is an article whose name is the link; the mark is decorative (aria-hidden). - Filter chips above the grid are toggle buttons; announce the result count. ## Examples ### Integrations ```html

Banking
Bank feeds
Daily transactions from 40 Romanian and EU banks.

Tax
e-Factura
Send and receive invoices through ANAF.

People
Payroll
Salaries and contributions booked each month.

Payments
Stripe
Card payouts matched to invoices.

Messaging
Slack
Approvals and alerts in the channel you choose.

Developers
Webhooks
Every event, signed, to your endpoint.

``` ## Source CSS ```css .mn-integrations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; } .mn-integration { position: relative; display: grid; gap: .3rem; align-content: start; padding: 1.1rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-surface); transition: border-color var(--mn-duration) var(--mn-ease); } .mn-integration:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 35%); } .mn-integration > * { margin: 0; } .mn-integration-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .5rem; border-radius: var(--mn-radius-field); background: var(--mn-surface-2); color: var(--mn-fg); font: 700 .875rem/1 var(--mn-font); } .mn-integration-cat { color: var(--mn-muted); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; } .mn-integration h3 { font: var(--mn-heading-weight) 1rem/1.3 var(--mn-font-heading); } .mn-integration h3 a { color: var(--mn-fg); text-decoration: none; } .mn-integration h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .mn-integration p:last-child { color: var(--mn-muted); font-size: var(--mn-text-sm); line-height: 1.5; } ``` --- # Contact section · MIAN The end of a company or agency page: what happens after you write, direct details, and a short form, side by side. - Id: `contact-section` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/contact-section - Use for: contact form section, get in touch, start a project, enquiry form, request a quote, agency contact. - On a page: closing · prominence high · density medium. Usually after: faq, testimonial, process. Usually before: site-footer. - Alternatives: cta. - Avoid: Long forms. Ask for name, email and a few lines; say when you will reply. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-contact`: The split: intro and details on one side, the form on the other. - `mn-contact-details`: A description list of direct ways to reach you. - `mn-contact-form`: The form (use mn-card for a surface). ## Accessibility - Every field has a visible label and autocomplete; required fields say so in text. - Say what happens after sending (“We reply within two working days”) near the button. - Direct details (email, phone) are real links so they can be used without the form. ## Examples ### Start a project ```html

Tell us what you are making.
A few lines are enough. We reply within two working days with questions or a first estimate.

Email
hello@forma.example
Studio
Str. Popa Nan 12, Bucharest
Hours
Mon–Fri, 9:00–18:00 EET

Name
Email

Budget

About the project

``` ## Source CSS ```css .mn-contact { display: grid; gap: clamp(2rem, 5cqi, 4rem); align-items: start; } @container mn (min-width: 52rem) { .mn-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } } .mn-contact-details { display: grid; gap: .9rem; margin: .5rem 0 0; } .mn-contact-details > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding-top: .9rem; border-top: var(--mn-border-w) solid var(--mn-border); } .mn-contact-details dt { color: var(--mn-muted); font-size: var(--mn-text-sm); } .mn-contact-details dd { margin: 0; overflow-wrap: anywhere; } ``` --- # Page layout · MIAN Containers, section rhythm, display type and grids, the frame every page is built in. - Id: `layout` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/layout - Use for: page structure, section spacing, two column split, content width, grid columns, container, display headline, eyebrow label. - On a page: frame · prominence low · density low. - Avoid: Do not add your own container, max-width or section padding CSS, mn-section and mn-container already set the rhythm. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-site`: On : a full-height column so the footer sits at the bottom. - `mn-skip`: A “Skip to content” link, visible on focus. Point it at
. - `mn-container`: Centred content width with side gutters. mn-container-narrow (46rem) · mn-container-wide (88rem). --mn-container sets it. - `mn-section`: A band of the page with vertical rhythm (--mn-section-space) and a container for queries. mn-section-sm · mn-section-flush (no top padding) · mn-section-muted · mn-section-bordered. - `mn-section-head`: Eyebrow, title and intro above a section. mn-section-head-center · mn-section-head-split (title left, intro right). - `mn-eyebrow`: A short label above a title. Use it on a few sections, not all. - `mn-display · mn-title · mn-subtitle`: Fluid display type for heroes, section titles and sub-titles, in the noodle’s heading font. - `mn-intro`: Intro paragraph, fluid size, 38em measure. - `mn-cols mn-cols-2|3|4`: Equal columns that collapse on narrow sections. - `mn-split`: Two columns (text + media). mn-split-start / mn-split-end make one side wider, mn-split-reverse swaps them, mn-split-top aligns to the top. - `mn-grid`: Auto-filling grid; --mn-min sets the smallest column (default 16rem). - `--mn-container · --mn-gutter · --mn-section-space`: Page-level tokens. Override on :root or any noodle. ## Accessibility - Use one
per page (usually the hero’s mn-display) and keep heading levels in order: mn-title is for
. - Landmarks:
,
,
; name repeated
s with aria-label. - Put mn-skip as the first element of . - Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview. ## Examples ### Section head and split ```html

Close in four days
Month-end without the spreadsheet relay.

Reconciliations run every night, so the last week of the month is review, not data entry.

Every account, matched overnight
Bank feeds, card processors and payroll arrive at 02:00 and are matched against the ledger before anyone logs in.

Photo: the reconciliation screen on a laptop, three-quarter angle

``` ### Columns ```html

01: Connect
Link banks, cards and payroll in ten minutes.

02: Match
Rules learn from every approval you make.

03: Close
Export an audit trail your accountant signs off.

``` ## Source CSS ```css :root, [data-noodle] { --mn-container: 74rem; --mn-gutter: clamp(1.25rem, 4.5vw, 2.5rem); --mn-section-space: clamp(4.5rem, 9vw, 8rem); } .mn-site { display: flex; flex-direction: column; min-height: 100dvh; margin: 0; } .mn-site > main { flex: 1 0 auto; } .mn-skip { position: absolute; left: .75rem; top: -5rem; z-index: 100; padding: .6rem 1rem; border-radius: var(--mn-radius-field); background: var(--mn-primary); color: var(--mn-primary-fg); font-weight: 600; text-decoration: none; } .mn-skip:focus { top: .75rem; outline: none; box-shadow: var(--mn-focus); } .mn-container { container: mn / inline-size; width: min(100% - 2 * var(--mn-gutter), var(--mn-container)); margin-inline: auto; } .mn-container-narrow { --mn-container: 46rem; } .mn-container-wide { --mn-container: 88rem; } .mn-section { container: mn / inline-size; padding-block: var(--mn-section-space); } .mn-section-sm { padding-block: calc(var(--mn-section-space) * .55); } .mn-section-flush { padding-top: 0; } .mn-section-muted { background-color: var(--mn-surface-2); } .mn-section-bordered { border-top: var(--mn-border-w) solid var(--mn-border); } .mn-section-head { display: grid; gap: 1rem; max-width: 44rem; margin-bottom: clamp(2.25rem, 5cqi, 4rem); } .mn-section-head > *, .mn-section-head > div > * { margin: 0; } .mn-section-head > div { display: grid; gap: 1rem; align-content: start; } .mn-section-head-center { margin-inline: auto; text-align: center; justify-items: center; } @container mn (min-width: 52rem) { .mn-section-head-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; column-gap: clamp(2rem, 6cqi, 5rem); max-width: none; } } .mn-eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font: 500 .875rem/1.3 var(--mn-font); color: var(--mn-primary-text); } .mn-display, .mn-title, .mn-subtitle { margin: 0; color: var(--mn-fg); font-family: var(--mn-font-heading); font-weight: var(--mn-heading-weight); text-wrap: balance; overflow-wrap: break-word; hyphens: auto; } .mn-display { font-size: clamp(2.6rem, 1.3rem + 5.4cqi, 5.75rem); line-height: 1.02; letter-spacing: -.04em; } .mn-title { font-size: clamp(2rem, 1.35rem + 2.7cqi, 3.35rem); line-height: 1.07; letter-spacing: -.032em; } .mn-subtitle { font-size: clamp(1.25rem, 1.05rem + .9cqi, 1.6rem); line-height: 1.25; letter-spacing: -.015em; } .mn-intro { margin: 0; max-width: 38em; font-size: clamp(1.0625rem, .98rem + .55cqi, 1.3rem); line-height: 1.6; color: var(--mn-muted); text-wrap: pretty; } .mn-grid { display: grid; gap: var(--mn-gap, clamp(1rem, 2.5cqi, 1.75rem)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--mn-min, 16rem)), 1fr)); } .mn-cols { display: grid; gap: var(--mn-gap, 2rem clamp(1.5rem, 4cqi, 3rem)); grid-template-columns: minmax(0, 1fr); } @container mn (min-width: 40rem) { .mn-cols-2, .mn-cols-3, .mn-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container mn (min-width: 62rem) { .mn-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mn-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .mn-split { display: grid; gap: clamp(2rem, 6cqi, 5rem); align-items: center; } @container mn (min-width: 52rem) { .mn-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mn-split-start { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .mn-split-end { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .mn-split-reverse > :first-child { order: 2; } .mn-split-top { align-items: start; } } .mn-split > * { min-width: 0; } ``` --- # Site header · MIAN A website header: brand, navigation, actions, and a menu that works without JavaScript on small screens. - Id: `site-header` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/site-header - Use for: website navigation, top menu, logo and links, mobile menu, header with call to action. - On a page: header · prominence medium · density low. Usually before: hero. - Alternatives: navbar. - Avoid: More than five or six links, or more than one primary button. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-header`: The header. Blurred page colour with a hairline. mn-header-sticky · mn-header-plain (no background) · mn-header-center (centred nav). - `mn-header-in`: Inner row; put it on the mn-container. - `mn-header-brand`: Logo link (an SVG and a name). - `mn-header-nav`: Main links, shown when the header is at least 54rem wide. aria-current="page" marks the current one. - `mn-header-actions`: Buttons on the right. mn-header-wide hides an action when the header is narrow. - `mn-header-menu`: A
with a
button and mn-header-panel: the small-screen menu. Hidden on wide headers. - `mn-header-open · mn-header-close`: Icons inside the summary for the closed and open state. ## Accessibility - Both navs need aria-label (e.g. “Main” and “Menu”). The summary needs an aria-label such as “Menu”. -
is a native disclosure: Enter and Space open it, and screen readers announce expanded/collapsed. - Keep the brand link’s accessible name (the visible name or aria-label). - Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview. ## Examples ### Header ```html

Ledger
Product Customers Pricing Changelog

Sign in Start free

Product Customers Pricing Changelog Sign in

``` ## Source CSS ```css .mn-header { container: mn-header / inline-size; position: relative; z-index: 30; border-bottom: var(--mn-border-w) solid var(--mn-border); background: color-mix(in srgb, var(--mn-bg) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); } .mn-header-sticky { position: sticky; top: 0; } .mn-header-plain { border-bottom-color: transparent; } .mn-header-plain:not(.mn-header-sticky) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .mn-header-in { display: flex; align-items: center; gap: 1.25rem; min-height: 4rem; } .mn-header-brand { display: inline-flex; align-items: center; gap: .55rem; flex: none; color: var(--mn-fg); text-decoration: none; font: 650 1.0625rem/1 var(--mn-font-heading); letter-spacing: -.015em; white-space: nowrap; } .mn-header-brand svg { width: 1.6rem; height: 1.6rem; } .mn-header-brand:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: var(--mn-radius-field); } .mn-header-nav { display: none; align-items: center; gap: .15rem; } .mn-header-nav a, .mn-header-panel a { color: var(--mn-muted); text-decoration: none; font-weight: 500; } .mn-header-nav a { padding: .45rem .7rem; border-radius: var(--mn-radius-field); font-size: .9375rem; transition: color var(--mn-duration) var(--mn-ease); } .mn-header-nav a:hover, .mn-header-nav a[aria-current="page"] { color: var(--mn-fg); } .mn-header-nav a:focus-visible, .mn-header-panel a:focus-visible { outline: none; box-shadow: var(--mn-focus); } .mn-header-center .mn-header-nav { margin-inline: auto; } .mn-header-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; } .mn-header-center .mn-header-actions { margin-inline-start: 0; } .mn-header-menu { flex: none; } .mn-header-menu > summary { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; list-style: none; cursor: pointer; border-radius: var(--mn-radius-field); color: var(--mn-fg); } .mn-header-menu > summary::-webkit-details-marker { display: none; } .mn-header-menu > summary:hover { background: var(--mn-hover); } .mn-header-menu > summary:focus-visible { outline: none; box-shadow: var(--mn-focus); } .mn-header-menu > summary svg { width: 1.25rem; height: 1.25rem; } .mn-header-menu > summary .mn-header-close, .mn-header-menu[open] > summary .mn-header-open { display: none; } .mn-header-menu[open] > summary .mn-header-close { display: contents; } .mn-header-panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 0; padding: .5rem var(--mn-gutter) 1.5rem; max-height: calc(100dvh - 4rem); overflow: auto; border-bottom: var(--mn-border-w) solid var(--mn-border); background: var(--mn-bg); box-shadow: var(--mn-shadow-lg); animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter); } .mn-header-menu:not([open]) > .mn-header-panel { display: none; } .mn-header-panel a { padding: .9rem .25rem; border-bottom: var(--mn-border-w) solid var(--mn-border); font-size: 1.0625rem; color: var(--mn-fg); } .mn-header-panel .mn-btn { margin-top: 1rem; } @container mn-header (min-width: 54rem) { .mn-header-nav { display: flex; } .mn-header-menu { display: none; } .mn-header-in { gap: 2rem; } } @container mn-header (max-width: 34rem) { .mn-header-actions .mn-header-wide { display: none; } } @container mn-header (max-width: 24rem) { .mn-header-in { gap: .5rem; } .mn-header-brand { gap: .4rem; font-size: .9688rem; } .mn-header-brand svg { width: 1.35rem; height: 1.35rem; } .mn-header-actions { gap: .25rem; } .mn-header-actions .mn-btn:not(.mn-btn-icon) { padding-inline: .75em; } .mn-header-menu > summary { width: 2.25rem; } } @container mn-header (max-width: 18rem) { .mn-header-in { gap: .35rem; } .mn-header-menu > summary { width: 2rem; } .mn-header-actions .mn-btn:not(.mn-btn-icon) { padding-inline: .6em; } ``` --- # Hero · MIAN The opening section of a page: a display headline, an intro, actions and optional media, stacked, split or centred. - Id: `hero` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/hero - Use for: landing page opening, above the fold, headline and call to action, product introduction, homepage top, agency statement, split hero with image. - On a page: opening · prominence high · density low. Usually after: site-header. Usually before: logo-cloud, figures, bento, feature-grid, media. - Alternatives: article, figures, slides. - Avoid: Do not default to badge + giant headline + paragraph + two buttons. A statement headline alone, a split with the real product, or a figure can open better. One primary action only. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-hero`: Use with mn-section. Stacked by default: copy, then media. - `mn-hero-split`: Copy and media side by side on wide sections. - `mn-hero-center`: Centred copy. - `mn-hero-in`: Inner grid; put it on the mn-container. - `mn-hero-copy`: An
, mn-intro, mn-hero-actions, mn-hero-note. Start with the headline: no badge above it; put news in the note or a banner. - `mn-poster`: A headline sized to the width of its container, for one very large statement or a wordmark. - `mn-hero-media`: Screenshot: product UI, illustration or photo. mn-hero-media-fade fades a tall screenshot out at the bottom. ## Accessibility - The hero headline is usually the page’s only
. - Primary and secondary actions should be links () when they navigate. - Media that carries meaning needs alt text; decorative art is aria-hidden. - Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview. ## Examples ### Split hero ```html

Hand-pulled noodles, pulled to order.

Twelve seats at the counter, one broth simmered for eighteen hours, and noodles stretched in front of you.

Book a seat See the menu

Tue–Sun · 12:00–15:00, 18:00–22:30

``` ### Centred hero with product UI ```html

For finance teams of 5 to 500

Close the books in four days, not fourteen.

Ledger reconciles every account overnight and hands you the exceptions.

Start free Book a demo

September closeOn track

Account Status Unmatched
Operating · 4410 Matched €0.00
Stripe payouts Review €1,284.10

``` ## Source CSS ```css .mn-hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3.5rem, 8vw, 6.5rem); } .mn-hero-in { display: grid; gap: clamp(2.5rem, 6cqi, 4.5rem); } .mn-hero-copy { display: grid; gap: 1.5rem; justify-items: start; max-width: 52rem; } .mn-hero-copy > * { margin: 0; } .mn-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; } .mn-hero-note { font-size: .875rem; color: var(--mn-muted); } .mn-hero-center .mn-hero-copy { justify-items: center; margin-inline: auto; text-align: center; } .mn-hero-center .mn-hero-actions { justify-content: center; } .mn-hero-media { min-width: 0; } .mn-hero-media-fade { max-height: 34rem; overflow: hidden; -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); } @container mn (min-width: 56rem) { .mn-hero-split .mn-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; } .mn-hero-split .mn-hero-copy { max-width: 36rem; } .mn-hero-split .mn-display { font-size: clamp(2.6rem, 1.2rem + 3.7cqi, 4.6rem); } ``` --- # Logo cloud · MIAN A quiet row of customer or partner wordmarks, with an optional caption. - Id: `logo-cloud` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/logo-cloud - Use for: client logos, trusted by, partners, customer wordmarks, press mentions. - On a page: proof · prominence low · density low. Usually after: hero. Usually before: bento, feature-grid, process. - Alternatives: testimonial, figures. - Avoid: Never invent client or press logos. Leave it out until real, permitted names exist. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-logos-caption`: A caption above the row. - `mn-logos`: The list (a
). Spread across the width; mn-logos-center centres it. - `mn-logo`: One wordmark or SVG logo; muted so it never competes with the content. ## Accessibility - Logos are content: SVG logos need role="img" and aria-label with the company name; text wordmarks need nothing. - Only show companies that actually use the product. ## Examples ### Logos ```html

Month-end runs on Ledger at

Northwind

KESTREL

orbital

Halden & Co

Pilot/9

Marrow

``` ## Source CSS ```css .mn-logos-caption { margin: 0 0 1.5rem; font-size: .875rem; color: var(--mn-muted); } .mn-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; margin: 0; padding: 0; list-style: none; color: var(--mn-muted); } .mn-logos-center { justify-content: center; } .mn-logos > li { display: flex; } .mn-logo { display: inline-flex; align-items: center; gap: .45rem; color: inherit; font: 650 1.125rem/1 var(--mn-font); letter-spacing: -.015em; white-space: nowrap; } .mn-logo svg { width: 1.3em; height: 1.3em; } ``` --- # Feature grid · MIAN Features as a ruled editorial grid or with icons, plus a check list for plans and specs. - Id: `feature-grid` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/feature-grid - Use for: features list, services list, what we do, capabilities, benefits, plan features checklist. - On a page: explanation · prominence medium · density medium. Usually after: hero, logo-cloud, bento. Usually before: testimonial, pricing, cta, process. - Alternatives: bento, process, faq. - Avoid: Three identical icon cards with adjectives. Use the ruled variant with specific claims, and do not follow another grid with it. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-features`: The grid (a
): 1, 2, then mn-features-3 or mn-features-4 columns as the section widens. - `mn-features-ruled`: A hairline above each feature instead of boxes: calmer than a wall of cards. - `mn-feature`: One feature: optional mn-feature-icon, mn-feature-title (
) and a paragraph. - `mn-checklist`: A list with check marks.
marks something not included. ## Accessibility - Feature titles are headings (
under the section’s
). - Icons are decorative (aria-hidden): the title carries the meaning. - mn-checklist marks are CSS: for “not included” items add visually hidden text such as “Not included:”. - Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview. ## Examples ### Ruled features ```html

Rules that learn
Approve a match once and Ledger writes the rule. Most teams stop touching 80% of transactions within a month.

Every currency, one ledger
Rates are locked at the transaction date and revaluations post automatically at month-end.

An audit trail that reads
Each entry links to the bank line, the invoice and the person who approved it.

``` ### With icons and a check list ```html

Overnight matching
Feeds arrive at 02:00 and are matched before 06:00.

Read-only bank access
Ledger can see balances; it can never move money.

Unlimited bank and card connections

Multi-entity consolidation

Exports to Xero, NetSuite and DATEV

Not included: On-premise hosting

``` ## Source CSS ```css .mn-features { display: grid; gap: clamp(2rem, 4cqi, 3rem) clamp(1.5rem, 4cqi, 3rem); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; } @container mn (min-width: 40rem) { .mn-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container mn (min-width: 62rem) { .mn-features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mn-features-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .mn-feature { display: grid; gap: .55rem; align-content: start; min-width: 0; } .mn-feature > * { margin: 0; } .mn-features-ruled .mn-feature { padding-top: 1.25rem; border-top: var(--mn-border-w) solid var(--mn-border); } .mn-feature-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .45rem; border-radius: var(--mn-radius-field); background: var(--mn-surface-2); color: var(--mn-fg); } .mn-feature-icon svg { width: 1.2rem; height: 1.2rem; } .mn-feature-title { font: var(--mn-heading-weight) 1.0625rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; color: var(--mn-fg); } .mn-feature p { color: var(--mn-muted); font-size: .9375rem; line-height: 1.6; text-wrap: pretty; } .mn-checklist { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; } .mn-checklist > li { position: relative; padding-inline-start: 1.65rem; line-height: 1.5; } .mn-checklist > li::before { content: ""; position: absolute; left: 0; top: .18em; width: 1.1em; height: 1.1em; background: var(--mn-primary-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } .mn-checklist > li.mn-off { color: var(--mn-muted); } .mn-checklist > li.mn-off::before { background: var(--mn-input); -webkit-mask-image: linear-gradient(transparent 45%, #000 45% 58%, transparent 58%); mask-image: linear-gradient(transparent 45%, #000 45% 58%, transparent 58%); -webkit-mask-size: 70% 100%; mask-size: 70% 100%; } ``` --- # Bento grid · MIAN A grid of tiles in mixed sizes for showing several product details at once. - Id: `bento` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/bento - Use for: showcase product features, show product capabilities, portfolio highlights, mixed size tiles, product tour, feature overview with visuals. - On a page: showcase · prominence high · density high. Usually after: hero, logo-cloud. Usually before: testimonial, process, cta, figures. - Alternatives: feature-grid, work-grid, media. - Avoid: Tiles with only an icon and a sentence. Each tile should show a real state of the product or a real piece of work. One bento per page. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-bento`: The grid: one column, then two, then six tracks on wide sections. - `mn-tile`: A tile. Add mn-card for the noodle’s surface. Spans 2 of 6 by default. - `mn-tile-half · mn-tile-wide · mn-tile-full`: Span 3, 4 or 6 of 6 tracks. - `mn-tile-tall`: Span two rows. - `mn-tile-title`: Tile heading (
). - `mn-tile-media`: Media pinned to the tile’s bottom edge, bleeding to the sides. mn-tile-media-flush removes its padding. - `mn-tile-figure`: A very large number or word: the tile is the statistic. - `mn-tile-quote`: A short quotation set large. - `mn-tile-fill`: A tile filled with the primary colour. One per grid. - `mn-tile-end`: Pushes its element to the bottom of the tile. - `mn-tile-arrow`: On an : an arrow in the corner that moves on hover. - `mn-bento-compact`: Four equal tracks instead of six: tiles span one, mn-tile-wide two. For profile and link pages. - `mn-bento-rows`: Gives every row a minimum height so small tiles stay square-ish. ## Accessibility - Tiles read in source order: put them in the order you want them read, and let the grid place them. - Keep one idea per tile with a real heading. - Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview. ## Examples ### Bento ```html

Close dashboard
Every account, every entity, one progress bar.

Matched
1,284
Exceptions
7
Days to close
3.5

Approvals on the go
Swipe to approve from your phone.

32 currencies
Revalued at month-end.

SOC 2 Type II
Audited every year.

``` ### Numbers, a quote and links Tiles that are the content: a figure, a quotation, a filled tile and whole-tile links. ```html

3.5 days
to close the month
Down from eleven, measured across 140 finance teams in 2026.

Start with one entity
Connect a bank feed and reconcile last month. It takes an afternoon.
Book a walkthrough

“We stopped exporting to spreadsheets in the second week. Nobody asked for them back.”
Example quote. Replace with a real, attributed one.

Changelog
What shipped this month.

``` ### Compact: a profile page ```html

Noor Haddad
Type designer in Rotterdam. I draw text faces for long reading and teach on Thursdays.
Booking for 2027

Typefaces
Seven families.

Writing
Notes on spacing.

12
years drawing letters

Say hello
Replies within two days.

``` ## Source CSS ```css .mn-bento { display: grid; gap: var(--mn-gap, 1rem); grid-template-columns: minmax(0, 1fr); grid-auto-flow: dense; } .mn-tile { --_p: clamp(1.25rem, 2.6cqi, 1.9rem); display: flex; flex-direction: column; gap: .55rem; min-width: 0; padding: var(--_p); } .mn-tile > * { margin: 0; } .mn-tile-title { font: var(--mn-heading-weight) 1.125rem/1.3 var(--mn-font-heading); letter-spacing: -.012em; color: var(--mn-fg); } .mn-tile :where(p:not([class])) { color: var(--mn-muted); font-size: .9375rem; line-height: 1.6; } .mn-tile-media { margin: auto calc(var(--_p) * -1) calc(var(--_p) * -1); padding: var(--_p) var(--_p) 0; min-width: 0; } .mn-tile-media-flush { padding: 0; } @container mn (min-width: 40rem) { .mn-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-tile-wide, .mn-tile-full { grid-column: span 2; } } @container mn (min-width: 62rem) { .mn-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } .mn-tile { grid-column: span 2; } .mn-tile-half { grid-column: span 3; } .mn-tile-wide { grid-column: span 4; } .mn-tile-full { grid-column: span 6; } .mn-tile-tall { grid-row: span 2; } } .mn-tile-figure { font: 700 clamp(2.25rem, 7cqi, 3.5rem)/1 var(--mn-font-heading); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--mn-fg); } .mn-tile-quote { margin: 0; font: 500 1.1875rem/1.45 var(--mn-font-heading); letter-spacing: -.01em; color: var(--mn-fg); text-wrap: pretty; } .mn-tile-end { margin-top: auto; } a.mn-tile { position: relative; color: inherit; text-decoration: none; transition: border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease); } a.mn-tile:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 35%); } a.mn-tile:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 2px; } .mn-tile-arrow { position: absolute; top: var(--_p); inset-inline-end: var(--_p); width: 1.1rem; height: 1.1rem; color: var(--mn-muted); rotate: -45deg; transition: translate var(--mn-dur, 200ms) var(--mn-ease-out, ease-out), color var(--mn-duration) var(--mn-ease); } a.mn-tile:hover .mn-tile-arrow { translate: 2px -2px; color: currentColor; } .mn-bento-rows { grid-auto-rows: minmax(9.5rem, auto); } @container mn (min-width: 40rem) { .mn-bento-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container mn (min-width: 62rem) { .mn-bento-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mn-bento-compact > .mn-tile { grid-column: span 1; } .mn-bento-compact > :is(.mn-tile-half, .mn-tile-wide) { grid-column: span 2; } .mn-bento-compact > .mn-tile-full { grid-column: span 4; } ``` --- # Media · MIAN Images, video and illustrations in a fixed aspect ratio, with captions and a labelled placeholder for photos still to come. - Id: `media` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/media - Use for: large image, video, photo with caption, image placeholder, screenshot, illustration. - On a page: showcase · prominence high · density low. - Alternatives: mockup, product-gallery. - Avoid: Stock photos of people at laptops. Use the product, real photography or a described placeholder. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-media`: A frame with an aspect ratio (--ratio, default 16/10) that crops its ,

One specific claim.

How it works

Interfaces cooked differently

Why noodles

Create project

Choosing a noodle for your product

Notifications

No projects yet

Lead2

Proposal3

Won1

Team plan

From

Bill to

on a profile page). - Follow is a toggle button with aria-pressed, or a clear “Follow” / “Following” label. ## Examples ### Profile ```html IS

Ilinca Sava@ilinca

Set up Ledger

Selected work

Bank rules that learn from you

Exports your accountant asked for

Tell us what you are making.

per page (usually the hero’s mn-display) and keep heading levels in order: mn-title is for

under the section’s

Rules that learn

Every currency, one ledger

An audit trail that reads

Overnight matching

Read-only bank access

Close dashboard

Approvals on the go

32 currencies

SOC 2 Type II

to close the month

Start with one entity

Changelog

Noor Haddad

Typefaces

Writing

Say hello

Starter

Team

Scale

Try this month’s close on Ledger.

One good essay a week.

Opening: interfaces are surfaces

Type that survives translation

Coffee and noodles

Questions

Connect

Review

Close

on a profile page). - Follow is a toggle button with aria-pressed, or a clear “Follow” / “Following” label. ## Examples ### Profile ```html