@fieldia/widgets 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldia/widgets",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Fieldia field inputs in plain DOM, with the underline and outlined skins.",
   "license": "MIT",
   "homepage": "https://fieldia.dev",
@@ -21,7 +21,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@fieldia/core": "0.5.0",
+    "@fieldia/core": "0.6.0",
     "tslib": "^2.8.1"
   },
   "sideEffects": false,

package/src/index.d.mts

@@ -13,3 +13,4 @@ export * from './lib/label.mjs';
 export * from './lib/statusbar.mjs';
 export * from './lib/calendar.mjs';
 export * from './lib/properties.mjs';
+export * from './lib/icons.mjs';

package/src/index.d.ts

@@ -13,3 +13,4 @@ export * from './lib/label';
 export * from './lib/statusbar';
 export * from './lib/calendar';
 export * from './lib/properties';
+export * from './lib/icons';

package/src/index.js

@@ -16,4 +16,5 @@ tslib_1.__exportStar(require("./lib/label"), exports);
 tslib_1.__exportStar(require("./lib/statusbar"), exports);
 tslib_1.__exportStar(require("./lib/calendar"), exports);
 tslib_1.__exportStar(require("./lib/properties"), exports);
+tslib_1.__exportStar(require("./lib/icons"), exports);
 //# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/widgets/src/index.ts"],"names":[],"mappings":";;;AAAA,wDAA8B;AAC9B,uDAA6B;AAC7B,uDAA6B;AAC7B,0DAAgC;AAChC,sDAA4B;AAC5B,sDAA4B;AAC5B,uDAA6B;AAC7B,wDAA8B;AAC9B,4DAAkC;AAClC,wDAA8B;AAC9B,yDAA+B;AAC/B,sDAA4B;AAC5B,0DAAgC;AAChC,yDAA+B;AAC/B,2DAAiC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/widgets/src/index.ts"],"names":[],"mappings":";;;AAAA,wDAA8B;AAC9B,uDAA6B;AAC7B,uDAA6B;AAC7B,0DAAgC;AAChC,sDAA4B;AAC5B,sDAA4B;AAC5B,uDAA6B;AAC7B,wDAA8B;AAC9B,4DAAkC;AAClC,wDAA8B;AAC9B,yDAA+B;AAC/B,sDAA4B;AAC5B,0DAAgC;AAChC,yDAA+B;AAC/B,2DAAiC;AACjC,sDAA4B"}

package/src/index.mjs

@@ -13,4 +13,5 @@ export * from './lib/label.mjs';
 export * from './lib/statusbar.mjs';
 export * from './lib/calendar.mjs';
 export * from './lib/properties.mjs';
+export * from './lib/icons.mjs';
 //# sourceMappingURL=index.mjs.map

package/src/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../../libs/widgets/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../../libs/widgets/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC"}

package/src/lib/icons.d.mts

@@ -0,0 +1,10 @@
+/**
+ * Icons by name, for sections, tabs, buttons, stat buttons, badges and steps.
+ * Each is the inside of a 24×24 SVG drawn with lines in the text colour, so it
+ * takes the colour and size of the words beside it. An app adds its own, or
+ * replaces one of these, with the viewer's `icons` option, in the same form.
+ */
+export type IconSet = Readonly<Record<string, string>>;
+export declare const ICONS: IconSet;
+/** An icon by name, the app's own first and then Fieldia's; null for a name neither has. */
+export declare function drawIcon(doc: Document, name: string | undefined, own?: IconSet): SVGSVGElement | null;

package/src/lib/icons.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Icons by name, for sections, tabs, buttons, stat buttons, badges and steps.
+ * Each is the inside of a 24×24 SVG drawn with lines in the text colour, so it
+ * takes the colour and size of the words beside it. An app adds its own, or
+ * replaces one of these, with the viewer's `icons` option, in the same form.
+ */
+export type IconSet = Readonly<Record<string, string>>;
+export declare const ICONS: IconSet;
+/** An icon by name, the app's own first and then Fieldia's; null for a name neither has. */
+export declare function drawIcon(doc: Document, name: string | undefined, own?: IconSet): SVGSVGElement | null;

package/src/lib/icons.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICONS = void 0;
+exports.drawIcon = drawIcon;
+const SVG = 'http://www.w3.org/2000/svg';
+exports.ICONS = {
+    user: '<circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6 8-6s8 2 8 6"/>',
+    users: '<circle cx="9" cy="8" r="3.5"/><path d="M2 20c0-3.5 3-5.5 7-5.5s7 2 7 5.5"/><circle cx="17" cy="9" r="2.5"/><path d="M16.5 14.5c3 0 5.5 1.6 5.5 4.5"/>',
+    building: '<rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 21v-4h6v4M8 7h2M14 7h2M8 11h2M14 11h2"/>',
+    home: '<path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/><path d="M10 20v-6h4v6"/>',
+    phone: '<rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/>',
+    mail: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/>',
+    pin: '<path d="M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/>',
+    globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18"/>',
+    calendar: '<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/>',
+    clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/>',
+    money: '<rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M6 9.5v0M18 14.5v0"/>',
+    cart: '<path d="M3 4h2l2.5 11h11L21 7H6.4"/><circle cx="9" cy="19.5" r="1.5"/><circle cx="17" cy="19.5" r="1.5"/>',
+    box: '<path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z"/><path d="M4 7.5l8 4.5 8-4.5M12 12v9"/>',
+    truck: '<path d="M2 6h12v10H2zM14 9h4l3 3.5V16h-7"/><circle cx="6.5" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/>',
+    receipt: '<path d="M6 3h12v18l-3-2-3 2-3-2-3 2z"/><path d="M9 8h6M9 12h6"/>',
+    file: '<path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4M9 12h6M9 16h6"/>',
+    edit: '<path d="M4 20h4L19 9l-4-4L4 16z"/><path d="M13.5 6.5l4 4"/>',
+    tag: '<path d="M3 12V4h8l10 10-8 8z"/><circle cx="7.5" cy="8" r="1.5"/>',
+    star: '<path d="M12 3l2.8 6 6.2.6-4.7 4.2 1.4 6.2L12 16.8 6.3 20l1.4-6.2L3 9.6 9.2 9z"/>',
+    lock: '<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
+    check: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
+    info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7.5v0"/>',
+    warning: '<path d="M12 3l10 18H2z"/><path d="M12 10v5M12 18v0"/>',
+    settings: '<path d="M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1"/><circle cx="15" cy="6" r="2"/><circle cx="9" cy="12" r="2"/><circle cx="17" cy="18" r="2"/>',
+    chart: '<path d="M3 20h18M6 20v-8M11 20V5M16 20v-6"/>',
+    link: '<path d="M10 14a4 4 0 0 0 5.6 0l3-3a4 4 0 0 0-5.6-5.6l-1 1"/><path d="M14 10a4 4 0 0 0-5.6 0l-3 3a4 4 0 0 0 5.6 5.6l1-1"/>',
+    list: '<path d="M8 6h12M8 12h12M8 18h12M4 6v0M4 12v0M4 18v0"/>',
+    chat: '<path d="M4 5h16v11H9l-5 4z"/>',
+};
+/** An icon by name, the app's own first and then Fieldia's; null for a name neither has. */
+function drawIcon(doc, name, own) {
+    const inside = name ? own?.[name] ?? exports.ICONS[name] : undefined;
+    if (inside === undefined)
+        return null;
+    const svg = doc.createElementNS(SVG, 'svg');
+    for (const [key, value] of Object.entries({
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        'stroke-width': '1.8',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'aria-hidden': 'true',
+        focusable: 'false',
+        class: 'fd-icon',
+        'data-icon': name,
+    })) {
+        svg.setAttribute(key, value);
+    }
+    svg.innerHTML = inside;
+    return svg;
+}
+//# sourceMappingURL=icons.js.map

package/src/lib/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/icons.ts"],"names":[],"mappings":";;;AA0CA,4BAoBC;AAtDD,MAAM,GAAG,GAAG,4BAA4B,CAAC;AAE5B,QAAA,KAAK,GAAY;IAC5B,IAAI,EAAE,uEAAuE;IAC7E,KAAK,EAAE,wJAAwJ;IAC/J,QAAQ,EAAE,uGAAuG;IACjH,IAAI,EAAE,8EAA8E;IACpF,KAAK,EAAE,uEAAuE;IAC9E,IAAI,EAAE,2EAA2E;IACjF,GAAG,EAAE,gGAAgG;IACrG,KAAK,EAAE,oGAAoG;IAC3G,QAAQ,EAAE,oFAAoF;IAC9F,KAAK,EAAE,wDAAwD;IAC/D,KAAK,EAAE,gHAAgH;IACvH,IAAI,EAAE,4GAA4G;IAClH,GAAG,EAAE,kFAAkF;IACvF,KAAK,EAAE,qHAAqH;IAC5H,OAAO,EAAE,mEAAmE;IAC5E,IAAI,EAAE,iEAAiE;IACvE,IAAI,EAAE,8DAA8D;IACpE,GAAG,EAAE,mEAAmE;IACxE,IAAI,EAAE,mFAAmF;IACzF,IAAI,EAAE,uFAAuF;IAC7F,KAAK,EAAE,oCAAoC;IAC3C,IAAI,EAAE,8DAA8D;IACpE,OAAO,EAAE,wDAAwD;IACjE,QAAQ,EAAE,qJAAqJ;IAC/J,KAAK,EAAE,+CAA+C;IACtD,IAAI,EAAE,4HAA4H;IAClI,IAAI,EAAE,yDAAyD;IAC/D,IAAI,EAAE,gCAAgC;CACvC,CAAC;AAEF,4FAA4F;AAC5F,SAAgB,QAAQ,CAAC,GAAa,EAAE,IAAwB,EAAE,GAAa;IAC7E,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,aAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7D,IAAI,MAAM,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACtC,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAC5C,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC;QACxC,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,cAAc;QACtB,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,OAAO;QACzB,iBAAiB,EAAE,OAAO;QAC1B,aAAa,EAAE,MAAM;QACrB,SAAS,EAAE,OAAO;QAClB,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,IAAc;KAC5B,CAAC,EAAE,CAAC;QACH,GAAG,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IACD,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC;IACvB,OAAO,GAAG,CAAC;AACb,CAAC"}

package/src/lib/icons.mjs

@@ -0,0 +1,55 @@
+const SVG = 'http://www.w3.org/2000/svg';
+export const ICONS = {
+    user: '<circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6 8-6s8 2 8 6"/>',
+    users: '<circle cx="9" cy="8" r="3.5"/><path d="M2 20c0-3.5 3-5.5 7-5.5s7 2 7 5.5"/><circle cx="17" cy="9" r="2.5"/><path d="M16.5 14.5c3 0 5.5 1.6 5.5 4.5"/>',
+    building: '<rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 21v-4h6v4M8 7h2M14 7h2M8 11h2M14 11h2"/>',
+    home: '<path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/><path d="M10 20v-6h4v6"/>',
+    phone: '<rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/>',
+    mail: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/>',
+    pin: '<path d="M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/>',
+    globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18"/>',
+    calendar: '<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/>',
+    clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/>',
+    money: '<rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M6 9.5v0M18 14.5v0"/>',
+    cart: '<path d="M3 4h2l2.5 11h11L21 7H6.4"/><circle cx="9" cy="19.5" r="1.5"/><circle cx="17" cy="19.5" r="1.5"/>',
+    box: '<path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z"/><path d="M4 7.5l8 4.5 8-4.5M12 12v9"/>',
+    truck: '<path d="M2 6h12v10H2zM14 9h4l3 3.5V16h-7"/><circle cx="6.5" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/>',
+    receipt: '<path d="M6 3h12v18l-3-2-3 2-3-2-3 2z"/><path d="M9 8h6M9 12h6"/>',
+    file: '<path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4M9 12h6M9 16h6"/>',
+    edit: '<path d="M4 20h4L19 9l-4-4L4 16z"/><path d="M13.5 6.5l4 4"/>',
+    tag: '<path d="M3 12V4h8l10 10-8 8z"/><circle cx="7.5" cy="8" r="1.5"/>',
+    star: '<path d="M12 3l2.8 6 6.2.6-4.7 4.2 1.4 6.2L12 16.8 6.3 20l1.4-6.2L3 9.6 9.2 9z"/>',
+    lock: '<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
+    check: '<path d="M5 12.5l4.5 4.5L19 7.5"/>',
+    info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7.5v0"/>',
+    warning: '<path d="M12 3l10 18H2z"/><path d="M12 10v5M12 18v0"/>',
+    settings: '<path d="M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1"/><circle cx="15" cy="6" r="2"/><circle cx="9" cy="12" r="2"/><circle cx="17" cy="18" r="2"/>',
+    chart: '<path d="M3 20h18M6 20v-8M11 20V5M16 20v-6"/>',
+    link: '<path d="M10 14a4 4 0 0 0 5.6 0l3-3a4 4 0 0 0-5.6-5.6l-1 1"/><path d="M14 10a4 4 0 0 0-5.6 0l-3 3a4 4 0 0 0 5.6 5.6l1-1"/>',
+    list: '<path d="M8 6h12M8 12h12M8 18h12M4 6v0M4 12v0M4 18v0"/>',
+    chat: '<path d="M4 5h16v11H9l-5 4z"/>',
+};
+/** An icon by name, the app's own first and then Fieldia's; null for a name neither has. */
+export function drawIcon(doc, name, own) {
+    const inside = name ? own?.[name] ?? ICONS[name] : undefined;
+    if (inside === undefined)
+        return null;
+    const svg = doc.createElementNS(SVG, 'svg');
+    for (const [key, value] of Object.entries({
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        'stroke-width': '1.8',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'aria-hidden': 'true',
+        focusable: 'false',
+        class: 'fd-icon',
+        'data-icon': name,
+    })) {
+        svg.setAttribute(key, value);
+    }
+    svg.innerHTML = inside;
+    return svg;
+}
+//# sourceMappingURL=icons.mjs.map

package/src/lib/icons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/icons.ts"],"names":[],"mappings":"AAQA,MAAM,GAAG,GAAG,4BAA4B,CAAC;AAEzC,MAAM,CAAC,MAAM,KAAK,GAAY;IAC5B,IAAI,EAAE,uEAAuE;IAC7E,KAAK,EAAE,wJAAwJ;IAC/J,QAAQ,EAAE,uGAAuG;IACjH,IAAI,EAAE,8EAA8E;IACpF,KAAK,EAAE,uEAAuE;IAC9E,IAAI,EAAE,2EAA2E;IACjF,GAAG,EAAE,gGAAgG;IACrG,KAAK,EAAE,oGAAoG;IAC3G,QAAQ,EAAE,oFAAoF;IAC9F,KAAK,EAAE,wDAAwD;IAC/D,KAAK,EAAE,gHAAgH;IACvH,IAAI,EAAE,4GAA4G;IAClH,GAAG,EAAE,kFAAkF;IACvF,KAAK,EAAE,qHAAqH;IAC5H,OAAO,EAAE,mEAAmE;IAC5E,IAAI,EAAE,iEAAiE;IACvE,IAAI,EAAE,8DAA8D;IACpE,GAAG,EAAE,mEAAmE;IACxE,IAAI,EAAE,mFAAmF;IACzF,IAAI,EAAE,uFAAuF;IAC7F,KAAK,EAAE,oCAAoC;IAC3C,IAAI,EAAE,8DAA8D;IACpE,OAAO,EAAE,wDAAwD;IACjE,QAAQ,EAAE,qJAAqJ;IAC/J,KAAK,EAAE,+CAA+C;IACtD,IAAI,EAAE,4HAA4H;IAClI,IAAI,EAAE,yDAAyD;IAC/D,IAAI,EAAE,gCAAgC;CACvC,CAAC;AAEF,4FAA4F;AAC5F,MAAM,UAAU,QAAQ,CAAC,GAAa,EAAE,IAAwB,EAAE,GAAa;IAC7E,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7D,IAAI,MAAM,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACtC,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAC5C,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC;QACxC,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,cAAc;QACtB,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,OAAO;QACzB,iBAAiB,EAAE,OAAO;QAC1B,aAAa,EAAE,MAAM;QACrB,SAAS,EAAE,OAAO;QAClB,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,IAAc;KAC5B,CAAC,EAAE,CAAC;QACH,GAAG,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IACD,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC;IACvB,OAAO,GAAG,CAAC;AACb,CAAC"}

package/src/lib/styles.d.mts

@@ -11,6 +11,6 @@
  * Written with logical properties (inline/block, start/end), so a right-to-left
  * form mirrors without a second stylesheet.
  */
-export declare const FIELDIA_CSS = "\n/* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. */\n.fd-form, .fd-theme {\n  --fd-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Noto Sans Arabic\", sans-serif;\n  --fd-text: #212529;\n  --fd-muted: #6b7280;\n  --fd-page: #f2f3f5;\n  --fd-surface: #ffffff;\n  --fd-border: #cfd4da;\n  --fd-border-strong: #9aa3ad;\n  --fd-accent: #002855;\n  --fd-accent-text: #ffffff;\n  --fd-accent-soft: #e6ebf2;\n  --fd-focus: #002855;\n  --fd-focus-ring: none;\n  --fd-error: #c62828;\n  --fd-error-soft: #fdecea;\n  --fd-success: #2e7d32;\n  --fd-success-soft: #e8f5e9;\n  --fd-warning: #8a5300;\n  --fd-warning-soft: #fff4e0;\n  --fd-info: #0b5cad;\n  --fd-info-soft: #e7f0fb;\n  --fd-radius: 0px;\n  --fd-control-radius: 0px;\n  --fd-pad-y: 3px;\n  --fd-pad-x: 4px;\n  --fd-input-border: 0 0 1px 0;\n  --fd-label-weight: 600;\n  --fd-gap-x: 32px;\n  --fd-gap-y: 14px;\n  container-type: inline-size;\n  font-family: var(--fd-font);\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--fd-text);\n  -webkit-text-size-adjust: 100%;\n}\n.fd-form[data-fd-skin=\"outlined\"], .fd-theme[data-fd-skin=\"outlined\"] {\n  --fd-text: rgba(0, 0, 0, 0.88);\n  --fd-muted: rgba(0, 0, 0, 0.55);\n  --fd-page: #f5f5f5;\n  --fd-border: #d9d9d9;\n  --fd-border-strong: #bfbfbf;\n  --fd-accent: #1677ff;\n  --fd-accent-soft: #e6f4ff;\n  --fd-focus: #1677ff;\n  --fd-focus-ring: 0 0 0 2px rgba(5, 145, 255, 0.12);\n  --fd-error: #ff4d4f;\n  --fd-error-soft: #fff2f0;\n  --fd-radius: 8px;\n  --fd-control-radius: 6px;\n  --fd-pad-y: 4px;\n  --fd-pad-x: 11px;\n  --fd-input-border: 1px;\n  --fd-label-weight: 400;\n  --fd-gap-x: 24px;\n  --fd-gap-y: 18px;\n}\n.fd-form *, .fd-form *::before, .fd-form *::after { box-sizing: border-box; }\n.fd-form [hidden] { display: none !important; }\n\n/* ---- page frame ---------------------------------------------------------- */\n.fd-page-head { display: grid; gap: 4px; margin-block-end: 20px; }\n.fd-page-title { font-size: 22px; font-weight: 650; margin: 0; line-height: 1.25; }\n.fd-page-description { color: var(--fd-muted); margin: 0; }\n\n/* ---- fields ---------------------------------------------------------------- */\n.fd-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--fd-columns, 1), minmax(0, 1fr));\n  gap: var(--fd-gap-y) var(--fd-gap-x);\n  align-items: start;\n}\n.fd-field { display: grid; gap: 4px; min-width: 0; grid-column: span min(var(--fd-span, 1), var(--fd-columns, 1)); }\n.fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }\n.fd-field.fd-required > .fd-label::after { content: \" *\"; color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::after { content: \"\"; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::before { content: \"* \"; color: var(--fd-error); }\n.fd-help { color: var(--fd-muted); font-size: 12.5px; }\n.fd-error { color: var(--fd-error); font-size: 12.5px; }\n.fd-warning {\n  color: var(--fd-warning); background: var(--fd-warning-soft); font-size: 12.5px;\n  padding: 3px 8px; border-radius: var(--fd-control-radius); justify-self: start;\n}\n\n/* underline: label beside the value, the way a Flectra sheet reads */\n.fd-form[data-fd-skin=\"underline\"] .fd-field {\n  /* One label width for every field, so a field spanning two columns lines up with its neighbours. */\n  grid-template-columns: var(--fd-label-width, 11em) minmax(0, 1fr);\n  column-gap: 12px;\n  align-items: baseline;\n}\n.fd-form[data-fd-skin=\"underline\"] .fd-field > .fd-label { grid-column: 1; }\n/* A table of lines needs the full width: its label sits above it. */\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] > * { grid-column: 1 !important; }\n.fd-form[data-fd-skin=\"underline\"] .fd-field > :not(.fd-label) { grid-column: 2; }\n/* A label beside every value needs room twice over: the underline skin stacks its columns sooner. */\n@container (max-width: 760px) {\n  .fd-form[data-fd-skin=\"underline\"] .fd-grid { grid-template-columns: minmax(0, 1fr); }\n  .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-column: auto; }\n}\n@container (max-width: 520px) {\n  .fd-grid { grid-template-columns: minmax(0, 1fr); }\n  .fd-field { grid-column: auto; }\n  .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-template-columns: minmax(0, 1fr); }\n  .fd-form[data-fd-skin=\"underline\"] .fd-field > * { grid-column: 1 !important; }\n}\n\n/* ---- inputs ---------------------------------------------------------------- */\n.fd-input {\n  width: 100%;\n  min-width: 0;\n  font: inherit;\n  color: inherit;\n  background: var(--fd-surface);\n  border: solid var(--fd-border);\n  border-width: var(--fd-input-border);\n  border-radius: var(--fd-control-radius);\n  padding: var(--fd-pad-y) var(--fd-pad-x);\n  min-height: 30px;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-input::placeholder { color: var(--fd-muted); opacity: 0.8; }\n.fd-input:hover { border-color: var(--fd-border-strong); }\n.fd-input:focus { outline: none; border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }\n.fd-form[data-fd-skin=\"underline\"] .fd-input { background: transparent; }\n.fd-form[data-fd-skin=\"underline\"] .fd-input:focus { box-shadow: 0 1px 0 0 var(--fd-focus); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field.fd-required .fd-input { border-color: var(--fd-accent); }\n.fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[readonly] { background: rgba(0, 0, 0, 0.04); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }\n.fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[aria-invalid=\"true\"]:focus { box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06); }\n.fd-textarea { resize: vertical; min-height: 64px; }\n.fd-select { appearance: auto; }\n.fd-number { display: flex; align-items: baseline; gap: 6px; }\n.fd-number-input { font-variant-numeric: tabular-nums; }\n.fd-currency { color: var(--fd-muted); font-size: 12.5px; font-weight: 600; }\n/* With the currency after it, the amount ends right beside it. */\n.fd-currency-after > .fd-number-input { text-align: end; }\n/* A picked currency is a small box of its own beside the amount. */\n.fd-currency-picked { align-items: center; }\n.fd-currency-picked > :not(.fd-number-input) { flex: 0 0 104px; min-width: 0; }\n.fd-currency-picked > .fd-number-input { flex: 1 1 auto; min-width: 0; }\n.fd-pending { color: var(--fd-muted); font-style: italic; }\n.fd-pending:empty::before { content: \"\u2014\"; }\n\n.fd-checkbox, .fd-choice input { width: 16px; height: 16px; accent-color: var(--fd-accent); margin: 0; }\n.fd-switch {\n  appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; position: relative;\n  background: var(--fd-border-strong); cursor: pointer; transition: background 0.2s ease;\n}\n.fd-switch::after {\n  content: \"\"; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 16px; height: 16px;\n  border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25);\n}\n.fd-switch:checked { background: var(--fd-accent); }\n.fd-switch:checked::after { transform: translateX(14px); }\n[dir=\"rtl\"] .fd-switch:checked::after { transform: translateX(-14px); }\n.fd-choices { display: flex; flex-wrap: wrap; gap: 6px 18px; }\n.fd-choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }\n.fd-points { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-points button {\n  font: inherit; cursor: pointer; border: 1px solid var(--fd-border); background: var(--fd-surface);\n  color: var(--fd-text); border-radius: var(--fd-control-radius); min-width: 34px; height: 34px; padding: 0 8px;\n}\n.fd-points button.fd-on { background: var(--fd-accent); color: var(--fd-accent-text); border-color: var(--fd-accent); }\n.fd-rating button { border: none; background: none; font-size: 24px; color: var(--fd-border-strong); padding: 0 2px; min-width: 0; }\n.fd-rating button.fd-on { background: none; color: #f5a623; }\n.fd-points button:disabled, .fd-choice input:disabled { cursor: default; }\n.fd-form :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-form .fd-input:focus-visible { outline: none; }\n\n/* ---- pickers: many2one, many2many, reference ------------------------------ */\n.fd-combo { position: relative; display: flex; align-items: center; min-width: 0; }\n.fd-combo-input { padding-inline-end: 28px; }\n.fd-combo-clear {\n  position: absolute; inset-inline-end: 4px; border: none; background: none; cursor: pointer; color: var(--fd-muted);\n  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-clear:hover { color: var(--fd-text); background: var(--fd-page); }\n/* A link that can be opened has its open button beside the clear button. */\n.fd-combo:has(> .fd-combo-open:not([hidden])) .fd-combo-input { padding-inline-end: 52px; }\n.fd-combo-open {\n  position: absolute; inset-inline-end: 28px; border: none; background: none; cursor: pointer; color: var(--fd-accent);\n  font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-open:hover { background: var(--fd-page); }\n.fd-listbox {\n  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 2px); z-index: 20; margin: 0; padding: 4px 0;\n  list-style: none; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px);\n  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.12); max-height: 240px; overflow-y: auto;\n}\n.fd-option { padding: 6px 12px; cursor: pointer; }\n.fd-option:hover, .fd-option.fd-active { background: var(--fd-accent-soft); }\n.fd-option-create { color: var(--fd-accent); border-block-start: 1px solid var(--fd-border); }\n.fd-empty { padding: 6px 12px; color: var(--fd-muted); font-style: italic; }\n.fd-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-chips { display: contents; list-style: none; margin: 0; padding: 0; }\n.fd-chip {\n  display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 10px; border-radius: 999px;\n  background: var(--fd-accent-soft); color: var(--fd-text); font-size: 13px; line-height: 22px;\n}\n.fd-chip-remove { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 999px; }\n.fd-chip-remove:hover { color: var(--fd-error); }\n.fd-tags .fd-combo { flex: 1 1 140px; }\n.fd-reference { display: grid; grid-template-columns: minmax(7em, 34%) minmax(0, 1fr); gap: 8px; }\n\n/* ---- one2many lines ------------------------------------------------------- */\n.fd-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }\n/* The table scrolls sideways inside its own box; the grid around it must not grow to the table's width. */\n/* position: relative keeps the cells' hidden labels inside the scroll box; without it they widen the page. */\n.fd-lines-scroll { overflow-x: auto; min-width: 0; position: relative; }\n.fd-lines-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }\n.fd-lines-table th { text-align: start; font-weight: 600; color: var(--fd-muted); font-size: 12.5px; padding: 6px 8px; border-block-end: 1px solid var(--fd-border); white-space: nowrap; }\n.fd-lines-table td { padding: 4px 8px; border-block-end: 1px solid var(--fd-border); vertical-align: top; min-width: 7em; }\n.fd-lines-table td.fd-lines-tools, .fd-lines-table th.fd-lines-tools { width: 32px; min-width: 32px; padding-inline: 0; text-align: center; }\n.fd-lines-table .fd-input { min-height: 28px; }\n/* A yes/no cell sits level with the inputs beside it. */\n.fd-lines-table td > .fd-checkbox, .fd-lines-table td > .fd-switch { margin-block-start: 6px; }\n.fd-line-delete { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; }\n.fd-line-delete:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-lines-totals td { padding: 8px; font-weight: 600; border-block-start: 1px solid var(--fd-border); font-variant-numeric: tabular-nums; }\n.fd-lines-adds { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-self: start; }\n/* A section heads the lines below it; a note reads as a remark between them. */\n.fd-line-section td { background: var(--fd-page); }\n.fd-line-section .fd-input { font-weight: 600; }\n.fd-line-note .fd-input { font-style: italic; }\n.fd-cell-error { color: var(--fd-error); font-size: 12px; }\n.fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n\n/* ---- files, images, rich text, json ------------------------------------ */\n.fd-file { display: grid; gap: 8px; justify-items: start; padding: 6px 0; border-radius: var(--fd-control-radius); }\n.fd-file.fd-dragging { outline: 2px dashed var(--fd-accent); outline-offset: 4px; }\n.fd-file-pick { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; cursor: pointer; }\n.fd-file-chosen { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }\n.fd-file-name { font-variant-numeric: tabular-nums; }\n.fd-image-pick {\n  width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n  display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { max-width: 160px; max-height: 160px; border-radius: var(--fd-control-radius); border: 1px solid var(--fd-border); object-fit: cover; background: var(--fd-page); }\n.fd-richtext { min-height: 96px; line-height: 1.5; overflow-wrap: anywhere; }\n.fd-richtext-box { display: grid; gap: 0; min-width: 0; }\n.fd-richtext-box > .fd-richtext { border-start-start-radius: 0; border-start-end-radius: 0; }\n.fd-richtext-bar {\n  display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; min-width: 0;\n  border: 1px solid var(--fd-border); border-block-end: none; border-start-start-radius: var(--fd-control-radius); border-start-end-radius: var(--fd-control-radius);\n  background: var(--fd-page);\n}\n.fd-richtext-style { font: inherit; font-size: 12.5px; padding: 3px 6px; margin-inline-end: 4px; border: 1px solid var(--fd-border); border-radius: 4px; background: var(--fd-surface); color: var(--fd-text); }\n.fd-richtext-tool {\n  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px;\n  background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 14px;\n}\n.fd-richtext-tool:hover { background: var(--fd-surface); }\n.fd-richtext-tool[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); }\n.fd-richtext-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }\n.fd-richtext-tool svg circle { fill: currentColor; stroke: none; }\n.fd-link-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--fd-border); border-block-end: none; background: var(--fd-surface); }\n.fd-link-row > .fd-input { flex: 1 1 200px; min-width: 0; }\n.fd-richtext[contenteditable=\"false\"] { background: transparent; border-color: transparent; padding-inline: 0; min-height: 0; }\n.fd-richtext p { margin: 0 0 6px; }\n.fd-code { font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; font-size: 12.5px; min-height: 96px; }\n\n/* ---- sections, tabs ---------------------------------------------------- */\n.fd-sections { display: grid; gap: 24px; }\n.fd-section { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }\n.fd-section-title { font-size: 15px; font-weight: 650; padding: 0; margin: 0; float: inline-start; width: 100%; }\n.fd-section-title + * { clear: both; }\n.fd-form[data-fd-skin=\"underline\"] .fd-section-title {\n  text-transform: uppercase; letter-spacing: 0.05em; font-size: 12.5px; color: var(--fd-muted);\n  border-block-end: 1px solid var(--fd-border); padding-block-end: 6px; width: 100%;\n}\n.fd-section-description { color: var(--fd-muted); margin: 0; }\n.fd-section-toggle {\n  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;\n  display: inline-flex; align-items: center; gap: 8px; text-align: start;\n}\n.fd-section-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n.fd-section-chevron {\n  width: 0.5em; height: 0.5em; border: solid currentColor; border-width: 0 2px 2px 0;\n  transform: rotate(45deg); margin-block-start: -0.2em; transition: transform 0.15s ease; flex: none;\n}\n.fd-section-folded .fd-section-chevron { transform: rotate(-45deg); margin-block-start: 0; }\n[dir=\"rtl\"] .fd-section-folded .fd-section-chevron { transform: rotate(135deg); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-sections > .fd-section {\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 20px 24px;\n}\n.fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; }\n.fd-tab {\n  font: inherit; background: none; border: none; cursor: pointer; padding: 8px 14px; color: var(--fd-muted);\n  border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap;\n}\n.fd-tab[aria-selected=\"true\"] { color: var(--fd-accent); border-block-end-color: var(--fd-accent); font-weight: 600; }\n.fd-tabpanel { padding-block: 16px; display: grid; gap: 16px; }\n\n/* ---- buttons ---------------------------------------------------------- */\n.fd-button {\n  font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; justify-content: center;\n  min-height: 32px; padding: 4px 14px; border-radius: var(--fd-control-radius);\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text);\n}\n.fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }\n.fd-button-danger { color: var(--fd-error); border-color: var(--fd-error); }\n.fd-button-danger:hover { background: var(--fd-error); color: #fff; }\n.fd-button-link { border-color: transparent; background: none; color: var(--fd-accent); padding-inline: 4px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-button { border-radius: 3px; }\n.fd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.fd-actions-end { justify-content: flex-end; margin-block-start: 24px; }\n\n/* ---- record sheet --------------------------------------------------------- */\n.fd-sheet-page { background: var(--fd-page); padding: 0 0 32px; min-width: 0; }\n.fd-header {\n  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;\n  background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); padding: 8px 16px;\n}\n.fd-statusbar { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; }\n.fd-statusbar li { display: flex; }\n.fd-statusbar button, .fd-statusbar span {\n  font: inherit; font-size: 13px; border: none; background: var(--fd-page); color: var(--fd-muted);\n  padding: 5px 18px 5px 22px; margin-inline-start: -6px; white-space: nowrap;\n  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);\n}\n.fd-statusbar li:first-child button, .fd-statusbar li:first-child span { margin-inline-start: 0; padding-inline-start: 14px;\n  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }\n.fd-statusbar button { cursor: pointer; }\n.fd-statusbar [aria-current=\"step\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n[dir=\"rtl\"] .fd-statusbar button, [dir=\"rtl\"] .fd-statusbar span { transform: scaleX(-1); }\n[dir=\"rtl\"] .fd-statusbar button > *, [dir=\"rtl\"] .fd-statusbar span > * { display: inline-block; transform: scaleX(-1); }\n.fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1180px; margin: 16px auto 0; padding-inline: 16px; }\n.fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }\n@container (max-width: 860px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }\n.fd-card {\n  position: relative; background: var(--fd-surface); border: 1px solid var(--fd-border);\n  border-radius: var(--fd-radius); padding: 24px 28px 28px; display: grid; gap: 18px; min-width: 0;\n}\n.fd-ribbon-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }\n.fd-ribbon {\n  position: absolute; inset-block-start: 18px; inset-inline-end: -42px; transform: rotate(45deg); width: 160px;\n  text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; color: #fff; background: var(--fd-muted);\n  text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none;\n}\n[dir=\"rtl\"] .fd-ribbon { transform: rotate(-45deg); }\n.fd-ribbon.fd-tone-danger { background: var(--fd-error); }\n.fd-ribbon.fd-tone-success { background: var(--fd-success); }\n.fd-ribbon.fd-tone-warning { background: #d97706; }\n.fd-ribbon.fd-tone-info { background: var(--fd-info); }\n.fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; }\n.fd-alert.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-alert.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-alert.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-alert.fd-tone-info, .fd-alert:not([class*=\"fd-tone-\"]) { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; margin: -24px -28px 0; border-block-end: 1px solid var(--fd-border); }\n.fd-stats:empty { display: none; }\n/* A visible ribbon owns the corner: stat buttons keep clear of it. */\n.fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stats { padding-inline-end: 104px; }\n.fd-stat {\n  font: inherit; background: none; border: none; border-inline-start: 1px solid var(--fd-border); cursor: pointer;\n  padding: 8px 18px; display: grid; justify-items: start; line-height: 1.2; color: var(--fd-text); min-width: 120px;\n}\n.fd-stat:hover { background: var(--fd-page); }\n.fd-stat-value { font-weight: 700; font-size: 15px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n.fd-stat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-title-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }\n.fd-title { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }\n.fd-avatar { flex: none; }\n.fd-avatar > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar > * { grid-column: 1 !important; }\n.fd-avatar .fd-image-pick {\n  width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n  display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { width: 88px; height: 88px; }\n.fd-avatar .fd-file-pick .fd-help { display: none; }\n.fd-avatar .fd-file-name { display: none; }\n.fd-avatar .fd-file { justify-items: center; gap: 2px; padding: 0; }\n.fd-avatar .fd-file-chosen { gap: 2px 8px; justify-content: center; font-size: 12.5px; }\n.fd-title .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-title .fd-field { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-title .fd-field > * { grid-column: 1; }\n.fd-title .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-side { display: grid; gap: 12px; align-content: start; min-width: 0; }\n\n/* ---- wizard -------------------------------------------------------------- */\n.fd-wizard { display: grid; gap: 20px; }\n.fd-progress { display: grid; gap: 8px; }\n.fd-progress-text { color: var(--fd-muted); font-size: 13px; }\n.fd-value-text { display: block; padding-block: 6px; font-variant-numeric: tabular-nums; }\n.fd-date-pick { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }\n.fd-date-pick > .fd-input { flex: 1 1 auto; min-width: 0; }\n.fd-calendar-button {\n  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-muted);\n}\n.fd-calendar-button:hover, .fd-calendar-button[aria-expanded=\"true\"] { color: var(--fd-text); background: var(--fd-page); }\n.fd-calendar-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }\n.fd-calendar {\n  position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0; z-index: 30; padding: 8px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.14);\n}\n.fd-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; }\n.fd-calendar-head button { border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; color: var(--fd-text); }\n.fd-calendar-head button:hover { background: var(--fd-page); }\n.fd-calendar-title { font-weight: 600; }\n.fd-calendar-grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }\n.fd-calendar-grid th { font-size: 11.5px; font-weight: 600; color: var(--fd-muted); padding: 4px 0; width: 34px; text-align: center; }\n.fd-calendar-grid .fd-week { color: var(--fd-accent); font-weight: 600; border-inline-end: 1px solid var(--fd-border); }\n.fd-calendar-grid td { padding: 1px; }\n.fd-calendar-grid td button {\n  width: 32px; height: 30px; border: none; border-radius: 4px; background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 13px;\n}\n.fd-calendar-grid td button:hover { background: var(--fd-accent-soft); }\n.fd-calendar-grid td button.fd-outside { color: var(--fd-muted); opacity: 0.6; }\n.fd-calendar-grid td button[aria-current=\"date\"] { box-shadow: inset 0 0 0 1px var(--fd-accent); }\n.fd-calendar-grid td button[aria-selected=\"true\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n.fd-calendar-grid td button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-properties { display: grid; gap: 8px; min-width: 0; }\n.fd-property { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }\n.fd-property > label { color: var(--fd-muted); font-size: 13px; }\n.fd-property[data-type=\"boolean\"] > :last-child { justify-self: start; }\n@container (max-width: 520px) { .fd-property { grid-template-columns: minmax(0, 1fr); gap: 4px; } }\n.fd-progressbar {\n  position: relative; height: 22px; min-width: 120px; border-radius: 999px; overflow: hidden;\n  background: var(--fd-page); border: 1px solid var(--fd-border); font-variant-numeric: tabular-nums;\n}\n.fd-progressbar-fill { height: 100%; background: var(--fd-success); transition: width 0.2s ease; }\n.fd-progressbar[data-tone=\"warning\"] .fd-progressbar-fill { background: #d97706; }\n.fd-progressbar[data-tone=\"danger\"] .fd-progressbar-fill { background: var(--fd-error); }\n.fd-progressbar[data-tone=\"info\"] .fd-progressbar-fill { background: var(--fd-info); }\n.fd-progressbar-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--fd-text); }\n.fd-progressbar-edit { display: flex; align-items: center; gap: 12px; min-width: 0; }\n.fd-progressbar-edit > .fd-progressbar { flex: 1 1 auto; }\n.fd-progressbar-edit > .fd-input { flex: 0 0 96px; }\n.fd-progress-bar { height: 4px; background: var(--fd-border); border-radius: 999px; overflow: hidden; }\n.fd-progress-bar > span { display: block; height: 100%; background: var(--fd-accent); transition: width 0.25s ease; }\n.fd-step { display: grid; gap: 18px; }\n.fd-step-title { font-size: 18px; font-weight: 650; margin: 0; }\n.fd-wizard-nav { display: flex; gap: 8px; justify-content: space-between; }\n.fd-wizard-nav .fd-spacer { flex: 1; }\n\n/* ---- text, status, dialog ------------------------------------------------- */\n.fd-text-heading { font-size: 16px; font-weight: 650; margin: 0; }\n.fd-text-paragraph { margin: 0; }\n.fd-text-note { margin: 0; color: var(--fd-muted); font-size: 13px; }\n.fd-status { min-height: 1.4em; color: var(--fd-muted); font-size: 13px; }\n.fd-status.fd-status-error { color: var(--fd-error); }\n.fd-status.fd-status-saved { color: var(--fd-success); }\n.fd-draft { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; margin-block-end: 16px;\n  background: var(--fd-info-soft); border: 1px solid #a9c8ef; border-radius: var(--fd-control-radius); }\n.fd-done { padding: 40px 0; text-align: center; display: grid; gap: 12px; justify-items: center; }\n.fd-done-title { font-size: 20px; font-weight: 650; margin: 0; }\n.fd-dialog-backdrop { position: fixed; inset: 0; background: rgba(15, 20, 25, 0.45); display: grid; place-items: center; z-index: 1000; padding: 16px; }\n.fd-dialog {\n  background: var(--fd-surface); color: var(--fd-text); border-radius: max(var(--fd-radius), 6px); max-width: 420px; width: 100%;\n  padding: 20px 22px; display: grid; gap: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: var(--fd-font);\n}\n.fd-dialog p { margin: 0; }\n/* A page in a dialog: a head with its title and \u00D7, a body that scrolls, a foot with Discard and Save & Close. */\n.fd-form-dialog {\n  display: flex; flex-direction: column; width: 100%; max-height: min(90vh, 100%); min-height: 0;\n  background: var(--fd-page); color: var(--fd-text); border-radius: max(var(--fd-radius), 8px);\n  box-shadow: 0 24px 64px rgba(15, 20, 25, 0.3); overflow: hidden;\n}\n.fd-form-dialog:focus { outline: none; }\n.fd-form-dialog.fd-size-small { max-width: 440px; }\n.fd-form-dialog.fd-size-medium { max-width: 760px; }\n.fd-form-dialog.fd-size-large { max-width: 1080px; }\n.fd-form-dialog-backdrop:has(> .fd-size-full) { padding: 0; }\n.fd-form-dialog.fd-size-full { max-width: none; max-height: none; height: 100%; border-radius: 0; }\n.fd-form-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--fd-border); background: var(--fd-surface); }\n.fd-form-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }\n.fd-dialog-close { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 4px; color: var(--fd-muted); }\n.fd-dialog-close:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-form-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; container-type: inline-size; }\n.fd-form-dialog-body .fd-sheet-layout { margin-block-start: 12px; }\n/* The dialog's head names the page; a record in a dialog leaves its side panel (the chatter) to the full page. */\n.fd-form-dialog-body .fd-page-title { display: none; }\n.fd-form-dialog-body .fd-page-head:not(:has(.fd-page-description)) { display: none; }\n.fd-form-dialog-body .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); }\n.fd-form-dialog-body .fd-side { display: none; }\n/* Search more\u2026: a search box over a list of rows. */\n.fd-search-body { display: grid; gap: 12px; align-content: start; }\n.fd-search-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: auto; max-height: min(60vh, 520px); }\n.fd-search-list .fd-option { padding: 8px 12px; }\n.fd-search-list .fd-option + .fd-option { border-block-start: 1px solid var(--fd-border); }\n.fd-search-list .fd-empty { padding: 10px 12px; color: var(--fd-muted); }\n/* A page with no sheet of its own sits on the dialog's surface, clear of its edges. */\n.fd-form-dialog-body:not(:has(.fd-sheet-layout)) { background: var(--fd-surface); padding: 16px 20px 20px; }\n.fd-form-dialog-foot { padding: 12px 16px; border-block-start: 1px solid var(--fd-border); background: var(--fd-surface); margin: 0; }\n@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } }\n";
+export declare const FIELDIA_CSS = "\n/* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. */\n.fd-form, .fd-theme {\n  --fd-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Noto Sans Arabic\", sans-serif;\n  --fd-text: #212529;\n  --fd-muted: #6b7280;\n  --fd-page: #f2f3f5;\n  --fd-surface: #ffffff;\n  --fd-border: #cfd4da;\n  --fd-border-strong: #9aa3ad;\n  --fd-accent: #002855;\n  --fd-accent-text: #ffffff;\n  --fd-accent-soft: #e6ebf2;\n  --fd-focus: #002855;\n  --fd-focus-ring: none;\n  --fd-error: #c62828;\n  --fd-error-soft: #fdecea;\n  --fd-success: #2e7d32;\n  --fd-success-soft: #e8f5e9;\n  --fd-warning: #8a5300;\n  --fd-warning-soft: #fff4e0;\n  --fd-info: #0b5cad;\n  --fd-info-soft: #e7f0fb;\n  --fd-radius: 0px;\n  --fd-control-radius: 0px;\n  --fd-pad-y: 3px;\n  --fd-pad-x: 4px;\n  --fd-input-border: 0 0 1px 0;\n  --fd-label-weight: 600;\n  --fd-gap-x: 32px;\n  --fd-gap-y: 14px;\n  container-type: inline-size;\n  font-family: var(--fd-font);\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--fd-text);\n  -webkit-text-size-adjust: 100%;\n}\n.fd-form[data-fd-skin=\"outlined\"], .fd-theme[data-fd-skin=\"outlined\"] {\n  --fd-text: rgba(0, 0, 0, 0.88);\n  --fd-muted: rgba(0, 0, 0, 0.55);\n  --fd-page: #f5f5f5;\n  --fd-border: #d9d9d9;\n  --fd-border-strong: #bfbfbf;\n  --fd-accent: #1677ff;\n  --fd-accent-soft: #e6f4ff;\n  --fd-focus: #1677ff;\n  --fd-focus-ring: 0 0 0 2px rgba(5, 145, 255, 0.12);\n  --fd-error: #ff4d4f;\n  --fd-error-soft: #fff2f0;\n  --fd-radius: 8px;\n  --fd-control-radius: 6px;\n  --fd-pad-y: 4px;\n  --fd-pad-x: 11px;\n  --fd-input-border: 1px;\n  --fd-label-weight: 400;\n  --fd-gap-x: 24px;\n  --fd-gap-y: 18px;\n}\n.fd-form *, .fd-form *::before, .fd-form *::after { box-sizing: border-box; }\n.fd-form [hidden] { display: none !important; }\n\n/* ---- page frame ---------------------------------------------------------- */\n.fd-page-head { display: grid; gap: 4px; margin-block-end: 20px; }\n.fd-page-title { font-size: 22px; font-weight: 650; margin: 0; line-height: 1.25; }\n.fd-page-description { color: var(--fd-muted); margin: 0; }\n\n/* ---- how wide a page goes, and Save above its sections ----------------------- */\n.fd-form[data-max-width=\"narrow\"] { --fd-page-max: 640px; }\n.fd-form[data-max-width=\"medium\"] { --fd-page-max: 900px; }\n.fd-form[data-max-width=\"wide\"] { --fd-page-max: 1180px; }\n.fd-form[data-max-width=\"full\"] { --fd-page-max: none; }\n.fd-form[data-max-width] > .fd-content:not(:has(> .fd-sheet-page)) { max-width: var(--fd-page-max); margin-inline: auto; }\n.fd-actions.fd-actions-top { margin-block-start: 0; padding-block-end: 14px; margin-block-end: 18px; border-block-end: 1px solid var(--fd-border); }\n\n/* ---- icons: drawn with lines in the colour of the words beside them ------------ */\n.fd-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }\n.fd-section-title .fd-icon, .fd-tab .fd-icon, .fd-button .fd-icon, .fd-step-title .fd-icon { margin-inline-end: 0.4em; }\n.fd-section-title .fd-icon { color: var(--fd-muted); }\n\n/* ---- fields ---------------------------------------------------------------- */\n.fd-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--fd-columns, 1), minmax(0, 1fr));\n  gap: var(--fd-gap-y) var(--fd-gap-x);\n  align-items: start;\n}\n.fd-field { display: grid; gap: 4px; min-width: 0; grid-column: span min(var(--fd-span, 1), var(--fd-columns, 1)); }\n.fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }\n.fd-field.fd-required > .fd-label::after { content: \" *\"; color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::after { content: \"\"; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::before { content: \"* \"; color: var(--fd-error); }\n.fd-help { color: var(--fd-muted); font-size: 12.5px; }\n.fd-error { color: var(--fd-error); font-size: 12.5px; }\n.fd-warning {\n  color: var(--fd-warning); background: var(--fd-warning-soft); font-size: 12.5px;\n  padding: 3px 8px; border-radius: var(--fd-control-radius); justify-self: start;\n}\n\n/* underline: label beside the value, the way a Flectra sheet reads */\n.fd-form[data-fd-skin=\"underline\"] .fd-field {\n  /* One label width for every field, so a field spanning two columns lines up with its neighbours. */\n  grid-template-columns: var(--fd-label-width, 11em) minmax(0, 1fr);\n  column-gap: 12px;\n  align-items: baseline;\n}\n.fd-form[data-fd-skin=\"underline\"] .fd-field > .fd-label { grid-column: 1; }\n/* A table of lines needs the full width: its label sits above it. */\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] > * { grid-column: 1 !important; }\n.fd-form[data-fd-skin=\"underline\"] .fd-field > :not(.fd-label) { grid-column: 2; }\n/* A label beside every value needs room twice over: the underline skin stacks its columns sooner. */\n@container (max-width: 760px) {\n  .fd-form[data-fd-skin=\"underline\"] .fd-grid { grid-template-columns: minmax(0, 1fr); }\n  .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-column: auto; }\n  /* A section that says how many columns it keeps here keeps them, in either skin. */\n  .fd-form .fd-grid[data-columns-medium] { grid-template-columns: repeat(var(--fd-columns-medium), minmax(0, 1fr)); }\n  .fd-form .fd-grid[data-columns-medium] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-medium)); }\n  /* Kept side by side here, the underline skin's fields have no room for a label beside: it goes above. */\n  .fd-form[data-fd-skin=\"underline\"] .fd-grid[data-columns-medium]:not([data-columns-medium=\"1\"]) .fd-field { grid-template-columns: minmax(0, 1fr); }\n  .fd-form[data-fd-skin=\"underline\"] .fd-grid[data-columns-medium]:not([data-columns-medium=\"1\"]) .fd-field > * { grid-column: 1 !important; }\n}\n@container (max-width: 520px) {\n  .fd-grid { grid-template-columns: minmax(0, 1fr); }\n  .fd-field { grid-column: auto; }\n  .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-template-columns: minmax(0, 1fr); }\n  .fd-form[data-fd-skin=\"underline\"] .fd-field > * { grid-column: 1 !important; }\n  /* The narrow count, or one column when only the medium one was given. */\n  .fd-form .fd-grid[data-columns-medium], .fd-form .fd-grid[data-columns-narrow] { grid-template-columns: repeat(var(--fd-columns-narrow, 1), minmax(0, 1fr)); }\n  .fd-form .fd-grid[data-columns-medium] > .fd-field, .fd-form .fd-grid[data-columns-narrow] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-narrow, 1)); }\n}\n\n/* ---- inputs ---------------------------------------------------------------- */\n.fd-input {\n  width: 100%;\n  min-width: 0;\n  font: inherit;\n  color: inherit;\n  background: var(--fd-surface);\n  border: solid var(--fd-border);\n  border-width: var(--fd-input-border);\n  border-radius: var(--fd-control-radius);\n  padding: var(--fd-pad-y) var(--fd-pad-x);\n  min-height: 30px;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-input::placeholder { color: var(--fd-muted); opacity: 0.8; }\n.fd-input:hover { border-color: var(--fd-border-strong); }\n.fd-input:focus { outline: none; border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }\n.fd-form[data-fd-skin=\"underline\"] .fd-input { background: transparent; }\n.fd-form[data-fd-skin=\"underline\"] .fd-input:focus { box-shadow: 0 1px 0 0 var(--fd-focus); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field.fd-required .fd-input { border-color: var(--fd-accent); }\n.fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[readonly] { background: rgba(0, 0, 0, 0.04); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }\n.fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[aria-invalid=\"true\"]:focus { box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06); }\n.fd-textarea { resize: vertical; min-height: 64px; }\n.fd-select { appearance: auto; }\n.fd-number { display: flex; align-items: baseline; gap: 6px; }\n.fd-number-input { font-variant-numeric: tabular-nums; }\n.fd-currency { color: var(--fd-muted); font-size: 12.5px; font-weight: 600; }\n/* With the currency after it, the amount ends right beside it. */\n.fd-currency-after > .fd-number-input { text-align: end; }\n/* A picked currency is a small box of its own beside the amount. */\n.fd-currency-picked { align-items: center; }\n.fd-currency-picked > :not(.fd-number-input) { flex: 0 0 104px; min-width: 0; }\n.fd-currency-picked > .fd-number-input { flex: 1 1 auto; min-width: 0; }\n.fd-pending { color: var(--fd-muted); font-style: italic; }\n.fd-pending:empty::before { content: \"\u2014\"; }\n\n.fd-checkbox, .fd-choice input { width: 16px; height: 16px; accent-color: var(--fd-accent); margin: 0; }\n.fd-switch {\n  appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; position: relative;\n  background: var(--fd-border-strong); cursor: pointer; transition: background 0.2s ease;\n}\n.fd-switch::after {\n  content: \"\"; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 16px; height: 16px;\n  border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25);\n}\n.fd-switch:checked { background: var(--fd-accent); }\n.fd-switch:checked::after { transform: translateX(14px); }\n[dir=\"rtl\"] .fd-switch:checked::after { transform: translateX(-14px); }\n.fd-choices { display: flex; flex-wrap: wrap; gap: 6px 18px; }\n.fd-choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }\n.fd-points { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-points button {\n  font: inherit; cursor: pointer; border: 1px solid var(--fd-border); background: var(--fd-surface);\n  color: var(--fd-text); border-radius: var(--fd-control-radius); min-width: 34px; height: 34px; padding: 0 8px;\n}\n.fd-points button.fd-on { background: var(--fd-accent); color: var(--fd-accent-text); border-color: var(--fd-accent); }\n.fd-rating button { border: none; background: none; font-size: 24px; color: var(--fd-border-strong); padding: 0 2px; min-width: 0; }\n.fd-rating button.fd-on { background: none; color: #f5a623; }\n.fd-points button:disabled, .fd-choice input:disabled { cursor: default; }\n.fd-form :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-form .fd-input:focus-visible { outline: none; }\n\n/* ---- pickers: many2one, many2many, reference ------------------------------ */\n.fd-combo { position: relative; display: flex; align-items: center; min-width: 0; }\n.fd-combo-input { padding-inline-end: 28px; }\n.fd-combo-clear {\n  position: absolute; inset-inline-end: 4px; border: none; background: none; cursor: pointer; color: var(--fd-muted);\n  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-clear:hover { color: var(--fd-text); background: var(--fd-page); }\n/* A link that can be opened has its open button beside the clear button. */\n.fd-combo:has(> .fd-combo-open:not([hidden])) .fd-combo-input { padding-inline-end: 52px; }\n.fd-combo-open {\n  position: absolute; inset-inline-end: 28px; border: none; background: none; cursor: pointer; color: var(--fd-accent);\n  font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-open:hover { background: var(--fd-page); }\n.fd-listbox {\n  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 2px); z-index: 20; margin: 0; padding: 4px 0;\n  list-style: none; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px);\n  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.12); max-height: 240px; overflow-y: auto;\n}\n.fd-option { padding: 6px 12px; cursor: pointer; }\n.fd-option:hover, .fd-option.fd-active { background: var(--fd-accent-soft); }\n.fd-option-create { color: var(--fd-accent); border-block-start: 1px solid var(--fd-border); }\n.fd-empty { padding: 6px 12px; color: var(--fd-muted); font-style: italic; }\n.fd-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-chips { display: contents; list-style: none; margin: 0; padding: 0; }\n.fd-chip {\n  display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 10px; border-radius: 999px;\n  background: var(--fd-accent-soft); color: var(--fd-text); font-size: 13px; line-height: 22px;\n}\n.fd-chip-remove { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 999px; }\n.fd-chip-remove:hover { color: var(--fd-error); }\n.fd-tags .fd-combo { flex: 1 1 140px; }\n.fd-reference { display: grid; grid-template-columns: minmax(7em, 34%) minmax(0, 1fr); gap: 8px; }\n\n/* ---- one2many lines ------------------------------------------------------- */\n.fd-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }\n/* The table scrolls sideways inside its own box; the grid around it must not grow to the table's width. */\n/* position: relative keeps the cells' hidden labels inside the scroll box; without it they widen the page. */\n.fd-lines-scroll { overflow-x: auto; min-width: 0; position: relative; }\n.fd-lines-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }\n.fd-lines-table th { text-align: start; font-weight: 600; color: var(--fd-muted); font-size: 12.5px; padding: 6px 8px; border-block-end: 1px solid var(--fd-border); white-space: nowrap; }\n.fd-lines-table td { padding: 4px 8px; border-block-end: 1px solid var(--fd-border); vertical-align: top; min-width: 7em; }\n.fd-lines-table td.fd-lines-tools, .fd-lines-table th.fd-lines-tools { width: 32px; min-width: 32px; padding-inline: 0; text-align: center; }\n.fd-lines-table .fd-input { min-height: 28px; }\n/* A yes/no cell sits level with the inputs beside it. */\n.fd-lines-table td > .fd-checkbox, .fd-lines-table td > .fd-switch { margin-block-start: 6px; }\n.fd-line-delete { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; }\n.fd-line-delete:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-lines-totals td { padding: 8px; font-weight: 600; border-block-start: 1px solid var(--fd-border); font-variant-numeric: tabular-nums; }\n.fd-lines-adds { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-self: start; }\n/* A section heads the lines below it; a note reads as a remark between them. */\n.fd-line-section td { background: var(--fd-page); }\n.fd-line-section .fd-input { font-weight: 600; }\n.fd-line-note .fd-input { font-style: italic; }\n.fd-cell-error { color: var(--fd-error); font-size: 12px; }\n.fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n\n/* ---- files, images, rich text, json ------------------------------------ */\n.fd-file { display: grid; gap: 8px; justify-items: start; padding: 6px 0; border-radius: var(--fd-control-radius); }\n.fd-file.fd-dragging { outline: 2px dashed var(--fd-accent); outline-offset: 4px; }\n.fd-file-pick { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; cursor: pointer; }\n.fd-file-chosen { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }\n.fd-file-name { font-variant-numeric: tabular-nums; }\n.fd-image-pick {\n  width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n  display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { max-width: 160px; max-height: 160px; border-radius: var(--fd-control-radius); border: 1px solid var(--fd-border); object-fit: cover; background: var(--fd-page); }\n.fd-richtext { min-height: 96px; line-height: 1.5; overflow-wrap: anywhere; }\n.fd-richtext-box { display: grid; gap: 0; min-width: 0; }\n.fd-richtext-box > .fd-richtext { border-start-start-radius: 0; border-start-end-radius: 0; }\n.fd-richtext-bar {\n  display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; min-width: 0;\n  border: 1px solid var(--fd-border); border-block-end: none; border-start-start-radius: var(--fd-control-radius); border-start-end-radius: var(--fd-control-radius);\n  background: var(--fd-page);\n}\n.fd-richtext-style { font: inherit; font-size: 12.5px; padding: 3px 6px; margin-inline-end: 4px; border: 1px solid var(--fd-border); border-radius: 4px; background: var(--fd-surface); color: var(--fd-text); }\n.fd-richtext-tool {\n  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px;\n  background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 14px;\n}\n.fd-richtext-tool:hover { background: var(--fd-surface); }\n.fd-richtext-tool[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); }\n.fd-richtext-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }\n.fd-richtext-tool svg circle { fill: currentColor; stroke: none; }\n.fd-link-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--fd-border); border-block-end: none; background: var(--fd-surface); }\n.fd-link-row > .fd-input { flex: 1 1 200px; min-width: 0; }\n.fd-richtext[contenteditable=\"false\"] { background: transparent; border-color: transparent; padding-inline: 0; min-height: 0; }\n.fd-richtext p { margin: 0 0 6px; }\n.fd-code { font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; font-size: 12.5px; min-height: 96px; }\n\n/* ---- sections, tabs ---------------------------------------------------- */\n.fd-sections { display: grid; gap: 24px; }\n.fd-section { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }\n.fd-section-title { font-size: 15px; font-weight: 650; padding: 0; margin: 0; float: inline-start; width: 100%; }\n.fd-section-title + * { clear: both; }\n.fd-form[data-fd-skin=\"underline\"] .fd-section-title {\n  text-transform: uppercase; letter-spacing: 0.05em; font-size: 12.5px; color: var(--fd-muted);\n  border-block-end: 1px solid var(--fd-border); padding-block-end: 6px; width: 100%;\n}\n.fd-section-description { color: var(--fd-muted); margin: 0; }\n.fd-section-toggle {\n  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;\n  display: inline-flex; align-items: center; gap: 8px; text-align: start;\n}\n.fd-section-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n.fd-section-chevron {\n  width: 0.5em; height: 0.5em; border: solid currentColor; border-width: 0 2px 2px 0;\n  transform: rotate(45deg); margin-block-start: -0.2em; transition: transform 0.15s ease; flex: none;\n}\n.fd-section-folded .fd-section-chevron { transform: rotate(-45deg); margin-block-start: 0; }\n[dir=\"rtl\"] .fd-section-folded .fd-section-chevron { transform: rotate(135deg); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-sections > .fd-section {\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 20px 24px;\n}\n.fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; }\n.fd-tab {\n  font: inherit; background: none; border: none; cursor: pointer; padding: 8px 14px; color: var(--fd-muted);\n  border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap;\n}\n.fd-tab[aria-selected=\"true\"] { color: var(--fd-accent); border-block-end-color: var(--fd-accent); font-weight: 600; }\n.fd-tabpanel { padding-block: 16px; display: grid; gap: 16px; }\n\n/* ---- buttons ---------------------------------------------------------- */\n.fd-button {\n  font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; justify-content: center;\n  min-height: 32px; padding: 4px 14px; border-radius: var(--fd-control-radius);\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text);\n}\n.fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }\n.fd-button-danger { color: var(--fd-error); border-color: var(--fd-error); }\n.fd-button-danger:hover { background: var(--fd-error); color: #fff; }\n.fd-button-link { border-color: transparent; background: none; color: var(--fd-accent); padding-inline: 4px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-button { border-radius: 3px; }\n.fd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.fd-actions-end { justify-content: flex-end; margin-block-start: 24px; }\n\n/* ---- record sheet --------------------------------------------------------- */\n.fd-sheet-page { background: var(--fd-page); padding: 0 0 32px; min-width: 0; }\n.fd-header {\n  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;\n  background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); padding: 8px 16px;\n}\n.fd-statusbar { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; }\n.fd-statusbar li { display: flex; }\n.fd-statusbar button, .fd-statusbar span {\n  font: inherit; font-size: 13px; border: none; background: var(--fd-page); color: var(--fd-muted);\n  padding: 5px 18px 5px 22px; margin-inline-start: -6px; white-space: nowrap;\n  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);\n}\n.fd-statusbar li:first-child button, .fd-statusbar li:first-child span { margin-inline-start: 0; padding-inline-start: 14px;\n  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }\n.fd-statusbar button { cursor: pointer; }\n.fd-statusbar [aria-current=\"step\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n[dir=\"rtl\"] .fd-statusbar button, [dir=\"rtl\"] .fd-statusbar span { transform: scaleX(-1); }\n[dir=\"rtl\"] .fd-statusbar button > *, [dir=\"rtl\"] .fd-statusbar span > * { display: inline-block; transform: scaleX(-1); }\n.fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: var(--fd-page-max, 1180px); margin: 16px auto 0; padding-inline: 16px; }\n/* Save and Discard closing the sheet, when the page puts them at its foot. */\n.fd-sheet-foot { margin: 4px -28px -28px; padding: 12px 28px; border-block-start: 1px solid var(--fd-border); border-end-start-radius: inherit; border-end-end-radius: inherit; }\n.fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }\n@container (max-width: 860px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }\n.fd-card {\n  position: relative; background: var(--fd-surface); border: 1px solid var(--fd-border);\n  border-radius: var(--fd-radius); padding: 24px 28px 28px; display: grid; gap: 18px; min-width: 0;\n}\n.fd-ribbon-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }\n.fd-ribbon {\n  position: absolute; inset-block-start: 18px; inset-inline-end: -42px; transform: rotate(45deg); width: 160px;\n  text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; color: #fff; background: var(--fd-muted);\n  text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none;\n}\n[dir=\"rtl\"] .fd-ribbon { transform: rotate(-45deg); }\n.fd-ribbon.fd-tone-danger { background: var(--fd-error); }\n.fd-ribbon.fd-tone-success { background: var(--fd-success); }\n.fd-ribbon.fd-tone-warning { background: #d97706; }\n.fd-ribbon.fd-tone-info { background: var(--fd-info); }\n.fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; }\n.fd-alert-message { flex: 1 1 auto; min-width: 0; }\n.fd-alert-close { border: none; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 4px; opacity: 0.75; }\n.fd-alert-close:hover { opacity: 1; }\n.fd-alert-close:focus-visible { outline: 2px solid var(--fd-focus); opacity: 1; }\n.fd-alert.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-alert.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-alert.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-alert.fd-tone-info, .fd-alert:not([class*=\"fd-tone-\"]) { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; margin: -24px -28px 0; border-block-end: 1px solid var(--fd-border); }\n.fd-stats:empty { display: none; }\n/* A visible ribbon owns the corner: stat buttons keep clear of it. */\n.fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stats { padding-inline-end: 104px; }\n.fd-stat {\n  font: inherit; background: none; border: none; border-inline-start: 1px solid var(--fd-border); cursor: pointer;\n  padding: 8px 18px; display: grid; justify-items: start; line-height: 1.2; color: var(--fd-text); min-width: 120px;\n}\n.fd-stat:hover { background: var(--fd-page); }\n.fd-stat:has(> .fd-icon) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }\n.fd-stat > .fd-icon { width: 22px; height: 22px; color: var(--fd-muted); }\n.fd-stat-words { display: grid; justify-items: start; }\n.fd-stat-value { font-weight: 700; font-size: 15px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n.fd-stat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-title-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }\n.fd-title { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }\n.fd-avatar { flex: none; }\n.fd-avatar > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar > * { grid-column: 1 !important; }\n.fd-avatar .fd-image-pick {\n  width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n  display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { width: 88px; height: 88px; }\n.fd-avatar .fd-file-pick .fd-help { display: none; }\n.fd-avatar .fd-file-name { display: none; }\n.fd-avatar .fd-file { justify-items: center; gap: 2px; padding: 0; }\n.fd-avatar .fd-file-chosen { gap: 2px 8px; justify-content: center; font-size: 12.5px; }\n/* The title and subtitle themselves: big, their labels only for screen readers. */\n.fd-title > .fd-field .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-title > .fd-field { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-title > .fd-field > * { grid-column: 1; }\n.fd-title > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n/* Fields over and under the title: one row, each label beside its control. */\n.fd-title-above, .fd-title-below { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }\n.fd-title-above { margin-block-end: 4px; }\n.fd-title-below { margin-block-start: 6px; }\n.fd-form .fd-title-above > .fd-field, .fd-form .fd-title-below > .fd-field { display: flex; align-items: center; gap: 8px; grid-template-columns: none; }\n.fd-form .fd-title-above > .fd-field > *, .fd-form .fd-title-below > .fd-field > * { grid-column: auto !important; }\n.fd-title-above .fd-label:empty, .fd-title-below .fd-label:empty { display: none; }\n/* A choice over the title, such as Individual or Company, speaks for itself: its label is for screen readers. */\n.fd-title-above > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-title-statusbar { display: flex; }\n/* Badges over the title. */\n.fd-badges { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-badge {\n  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 10px;\n  border-radius: 999px; border: 1px solid var(--fd-border); background: var(--fd-page); color: var(--fd-muted);\n}\n.fd-badge .fd-icon { width: 13px; height: 13px; }\n.fd-badge.fd-tone-info { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-badge.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-badge.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-badge.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-side { display: grid; gap: 12px; align-content: start; min-width: 0; }\n\n/* ---- wizard -------------------------------------------------------------- */\n.fd-wizard { display: grid; gap: 20px; }\n.fd-progress { display: grid; gap: 8px; }\n.fd-progress-text { color: var(--fd-muted); font-size: 13px; }\n.fd-value-text { display: block; padding-block: 6px; font-variant-numeric: tabular-nums; }\n.fd-date-pick { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }\n.fd-date-pick > .fd-input { flex: 1 1 auto; min-width: 0; }\n.fd-calendar-button {\n  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-muted);\n}\n.fd-calendar-button:hover, .fd-calendar-button[aria-expanded=\"true\"] { color: var(--fd-text); background: var(--fd-page); }\n.fd-calendar-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }\n.fd-calendar {\n  position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0; z-index: 30; padding: 8px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.14);\n}\n.fd-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; }\n.fd-calendar-head button { border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; color: var(--fd-text); }\n.fd-calendar-head button:hover { background: var(--fd-page); }\n.fd-calendar-title { font-weight: 600; }\n.fd-calendar-grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }\n.fd-calendar-grid th { font-size: 11.5px; font-weight: 600; color: var(--fd-muted); padding: 4px 0; width: 34px; text-align: center; }\n.fd-calendar-grid .fd-week { color: var(--fd-accent); font-weight: 600; border-inline-end: 1px solid var(--fd-border); }\n.fd-calendar-grid td { padding: 1px; }\n.fd-calendar-grid td button {\n  width: 32px; height: 30px; border: none; border-radius: 4px; background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 13px;\n}\n.fd-calendar-grid td button:hover { background: var(--fd-accent-soft); }\n.fd-calendar-grid td button.fd-outside { color: var(--fd-muted); opacity: 0.6; }\n.fd-calendar-grid td button[aria-current=\"date\"] { box-shadow: inset 0 0 0 1px var(--fd-accent); }\n.fd-calendar-grid td button[aria-selected=\"true\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n.fd-calendar-grid td button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-properties { display: grid; gap: 8px; min-width: 0; }\n.fd-property { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }\n.fd-property > label { color: var(--fd-muted); font-size: 13px; }\n.fd-property[data-type=\"boolean\"] > :last-child { justify-self: start; }\n@container (max-width: 520px) { .fd-property { grid-template-columns: minmax(0, 1fr); gap: 4px; } }\n.fd-progressbar {\n  position: relative; height: 22px; min-width: 120px; border-radius: 999px; overflow: hidden;\n  background: var(--fd-page); border: 1px solid var(--fd-border); font-variant-numeric: tabular-nums;\n}\n.fd-progressbar-fill { height: 100%; background: var(--fd-success); transition: width 0.2s ease; }\n.fd-progressbar[data-tone=\"warning\"] .fd-progressbar-fill { background: #d97706; }\n.fd-progressbar[data-tone=\"danger\"] .fd-progressbar-fill { background: var(--fd-error); }\n.fd-progressbar[data-tone=\"info\"] .fd-progressbar-fill { background: var(--fd-info); }\n.fd-progressbar-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--fd-text); }\n.fd-progressbar-edit { display: flex; align-items: center; gap: 12px; min-width: 0; }\n.fd-progressbar-edit > .fd-progressbar { flex: 1 1 auto; }\n.fd-progressbar-edit > .fd-input { flex: 0 0 96px; }\n.fd-progress-bar { height: 4px; background: var(--fd-border); border-radius: 999px; overflow: hidden; }\n.fd-progress-bar > span { display: block; height: 100%; background: var(--fd-accent); transition: width 0.25s ease; }\n.fd-step { display: grid; gap: 18px; }\n.fd-step-title { font-size: 18px; font-weight: 650; margin: 0; }\n.fd-wizard-nav { display: flex; gap: 8px; justify-content: space-between; }\n/* A clickable wizard's steps: numbered, the current one filled, those behind it ticked. */\n.fd-steps-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: fd-step; }\n.fd-steps-list > li { counter-increment: fd-step; }\n.fd-step-link {\n  font: inherit; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-muted); border-radius: 999px; padding: 4px 12px 4px 6px;\n}\n.fd-step-link::before {\n  content: counter(fd-step); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;\n  background: var(--fd-page); color: var(--fd-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;\n}\n.fd-step-link:hover { border-color: var(--fd-accent); color: var(--fd-text); }\n.fd-step-link:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-step-link.fd-step-done { color: var(--fd-text); }\n.fd-step-link.fd-step-done::before { content: \"\u2713\"; background: var(--fd-accent-soft); color: var(--fd-accent); }\n/* Skipped is not done: no tick, no colour. */\n.fd-step-link.fd-step-skipped { border-style: dashed; color: var(--fd-muted); }\n.fd-step-link.fd-step-skipped::before { content: \"\u2013\"; background: var(--fd-page); color: var(--fd-muted); }\n.fd-step-link[aria-current=\"step\"] { border-color: var(--fd-accent); color: var(--fd-accent); font-weight: 600; }\n.fd-step-link[aria-current=\"step\"]::before { content: counter(fd-step); background: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-wizard-nav .fd-spacer { flex: 1; }\n\n/* ---- text, status, dialog ------------------------------------------------- */\n.fd-text-heading { font-size: 16px; font-weight: 650; margin: 0; }\n.fd-text-paragraph { margin: 0; }\n.fd-text-note { margin: 0; color: var(--fd-muted); font-size: 13px; }\n.fd-status { min-height: 1.4em; color: var(--fd-muted); font-size: 13px; }\n.fd-status.fd-status-error { color: var(--fd-error); }\n.fd-status.fd-status-saved { color: var(--fd-success); }\n.fd-draft { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; margin-block-end: 16px;\n  background: var(--fd-info-soft); border: 1px solid #a9c8ef; border-radius: var(--fd-control-radius); }\n.fd-done { padding: 40px 0; text-align: center; display: grid; gap: 12px; justify-items: center; }\n.fd-done-title { font-size: 20px; font-weight: 650; margin: 0; }\n.fd-dialog-backdrop { position: fixed; inset: 0; background: rgba(15, 20, 25, 0.45); display: grid; place-items: center; z-index: 1000; padding: 16px; }\n.fd-dialog {\n  background: var(--fd-surface); color: var(--fd-text); border-radius: max(var(--fd-radius), 6px); max-width: 420px; width: 100%;\n  padding: 20px 22px; display: grid; gap: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: var(--fd-font);\n}\n.fd-dialog p { margin: 0; }\n/* A page in a dialog: a head with its title and \u00D7, a body that scrolls, a foot with Discard and Save & Close. */\n.fd-form-dialog {\n  display: flex; flex-direction: column; width: 100%; max-height: min(90vh, 100%); min-height: 0;\n  background: var(--fd-page); color: var(--fd-text); border-radius: max(var(--fd-radius), 8px);\n  box-shadow: 0 24px 64px rgba(15, 20, 25, 0.3); overflow: hidden;\n}\n.fd-form-dialog:focus { outline: none; }\n.fd-form-dialog.fd-size-small { max-width: 440px; }\n.fd-form-dialog.fd-size-medium { max-width: 760px; }\n.fd-form-dialog.fd-size-large { max-width: 1080px; }\n.fd-form-dialog-backdrop:has(> .fd-size-full) { padding: 0; }\n.fd-form-dialog.fd-size-full { max-width: none; max-height: none; height: 100%; border-radius: 0; }\n.fd-form-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--fd-border); background: var(--fd-surface); }\n.fd-form-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }\n.fd-dialog-close { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 4px; color: var(--fd-muted); }\n.fd-dialog-close:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-form-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; container-type: inline-size; }\n.fd-form-dialog-body .fd-sheet-layout { margin-block-start: 12px; }\n/* The dialog's head names the page; a record in a dialog leaves its side panel (the chatter) to the full page. */\n.fd-form-dialog-body .fd-page-title { display: none; }\n.fd-form-dialog-body .fd-page-head:not(:has(.fd-page-description)) { display: none; }\n.fd-form-dialog-body .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); }\n.fd-form-dialog-body .fd-side { display: none; }\n/* Search more\u2026: a search box over a list of rows. */\n.fd-search-body { display: grid; gap: 12px; align-content: start; }\n.fd-search-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: auto; max-height: min(60vh, 520px); }\n.fd-search-list .fd-option { padding: 8px 12px; }\n.fd-search-list .fd-option + .fd-option { border-block-start: 1px solid var(--fd-border); }\n.fd-search-list .fd-empty { padding: 10px 12px; color: var(--fd-muted); }\n/* A page with no sheet of its own sits on the dialog's surface, clear of its edges. */\n.fd-form-dialog-body:not(:has(.fd-sheet-layout)) { background: var(--fd-surface); padding: 16px 20px 20px; }\n.fd-form-dialog-foot { padding: 12px 16px; border-block-start: 1px solid var(--fd-border); background: var(--fd-surface); margin: 0; }\n@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } }\n";
 /** Add Fieldia's stylesheet to a document, once. */
 export declare function installStyles(document: Document): void;

package/src/lib/styles.d.ts

@@ -11,6 +11,6 @@
  * Written with logical properties (inline/block, start/end), so a right-to-left
  * form mirrors without a second stylesheet.
  */
-export declare const FIELDIA_CSS = "\n/* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. */\n.fd-form, .fd-theme {\n  --fd-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Noto Sans Arabic\", sans-serif;\n  --fd-text: #212529;\n  --fd-muted: #6b7280;\n  --fd-page: #f2f3f5;\n  --fd-surface: #ffffff;\n  --fd-border: #cfd4da;\n  --fd-border-strong: #9aa3ad;\n  --fd-accent: #002855;\n  --fd-accent-text: #ffffff;\n  --fd-accent-soft: #e6ebf2;\n  --fd-focus: #002855;\n  --fd-focus-ring: none;\n  --fd-error: #c62828;\n  --fd-error-soft: #fdecea;\n  --fd-success: #2e7d32;\n  --fd-success-soft: #e8f5e9;\n  --fd-warning: #8a5300;\n  --fd-warning-soft: #fff4e0;\n  --fd-info: #0b5cad;\n  --fd-info-soft: #e7f0fb;\n  --fd-radius: 0px;\n  --fd-control-radius: 0px;\n  --fd-pad-y: 3px;\n  --fd-pad-x: 4px;\n  --fd-input-border: 0 0 1px 0;\n  --fd-label-weight: 600;\n  --fd-gap-x: 32px;\n  --fd-gap-y: 14px;\n  container-type: inline-size;\n  font-family: var(--fd-font);\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--fd-text);\n  -webkit-text-size-adjust: 100%;\n}\n.fd-form[data-fd-skin=\"outlined\"], .fd-theme[data-fd-skin=\"outlined\"] {\n  --fd-text: rgba(0, 0, 0, 0.88);\n  --fd-muted: rgba(0, 0, 0, 0.55);\n  --fd-page: #f5f5f5;\n  --fd-border: #d9d9d9;\n  --fd-border-strong: #bfbfbf;\n  --fd-accent: #1677ff;\n  --fd-accent-soft: #e6f4ff;\n  --fd-focus: #1677ff;\n  --fd-focus-ring: 0 0 0 2px rgba(5, 145, 255, 0.12);\n  --fd-error: #ff4d4f;\n  --fd-error-soft: #fff2f0;\n  --fd-radius: 8px;\n  --fd-control-radius: 6px;\n  --fd-pad-y: 4px;\n  --fd-pad-x: 11px;\n  --fd-input-border: 1px;\n  --fd-label-weight: 400;\n  --fd-gap-x: 24px;\n  --fd-gap-y: 18px;\n}\n.fd-form *, .fd-form *::before, .fd-form *::after { box-sizing: border-box; }\n.fd-form [hidden] { display: none !important; }\n\n/* ---- page frame ---------------------------------------------------------- */\n.fd-page-head { display: grid; gap: 4px; margin-block-end: 20px; }\n.fd-page-title { font-size: 22px; font-weight: 650; margin: 0; line-height: 1.25; }\n.fd-page-description { color: var(--fd-muted); margin: 0; }\n\n/* ---- fields ---------------------------------------------------------------- */\n.fd-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--fd-columns, 1), minmax(0, 1fr));\n  gap: var(--fd-gap-y) var(--fd-gap-x);\n  align-items: start;\n}\n.fd-field { display: grid; gap: 4px; min-width: 0; grid-column: span min(var(--fd-span, 1), var(--fd-columns, 1)); }\n.fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }\n.fd-field.fd-required > .fd-label::after { content: \" *\"; color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::after { content: \"\"; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::before { content: \"* \"; color: var(--fd-error); }\n.fd-help { color: var(--fd-muted); font-size: 12.5px; }\n.fd-error { color: var(--fd-error); font-size: 12.5px; }\n.fd-warning {\n  color: var(--fd-warning); background: var(--fd-warning-soft); font-size: 12.5px;\n  padding: 3px 8px; border-radius: var(--fd-control-radius); justify-self: start;\n}\n\n/* underline: label beside the value, the way a Flectra sheet reads */\n.fd-form[data-fd-skin=\"underline\"] .fd-field {\n  /* One label width for every field, so a field spanning two columns lines up with its neighbours. */\n  grid-template-columns: var(--fd-label-width, 11em) minmax(0, 1fr);\n  column-gap: 12px;\n  align-items: baseline;\n}\n.fd-form[data-fd-skin=\"underline\"] .fd-field > .fd-label { grid-column: 1; }\n/* A table of lines needs the full width: its label sits above it. */\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] > * { grid-column: 1 !important; }\n.fd-form[data-fd-skin=\"underline\"] .fd-field > :not(.fd-label) { grid-column: 2; }\n/* A label beside every value needs room twice over: the underline skin stacks its columns sooner. */\n@container (max-width: 760px) {\n  .fd-form[data-fd-skin=\"underline\"] .fd-grid { grid-template-columns: minmax(0, 1fr); }\n  .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-column: auto; }\n}\n@container (max-width: 520px) {\n  .fd-grid { grid-template-columns: minmax(0, 1fr); }\n  .fd-field { grid-column: auto; }\n  .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-template-columns: minmax(0, 1fr); }\n  .fd-form[data-fd-skin=\"underline\"] .fd-field > * { grid-column: 1 !important; }\n}\n\n/* ---- inputs ---------------------------------------------------------------- */\n.fd-input {\n  width: 100%;\n  min-width: 0;\n  font: inherit;\n  color: inherit;\n  background: var(--fd-surface);\n  border: solid var(--fd-border);\n  border-width: var(--fd-input-border);\n  border-radius: var(--fd-control-radius);\n  padding: var(--fd-pad-y) var(--fd-pad-x);\n  min-height: 30px;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-input::placeholder { color: var(--fd-muted); opacity: 0.8; }\n.fd-input:hover { border-color: var(--fd-border-strong); }\n.fd-input:focus { outline: none; border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }\n.fd-form[data-fd-skin=\"underline\"] .fd-input { background: transparent; }\n.fd-form[data-fd-skin=\"underline\"] .fd-input:focus { box-shadow: 0 1px 0 0 var(--fd-focus); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field.fd-required .fd-input { border-color: var(--fd-accent); }\n.fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[readonly] { background: rgba(0, 0, 0, 0.04); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }\n.fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[aria-invalid=\"true\"]:focus { box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06); }\n.fd-textarea { resize: vertical; min-height: 64px; }\n.fd-select { appearance: auto; }\n.fd-number { display: flex; align-items: baseline; gap: 6px; }\n.fd-number-input { font-variant-numeric: tabular-nums; }\n.fd-currency { color: var(--fd-muted); font-size: 12.5px; font-weight: 600; }\n/* With the currency after it, the amount ends right beside it. */\n.fd-currency-after > .fd-number-input { text-align: end; }\n/* A picked currency is a small box of its own beside the amount. */\n.fd-currency-picked { align-items: center; }\n.fd-currency-picked > :not(.fd-number-input) { flex: 0 0 104px; min-width: 0; }\n.fd-currency-picked > .fd-number-input { flex: 1 1 auto; min-width: 0; }\n.fd-pending { color: var(--fd-muted); font-style: italic; }\n.fd-pending:empty::before { content: \"\u2014\"; }\n\n.fd-checkbox, .fd-choice input { width: 16px; height: 16px; accent-color: var(--fd-accent); margin: 0; }\n.fd-switch {\n  appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; position: relative;\n  background: var(--fd-border-strong); cursor: pointer; transition: background 0.2s ease;\n}\n.fd-switch::after {\n  content: \"\"; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 16px; height: 16px;\n  border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25);\n}\n.fd-switch:checked { background: var(--fd-accent); }\n.fd-switch:checked::after { transform: translateX(14px); }\n[dir=\"rtl\"] .fd-switch:checked::after { transform: translateX(-14px); }\n.fd-choices { display: flex; flex-wrap: wrap; gap: 6px 18px; }\n.fd-choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }\n.fd-points { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-points button {\n  font: inherit; cursor: pointer; border: 1px solid var(--fd-border); background: var(--fd-surface);\n  color: var(--fd-text); border-radius: var(--fd-control-radius); min-width: 34px; height: 34px; padding: 0 8px;\n}\n.fd-points button.fd-on { background: var(--fd-accent); color: var(--fd-accent-text); border-color: var(--fd-accent); }\n.fd-rating button { border: none; background: none; font-size: 24px; color: var(--fd-border-strong); padding: 0 2px; min-width: 0; }\n.fd-rating button.fd-on { background: none; color: #f5a623; }\n.fd-points button:disabled, .fd-choice input:disabled { cursor: default; }\n.fd-form :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-form .fd-input:focus-visible { outline: none; }\n\n/* ---- pickers: many2one, many2many, reference ------------------------------ */\n.fd-combo { position: relative; display: flex; align-items: center; min-width: 0; }\n.fd-combo-input { padding-inline-end: 28px; }\n.fd-combo-clear {\n  position: absolute; inset-inline-end: 4px; border: none; background: none; cursor: pointer; color: var(--fd-muted);\n  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-clear:hover { color: var(--fd-text); background: var(--fd-page); }\n/* A link that can be opened has its open button beside the clear button. */\n.fd-combo:has(> .fd-combo-open:not([hidden])) .fd-combo-input { padding-inline-end: 52px; }\n.fd-combo-open {\n  position: absolute; inset-inline-end: 28px; border: none; background: none; cursor: pointer; color: var(--fd-accent);\n  font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-open:hover { background: var(--fd-page); }\n.fd-listbox {\n  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 2px); z-index: 20; margin: 0; padding: 4px 0;\n  list-style: none; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px);\n  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.12); max-height: 240px; overflow-y: auto;\n}\n.fd-option { padding: 6px 12px; cursor: pointer; }\n.fd-option:hover, .fd-option.fd-active { background: var(--fd-accent-soft); }\n.fd-option-create { color: var(--fd-accent); border-block-start: 1px solid var(--fd-border); }\n.fd-empty { padding: 6px 12px; color: var(--fd-muted); font-style: italic; }\n.fd-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-chips { display: contents; list-style: none; margin: 0; padding: 0; }\n.fd-chip {\n  display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 10px; border-radius: 999px;\n  background: var(--fd-accent-soft); color: var(--fd-text); font-size: 13px; line-height: 22px;\n}\n.fd-chip-remove { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 999px; }\n.fd-chip-remove:hover { color: var(--fd-error); }\n.fd-tags .fd-combo { flex: 1 1 140px; }\n.fd-reference { display: grid; grid-template-columns: minmax(7em, 34%) minmax(0, 1fr); gap: 8px; }\n\n/* ---- one2many lines ------------------------------------------------------- */\n.fd-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }\n/* The table scrolls sideways inside its own box; the grid around it must not grow to the table's width. */\n/* position: relative keeps the cells' hidden labels inside the scroll box; without it they widen the page. */\n.fd-lines-scroll { overflow-x: auto; min-width: 0; position: relative; }\n.fd-lines-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }\n.fd-lines-table th { text-align: start; font-weight: 600; color: var(--fd-muted); font-size: 12.5px; padding: 6px 8px; border-block-end: 1px solid var(--fd-border); white-space: nowrap; }\n.fd-lines-table td { padding: 4px 8px; border-block-end: 1px solid var(--fd-border); vertical-align: top; min-width: 7em; }\n.fd-lines-table td.fd-lines-tools, .fd-lines-table th.fd-lines-tools { width: 32px; min-width: 32px; padding-inline: 0; text-align: center; }\n.fd-lines-table .fd-input { min-height: 28px; }\n/* A yes/no cell sits level with the inputs beside it. */\n.fd-lines-table td > .fd-checkbox, .fd-lines-table td > .fd-switch { margin-block-start: 6px; }\n.fd-line-delete { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; }\n.fd-line-delete:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-lines-totals td { padding: 8px; font-weight: 600; border-block-start: 1px solid var(--fd-border); font-variant-numeric: tabular-nums; }\n.fd-lines-adds { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-self: start; }\n/* A section heads the lines below it; a note reads as a remark between them. */\n.fd-line-section td { background: var(--fd-page); }\n.fd-line-section .fd-input { font-weight: 600; }\n.fd-line-note .fd-input { font-style: italic; }\n.fd-cell-error { color: var(--fd-error); font-size: 12px; }\n.fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n\n/* ---- files, images, rich text, json ------------------------------------ */\n.fd-file { display: grid; gap: 8px; justify-items: start; padding: 6px 0; border-radius: var(--fd-control-radius); }\n.fd-file.fd-dragging { outline: 2px dashed var(--fd-accent); outline-offset: 4px; }\n.fd-file-pick { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; cursor: pointer; }\n.fd-file-chosen { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }\n.fd-file-name { font-variant-numeric: tabular-nums; }\n.fd-image-pick {\n  width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n  display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { max-width: 160px; max-height: 160px; border-radius: var(--fd-control-radius); border: 1px solid var(--fd-border); object-fit: cover; background: var(--fd-page); }\n.fd-richtext { min-height: 96px; line-height: 1.5; overflow-wrap: anywhere; }\n.fd-richtext-box { display: grid; gap: 0; min-width: 0; }\n.fd-richtext-box > .fd-richtext { border-start-start-radius: 0; border-start-end-radius: 0; }\n.fd-richtext-bar {\n  display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; min-width: 0;\n  border: 1px solid var(--fd-border); border-block-end: none; border-start-start-radius: var(--fd-control-radius); border-start-end-radius: var(--fd-control-radius);\n  background: var(--fd-page);\n}\n.fd-richtext-style { font: inherit; font-size: 12.5px; padding: 3px 6px; margin-inline-end: 4px; border: 1px solid var(--fd-border); border-radius: 4px; background: var(--fd-surface); color: var(--fd-text); }\n.fd-richtext-tool {\n  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px;\n  background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 14px;\n}\n.fd-richtext-tool:hover { background: var(--fd-surface); }\n.fd-richtext-tool[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); }\n.fd-richtext-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }\n.fd-richtext-tool svg circle { fill: currentColor; stroke: none; }\n.fd-link-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--fd-border); border-block-end: none; background: var(--fd-surface); }\n.fd-link-row > .fd-input { flex: 1 1 200px; min-width: 0; }\n.fd-richtext[contenteditable=\"false\"] { background: transparent; border-color: transparent; padding-inline: 0; min-height: 0; }\n.fd-richtext p { margin: 0 0 6px; }\n.fd-code { font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; font-size: 12.5px; min-height: 96px; }\n\n/* ---- sections, tabs ---------------------------------------------------- */\n.fd-sections { display: grid; gap: 24px; }\n.fd-section { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }\n.fd-section-title { font-size: 15px; font-weight: 650; padding: 0; margin: 0; float: inline-start; width: 100%; }\n.fd-section-title + * { clear: both; }\n.fd-form[data-fd-skin=\"underline\"] .fd-section-title {\n  text-transform: uppercase; letter-spacing: 0.05em; font-size: 12.5px; color: var(--fd-muted);\n  border-block-end: 1px solid var(--fd-border); padding-block-end: 6px; width: 100%;\n}\n.fd-section-description { color: var(--fd-muted); margin: 0; }\n.fd-section-toggle {\n  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;\n  display: inline-flex; align-items: center; gap: 8px; text-align: start;\n}\n.fd-section-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n.fd-section-chevron {\n  width: 0.5em; height: 0.5em; border: solid currentColor; border-width: 0 2px 2px 0;\n  transform: rotate(45deg); margin-block-start: -0.2em; transition: transform 0.15s ease; flex: none;\n}\n.fd-section-folded .fd-section-chevron { transform: rotate(-45deg); margin-block-start: 0; }\n[dir=\"rtl\"] .fd-section-folded .fd-section-chevron { transform: rotate(135deg); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-sections > .fd-section {\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 20px 24px;\n}\n.fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; }\n.fd-tab {\n  font: inherit; background: none; border: none; cursor: pointer; padding: 8px 14px; color: var(--fd-muted);\n  border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap;\n}\n.fd-tab[aria-selected=\"true\"] { color: var(--fd-accent); border-block-end-color: var(--fd-accent); font-weight: 600; }\n.fd-tabpanel { padding-block: 16px; display: grid; gap: 16px; }\n\n/* ---- buttons ---------------------------------------------------------- */\n.fd-button {\n  font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; justify-content: center;\n  min-height: 32px; padding: 4px 14px; border-radius: var(--fd-control-radius);\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text);\n}\n.fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }\n.fd-button-danger { color: var(--fd-error); border-color: var(--fd-error); }\n.fd-button-danger:hover { background: var(--fd-error); color: #fff; }\n.fd-button-link { border-color: transparent; background: none; color: var(--fd-accent); padding-inline: 4px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-button { border-radius: 3px; }\n.fd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.fd-actions-end { justify-content: flex-end; margin-block-start: 24px; }\n\n/* ---- record sheet --------------------------------------------------------- */\n.fd-sheet-page { background: var(--fd-page); padding: 0 0 32px; min-width: 0; }\n.fd-header {\n  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;\n  background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); padding: 8px 16px;\n}\n.fd-statusbar { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; }\n.fd-statusbar li { display: flex; }\n.fd-statusbar button, .fd-statusbar span {\n  font: inherit; font-size: 13px; border: none; background: var(--fd-page); color: var(--fd-muted);\n  padding: 5px 18px 5px 22px; margin-inline-start: -6px; white-space: nowrap;\n  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);\n}\n.fd-statusbar li:first-child button, .fd-statusbar li:first-child span { margin-inline-start: 0; padding-inline-start: 14px;\n  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }\n.fd-statusbar button { cursor: pointer; }\n.fd-statusbar [aria-current=\"step\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n[dir=\"rtl\"] .fd-statusbar button, [dir=\"rtl\"] .fd-statusbar span { transform: scaleX(-1); }\n[dir=\"rtl\"] .fd-statusbar button > *, [dir=\"rtl\"] .fd-statusbar span > * { display: inline-block; transform: scaleX(-1); }\n.fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1180px; margin: 16px auto 0; padding-inline: 16px; }\n.fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }\n@container (max-width: 860px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }\n.fd-card {\n  position: relative; background: var(--fd-surface); border: 1px solid var(--fd-border);\n  border-radius: var(--fd-radius); padding: 24px 28px 28px; display: grid; gap: 18px; min-width: 0;\n}\n.fd-ribbon-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }\n.fd-ribbon {\n  position: absolute; inset-block-start: 18px; inset-inline-end: -42px; transform: rotate(45deg); width: 160px;\n  text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; color: #fff; background: var(--fd-muted);\n  text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none;\n}\n[dir=\"rtl\"] .fd-ribbon { transform: rotate(-45deg); }\n.fd-ribbon.fd-tone-danger { background: var(--fd-error); }\n.fd-ribbon.fd-tone-success { background: var(--fd-success); }\n.fd-ribbon.fd-tone-warning { background: #d97706; }\n.fd-ribbon.fd-tone-info { background: var(--fd-info); }\n.fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; }\n.fd-alert.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-alert.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-alert.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-alert.fd-tone-info, .fd-alert:not([class*=\"fd-tone-\"]) { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; margin: -24px -28px 0; border-block-end: 1px solid var(--fd-border); }\n.fd-stats:empty { display: none; }\n/* A visible ribbon owns the corner: stat buttons keep clear of it. */\n.fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stats { padding-inline-end: 104px; }\n.fd-stat {\n  font: inherit; background: none; border: none; border-inline-start: 1px solid var(--fd-border); cursor: pointer;\n  padding: 8px 18px; display: grid; justify-items: start; line-height: 1.2; color: var(--fd-text); min-width: 120px;\n}\n.fd-stat:hover { background: var(--fd-page); }\n.fd-stat-value { font-weight: 700; font-size: 15px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n.fd-stat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-title-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }\n.fd-title { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }\n.fd-avatar { flex: none; }\n.fd-avatar > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar > * { grid-column: 1 !important; }\n.fd-avatar .fd-image-pick {\n  width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n  display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { width: 88px; height: 88px; }\n.fd-avatar .fd-file-pick .fd-help { display: none; }\n.fd-avatar .fd-file-name { display: none; }\n.fd-avatar .fd-file { justify-items: center; gap: 2px; padding: 0; }\n.fd-avatar .fd-file-chosen { gap: 2px 8px; justify-content: center; font-size: 12.5px; }\n.fd-title .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-title .fd-field { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-title .fd-field > * { grid-column: 1; }\n.fd-title .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-side { display: grid; gap: 12px; align-content: start; min-width: 0; }\n\n/* ---- wizard -------------------------------------------------------------- */\n.fd-wizard { display: grid; gap: 20px; }\n.fd-progress { display: grid; gap: 8px; }\n.fd-progress-text { color: var(--fd-muted); font-size: 13px; }\n.fd-value-text { display: block; padding-block: 6px; font-variant-numeric: tabular-nums; }\n.fd-date-pick { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }\n.fd-date-pick > .fd-input { flex: 1 1 auto; min-width: 0; }\n.fd-calendar-button {\n  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-muted);\n}\n.fd-calendar-button:hover, .fd-calendar-button[aria-expanded=\"true\"] { color: var(--fd-text); background: var(--fd-page); }\n.fd-calendar-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }\n.fd-calendar {\n  position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0; z-index: 30; padding: 8px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.14);\n}\n.fd-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; }\n.fd-calendar-head button { border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; color: var(--fd-text); }\n.fd-calendar-head button:hover { background: var(--fd-page); }\n.fd-calendar-title { font-weight: 600; }\n.fd-calendar-grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }\n.fd-calendar-grid th { font-size: 11.5px; font-weight: 600; color: var(--fd-muted); padding: 4px 0; width: 34px; text-align: center; }\n.fd-calendar-grid .fd-week { color: var(--fd-accent); font-weight: 600; border-inline-end: 1px solid var(--fd-border); }\n.fd-calendar-grid td { padding: 1px; }\n.fd-calendar-grid td button {\n  width: 32px; height: 30px; border: none; border-radius: 4px; background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 13px;\n}\n.fd-calendar-grid td button:hover { background: var(--fd-accent-soft); }\n.fd-calendar-grid td button.fd-outside { color: var(--fd-muted); opacity: 0.6; }\n.fd-calendar-grid td button[aria-current=\"date\"] { box-shadow: inset 0 0 0 1px var(--fd-accent); }\n.fd-calendar-grid td button[aria-selected=\"true\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n.fd-calendar-grid td button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-properties { display: grid; gap: 8px; min-width: 0; }\n.fd-property { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }\n.fd-property > label { color: var(--fd-muted); font-size: 13px; }\n.fd-property[data-type=\"boolean\"] > :last-child { justify-self: start; }\n@container (max-width: 520px) { .fd-property { grid-template-columns: minmax(0, 1fr); gap: 4px; } }\n.fd-progressbar {\n  position: relative; height: 22px; min-width: 120px; border-radius: 999px; overflow: hidden;\n  background: var(--fd-page); border: 1px solid var(--fd-border); font-variant-numeric: tabular-nums;\n}\n.fd-progressbar-fill { height: 100%; background: var(--fd-success); transition: width 0.2s ease; }\n.fd-progressbar[data-tone=\"warning\"] .fd-progressbar-fill { background: #d97706; }\n.fd-progressbar[data-tone=\"danger\"] .fd-progressbar-fill { background: var(--fd-error); }\n.fd-progressbar[data-tone=\"info\"] .fd-progressbar-fill { background: var(--fd-info); }\n.fd-progressbar-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--fd-text); }\n.fd-progressbar-edit { display: flex; align-items: center; gap: 12px; min-width: 0; }\n.fd-progressbar-edit > .fd-progressbar { flex: 1 1 auto; }\n.fd-progressbar-edit > .fd-input { flex: 0 0 96px; }\n.fd-progress-bar { height: 4px; background: var(--fd-border); border-radius: 999px; overflow: hidden; }\n.fd-progress-bar > span { display: block; height: 100%; background: var(--fd-accent); transition: width 0.25s ease; }\n.fd-step { display: grid; gap: 18px; }\n.fd-step-title { font-size: 18px; font-weight: 650; margin: 0; }\n.fd-wizard-nav { display: flex; gap: 8px; justify-content: space-between; }\n.fd-wizard-nav .fd-spacer { flex: 1; }\n\n/* ---- text, status, dialog ------------------------------------------------- */\n.fd-text-heading { font-size: 16px; font-weight: 650; margin: 0; }\n.fd-text-paragraph { margin: 0; }\n.fd-text-note { margin: 0; color: var(--fd-muted); font-size: 13px; }\n.fd-status { min-height: 1.4em; color: var(--fd-muted); font-size: 13px; }\n.fd-status.fd-status-error { color: var(--fd-error); }\n.fd-status.fd-status-saved { color: var(--fd-success); }\n.fd-draft { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; margin-block-end: 16px;\n  background: var(--fd-info-soft); border: 1px solid #a9c8ef; border-radius: var(--fd-control-radius); }\n.fd-done { padding: 40px 0; text-align: center; display: grid; gap: 12px; justify-items: center; }\n.fd-done-title { font-size: 20px; font-weight: 650; margin: 0; }\n.fd-dialog-backdrop { position: fixed; inset: 0; background: rgba(15, 20, 25, 0.45); display: grid; place-items: center; z-index: 1000; padding: 16px; }\n.fd-dialog {\n  background: var(--fd-surface); color: var(--fd-text); border-radius: max(var(--fd-radius), 6px); max-width: 420px; width: 100%;\n  padding: 20px 22px; display: grid; gap: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: var(--fd-font);\n}\n.fd-dialog p { margin: 0; }\n/* A page in a dialog: a head with its title and \u00D7, a body that scrolls, a foot with Discard and Save & Close. */\n.fd-form-dialog {\n  display: flex; flex-direction: column; width: 100%; max-height: min(90vh, 100%); min-height: 0;\n  background: var(--fd-page); color: var(--fd-text); border-radius: max(var(--fd-radius), 8px);\n  box-shadow: 0 24px 64px rgba(15, 20, 25, 0.3); overflow: hidden;\n}\n.fd-form-dialog:focus { outline: none; }\n.fd-form-dialog.fd-size-small { max-width: 440px; }\n.fd-form-dialog.fd-size-medium { max-width: 760px; }\n.fd-form-dialog.fd-size-large { max-width: 1080px; }\n.fd-form-dialog-backdrop:has(> .fd-size-full) { padding: 0; }\n.fd-form-dialog.fd-size-full { max-width: none; max-height: none; height: 100%; border-radius: 0; }\n.fd-form-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--fd-border); background: var(--fd-surface); }\n.fd-form-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }\n.fd-dialog-close { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 4px; color: var(--fd-muted); }\n.fd-dialog-close:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-form-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; container-type: inline-size; }\n.fd-form-dialog-body .fd-sheet-layout { margin-block-start: 12px; }\n/* The dialog's head names the page; a record in a dialog leaves its side panel (the chatter) to the full page. */\n.fd-form-dialog-body .fd-page-title { display: none; }\n.fd-form-dialog-body .fd-page-head:not(:has(.fd-page-description)) { display: none; }\n.fd-form-dialog-body .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); }\n.fd-form-dialog-body .fd-side { display: none; }\n/* Search more\u2026: a search box over a list of rows. */\n.fd-search-body { display: grid; gap: 12px; align-content: start; }\n.fd-search-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: auto; max-height: min(60vh, 520px); }\n.fd-search-list .fd-option { padding: 8px 12px; }\n.fd-search-list .fd-option + .fd-option { border-block-start: 1px solid var(--fd-border); }\n.fd-search-list .fd-empty { padding: 10px 12px; color: var(--fd-muted); }\n/* A page with no sheet of its own sits on the dialog's surface, clear of its edges. */\n.fd-form-dialog-body:not(:has(.fd-sheet-layout)) { background: var(--fd-surface); padding: 16px 20px 20px; }\n.fd-form-dialog-foot { padding: 12px 16px; border-block-start: 1px solid var(--fd-border); background: var(--fd-surface); margin: 0; }\n@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } }\n";
+export declare const FIELDIA_CSS = "\n/* .fd-theme carries the same tokens for things outside a form, such as a dialog over the page. */\n.fd-form, .fd-theme {\n  --fd-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans\", \"Noto Sans Arabic\", sans-serif;\n  --fd-text: #212529;\n  --fd-muted: #6b7280;\n  --fd-page: #f2f3f5;\n  --fd-surface: #ffffff;\n  --fd-border: #cfd4da;\n  --fd-border-strong: #9aa3ad;\n  --fd-accent: #002855;\n  --fd-accent-text: #ffffff;\n  --fd-accent-soft: #e6ebf2;\n  --fd-focus: #002855;\n  --fd-focus-ring: none;\n  --fd-error: #c62828;\n  --fd-error-soft: #fdecea;\n  --fd-success: #2e7d32;\n  --fd-success-soft: #e8f5e9;\n  --fd-warning: #8a5300;\n  --fd-warning-soft: #fff4e0;\n  --fd-info: #0b5cad;\n  --fd-info-soft: #e7f0fb;\n  --fd-radius: 0px;\n  --fd-control-radius: 0px;\n  --fd-pad-y: 3px;\n  --fd-pad-x: 4px;\n  --fd-input-border: 0 0 1px 0;\n  --fd-label-weight: 600;\n  --fd-gap-x: 32px;\n  --fd-gap-y: 14px;\n  container-type: inline-size;\n  font-family: var(--fd-font);\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--fd-text);\n  -webkit-text-size-adjust: 100%;\n}\n.fd-form[data-fd-skin=\"outlined\"], .fd-theme[data-fd-skin=\"outlined\"] {\n  --fd-text: rgba(0, 0, 0, 0.88);\n  --fd-muted: rgba(0, 0, 0, 0.55);\n  --fd-page: #f5f5f5;\n  --fd-border: #d9d9d9;\n  --fd-border-strong: #bfbfbf;\n  --fd-accent: #1677ff;\n  --fd-accent-soft: #e6f4ff;\n  --fd-focus: #1677ff;\n  --fd-focus-ring: 0 0 0 2px rgba(5, 145, 255, 0.12);\n  --fd-error: #ff4d4f;\n  --fd-error-soft: #fff2f0;\n  --fd-radius: 8px;\n  --fd-control-radius: 6px;\n  --fd-pad-y: 4px;\n  --fd-pad-x: 11px;\n  --fd-input-border: 1px;\n  --fd-label-weight: 400;\n  --fd-gap-x: 24px;\n  --fd-gap-y: 18px;\n}\n.fd-form *, .fd-form *::before, .fd-form *::after { box-sizing: border-box; }\n.fd-form [hidden] { display: none !important; }\n\n/* ---- page frame ---------------------------------------------------------- */\n.fd-page-head { display: grid; gap: 4px; margin-block-end: 20px; }\n.fd-page-title { font-size: 22px; font-weight: 650; margin: 0; line-height: 1.25; }\n.fd-page-description { color: var(--fd-muted); margin: 0; }\n\n/* ---- how wide a page goes, and Save above its sections ----------------------- */\n.fd-form[data-max-width=\"narrow\"] { --fd-page-max: 640px; }\n.fd-form[data-max-width=\"medium\"] { --fd-page-max: 900px; }\n.fd-form[data-max-width=\"wide\"] { --fd-page-max: 1180px; }\n.fd-form[data-max-width=\"full\"] { --fd-page-max: none; }\n.fd-form[data-max-width] > .fd-content:not(:has(> .fd-sheet-page)) { max-width: var(--fd-page-max); margin-inline: auto; }\n.fd-actions.fd-actions-top { margin-block-start: 0; padding-block-end: 14px; margin-block-end: 18px; border-block-end: 1px solid var(--fd-border); }\n\n/* ---- icons: drawn with lines in the colour of the words beside them ------------ */\n.fd-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }\n.fd-section-title .fd-icon, .fd-tab .fd-icon, .fd-button .fd-icon, .fd-step-title .fd-icon { margin-inline-end: 0.4em; }\n.fd-section-title .fd-icon { color: var(--fd-muted); }\n\n/* ---- fields ---------------------------------------------------------------- */\n.fd-grid {\n  display: grid;\n  grid-template-columns: repeat(var(--fd-columns, 1), minmax(0, 1fr));\n  gap: var(--fd-gap-y) var(--fd-gap-x);\n  align-items: start;\n}\n.fd-field { display: grid; gap: 4px; min-width: 0; grid-column: span min(var(--fd-span, 1), var(--fd-columns, 1)); }\n.fd-label { font-weight: var(--fd-label-weight); color: var(--fd-text); }\n.fd-field.fd-required > .fd-label::after { content: \" *\"; color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::after { content: \"\"; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-field.fd-required > .fd-label::before { content: \"* \"; color: var(--fd-error); }\n.fd-help { color: var(--fd-muted); font-size: 12.5px; }\n.fd-error { color: var(--fd-error); font-size: 12.5px; }\n.fd-warning {\n  color: var(--fd-warning); background: var(--fd-warning-soft); font-size: 12.5px;\n  padding: 3px 8px; border-radius: var(--fd-control-radius); justify-self: start;\n}\n\n/* underline: label beside the value, the way a Flectra sheet reads */\n.fd-form[data-fd-skin=\"underline\"] .fd-field {\n  /* One label width for every field, so a field spanning two columns lines up with its neighbours. */\n  grid-template-columns: var(--fd-label-width, 11em) minmax(0, 1fr);\n  column-gap: 12px;\n  align-items: baseline;\n}\n.fd-form[data-fd-skin=\"underline\"] .fd-field > .fd-label { grid-column: 1; }\n/* A table of lines needs the full width: its label sits above it. */\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field[data-type=\"one2many\"] > * { grid-column: 1 !important; }\n.fd-form[data-fd-skin=\"underline\"] .fd-field > :not(.fd-label) { grid-column: 2; }\n/* A label beside every value needs room twice over: the underline skin stacks its columns sooner. */\n@container (max-width: 760px) {\n  .fd-form[data-fd-skin=\"underline\"] .fd-grid { grid-template-columns: minmax(0, 1fr); }\n  .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-column: auto; }\n  /* A section that says how many columns it keeps here keeps them, in either skin. */\n  .fd-form .fd-grid[data-columns-medium] { grid-template-columns: repeat(var(--fd-columns-medium), minmax(0, 1fr)); }\n  .fd-form .fd-grid[data-columns-medium] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-medium)); }\n  /* Kept side by side here, the underline skin's fields have no room for a label beside: it goes above. */\n  .fd-form[data-fd-skin=\"underline\"] .fd-grid[data-columns-medium]:not([data-columns-medium=\"1\"]) .fd-field { grid-template-columns: minmax(0, 1fr); }\n  .fd-form[data-fd-skin=\"underline\"] .fd-grid[data-columns-medium]:not([data-columns-medium=\"1\"]) .fd-field > * { grid-column: 1 !important; }\n}\n@container (max-width: 520px) {\n  .fd-grid { grid-template-columns: minmax(0, 1fr); }\n  .fd-field { grid-column: auto; }\n  .fd-form[data-fd-skin=\"underline\"] .fd-field { grid-template-columns: minmax(0, 1fr); }\n  .fd-form[data-fd-skin=\"underline\"] .fd-field > * { grid-column: 1 !important; }\n  /* The narrow count, or one column when only the medium one was given. */\n  .fd-form .fd-grid[data-columns-medium], .fd-form .fd-grid[data-columns-narrow] { grid-template-columns: repeat(var(--fd-columns-narrow, 1), minmax(0, 1fr)); }\n  .fd-form .fd-grid[data-columns-medium] > .fd-field, .fd-form .fd-grid[data-columns-narrow] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-narrow, 1)); }\n}\n\n/* ---- inputs ---------------------------------------------------------------- */\n.fd-input {\n  width: 100%;\n  min-width: 0;\n  font: inherit;\n  color: inherit;\n  background: var(--fd-surface);\n  border: solid var(--fd-border);\n  border-width: var(--fd-input-border);\n  border-radius: var(--fd-control-radius);\n  padding: var(--fd-pad-y) var(--fd-pad-x);\n  min-height: 30px;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.fd-input::placeholder { color: var(--fd-muted); opacity: 0.8; }\n.fd-input:hover { border-color: var(--fd-border-strong); }\n.fd-input:focus { outline: none; border-color: var(--fd-focus); box-shadow: var(--fd-focus-ring); }\n.fd-form[data-fd-skin=\"underline\"] .fd-input { background: transparent; }\n.fd-form[data-fd-skin=\"underline\"] .fd-input:focus { box-shadow: 0 1px 0 0 var(--fd-focus); }\n.fd-form[data-fd-skin=\"underline\"] .fd-field.fd-required .fd-input { border-color: var(--fd-accent); }\n.fd-input[readonly] { background: transparent; border-color: transparent; padding-inline: 0; }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[readonly] { background: rgba(0, 0, 0, 0.04); border-color: var(--fd-border); padding-inline: var(--fd-pad-x); color: var(--fd-muted); }\n.fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-input[aria-invalid=\"true\"]:focus { box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06); }\n.fd-textarea { resize: vertical; min-height: 64px; }\n.fd-select { appearance: auto; }\n.fd-number { display: flex; align-items: baseline; gap: 6px; }\n.fd-number-input { font-variant-numeric: tabular-nums; }\n.fd-currency { color: var(--fd-muted); font-size: 12.5px; font-weight: 600; }\n/* With the currency after it, the amount ends right beside it. */\n.fd-currency-after > .fd-number-input { text-align: end; }\n/* A picked currency is a small box of its own beside the amount. */\n.fd-currency-picked { align-items: center; }\n.fd-currency-picked > :not(.fd-number-input) { flex: 0 0 104px; min-width: 0; }\n.fd-currency-picked > .fd-number-input { flex: 1 1 auto; min-width: 0; }\n.fd-pending { color: var(--fd-muted); font-style: italic; }\n.fd-pending:empty::before { content: \"\u2014\"; }\n\n.fd-checkbox, .fd-choice input { width: 16px; height: 16px; accent-color: var(--fd-accent); margin: 0; }\n.fd-switch {\n  appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; position: relative;\n  background: var(--fd-border-strong); cursor: pointer; transition: background 0.2s ease;\n}\n.fd-switch::after {\n  content: \"\"; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 16px; height: 16px;\n  border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25);\n}\n.fd-switch:checked { background: var(--fd-accent); }\n.fd-switch:checked::after { transform: translateX(14px); }\n[dir=\"rtl\"] .fd-switch:checked::after { transform: translateX(-14px); }\n.fd-choices { display: flex; flex-wrap: wrap; gap: 6px 18px; }\n.fd-choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }\n.fd-points { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-points button {\n  font: inherit; cursor: pointer; border: 1px solid var(--fd-border); background: var(--fd-surface);\n  color: var(--fd-text); border-radius: var(--fd-control-radius); min-width: 34px; height: 34px; padding: 0 8px;\n}\n.fd-points button.fd-on { background: var(--fd-accent); color: var(--fd-accent-text); border-color: var(--fd-accent); }\n.fd-rating button { border: none; background: none; font-size: 24px; color: var(--fd-border-strong); padding: 0 2px; min-width: 0; }\n.fd-rating button.fd-on { background: none; color: #f5a623; }\n.fd-points button:disabled, .fd-choice input:disabled { cursor: default; }\n.fd-form :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-form .fd-input:focus-visible { outline: none; }\n\n/* ---- pickers: many2one, many2many, reference ------------------------------ */\n.fd-combo { position: relative; display: flex; align-items: center; min-width: 0; }\n.fd-combo-input { padding-inline-end: 28px; }\n.fd-combo-clear {\n  position: absolute; inset-inline-end: 4px; border: none; background: none; cursor: pointer; color: var(--fd-muted);\n  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-clear:hover { color: var(--fd-text); background: var(--fd-page); }\n/* A link that can be opened has its open button beside the clear button. */\n.fd-combo:has(> .fd-combo-open:not([hidden])) .fd-combo-input { padding-inline-end: 52px; }\n.fd-combo-open {\n  position: absolute; inset-inline-end: 28px; border: none; background: none; cursor: pointer; color: var(--fd-accent);\n  font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 4px;\n}\n.fd-combo-open:hover { background: var(--fd-page); }\n.fd-listbox {\n  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 2px); z-index: 20; margin: 0; padding: 4px 0;\n  list-style: none; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px);\n  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.12); max-height: 240px; overflow-y: auto;\n}\n.fd-option { padding: 6px 12px; cursor: pointer; }\n.fd-option:hover, .fd-option.fd-active { background: var(--fd-accent-soft); }\n.fd-option-create { color: var(--fd-accent); border-block-start: 1px solid var(--fd-border); }\n.fd-empty { padding: 6px 12px; color: var(--fd-muted); font-style: italic; }\n.fd-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-chips { display: contents; list-style: none; margin: 0; padding: 0; }\n.fd-chip {\n  display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 10px; border-radius: 999px;\n  background: var(--fd-accent-soft); color: var(--fd-text); font-size: 13px; line-height: 22px;\n}\n.fd-chip-remove { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 999px; }\n.fd-chip-remove:hover { color: var(--fd-error); }\n.fd-tags .fd-combo { flex: 1 1 140px; }\n.fd-reference { display: grid; grid-template-columns: minmax(7em, 34%) minmax(0, 1fr); gap: 8px; }\n\n/* ---- one2many lines ------------------------------------------------------- */\n.fd-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }\n/* The table scrolls sideways inside its own box; the grid around it must not grow to the table's width. */\n/* position: relative keeps the cells' hidden labels inside the scroll box; without it they widen the page. */\n.fd-lines-scroll { overflow-x: auto; min-width: 0; position: relative; }\n.fd-lines-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }\n.fd-lines-table th { text-align: start; font-weight: 600; color: var(--fd-muted); font-size: 12.5px; padding: 6px 8px; border-block-end: 1px solid var(--fd-border); white-space: nowrap; }\n.fd-lines-table td { padding: 4px 8px; border-block-end: 1px solid var(--fd-border); vertical-align: top; min-width: 7em; }\n.fd-lines-table td.fd-lines-tools, .fd-lines-table th.fd-lines-tools { width: 32px; min-width: 32px; padding-inline: 0; text-align: center; }\n.fd-lines-table .fd-input { min-height: 28px; }\n/* A yes/no cell sits level with the inputs beside it. */\n.fd-lines-table td > .fd-checkbox, .fd-lines-table td > .fd-switch { margin-block-start: 6px; }\n.fd-line-delete { border: none; background: none; cursor: pointer; color: var(--fd-muted); font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; }\n.fd-line-delete:hover { color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-lines-totals td { padding: 8px; font-weight: 600; border-block-start: 1px solid var(--fd-border); font-variant-numeric: tabular-nums; }\n.fd-lines-adds { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-self: start; }\n/* A section heads the lines below it; a note reads as a remark between them. */\n.fd-line-section td { background: var(--fd-page); }\n.fd-line-section .fd-input { font-weight: 600; }\n.fd-line-note .fd-input { font-style: italic; }\n.fd-cell-error { color: var(--fd-error); font-size: 12px; }\n.fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n\n/* ---- files, images, rich text, json ------------------------------------ */\n.fd-file { display: grid; gap: 8px; justify-items: start; padding: 6px 0; border-radius: var(--fd-control-radius); }\n.fd-file.fd-dragging { outline: 2px dashed var(--fd-accent); outline-offset: 4px; }\n.fd-file-pick { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; cursor: pointer; }\n.fd-file-chosen { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }\n.fd-file-name { font-variant-numeric: tabular-nums; }\n.fd-image-pick {\n  width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n  display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { max-width: 160px; max-height: 160px; border-radius: var(--fd-control-radius); border: 1px solid var(--fd-border); object-fit: cover; background: var(--fd-page); }\n.fd-richtext { min-height: 96px; line-height: 1.5; overflow-wrap: anywhere; }\n.fd-richtext-box { display: grid; gap: 0; min-width: 0; }\n.fd-richtext-box > .fd-richtext { border-start-start-radius: 0; border-start-end-radius: 0; }\n.fd-richtext-bar {\n  display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; min-width: 0;\n  border: 1px solid var(--fd-border); border-block-end: none; border-start-start-radius: var(--fd-control-radius); border-start-end-radius: var(--fd-control-radius);\n  background: var(--fd-page);\n}\n.fd-richtext-style { font: inherit; font-size: 12.5px; padding: 3px 6px; margin-inline-end: 4px; border: 1px solid var(--fd-border); border-radius: 4px; background: var(--fd-surface); color: var(--fd-text); }\n.fd-richtext-tool {\n  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 4px;\n  background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 14px;\n}\n.fd-richtext-tool:hover { background: var(--fd-surface); }\n.fd-richtext-tool[aria-pressed=\"true\"] { background: var(--fd-accent-soft); color: var(--fd-accent); }\n.fd-richtext-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }\n.fd-richtext-tool svg circle { fill: currentColor; stroke: none; }\n.fd-link-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--fd-border); border-block-end: none; background: var(--fd-surface); }\n.fd-link-row > .fd-input { flex: 1 1 200px; min-width: 0; }\n.fd-richtext[contenteditable=\"false\"] { background: transparent; border-color: transparent; padding-inline: 0; min-height: 0; }\n.fd-richtext p { margin: 0 0 6px; }\n.fd-code { font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; font-size: 12.5px; min-height: 96px; }\n\n/* ---- sections, tabs ---------------------------------------------------- */\n.fd-sections { display: grid; gap: 24px; }\n.fd-section { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }\n.fd-section-title { font-size: 15px; font-weight: 650; padding: 0; margin: 0; float: inline-start; width: 100%; }\n.fd-section-title + * { clear: both; }\n.fd-form[data-fd-skin=\"underline\"] .fd-section-title {\n  text-transform: uppercase; letter-spacing: 0.05em; font-size: 12.5px; color: var(--fd-muted);\n  border-block-end: 1px solid var(--fd-border); padding-block-end: 6px; width: 100%;\n}\n.fd-section-description { color: var(--fd-muted); margin: 0; }\n.fd-section-toggle {\n  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;\n  display: inline-flex; align-items: center; gap: 8px; text-align: start;\n}\n.fd-section-toggle:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n.fd-section-chevron {\n  width: 0.5em; height: 0.5em; border: solid currentColor; border-width: 0 2px 2px 0;\n  transform: rotate(45deg); margin-block-start: -0.2em; transition: transform 0.15s ease; flex: none;\n}\n.fd-section-folded .fd-section-chevron { transform: rotate(-45deg); margin-block-start: 0; }\n[dir=\"rtl\"] .fd-section-folded .fd-section-chevron { transform: rotate(135deg); }\n.fd-form[data-fd-skin=\"outlined\"] .fd-sections > .fd-section {\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 20px 24px;\n}\n.fd-tablist { display: flex; gap: 2px; border-block-end: 1px solid var(--fd-border); overflow-x: auto; }\n.fd-tab {\n  font: inherit; background: none; border: none; cursor: pointer; padding: 8px 14px; color: var(--fd-muted);\n  border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap;\n}\n.fd-tab[aria-selected=\"true\"] { color: var(--fd-accent); border-block-end-color: var(--fd-accent); font-weight: 600; }\n.fd-tabpanel { padding-block: 16px; display: grid; gap: 16px; }\n\n/* ---- buttons ---------------------------------------------------------- */\n.fd-button {\n  font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; justify-content: center;\n  min-height: 32px; padding: 4px 14px; border-radius: var(--fd-control-radius);\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text);\n}\n.fd-button:hover { border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-button-primary { background: var(--fd-accent); border-color: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-button-primary:hover { color: var(--fd-accent-text); filter: brightness(1.12); }\n.fd-button-danger { color: var(--fd-error); border-color: var(--fd-error); }\n.fd-button-danger:hover { background: var(--fd-error); color: #fff; }\n.fd-button-link { border-color: transparent; background: none; color: var(--fd-accent); padding-inline: 4px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-button { border-radius: 3px; }\n.fd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.fd-actions-end { justify-content: flex-end; margin-block-start: 24px; }\n\n/* ---- record sheet --------------------------------------------------------- */\n.fd-sheet-page { background: var(--fd-page); padding: 0 0 32px; min-width: 0; }\n.fd-header {\n  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;\n  background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); padding: 8px 16px;\n}\n.fd-statusbar { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; }\n.fd-statusbar li { display: flex; }\n.fd-statusbar button, .fd-statusbar span {\n  font: inherit; font-size: 13px; border: none; background: var(--fd-page); color: var(--fd-muted);\n  padding: 5px 18px 5px 22px; margin-inline-start: -6px; white-space: nowrap;\n  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);\n}\n.fd-statusbar li:first-child button, .fd-statusbar li:first-child span { margin-inline-start: 0; padding-inline-start: 14px;\n  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }\n.fd-statusbar button { cursor: pointer; }\n.fd-statusbar [aria-current=\"step\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n[dir=\"rtl\"] .fd-statusbar button, [dir=\"rtl\"] .fd-statusbar span { transform: scaleX(-1); }\n[dir=\"rtl\"] .fd-statusbar button > *, [dir=\"rtl\"] .fd-statusbar span > * { display: inline-block; transform: scaleX(-1); }\n.fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: var(--fd-page-max, 1180px); margin: 16px auto 0; padding-inline: 16px; }\n/* Save and Discard closing the sheet, when the page puts them at its foot. */\n.fd-sheet-foot { margin: 4px -28px -28px; padding: 12px 28px; border-block-start: 1px solid var(--fd-border); border-end-start-radius: inherit; border-end-end-radius: inherit; }\n.fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }\n@container (max-width: 860px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }\n.fd-card {\n  position: relative; background: var(--fd-surface); border: 1px solid var(--fd-border);\n  border-radius: var(--fd-radius); padding: 24px 28px 28px; display: grid; gap: 18px; min-width: 0;\n}\n.fd-ribbon-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }\n.fd-ribbon {\n  position: absolute; inset-block-start: 18px; inset-inline-end: -42px; transform: rotate(45deg); width: 160px;\n  text-align: center; font-size: 12px; font-weight: 700; padding: 4px 0; color: #fff; background: var(--fd-muted);\n  text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none;\n}\n[dir=\"rtl\"] .fd-ribbon { transform: rotate(-45deg); }\n.fd-ribbon.fd-tone-danger { background: var(--fd-error); }\n.fd-ribbon.fd-tone-success { background: var(--fd-success); }\n.fd-ribbon.fd-tone-warning { background: #d97706; }\n.fd-ribbon.fd-tone-info { background: var(--fd-info); }\n.fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; }\n.fd-alert-message { flex: 1 1 auto; min-width: 0; }\n.fd-alert-close { border: none; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 4px; opacity: 0.75; }\n.fd-alert-close:hover { opacity: 1; }\n.fd-alert-close:focus-visible { outline: 2px solid var(--fd-focus); opacity: 1; }\n.fd-alert.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-alert.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-alert.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-alert.fd-tone-info, .fd-alert:not([class*=\"fd-tone-\"]) { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; margin: -24px -28px 0; border-block-end: 1px solid var(--fd-border); }\n.fd-stats:empty { display: none; }\n/* A visible ribbon owns the corner: stat buttons keep clear of it. */\n.fd-card:has(> .fd-ribbon-frame > .fd-ribbon:not([hidden])) .fd-stats { padding-inline-end: 104px; }\n.fd-stat {\n  font: inherit; background: none; border: none; border-inline-start: 1px solid var(--fd-border); cursor: pointer;\n  padding: 8px 18px; display: grid; justify-items: start; line-height: 1.2; color: var(--fd-text); min-width: 120px;\n}\n.fd-stat:hover { background: var(--fd-page); }\n.fd-stat:has(> .fd-icon) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }\n.fd-stat > .fd-icon { width: 22px; height: 22px; color: var(--fd-muted); }\n.fd-stat-words { display: grid; justify-items: start; }\n.fd-stat-value { font-weight: 700; font-size: 15px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }\n.fd-stat-label { font-size: 12.5px; color: var(--fd-muted); }\n.fd-title-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }\n.fd-title { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }\n.fd-avatar { flex: none; }\n.fd-avatar > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-avatar > * { grid-column: 1 !important; }\n.fd-avatar .fd-image-pick {\n  width: 120px; height: 120px; border: 1px dashed var(--fd-border-strong); border-radius: var(--fd-control-radius);\n  display: grid; place-content: center; justify-items: center; text-align: center; padding: 8px; background: var(--fd-page);\n}\n.fd-image-pick .fd-button { border: none; background: none; color: var(--fd-accent); padding: 0; min-height: 0; }\n.fd-image-pick:hover { border-color: var(--fd-accent); }\n.fd-avatar .fd-image-pick { width: 88px; height: 88px; }\n.fd-image-preview { width: 88px; height: 88px; }\n.fd-avatar .fd-file-pick .fd-help { display: none; }\n.fd-avatar .fd-file-name { display: none; }\n.fd-avatar .fd-file { justify-items: center; gap: 2px; padding: 0; }\n.fd-avatar .fd-file-chosen { gap: 2px 8px; justify-content: center; font-size: 12.5px; }\n/* The title and subtitle themselves: big, their labels only for screen readers. */\n.fd-title > .fd-field .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }\n.fd-form[data-fd-skin=\"underline\"] .fd-title > .fd-field { grid-template-columns: minmax(0, 1fr); }\n.fd-form[data-fd-skin=\"underline\"] .fd-title > .fd-field > * { grid-column: 1; }\n.fd-title > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n/* Fields over and under the title: one row, each label beside its control. */\n.fd-title-above, .fd-title-below { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }\n.fd-title-above { margin-block-end: 4px; }\n.fd-title-below { margin-block-start: 6px; }\n.fd-form .fd-title-above > .fd-field, .fd-form .fd-title-below > .fd-field { display: flex; align-items: center; gap: 8px; grid-template-columns: none; }\n.fd-form .fd-title-above > .fd-field > *, .fd-form .fd-title-below > .fd-field > * { grid-column: auto !important; }\n.fd-title-above .fd-label:empty, .fd-title-below .fd-label:empty { display: none; }\n/* A choice over the title, such as Individual or Company, speaks for itself: its label is for screen readers. */\n.fd-title-above > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.fd-title-statusbar { display: flex; }\n/* Badges over the title. */\n.fd-badges { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-badge {\n  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 10px;\n  border-radius: 999px; border: 1px solid var(--fd-border); background: var(--fd-page); color: var(--fd-muted);\n}\n.fd-badge .fd-icon { width: 13px; height: 13px; }\n.fd-badge.fd-tone-info { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }\n.fd-badge.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }\n.fd-badge.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }\n.fd-badge.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }\n.fd-side { display: grid; gap: 12px; align-content: start; min-width: 0; }\n\n/* ---- wizard -------------------------------------------------------------- */\n.fd-wizard { display: grid; gap: 20px; }\n.fd-progress { display: grid; gap: 8px; }\n.fd-progress-text { color: var(--fd-muted); font-size: 13px; }\n.fd-value-text { display: block; padding-block: 6px; font-variant-numeric: tabular-nums; }\n.fd-date-pick { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }\n.fd-date-pick > .fd-input { flex: 1 1 auto; min-width: 0; }\n.fd-calendar-button {\n  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;\n  border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-surface); color: var(--fd-muted);\n}\n.fd-calendar-button:hover, .fd-calendar-button[aria-expanded=\"true\"] { color: var(--fd-text); background: var(--fd-page); }\n.fd-calendar-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }\n.fd-calendar {\n  position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0; z-index: 30; padding: 8px;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 6px);\n  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.14);\n}\n.fd-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; }\n.fd-calendar-head button { border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 4px; color: var(--fd-text); }\n.fd-calendar-head button:hover { background: var(--fd-page); }\n.fd-calendar-title { font-weight: 600; }\n.fd-calendar-grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }\n.fd-calendar-grid th { font-size: 11.5px; font-weight: 600; color: var(--fd-muted); padding: 4px 0; width: 34px; text-align: center; }\n.fd-calendar-grid .fd-week { color: var(--fd-accent); font-weight: 600; border-inline-end: 1px solid var(--fd-border); }\n.fd-calendar-grid td { padding: 1px; }\n.fd-calendar-grid td button {\n  width: 32px; height: 30px; border: none; border-radius: 4px; background: none; cursor: pointer; color: var(--fd-text); font: inherit; font-size: 13px;\n}\n.fd-calendar-grid td button:hover { background: var(--fd-accent-soft); }\n.fd-calendar-grid td button.fd-outside { color: var(--fd-muted); opacity: 0.6; }\n.fd-calendar-grid td button[aria-current=\"date\"] { box-shadow: inset 0 0 0 1px var(--fd-accent); }\n.fd-calendar-grid td button[aria-selected=\"true\"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }\n.fd-calendar-grid td button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-properties { display: grid; gap: 8px; min-width: 0; }\n.fd-property { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }\n.fd-property > label { color: var(--fd-muted); font-size: 13px; }\n.fd-property[data-type=\"boolean\"] > :last-child { justify-self: start; }\n@container (max-width: 520px) { .fd-property { grid-template-columns: minmax(0, 1fr); gap: 4px; } }\n.fd-progressbar {\n  position: relative; height: 22px; min-width: 120px; border-radius: 999px; overflow: hidden;\n  background: var(--fd-page); border: 1px solid var(--fd-border); font-variant-numeric: tabular-nums;\n}\n.fd-progressbar-fill { height: 100%; background: var(--fd-success); transition: width 0.2s ease; }\n.fd-progressbar[data-tone=\"warning\"] .fd-progressbar-fill { background: #d97706; }\n.fd-progressbar[data-tone=\"danger\"] .fd-progressbar-fill { background: var(--fd-error); }\n.fd-progressbar[data-tone=\"info\"] .fd-progressbar-fill { background: var(--fd-info); }\n.fd-progressbar-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--fd-text); }\n.fd-progressbar-edit { display: flex; align-items: center; gap: 12px; min-width: 0; }\n.fd-progressbar-edit > .fd-progressbar { flex: 1 1 auto; }\n.fd-progressbar-edit > .fd-input { flex: 0 0 96px; }\n.fd-progress-bar { height: 4px; background: var(--fd-border); border-radius: 999px; overflow: hidden; }\n.fd-progress-bar > span { display: block; height: 100%; background: var(--fd-accent); transition: width 0.25s ease; }\n.fd-step { display: grid; gap: 18px; }\n.fd-step-title { font-size: 18px; font-weight: 650; margin: 0; }\n.fd-wizard-nav { display: flex; gap: 8px; justify-content: space-between; }\n/* A clickable wizard's steps: numbered, the current one filled, those behind it ticked. */\n.fd-steps-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: fd-step; }\n.fd-steps-list > li { counter-increment: fd-step; }\n.fd-step-link {\n  font: inherit; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-muted); border-radius: 999px; padding: 4px 12px 4px 6px;\n}\n.fd-step-link::before {\n  content: counter(fd-step); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;\n  background: var(--fd-page); color: var(--fd-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;\n}\n.fd-step-link:hover { border-color: var(--fd-accent); color: var(--fd-text); }\n.fd-step-link:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-step-link.fd-step-done { color: var(--fd-text); }\n.fd-step-link.fd-step-done::before { content: \"\u2713\"; background: var(--fd-accent-soft); color: var(--fd-accent); }\n/* Skipped is not done: no tick, no colour. */\n.fd-step-link.fd-step-skipped { border-style: dashed; color: var(--fd-muted); }\n.fd-step-link.fd-step-skipped::before { content: \"\u2013\"; background: var(--fd-page); color: var(--fd-muted); }\n.fd-step-link[aria-current=\"step\"] { border-color: var(--fd-accent); color: var(--fd-accent); font-weight: 600; }\n.fd-step-link[aria-current=\"step\"]::before { content: counter(fd-step); background: var(--fd-accent); color: var(--fd-accent-text); }\n.fd-wizard-nav .fd-spacer { flex: 1; }\n\n/* ---- text, status, dialog ------------------------------------------------- */\n.fd-text-heading { font-size: 16px; font-weight: 650; margin: 0; }\n.fd-text-paragraph { margin: 0; }\n.fd-text-note { margin: 0; color: var(--fd-muted); font-size: 13px; }\n.fd-status { min-height: 1.4em; color: var(--fd-muted); font-size: 13px; }\n.fd-status.fd-status-error { color: var(--fd-error); }\n.fd-status.fd-status-saved { color: var(--fd-success); }\n.fd-draft { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; margin-block-end: 16px;\n  background: var(--fd-info-soft); border: 1px solid #a9c8ef; border-radius: var(--fd-control-radius); }\n.fd-done { padding: 40px 0; text-align: center; display: grid; gap: 12px; justify-items: center; }\n.fd-done-title { font-size: 20px; font-weight: 650; margin: 0; }\n.fd-dialog-backdrop { position: fixed; inset: 0; background: rgba(15, 20, 25, 0.45); display: grid; place-items: center; z-index: 1000; padding: 16px; }\n.fd-dialog {\n  background: var(--fd-surface); color: var(--fd-text); border-radius: max(var(--fd-radius), 6px); max-width: 420px; width: 100%;\n  padding: 20px 22px; display: grid; gap: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: var(--fd-font);\n}\n.fd-dialog p { margin: 0; }\n/* A page in a dialog: a head with its title and \u00D7, a body that scrolls, a foot with Discard and Save & Close. */\n.fd-form-dialog {\n  display: flex; flex-direction: column; width: 100%; max-height: min(90vh, 100%); min-height: 0;\n  background: var(--fd-page); color: var(--fd-text); border-radius: max(var(--fd-radius), 8px);\n  box-shadow: 0 24px 64px rgba(15, 20, 25, 0.3); overflow: hidden;\n}\n.fd-form-dialog:focus { outline: none; }\n.fd-form-dialog.fd-size-small { max-width: 440px; }\n.fd-form-dialog.fd-size-medium { max-width: 760px; }\n.fd-form-dialog.fd-size-large { max-width: 1080px; }\n.fd-form-dialog-backdrop:has(> .fd-size-full) { padding: 0; }\n.fd-form-dialog.fd-size-full { max-width: none; max-height: none; height: 100%; border-radius: 0; }\n.fd-form-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-block-end: 1px solid var(--fd-border); background: var(--fd-surface); }\n.fd-form-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }\n.fd-dialog-close { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 4px; color: var(--fd-muted); }\n.fd-dialog-close:hover { background: var(--fd-page); color: var(--fd-text); }\n.fd-form-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; container-type: inline-size; }\n.fd-form-dialog-body .fd-sheet-layout { margin-block-start: 12px; }\n/* The dialog's head names the page; a record in a dialog leaves its side panel (the chatter) to the full page. */\n.fd-form-dialog-body .fd-page-title { display: none; }\n.fd-form-dialog-body .fd-page-head:not(:has(.fd-page-description)) { display: none; }\n.fd-form-dialog-body .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); }\n.fd-form-dialog-body .fd-side { display: none; }\n/* Search more\u2026: a search box over a list of rows. */\n.fd-search-body { display: grid; gap: 12px; align-content: start; }\n.fd-search-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); overflow: auto; max-height: min(60vh, 520px); }\n.fd-search-list .fd-option { padding: 8px 12px; }\n.fd-search-list .fd-option + .fd-option { border-block-start: 1px solid var(--fd-border); }\n.fd-search-list .fd-empty { padding: 10px 12px; color: var(--fd-muted); }\n/* A page with no sheet of its own sits on the dialog's surface, clear of its edges. */\n.fd-form-dialog-body:not(:has(.fd-sheet-layout)) { background: var(--fd-surface); padding: 16px 20px 20px; }\n.fd-form-dialog-foot { padding: 12px 16px; border-block-start: 1px solid var(--fd-border); background: var(--fd-surface); margin: 0; }\n@media (prefers-reduced-motion: reduce) { .fd-form *, .fd-form *::before, .fd-form *::after { transition: none !important; } }\n";
 /** Add Fieldia's stylesheet to a document, once. */
 export declare function installStyles(document: Document): void;

package/src/lib/styles.js

@@ -82,6 +82,19 @@ exports.FIELDIA_CSS = `
 .fd-page-title { font-size: 22px; font-weight: 650; margin: 0; line-height: 1.25; }
 .fd-page-description { color: var(--fd-muted); margin: 0; }
 
+/* ---- how wide a page goes, and Save above its sections ----------------------- */
+.fd-form[data-max-width="narrow"] { --fd-page-max: 640px; }
+.fd-form[data-max-width="medium"] { --fd-page-max: 900px; }
+.fd-form[data-max-width="wide"] { --fd-page-max: 1180px; }
+.fd-form[data-max-width="full"] { --fd-page-max: none; }
+.fd-form[data-max-width] > .fd-content:not(:has(> .fd-sheet-page)) { max-width: var(--fd-page-max); margin-inline: auto; }
+.fd-actions.fd-actions-top { margin-block-start: 0; padding-block-end: 14px; margin-block-end: 18px; border-block-end: 1px solid var(--fd-border); }
+
+/* ---- icons: drawn with lines in the colour of the words beside them ------------ */
+.fd-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
+.fd-section-title .fd-icon, .fd-tab .fd-icon, .fd-button .fd-icon, .fd-step-title .fd-icon { margin-inline-end: 0.4em; }
+.fd-section-title .fd-icon { color: var(--fd-muted); }
+
 /* ---- fields ---------------------------------------------------------------- */
 .fd-grid {
   display: grid;
@@ -117,12 +130,21 @@ exports.FIELDIA_CSS = `
 @container (max-width: 760px) {
   .fd-form[data-fd-skin="underline"] .fd-grid { grid-template-columns: minmax(0, 1fr); }
   .fd-form[data-fd-skin="underline"] .fd-field { grid-column: auto; }
+  /* A section that says how many columns it keeps here keeps them, in either skin. */
+  .fd-form .fd-grid[data-columns-medium] { grid-template-columns: repeat(var(--fd-columns-medium), minmax(0, 1fr)); }
+  .fd-form .fd-grid[data-columns-medium] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-medium)); }
+  /* Kept side by side here, the underline skin's fields have no room for a label beside: it goes above. */
+  .fd-form[data-fd-skin="underline"] .fd-grid[data-columns-medium]:not([data-columns-medium="1"]) .fd-field { grid-template-columns: minmax(0, 1fr); }
+  .fd-form[data-fd-skin="underline"] .fd-grid[data-columns-medium]:not([data-columns-medium="1"]) .fd-field > * { grid-column: 1 !important; }
 }
 @container (max-width: 520px) {
   .fd-grid { grid-template-columns: minmax(0, 1fr); }
   .fd-field { grid-column: auto; }
   .fd-form[data-fd-skin="underline"] .fd-field { grid-template-columns: minmax(0, 1fr); }
   .fd-form[data-fd-skin="underline"] .fd-field > * { grid-column: 1 !important; }
+  /* The narrow count, or one column when only the medium one was given. */
+  .fd-form .fd-grid[data-columns-medium], .fd-form .fd-grid[data-columns-narrow] { grid-template-columns: repeat(var(--fd-columns-narrow, 1), minmax(0, 1fr)); }
+  .fd-form .fd-grid[data-columns-medium] > .fd-field, .fd-form .fd-grid[data-columns-narrow] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-narrow, 1)); }
 }
 
 /* ---- inputs ---------------------------------------------------------------- */
@@ -351,7 +373,9 @@ exports.FIELDIA_CSS = `
 .fd-statusbar [aria-current="step"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }
 [dir="rtl"] .fd-statusbar button, [dir="rtl"] .fd-statusbar span { transform: scaleX(-1); }
 [dir="rtl"] .fd-statusbar button > *, [dir="rtl"] .fd-statusbar span > * { display: inline-block; transform: scaleX(-1); }
-.fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1180px; margin: 16px auto 0; padding-inline: 16px; }
+.fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: var(--fd-page-max, 1180px); margin: 16px auto 0; padding-inline: 16px; }
+/* Save and Discard closing the sheet, when the page puts them at its foot. */
+.fd-sheet-foot { margin: 4px -28px -28px; padding: 12px 28px; border-block-start: 1px solid var(--fd-border); border-end-start-radius: inherit; border-end-end-radius: inherit; }
 .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
 @container (max-width: 860px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }
 .fd-card {
@@ -369,7 +393,11 @@ exports.FIELDIA_CSS = `
 .fd-ribbon.fd-tone-success { background: var(--fd-success); }
 .fd-ribbon.fd-tone-warning { background: #d97706; }
 .fd-ribbon.fd-tone-info { background: var(--fd-info); }
-.fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; }
+.fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; }
+.fd-alert-message { flex: 1 1 auto; min-width: 0; }
+.fd-alert-close { border: none; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 4px; opacity: 0.75; }
+.fd-alert-close:hover { opacity: 1; }
+.fd-alert-close:focus-visible { outline: 2px solid var(--fd-focus); opacity: 1; }
 .fd-alert.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }
 .fd-alert.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }
 .fd-alert.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }
@@ -383,6 +411,9 @@ exports.FIELDIA_CSS = `
   padding: 8px 18px; display: grid; justify-items: start; line-height: 1.2; color: var(--fd-text); min-width: 120px;
 }
 .fd-stat:hover { background: var(--fd-page); }
+.fd-stat:has(> .fd-icon) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }
+.fd-stat > .fd-icon { width: 22px; height: 22px; color: var(--fd-muted); }
+.fd-stat-words { display: grid; justify-items: start; }
 .fd-stat-value { font-weight: 700; font-size: 15px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }
 .fd-stat-label { font-size: 12.5px; color: var(--fd-muted); }
 .fd-title-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
@@ -403,10 +434,32 @@ exports.FIELDIA_CSS = `
 .fd-avatar .fd-file-name { display: none; }
 .fd-avatar .fd-file { justify-items: center; gap: 2px; padding: 0; }
 .fd-avatar .fd-file-chosen { gap: 2px 8px; justify-content: center; font-size: 12.5px; }
-.fd-title .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }
-.fd-form[data-fd-skin="underline"] .fd-title .fd-field { grid-template-columns: minmax(0, 1fr); }
-.fd-form[data-fd-skin="underline"] .fd-title .fd-field > * { grid-column: 1; }
-.fd-title .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+/* The title and subtitle themselves: big, their labels only for screen readers. */
+.fd-title > .fd-field .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }
+.fd-form[data-fd-skin="underline"] .fd-title > .fd-field { grid-template-columns: minmax(0, 1fr); }
+.fd-form[data-fd-skin="underline"] .fd-title > .fd-field > * { grid-column: 1; }
+.fd-title > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+/* Fields over and under the title: one row, each label beside its control. */
+.fd-title-above, .fd-title-below { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
+.fd-title-above { margin-block-end: 4px; }
+.fd-title-below { margin-block-start: 6px; }
+.fd-form .fd-title-above > .fd-field, .fd-form .fd-title-below > .fd-field { display: flex; align-items: center; gap: 8px; grid-template-columns: none; }
+.fd-form .fd-title-above > .fd-field > *, .fd-form .fd-title-below > .fd-field > * { grid-column: auto !important; }
+.fd-title-above .fd-label:empty, .fd-title-below .fd-label:empty { display: none; }
+/* A choice over the title, such as Individual or Company, speaks for itself: its label is for screen readers. */
+.fd-title-above > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-title-statusbar { display: flex; }
+/* Badges over the title. */
+.fd-badges { display: flex; flex-wrap: wrap; gap: 6px; }
+.fd-badge {
+  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 10px;
+  border-radius: 999px; border: 1px solid var(--fd-border); background: var(--fd-page); color: var(--fd-muted);
+}
+.fd-badge .fd-icon { width: 13px; height: 13px; }
+.fd-badge.fd-tone-info { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }
+.fd-badge.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }
+.fd-badge.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }
+.fd-badge.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }
 .fd-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
 
 /* ---- wizard -------------------------------------------------------------- */
@@ -465,6 +518,26 @@ exports.FIELDIA_CSS = `
 .fd-step { display: grid; gap: 18px; }
 .fd-step-title { font-size: 18px; font-weight: 650; margin: 0; }
 .fd-wizard-nav { display: flex; gap: 8px; justify-content: space-between; }
+/* A clickable wizard's steps: numbered, the current one filled, those behind it ticked. */
+.fd-steps-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: fd-step; }
+.fd-steps-list > li { counter-increment: fd-step; }
+.fd-step-link {
+  font: inherit; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
+  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-muted); border-radius: 999px; padding: 4px 12px 4px 6px;
+}
+.fd-step-link::before {
+  content: counter(fd-step); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
+  background: var(--fd-page); color: var(--fd-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
+}
+.fd-step-link:hover { border-color: var(--fd-accent); color: var(--fd-text); }
+.fd-step-link:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-step-link.fd-step-done { color: var(--fd-text); }
+.fd-step-link.fd-step-done::before { content: "✓"; background: var(--fd-accent-soft); color: var(--fd-accent); }
+/* Skipped is not done: no tick, no colour. */
+.fd-step-link.fd-step-skipped { border-style: dashed; color: var(--fd-muted); }
+.fd-step-link.fd-step-skipped::before { content: "–"; background: var(--fd-page); color: var(--fd-muted); }
+.fd-step-link[aria-current="step"] { border-color: var(--fd-accent); color: var(--fd-accent); font-weight: 600; }
+.fd-step-link[aria-current="step"]::before { content: counter(fd-step); background: var(--fd-accent); color: var(--fd-accent-text); }
 .fd-wizard-nav .fd-spacer { flex: 1; }
 
 /* ---- text, status, dialog ------------------------------------------------- */

package/src/lib/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles.ts"],"names":[],"mappings":";;;AAwgBA,sCAMC;AA9gBD;;;;;;;;;;;;GAYG;AACU,QAAA,WAAW,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsfpC,CAAC;AAEF,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC,oDAAoD;AACpD,SAAgB,aAAa,CAAC,QAAkB;IAC9C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,mBAAW,CAAC;IAChC,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles.ts"],"names":[],"mappings":";;;AAilBA,sCAMC;AAvlBD;;;;;;;;;;;;GAYG;AACU,QAAA,WAAW,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+jBpC,CAAC;AAEF,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC,oDAAoD;AACpD,SAAgB,aAAa,CAAC,QAAkB;IAC9C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,mBAAW,CAAC;IAChC,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}

package/src/lib/styles.mjs

@@ -78,6 +78,19 @@ export const FIELDIA_CSS = /* css */ `
 .fd-page-title { font-size: 22px; font-weight: 650; margin: 0; line-height: 1.25; }
 .fd-page-description { color: var(--fd-muted); margin: 0; }
 
+/* ---- how wide a page goes, and Save above its sections ----------------------- */
+.fd-form[data-max-width="narrow"] { --fd-page-max: 640px; }
+.fd-form[data-max-width="medium"] { --fd-page-max: 900px; }
+.fd-form[data-max-width="wide"] { --fd-page-max: 1180px; }
+.fd-form[data-max-width="full"] { --fd-page-max: none; }
+.fd-form[data-max-width] > .fd-content:not(:has(> .fd-sheet-page)) { max-width: var(--fd-page-max); margin-inline: auto; }
+.fd-actions.fd-actions-top { margin-block-start: 0; padding-block-end: 14px; margin-block-end: 18px; border-block-end: 1px solid var(--fd-border); }
+
+/* ---- icons: drawn with lines in the colour of the words beside them ------------ */
+.fd-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
+.fd-section-title .fd-icon, .fd-tab .fd-icon, .fd-button .fd-icon, .fd-step-title .fd-icon { margin-inline-end: 0.4em; }
+.fd-section-title .fd-icon { color: var(--fd-muted); }
+
 /* ---- fields ---------------------------------------------------------------- */
 .fd-grid {
   display: grid;
@@ -113,12 +126,21 @@ export const FIELDIA_CSS = /* css */ `
 @container (max-width: 760px) {
   .fd-form[data-fd-skin="underline"] .fd-grid { grid-template-columns: minmax(0, 1fr); }
   .fd-form[data-fd-skin="underline"] .fd-field { grid-column: auto; }
+  /* A section that says how many columns it keeps here keeps them, in either skin. */
+  .fd-form .fd-grid[data-columns-medium] { grid-template-columns: repeat(var(--fd-columns-medium), minmax(0, 1fr)); }
+  .fd-form .fd-grid[data-columns-medium] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-medium)); }
+  /* Kept side by side here, the underline skin's fields have no room for a label beside: it goes above. */
+  .fd-form[data-fd-skin="underline"] .fd-grid[data-columns-medium]:not([data-columns-medium="1"]) .fd-field { grid-template-columns: minmax(0, 1fr); }
+  .fd-form[data-fd-skin="underline"] .fd-grid[data-columns-medium]:not([data-columns-medium="1"]) .fd-field > * { grid-column: 1 !important; }
 }
 @container (max-width: 520px) {
   .fd-grid { grid-template-columns: minmax(0, 1fr); }
   .fd-field { grid-column: auto; }
   .fd-form[data-fd-skin="underline"] .fd-field { grid-template-columns: minmax(0, 1fr); }
   .fd-form[data-fd-skin="underline"] .fd-field > * { grid-column: 1 !important; }
+  /* The narrow count, or one column when only the medium one was given. */
+  .fd-form .fd-grid[data-columns-medium], .fd-form .fd-grid[data-columns-narrow] { grid-template-columns: repeat(var(--fd-columns-narrow, 1), minmax(0, 1fr)); }
+  .fd-form .fd-grid[data-columns-medium] > .fd-field, .fd-form .fd-grid[data-columns-narrow] > .fd-field { grid-column: span min(var(--fd-span, 1), var(--fd-columns-narrow, 1)); }
 }
 
 /* ---- inputs ---------------------------------------------------------------- */
@@ -347,7 +369,9 @@ export const FIELDIA_CSS = /* css */ `
 .fd-statusbar [aria-current="step"] { background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 600; }
 [dir="rtl"] .fd-statusbar button, [dir="rtl"] .fd-statusbar span { transform: scaleX(-1); }
 [dir="rtl"] .fd-statusbar button > *, [dir="rtl"] .fd-statusbar span > * { display: inline-block; transform: scaleX(-1); }
-.fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1180px; margin: 16px auto 0; padding-inline: 16px; }
+.fd-sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: var(--fd-page-max, 1180px); margin: 16px auto 0; padding-inline: 16px; }
+/* Save and Discard closing the sheet, when the page puts them at its foot. */
+.fd-sheet-foot { margin: 4px -28px -28px; padding: 12px 28px; border-block-start: 1px solid var(--fd-border); border-end-start-radius: inherit; border-end-end-radius: inherit; }
 .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
 @container (max-width: 860px) { .fd-sheet-layout.fd-has-side { grid-template-columns: minmax(0, 1fr); } }
 .fd-card {
@@ -365,7 +389,11 @@ export const FIELDIA_CSS = /* css */ `
 .fd-ribbon.fd-tone-success { background: var(--fd-success); }
 .fd-ribbon.fd-tone-warning { background: #d97706; }
 .fd-ribbon.fd-tone-info { background: var(--fd-info); }
-.fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; }
+.fd-alert { padding: 10px 14px; border-radius: var(--fd-control-radius); border: 1px solid; font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; }
+.fd-alert-message { flex: 1 1 auto; min-width: 0; }
+.fd-alert-close { border: none; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 4px; opacity: 0.75; }
+.fd-alert-close:hover { opacity: 1; }
+.fd-alert-close:focus-visible { outline: 2px solid var(--fd-focus); opacity: 1; }
 .fd-alert.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }
 .fd-alert.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }
 .fd-alert.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }
@@ -379,6 +407,9 @@ export const FIELDIA_CSS = /* css */ `
   padding: 8px 18px; display: grid; justify-items: start; line-height: 1.2; color: var(--fd-text); min-width: 120px;
 }
 .fd-stat:hover { background: var(--fd-page); }
+.fd-stat:has(> .fd-icon) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }
+.fd-stat > .fd-icon { width: 22px; height: 22px; color: var(--fd-muted); }
+.fd-stat-words { display: grid; justify-items: start; }
 .fd-stat-value { font-weight: 700; font-size: 15px; color: var(--fd-accent); font-variant-numeric: tabular-nums; }
 .fd-stat-label { font-size: 12.5px; color: var(--fd-muted); }
 .fd-title-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
@@ -399,10 +430,32 @@ export const FIELDIA_CSS = /* css */ `
 .fd-avatar .fd-file-name { display: none; }
 .fd-avatar .fd-file { justify-items: center; gap: 2px; padding: 0; }
 .fd-avatar .fd-file-chosen { gap: 2px 8px; justify-content: center; font-size: 12.5px; }
-.fd-title .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }
-.fd-form[data-fd-skin="underline"] .fd-title .fd-field { grid-template-columns: minmax(0, 1fr); }
-.fd-form[data-fd-skin="underline"] .fd-title .fd-field > * { grid-column: 1; }
-.fd-title .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+/* The title and subtitle themselves: big, their labels only for screen readers. */
+.fd-title > .fd-field .fd-input { font-size: 24px; font-weight: 600; min-height: 40px; }
+.fd-form[data-fd-skin="underline"] .fd-title > .fd-field { grid-template-columns: minmax(0, 1fr); }
+.fd-form[data-fd-skin="underline"] .fd-title > .fd-field > * { grid-column: 1; }
+.fd-title > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+/* Fields over and under the title: one row, each label beside its control. */
+.fd-title-above, .fd-title-below { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
+.fd-title-above { margin-block-end: 4px; }
+.fd-title-below { margin-block-start: 6px; }
+.fd-form .fd-title-above > .fd-field, .fd-form .fd-title-below > .fd-field { display: flex; align-items: center; gap: 8px; grid-template-columns: none; }
+.fd-form .fd-title-above > .fd-field > *, .fd-form .fd-title-below > .fd-field > * { grid-column: auto !important; }
+.fd-title-above .fd-label:empty, .fd-title-below .fd-label:empty { display: none; }
+/* A choice over the title, such as Individual or Company, speaks for itself: its label is for screen readers. */
+.fd-title-above > .fd-field > .fd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-title-statusbar { display: flex; }
+/* Badges over the title. */
+.fd-badges { display: flex; flex-wrap: wrap; gap: 6px; }
+.fd-badge {
+  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 10px;
+  border-radius: 999px; border: 1px solid var(--fd-border); background: var(--fd-page); color: var(--fd-muted);
+}
+.fd-badge .fd-icon { width: 13px; height: 13px; }
+.fd-badge.fd-tone-info { background: var(--fd-info-soft); border-color: #a9c8ef; color: var(--fd-info); }
+.fd-badge.fd-tone-success { background: var(--fd-success-soft); border-color: #a7d7ab; color: var(--fd-success); }
+.fd-badge.fd-tone-warning { background: var(--fd-warning-soft); border-color: #f0c47a; color: var(--fd-warning); }
+.fd-badge.fd-tone-danger { background: var(--fd-error-soft); border-color: #f1a7a7; color: var(--fd-error); }
 .fd-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
 
 /* ---- wizard -------------------------------------------------------------- */
@@ -461,6 +514,26 @@ export const FIELDIA_CSS = /* css */ `
 .fd-step { display: grid; gap: 18px; }
 .fd-step-title { font-size: 18px; font-weight: 650; margin: 0; }
 .fd-wizard-nav { display: flex; gap: 8px; justify-content: space-between; }
+/* A clickable wizard's steps: numbered, the current one filled, those behind it ticked. */
+.fd-steps-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: fd-step; }
+.fd-steps-list > li { counter-increment: fd-step; }
+.fd-step-link {
+  font: inherit; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
+  border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-muted); border-radius: 999px; padding: 4px 12px 4px 6px;
+}
+.fd-step-link::before {
+  content: counter(fd-step); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
+  background: var(--fd-page); color: var(--fd-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
+}
+.fd-step-link:hover { border-color: var(--fd-accent); color: var(--fd-text); }
+.fd-step-link:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-step-link.fd-step-done { color: var(--fd-text); }
+.fd-step-link.fd-step-done::before { content: "✓"; background: var(--fd-accent-soft); color: var(--fd-accent); }
+/* Skipped is not done: no tick, no colour. */
+.fd-step-link.fd-step-skipped { border-style: dashed; color: var(--fd-muted); }
+.fd-step-link.fd-step-skipped::before { content: "–"; background: var(--fd-page); color: var(--fd-muted); }
+.fd-step-link[aria-current="step"] { border-color: var(--fd-accent); color: var(--fd-accent); font-weight: 600; }
+.fd-step-link[aria-current="step"]::before { content: counter(fd-step); background: var(--fd-accent); color: var(--fd-accent-text); }
 .fd-wizard-nav .fd-spacer { flex: 1; }
 
 /* ---- text, status, dialog ------------------------------------------------- */

package/src/lib/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsfpC,CAAC;AAEF,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC,oDAAoD;AACpD,MAAM,UAAU,aAAa,CAAC,QAAkB;IAC9C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;IAChC,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+jBpC,CAAC;AAEF,MAAM,QAAQ,GAAG,gBAAgB,CAAC;AAElC,oDAAoD;AACpD,MAAM,UAAU,aAAa,CAAC,QAAkB;IAC9C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;IAChC,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}