@flood-md/react 0.2.9 → 0.2.10
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.
- package/README.md +18 -2
- package/dist/data-display.js +2 -2
- package/dist/foundations.css +57 -48
- package/dist/index.d.ts +4 -0
- package/dist/index.js +4 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -6,9 +6,16 @@ HTML semantics and refs, no third-party component library or Tailwind dependency
|
|
|
6
6
|
Named imports support tree shaking in optimizing ES-module bundlers. Import the
|
|
7
7
|
shared stylesheet explicitly; styles are not split by component.
|
|
8
8
|
|
|
9
|
-
This package documents the **0.2.
|
|
9
|
+
This package documents the **0.2.10** source API. Keep Flood package versions aligned and follow the guide matching
|
|
10
10
|
your installed declarations; source changes do not modify an existing npm release.
|
|
11
11
|
|
|
12
|
+
Version 0.2.10 adds Fieldset legendSize="label" | "section"
|
|
13
|
+
(default label). Independent section legends use a 1rem/600 role; named fields
|
|
14
|
+
retain their 13px-equivalent label size with a .25rem inner gap. Dialog task
|
|
15
|
+
titles use 1.25rem/600 and a 1.5rem body inset. These dark-profile recipe changes
|
|
16
|
+
do not enlarge compact Popover captions or default choice legends. DatePicker
|
|
17
|
+
calendar panels prefer at least 20rem when available, bounded by the viewport.
|
|
18
|
+
|
|
12
19
|
Version 0.2.9 improves constrained file rows, Drawer readability and Select pointer
|
|
13
20
|
focus without changing public signatures or token values.
|
|
14
21
|
|
|
@@ -655,11 +662,20 @@ explicit id/headers associations for complex spanning headers. Do not add anothe
|
|
|
655
662
|
caption child. See [WAI table guidance](https://www.w3.org/WAI/tutorials/tables/).
|
|
656
663
|
|
|
657
664
|
Table density defaults comfortable; compact reduces vertical cell padding.
|
|
665
|
+
In 0.2.10, cellVerticalAlign defaults to "middle" for consistent
|
|
666
|
+
record/action and editable rows. Choose "top" for deliberate multiline prose
|
|
667
|
+
alignment or "bottom" when content requires it. This sets the shared cell recipe without consumer
|
|
668
|
+
specificity overrides. Native style on a particular th/td can override an
|
|
669
|
+
exceptional cell. DataTable manages its own header geometry separately.
|
|
658
670
|
striped is false by default. Native tfoot rows use a quiet tinted background and
|
|
659
671
|
medium-weight text to distinguish summaries; the top separator stays decorative.
|
|
660
672
|
data-numeric on a th or td uses logical end alignment,
|
|
661
673
|
tabular figures and no wrapping for numbers. data-align=start/center/end overrides
|
|
662
|
-
alignment explicitly. Text cells
|
|
674
|
+
alignment explicitly. Text cells preserve word-based intrinsic widths and wrap
|
|
675
|
+
at word boundaries; a constrained long token can still use break-word fallback.
|
|
676
|
+
Use native data-wrap="anywhere" deliberately for a technical identifier cell
|
|
677
|
+
when fragmentation is preferable to local scrolling. StatusIndicator preserves
|
|
678
|
+
the same word-based minimum in tables and file rows. Set style.minWidth to preserve room for a
|
|
663
679
|
wide table, and the containing ScrollArea handles overflow. The host owns dates,
|
|
664
680
|
units, totals, empty rows/colSpan and any cell actions. Avoid interactive whole rows.
|
|
665
681
|
|
package/dist/data-display.js
CHANGED
|
@@ -6,6 +6,6 @@ export const DescribedData = /* @__PURE__ */ forwardRef(function DescribedData({
|
|
|
6
6
|
throw new Error("Flood description items require unique nonempty IDs");
|
|
7
7
|
return _jsx("dl", { ...props, ref: ref, className: ["flood-description-list", className].filter(Boolean).join(" "), "data-layout": layout, "data-density": density, "data-dividers": dividers, children: items.map(item => _jsxs("div", { className: "flood-description-list__item", children: [_jsx("dt", { children: item.term }), _jsx("dd", { children: item.description })] }, item.id)) });
|
|
8
8
|
});
|
|
9
|
-
export const TabularData = /* @__PURE__ */ forwardRef(function TabularData({ caption, children, hideCaption, density, striped, scrollLabel, className, hidden, dir, lang, ...props }, ref) {
|
|
10
|
-
return _jsx("div", { className: "flood-table-container", hidden: hidden, dir: dir, lang: lang, children: _jsx(ScrollArea, { orientation: "horizontal", "aria-label": scrollLabel ?? caption, children: _jsxs("table", { ...props, ref: ref, hidden: hidden, dir: dir, lang: lang, className: ["flood-table", className].filter(Boolean).join(" "), "data-density": density, "data-striped": striped, children: [_jsx("caption", { className: hideCaption ? "flood-visually-hidden" : undefined, children: caption }), children] }) }) });
|
|
9
|
+
export const TabularData = /* @__PURE__ */ forwardRef(function TabularData({ caption, children, hideCaption, density, striped, scrollLabel, cellVerticalAlign, className, hidden, dir, lang, ...props }, ref) {
|
|
10
|
+
return _jsx("div", { className: "flood-table-container", hidden: hidden, dir: dir, lang: lang, children: _jsx(ScrollArea, { orientation: "horizontal", "aria-label": scrollLabel ?? caption, children: _jsxs("table", { ...props, ref: ref, hidden: hidden, dir: dir, lang: lang, className: ["flood-table", className].filter(Boolean).join(" "), "data-density": density, "data-striped": striped, "data-cell-vertical-align": cellVerticalAlign, children: [_jsx("caption", { className: hideCaption ? "flood-visually-hidden" : undefined, children: caption }), children] }) }) });
|
|
11
11
|
});
|
package/dist/foundations.css
CHANGED
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
.flood-root .flood-aspect-ratio__content > :is(img, video, iframe) { display: block; inline-size: 100%; block-size: 100%; }
|
|
9
9
|
.flood-root .flood-image { display: block; max-inline-size: 100%; block-size: auto; object-fit: cover; }
|
|
10
10
|
.flood-root .flood-image[data-fit="contain"] { object-fit: contain; }
|
|
11
|
-
.flood-root .flood-list { display: grid; gap: var(--flood-layout-gap); margin: 0; padding-inline-start: var(--flood-sys-space-6); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap:
|
|
11
|
+
.flood-root .flood-list { display: grid; gap: var(--flood-layout-gap); margin: 0; padding-inline-start: var(--flood-sys-space-6); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
12
|
+
.flood-root .flood-list > li { min-inline-size: 0; }
|
|
12
13
|
.flood-root .flood-list[data-marker="false"] { list-style: none; padding: 0; }
|
|
13
14
|
.flood-root .flood-empty-state { box-sizing: border-box; align-items: center; text-align: center; padding-block: var(--flood-sys-space-8); padding-inline: min(var(--flood-sys-space-8), 8%); }
|
|
14
15
|
.flood-root .flood-empty-state[data-density="compact"] { padding-block: var(--flood-sys-space-6); padding-inline: min(var(--flood-sys-space-6), 8%); }
|
|
@@ -16,7 +17,7 @@
|
|
|
16
17
|
.flood-root .flood-empty-state__actions { justify-content: center; }
|
|
17
18
|
.flood-root :is(.flood-container, .flood-grid, .flood-aspect-ratio, .flood-list, .flood-image, .flood-empty-state)[hidden] { display: none; }
|
|
18
19
|
|
|
19
|
-
.flood-root .flood-card { display: flex; flex-direction: column; gap: var(--flood-sys-space-4); overflow-wrap:
|
|
20
|
+
.flood-root .flood-card { display: flex; flex-direction: column; gap: var(--flood-sys-space-4); overflow-wrap: break-word; }
|
|
20
21
|
.flood-root .flood-card[data-density="compact"] { gap: var(--flood-sys-space-3); }
|
|
21
22
|
.flood-root .flood-card__header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--flood-sys-space-3); min-inline-size: 0; }
|
|
22
23
|
.flood-root .flood-card__intro { display: grid; gap: var(--flood-sys-space-1); flex: 1 1 12rem; min-inline-size: 0; }
|
|
@@ -48,7 +49,7 @@
|
|
|
48
49
|
.flood-root .flood-menu .flood-menu__item[aria-disabled="true"] { color: var(--flood-sys-color-field-disabled-content); cursor: default; }
|
|
49
50
|
.flood-root .flood-menu__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--flood-control-icon); block-size: var(--flood-control-icon); }
|
|
50
51
|
.flood-root .flood-menu__icon > svg { inline-size: 100%; block-size: 100%; }
|
|
51
|
-
.flood-root .flood-menu__label { min-inline-size: 0; overflow-wrap:
|
|
52
|
+
.flood-root .flood-menu__label { min-inline-size: 0; overflow-wrap: break-word; }
|
|
52
53
|
.flood-root .flood-menu__indicator { margin-inline-start: auto; }
|
|
53
54
|
.flood-root .flood-menu__group-label { padding: var(--flood-sys-space-2) var(--flood-sys-space-3) var(--flood-sys-space-1); color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); }
|
|
54
55
|
.flood-root .flood-menu__shortcut { margin-inline-start: auto; flex: none; color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); white-space: nowrap; }
|
|
@@ -68,7 +69,7 @@
|
|
|
68
69
|
.flood-root .flood-description-list__item:first-child { padding-block-start: 0; }
|
|
69
70
|
.flood-root .flood-description-list__item:last-child { padding-block-end: 0; }
|
|
70
71
|
.flood-root .flood-description-list[data-dividers="true"] > .flood-description-list__item + .flood-description-list__item { border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
|
|
71
|
-
.flood-root .flood-description-list :is(dt, dd) { margin: 0; min-inline-size: 0; overflow-wrap:
|
|
72
|
+
.flood-root .flood-description-list :is(dt, dd) { margin: 0; min-inline-size: 0; overflow-wrap: break-word; }
|
|
72
73
|
.flood-root .flood-description-list dt { color: var(--flood-sys-color-content-subtle); }
|
|
73
74
|
.flood-root .flood-description-list[data-layout="stacked"] > .flood-description-list__item { grid-template-columns: minmax(0, 1fr); }
|
|
74
75
|
@container flood-description (max-width: 22rem) { .flood-root .flood-description-list__item { grid-template-columns: minmax(0, 1fr); } }
|
|
@@ -76,7 +77,11 @@
|
|
|
76
77
|
.flood-root .flood-table { --flood-data-padding: var(--flood-sys-space-3); inline-size: 100%; border-collapse: collapse; border-spacing: 0; text-align: start; color: var(--flood-sys-color-content-default); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
77
78
|
.flood-root .flood-table[data-density="compact"] { --flood-data-padding: var(--flood-sys-space-2); }
|
|
78
79
|
.flood-root .flood-table caption { text-align: start; padding-block-end: var(--flood-sys-space-3); font-weight: var(--flood-sys-type-label-weight); color: var(--flood-sys-color-content-default); }
|
|
79
|
-
.flood-root .flood-table :is(th, td) { text-align: start; vertical-align:
|
|
80
|
+
.flood-root .flood-table :is(th, td) { text-align: start; vertical-align: middle; padding: var(--flood-data-padding) var(--flood-sys-space-3); overflow-wrap: break-word; }
|
|
81
|
+
.flood-root .flood-table :is(th, td)[data-wrap="anywhere"] { overflow-wrap: anywhere; }
|
|
82
|
+
.flood-root .flood-table[data-cell-vertical-align="top"] :is(th, td) { vertical-align: top; }
|
|
83
|
+
.flood-root .flood-table[data-cell-vertical-align="middle"] :is(th, td) { vertical-align: middle; }
|
|
84
|
+
.flood-root .flood-table[data-cell-vertical-align="bottom"] :is(th, td) { vertical-align: bottom; }
|
|
80
85
|
.flood-root .flood-table th { font-weight: var(--flood-sys-type-label-weight); }
|
|
81
86
|
.flood-root .flood-table thead th { color: var(--flood-sys-color-content-subtle); border-block-end: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
|
|
82
87
|
.flood-root .flood-table tbody > tr:not(:last-child) > :is(th, td) { border-block-end: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
|
|
@@ -103,7 +108,7 @@
|
|
|
103
108
|
.flood-root .flood-indicator[data-tone="warning"] { --flood-indicator-color: var(--flood-sys-color-feedback-warning); }
|
|
104
109
|
.flood-root .flood-indicator[data-tone="success"] { --flood-indicator-color: var(--flood-sys-color-feedback-success); }
|
|
105
110
|
.flood-root .flood-indicator[data-tone="info"] { --flood-indicator-color: var(--flood-sys-color-feedback-info); }
|
|
106
|
-
.flood-root .flood-indicator__caption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--flood-sys-space-3); margin-block-end: var(--flood-sys-space-2); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap:
|
|
111
|
+
.flood-root .flood-indicator__caption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--flood-sys-space-3); margin-block-end: var(--flood-sys-space-2); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
107
112
|
.flood-root .flood-indicator__value { color: var(--flood-sys-color-content-subtle); text-align: end; font-variant-numeric: tabular-nums; }
|
|
108
113
|
.flood-root .flood-indicator__track { display: flex; block-size: var(--flood-indicator-size); overflow: hidden; border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-indicator-track); }
|
|
109
114
|
.flood-root .flood-indicator__fill { display: block; flex: none; block-size: 100%; border-radius: inherit; background: var(--flood-indicator-color); transition: inline-size var(--flood-sys-motion-duration-normal) var(--flood-sys-motion-easing); }
|
|
@@ -116,7 +121,7 @@
|
|
|
116
121
|
.flood-root .flood-alert[data-tone="error"] { --flood-alert-color: var(--flood-sys-color-feedback-error); }
|
|
117
122
|
.flood-root .flood-alert__icon { display: inline-flex; flex: none; inline-size: var(--flood-sys-control-md-icon-size); block-size: var(--flood-sys-control-md-icon-size); color: var(--flood-alert-color); }
|
|
118
123
|
.flood-root .flood-alert__icon > svg { inline-size: 100%; block-size: 100%; }
|
|
119
|
-
.flood-root .flood-alert__content { flex: 1 1 auto; min-inline-size: 0; overflow-wrap:
|
|
124
|
+
.flood-root .flood-alert__content { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: break-word; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
120
125
|
.flood-root .flood-alert__title { margin: 0; font: inherit; font-weight: var(--flood-sys-type-label-weight); }
|
|
121
126
|
.flood-root .flood-alert__title + .flood-alert__body { margin-block-start: var(--flood-sys-space-1); }
|
|
122
127
|
.flood-root .flood-alert__body { color: var(--flood-sys-color-content-subtle); }
|
|
@@ -135,7 +140,7 @@
|
|
|
135
140
|
.flood-root :is(.flood-alert__icon, .flood-alert__body) { color: CanvasText; }
|
|
136
141
|
}
|
|
137
142
|
|
|
138
|
-
.flood-root .flood-badge { --flood-badge-color: var(--flood-sys-color-content-default); display: inline-flex; align-items: center; vertical-align: middle; gap: var(--flood-sys-space-1); box-sizing: border-box; max-inline-size: 100%; min-inline-size: 0; padding: var(--flood-sys-space-1) var(--flood-sys-space-2); border: var(--flood-sys-stroke-width) solid transparent; border-radius: var(--flood-sys-radius-action); background: color-mix(in srgb, var(--flood-badge-color) 9%, var(--flood-sys-color-surface-canvas)); color: var(--flood-badge-color); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); font-weight: var(--flood-sys-type-label-weight); letter-spacing: var(--flood-sys-type-helper-tracking); overflow-wrap:
|
|
143
|
+
.flood-root .flood-badge { --flood-badge-color: var(--flood-sys-color-content-default); display: inline-flex; align-items: center; vertical-align: middle; gap: var(--flood-sys-space-1); box-sizing: border-box; max-inline-size: 100%; min-inline-size: 0; padding: var(--flood-sys-space-1) var(--flood-sys-space-2); border: var(--flood-sys-stroke-width) solid transparent; border-radius: var(--flood-sys-radius-action); background: color-mix(in srgb, var(--flood-badge-color) 9%, var(--flood-sys-color-surface-canvas)); color: var(--flood-badge-color); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); font-weight: var(--flood-sys-type-label-weight); letter-spacing: var(--flood-sys-type-helper-tracking); overflow-wrap: break-word; }
|
|
139
144
|
.flood-root .flood-badge[data-size="sm"] { padding-block: 0; }
|
|
140
145
|
.flood-root .flood-badge[data-size="lg"] { padding-inline: var(--flood-sys-space-3); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
141
146
|
.flood-root .flood-badge[data-tone="accent"] { --flood-badge-color: var(--flood-sys-color-accent-content); }
|
|
@@ -178,13 +183,13 @@
|
|
|
178
183
|
.flood-root .flood-tabs .flood-tab:focus-visible { outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
|
|
179
184
|
.flood-root .flood-tabs .flood-tab:disabled { color: var(--flood-sys-color-field-disabled-content); }
|
|
180
185
|
.flood-root .flood-tabs[data-orientation="vertical"] .flood-tab { inline-size: 100%; white-space: normal; justify-content: flex-start; text-align: start; border-radius: 0; border-start-start-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); border-end-start-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); }
|
|
181
|
-
.flood-root .flood-tabs__panel { min-inline-size: 0; padding: var(--flood-sys-space-4); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap:
|
|
186
|
+
.flood-root .flood-tabs__panel { min-inline-size: 0; padding: var(--flood-sys-space-4); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
182
187
|
.flood-root .flood-tabs__panel[hidden] { display: none; }
|
|
183
188
|
.flood-root .flood-tabs__panel:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
|
|
184
189
|
.flood-root :is(.flood-breadcrumb, .flood-pagination) { min-inline-size: 0; max-inline-size: 100%; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
185
190
|
.flood-root :is(.flood-breadcrumb ol, .flood-pagination ul) { display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0; list-style: none; gap: var(--flood-sys-space-2); }
|
|
186
191
|
.flood-root .flood-breadcrumb { inline-size: max-content; }
|
|
187
|
-
.flood-root .flood-breadcrumb li { display: inline-flex; align-items: center; flex: 0 0 auto; inline-size: max-content; gap: var(--flood-sys-space-2); min-inline-size: 0; max-inline-size: 100%; overflow-wrap:
|
|
192
|
+
.flood-root .flood-breadcrumb li { display: inline-flex; align-items: center; flex: 0 0 auto; inline-size: max-content; gap: var(--flood-sys-space-2); min-inline-size: 0; max-inline-size: 100%; overflow-wrap: break-word; }
|
|
188
193
|
.flood-root .flood-breadcrumb li > :not(.flood-breadcrumb__separator) { min-inline-size: 0; }
|
|
189
194
|
.flood-root .flood-breadcrumb a { display: inline-flex; align-items: center; min-block-size: var(--flood-sys-control-sm-height); color: var(--flood-sys-color-content-subtle); text-decoration: none; }
|
|
190
195
|
.flood-root .flood-breadcrumb a:hover { text-decoration: underline; }
|
|
@@ -205,15 +210,17 @@
|
|
|
205
210
|
.flood-root :is(.flood-overlay-panel, .flood-dialog) { box-sizing: border-box; color: var(--flood-sys-color-content-default); background: var(--flood-sys-color-surface-overlay); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-field); font: inherit; text-align: start; }
|
|
206
211
|
.flood-root .flood-overlay-panel { position: fixed; inset: auto; margin: 0; max-inline-size: var(--flood-overlay-available-width, calc(100vw - 1rem)); max-block-size: var(--flood-overlay-available-height, calc(100dvh - 1rem)); padding: var(--flood-sys-space-4); gap: var(--flood-sys-space-2); overflow: auto; }
|
|
207
212
|
.flood-root .flood-overlay-panel[popover]:not(:popover-open) { display: none; }
|
|
208
|
-
.flood-root .flood-tooltip { inline-size: max-content; max-inline-size: min(20rem, var(--flood-overlay-available-width, calc(100vw - 1rem))); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); border-radius: var(--flood-sys-radius-field); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); overflow-wrap:
|
|
213
|
+
.flood-root .flood-tooltip { inline-size: max-content; max-inline-size: min(20rem, var(--flood-overlay-available-width, calc(100vw - 1rem))); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); border-radius: var(--flood-sys-radius-field); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); overflow-wrap: break-word; }
|
|
209
214
|
.flood-root .flood-popover { inline-size: 20rem; }
|
|
210
215
|
.flood-root .flood-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: var(--flood-sys-space-4); }
|
|
211
216
|
.flood-root .flood-overlay-close { flex: none; align-self: flex-start; }
|
|
212
|
-
.flood-root .flood-overlay-title { margin: 0; min-inline-size: 0; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); font-weight: var(--flood-sys-type-label-weight); overflow-wrap:
|
|
217
|
+
.flood-root .flood-overlay-title { margin: 0; min-inline-size: 0; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); font-weight: var(--flood-sys-type-label-weight); overflow-wrap: break-word; }
|
|
213
218
|
.flood-root .flood-overlay-body { margin-block-start: var(--flood-sys-space-3); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
214
219
|
.flood-root .flood-popover[data-chrome="minimal"] > .flood-overlay-body { margin-block-start:0; }
|
|
215
220
|
.flood-root .flood-overlay-description { margin: var(--flood-sys-space-2) 0 0; color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
216
221
|
.flood-root .flood-dialog { padding: var(--flood-sys-space-6); inline-size: min(32rem, calc(100% - var(--flood-sys-space-8))); max-inline-size: calc(100% - var(--flood-sys-space-8)); max-block-size: calc(100dvh - var(--flood-sys-space-8)); overflow: auto; }
|
|
222
|
+
.flood-root .flood-dialog > .flood-overlay-header > .flood-overlay-title { font-size: var(--flood-sys-type-dialog-title-size); line-height: var(--flood-sys-type-dialog-title-line-height); font-weight: var(--flood-sys-type-dialog-title-weight); letter-spacing: var(--flood-sys-type-dialog-title-tracking); }
|
|
223
|
+
.flood-root .flood-dialog > .flood-overlay-body { margin-block-start: var(--flood-sys-space-6); }
|
|
217
224
|
.flood-root .flood-dialog:not([open]) { display: none; }
|
|
218
225
|
.flood-root .flood-dialog::backdrop { background: color-mix(in srgb, var(--flood-sys-color-surface-canvas) 72%, transparent); }
|
|
219
226
|
.flood-root .flood-popover:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: 0; }
|
|
@@ -224,7 +231,7 @@
|
|
|
224
231
|
.flood-root .flood-disclosure__title { min-inline-size: 0; }
|
|
225
232
|
.flood-root .flood-disclosure__indicator { flex: none; inline-size: calc(var(--flood-control-icon) * .4); block-size: calc(var(--flood-control-icon) * .4); border-right: var(--flood-sys-stroke-width) solid currentColor; border-block-end: var(--flood-sys-stroke-width) solid currentColor; transform: rotate(45deg); transition: transform var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing); margin-inline: var(--flood-sys-space-1); }
|
|
226
233
|
.flood-root .flood-disclosure[data-open="true"] > .flood-disclosure__heading .flood-disclosure__indicator { transform: rotate(225deg); }
|
|
227
|
-
.flood-root .flood-disclosure__panel { padding: 0 var(--flood-control-padding) var(--flood-control-padding); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap:
|
|
234
|
+
.flood-root .flood-disclosure__panel { padding: 0 var(--flood-control-padding) var(--flood-control-padding); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
228
235
|
.flood-root .flood-disclosure__panel[hidden] { display: none; }
|
|
229
236
|
.flood-root .flood-accordion > .flood-disclosure { border: 0; border-radius: 0; background: transparent; }
|
|
230
237
|
.flood-root .flood-accordion > .flood-disclosure + .flood-disclosure { border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
|
|
@@ -259,7 +266,7 @@
|
|
|
259
266
|
box-sizing: border-box;
|
|
260
267
|
font-family: inherit;
|
|
261
268
|
min-inline-size: 0;
|
|
262
|
-
overflow-wrap:
|
|
269
|
+
overflow-wrap: break-word;
|
|
263
270
|
}
|
|
264
271
|
.flood-root :where(.flood-text, .flood-heading) {
|
|
265
272
|
margin: 0;
|
|
@@ -478,16 +485,17 @@
|
|
|
478
485
|
}
|
|
479
486
|
.flood-root .flood-select__menu::backdrop { background: transparent; pointer-events: none; }
|
|
480
487
|
.flood-root .flood-select__viewport { max-block-size: calc(var(--flood-sys-control-md-height) * 8 - var(--flood-sys-space-1) * 2 - var(--flood-sys-stroke-width) * 2); }
|
|
481
|
-
.flood-root .flood-select__option { display: flex; align-items: center; justify-content: space-between; gap: var(--flood-sys-space-2); min-block-size: var(--flood-sys-control-md-height); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); border-radius: max(0px, calc(var(--flood-menu-radius) - var(--flood-menu-padding) - var(--flood-menu-stroke))); cursor: pointer; box-sizing: border-box; overflow-wrap:
|
|
488
|
+
.flood-root .flood-select__option { display: flex; align-items: center; justify-content: space-between; gap: var(--flood-sys-space-2); min-block-size: var(--flood-sys-control-md-height); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); border-radius: max(0px, calc(var(--flood-menu-radius) - var(--flood-menu-padding) - var(--flood-menu-stroke))); cursor: pointer; box-sizing: border-box; overflow-wrap: break-word; }
|
|
482
489
|
.flood-root .flood-select__option[data-active="true"] { background: var(--flood-sys-color-selection-background); }
|
|
483
490
|
.flood-root .flood-select__option[aria-disabled="true"] { color: var(--flood-sys-color-field-disabled-content); cursor: not-allowed; }
|
|
484
491
|
.flood-root .flood-select__selected { flex: none; inline-size: var(--flood-sys-control-sm-icon-size); text-align: center; }
|
|
485
492
|
.flood-root .flood-select__group, .flood-root .flood-select__empty { padding: var(--flood-sys-space-2) var(--flood-sys-space-3); font-size: var(--flood-sys-type-label-size); color: var(--flood-sys-color-content-helper); }
|
|
486
493
|
.flood-root .flood-select__validation { display: block; margin-block-start: var(--flood-sys-space-2); color: var(--flood-sys-color-content-helper); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); }
|
|
487
494
|
.flood-root .flood-textarea { min-block-size: calc(var(--flood-control-height) * 3); resize: none; overflow: auto; }
|
|
488
|
-
.flood-root .flood-field { display: grid; gap: var(--flood-sys-space-
|
|
495
|
+
.flood-root .flood-field { display: grid; gap: var(--flood-sys-space-1); }
|
|
489
496
|
.flood-root .flood-fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; inline-size: 100%; }
|
|
490
497
|
.flood-root .flood-legend { float: inline-start; inline-size: 100%; padding: 0; margin-block-end: var(--flood-sys-space-3); font-size: var(--flood-sys-type-label-size); line-height: var(--flood-sys-type-label-line-height); font-weight: var(--flood-sys-type-label-weight); letter-spacing: var(--flood-sys-type-label-tracking); }
|
|
498
|
+
.flood-root .flood-fieldset[data-legend-size="section"] > .flood-legend { font-size: var(--flood-sys-type-group-title-size); line-height: var(--flood-sys-type-group-title-line-height); font-weight: var(--flood-sys-type-group-title-weight); letter-spacing: var(--flood-sys-type-group-title-tracking); margin-block-end: var(--flood-sys-space-4); }
|
|
491
499
|
.flood-root .flood-fieldset__body { clear: both; display: grid; gap: var(--flood-sys-space-3); min-inline-size: 0; }
|
|
492
500
|
.flood-root .flood-choice-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-inline-size: 0; }
|
|
493
501
|
.flood-root .flood-choice-group > .flood-choice { min-block-size: var(--flood-sys-control-sm-height); }
|
|
@@ -500,7 +508,7 @@
|
|
|
500
508
|
The real legend and its React children remain mounted for group semantics. */
|
|
501
509
|
.flood-root .flood-fieldset[data-hide-label="true"] > .flood-legend.flood-visually-hidden--focusable:not(:focus-within):not([data-flood-focus-held]) { float: none; inline-size: 1px; block-size: 1px; margin: 0; min-inline-size: 0; min-block-size: 0; max-inline-size: 1px; max-block-size: 1px; line-height: 1px; }
|
|
502
510
|
.flood-root .flood-fieldset:disabled :is(.flood-legend, .flood-label) { color: var(--flood-sys-color-field-disabled-content); }
|
|
503
|
-
.flood-root .flood-label { color: var(--flood-sys-color-content-
|
|
511
|
+
.flood-root .flood-label { color: var(--flood-sys-color-content-default); font-size: var(--flood-sys-type-field-label-size); line-height: var(--flood-sys-type-field-label-line-height); font-weight: var(--flood-sys-type-field-label-weight); letter-spacing: var(--flood-sys-type-field-label-tracking); }
|
|
504
512
|
.flood-root :where(.flood-hint, .flood-error) { font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); font-weight: var(--flood-sys-type-helper-weight); letter-spacing: var(--flood-sys-type-helper-tracking); }
|
|
505
513
|
.flood-root .flood-hint { color: var(--flood-sys-color-content-helper); }
|
|
506
514
|
.flood-root .flood-error { color: var(--flood-sys-color-content-helper); }
|
|
@@ -830,7 +838,7 @@
|
|
|
830
838
|
.flood-root .flood-tag { --flood-tag-height: var(--flood-sys-control-xs-height); display: inline-flex; align-items: center; gap: var(--flood-sys-space-1); box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; min-block-size: var(--flood-tag-height); padding: calc(var(--flood-sys-space-1) / 2) var(--flood-sys-space-2); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-surface-raised); color: var(--flood-sys-color-content-default); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); letter-spacing: var(--flood-sys-type-compact-tracking); vertical-align: middle; }
|
|
831
839
|
.flood-root .flood-tag[data-size="sm"] { --flood-tag-height: var(--flood-sys-control-2xs-height); font-size: var(--flood-sys-type-helper-size); }
|
|
832
840
|
.flood-root .flood-tag[data-size="lg"] { --flood-tag-height: var(--flood-sys-control-sm-height); font-size: var(--flood-sys-type-body-size); }
|
|
833
|
-
.flood-root .flood-tag__label { min-inline-size: 0; overflow-wrap:
|
|
841
|
+
.flood-root .flood-tag__label { min-inline-size: 0; overflow-wrap: break-word; }
|
|
834
842
|
.flood-root .flood-tag:has(> .flood-tag__remove) { padding-inline-end: calc(var(--flood-sys-space-1) / 2); }
|
|
835
843
|
.flood-root .flood-tag > .flood-tag__remove { --flood-control-height: calc(var(--flood-tag-height) - var(--flood-sys-space-1) - 2 * var(--flood-sys-stroke-width)); min-block-size: var(--flood-control-height); min-inline-size: var(--flood-control-height); flex: none; padding: 0; border-radius: var(--flood-sys-radius-action); }
|
|
836
844
|
.flood-root .flood-tag[data-disabled="true"] { color: var(--flood-sys-color-content-subtle); }
|
|
@@ -886,7 +894,7 @@
|
|
|
886
894
|
|
|
887
895
|
.flood-root .flood-alert-dialog { inline-size: min(26rem, calc(100% - var(--flood-sys-space-8))); }
|
|
888
896
|
.flood-root .flood-alert-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--flood-sys-space-2); margin-block-start: var(--flood-sys-space-6); }
|
|
889
|
-
.flood-root .flood-alert-dialog__actions > .flood-button { max-inline-size: 100%; overflow-wrap:
|
|
897
|
+
.flood-root .flood-alert-dialog__actions > .flood-button { max-inline-size: 100%; overflow-wrap: break-word; }
|
|
890
898
|
@media (max-width: 32rem) {
|
|
891
899
|
.flood-root .flood-alert-dialog__actions > .flood-button { inline-size: 100%; }
|
|
892
900
|
}
|
|
@@ -939,7 +947,7 @@
|
|
|
939
947
|
.flood-root .flood-avatar-group > li + li { margin-inline-start: calc(-1 * var(--flood-sys-space-2)); }
|
|
940
948
|
.flood-root .flood-avatar-group .flood-avatar { border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); box-shadow: 0 0 0 var(--flood-sys-stroke-width) var(--flood-sys-color-surface-canvas); }
|
|
941
949
|
.flood-root .flood-avatar-group__overflow { color: var(--flood-sys-color-content-default); background: var(--flood-sys-color-surface-raised); font-size: var(--flood-sys-type-helper-size); font-variant-numeric: tabular-nums; }
|
|
942
|
-
.flood-root .flood-status-indicator { --flood-status-color: var(--flood-sys-color-content-subtle); display: inline-flex; align-items: center; gap: var(--flood-sys-space-2); max-inline-size: 100%; min-inline-size: 0; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap:
|
|
950
|
+
.flood-root .flood-status-indicator { --flood-status-color: var(--flood-sys-color-content-subtle); display: inline-flex; align-items: center; gap: var(--flood-sys-space-2); max-inline-size: 100%; min-inline-size: 0; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
943
951
|
.flood-root .flood-status-indicator[data-size="sm"] { font-size: var(--flood-sys-type-helper-size); }
|
|
944
952
|
.flood-root .flood-status-indicator[data-size="lg"] { font-size: var(--flood-sys-type-body-size); }
|
|
945
953
|
.flood-root .flood-status-indicator[data-tone="accent"] { --flood-status-color: var(--flood-sys-color-accent-content); }
|
|
@@ -950,18 +958,18 @@
|
|
|
950
958
|
.flood-root .flood-status-indicator__dot { inline-size: .5em; block-size: .5em; flex: none; border-radius: var(--flood-sys-radius-action); background: var(--flood-status-color); }
|
|
951
959
|
.flood-root .flood-figure { display: grid; gap: var(--flood-sys-space-2); margin: 0; min-inline-size: 0; }
|
|
952
960
|
.flood-root .flood-figure > * { max-inline-size: 100%; min-inline-size: 0; }
|
|
953
|
-
.flood-root .flood-figure__caption { font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); color: var(--flood-sys-color-content-subtle); overflow-wrap:
|
|
961
|
+
.flood-root .flood-figure__caption { font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); color: var(--flood-sys-color-content-subtle); overflow-wrap: break-word; }
|
|
954
962
|
.flood-root .flood-blockquote { margin: 0; border-inline-start: calc(var(--flood-sys-stroke-width) * 2) solid var(--flood-sys-color-border-decorative); padding-inline-start: var(--flood-sys-space-4); min-inline-size: 0; }
|
|
955
|
-
.flood-root .flood-blockquote__quote { font-size: var(--flood-sys-type-body-size); line-height: var(--flood-sys-type-body-line-height); overflow-wrap:
|
|
963
|
+
.flood-root .flood-blockquote__quote { font-size: var(--flood-sys-type-body-size); line-height: var(--flood-sys-type-body-line-height); overflow-wrap: break-word; }
|
|
956
964
|
.flood-root .flood-blockquote__quote > :first-child { margin-block-start: 0; }
|
|
957
965
|
.flood-root .flood-blockquote__quote > :last-child { margin-block-end: 0; }
|
|
958
|
-
.flood-root .flood-blockquote__attribution { margin-block-start: var(--flood-sys-space-2); color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); overflow-wrap:
|
|
966
|
+
.flood-root .flood-blockquote__attribution { margin-block-start: var(--flood-sys-space-2); color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); overflow-wrap: break-word; }
|
|
959
967
|
.flood-root .flood-inline-code { border-radius: var(--flood-sys-radius-field); background: var(--flood-sys-color-surface-raised); color: var(--flood-sys-color-content-default); font-family: var(--flood-sys-font-mono); font-size: .875em; line-height: inherit; padding: .125em var(--flood-sys-space-2); box-decoration-break: clone; -webkit-box-decoration-break: clone; overflow-wrap: anywhere; white-space: break-spaces; }
|
|
960
968
|
.flood-root .flood-inline-code[data-size="sm"] { font-size: var(--flood-sys-type-helper-size); }
|
|
961
969
|
.flood-root .flood-inline-code[data-size="lg"] { font-size: var(--flood-sys-type-body-size); }
|
|
962
970
|
.flood-root .flood-inline-code[data-wrap="false"] { white-space: pre; overflow-wrap: normal; }
|
|
963
971
|
.flood-root .flood-metric { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; margin: 0; }
|
|
964
|
-
.flood-root .flood-metric > dd { margin: 0; min-inline-size: 0; overflow-wrap:
|
|
972
|
+
.flood-root .flood-metric > dd { margin: 0; min-inline-size: 0; overflow-wrap: break-word; }
|
|
965
973
|
.flood-root .flood-metric__label { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-label-size); line-height: var(--flood-sys-type-label-line-height); }
|
|
966
974
|
.flood-root .flood-metric__value { font-size: var(--flood-sys-type-large-size); line-height: var(--flood-sys-type-large-line-height); font-weight: var(--flood-sys-type-large-weight); letter-spacing: var(--flood-sys-type-large-tracking); font-variant-numeric: tabular-nums; }
|
|
967
975
|
.flood-root .flood-metric[data-size="sm"] .flood-metric__value { font-size: var(--flood-sys-type-page-size); line-height: var(--flood-sys-type-page-line-height); }
|
|
@@ -983,8 +991,8 @@
|
|
|
983
991
|
.flood-root .flood-timeline__item[data-state="current"] .flood-timeline__marker > span { inline-size: .375rem; block-size: .375rem; background: currentColor; border-radius: var(--flood-sys-radius-action); }
|
|
984
992
|
.flood-root .flood-timeline__item[data-state="complete"] .flood-timeline__marker { color: var(--flood-sys-color-feedback-success); }
|
|
985
993
|
.flood-root .flood-timeline__content { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; }
|
|
986
|
-
.flood-root .flood-timeline__title { font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); font-weight: var(--flood-sys-type-label-weight); overflow-wrap:
|
|
987
|
-
.flood-root .flood-timeline__description { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap:
|
|
994
|
+
.flood-root .flood-timeline__title { font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); font-weight: var(--flood-sys-type-label-weight); overflow-wrap: break-word; }
|
|
995
|
+
.flood-root .flood-timeline__description { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
988
996
|
.flood-root .flood-timeline__time { color: var(--flood-sys-color-content-helper); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); }
|
|
989
997
|
.flood-root :is(.flood-avatar-group, .flood-status-indicator, .flood-figure, .flood-blockquote, .flood-inline-code, .flood-metric, .flood-timeline)[hidden] { display: none; }
|
|
990
998
|
@media (forced-colors: active) {
|
|
@@ -1004,8 +1012,8 @@
|
|
|
1004
1012
|
.flood-root .flood-navigation-list__link:hover { background: var(--flood-sys-color-surface-raised); }
|
|
1005
1013
|
.flood-root .flood-navigation-list__link[aria-current="page"] { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
1006
1014
|
.flood-root :is(.flood-navigation-list__text,.flood-steps__text) { display: grid; min-inline-size: 0; gap: var(--flood-sys-space-1); }
|
|
1007
|
-
.flood-root :is(.flood-navigation-list__label,.flood-steps__title) { overflow-wrap:
|
|
1008
|
-
.flood-root :is(.flood-navigation-list__description,.flood-steps__description) { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); overflow-wrap:
|
|
1015
|
+
.flood-root :is(.flood-navigation-list__label,.flood-steps__title) { overflow-wrap: break-word; }
|
|
1016
|
+
.flood-root :is(.flood-navigation-list__description,.flood-steps__description) { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); overflow-wrap: break-word; }
|
|
1009
1017
|
.flood-root .flood-navigation-list__link > .flood-icon { flex: none; }
|
|
1010
1018
|
.flood-root :is(.flood-navigation-list__link,.flood-steps__action):focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: var(--flood-sys-focus-offset); }
|
|
1011
1019
|
|
|
@@ -1028,8 +1036,8 @@
|
|
|
1028
1036
|
.flood-root .flood-section { min-inline-size: 0; }
|
|
1029
1037
|
.flood-root .flood-section__header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--flood-sys-space-4); }
|
|
1030
1038
|
.flood-root .flood-section__heading { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; flex: 1 1 12rem; }
|
|
1031
|
-
.flood-root .flood-section__title { margin: 0; overflow-wrap:
|
|
1032
|
-
.flood-root .flood-section__description { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap:
|
|
1039
|
+
.flood-root .flood-section__title { margin: 0; overflow-wrap: break-word; }
|
|
1040
|
+
.flood-root .flood-section__description { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
|
|
1033
1041
|
.flood-root .flood-section__description > :first-child { margin-block-start: 0; }
|
|
1034
1042
|
.flood-root .flood-section__description > :last-child { margin-block-end: 0; }
|
|
1035
1043
|
.flood-root .flood-section__actions { display: flex; flex-wrap: wrap; gap: var(--flood-sys-space-2); max-inline-size: 100%; }
|
|
@@ -1040,7 +1048,7 @@
|
|
|
1040
1048
|
.flood-root .flood-split__layout[data-side="start"], .flood-root .flood-split__layout[data-ratio="aside"] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
|
|
1041
1049
|
.flood-root .flood-split__layout[data-side="start"][data-ratio="aside"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
|
|
1042
1050
|
.flood-root .flood-split__layout[data-ratio="balanced"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
1043
|
-
.flood-root :is(.flood-split__main,.flood-split__aside) { min-inline-size: 0; overflow-wrap:
|
|
1051
|
+
.flood-root :is(.flood-split__main,.flood-split__aside) { min-inline-size: 0; overflow-wrap: break-word; }
|
|
1044
1052
|
@container flood-split (max-width: 30rem) { .flood-root .flood-split__layout[data-collapse="sm"] { grid-template-columns: minmax(0, 1fr); } }
|
|
1045
1053
|
@container flood-split (max-width: 48rem) { .flood-root .flood-split__layout[data-collapse="md"] { grid-template-columns: minmax(0, 1fr); } }
|
|
1046
1054
|
@container flood-split (max-width: 64rem) { .flood-root .flood-split__layout[data-collapse="lg"] { grid-template-columns: minmax(0, 1fr); } }
|
|
@@ -1068,7 +1076,7 @@
|
|
|
1068
1076
|
.flood-root .flood-list-box__feedback { margin-block-start:var(--flood-sys-space-1); }
|
|
1069
1077
|
.flood-root .flood-list-box[data-appearance="plain"] { max-block-size:none; overflow:visible; padding:0; border:0; border-radius:0; background:transparent; }
|
|
1070
1078
|
.flood-root .flood-list-box__option { display: flex; align-items: center; justify-content: space-between; gap: var(--flood-sys-space-2); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); min-block-size: var(--flood-control-height); box-sizing: border-box; border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-sys-space-1) - var(--flood-sys-stroke-width))); cursor: pointer; font-size: var(--flood-control-text); line-height: var(--flood-control-line); }
|
|
1071
|
-
.flood-root .flood-list-box__copy { display: grid; min-inline-size: 0; gap: var(--flood-sys-space-1); overflow-wrap:
|
|
1079
|
+
.flood-root .flood-list-box__copy { display: grid; min-inline-size: 0; gap: var(--flood-sys-space-1); overflow-wrap: break-word; }
|
|
1072
1080
|
.flood-root .flood-list-box__description { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); }
|
|
1073
1081
|
.flood-root .flood-list-box__check { flex: none; inline-size: var(--flood-control-icon); text-align: center; }
|
|
1074
1082
|
.flood-root .flood-list-box__option[aria-selected="true"] { background: var(--flood-sys-color-selection-background); }
|
|
@@ -1129,7 +1137,7 @@
|
|
|
1129
1137
|
.flood-root .flood-toast-region[hidden] { display: none; }
|
|
1130
1138
|
.flood-root .flood-toast-region__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--flood-sys-space-2); }
|
|
1131
1139
|
.flood-root .flood-toast { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: var(--flood-sys-space-2); padding: var(--flood-sys-space-3); background: var(--flood-sys-color-surface-floating); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-floating); border-radius: var(--flood-sys-radius-field); box-shadow: 0 var(--flood-sys-effect-floating-shadow-offset) var(--flood-sys-effect-floating-shadow-blur) var(--flood-sys-color-shadow-floating); }
|
|
1132
|
-
.flood-root .flood-toast__message { min-inline-size: 0; align-self: center; overflow-wrap:
|
|
1140
|
+
.flood-root .flood-toast__message { min-inline-size: 0; align-self: center; overflow-wrap: break-word; }
|
|
1133
1141
|
.flood-root .flood-toast__title { font-size: var(--flood-sys-type-compact-size); font-weight: var(--flood-sys-type-label-weight); }
|
|
1134
1142
|
.flood-root .flood-toast__description { margin-block-start: var(--flood-sys-space-1); color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); }
|
|
1135
1143
|
.flood-root .flood-toast__title::before { content: ""; display: inline-block; vertical-align: middle; inline-size: .375rem; block-size: .375rem; border-radius: var(--flood-sys-radius-action); margin-inline-end: var(--flood-sys-space-2); background: var(--flood-sys-color-content-subtle); }
|
|
@@ -1144,7 +1152,7 @@
|
|
|
1144
1152
|
.flood-root .flood-editable[hidden] { display: none; }
|
|
1145
1153
|
.flood-root .flood-editable > .flood-label { margin: 0; }
|
|
1146
1154
|
.flood-root .flood-editable__preview { justify-content: space-between; min-inline-size: 0; inline-size: 100%; text-align: start; gap: var(--flood-sys-space-2); }
|
|
1147
|
-
.flood-root .flood-editable__value { flex: 1 1 0; min-inline-size: 0; overflow-wrap:
|
|
1155
|
+
.flood-root .flood-editable__value { flex: 1 1 0; min-inline-size: 0; overflow-wrap: break-word; }
|
|
1148
1156
|
.flood-root .flood-editable__value[data-empty] { color: var(--flood-sys-color-content-subtle); }
|
|
1149
1157
|
.flood-root .flood-editable__preview > .flood-icon { flex: none; color: var(--flood-sys-color-content-subtle); }
|
|
1150
1158
|
.flood-root .flood-editable .flood-input-group:has(.flood-editable__actions) { padding-inline-end: calc(var(--flood-group-inset) - var(--flood-group-stroke)); }
|
|
@@ -1165,7 +1173,7 @@
|
|
|
1165
1173
|
.flood-root .flood-command-list[hidden] { display: none; }
|
|
1166
1174
|
.flood-root .flood-command-list > .flood-command-list__surface { border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-field); }
|
|
1167
1175
|
.flood-root .flood-command-list__viewport { border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-sys-space-1) - var(--flood-sys-stroke-width))); }
|
|
1168
|
-
.flood-root .flood-command-list__option { box-sizing: border-box; display: grid; align-content: center; min-inline-size: 0; min-block-size: var(--flood-control-height); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); gap: calc(var(--flood-sys-space-1) / 2); border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-sys-space-1) - var(--flood-sys-stroke-width))); color: var(--flood-sys-color-content-default); font-size: var(--flood-control-text); line-height: var(--flood-control-line); overflow-wrap:
|
|
1176
|
+
.flood-root .flood-command-list__option { box-sizing: border-box; display: grid; align-content: center; min-inline-size: 0; min-block-size: var(--flood-control-height); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); gap: calc(var(--flood-sys-space-1) / 2); border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-sys-space-1) - var(--flood-sys-stroke-width))); color: var(--flood-sys-color-content-default); font-size: var(--flood-control-text); line-height: var(--flood-control-line); overflow-wrap: break-word; cursor: pointer; }
|
|
1169
1177
|
.flood-root .flood-command-list__option[data-active="true"] { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
1170
1178
|
.flood-root .flood-command-list__description { font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); color: var(--flood-sys-color-content-subtle); }
|
|
1171
1179
|
.flood-root .flood-command-list__option[aria-disabled="true"], .flood-root .flood-command-list__option[aria-disabled="true"] .flood-command-list__description { color: var(--flood-sys-color-field-disabled-content); cursor: default; }
|
|
@@ -1252,7 +1260,7 @@
|
|
|
1252
1260
|
.flood-root .flood-calendar { box-sizing:border-box; display:grid; gap:var(--flood-sys-space-2); inline-size:min(100%,22rem); min-inline-size:0; padding:var(--flood-sys-space-4); border:var(--flood-sys-stroke-width) solid var(--flood-sys-color-field-border); border-radius:var(--flood-sys-radius-surface); background:var(--flood-sys-color-surface-raised); color:var(--flood-sys-color-content-default); container-type:inline-size; container-name:flood-calendar; }
|
|
1253
1261
|
.flood-root .flood-calendar[hidden] { display:none; }
|
|
1254
1262
|
.flood-root .flood-calendar__header { display:flex; align-items:center; justify-content:space-between; gap:var(--flood-sys-space-2); min-inline-size:0; }
|
|
1255
|
-
.flood-root .flood-calendar__month { font-size:var(--flood-sys-type-label-size); line-height:var(--flood-sys-type-label-line-height); font-weight:var(--flood-sys-type-label-weight); overflow-wrap:
|
|
1263
|
+
.flood-root .flood-calendar__month { font-size:var(--flood-sys-type-label-size); line-height:var(--flood-sys-type-label-line-height); font-weight:var(--flood-sys-type-label-weight); overflow-wrap: break-word; }
|
|
1256
1264
|
.flood-root .flood-calendar__month { display:flex; align-items:center; min-inline-size:0; gap:0; }
|
|
1257
1265
|
.flood-root .flood-calendar__month > .flood-button { --flood-action-rest:transparent; padding-inline:var(--flood-sys-space-2); min-inline-size:0; }
|
|
1258
1266
|
.flood-root .flood-calendar__body { --flood-calendar-cell-height:var(--flood-sys-control-sm-height); min-block-size:calc(6 * var(--flood-calendar-cell-height) + 6 * var(--flood-sys-space-1) + 1.5rem); display:grid; }
|
|
@@ -1285,7 +1293,7 @@
|
|
|
1285
1293
|
}
|
|
1286
1294
|
@media(forced-colors:active) { .flood-root .flood-calendar { background:Canvas; color:CanvasText; border-color:CanvasText; } .flood-root .flood-calendar__day[data-selected] { background:Highlight; color:HighlightText; forced-color-adjust:none; } .flood-root .flood-calendar__day:focus-visible { border-color:Highlight; } .flood-root .flood-calendar__day[data-selected]:focus-visible { border-color:CanvasText; } .flood-root .flood-calendar__day[aria-disabled="true"],.flood-root .flood-calendar__day:disabled { color:GrayText; } }
|
|
1287
1295
|
|
|
1288
|
-
.flood-root .flood-date-picker__panel { inline-size:min(var(--flood-date-picker-width,22rem),var(--flood-overlay-available-width,calc(100dvw - 1rem))); padding:var(--flood-sys-space-3); }
|
|
1296
|
+
.flood-root .flood-date-picker__panel { inline-size:min(max(var(--flood-date-picker-width,22rem),20rem),var(--flood-overlay-available-width,calc(100dvw - 1rem))); padding:var(--flood-sys-space-3); }
|
|
1289
1297
|
.flood-root .flood-date-picker__panel > .flood-overlay-header { display:none; }
|
|
1290
1298
|
.flood-root .flood-date-picker__panel > .flood-overlay-body { margin-block-start:0; }
|
|
1291
1299
|
.flood-root .flood-date-picker__panel .flood-calendar { inline-size:100%; padding:0; border:0; border-radius:0; background:transparent; }
|
|
@@ -1295,7 +1303,7 @@
|
|
|
1295
1303
|
.flood-root .flood-error-summary__title { font-weight:var(--flood-sys-type-label-weight); }
|
|
1296
1304
|
.flood-root .flood-error-summary__description { margin-block-start:var(--flood-sys-space-1); }
|
|
1297
1305
|
.flood-root .flood-error-summary .flood-error-summary__list { margin-block-start:var(--flood-sys-space-2); margin-block-end:0; }
|
|
1298
|
-
.flood-root .flood-error-summary__list .flood-link { overflow-wrap:
|
|
1306
|
+
.flood-root .flood-error-summary__list .flood-link { overflow-wrap: break-word; }
|
|
1299
1307
|
@media(forced-colors:active) { .flood-root .flood-error-summary:focus { outline-color:Highlight; } }
|
|
1300
1308
|
|
|
1301
1309
|
.flood-root .flood-resizable-panels { --flood-resize-track: var(--flood-sys-space-3); box-sizing: border-box; display: grid; min-inline-size: 0; min-block-size: 0; inline-size: 100%; grid-template-columns: minmax(0, var(--flood-main-weight)) var(--flood-resize-track) minmax(0, var(--flood-secondary-weight)); }
|
|
@@ -1371,8 +1379,8 @@
|
|
|
1371
1379
|
.flood-root .flood-tree__chevron[data-expanded] { rotate:90deg; }
|
|
1372
1380
|
.flood-root .flood-tree[data-tree-direction="rtl"] .flood-tree__chevron:not([data-expanded]) { rotate:180deg; }
|
|
1373
1381
|
.flood-root .flood-tree__text { display:grid; gap:var(--flood-sys-space-1); min-inline-size:0; }
|
|
1374
|
-
.flood-root .flood-tree__label { min-inline-size:0; overflow-wrap:
|
|
1375
|
-
.flood-root .flood-tree__description { color:var(--flood-sys-color-content-subtle); font-size:var(--flood-sys-type-helper-size); line-height:var(--flood-sys-type-helper-line-height); overflow-wrap:
|
|
1382
|
+
.flood-root .flood-tree__label { min-inline-size:0; overflow-wrap: break-word; }
|
|
1383
|
+
.flood-root .flood-tree__description { color:var(--flood-sys-color-content-subtle); font-size:var(--flood-sys-type-helper-size); line-height:var(--flood-sys-type-helper-line-height); overflow-wrap: break-word; }
|
|
1376
1384
|
.flood-root .flood-tree__item[data-disabled]>.flood-tree__row { color:var(--flood-sys-color-field-disabled-content); }
|
|
1377
1385
|
.flood-root .flood-tree__item[data-disabled]>.flood-tree__row:hover { background:transparent; }
|
|
1378
1386
|
.flood-root .flood-tree__item[data-disabled]>.flood-tree__row .flood-tree__disclosure { cursor:default; }
|
|
@@ -1392,7 +1400,7 @@
|
|
|
1392
1400
|
.flood-root .flood-navigation-tree__text { display:flex; flex:1; justify-content:flex-start; align-items:center; gap:var(--flood-sys-space-2); min-inline-size:0; min-block-size:var(--flood-navigation-row); box-sizing:border-box; white-space:normal; text-align:start; color:var(--flood-sys-color-content-default); }
|
|
1393
1401
|
.flood-root .flood-navigation-tree__text { padding-inline:var(--flood-navigation-padding); font-size:var(--flood-navigation-text); line-height:var(--flood-navigation-line); font-weight:var(--flood-sys-type-control-weight); letter-spacing:var(--flood-sys-type-control-tracking); }
|
|
1394
1402
|
.flood-root .flood-navigation-tree__text[aria-disabled] { color:var(--flood-sys-color-field-disabled-content); }
|
|
1395
|
-
.flood-root .flood-navigation-tree__label { overflow-wrap:
|
|
1403
|
+
.flood-root .flood-navigation-tree__label { overflow-wrap: break-word; min-inline-size:0; }
|
|
1396
1404
|
.flood-root .flood-navigation-tree__row .flood-navigation-tree__disclosure { flex:none; }
|
|
1397
1405
|
.flood-root .flood-navigation-tree__disclosure svg { rotate:0deg; }
|
|
1398
1406
|
.flood-root .flood-navigation-tree:dir(rtl) .flood-navigation-tree__disclosure svg { rotate:180deg; }
|
|
@@ -1451,10 +1459,10 @@
|
|
|
1451
1459
|
.flood-root .flood-data-list[hidden],.flood-root .flood-data-list-item[hidden] { display:none; }
|
|
1452
1460
|
.flood-root .flood-data-list-item__media { flex:none; display:flex; align-items:center; }
|
|
1453
1461
|
.flood-root .flood-data-list-item__copy { flex:1; min-inline-size:0; display:grid; gap:var(--flood-sys-space-1); }
|
|
1454
|
-
.flood-root .flood-data-list-item__title { font-weight:500; overflow-wrap:
|
|
1455
|
-
.flood-root .flood-data-list-item__description { color:var(--flood-sys-color-content-subtle); overflow-wrap:
|
|
1462
|
+
.flood-root .flood-data-list-item__title { font-weight:500; overflow-wrap: break-word; }
|
|
1463
|
+
.flood-root .flood-data-list-item__description { color:var(--flood-sys-color-content-subtle); overflow-wrap: break-word; }
|
|
1456
1464
|
.flood-root .flood-data-list-item__trailing { display:flex; align-items:center; gap:var(--flood-sys-space-3); flex-wrap:wrap; justify-content:flex-end; min-inline-size:0; max-inline-size:50%; }
|
|
1457
|
-
.flood-root .flood-data-list-item__metadata { color:var(--flood-sys-color-content-subtle); font-size:var(--flood-sys-type-helper-size); overflow-wrap:
|
|
1465
|
+
.flood-root .flood-data-list-item__metadata { color:var(--flood-sys-color-content-subtle); font-size:var(--flood-sys-type-helper-size); overflow-wrap: break-word; }
|
|
1458
1466
|
.flood-root .flood-data-list-item__actions { display:flex; align-items:center; gap:var(--flood-sys-space-1); }
|
|
1459
1467
|
.flood-root .flood-choice-card { box-sizing:border-box; display:flex; align-items:flex-start; inline-size:100%; min-inline-size:0; gap:var(--flood-sys-space-3); padding:var(--flood-sys-space-4); border:var(--flood-sys-stroke-width) solid var(--flood-sys-color-field-border); border-radius:var(--flood-sys-radius-field); background:var(--flood-sys-color-field-background); cursor:pointer; }
|
|
1460
1468
|
.flood-root .flood-choice-card--compact { padding:var(--flood-sys-space-3); }
|
|
@@ -1462,8 +1470,8 @@
|
|
|
1462
1470
|
.flood-root .flood-choice-card>span { flex:1; }
|
|
1463
1471
|
.flood-root .flood-choice-card__content { display:flex; align-items:flex-start; gap:var(--flood-sys-space-3); min-inline-size:0; }
|
|
1464
1472
|
.flood-root .flood-choice-card__copy { flex:1; min-inline-size:0; display:grid; gap:var(--flood-sys-space-1); }
|
|
1465
|
-
.flood-root .flood-choice-card__title { font-weight:500; overflow-wrap:
|
|
1466
|
-
.flood-root .flood-choice-card__description,.flood-root .flood-choice-card__metadata { color:var(--flood-sys-color-content-subtle); font-weight:400; overflow-wrap:
|
|
1473
|
+
.flood-root .flood-choice-card__title { font-weight:500; overflow-wrap: break-word; }
|
|
1474
|
+
.flood-root .flood-choice-card__description,.flood-root .flood-choice-card__metadata { color:var(--flood-sys-color-content-subtle); font-weight:400; overflow-wrap: break-word; }
|
|
1467
1475
|
.flood-root .flood-choice-card__metadata { flex:none; max-inline-size:35%; }
|
|
1468
1476
|
.flood-root .flood-choice-card__icon { display:flex; align-items:center; color:var(--flood-sys-color-content-subtle); }
|
|
1469
1477
|
.flood-root .flood-choice-card:has(input:checked),.flood-root .flood-choice-card:has(input:indeterminate) { background:var(--flood-sys-color-selection-background); }
|
|
@@ -1478,6 +1486,7 @@
|
|
|
1478
1486
|
|
|
1479
1487
|
.flood-root .flood-data-table { min-inline-size:0; inline-size:100%; }
|
|
1480
1488
|
.flood-root .flood-data-table[hidden] { display:none; }
|
|
1489
|
+
.flood-root .flood-data-table thead th { vertical-align:middle; }
|
|
1481
1490
|
.flood-root .flood-data-table thead th[data-sortable] { padding-inline:max(0px,calc(var(--flood-data-padding) - var(--flood-sys-space-2))); }
|
|
1482
1491
|
.flood-root .flood-data-table__sort { gap:var(--flood-sys-space-2); min-block-size:var(--flood-sys-control-sm-height); padding-inline:calc(var(--flood-sys-space-2) - var(--flood-sys-stroke-width)); color:inherit; font:inherit; font-weight:500; }
|
|
1483
1492
|
.flood-root .flood-data-table__choice { inline-size:1%; white-space:nowrap; }
|
|
@@ -1496,14 +1505,14 @@
|
|
|
1496
1505
|
.flood-root .flood-file-item__name { overflow-wrap:anywhere; }
|
|
1497
1506
|
.flood-root .flood-file-item__heading { display:flex; align-items:center; flex-wrap:wrap; gap:var(--flood-sys-space-1) var(--flood-sys-space-2); min-inline-size:0; }
|
|
1498
1507
|
.flood-root .flood-file-item__heading>.flood-file-item__name { min-inline-size:0; }
|
|
1499
|
-
.flood-root .flood-file-meta { flex:0 1 auto; max-inline-size:100%; flex-wrap:wrap; white-space:normal; overflow-wrap:
|
|
1508
|
+
.flood-root .flood-file-meta { flex:0 1 auto; max-inline-size:100%; flex-wrap:wrap; white-space:normal; overflow-wrap: break-word; color:var(--flood-sys-color-content-subtle); font-weight:400; }
|
|
1500
1509
|
.flood-root .flood-file-meta>span { min-inline-size:0; }
|
|
1501
1510
|
.flood-root .flood-file-item .flood-data-list-item__trailing { flex:none; max-inline-size:none; }
|
|
1502
1511
|
.flood-root .flood-upload-item .flood-data-list-item__copy { align-self:center; }
|
|
1503
1512
|
.flood-root .flood-upload-item__status-row { display:flex; align-items:center; gap:var(--flood-sys-space-2); min-inline-size:0; }
|
|
1504
1513
|
.flood-root .flood-upload-item__status-row[data-progress]>.flood-status-indicator { flex:none; white-space:nowrap; }
|
|
1505
1514
|
.flood-root .flood-upload-item .flood-indicator { flex:1; min-inline-size:0; }
|
|
1506
|
-
.flood-root .flood-upload-item .flood-status-indicator { overflow-wrap:
|
|
1515
|
+
.flood-root .flood-upload-item .flood-status-indicator { overflow-wrap:break-word; }
|
|
1507
1516
|
.flood-root .flood-image-preview { inline-size:min(56rem,calc(100% - var(--flood-sys-space-8))); }
|
|
1508
1517
|
.flood-root .flood-image-preview__figure { margin:0; }
|
|
1509
1518
|
.flood-root .flood-image-preview__media { display:grid; place-items:center; min-block-size:12rem; max-inline-size:100%; background:var(--flood-sys-color-surface-canvas); border-radius:var(--flood-sys-radius-field); overflow:hidden; }
|
package/dist/index.d.ts
CHANGED
|
@@ -669,6 +669,8 @@ export interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
|
|
|
669
669
|
density?: DataDensity;
|
|
670
670
|
striped?: boolean;
|
|
671
671
|
scrollLabel?: string;
|
|
672
|
+
/** Shared cell alignment. Middle keeps mixed record/action rows coherent; top is an explicit prose-table choice. */
|
|
673
|
+
cellVerticalAlign?: "top" | "middle" | "bottom";
|
|
672
674
|
}
|
|
673
675
|
/** @since 0.2.4 */
|
|
674
676
|
export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
|
|
@@ -1073,6 +1075,8 @@ export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
|
|
|
1073
1075
|
export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
|
|
1074
1076
|
export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
|
|
1075
1077
|
legend: ReactNode;
|
|
1078
|
+
/** Visual role only; compact choice captions remain the default. @since 0.2.10 */
|
|
1079
|
+
legendSize?: "label" | "section";
|
|
1076
1080
|
/** @since 0.2.3 */
|
|
1077
1081
|
hideLabel?: boolean;
|
|
1078
1082
|
hint?: ReactNode;
|
package/dist/index.js
CHANGED
|
@@ -153,8 +153,8 @@ export const DescriptionList = /* @__PURE__ */ forwardRef(function DescriptionLi
|
|
|
153
153
|
return _jsx(DescribedData, { ...props, ref: ref, items: items, layout: layout, density: density, dividers: dividers });
|
|
154
154
|
});
|
|
155
155
|
/** @since 0.2.4 */
|
|
156
|
-
export const Table = /* @__PURE__ */ forwardRef(function Table({ caption, children, hideCaption = false, density = "comfortable", striped = false, scrollLabel, ...props }, ref) {
|
|
157
|
-
return _jsx(TabularData, { ...props, ref: ref, caption: caption, hideCaption: hideCaption, density: density, striped: striped, scrollLabel: scrollLabel, children: children });
|
|
156
|
+
export const Table = /* @__PURE__ */ forwardRef(function Table({ caption, children, hideCaption = false, density = "comfortable", striped = false, scrollLabel, cellVerticalAlign = "middle", ...props }, ref) {
|
|
157
|
+
return _jsx(TabularData, { ...props, ref: ref, caption: caption, hideCaption: hideCaption, density: density, striped: striped, scrollLabel: scrollLabel, cellVerticalAlign: cellVerticalAlign, children: children });
|
|
158
158
|
});
|
|
159
159
|
/** @since 0.2.4 */
|
|
160
160
|
export const Badge = /* @__PURE__ */ forwardRef(function Badge({ size = "md", tone = "neutral", variant = "subtle", className, ...props }, ref) {
|
|
@@ -344,14 +344,14 @@ export const Label = /* @__PURE__ */ forwardRef(function Label({ required, child
|
|
|
344
344
|
return _jsxs("label", { ...props, ref: ref, className: classes("flood-label", className), children: [children, required && _jsx("span", { "aria-hidden": "true", children: " *" })] });
|
|
345
345
|
});
|
|
346
346
|
/** A native group: disabled, form ownership and nested fieldsets retain browser behavior. */
|
|
347
|
-
export const Fieldset = /* @__PURE__ */ forwardRef(function Fieldset({ legend, hideLabel = false, hint, error, message, status, children, className, id: explicitId, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...props }, ref) {
|
|
347
|
+
export const Fieldset = /* @__PURE__ */ forwardRef(function Fieldset({ legend, legendSize = "label", hideLabel = false, hint, error, message, status, children, className, id: explicitId, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...props }, ref) {
|
|
348
348
|
const generatedId = useId();
|
|
349
349
|
const id = explicitId ?? `flood-${generatedId}`;
|
|
350
350
|
const legendRef = useFocusableHidden(hideLabel);
|
|
351
351
|
const hasHint = hasFieldContent(hint), hasError = hasFieldContent(error), hasMessage = hasFieldContent(message) && !hasError;
|
|
352
352
|
const resolvedStatus = resolveFieldStatus(status, hasError, ariaInvalid);
|
|
353
353
|
const description = mergeDescriptions(describedBy, hasHint && `${id}-hint`, hasError && `${id}-error`, hasMessage && `${id}-message`);
|
|
354
|
-
return _jsxs("fieldset", { ...props, ref: ref, id: id, className: classes("flood-fieldset", className), "data-hide-label": hideLabel || undefined, "data-status": resolvedStatus, "aria-describedby": description, "aria-invalid": resolvedStatus === "error" || ariaInvalid || undefined, children: [_jsx("legend", { ref: legendRef, className: classes("flood-legend", hideLabel && "flood-visually-hidden--focusable"), children: legend }), _jsxs("div", { className: "flood-fieldset__body", children: [hasHint && _jsx("div", { id: `${id}-hint`, className: "flood-hint", children: hint }), children, hasMessage && _jsx("div", { id: `${id}-message`, className: "flood-message", role: resolvedStatus === "error" ? "alert" : undefined, children: message }), hasError && _jsx("div", { id: `${id}-error`, className: "flood-error", role: "alert", children: error })] })] });
|
|
354
|
+
return _jsxs("fieldset", { ...props, ref: ref, id: id, className: classes("flood-fieldset", className), "data-legend-size": legendSize, "data-hide-label": hideLabel || undefined, "data-status": resolvedStatus, "aria-describedby": description, "aria-invalid": resolvedStatus === "error" || ariaInvalid || undefined, children: [_jsx("legend", { ref: legendRef, className: classes("flood-legend", hideLabel && "flood-visually-hidden--focusable"), children: legend }), _jsxs("div", { className: "flood-fieldset__body", children: [hasHint && _jsx("div", { id: `${id}-hint`, className: "flood-hint", children: hint }), children, hasMessage && _jsx("div", { id: `${id}-message`, className: "flood-message", role: resolvedStatus === "error" ? "alert" : undefined, children: message }), hasError && _jsx("div", { id: `${id}-error`, className: "flood-error", role: "alert", children: error })] })] });
|
|
355
355
|
});
|
|
356
356
|
export const RadioGroup = /* @__PURE__ */ forwardRef(function RadioGroup({ value, defaultValue, onValueChange, orientation = "vertical", ...props }, ref) {
|
|
357
357
|
return _jsx(ChoiceGroup, { ...props, ref: ref, kind: "radio", orientation: orientation, selected: value === undefined ? undefined : [value], initial: defaultValue === undefined ? [] : [defaultValue], onSelectionChange: next => onValueChange?.(next[0] ?? ""), fieldsetComponent: Fieldset, choiceComponent: Radio });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flood-md/react",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.10",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Original Flood components for React and Next.js.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"react-dom": "^18.3.0 || ^19.0.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@flood-md/tokens": "0.2.
|
|
33
|
+
"@flood-md/tokens": "0.2.10"
|
|
34
34
|
},
|
|
35
35
|
"publishConfig": {
|
|
36
36
|
"access": "public"
|