@prenta/admin 2.6.1 → 2.8.0

package/src/styles/responsive.css

@@ -28,14 +28,23 @@
  * A visible focus ring on everything, as a floor.
  *
  * `:focus-visible` rather than `:focus` so pointer users never see it. This
- * sits in the base layer, so any component that opts into its own ring
- * (`focus-visible:ring-2 focus-visible:outline-none`) still wins — utilities
- * are a later layer — and this only fills in for the controls that have none.
+ * file is imported unlayered (end of theme.css), so the rule beats layered
+ * utilities: a control that needs a different ring color uses `!` or the
+ * `.prenta-inverse` rule below. It sets no border-radius, so a control keeps
+ * its own shape when focused.
  */
 .prenta-admin :focus-visible {
   outline: var(--bw-focus, 2px) solid var(--acc);
   outline-offset: 2px;
-  border-radius: 4px;
+}
+
+/*
+ * Inverted surfaces (the floating unsaved bar, toasts) are --txt. An --acc
+ * ring on them falls to about 2:1 (WCAG 1.4.11), so their controls draw it in
+ * --bg. Unlayered like the rule above, so utilities can't undo it.
+ */
+.prenta-admin .prenta-inverse :focus-visible {
+  outline-color: var(--bg);
 }
 
 /* Controls flush against a panel edge draw the ring inside their own box, or
@@ -56,7 +65,7 @@
   z-index: 999;
   padding: 10px 16px;
   background: var(--acc);
-  color: #fff;
+  color: var(--on-acc);
   font-size: var(--fs-body, 13px);
   font-weight: 600;
   border-radius: 0 0 8px 0;
@@ -91,23 +100,24 @@
  * Honour a stated preference for more contrast.
  *
  * Only the three tertiary tokens move, and only in the direction of more
- * contrast than the shipped values — which are already an AA correction over
- * the handoff's own numbers (see the `--muted` note in prenta-tokens.css).
- * Set here rather than in the token file because that file is generated.
+ * contrast. Values are the kit's (cms-responsive.css). The light rule covers
+ * Linen too: the Linen token block wraps its conditions in :where(), so it
+ * carries `.prenta-admin` specificity and this later rule wins. Set here
+ * rather than in the token file because that file is generated.
  */
 @media (prefers-contrast: more) {
   .prenta-admin {
-    --muted: #5a5770;
-    --sub: #3d3a52;
-    --bdr: #c9c5dc;
+    --muted: #5a5f69;
+    --sub: #3b3f47;
+    --bdr: #c5c9d1;
   }
 
   .dark .prenta-admin,
   .prenta-admin.dark,
   .prenta-admin[data-theme='dark'] {
-    --muted: #a9a6c0;
-    --sub: #c4c1d8;
-    --bdr: #454263;
+    --muted: #a4a9b3;
+    --sub: #c3c7ce;
+    --bdr: #454950;
   }
 }
 
@@ -137,18 +147,20 @@
    * and let the control paint at its designed size. Use this for any small
    * control whose internals are positioned against its box.
    *
-   * The insets are sized for the 34×19 directive switch: 19 + 26 = 45 tall,
-   * 34 + 12 = 46 wide.
+   * The default insets are sized for the 34×19 directive switch: 19 + 26 = 45
+   * tall, 34 + 12 = 46 wide. A control in a dense row sets
+   * `--touch-hit-block` / `--touch-hit-inline` so the area stays inside its
+   * row (the sidebar chevrons).
+   *
+   * The control must be positioned itself (`relative`, or `absolute` where it
+   * is placed in its row). This rule doesn't set `position`: being unlayered,
+   * it would beat a layered `absolute` and drop the control out of place.
    */
-  .prenta-admin .prenta-touch-hit {
-    position: relative;
-  }
-
   .prenta-admin .prenta-touch-hit::after {
     content: '';
     position: absolute;
-    inset-block: -13px;
-    inset-inline: -6px;
+    inset-block: var(--touch-hit-block, -13px);
+    inset-inline: var(--touch-hit-inline, -6px);
   }
 }
 
@@ -160,6 +172,432 @@
   }
 }
 
+/* ── Layout tiers (SHELL.md §8, cms-layouts.css) ─────────────────── */
+/*
+ * The same half-open ranges as the `mobile:` / `tablet:` … variants in
+ * theme.css. Laptop (1025–1440px) is the baseline in prenta-tokens.css:
+ * --gut 28px, --drawer-w 440px.
+ *
+ * 4K: a 64px topbar too. The sidebar's logo row reads the same token, so the
+ * two stay aligned.
+ */
+@media (width >= 2200px) {
+  .prenta-admin {
+    --tbh: 64px;
+    --gut: 44px;
+    --drawer-w: 600px;
+  }
+}
+
+@media (1441px <= width < 2200px) {
+  .prenta-admin {
+    --gut: 36px;
+    --drawer-w: 500px;
+  }
+}
+
+@media (769px <= width < 1025px) {
+  .prenta-admin {
+    --gut: 20px;
+    --drawer-w: min(440px, 72vw);
+  }
+}
+
+@media (width < 769px) {
+  .prenta-admin {
+    --gut: 16px;
+    --drawer-w: 100vw;
+  }
+}
+
+/* ── Header actions collapse to icons (tablet and mobile) ─────────── */
+/*
+ * `[data-header-actions]` is a page header's action cluster (PageHeader's,
+ * or a screen's own header that opts in). Inside it, `Button`s that carry an
+ * icon (their `data-variant` says which kind) collapse to square icon
+ * buttons:
+ *
+ *  - tablet (769–1024px): secondary and ghost actions become 40px icons;
+ *    the primary action and AI buttons (`data-keep-label`) keep their text.
+ *  - mobile (≤768px): every action becomes a 44px icon, AI included, except
+ *    the one marked `data-fab`, which becomes the floating action button.
+ *
+ * The label stays the button's accessible name: a bare text label is set to
+ * font-size 0 and an element label is clipped like `sr-only`, never
+ * `display: none` (which would drop it from the accessibility tree). The
+ * button is `relative` so the clipped label has a positioned ancestor (an
+ * unanchored sr-only box sized the admin root once; see CONFLICTS.md §2).
+ */
+@media (769px <= width < 1025px) {
+  .prenta-admin
+    [data-header-actions]
+    :is([data-variant='secondary'], [data-variant='outline'], [data-variant='ghost']):has(svg):not(
+      [data-keep-label]
+    ) {
+    position: relative;
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    padding: 0;
+    gap: 0;
+    font-size: 0;
+    justify-content: center;
+  }
+
+  .prenta-admin
+    [data-header-actions]
+    :is([data-variant='secondary'], [data-variant='outline'], [data-variant='ghost']):has(svg):not(
+      [data-keep-label]
+    )
+    > :not(svg):not(:has(svg)) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+
+@media (width < 769px) {
+  .prenta-admin
+    [data-header-actions]
+    :is(
+      [data-variant='primary'],
+      [data-variant='secondary'],
+      [data-variant='outline'],
+      [data-variant='ghost'],
+      [data-variant='ai']
+    ):has(svg):not([data-fab]) {
+    position: relative;
+    width: 44px;
+    min-width: 44px;
+    height: 44px;
+    flex: 0 0 44px;
+    padding: 0;
+    gap: 0;
+    font-size: 0;
+    justify-content: center;
+  }
+
+  .prenta-admin
+    [data-header-actions]
+    :is(
+      [data-variant='primary'],
+      [data-variant='secondary'],
+      [data-variant='outline'],
+      [data-variant='ghost'],
+      [data-variant='ai']
+    ):has(svg):not([data-fab])
+    > :not(svg):not(:has(svg)) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+
+/* ── Primary create action → floating action button (mobile) ──────── */
+/*
+ * `data-fab` marks a screen's primary create action (one per screen). Below
+ * 769px it leaves the header and floats above the tab bar: 56px, radius 18,
+ * the kit's shadow, the label kept as its name. Above the content, below every
+ * overlay (`--z-tabbar`): a sheet, menu or the nav drawer covers it, and it
+ * sits in the column the open drawer makes inert.
+ *
+ * `--fab-clear` (on the admin root, so the content column and the toasts both
+ * read it) makes room for it: `#prenta-main` pads its end so the last row
+ * isn't hidden behind it (AdminShell), and phone toasts sit above it rather
+ * than on it (Toaster). Not while an open side pane hides it.
+ *
+ * In forced-colors mode a fill is dropped, so a FAB drawn as a plain button
+ * (no border of its own) gets one to keep an edge.
+ */
+@media (width < 769px) {
+  .prenta-admin [data-fab] {
+    position: fixed;
+    right: 16px;
+    bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px));
+    z-index: var(--z-tabbar);
+    width: 56px;
+    min-width: 56px;
+    height: 56px;
+    padding: 0;
+    gap: 0;
+    border-radius: 18px;
+    font-size: 0;
+    justify-content: center;
+    box-shadow:
+      0 6px 20px rgba(0, 0, 0, 0.22),
+      0 2px 6px rgba(0, 0, 0, 0.12);
+  }
+
+  .prenta-admin [data-fab] svg {
+    width: 22px;
+    height: 22px;
+  }
+
+  .prenta-admin [data-fab] > :not(svg):not(:has(svg)) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .prenta-admin:has(#prenta-main [data-fab]):not(:has([data-inspector-open])) {
+    --fab-clear: 88px;
+  }
+}
+
+@media (forced-colors: active) {
+  .prenta-admin [data-fab] {
+    border: 1px solid ButtonText;
+  }
+}
+
+/* ── Table scroll boxes anchor their own absolute content ─────────── */
+/*
+ * A visually hidden header (`sr-only`, absolutely positioned) in a table that
+ * scrolls sideways had no positioned ancestor below `#prenta-main`, so its
+ * static position past the scroll box's edge widened the content scroller:
+ * 199px at 924px on Posts, the "Actions" header. The same cause as the
+ * P-02/P-03 shell scroll (CONFLICTS.md §2). A table's own box is now the
+ * containing block, so the scroll box clips it. In the components layer, so a
+ * box that sets its own `sticky` / `absolute` utility keeps it.
+ */
+@layer components {
+  .prenta-admin #prenta-main :has(> table) {
+    position: relative;
+  }
+}
+
+/* ── Side panes → sheets (mobile) ─────────────────────────────────── */
+/*
+ * Below 769px an open side pane (`[data-inspector-open]`: InspectorPane,
+ * Media's detail panel) is a sheet over the whole content column (the kit's
+ * `.sp.open`): everything in `#prenta-main` that isn't on the pane's own
+ * path hides, the list beside it and the page header and filters above it
+ * alike, and the pane fills the space. Hidden, not covered, so focus and
+ * screen readers can't wander behind it. It all comes back, with focus on the
+ * row that opened the pane, when the pane closes. The topbar and tab bar stay,
+ * so navigation is still in reach.
+ */
+@media (width < 769px) {
+  .prenta-admin
+    #prenta-main
+    :has([data-inspector-open])
+    > :not([data-inspector-open], :has([data-inspector-open])) {
+    display: none;
+  }
+
+  /* Fixed to the space between the topbar and the tab bar, whatever the
+     screen's own layout: some split layouts are 100vh-minus-something tall,
+     and InspectorPane sets its width inline. */
+  .prenta-admin #prenta-main [data-inspector-open] {
+    position: fixed;
+    top: var(--tbh);
+    right: 0;
+    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
+    left: 0;
+    z-index: var(--z-bar);
+    width: auto !important;
+    height: auto;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+  }
+}
+
+/* ── List tables → cards (mobile) ─────────────────────────────────── */
+/*
+ * `table[data-cards]` is a list table (one row per record). Below 769px each
+ * row becomes a card: the title cell first, a selection checkbox top right,
+ * every other cell a label/value line (`data-label`, the column's header),
+ * row actions along the bottom at 44px. `data-role` marks the cells:
+ * `title`, `check`, `actions`, `media` (hidden on a card).
+ *
+ * `display` changes drop table semantics in some engines, so card tables
+ * carry explicit table roles (components/ui/card-table.ts). The header row
+ * is clipped and its controls leave the tab order; CardListControls gives
+ * phones its sort and select-all. Ported from cms-layouts.css.
+ */
+@media (width < 769px) {
+  .prenta-admin table[data-cards] {
+    display: block;
+    width: 100%;
+    min-width: 0 !important;
+    border-collapse: separate;
+  }
+
+  /* Column widths mean nothing on a card. */
+  .prenta-admin table[data-cards] colgroup {
+    display: none;
+  }
+
+  .prenta-admin table[data-cards] thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* Clipped controls would still take focus, invisibly. */
+  .prenta-admin table[data-cards] thead :is(a, button, input, select, textarea, [tabindex]) {
+    visibility: hidden;
+  }
+
+  .prenta-admin table[data-cards] tbody {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 2px 0 8px;
+  }
+
+  .prenta-admin table[data-cards] tbody tr {
+    flex-shrink: 0;
+    height: auto !important;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: 12px;
+    row-gap: 6px;
+    padding: 14px;
+    background: var(--card);
+    border: 1px solid var(--bdr) !important;
+    border-radius: 12px;
+    box-shadow: var(--shd);
+  }
+
+  .prenta-admin table[data-cards] tbody tr:is([data-state='selected'], [aria-selected='true']) {
+    border-color: var(--acc) !important;
+    background: var(--acc-l);
+  }
+
+  .prenta-admin table[data-cards] tbody td {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    grid-column: 1 / -1;
+    min-width: 0;
+    width: auto !important;
+    max-width: none !important;
+    padding: 0 !important;
+    border: 0 !important;
+    font-size: 13px;
+  }
+
+  .prenta-admin table[data-cards] tbody td[data-label]:not([data-role])::before {
+    content: attr(data-label);
+    flex-shrink: 0;
+    color: var(--muted);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+  }
+
+  /* A value wraps rather than being cut off: a cell that truncates on desktop
+     is a flex row here, where the ellipsis no longer works. */
+  .prenta-admin table[data-cards] tbody td[data-label]:not([data-role]),
+  .prenta-admin table[data-cards] tbody td[data-label]:not([data-role]) * {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .prenta-admin table[data-cards] tbody td[data-label]:not([data-role]) {
+    text-align: right;
+  }
+
+  .prenta-admin table[data-cards] tbody td[data-label]:not([data-role]) > * {
+    min-width: 0;
+  }
+
+  .prenta-admin table[data-cards] tbody td[data-role='title'] {
+    display: block;
+    grid-column: 1;
+    grid-row: 1;
+    font-size: 14.5px;
+  }
+
+  .prenta-admin table[data-cards] tbody td[data-role='title'] * {
+    max-width: 100% !important;
+    white-space: normal !important;
+  }
+
+  .prenta-admin table[data-cards] tbody td[data-role='check'] {
+    grid-column: 2;
+    grid-row: 1;
+    justify-content: flex-end;
+    align-self: start;
+  }
+
+  /* The kit's 24px checkbox, inside a 44px hit area (the row's label) that
+     reaches into the card's padding instead of growing the card. */
+  .prenta-admin table[data-cards] tbody td[data-role='check'] label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    margin: -10px -10px -10px 0;
+  }
+
+  .prenta-admin table[data-cards] tbody td[data-role='check'] input {
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  .prenta-admin table[data-cards] tbody td[data-role='media'] {
+    display: none;
+  }
+
+  .prenta-admin table[data-cards] tbody td[data-role='actions'] {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 4px;
+    padding-top: 8px !important;
+    border-top: 1px solid var(--bdr) !important;
+  }
+
+  .prenta-admin table[data-cards] tbody td[data-role='actions'] :is(button, a) {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .prenta-admin table[data-cards] tbody td:empty {
+    display: none;
+  }
+
+  /* A group header row (one spanning cell) reads as a section label. */
+  .prenta-admin table[data-cards] tbody tr:has(> td[colspan]) {
+    padding: 10px 2px 0;
+    background: none;
+    border: 0 !important;
+    box-shadow: none;
+  }
+
+  /* Analytic tables keep their grid and scroll inside their own box; the
+     page itself never scrolls sideways (`#prenta-main` clips x). Not tables
+     in a side pane or dialog, which are drawn for that narrow box (SEO's
+     3-column "Top queries" in a 380px pane). */
+  .prenta-admin #prenta-main :has(> table:not([data-cards])) {
+    overflow-x: auto;
+  }
+
+  .prenta-admin
+    #prenta-main
+    table:not([data-cards]):not(:where([data-inspector-open], [role='dialog']) table) {
+    min-width: 640px;
+  }
+}
+
 /* ── Editor header (≤1180px): let the action cluster wrap ─────────── */
 /*
  * The breakpoint picker and zoom chip already hide below `md`. What remains