barua-ui 0.13.0 → 0.14.0

package/css/components/marketing.css

@@ -58,7 +58,9 @@
      selector inside a container is (0,1,1) and quietly beat .b-btn--primary's
      (0,1,0), which left the landing page's call to action grey on blue. */
   .b-marketing-nav a:not(.b-btn) { color: var(--b-text-secondary); text-decoration: none; }
-  .b-marketing-nav a:not(.b-btn):hover { color: var(--b-text); }
+  @media (hover: hover) {
+    .b-marketing-nav a:not(.b-btn):hover { color: var(--b-text); }
+  }
 
   /* ---- Chapter: one idea, centred, with room around it --------------------- */
   .b-chapter {
@@ -187,10 +189,14 @@
     border-radius: var(--b-radius-full);
     text-decoration: none;
   }
-  .b-announce:hover { text-decoration: none; background: color-mix(in srgb, var(--b-color-accent) 18%, transparent); }
+  @media (hover: hover) {
+    .b-announce:hover { text-decoration: none; background: color-mix(in srgb, var(--b-color-accent) 18%, transparent); }
+  }
   .b-announce .b-icon { width: 1rem; height: 1rem; }
   .b-announce__go { transition: translate var(--b-duration-fast) var(--b-ease-out); }
-  .b-announce:hover .b-announce__go { translate: 2px 0; }
+  @media (hover: hover) {
+    .b-announce:hover .b-announce__go { translate: 2px 0; }
+  }
 
   /* ---- Rating: borrowed credibility, stated plainly ------------------------ */
   /* Five marks and who is vouching. The stars are the library's own star at
@@ -262,7 +268,9 @@
        other space in the belt. Half at each end restores it. */
     padding-inline: calc(var(--b-marquee-gap) / 2);
   }
-  .b-marquee:hover .b-marquee__track { animation-play-state: paused; }
+  @media (hover: hover) {
+    .b-marquee:hover .b-marquee__track { animation-play-state: paused; }
+  }
   @keyframes b-marquee { to { translate: -50% 0; } }
   @media (prefers-reduced-motion: reduce) {
     .b-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
@@ -329,7 +337,9 @@
     border-radius: var(--b-radius-xl);
     transition: translate var(--b-duration-normal) var(--b-ease-out), box-shadow var(--b-duration-normal);
   }
-  .b-resource-card:hover { text-decoration: none; }
+  @media (hover: hover) {
+    .b-resource-card:hover { text-decoration: none; }
+  }
   @media (hover: hover) {
     .b-resource-card:hover { translate: 0 -2px; box-shadow: var(--b-elevation-3); }
   }
@@ -405,7 +415,9 @@
     opacity: 0.7;
     transition: opacity var(--b-duration-fast);
   }
-  .b-logo-wall__logo:hover { opacity: 1; }
+  @media (hover: hover) {
+    .b-logo-wall__logo:hover { opacity: 1; }
+  }
   .b-logo-wall__logo :is(svg, img) { height: 100%; width: auto; }
   .b-logo-wall__logo img { filter: grayscale(1); }
 
@@ -619,7 +631,9 @@
     font-weight: var(--b-weight-semibold);
     align-items: flex-start;
   }
-  .b-accordion--plain > .b-disclosure > summary:hover { background: none; color: var(--b-color-accent-text); }
+  @media (hover: hover) {
+    .b-accordion--plain > .b-disclosure > summary:hover { background: none; color: var(--b-color-accent-text); }
+  }
   .b-accordion--plain > .b-disclosure > summary::after {
     content: "+";
     display: grid;
@@ -701,7 +715,9 @@
     border-radius: var(--b-radius-full);
     transition: background var(--b-duration-fast) var(--b-ease-out), color var(--b-duration-fast) var(--b-ease-out);
   }
-  .b-pill-nav a:hover { background: var(--b-fill-tertiary); color: var(--b-text); }
+  @media (hover: hover) {
+    .b-pill-nav a:hover { background: var(--b-fill-tertiary); color: var(--b-text); }
+  }
   .b-pill-nav a.is-active { background: var(--b-text); color: var(--b-bg); }
 
   /* ---- Card rail: a row you push sideways ---------------------------------- */
@@ -783,7 +799,9 @@
     color: var(--b-text);
   }
   .b-site-footer__group a:not(.b-btn) { display: block; padding-block: 0.2rem; color: var(--b-text-secondary); text-decoration: none; }
-  .b-site-footer__group a:hover { color: var(--b-text); text-decoration: underline; }
+  @media (hover: hover) {
+    .b-site-footer__group a:hover { color: var(--b-text); text-decoration: underline; }
+  }
   .b-site-footer__legal {
     max-width: var(--b-container-xl);
     margin: var(--b-space-8) auto 0;

package/css/components/media.css

@@ -50,7 +50,9 @@
     object-fit: cover;
     transition: scale var(--b-duration-normal) var(--b-ease-out);
   }
-  .b-gallery :is(a, button):hover img { scale: 1.05; }
+  @media (hover: hover) {
+    .b-gallery :is(a, button):hover img { scale: 1.05; }
+  }
 
   /* ---- Carousel (scroll-snap) ------------------------------------------------ */
   .b-carousel { position: relative; }
@@ -179,7 +181,9 @@
     color: inherit;
     text-decoration: none;
   }
-  .b-poster:hover { color: inherit; text-decoration: none; }
+  @media (hover: hover) {
+    .b-poster:hover { color: inherit; text-decoration: none; }
+  }
   .b-poster__frame {
     position: relative;
     display: grid;
@@ -264,9 +268,10 @@
     opacity: 0;
     transition: opacity var(--b-duration-normal);
   }
-  .b-video:hover .b-video__overlay,
-  .b-video:focus-within .b-video__overlay,
-  .b-video.is-paused .b-video__overlay { opacity: 1; }
+  .b-video:focus-within .b-video__overlay, .b-video.is-paused .b-video__overlay { opacity: 1; }
+  @media (hover: hover) {
+    .b-video:hover .b-video__overlay { opacity: 1; }
+  }
   .b-video__play {
     display: grid;
     place-items: center;
@@ -281,7 +286,9 @@
     cursor: pointer;
     transition: scale var(--b-duration-fast) var(--b-ease-bounce);
   }
-  .b-video__play:hover { scale: 1.08; }
+  @media (hover: hover) {
+    .b-video__play:hover { scale: 1.08; }
+  }
 
   /* ---- Film player controls -------------------------------------------------------
      `.b-media-controls` is the generic bar. A film needs its controls over the
@@ -303,9 +310,10 @@
     opacity: 0;
     transition: opacity var(--b-duration-normal) var(--b-ease-out);
   }
-  .b-video:hover .b-video__bar,
-  .b-video:focus-within .b-video__bar,
-  .b-video.is-paused .b-video__bar { opacity: 1; }
+  .b-video:focus-within .b-video__bar, .b-video.is-paused .b-video__bar { opacity: 1; }
+  @media (hover: hover) {
+    .b-video:hover .b-video__bar { opacity: 1; }
+  }
   /* A touch screen has no hover, so the bar would otherwise appear only by
      pausing — which is exactly when someone full screen cannot reach it. */
   @media (hover: none) {
@@ -327,7 +335,9 @@
     cursor: pointer;
     transition: background var(--b-duration-fast) var(--b-ease-out);
   }
-  .b-video__btn:hover { background: rgb(255 255 255 / 0.18); }
+  @media (hover: hover) {
+    .b-video__btn:hover { background: rgb(255 255 255 / 0.18); }
+  }
   .b-video__btn svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
 
   .b-video__time {
@@ -362,7 +372,9 @@
     color: #fff;
     background: transparent;
   }
-  .b-media-controls .b-icon-btn:hover { background: rgba(255, 255, 255, 0.16); }
+  @media (hover: hover) {
+    .b-media-controls .b-icon-btn:hover { background: rgba(255, 255, 255, 0.16); }
+  }
   .b-media-controls .b-slider { flex: 1; }
   .b-media-controls__time {
     font-size: var(--b-text-caption);
@@ -554,7 +566,9 @@
     border-radius: 50%;
     cursor: pointer;
   }
-  .b-upload-preview__remove:hover { background: var(--b-color-danger); }
+  @media (hover: hover) {
+    .b-upload-preview__remove:hover { background: var(--b-color-danger); }
+  }
   .b-upload-preview .b-progress {
     position: absolute;
     inset-inline: 0.4rem;

package/css/components/mobile.css

@@ -94,7 +94,9 @@
     cursor: pointer;
     text-align: start;
   }
-  .b-mobile-menu :is(a, button):hover { background: var(--b-fill-tertiary); text-decoration: none; }
+  @media (hover: hover) {
+    .b-mobile-menu :is(a, button):hover { background: var(--b-fill-tertiary); text-decoration: none; }
+  }
   .b-mobile-menu .is-active { color: var(--b-color-accent-text); background: var(--b-color-accent-soft); }
 
   /* ---- Mobile Toolbar (bottom action bar) --------------------------------------- */

package/css/components/nav.css

@@ -42,7 +42,9 @@
     font-size: var(--b-text-callout);
     color: var(--b-text);
   }
-  .b-topnav__brand:hover { text-decoration: none; }
+  @media (hover: hover) {
+    .b-topnav__brand:hover { text-decoration: none; }
+  }
   .b-topnav__links {
     display: flex;
     align-items: center;
@@ -62,7 +64,9 @@
     border-radius: var(--b-radius-md);
     transition: color var(--b-duration-fast), background var(--b-duration-fast);
   }
-  .b-topnav__link:hover { color: var(--b-text); background: var(--b-fill-tertiary); text-decoration: none; }
+  @media (hover: hover) {
+    .b-topnav__link:hover { color: var(--b-text); background: var(--b-fill-tertiary); text-decoration: none; }
+  }
   .b-topnav__link.is-active { color: var(--b-color-accent-text); background: var(--b-color-accent-soft); }
   /* Trailing controls keep their size. A button that shrinks below its touch
      target is not a button anyone can press. */
@@ -138,7 +142,7 @@
     display: flex;
     align-items: center;
     gap: var(--b-space-2);
-    padding: var(--b-space-2) var(--b-space-3);
+    padding: var(--b-item-py) var(--b-item-px);
     font-size: var(--b-text-subheadline);
     font-weight: var(--b-weight-medium);
     color: var(--b-text-secondary);
@@ -146,7 +150,9 @@
     cursor: pointer;
     transition: background var(--b-duration-fast), color var(--b-duration-fast);
   }
-  .b-sidebar__item:hover { background: var(--b-fill-tertiary); color: var(--b-text); text-decoration: none; }
+  @media (hover: hover) {
+    .b-sidebar__item:hover { background: var(--b-fill-tertiary); color: var(--b-text); text-decoration: none; }
+  }
   .b-sidebar__item.is-active {
     background: var(--b-color-accent-soft);
     color: var(--b-color-accent-text);
@@ -196,7 +202,9 @@
     cursor: pointer;
   }
   .b-rail__item svg { width: 1.35rem; height: 1.35rem; }
-  .b-rail__item:hover { background: var(--b-fill-tertiary); color: var(--b-text); text-decoration: none; }
+  @media (hover: hover) {
+    .b-rail__item:hover { background: var(--b-fill-tertiary); color: var(--b-text); text-decoration: none; }
+  }
   .b-rail__item.is-active { color: var(--b-color-accent-text); background: var(--b-color-accent-soft); }
 
   /* ---- Bottom Navigation / Bottom Tab Bar --------------------------------- */
@@ -215,6 +223,24 @@
     border-top: 1px solid light-dark(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
     box-shadow: var(--b-glass-ambient);
   }
+  /* Press feedback for the rows a finger taps; the hover fill is for pointers. */
+  :is(.b-menu__item, .b-sidebar__item, .b-rail__item, .b-cmdk__item, .b-bottomnav__item, .b-tab):active {
+    background: var(--b-fill-secondary);
+    transition: none;
+  }
+
+  /* The reserve. A fixed tab bar covers the last 58px of whatever scrolls
+     under it, and every page used to hand-write a spacer for it. When a
+     bottom nav is on the page, every scroll pane keeps that much clear, and
+     a toast or a FAB stands above it. */
+  :root:has(.b-bottomnav) { --b-bottomnav-h: 3.75rem; }
+  :root:has(.b-bottomnav) :is(.b-scroll-area, .b-workspace__main),
+  :root:has(.b-bottomnav) body:not(:has(.b-stage)) {
+    padding-block-end: calc(var(--b-bottomnav-h) + env(safe-area-inset-bottom));
+    scroll-padding-block-end: var(--b-bottomnav-h);
+  }
+  /* Tucked away while somebody reads, one row of it left to pull back. */
+  .b-bottomnav.is-minimized { translate: 0 calc(100% - var(--b-space-6)); }
   .b-bottomnav::before {
     content: "";
     position: absolute;
@@ -237,8 +263,12 @@
   }
   .b-bottomnav__item svg { width: 1.4rem; height: 1.4rem; }
   .b-bottomnav__item.is-active { color: var(--b-color-accent-text); }
-  .b-bottomnav__item:hover { text-decoration: none; color: var(--b-text-secondary); }
-  .b-bottomnav__item.is-active:hover { color: var(--b-color-accent-text); }
+  @media (hover: hover) {
+    .b-bottomnav__item:hover { text-decoration: none; color: var(--b-text-secondary); }
+  }
+  @media (hover: hover) {
+    .b-bottomnav__item.is-active:hover { color: var(--b-color-accent-text); }
+  }
 
   /* ---- Tab Bar (segmented, iOS-style) ------------------------------------- */
   .b-segmented {
@@ -269,7 +299,9 @@
     transition: background var(--b-duration-fast), color var(--b-duration-fast),
                 box-shadow var(--b-duration-fast);
   }
-  .b-segmented__item:hover { color: var(--b-text); }
+  @media (hover: hover) {
+    .b-segmented__item:hover { color: var(--b-text); }
+  }
   .b-segmented__item.is-active, .b-segmented__item[aria-selected="true"] {
     color: var(--b-text);
     background: light-dark(#ffffff, var(--b-surface-3));
@@ -298,7 +330,7 @@
   .b-tabs::-webkit-scrollbar { display: none; }
   .b-tab {
     position: relative;
-    padding: var(--b-space-2) var(--b-space-3);
+    padding: var(--b-item-py) var(--b-item-px);
     font-size: var(--b-text-subheadline);
     font-weight: var(--b-weight-medium);
     color: var(--b-text-secondary);
@@ -309,7 +341,9 @@
     white-space: nowrap;
     transition: color var(--b-duration-fast);
   }
-  .b-tab:hover { color: var(--b-text); background: var(--b-fill-quaternary); text-decoration: none; }
+  @media (hover: hover) {
+    .b-tab:hover { color: var(--b-text); background: var(--b-fill-quaternary); text-decoration: none; }
+  }
   .b-tab.is-active, .b-tab[aria-selected="true"] { color: var(--b-color-accent-text); }
   .b-tab.is-active::after, .b-tab[aria-selected="true"]::after {
     content: "";
@@ -341,8 +375,28 @@
     padding-inline: var(--b-space-1);
   }
   .b-breadcrumbs a:not(.b-btn) { color: var(--b-text-secondary); }
-  .b-breadcrumbs a:hover { color: var(--b-text); text-decoration: none; }
+  @media (hover: hover) {
+    .b-breadcrumbs a:hover { color: var(--b-text); text-decoration: none; }
+  }
   .b-breadcrumbs [aria-current="page"] { color: var(--b-text); font-weight: var(--b-weight-medium); }
+  /* A deep path never wraps. --collapse keeps the first crumb and the last
+     two and folds the middle into an overflow crumb, which is a .b-dropdown
+     listing the hidden ones. Under 768px the CSS does the folding on its
+     own; data-b-breadcrumbs measures the row and folds only what does not
+     fit at any width. */
+  .b-breadcrumbs--collapse { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
+  .b-breadcrumbs--collapse li { min-width: 0; flex: none; }
+  /* The current page is the last thing to give: it may ellipsise, but not
+     below six characters, so the middle folds first. */
+  .b-breadcrumbs--collapse li:last-child { flex: 0 1 auto; min-width: 6ch; }
+  .b-breadcrumbs--collapse li > a,
+  .b-breadcrumbs--collapse [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .b-breadcrumbs--collapse li.is-collapsed { display: none; }
+  .b-breadcrumbs__overflow { position: relative; }
+  .b-breadcrumbs__overflow > .b-dropdown > summary { display: inline-flex; }
+  @media (max-width: 767px) {
+    .b-breadcrumbs--collapse:not([data-b-breadcrumbs-armed]) li:not(:first-child):not(.b-breadcrumbs__overflow):not(:nth-last-child(-n+2)) { display: none; }
+  }
 
   /* ---- Pagination ----------------------------------------------------------- */
   .b-pagination {
@@ -369,7 +423,9 @@
     background: none;
     cursor: pointer;
   }
-  .b-pagination__item:hover { background: var(--b-fill-tertiary); color: var(--b-text); text-decoration: none; }
+  @media (hover: hover) {
+    .b-pagination__item:hover { background: var(--b-fill-tertiary); color: var(--b-text); text-decoration: none; }
+  }
   .b-pagination__item.is-active, .b-pagination__item[aria-current="page"] {
     color: var(--b-color-on-accent);
     background: var(--b-color-accent-fill);
@@ -451,11 +507,16 @@
     cursor: pointer;
     color: var(--b-text);
   }
-  .b-menubar__item:hover, .b-menubar__item.is-active,
-  .b-menubar__item[aria-expanded="true"] {
+  .b-menubar__item.is-active, .b-menubar__item[aria-expanded="true"] {
     background: var(--b-color-accent-fill);
     color: var(--b-color-on-accent);
   }
+  @media (hover: hover) {
+    .b-menubar__item:hover {
+      background: var(--b-color-accent-fill);
+      color: var(--b-color-on-accent);
+    }
+  }
 
   /* ---- Menu (dropdown / context / action) ------------------------------------
      Works with [popover] or .b-menu inside a positioned wrapper.
@@ -497,7 +558,7 @@
     align-items: center;
     gap: var(--b-space-2);
     width: 100%;
-    padding: var(--b-space-2) var(--b-space-3);
+    padding: var(--b-item-py) var(--b-item-px);
     font-size: var(--b-text-subheadline);
     text-align: start;
     color: var(--b-text);
@@ -507,19 +568,30 @@
     cursor: pointer;
     white-space: nowrap;
   }
-  .b-menu__item:hover, .b-menu__item.is-active {
+  .b-menu__item.is-active {
     background: var(--b-color-accent-fill);
     color: var(--b-color-on-accent);
     text-decoration: none;
   }
-  .b-menu__item:hover .b-menu__shortcut { color: rgba(255, 255, 255, 0.75); }
+  @media (hover: hover) {
+    .b-menu__item:hover {
+      background: var(--b-color-accent-fill);
+      color: var(--b-color-on-accent);
+      text-decoration: none;
+    }
+  }
+  @media (hover: hover) {
+    .b-menu__item:hover .b-menu__shortcut { color: rgba(255, 255, 255, 0.75); }
+  }
   .b-menu__item.is-disabled, .b-menu__item:disabled {
     color: var(--b-text-tertiary);
     background: none;
     cursor: not-allowed;
   }
   .b-menu__item--danger { color: var(--b-color-danger-text); }
-  .b-menu__item--danger:hover { background: var(--b-color-danger); color: #fff; }
+  @media (hover: hover) {
+    .b-menu__item--danger:hover { background: var(--b-color-danger-fill); color: var(--b-color-on-danger); }
+  }
   .b-menu__item svg { width: 1rem; height: 1rem; flex: none; opacity: 0.85; }
   .b-menu__shortcut {
     margin-inline-start: auto;
@@ -542,9 +614,13 @@
     display: none;
     z-index: 1;
   }
-  .b-menu__sub:hover > .b-menu,
   .b-menu__sub:focus-within > .b-menu { display: block; }
-  .b-menu__sub:hover > .b-menu__item { background: var(--b-color-accent-fill); color: var(--b-color-on-accent); }
+  @media (hover: hover) {
+    .b-menu__sub:hover > .b-menu { display: block; }
+  }
+  @media (hover: hover) {
+    .b-menu__sub:hover > .b-menu__item { background: var(--b-color-accent-fill); color: var(--b-color-on-accent); }
+  }
 
   .b-menu__separator {
     height: 1px;
@@ -643,7 +719,7 @@
     align-items: center;
     gap: var(--b-space-3);
     width: 100%;
-    padding: var(--b-space-2) var(--b-space-3);
+    padding: var(--b-item-py) var(--b-item-px);
     font-size: var(--b-text-subheadline);
     text-align: start;
     color: var(--b-text);
@@ -652,7 +728,9 @@
     border-radius: var(--b-radius-md);
     cursor: pointer;
   }
-  .b-cmdk__item:hover { background: var(--b-fill-quaternary); }
+  @media (hover: hover) {
+    .b-cmdk__item:hover { background: var(--b-fill-quaternary); }
+  }
   .b-cmdk__item.is-active { background: var(--b-color-accent-soft); color: var(--b-color-accent-text); }
   .b-cmdk__item svg { width: 1.1rem; height: 1.1rem; opacity: 0.8; }
   .b-cmdk__item kbd { margin-inline-start: auto; }

package/css/components/overlays.css

@@ -95,7 +95,9 @@
     cursor: pointer;
     transition: background var(--b-duration-fast);
   }
-  .b-modal__close:hover { background: var(--b-fill-secondary); color: var(--b-text); }
+  @media (hover: hover) {
+    .b-modal__close:hover { background: var(--b-fill-secondary); color: var(--b-text); }
+  }
 
   /* ---- Alert Dialog (centered, compact) --------------------------------------- */
   /* Composed onto .b-modal like .b-cmdk; explicit so a reorder cannot break it. */
@@ -124,7 +126,9 @@
     border: none;
     cursor: pointer;
   }
-  .b-alert-dialog__actions button:hover { background: var(--b-fill-quaternary); }
+  @media (hover: hover) {
+    .b-alert-dialog__actions button:hover { background: var(--b-fill-quaternary); }
+  }
   .b-alert-dialog__actions button + button { border-top: 1px solid var(--b-separator); }
   .b-alert-dialog__actions .is-destructive { color: var(--b-color-danger-text); }
   .b-alert-dialog__actions .is-primary { font-weight: var(--b-weight-semibold); }
@@ -305,8 +309,11 @@
     cursor: pointer;
   }
   .b-action-sheet__group button:first-child { border-top: none; }
-  .b-action-sheet__group button:hover { background: var(--b-fill-quaternary); }
+  @media (hover: hover) {
+    .b-action-sheet__group button:hover { background: var(--b-fill-quaternary); }
+  }
   .b-action-sheet__group button.is-destructive { color: var(--b-color-danger-text); }
+  .b-action-sheet__group button:active { background: var(--b-fill-secondary); transition: none; }
   .b-action-sheet__cancel {
     margin-block-start: var(--b-space-2);
     font-weight: var(--b-weight-semibold);
@@ -451,18 +458,26 @@
     transition: opacity var(--b-duration-fast) var(--b-ease-out),
                 translate var(--b-duration-fast) var(--b-ease-out);
   }
-  .b-tooltip-host:hover::after,
   .b-tooltip-host:focus-visible::after {
     opacity: 1;
     translate: -50% 0;
     transition-delay: 350ms;
   }
+  @media (hover: hover) {
+    .b-tooltip-host:hover::after {
+      opacity: 1;
+      translate: -50% 0;
+      transition-delay: 350ms;
+    }
+  }
   .b-tooltip-host--bottom::after {
     inset-block-end: auto;
     inset-block-start: calc(100% + var(--b-space-2));
     translate: -50% -4px;
   }
-  .b-tooltip-host--bottom:hover::after { translate: -50% 0; }
+  @media (hover: hover) {
+    .b-tooltip-host--bottom:hover::after { translate: -50% 0; }
+  }
 
   /* ---- Hover Card ----------------------------------------------------------------------- */
   .b-hover-card-host { position: relative; display: inline-block; }
@@ -495,13 +510,20 @@
     box-shadow: var(--b-glass-edge);
     pointer-events: none;
   }
-  .b-hover-card-host:hover .b-hover-card,
   .b-hover-card-host:focus-within .b-hover-card {
     opacity: 1;
     translate: 0 0;
     visibility: visible;
     transition-delay: 250ms;
   }
+  @media (hover: hover) {
+    .b-hover-card-host:hover .b-hover-card {
+      opacity: 1;
+      translate: 0 0;
+      visibility: visible;
+      transition-delay: 250ms;
+    }
+  }
 
   /* ---- Lightbox --------------------------------------------------------------------------- */
   .b-lightbox {

package/css/components/productivity.css

@@ -156,7 +156,9 @@
     cursor: grab;
     transition: box-shadow var(--b-duration-fast), translate var(--b-duration-fast) var(--b-ease-out);
   }
-  .b-task:hover { box-shadow: var(--b-shadow-sm); translate: 0 -1px; }
+  @media (hover: hover) {
+    .b-task:hover { box-shadow: var(--b-shadow-sm); translate: 0 -1px; }
+  }
   .b-task.is-dragging { opacity: 0.55; rotate: 2deg; cursor: grabbing; }
   .b-task__title { font-size: var(--b-text-footnote); font-weight: var(--b-weight-medium); }
   .b-task__meta {
@@ -177,7 +179,9 @@
     border-radius: var(--b-radius-md);
     font-size: var(--b-text-subheadline);
   }
-  .b-task-row:hover { background: var(--b-fill-quaternary); }
+  @media (hover: hover) {
+    .b-task-row:hover { background: var(--b-fill-quaternary); }
+  }
   .b-task-row.is-done .b-task-row__title {
     color: var(--b-text-tertiary);
     text-decoration: line-through;
@@ -294,7 +298,9 @@
     cursor: pointer;
     transition: filter var(--b-duration-fast);
   }
-  .b-gantt__bar:hover { filter: brightness(1.1); }
+  @media (hover: hover) {
+    .b-gantt__bar:hover { filter: brightness(1.1); }
+  }
   .b-gantt__bar > i {
     position: absolute;
     inset: 0;
@@ -384,7 +390,9 @@
     color: var(--b-text);
     cursor: pointer;
   }
-  .b-app-tile:hover { text-decoration: none; }
+  @media (hover: hover) {
+    .b-app-tile:hover { text-decoration: none; }
+  }
   .b-app-tile__icon {
     display: grid;
     place-items: center;
@@ -396,7 +404,9 @@
     box-shadow: var(--b-glass-edge), var(--b-shadow-sm);
     transition: scale var(--b-duration-fast) var(--b-ease-bounce);
   }
-  .b-app-tile:hover .b-app-tile__icon { scale: 1.06; }
+  @media (hover: hover) {
+    .b-app-tile:hover .b-app-tile__icon { scale: 1.06; }
+  }
   .b-app-tile:active .b-app-tile__icon { scale: 0.94; }
   .b-app-tile__label {
     font-size: var(--b-text-caption);
@@ -447,7 +457,9 @@
     transition: scale var(--b-duration-fast) var(--b-ease-bounce),
                 translate var(--b-duration-fast) var(--b-ease-bounce);
   }
-  .b-dock__item:hover { scale: 1.28; translate: 0 -6px; }
+  @media (hover: hover) {
+    .b-dock__item:hover { scale: 1.28; translate: 0 -6px; }
+  }
   .b-dock__item.is-active { position: relative; }
   .b-dock__item.is-active::after {
     content: "";
@@ -533,7 +545,9 @@
     padding: var(--b-space-1);
     border-radius: var(--b-radius-xs);
   }
-  .b-drag-handle:hover { color: var(--b-text-secondary); background: var(--b-fill-quaternary); }
+  @media (hover: hover) {
+    .b-drag-handle:hover { color: var(--b-text-secondary); background: var(--b-fill-quaternary); }
+  }
   .b-drag-handle:active { cursor: grabbing; }
   .b-drag-ghost { opacity: 0.5; }
   .b-drop-indicator {