@flood-md/react 0.2.8 → 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 +21 -2
- package/dist/data-display.js +2 -2
- package/dist/foundations.css +72 -51
- package/dist/index.d.ts +4 -0
- package/dist/index.js +4 -4
- package/dist/select.js +16 -5
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -6,9 +6,19 @@ 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
|
+
|
|
19
|
+
Version 0.2.9 improves constrained file rows, Drawer readability and Select pointer
|
|
20
|
+
focus without changing public signatures or token values.
|
|
21
|
+
|
|
12
22
|
Version 0.2.8 adds TimePicker, DateTimeRangePicker, unified Calendar day/month/year views,
|
|
13
23
|
HoverCard, ColorSwatch, ColorPicker, TreeSelect,
|
|
14
24
|
DateTimePicker, DataList, DataListItem, CheckCard, RadioCard, DataTable, FileItem/FileList, FileMeta, UploadItem/UploadList and ImagePreview. Color values are opaque RGB hex; TreeSelect selects one item;
|
|
@@ -652,11 +662,20 @@ explicit id/headers associations for complex spanning headers. Do not add anothe
|
|
|
652
662
|
caption child. See [WAI table guidance](https://www.w3.org/WAI/tutorials/tables/).
|
|
653
663
|
|
|
654
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.
|
|
655
670
|
striped is false by default. Native tfoot rows use a quiet tinted background and
|
|
656
671
|
medium-weight text to distinguish summaries; the top separator stays decorative.
|
|
657
672
|
data-numeric on a th or td uses logical end alignment,
|
|
658
673
|
tabular figures and no wrapping for numbers. data-align=start/center/end overrides
|
|
659
|
-
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
|
|
660
679
|
wide table, and the containing ScrollArea handles overflow. The host owns dates,
|
|
661
680
|
units, totals, empty rows/colSpan and any cell actions. Avoid interactive whole rows.
|
|
662
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,13 +894,13 @@
|
|
|
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
|
}
|
|
893
901
|
|
|
894
902
|
/* Drawer keeps the modal runtime; only geometry and body containment differ. */
|
|
895
|
-
.flood-root .flood-drawer { --flood-drawer-size: 26rem; --flood-drawer-x: 0%; --flood-drawer-y: 0%; position: fixed; inset: 0; margin: 0; box-sizing: border-box; display: grid; grid-template-areas: "header" "description" "body" "footer"; grid-template-rows: auto auto minmax(
|
|
903
|
+
.flood-root .flood-drawer { --flood-drawer-size: 26rem; --flood-drawer-x: 0%; --flood-drawer-y: 0%; position: fixed; inset: 0; margin: 0; box-sizing: border-box; display: grid; grid-template-areas: "header" "description" "body" "footer"; grid-template-rows: auto auto minmax(calc(min(8rem, 30dvh) + var(--flood-sys-space-4)), 1fr) auto; inline-size: min(var(--flood-drawer-size), 100vw); max-inline-size: 100vw; block-size: 100dvh; max-block-size: 100dvh; border-radius: 0; overflow: auto; container-type: inline-size; container-name: flood-drawer; padding-inline: min(var(--flood-sys-space-6), 5vi); padding-block-start: max(min(var(--flood-sys-space-4), 4dvh), env(safe-area-inset-top)); padding-block-end: max(min(var(--flood-sys-space-6), 4dvh), env(safe-area-inset-bottom)); }
|
|
896
904
|
.flood-root .flood-drawer[data-size="sm"] { --flood-drawer-size: 20rem; }
|
|
897
905
|
.flood-root .flood-drawer[data-size="lg"] { --flood-drawer-size: 34rem; }
|
|
898
906
|
.flood-root .flood-drawer[data-side="end"] { inset-inline-start: auto; inset-inline-end: 0; border-start-start-radius: var(--flood-sys-radius-block); border-end-start-radius: var(--flood-sys-radius-block); --flood-drawer-x: 100%; }
|
|
@@ -906,7 +914,7 @@
|
|
|
906
914
|
.flood-root .flood-drawer > .flood-overlay-description { grid-area: description; }
|
|
907
915
|
.flood-root .flood-drawer__body { grid-area: body; min-block-size: 0; min-inline-size: 0; margin-block-start: var(--flood-sys-space-4); }
|
|
908
916
|
.flood-root .flood-drawer .flood-overlay-body { margin: 0; }
|
|
909
|
-
.flood-root .flood-drawer__footer { grid-area: footer; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--flood-sys-space-2); margin-block-start: var(--flood-sys-space-4); padding-block-start: var(--flood-sys-space-4); border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); }
|
|
917
|
+
.flood-root .flood-drawer__footer { grid-area: footer; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--flood-sys-space-2); margin-block-start: min(var(--flood-sys-space-4), 2dvh); padding-block-start: min(var(--flood-sys-space-4), 2dvh); border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); }
|
|
910
918
|
.flood-root .flood-drawer__footer > * { max-inline-size: 100%; }
|
|
911
919
|
@keyframes flood-drawer-enter { from { transform: translate(var(--flood-drawer-x), var(--flood-drawer-y)); } to { transform: translate(0, 0); } }
|
|
912
920
|
@media (prefers-reduced-motion: no-preference) { .flood-root .flood-drawer[open] { animation: flood-drawer-enter var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing); } }
|
|
@@ -915,6 +923,9 @@
|
|
|
915
923
|
.flood-root .flood-drawer > .flood-overlay-header { position: relative; padding-inline-end: calc(max(var(--flood-sys-control-sm-height), var(--flood-sys-size-touch)) + var(--flood-sys-space-2)); align-items: flex-start; }
|
|
916
924
|
.flood-root .flood-drawer > .flood-overlay-header > .flood-overlay-close { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
|
|
917
925
|
.flood-root .flood-drawer > .flood-overlay-description { margin-block-start: var(--flood-sys-space-1); padding-inline-end: calc(max(var(--flood-sys-control-sm-height), var(--flood-sys-size-touch)) + var(--flood-sys-space-2)); }
|
|
926
|
+
@container flood-drawer (max-width:20rem) {
|
|
927
|
+
.flood-root .flood-drawer > .flood-overlay-description { padding-inline-end: 0; }
|
|
928
|
+
}
|
|
918
929
|
|
|
919
930
|
/* Floating surfaces use a distinct material; modal surfaces retain their fill. */
|
|
920
931
|
.flood-root :is(.flood-overlay-panel, .flood-select__menu) { background: var(--flood-sys-color-surface-floating); border-color: var(--flood-sys-color-border-floating); box-shadow: 0 var(--flood-sys-effect-floating-shadow-offset) var(--flood-sys-effect-floating-shadow-blur) var(--flood-sys-color-shadow-floating); }
|
|
@@ -936,7 +947,7 @@
|
|
|
936
947
|
.flood-root .flood-avatar-group > li + li { margin-inline-start: calc(-1 * var(--flood-sys-space-2)); }
|
|
937
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); }
|
|
938
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; }
|
|
939
|
-
.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; }
|
|
940
951
|
.flood-root .flood-status-indicator[data-size="sm"] { font-size: var(--flood-sys-type-helper-size); }
|
|
941
952
|
.flood-root .flood-status-indicator[data-size="lg"] { font-size: var(--flood-sys-type-body-size); }
|
|
942
953
|
.flood-root .flood-status-indicator[data-tone="accent"] { --flood-status-color: var(--flood-sys-color-accent-content); }
|
|
@@ -947,18 +958,18 @@
|
|
|
947
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); }
|
|
948
959
|
.flood-root .flood-figure { display: grid; gap: var(--flood-sys-space-2); margin: 0; min-inline-size: 0; }
|
|
949
960
|
.flood-root .flood-figure > * { max-inline-size: 100%; min-inline-size: 0; }
|
|
950
|
-
.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; }
|
|
951
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; }
|
|
952
|
-
.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; }
|
|
953
964
|
.flood-root .flood-blockquote__quote > :first-child { margin-block-start: 0; }
|
|
954
965
|
.flood-root .flood-blockquote__quote > :last-child { margin-block-end: 0; }
|
|
955
|
-
.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; }
|
|
956
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; }
|
|
957
968
|
.flood-root .flood-inline-code[data-size="sm"] { font-size: var(--flood-sys-type-helper-size); }
|
|
958
969
|
.flood-root .flood-inline-code[data-size="lg"] { font-size: var(--flood-sys-type-body-size); }
|
|
959
970
|
.flood-root .flood-inline-code[data-wrap="false"] { white-space: pre; overflow-wrap: normal; }
|
|
960
971
|
.flood-root .flood-metric { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; margin: 0; }
|
|
961
|
-
.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; }
|
|
962
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); }
|
|
963
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; }
|
|
964
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); }
|
|
@@ -980,8 +991,8 @@
|
|
|
980
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); }
|
|
981
992
|
.flood-root .flood-timeline__item[data-state="complete"] .flood-timeline__marker { color: var(--flood-sys-color-feedback-success); }
|
|
982
993
|
.flood-root .flood-timeline__content { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; }
|
|
983
|
-
.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:
|
|
984
|
-
.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; }
|
|
985
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); }
|
|
986
997
|
.flood-root :is(.flood-avatar-group, .flood-status-indicator, .flood-figure, .flood-blockquote, .flood-inline-code, .flood-metric, .flood-timeline)[hidden] { display: none; }
|
|
987
998
|
@media (forced-colors: active) {
|
|
@@ -1001,8 +1012,8 @@
|
|
|
1001
1012
|
.flood-root .flood-navigation-list__link:hover { background: var(--flood-sys-color-surface-raised); }
|
|
1002
1013
|
.flood-root .flood-navigation-list__link[aria-current="page"] { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
1003
1014
|
.flood-root :is(.flood-navigation-list__text,.flood-steps__text) { display: grid; min-inline-size: 0; gap: var(--flood-sys-space-1); }
|
|
1004
|
-
.flood-root :is(.flood-navigation-list__label,.flood-steps__title) { overflow-wrap:
|
|
1005
|
-
.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; }
|
|
1006
1017
|
.flood-root .flood-navigation-list__link > .flood-icon { flex: none; }
|
|
1007
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); }
|
|
1008
1019
|
|
|
@@ -1025,8 +1036,8 @@
|
|
|
1025
1036
|
.flood-root .flood-section { min-inline-size: 0; }
|
|
1026
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); }
|
|
1027
1038
|
.flood-root .flood-section__heading { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; flex: 1 1 12rem; }
|
|
1028
|
-
.flood-root .flood-section__title { margin: 0; overflow-wrap:
|
|
1029
|
-
.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; }
|
|
1030
1041
|
.flood-root .flood-section__description > :first-child { margin-block-start: 0; }
|
|
1031
1042
|
.flood-root .flood-section__description > :last-child { margin-block-end: 0; }
|
|
1032
1043
|
.flood-root .flood-section__actions { display: flex; flex-wrap: wrap; gap: var(--flood-sys-space-2); max-inline-size: 100%; }
|
|
@@ -1037,7 +1048,7 @@
|
|
|
1037
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); }
|
|
1038
1049
|
.flood-root .flood-split__layout[data-side="start"][data-ratio="aside"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
|
|
1039
1050
|
.flood-root .flood-split__layout[data-ratio="balanced"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
1040
|
-
.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; }
|
|
1041
1052
|
@container flood-split (max-width: 30rem) { .flood-root .flood-split__layout[data-collapse="sm"] { grid-template-columns: minmax(0, 1fr); } }
|
|
1042
1053
|
@container flood-split (max-width: 48rem) { .flood-root .flood-split__layout[data-collapse="md"] { grid-template-columns: minmax(0, 1fr); } }
|
|
1043
1054
|
@container flood-split (max-width: 64rem) { .flood-root .flood-split__layout[data-collapse="lg"] { grid-template-columns: minmax(0, 1fr); } }
|
|
@@ -1065,7 +1076,7 @@
|
|
|
1065
1076
|
.flood-root .flood-list-box__feedback { margin-block-start:var(--flood-sys-space-1); }
|
|
1066
1077
|
.flood-root .flood-list-box[data-appearance="plain"] { max-block-size:none; overflow:visible; padding:0; border:0; border-radius:0; background:transparent; }
|
|
1067
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); }
|
|
1068
|
-
.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; }
|
|
1069
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); }
|
|
1070
1081
|
.flood-root .flood-list-box__check { flex: none; inline-size: var(--flood-control-icon); text-align: center; }
|
|
1071
1082
|
.flood-root .flood-list-box__option[aria-selected="true"] { background: var(--flood-sys-color-selection-background); }
|
|
@@ -1126,7 +1137,7 @@
|
|
|
1126
1137
|
.flood-root .flood-toast-region[hidden] { display: none; }
|
|
1127
1138
|
.flood-root .flood-toast-region__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--flood-sys-space-2); }
|
|
1128
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); }
|
|
1129
|
-
.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; }
|
|
1130
1141
|
.flood-root .flood-toast__title { font-size: var(--flood-sys-type-compact-size); font-weight: var(--flood-sys-type-label-weight); }
|
|
1131
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); }
|
|
1132
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); }
|
|
@@ -1141,7 +1152,7 @@
|
|
|
1141
1152
|
.flood-root .flood-editable[hidden] { display: none; }
|
|
1142
1153
|
.flood-root .flood-editable > .flood-label { margin: 0; }
|
|
1143
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); }
|
|
1144
|
-
.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; }
|
|
1145
1156
|
.flood-root .flood-editable__value[data-empty] { color: var(--flood-sys-color-content-subtle); }
|
|
1146
1157
|
.flood-root .flood-editable__preview > .flood-icon { flex: none; color: var(--flood-sys-color-content-subtle); }
|
|
1147
1158
|
.flood-root .flood-editable .flood-input-group:has(.flood-editable__actions) { padding-inline-end: calc(var(--flood-group-inset) - var(--flood-group-stroke)); }
|
|
@@ -1162,7 +1173,7 @@
|
|
|
1162
1173
|
.flood-root .flood-command-list[hidden] { display: none; }
|
|
1163
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); }
|
|
1164
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))); }
|
|
1165
|
-
.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; }
|
|
1166
1177
|
.flood-root .flood-command-list__option[data-active="true"] { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
1167
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); }
|
|
1168
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; }
|
|
@@ -1249,7 +1260,7 @@
|
|
|
1249
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; }
|
|
1250
1261
|
.flood-root .flood-calendar[hidden] { display:none; }
|
|
1251
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; }
|
|
1252
|
-
.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; }
|
|
1253
1264
|
.flood-root .flood-calendar__month { display:flex; align-items:center; min-inline-size:0; gap:0; }
|
|
1254
1265
|
.flood-root .flood-calendar__month > .flood-button { --flood-action-rest:transparent; padding-inline:var(--flood-sys-space-2); min-inline-size:0; }
|
|
1255
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; }
|
|
@@ -1282,7 +1293,7 @@
|
|
|
1282
1293
|
}
|
|
1283
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; } }
|
|
1284
1295
|
|
|
1285
|
-
.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); }
|
|
1286
1297
|
.flood-root .flood-date-picker__panel > .flood-overlay-header { display:none; }
|
|
1287
1298
|
.flood-root .flood-date-picker__panel > .flood-overlay-body { margin-block-start:0; }
|
|
1288
1299
|
.flood-root .flood-date-picker__panel .flood-calendar { inline-size:100%; padding:0; border:0; border-radius:0; background:transparent; }
|
|
@@ -1292,7 +1303,7 @@
|
|
|
1292
1303
|
.flood-root .flood-error-summary__title { font-weight:var(--flood-sys-type-label-weight); }
|
|
1293
1304
|
.flood-root .flood-error-summary__description { margin-block-start:var(--flood-sys-space-1); }
|
|
1294
1305
|
.flood-root .flood-error-summary .flood-error-summary__list { margin-block-start:var(--flood-sys-space-2); margin-block-end:0; }
|
|
1295
|
-
.flood-root .flood-error-summary__list .flood-link { overflow-wrap:
|
|
1306
|
+
.flood-root .flood-error-summary__list .flood-link { overflow-wrap: break-word; }
|
|
1296
1307
|
@media(forced-colors:active) { .flood-root .flood-error-summary:focus { outline-color:Highlight; } }
|
|
1297
1308
|
|
|
1298
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)); }
|
|
@@ -1368,8 +1379,8 @@
|
|
|
1368
1379
|
.flood-root .flood-tree__chevron[data-expanded] { rotate:90deg; }
|
|
1369
1380
|
.flood-root .flood-tree[data-tree-direction="rtl"] .flood-tree__chevron:not([data-expanded]) { rotate:180deg; }
|
|
1370
1381
|
.flood-root .flood-tree__text { display:grid; gap:var(--flood-sys-space-1); min-inline-size:0; }
|
|
1371
|
-
.flood-root .flood-tree__label { min-inline-size:0; overflow-wrap:
|
|
1372
|
-
.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; }
|
|
1373
1384
|
.flood-root .flood-tree__item[data-disabled]>.flood-tree__row { color:var(--flood-sys-color-field-disabled-content); }
|
|
1374
1385
|
.flood-root .flood-tree__item[data-disabled]>.flood-tree__row:hover { background:transparent; }
|
|
1375
1386
|
.flood-root .flood-tree__item[data-disabled]>.flood-tree__row .flood-tree__disclosure { cursor:default; }
|
|
@@ -1389,7 +1400,7 @@
|
|
|
1389
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); }
|
|
1390
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); }
|
|
1391
1402
|
.flood-root .flood-navigation-tree__text[aria-disabled] { color:var(--flood-sys-color-field-disabled-content); }
|
|
1392
|
-
.flood-root .flood-navigation-tree__label { overflow-wrap:
|
|
1403
|
+
.flood-root .flood-navigation-tree__label { overflow-wrap: break-word; min-inline-size:0; }
|
|
1393
1404
|
.flood-root .flood-navigation-tree__row .flood-navigation-tree__disclosure { flex:none; }
|
|
1394
1405
|
.flood-root .flood-navigation-tree__disclosure svg { rotate:0deg; }
|
|
1395
1406
|
.flood-root .flood-navigation-tree:dir(rtl) .flood-navigation-tree__disclosure svg { rotate:180deg; }
|
|
@@ -1448,10 +1459,10 @@
|
|
|
1448
1459
|
.flood-root .flood-data-list[hidden],.flood-root .flood-data-list-item[hidden] { display:none; }
|
|
1449
1460
|
.flood-root .flood-data-list-item__media { flex:none; display:flex; align-items:center; }
|
|
1450
1461
|
.flood-root .flood-data-list-item__copy { flex:1; min-inline-size:0; display:grid; gap:var(--flood-sys-space-1); }
|
|
1451
|
-
.flood-root .flood-data-list-item__title { font-weight:500; overflow-wrap:
|
|
1452
|
-
.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; }
|
|
1453
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%; }
|
|
1454
|
-
.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; }
|
|
1455
1466
|
.flood-root .flood-data-list-item__actions { display:flex; align-items:center; gap:var(--flood-sys-space-1); }
|
|
1456
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; }
|
|
1457
1468
|
.flood-root .flood-choice-card--compact { padding:var(--flood-sys-space-3); }
|
|
@@ -1459,8 +1470,8 @@
|
|
|
1459
1470
|
.flood-root .flood-choice-card>span { flex:1; }
|
|
1460
1471
|
.flood-root .flood-choice-card__content { display:flex; align-items:flex-start; gap:var(--flood-sys-space-3); min-inline-size:0; }
|
|
1461
1472
|
.flood-root .flood-choice-card__copy { flex:1; min-inline-size:0; display:grid; gap:var(--flood-sys-space-1); }
|
|
1462
|
-
.flood-root .flood-choice-card__title { font-weight:500; overflow-wrap:
|
|
1463
|
-
.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; }
|
|
1464
1475
|
.flood-root .flood-choice-card__metadata { flex:none; max-inline-size:35%; }
|
|
1465
1476
|
.flood-root .flood-choice-card__icon { display:flex; align-items:center; color:var(--flood-sys-color-content-subtle); }
|
|
1466
1477
|
.flood-root .flood-choice-card:has(input:checked),.flood-root .flood-choice-card:has(input:indeterminate) { background:var(--flood-sys-color-selection-background); }
|
|
@@ -1475,6 +1486,7 @@
|
|
|
1475
1486
|
|
|
1476
1487
|
.flood-root .flood-data-table { min-inline-size:0; inline-size:100%; }
|
|
1477
1488
|
.flood-root .flood-data-table[hidden] { display:none; }
|
|
1489
|
+
.flood-root .flood-data-table thead th { vertical-align:middle; }
|
|
1478
1490
|
.flood-root .flood-data-table thead th[data-sortable] { padding-inline:max(0px,calc(var(--flood-data-padding) - var(--flood-sys-space-2))); }
|
|
1479
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; }
|
|
1480
1492
|
.flood-root .flood-data-table__choice { inline-size:1%; white-space:nowrap; }
|
|
@@ -1487,19 +1499,20 @@
|
|
|
1487
1499
|
.flood-root .flood-data-table__footer nav { margin-inline-start:auto; max-inline-size:100%; }
|
|
1488
1500
|
@media(forced-colors:active) { .flood-root .flood-data-table tr[data-selected] { outline:1px solid Highlight; } }
|
|
1489
1501
|
|
|
1490
|
-
.flood-root .flood-file-list { box-sizing:border-box; padding-inline:var(--flood-sys-space-4); border:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius:var(--flood-sys-radius-field); background:var(--flood-sys-color-surface-default); }
|
|
1502
|
+
.flood-root .flood-file-list { box-sizing:border-box; padding-inline:var(--flood-sys-space-4); border:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius:var(--flood-sys-radius-field); background:var(--flood-sys-color-surface-default); container-type:inline-size; container-name:flood-files; }
|
|
1491
1503
|
.flood-root .flood-file-item__thumbnail { display:grid; place-items:center; flex:none; inline-size:var(--flood-sys-control-md-height); block-size:var(--flood-sys-control-md-height); border-radius:var(--flood-sys-radius-action); color:var(--flood-sys-color-content-subtle); overflow:hidden; background:var(--flood-sys-color-field-background); }
|
|
1492
1504
|
.flood-root .flood-file-item__thumbnail img { display:block; inline-size:100%; block-size:100%; object-fit:cover; }
|
|
1493
1505
|
.flood-root .flood-file-item__name { overflow-wrap:anywhere; }
|
|
1494
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; }
|
|
1495
1507
|
.flood-root .flood-file-item__heading>.flood-file-item__name { min-inline-size:0; }
|
|
1496
|
-
.flood-root .flood-file-meta { flex:
|
|
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; }
|
|
1509
|
+
.flood-root .flood-file-meta>span { min-inline-size:0; }
|
|
1497
1510
|
.flood-root .flood-file-item .flood-data-list-item__trailing { flex:none; max-inline-size:none; }
|
|
1498
1511
|
.flood-root .flood-upload-item .flood-data-list-item__copy { align-self:center; }
|
|
1499
1512
|
.flood-root .flood-upload-item__status-row { display:flex; align-items:center; gap:var(--flood-sys-space-2); min-inline-size:0; }
|
|
1500
1513
|
.flood-root .flood-upload-item__status-row[data-progress]>.flood-status-indicator { flex:none; white-space:nowrap; }
|
|
1501
1514
|
.flood-root .flood-upload-item .flood-indicator { flex:1; min-inline-size:0; }
|
|
1502
|
-
.flood-root .flood-upload-item .flood-status-indicator { overflow-wrap:
|
|
1515
|
+
.flood-root .flood-upload-item .flood-status-indicator { overflow-wrap:break-word; }
|
|
1503
1516
|
.flood-root .flood-image-preview { inline-size:min(56rem,calc(100% - var(--flood-sys-space-8))); }
|
|
1504
1517
|
.flood-root .flood-image-preview__figure { margin:0; }
|
|
1505
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; }
|
|
@@ -1509,6 +1522,14 @@
|
|
|
1509
1522
|
.flood-root .flood-image-preview__caption { margin-block-start:var(--flood-sys-space-2); font-size:var(--flood-sys-type-compact-size); line-height:var(--flood-sys-type-compact-line-height); color:var(--flood-sys-color-content-subtle); }
|
|
1510
1523
|
.flood-root .flood-image-preview__actions { display:flex; justify-content:flex-end; margin-block-start:var(--flood-sys-space-4); }
|
|
1511
1524
|
@media(max-width:30rem){.flood-root .flood-file-list>.flood-file-item { flex-wrap:nowrap; }.flood-root .flood-file-item__thumbnail{inline-size:var(--flood-sys-control-sm-height);block-size:var(--flood-sys-control-sm-height);}}
|
|
1525
|
+
@container flood-files (max-width:16rem){
|
|
1526
|
+
.flood-root .flood-file-list>.flood-file-item:not([hidden]) { display:grid; grid-template-columns:minmax(0,1fr); }
|
|
1527
|
+
.flood-root .flood-file-item .flood-data-list-item__trailing { justify-content:flex-start; }
|
|
1528
|
+
.flood-root .flood-file-item .flood-data-list-item__actions { flex-wrap:wrap; }
|
|
1529
|
+
.flood-root .flood-upload-item__status-row { flex-wrap:wrap; }
|
|
1530
|
+
.flood-root .flood-upload-item__status-row[data-progress]>.flood-status-indicator { flex:0 1 auto; min-inline-size:0; white-space:normal; }
|
|
1531
|
+
.flood-root .flood-upload-item .flood-indicator { flex-basis:100%; }
|
|
1532
|
+
}
|
|
1512
1533
|
|
|
1513
1534
|
.flood-root .flood-time-picker__panel { inline-size:min(var(--flood-time-picker-width,22rem),var(--flood-overlay-available-width,calc(100dvw - 1rem))); padding:var(--flood-sys-space-1); }
|
|
1514
1535
|
.flood-root .flood-time-picker__scroll { max-block-size:min(15rem,calc(var(--flood-overlay-available-height,60dvh) - 1rem)); }
|
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/dist/select.js
CHANGED
|
@@ -269,11 +269,22 @@ export const SingleSelect = /* @__PURE__ */ forwardRef(function SingleSelect({ c
|
|
|
269
269
|
commit(index); }, children: [_jsx("span", { children: choice.label }), _jsx("span", { className: "flood-select__selected", "aria-hidden": "true", children: choice.value === currentValue ? "✓" : "" })] }, `${index}-${choice.value}`);
|
|
270
270
|
return _jsxs("span", { className: `flood-select flood-select--custom flood-control--${controlSize}`, dir: nativeProps.dir, lang: nativeProps.lang, hidden: nativeProps.hidden, children: [_jsx("button", { ...visibleAttributes, ref: trigger, id: triggerId, type: "button", role: "combobox", disabled: disabled, tabIndex: nativeProps.tabIndex, accessKey: nativeProps.accessKey, dir: nativeProps.dir, lang: nativeProps.lang, hidden: nativeProps.hidden, className: ["flood-input flood-select__control", `flood-control--${controlSize}`, className].filter(Boolean).join(" "), style: style, title: title, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": descriptions, "data-status": resolveFieldStatus(status, invalid || Boolean(validation), ariaInvalid), "aria-invalid": invalid || status === "error" || ariaInvalid || Boolean(validation) || undefined, "aria-required": required || undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": menuId, "aria-activedescendant": open && active >= 0 && choices[active] && !choices[active].hidden ? `${menuId}-${active}` : undefined, onFocus: (event) => { if (onFocus)
|
|
271
271
|
mirror(new FocusEvent("focusin", { bubbles: true, relatedTarget: event.relatedTarget })); }, onBlur: (event) => { if (onBlur)
|
|
272
|
-
mirror(new FocusEvent("focusout", { bubbles: true, relatedTarget: event.relatedTarget })); },
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
272
|
+
mirror(new FocusEvent("focusout", { bubbles: true, relatedTarget: event.relatedTarget })); }, onMouseDown: (event) => {
|
|
273
|
+
// Keep an already-focused combobox from blurring to the page before
|
|
274
|
+
// Safari's click. Activation below owns focus; touch scrolling is native.
|
|
275
|
+
if (event.button === 0)
|
|
276
|
+
event.preventDefault();
|
|
277
|
+
}, onClick: (event) => {
|
|
278
|
+
// Safari does not give buttons mouse focus. The combobox must own keys
|
|
279
|
+
// before opening; focus first so a host click callback can still move it.
|
|
280
|
+
event.currentTarget.focus({ preventScroll: true });
|
|
281
|
+
if (onClick && !mirror(new MouseEvent("click", { bubbles: true, cancelable: true })))
|
|
282
|
+
return;
|
|
283
|
+
if (open)
|
|
284
|
+
setOpen(false);
|
|
285
|
+
else
|
|
286
|
+
openMenu();
|
|
287
|
+
}, onKeyUp: (event) => { if (onKeyUp)
|
|
277
288
|
mirror(new KeyboardEvent("keyup", { key: event.key, bubbles: true, cancelable: true })); }, onKeyDown: (event) => {
|
|
278
289
|
if (onKeyDown && !mirror(new KeyboardEvent("keydown", { key: event.key, code: event.code, bubbles: true, cancelable: true, ctrlKey: event.ctrlKey, shiftKey: event.shiftKey, altKey: event.altKey, metaKey: event.metaKey }))) {
|
|
279
290
|
event.preventDefault();
|
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"
|