@fieldia/viewer 0.19.1 → 0.20.0

package/src/lib/group-styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A group drawn as a work item draws one (section-tools.ts): its heading with
+ * its tools at the end — ⤢, ^ and ⌄ — its fields under it, and the group shown
+ * alone over the body. The head part's, put in its place among Fieldia's the
+ * first time a page draws such a heading (installPartStyles, PART_RANK.groups).
+ */
+export declare const GROUP_CSS = "\n/* ---- a group's heading with tools at its end: 16px words, a rule 50px down ---- */\n.fd-form .fd-section[data-head] { gap: 0; --fd-group-inset: 8px; }\n.fd-form .fd-section[data-head] > .fd-section-title {\n  display: flex; align-items: center; float: none; width: 100%; box-sizing: border-box; min-height: 51px; margin: 0; padding: 0;\n  border-block-end: 1px solid var(--fd-border); font-size: 16px; font-weight: 600; line-height: 22px; color: var(--fd-heading, var(--fd-text));\n  text-transform: none; letter-spacing: 0;\n}\n.fd-form .fd-section[data-head] > .fd-section-title > .fd-section-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }\n.fd-form .fd-section[data-head] > .fd-section-title .fd-icon { margin-inline-end: 0.4em; }\n.fd-form .fd-section[data-head] > .fd-grid { padding: 4px var(--fd-group-inset) 0; row-gap: 7px; }\n/* Its fields: a 12px label on a 16px line right over a 32px box, words 7px into it, 55px from one label to the next. */\n.fd-form .fd-section[data-head] { --fd-pad-x: 6px; --fd-control-height: 32px; }\n.fd-form .fd-section[data-head] > .fd-grid > .fd-field { gap: 0; line-height: 20px; }\n.fd-form .fd-section[data-head] > .fd-grid > .fd-field > .fd-label { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--fd-muted); }\n/* A number's box is a compact one, 22px: 45px from its label to the next one, as the tracker's numbers (measured 20.22.23). */\n.fd-form .fd-section[data-head] > .fd-grid > .fd-field:is([data-type=\"integer\"], [data-type=\"float\"]) > input.fd-input { height: 22px; min-height: 22px; padding-block: 0; }\n/* A lock in such a group is drawn in the words' colour, a padlock 12px wide and 13px tall, as the tracker's. */\n.fd-form .fd-section[data-head] > .fd-grid > .fd-field .fd-lock { color: var(--fd-text); }\n.fd-form .fd-section[data-head] > .fd-grid > .fd-field .fd-lock .fd-icon { width: 15px; height: 15px; }\n/* At a value's start, its padlock's edge a pixel past the label's, as the tracker's: the 18px button pulled 2px back and up. */\n.fd-form .fd-section[data-head] > .fd-grid > .fd-field[data-lock-at=\"value\"] > .fd-lock-wrap { margin-inline-start: -2px; inset-block-start: -1.5px; }\n/* Groups with such headings, one under another: 11px from one's last part to the next one's heading. */\n.fd-form .fd-grid:has(> .fd-section[data-head]) { row-gap: 11px; }\n.fd-section-tools { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; flex: none; opacity: 0; transition: opacity 0.1s ease; }\n/* In a work heading its tools sit low, their middle 8px under the title's, as the tracker's do (measured 20.22.23). */\n.fd-form .fd-section[data-head] > .fd-section-title .fd-section-tools { align-self: flex-end; margin-block-end: 1px; margin-inline-end: -2px; }\n/* Pointed at, worked in or folded, a group shows its tools; where nothing can point, always. */\n.fd-form .fd-section[data-head]:is(:hover, :focus-within, .fd-section-folded, [data-maximised]) > .fd-section-title .fd-section-tools { opacity: 1; }\n@media (hover: none) { .fd-section-tools { opacity: 1; } }\n.fd-section-tool {\n  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 2px;\n  background: none; color: var(--fd-text); cursor: pointer; font: inherit;\n}\n.fd-section-tool:hover { background: var(--fd-text-hover); }\n.fd-section-tool:active { background: var(--fd-text-pressed); }\n.fd-section-tool:focus-visible { outline: 1px solid var(--fd-focus); outline-offset: -1px; }\n/* Their icons 18px in lines one pixel wide, of the words' colour: \u2922 13px across, ^ 9px, \u270E 13px, as the tracker's (measured 20.22.23). */\n.fd-section-tool svg { width: 18px; height: 18px; stroke-width: 1.34; }\n/* In the words' colour too in a heading, whose own icon before its name is muted. */\n.fd-section-title .fd-section-tools .fd-icon { color: inherit; }\n/* Shown alone over the body: the parts round it out of sight, its own heading still there to put it back. */\n.fd-form [data-unshown] { display: none !important; }\n.fd-form .fd-grid[data-maximising] { grid-template-columns: minmax(0, 1fr) !important; }\n.fd-form .fd-grid[data-maximising] > * { grid-column: 1 / -1 !important; }\n.fd-form .fd-section[data-maximised] { min-height: 60vh; }\n\n";
+/** The sheet in a document, once, in its place among Fieldia's. */
+export declare function installGroupStyles(doc: Document): void;

package/src/lib/group-styles.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GROUP_CSS = void 0;
+exports.installGroupStyles = installGroupStyles;
+const widgets_1 = require("@fieldia/widgets");
+/**
+ * A group drawn as a work item draws one (section-tools.ts): its heading with
+ * its tools at the end — ⤢, ^ and ⌄ — its fields under it, and the group shown
+ * alone over the body. The head part's, put in its place among Fieldia's the
+ * first time a page draws such a heading (installPartStyles, PART_RANK.groups).
+ */
+exports.GROUP_CSS = `
+/* ---- a group's heading with tools at its end: 16px words, a rule 50px down ---- */
+.fd-form .fd-section[data-head] { gap: 0; --fd-group-inset: 8px; }
+.fd-form .fd-section[data-head] > .fd-section-title {
+  display: flex; align-items: center; float: none; width: 100%; box-sizing: border-box; min-height: 51px; margin: 0; padding: 0;
+  border-block-end: 1px solid var(--fd-border); font-size: 16px; font-weight: 600; line-height: 22px; color: var(--fd-heading, var(--fd-text));
+  text-transform: none; letter-spacing: 0;
+}
+.fd-form .fd-section[data-head] > .fd-section-title > .fd-section-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
+.fd-form .fd-section[data-head] > .fd-section-title .fd-icon { margin-inline-end: 0.4em; }
+.fd-form .fd-section[data-head] > .fd-grid { padding: 4px var(--fd-group-inset) 0; row-gap: 7px; }
+/* Its fields: a 12px label on a 16px line right over a 32px box, words 7px into it, 55px from one label to the next. */
+.fd-form .fd-section[data-head] { --fd-pad-x: 6px; --fd-control-height: 32px; }
+.fd-form .fd-section[data-head] > .fd-grid > .fd-field { gap: 0; line-height: 20px; }
+.fd-form .fd-section[data-head] > .fd-grid > .fd-field > .fd-label { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--fd-muted); }
+/* A number's box is a compact one, 22px: 45px from its label to the next one, as the tracker's numbers (measured 20.22.23). */
+.fd-form .fd-section[data-head] > .fd-grid > .fd-field:is([data-type="integer"], [data-type="float"]) > input.fd-input { height: 22px; min-height: 22px; padding-block: 0; }
+/* A lock in such a group is drawn in the words' colour, a padlock 12px wide and 13px tall, as the tracker's. */
+.fd-form .fd-section[data-head] > .fd-grid > .fd-field .fd-lock { color: var(--fd-text); }
+.fd-form .fd-section[data-head] > .fd-grid > .fd-field .fd-lock .fd-icon { width: 15px; height: 15px; }
+/* At a value's start, its padlock's edge a pixel past the label's, as the tracker's: the 18px button pulled 2px back and up. */
+.fd-form .fd-section[data-head] > .fd-grid > .fd-field[data-lock-at="value"] > .fd-lock-wrap { margin-inline-start: -2px; inset-block-start: -1.5px; }
+/* Groups with such headings, one under another: 11px from one's last part to the next one's heading. */
+.fd-form .fd-grid:has(> .fd-section[data-head]) { row-gap: 11px; }
+.fd-section-tools { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; flex: none; opacity: 0; transition: opacity 0.1s ease; }
+/* In a work heading its tools sit low, their middle 8px under the title's, as the tracker's do (measured 20.22.23). */
+.fd-form .fd-section[data-head] > .fd-section-title .fd-section-tools { align-self: flex-end; margin-block-end: 1px; margin-inline-end: -2px; }
+/* Pointed at, worked in or folded, a group shows its tools; where nothing can point, always. */
+.fd-form .fd-section[data-head]:is(:hover, :focus-within, .fd-section-folded, [data-maximised]) > .fd-section-title .fd-section-tools { opacity: 1; }
+@media (hover: none) { .fd-section-tools { opacity: 1; } }
+.fd-section-tool {
+  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 2px;
+  background: none; color: var(--fd-text); cursor: pointer; font: inherit;
+}
+.fd-section-tool:hover { background: var(--fd-text-hover); }
+.fd-section-tool:active { background: var(--fd-text-pressed); }
+.fd-section-tool:focus-visible { outline: 1px solid var(--fd-focus); outline-offset: -1px; }
+/* Their icons 18px in lines one pixel wide, of the words' colour: ⤢ 13px across, ^ 9px, ✎ 13px, as the tracker's (measured 20.22.23). */
+.fd-section-tool svg { width: 18px; height: 18px; stroke-width: 1.34; }
+/* In the words' colour too in a heading, whose own icon before its name is muted. */
+.fd-section-title .fd-section-tools .fd-icon { color: inherit; }
+/* Shown alone over the body: the parts round it out of sight, its own heading still there to put it back. */
+.fd-form [data-unshown] { display: none !important; }
+.fd-form .fd-grid[data-maximising] { grid-template-columns: minmax(0, 1fr) !important; }
+.fd-form .fd-grid[data-maximising] > * { grid-column: 1 / -1 !important; }
+.fd-form .fd-section[data-maximised] { min-height: 60vh; }
+
+`;
+/** The sheet in a document, once, in its place among Fieldia's. */
+function installGroupStyles(doc) {
+    (0, widgets_1.installPartStyles)(doc, 'fieldia-group-styles', exports.GROUP_CSS, widgets_1.PART_RANK.groups);
+}
+//# sourceMappingURL=group-styles.js.map

package/src/lib/group-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-styles.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/group-styles.ts"],"names":[],"mappings":";;;AA0DA,gDAEC;AA5DD,8CAAgE;AAEhE;;;;;GAKG;AACU,QAAA,SAAS,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+ClC,CAAC;AAEF,mEAAmE;AACnE,SAAgB,kBAAkB,CAAC,GAAa;IAC9C,IAAA,2BAAiB,EAAC,GAAG,EAAE,sBAAsB,EAAE,iBAAS,EAAE,mBAAS,CAAC,MAAM,CAAC,CAAC;AAC9E,CAAC"}

package/src/lib/group-styles.mjs

@@ -0,0 +1,60 @@
+import { installPartStyles, PART_RANK } from '@fieldia/widgets';
+/**
+ * A group drawn as a work item draws one (section-tools.ts): its heading with
+ * its tools at the end — ⤢, ^ and ⌄ — its fields under it, and the group shown
+ * alone over the body. The head part's, put in its place among Fieldia's the
+ * first time a page draws such a heading (installPartStyles, PART_RANK.groups).
+ */
+export const GROUP_CSS = /* css */ `
+/* ---- a group's heading with tools at its end: 16px words, a rule 50px down ---- */
+.fd-form .fd-section[data-head] { gap: 0; --fd-group-inset: 8px; }
+.fd-form .fd-section[data-head] > .fd-section-title {
+  display: flex; align-items: center; float: none; width: 100%; box-sizing: border-box; min-height: 51px; margin: 0; padding: 0;
+  border-block-end: 1px solid var(--fd-border); font-size: 16px; font-weight: 600; line-height: 22px; color: var(--fd-heading, var(--fd-text));
+  text-transform: none; letter-spacing: 0;
+}
+.fd-form .fd-section[data-head] > .fd-section-title > .fd-section-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
+.fd-form .fd-section[data-head] > .fd-section-title .fd-icon { margin-inline-end: 0.4em; }
+.fd-form .fd-section[data-head] > .fd-grid { padding: 4px var(--fd-group-inset) 0; row-gap: 7px; }
+/* Its fields: a 12px label on a 16px line right over a 32px box, words 7px into it, 55px from one label to the next. */
+.fd-form .fd-section[data-head] { --fd-pad-x: 6px; --fd-control-height: 32px; }
+.fd-form .fd-section[data-head] > .fd-grid > .fd-field { gap: 0; line-height: 20px; }
+.fd-form .fd-section[data-head] > .fd-grid > .fd-field > .fd-label { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--fd-muted); }
+/* A number's box is a compact one, 22px: 45px from its label to the next one, as the tracker's numbers (measured 20.22.23). */
+.fd-form .fd-section[data-head] > .fd-grid > .fd-field:is([data-type="integer"], [data-type="float"]) > input.fd-input { height: 22px; min-height: 22px; padding-block: 0; }
+/* A lock in such a group is drawn in the words' colour, a padlock 12px wide and 13px tall, as the tracker's. */
+.fd-form .fd-section[data-head] > .fd-grid > .fd-field .fd-lock { color: var(--fd-text); }
+.fd-form .fd-section[data-head] > .fd-grid > .fd-field .fd-lock .fd-icon { width: 15px; height: 15px; }
+/* At a value's start, its padlock's edge a pixel past the label's, as the tracker's: the 18px button pulled 2px back and up. */
+.fd-form .fd-section[data-head] > .fd-grid > .fd-field[data-lock-at="value"] > .fd-lock-wrap { margin-inline-start: -2px; inset-block-start: -1.5px; }
+/* Groups with such headings, one under another: 11px from one's last part to the next one's heading. */
+.fd-form .fd-grid:has(> .fd-section[data-head]) { row-gap: 11px; }
+.fd-section-tools { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; flex: none; opacity: 0; transition: opacity 0.1s ease; }
+/* In a work heading its tools sit low, their middle 8px under the title's, as the tracker's do (measured 20.22.23). */
+.fd-form .fd-section[data-head] > .fd-section-title .fd-section-tools { align-self: flex-end; margin-block-end: 1px; margin-inline-end: -2px; }
+/* Pointed at, worked in or folded, a group shows its tools; where nothing can point, always. */
+.fd-form .fd-section[data-head]:is(:hover, :focus-within, .fd-section-folded, [data-maximised]) > .fd-section-title .fd-section-tools { opacity: 1; }
+@media (hover: none) { .fd-section-tools { opacity: 1; } }
+.fd-section-tool {
+  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 2px;
+  background: none; color: var(--fd-text); cursor: pointer; font: inherit;
+}
+.fd-section-tool:hover { background: var(--fd-text-hover); }
+.fd-section-tool:active { background: var(--fd-text-pressed); }
+.fd-section-tool:focus-visible { outline: 1px solid var(--fd-focus); outline-offset: -1px; }
+/* Their icons 18px in lines one pixel wide, of the words' colour: ⤢ 13px across, ^ 9px, ✎ 13px, as the tracker's (measured 20.22.23). */
+.fd-section-tool svg { width: 18px; height: 18px; stroke-width: 1.34; }
+/* In the words' colour too in a heading, whose own icon before its name is muted. */
+.fd-section-title .fd-section-tools .fd-icon { color: inherit; }
+/* Shown alone over the body: the parts round it out of sight, its own heading still there to put it back. */
+.fd-form [data-unshown] { display: none !important; }
+.fd-form .fd-grid[data-maximising] { grid-template-columns: minmax(0, 1fr) !important; }
+.fd-form .fd-grid[data-maximising] > * { grid-column: 1 / -1 !important; }
+.fd-form .fd-section[data-maximised] { min-height: 60vh; }
+
+`;
+/** The sheet in a document, once, in its place among Fieldia's. */
+export function installGroupStyles(doc) {
+    installPartStyles(doc, 'fieldia-group-styles', GROUP_CSS, PART_RANK.groups);
+}
+//# sourceMappingURL=group-styles.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group-styles.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/group-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEhE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+ClC,CAAC;AAEF,mEAAmE;AACnE,MAAM,UAAU,kBAAkB,CAAC,GAAa;IAC9C,iBAAiB,CAAC,GAAG,EAAE,sBAAsB,EAAE,SAAS,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;AAC9E,CAAC"}

package/src/lib/head-part.d.mts

@@ -0,0 +1,15 @@
+/**
+ * The head part (parts.ts in @fieldia/widgets): what a work item's record draws
+ * beyond any page's — its head (record-head.ts) with the tabs placed in it,
+ * buttons split, toggled or shown by their icon alone (rich-button.ts), a
+ * group's heading with its tools (section-tools.ts), the inset dialog's ⤢ and
+ * grip (dialog-window.ts) — and their stylesheets, which each puts in the page
+ * as it is first drawn. Loaded the first time a page draws one, through
+ * `headPart`; the viewer waits for it before it draws such a page.
+ */
+export { recordHead } from './record-head.mjs';
+export { richButton } from './rich-button.mjs';
+export { sectionHeading } from './section-tools.mjs';
+export { wireGrip, wireMaximise } from './dialog-window.mjs';
+export { installGroupStyles } from './group-styles.mjs';
+export { installHeadStyles } from './head-styles.mjs';

package/src/lib/head-part.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The head part (parts.ts in @fieldia/widgets): what a work item's record draws
+ * beyond any page's — its head (record-head.ts) with the tabs placed in it,
+ * buttons split, toggled or shown by their icon alone (rich-button.ts), a
+ * group's heading with its tools (section-tools.ts), the inset dialog's ⤢ and
+ * grip (dialog-window.ts) — and their stylesheets, which each puts in the page
+ * as it is first drawn. Loaded the first time a page draws one, through
+ * `headPart`; the viewer waits for it before it draws such a page.
+ */
+export { recordHead } from './record-head';
+export { richButton } from './rich-button';
+export { sectionHeading } from './section-tools';
+export { wireGrip, wireMaximise } from './dialog-window';
+export { installGroupStyles } from './group-styles';
+export { installHeadStyles } from './head-styles';

package/src/lib/head-part.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installHeadStyles = exports.installGroupStyles = exports.wireMaximise = exports.wireGrip = exports.sectionHeading = exports.richButton = exports.recordHead = void 0;
+/**
+ * The head part (parts.ts in @fieldia/widgets): what a work item's record draws
+ * beyond any page's — its head (record-head.ts) with the tabs placed in it,
+ * buttons split, toggled or shown by their icon alone (rich-button.ts), a
+ * group's heading with its tools (section-tools.ts), the inset dialog's ⤢ and
+ * grip (dialog-window.ts) — and their stylesheets, which each puts in the page
+ * as it is first drawn. Loaded the first time a page draws one, through
+ * `headPart`; the viewer waits for it before it draws such a page.
+ */
+var record_head_1 = require("./record-head");
+Object.defineProperty(exports, "recordHead", { enumerable: true, get: function () { return record_head_1.recordHead; } });
+var rich_button_1 = require("./rich-button");
+Object.defineProperty(exports, "richButton", { enumerable: true, get: function () { return rich_button_1.richButton; } });
+var section_tools_1 = require("./section-tools");
+Object.defineProperty(exports, "sectionHeading", { enumerable: true, get: function () { return section_tools_1.sectionHeading; } });
+var dialog_window_1 = require("./dialog-window");
+Object.defineProperty(exports, "wireGrip", { enumerable: true, get: function () { return dialog_window_1.wireGrip; } });
+Object.defineProperty(exports, "wireMaximise", { enumerable: true, get: function () { return dialog_window_1.wireMaximise; } });
+var group_styles_1 = require("./group-styles");
+Object.defineProperty(exports, "installGroupStyles", { enumerable: true, get: function () { return group_styles_1.installGroupStyles; } });
+var head_styles_1 = require("./head-styles");
+Object.defineProperty(exports, "installHeadStyles", { enumerable: true, get: function () { return head_styles_1.installHeadStyles; } });
+//# sourceMappingURL=head-part.js.map

package/src/lib/head-part.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"head-part.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/head-part.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;GAQG;AACH,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,iDAAiD;AAAxC,+GAAA,cAAc,OAAA;AACvB,iDAAyD;AAAhD,yGAAA,QAAQ,OAAA;AAAE,6GAAA,YAAY,OAAA;AAC/B,+CAAoD;AAA3C,kHAAA,kBAAkB,OAAA;AAC3B,6CAAkD;AAAzC,gHAAA,iBAAiB,OAAA"}

package/src/lib/head-part.mjs

@@ -0,0 +1,16 @@
+/**
+ * The head part (parts.ts in @fieldia/widgets): what a work item's record draws
+ * beyond any page's — its head (record-head.ts) with the tabs placed in it,
+ * buttons split, toggled or shown by their icon alone (rich-button.ts), a
+ * group's heading with its tools (section-tools.ts), the inset dialog's ⤢ and
+ * grip (dialog-window.ts) — and their stylesheets, which each puts in the page
+ * as it is first drawn. Loaded the first time a page draws one, through
+ * `headPart`; the viewer waits for it before it draws such a page.
+ */
+export { recordHead } from './record-head.mjs';
+export { richButton } from './rich-button.mjs';
+export { sectionHeading } from './section-tools.mjs';
+export { wireGrip, wireMaximise } from './dialog-window.mjs';
+export { installGroupStyles } from './group-styles.mjs';
+export { installHeadStyles } from './head-styles.mjs';
+//# sourceMappingURL=head-part.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"head-part.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/head-part.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,28 @@
+/**
+ * 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 declare const HEAD_PART_CSS = "\n/* ---- the dialog ---------------------------------------------------------------------- */\n/* Nothing dimmed behind: the page stays as it is, out of reach while the dialog is open. */\n.fd-dialog-backdrop.fd-backdrop-clear { background: transparent; }\n/* As a work item's window over its list: in from the window's edges, its corners small, its shadow deep. */\n.fd-form-dialog.fd-size-inset {\n  position: fixed; inset: 46px 96px; width: auto; height: auto; max-width: none; max-height: none;\n  border-radius: 4px; background: var(--fd-surface);\n  /* An edge of its own where the scheme has one: in the dark a shadow is lost on the page behind. */\n  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);\n}\n/* Under 760px it is the whole window already: nothing to maximise or resize. */\n@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; } }\n/* Resized by its grip: where it stands and how big, set on it. */\n.fd-form-dialog[data-resized] { position: fixed; max-width: none; max-height: none; margin: 0; }\n/* Maximised: the whole window, whatever its size or place was; Restore puts it back. */\n.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; }\n.fd-form-dialog[data-maximised] > .fd-dialog-grip { display: none; }\n/* \u2922 beside \u00D7, and the head's own window buttons: an icon in a box a finger's size. */\n.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); }\n.fd-dialog-max:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-dialog-max .fd-icon { width: 16px; height: 16px; margin: 0; }\n.fd-form-dialog :is(.fd-dialog-max, .fd-head-window .fd-dialog-close) {\n  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; font-size: 16px;\n  color: var(--fd-text); border-radius: 2px;\n}\n.fd-form-dialog :is(.fd-dialog-max, .fd-head-window .fd-dialog-close) .fd-icon { width: 16px; height: 16px; margin: 0; }\n/* The grip at the end-bottom corner: a small triangle in outline, in the words' colour, a finger's room round it (08_19). */\n.fd-dialog-grip {\n  position: absolute; inset-inline-end: 0; inset-block-end: 0; width: 16px; height: 16px; padding: 0; border: 0; z-index: 2;\n  background: none; cursor: nwse-resize; color: color-mix(in srgb, var(--fd-text) 90%, var(--fd-surface)); border-end-end-radius: 4px;\n}\n.fd-dialog-grip:dir(rtl) { cursor: nesw-resize; }\n.fd-dialog-grip::before {\n  content: \"\"; position: absolute; inset-inline-end: 4px; inset-block-end: 4px; box-sizing: border-box; width: 7px; height: 7px;\n  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;\n  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));\n}\n.fd-dialog-grip:dir(rtl)::before {\n  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));\n}\n.fd-form-dialog:has(> .fd-dialog-grip) { position: relative; }\n/* 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\n   history filling the body keeps 20px under its list, its foot 38px from the window's edge as before. */\n.fd-form-dialog[data-headed]:not([data-maximised]):has(> .fd-dialog-grip) > .fd-form-dialog-body { padding-block-end: 18px; --fd-history-foot: 20px; }\n@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; } }\n.fd-form-dialog.fd-size-inset:has(> .fd-dialog-grip), .fd-form-dialog[data-resized] { position: fixed; }\n\n/* A page with a head of its own is the dialog: its head stays, its body scrolls under it. */\n.fd-form-dialog[data-headed] > .fd-form-dialog-body { display: flex; flex-direction: column; overflow: hidden; padding: 0; background: var(--fd-surface); }\n.fd-form-dialog[data-headed] > .fd-form-dialog-body > .fd-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }\n.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; }\n.fd-form-dialog[data-headed] .fd-head-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }\n.fd-form-dialog[data-headed] .fd-head-page > .fd-head { flex: none; }\n.fd-form-dialog[data-headed] .fd-head-page > :is(.fd-head-body, .fd-head-layout) { flex: 1 1 auto; min-height: 0; overflow: auto; }\n\n/* ---- scroll bars, as the tracker's window draws them on every system: 15px, a light track with a hairline at its\n   inner edge, a rounded thumb inset in it, no arrows (where the browser lets a page draw them: Chrome, Edge, Safari).\n   Each selector written out: Chrome drops a scroll bar part's :vertical or :horizontal under an :is() ancestor, and a\n   part paints no logical border, so its sides are physical ones, swapped right to left. ---- */\n.fd-head-page ::-webkit-scrollbar { width: 15px; height: 15px; }\n.fd-head-page ::-webkit-scrollbar-track,\n.fd-head-page ::-webkit-scrollbar-corner { background: color-mix(in srgb, var(--fd-text) 2.2%, var(--fd-surface)); }\n.fd-head-page ::-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[dir=\"rtl\"] .fd-head-page ::-webkit-scrollbar-track:vertical {\n  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));\n}\n.fd-head-page ::-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-head-page ::-webkit-scrollbar-thumb {\n  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;\n}\n.fd-head-page ::-webkit-scrollbar-thumb:horizontal { border-width: 4px 3px 3px; }\n[dir=\"rtl\"] .fd-head-page ::-webkit-scrollbar-thumb:vertical { border-width: 3px 4px 3px 3px; }\n.fd-head-page ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--fd-text) 40%, var(--fd-surface)); }\n.fd-head-page ::-webkit-scrollbar-button { display: none; }\n\n/* ---- the head ------------------------------------------------------------------------ */\n.fd-head-page { padding: 0; background: var(--fd-surface); }\n.fd-head {\n  --fd-head-edge: color-mix(in srgb, var(--fd-text) 16.2%, var(--fd-surface));\n  --fd-head-pill: color-mix(in srgb, var(--fd-text) 8.7%, var(--fd-surface));\n  --fd-head-pressed: color-mix(in srgb, var(--fd-text) 19.7%, var(--fd-surface));\n  --fd-head-fill: var(--fd-fill, color-mix(in srgb, var(--fd-text) 5.7%, var(--fd-surface)));\n  --fd-head-icon: color-mix(in srgb, var(--fd-text) 79%, var(--fd-surface));\n  --fd-head-link: var(--fd-link, var(--fd-accent));\n  --fd-control-height: 32px;\n  container: fd-head / inline-size;\n  position: relative; background: var(--fd-surface); color: var(--fd-text); font-size: 14px;\n}\n/* The white part: the strip of the kind's colour along its start edge, through it and no further. */\n.fd-head-top { position: relative; padding-block-end: 6px; }\n.fd-head-strip { position: absolute; inset-block: 0; inset-inline-start: 0; width: 10px; background: var(--fd-kind, transparent); }\n.fd-head:not([data-kind]) .fd-head-strip { display: none; }\n/* The badge row: the kind's icon in its colour, its name in capitals and the number in the link colour; \u2922 and \u00D7 at its end. */\n.fd-head-badge-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 42px; padding-inline: 20px 4px; }\n.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; }\n.fd-head-badge-icon { display: inline-grid; color: var(--fd-kind, var(--fd-head-link)); }\n/* 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). */\n.fd-head-badge-icon .fd-icon { width: 14px; height: 14px; margin: 0; margin-inline-start: -2px; stroke-width: 2.2; }\n.fd-head-window { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: auto; }\n/* The title line: the number before the title, its box from 64px in, Copy title at its end. */\n.fd-head-title { display: flex; align-items: center; min-height: 32px; margin-block-start: 1px; padding-inline: 19px 8px; }\n.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; }\n.fd-form .fd-head-title > .fd-field { flex: 1 1 auto; min-width: 0; display: block; }\n.fd-form .fd-head-title > .fd-title-side { flex: none; }\n.fd-form .fd-head-title > .fd-field > .fd-input { width: 100%; height: 32px; font-size: 18px; padding-inline: 11px; color: var(--fd-text); }\n/* Copy title: there while the title is pointed at or worked in, its room always kept; always where nothing can point. */\n.fd-head-copy {\n  flex: none; display: inline-grid; place-items: center; width: 34px; height: 32px; padding: 0; border: 0; border-radius: 2px;\n  background: var(--fd-head-fill); color: var(--fd-head-icon); cursor: pointer; visibility: hidden;\n}\n.fd-head-copy .fd-icon { width: 16px; height: 16px; margin: 0; }\n.fd-head-title:focus-within > .fd-head-copy { visibility: visible; }\n@media (hover: hover) { .fd-head-title:hover > .fd-head-copy { visibility: visible; } }\n@media (hover: none) { .fd-head-copy { visibility: visible; } }\n.fd-head-copy:hover { background: var(--fd-head-pressed); }\n\n/* The row under the title: people and links from its start, the record's buttons at its end. */\n.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; }\n.fd-head-meta { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }\n.fd-form .fd-head-meta > .fd-field { flex: 0 1 269px; min-width: 0; }\n.fd-form .fd-head-meta > .fd-field:is([data-type=\"many2many\"], [data-widget=\"tags\"]) { flex: 0 1 auto; }\n/* Tags with their \"Add Tag\" button: the button just after the comments' link, as the tracker's (08_19): no box room round it. */\n.fd-form .fd-head-meta .fd-field[data-quiet] .fd-tags:has(> .fd-tags-adder:not([hidden])) { padding-inline: 0; }\n.fd-head-link {\n  display: inline-flex; align-items: center; gap: 2px; padding: 0 2px; border: 0; background: none; cursor: pointer;\n  font: inherit; font-size: 14px; color: var(--fd-head-link); white-space: nowrap; border-radius: 2px;\n}\n.fd-head-link .fd-icon { width: 16px; height: 16px; margin: 0; }\n/* A link led by its icon: the icon at the link's start, its words 2px after it (the comments' bubble, 20.22.23). */\n.fd-head-link:has(> .fd-icon:first-child) { padding-inline-start: 0; }\nbutton.fd-head-link:hover .fd-head-link-words { text-decoration: underline; }\nspan.fd-head-link { cursor: default; color: var(--fd-text); }\n.fd-head-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex: none; }\n\n/* The head's buttons: quiet on a light fill, 14px in 600; the primary one in the accent; icons alone with no fill. */\n.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; }\n.fd-head .fd-button .fd-icon, .fd-split > .fd-button .fd-icon { width: 16px; height: 16px; margin: 0; flex: none; }\n.fd-button.fd-button-subtle { background: var(--fd-head-fill, var(--fd-fill, var(--fd-page))); color: var(--fd-text); border-color: transparent; }\n.fd-button.fd-button-subtle:hover { background: color-mix(in srgb, var(--fd-text) 9%, var(--fd-surface)); color: var(--fd-text); }\n.fd-button.fd-button-subtle[aria-expanded=\"true\"], .fd-button.fd-button-subtle:active { background: var(--fd-head-pressed, var(--fd-border)); }\n.fd-head .fd-button-secondary { background: var(--fd-head-fill); color: var(--fd-text); }\n.fd-head .fd-button-secondary:hover { background: color-mix(in srgb, var(--fd-text) 9%, var(--fd-surface)); color: var(--fd-text); }\n.fd-head .fd-button-primary, .fd-split[data-look=\"primary\"] > .fd-button { background: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-head .fd-button-primary:hover { filter: none; background: var(--fd-accent-hover, var(--fd-accent)); color: var(--fd-accent-text); }\n/* Its icon alone: a box 34 by 32, no fill, the icon a shade off the words. */\n.fd-button.fd-button-icon-only { width: 34px; padding: 0; justify-content: center; }\n.fd-head .fd-button.fd-button-icon-only:not(.fd-button-primary) { background: none; color: var(--fd-head-icon); }\n.fd-head .fd-button.fd-button-icon-only:not(.fd-button-primary):hover { background: var(--fd-head-fill); }\n/* \u22EE, the record's menu, as an icon alone. */\n.fd-head .fd-record-actions { position: relative; }\n.fd-head .fd-head-more { width: 34px; padding: 0; background: none; color: var(--fd-head-icon); }\n.fd-head .fd-head-more:hover { background: var(--fd-head-fill); }\n.fd-head .fd-head-more[aria-expanded=\"true\"] { background: var(--fd-head-pressed); }\n/* 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\n   be; its tooltip and a press say why. */\n.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)); }\n/* An arrow that points back points the other way right to left. */\n.fd-head .fd-icon[data-icon=\"undo\"]:dir(rtl) { transform: scaleX(-1); }\n/* A toggle pressed: Following. */\n.fd-head .fd-button[aria-pressed=\"true\"]:not(.fd-button-primary) { color: var(--fd-text); }\n\n/* A split button: its press, a rule, its chevron or its own icon (Follow's gear); its menu under it. */\n.fd-split { position: relative; display: inline-flex; align-items: stretch; flex: none; }\n.fd-split > .fd-split-rule { width: 1px; background: var(--fd-head-pressed, var(--fd-border)); }\n.fd-split[data-look=\"primary\"] > .fd-split-rule { background: color-mix(in srgb, var(--fd-accent-text) 35%, var(--fd-accent)); }\n.fd-split > .fd-button:first-child:not(:last-of-type) { border-start-end-radius: 0; border-end-end-radius: 0; }\n.fd-split > .fd-split-more { padding: 0; width: 30px; border-start-start-radius: 0; border-end-start-radius: 0; }\n.fd-split > .fd-split-more:has(> .fd-icon:not([data-icon=\"chevron-down\"])) { width: 34px; }\n/* Its chevron 13px across in a thin line; Follow's gear 12px (08_19). */\n.fd-split > .fd-split-more > .fd-icon[data-icon=\"chevron-down\"] { width: 20px; height: 20px; stroke-width: 1.3; }\n.fd-split > .fd-split-more > .fd-icon:not([data-icon=\"chevron-down\"]) { width: 13px; height: 13px; }\n.fd-split-alone > .fd-button .fd-split-icon { width: 14px; height: 14px; }\n.fd-split > .fd-button-menu { position: absolute; inset-block-start: calc(100% + 2px); inset-inline-start: 0; z-index: 40; }\n.fd-split > .fd-button-menu[data-end] { inset-inline-start: auto; inset-inline-end: 0; }\n\n/* ---- the band ---------------------------------------------------------------------- */\n.fd-head-band {\n  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)));\n  padding-inline: 16px 8px;\n}\n/* 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. */\n.fd-head-fields {\n  --fd-head-label: 76px;\n  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: var(--fd-head-tracks, 1fr 1fr); grid-auto-rows: minmax(32px, auto);\n  column-gap: 8px; row-gap: 1px; align-content: start; padding-block: 7px 6px;\n}\n.fd-form .fd-head-fields > .fd-field[data-labels] {\n  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;\n}\n.fd-form .fd-head-fields > .fd-field[data-labels] > .fd-label {\n  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);\n  white-space: nowrap; overflow: hidden; text-overflow: clip;\n}\n.fd-form .fd-head-fields > .fd-field[data-labels] > :not(.fd-label) { grid-column: 3; }\n.fd-form .fd-head-fields > .fd-field[data-labels] > .fd-label + * { grid-row: 1; }\n/* The lead slot: a lock at the value's start, its words muted. */\n/* Its middle 2px past the slot's, toward the value, as the tracker's lock stands under the state's dot. */\n.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; }\n.fd-form .fd-head-fields > .fd-field[data-labels] > .fd-lock-wrap + * { grid-row: 1; }\n.fd-head-fields .fd-lock .fd-icon { width: 16px; height: 16px; }\n.fd-head-fields .fd-lock { color: var(--fd-text); }\n/* A locked value's words on a row of exactly 32px, as a box's: the rows and all under them on whole pixels. */\n.fd-form .fd-head-fields > .fd-field > .fd-read-text { line-height: 20px; }\n/* Every box in the head 32px tall, as the rows they stand in, its corners as small as a button's. */\n.fd-form .fd-head :is(input, select).fd-input { box-sizing: border-box; height: 32px; min-height: 32px; }\n.fd-form .fd-head .fd-field[data-quiet] :is(.fd-input:not(.fd-tags *), .fd-tags, .fd-dot-box) { border-radius: 2px; }\n/* Values in 14px, their words 12px in from their box's edge. */\n.fd-form .fd-head-fields > .fd-field[data-quiet] { --fd-quiet-pad: 11px; font-size: 14px; }\n.fd-form .fd-head-fields > .fd-field > .fd-input, .fd-form .fd-head-fields > .fd-field .fd-input { font-size: 14px; }\n/* A state's dot in the lead slot, its words where the other values' start. */\n.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; }\n/* 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. */\n.fd-form .fd-head-fields .fd-field[data-quiet] .fd-dot-button { width: 24px; height: 32px; margin-inline: -36px 12px; }\n.fd-form .fd-head-fields .fd-dot-button > .fd-dot { width: 10px; height: 10px; }\n/* A box pointed at in the head, as the title's and Area's: an edge of the strong border. */\n@media (hover: hover) {\n  .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),\n  .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 {\n    border-color: var(--fd-border-strong);\n  }\n}\n/* The band's end: \"Updated by\" at its top, the tabs at its bottom. */\n.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; }\n.fd-head-updated { font: inherit; font-size: 12px; line-height: 16px; color: var(--fd-muted); white-space: nowrap; padding: 0; border: 0; background: none; }\nbutton.fd-head-updated { cursor: pointer; border-radius: 2px; }\nbutton.fd-head-updated:hover { text-decoration: underline; }\n.fd-head-tabs { display: flex; min-width: 0; max-width: 100%; }\n.fd-head-tabs .fd-tabbar { min-width: 0; }\n.fd-head-tabs .fd-tablist { gap: 0; border: 0; }\n.fd-head-tabs .fd-tab {\n  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 8px;\n  border: 1px solid var(--fd-head-edge); border-block-end: 0; border-radius: 0; background: transparent;\n  font: inherit; font-size: 14px; font-weight: 400; color: var(--fd-text); white-space: nowrap;\n}\n.fd-head-tabs .fd-tab:has(> .fd-tab-count) { padding-inline-end: 8px; }\n.fd-head-tabs .fd-tab .fd-icon { width: 16px; height: 16px; margin: 0; }\n/* 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). */\n.fd-head-tabs .fd-tab-icon-only > .fd-icon { margin-block-end: 3px; stroke-width: 1.5; }\n.fd-head-tabs .fd-tab-icon-only > .fd-icon[data-icon=\"link\"] { width: 14px; height: 14px; stroke-width: 1.7; }\n/* 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). */\n.fd-head-tabs .fd-tab-icon-only > .fd-icon[data-icon=\"attach\"]:not(:only-child) { margin-inline-end: -2px; }\n.fd-head-tabs .fd-tab-icon-only > .fd-icon:only-child { margin-inline: 3px; }\n.fd-head-tabs .fd-tab[aria-selected=\"true\"] { font-weight: 600; color: var(--fd-text); border-color: var(--fd-head-edge); }\n.fd-head-tabs .fd-tab[aria-selected=\"true\"] .fd-icon { stroke-width: 2.3; }\n/* The tab shown: two pixels of the accent under its words. */\n.fd-head-tabs .fd-tab[aria-selected=\"true\"]::after {\n  content: \"\"; position: absolute; inset-inline: 8px; inset-block-end: 4px; height: 2px; background: var(--fd-accent); border-radius: 1px;\n}\n.fd-head-tabs .fd-tab:has(> .fd-tab-count)[aria-selected=\"true\"]::after { inset-inline-end: 8px; }\n.fd-head-tabs .fd-tab:hover { background: color-mix(in srgb, var(--fd-text) 4%, transparent); }\n.fd-tab-count {\n  display: inline-grid; place-items: center; min-width: 25px; height: 19px; padding: 0 6px; border-radius: 10px;\n  background: var(--fd-head-pill, var(--fd-accent-soft)); font-size: 12px; font-weight: 600; line-height: 19px; color: var(--fd-text);\n}\n.fd-tabs:not(.fd-tabs-in-head) .fd-tab-count { margin-inline-start: 6px; }\n\n/* ---- the body under it --------------------------------------------------------------- */\n.fd-head-body { padding: 0 12px 12px; background: var(--fd-surface); min-width: 0; }\n.fd-head-body > .fd-alert { margin-block: 12px 0; }\n.fd-tabs.fd-tabs-in-head > .fd-tabpanel { padding-block: 0; }\n/* 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\n   929px window), and no more: in a window 54px taller (08_19) they fit, with no scrollbar; a history fitting the window\n   keeps its own. */\n.fd-form-dialog[data-headed] .fd-tabs.fd-tabs-in-head > .fd-tabpanel:not(:has(.fd-history)) { padding-block-end: 30px; }\n.fd-head-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }\n@media (min-width: 1534px) { .fd-head-layout:has(> .fd-side) { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.6fr); } }\n.fd-form-dialog .fd-head-layout > .fd-side { display: none; }\n\n/* ---- a narrow head: one column, the buttons and tabs under what they followed ------------------ */\n@container fd-head (max-width: 760px) {\n  .fd-head-row { flex-wrap: wrap; }\n  .fd-head-meta { flex-wrap: wrap; flex-basis: 100%; }\n  .fd-head-actions { flex: 1 1 100%; justify-content: flex-start; gap: 8px; }\n  .fd-head-band { flex-direction: column; gap: 4px; padding-inline: 12px 8px; }\n  .fd-head-fields { grid-template-columns: minmax(0, 1fr); padding-block-end: 0; }\n  .fd-head-aside { align-items: stretch; padding-block-start: 0; }\n  .fd-head-updated { align-self: flex-start; white-space: normal; text-align: start; }\n  .fd-head-tabs { align-self: flex-start; }\n}\n";
+/** The sheet in a document, once, in its place among Fieldia's. */
+export declare function installHeadStyles(doc: Document): void;

package/src/lib/head-styles.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 declare const HEAD_PART_CSS = "\n/* ---- the dialog ---------------------------------------------------------------------- */\n/* Nothing dimmed behind: the page stays as it is, out of reach while the dialog is open. */\n.fd-dialog-backdrop.fd-backdrop-clear { background: transparent; }\n/* As a work item's window over its list: in from the window's edges, its corners small, its shadow deep. */\n.fd-form-dialog.fd-size-inset {\n  position: fixed; inset: 46px 96px; width: auto; height: auto; max-width: none; max-height: none;\n  border-radius: 4px; background: var(--fd-surface);\n  /* An edge of its own where the scheme has one: in the dark a shadow is lost on the page behind. */\n  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);\n}\n/* Under 760px it is the whole window already: nothing to maximise or resize. */\n@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; } }\n/* Resized by its grip: where it stands and how big, set on it. */\n.fd-form-dialog[data-resized] { position: fixed; max-width: none; max-height: none; margin: 0; }\n/* Maximised: the whole window, whatever its size or place was; Restore puts it back. */\n.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; }\n.fd-form-dialog[data-maximised] > .fd-dialog-grip { display: none; }\n/* \u2922 beside \u00D7, and the head's own window buttons: an icon in a box a finger's size. */\n.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); }\n.fd-dialog-max:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-dialog-max .fd-icon { width: 16px; height: 16px; margin: 0; }\n.fd-form-dialog :is(.fd-dialog-max, .fd-head-window .fd-dialog-close) {\n  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; font-size: 16px;\n  color: var(--fd-text); border-radius: 2px;\n}\n.fd-form-dialog :is(.fd-dialog-max, .fd-head-window .fd-dialog-close) .fd-icon { width: 16px; height: 16px; margin: 0; }\n/* The grip at the end-bottom corner: a small triangle in outline, in the words' colour, a finger's room round it (08_19). */\n.fd-dialog-grip {\n  position: absolute; inset-inline-end: 0; inset-block-end: 0; width: 16px; height: 16px; padding: 0; border: 0; z-index: 2;\n  background: none; cursor: nwse-resize; color: color-mix(in srgb, var(--fd-text) 90%, var(--fd-surface)); border-end-end-radius: 4px;\n}\n.fd-dialog-grip:dir(rtl) { cursor: nesw-resize; }\n.fd-dialog-grip::before {\n  content: \"\"; position: absolute; inset-inline-end: 4px; inset-block-end: 4px; box-sizing: border-box; width: 7px; height: 7px;\n  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;\n  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));\n}\n.fd-dialog-grip:dir(rtl)::before {\n  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));\n}\n.fd-form-dialog:has(> .fd-dialog-grip) { position: relative; }\n/* 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\n   history filling the body keeps 20px under its list, its foot 38px from the window's edge as before. */\n.fd-form-dialog[data-headed]:not([data-maximised]):has(> .fd-dialog-grip) > .fd-form-dialog-body { padding-block-end: 18px; --fd-history-foot: 20px; }\n@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; } }\n.fd-form-dialog.fd-size-inset:has(> .fd-dialog-grip), .fd-form-dialog[data-resized] { position: fixed; }\n\n/* A page with a head of its own is the dialog: its head stays, its body scrolls under it. */\n.fd-form-dialog[data-headed] > .fd-form-dialog-body { display: flex; flex-direction: column; overflow: hidden; padding: 0; background: var(--fd-surface); }\n.fd-form-dialog[data-headed] > .fd-form-dialog-body > .fd-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }\n.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; }\n.fd-form-dialog[data-headed] .fd-head-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }\n.fd-form-dialog[data-headed] .fd-head-page > .fd-head { flex: none; }\n.fd-form-dialog[data-headed] .fd-head-page > :is(.fd-head-body, .fd-head-layout) { flex: 1 1 auto; min-height: 0; overflow: auto; }\n\n/* ---- scroll bars, as the tracker's window draws them on every system: 15px, a light track with a hairline at its\n   inner edge, a rounded thumb inset in it, no arrows (where the browser lets a page draw them: Chrome, Edge, Safari).\n   Each selector written out: Chrome drops a scroll bar part's :vertical or :horizontal under an :is() ancestor, and a\n   part paints no logical border, so its sides are physical ones, swapped right to left. ---- */\n.fd-head-page ::-webkit-scrollbar { width: 15px; height: 15px; }\n.fd-head-page ::-webkit-scrollbar-track,\n.fd-head-page ::-webkit-scrollbar-corner { background: color-mix(in srgb, var(--fd-text) 2.2%, var(--fd-surface)); }\n.fd-head-page ::-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[dir=\"rtl\"] .fd-head-page ::-webkit-scrollbar-track:vertical {\n  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));\n}\n.fd-head-page ::-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-head-page ::-webkit-scrollbar-thumb {\n  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;\n}\n.fd-head-page ::-webkit-scrollbar-thumb:horizontal { border-width: 4px 3px 3px; }\n[dir=\"rtl\"] .fd-head-page ::-webkit-scrollbar-thumb:vertical { border-width: 3px 4px 3px 3px; }\n.fd-head-page ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--fd-text) 40%, var(--fd-surface)); }\n.fd-head-page ::-webkit-scrollbar-button { display: none; }\n\n/* ---- the head ------------------------------------------------------------------------ */\n.fd-head-page { padding: 0; background: var(--fd-surface); }\n.fd-head {\n  --fd-head-edge: color-mix(in srgb, var(--fd-text) 16.2%, var(--fd-surface));\n  --fd-head-pill: color-mix(in srgb, var(--fd-text) 8.7%, var(--fd-surface));\n  --fd-head-pressed: color-mix(in srgb, var(--fd-text) 19.7%, var(--fd-surface));\n  --fd-head-fill: var(--fd-fill, color-mix(in srgb, var(--fd-text) 5.7%, var(--fd-surface)));\n  --fd-head-icon: color-mix(in srgb, var(--fd-text) 79%, var(--fd-surface));\n  --fd-head-link: var(--fd-link, var(--fd-accent));\n  --fd-control-height: 32px;\n  container: fd-head / inline-size;\n  position: relative; background: var(--fd-surface); color: var(--fd-text); font-size: 14px;\n}\n/* The white part: the strip of the kind's colour along its start edge, through it and no further. */\n.fd-head-top { position: relative; padding-block-end: 6px; }\n.fd-head-strip { position: absolute; inset-block: 0; inset-inline-start: 0; width: 10px; background: var(--fd-kind, transparent); }\n.fd-head:not([data-kind]) .fd-head-strip { display: none; }\n/* The badge row: the kind's icon in its colour, its name in capitals and the number in the link colour; \u2922 and \u00D7 at its end. */\n.fd-head-badge-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 42px; padding-inline: 20px 4px; }\n.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; }\n.fd-head-badge-icon { display: inline-grid; color: var(--fd-kind, var(--fd-head-link)); }\n/* 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). */\n.fd-head-badge-icon .fd-icon { width: 14px; height: 14px; margin: 0; margin-inline-start: -2px; stroke-width: 2.2; }\n.fd-head-window { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: auto; }\n/* The title line: the number before the title, its box from 64px in, Copy title at its end. */\n.fd-head-title { display: flex; align-items: center; min-height: 32px; margin-block-start: 1px; padding-inline: 19px 8px; }\n.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; }\n.fd-form .fd-head-title > .fd-field { flex: 1 1 auto; min-width: 0; display: block; }\n.fd-form .fd-head-title > .fd-title-side { flex: none; }\n.fd-form .fd-head-title > .fd-field > .fd-input { width: 100%; height: 32px; font-size: 18px; padding-inline: 11px; color: var(--fd-text); }\n/* Copy title: there while the title is pointed at or worked in, its room always kept; always where nothing can point. */\n.fd-head-copy {\n  flex: none; display: inline-grid; place-items: center; width: 34px; height: 32px; padding: 0; border: 0; border-radius: 2px;\n  background: var(--fd-head-fill); color: var(--fd-head-icon); cursor: pointer; visibility: hidden;\n}\n.fd-head-copy .fd-icon { width: 16px; height: 16px; margin: 0; }\n.fd-head-title:focus-within > .fd-head-copy { visibility: visible; }\n@media (hover: hover) { .fd-head-title:hover > .fd-head-copy { visibility: visible; } }\n@media (hover: none) { .fd-head-copy { visibility: visible; } }\n.fd-head-copy:hover { background: var(--fd-head-pressed); }\n\n/* The row under the title: people and links from its start, the record's buttons at its end. */\n.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; }\n.fd-head-meta { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }\n.fd-form .fd-head-meta > .fd-field { flex: 0 1 269px; min-width: 0; }\n.fd-form .fd-head-meta > .fd-field:is([data-type=\"many2many\"], [data-widget=\"tags\"]) { flex: 0 1 auto; }\n/* Tags with their \"Add Tag\" button: the button just after the comments' link, as the tracker's (08_19): no box room round it. */\n.fd-form .fd-head-meta .fd-field[data-quiet] .fd-tags:has(> .fd-tags-adder:not([hidden])) { padding-inline: 0; }\n.fd-head-link {\n  display: inline-flex; align-items: center; gap: 2px; padding: 0 2px; border: 0; background: none; cursor: pointer;\n  font: inherit; font-size: 14px; color: var(--fd-head-link); white-space: nowrap; border-radius: 2px;\n}\n.fd-head-link .fd-icon { width: 16px; height: 16px; margin: 0; }\n/* A link led by its icon: the icon at the link's start, its words 2px after it (the comments' bubble, 20.22.23). */\n.fd-head-link:has(> .fd-icon:first-child) { padding-inline-start: 0; }\nbutton.fd-head-link:hover .fd-head-link-words { text-decoration: underline; }\nspan.fd-head-link { cursor: default; color: var(--fd-text); }\n.fd-head-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex: none; }\n\n/* The head's buttons: quiet on a light fill, 14px in 600; the primary one in the accent; icons alone with no fill. */\n.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; }\n.fd-head .fd-button .fd-icon, .fd-split > .fd-button .fd-icon { width: 16px; height: 16px; margin: 0; flex: none; }\n.fd-button.fd-button-subtle { background: var(--fd-head-fill, var(--fd-fill, var(--fd-page))); color: var(--fd-text); border-color: transparent; }\n.fd-button.fd-button-subtle:hover { background: color-mix(in srgb, var(--fd-text) 9%, var(--fd-surface)); color: var(--fd-text); }\n.fd-button.fd-button-subtle[aria-expanded=\"true\"], .fd-button.fd-button-subtle:active { background: var(--fd-head-pressed, var(--fd-border)); }\n.fd-head .fd-button-secondary { background: var(--fd-head-fill); color: var(--fd-text); }\n.fd-head .fd-button-secondary:hover { background: color-mix(in srgb, var(--fd-text) 9%, var(--fd-surface)); color: var(--fd-text); }\n.fd-head .fd-button-primary, .fd-split[data-look=\"primary\"] > .fd-button { background: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-head .fd-button-primary:hover { filter: none; background: var(--fd-accent-hover, var(--fd-accent)); color: var(--fd-accent-text); }\n/* Its icon alone: a box 34 by 32, no fill, the icon a shade off the words. */\n.fd-button.fd-button-icon-only { width: 34px; padding: 0; justify-content: center; }\n.fd-head .fd-button.fd-button-icon-only:not(.fd-button-primary) { background: none; color: var(--fd-head-icon); }\n.fd-head .fd-button.fd-button-icon-only:not(.fd-button-primary):hover { background: var(--fd-head-fill); }\n/* \u22EE, the record's menu, as an icon alone. */\n.fd-head .fd-record-actions { position: relative; }\n.fd-head .fd-head-more { width: 34px; padding: 0; background: none; color: var(--fd-head-icon); }\n.fd-head .fd-head-more:hover { background: var(--fd-head-fill); }\n.fd-head .fd-head-more[aria-expanded=\"true\"] { background: var(--fd-head-pressed); }\n/* 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\n   be; its tooltip and a press say why. */\n.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)); }\n/* An arrow that points back points the other way right to left. */\n.fd-head .fd-icon[data-icon=\"undo\"]:dir(rtl) { transform: scaleX(-1); }\n/* A toggle pressed: Following. */\n.fd-head .fd-button[aria-pressed=\"true\"]:not(.fd-button-primary) { color: var(--fd-text); }\n\n/* A split button: its press, a rule, its chevron or its own icon (Follow's gear); its menu under it. */\n.fd-split { position: relative; display: inline-flex; align-items: stretch; flex: none; }\n.fd-split > .fd-split-rule { width: 1px; background: var(--fd-head-pressed, var(--fd-border)); }\n.fd-split[data-look=\"primary\"] > .fd-split-rule { background: color-mix(in srgb, var(--fd-accent-text) 35%, var(--fd-accent)); }\n.fd-split > .fd-button:first-child:not(:last-of-type) { border-start-end-radius: 0; border-end-end-radius: 0; }\n.fd-split > .fd-split-more { padding: 0; width: 30px; border-start-start-radius: 0; border-end-start-radius: 0; }\n.fd-split > .fd-split-more:has(> .fd-icon:not([data-icon=\"chevron-down\"])) { width: 34px; }\n/* Its chevron 13px across in a thin line; Follow's gear 12px (08_19). */\n.fd-split > .fd-split-more > .fd-icon[data-icon=\"chevron-down\"] { width: 20px; height: 20px; stroke-width: 1.3; }\n.fd-split > .fd-split-more > .fd-icon:not([data-icon=\"chevron-down\"]) { width: 13px; height: 13px; }\n.fd-split-alone > .fd-button .fd-split-icon { width: 14px; height: 14px; }\n.fd-split > .fd-button-menu { position: absolute; inset-block-start: calc(100% + 2px); inset-inline-start: 0; z-index: 40; }\n.fd-split > .fd-button-menu[data-end] { inset-inline-start: auto; inset-inline-end: 0; }\n\n/* ---- the band ---------------------------------------------------------------------- */\n.fd-head-band {\n  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)));\n  padding-inline: 16px 8px;\n}\n/* 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. */\n.fd-head-fields {\n  --fd-head-label: 76px;\n  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: var(--fd-head-tracks, 1fr 1fr); grid-auto-rows: minmax(32px, auto);\n  column-gap: 8px; row-gap: 1px; align-content: start; padding-block: 7px 6px;\n}\n.fd-form .fd-head-fields > .fd-field[data-labels] {\n  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;\n}\n.fd-form .fd-head-fields > .fd-field[data-labels] > .fd-label {\n  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);\n  white-space: nowrap; overflow: hidden; text-overflow: clip;\n}\n.fd-form .fd-head-fields > .fd-field[data-labels] > :not(.fd-label) { grid-column: 3; }\n.fd-form .fd-head-fields > .fd-field[data-labels] > .fd-label + * { grid-row: 1; }\n/* The lead slot: a lock at the value's start, its words muted. */\n/* Its middle 2px past the slot's, toward the value, as the tracker's lock stands under the state's dot. */\n.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; }\n.fd-form .fd-head-fields > .fd-field[data-labels] > .fd-lock-wrap + * { grid-row: 1; }\n.fd-head-fields .fd-lock .fd-icon { width: 16px; height: 16px; }\n.fd-head-fields .fd-lock { color: var(--fd-text); }\n/* A locked value's words on a row of exactly 32px, as a box's: the rows and all under them on whole pixels. */\n.fd-form .fd-head-fields > .fd-field > .fd-read-text { line-height: 20px; }\n/* Every box in the head 32px tall, as the rows they stand in, its corners as small as a button's. */\n.fd-form .fd-head :is(input, select).fd-input { box-sizing: border-box; height: 32px; min-height: 32px; }\n.fd-form .fd-head .fd-field[data-quiet] :is(.fd-input:not(.fd-tags *), .fd-tags, .fd-dot-box) { border-radius: 2px; }\n/* Values in 14px, their words 12px in from their box's edge. */\n.fd-form .fd-head-fields > .fd-field[data-quiet] { --fd-quiet-pad: 11px; font-size: 14px; }\n.fd-form .fd-head-fields > .fd-field > .fd-input, .fd-form .fd-head-fields > .fd-field .fd-input { font-size: 14px; }\n/* A state's dot in the lead slot, its words where the other values' start. */\n.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; }\n/* 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. */\n.fd-form .fd-head-fields .fd-field[data-quiet] .fd-dot-button { width: 24px; height: 32px; margin-inline: -36px 12px; }\n.fd-form .fd-head-fields .fd-dot-button > .fd-dot { width: 10px; height: 10px; }\n/* A box pointed at in the head, as the title's and Area's: an edge of the strong border. */\n@media (hover: hover) {\n  .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),\n  .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 {\n    border-color: var(--fd-border-strong);\n  }\n}\n/* The band's end: \"Updated by\" at its top, the tabs at its bottom. */\n.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; }\n.fd-head-updated { font: inherit; font-size: 12px; line-height: 16px; color: var(--fd-muted); white-space: nowrap; padding: 0; border: 0; background: none; }\nbutton.fd-head-updated { cursor: pointer; border-radius: 2px; }\nbutton.fd-head-updated:hover { text-decoration: underline; }\n.fd-head-tabs { display: flex; min-width: 0; max-width: 100%; }\n.fd-head-tabs .fd-tabbar { min-width: 0; }\n.fd-head-tabs .fd-tablist { gap: 0; border: 0; }\n.fd-head-tabs .fd-tab {\n  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 8px;\n  border: 1px solid var(--fd-head-edge); border-block-end: 0; border-radius: 0; background: transparent;\n  font: inherit; font-size: 14px; font-weight: 400; color: var(--fd-text); white-space: nowrap;\n}\n.fd-head-tabs .fd-tab:has(> .fd-tab-count) { padding-inline-end: 8px; }\n.fd-head-tabs .fd-tab .fd-icon { width: 16px; height: 16px; margin: 0; }\n/* 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). */\n.fd-head-tabs .fd-tab-icon-only > .fd-icon { margin-block-end: 3px; stroke-width: 1.5; }\n.fd-head-tabs .fd-tab-icon-only > .fd-icon[data-icon=\"link\"] { width: 14px; height: 14px; stroke-width: 1.7; }\n/* 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). */\n.fd-head-tabs .fd-tab-icon-only > .fd-icon[data-icon=\"attach\"]:not(:only-child) { margin-inline-end: -2px; }\n.fd-head-tabs .fd-tab-icon-only > .fd-icon:only-child { margin-inline: 3px; }\n.fd-head-tabs .fd-tab[aria-selected=\"true\"] { font-weight: 600; color: var(--fd-text); border-color: var(--fd-head-edge); }\n.fd-head-tabs .fd-tab[aria-selected=\"true\"] .fd-icon { stroke-width: 2.3; }\n/* The tab shown: two pixels of the accent under its words. */\n.fd-head-tabs .fd-tab[aria-selected=\"true\"]::after {\n  content: \"\"; position: absolute; inset-inline: 8px; inset-block-end: 4px; height: 2px; background: var(--fd-accent); border-radius: 1px;\n}\n.fd-head-tabs .fd-tab:has(> .fd-tab-count)[aria-selected=\"true\"]::after { inset-inline-end: 8px; }\n.fd-head-tabs .fd-tab:hover { background: color-mix(in srgb, var(--fd-text) 4%, transparent); }\n.fd-tab-count {\n  display: inline-grid; place-items: center; min-width: 25px; height: 19px; padding: 0 6px; border-radius: 10px;\n  background: var(--fd-head-pill, var(--fd-accent-soft)); font-size: 12px; font-weight: 600; line-height: 19px; color: var(--fd-text);\n}\n.fd-tabs:not(.fd-tabs-in-head) .fd-tab-count { margin-inline-start: 6px; }\n\n/* ---- the body under it --------------------------------------------------------------- */\n.fd-head-body { padding: 0 12px 12px; background: var(--fd-surface); min-width: 0; }\n.fd-head-body > .fd-alert { margin-block: 12px 0; }\n.fd-tabs.fd-tabs-in-head > .fd-tabpanel { padding-block: 0; }\n/* 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\n   929px window), and no more: in a window 54px taller (08_19) they fit, with no scrollbar; a history fitting the window\n   keeps its own. */\n.fd-form-dialog[data-headed] .fd-tabs.fd-tabs-in-head > .fd-tabpanel:not(:has(.fd-history)) { padding-block-end: 30px; }\n.fd-head-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }\n@media (min-width: 1534px) { .fd-head-layout:has(> .fd-side) { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.6fr); } }\n.fd-form-dialog .fd-head-layout > .fd-side { display: none; }\n\n/* ---- a narrow head: one column, the buttons and tabs under what they followed ------------------ */\n@container fd-head (max-width: 760px) {\n  .fd-head-row { flex-wrap: wrap; }\n  .fd-head-meta { flex-wrap: wrap; flex-basis: 100%; }\n  .fd-head-actions { flex: 1 1 100%; justify-content: flex-start; gap: 8px; }\n  .fd-head-band { flex-direction: column; gap: 4px; padding-inline: 12px 8px; }\n  .fd-head-fields { grid-template-columns: minmax(0, 1fr); padding-block-end: 0; }\n  .fd-head-aside { align-items: stretch; padding-block-start: 0; }\n  .fd-head-updated { align-self: flex-start; white-space: normal; text-align: start; }\n  .fd-head-tabs { align-self: flex-start; }\n}\n";
+/** The sheet in a document, once, in its place among Fieldia's. */
+export declare function installHeadStyles(doc: Document): void;