@panneau/forms 5.0.0-alpha.1 → 5.0.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,27 +1,32 @@
1
- .panneau-body-3sXEkj {
1
+ .panneau-conflict-dialog-body {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  gap: var(--panneau-space-4);
5
5
  }
6
6
 
7
- .panneau-muted-5NUiTO {
7
+ .panneau-conflict-dialog-message {
8
+ margin: 0;
9
+ }
10
+
11
+ .panneau-conflict-dialog-muted {
8
12
  color: var(--panneau-color-text-muted);
13
+ margin: 0;
9
14
  }
10
15
 
11
- .panneau-heading-wxjJ-n {
12
- margin-bottom: var(--panneau-space-2);
16
+ .panneau-conflict-dialog-heading {
17
+ margin: 0 0 var(--panneau-space-2);
13
18
  font-size: var(--panneau-font-size-md);
14
19
  font-weight: var(--panneau-font-weight-bold);
15
20
  }
16
21
 
17
- .panneau-changes-mbdzwf {
22
+ .panneau-conflict-dialog-changes {
18
23
  display: flex;
19
24
  flex-direction: column;
20
25
  gap: var(--panneau-space-3);
21
26
  margin: 0;
22
27
  }
23
28
 
24
- .panneau-change-nV4kto {
29
+ .panneau-conflict-dialog-change {
25
30
  display: grid;
26
31
  grid-template-columns: minmax(8rem, 1fr) 2fr 2fr;
27
32
  gap: var(--panneau-space-1) var(--panneau-space-3);
@@ -29,11 +34,11 @@
29
34
  border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);
30
35
  }
31
36
 
32
- .panneau-label-eyId-i {
37
+ .panneau-conflict-dialog-label {
33
38
  font-weight: var(--panneau-font-weight-medium);
34
39
  }
35
40
 
36
- .panneau-version-OvsDcD {
41
+ .panneau-conflict-dialog-version {
37
42
  display: flex;
38
43
  flex-direction: column;
39
44
  min-width: 0;
@@ -41,7 +46,7 @@
41
46
  overflow-wrap: anywhere;
42
47
  }
43
48
 
44
- .panneau-which-NYhZHZ {
49
+ .panneau-conflict-dialog-which {
45
50
  font-size: var(--panneau-font-size-xs);
46
51
  color: var(--panneau-color-text-muted);
47
52
  text-transform: uppercase;
@@ -49,7 +54,7 @@
49
54
  }
50
55
 
51
56
  @media (max-width: 40rem) {
52
- .panneau-change-nV4kto {
57
+ .panneau-conflict-dialog-change {
53
58
  grid-template-columns: 1fr;
54
59
  }
55
60
  }
@@ -77,7 +77,10 @@ function ConflictDialog({ isOpen, fields, values, current, onReload, onOverwrite
77
77
  })] }),
78
78
  children: /* @__PURE__ */ jsxs("div", {
79
79
  className: ConflictDialog_module_default.body,
80
- children: [/* @__PURE__ */ jsx("p", { children: intl.formatMessage(messages.conflictMessage) }), theirs === null ? /* @__PURE__ */ jsx("p", {
80
+ children: [/* @__PURE__ */ jsx("p", {
81
+ className: ConflictDialog_module_default.message,
82
+ children: intl.formatMessage(messages.conflictMessage)
83
+ }), theirs === null ? /* @__PURE__ */ jsx("p", {
81
84
  className: ConflictDialog_module_default.muted,
82
85
  children: intl.formatMessage(messages.conflictUnknown)
83
86
  }) : changed.length > 0 ? /* @__PURE__ */ jsxs("section", {
@@ -1 +1 @@
1
- {"version":3,"file":"ConflictDialog.js","names":["labels","entry","label","field","_c","_Fragment","styles"],"sources":["../src/ConflictDialog.tsx"],"sourcesContent":["import { getItemValues, isEqual } from '@panneau/core';\nimport type { Field, Item } from '@panneau/protocol';\nimport { Button, Dialog, usePanneauIntl } from '@panneau/ui';\n\nimport styles from './ConflictDialog.module.css';\nimport { messages } from './messages';\n\nexport interface ConflictDialogProps {\n isOpen: boolean;\n /** The fields of the form, for their labels. */\n fields: readonly Field[];\n /** The values in the form. */\n values: Record<string, unknown>;\n /** The current item, as the backend sent it with the `412`. */\n current: Item | null;\n /** Drops the local changes and continues from the current item. */\n onReload: () => void;\n /** Saves the local values over the current version. */\n onOverwrite: () => void;\n isPending?: boolean;\n className?: string;\n}\n\ntype Formatter = (value: unknown, field?: Field) => string;\n\nfunction useFormatValue(): Formatter {\n const intl = usePanneauIntl();\n const format: Formatter = (value, field) => {\n const options = field?.options;\n if (options !== undefined) {\n const labels = (Array.isArray(value) ? value : [value]).map(\n (entry: unknown) =>\n options.find((option) => option.value === entry)?.label ?? entry,\n );\n if (value !== null && value !== undefined) {\n return labels.map((label) => format(label)).join(', ');\n }\n }\n if (value === null || value === undefined || value === '') {\n return intl.formatMessage(messages.empty);\n }\n if (typeof value === 'boolean') {\n return intl.formatMessage(value ? messages.yes : messages.no);\n }\n if (typeof value === 'string' || typeof value === 'number') {\n const text = String(value);\n return text.length > 120 ? `${text.slice(0, 117)}…` : text;\n }\n if (Array.isArray(value)) {\n const labels = value.map((entry: unknown) =>\n entry !== null && typeof entry === 'object' && 'label' in entry\n ? String((entry as { label: unknown }).label)\n : null,\n );\n return labels.every((label) => label !== null)\n ? labels.join(', ')\n : intl.formatMessage(messages.itemCount, { count: value.length });\n }\n if (typeof value === 'object') {\n const record = value as Record<string, unknown>;\n if (typeof record.label === 'string') {\n return record.label;\n }\n return Object.entries(record)\n .map(([key, entry]) => `${key}: ${format(entry)}`)\n .join(' · ');\n }\n return String(value);\n };\n return format;\n}\n\n/**\n * The dialog of a version conflict (decision 0008): someone else saved the item since the form\n * loaded it. It shows the values that differ, and lets the user load the current version or save\n * theirs over it.\n */\nexport function ConflictDialog({\n isOpen,\n fields,\n values,\n current,\n onReload,\n onOverwrite,\n isPending = false,\n className,\n}: ConflictDialogProps) {\n const intl = usePanneauIntl();\n const format = useFormatValue();\n const theirs =\n current !== null\n ? getItemValues(\n current,\n fields.map((field) => field.name),\n )\n : null;\n const changed =\n theirs !== null\n ? fields.filter(\n (field) => !isEqual(values[field.name] ?? null, theirs[field.name] ?? null),\n )\n : [];\n return (\n <Dialog\n isOpen={isOpen}\n role=\"alertdialog\"\n isDismissable={false}\n isKeyboardDismissDisabled\n title={intl.formatMessage(messages.conflictTitle)}\n size=\"lg\"\n className={className}\n footer={\n <>\n <Button onPress={onReload} isDisabled={isPending}>\n {intl.formatMessage(messages.loadCurrent)}\n </Button>\n <Button variant=\"danger\" onPress={onOverwrite} isPending={isPending}>\n {intl.formatMessage(messages.overwrite)}\n </Button>\n </>\n }\n >\n <div className={styles.body}>\n <p>{intl.formatMessage(messages.conflictMessage)}</p>\n {theirs === null ? (\n <p className={styles.muted}>{intl.formatMessage(messages.conflictUnknown)}</p>\n ) : changed.length > 0 ? (\n <section aria-labelledby=\"panneau-conflict-changes\">\n <h3 id=\"panneau-conflict-changes\" className={styles.heading}>\n {intl.formatMessage(messages.conflictChanges)}\n </h3>\n <dl className={styles.changes}>\n {changed.map((field) => (\n <div key={field.name} className={styles.change}>\n <dt className={styles.label}>{field.label ?? field.name}</dt>\n <dd className={styles.version}>\n <span className={styles.which}>\n {intl.formatMessage(messages.yours)}\n </span>\n {format(values[field.name], field)}\n </dd>\n <dd className={styles.version}>\n <span className={styles.which}>\n {intl.formatMessage(messages.current)}\n </span>\n {format(theirs[field.name], field)}\n </dd>\n </div>\n ))}\n </dl>\n </section>\n ) : null}\n </div>\n </Dialog>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"ConflictDialog.js","names":["labels","entry","label","field","_c","_Fragment","styles"],"sources":["../src/ConflictDialog.tsx"],"sourcesContent":["import { getItemValues, isEqual } from '@panneau/core';\nimport type { Field, Item } from '@panneau/protocol';\nimport { Button, Dialog, usePanneauIntl } from '@panneau/ui';\n\nimport styles from './ConflictDialog.module.css';\nimport { messages } from './messages';\n\nexport interface ConflictDialogProps {\n isOpen: boolean;\n /** The fields of the form, for their labels. */\n fields: readonly Field[];\n /** The values in the form. */\n values: Record<string, unknown>;\n /** The current item, as the backend sent it with the `412`. */\n current: Item | null;\n /** Drops the local changes and continues from the current item. */\n onReload: () => void;\n /** Saves the local values over the current version. */\n onOverwrite: () => void;\n isPending?: boolean;\n className?: string;\n}\n\ntype Formatter = (value: unknown, field?: Field) => string;\n\nfunction useFormatValue(): Formatter {\n const intl = usePanneauIntl();\n const format: Formatter = (value, field) => {\n const options = field?.options;\n if (options !== undefined) {\n const labels = (Array.isArray(value) ? value : [value]).map(\n (entry: unknown) =>\n options.find((option) => option.value === entry)?.label ?? entry,\n );\n if (value !== null && value !== undefined) {\n return labels.map((label) => format(label)).join(', ');\n }\n }\n if (value === null || value === undefined || value === '') {\n return intl.formatMessage(messages.empty);\n }\n if (typeof value === 'boolean') {\n return intl.formatMessage(value ? messages.yes : messages.no);\n }\n if (typeof value === 'string' || typeof value === 'number') {\n const text = String(value);\n return text.length > 120 ? `${text.slice(0, 117)}…` : text;\n }\n if (Array.isArray(value)) {\n const labels = value.map((entry: unknown) =>\n entry !== null && typeof entry === 'object' && 'label' in entry\n ? String((entry as { label: unknown }).label)\n : null,\n );\n return labels.every((label) => label !== null)\n ? labels.join(', ')\n : intl.formatMessage(messages.itemCount, { count: value.length });\n }\n if (typeof value === 'object') {\n const record = value as Record<string, unknown>;\n if (typeof record.label === 'string') {\n return record.label;\n }\n return Object.entries(record)\n .map(([key, entry]) => `${key}: ${format(entry)}`)\n .join(' · ');\n }\n return String(value);\n };\n return format;\n}\n\n/**\n * The dialog of a version conflict (decision 0008): someone else saved the item since the form\n * loaded it. It shows the values that differ, and lets the user load the current version or save\n * theirs over it.\n */\nexport function ConflictDialog({\n isOpen,\n fields,\n values,\n current,\n onReload,\n onOverwrite,\n isPending = false,\n className,\n}: ConflictDialogProps) {\n const intl = usePanneauIntl();\n const format = useFormatValue();\n const theirs =\n current !== null\n ? getItemValues(\n current,\n fields.map((field) => field.name),\n )\n : null;\n const changed =\n theirs !== null\n ? fields.filter(\n (field) => !isEqual(values[field.name] ?? null, theirs[field.name] ?? null),\n )\n : [];\n return (\n <Dialog\n isOpen={isOpen}\n role=\"alertdialog\"\n isDismissable={false}\n isKeyboardDismissDisabled\n title={intl.formatMessage(messages.conflictTitle)}\n size=\"lg\"\n className={className}\n footer={\n <>\n <Button onPress={onReload} isDisabled={isPending}>\n {intl.formatMessage(messages.loadCurrent)}\n </Button>\n <Button variant=\"danger\" onPress={onOverwrite} isPending={isPending}>\n {intl.formatMessage(messages.overwrite)}\n </Button>\n </>\n }\n >\n <div className={styles.body}>\n <p className={styles.message}>{intl.formatMessage(messages.conflictMessage)}</p>\n {theirs === null ? (\n <p className={styles.muted}>{intl.formatMessage(messages.conflictUnknown)}</p>\n ) : changed.length > 0 ? (\n <section aria-labelledby=\"panneau-conflict-changes\">\n <h3 id=\"panneau-conflict-changes\" className={styles.heading}>\n {intl.formatMessage(messages.conflictChanges)}\n </h3>\n <dl className={styles.changes}>\n {changed.map((field) => (\n <div key={field.name} className={styles.change}>\n <dt className={styles.label}>{field.label ?? field.name}</dt>\n <dd className={styles.version}>\n <span className={styles.which}>\n {intl.formatMessage(messages.yours)}\n </span>\n {format(values[field.name], field)}\n </dd>\n <dd className={styles.version}>\n <span className={styles.which}>\n {intl.formatMessage(messages.current)}\n </span>\n {format(theirs[field.name], field)}\n </dd>\n </div>\n ))}\n </dl>\n </section>\n ) : null}\n </div>\n </Dialog>\n );\n}\n"],"mappings":"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"}
@@ -1,15 +1,17 @@
1
1
  import "./ConflictDialog.css";
2
2
  //#region src/ConflictDialog.module.css
3
- var body = "panneau-body-3sXEkj";
4
- var muted = "panneau-muted-5NUiTO";
5
- var heading = "panneau-heading-wxjJ-n";
6
- var changes = "panneau-changes-mbdzwf";
7
- var change = "panneau-change-nV4kto";
8
- var label = "panneau-label-eyId-i";
9
- var version = "panneau-version-OvsDcD";
10
- var which = "panneau-which-NYhZHZ";
3
+ var body = "panneau-conflict-dialog-body";
4
+ var message = "panneau-conflict-dialog-message";
5
+ var muted = "panneau-conflict-dialog-muted";
6
+ var heading = "panneau-conflict-dialog-heading";
7
+ var changes = "panneau-conflict-dialog-changes";
8
+ var change = "panneau-conflict-dialog-change";
9
+ var label = "panneau-conflict-dialog-label";
10
+ var version = "panneau-conflict-dialog-version";
11
+ var which = "panneau-conflict-dialog-which";
11
12
  var ConflictDialog_module_default = {
12
13
  body,
14
+ message,
13
15
  muted,
14
16
  heading,
15
17
  changes,
@@ -19,6 +21,6 @@ var ConflictDialog_module_default = {
19
21
  which
20
22
  };
21
23
  //#endregion
22
- export { body, change, changes, ConflictDialog_module_default as default, heading, label, muted, version, which };
24
+ export { body, change, changes, ConflictDialog_module_default as default, heading, label, message, muted, version, which };
23
25
 
24
26
  //# sourceMappingURL=ConflictDialog.module.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ConflictDialog.module.js","names":[],"sources":["../src/ConflictDialog.module.css"],"sourcesContent":[".body {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-4);\n}\n\n.muted {\n color: var(--panneau-color-text-muted);\n}\n\n.heading {\n margin-bottom: var(--panneau-space-2);\n font-size: var(--panneau-font-size-md);\n font-weight: var(--panneau-font-weight-bold);\n}\n\n.changes {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-3);\n margin: 0;\n}\n\n.change {\n display: grid;\n grid-template-columns: minmax(8rem, 1fr) 2fr 2fr;\n gap: var(--panneau-space-1) var(--panneau-space-3);\n padding-bottom: var(--panneau-space-3);\n border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.label {\n font-weight: var(--panneau-font-weight-medium);\n}\n\n.version {\n display: flex;\n flex-direction: column;\n min-width: 0;\n margin: 0;\n overflow-wrap: anywhere;\n}\n\n.which {\n font-size: var(--panneau-font-size-xs);\n color: var(--panneau-color-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}\n\n@media (max-width: 40rem) {\n .change {\n grid-template-columns: 1fr;\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"ConflictDialog.module.js","names":[],"sources":["../src/ConflictDialog.module.css"],"sourcesContent":[".body {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-4);\n}\n\n.message {\n margin: 0;\n}\n\n.muted {\n color: var(--panneau-color-text-muted);\n margin: 0;\n}\n\n.heading {\n margin: 0 0 var(--panneau-space-2);\n font-size: var(--panneau-font-size-md);\n font-weight: var(--panneau-font-weight-bold);\n}\n\n.changes {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-3);\n margin: 0;\n}\n\n.change {\n display: grid;\n grid-template-columns: minmax(8rem, 1fr) 2fr 2fr;\n gap: var(--panneau-space-1) var(--panneau-space-3);\n padding-bottom: var(--panneau-space-3);\n border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.label {\n font-weight: var(--panneau-font-weight-medium);\n}\n\n.version {\n display: flex;\n flex-direction: column;\n min-width: 0;\n margin: 0;\n overflow-wrap: anywhere;\n}\n\n.which {\n font-size: var(--panneau-font-size-xs);\n color: var(--panneau-color-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}\n\n@media (max-width: 40rem) {\n .change {\n grid-template-columns: 1fr;\n }\n}\n"],"mappings":""}
package/dist/Form.css CHANGED
@@ -1,4 +1,4 @@
1
- .panneau-form-SbGXMC {
1
+ .panneau-form {
2
2
  container: panneau-form / inline-size;
3
3
  display: flex;
4
4
  flex-direction: column;
@@ -6,46 +6,46 @@
6
6
  min-width: 0;
7
7
  }
8
8
 
9
- .panneau-layout-ZLMO4i {
9
+ .panneau-form-layout {
10
10
  display: grid;
11
11
  gap: var(--panneau-space-6);
12
12
  min-width: 0;
13
13
  }
14
14
 
15
15
  @container panneau-form (min-width: 56rem) {
16
- .panneau-withSidebar-EZX3tW {
16
+ .panneau-form-with-sidebar {
17
17
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
18
18
  align-items: start;
19
19
  }
20
20
  }
21
21
 
22
- .panneau-stack-PjhKm6 {
22
+ .panneau-form-stack {
23
23
  display: flex;
24
24
  flex-direction: column;
25
25
  gap: var(--panneau-space-5);
26
26
  min-width: 0;
27
27
  }
28
28
 
29
- .panneau-row-Yi7-zn {
29
+ .panneau-form-row {
30
30
  display: grid;
31
31
  grid-template-columns: repeat(12, minmax(0, 1fr));
32
32
  gap: var(--panneau-space-5) var(--panneau-space-4);
33
33
  min-width: 0;
34
34
  }
35
35
 
36
- .panneau-cell--1VhEt {
36
+ .panneau-form-cell {
37
37
  grid-column: span var(--panneau-span, 12);
38
38
  min-width: 0;
39
39
  }
40
40
 
41
41
  /* Narrow containers (phones, side panels): every cell takes the full width. */
42
42
  @container panneau-form (max-width: 36rem) {
43
- .panneau-cell--1VhEt {
43
+ .panneau-form-cell {
44
44
  grid-column: 1 / -1;
45
45
  }
46
46
  }
47
47
 
48
- .panneau-section-TsDtP1 {
48
+ .panneau-form-section {
49
49
  display: flex;
50
50
  flex-direction: column;
51
51
  gap: var(--panneau-space-4);
@@ -57,45 +57,51 @@
57
57
  }
58
58
 
59
59
  @container panneau-form (max-width: 36rem) {
60
- .panneau-section-TsDtP1 {
60
+ .panneau-form-section {
61
61
  padding: var(--panneau-space-3);
62
62
  }
63
63
  }
64
64
 
65
- .panneau-sectionHeader-ewRbEd {
65
+ .panneau-form-section-header {
66
66
  display: flex;
67
67
  flex-direction: column;
68
68
  gap: var(--panneau-space-1);
69
69
  }
70
70
 
71
- .panneau-sectionTitle-13j1RU {
71
+ .panneau-form-section-description {
72
+ margin: 0;
73
+ }
74
+
75
+ .panneau-form-section-title {
72
76
  display: flex;
73
77
  align-items: center;
74
78
  gap: var(--panneau-space-2);
75
79
  font-size: var(--panneau-font-size-lg);
76
80
  font-weight: var(--panneau-font-weight-bold);
77
81
  line-height: var(--panneau-line-height-tight);
82
+ margin: 0;
78
83
  }
79
84
 
80
- .panneau-sectionDescription-wMAdQR,
81
- .panneau-text-8QehWk {
85
+ .panneau-form-section-description,
86
+ .panneau-form-text {
82
87
  font-size: var(--panneau-font-size-md);
83
88
  color: var(--panneau-color-text-muted);
89
+ margin: 0;
84
90
  }
85
91
 
86
- .panneau-sidebar-sKhl3G {
92
+ .panneau-form-sidebar {
87
93
  display: flex;
88
94
  flex-direction: column;
89
95
  gap: var(--panneau-space-5);
90
96
  min-width: 0;
91
97
  }
92
98
 
93
- .panneau-field-4Wbt9T {
99
+ .panneau-form-field {
94
100
  min-width: 0;
95
101
  scroll-margin: var(--panneau-space-10);
96
102
  }
97
103
 
98
- .panneau-footer-PD5XO8 {
104
+ .panneau-form-footer {
99
105
  position: sticky;
100
106
  bottom: 0;
101
107
  z-index: 1;
@@ -109,18 +115,18 @@
109
115
  border-top: var(--panneau-border-width) solid var(--panneau-color-border);
110
116
  }
111
117
 
112
- .panneau-dirty-pKx-lf {
118
+ .panneau-form-dirty {
113
119
  margin-inline-end: auto;
114
120
  font-size: var(--panneau-font-size-sm);
115
121
  color: var(--panneau-color-text-muted);
116
122
  }
117
123
 
118
- .panneau-summary-mM2QXV:focus {
124
+ .panneau-form-summary:focus {
119
125
  outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
120
126
  outline-offset: 2px;
121
127
  }
122
128
 
123
- .panneau-summaryList-BPalHL {
129
+ .panneau-form-summary-list {
124
130
  display: flex;
125
131
  flex-direction: column;
126
132
  gap: var(--panneau-space-1);
@@ -128,7 +134,7 @@
128
134
  padding-inline-start: var(--panneau-space-5);
129
135
  }
130
136
 
131
- .panneau-summaryLink-wCCmoV {
137
+ .panneau-form-summary-link {
132
138
  padding: 0;
133
139
  font: inherit;
134
140
  color: inherit;
@@ -139,13 +145,13 @@
139
145
  border: 0;
140
146
  }
141
147
 
142
- .panneau-summaryLink-wCCmoV:focus-visible {
148
+ .panneau-form-summary-link:focus-visible {
143
149
  outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
144
150
  outline-offset: 2px;
145
151
  }
146
152
 
147
153
  @container panneau-form (max-width: 36rem) {
148
- .panneau-footer-PD5XO8 > :not(.panneau-dirty-pKx-lf) {
154
+ .panneau-form-footer > :not(.panneau-form-dirty) {
149
155
  flex: 1 1 auto;
150
156
  }
151
157
  }
@@ -1,23 +1,23 @@
1
1
  import "./Form.css";
2
2
  //#region src/Form.module.css
3
- var form = "panneau-form-SbGXMC";
4
- var layout = "panneau-layout-ZLMO4i";
5
- var withSidebar = "panneau-withSidebar-EZX3tW";
6
- var stack = "panneau-stack-PjhKm6";
7
- var row = "panneau-row-Yi7-zn";
8
- var cell = "panneau-cell--1VhEt";
9
- var section = "panneau-section-TsDtP1";
10
- var sectionHeader = "panneau-sectionHeader-ewRbEd";
11
- var sectionTitle = "panneau-sectionTitle-13j1RU";
12
- var sectionDescription = "panneau-sectionDescription-wMAdQR";
13
- var text = "panneau-text-8QehWk";
14
- var sidebar = "panneau-sidebar-sKhl3G";
15
- var field = "panneau-field-4Wbt9T";
16
- var footer = "panneau-footer-PD5XO8";
17
- var dirty = "panneau-dirty-pKx-lf";
18
- var summary = "panneau-summary-mM2QXV";
19
- var summaryList = "panneau-summaryList-BPalHL";
20
- var summaryLink = "panneau-summaryLink-wCCmoV";
3
+ var form = "panneau-form";
4
+ var layout = "panneau-form-layout";
5
+ var withSidebar = "panneau-form-with-sidebar";
6
+ var stack = "panneau-form-stack";
7
+ var row = "panneau-form-row";
8
+ var cell = "panneau-form-cell";
9
+ var section = "panneau-form-section";
10
+ var sectionHeader = "panneau-form-section-header";
11
+ var sectionDescription = "panneau-form-section-description";
12
+ var sectionTitle = "panneau-form-section-title";
13
+ var text = "panneau-form-text";
14
+ var sidebar = "panneau-form-sidebar";
15
+ var field = "panneau-form-field";
16
+ var footer = "panneau-form-footer";
17
+ var dirty = "panneau-form-dirty";
18
+ var summary = "panneau-form-summary";
19
+ var summaryList = "panneau-form-summary-list";
20
+ var summaryLink = "panneau-form-summary-link";
21
21
  var Form_module_default = {
22
22
  form,
23
23
  layout,
@@ -27,8 +27,8 @@ var Form_module_default = {
27
27
  cell,
28
28
  section,
29
29
  sectionHeader,
30
- sectionTitle,
31
30
  sectionDescription,
31
+ sectionTitle,
32
32
  text,
33
33
  sidebar,
34
34
  field,
@@ -1 +1 @@
1
- {"version":3,"file":"Form.module.js","names":[],"sources":["../src/Form.module.css"],"sourcesContent":[".form {\n container: panneau-form / inline-size;\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-6);\n min-width: 0;\n}\n\n.layout {\n display: grid;\n gap: var(--panneau-space-6);\n min-width: 0;\n}\n\n@container panneau-form (min-width: 56rem) {\n .withSidebar {\n grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);\n align-items: start;\n }\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-5);\n min-width: 0;\n}\n\n.row {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--panneau-space-5) var(--panneau-space-4);\n min-width: 0;\n}\n\n.cell {\n grid-column: span var(--panneau-span, 12);\n min-width: 0;\n}\n\n/* Narrow containers (phones, side panels): every cell takes the full width. */\n@container panneau-form (max-width: 36rem) {\n .cell {\n grid-column: 1 / -1;\n }\n}\n\n.section {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-4);\n min-width: 0;\n padding: var(--panneau-space-4) var(--panneau-space-5);\n background-color: var(--panneau-color-surface);\n border: var(--panneau-border-width) solid var(--panneau-color-border);\n border-radius: var(--panneau-radius-lg);\n}\n\n@container panneau-form (max-width: 36rem) {\n .section {\n padding: var(--panneau-space-3);\n }\n}\n\n.sectionHeader {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-1);\n}\n\n.sectionTitle {\n display: flex;\n align-items: center;\n gap: var(--panneau-space-2);\n font-size: var(--panneau-font-size-lg);\n font-weight: var(--panneau-font-weight-bold);\n line-height: var(--panneau-line-height-tight);\n}\n\n.sectionDescription,\n.text {\n font-size: var(--panneau-font-size-md);\n color: var(--panneau-color-text-muted);\n}\n\n.sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-5);\n min-width: 0;\n}\n\n.field {\n min-width: 0;\n scroll-margin: var(--panneau-space-10);\n}\n\n.footer {\n position: sticky;\n bottom: 0;\n z-index: 1;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: var(--panneau-space-2) var(--panneau-space-3);\n padding: var(--panneau-space-3) 0;\n background-color: var(--panneau-color-bg);\n border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.dirty {\n margin-inline-end: auto;\n font-size: var(--panneau-font-size-sm);\n color: var(--panneau-color-text-muted);\n}\n\n.summary:focus {\n outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n outline-offset: 2px;\n}\n\n.summaryList {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-1);\n margin: 0;\n padding-inline-start: var(--panneau-space-5);\n}\n\n.summaryLink {\n padding: 0;\n font: inherit;\n color: inherit;\n text-align: start;\n text-decoration: underline;\n cursor: pointer;\n background: none;\n border: 0;\n}\n\n.summaryLink:focus-visible {\n outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n outline-offset: 2px;\n}\n\n@container panneau-form (max-width: 36rem) {\n .footer > :not(.dirty) {\n flex: 1 1 auto;\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"Form.module.js","names":[],"sources":["../src/Form.module.css"],"sourcesContent":[".form {\n container: panneau-form / inline-size;\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-6);\n min-width: 0;\n}\n\n.layout {\n display: grid;\n gap: var(--panneau-space-6);\n min-width: 0;\n}\n\n@container panneau-form (min-width: 56rem) {\n .withSidebar {\n grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);\n align-items: start;\n }\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-5);\n min-width: 0;\n}\n\n.row {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--panneau-space-5) var(--panneau-space-4);\n min-width: 0;\n}\n\n.cell {\n grid-column: span var(--panneau-span, 12);\n min-width: 0;\n}\n\n/* Narrow containers (phones, side panels): every cell takes the full width. */\n@container panneau-form (max-width: 36rem) {\n .cell {\n grid-column: 1 / -1;\n }\n}\n\n.section {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-4);\n min-width: 0;\n padding: var(--panneau-space-4) var(--panneau-space-5);\n background-color: var(--panneau-color-surface);\n border: var(--panneau-border-width) solid var(--panneau-color-border);\n border-radius: var(--panneau-radius-lg);\n}\n\n@container panneau-form (max-width: 36rem) {\n .section {\n padding: var(--panneau-space-3);\n }\n}\n\n.sectionHeader {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-1);\n}\n\n.sectionDescription {\n margin: 0;\n}\n\n.sectionTitle {\n display: flex;\n align-items: center;\n gap: var(--panneau-space-2);\n font-size: var(--panneau-font-size-lg);\n font-weight: var(--panneau-font-weight-bold);\n line-height: var(--panneau-line-height-tight);\n margin: 0;\n}\n\n.sectionDescription,\n.text {\n font-size: var(--panneau-font-size-md);\n color: var(--panneau-color-text-muted);\n margin: 0;\n}\n\n.sidebar {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-5);\n min-width: 0;\n}\n\n.field {\n min-width: 0;\n scroll-margin: var(--panneau-space-10);\n}\n\n.footer {\n position: sticky;\n bottom: 0;\n z-index: 1;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: var(--panneau-space-2) var(--panneau-space-3);\n padding: var(--panneau-space-3) 0;\n background-color: var(--panneau-color-bg);\n border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.dirty {\n margin-inline-end: auto;\n font-size: var(--panneau-font-size-sm);\n color: var(--panneau-color-text-muted);\n}\n\n.summary:focus {\n outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n outline-offset: 2px;\n}\n\n.summaryList {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-1);\n margin: 0;\n padding-inline-start: var(--panneau-space-5);\n}\n\n.summaryLink {\n padding: 0;\n font: inherit;\n color: inherit;\n text-align: start;\n text-decoration: underline;\n cursor: pointer;\n background: none;\n border: 0;\n}\n\n.summaryLink:focus-visible {\n outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n outline-offset: 2px;\n}\n\n@container panneau-form (max-width: 36rem) {\n .footer > :not(.dirty) {\n flex: 1 1 auto;\n }\n}\n"],"mappings":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panneau/forms",
3
- "version": "5.0.0-alpha.1",
3
+ "version": "5.0.0-alpha.3",
4
4
  "description": "Forms of Panneau: fields in a layout, driven by the form state of @panneau/core, with errors, unsaved changes and version conflicts.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -41,13 +41,13 @@
41
41
  "react-intl": "^12.0.0"
42
42
  },
43
43
  "dependencies": {
44
- "@panneau/core": "5.0.0-alpha.1",
45
- "@panneau/fields": "5.0.0-alpha.1",
46
- "@panneau/intl": "5.0.0-alpha.1",
47
- "@panneau/protocol": "5.0.0-alpha.1",
48
- "@panneau/ui": "5.0.0-alpha.1"
44
+ "@panneau/core": "5.0.0-alpha.3",
45
+ "@panneau/fields": "5.0.0-alpha.3",
46
+ "@panneau/intl": "5.0.0-alpha.3",
47
+ "@panneau/protocol": "5.0.0-alpha.3",
48
+ "@panneau/ui": "5.0.0-alpha.3"
49
49
  },
50
50
  "devDependencies": {
51
- "@panneau/data": "5.0.0-alpha.1"
51
+ "@panneau/data": "5.0.0-alpha.3"
52
52
  }
53
53
  }