@fieldia/viewer 0.19.1 → 0.20.0

package/src/lib/head-styles.mjs

@@ -0,0 +1,316 @@
+import { installPartStyles, PART_RANK } from '@fieldia/widgets';
+/**
+ * A record's head as a work tracker draws a work item's, and the dialog round
+ * it: measured from the work item's own window (fieldia's docs/plans,
+ * work-item-replica.md §2.3–2.5) and written in the form's tokens, so a
+ * theme, a host's colours, the dark scheme and right to left all follow.
+ * Greys that are no token of their own are mixed from the text and the
+ * surface, in the shares the light window shows them: the band #f8f8f8, the
+ * tabs' frame #dadada, a count's pill #ebebeb, a pressed button #d2d2d2.
+ *
+ * - The dialog of the `inset` size: 96px in from the window's sides and 46px
+ *   from its top and bottom, the whole window under 760px; with no dimmed
+ *   page behind (`clear`); maximised, the whole window; resized by its grip.
+ * - The head: the kind's strip along its start edge through its white part,
+ *   the badge row (⤢ and × at its end), the title line, the row of people,
+ *   links and buttons, then the band of fields with "Updated by" and the
+ *   tabs at its end; the body under it scrolls on its own in a dialog.
+ * - Buttons a head holds: quiet ones on a light fill, split ones with a rule
+ *   between their press and their chevron, ones shown by their icon alone.
+ *
+ * Logical properties throughout: right to left mirrors on its own.
+ *
+ * The head part's own sheet (head-part.ts), put in its place among Fieldia's
+ * the first time a page draws a head, a split button, a work heading or the
+ * inset dialog (installPartStyles, PART_RANK.head).
+ */
+export const HEAD_PART_CSS = /* css */ `
+/* ---- the dialog ---------------------------------------------------------------------- */
+/* Nothing dimmed behind: the page stays as it is, out of reach while the dialog is open. */
+.fd-dialog-backdrop.fd-backdrop-clear { background: transparent; }
+/* As a work item's window over its list: in from the window's edges, its corners small, its shadow deep. */
+.fd-form-dialog.fd-size-inset {
+  position: fixed; inset: 46px 96px; width: auto; height: auto; max-width: none; max-height: none;
+  border-radius: 4px; background: var(--fd-surface);
+  /* An edge of its own where the scheme has one: in the dark a shadow is lost on the page behind. */
+  box-shadow: 0 0 0 1px var(--fd-edge, transparent), 0 25.6px 57.6px rgba(0, 0, 0, 0.22), 0 4.8px 14.4px rgba(0, 0, 0, 0.18);
+}
+/* Under 760px it is the whole window already: nothing to maximise or resize. */
+@media (max-width: 759.98px) { .fd-form-dialog.fd-size-inset { inset: 0; border-radius: 0; } .fd-form-dialog.fd-size-inset :is(.fd-dialog-max, .fd-dialog-grip) { display: none !important; } }
+/* Resized by its grip: where it stands and how big, set on it. */
+.fd-form-dialog[data-resized] { position: fixed; max-width: none; max-height: none; margin: 0; }
+/* Maximised: the whole window, whatever its size or place was; Restore puts it back. */
+.fd-form-dialog[data-maximised] { position: fixed; inset: 0 !important; width: auto !important; height: auto !important; max-width: none; max-height: none; border-radius: 0; }
+.fd-form-dialog[data-maximised] > .fd-dialog-grip { display: none; }
+/* ⤢ beside ×, and the head's own window buttons: an icon in a box a finger's size. */
+.fd-dialog-max { display: inline-grid; place-items: center; border: none; background: none; cursor: pointer; padding: 2px 8px; border-radius: 4px; color: var(--fd-muted); }
+.fd-dialog-max:hover { background: var(--fd-page); color: var(--fd-text); }
+.fd-dialog-max .fd-icon { width: 16px; height: 16px; margin: 0; }
+.fd-form-dialog :is(.fd-dialog-max, .fd-head-window .fd-dialog-close) {
+  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; font-size: 16px;
+  color: var(--fd-text); border-radius: 2px;
+}
+.fd-form-dialog :is(.fd-dialog-max, .fd-head-window .fd-dialog-close) .fd-icon { width: 16px; height: 16px; margin: 0; }
+/* The grip at the end-bottom corner: a small triangle in outline, in the words' colour, a finger's room round it (08_19). */
+.fd-dialog-grip {
+  position: absolute; inset-inline-end: 0; inset-block-end: 0; width: 16px; height: 16px; padding: 0; border: 0; z-index: 2;
+  background: none; cursor: nwse-resize; color: color-mix(in srgb, var(--fd-text) 90%, var(--fd-surface)); border-end-end-radius: 4px;
+}
+.fd-dialog-grip:dir(rtl) { cursor: nesw-resize; }
+.fd-dialog-grip::before {
+  content: ""; position: absolute; inset-inline-end: 4px; inset-block-end: 4px; box-sizing: border-box; width: 7px; height: 7px;
+  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
+  background: linear-gradient(to top left, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px));
+}
+.fd-dialog-grip:dir(rtl)::before {
+  background: linear-gradient(to top right, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px));
+}
+.fd-form-dialog:has(> .fd-dialog-grip) { position: relative; }
+/* The grip has a band of its own at the foot: the body's scrollbar ends above it, as a work item's window has it; a
+   history filling the body keeps 20px under its list, its foot 38px from the window's edge as before. */
+.fd-form-dialog[data-headed]:not([data-maximised]):has(> .fd-dialog-grip) > .fd-form-dialog-body { padding-block-end: 18px; --fd-history-foot: 20px; }
+@media (max-width: 759.98px) { .fd-form-dialog.fd-size-inset[data-headed]:has(> .fd-dialog-grip) > .fd-form-dialog-body { padding-block-end: 0; --fd-history-foot: 38px; } }
+.fd-form-dialog.fd-size-inset:has(> .fd-dialog-grip), .fd-form-dialog[data-resized] { position: fixed; }
+
+/* A page with a head of its own is the dialog: its head stays, its body scrolls under it. */
+.fd-form-dialog[data-headed] > .fd-form-dialog-body { display: flex; flex-direction: column; overflow: hidden; padding: 0; background: var(--fd-surface); }
+.fd-form-dialog[data-headed] > .fd-form-dialog-body > .fd-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+.fd-form-dialog[data-headed] > .fd-form-dialog-body > .fd-form > .fd-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+.fd-form-dialog[data-headed] .fd-head-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+.fd-form-dialog[data-headed] .fd-head-page > .fd-head { flex: none; }
+.fd-form-dialog[data-headed] .fd-head-page > :is(.fd-head-body, .fd-head-layout) { flex: 1 1 auto; min-height: 0; overflow: auto; }
+
+/* ---- scroll bars, as the tracker's window draws them on every system: 15px, a light track with a hairline at its
+   inner edge, a rounded thumb inset in it, no arrows (where the browser lets a page draw them: Chrome, Edge, Safari).
+   Each selector written out: Chrome drops a scroll bar part's :vertical or :horizontal under an :is() ancestor, and a
+   part paints no logical border, so its sides are physical ones, swapped right to left. ---- */
+.fd-head-page ::-webkit-scrollbar { width: 15px; height: 15px; }
+.fd-head-page ::-webkit-scrollbar-track,
+.fd-head-page ::-webkit-scrollbar-corner { background: color-mix(in srgb, var(--fd-text) 2.2%, var(--fd-surface)); }
+.fd-head-page ::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid color-mix(in srgb, var(--fd-text) 10%, var(--fd-surface)); border-right: 1px solid color-mix(in srgb, var(--fd-text) 7.5%, var(--fd-surface));
+}
+[dir="rtl"] .fd-head-page ::-webkit-scrollbar-track:vertical {
+  border-left-color: color-mix(in srgb, var(--fd-text) 7.5%, var(--fd-surface)); border-right-color: color-mix(in srgb, var(--fd-text) 10%, var(--fd-surface));
+}
+.fd-head-page ::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid color-mix(in srgb, var(--fd-text) 10%, var(--fd-surface)); border-bottom: 1px solid color-mix(in srgb, var(--fd-text) 7.5%, var(--fd-surface));
+}
+.fd-head-page ::-webkit-scrollbar-thumb {
+  border: solid transparent; border-width: 3px 3px 3px 4px; border-radius: 8px; background: color-mix(in srgb, var(--fd-text) 24.5%, var(--fd-surface)) padding-box;
+}
+.fd-head-page ::-webkit-scrollbar-thumb:horizontal { border-width: 4px 3px 3px; }
+[dir="rtl"] .fd-head-page ::-webkit-scrollbar-thumb:vertical { border-width: 3px 4px 3px 3px; }
+.fd-head-page ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--fd-text) 40%, var(--fd-surface)); }
+.fd-head-page ::-webkit-scrollbar-button { display: none; }
+
+/* ---- the head ------------------------------------------------------------------------ */
+.fd-head-page { padding: 0; background: var(--fd-surface); }
+.fd-head {
+  --fd-head-edge: color-mix(in srgb, var(--fd-text) 16.2%, var(--fd-surface));
+  --fd-head-pill: color-mix(in srgb, var(--fd-text) 8.7%, var(--fd-surface));
+  --fd-head-pressed: color-mix(in srgb, var(--fd-text) 19.7%, var(--fd-surface));
+  --fd-head-fill: var(--fd-fill, color-mix(in srgb, var(--fd-text) 5.7%, var(--fd-surface)));
+  --fd-head-icon: color-mix(in srgb, var(--fd-text) 79%, var(--fd-surface));
+  --fd-head-link: var(--fd-link, var(--fd-accent));
+  --fd-control-height: 32px;
+  container: fd-head / inline-size;
+  position: relative; background: var(--fd-surface); color: var(--fd-text); font-size: 14px;
+}
+/* The white part: the strip of the kind's colour along its start edge, through it and no further. */
+.fd-head-top { position: relative; padding-block-end: 6px; }
+.fd-head-strip { position: absolute; inset-block: 0; inset-inline-start: 0; width: 10px; background: var(--fd-kind, transparent); }
+.fd-head:not([data-kind]) .fd-head-strip { display: none; }
+/* The badge row: the kind's icon in its colour, its name in capitals and the number in the link colour; ⤢ and × at its end. */
+.fd-head-badge-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 42px; padding-inline: 20px 4px; }
+.fd-head-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; line-height: 16px; color: var(--fd-head-link); white-space: nowrap; }
+.fd-head-badge-icon { display: inline-grid; color: var(--fd-kind, var(--fd-head-link)); }
+/* The kind's icon 14px, its box 2px before the badge's start so its drawing starts there, the words 39px in (20.22.23). */
+.fd-head-badge-icon .fd-icon { width: 14px; height: 14px; margin: 0; margin-inline-start: -2px; stroke-width: 2.2; }
+.fd-head-window { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: auto; }
+/* The title line: the number before the title, its box from 64px in, Copy title at its end. */
+.fd-head-title { display: flex; align-items: center; min-height: 32px; margin-block-start: 1px; padding-inline: 19px 8px; }
+.fd-head-number { flex: none; min-inline-size: 40px; margin-inline-end: 5px; font-size: 18px; line-height: 24px; color: color-mix(in srgb, var(--fd-text) 85%, #000); font-variant-numeric: tabular-nums; }
+.fd-form .fd-head-title > .fd-field { flex: 1 1 auto; min-width: 0; display: block; }
+.fd-form .fd-head-title > .fd-title-side { flex: none; }
+.fd-form .fd-head-title > .fd-field > .fd-input { width: 100%; height: 32px; font-size: 18px; padding-inline: 11px; color: var(--fd-text); }
+/* Copy title: there while the title is pointed at or worked in, its room always kept; always where nothing can point. */
+.fd-head-copy {
+  flex: none; display: inline-grid; place-items: center; width: 34px; height: 32px; padding: 0; border: 0; border-radius: 2px;
+  background: var(--fd-head-fill); color: var(--fd-head-icon); cursor: pointer; visibility: hidden;
+}
+.fd-head-copy .fd-icon { width: 16px; height: 16px; margin: 0; }
+.fd-head-title:focus-within > .fd-head-copy { visibility: visible; }
+@media (hover: hover) { .fd-head-title:hover > .fd-head-copy { visibility: visible; } }
+@media (hover: none) { .fd-head-copy { visibility: visible; } }
+.fd-head-copy:hover { background: var(--fd-head-pressed); }
+
+/* The row under the title: people and links from its start, the record's buttons at its end. */
+.fd-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 32px; margin-block-start: 9px; padding-inline: 21px 6px; }
+.fd-head-meta { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
+.fd-form .fd-head-meta > .fd-field { flex: 0 1 269px; min-width: 0; }
+.fd-form .fd-head-meta > .fd-field:is([data-type="many2many"], [data-widget="tags"]) { flex: 0 1 auto; }
+/* Tags with their "Add Tag" button: the button just after the comments' link, as the tracker's (08_19): no box room round it. */
+.fd-form .fd-head-meta .fd-field[data-quiet] .fd-tags:has(> .fd-tags-adder:not([hidden])) { padding-inline: 0; }
+.fd-head-link {
+  display: inline-flex; align-items: center; gap: 2px; padding: 0 2px; border: 0; background: none; cursor: pointer;
+  font: inherit; font-size: 14px; color: var(--fd-head-link); white-space: nowrap; border-radius: 2px;
+}
+.fd-head-link .fd-icon { width: 16px; height: 16px; margin: 0; }
+/* A link led by its icon: the icon at the link's start, its words 2px after it (the comments' bubble, 20.22.23). */
+.fd-head-link:has(> .fd-icon:first-child) { padding-inline-start: 0; }
+button.fd-head-link:hover .fd-head-link-words { text-decoration: underline; }
+span.fd-head-link { cursor: default; color: var(--fd-text); }
+.fd-head-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex: none; }
+
+/* The head's buttons: quiet on a light fill, 14px in 600; the primary one in the accent; icons alone with no fill. */
+.fd-head .fd-button, .fd-split > .fd-button { min-height: 32px; height: 32px; padding: 0 12px; gap: 10px; border: 0; border-radius: 2px; font-size: 14px; font-weight: 600; white-space: nowrap; }
+.fd-head .fd-button .fd-icon, .fd-split > .fd-button .fd-icon { width: 16px; height: 16px; margin: 0; flex: none; }
+.fd-button.fd-button-subtle { background: var(--fd-head-fill, var(--fd-fill, var(--fd-page))); color: var(--fd-text); border-color: transparent; }
+.fd-button.fd-button-subtle:hover { background: color-mix(in srgb, var(--fd-text) 9%, var(--fd-surface)); color: var(--fd-text); }
+.fd-button.fd-button-subtle[aria-expanded="true"], .fd-button.fd-button-subtle:active { background: var(--fd-head-pressed, var(--fd-border)); }
+.fd-head .fd-button-secondary { background: var(--fd-head-fill); color: var(--fd-text); }
+.fd-head .fd-button-secondary:hover { background: color-mix(in srgb, var(--fd-text) 9%, var(--fd-surface)); color: var(--fd-text); }
+.fd-head .fd-button-primary, .fd-split[data-look="primary"] > .fd-button { background: var(--fd-accent); color: var(--fd-accent-text); }
+.fd-head .fd-button-primary:hover { filter: none; background: var(--fd-accent-hover, var(--fd-accent)); color: var(--fd-accent-text); }
+/* Its icon alone: a box 34 by 32, no fill, the icon a shade off the words. */
+.fd-button.fd-button-icon-only { width: 34px; padding: 0; justify-content: center; }
+.fd-head .fd-button.fd-button-icon-only:not(.fd-button-primary) { background: none; color: var(--fd-head-icon); }
+.fd-head .fd-button.fd-button-icon-only:not(.fd-button-primary):hover { background: var(--fd-head-fill); }
+/* ⋮, the record's menu, as an icon alone. */
+.fd-head .fd-record-actions { position: relative; }
+.fd-head .fd-head-more { width: 34px; padding: 0; background: none; color: var(--fd-head-icon); }
+.fd-head .fd-head-more:hover { background: var(--fd-head-fill); }
+.fd-head .fd-head-more[aria-expanded="true"] { background: var(--fd-head-pressed); }
+/* Undo with nothing changed: idle in a light grey, as the tracker's (08_19), still at 3:1 as a usable button's icon must
+   be; its tooltip and a press say why. */
+.fd-head .fd-button.fd-button-icon-only[data-idle]:not(.fd-button-primary) { color: color-mix(in srgb, var(--fd-text) 48%, var(--fd-surface)); }
+/* An arrow that points back points the other way right to left. */
+.fd-head .fd-icon[data-icon="undo"]:dir(rtl) { transform: scaleX(-1); }
+/* A toggle pressed: Following. */
+.fd-head .fd-button[aria-pressed="true"]:not(.fd-button-primary) { color: var(--fd-text); }
+
+/* A split button: its press, a rule, its chevron or its own icon (Follow's gear); its menu under it. */
+.fd-split { position: relative; display: inline-flex; align-items: stretch; flex: none; }
+.fd-split > .fd-split-rule { width: 1px; background: var(--fd-head-pressed, var(--fd-border)); }
+.fd-split[data-look="primary"] > .fd-split-rule { background: color-mix(in srgb, var(--fd-accent-text) 35%, var(--fd-accent)); }
+.fd-split > .fd-button:first-child:not(:last-of-type) { border-start-end-radius: 0; border-end-end-radius: 0; }
+.fd-split > .fd-split-more { padding: 0; width: 30px; border-start-start-radius: 0; border-end-start-radius: 0; }
+.fd-split > .fd-split-more:has(> .fd-icon:not([data-icon="chevron-down"])) { width: 34px; }
+/* Its chevron 13px across in a thin line; Follow's gear 12px (08_19). */
+.fd-split > .fd-split-more > .fd-icon[data-icon="chevron-down"] { width: 20px; height: 20px; stroke-width: 1.3; }
+.fd-split > .fd-split-more > .fd-icon:not([data-icon="chevron-down"]) { width: 13px; height: 13px; }
+.fd-split-alone > .fd-button .fd-split-icon { width: 14px; height: 14px; }
+.fd-split > .fd-button-menu { position: absolute; inset-block-start: calc(100% + 2px); inset-inline-start: 0; z-index: 40; }
+.fd-split > .fd-button-menu[data-end] { inset-inline-start: auto; inset-inline-end: 0; }
+
+/* ---- the band ---------------------------------------------------------------------- */
+.fd-head-band {
+  display: flex; align-items: stretch; gap: 9px; min-height: 78px; background: var(--fd-band, color-mix(in srgb, var(--fd-text) 3%, var(--fd-surface)));
+  padding-inline: 16px 8px;
+}
+/* Its fields on its columns, two rows of 32px a pixel apart, each label in a track of 76px, the last 24px of it the lead slot. */
+.fd-head-fields {
+  --fd-head-label: 76px;
+  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: var(--fd-head-tracks, 1fr 1fr); grid-auto-rows: minmax(32px, auto);
+  column-gap: 8px; row-gap: 1px; align-content: start; padding-block: 7px 6px;
+}
+.fd-form .fd-head-fields > .fd-field[data-labels] {
+  display: grid; grid-template-columns: calc(var(--fd-head-label) - 24px) 24px minmax(0, 1fr); align-items: center; gap: 0; container-type: normal; min-width: 0;
+}
+.fd-form .fd-head-fields > .fd-field[data-labels] > .fd-label {
+  grid-column: 1 / 3; grid-row: 1; align-self: center; padding: 0; margin: 0; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--fd-muted);
+  white-space: nowrap; overflow: hidden; text-overflow: clip;
+}
+.fd-form .fd-head-fields > .fd-field[data-labels] > :not(.fd-label) { grid-column: 3; }
+.fd-form .fd-head-fields > .fd-field[data-labels] > .fd-label + * { grid-row: 1; }
+/* The lead slot: a lock at the value's start, its words muted. */
+/* Its middle 2px past the slot's, toward the value, as the tracker's lock stands under the state's dot. */
+.fd-form .fd-head-fields > .fd-field[data-labels] > .fd-lock-wrap { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; margin-inline-start: 4px; z-index: 1; }
+.fd-form .fd-head-fields > .fd-field[data-labels] > .fd-lock-wrap + * { grid-row: 1; }
+.fd-head-fields .fd-lock .fd-icon { width: 16px; height: 16px; }
+.fd-head-fields .fd-lock { color: var(--fd-text); }
+/* A locked value's words on a row of exactly 32px, as a box's: the rows and all under them on whole pixels. */
+.fd-form .fd-head-fields > .fd-field > .fd-read-text { line-height: 20px; }
+/* Every box in the head 32px tall, as the rows they stand in, its corners as small as a button's. */
+.fd-form .fd-head :is(input, select).fd-input { box-sizing: border-box; height: 32px; min-height: 32px; }
+.fd-form .fd-head .fd-field[data-quiet] :is(.fd-input:not(.fd-tags *), .fd-tags, .fd-dot-box) { border-radius: 2px; }
+/* Values in 14px, their words 12px in from their box's edge. */
+.fd-form .fd-head-fields > .fd-field[data-quiet] { --fd-quiet-pad: 11px; font-size: 14px; }
+.fd-form .fd-head-fields > .fd-field > .fd-input, .fd-form .fd-head-fields > .fd-field .fd-input { font-size: 14px; }
+/* A state's dot in the lead slot, its words where the other values' start. */
+.fd-form .fd-head-fields .fd-field[data-quiet] .fd-dot-box { box-sizing: border-box; gap: 0; padding-inline-start: 11px; height: 32px; min-height: 32px; }
+/* Its button the lead slot's 24px before the box, a finger's room; pressed anywhere on the box, it opens the states all the same. */
+.fd-form .fd-head-fields .fd-field[data-quiet] .fd-dot-button { width: 24px; height: 32px; margin-inline: -36px 12px; }
+.fd-form .fd-head-fields .fd-dot-button > .fd-dot { width: 10px; height: 10px; }
+/* A box pointed at in the head, as the title's and Area's: an edge of the strong border. */
+@media (hover: hover) {
+  .fd-form .fd-head .fd-field[data-quiet] > :hover :is(.fd-input:not(.fd-tags *), .fd-tags):not([readonly], :disabled, [contenteditable="false"], :focus, :focus-within),
+  .fd-form .fd-head .fd-field[data-quiet] > :is(.fd-input, .fd-tags, .fd-dot-box:not(:has(:disabled))):not([readonly], :disabled, [contenteditable="false"], :focus, :focus-within):hover {
+    border-color: var(--fd-border-strong);
+  }
+}
+/* The band's end: "Updated by" at its top, the tabs at its bottom. */
+.fd-head-aside { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 4px; padding-block-start: 4px; min-width: 0; }
+.fd-head-updated { font: inherit; font-size: 12px; line-height: 16px; color: var(--fd-muted); white-space: nowrap; padding: 0; border: 0; background: none; }
+button.fd-head-updated { cursor: pointer; border-radius: 2px; }
+button.fd-head-updated:hover { text-decoration: underline; }
+.fd-head-tabs { display: flex; min-width: 0; max-width: 100%; }
+.fd-head-tabs .fd-tabbar { min-width: 0; }
+.fd-head-tabs .fd-tablist { gap: 0; border: 0; }
+.fd-head-tabs .fd-tab {
+  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 8px;
+  border: 1px solid var(--fd-head-edge); border-block-end: 0; border-radius: 0; background: transparent;
+  font: inherit; font-size: 14px; font-weight: 400; color: var(--fd-text); white-space: nowrap;
+}
+.fd-head-tabs .fd-tab:has(> .fd-tab-count) { padding-inline-end: 8px; }
+.fd-head-tabs .fd-tab .fd-icon { width: 16px; height: 16px; margin: 0; }
+/* An icon alone in thin lines, a little above the middle, as the tracker's; a link's and a paperclip's 12px across (08_19). */
+.fd-head-tabs .fd-tab-icon-only > .fd-icon { margin-block-end: 3px; stroke-width: 1.5; }
+.fd-head-tabs .fd-tab-icon-only > .fd-icon[data-icon="link"] { width: 14px; height: 14px; stroke-width: 1.7; }
+/* The paperclip in its own one-pixel lines, its box 16px and the count as close as with the link's 14 (20.22.23). */
+.fd-head-tabs .fd-tab-icon-only > .fd-icon[data-icon="attach"]:not(:only-child) { margin-inline-end: -2px; }
+.fd-head-tabs .fd-tab-icon-only > .fd-icon:only-child { margin-inline: 3px; }
+.fd-head-tabs .fd-tab[aria-selected="true"] { font-weight: 600; color: var(--fd-text); border-color: var(--fd-head-edge); }
+.fd-head-tabs .fd-tab[aria-selected="true"] .fd-icon { stroke-width: 2.3; }
+/* The tab shown: two pixels of the accent under its words. */
+.fd-head-tabs .fd-tab[aria-selected="true"]::after {
+  content: ""; position: absolute; inset-inline: 8px; inset-block-end: 4px; height: 2px; background: var(--fd-accent); border-radius: 1px;
+}
+.fd-head-tabs .fd-tab:has(> .fd-tab-count)[aria-selected="true"]::after { inset-inline-end: 8px; }
+.fd-head-tabs .fd-tab:hover { background: color-mix(in srgb, var(--fd-text) 4%, transparent); }
+.fd-tab-count {
+  display: inline-grid; place-items: center; min-width: 25px; height: 19px; padding: 0 6px; border-radius: 10px;
+  background: var(--fd-head-pill, var(--fd-accent-soft)); font-size: 12px; font-weight: 600; line-height: 19px; color: var(--fd-text);
+}
+.fd-tabs:not(.fd-tabs-in-head) .fd-tab-count { margin-inline-start: 6px; }
+
+/* ---- the body under it --------------------------------------------------------------- */
+.fd-head-body { padding: 0 12px 12px; background: var(--fd-surface); min-width: 0; }
+.fd-head-body > .fd-alert { margin-block: 12px 0; }
+.fd-tabs.fd-tabs-in-head > .fd-tabpanel { padding-block: 0; }
+/* A tab of fields keeps room after its last ones, as the tracker's window scrolls on past them (20.22.25: 54px past a
+   929px window), and no more: in a window 54px taller (08_19) they fit, with no scrollbar; a history fitting the window
+   keeps its own. */
+.fd-form-dialog[data-headed] .fd-tabs.fd-tabs-in-head > .fd-tabpanel:not(:has(.fd-history)) { padding-block-end: 30px; }
+.fd-head-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
+@media (min-width: 1534px) { .fd-head-layout:has(> .fd-side) { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.6fr); } }
+.fd-form-dialog .fd-head-layout > .fd-side { display: none; }
+
+/* ---- a narrow head: one column, the buttons and tabs under what they followed ------------------ */
+@container fd-head (max-width: 760px) {
+  .fd-head-row { flex-wrap: wrap; }
+  .fd-head-meta { flex-wrap: wrap; flex-basis: 100%; }
+  .fd-head-actions { flex: 1 1 100%; justify-content: flex-start; gap: 8px; }
+  .fd-head-band { flex-direction: column; gap: 4px; padding-inline: 12px 8px; }
+  .fd-head-fields { grid-template-columns: minmax(0, 1fr); padding-block-end: 0; }
+  .fd-head-aside { align-items: stretch; padding-block-start: 0; }
+  .fd-head-updated { align-self: flex-start; white-space: normal; text-align: start; }
+  .fd-head-tabs { align-self: flex-start; }
+}
+`;
+/** The sheet in a document, once, in its place among Fieldia's. */
+export function installHeadStyles(doc) {
+    installPartStyles(doc, 'fieldia-head-styles', HEAD_PART_CSS, PART_RANK.head);
+}
+//# sourceMappingURL=head-styles.mjs.map

package/src/lib/head-styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"head-styles.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/head-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4RtC,CAAC;AAEF,mEAAmE;AACnE,MAAM,UAAU,iBAAiB,CAAC,GAAa;IAC7C,iBAAiB,CAAC,GAAG,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;AAC/E,CAAC"}

package/src/lib/labels.d.mts

@@ -27,6 +27,23 @@ export interface ViewerLabels {
     /** A form in a dialog: the button that saves it and closes the dialog, and the × that closes it. */
     saveClose: string;
     close: string;
+    /**
+     * A record's head and the dialog round it: the dialog's ⤢ and its Restore,
+     * its grip, the title's copy button and what it says once copied, the ⋮ of
+     * the record's menu, "Updated by" (`{name}`, `{date}`), what Undo says with
+     * nothing to put back, and a tab's name with its count (`{label}`, `{count}`).
+     */
+    maximise: string;
+    restoreSize: string;
+    resize: string;
+    copyTitle: string;
+    titleCopied: string;
+    moreActions: string;
+    /** A split button's chevron, named for the button it opens more of (`{label}`), unless it has a name of its own. */
+    optionsFor: string;
+    updatedBy: string;
+    nothingChanged: string;
+    countOf: string;
     /** A form in a side panel: what it asks before Escape or × drops the changes made in it. */
     discardChanges: string;
     /** The × on an alert that may be dismissed. */
@@ -100,6 +117,18 @@ export interface ViewerLabels {
     /** A list's groups: the one of records with no value, and the rest of a group's records (`{n}`). */
     none: string;
     loadMore: string;
+    /**
+     * A list's filter bar (`search: "fields"`): its keyword box, the button that
+     * clears every filter, each field's list of values (`{label}`, the field's),
+     * and the gear that chooses which fields it offers. A list of nested rows:
+     * the header's buttons that open and close every parent.
+     */
+    filterByKeyword: string;
+    clearFilters: string;
+    expandAll: string;
+    collapseAll: string;
+    filterNamed: string;
+    filterSettings: string;
     /**
      * A saved form placed in another, in its place when it cannot be shown
      * (`{page}`, its title or id): not found, placed inside itself (`{chain}`,

package/src/lib/labels.d.ts

@@ -27,6 +27,23 @@ export interface ViewerLabels {
     /** A form in a dialog: the button that saves it and closes the dialog, and the × that closes it. */
     saveClose: string;
     close: string;
+    /**
+     * A record's head and the dialog round it: the dialog's ⤢ and its Restore,
+     * its grip, the title's copy button and what it says once copied, the ⋮ of
+     * the record's menu, "Updated by" (`{name}`, `{date}`), what Undo says with
+     * nothing to put back, and a tab's name with its count (`{label}`, `{count}`).
+     */
+    maximise: string;
+    restoreSize: string;
+    resize: string;
+    copyTitle: string;
+    titleCopied: string;
+    moreActions: string;
+    /** A split button's chevron, named for the button it opens more of (`{label}`), unless it has a name of its own. */
+    optionsFor: string;
+    updatedBy: string;
+    nothingChanged: string;
+    countOf: string;
     /** A form in a side panel: what it asks before Escape or × drops the changes made in it. */
     discardChanges: string;
     /** The × on an alert that may be dismissed. */
@@ -100,6 +117,18 @@ export interface ViewerLabels {
     /** A list's groups: the one of records with no value, and the rest of a group's records (`{n}`). */
     none: string;
     loadMore: string;
+    /**
+     * A list's filter bar (`search: "fields"`): its keyword box, the button that
+     * clears every filter, each field's list of values (`{label}`, the field's),
+     * and the gear that chooses which fields it offers. A list of nested rows:
+     * the header's buttons that open and close every parent.
+     */
+    filterByKeyword: string;
+    clearFilters: string;
+    expandAll: string;
+    collapseAll: string;
+    filterNamed: string;
+    filterSettings: string;
     /**
      * A saved form placed in another, in its place when it cannot be shown
      * (`{page}`, its title or id): not found, placed inside itself (`{chain}`,

package/src/lib/labels.js

@@ -27,6 +27,16 @@ const en = {
     loading: 'Loading…',
     saveClose: 'Save & Close',
     close: 'Close',
+    maximise: 'Maximise',
+    restoreSize: 'Restore',
+    resize: 'Resize',
+    copyTitle: 'Copy title',
+    titleCopied: 'Title copied',
+    moreActions: 'More actions',
+    optionsFor: '{label} options',
+    updatedBy: 'Updated by {name}: {date}',
+    nothingChanged: 'Nothing has changed.',
+    countOf: '{label}, {count}',
     discardChanges: 'Discard your changes?',
     dismiss: 'Dismiss',
     helpFor: 'Help for {label}',
@@ -81,6 +91,12 @@ const en = {
     no: 'No',
     none: 'None',
     loadMore: 'Show {n} more',
+    filterByKeyword: 'Filter by keyword',
+    clearFilters: 'Clear filters',
+    expandAll: 'Expand all',
+    collapseAll: 'Collapse all',
+    filterNamed: 'Filter by {label}',
+    filterSettings: 'Filter settings',
     formMissing: 'The saved form “{page}” cannot be found.',
     formInItself: 'The saved form “{page}” is not shown here: it would be placed inside itself ({chain}).',
     formNotPlaceable: 'The saved form “{page}” cannot be placed here: only a form of sections or tabs can.',

package/src/lib/labels.js.map

@@ -1 +1 @@
-{"version":3,"file":"labels.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/labels.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"labels.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/labels.ts"],"names":[],"mappings":"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"}

package/src/lib/labels.mjs

@@ -23,6 +23,16 @@ const en = {
     loading: 'Loading…',
     saveClose: 'Save & Close',
     close: 'Close',
+    maximise: 'Maximise',
+    restoreSize: 'Restore',
+    resize: 'Resize',
+    copyTitle: 'Copy title',
+    titleCopied: 'Title copied',
+    moreActions: 'More actions',
+    optionsFor: '{label} options',
+    updatedBy: 'Updated by {name}: {date}',
+    nothingChanged: 'Nothing has changed.',
+    countOf: '{label}, {count}',
     discardChanges: 'Discard your changes?',
     dismiss: 'Dismiss',
     helpFor: 'Help for {label}',
@@ -77,6 +87,12 @@ const en = {
     no: 'No',
     none: 'None',
     loadMore: 'Show {n} more',
+    filterByKeyword: 'Filter by keyword',
+    clearFilters: 'Clear filters',
+    expandAll: 'Expand all',
+    collapseAll: 'Collapse all',
+    filterNamed: 'Filter by {label}',
+    filterSettings: 'Filter settings',
     formMissing: 'The saved form “{page}” cannot be found.',
     formInItself: 'The saved form “{page}” is not shown here: it would be placed inside itself ({chain}).',
     formNotPlaceable: 'The saved form “{page}” cannot be placed here: only a form of sections or tabs can.',

package/src/lib/labels.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"labels.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/labels.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"labels.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/labels.ts"],"names":[],"mappings":"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"}

package/src/lib/list-styles.d.mts

@@ -1,4 +1,4 @@
 /** The list's look, on the same tokens as the forms it opens. */
-export declare const LIST_STYLES = "\n.fd-list { display: grid; gap: 10px; min-width: 0; }\n.fd-list [hidden] { display: none !important; }\n.fd-list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 34px; }\n/* A list that is also a map: List, Map, or both side by side; the map's part is drawn by @fieldia/map. */\n.fd-list { container: fd-list / inline-size; }\n.fd-list-views { display: inline-flex; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: hidden; }\n.fd-list-views .fd-button { border: 0; border-radius: 0; min-height: 32px; padding-inline: 12px; }\n.fd-list-views .fd-button + .fd-button { border-inline-start: 1px solid var(--fd-border); }\n.fd-list-views .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 600; }\n.fd-list-body { display: grid; gap: 16px; min-width: 0; }\n.fd-list-records { display: grid; gap: 10px; min-width: 0; align-content: start; }\n.fd-list[data-view=\"list\"] .fd-list-map { display: none; }\n.fd-list[data-view=\"map\"] .fd-list-records, .fd-list[data-view=\"map\"] .fd-pager { display: none; }\n.fd-list[data-view=\"both\"] .fd-list-body { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); align-items: start; }\n.fd-list[data-view=\"both\"] .fd-list-map { position: sticky; top: 8px; }\n/* Too narrow for two: the map over the table. */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-list-body { grid-template-columns: minmax(0, 1fr); } .fd-list[data-view=\"both\"] .fd-list-map { position: static; order: -1; } }\n.fd-list-row.fd-list-hot > td { background: var(--fd-accent-soft); }\n.fd-search { position: relative; flex: 1 1 360px; max-width: 680px; min-width: 0; container: fd-search / inline-size; }\n.fd-search-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 34px; box-sizing: border-box; padding: 2px 2px 2px 8px; padding-inline: 8px 2px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); }\n.fd-search-field:focus-within { border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }\n.fd-search-field > .fd-icon, .fd-search-field > svg { width: 16px; height: 16px; color: var(--fd-muted); flex: none; }\n.fd-facets { display: contents; }\n.fd-facet { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; min-height: 24px; padding-block: 0; padding-inline: 6px 0; border-radius: 3px; background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 13px; line-height: 18px; }\n.fd-facet svg { width: 13px; height: 13px; flex: none; }\n.fd-facet[data-kind=\"groupBy\"] { background: var(--fd-success-soft); color: var(--fd-success); }\n.fd-facet-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n/* 24px each way: a target a finger can hit (WCAG 2.5.8). */\n.fd-facet-remove { all: unset; cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 2px; font-size: 15px; line-height: 1; opacity: 0.7; }\n.fd-facet-remove:hover, .fd-facet-remove:focus-visible { opacity: 1; background: var(--fd-surface); }\n.fd-search-input { flex: 1 1 140px; min-width: 100px; border: none; outline: none; background: none; font: inherit; font-size: 14px; color: var(--fd-text); padding: 5px 4px; }\n.fd-form .fd-search-input:focus-visible { outline: none; }\n.fd-search-toggle { all: unset; cursor: pointer; display: grid; place-items: center; width: 30px; height: 28px; border-radius: 3px; color: var(--fd-muted); }\n/* Physical sides: a down chevron points down in either direction. */\n.fd-search-toggle::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }\n.fd-search-toggle[aria-expanded=\"true\"]::before { transform: translateY(2px) rotate(-135deg); }\n.fd-search-toggle:hover, .fd-search-toggle[aria-expanded=\"true\"] { background: var(--fd-page); color: var(--fd-text); }\n.fd-search-toggle:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-search-suggestions, .fd-search-panel { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); box-sizing: border-box; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); }\n.fd-search-suggestions { list-style: none; margin: 0; padding: 4px 0; }\n.fd-search-suggestions [role=\"option\"] { padding: 7px 12px; cursor: pointer; font-size: 14px; }\n.fd-search-suggestions [role=\"option\"][aria-selected=\"true\"] { background: var(--fd-accent-soft); }\n.fd-search-panel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-block: 6px; }\n.fd-search-group { display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 4px 10px 8px; min-width: 0; }\n.fd-search-group + .fd-search-group { border-inline-start: 1px solid var(--fd-border); }\n@container fd-search (max-width: 540px) {\n  .fd-search-panel { grid-auto-flow: row; }\n  .fd-search-group + .fd-search-group { border-inline-start: none; border-block-start: 1px solid var(--fd-border); padding-block-start: 8px; }\n}\n.fd-search-heading { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; padding: 4px 6px 6px; }\n.fd-search-heading svg { width: 15px; height: 15px; }\n.fd-search-group[data-group-kind=\"filters\"] .fd-search-heading svg { color: var(--fd-accent); }\n.fd-search-group[data-group-kind=\"groupBy\"] .fd-search-heading svg { color: var(--fd-success); }\n.fd-search-group[data-group-kind=\"favourites\"] .fd-search-heading svg { color: var(--fd-warning); }\n.fd-search-option { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 4px; font-size: 14px; color: var(--fd-text); }\n.fd-search-option::before { content: ''; width: 14px; flex: none; text-align: center; color: var(--fd-accent); font-weight: 700; }\n.fd-search-option[aria-pressed=\"true\"]::before { content: '\u2713'; }\n.fd-search-option:hover, .fd-search-option:focus-visible { background: var(--fd-page); }\n.fd-search-add { color: var(--fd-muted); margin-block-start: 4px; }\n.fd-search-add::before { content: '+'; color: var(--fd-muted); font-weight: 400; }\n.fd-custom-filter, .fd-favourite-form { display: grid; gap: 6px; padding: 6px; }\n.fd-custom-filter .fd-input, .fd-favourite-form .fd-input { width: 100%; box-sizing: border-box; min-height: 30px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); padding: 3px 6px; font: inherit; font-size: 13.5px; background: var(--fd-surface); color: var(--fd-text); }\n.fd-favourite-default { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }\n.fd-favourite-list { list-style: none; margin: 0; padding: 0; }\n.fd-favourite { display: flex; align-items: center; }\n.fd-favourite .fd-search-option { flex: 1; min-width: 0; }\n.fd-favourite .fd-search-option[data-default=\"true\"]::before { content: '\u2605'; color: var(--fd-warning); }\n.fd-favourite-remove { all: unset; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--fd-muted); }\n.fd-favourite-remove:hover { background: var(--fd-page); color: var(--fd-error); }\n.fd-favourites-none { margin: 0; padding: 4px 6px; color: var(--fd-muted); font-size: 13px; }\n.fd-list-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 3px 4px 3px 10px; border-radius: var(--fd-control-radius); background: var(--fd-accent-soft); }\n.fd-list-count { font-weight: 600; font-size: 13.5px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n.fd-pager { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }\n.fd-pager-text { color: var(--fd-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; margin-inline-end: 6px; white-space: nowrap; }\n.fd-pager-button { min-width: 32px; padding-inline: 0; font-size: 18px; line-height: 1; }\n.fd-list-scroll { overflow-x: auto; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); }\n.fd-list-table { width: 100%; border-collapse: collapse; font-size: 14px; }\n.fd-list-table th { text-align: start; font-weight: 600; font-size: 13px; color: var(--fd-text); padding: 8px 10px; border-block-end: 1px solid var(--fd-border-strong); white-space: nowrap; background: var(--fd-surface); }\n.fd-list-table td { padding: 7px 10px; border-block-end: 1px solid var(--fd-border); max-width: 28em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-list-table tbody tr:last-child td { border-block-end: none; }\n.fd-list-table .fd-num { text-align: end; font-variant-numeric: tabular-nums; }\n.fd-list-table th.fd-list-check, .fd-list-table td.fd-list-check { width: 36px; padding-inline: 10px 0; }\n.fd-list-checkbox { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--fd-accent); cursor: pointer; }\n.fd-list-sort { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 4px; font: inherit; color: inherit; }\n.fd-list-sort::after { content: ''; width: 0; height: 0; border-inline: 4px solid transparent; opacity: 0; }\n.fd-list-sort:hover::after { opacity: 0.35; border-block-start: 5px solid currentColor; }\n.fd-list-table th[aria-sort=\"ascending\"] .fd-list-sort::after { opacity: 1; border-block-start: none; border-block-end: 5px solid currentColor; }\n.fd-list-table th[aria-sort=\"descending\"] .fd-list-sort::after { opacity: 1; border-block-end: none; border-block-start: 5px solid currentColor; }\n.fd-list-table th.fd-num .fd-list-sort { justify-content: flex-end; }\n.fd-list-table th.fd-num .fd-list-sort::after { order: -1; }\n.fd-list-sort:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-list-row:hover td { background: var(--fd-page); }\n.fd-list-openable { cursor: pointer; }\n.fd-list-row[aria-selected=\"true\"] td { background: var(--fd-accent-soft); }\n.fd-list-row:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-list-table[aria-busy=\"true\"] tbody { opacity: 0.6; transition: opacity 0.2s 0.15s; }\n.fd-list-group td { padding: 0; background: var(--fd-page); }\n.fd-group-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; padding-inline-start: calc(12px + var(--fd-level, 0) * 22px); font-weight: 600; font-size: 13.5px; color: var(--fd-text); }\n.fd-group-toggle::before { content: ''; flex: none; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.12s; }\n.fd-group-toggle:dir(rtl)::before { transform: rotate(-135deg); }\n.fd-group-toggle[aria-expanded=\"true\"]::before { transform: rotate(135deg); }\n.fd-group-toggle:hover { background: var(--fd-accent-soft); }\n.fd-group-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-group-count { color: var(--fd-muted); font-weight: 400; font-variant-numeric: tabular-nums; }\n.fd-list-more td { padding: 4px 10px; padding-inline-start: calc(46px + var(--fd-level, 0) * 22px); }\n.fd-list-empty, .fd-list-failed { margin: 0; padding: 28px 12px; text-align: center; color: var(--fd-muted); }\n.fd-list-failed { color: var(--fd-error); }\n";
+export declare const LIST_STYLES = "\n.fd-list { display: grid; gap: 10px; min-width: 0; }\n.fd-list [hidden] { display: none !important; }\n.fd-list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 34px; }\n/* A list that is also a map: List, Map, or both side by side; the map's part is drawn by @fieldia/map. */\n.fd-list { container: fd-list / inline-size; }\n.fd-list-views { display: inline-flex; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: hidden; }\n.fd-list-views .fd-button { border: 0; border-radius: 0; min-height: 32px; padding-inline: 12px; }\n.fd-list-views .fd-button + .fd-button { border-inline-start: 1px solid var(--fd-border); }\n.fd-list-views .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); font-weight: 600; }\n.fd-list-body { display: grid; gap: 16px; min-width: 0; }\n.fd-list-records { display: grid; gap: 10px; min-width: 0; align-content: start; }\n.fd-list[data-view=\"list\"] .fd-list-map { display: none; }\n.fd-list[data-view=\"map\"] .fd-list-records, .fd-list[data-view=\"map\"] .fd-pager { display: none; }\n.fd-list[data-view=\"both\"] .fd-list-body { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); align-items: start; }\n.fd-list[data-view=\"both\"] .fd-list-map { position: sticky; top: 8px; }\n/* Too narrow for two: the map over the table. */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-list-body { grid-template-columns: minmax(0, 1fr); } .fd-list[data-view=\"both\"] .fd-list-map { position: static; order: -1; } }\n.fd-list-row.fd-list-hot > td { background: var(--fd-accent-soft); }\n.fd-search { position: relative; flex: 1 1 360px; max-width: 680px; min-width: 0; container: fd-search / inline-size; }\n.fd-search-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 34px; box-sizing: border-box; padding: 2px 2px 2px 8px; padding-inline: 8px 2px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); }\n.fd-search-field:focus-within { border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }\n.fd-search-field > .fd-icon, .fd-search-field > svg { width: 16px; height: 16px; color: var(--fd-muted); flex: none; }\n.fd-facets { display: contents; }\n.fd-facet { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; min-height: 24px; padding-block: 0; padding-inline: 6px 0; border-radius: 3px; background: var(--fd-accent-soft); color: var(--fd-accent); font-size: 13px; line-height: 18px; }\n.fd-facet svg { width: 13px; height: 13px; flex: none; }\n.fd-facet[data-kind=\"groupBy\"] { background: var(--fd-success-soft); color: var(--fd-success); }\n.fd-facet-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n/* 24px each way: a target a finger can hit (WCAG 2.5.8). */\n.fd-facet-remove { all: unset; cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 2px; font-size: 15px; line-height: 1; opacity: 0.7; }\n.fd-facet-remove:hover, .fd-facet-remove:focus-visible { opacity: 1; background: var(--fd-surface); }\n.fd-search-input { flex: 1 1 140px; min-width: 100px; border: none; outline: none; background: none; font: inherit; font-size: 14px; color: var(--fd-text); padding: 5px 4px; }\n.fd-form .fd-search-input:focus-visible { outline: none; }\n.fd-search-toggle { all: unset; cursor: pointer; display: grid; place-items: center; width: 30px; height: 28px; border-radius: 3px; color: var(--fd-muted); }\n/* Physical sides: a down chevron points down in either direction. */\n.fd-search-toggle::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }\n.fd-search-toggle[aria-expanded=\"true\"]::before { transform: translateY(2px) rotate(-135deg); }\n.fd-search-toggle:hover, .fd-search-toggle[aria-expanded=\"true\"] { background: var(--fd-page); color: var(--fd-text); }\n.fd-search-toggle:focus-visible { outline: 2px solid var(--fd-focus); }\n.fd-search-suggestions, .fd-search-panel { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); box-sizing: border-box; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); }\n.fd-search-suggestions { list-style: none; margin: 0; padding: 4px 0; }\n.fd-search-suggestions [role=\"option\"] { padding: 7px 12px; cursor: pointer; font-size: 14px; }\n.fd-search-suggestions [role=\"option\"][aria-selected=\"true\"] { background: var(--fd-accent-soft); }\n.fd-search-panel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-block: 6px; }\n.fd-search-group { display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 4px 10px 8px; min-width: 0; }\n.fd-search-group + .fd-search-group { border-inline-start: 1px solid var(--fd-border); }\n@container fd-search (max-width: 540px) {\n  .fd-search-panel { grid-auto-flow: row; }\n  .fd-search-group + .fd-search-group { border-inline-start: none; border-block-start: 1px solid var(--fd-border); padding-block-start: 8px; }\n}\n.fd-search-heading { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; padding: 4px 6px 6px; }\n.fd-search-heading svg { width: 15px; height: 15px; }\n.fd-search-group[data-group-kind=\"filters\"] .fd-search-heading svg { color: var(--fd-accent); }\n.fd-search-group[data-group-kind=\"groupBy\"] .fd-search-heading svg { color: var(--fd-success); }\n.fd-search-group[data-group-kind=\"favourites\"] .fd-search-heading svg { color: var(--fd-warning); }\n.fd-search-option { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 4px; font-size: 14px; color: var(--fd-text); }\n.fd-search-option::before { content: ''; width: 14px; flex: none; text-align: center; color: var(--fd-accent); font-weight: 700; }\n.fd-search-option[aria-pressed=\"true\"]::before { content: '\u2713'; }\n.fd-search-option:hover, .fd-search-option:focus-visible { background: var(--fd-page); }\n.fd-search-add { color: var(--fd-muted); margin-block-start: 4px; }\n.fd-search-add::before { content: '+'; color: var(--fd-muted); font-weight: 400; }\n.fd-custom-filter, .fd-favourite-form { display: grid; gap: 6px; padding: 6px; }\n.fd-custom-filter .fd-input, .fd-favourite-form .fd-input { width: 100%; box-sizing: border-box; min-height: 30px; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); padding: 3px 6px; font: inherit; font-size: 13.5px; background: var(--fd-surface); color: var(--fd-text); }\n.fd-favourite-default { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }\n.fd-favourite-list { list-style: none; margin: 0; padding: 0; }\n.fd-favourite { display: flex; align-items: center; }\n.fd-favourite .fd-search-option { flex: 1; min-width: 0; }\n.fd-favourite .fd-search-option[data-default=\"true\"]::before { content: '\u2605'; color: var(--fd-warning); }\n.fd-favourite-remove { all: unset; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--fd-muted); }\n.fd-favourite-remove:hover { background: var(--fd-page); color: var(--fd-error); }\n.fd-favourites-none { margin: 0; padding: 4px 6px; color: var(--fd-muted); font-size: 13px; }\n.fd-list-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 3px 4px 3px 10px; border-radius: var(--fd-control-radius); background: var(--fd-accent-soft); }\n.fd-list-count { font-weight: 600; font-size: 13.5px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n.fd-pager { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }\n.fd-pager-text { color: var(--fd-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; margin-inline-end: 6px; white-space: nowrap; }\n.fd-pager-button { min-width: 32px; padding-inline: 0; font-size: 18px; line-height: 1; }\n.fd-list-scroll { overflow-x: auto; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); }\n.fd-list-table { width: 100%; border-collapse: collapse; font-size: 14px; }\n.fd-list-table th { text-align: start; font-weight: 600; color: var(--fd-text); padding: 8px 10px; border-block-end: 1px solid var(--fd-border-strong); white-space: nowrap; background: var(--fd-surface); }\n/* The header's words smaller than the rows', its cell the rows' size: a column's width in characters is the same in both. */\n.fd-list-head { font-size: 13px; }\n.fd-list-table td { padding: 7px 10px; border-block-end: 1px solid var(--fd-border); max-width: 28em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-list-table tbody tr:last-child td { border-block-end: none; }\n.fd-list-table .fd-num { text-align: end; font-variant-numeric: tabular-nums; }\n.fd-list-table th.fd-list-check, .fd-list-table td.fd-list-check { width: 36px; padding-inline: 10px 0; }\n.fd-list-checkbox { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--fd-accent); cursor: pointer; }\n.fd-list-sort { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 4px; font: inherit; color: inherit; }\n.fd-list-sort::after { content: ''; width: 0; height: 0; border-inline: 4px solid transparent; opacity: 0; }\n.fd-list-sort:hover::after { opacity: 0.35; border-block-start: 5px solid currentColor; }\n.fd-list-table th[aria-sort=\"ascending\"] .fd-list-sort::after { opacity: 1; border-block-start: none; border-block-end: 5px solid currentColor; }\n.fd-list-table th[aria-sort=\"descending\"] .fd-list-sort::after { opacity: 1; border-block-end: none; border-block-start: 5px solid currentColor; }\n.fd-list-table th.fd-num .fd-list-sort { justify-content: flex-end; }\n.fd-list-table th.fd-num .fd-list-sort::after { order: -1; }\n.fd-list-sort:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-list-row:hover td { background: var(--fd-page); }\n.fd-list-openable { cursor: pointer; }\n.fd-list-row[aria-selected=\"true\"] td { background: var(--fd-accent-soft); }\n.fd-list-row:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-list-table[aria-busy=\"true\"] tbody { opacity: 0.6; transition: opacity 0.2s 0.15s; }\n.fd-list-group td { padding: 0; background: var(--fd-page); }\n.fd-group-toggle { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; padding-inline-start: calc(12px + var(--fd-level, 0) * 22px); font-weight: 600; font-size: 13.5px; color: var(--fd-text); }\n.fd-group-toggle::before { content: ''; flex: none; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.12s; }\n.fd-group-toggle:dir(rtl)::before { transform: rotate(-135deg); }\n.fd-group-toggle[aria-expanded=\"true\"]::before { transform: rotate(135deg); }\n.fd-group-toggle:hover { background: var(--fd-accent-soft); }\n.fd-group-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-group-count { color: var(--fd-muted); font-weight: 400; font-variant-numeric: tabular-nums; }\n.fd-list-more td { padding: 4px 10px; padding-inline-start: calc(46px + var(--fd-level, 0) * 22px); }\n.fd-list-empty, .fd-list-failed { margin: 0; padding: 28px 12px; text-align: center; color: var(--fd-muted); }\n.fd-list-failed { color: var(--fd-error); }\n\n/* A column of a given width (cells), in characters of the rows' words: what does not fit ends in \"\u2026\". */\n.fd-list-table [data-width] { box-sizing: content-box; width: calc(var(--fd-col-width) * 1ch); max-width: calc(var(--fd-col-width) * 1ch); overflow: hidden; text-overflow: ellipsis; }\n.fd-list-table th[data-width] .fd-list-sort { min-width: 0; }\n.fd-list-table th[data-width] .fd-list-head { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n/* A column in pixels: the whole column, its paddings in it, as a work tracker sizes its grid's. */\n.fd-list-table [data-width-px] { box-sizing: border-box; width: var(--fd-col-px); min-width: var(--fd-col-px); max-width: var(--fd-col-px); overflow: hidden; text-overflow: ellipsis; }\n.fd-list-table th[data-width-px] .fd-list-sort { min-width: 0; }\n.fd-list-table th[data-width-px] .fd-list-head { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n/* Every column sized: the table as wide as they are, never stretched; wider than its card, the card scrolls sideways. */\n.fd-list-table[data-fixed] { width: max-content; }\n/* The row whose record is open (in a popup over the list): lit as a chosen one is, until it closes. */\n.fd-list-row[aria-current=\"true\"] td { background: var(--fd-accent-soft); }\n/* What a cell draws before its words: a kind's icon in its colour, a state's dot. */\n.fd-list-lead { width: 14px; height: 14px; margin-inline-end: 6px; vertical-align: -2px; flex: none; stroke-width: 2.2; }\n.fd-list-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; vertical-align: 1px; background: var(--fd-dot, var(--fd-border-strong)); }\n.fd-list-dot[data-tone=\"muted\"] { --fd-dot: var(--fd-border-strong); }\n.fd-list-dot[data-tone=\"danger\"] { --fd-dot: var(--fd-error); }\n.fd-list-dot[data-tone=\"success\"] { --fd-dot: var(--fd-success); }\n.fd-list-dot[data-tone=\"warning\"] { --fd-dot: #d97706; }\n.fd-list-dot[data-tone=\"info\"] { --fd-dot: var(--fd-info); }\n@media (forced-colors: active) { .fd-list-dot { background: CanvasText; } }\n/* Rows under their parent: Expand all and Collapse all in the header, a toggle before a parent's name, each depth further in. */\n.fd-list-table .fd-list-tree { width: 1%; padding-inline: 10px 4px; white-space: nowrap; }\n.fd-list-folds { display: inline-flex; gap: 6px; vertical-align: middle; }\n.fd-list-fold { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--fd-text); border-radius: 2px; color: var(--fd-text); font-size: 18px; font-weight: 400; line-height: 1; }\n.fd-list-fold:hover { background: var(--fd-page); }\n.fd-list-fold:focus-visible, .fd-list-twisty:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-list-row[data-depth] > td[data-name] { padding-inline-start: calc(10px + var(--fd-depth, 0) * 20px); }\n.fd-list-twisty, .fd-list-twisty-room { display: inline-block; width: 20px; height: 20px; margin-inline-end: 2px; vertical-align: middle; }\n.fd-list-twisty { all: unset; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-inline-end: 2px; vertical-align: middle; cursor: pointer; border-radius: 2px; color: var(--fd-muted); }\n.fd-list-twisty::before { content: ''; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.12s; }\n.fd-list-twisty:dir(rtl)::before { transform: rotate(-135deg); }\n.fd-list-twisty[aria-expanded=\"true\"]::before { transform: rotate(135deg); }\n.fd-list-twisty:hover { background: var(--fd-page); color: var(--fd-text); }\n\n/* A list with the filter bar: its card above the table's, the pager under the table. */\n.fd-list[data-search=\"fields\"] .fd-list-bar { gap: 16px; }\n.fd-list[data-search=\"fields\"] .fd-list-records > .fd-pager { justify-self: end; }\n/* Fluent's lists, as a work tracker draws its backlog: the table a card with a light shadow and no frame; the header's words\n   small, semibold and muted, the columns parted by short rules; rows 35px tall with no lines between them. */\n/* Its header 38px and its rule, 39px in all whether a column's width is in pixels (its whole box) or characters. */\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table th { position: relative; box-sizing: border-box; height: 39px; padding-block: 0; color: var(--fd-muted); border-block-end: 1px solid var(--fd-border); }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-head { font-size: 12px; font-weight: 600; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table thead th:not(:first-child)::after { content: ''; position: absolute; inset-inline-end: var(--fd-rule-in, 0px); inset-block: 10px; width: 1px; background: var(--fd-border); }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table thead th.fd-list-tree::after, .fd-form[data-fd-theme=\"fluent\"] .fd-list-table thead th.fd-list-check::after { content: none; }\n/* A column the page says has no rule (a tracker's Order, which the person cannot size). */\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table thead th[data-rule=\"none\"]::after { content: none; }\n/* Rows 36px apart (measured on the tracker's backlog: 17 rows from y 280 to 892); a cell's words 3px in from its column's\n   start, its header's 7px, so a header stands a little in from the words under it. */\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table td { height: 36px; padding-block: 0; padding-inline: 3px 8px; border-block-end: 0; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table th { padding-inline: 7px 8px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-row:hover td { background: var(--fd-fill, var(--fd-page)); }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-row[aria-current=\"true\"] td { background: var(--fd-accent-soft); }\n/* Expand all and Collapse all 15px in, 25px by 22px and 4px apart, 7px before the next column; a parent's toggle, or room\n   the size of one, 24px and 5px before the name, and the name's header over the name. */\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table .fd-list-tree { padding-inline: 15px 7px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-folds { gap: 4px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-fold { width: 25px; height: 22px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-row[data-depth] > td[data-name] { padding-inline-start: calc(3px + var(--fd-depth, 0) * 20px); }\n/* The kind's icon 30px into the name's column, its words 4px after it, the header's word over the icon (08_18: the bug's\n   ink at 495, its title's words at 512, \"Title\" at 494). */\n.fd-form[data-fd-theme=\"fluent\"] :is(.fd-list-twisty, .fd-list-twisty-room) { width: 24px; margin-inline-end: 3px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-table th[data-name] { padding-inline-start: 30px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-lead { margin-inline-end: 4px; }\n/* The grid runs 9px on past its last column's rule, as the tracker's does (08_18: its white to 2011, the rule at 2002). */\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll:has(> .fd-list-table[data-fixed]) { padding-inline-end: 9px; }\n/* Its card's scroll bar as the tracker's, on every system that lets a page draw one: 15px, a light track with a hairline\n   at its inner edge, a rounded thumb in it, no arrows. Each selector written out: Chrome drops a part's :horizontal under\n   an :is(), and a part paints no logical border. */\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar { width: 15px; height: 15px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-track,\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-corner { background: color-mix(in srgb, var(--fd-text) 2.2%, var(--fd-surface)); }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-track:horizontal {\n  border-top: 1px solid color-mix(in srgb, var(--fd-text) 10%, var(--fd-surface)); border-bottom: 1px solid color-mix(in srgb, var(--fd-text) 7.5%, var(--fd-surface));\n}\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-track:vertical {\n  border-left: 1px solid color-mix(in srgb, var(--fd-text) 10%, var(--fd-surface)); border-right: 1px solid color-mix(in srgb, var(--fd-text) 7.5%, var(--fd-surface));\n}\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-thumb {\n  border: solid transparent; border-width: 4px 3px 3px; border-radius: 8px; background: color-mix(in srgb, var(--fd-text) 24.5%, var(--fd-surface)) padding-box;\n}\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-thumb:vertical { border-width: 3px 3px 3px 4px; }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--fd-text) 40%, var(--fd-surface)); }\n.fd-form[data-fd-theme=\"fluent\"] .fd-list-scroll::-webkit-scrollbar-button { display: none; }\n";
 /** Puts the list's look in the document once. */
 export declare function installListStyles(doc: Document): void;