barua-ui 0.12.1 → 0.13.0

package/css/components/nav.css

@@ -34,6 +34,10 @@
     display: flex;
     align-items: center;
     gap: var(--b-space-2);
+    /* A brand that yields width drops its mark to nothing and wraps its name
+       onto two lines. It is the one thing in the bar that never shrinks. */
+    flex: none;
+    white-space: nowrap;
     font-weight: var(--b-weight-bold);
     font-size: var(--b-text-callout);
     color: var(--b-text);
@@ -43,8 +47,14 @@
     display: flex;
     align-items: center;
     gap: var(--b-space-1);
+    /* The rail is what gives way when the bar is short of room; without this
+       it held its content width and pushed the trailing actions off the
+       screen, where a notifications button nobody can reach is not chrome. */
+    min-width: 0;
   }
   .b-topnav__link {
+    flex: none;
+    white-space: nowrap;
     padding: var(--b-space-1) var(--b-space-3);
     font-size: var(--b-text-subheadline);
     font-weight: var(--b-weight-medium);
@@ -54,6 +64,35 @@
   }
   .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. */
+  .b-topnav > :is(.b-btn, .b-avatar, .b-dropdown, .b-badge, .b-input-group, .b-status) { flex: none; }
+  /* The phone way in: a menu button that only exists on a phone, for a bar
+     whose destinations live in a .b-sidebar or .b-drawer rather than on it. */
+  .b-topnav__menu { display: none; }
+  @media (max-width: 767px) {
+    .b-topnav {
+      gap: var(--b-space-2);
+      padding-inline: var(--b-space-3);
+      flex-wrap: wrap;
+      row-gap: 0;
+      height: auto;
+      min-height: var(--b-topbar-h);
+    }
+    .b-topnav__menu { display: inline-flex; }
+    /* Inline destinations drop to a full-bleed strip under the brand row that
+       scrolls sideways, the way .b-tabs does. Nothing leaves the screen. */
+    .b-topnav__links {
+      order: 1;
+      flex: 1 0 100%;
+      margin-inline: calc(var(--b-space-3) * -1);
+      padding-inline: var(--b-space-3);
+      padding-block: var(--b-space-1) var(--b-space-2);
+      overflow-x: auto;
+      scrollbar-width: none;
+    }
+    .b-topnav__links::-webkit-scrollbar { display: none; }
+  }
 
   /* ---- Sidebar ------------------------------------------------------------ */
   .b-sidebar {
@@ -204,7 +243,8 @@
   /* ---- Tab Bar (segmented, iOS-style) ------------------------------------- */
   .b-segmented {
     display: inline-flex;
-    padding: 2px;
+    padding: 1px;
+    border: 1px solid transparent;
     gap: 2px;
     background: var(--b-fill-tertiary);
     border-radius: var(--b-radius-md);
@@ -218,12 +258,12 @@
     box-shadow: var(--b-glass-ambient);
   }
   .b-segmented__item {
-    padding: calc(var(--b-space-1) + 1px) var(--b-space-4);
+    padding: var(--b-space-1) calc(var(--b-space-4) - 1px);
     font-size: var(--b-text-footnote);
     font-weight: var(--b-weight-medium);
     color: var(--b-text-secondary);
     background: none;
-    border: none;
+    border: 1px solid transparent;
     border-radius: calc(var(--b-radius-md) - 2px);
     cursor: pointer;
     transition: background var(--b-duration-fast), color var(--b-duration-fast),
@@ -300,7 +340,7 @@
     color: var(--b-text-quaternary);
     padding-inline: var(--b-space-1);
   }
-  .b-breadcrumbs a { color: var(--b-text-secondary); }
+  .b-breadcrumbs a:not(.b-btn) { color: var(--b-text-secondary); }
   .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); }
 
@@ -332,7 +372,7 @@
   .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);
+    background: var(--b-color-accent-fill);
   }
   .b-pagination__ellipsis { color: var(--b-text-quaternary); padding-inline: var(--b-space-1); }
 
@@ -381,7 +421,7 @@
   .b-steps li.is-complete::before {
     content: "✓";
     color: var(--b-color-on-accent);
-    background: var(--b-color-accent);
+    background: var(--b-color-accent-fill);
   }
   .b-steps li.is-complete:not(:last-child)::after { background: var(--b-color-accent); }
   .b-steps li.is-active { color: var(--b-text); font-weight: var(--b-weight-semibold); }
@@ -413,7 +453,7 @@
   }
   .b-menubar__item:hover, .b-menubar__item.is-active,
   .b-menubar__item[aria-expanded="true"] {
-    background: var(--b-color-accent);
+    background: var(--b-color-accent-fill);
     color: var(--b-color-on-accent);
   }
 
@@ -468,7 +508,7 @@
     white-space: nowrap;
   }
   .b-menu__item:hover, .b-menu__item.is-active {
-    background: var(--b-color-accent);
+    background: var(--b-color-accent-fill);
     color: var(--b-color-on-accent);
     text-decoration: none;
   }
@@ -478,7 +518,7 @@
     background: none;
     cursor: not-allowed;
   }
-  .b-menu__item--danger { color: var(--b-color-danger); }
+  .b-menu__item--danger { color: var(--b-color-danger-text); }
   .b-menu__item--danger:hover { background: var(--b-color-danger); color: #fff; }
   .b-menu__item svg { width: 1rem; height: 1rem; flex: none; opacity: 0.85; }
   .b-menu__shortcut {
@@ -504,7 +544,7 @@
   }
   .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); color: var(--b-color-on-accent); }
+  .b-menu__sub:hover > .b-menu__item { background: var(--b-color-accent-fill); color: var(--b-color-on-accent); }
 
   .b-menu__separator {
     height: 1px;
@@ -546,7 +586,13 @@
   }
 
   /* ---- Command Menu / Command Palette ---------------------------------------- */
-  .b-cmdk {
+  /* .b-cmdk is composed onto the platform dialog (<dialog class="b-modal b-cmdk">).
+     .b-modal sits later in the import order at equal specificity, so without
+     the composed form the palette rendered as a 448px opaque modal instead of
+     the 600px heavy glass documented here. The surface wins by specificity;
+     .b-modal still supplies the open/close transition and ::backdrop. */
+  .b-cmdk,
+  .b-modal.b-cmdk {
     width: min(37.5rem, calc(100vw - 2rem));
     padding: 0;
     user-select: none;
@@ -577,7 +623,6 @@
     outline: none;
     user-select: text;
   }
-  .b-cmdk__input:focus-visible { box-shadow: none; }
   .b-cmdk__list {
     max-height: min(20rem, 50vh);
     overflow: auto;
@@ -638,6 +683,10 @@
     max-height: none;
     height: 100dvh;
     overflow: hidden;
+    /* A column, so a long body scrolls inside the drawer instead of being
+       clipped by it: the header keeps its height and the body takes the rest. */
+    display: flex;
+    flex-direction: column;
     transition: translate var(--b-duration-slow) var(--b-ease-spring),
                 display var(--b-duration-slow) allow-discrete,
                 overlay var(--b-duration-slow) allow-discrete;
@@ -676,6 +725,7 @@
     backdrop-filter: blur(var(--b-blur-xs));
   }
   .b-drawer__header {
+    flex: none;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -683,5 +733,5 @@
     border-bottom: 1px solid var(--b-separator);
     font-weight: var(--b-weight-semibold);
   }
-  .b-drawer__body { padding: var(--b-space-3); overflow-y: auto; }
+  .b-drawer__body { padding: var(--b-space-3); flex: 1 1 auto; min-height: 0; overflow-y: auto; }
 }

package/css/components/overlays.css

@@ -98,7 +98,9 @@
   .b-modal__close:hover { background: var(--b-fill-secondary); color: var(--b-text); }
 
   /* ---- Alert Dialog (centered, compact) --------------------------------------- */
-  .b-alert-dialog { width: min(18.5rem, calc(100vw - 2rem)); text-align: center; }
+  /* Composed onto .b-modal like .b-cmdk; explicit so a reorder cannot break it. */
+  .b-alert-dialog,
+  .b-modal.b-alert-dialog { width: min(18.5rem, calc(100vw - 2rem)); text-align: center; }
   .b-alert-dialog .b-modal__body {
     padding: var(--b-space-6) var(--b-space-5) var(--b-space-4);
   }
@@ -124,7 +126,7 @@
   }
   .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); }
+  .b-alert-dialog__actions .is-destructive { color: var(--b-color-danger-text); }
   .b-alert-dialog__actions .is-primary { font-weight: var(--b-weight-semibold); }
   .b-alert-dialog__actions--row { flex-direction: row; }
   .b-alert-dialog__actions--row button { flex: 1; }
@@ -144,6 +146,12 @@
     max-height: none;
     height: 100dvh;
     padding: 0;
+    /* A column: the header keeps its height and the body is the one pane that
+       scrolls. With the body at height:100% under a clipped dialog, a long
+       sheet simply could not be scrolled to its end. */
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
     background: var(--b-elevated);
     border: none;
     border-inline-start: 1px solid var(--b-hairline);
@@ -176,13 +184,14 @@
     transition: opacity var(--b-duration-normal) var(--b-ease-out);
   }
   .b-sheet__header {
+    flex: none;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: var(--b-space-4) var(--b-space-5);
     border-bottom: 1px solid var(--b-separator);
   }
-  .b-sheet__body { padding: var(--b-space-5); overflow-y: auto; height: 100%; }
+  .b-sheet__body { padding: var(--b-space-5); flex: 1 1 auto; min-height: 0; overflow-y: auto; }
 
   /* ---- Bottom Sheet --------------------------------------------------------------- */
   .b-bottom-sheet {
@@ -194,6 +203,8 @@
     width: min(34rem, 100vw);
     max-height: 85dvh;
     padding: 0;
+    display: flex;
+    flex-direction: column;
     background: var(--b-material-thick-bg);
     -webkit-backdrop-filter: var(--b-glass-heavy);
     backdrop-filter: var(--b-glass-heavy);
@@ -223,6 +234,7 @@
   }
   .b-bottom-sheet::backdrop { background: var(--b-scrim); }
   .b-bottom-sheet__grabber {
+    flex: none;
     width: 2.25rem;
     height: 0.3rem;
     margin: var(--b-space-2) auto 0;
@@ -232,6 +244,8 @@
   .b-bottom-sheet__body {
     padding: var(--b-space-4) var(--b-space-5);
     padding-bottom: max(var(--b-space-5), env(safe-area-inset-bottom));
+    flex: 1 1 auto;
+    min-height: 0;
     overflow-y: auto;
   }
 
@@ -292,7 +306,7 @@
   }
   .b-action-sheet__group button:first-child { border-top: none; }
   .b-action-sheet__group button:hover { background: var(--b-fill-quaternary); }
-  .b-action-sheet__group button.is-destructive { color: var(--b-color-danger); }
+  .b-action-sheet__group button.is-destructive { color: var(--b-color-danger-text); }
   .b-action-sheet__cancel {
     margin-block-start: var(--b-space-2);
     font-weight: var(--b-weight-semibold);
@@ -569,6 +583,8 @@
     max-height: none;
     margin: 0;
     padding: 0;
+    display: flex;
+    flex-direction: column;
     background: var(--b-bg);
     border: none;
     transition: opacity var(--b-duration-normal) var(--b-ease-out),
@@ -581,11 +597,12 @@
     .b-fullscreen[open] { opacity: 0; }
   }
   .b-fullscreen__bar {
+    flex: none;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: var(--b-space-3) var(--b-space-5);
     border-bottom: 1px solid var(--b-separator);
   }
-  .b-fullscreen__body { padding: var(--b-space-6); overflow: auto; height: calc(100dvh - var(--b-topbar-h)); }
+  .b-fullscreen__body { padding: var(--b-space-6); flex: 1 1 auto; min-height: 0; overflow: auto; }
 }

package/css/components/productivity.css

@@ -25,21 +25,56 @@
   .b-workspace__main {
     grid-area: main;
     overflow: auto;
-    padding: var(--b-space-6);
-  }
+    padding-block: var(--b-space-6);
+    /* The pane's margin, and the only one: 16px on a phone, 24px on a desktop.
+       A container inside it does not repeat it, the same rule as
+       .b-chapter > .b-container: at 390 the shell, the container and a tip each
+       took a gutter and the tip's words were left 200px. */
+    padding-inline: clamp(var(--b-space-4), 3vw, var(--b-space-6));
+  }
+  .b-workspace__main > .b-container { padding-inline: 0; }
   .b-workspace > .b-inspector { grid-area: inspector; }
   .b-workspace > .b-statusbar { grid-area: statusbar; }
+  /* On a phone the shell is one column: chrome above, the work surface below.
+     Side panes leave the grid and a .b-topnav__menu button opens the sidebar
+     as a .b-drawer instead. Without this every page had to remember
+     .b-hide-mobile itself, and the ones that forgot left main a 150px slit
+     beside a full-width sidebar. The screen still ends at the screen: the
+     shell keeps 100dvh and main stays the one scroller. */
+  @media (max-width: 767px) {
+    .b-workspace {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-areas:
+        "topbar"
+        "main"
+        "statusbar";
+    }
+    .b-workspace > .b-sidebar,
+    .b-workspace > .b-rail,
+    .b-workspace > .b-inspector { display: none; }
+    .b-workspace__main { padding-block: var(--b-space-4); }
+  }
 
   /* Dashboard grid */
   .b-dashboard {
     display: grid;
     gap: var(--b-space-4);
     grid-template-columns: repeat(12, minmax(0, 1fr));
+    /* Spans answer to the grid's own width, not the viewport. Inside a
+       workspace the main pane is the viewport minus a rail, a sidebar and an
+       inspector, and a viewport query handed a 12-column layout to a 392px
+       pane at exactly the width the side panes were still docked. Same
+       sm/md ladder as .b-cq, so one set of breakpoints means one thing. */
+    container-type: inline-size;
   }
   .b-dashboard > * { grid-column: span 12; }
-  @media (min-width: 768px) {
-    /* The full scale: a twelve-column grid that only answers to five of the
-       twelve is a trap — b-span-7 silently did nothing. */
+  /* sm: anything up to a half becomes a half; wider spans stay full. */
+  @container (min-width: 24rem) {
+    .b-dashboard > :is(.b-span-2, .b-span-3, .b-span-4, .b-span-5, .b-span-6) { grid-column: span 6; }
+  }
+  /* md: the full scale. A twelve-column grid that only answers to five of the
+     twelve is a trap; b-span-7 silently did nothing. */
+  @container (min-width: 40rem) {
     .b-dashboard > .b-span-2 { grid-column: span 2; }
     .b-dashboard > .b-span-3 { grid-column: span 3; }
     .b-dashboard > .b-span-4 { grid-column: span 4; }
@@ -153,12 +188,16 @@
     color: var(--b-text-tertiary);
     font-variant-numeric: tabular-nums;
   }
-  .b-task-row__due.is-overdue { color: var(--b-color-danger); font-weight: var(--b-weight-medium); }
+  .b-task-row__due.is-overdue { color: var(--b-color-danger-text); font-weight: var(--b-weight-medium); }
 
   /* ---- Calendar View (month grid) -------------------------------------------------- */
   .b-calview {
     display: grid;
-    grid-template-columns: repeat(7, 1fr);
+    /* A bare 1fr is minmax(auto, 1fr): a nowrap .b-event set the column's
+       minimum, the seven of them overflowed the clipped grid on a phone and
+       Friday to Sunday were simply gone. minmax(0, 1fr) lets a column be
+       narrower than its longest event, which then ellipsises as designed. */
+    grid-template-columns: repeat(7, minmax(0, 1fr));
     background: var(--b-surface);
     border: 1px solid var(--b-separator);
     border-radius: var(--b-radius-xl);
@@ -176,6 +215,7 @@
     border-bottom: 1px solid var(--b-separator);
   }
   .b-calview__cell {
+    min-width: 0;
     min-height: 6rem;
     padding: var(--b-space-1);
     border-bottom: 1px solid var(--b-separator);
@@ -192,12 +232,12 @@
     color: var(--b-text-secondary);
   }
   .b-calview__cell.is-today .b-calview__date {
-    background: var(--b-color-accent);
+    background: var(--b-color-accent-fill);
     color: var(--b-color-on-accent);
     font-weight: var(--b-weight-semibold);
   }
   .b-calview__cell.is-other-month { background: var(--b-fill-quaternary); }
-  .b-calview__cell.is-other-month .b-calview__date { color: var(--b-text-quaternary); }
+  .b-calview__cell.is-other-month .b-calview__date { color: var(--b-text-tertiary); }
   .b-event {
     display: block;
     margin-block-start: 2px;
@@ -213,9 +253,9 @@
     white-space: nowrap;
     cursor: pointer;
   }
-  .b-event--green { color: var(--b-color-success); background: var(--b-color-success-soft); border-color: var(--b-color-success); }
-  .b-event--orange { color: light-dark(#b46200, var(--b-color-warning)); background: var(--b-color-warning-soft); border-color: var(--b-color-warning); }
-  .b-event--purple { color: var(--b-color-purple); background: var(--b-color-purple-soft); border-color: var(--b-color-purple); }
+  .b-event--green { color: var(--b-color-success-text); background: var(--b-color-success-soft); border-color: var(--b-color-success-text); }
+  .b-event--orange { color: var(--b-color-warning-text); background: var(--b-color-warning-soft); border-color: var(--b-color-warning); }
+  .b-event--purple { color: var(--b-color-purple-text); background: var(--b-color-purple-soft); border-color: var(--b-color-purple-text); }
 
   /* ---- Gantt View --------------------------------------------------------------------- */
   .b-gantt {

package/css/components/specialized.css

@@ -9,6 +9,9 @@
 @layer components {
   /* ---- Calendar ------------------------------------------------------------- */
   .b-calendar {
+    /* The cell, named once, so a coarse pointer can grow it to the touch
+       target and the selected day stays a circle. */
+    --b-calendar-cell: 2.25rem;
     display: inline-flex;
     flex-direction: column;
     gap: var(--b-space-2);
@@ -27,7 +30,7 @@
   .b-calendar__month { font-weight: var(--b-weight-semibold); font-size: var(--b-text-subheadline); }
   .b-calendar__grid {
     display: grid;
-    grid-template-columns: repeat(7, 2.25rem);
+    grid-template-columns: repeat(7, var(--b-calendar-cell));
     gap: 2px;
   }
   .b-calendar__weekday {
@@ -42,7 +45,7 @@
   .b-calendar__day {
     display: grid;
     place-items: center;
-    height: 2.25rem;
+    height: var(--b-calendar-cell);
     font-size: var(--b-text-footnote);
     font-variant-numeric: tabular-nums;
     color: var(--b-text);
@@ -53,14 +56,14 @@
     transition: background var(--b-duration-fast);
   }
   .b-calendar__day:hover { background: var(--b-fill-tertiary); }
-  .b-calendar__day.is-muted { color: var(--b-text-quaternary); }
+  .b-calendar__day.is-muted { color: var(--b-text-tertiary); }
   .b-calendar__day.is-today {
     color: var(--b-color-accent-text);
     font-weight: var(--b-weight-bold);
   }
   .b-calendar__day.is-selected {
     color: var(--b-color-on-accent);
-    background: var(--b-color-accent);
+    background: var(--b-color-accent-fill);
     font-weight: var(--b-weight-semibold);
   }
   .b-calendar__day.is-in-range { background: var(--b-color-accent-soft); border-radius: 0; }
@@ -270,7 +273,8 @@
   }
   .b-multiselect:focus-within {
     border-color: var(--b-color-accent);
-    box-shadow: var(--b-focus-ring);
+    outline: var(--b-focus-ring);
+    outline-offset: var(--b-focus-ring-offset);
   }
   .b-multiselect input {
     flex: 1;
@@ -281,7 +285,6 @@
     font-size: var(--b-text-subheadline);
     padding: var(--b-space-1);
   }
-  .b-multiselect input:focus-visible { box-shadow: none; }
   .b-multiselect .b-chip { height: 1.5rem; font-size: var(--b-text-caption); }
 
   /* ---- File Browser / Folder Tree ------------------------------------------------------- */
@@ -324,7 +327,7 @@
   .b-file-tile:hover { background: var(--b-fill-quaternary); }
   .b-file-tile.is-selected { background: var(--b-color-accent-soft); }
   .b-file-tile.is-selected .b-file-tile__name {
-    background: var(--b-color-accent);
+    background: var(--b-color-accent-fill);
     color: var(--b-color-on-accent);
     border-radius: var(--b-radius-xs);
     padding-inline: 0.25rem;
@@ -363,5 +366,23 @@
     white-space: nowrap;
   }
   .b-log--audit .b-log__entry { grid-template-columns: 7.5rem max-content 1fr max-content; }
+  /* Four fixed columns are a desktop shape: at 390 they overflowed the page
+     by 11px and were clipped inside a card with nothing to scroll. On a phone
+     the entry becomes three rows: who and when, what, and where from. */
+  @media (max-width: 40rem) {
+    .b-log--audit .b-log__entry {
+      grid-template-columns: max-content 1fr;
+      grid-template-areas:
+        "actor time"
+        "action action"
+        "ip ip";
+      row-gap: var(--b-space-1);
+      align-items: baseline;
+    }
+    .b-log--audit .b-log__actor { grid-area: actor; }
+    .b-log--audit .b-log__time { grid-area: time; justify-self: end; }
+    .b-log--audit .b-log__action { grid-area: action; }
+    .b-log--audit .b-log__ip { grid-area: ip; }
+  }
   .b-log__ip { font-family: var(--b-font-mono); font-size: var(--b-text-caption); color: var(--b-text-tertiary); }
 }

package/css/tokens.css

@@ -38,8 +38,16 @@
     --b-color-accent-hover:  light-dark(#0066e0, #3395ff);
     --b-color-accent-active: light-dark(#0052b4, #66afff);
     --b-color-accent-soft:   light-dark(rgba(10, 122, 255, 0.12), rgba(10, 132, 255, 0.18));
-    --b-color-accent-text:   light-dark(#0066e0, #6cb2ff);
+    --b-color-accent-text:   light-dark(#0064dc, #6cb2ff);   /* 4.63:1 on the darkest light surface */
     --b-color-on-accent:     #ffffff;
+    /* Fills that carry --b-color-on-accent text. One step darker than the
+       accent so white holds 4.5:1 in both schemes (5.28 light, 4.76 dark;
+       the accent itself was 4.01 and 3.65). States go darker, never lighter:
+       a lighter fill under white ink loses contrast. The accent stays what it
+       was for strokes, rings, links and tinted text, where 3:1 is the bar. */
+    --b-color-accent-fill:        light-dark(#0066e0, #0a6cf0);
+    --b-color-accent-fill-hover:  light-dark(#0052b4, #0066e0);
+    --b-color-accent-fill-active: light-dark(#003d87, #0052b4);
 
     /* ------------------------------------------------------------------ *
      *  Color — Apple system palette
@@ -57,6 +65,17 @@
     --b-color-pink:   light-dark(#ff2d55, #ff375f);
     --b-color-brown:  light-dark(#a2845e, #ac8e68);
 
+    /* Inks. The hues above are fills; text set in a hue needs a darker cousin
+       in light and a lighter one in dark, exactly as --b-color-accent-text
+       does for the blue. Green as text was 2.22:1, red 3.55:1, and the retints
+       handed the raw hue to every link. Each pair clears 4.5:1 on white, the
+       canvas, the elevated card and its own -soft fill. */
+    --b-color-green-text:  light-dark(#1a7a38, #4cd964);
+    --b-color-teal-text:   light-dark(#0a6f82, #5fd6ea);
+    --b-color-pink-text:   light-dark(#d1173f, #ff6b85);
+    --b-color-indigo-text: light-dark(#4a48c4, #9d9bff);
+    --b-color-purple-text: light-dark(#8a2fb8, #d18cff);
+
     --b-color-red-soft:    light-dark(rgba(255, 59, 48, 0.12),  rgba(255, 69, 58, 0.18));
     --b-color-orange-soft: light-dark(rgba(255, 149, 0, 0.14),  rgba(255, 159, 10, 0.18));
     --b-color-yellow-soft: light-dark(rgba(255, 204, 0, 0.18),  rgba(255, 214, 10, 0.18));
@@ -64,6 +83,7 @@
     --b-color-indigo-soft: light-dark(rgba(88, 86, 214, 0.12),  rgba(94, 92, 230, 0.18));
     --b-color-purple-soft: light-dark(rgba(175, 82, 222, 0.12), rgba(191, 90, 242, 0.18));
     --b-color-pink-soft:   light-dark(rgba(255, 45, 85, 0.12),  rgba(255, 55, 95, 0.18));
+    --b-color-teal-soft:   light-dark(rgba(48, 176, 199, 0.14), rgba(64, 203, 224, 0.18));
 
     /* Semantic aliases */
     --b-color-success: var(--b-color-green);
@@ -74,6 +94,14 @@
     --b-color-warning-soft: var(--b-color-orange-soft);
     --b-color-danger-soft:  var(--b-color-red-soft);
     --b-color-info-soft:    var(--b-color-accent-soft);
+    --b-color-success-text: var(--b-color-green-text);
+    --b-color-warning-text: light-dark(#8a4b00, #ffb340);
+    --b-color-danger-text:  light-dark(#c9241a, #ff6961);
+    /* Solid status fills that carry white text: the raw hues were 2.22 (green)
+       and 3.55 (red) under white. */
+    --b-color-success-fill: light-dark(#1a8438, #1f8839);
+    --b-color-danger-fill:  light-dark(#d70015, #e0261c);
+    --b-color-warning-fill: light-dark(#995900, #a66100);
 
     /* ------------------------------------------------------------------ *
      *  Color — grays (Apple systemGray 1–6)
@@ -100,8 +128,13 @@
      *  Color — text (Apple label hierarchy)
      * ------------------------------------------------------------------ */
     --b-text:            light-dark(rgba(10, 12, 20, 0.92), rgba(245, 246, 250, 0.96));
-    --b-text-secondary:  light-dark(rgba(20, 24, 38, 0.62), rgba(235, 235, 245, 0.64));
-    --b-text-tertiary:   light-dark(rgba(20, 24, 38, 0.40), rgba(235, 235, 245, 0.42));
+    /* The ladder is tuned so tertiary still clears 4.5:1 on the darkest
+       light surface (#ececf2) and the darkest dark one (#303038): at 0.40 it
+       rendered at 2.53:1 and was the ink of every placeholder, timestamp and
+       hint in the system. Quaternary is for glyphs and watermarks, never for
+       something a person has to read. */
+    --b-text-secondary:  light-dark(rgba(20, 24, 38, 0.74), rgba(235, 235, 245, 0.76));
+    --b-text-tertiary:   light-dark(rgba(20, 24, 38, 0.62), rgba(235, 235, 245, 0.58));
     --b-text-quaternary: light-dark(rgba(20, 24, 38, 0.22), rgba(235, 235, 245, 0.24));
 
     /* ------------------------------------------------------------------ *
@@ -317,7 +350,17 @@
     --b-control-h-lg: 2.75rem;   /* 44 — default touch target */
     --b-control-h-xl: 3.25rem;   /* 52 */
     --b-touch-target: 44px;
-    --b-focus-ring: 0 0 0 3.5px color-mix(in srgb, var(--b-color-accent) 30%, transparent);
+    /* The focus ring is an outline, not a shadow. A shadow ring lost to every
+       component that owns box-shadow for its material, which is most of them,
+       so the primary button, the FAB and every button in liquid mode never
+       showed focus at all; an outline competes with nothing. It is opaque
+       (2px of the accent, 2px off the control) because the old 30% halo sat at
+       1.46:1 against the page, below the 3:1 an indicator needs. Components
+       flush inside a clipping container pull it inward with the offset. */
+    --b-focus-ring-color:  var(--b-color-accent);
+    --b-focus-ring-width:  2px;
+    --b-focus-ring-offset: 2px;
+    --b-focus-ring: var(--b-focus-ring-width) solid var(--b-focus-ring-color);
     --b-container-sm: 40rem;
     --b-container-md: 48rem;
     --b-container-lg: 64rem;
@@ -339,6 +382,11 @@
   /* Explicit theme overrides — win over system preference */
   [data-theme="light"] { color-scheme: light; }
   [data-theme="dark"]  { color-scheme: dark; }
+  /* Re-anchor the ink inside a themed subtree. `color` arrives from the page
+     around it as an already-resolved colour, so redeclaring the tokens flipped
+     the surfaces but not the words on them: a light island in a dark page kept
+     white text on its new white cards. Same rule the wallpaper scopes carry. */
+  [data-theme], .b-chapter--dark { color: var(--b-text); }
 
   /* ---- Baked glass -------------------------------------------------------
    *
@@ -427,11 +475,15 @@
   }
 
   /* Accent re-tinting: <html data-accent="purple"> etc. */
-  [data-accent="indigo"] { --b-color-accent: var(--b-color-indigo); --b-color-accent-hover: color-mix(in srgb, var(--b-color-indigo) 85%, black); --b-color-accent-soft: var(--b-color-indigo-soft); --b-color-accent-text: var(--b-color-indigo); }
-  [data-accent="purple"] { --b-color-accent: var(--b-color-purple); --b-color-accent-hover: color-mix(in srgb, var(--b-color-purple) 85%, black); --b-color-accent-soft: var(--b-color-purple-soft); --b-color-accent-text: var(--b-color-purple); }
-  [data-accent="pink"]   { --b-color-accent: var(--b-color-pink);   --b-color-accent-hover: color-mix(in srgb, var(--b-color-pink) 85%, black);   --b-color-accent-soft: var(--b-color-pink-soft);   --b-color-accent-text: var(--b-color-pink); }
-  [data-accent="teal"]   { --b-color-accent: var(--b-color-teal);   --b-color-accent-hover: color-mix(in srgb, var(--b-color-teal) 85%, black);   --b-color-accent-soft: rgba(48, 176, 199, 0.14);   --b-color-accent-text: var(--b-color-teal); }
-  [data-accent="green"]  { --b-color-accent: var(--b-color-green);  --b-color-accent-hover: color-mix(in srgb, var(--b-color-green) 85%, black);  --b-color-accent-soft: var(--b-color-green-soft);  --b-color-accent-text: var(--b-color-green); }
+  /* Each retint hands the ink jobs to the -text pair and the fill jobs to a
+     darker mix, so a green accent does not put 2.2:1 links and 2.2:1 buttons
+     on the page. Teal and green are too light to carry the focus ring; they
+     supply a darker ring colour. */
+  [data-accent="indigo"] { --b-color-accent: var(--b-color-indigo); --b-color-accent-hover: color-mix(in srgb, var(--b-color-indigo) 85%, black); --b-color-accent-soft: var(--b-color-indigo-soft); --b-color-accent-text: var(--b-color-indigo-text); --b-color-accent-fill: var(--b-color-indigo); --b-color-accent-fill-hover: color-mix(in srgb, var(--b-color-indigo) 85%, black); --b-color-accent-fill-active: color-mix(in srgb, var(--b-color-indigo) 75%, black); }
+  [data-accent="purple"] { --b-color-accent: var(--b-color-purple); --b-color-accent-hover: color-mix(in srgb, var(--b-color-purple) 85%, black); --b-color-accent-soft: var(--b-color-purple-soft); --b-color-accent-text: var(--b-color-purple-text); --b-color-accent-fill: color-mix(in srgb, var(--b-color-purple) 85%, black); --b-color-accent-fill-hover: color-mix(in srgb, var(--b-color-purple) 75%, black); --b-color-accent-fill-active: color-mix(in srgb, var(--b-color-purple) 65%, black); }
+  [data-accent="pink"]   { --b-color-accent: var(--b-color-pink);   --b-color-accent-hover: color-mix(in srgb, var(--b-color-pink) 85%, black);   --b-color-accent-soft: var(--b-color-pink-soft);   --b-color-accent-text: var(--b-color-pink-text);   --b-color-accent-fill: color-mix(in srgb, var(--b-color-pink) 85%, black);   --b-color-accent-fill-hover: color-mix(in srgb, var(--b-color-pink) 75%, black);   --b-color-accent-fill-active: color-mix(in srgb, var(--b-color-pink) 65%, black); }
+  [data-accent="teal"]   { --b-color-accent: var(--b-color-teal);   --b-color-accent-hover: color-mix(in srgb, var(--b-color-teal) 85%, black);   --b-color-accent-soft: var(--b-color-teal-soft);   --b-color-accent-text: var(--b-color-teal-text);   --b-color-accent-fill: color-mix(in srgb, var(--b-color-teal) 60%, black);   --b-color-accent-fill-hover: color-mix(in srgb, var(--b-color-teal) 50%, black);   --b-color-accent-fill-active: color-mix(in srgb, var(--b-color-teal) 40%, black);   --b-focus-ring-color: var(--b-color-accent-hover); }
+  [data-accent="green"]  { --b-color-accent: var(--b-color-green);  --b-color-accent-hover: color-mix(in srgb, var(--b-color-green) 85%, black);  --b-color-accent-soft: var(--b-color-green-soft);  --b-color-accent-text: var(--b-color-green-text);  --b-color-accent-fill: color-mix(in srgb, var(--b-color-green) 65%, black);  --b-color-accent-fill-hover: color-mix(in srgb, var(--b-color-green) 55%, black);  --b-color-accent-fill-active: color-mix(in srgb, var(--b-color-green) 45%, black);  --b-focus-ring-color: light-dark(color-mix(in srgb, var(--b-color-green) 70%, black), var(--b-color-green)); }
 
   /* ---- Glass keyframes (Liquid Glass) ----------------------------------- */
   /* Shimmer — light flash sweeping across on press/interaction */

package/css/utilities.css

@@ -442,9 +442,9 @@
   .b-text-secondary  { color: var(--b-text-secondary); }
   .b-text-tertiary   { color: var(--b-text-tertiary); }
   .b-text-accent     { color: var(--b-color-accent-text); }
-  .b-text-success    { color: var(--b-color-success); }
-  .b-text-warning    { color: var(--b-color-warning); }
-  .b-text-danger     { color: var(--b-color-danger); }
+  .b-text-success    { color: var(--b-color-success-text); }
+  .b-text-warning    { color: var(--b-color-warning-text); }
+  .b-text-danger     { color: var(--b-color-danger-text); }
   .b-text-start      { text-align: start; }
   .b-text-center     { text-align: center; }
   .b-text-end        { text-align: end; }
@@ -628,6 +628,19 @@
     width: max(100%, var(--b-touch-target));
     height: max(100%, var(--b-touch-target));
   }
+  /* ---- Coarse pointer: the primitives meet the touch target ----------------
+     A segmented item at 30px, a chip at 30px, a menu row at 39px are fine
+     under a cursor and misses under a thumb. On a coarse pointer they grow to
+     the target without changing shape; a 44px calendar cell keeps its circle
+     and the dropdown that holds it may not push off a 390 screen. */
+  @media (pointer: coarse) {
+    :is(.b-segmented__item, .b-chip, .b-menu__item, .b-sidebar__item,
+        .b-topnav__link, .b-pagination__item) {
+      min-block-size: var(--b-touch-target);
+    }
+    .b-calendar { --b-calendar-cell: var(--b-touch-target); }
+    .b-dropdown > .b-menu { max-inline-size: calc(100vw - 2 * var(--b-space-4)); }
+  }
 
   /* ---- Responsive visibility --------------------------------------------- */
   @media (max-width: 767px) {