@fieldia/widgets 0.11.0 → 0.13.0

package/src/lib/layout-styles.js

@@ -84,7 +84,9 @@ fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
 /* A note: words set apart in a soft panel, a shade off whatever it stands on — a card, the page, or the dark. */
 .fd-form .fd-text-note { background: color-mix(in srgb, var(--fd-text) 6%, transparent); color: var(--fd-text); border-radius: var(--fd-control-radius, 6px); padding: 10px 12px; }
 
-/* ---- the page's look: worn by the form, and by a dialog it opens (its box and the page in it) ---- */
+/* ---- the page's look: worn by the form, and by a dialog it opens (its box and the page in it) ----
+   Its tokens in Fieldia's tokens' layer (styles.ts): a host's own rule sets them over the page's. */
+@layer fieldia-tokens {
 :is(.fd-form, .fd-form-dialog)[data-font="serif"] { --fd-font: "Source Serif 4", Georgia, serif; }
 :is(.fd-form, .fd-form-dialog)[data-font="rounded"] { --fd-font: Nunito, "Varela Round", system-ui; }
 /* Room between and inside parts: gaps, the height of a box, a group's padding, the space between groups. */
@@ -94,15 +96,20 @@ fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
 :is(.fd-form, .fd-form-dialog)[data-corners="square"] { --fd-radius: 0px; --fd-control-radius: 0px; }
 :is(.fd-form, .fd-form-dialog)[data-corners="soft"] { --fd-radius: 10px; --fd-control-radius: 6px; }
 :is(.fd-form, .fd-form-dialog)[data-corners="round"] { --fd-radius: 16px; --fd-control-radius: 12px; }
+.fd-form[data-scheme] { --fd-ground: var(--fd-page); }
+}
 
-/* Light or dark: a page that names its scheme paints its own ground, so it reads the same on any page round it. */
-.fd-form[data-scheme] { color-scheme: light; background: var(--fd-page); color: var(--fd-text); border-radius: var(--fd-radius); --fd-ground: var(--fd-page); }
+/* Light or dark: a page that names its scheme paints its own ground, so it reads the same on any page round it.
+   Its native controls (scroll bars, date pickers) follow it. */
+.fd-form[data-scheme] { color-scheme: light; background: var(--fd-page); color: var(--fd-text); border-radius: var(--fd-radius); }
+:is(.fd-form, .fd-form-dialog)[data-scheme="dark"] { color-scheme: dark; }
+@media (prefers-color-scheme: dark) { :is(.fd-form, .fd-form-dialog)[data-scheme="auto"] { color-scheme: dark; } }
 .fd-form[data-scheme] > .fd-content:not(:has(> .fd-sheet-page)) { padding: 20px; }
 /* A page in a dialog paints no ground of its own and adds no room: the dialog is its ground. */
 .fd-form-dialog-body > .fd-form[data-scheme] { background: none; border-radius: 0; }
 .fd-form-dialog-body > .fd-form[data-scheme] > .fd-content:not(:has(> .fd-sheet-page)) { padding: 0; }
+@layer fieldia-tokens {
 :is(.fd-form, .fd-form-dialog)[data-scheme="dark"] {
-  color-scheme: dark;
   --fd-text: #e8eaed;
   --fd-muted: #a3a9b2;
   --fd-page: #16191e;
@@ -126,7 +133,6 @@ fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
 /* Auto follows the reader's system: the same dark tokens, when it is dark. */
 @media (prefers-color-scheme: dark) {
   :is(.fd-form, .fd-form-dialog)[data-scheme="auto"] {
-    color-scheme: dark;
     --fd-text: #e8eaed;
     --fd-muted: #a3a9b2;
     --fd-page: #16191e;
@@ -171,6 +177,7 @@ fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
   }
 }
 :is(.fd-form, .fd-form-dialog)[data-fd-skin="outlined"][data-accent] { --fd-focus-ring: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 22%, transparent); }
+}
 :is(.fd-form, .fd-form-dialog)[data-accent] .fd-button-primary:hover { filter: none; background: var(--fd-accent-hover); border-color: var(--fd-accent-hover); }
 /* A band of the accent under the page's title. */
 .fd-form[data-accent] .fd-page-head { border-block-end: 3px solid var(--fd-accent); padding-block-end: 14px; }

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

@@ -1 +1 @@
-{"version":3,"file":"layout-styles.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/layout-styles.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;GASG;AACU,QAAA,UAAU,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKnC,CAAC"}
+{"version":3,"file":"layout-styles.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/layout-styles.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;GASG;AACU,QAAA,UAAU,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0KnC,CAAC"}

package/src/lib/layout-styles.mjs

@@ -81,7 +81,9 @@ fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
 /* A note: words set apart in a soft panel, a shade off whatever it stands on — a card, the page, or the dark. */
 .fd-form .fd-text-note { background: color-mix(in srgb, var(--fd-text) 6%, transparent); color: var(--fd-text); border-radius: var(--fd-control-radius, 6px); padding: 10px 12px; }
 
-/* ---- the page's look: worn by the form, and by a dialog it opens (its box and the page in it) ---- */
+/* ---- the page's look: worn by the form, and by a dialog it opens (its box and the page in it) ----
+   Its tokens in Fieldia's tokens' layer (styles.ts): a host's own rule sets them over the page's. */
+@layer fieldia-tokens {
 :is(.fd-form, .fd-form-dialog)[data-font="serif"] { --fd-font: "Source Serif 4", Georgia, serif; }
 :is(.fd-form, .fd-form-dialog)[data-font="rounded"] { --fd-font: Nunito, "Varela Round", system-ui; }
 /* Room between and inside parts: gaps, the height of a box, a group's padding, the space between groups. */
@@ -91,15 +93,20 @@ fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
 :is(.fd-form, .fd-form-dialog)[data-corners="square"] { --fd-radius: 0px; --fd-control-radius: 0px; }
 :is(.fd-form, .fd-form-dialog)[data-corners="soft"] { --fd-radius: 10px; --fd-control-radius: 6px; }
 :is(.fd-form, .fd-form-dialog)[data-corners="round"] { --fd-radius: 16px; --fd-control-radius: 12px; }
+.fd-form[data-scheme] { --fd-ground: var(--fd-page); }
+}
 
-/* Light or dark: a page that names its scheme paints its own ground, so it reads the same on any page round it. */
-.fd-form[data-scheme] { color-scheme: light; background: var(--fd-page); color: var(--fd-text); border-radius: var(--fd-radius); --fd-ground: var(--fd-page); }
+/* Light or dark: a page that names its scheme paints its own ground, so it reads the same on any page round it.
+   Its native controls (scroll bars, date pickers) follow it. */
+.fd-form[data-scheme] { color-scheme: light; background: var(--fd-page); color: var(--fd-text); border-radius: var(--fd-radius); }
+:is(.fd-form, .fd-form-dialog)[data-scheme="dark"] { color-scheme: dark; }
+@media (prefers-color-scheme: dark) { :is(.fd-form, .fd-form-dialog)[data-scheme="auto"] { color-scheme: dark; } }
 .fd-form[data-scheme] > .fd-content:not(:has(> .fd-sheet-page)) { padding: 20px; }
 /* A page in a dialog paints no ground of its own and adds no room: the dialog is its ground. */
 .fd-form-dialog-body > .fd-form[data-scheme] { background: none; border-radius: 0; }
 .fd-form-dialog-body > .fd-form[data-scheme] > .fd-content:not(:has(> .fd-sheet-page)) { padding: 0; }
+@layer fieldia-tokens {
 :is(.fd-form, .fd-form-dialog)[data-scheme="dark"] {
-  color-scheme: dark;
   --fd-text: #e8eaed;
   --fd-muted: #a3a9b2;
   --fd-page: #16191e;
@@ -123,7 +130,6 @@ fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
 /* Auto follows the reader's system: the same dark tokens, when it is dark. */
 @media (prefers-color-scheme: dark) {
   :is(.fd-form, .fd-form-dialog)[data-scheme="auto"] {
-    color-scheme: dark;
     --fd-text: #e8eaed;
     --fd-muted: #a3a9b2;
     --fd-page: #16191e;
@@ -168,6 +174,7 @@ fieldset.fd-section[data-style] { background-color: var(--fd-ground); }
   }
 }
 :is(.fd-form, .fd-form-dialog)[data-fd-skin="outlined"][data-accent] { --fd-focus-ring: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 22%, transparent); }
+}
 :is(.fd-form, .fd-form-dialog)[data-accent] .fd-button-primary:hover { filter: none; background: var(--fd-accent-hover); border-color: var(--fd-accent-hover); }
 /* A band of the accent under the page's title. */
 .fd-form[data-accent] .fd-page-head { border-block-end: 3px solid var(--fd-accent); padding-block-end: 14px; }

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

@@ -1 +1 @@
-{"version":3,"file":"layout-styles.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/layout-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKnC,CAAC"}
+{"version":3,"file":"layout-styles.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/layout-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0KnC,CAAC"}

package/src/lib/lines.d.mts

@@ -1,7 +1,17 @@
-import { type Form, type LineField } from '@fieldia/core';
-import { type WidgetFactory } from './widgets.mjs';
+import { type FieldNode, type Form, type Line, type LineField, type Values } from '@fieldia/core';
+import { type WidgetDialogs, type WidgetFactory } from './widgets.mjs';
 /** The field a section or note is typed into: one line for a heading, a growing box for a note. */
 export declare function kindTextField(def: LineField, kind: 'section' | 'note'): LineField;
 /** The form a cell sees: the line's values, written back into the line. Shared with @fieldia/grid. */
 export declare function lineForm(form: Form, field: string, key: string): Form;
+/** A line's money in its record's currency (`parent.…`), as a field of its own: in that currency, fixed — for a dialog with no record round it. */
+export declare function ownCurrency(sub: LineField, parent: Readonly<Values>): LineField;
+/**
+ * A line opened in a dialog: with `lineOpens: "record"`, a saved line's own
+ * record by the table's model — what its page saved is written back to the
+ * line's fields of the same names — else, or for a line not saved yet, every
+ * one of its fields, recalculated as they change and written back on Save &
+ * Close. Shared with @fieldia/grid.
+ */
+export declare function openLineDialog(form: Form, name: string, node: FieldNode, line: Line, dialogs: WidgetDialogs, readonly: boolean): Promise<void>;
 export declare const linesWidget: WidgetFactory;

package/src/lib/lines.d.ts

@@ -1,7 +1,17 @@
-import { type Form, type LineField } from '@fieldia/core';
-import { type WidgetFactory } from './widgets';
+import { type FieldNode, type Form, type Line, type LineField, type Values } from '@fieldia/core';
+import { type WidgetDialogs, type WidgetFactory } from './widgets';
 /** The field a section or note is typed into: one line for a heading, a growing box for a note. */
 export declare function kindTextField(def: LineField, kind: 'section' | 'note'): LineField;
 /** The form a cell sees: the line's values, written back into the line. Shared with @fieldia/grid. */
 export declare function lineForm(form: Form, field: string, key: string): Form;
+/** A line's money in its record's currency (`parent.…`), as a field of its own: in that currency, fixed — for a dialog with no record round it. */
+export declare function ownCurrency(sub: LineField, parent: Readonly<Values>): LineField;
+/**
+ * A line opened in a dialog: with `lineOpens: "record"`, a saved line's own
+ * record by the table's model — what its page saved is written back to the
+ * line's fields of the same names — else, or for a line not saved yet, every
+ * one of its fields, recalculated as they change and written back on Save &
+ * Close. Shared with @fieldia/grid.
+ */
+export declare function openLineDialog(form: Form, name: string, node: FieldNode, line: Line, dialogs: WidgetDialogs, readonly: boolean): Promise<void>;
 export declare const linesWidget: WidgetFactory;