Design system AUBOTA

Un script.
Du HTML qui dit ce qu’il veut.
Tout AUBOTA en harmonie.

Aubui donne à chaque module les mêmes boutons, couleurs, dialogues, notifications et réflexes clavier. Tu décris l’intention, Aubui s’occupe de la forme — et de l’accessibilité.

Installer en 30 secondes Extraits à copier

Le minimum

<script src="https://ui.aubota.xyz/js/aubui.js" defer></script>

<button aub-btn primary data-aub-confirm="Publier maintenant ?">Publier</button>

Tout Aubui

Chaque page : à quoi ça sert, la balise exacte à poser, l’API, un exemple qui tourne pour de vrai, et l’accessibilité.

Démarrer

Installation

Une balise script : complet, léger ou auth. Cache, versions, ordre de chargement.

Fondations

Tokens

Couleurs, surfaces, espaces, rayons, typo — lus en direct dans tokens.css.

Thème & accentNouveau

Sombre/clair, 6 pastilles d’accent, synchro entre sous-domaines et compte Hub.

Motion

Durées, courbes, ce qui bouge et comment respecter « réduire les animations ».

Composants

Boutons

Primary, ghost, danger, success, tailles, pleine largeur.

Formulaires

Champs, labels, aides, erreurs, choix, barre de filtres.

Cartes & alertes

Cartes, badges, points de statut, alertes.

Navbar

Barre globale AUBOTA (window.AubotaNav) et navbar de module aub-nav.

NotificationsNouveau

Cloche Comlink : badge, liste, toasts de nouveauté, Web Push.

Dialogues & toastsNouveau

AubuiDialog (alert, confirm, prompt) et AubuiToast — jamais de popup native.

RechercheNouveau

AubuiSearch : une barre, deux sources (endpoint ou liste locale), clavier complet.

Sélecteur d’heure

aub-time : roue heure puis minutes, valeur HH:MM dans un champ caché.

Visionneuse PDFNouveau

AubuiPdf : pages rendues par NOTRE serveur (PdfPages, Ghostscript, WebP), chargées à la demande ; zoom, pincer, plein écran, recherche. Sans pdf.js.

VisionneuseNouveau

AubuiVisionneuse : voir n’importe quel fichier sans quitter la page (image, PDF, vidéo, audio, texte, sinon Télécharger). Plein écran, gestes, clavier.

Panneau latéralNouveau

AubuiPanneau : un formulaire ou un détail à côté de la page (plein écran sur téléphone). Focus piégé, Échap, fond, question avant de perdre une saisie.

Puces de filtreNouveau

.aub-puce : des boutons ronds qui filtrent une liste (aria-pressed), une ligne qui défile sur téléphone, tons pour « À faire ».

Invitation (démo)Nouveau

AubInvite : en mode démo, inviter à créer un compte plutôt que bloquer.

Visite guidée (Waza)Nouveau

WazaTour : assombrit la page, entoure un élément et l’explique, étape par étape. Visites écrites en .md.

Kommand (Ctrl+K)Nouveau

Palette de commandes du Hub, chargée par aubui.js sur tous les modules : aller, créer, chercher, /commandes, aide Waza.

Comportements

Moteur déclaratif

Attributs aub-btn, aub-card… → classes. Aubui.process() pour le contenu injecté.

Actions data-aubNouveau

toggle, show, hide, copy, dismiss et confirmations data-aub-confirm, sans JS métier.

Modèles & états

États vides & chargementHub seulement

.aub-empty (état vide encourageant) et skeletons — aujourd’hui côté Hub.

MailsNouveau

AubotaMail : LE modèle de mail d’AUBOTA (couleurs du mail de Share), pied selon la sorte, « ne plus recevoir » sans compte.

Pages d’erreur

403, 404, 500 et messages métier avec .aub-error.

Référence

Catalogue

Extraits prêts à copier.

API figée (API.md)

Le contrat : attributs et classes autorisés.

README & journal

Philosophie, règles et historique d’Aubui.

Nouveautés

2026-10-30
Visionneuse PDF — Nouveau composant AubuiPdf ([data-aubui-pdf], chargé tout seul par aubui.js) + service serveur PdfPages. Premier usage : Learning.
2026-10-30
Visionneuse — Nouveau composant AubuiVisionneuse (API + [data-aubui-visionneuse], chargé à la demande par aubui.js). Premiers usages : Drive (/voir/<id>) et Gestion (fiche d’un papier).
2026-10-30
Panneau latéral — Nouveau composant AubuiPanneau (.aub-panneau + API ouvrir / fermer / propre, chargé à la demande par aubui.js). Premier usage : Gestion › Papiers (Ajouter / Modifier).
2026-10-30
Puces de filtre — Nouvelles puces de filtre .aub-puces / .aub-puce (tons danger, warning, accent). Premier usage : Gestion › Papiers.
2026-10-30
Mails — Modèle de mail unique AubotaMail (serveur) : inscription, mot de passe oublié, Share, Réunions, Listes, Préversions, Administration › Mails. Liens « ne plus recevoir » signés, liste d’opposition des adresses sans compte.
2026-10-22
Kommand (Ctrl+K) — Kommand partout : chargé par aubui.js hors du Hub (connecté uniquement), API du Hub en CORS liste blanche.
2026-10-20
Visite guidée (Waza) — Nouveau composant WazaTour (start / open / stop) + #waza-tour=<id> dans l’URL.
2026-10-19
Installation — aubui.js installe une file d’attente AubuiDialog/AubuiToast dès son exécution (plus de popup native avant le chargement de dialog.js).
2026-10-19
Thème & accent — Modèle unique thème/accent : cookie partagé aub-prefs (.aubota.xyz), AubuiPrefsSync, endpoint du Hub, événements aubui:theme / aubui:accent.
2026-10-19
Notifications — Cloche fiable : poll sans cache, dédup entre onglets, toast si visible / notification système si caché, « marquer lu » au seul endpoint actif.
2026-10-19
Dialogues & toasts — AubuiDialog + AubuiToast partout ; window.alert redirigé vers la lightbox ; data-aub-confirm déclaratif.
2026-10-19
Invitation (démo) — Nouveau composant AubInvite (require / isDemo / guard).
2026-10-19
Actions data-aub — data-aub-confirm (+ -title, -ok, data-aub-danger) sur liens, boutons et formulaires.
2026-10-18
Recherche — Composant de recherche unique AubuiSearch (data-aubui-search).

Couverture de la doc

1 fichier(s) Aubui sans page de doc

À documenter avant d’être utilisé dans un module (et à déclarer dans docs/registry.php) : css/aubui/components/motion.css.

Un script.Du HTML qui dit ce qu’il veut.Tout AUBOTA en harmonie.