@dnax/ui 0.0.64 → 0.0.65

package/styles/main.css

@@ -832,12 +832,46 @@ html.dark body {
 }
 
 /* Flèches de défilement (`show-arrows`, comportement Quasar) : le contenu devient
-   défilable (barre de défilement masquée, le défilement est piloté par les flèches). */
+   défilable (barre de défilement masquée, le défilement est piloté par les flèches).
+   `scroll-padding` : le focus / `scrollIntoView` ne colle pas un onglet sous une flèche. */
 .q-tabs--arrows .q-tabs__content {
+  --q-tabs-fade-start: 0px;
+  --q-tabs-fade-end: 0px;
+
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  scroll-padding-inline: 48px;
+  /* Fondu sous les flèches : masque **alpha** (transparent → blanc opaque). Le blanc est
+     opaque en mode `alpha` **et** `luminance` (ancien WebKit), et un masque ne dépend
+     d'aucune couleur de thème : le rendu est **identique en clair et en sombre** (contrairement
+     à un dégradé `--card` qui supposerait la couleur de surface du parent).
+     Le côté déjà entièrement visible garde `--q-tabs-fade-*: 0px` → aucun fondu. */
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #fff var(--q-tabs-fade-start),
+    #fff calc(100% - var(--q-tabs-fade-end)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #fff var(--q-tabs-fade-start),
+    #fff calc(100% - var(--q-tabs-fade-end)),
+    transparent 100%
+  );
+}
+
+/* Côtés à fondre — posés par le composant d'après les mesures de défilement
+   (`tabArrowState`) : à droite tant qu'il reste du contenu, à gauche dès qu'on a défilé. */
+.q-tabs--arrows.q-tabs--scroll-start .q-tabs__content {
+  --q-tabs-fade-start: 48px;
+}
+
+.q-tabs--arrows.q-tabs--scroll-end .q-tabs__content {
+  --q-tabs-fade-end: 48px;
 }
 
 .q-tabs--arrows .q-tabs__content::-webkit-scrollbar {
@@ -847,34 +881,71 @@ html.dark body {
 .q-tabs--vertical.q-tabs--arrows .q-tabs__content {
   overflow-x: hidden;
   overflow-y: auto;
+  scroll-padding-inline: 0;
+  scroll-padding-block: 40px;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #fff var(--q-tabs-fade-start),
+    #fff calc(100% - var(--q-tabs-fade-end)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #fff var(--q-tabs-fade-start),
+    #fff calc(100% - var(--q-tabs-fade-end)),
+    transparent 100%
+  );
+}
+
+.q-tabs--vertical.q-tabs--arrows.q-tabs--scroll-start .q-tabs__content {
+  --q-tabs-fade-start: 40px;
 }
 
+.q-tabs--vertical.q-tabs--arrows.q-tabs--scroll-end .q-tabs__content {
+  --q-tabs-fade-end: 40px;
+}
+
+/* Bouton **circulaire en surimpression** : les onglets défilent dessous. */
 .q-tabs__arrow {
-  flex: 0 0 auto;
+  position: absolute;
+  top: 50%;
+  z-index: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
+  width: 32px;
+  height: 32px;
   padding: 0;
-  border: none;
-  border-radius: 0;
-  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  background-color: var(--card, #fff);
   color: inherit;
-  opacity: 0.6;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
   cursor: pointer;
+  transform: translateY(-50%);
   transition:
     opacity 0.15s ease,
     background-color 0.15s ease;
 }
 
-.q-tabs__arrow:hover {
-  opacity: 1;
-  background-color: rgb(0 0 0 / 0.04);
+.q-tabs__arrow--start {
+  left: 8px;
 }
 
-/* Thème sombre : le hover noir 4 % est invisible (cf. convention des hovers sombres). */
-.dark .q-tabs__arrow:hover {
-  background-color: rgb(255 255 255 / 0.08);
+.q-tabs__arrow--end {
+  right: 8px;
+}
+
+.q-tabs__arrow:hover:not(:disabled) {
+  background-color: var(--muted, rgb(0 0 0 / 0.04));
+}
+
+/* Côté sans défilement possible : flèche **estompée** (toujours visible, comme la référence). */
+.q-tabs__arrow:disabled {
+  opacity: 0.35;
+  cursor: default;
 }
 
 .q-tabs__arrow svg {
@@ -882,9 +953,20 @@ html.dark body {
   height: 16px;
 }
 
+/* Vertical : flèches en haut / en bas, centrées horizontalement. */
 .q-tabs--vertical .q-tabs__arrow {
-  width: 100%;
-  height: 24px;
+  top: auto;
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+}
+
+.q-tabs--vertical .q-tabs__arrow--start {
+  top: 8px;
+}
+
+.q-tabs--vertical .q-tabs__arrow--end {
+  bottom: 8px;
 }
 
 .q-tabs--dense {
@@ -6123,7 +6205,7 @@ a.q-breadcrumbs__el:hover {
   background-color: var(--primary);
 }
 
-/* — raccourci « Today » (prop `today-btn`) : bord à bord dans le panneau — */
+/* — raccourci « aujourd'hui » (prop `today-btn`) : bord à bord dans le panneau — */
 .q-date-calendar__footer {
   display: flex;
   justify-content: flex-end;