@flood-md/react 0.2.3 → 0.2.5
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 +398 -3
- package/dist/alert-dialog.d.ts +2 -0
- package/dist/alert-dialog.js +23 -0
- package/dist/avatar.d.ts +5 -0
- package/dist/avatar.js +8 -0
- package/dist/checkbox.d.ts +4 -0
- package/dist/checkbox.js +15 -0
- package/dist/combobox.d.ts +11 -0
- package/dist/combobox.js +301 -0
- package/dist/content-elements.d.ts +8 -0
- package/dist/content-elements.js +47 -0
- package/dist/data-display.d.ts +3 -0
- package/dist/data-display.js +11 -0
- package/dist/disclosure.js +2 -1
- package/dist/feedback-actions.d.ts +3 -0
- package/dist/feedback-actions.js +106 -0
- package/dist/feedback.d.ts +8 -0
- package/dist/feedback.js +29 -0
- package/dist/file-input.d.ts +8 -0
- package/dist/file-input.js +86 -0
- package/dist/focusable-hidden.d.ts +3 -0
- package/dist/focusable-hidden.js +99 -0
- package/dist/fonts/InterVariable-Italic.woff2 +0 -0
- package/dist/fonts/README.md +9 -5
- package/dist/form-controls.d.ts +6 -0
- package/dist/form-controls.js +250 -0
- package/dist/foundations.css +543 -12
- package/dist/index.d.ts +513 -2
- package/dist/index.js +223 -36
- package/dist/menu.d.ts +2 -0
- package/dist/menu.js +130 -0
- package/dist/navigation-layout.d.ts +7 -0
- package/dist/navigation-layout.js +77 -0
- package/dist/navigation.js +8 -8
- package/dist/numeric-input.d.ts +8 -0
- package/dist/numeric-input.js +68 -0
- package/dist/overlay-runtime.js +43 -16
- package/dist/overlays.d.ts +7 -1
- package/dist/overlays.js +17 -6
- package/dist/scroll-area.js +17 -2
- package/dist/select.js +96 -47
- package/dist/slider.d.ts +7 -0
- package/dist/slider.js +89 -0
- package/dist/styles.css +9 -0
- package/dist/text-inputs.d.ts +9 -0
- package/dist/text-inputs.js +45 -0
- package/dist/toolbar.d.ts +2 -0
- package/dist/toolbar.js +80 -0
- package/package.json +2 -2
package/dist/foundations.css
CHANGED
|
@@ -1,7 +1,169 @@
|
|
|
1
1
|
@import "@flood-md/tokens/foundations.css";
|
|
2
2
|
|
|
3
|
+
.flood-root .flood-container { box-sizing: border-box; inline-size: 100%; max-inline-size: var(--flood-container-max); min-inline-size: 0; margin-inline: auto; padding-inline: var(--flood-container-gutter); }
|
|
4
|
+
.flood-root .flood-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--flood-grid-min, var(--flood-sys-size-grid-min-item))), 1fr)); gap: var(--flood-layout-gap); min-inline-size: 0; }
|
|
5
|
+
.flood-root .flood-grid > * { min-inline-size: 0; }
|
|
6
|
+
.flood-root .flood-aspect-ratio { position: relative; inline-size: 100%; min-inline-size: 0; }
|
|
7
|
+
.flood-root .flood-aspect-ratio__content { position: absolute; inset: 0; min-inline-size: 0; }
|
|
8
|
+
.flood-root .flood-aspect-ratio__content > :is(img, video, iframe) { display: block; inline-size: 100%; block-size: 100%; }
|
|
9
|
+
.flood-root .flood-image { display: block; max-inline-size: 100%; block-size: auto; object-fit: cover; }
|
|
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: anywhere; }
|
|
12
|
+
.flood-root .flood-list[data-marker="false"] { list-style: none; padding: 0; }
|
|
13
|
+
.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
|
+
.flood-root .flood-empty-state[data-density="compact"] { padding-block: var(--flood-sys-space-6); padding-inline: min(var(--flood-sys-space-6), 8%); }
|
|
15
|
+
.flood-root .flood-empty-state__icon { padding: var(--flood-sys-space-3); border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-surface-default); }
|
|
16
|
+
.flood-root .flood-empty-state__actions { justify-content: center; }
|
|
17
|
+
.flood-root :is(.flood-container, .flood-grid, .flood-aspect-ratio, .flood-list, .flood-image, .flood-empty-state)[hidden] { display: none; }
|
|
18
|
+
|
|
19
|
+
.flood-root .flood-card { display: flex; flex-direction: column; gap: var(--flood-sys-space-4); overflow-wrap: anywhere; }
|
|
20
|
+
.flood-root .flood-card[data-density="compact"] { gap: var(--flood-sys-space-3); }
|
|
21
|
+
.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
|
+
.flood-root .flood-card__intro { display: grid; gap: var(--flood-sys-space-1); flex: 1 1 12rem; min-inline-size: 0; }
|
|
23
|
+
.flood-root .flood-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--flood-sys-space-2); min-inline-size: 0; max-inline-size: 100%; }
|
|
24
|
+
.flood-root :is(.flood-card__body, .flood-card__footer) { min-inline-size: 0; }
|
|
25
|
+
.flood-root .flood-card__footer { margin-block-start: auto; border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); padding-block-start: var(--flood-sys-space-4); }
|
|
26
|
+
.flood-root .flood-card[data-density="compact"] > .flood-card__footer { padding-block-start: var(--flood-sys-space-3); }
|
|
27
|
+
.flood-root .flood-card > .flood-card__footer:only-child { border: 0; padding: 0; }
|
|
28
|
+
.flood-root .flood-card[hidden] { display: none; }
|
|
29
|
+
@media (forced-colors: active) { .flood-root .flood-card { border: var(--flood-sys-stroke-width) solid CanvasText; background: Canvas !important; color: CanvasText; } }
|
|
30
|
+
|
|
31
|
+
.flood-root .flood-kbd { display: inline-flex; flex: none; align-items: center; justify-content: center; vertical-align: middle; box-sizing: border-box; min-inline-size: var(--flood-sys-size-keycap-sm); min-block-size: var(--flood-sys-size-keycap-sm); padding-inline: var(--flood-sys-space-1); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-indicator); background: var(--flood-sys-color-surface-default); color: var(--flood-sys-color-content-subtle); font-family: var(--flood-sys-font-mono); font-size: var(--flood-sys-type-helper-size); font-weight: var(--flood-sys-type-helper-weight); line-height: var(--flood-sys-type-helper-line-height); white-space: nowrap; }
|
|
32
|
+
.flood-root .flood-kbd[data-size="md"] { min-inline-size: var(--flood-sys-size-keycap-md); min-block-size: var(--flood-sys-size-keycap-md); font-size: var(--flood-sys-type-compact-size); }
|
|
33
|
+
.flood-root .flood-kbd[data-size="lg"] { min-inline-size: var(--flood-sys-size-keycap-lg); min-block-size: var(--flood-sys-size-keycap-lg); font-size: var(--flood-sys-type-body-size); }
|
|
34
|
+
.flood-root .flood-toolbar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--flood-sys-space-1); box-sizing: border-box; inline-size: fit-content; max-inline-size: 100%; min-inline-size: 0; padding: var(--flood-sys-space-1); 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); }
|
|
35
|
+
.flood-root .flood-toolbar[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
|
|
36
|
+
.flood-root .flood-toolbar:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
|
|
37
|
+
.flood-root .flood-toolbar[data-orientation="horizontal"] > .flood-divider { align-self: stretch; inline-size: var(--flood-sys-stroke-width); block-size: auto; border: 0; border-inline-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); margin-inline: var(--flood-sys-space-1); margin-block: var(--flood-sys-space-1); }
|
|
38
|
+
.flood-root .flood-toolbar[data-orientation="vertical"] > .flood-divider { align-self: stretch; inline-size: 100%; block-size: var(--flood-sys-stroke-width); border: 0; border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); margin-block: var(--flood-sys-space-1); }
|
|
39
|
+
.flood-root :is(.flood-kbd, .flood-toolbar)[hidden] { display: none; }
|
|
40
|
+
@media (forced-colors: active) { .flood-root :is(.flood-kbd, .flood-toolbar) { color: CanvasText; background: Canvas; border-color: CanvasText; } }
|
|
41
|
+
|
|
42
|
+
.flood-root .flood-overlay-panel.flood-menu { inline-size: 15rem; padding: var(--flood-sys-space-1); column-gap: var(--flood-sys-space-2); overflow: visible; }
|
|
43
|
+
.flood-root .flood-menu__viewport { max-block-size: min(22rem, max(0px, calc(var(--flood-overlay-available-height, 100dvh - 1rem) - 2 * var(--flood-sys-space-1) - 2 * var(--flood-sys-stroke-width)))); }
|
|
44
|
+
.flood-root .flood-menu .flood-menu__item { inline-size: 100%; justify-content: flex-start; text-align: start; gap: var(--flood-sys-space-2); border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-sys-space-1) - var(--flood-sys-stroke-width))); white-space: normal; }
|
|
45
|
+
.flood-root .flood-menu .flood-menu__item:focus { background: var(--flood-sys-color-action-on-surface-hover); }
|
|
46
|
+
.flood-root .flood-menu .flood-menu__item:focus-visible { outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
|
|
47
|
+
.flood-root .flood-menu .flood-menu__item[data-tone="danger"] { color: var(--flood-sys-color-action-danger-content); }
|
|
48
|
+
.flood-root .flood-menu .flood-menu__item[aria-disabled="true"] { color: var(--flood-sys-color-field-disabled-content); cursor: default; }
|
|
49
|
+
.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
|
+
.flood-root .flood-menu__icon > svg { inline-size: 100%; block-size: 100%; }
|
|
51
|
+
.flood-root .flood-menu__label { min-inline-size: 0; overflow-wrap: anywhere; }
|
|
52
|
+
.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; }
|
|
53
|
+
.flood-root .flood-menu__separator { block-size: var(--flood-sys-stroke-width); margin: var(--flood-sys-space-1) var(--flood-sys-space-2); background: var(--flood-sys-color-divider-decorative); }
|
|
54
|
+
@media (forced-colors: active) {
|
|
55
|
+
.flood-root .flood-overlay-panel.flood-menu { background: Canvas; border-color: CanvasText; }
|
|
56
|
+
.flood-root .flood-menu .flood-menu__item[data-tone="danger"] { color: CanvasText; }
|
|
57
|
+
.flood-root .flood-menu .flood-menu__item:focus { forced-color-adjust: none; background: Highlight; color: HighlightText; }
|
|
58
|
+
.flood-root .flood-menu .flood-menu__item[aria-disabled="true"] { color: GrayText; }
|
|
59
|
+
.flood-root .flood-menu__shortcut { color: inherit; }
|
|
60
|
+
.flood-root .flood-menu__separator { background: CanvasText; }
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.flood-root .flood-description-list { --flood-data-padding: var(--flood-sys-space-2); container: flood-description / inline-size; box-sizing: border-box; min-inline-size: 0; inline-size: 100%; margin: 0; color: var(--flood-sys-color-content-default); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
64
|
+
.flood-root .flood-description-list[data-density="comfortable"] { --flood-data-padding: var(--flood-sys-space-3); }
|
|
65
|
+
.flood-root .flood-description-list__item { display: grid; grid-template-columns: minmax(0, min(10rem, 35%)) minmax(0, 1fr); column-gap: var(--flood-sys-space-3); row-gap: var(--flood-sys-space-1); padding-block: var(--flood-data-padding); }
|
|
66
|
+
.flood-root .flood-description-list__item:first-child { padding-block-start: 0; }
|
|
67
|
+
.flood-root .flood-description-list__item:last-child { padding-block-end: 0; }
|
|
68
|
+
.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); }
|
|
69
|
+
.flood-root .flood-description-list :is(dt, dd) { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
|
|
70
|
+
.flood-root .flood-description-list dt { color: var(--flood-sys-color-content-subtle); }
|
|
71
|
+
.flood-root .flood-description-list[data-layout="stacked"] > .flood-description-list__item { grid-template-columns: minmax(0, 1fr); }
|
|
72
|
+
@container flood-description (max-width: 22rem) { .flood-root .flood-description-list__item { grid-template-columns: minmax(0, 1fr); } }
|
|
73
|
+
.flood-root .flood-table-container { min-inline-size: 0; max-inline-size: 100%; inline-size: 100%; }
|
|
74
|
+
.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); }
|
|
75
|
+
.flood-root .flood-table[data-density="compact"] { --flood-data-padding: var(--flood-sys-space-2); }
|
|
76
|
+
.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); }
|
|
77
|
+
.flood-root .flood-table :is(th, td) { text-align: start; vertical-align: top; padding: var(--flood-data-padding) var(--flood-sys-space-3); overflow-wrap: anywhere; }
|
|
78
|
+
.flood-root .flood-table th { font-weight: var(--flood-sys-type-label-weight); }
|
|
79
|
+
.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); }
|
|
80
|
+
.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); }
|
|
81
|
+
.flood-root .flood-table tfoot > tr:first-child > :is(th, td) { border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
|
|
82
|
+
.flood-root .flood-table tfoot { background: color-mix(in srgb, var(--flood-sys-color-content-default) 8%, transparent); }
|
|
83
|
+
.flood-root .flood-table tfoot :is(th, td) { font-weight: var(--flood-sys-type-label-weight); }
|
|
84
|
+
.flood-root .flood-table[data-striped="true"] tbody > tr:nth-child(even) { background: color-mix(in srgb, var(--flood-sys-color-content-default) 4%, transparent); }
|
|
85
|
+
.flood-root .flood-table [data-numeric] { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
86
|
+
.flood-root .flood-table [data-align="center"] { text-align: center; }
|
|
87
|
+
.flood-root .flood-table [data-align="end"] { text-align: end; }
|
|
88
|
+
.flood-root .flood-table [data-align="start"] { text-align: start; }
|
|
89
|
+
.flood-root :is(.flood-description-list, .flood-table-container, .flood-table)[hidden] { display: none; }
|
|
90
|
+
@media (forced-colors: active) {
|
|
91
|
+
.flood-root .flood-table[data-striped="true"] tbody > tr:nth-child(even) { background: Canvas; }
|
|
92
|
+
.flood-root .flood-table tfoot { background: Canvas; }
|
|
93
|
+
.flood-root .flood-table :is(th, td), .flood-root .flood-description-list[data-dividers="true"] > .flood-description-list__item { border-color: CanvasText; }
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.flood-root .flood-indicator { --flood-indicator-color: var(--flood-sys-color-indicator-fill); --flood-indicator-size: var(--flood-sys-size-indicator-md); position: relative; min-inline-size: 0; inline-size: 100%; box-sizing: border-box; }
|
|
97
|
+
.flood-root .flood-indicator[data-size="sm"] { --flood-indicator-size: var(--flood-sys-size-indicator-sm); }
|
|
98
|
+
.flood-root .flood-indicator[data-size="lg"] { --flood-indicator-size: var(--flood-sys-size-indicator-lg); }
|
|
99
|
+
.flood-root .flood-indicator[data-tone="accent"] { --flood-indicator-color: var(--flood-sys-color-indicator-accent); }
|
|
100
|
+
.flood-root .flood-indicator[data-tone="error"] { --flood-indicator-color: var(--flood-sys-color-feedback-error); }
|
|
101
|
+
.flood-root .flood-indicator[data-tone="warning"] { --flood-indicator-color: var(--flood-sys-color-feedback-warning); }
|
|
102
|
+
.flood-root .flood-indicator[data-tone="success"] { --flood-indicator-color: var(--flood-sys-color-feedback-success); }
|
|
103
|
+
.flood-root .flood-indicator[data-tone="info"] { --flood-indicator-color: var(--flood-sys-color-feedback-info); }
|
|
104
|
+
.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: anywhere; }
|
|
105
|
+
.flood-root .flood-indicator__value { color: var(--flood-sys-color-content-subtle); text-align: end; font-variant-numeric: tabular-nums; }
|
|
106
|
+
.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); }
|
|
107
|
+
.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); }
|
|
108
|
+
.flood-root .flood-indicator[data-indeterminate="true"] .flood-indicator__fill { inline-size: 100%; background: linear-gradient(90deg, transparent, var(--flood-indicator-color), transparent); background-size: 200% 100%; animation: flood-indeterminate 1.4s linear infinite; }
|
|
109
|
+
@keyframes flood-indeterminate { from { background-position: 200% 0; } to { background-position: -200% 0; } }
|
|
110
|
+
.flood-root .flood-alert { --flood-alert-color: var(--flood-sys-color-content-subtle); position: relative; display: flex; align-items: flex-start; gap: var(--flood-sys-space-3); box-sizing: border-box; min-inline-size: 0; padding: 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: color-mix(in srgb, var(--flood-alert-color) 4%, var(--flood-sys-color-surface-canvas)); color: var(--flood-sys-color-content-default); }
|
|
111
|
+
.flood-root .flood-alert[data-tone="info"] { --flood-alert-color: var(--flood-sys-color-feedback-info); }
|
|
112
|
+
.flood-root .flood-alert[data-tone="success"] { --flood-alert-color: var(--flood-sys-color-feedback-success); }
|
|
113
|
+
.flood-root .flood-alert[data-tone="warning"] { --flood-alert-color: var(--flood-sys-color-feedback-warning); }
|
|
114
|
+
.flood-root .flood-alert[data-tone="error"] { --flood-alert-color: var(--flood-sys-color-feedback-error); }
|
|
115
|
+
.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); }
|
|
116
|
+
.flood-root .flood-alert__icon > svg { inline-size: 100%; block-size: 100%; }
|
|
117
|
+
.flood-root .flood-alert__content { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
118
|
+
.flood-root .flood-alert__title { margin: 0; font: inherit; font-weight: var(--flood-sys-type-label-weight); }
|
|
119
|
+
.flood-root .flood-alert__title + .flood-alert__body { margin-block-start: var(--flood-sys-space-1); }
|
|
120
|
+
.flood-root .flood-alert__body { color: var(--flood-sys-color-content-subtle); }
|
|
121
|
+
.flood-root .flood-alert__body > :first-child { margin-block-start: 0; }
|
|
122
|
+
.flood-root .flood-alert__body > :last-child { margin-block-end: 0; }
|
|
123
|
+
.flood-root :is(.flood-alert, .flood-indicator)[hidden] { display: none; }
|
|
124
|
+
@media (prefers-reduced-motion: reduce) {
|
|
125
|
+
.flood-root .flood-indicator__fill { transition: none; }
|
|
126
|
+
.flood-root .flood-indicator[data-indeterminate="true"] .flood-indicator__fill { animation: none; background: var(--flood-indicator-color); inline-size: 35%; }
|
|
127
|
+
}
|
|
128
|
+
@media (forced-colors: active) {
|
|
129
|
+
.flood-root .flood-indicator__track { forced-color-adjust: none; background: Canvas; outline: 1px solid CanvasText; }
|
|
130
|
+
.flood-root .flood-indicator__fill { forced-color-adjust: none; background: Highlight; }
|
|
131
|
+
.flood-root .flood-indicator[data-indeterminate="true"] .flood-indicator__fill { animation: none; background: Highlight; inline-size: 35%; }
|
|
132
|
+
.flood-root .flood-alert { background: Canvas; color: CanvasText; border-color: CanvasText; }
|
|
133
|
+
.flood-root :is(.flood-alert__icon, .flood-alert__body) { color: CanvasText; }
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.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: anywhere; }
|
|
137
|
+
.flood-root .flood-badge[data-size="sm"] { padding-block: 0; }
|
|
138
|
+
.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); }
|
|
139
|
+
.flood-root .flood-badge[data-tone="accent"] { --flood-badge-color: var(--flood-sys-color-accent-content); }
|
|
140
|
+
.flood-root .flood-badge[data-tone="error"] { --flood-badge-color: var(--flood-sys-color-feedback-error); }
|
|
141
|
+
.flood-root .flood-badge[data-tone="warning"] { --flood-badge-color: var(--flood-sys-color-feedback-warning); }
|
|
142
|
+
.flood-root .flood-badge[data-tone="success"] { --flood-badge-color: var(--flood-sys-color-feedback-success); }
|
|
143
|
+
.flood-root .flood-badge[data-tone="info"] { --flood-badge-color: var(--flood-sys-color-feedback-info); }
|
|
144
|
+
.flood-root .flood-badge[data-variant="outline"] { background: transparent; border-color: color-mix(in srgb, var(--flood-badge-color) 25%, var(--flood-sys-color-border-decorative)); }
|
|
145
|
+
.flood-root .flood-badge > svg { flex: none; inline-size: 1em; block-size: 1em; }
|
|
146
|
+
.flood-root .flood-skeleton { display: block; flex: none; box-sizing: border-box; inline-size: 100%; block-size: 1rem; max-inline-size: 100%; border-radius: var(--flood-sys-radius-indicator); background: var(--flood-sys-color-loading-placeholder); }
|
|
147
|
+
.flood-root .flood-skeleton[data-shape="rounded"] { block-size: 6rem; border-radius: var(--flood-sys-radius-field); }
|
|
148
|
+
.flood-root .flood-skeleton[data-shape="circle"] { inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--flood-sys-radius-action); }
|
|
149
|
+
.flood-root .flood-skeleton[data-animate="true"] { animation: flood-skeleton-pulse 1.8s ease-in-out infinite; }
|
|
150
|
+
@keyframes flood-skeleton-pulse { 50% { opacity: .5; } }
|
|
151
|
+
.flood-root .flood-avatar { --flood-avatar-size: var(--flood-sys-control-md-height); position: relative; display: inline-grid; place-items: center; vertical-align: middle; flex: none; inline-size: var(--flood-avatar-size); block-size: var(--flood-avatar-size); box-sizing: border-box; overflow: hidden; border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-surface-overlay); color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-compact-size); font-weight: var(--flood-sys-type-label-weight); line-height: 1; user-select: none; }
|
|
152
|
+
.flood-root .flood-avatar[data-size="sm"] { --flood-avatar-size: var(--flood-sys-control-sm-height); font-size: var(--flood-sys-type-helper-size); }
|
|
153
|
+
.flood-root .flood-avatar[data-size="lg"] { --flood-avatar-size: var(--flood-sys-control-xl-height); }
|
|
154
|
+
.flood-root .flood-avatar[data-shape="rounded"] { border-radius: var(--flood-sys-radius-field); }
|
|
155
|
+
.flood-avatar__fallback { max-inline-size: 100%; overflow: hidden; white-space: nowrap; }
|
|
156
|
+
.flood-root .flood-avatar .flood-avatar__image { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; }
|
|
157
|
+
.flood-root .flood-avatar .flood-avatar__image[data-ready="true"] { opacity: 1; }
|
|
158
|
+
.flood-root :is(.flood-badge, .flood-skeleton, .flood-avatar)[hidden] { display: none; }
|
|
159
|
+
@media (prefers-reduced-motion: reduce) { .flood-root .flood-skeleton[data-animate="true"] { animation: none; } }
|
|
160
|
+
@media (forced-colors: active) {
|
|
161
|
+
.flood-root :is(.flood-badge, .flood-avatar) { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
|
|
162
|
+
.flood-root .flood-skeleton { background: GrayText; animation: none; }
|
|
163
|
+
}
|
|
164
|
+
|
|
3
165
|
/* Keep real labels in the accessibility tree while removing their layout box. */
|
|
4
|
-
.flood-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
|
|
166
|
+
.flood-visually-hidden, .flood-visually-hidden--focusable:not(:focus-within):not([data-flood-focus-held]) { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
|
|
5
167
|
.flood-field[data-hide-label="true"], .flood-fieldset[data-hide-label="true"] { position: relative; }
|
|
6
168
|
|
|
7
169
|
.flood-root .flood-tabs { display: grid; grid-template-rows: auto 1fr; min-inline-size: 0; box-sizing: border-box; overflow: clip; 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); }
|
|
@@ -19,7 +181,9 @@
|
|
|
19
181
|
.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)); }
|
|
20
182
|
.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); }
|
|
21
183
|
.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); }
|
|
22
|
-
.flood-root .flood-breadcrumb
|
|
184
|
+
.flood-root .flood-breadcrumb { inline-size: max-content; }
|
|
185
|
+
.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: anywhere; }
|
|
186
|
+
.flood-root .flood-breadcrumb li > :not(.flood-breadcrumb__separator) { min-inline-size: 0; }
|
|
23
187
|
.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; }
|
|
24
188
|
.flood-root .flood-breadcrumb a:hover { text-decoration: underline; }
|
|
25
189
|
.flood-root .flood-breadcrumb [aria-current="page"] { color: var(--flood-sys-color-content-default); }
|
|
@@ -31,7 +195,7 @@
|
|
|
31
195
|
.flood-root .flood-pagination .flood-page[aria-current="page"] { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
32
196
|
.flood-root .flood-pagination .flood-page:is(:disabled, [aria-disabled="true"]) { color: var(--flood-sys-color-field-disabled-content); cursor: default; }
|
|
33
197
|
.flood-root .flood-page-gap { padding-inline: var(--flood-sys-space-1); color: var(--flood-sys-color-content-subtle); }
|
|
34
|
-
@media (pointer: coarse) { .flood-root .flood-pagination .flood-page { min-inline-size: var(--flood-sys-size-touch); } .flood-root .flood-breadcrumb a { min-block-size: var(--flood-sys-size-touch); min-inline-size: var(--flood-sys-size-touch); } }
|
|
198
|
+
@media (pointer: coarse) { .flood-root .flood-pagination .flood-page { min-inline-size: var(--flood-sys-size-touch); } .flood-root .flood-breadcrumb li > a.flood-link { min-block-size: var(--flood-sys-size-touch); min-inline-size: var(--flood-sys-size-touch); } }
|
|
35
199
|
@media (forced-colors: active) {
|
|
36
200
|
.flood-root .flood-tabs .flood-tab[aria-selected="true"]:not(:disabled), .flood-root .flood-pagination .flood-page[aria-current="page"]:not(:disabled):not([aria-disabled="true"]) { forced-color-adjust: none; background: Highlight; color: HighlightText; box-shadow: none; }
|
|
37
201
|
}
|
|
@@ -67,6 +231,7 @@
|
|
|
67
231
|
.flood-root .flood-accordion > .flood-disclosure:last-child[data-open="false"] > .flood-disclosure__heading > .flood-disclosure__trigger { border-end-start-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); border-end-end-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); }
|
|
68
232
|
@media (prefers-reduced-motion: reduce) { .flood-root .flood-disclosure__indicator { transition: none; } }
|
|
69
233
|
|
|
234
|
+
@font-face { font-family: "Inter"; src: url("./fonts/InterVariable-Italic.woff2") format("woff2"); font-style: italic; font-weight: 100 900; font-display: swap; }
|
|
70
235
|
@font-face {
|
|
71
236
|
font-family: "Inter";
|
|
72
237
|
font-style: normal;
|
|
@@ -135,7 +300,7 @@
|
|
|
135
300
|
color: var(--flood-sys-color-content-default);
|
|
136
301
|
}
|
|
137
302
|
.flood-root .flood-code-snippet__code {
|
|
138
|
-
flex: 1;
|
|
303
|
+
flex: 1 1 20ch;
|
|
139
304
|
min-inline-size: 0;
|
|
140
305
|
font-family: var(--flood-sys-font-mono);
|
|
141
306
|
font-size: var(--flood-sys-type-compact-size);
|
|
@@ -211,6 +376,36 @@
|
|
|
211
376
|
letter-spacing: var(--flood-sys-type-compact-tracking);
|
|
212
377
|
font-weight: var(--flood-sys-type-compact-weight);
|
|
213
378
|
}
|
|
379
|
+
.flood-root .flood-number-input > .flood-input { text-align: center; appearance: textfield; font-variant-numeric: tabular-nums; }
|
|
380
|
+
.flood-root .flood-number-input > .flood-input::-webkit-inner-spin-button,
|
|
381
|
+
.flood-root .flood-number-input > .flood-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
|
|
382
|
+
.flood-root .flood-slider { --flood-slider-thumb: var(--flood-control-icon); min-inline-size: 0; inline-size: 100%; }
|
|
383
|
+
.flood-root .flood-slider > .flood-fieldset__body { gap: var(--flood-sys-space-1); }
|
|
384
|
+
.flood-root .flood-slider > .flood-legend { margin-block-end: var(--flood-sys-space-1); }
|
|
385
|
+
.flood-root .flood-slider__value { color: var(--flood-sys-color-content-subtle); font-size: var(--flood-control-text); font-variant-numeric: tabular-nums; line-height: var(--flood-control-line); }
|
|
386
|
+
.flood-root .flood-slider__rail { position: relative; block-size: var(--flood-control-height); margin-inline: calc(var(--flood-slider-thumb) / 2); touch-action: pan-y; }
|
|
387
|
+
.flood-root .flood-slider__track { position: absolute; inset-inline: 0; inset-block-start: calc(50% - var(--flood-sys-space-1) / 2); block-size: var(--flood-sys-space-1); border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-field-border); }
|
|
388
|
+
.flood-root .flood-slider__fill { position: absolute; inset-block: 0; inset-inline-start: var(--flood-slider-start); inset-inline-end: var(--flood-slider-end); border-radius: inherit; background: var(--flood-sys-color-content-default); }
|
|
389
|
+
.flood-root .flood-slider__input { position: absolute; inset-block-start: 0; inset-inline-start: calc(var(--flood-slider-thumb) / -2); inline-size: calc(100% + var(--flood-slider-thumb)); block-size: 100%; margin: 0; padding: 0; border: 0; background: transparent; appearance: none; pointer-events: none; outline: none; }
|
|
390
|
+
.flood-root .flood-slider__input::-webkit-slider-runnable-track { background: transparent; border: 0; }
|
|
391
|
+
.flood-root .flood-slider__input::-moz-range-track { background: transparent; border: 0; }
|
|
392
|
+
.flood-root .flood-slider__input::-webkit-slider-thumb { appearance: none; box-sizing: border-box; inline-size: var(--flood-slider-thumb); block-size: var(--flood-slider-thumb); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-field-border); border-radius: 50%; background: var(--flood-sys-color-content-default); pointer-events: auto; cursor: grab; }
|
|
393
|
+
.flood-root .flood-slider__input::-moz-range-thumb { box-sizing: border-box; inline-size: var(--flood-slider-thumb); block-size: var(--flood-slider-thumb); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-field-border); border-radius: 50%; background: var(--flood-sys-color-content-default); pointer-events: auto; cursor: grab; }
|
|
394
|
+
.flood-root .flood-slider__input:focus-visible::-webkit-slider-thumb { border: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); }
|
|
395
|
+
.flood-root .flood-slider__input:focus-visible::-moz-range-thumb { border: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); }
|
|
396
|
+
.flood-root .flood-slider:disabled .flood-slider__fill { background: var(--flood-sys-color-field-disabled-content); }
|
|
397
|
+
.flood-root .flood-slider[data-readonly="true"] .flood-slider__track { border-block: var(--flood-sys-stroke-width) dashed var(--flood-sys-color-content-subtle); }
|
|
398
|
+
.flood-root .flood-slider[data-readonly="true"] .flood-slider__input::-webkit-slider-thumb { cursor: default; }
|
|
399
|
+
.flood-root .flood-slider[data-readonly="true"] .flood-slider__input::-moz-range-thumb { cursor: default; }
|
|
400
|
+
@media (pointer: coarse) { .flood-root .flood-slider__rail { block-size: max(var(--flood-control-height), var(--flood-sys-size-touch)); } .flood-root .flood-slider { --flood-slider-thumb: var(--flood-sys-space-6); } }
|
|
401
|
+
@media (forced-colors: active) {
|
|
402
|
+
.flood-root .flood-slider__track { forced-color-adjust: none; background: GrayText; }
|
|
403
|
+
.flood-root .flood-slider__fill { forced-color-adjust: none; background: Highlight; }
|
|
404
|
+
.flood-root .flood-slider__input::-webkit-slider-thumb { forced-color-adjust: none; background: Canvas; border-color: ButtonText; }
|
|
405
|
+
.flood-root .flood-slider__input::-moz-range-thumb { forced-color-adjust: none; background: Canvas; border-color: ButtonText; }
|
|
406
|
+
.flood-root .flood-slider__input:focus-visible::-webkit-slider-thumb { border-color: Highlight; }
|
|
407
|
+
.flood-root .flood-slider__input:focus-visible::-moz-range-thumb { border-color: Highlight; }
|
|
408
|
+
}
|
|
214
409
|
.flood-root .flood-input::placeholder { color: var(--flood-sys-color-field-placeholder); opacity: 1; }
|
|
215
410
|
.flood-root .flood-input[aria-invalid="true"] { border-color: var(--flood-sys-color-feedback-error); }
|
|
216
411
|
.flood-root .flood-input[readonly] { cursor: text; }
|
|
@@ -289,14 +484,18 @@
|
|
|
289
484
|
.flood-root .flood-textarea { min-block-size: calc(var(--flood-control-height) * 3); resize: none; overflow: auto; }
|
|
290
485
|
.flood-root .flood-field { display: grid; gap: var(--flood-sys-space-2); }
|
|
291
486
|
.flood-root .flood-fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; inline-size: 100%; }
|
|
292
|
-
.flood-root .flood-legend { 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); }
|
|
293
|
-
.flood-root .flood-fieldset__body { display: grid; gap: var(--flood-sys-space-3); min-inline-size: 0; }
|
|
487
|
+
.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); }
|
|
488
|
+
.flood-root .flood-fieldset__body { clear: both; display: grid; gap: var(--flood-sys-space-3); min-inline-size: 0; }
|
|
294
489
|
.flood-root .flood-choice-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-inline-size: 0; }
|
|
295
490
|
.flood-root .flood-choice-group > .flood-choice { min-block-size: var(--flood-sys-control-sm-height); }
|
|
296
491
|
.flood-root .flood-choice-group[data-orientation="horizontal"] { flex-direction: row; flex-wrap: wrap; column-gap: var(--flood-sys-space-4); }
|
|
297
492
|
.flood-root .flood-fieldset__body:has(> .flood-choice-group) { gap: var(--flood-sys-space-1); }
|
|
298
493
|
.flood-root .flood-fieldset:has(> .flood-fieldset__body > .flood-choice-group) > .flood-legend { margin-block-end: var(--flood-sys-space-1); }
|
|
299
494
|
.flood-root .flood-fieldset:has(> .flood-fieldset__body > .flood-hint) > .flood-legend { margin-block-end: var(--flood-sys-space-1); }
|
|
495
|
+
/* Keep legends in ordinary float/clear layout from their first render.
|
|
496
|
+
WebKit otherwise retains the native legend row when it becomes absolute.
|
|
497
|
+
The real legend and its React children remain mounted for group semantics. */
|
|
498
|
+
.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; }
|
|
300
499
|
.flood-root .flood-fieldset:disabled :is(.flood-legend, .flood-label) { color: var(--flood-sys-color-field-disabled-content); }
|
|
301
500
|
.flood-root .flood-label { color: var(--flood-sys-color-content-helper); 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); }
|
|
302
501
|
.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); }
|
|
@@ -332,11 +531,10 @@
|
|
|
332
531
|
.flood-root .flood-check[type="radio"] { border-radius: var(--flood-sys-radius-action); }
|
|
333
532
|
.flood-root .flood-check[type="radio"]::before { inline-size: calc(var(--flood-sys-size-choice) * .45); block-size: calc(var(--flood-sys-size-choice) * .45); border-radius: var(--flood-sys-radius-action); background: currentColor; }
|
|
334
533
|
.flood-root .flood-check:disabled { background: var(--flood-sys-color-field-disabled); border-color: var(--flood-sys-color-field-border); color: var(--flood-sys-color-field-disabled-content); opacity: 1; }
|
|
335
|
-
.flood-root .flood-switch-input { inline-size: var(--flood-sys-size-switch-width); block-size: var(--flood-sys-size-switch-height); padding: calc((var(--flood-sys-size-switch-height) - var(--flood-sys-size-switch-thumb)) / 2 - var(--flood-sys-stroke-width)); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-field-border); border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-action-subtle-hover); }
|
|
336
|
-
.flood-root .flood-switch-input::before { inline-size: var(--flood-sys-size-switch-thumb); block-size: var(--flood-sys-size-switch-thumb); border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-content-default); transition:
|
|
534
|
+
.flood-root .flood-switch-input { position: relative; box-sizing: border-box; inline-size: var(--flood-sys-size-switch-width); block-size: var(--flood-sys-size-switch-height); padding: calc((var(--flood-sys-size-switch-height) - var(--flood-sys-size-switch-thumb)) / 2 - var(--flood-sys-stroke-width)); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-field-border); border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-action-subtle-hover); }
|
|
535
|
+
.flood-root .flood-switch-input::before { position: absolute; inset-block-start: calc((var(--flood-sys-size-switch-height) - var(--flood-sys-size-switch-thumb)) / 2 - var(--flood-sys-stroke-width)); inset-inline-start: calc((var(--flood-sys-size-switch-height) - var(--flood-sys-size-switch-thumb)) / 2 - var(--flood-sys-stroke-width)); transform: none; inline-size: var(--flood-sys-size-switch-thumb); block-size: var(--flood-sys-size-switch-thumb); border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-content-default); transition: inset-inline-start var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing); }
|
|
337
536
|
.flood-root .flood-switch-input:checked { background: var(--flood-sys-color-action-primary-rest); border-color: var(--flood-sys-color-action-primary-rest); }
|
|
338
|
-
.flood-root .flood-switch-input:checked::before { transform:
|
|
339
|
-
.flood-root .flood-switch-input:dir(rtl):checked::before { transform: translateX(calc(var(--flood-sys-size-switch-height) - var(--flood-sys-size-switch-width))); }
|
|
537
|
+
.flood-root .flood-switch-input:checked::before { transform: none; inset-inline-start: calc(var(--flood-sys-size-switch-width) - var(--flood-sys-size-switch-height) + (var(--flood-sys-size-switch-height) - var(--flood-sys-size-switch-thumb)) / 2 - var(--flood-sys-stroke-width)); background: var(--flood-sys-color-action-primary-content); }
|
|
340
538
|
.flood-root .flood-switch-input:disabled { opacity: 1; border-color: var(--flood-sys-color-field-border); background: var(--flood-sys-color-field-disabled); }
|
|
341
539
|
.flood-root .flood-switch-input:disabled::before { background: var(--flood-sys-color-field-disabled-content); }
|
|
342
540
|
.flood-root .flood-link { font-size: inherit; color: var(--flood-sys-color-content-default); text-underline-offset: var(--flood-sys-space-1); }
|
|
@@ -552,12 +750,12 @@
|
|
|
552
750
|
.flood-root .flood-button-group[data-orientation="vertical"] > .flood-button:not([hidden]) ~ .flood-button:not([hidden]) { border-block-start-color: var(--flood-sys-color-field-border); }
|
|
553
751
|
.flood-root .flood-button-group[data-orientation="vertical"] > .flood-button:nth-child(1 of .flood-button:not([hidden])) { border-start-start-radius: var(--flood-sys-radius-field); border-start-end-radius: var(--flood-sys-radius-field); }
|
|
554
752
|
.flood-root .flood-button-group[data-orientation="vertical"] > .flood-button:nth-last-child(1 of .flood-button:not([hidden])) { border-end-start-radius: var(--flood-sys-radius-field); border-end-end-radius: var(--flood-sys-radius-field); }
|
|
555
|
-
.flood-root .flood-input-group { --flood-group-stroke: var(--flood-sys-stroke-width); --flood-group-height: var(--flood-control-height); --flood-group-inset: max(var(--flood-sys-space-1), var(--flood-sys-focus-width)); box-sizing: border-box; display: flex; align-items: center; gap: var(--flood-control-gap); min-inline-size: 0; inline-size: 100%; min-block-size: var(--flood-group-height); padding-inline: calc(var(--flood-control-padding) - var(--flood-group-stroke)); padding-block: calc(var(--flood-group-inset) - var(--flood-group-stroke)); border: var(--flood-group-stroke) solid var(--flood-sys-color-field-border); border-radius: var(--flood-sys-radius-field); background: var(--flood-sys-color-field-background); color: var(--flood-sys-color-field-content); }
|
|
753
|
+
.flood-root .flood-input-group { flex-wrap: wrap; --flood-group-stroke: var(--flood-sys-stroke-width); --flood-group-height: var(--flood-control-height); --flood-group-inset: max(var(--flood-sys-space-1), var(--flood-sys-focus-width)); box-sizing: border-box; display: flex; align-items: center; gap: var(--flood-control-gap); min-inline-size: 0; inline-size: 100%; min-block-size: var(--flood-group-height); padding-inline: calc(var(--flood-control-padding) - var(--flood-group-stroke)); padding-block: calc(var(--flood-group-inset) - var(--flood-group-stroke)); border: var(--flood-group-stroke) solid var(--flood-sys-color-field-border); border-radius: var(--flood-sys-radius-field); background: var(--flood-sys-color-field-background); color: var(--flood-sys-color-field-content); }
|
|
556
754
|
.flood-root .flood-input-group[data-status] { border-color: var(--flood-field-feedback); }
|
|
557
755
|
.flood-root .flood-input-group[data-readonly="true"] { background: var(--flood-sys-color-surface-canvas); border-style: dashed; }
|
|
558
756
|
.flood-root .flood-input-group[data-disabled="true"] { background: var(--flood-sys-color-field-disabled); border-color: var(--flood-sys-color-field-border); color: var(--flood-sys-color-field-disabled-content); }
|
|
559
757
|
.flood-root .flood-input-group:has(> .flood-input:focus-visible) { --flood-group-stroke: var(--flood-sys-focus-width); border-color: var(--flood-sys-color-focus-ring); border-style: solid; }
|
|
560
|
-
.flood-root .flood-input-group > .flood-input { flex: 1 1
|
|
758
|
+
.flood-root .flood-input-group > .flood-input { flex: 1 1 4rem; align-self: stretch; inline-size: 0; min-inline-size: min(100%, 4rem); min-block-size: calc(var(--flood-group-height) - 2 * var(--flood-group-inset)); border: 0; border-radius: 0; background: transparent; padding-inline: 0; padding-block: max(0px, calc((var(--flood-control-height) - var(--flood-control-text) * var(--flood-control-line)) / 2 - var(--flood-group-inset))); }
|
|
561
759
|
.flood-root .flood-input-group > .flood-input:focus-visible { outline: none; border: 0; padding-inline: 0; }
|
|
562
760
|
.flood-root .flood-input-group__addon { color: var(--flood-sys-color-content-subtle); display: flex; align-items: center; flex: 0 1 auto; min-inline-size: 0; max-inline-size: 40%; overflow-wrap: anywhere; font-size: var(--flood-control-text); line-height: var(--flood-control-line); }
|
|
563
761
|
/* Text edges retain reading padding; nested actions use the same optical inset on every edge. */
|
|
@@ -597,3 +795,336 @@
|
|
|
597
795
|
.flood-root .flood-segmented .flood-choice:has(input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
|
|
598
796
|
.flood-root .flood-segmented .flood-choice:has(input:focus-visible) { outline-color: Highlight; }
|
|
599
797
|
}
|
|
798
|
+
|
|
799
|
+
.flood-root .flood-choice[hidden] { display: none; }
|
|
800
|
+
|
|
801
|
+
.flood-root .flood-input-group__addon:has(> .flood-button) { flex: 0 0 auto; max-inline-size: 100%; }
|
|
802
|
+
.flood-root .flood-input-group__addon > .flood-button { white-space: normal; overflow-wrap: normal; flex-shrink: 0; min-inline-size: min-content; }
|
|
803
|
+
.flood-root .flood-connected-scroll .flood-button-group { inline-size: max-content; max-inline-size: none; }
|
|
804
|
+
.flood-root .flood-connected-scroll .flood-button-group > .flood-button { flex-shrink: 0; min-inline-size: min-content; overflow-wrap: normal; white-space: nowrap; }
|
|
805
|
+
.flood-root .flood-connected-scroll .flood-button-group[data-orientation="vertical"] { inline-size: 100%; }
|
|
806
|
+
.flood-root .flood-connected-scroll .flood-button-group[data-orientation="vertical"] > .flood-button { white-space: normal; }
|
|
807
|
+
.flood-scroll-area[hidden], .flood-root .flood-select[hidden] { display: none; }
|
|
808
|
+
|
|
809
|
+
.flood-root .flood-connected-scroll .flood-button:focus-visible { outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
|
|
810
|
+
|
|
811
|
+
.flood-root .flood-connected-scroll .flood-button-group > .flood-icon-button { min-inline-size: var(--flood-control-height); }
|
|
812
|
+
@media (pointer: coarse) { .flood-root .flood-connected-scroll .flood-button-group > .flood-icon-button { min-inline-size: max(var(--flood-control-height), var(--flood-sys-size-touch)); } }
|
|
813
|
+
.flood-root .flood-input-group__addon--end:has(> .flood-button) { margin-inline-start: auto; }
|
|
814
|
+
|
|
815
|
+
.flood-root .flood-slider[data-status] .flood-slider__fill { background: var(--flood-field-feedback); }
|
|
816
|
+
.flood-root .flood-slider:disabled .flood-slider__input::-webkit-slider-thumb { background: var(--flood-sys-color-field-disabled-content); cursor: default; }
|
|
817
|
+
.flood-root .flood-slider:disabled .flood-slider__input::-moz-range-thumb { background: var(--flood-sys-color-field-disabled-content); cursor: default; }
|
|
818
|
+
.flood-root .flood-combobox { min-inline-size: 0; inline-size: 100%; }
|
|
819
|
+
.flood-root .flood-combobox__actions { display: inline-flex; flex: none; align-items: center; gap: var(--flood-sys-space-1); }
|
|
820
|
+
.flood-root .flood-combobox__control > .flood-input-group__addon--end { flex: none; max-inline-size: 100%; margin-inline-start: auto; }
|
|
821
|
+
.flood-root .flood-combobox__control:has(> .flood-input-group__addon--end .flood-combobox__actions) { padding-inline-end: calc(var(--flood-group-inset) - var(--flood-group-stroke)); }
|
|
822
|
+
.flood-root .flood-combobox__actions > .flood-button { --flood-control-height: calc(var(--flood-group-height) - 2 * var(--flood-group-inset)); border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-group-inset))); }
|
|
823
|
+
.flood-root .flood-combobox__clear-empty { visibility: hidden; }
|
|
824
|
+
.flood-root .flood-combobox__option-text { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; }
|
|
825
|
+
.flood-root .flood-combobox__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); }
|
|
826
|
+
@media (forced-colors: active) { .flood-root .flood-combobox__description { color: inherit; } }
|
|
827
|
+
.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; }
|
|
828
|
+
.flood-root .flood-tag[data-size="sm"] { --flood-tag-height: var(--flood-sys-control-2xs-height); font-size: var(--flood-sys-type-helper-size); }
|
|
829
|
+
.flood-root .flood-tag[data-size="lg"] { --flood-tag-height: var(--flood-sys-control-sm-height); font-size: var(--flood-sys-type-body-size); }
|
|
830
|
+
.flood-root .flood-tag__label { min-inline-size: 0; overflow-wrap: anywhere; }
|
|
831
|
+
.flood-root .flood-tag:has(> .flood-tag__remove) { padding-inline-end: calc(var(--flood-sys-space-1) / 2); }
|
|
832
|
+
.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); }
|
|
833
|
+
.flood-root .flood-tag[data-disabled="true"] { color: var(--flood-sys-color-content-subtle); }
|
|
834
|
+
.flood-root .flood-tag[hidden] { display: none; }
|
|
835
|
+
.flood-root .flood-multi-select__control { padding: calc(var(--flood-group-inset) - var(--flood-group-stroke)); gap: var(--flood-sys-space-1); }
|
|
836
|
+
.flood-root .flood-multi-select__control > .flood-tag { --flood-tag-height: calc(var(--flood-group-height) - 2 * var(--flood-group-inset)); border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-group-inset))); font-size: var(--flood-control-text); line-height: var(--flood-control-line); }
|
|
837
|
+
@media (pointer: coarse) {
|
|
838
|
+
.flood-root .flood-tag:has(> .flood-tag__remove) { padding-block: 0; }
|
|
839
|
+
.flood-root .flood-tag > .flood-tag__remove { min-block-size: var(--flood-sys-size-touch); min-inline-size: var(--flood-sys-size-touch); }
|
|
840
|
+
}
|
|
841
|
+
@media (forced-colors: active) { .flood-root .flood-tag { background: Canvas; color: CanvasText; border-color: CanvasText; } }
|
|
842
|
+
.flood-root .flood-multi-select__control:has(.flood-multi-select__editor > .flood-input:disabled) { background: var(--flood-sys-color-field-disabled); border-color: var(--flood-sys-color-field-border); }
|
|
843
|
+
.flood-root .flood-multi-select__control:has(.flood-multi-select__editor > .flood-input:disabled) > .flood-tag { color: var(--flood-sys-color-content-subtle); }
|
|
844
|
+
|
|
845
|
+
.flood-root .flood-multi-select__editor { display: flex; align-items: center; gap: var(--flood-sys-space-1); flex: 1 1 10rem; min-inline-size: min(100%, calc(var(--flood-group-height) + 4rem)); max-inline-size: 100%; }
|
|
846
|
+
.flood-root .flood-multi-select__editor > .flood-input { inline-size: 0; min-inline-size: 0; flex: 1 1 0; min-block-size: calc(var(--flood-group-height) - 2 * var(--flood-group-inset)); border: 0; border-radius: 0; background: transparent; padding: 0 var(--flood-sys-space-2); }
|
|
847
|
+
.flood-root .flood-multi-select__editor > .flood-input:focus-visible { outline: none; border: 0; padding: 0 var(--flood-sys-space-2); }
|
|
848
|
+
.flood-root .flood-multi-select__control:has(.flood-multi-select__editor > .flood-input:focus-visible) { --flood-group-stroke: var(--flood-sys-focus-width); border-color: var(--flood-sys-color-focus-ring); border-style: solid; }
|
|
849
|
+
|
|
850
|
+
/* Flood owns the single clear action; suppress duplicate browser decoration. */
|
|
851
|
+
.flood-root .flood-search-input input::-webkit-search-cancel-button,
|
|
852
|
+
.flood-root .flood-search-input input::-webkit-search-decoration { -webkit-appearance: none; }
|
|
853
|
+
|
|
854
|
+
.flood-root .flood-password-input input::-ms-reveal { display: none; }
|
|
855
|
+
|
|
856
|
+
/* Transparent native file control keeps browser activation, labels and validity. */
|
|
857
|
+
.flood-root .flood-file-input { flex-wrap: nowrap; }
|
|
858
|
+
.flood-root .flood-file-input__picker { position: relative; flex: 1 1 0; min-inline-size: 0; align-self: stretch; display: flex; align-items: center; min-block-size: calc(var(--flood-group-height) - 2 * var(--flood-group-inset)); }
|
|
859
|
+
.flood-root .flood-file-input__native { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; font: inherit; }
|
|
860
|
+
.flood-root .flood-file-input__display { display: flex; align-items: center; gap: var(--flood-control-gap); min-inline-size: 0; inline-size: 100%; pointer-events: none; font-size: var(--flood-control-text); line-height: var(--flood-control-line); }
|
|
861
|
+
.flood-root .flood-file-input__display > .flood-icon { flex: none; color: var(--flood-sys-color-content-subtle); }
|
|
862
|
+
.flood-root .flood-file-input__display[data-empty] { color: var(--flood-sys-color-field-placeholder); }
|
|
863
|
+
.flood-root .flood-file-input__summary { min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
864
|
+
.flood-root .flood-file-input:has(.flood-file-input__native:focus-visible) { --flood-group-stroke: var(--flood-sys-focus-width); border-color: var(--flood-sys-color-focus-ring); }
|
|
865
|
+
.flood-root .flood-file-input:has(.flood-file-input__native:disabled) { background: var(--flood-sys-color-field-disabled); color: var(--flood-sys-color-field-disabled-content); border-color: var(--flood-sys-color-field-border); }
|
|
866
|
+
.flood-root .flood-file-input__native:disabled { cursor: not-allowed; }
|
|
867
|
+
.flood-root .flood-file-input:has(.flood-file-input__native:disabled) .flood-file-input__display { color: var(--flood-sys-color-field-disabled-content); }
|
|
868
|
+
@media (forced-colors: active) { .flood-root .flood-file-input:has(.flood-file-input__native:focus-visible) { border-color: Highlight; } }
|
|
869
|
+
|
|
870
|
+
.flood-root .flood-file-input-field { min-inline-size: 0; inline-size: 100%; }
|
|
871
|
+
.flood-root .flood-file-input__selection { margin-block-start: var(--flood-sys-space-2); }
|
|
872
|
+
.flood-root .flood-file-input__selection > summary { display: flex; align-items: center; gap: var(--flood-sys-space-2); inline-size: fit-content; max-inline-size: 100%; padding: var(--flood-sys-space-1) 0; cursor: pointer; color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); }
|
|
873
|
+
.flood-root .flood-file-input__selection > summary::before { content: "›"; display: inline-block; font-size: 1.25em; transform: rotate(0deg); }
|
|
874
|
+
.flood-root .flood-file-input__selection[open] > summary::before { transform: rotate(90deg); }
|
|
875
|
+
.flood-root .flood-file-input__selection > summary::-webkit-details-marker { display: none; }
|
|
876
|
+
.flood-root .flood-file-input__count { font-variant-numeric: tabular-nums; }
|
|
877
|
+
.flood-root .flood-file-input__list { list-style: none; padding: 0; margin: var(--flood-sys-space-1) 0 0; max-block-size: 12rem; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--flood-sys-color-content-subtle) transparent; }
|
|
878
|
+
.flood-root .flood-file-input__file { display: flex; align-items: center; gap: var(--flood-sys-space-2); padding-block: var(--flood-sys-space-2); border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); }
|
|
879
|
+
.flood-root .flood-file-input__metadata { display: grid; gap: var(--flood-sys-space-1); flex: 1 1 0; min-inline-size: 0; }
|
|
880
|
+
.flood-root .flood-file-input__name { font-size: var(--flood-sys-type-helper-size); overflow-wrap: anywhere; }
|
|
881
|
+
.flood-root .flood-file-input__size { font-size: var(--flood-sys-type-helper-size); color: var(--flood-sys-color-content-subtle); }
|
|
882
|
+
.flood-root .flood-file-input__file > .flood-icon-button { flex: none; }
|
|
883
|
+
|
|
884
|
+
.flood-root .flood-alert-dialog { inline-size: min(26rem, calc(100% - var(--flood-sys-space-8))); }
|
|
885
|
+
.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); }
|
|
886
|
+
.flood-root .flood-alert-dialog__actions > .flood-button { max-inline-size: 100%; overflow-wrap: anywhere; }
|
|
887
|
+
@media (max-width: 32rem) {
|
|
888
|
+
.flood-root .flood-alert-dialog__actions > .flood-button { inline-size: 100%; }
|
|
889
|
+
}
|
|
890
|
+
|
|
891
|
+
/* Drawer keeps the modal runtime; only geometry and body containment differ. */
|
|
892
|
+
.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(0, 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: hidden; padding-block-start: max(var(--flood-sys-space-4), env(safe-area-inset-top)); padding-block-end: max(var(--flood-sys-space-6), env(safe-area-inset-bottom)); }
|
|
893
|
+
.flood-root .flood-drawer[data-size="sm"] { --flood-drawer-size: 20rem; }
|
|
894
|
+
.flood-root .flood-drawer[data-size="lg"] { --flood-drawer-size: 34rem; }
|
|
895
|
+
.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%; }
|
|
896
|
+
.flood-root .flood-drawer[data-side="start"] { inset-inline-start: 0; inset-inline-end: auto; border-start-end-radius: var(--flood-sys-radius-block); border-end-end-radius: var(--flood-sys-radius-block); --flood-drawer-x: -100%; }
|
|
897
|
+
.flood-root .flood-drawer[data-drawer-direction="rtl"][data-side="end"] { --flood-drawer-x: -100%; }
|
|
898
|
+
.flood-root .flood-drawer[data-drawer-direction="rtl"][data-side="start"] { --flood-drawer-x: 100%; }
|
|
899
|
+
.flood-root .flood-drawer:is([data-side="top"], [data-side="bottom"]) { left: 0; right: auto; inline-size: 100vw; block-size: min(var(--flood-drawer-size), 100dvh); }
|
|
900
|
+
.flood-root .flood-drawer[data-side="top"] { inset-block-start: 0; inset-block-end: auto; border-end-start-radius: var(--flood-sys-radius-block); border-end-end-radius: var(--flood-sys-radius-block); --flood-drawer-y: -100%; }
|
|
901
|
+
.flood-root .flood-drawer[data-side="bottom"] { inset-block-start: auto; inset-block-end: 0; border-start-start-radius: var(--flood-sys-radius-block); border-start-end-radius: var(--flood-sys-radius-block); --flood-drawer-y: 100%; }
|
|
902
|
+
.flood-root .flood-drawer > .flood-overlay-header { grid-area: header; }
|
|
903
|
+
.flood-root .flood-drawer > .flood-overlay-description { grid-area: description; }
|
|
904
|
+
.flood-root .flood-drawer__body { grid-area: body; min-block-size: 0; min-inline-size: 0; margin-block-start: var(--flood-sys-space-4); }
|
|
905
|
+
.flood-root .flood-drawer .flood-overlay-body { margin: 0; }
|
|
906
|
+
.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); }
|
|
907
|
+
.flood-root .flood-drawer__footer > * { max-inline-size: 100%; }
|
|
908
|
+
@keyframes flood-drawer-enter { from { transform: translate(var(--flood-drawer-x), var(--flood-drawer-y)); } to { transform: translate(0, 0); } }
|
|
909
|
+
@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); } }
|
|
910
|
+
|
|
911
|
+
.flood-root .flood-drawer__body > .flood-scroll-area { block-size: 100%; }
|
|
912
|
+
.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; }
|
|
913
|
+
.flood-root .flood-drawer > .flood-overlay-header > .flood-overlay-close { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
|
|
914
|
+
.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)); }
|
|
915
|
+
|
|
916
|
+
/* Floating surfaces use a distinct material; modal surfaces retain their fill. */
|
|
917
|
+
.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); }
|
|
918
|
+
.flood-root .flood-select__option[data-active="true"],
|
|
919
|
+
.flood-root .flood-menu .flood-menu__item:not([aria-disabled="true"]):is(:focus, :hover) { background: var(--flood-sys-color-selection-floating); }
|
|
920
|
+
@supports (backdrop-filter: blur(1px)) {
|
|
921
|
+
@media (prefers-reduced-transparency: no-preference) {
|
|
922
|
+
.flood-root :is(.flood-overlay-panel, .flood-select__menu) { background: var(--flood-sys-color-surface-floating-translucent); backdrop-filter: blur(var(--flood-sys-effect-floating-blur)) saturate(var(--flood-sys-effect-floating-saturation)); }
|
|
923
|
+
}
|
|
924
|
+
}
|
|
925
|
+
@media (forced-colors: active) {
|
|
926
|
+
.flood-root :is(.flood-overlay-panel, .flood-select__menu) { background: Canvas; border-color: CanvasText; box-shadow: none; backdrop-filter: none; }
|
|
927
|
+
.flood-root .flood-select__option[data-active="true"],
|
|
928
|
+
.flood-root .flood-menu .flood-menu__item:not([aria-disabled="true"]):is(:focus, :hover) { background: Highlight; color: HighlightText; forced-color-adjust: none; }
|
|
929
|
+
}
|
|
930
|
+
|
|
931
|
+
.flood-root .flood-avatar-group { display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0; list-style: none; gap: 0; }
|
|
932
|
+
.flood-root .flood-avatar-group > li { display: flex; min-inline-size: 0; }
|
|
933
|
+
.flood-root .flood-avatar-group > li + li { margin-inline-start: calc(-1 * var(--flood-sys-space-2)); }
|
|
934
|
+
.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); }
|
|
935
|
+
.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; }
|
|
936
|
+
.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: anywhere; }
|
|
937
|
+
.flood-root .flood-status-indicator[data-size="sm"] { font-size: var(--flood-sys-type-helper-size); }
|
|
938
|
+
.flood-root .flood-status-indicator[data-size="lg"] { font-size: var(--flood-sys-type-body-size); }
|
|
939
|
+
.flood-root .flood-status-indicator[data-tone="accent"] { --flood-status-color: var(--flood-sys-color-accent-content); }
|
|
940
|
+
.flood-root .flood-status-indicator[data-tone="success"] { --flood-status-color: var(--flood-sys-color-feedback-success); }
|
|
941
|
+
.flood-root .flood-status-indicator[data-tone="warning"] { --flood-status-color: var(--flood-sys-color-feedback-warning); }
|
|
942
|
+
.flood-root .flood-status-indicator[data-tone="error"] { --flood-status-color: var(--flood-sys-color-feedback-error); }
|
|
943
|
+
.flood-root .flood-status-indicator[data-tone="info"] { --flood-status-color: var(--flood-sys-color-feedback-info); }
|
|
944
|
+
.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); }
|
|
945
|
+
.flood-root .flood-figure { display: grid; gap: var(--flood-sys-space-2); margin: 0; min-inline-size: 0; }
|
|
946
|
+
.flood-root .flood-figure > * { max-inline-size: 100%; min-inline-size: 0; }
|
|
947
|
+
.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: anywhere; }
|
|
948
|
+
.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; }
|
|
949
|
+
.flood-root .flood-blockquote__quote { font-size: var(--flood-sys-type-body-size); line-height: var(--flood-sys-type-body-line-height); overflow-wrap: anywhere; }
|
|
950
|
+
.flood-root .flood-blockquote__quote > :first-child { margin-block-start: 0; }
|
|
951
|
+
.flood-root .flood-blockquote__quote > :last-child { margin-block-end: 0; }
|
|
952
|
+
.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: anywhere; }
|
|
953
|
+
.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; }
|
|
954
|
+
.flood-root .flood-inline-code[data-size="sm"] { font-size: var(--flood-sys-type-helper-size); }
|
|
955
|
+
.flood-root .flood-inline-code[data-size="lg"] { font-size: var(--flood-sys-type-body-size); }
|
|
956
|
+
.flood-root .flood-inline-code[data-wrap="false"] { white-space: pre; overflow-wrap: normal; }
|
|
957
|
+
.flood-root .flood-metric { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; margin: 0; }
|
|
958
|
+
.flood-root .flood-metric > dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
|
|
959
|
+
.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); }
|
|
960
|
+
.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; }
|
|
961
|
+
.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); }
|
|
962
|
+
.flood-root .flood-metric[data-size="lg"] .flood-metric__value { font-size: var(--flood-sys-type-display-size); line-height: var(--flood-sys-type-display-line-height); }
|
|
963
|
+
.flood-root .flood-metric__trend { display: flex; align-items: baseline; gap: var(--flood-sys-space-1); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); color: var(--flood-sys-color-content-subtle); }
|
|
964
|
+
.flood-root .flood-metric__trend[data-tone="success"] { color: var(--flood-sys-color-feedback-success); }
|
|
965
|
+
.flood-root .flood-metric__trend[data-tone="warning"] { color: var(--flood-sys-color-feedback-warning); }
|
|
966
|
+
.flood-root .flood-metric__trend[data-tone="error"] { color: var(--flood-sys-color-feedback-error); }
|
|
967
|
+
.flood-root .flood-metric__trend[data-tone="info"] { color: var(--flood-sys-color-feedback-info); }
|
|
968
|
+
.flood-root .flood-metric__trend[data-tone="accent"] { color: var(--flood-sys-color-accent-content); }
|
|
969
|
+
.flood-root .flood-metric__hint { font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); color: var(--flood-sys-color-content-subtle); }
|
|
970
|
+
.flood-root .flood-timeline { list-style: none; margin: 0; padding: 0; min-inline-size: 0; }
|
|
971
|
+
.flood-root .flood-timeline__item { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--flood-sys-space-3); padding-block-end: var(--flood-sys-space-4); }
|
|
972
|
+
.flood-root .flood-timeline__item:last-child { padding-block-end: 0; }
|
|
973
|
+
.flood-root .flood-timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: calc(.625rem - var(--flood-sys-stroke-width) / 2); inset-block-start: 1.25rem; inset-block-end: 0; inline-size: var(--flood-sys-stroke-width); background: var(--flood-sys-color-border-decorative); }
|
|
974
|
+
.flood-root .flood-timeline__marker { z-index: 1; box-sizing: border-box; display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-action); color: var(--flood-sys-color-content-subtle); background: var(--flood-sys-color-surface-default); }
|
|
975
|
+
.flood-root .flood-timeline__marker > svg { inline-size: 100%; block-size: 100%; }
|
|
976
|
+
.flood-root .flood-timeline__item[data-state="current"] .flood-timeline__marker { color: var(--flood-sys-color-accent-content); }
|
|
977
|
+
.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); }
|
|
978
|
+
.flood-root .flood-timeline__item[data-state="complete"] .flood-timeline__marker { color: var(--flood-sys-color-feedback-success); }
|
|
979
|
+
.flood-root .flood-timeline__content { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; }
|
|
980
|
+
.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: anywhere; }
|
|
981
|
+
.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: anywhere; }
|
|
982
|
+
.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); }
|
|
983
|
+
.flood-root :is(.flood-avatar-group, .flood-status-indicator, .flood-figure, .flood-blockquote, .flood-inline-code, .flood-metric, .flood-timeline)[hidden] { display: none; }
|
|
984
|
+
@media (forced-colors: active) {
|
|
985
|
+
.flood-root .flood-status-indicator__dot { background: CanvasText; }
|
|
986
|
+
.flood-root .flood-avatar-group .flood-avatar { box-shadow: none; }
|
|
987
|
+
.flood-root .flood-inline-code { color: CanvasText; background: Canvas; border: var(--flood-sys-stroke-width) solid CanvasText; }
|
|
988
|
+
.flood-root .flood-timeline__marker { color: CanvasText; background: Canvas; border-color: CanvasText; }
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
.flood-root .flood-navigation-list { min-inline-size: 0; }
|
|
992
|
+
.flood-root .flood-navigation-list :is(ul, li) { padding: 0; margin: 0; list-style: none; }
|
|
993
|
+
.flood-root .flood-navigation-list__group + .flood-navigation-list__group { margin-block-start: var(--flood-sys-space-4); }
|
|
994
|
+
.flood-root .flood-navigation-list__group-title { margin: 0; padding: var(--flood-sys-space-2) var(--flood-sys-space-3); color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); }
|
|
995
|
+
.flood-root .flood-navigation-list__link { display: flex; align-items: center; gap: var(--flood-sys-space-2); box-sizing: border-box; min-inline-size: 0; min-block-size: var(--flood-sys-control-md-height); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); border-radius: var(--flood-sys-radius-field); color: var(--flood-sys-color-content-default); text-decoration: none; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
996
|
+
.flood-root .flood-navigation-list[data-size="sm"] .flood-navigation-list__link { min-block-size: var(--flood-sys-control-sm-height); }
|
|
997
|
+
.flood-root .flood-navigation-list[data-size="lg"] .flood-navigation-list__link { min-block-size: var(--flood-sys-control-lg-height); }
|
|
998
|
+
.flood-root .flood-navigation-list__link:hover { background: var(--flood-sys-color-surface-raised); }
|
|
999
|
+
.flood-root .flood-navigation-list__link[aria-current="page"] { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
1000
|
+
.flood-root :is(.flood-navigation-list__text,.flood-steps__text) { display: grid; min-inline-size: 0; gap: var(--flood-sys-space-1); }
|
|
1001
|
+
.flood-root :is(.flood-navigation-list__label,.flood-steps__title) { overflow-wrap: anywhere; }
|
|
1002
|
+
.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: anywhere; }
|
|
1003
|
+
.flood-root .flood-navigation-list__link > .flood-icon { flex: none; }
|
|
1004
|
+
.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); }
|
|
1005
|
+
|
|
1006
|
+
.flood-root .flood-steps { display: flex; align-items: flex-start; gap: var(--flood-sys-space-4); padding: 0; margin: 0; min-inline-size: 0; list-style: none; }
|
|
1007
|
+
.flood-root .flood-steps > li { flex: 1 1 0; min-inline-size: 0; }
|
|
1008
|
+
.flood-root .flood-steps__content { display: flex; gap: var(--flood-sys-space-2); align-items: flex-start; min-inline-size: 0; box-sizing: border-box; font: inherit; color: var(--flood-sys-color-content-default); text-align: start; }
|
|
1009
|
+
.flood-root .flood-steps__action { inline-size: 100%; min-block-size: var(--flood-sys-control-md-height); padding: var(--flood-sys-space-1); border: 0; border-radius: var(--flood-sys-radius-field); background: transparent; cursor: pointer; }
|
|
1010
|
+
.flood-root .flood-steps__action:hover:not(:disabled) { background: var(--flood-sys-color-surface-raised); }
|
|
1011
|
+
.flood-root .flood-steps__action:disabled { color: var(--flood-sys-color-field-disabled-content); cursor: not-allowed; }
|
|
1012
|
+
.flood-root .flood-steps__indicator { display: inline-grid; place-items: center; flex: none; inline-size: var(--flood-sys-control-xs-height); block-size: var(--flood-sys-control-xs-height); box-sizing: border-box; border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-action); font-size: var(--flood-sys-type-helper-size); font-weight: var(--flood-sys-type-label-weight); color: var(--flood-sys-color-content-subtle); }
|
|
1013
|
+
.flood-root .flood-steps__indicator > svg { inline-size: var(--flood-sys-control-xs-icon-size); block-size: var(--flood-sys-control-xs-icon-size); }
|
|
1014
|
+
.flood-root .flood-steps__text { padding-block-start: var(--flood-sys-space-1); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
|
|
1015
|
+
.flood-root .flood-steps > li[data-state="complete"] .flood-steps__indicator { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-content-default); }
|
|
1016
|
+
.flood-root .flood-steps > li[aria-current="step"] .flood-steps__indicator { border: var(--flood-sys-focus-width) solid var(--flood-sys-color-selection-content); background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
|
|
1017
|
+
.flood-root .flood-steps > li[data-state="error"] .flood-steps__indicator { border-color: var(--flood-sys-color-feedback-error); color: var(--flood-sys-color-feedback-error); }
|
|
1018
|
+
.flood-root .flood-steps[data-orientation="vertical"] { flex-direction: column; }
|
|
1019
|
+
.flood-root .flood-steps[data-orientation="vertical"] > li { inline-size: 100%; }
|
|
1020
|
+
@media (max-width: 36rem) { .flood-root .flood-steps[data-orientation="horizontal"] { flex-direction: column; } .flood-root .flood-steps > li { inline-size: 100%; } }
|
|
1021
|
+
|
|
1022
|
+
.flood-root .flood-section { min-inline-size: 0; }
|
|
1023
|
+
.flood-root .flood-section__header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--flood-sys-space-4); }
|
|
1024
|
+
.flood-root .flood-section__heading { display: grid; gap: var(--flood-sys-space-1); min-inline-size: 0; flex: 1 1 12rem; }
|
|
1025
|
+
.flood-root .flood-section__title { margin: 0; overflow-wrap: anywhere; }
|
|
1026
|
+
.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: anywhere; }
|
|
1027
|
+
.flood-root .flood-section__description > :first-child { margin-block-start: 0; }
|
|
1028
|
+
.flood-root .flood-section__description > :last-child { margin-block-end: 0; }
|
|
1029
|
+
.flood-root .flood-section__actions { display: flex; flex-wrap: wrap; gap: var(--flood-sys-space-2); max-inline-size: 100%; }
|
|
1030
|
+
.flood-root .flood-section__body { margin-block-start: var(--flood-sys-space-4); min-inline-size: 0; }
|
|
1031
|
+
|
|
1032
|
+
.flood-root .flood-split { container: flood-split / inline-size; min-inline-size: 0; inline-size: 100%; }
|
|
1033
|
+
.flood-root .flood-split__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--flood-layout-gap); align-items: start; min-inline-size: 0; }
|
|
1034
|
+
.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); }
|
|
1035
|
+
.flood-root .flood-split__layout[data-side="start"][data-ratio="aside"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
|
|
1036
|
+
.flood-root .flood-split__layout[data-ratio="balanced"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
1037
|
+
.flood-root :is(.flood-split__main,.flood-split__aside) { min-inline-size: 0; overflow-wrap: anywhere; }
|
|
1038
|
+
@container flood-split (max-width: 30rem) { .flood-root .flood-split__layout[data-collapse="sm"] { grid-template-columns: minmax(0, 1fr); } }
|
|
1039
|
+
@container flood-split (max-width: 48rem) { .flood-root .flood-split__layout[data-collapse="md"] { grid-template-columns: minmax(0, 1fr); } }
|
|
1040
|
+
@container flood-split (max-width: 64rem) { .flood-root .flood-split__layout[data-collapse="lg"] { grid-template-columns: minmax(0, 1fr); } }
|
|
1041
|
+
|
|
1042
|
+
.flood-root .flood-center { display: grid; place-items: center; box-sizing: border-box; min-inline-size: 0; inline-size: 100%; }
|
|
1043
|
+
.flood-root .flood-center[data-inline="true"] { display: inline-grid; inline-size: auto; vertical-align: middle; }
|
|
1044
|
+
.flood-root .flood-center__content { min-inline-size: 0; max-inline-size: min(100%, var(--flood-center-max, 100%)); }
|
|
1045
|
+
|
|
1046
|
+
.flood-root .flood-skip-link { position: fixed; inset-block-start: var(--flood-sys-space-3); inset-inline-start: var(--flood-sys-space-3); z-index: var(--flood-sys-layer-popover); padding: var(--flood-sys-space-2) var(--flood-sys-space-4); 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); }
|
|
1047
|
+
.flood-root .flood-skip-link:not(:focus) { inline-size: 1px; block-size: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
|
|
1048
|
+
.flood-root .flood-skip-link:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: var(--flood-sys-focus-offset); }
|
|
1049
|
+
.flood-root :is(.flood-navigation-list,.flood-steps,.flood-section,.flood-split,.flood-center,.flood-skip-link)[hidden] { display: none; }
|
|
1050
|
+
@media (pointer: coarse) { .flood-root .flood-navigation-list__link, .flood-root .flood-steps__action { min-block-size: var(--flood-sys-size-touch); } }
|
|
1051
|
+
@media (forced-colors: active) { .flood-root .flood-navigation-list__link[aria-current="page"] { background: Highlight; color: HighlightText; forced-color-adjust: none; } .flood-root .flood-steps__indicator { border-color: CanvasText; } .flood-root :is(.flood-navigation-list__link,.flood-steps__action,.flood-skip-link):focus-visible { outline-color: Highlight; } }
|
|
1052
|
+
|
|
1053
|
+
/* Relationships: labels → controls use .25rem; rows own their compact hit areas. */
|
|
1054
|
+
.flood-root .flood-form-control__label { display: block; margin: 0 0 var(--flood-sys-space-1); padding: 0; color: var(--flood-sys-color-content-default); 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); }
|
|
1055
|
+
.flood-root .flood-form-control__sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
|
|
1056
|
+
.flood-root .flood-list-box-field, .flood-root .flood-pin-input-field { min-inline-size: 0; max-inline-size: 100%; }
|
|
1057
|
+
.flood-root .flood-list-box { box-sizing: border-box; max-block-size: 16rem; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--flood-sys-color-content-subtle) transparent; min-inline-size: 0; padding: var(--flood-sys-space-1); 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); }
|
|
1058
|
+
.flood-root .flood-list-box:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
|
|
1059
|
+
.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); }
|
|
1060
|
+
.flood-root .flood-list-box__copy { display: grid; min-inline-size: 0; gap: var(--flood-sys-space-1); overflow-wrap: anywhere; }
|
|
1061
|
+
.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); }
|
|
1062
|
+
.flood-root .flood-list-box__check { flex: none; inline-size: var(--flood-control-icon); text-align: center; }
|
|
1063
|
+
.flood-root .flood-list-box__option[aria-selected="true"] { background: var(--flood-sys-color-selection-background); }
|
|
1064
|
+
.flood-root .flood-list-box:focus-visible .flood-list-box__option[data-active] { box-shadow: inset 0 0 0 var(--flood-sys-stroke-width) var(--flood-sys-color-border-decorative); }
|
|
1065
|
+
.flood-root .flood-list-box__option[aria-disabled="true"], .flood-root .flood-list-box[aria-disabled="true"] { color: var(--flood-sys-color-field-disabled-content); cursor: not-allowed; }
|
|
1066
|
+
.flood-root .flood-pin-input { position: relative; display: flex; gap: var(--flood-sys-space-2); inline-size: max-content; max-inline-size: 100%; }
|
|
1067
|
+
.flood-root .flood-pin-input__editor { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; margin: 0; padding: 0; font: inherit; cursor: text; }
|
|
1068
|
+
.flood-root .flood-pin-input__slot { box-sizing: border-box; flex: 0 1 var(--flood-control-height); min-inline-size: 0; inline-size: var(--flood-control-height); block-size: var(--flood-control-height); display: grid; place-items: center; 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); font-size: var(--flood-control-text); line-height: var(--flood-control-line); font-variant-numeric: tabular-nums; pointer-events: none; }
|
|
1069
|
+
.flood-root .flood-pin-input:has(.flood-pin-input__editor:focus-visible) .flood-pin-input__slot[data-active] { border: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); }
|
|
1070
|
+
.flood-root .flood-pin-input[data-status] .flood-pin-input__slot { border-color: var(--flood-field-feedback); }
|
|
1071
|
+
.flood-root .flood-pin-input[data-readonly] .flood-pin-input__slot { background: var(--flood-sys-color-surface-canvas); border-style: dashed; }
|
|
1072
|
+
.flood-root .flood-pin-input:has(.flood-pin-input__editor:disabled) .flood-pin-input__slot { background: var(--flood-sys-color-field-disabled); color: var(--flood-sys-color-field-disabled-content); }
|
|
1073
|
+
.flood-root .flood-rating { display: block; min-inline-size: 0; max-inline-size: 100%; border: 0; padding: 0; margin: 0; }
|
|
1074
|
+
.flood-root .flood-rating__choices { display: flex; align-items: center; flex-wrap: wrap; gap: var(--flood-sys-space-1); }
|
|
1075
|
+
.flood-root .flood-rating__choice { position: relative; flex: none; display: grid; place-items: center; inline-size: var(--flood-sys-control-sm-height); block-size: var(--flood-sys-control-sm-height); border-radius: var(--flood-sys-radius-action); cursor: pointer; color: var(--flood-sys-color-content-subtle); }
|
|
1076
|
+
.flood-root .flood-rating--sm .flood-rating__choice { inline-size: var(--flood-sys-control-xs-height); block-size: var(--flood-sys-control-xs-height); }
|
|
1077
|
+
.flood-root .flood-rating--lg .flood-rating__choice { inline-size: var(--flood-sys-control-md-height); block-size: var(--flood-sys-control-md-height); }
|
|
1078
|
+
.flood-root .flood-rating__choice > input { position: absolute; inset: 0; margin: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: inherit; }
|
|
1079
|
+
.flood-root .flood-rating__choice > svg { inline-size: 1.25rem; block-size: 1.25rem; pointer-events: none; }
|
|
1080
|
+
.flood-root .flood-rating--sm .flood-rating__choice > svg { inline-size: 1rem; block-size: 1rem; }
|
|
1081
|
+
.flood-root .flood-rating--lg .flood-rating__choice > svg { inline-size: 1.5rem; block-size: 1.5rem; }
|
|
1082
|
+
.flood-root .flood-rating__choice[data-filled] > svg { fill: currentColor; }
|
|
1083
|
+
.flood-root .flood-rating__choice[data-filled] { color: var(--flood-sys-color-content-default); }
|
|
1084
|
+
.flood-root .flood-rating__choice:has(input:focus-visible) { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
|
|
1085
|
+
.flood-root .flood-rating[aria-readonly="true"] .flood-rating__choice { cursor: default; }
|
|
1086
|
+
.flood-root .flood-rating__choice:has(input:disabled) { color: var(--flood-sys-color-field-disabled-content); cursor: not-allowed; }
|
|
1087
|
+
.flood-root .flood-dropzone { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; display: grid; gap: var(--flood-sys-space-4); padding: var(--flood-sys-space-4); border: var(--flood-sys-stroke-width) dashed var(--flood-sys-color-field-border); border-radius: var(--flood-sys-radius-block); background: var(--flood-sys-color-surface-canvas); }
|
|
1088
|
+
.flood-root .flood-dropzone__intro { text-align: center; }
|
|
1089
|
+
.flood-root .flood-dropzone__label { display: grid; justify-items: center; gap: var(--flood-sys-space-2); cursor: pointer; font-size: var(--flood-sys-type-label-size); line-height: var(--flood-sys-type-label-line-height); }
|
|
1090
|
+
.flood-root .flood-dropzone__label > svg { inline-size: 1.5rem; block-size: 1.5rem; color: var(--flood-sys-color-content-subtle); }
|
|
1091
|
+
.flood-root .flood-dropzone__description { margin: var(--flood-sys-space-1) 0 0; color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); }
|
|
1092
|
+
.flood-root .flood-dropzone[data-dragging] { border-color: var(--flood-sys-color-focus-ring); background: var(--flood-sys-color-field-background); }
|
|
1093
|
+
.flood-root .flood-dropzone[data-status] { border-color: var(--flood-field-feedback); }
|
|
1094
|
+
.flood-root .flood-dropzone:has(input:disabled) .flood-dropzone__label { color: var(--flood-sys-color-field-disabled-content); cursor: not-allowed; }
|
|
1095
|
+
.flood-root .flood-character-count { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 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); font-variant-numeric: tabular-nums; }
|
|
1096
|
+
.flood-root .flood-character-count[data-over-limit] { color: var(--flood-sys-color-feedback-error); }
|
|
1097
|
+
.flood-root .flood-character-count__warning { font-weight: var(--flood-sys-type-label-weight); }
|
|
1098
|
+
@media (pointer: coarse) {
|
|
1099
|
+
.flood-root .flood-list-box__option { min-block-size: max(var(--flood-control-height), var(--flood-sys-size-touch)); }
|
|
1100
|
+
.flood-root .flood-rating__choice { inline-size: max(var(--flood-sys-control-sm-height), var(--flood-sys-size-touch)); block-size: max(var(--flood-sys-control-sm-height), var(--flood-sys-size-touch)); }
|
|
1101
|
+
.flood-root .flood-pin-input__slot { block-size: max(var(--flood-control-height), var(--flood-sys-size-touch)); }
|
|
1102
|
+
}
|
|
1103
|
+
@media (forced-colors: active) {
|
|
1104
|
+
.flood-root .flood-list-box__option[aria-selected="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
|
|
1105
|
+
.flood-root .flood-list-box:focus-visible, .flood-root .flood-rating__choice:has(input:focus-visible) { outline-color: Highlight; }
|
|
1106
|
+
.flood-root .flood-pin-input:has(.flood-pin-input__editor:focus-visible) .flood-pin-input__slot[data-active], .flood-root .flood-dropzone[data-dragging] { border-color: Highlight; }
|
|
1107
|
+
}
|
|
1108
|
+
|
|
1109
|
+
.flood-root .flood-copy-button__labels { display: inline-grid; min-inline-size: 0; gap: inherit; }
|
|
1110
|
+
.flood-root .flood-copy-button__labels > span { grid-area: 1 / 1; visibility: hidden; display: inline-flex; align-items: center; justify-content: center; gap: inherit; }
|
|
1111
|
+
.flood-root .flood-copy-button__labels > span[data-visible] { visibility: visible; }
|
|
1112
|
+
.flood-root .flood-toast-region { position: fixed; z-index: var(--flood-sys-layer-toast); inline-size: min(24rem, calc(100vw - 2 * var(--flood-sys-space-4))); max-block-size: calc(100dvh - 2 * var(--flood-sys-space-4)); overflow: auto; outline-offset: 0; }
|
|
1113
|
+
.flood-root .flood-toast-region[data-placement^="bottom"] { inset-block-end: max(var(--flood-sys-space-4), env(safe-area-inset-bottom)); }
|
|
1114
|
+
.flood-root .flood-toast-region[data-placement^="top"] { inset-block-start: max(var(--flood-sys-space-4), env(safe-area-inset-top)); }
|
|
1115
|
+
.flood-root .flood-toast-region[data-placement$="end"] { inset-inline-end: var(--flood-sys-space-4); }
|
|
1116
|
+
.flood-root .flood-toast-region[data-placement$="start"] { inset-inline-start: var(--flood-sys-space-4); }
|
|
1117
|
+
.flood-root .flood-toast-region[data-inline] { position: static; max-inline-size: 100%; max-block-size: 20rem; }
|
|
1118
|
+
.flood-root .flood-toast-region[hidden] { display: none; }
|
|
1119
|
+
.flood-root .flood-toast-region__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--flood-sys-space-2); }
|
|
1120
|
+
.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); }
|
|
1121
|
+
.flood-root .flood-toast__message { min-inline-size: 0; align-self: center; overflow-wrap: anywhere; }
|
|
1122
|
+
.flood-root .flood-toast__title { font-size: var(--flood-sys-type-compact-size); font-weight: var(--flood-sys-type-label-weight); }
|
|
1123
|
+
.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); }
|
|
1124
|
+
.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); }
|
|
1125
|
+
.flood-root .flood-toast[data-status="success"] .flood-toast__title::before { background: var(--flood-sys-color-feedback-success); }
|
|
1126
|
+
.flood-root .flood-toast[data-status="error"] .flood-toast__title::before { background: var(--flood-sys-color-feedback-error); }
|
|
1127
|
+
.flood-root .flood-toast[data-status="warning"] .flood-toast__title::before { background: var(--flood-sys-color-feedback-warning); }
|
|
1128
|
+
.flood-root .flood-toast[data-status="info"] .flood-toast__title::before { background: var(--flood-sys-color-feedback-info); }
|
|
1129
|
+
.flood-root .flood-toast__action { grid-column: 1 / -1; justify-self: start; }
|
|
1130
|
+
@media (forced-colors: active) { .flood-root .flood-toast { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; } }
|