@flood-md/react 0.2.11 → 0.2.12

package/dist/foundations.css

@@ -35,6 +35,7 @@
 .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); }
 .flood-root .flood-toolbar[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
 .flood-root .flood-toolbar[data-shape="pill"] { border-radius: var(--flood-sys-radius-action); }
+.flood-root .flood-toolbar[data-shape="pill"][data-orientation="vertical"] { flex-wrap: nowrap; align-items: center; }
 .flood-root .flood-toolbar[data-variant="plain"] { padding:0; border:0; background:transparent; }
 .flood-root .flood-toolbar[data-shape="pill"][data-orientation="horizontal"] { flex-wrap: nowrap; overflow: auto; }
 .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)); }
@@ -82,23 +83,33 @@
 .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); }
 .flood-root .flood-table :is(th, td) { text-align: start; vertical-align: middle; padding: var(--flood-data-padding) var(--flood-sys-space-3); overflow-wrap: break-word; }
 .flood-root .flood-table :is(th, td)[data-wrap="anywhere"] { overflow-wrap: anywhere; }
-.flood-root .flood-table[data-cell-vertical-align="top"] :is(th, td) { vertical-align: top; }
-.flood-root .flood-table[data-cell-vertical-align="middle"] :is(th, td) { vertical-align: middle; }
-.flood-root .flood-table[data-cell-vertical-align="bottom"] :is(th, td) { vertical-align: bottom; }
+.flood-root .flood-table[data-cell-vertical-align="top"] > :where(thead, tbody, tfoot) > :where(tr) > :is(th, td) { vertical-align: top; }
+.flood-root .flood-table[data-cell-vertical-align="bottom"] > :where(thead, tbody, tfoot) > :where(tr) > :is(th, td) { vertical-align: bottom; }
 .flood-root .flood-table th { font-weight: var(--flood-sys-type-label-weight); }
-.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); }
-.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); }
-.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); }
-.flood-root .flood-table tfoot { background: color-mix(in srgb, var(--flood-sys-color-content-default) 8%, transparent); }
-.flood-root .flood-table tfoot :is(th, td) { font-weight: var(--flood-sys-type-label-weight); }
-.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); }
+.flood-root .flood-table > thead > :where(tr) > th { color: var(--flood-sys-color-content-subtle); border-block-end: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
+.flood-root .flood-table[data-sticky-header] > thead {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 2;
+  background-color: var(--flood-sys-color-surface-canvas);
+  background-image: linear-gradient(var(--flood-sys-color-surface-current), var(--flood-sys-color-surface-current));
+}
+.flood-root .flood-table[data-sticky-header] > thead > tr:last-child > :is(th, td) {
+  box-shadow: inset 0 calc(-1 * var(--flood-sys-stroke-width)) var(--flood-sys-color-divider-decorative);
+}
+.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); }
+.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); }
+.flood-root .flood-table > tfoot { background: color-mix(in srgb, var(--flood-sys-color-content-default) 8%, transparent); }
+.flood-root .flood-table > tfoot > :where(tr) > :is(th, td) { font-weight: var(--flood-sys-type-label-weight); }
+.flood-root .flood-table[data-striped="true"] > tbody > :where(tr:nth-child(even of :not(.flood-data-table__expanded-row))) { background: color-mix(in srgb, var(--flood-sys-color-content-default) 4%, transparent); }
 .flood-root .flood-table [data-numeric] { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
 .flood-root .flood-table [data-align="center"] { text-align: center; }
 .flood-root .flood-table [data-align="end"] { text-align: end; }
 .flood-root .flood-table [data-align="start"] { text-align: start; }
 .flood-root :is(.flood-description-list, .flood-table-container, .flood-table)[hidden] { display: none; }
 @media (forced-colors: active) {
-  .flood-root .flood-table[data-striped="true"] tbody > tr:nth-child(even) { background: Canvas; }
+  .flood-root .flood-table[data-sticky-header] > thead { background: Canvas; }
+  .flood-root .flood-table[data-striped="true"] > tbody > :where(tr:nth-child(even of :not(.flood-data-table__expanded-row))) { background: Canvas; }
   .flood-root .flood-table tfoot { background: Canvas; }
   .flood-root .flood-table :is(th, td), .flood-root .flood-description-list[data-dividers="true"] > .flood-description-list__item { border-color: CanvasText; }
 }
@@ -122,6 +133,14 @@
 .flood-root .flood-alert[data-tone="success"] { --flood-alert-color: var(--flood-sys-color-feedback-success); }
 .flood-root .flood-alert[data-tone="warning"] { --flood-alert-color: var(--flood-sys-color-feedback-warning); }
 .flood-root .flood-alert[data-tone="error"] { --flood-alert-color: var(--flood-sys-color-feedback-error); }
+.flood-root .flood-alert:not([data-tone="neutral"]) {
+  --flood-sys-color-action-subtle-rest: color-mix(in srgb, var(--flood-sys-color-surface-current), var(--flood-alert-color) 8%);
+  --flood-sys-color-action-subtle-hover: color-mix(in srgb, var(--flood-sys-color-surface-current), var(--flood-alert-color) 14%);
+  --flood-sys-color-action-subtle-pressed: color-mix(in srgb, var(--flood-sys-color-surface-current), var(--flood-alert-color) 20%);
+  --flood-sys-color-action-ghost-hover: var(--flood-sys-color-action-subtle-hover);
+  --flood-sys-color-action-ghost-pressed: var(--flood-sys-color-action-subtle-pressed);
+}
+.flood-root .flood-alert:not(:has(> .flood-alert__content > .flood-alert__title)):has(> .flood-alert__content > .flood-alert__body > .flood-inline:only-child) { align-items: center; }
 .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); }
 .flood-root .flood-alert__icon > svg { inline-size: 100%; block-size: 100%; }
 .flood-root .flood-alert__content { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: break-word; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
@@ -261,9 +280,21 @@
 .flood-root .flood-disclosure[data-open="true"] > .flood-disclosure__heading .flood-disclosure__indicator { transform: rotate(180deg); }
 .flood-root .flood-disclosure__panel { padding: 0 var(--flood-control-padding) var(--flood-control-padding); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
 .flood-root .flood-disclosure__panel[hidden] { display: none; }
+.flood-root .flood-disclosure:not(.flood-accordion > .flood-disclosure, .flood-navigation-group__disclosure) {
+  --flood-disclosure-header-inset: var(--flood-sys-space-1);
+  --flood-disclosure-content-inset: calc(var(--flood-control-padding) + var(--flood-disclosure-header-inset));
+}
+.flood-root .flood-disclosure:not(.flood-accordion > .flood-disclosure, .flood-navigation-group__disclosure) > .flood-disclosure__heading {
+  padding: var(--flood-disclosure-header-inset);
+}
+.flood-root .flood-disclosure:not(.flood-accordion > .flood-disclosure, .flood-navigation-group__disclosure) > .flood-disclosure__heading > .flood-disclosure__trigger {
+  border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width) - var(--flood-disclosure-header-inset)));
+}
+.flood-root .flood-disclosure:not(.flood-accordion > .flood-disclosure, .flood-navigation-group__disclosure) > .flood-disclosure__panel {
+  padding: var(--flood-sys-space-2) var(--flood-disclosure-content-inset) var(--flood-disclosure-content-inset);
+}
 .flood-root .flood-accordion > .flood-disclosure { border: 0; border-radius: 0; background: transparent; }
 .flood-root .flood-accordion > .flood-disclosure + .flood-disclosure { border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
-.flood-root .flood-disclosure[data-open="true"] > .flood-disclosure__heading > .flood-disclosure__trigger { border-end-start-radius: 0; border-end-end-radius: 0; }
 .flood-root .flood-accordion > .flood-disclosure > .flood-disclosure__heading > .flood-disclosure__trigger { border-radius: 0; }
 .flood-root .flood-accordion > .flood-disclosure:first-child > .flood-disclosure__heading > .flood-disclosure__trigger { border-start-start-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); border-start-end-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); }
 .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)); }
@@ -632,6 +663,12 @@
   --flood-type-tracking: var(--flood-sys-type-section-tracking);
   --flood-type-weight: var(--flood-sys-type-section-weight);
 }
+.flood-root .flood-type--group {
+  --flood-type-size: var(--flood-sys-type-group-title-size);
+  --flood-type-line: var(--flood-sys-type-group-title-line-height);
+  --flood-type-tracking: var(--flood-sys-type-group-title-tracking);
+  --flood-type-weight: var(--flood-sys-type-group-title-weight);
+}
 .flood-root .flood-type--body {
   --flood-type-size: var(--flood-sys-type-body-size);
   --flood-type-line: var(--flood-sys-type-body-line-height);
@@ -920,6 +957,7 @@
 .flood-root .flood-file-input__file > .flood-icon-button { flex: none; }
 
 .flood-root .flood-alert-dialog { inline-size: min(26rem, calc(100% - var(--flood-sys-space-8))); }
+.flood-root .flood-alert-dialog > .flood-overlay-description { white-space: pre-line; }
 .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); }
 .flood-root .flood-alert-dialog__actions > .flood-button { max-inline-size: 100%; overflow-wrap: break-word; }
 @media (max-width: 32rem) {
@@ -937,6 +975,14 @@
 .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); }
 .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%; }
 .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%; }
+.flood-root .flood-drawer.flood-sheet[data-side="bottom"] {
+  inset-inline: 0;
+  margin-inline: auto;
+  inline-size: min(100%, 36rem);
+  block-size: auto;
+  max-block-size: min(var(--flood-drawer-size), calc(100dvh - max(var(--flood-sys-space-4), env(safe-area-inset-top))));
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+}
 .flood-root .flood-drawer > .flood-overlay-header { grid-area: header; }
 .flood-root .flood-drawer > .flood-overlay-description { grid-area: description; }
 .flood-root .flood-drawer__body { grid-area: body; min-block-size: 0; min-inline-size: 0; margin-block-start: var(--flood-sys-space-4); }
@@ -949,6 +995,13 @@
 .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; }
 .flood-root .flood-drawer > .flood-overlay-header > .flood-overlay-close { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
 .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)); }
+.flood-root .flood-sheet > .flood-overlay-header { align-items: center; padding-inline-end: 0; }
+.flood-root .flood-sheet > .flood-overlay-header > .flood-overlay-close { position: static; align-self: center; }
+.flood-root .flood-sheet > .flood-overlay-description { padding-inline-end: 0; }
+.flood-root .flood-sheet > .flood-drawer__body { margin-block-start: var(--flood-sys-space-2); }
+.flood-root .flood-sheet { --flood-sheet-scroll-offset: calc(var(--flood-sys-scrollbar-size) + var(--flood-sys-scrollbar-inset) + var(--flood-sys-stroke-width)); }
+.flood-root .flood-sheet:dir(rtl) { --flood-sheet-scroll-offset: calc(-1 * (var(--flood-sys-scrollbar-size) + var(--flood-sys-scrollbar-inset) + var(--flood-sys-stroke-width))); }
+.flood-root .flood-sheet > .flood-drawer__body > .flood-scroll-area > .flood-scroll-area__track--vertical { translate: var(--flood-sheet-scroll-offset); }
 @container flood-drawer (max-width:20rem) {
   .flood-root .flood-drawer > .flood-overlay-description { padding-inline-end: 0; }
 }
@@ -1095,6 +1148,9 @@
 .flood-root .flood-app-top-bar__end { margin-inline-start: auto; }
 .flood-root :is(.flood-app-shell, .flood-app-top-bar)[hidden] { display: none; }
 .flood-root .flood-section__body { margin-block-start: var(--flood-sys-space-4); min-inline-size: 0; }
+.flood-root .flood-section:has(> .flood-section__header .flood-type--group) > .flood-section__body {
+  margin-block-start: var(--flood-sys-space-3);
+}
 
 .flood-root .flood-split { container: flood-split / inline-size; min-inline-size: 0; inline-size: 100%; }
 .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; }
@@ -1207,8 +1263,35 @@
 .flood-root .flood-editable__preview { justify-content: space-between; min-inline-size: 0; inline-size: 100%; text-align: start; gap: var(--flood-sys-space-2); }
 .flood-root .flood-editable__value { flex: 1 1 0; min-inline-size: 0; overflow-wrap: break-word; }
 .flood-root .flood-editable__value[data-empty] { color: var(--flood-sys-color-content-subtle); }
+.flood-root .flood-editable__error { margin: 0; white-space: normal; overflow-wrap: break-word; }
+.flood-root .flood-editable__preview[aria-hidden="true"] { visibility: hidden; }
+.flood-root .flood-overlay-panel.flood-editable__overlay {
+  padding: 0;
+  border: 0;
+  background: var(--flood-sys-color-surface-floating);
+  backdrop-filter: none;
+}
+.flood-root .flood-editable__overlay > .flood-editable__error { padding: var(--flood-sys-space-2) var(--flood-sys-space-3); }
+.flood-root .flood-table td[data-numeric] .flood-editable :is(.flood-editable__preview, input) { text-align: end; }
 .flood-root .flood-editable__preview > .flood-icon { flex: none; color: var(--flood-sys-color-content-subtle); }
-.flood-root .flood-editable .flood-input-group:has(.flood-editable__actions) { padding-inline-end: calc(var(--flood-group-inset) - var(--flood-group-stroke)); }
+.flood-root .flood-editable .flood-input-group:has(.flood-editable__actions) {
+  flex-wrap: nowrap;
+  padding-inline-end: calc(var(--flood-group-inset) - var(--flood-group-stroke));
+}
+.flood-root .flood-editable .flood-input-group:has(.flood-editable__actions) > .flood-input {
+  flex: 1 1 0;
+  min-inline-size: 0;
+}
+.flood-root .flood-editable__overlay[data-fit-draft] .flood-input-group > .flood-input {
+  flex: 1 1 auto;
+  inline-size: auto;
+  min-inline-size: 4ch;
+  field-sizing: content;
+}
+.flood-root .flood-editable .flood-input-group__addon:has(> .flood-editable__actions) {
+  flex: none;
+  max-inline-size: none;
+}
 .flood-root .flood-editable__actions { display: inline-flex; align-items: center; gap: var(--flood-sys-space-1); flex: none; }
 .flood-root .flood-editable__actions > .flood-button { --flood-control-height: calc(var(--flood-group-height) - 2 * var(--flood-group-inset)); min-inline-size: var(--flood-control-height); flex: none; border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-group-inset))); }
 @media (forced-colors: active) { .flood-root .flood-editable__value[data-empty] { color: CanvasText; } }
@@ -1603,10 +1686,14 @@
 .flood-root .flood-data-table__toolbar {
   padding:var(--flood-sys-space-4) var(--flood-data-table-edge,var(--flood-sys-space-3));
 }
-.flood-root .flood-data-table[data-inset="roomy"] tr > :first-child { padding-inline-start:var(--flood-data-table-edge); }
-.flood-root .flood-data-table[data-inset="roomy"] tr > :last-child { padding-inline-end:var(--flood-data-table-edge); }
-.flood-root .flood-data-table[data-inset="roomy"] th[data-sortable]:first-child { padding-inline-start:calc(var(--flood-data-table-edge) - var(--flood-sys-space-2)); }
-.flood-root .flood-data-table[data-inset="roomy"] th[data-sortable]:last-child { padding-inline-end:calc(var(--flood-data-table-edge) - var(--flood-sys-space-2)); }
+.flood-root .flood-data-table__toolbar-content { flex: 1 1 auto; min-inline-size: 0; }
+.flood-root .flood-data-table__columns { margin-inline-start: auto; max-inline-size: 100%; }
+.flood-root .flood-data-table__table { --flood-data-table-edge:var(--flood-sys-space-3); }
+.flood-root .flood-data-table__table[data-inset="roomy"] { --flood-data-table-edge:var(--flood-sys-space-6); }
+.flood-root .flood-data-table__table[data-inset="roomy"] > :is(thead,tbody) > tr > :first-child { padding-inline-start:var(--flood-data-table-edge); }
+.flood-root .flood-data-table__table[data-inset="roomy"] > :is(thead,tbody) > tr > :last-child { padding-inline-end:var(--flood-data-table-edge); }
+.flood-root .flood-data-table__table[data-inset="roomy"] > thead > tr > th[data-sortable]:first-child { padding-inline-start:calc(var(--flood-data-table-edge) - var(--flood-sys-space-2)); }
+.flood-root .flood-data-table__table[data-inset="roomy"] > thead > tr > th[data-sortable]:last-child { padding-inline-end:calc(var(--flood-data-table-edge) - var(--flood-sys-space-2)); }
 .flood-root .flood-data-table[data-inset="roomy"] .flood-data-table__footer { padding-inline:var(--flood-data-table-edge); }
 .flood-root .flood-data-table .flood-data-table__primary-action {
   min-block-size:0;
@@ -1624,25 +1711,271 @@
 .flood-root .flood-data-table .flood-data-table__primary-action:is(:hover,:active) { background:transparent; }
 .flood-root .flood-data-table .flood-data-table__primary-action:disabled,
 .flood-root .flood-data-table .flood-data-table__primary-action[aria-disabled="true"] { color:var(--flood-sys-color-field-disabled-content); }
-.flood-root .flood-data-table tr[data-primary-action] { cursor:pointer; }
-.flood-root .flood-data-table tr[data-primary-action]:not([data-selected]):focus-within { background:var(--flood-sys-color-action-on-surface-hover); }
+.flood-root .flood-data-table__table > tbody > tr[data-primary-action] { cursor:pointer; }
+.flood-root .flood-data-table__table > tbody > tr[data-primary-action]:not([data-selected]):focus-within { background:var(--flood-sys-color-action-on-surface-hover); }
 @media (hover:hover) {
-  .flood-root .flood-data-table tr[data-primary-action]:not([data-selected]):hover { background:var(--flood-sys-color-action-on-surface-hover); }
+  .flood-root .flood-data-table__table > tbody > tr[data-primary-action]:not([data-selected]):hover { background:var(--flood-sys-color-action-on-surface-hover); }
 }
 .flood-root .flood-data-table[hidden] { display:none; }
-.flood-root .flood-data-table thead th { vertical-align:middle; }
-.flood-root .flood-data-table thead th[data-sortable] { padding-inline:max(0px,calc(var(--flood-data-padding) - var(--flood-sys-space-2))); }
-.flood-root .flood-data-table__sort { gap:var(--flood-sys-space-2); min-block-size:var(--flood-sys-control-sm-height); padding-inline:calc(var(--flood-sys-space-2) - var(--flood-sys-stroke-width)); color:inherit; font:inherit; font-weight:500; }
+.flood-root .flood-data-table__table > thead > tr > th { vertical-align:middle; }
+.flood-root .flood-data-table__table > thead > tr > th[data-sortable] { padding-inline:max(0px,calc(var(--flood-data-padding) - var(--flood-sys-space-2))); }
+.flood-root .flood-data-table__sort { gap:var(--flood-sys-space-1); min-block-size:var(--flood-sys-control-sm-height); padding-inline:calc(var(--flood-sys-space-2) - var(--flood-sys-stroke-width)); color:inherit; font:inherit; font-weight:500; }
+.flood-root .flood-data-table__header-content { display:inline-flex; align-items:center; gap:var(--flood-sys-space-1); max-inline-size:100%; vertical-align:middle; }
+.flood-root .flood-data-table__header-content:focus-visible { outline:var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); border-radius:var(--flood-sys-radius-indicator); }
+.flood-root .flood-data-table__header-label { min-inline-size:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
+.flood-root .flood-data-table__table:not([data-fixed-columns]) .flood-data-table__header-label { min-inline-size:max-content; }
+.flood-root .flood-data-table__header-unit { flex:none; color:var(--flood-sys-color-content-subtle); }
 .flood-root .flood-data-table__choice { inline-size:1%; white-space:nowrap; }
 .flood-root .flood-data-table__choice .flood-choice { min-block-size:var(--flood-sys-control-sm-height); }
-.flood-root .flood-data-table tr[data-selected] { background:var(--flood-sys-color-selection-background); }
+.flood-root .flood-data-table__table > tbody > tr[data-selected] { background:var(--flood-sys-color-selection-background); }
 .flood-root .flood-data-table th[aria-sort="descending"] .flood-data-table__sort svg { rotate:180deg; }
 .flood-root .flood-data-table .flood-data-table__state { padding-block:var(--flood-sys-space-8); text-align:center; }
 .flood-root .flood-data-table__state>.flood-stack { align-items:center; }
 .flood-root .flood-data-table__footer { display:flex; align-items:center; flex-wrap:wrap; gap:var(--flood-sys-space-3); padding:var(--flood-sys-space-3) var(--flood-sys-space-4); border-block-start:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); background:var(--flood-sys-color-surface-default); border-end-start-radius:var(--flood-sys-radius-field); border-end-end-radius:var(--flood-sys-radius-field); }
 .flood-root .flood-data-table__footer p { margin:0; }
 .flood-root .flood-data-table__footer nav { margin-inline-start:auto; max-inline-size:100%; }
-@media(forced-colors:active) { .flood-root .flood-data-table tr[data-selected] { outline:1px solid Highlight; } }
+@media(forced-colors:active) { .flood-root .flood-data-table__table > tbody > tr[data-selected] { outline:1px solid Highlight; } }
+
+.flood-root .flood-data-table__table[data-fixed-columns] > thead > tr > th { box-sizing:border-box; }
+.flood-root .flood-data-table__table[data-fixed-columns] > :is(thead,tbody) > tr > [data-data-table-column] {
+  overflow:hidden;
+  overflow-wrap:anywhere;
+}
+.flood-root .flood-data-table__table[data-fixed-columns] > thead > tr > th > .flood-data-table__sort {
+  max-inline-size:100%;
+  text-align:inherit;
+}
+.flood-root .flood-data-table__table > thead > tr > th[data-resize-edge] {
+  --flood-data-table-resize-hit:var(--flood-sys-space-6);
+  --flood-data-table-resize-inset:var(--flood-sys-space-1);
+  position:relative;
+}
+.flood-root .flood-data-table__table > thead > tr > th[data-resize-edge="end"] {
+  padding-inline-end:max(calc(var(--flood-data-table-resize-hit) + 2 * var(--flood-data-table-resize-inset)),var(--flood-data-table-edge));
+}
+.flood-root .flood-data-table__table > thead > tr > th[data-resize-edge="start"] {
+  padding-inline-start:max(calc(var(--flood-data-table-resize-hit) + 2 * var(--flood-data-table-resize-inset)),var(--flood-data-table-edge));
+}
+.flood-root .flood-data-table__resize {
+  position:absolute;
+  inset-block:0;
+  inset-inline-end:0;
+  inline-size:calc(var(--flood-data-table-resize-hit) + var(--flood-data-table-resize-inset));
+  padding-inline-end:var(--flood-data-table-resize-inset);
+  box-sizing:border-box;
+  display:grid;
+  place-items:center;
+  cursor:col-resize;
+  touch-action:none;
+  user-select:none;
+}
+.flood-root .flood-data-table__resize-icon {
+  box-sizing:border-box;
+  inline-size:var(--flood-data-table-resize-hit);
+  block-size:var(--flood-data-table-resize-hit);
+  display:grid;
+  place-items:center;
+  color:var(--flood-sys-color-content-default);
+  background:var(--flood-sys-color-action-on-surface-hover);
+  border:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative);
+  border-radius:var(--flood-sys-radius-action);
+}
+.flood-root th[data-resize-edge="start"] > .flood-data-table__resize {
+  inset-inline:0 auto;
+  padding-inline:var(--flood-data-table-resize-inset) 0;
+}
+.flood-root .flood-data-table__resize:is(:hover,:focus-visible,[data-dragging]) > .flood-data-table__resize-icon {
+  background:var(--flood-sys-color-surface-supporting);
+  border-color:var(--flood-sys-color-content-subtle);
+}
+.flood-root .flood-data-table__resize:focus-visible { outline:none; }
+.flood-root .flood-data-table__resize:focus-visible > .flood-data-table__resize-icon {
+  outline:var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring);
+  outline-offset:calc(-1 * var(--flood-sys-focus-width));
+}
+@media (hover:hover) and (pointer:fine) {
+  .flood-root .flood-data-table__resize:not(:hover,:focus-visible,[data-dragging]) > .flood-data-table__resize-icon { opacity:0; }
+}
+.flood-root .flood-data-table__resize[aria-disabled="true"] { visibility:hidden; }
+@media (pointer:coarse) {
+  .flood-root .flood-data-table__table > thead > tr > th[data-resize-edge] {
+    --flood-data-table-resize-hit:var(--flood-sys-space-8);
+  }
+}
+.flood-root .flood-data-table__table > :is(thead,tbody) > tr > :is(th,td)[data-pin-edge] {
+  --flood-data-table-pin-state:transparent;
+  position:sticky;
+  z-index:1;
+  background-color:var(--flood-sys-color-surface-canvas);
+  background-image:
+    linear-gradient(var(--flood-data-table-pin-state),var(--flood-data-table-pin-state)),
+    linear-gradient(var(--flood-sys-color-surface-current),var(--flood-sys-color-surface-current));
+}
+.flood-root .flood-data-table__table > :is(thead,tbody) > tr > [data-pin-edge="start"] {
+  inset-inline-start:var(--flood-data-table-pin-offset);
+}
+.flood-root .flood-data-table__table > :is(thead,tbody) > tr > [data-pin-edge="end"] {
+  inset-inline-end:calc(var(--flood-data-table-pin-offset) + var(--flood-scroll-content-inline, 0px));
+}
+.flood-root .flood-data-table__table > :is(thead,tbody) > tr > [data-pin-boundary="true"]::before {
+  content:"";
+  position:absolute;
+  inset-block:0;
+  inset-inline-end:0;
+  inline-size:var(--flood-sys-stroke-width);
+  background:var(--flood-sys-color-divider-decorative);
+  pointer-events:none;
+}
+.flood-root .flood-data-table__table > :is(thead,tbody) > tr > [data-pin-edge="end"][data-pin-boundary="true"]::before {
+  inset-inline:0 auto;
+}
+.flood-root .flood-data-table__table[data-striped="true"] > tbody > :where(tr:nth-child(even of :not(.flood-data-table__expanded-row))) > [data-pin-edge] {
+  --flood-data-table-pin-state:color-mix(in srgb,var(--flood-sys-color-content-default) 4%,transparent);
+}
+.flood-root .flood-data-table__table > tbody > tr[data-primary-action]:not([data-selected]):focus-within > [data-pin-edge] {
+  --flood-data-table-pin-state:var(--flood-sys-color-action-on-surface-hover);
+}
+@media (hover:hover) {
+  .flood-root .flood-data-table__table > tbody > tr[data-primary-action]:not([data-selected]):hover > [data-pin-edge] {
+    --flood-data-table-pin-state:var(--flood-sys-color-action-on-surface-hover);
+  }
+}
+.flood-root .flood-data-table__table > tbody > tr[data-selected] > [data-pin-edge] {
+  --flood-data-table-pin-state:var(--flood-sys-color-selection-background);
+}
+@media (forced-colors:active) {
+  .flood-root .flood-data-table__resize-icon { color:CanvasText; }
+  .flood-root .flood-data-table__resize:focus-visible > .flood-data-table__resize-icon { outline-color:Highlight; }
+  .flood-root .flood-data-table__table > :is(thead,tbody) > tr > [data-pin-edge] { background:Canvas; }
+}
+
+.flood-root .flood-table :is(th, td).flood-data-table__expand {
+  inline-size: 1%;
+  padding-block: 0;
+  padding-inline: var(--flood-data-table-edge);
+  text-align: center;
+  white-space: nowrap;
+}
+.flood-root .flood-data-table__expand:not([data-pin-edge]) { position: relative; }
+.flood-root .flood-data-table__expand[data-detail-visible]::after {
+  content: "";
+  position: absolute;
+  inset-block: calc(50% + var(--flood-sys-space-2)) 0;
+  inset-inline-start: calc(50% - var(--flood-sys-stroke-width) / 2);
+  border-inline-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative);
+  pointer-events: none;
+}
+.flood-root .flood-data-table__disclosure[aria-expanded="true"] svg { rotate: 180deg; }
+.flood-root .flood-data-table__expanded-row > td {
+  padding-block: 0;
+  background: color-mix(in srgb, var(--flood-sys-color-content-default) 3%, transparent);
+}
+.flood-root .flood-data-table__detail-reveal {
+  display: grid;
+  grid-template-rows: 0fr;
+}
+.flood-root .flood-data-table__detail-reveal[data-open] { grid-template-rows: 1fr; }
+.flood-root .flood-data-table__detail-clip { min-block-size: 0; overflow: clip; }
+.flood-root .flood-data-table__expanded-content {
+  --flood-data-table-branch-start: max(0px, calc(var(--flood-data-table-disclosure-center, var(--flood-data-table-edge)) - var(--flood-data-table-edge)));
+  --flood-data-table-branch-arm: var(--flood-sys-space-3);
+  contain: inline-size;
+  position: sticky;
+  inset-inline-start: var(--flood-data-table-edge);
+  box-sizing: border-box;
+  padding-block: var(--flood-sys-space-3) var(--flood-sys-space-4);
+  padding-inline: calc(var(--flood-data-table-branch-start) + var(--flood-data-table-branch-arm) + var(--flood-sys-space-2)) var(--flood-sys-space-2);
+}
+.flood-root .flood-data-table__expanded-content::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: calc(var(--flood-data-table-branch-start) - var(--flood-sys-stroke-width) / 2);
+  inline-size: var(--flood-data-table-branch-arm);
+  box-sizing: border-box;
+  block-size: calc(var(--flood-data-table-branch-target, var(--flood-sys-space-6)) + var(--flood-sys-stroke-width) / 2);
+  border-inline-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative);
+  border-block-end: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative);
+  border-end-start-radius: var(--flood-sys-radius-indicator);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .flood-root .flood-data-table__detail-reveal:not([data-flood-motion="reduce"] *) {
+    transition: grid-template-rows var(--flood-sys-motion-duration-exit) var(--flood-sys-motion-easing);
+  }
+  .flood-root .flood-data-table__detail-reveal[data-open]:not([data-flood-motion="reduce"] *) {
+    transition-duration: var(--flood-sys-motion-duration-enter);
+  }
+  @starting-style {
+    .flood-root .flood-data-table__detail-reveal[data-open]:not([data-flood-motion="reduce"] *) {
+      grid-template-rows: 0fr;
+    }
+  }
+  .flood-root:not([data-flood-motion="reduce"]) .flood-data-table__disclosure:not(:where([data-flood-motion="reduce"] *)) svg {
+    transition: rotate var(--flood-sys-motion-duration-normal) var(--flood-sys-motion-easing);
+  }
+}
+
+.flood-root .flood-sparkline {
+  --flood-sparkline-color: var(--flood-sys-color-content-subtle);
+  --flood-sparkline-height: var(--flood-sys-space-8);
+  display: inline-grid;
+  gap: var(--flood-sys-space-1);
+  inline-size: 6rem;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  vertical-align: middle;
+}
+
+.flood-root .flood-sparkline[data-size="sm"] {
+  --flood-sparkline-height: var(--flood-sys-space-6);
+  inline-size: 5rem;
+}
+
+.flood-root .flood-sparkline[data-tone="success"] { --flood-sparkline-color: var(--flood-sys-color-feedback-success); }
+.flood-root .flood-sparkline[data-tone="accent"] { --flood-sparkline-color: var(--flood-sys-color-accent-content); }
+.flood-root .flood-sparkline[data-tone="warning"] { --flood-sparkline-color: var(--flood-sys-color-feedback-warning); }
+.flood-root .flood-sparkline[data-tone="error"] { --flood-sparkline-color: var(--flood-sys-color-feedback-error); }
+
+.flood-root .flood-sparkline__plot {
+  display: block;
+  inline-size: 100%;
+  block-size: var(--flood-sparkline-height);
+  color: var(--flood-sparkline-color);
+  overflow: visible;
+}
+
+.flood-root :is(.flood-sparkline__line, .flood-sparkline__point, .flood-sparkline__halo) {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.flood-root .flood-sparkline__line { stroke-width: calc(1.5 * var(--flood-sys-stroke-width)); }
+.flood-root .flood-sparkline__point { stroke-width: calc(3 * var(--flood-sys-stroke-width)); }
+.flood-root .flood-sparkline__point[data-latest] { stroke-width: calc(4 * var(--flood-sys-stroke-width)); }
+.flood-root .flood-sparkline__halo { stroke-width: calc(8 * var(--flood-sys-stroke-width)); opacity: .16; }
+.flood-root .flood-sparkline__area { opacity: .88; }
+.flood-root .flood-sparkline__label { overflow-wrap: anywhere; }
+
+@media (hover: hover) {
+  .flood-root .flood-sparkline:hover .flood-sparkline__halo { opacity: .34; }
+  .flood-root .flood-sparkline:hover .flood-sparkline__area { opacity: 1; }
+}
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .flood-root:not([data-flood-motion="reduce"]) :is(.flood-sparkline__halo, .flood-sparkline__area):not(:where([data-flood-motion="reduce"] *)) {
+    transition: opacity var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing);
+  }
+}
+.flood-root .flood-sparkline__empty { display: grid; place-items: center; min-block-size: var(--flood-sparkline-height); }
+
+@media (forced-colors: active) {
+  .flood-root .flood-sparkline__plot { color: CanvasText; }
+  .flood-root :is(.flood-sparkline__area, .flood-sparkline__halo) { display: none; }
+}
 
 .flood-root .flood-file-list { box-sizing:border-box; padding-inline:var(--flood-sys-space-4); border:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius:var(--flood-sys-radius-field); background:var(--flood-sys-color-surface-default); container-type:inline-size; container-name:flood-files; }
 .flood-root .flood-file-item__thumbnail { display:grid; place-items:center; flex:none; inline-size:var(--flood-sys-control-md-height); block-size:var(--flood-sys-control-md-height); border-radius:var(--flood-sys-radius-action); color:var(--flood-sys-color-content-subtle); overflow:hidden; background:var(--flood-sys-color-field-background); }
@@ -1882,6 +2215,13 @@
   justify-self:start;
   margin-inline-start:calc((var(--flood-sidebar-rail-width) - var(--flood-sys-stroke-width) - var(--flood-sidebar-row)) / 2 - var(--flood-sidebar-edge) - var(--flood-sys-space-3));
 }
+@media (forced-colors: none) {
+  .flood-root .flood-sidebar__toggle.flood-icon-button:focus-visible {
+    outline:none;
+    background:var(--flood-sys-color-selection-background);
+    color:var(--flood-sys-color-selection-content);
+  }
+}
 @media(pointer:coarse) {
   .flood-root .flood-sidebar { --flood-sidebar-rail-width:5rem; }
   .flood-root .flood-sidebar:not([data-collapsed="true"]) .flood-sidebar__toggle {
@@ -1891,6 +2231,12 @@
 .flood-root .flood-sidebar > .flood-scroll-area { flex:1; min-block-size:0; min-inline-size:0; }
 .flood-root .flood-sidebar__body { block-size:100%; min-block-size:0; min-inline-size:0; }
 .flood-root .flood-sidebar__navigation { padding-inline:var(--flood-sidebar-edge); }
+.flood-root .flood-sidebar__navigation :is(.flood-navigation-group__label,.flood-navigation-item__label,.flood-navigation-item__description) {
+  min-inline-size:0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
 .flood-root .flood-sidebar__group-label { padding-inline:var(--flood-sys-space-3); }
 .flood-root .flood-sidebar__group[data-icon-column] .flood-navigation-group__label { padding-inline-start:calc(var(--flood-sys-space-3) + var(--flood-sidebar-icon) + var(--flood-sys-space-2)); }
 .flood-root .flood-sidebar__footer { display:flex; flex-direction:column; align-items:stretch; gap:var(--flood-sys-space-1); flex:none; min-inline-size:0; padding-block-start:var(--flood-sys-space-3); padding-inline:var(--flood-sidebar-edge); }
@@ -2111,9 +2457,13 @@
   from { translate: var(--flood-motion-layer-x, 0) var(--flood-motion-layer-y, 0); }
 }
 
+@keyframes flood-toast-enter {
+  from { opacity: .35; translate: 0 var(--flood-toast-entry-offset, 0px); }
+}
+
 @media (prefers-reduced-motion: no-preference) {
   /* The native layer owns open state and positioning. Its measured box stays still. */
-  .flood-root :where(.flood-overlay-panel, .flood-select__menu, .flood-dialog, .flood-toast__message) {
+  .flood-root :where(.flood-overlay-panel, .flood-select__menu, .flood-dialog) {
     --flood-motion-layer-x: 0;
     --flood-motion-layer-y: 0;
   }
@@ -2155,14 +2505,26 @@
     animation: flood-motion-hint-in var(--flood-sys-motion-duration-enter) var(--flood-sys-motion-easing-enter);
   }
 
-  .flood-root .flood-toast-region:not([data-inline]) .flood-toast__message:not([data-flood-motion="reduce"] *) {
-    --flood-motion-layer-y: var(--flood-sys-motion-distance-small);
-    animation: flood-motion-hint-in var(--flood-sys-motion-duration-enter) var(--flood-sys-motion-easing-enter),
-      flood-motion-layer-content-in var(--flood-sys-motion-duration-enter) var(--flood-sys-motion-easing-enter);
+  .flood-root .flood-toast-region:not([data-inline]):not([data-flood-motion="reduce"] *) {
+    --flood-toast-travel: calc(2 * var(--flood-sys-motion-distance-small));
+    box-sizing: border-box;
+  }
+
+  /* Reserve room within the scrolling region for the card's entry. */
+  .flood-root .flood-toast-region[data-placement^="bottom"]:has(.flood-toast):not([data-inline]):not([data-flood-motion="reduce"] *) {
+    --flood-toast-entry-offset: var(--flood-toast-travel);
+    padding-block-end: var(--flood-toast-travel);
+    margin-block-end: calc(-1 * var(--flood-toast-travel));
+  }
+
+  .flood-root .flood-toast-region[data-placement^="top"]:has(.flood-toast):not([data-inline]):not([data-flood-motion="reduce"] *) {
+    --flood-toast-entry-offset: calc(-1 * var(--flood-toast-travel));
+    padding-block-start: var(--flood-toast-travel);
+    margin-block-start: calc(-1 * var(--flood-toast-travel));
   }
 
-  .flood-root .flood-toast-region[data-placement^="top"] .flood-toast__message {
-    --flood-motion-layer-y: calc(-1 * var(--flood-sys-motion-distance-small));
+  .flood-root .flood-toast:not([data-flood-motion="reduce"] *) {
+    animation: flood-toast-enter var(--flood-sys-motion-duration-enter) var(--flood-sys-motion-easing-enter);
   }
 }