@dnax/ui 0.0.10 → 0.0.12

package/styles/main.css

@@ -66,9 +66,14 @@ body {
 /* Safe-area intégrées à la règle de base .q-footer (plus bas) */
 
 /* Contenu de page : pas de padding par défaut (barres dans le flux).
-   Compensation UNIQUEMENT si une barre est fixée (:has) : 50px + safe-area */
+   Compensation UNIQUEMENT si une barre est fixée (:has) : 50px + safe-area.
+   Safe-area bas : le contenu scroillé jusqu'au bout ne passe pas sous la barre
+   d'accueil iOS. */
 .q-page {
   flex: 1 1 auto; /* prend l'espace restant */
+  padding-bottom: 0;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
 }
 
 .q-app:has(.q-header--fixed) .q-page {
@@ -708,11 +713,30 @@ html.dark body {
   height: 2px;
   background-color: var(--q-tabs-active-color);
   transition:
-    transform 0.25s ease,
-    width 0.25s ease;
+    transform var(--q-tabs-duration, 0.25s) ease,
+    width var(--q-tabs-duration, 0.25s) ease;
   will-change: transform, width;
 }
 
+/* — transitions animées (prop animated + transition) —
+   L'indicateur est la star du changement de tab : chaque preset lui donne une
+   courbe différente (spring = léger overshoot, smooth = expo-out velouté,
+   elastic = rebond marqué). */
+.q-tabs--animated .q-tabs__indicator {
+  transition-duration: var(--q-tabs-duration, 0.45s);
+}
+.q-tabs--anim-spring .q-tabs__indicator {
+  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* back-out : dépasse puis se pose */
+}
+.q-tabs--anim-smooth .q-tabs__indicator {
+  transition-duration: var(--q-tabs-duration, 0.5s);
+  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out : glisse velouté */
+}
+.q-tabs--anim-elastic .q-tabs__indicator {
+  transition-duration: var(--q-tabs-duration, 0.6s);
+  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* rebond prononcé */
+}
+
 /* ===== QTabPanels / QTabPanel ===== */
 .q-tab-panels {
   position: relative;
@@ -801,7 +825,9 @@ html.dark body {
   padding: 0 16px;
   border: none;
   background: transparent;
-  color: inherit;
+  /* Couleur des tabs inactifs : inactive-color (QTabs) sinon couleur héritée.
+     .q-tab--active (plus bas) reprend la main par ordre de source. */
+  color: var(--q-tabs-inactive-color, inherit);
   font: inherit;
   font-size: 14px;
   font-weight: 500;
@@ -822,9 +848,15 @@ html.dark body {
   transform: scale(0.94);
 }
 
-/* pop du tab actif (overshoot, prop animated) */
-.q-tabs--animated .q-tab--active {
-  animation: q-tab-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+/* pop du tab actif (overshoot) — spring (défaut) et elastic */
+.q-tabs--anim-spring .q-tab--active,
+.q-tabs--anim-elastic .q-tab--active {
+  animation: q-tab-pop var(--q-tabs-duration, 0.3s) cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* smooth : le contenu du tab actif monte et apparaît (label + icône) */
+.q-tabs--anim-smooth .q-tab--active .q-tab__content {
+  animation: q-tab-rise var(--q-tabs-duration, 0.32s) cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 .q-tab--active {
@@ -837,8 +869,12 @@ html.dark body {
   outline-offset: -2px;
 }
 
-.q-tab:hover {
-  background-color: rgb(0 0 0 / 0.04);
+/* Mobile : le :hover reste collé après le tap (pas de souris) → réservé aux
+   devices avec hover réel (souris / trackpad) */
+@media (hover: hover) and (pointer: fine) {
+  .q-tab:hover {
+    background-color: rgb(0 0 0 / 0.04);
+  }
 }
 
 .q-tab:disabled,
@@ -928,6 +964,63 @@ html.dark body {
   }
 }
 
+@keyframes q-tab-rise {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* — collapse-inactive : les tabs inactifs ne montrent que l'icône ; le tab
+   actif s'étend (icône + label) avec une largeur animée (pattern mobile
+   bottom-nav). max-width 0 → 999px : la largeur utilisée = min(naturelle, max)
+   → le label se déplie jusqu'à sa largeur réelle, le tab suit.
+   PAS d'overflow: hidden : le texte n'est pas tronqué pendant l'ouverture —
+   il apparaît entier en FONDU (opacity), plus joli que le glissement. */
+.q-tabs--collapse-inactive .q-tab__content {
+  gap: 0;
+}
+.q-tabs--collapse-inactive .q-tab__label {
+  max-width: 0;
+  opacity: 0;
+  white-space: nowrap; /* pas de retour à la ligne pendant l'ouverture */
+  transition:
+    max-width var(--q-tabs-duration, 0.3s) cubic-bezier(0.16, 1, 0.3, 1),
+    opacity var(--q-tabs-duration, 0.25s) ease;
+}
+.q-tabs--collapse-inactive .q-tab--active .q-tab__content {
+  gap: 6px;
+}
+.q-tabs--collapse-inactive .q-tab--active .q-tab__label {
+  max-width: 999px;
+  opacity: 1;
+}
+
+/* Crossfade : pendant que le label du tab inactif s'estompe, celui du tab
+   actif apparaît en fondu — simultanément. Les animations d'entrée du tab
+   (pop/rise) sont neutralisées en mode collapse pour ne pas geler ou masquer
+   le fade du label entrant ; l'indicateur garde son spring (transition width). */
+.q-tabs--collapse-inactive.q-tabs--anim-spring .q-tab--active,
+.q-tabs--collapse-inactive.q-tabs--anim-elastic .q-tab--active,
+.q-tabs--collapse-inactive.q-tabs--anim-smooth .q-tab--active .q-tab__content {
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .q-tabs--animated .q-tabs__indicator,
+  .q-tabs--anim-spring .q-tab--active,
+  .q-tabs--anim-elastic .q-tab--active,
+  .q-tabs--anim-smooth .q-tab--active .q-tab__content,
+  .q-tabs--collapse-inactive .q-tab__label {
+    transition-duration: 0s;
+    animation: none;
+  }
+}
+
 .q-tab__content {
   display: flex;
   flex-direction: inherit;
@@ -4492,11 +4585,8 @@ html.dark body {
 }
 
 .q-bottom-sheet__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 12px 16px 8px;
+  padding: 0; /* le padding est porté par le <q-toolbar> embarqué */
+  border-bottom: 1px solid rgb(0 0 0 / 0.08);
 }
 
 .q-bottom-sheet__header-text {
@@ -4546,11 +4636,17 @@ html.dark body {
 }
 
 .q-bottom-sheet__footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 8px 16px 16px;
+  padding: 0; /* le padding est porté par le <q-toolbar> embarqué */
+  border-top: 1px solid rgb(0 0 0 / 0.08);
+}
+
+.q-bottom-sheet__footer .q-toolbar {
+  justify-content: flex-end; /* actions alignées à droite (défaut) */
+}
+
+.q-bottom-sheet__panel--dark .q-bottom-sheet__header,
+.q-bottom-sheet__panel--dark .q-bottom-sheet__footer {
+  border-color: rgb(255 255 255 / 0.12);
 }
 
 /* — transitions (slide vertical type vaul) — */
@@ -5815,14 +5911,28 @@ html.dark body {
 
 /* safe-area : l'encoche en haut est gérée par le header, la barre d'accueil en bas par le footer */
 .q-dialog__content--maximized .q-dialog__header,
-.q-dialog__content--top .q-dialog__header {
+.q-dialog__content--top .q-dialog__header,
+.q-dialog__content--left .q-dialog__header,
+.q-dialog__content--right .q-dialog__header {
   padding-top: 0;
   padding-top: constant(safe-area-inset-top);
   padding-top: env(safe-area-inset-top);
 }
 
+/* fullscreen en paysage : l'encoche latérale passe dans le header (comme QHeader) */
+.q-dialog__content--maximized .q-dialog__header {
+  padding-left: 0;
+  padding-left: constant(safe-area-inset-left);
+  padding-left: env(safe-area-inset-left);
+  padding-right: 0;
+  padding-right: constant(safe-area-inset-right);
+  padding-right: env(safe-area-inset-right);
+}
+
 .q-dialog__content--maximized .q-dialog__footer,
-.q-dialog__content--bottom .q-dialog__footer {
+.q-dialog__content--bottom .q-dialog__footer,
+.q-dialog__content--left .q-dialog__footer,
+.q-dialog__content--right .q-dialog__footer {
   padding-bottom: 0;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
@@ -5844,11 +5954,7 @@ html.dark body {
   position: sticky;
   top: 0;
   z-index: 1;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 16px;
+  padding: 0; /* le padding est porté par le <q-toolbar> embarqué */
   border-bottom: 1px solid rgb(0 0 0 / 0.08);
   background-color: inherit; /* reste opaque pendant le scroll du body */
 }
@@ -5899,15 +6005,26 @@ html.dark body {
   position: sticky;
   bottom: 0;
   z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 16px 16px;
+  padding: 0; /* le padding est porté par le <q-toolbar> embarqué */
   border-top: 1px solid rgb(0 0 0 / 0.08);
   background-color: inherit;
 }
 
+.q-dialog__footer .q-toolbar {
+  justify-content: flex-end; /* actions alignées à droite (défaut) */
+}
+
+.q-dialog__body {
+  min-height: 0;
+  padding: 4px 16px 16px;
+}
+
+.q-dialog__body--scrollable {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
 .q-dialog__trigger {
   display: inline-flex;
   align-items: center;
@@ -6237,6 +6354,58 @@ html.dark body {
   }
 }
 
+/* swipe-* : le panneau glisse depuis un bord et y REVIENT à la fermeture
+   (aller-retour, comme la sidebar) — swipe-left : vient de la droite et y
+   retourne ; swipe-right : vient de la gauche et y retourne. */
+.q-dialog-swipe-left-enter-active,
+.q-dialog-swipe-left-leave-active,
+.q-dialog-swipe-right-enter-active,
+.q-dialog-swipe-right-leave-active {
+  transition: opacity var(--q-dialog-duration-enter, 0.2s) ease;
+}
+
+.q-dialog-swipe-left-enter-active .q-dialog__content,
+.q-dialog-swipe-left-leave-active .q-dialog__content {
+  --q-dialog-swipe-x: 100vw;
+}
+
+.q-dialog-swipe-right-enter-active .q-dialog__content,
+.q-dialog-swipe-right-leave-active .q-dialog__content {
+  --q-dialog-swipe-x: -100vw;
+}
+
+.q-dialog-swipe-left-enter-active .q-dialog__content,
+.q-dialog-swipe-right-enter-active .q-dialog__content {
+  animation: q-dialog-swipe-in var(--q-dialog-duration-enter, 0.3s) cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.q-dialog-swipe-left-leave-active .q-dialog__content,
+.q-dialog-swipe-right-leave-active .q-dialog__content {
+  animation: q-dialog-swipe-out var(--q-dialog-duration-leave, 0.2s) ease-in forwards;
+}
+
+@keyframes q-dialog-swipe-in {
+  from {
+    opacity: 0.6;
+    transform: translateX(var(--q-dialog-swipe-x, 100vw));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes q-dialog-swipe-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(var(--q-dialog-swipe-x, 100vw));
+  }
+}
+
 /* ===== QContainer ===== */
 .q-container {
   width: 100%;
@@ -6269,11 +6438,80 @@ html.dark body {
   z-index: 0;
   pointer-events: none;
 }
-.q-container--bg > :not(.q-container__bg) {
+.q-container--bg > :not(.q-container__bg, .q-container__img) {
   position: relative;
   z-index: 1;
 }
 
+/* — image de fond (prop background-image) : couche cover derrière le contenu — */
+.q-container__img {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--q-container-img-fit, cover);
+  pointer-events: none;
+  user-select: none;
+}
+
+/* taille CSS libre ("50%", "400px"…) : boîte centrée (translate séparé de
+   transform → compose avec le Ken Burns), image entière visible */
+.q-container__img--sized {
+  width: var(--q-container-img-size);
+  height: var(--q-container-img-size);
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+  object-fit: contain;
+}
+
+/* glassmorphisée : floutée + saturée + léger zoom pour masquer les bords du blur */
+.q-container__img--glass {
+  filter: blur(14px) saturate(1.4);
+  transform: scale(1.15);
+}
+
+/* — Ken Burns indéterminé (prop background-animated) : zoom + panoramique
+   lents qui bouclent — direction et durée configurables (défaut alternate 24s) */
+.q-container__img--animated {
+  animation:
+    q-container-kenburns var(--q-container-kenburns-duration, 24s) ease-in-out
+    var(--q-container-kenburns-direction, alternate) infinite;
+  will-change: transform;
+}
+@keyframes q-container-kenburns {
+  0% {
+    transform: scale(1.06) translate(0%, 0%);
+  }
+  30% {
+    transform: scale(1.18) translate(-2%, -1.5%);
+  }
+  60% {
+    transform: scale(1.14) translate(2%, 1.5%);
+  }
+  100% {
+    transform: scale(1.22) translate(-1%, 2%);
+  }
+}
+
+/* — glassmorphism du conteneur (prop glass) : fond translucide + flou de ce
+   qui est derrière + bordure claire (variables personnalisables) — */
+.q-container--glass {
+  --q-container-glass-bg: rgb(255 255 255 / 0.14);
+  --q-container-glass-border: rgb(255 255 255 / 0.3);
+  --q-container-glass-blur: 14px;
+  background-color: var(--q-container-glass-bg);
+  border: 1px solid var(--q-container-glass-border);
+  -webkit-backdrop-filter: blur(var(--q-container-glass-blur)) saturate(1.4);
+  backdrop-filter: blur(var(--q-container-glass-blur)) saturate(1.4);
+  box-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
+}
+.dark .q-container--glass {
+  --q-container-glass-bg: rgb(255 255 255 / 0.06);
+  --q-container-glass-border: rgb(255 255 255 / 0.14);
+}
+
 /* grid : grille de carrés qui s'estompe vers les bords */
 .q-container__bg--grid {
   background-image:
@@ -6485,6 +6723,9 @@ html.dark body {
   .q-container__wave {
     animation: none;
   }
+  .q-container__img--animated {
+    animation: none;
+  }
 }
 
 /* ===== QMarquee — bandeau défilant infini ===== */