@flood-md/react 0.2.2 → 0.2.4

package/dist/foundations.css

@@ -1,5 +1,237 @@
 @import "@flood-md/tokens/foundations.css";
 
+.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); }
+.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; }
+.flood-root .flood-grid > * { min-inline-size: 0; }
+.flood-root .flood-aspect-ratio { position: relative; inline-size: 100%; min-inline-size: 0; }
+.flood-root .flood-aspect-ratio__content { position: absolute; inset: 0; min-inline-size: 0; }
+.flood-root .flood-aspect-ratio__content > :is(img, video, iframe) { display: block; inline-size: 100%; block-size: 100%; }
+.flood-root .flood-image { display: block; max-inline-size: 100%; block-size: auto; object-fit: cover; }
+.flood-root .flood-image[data-fit="contain"] { object-fit: contain; }
+.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; }
+.flood-root .flood-list[data-marker="false"] { list-style: none; padding: 0; }
+.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%); }
+.flood-root .flood-empty-state[data-density="compact"] { padding-block: var(--flood-sys-space-6); padding-inline: min(var(--flood-sys-space-6), 8%); }
+.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); }
+.flood-root .flood-empty-state__actions { justify-content: center; }
+.flood-root :is(.flood-container, .flood-grid, .flood-aspect-ratio, .flood-list, .flood-image, .flood-empty-state)[hidden] { display: none; }
+
+.flood-root .flood-card { display: flex; flex-direction: column; gap: var(--flood-sys-space-4); overflow-wrap: anywhere; }
+.flood-root .flood-card[data-density="compact"] { gap: var(--flood-sys-space-3); }
+.flood-root .flood-card__header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--flood-sys-space-3); min-inline-size: 0; }
+.flood-root .flood-card__intro { display: grid; gap: var(--flood-sys-space-1); flex: 1 1 12rem; min-inline-size: 0; }
+.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%; }
+.flood-root :is(.flood-card__body, .flood-card__footer) { min-inline-size: 0; }
+.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); }
+.flood-root .flood-card[data-density="compact"] > .flood-card__footer { padding-block-start: var(--flood-sys-space-3); }
+.flood-root .flood-card > .flood-card__footer:only-child { border: 0; padding: 0; }
+.flood-root .flood-card[hidden] { display: none; }
+@media (forced-colors: active) { .flood-root .flood-card { border: var(--flood-sys-stroke-width) solid CanvasText; background: Canvas !important; color: CanvasText; } }
+
+.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; }
+.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); }
+.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); }
+.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:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
+.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); }
+.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); }
+.flood-root :is(.flood-kbd, .flood-toolbar)[hidden] { display: none; }
+@media (forced-colors: active) { .flood-root :is(.flood-kbd, .flood-toolbar) { color: CanvasText; background: Canvas; border-color: CanvasText; } }
+
+.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; }
+.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)))); }
+.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; }
+.flood-root .flood-menu .flood-menu__item:focus { background: var(--flood-sys-color-action-on-surface-hover); }
+.flood-root .flood-menu .flood-menu__item:focus-visible { outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
+.flood-root .flood-menu .flood-menu__item[data-tone="danger"] { color: var(--flood-sys-color-action-danger-content); }
+.flood-root .flood-menu .flood-menu__item[aria-disabled="true"] { color: var(--flood-sys-color-field-disabled-content); cursor: default; }
+.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); }
+.flood-root .flood-menu__icon > svg { inline-size: 100%; block-size: 100%; }
+.flood-root .flood-menu__label { min-inline-size: 0; overflow-wrap: anywhere; }
+.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; }
+.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); }
+@media (forced-colors: active) {
+  .flood-root .flood-overlay-panel.flood-menu { background: Canvas; border-color: CanvasText; }
+  .flood-root .flood-menu .flood-menu__item[data-tone="danger"] { color: CanvasText; }
+  .flood-root .flood-menu .flood-menu__item:focus { forced-color-adjust: none; background: Highlight; color: HighlightText; }
+  .flood-root .flood-menu .flood-menu__item[aria-disabled="true"] { color: GrayText; }
+  .flood-root .flood-menu__shortcut { color: inherit; }
+  .flood-root .flood-menu__separator { background: CanvasText; }
+}
+
+.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); }
+.flood-root .flood-description-list[data-density="comfortable"] { --flood-data-padding: var(--flood-sys-space-3); }
+.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); }
+.flood-root .flood-description-list__item:first-child { padding-block-start: 0; }
+.flood-root .flood-description-list__item:last-child { padding-block-end: 0; }
+.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); }
+.flood-root .flood-description-list :is(dt, dd) { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
+.flood-root .flood-description-list dt { color: var(--flood-sys-color-content-subtle); }
+.flood-root .flood-description-list[data-layout="stacked"] > .flood-description-list__item { grid-template-columns: minmax(0, 1fr); }
+@container flood-description (max-width: 22rem) { .flood-root .flood-description-list__item { grid-template-columns: minmax(0, 1fr); } }
+.flood-root .flood-table-container { min-inline-size: 0; max-inline-size: 100%; inline-size: 100%; }
+.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); }
+.flood-root .flood-table[data-density="compact"] { --flood-data-padding: var(--flood-sys-space-2); }
+.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: top; padding: var(--flood-data-padding) var(--flood-sys-space-3); overflow-wrap: anywhere; }
+.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 [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 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; }
+}
+
+.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; }
+.flood-root .flood-indicator[data-size="sm"] { --flood-indicator-size: var(--flood-sys-size-indicator-sm); }
+.flood-root .flood-indicator[data-size="lg"] { --flood-indicator-size: var(--flood-sys-size-indicator-lg); }
+.flood-root .flood-indicator[data-tone="accent"] { --flood-indicator-color: var(--flood-sys-color-indicator-accent); }
+.flood-root .flood-indicator[data-tone="error"] { --flood-indicator-color: var(--flood-sys-color-feedback-error); }
+.flood-root .flood-indicator[data-tone="warning"] { --flood-indicator-color: var(--flood-sys-color-feedback-warning); }
+.flood-root .flood-indicator[data-tone="success"] { --flood-indicator-color: var(--flood-sys-color-feedback-success); }
+.flood-root .flood-indicator[data-tone="info"] { --flood-indicator-color: var(--flood-sys-color-feedback-info); }
+.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; }
+.flood-root .flood-indicator__value { color: var(--flood-sys-color-content-subtle); text-align: end; font-variant-numeric: tabular-nums; }
+.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); }
+.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); }
+.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; }
+@keyframes flood-indeterminate { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+.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); }
+.flood-root .flood-alert[data-tone="info"] { --flood-alert-color: var(--flood-sys-color-feedback-info); }
+.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__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: anywhere; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
+.flood-root .flood-alert__title { margin: 0; font: inherit; font-weight: var(--flood-sys-type-label-weight); }
+.flood-root .flood-alert__title + .flood-alert__body { margin-block-start: var(--flood-sys-space-1); }
+.flood-root .flood-alert__body { color: var(--flood-sys-color-content-subtle); }
+.flood-root .flood-alert__body > :first-child { margin-block-start: 0; }
+.flood-root .flood-alert__body > :last-child { margin-block-end: 0; }
+.flood-root :is(.flood-alert, .flood-indicator)[hidden] { display: none; }
+@media (prefers-reduced-motion: reduce) {
+  .flood-root .flood-indicator__fill { transition: none; }
+  .flood-root .flood-indicator[data-indeterminate="true"] .flood-indicator__fill { animation: none; background: var(--flood-indicator-color); inline-size: 35%; }
+}
+@media (forced-colors: active) {
+  .flood-root .flood-indicator__track { forced-color-adjust: none; background: Canvas; outline: 1px solid CanvasText; }
+  .flood-root .flood-indicator__fill { forced-color-adjust: none; background: Highlight; }
+  .flood-root .flood-indicator[data-indeterminate="true"] .flood-indicator__fill { animation: none; background: Highlight; inline-size: 35%; }
+  .flood-root .flood-alert { background: Canvas; color: CanvasText; border-color: CanvasText; }
+  .flood-root :is(.flood-alert__icon, .flood-alert__body) { color: CanvasText; }
+}
+
+.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; }
+.flood-root .flood-badge[data-size="sm"] { padding-block: 0; }
+.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); }
+.flood-root .flood-badge[data-tone="accent"] { --flood-badge-color: var(--flood-sys-color-accent-content); }
+.flood-root .flood-badge[data-tone="error"] { --flood-badge-color: var(--flood-sys-color-feedback-error); }
+.flood-root .flood-badge[data-tone="warning"] { --flood-badge-color: var(--flood-sys-color-feedback-warning); }
+.flood-root .flood-badge[data-tone="success"] { --flood-badge-color: var(--flood-sys-color-feedback-success); }
+.flood-root .flood-badge[data-tone="info"] { --flood-badge-color: var(--flood-sys-color-feedback-info); }
+.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)); }
+.flood-root .flood-badge > svg { flex: none; inline-size: 1em; block-size: 1em; }
+.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); }
+.flood-root .flood-skeleton[data-shape="rounded"] { block-size: 6rem; border-radius: var(--flood-sys-radius-field); }
+.flood-root .flood-skeleton[data-shape="circle"] { inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--flood-sys-radius-action); }
+.flood-root .flood-skeleton[data-animate="true"] { animation: flood-skeleton-pulse 1.8s ease-in-out infinite; }
+@keyframes flood-skeleton-pulse { 50% { opacity: .5; } }
+.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; }
+.flood-root .flood-avatar[data-size="sm"] { --flood-avatar-size: var(--flood-sys-control-sm-height); font-size: var(--flood-sys-type-helper-size); }
+.flood-root .flood-avatar[data-size="lg"] { --flood-avatar-size: var(--flood-sys-control-xl-height); }
+.flood-root .flood-avatar[data-shape="rounded"] { border-radius: var(--flood-sys-radius-field); }
+.flood-avatar__fallback { max-inline-size: 100%; overflow: hidden; white-space: nowrap; }
+.flood-root .flood-avatar .flood-avatar__image { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; }
+.flood-root .flood-avatar .flood-avatar__image[data-ready="true"] { opacity: 1; }
+.flood-root :is(.flood-badge, .flood-skeleton, .flood-avatar)[hidden] { display: none; }
+@media (prefers-reduced-motion: reduce) { .flood-root .flood-skeleton[data-animate="true"] { animation: none; } }
+@media (forced-colors: active) {
+  .flood-root :is(.flood-badge, .flood-avatar) { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
+  .flood-root .flood-skeleton { background: GrayText; animation: none; }
+}
+
+/* Keep real labels in the accessibility tree while removing their layout box. */
+.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; }
+.flood-field[data-hide-label="true"], .flood-fieldset[data-hide-label="true"] { position: relative; }
+
+.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); }
+.flood-root .flood-tabs[data-orientation="vertical"] { grid-template-columns: minmax(0, min(10rem, 40%)) minmax(0, 1fr); grid-template-rows: 1fr; }
+.flood-root .flood-tabs__scroll { background: var(--flood-sys-color-surface-canvas); }
+.flood-root .flood-tabs__list { display: flex; inline-size: max-content; min-inline-size: 100%; box-sizing: border-box; }
+.flood-root .flood-tabs[data-orientation="vertical"] .flood-tabs__list { flex-direction: column; inline-size: 100%; min-inline-size: 0; }
+.flood-root .flood-tabs .flood-tab { flex: none; white-space: nowrap; color: var(--flood-sys-color-content-subtle); border: 0; border-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)) calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)) 0 0; }
+.flood-root .flood-tabs .flood-tab[aria-selected="true"] { color: var(--flood-sys-color-content-default); background: var(--flood-sys-color-surface-default); box-shadow: none; }
+.flood-root .flood-tabs .flood-tab:focus-visible { outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
+.flood-root .flood-tabs .flood-tab:disabled { color: var(--flood-sys-color-field-disabled-content); }
+.flood-root .flood-tabs[data-orientation="vertical"] .flood-tab { inline-size: 100%; white-space: normal; justify-content: flex-start; text-align: start; border-radius: 0; border-start-start-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); border-end-start-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); }
+.flood-root .flood-tabs__panel { min-inline-size: 0; padding: var(--flood-sys-space-4); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: anywhere; }
+.flood-root .flood-tabs__panel[hidden] { display: none; }
+.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)); }
+.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); }
+.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); }
+.flood-root .flood-breadcrumb { inline-size: max-content; }
+.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; }
+.flood-root .flood-breadcrumb li > :not(.flood-breadcrumb__separator) { min-inline-size: 0; }
+.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; }
+.flood-root .flood-breadcrumb a:hover { text-decoration: underline; }
+.flood-root .flood-breadcrumb [aria-current="page"] { color: var(--flood-sys-color-content-default); }
+.flood-root .flood-breadcrumb__separator { flex: none; color: var(--flood-sys-color-content-subtle); }
+.flood-root .flood-pagination ul { gap: var(--flood-sys-space-1); }
+.flood-root .flood-pagination .flood-page { min-inline-size: var(--flood-control-height); padding-inline: var(--flood-sys-space-1); text-decoration: none; }
+.flood-root .flood-pagination:dir(rtl) .flood-page > svg { transform: scaleX(-1); }
+.flood-root .flood-page > svg { flex: none; inline-size: var(--flood-control-icon); block-size: var(--flood-control-icon); }
+.flood-root .flood-pagination .flood-page[aria-current="page"] { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
+.flood-root .flood-pagination .flood-page:is(:disabled, [aria-disabled="true"]) { color: var(--flood-sys-color-field-disabled-content); cursor: default; }
+.flood-root .flood-page-gap { padding-inline: var(--flood-sys-space-1); color: var(--flood-sys-color-content-subtle); }
+@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); } }
+@media (forced-colors: active) {
+  .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; }
+}
+
+.flood-root :is(.flood-overlay-panel, .flood-dialog) { box-sizing: border-box; color: var(--flood-sys-color-content-default); background: var(--flood-sys-color-surface-overlay); border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius: var(--flood-sys-radius-field); font: inherit; text-align: start; }
+.flood-root .flood-overlay-panel { position: fixed; inset: auto; margin: 0; max-inline-size: var(--flood-overlay-available-width, calc(100vw - 1rem)); max-block-size: var(--flood-overlay-available-height, calc(100dvh - 1rem)); padding: var(--flood-sys-space-4); gap: var(--flood-sys-space-2); overflow: auto; }
+.flood-root .flood-overlay-panel[popover]:not(:popover-open) { display: none; }
+.flood-root .flood-tooltip { inline-size: max-content; max-inline-size: min(20rem, var(--flood-overlay-available-width, calc(100vw - 1rem))); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); border-radius: var(--flood-sys-radius-field); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); overflow-wrap: anywhere; }
+.flood-root .flood-popover { inline-size: 20rem; }
+.flood-root .flood-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: var(--flood-sys-space-4); }
+.flood-root .flood-overlay-close { flex: none; align-self: flex-start; }
+.flood-root .flood-overlay-title { margin: 0; min-inline-size: 0; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); font-weight: var(--flood-sys-type-label-weight); overflow-wrap: anywhere; }
+.flood-root .flood-overlay-body { margin-block-start: var(--flood-sys-space-3); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
+.flood-root .flood-overlay-description { margin: var(--flood-sys-space-2) 0 0; color: var(--flood-sys-color-content-subtle); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
+.flood-root .flood-dialog { padding: var(--flood-sys-space-6); inline-size: min(32rem, calc(100% - var(--flood-sys-space-8))); max-inline-size: calc(100% - var(--flood-sys-space-8)); max-block-size: calc(100dvh - var(--flood-sys-space-8)); overflow: auto; }
+.flood-root .flood-dialog:not([open]) { display: none; }
+.flood-root .flood-dialog::backdrop { background: color-mix(in srgb, var(--flood-sys-color-surface-canvas) 72%, transparent); }
+.flood-root .flood-popover:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: 0; }
+
+.flood-root :is(.flood-disclosure, .flood-accordion) { box-sizing: border-box; min-inline-size: 0; 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-disclosure__heading { margin: 0; padding: 0; font: inherit; }
+.flood-root .flood-disclosure .flood-disclosure__trigger { inline-size: 100%; max-inline-size: none; justify-content: space-between; text-align: start; border-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); }
+.flood-root .flood-disclosure__title { min-inline-size: 0; }
+.flood-root .flood-disclosure__indicator { flex: none; inline-size: calc(var(--flood-control-icon) * .4); block-size: calc(var(--flood-control-icon) * .4); border-right: var(--flood-sys-stroke-width) solid currentColor; border-block-end: var(--flood-sys-stroke-width) solid currentColor; transform: rotate(45deg); transition: transform var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing); margin-inline: var(--flood-sys-space-1); }
+.flood-root .flood-disclosure[data-open="true"] > .flood-disclosure__heading .flood-disclosure__indicator { transform: rotate(225deg); }
+.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: anywhere; }
+.flood-root .flood-disclosure__panel[hidden] { display: none; }
+.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)); }
+@media (prefers-reduced-motion: reduce) { .flood-root .flood-disclosure__indicator { transition: none; } }
+
+@font-face { font-family: "Inter"; src: url("./fonts/InterVariable-Italic.woff2") format("woff2"); font-style: italic; font-weight: 100 900; font-display: swap; }
 @font-face {
   font-family: "Inter";
   font-style: normal;
@@ -41,6 +273,19 @@
 .flood-root .flood-tone--info { color: var(--flood-sys-color-feedback-info); }
 .flood-root .flood-stack { display: flex; flex-direction: column; gap: var(--flood-layout-gap); min-inline-size: 0; }
 .flood-root .flood-inline { display: flex; flex-wrap: wrap; gap: var(--flood-layout-gap); min-inline-size: 0; }
+.flood-root :where(.flood-stack, .flood-inline, .flood-surface) { min-block-size: 0; }
+.flood-scroll-area { position: relative; isolation: isolate; min-inline-size: 0; min-block-size: 0; max-inline-size: 100%; }
+.flood-scroll-area__viewport { position: relative; z-index: 0; box-sizing: border-box; min-inline-size: 0; min-block-size: 0; overflow: auto; scroll-behavior: auto; }
+.flood-scroll-area__viewport[hidden] { display: none; }
+.flood-scroll-area__viewport[data-orientation="vertical"] { overflow-x: hidden; }
+.flood-scroll-area__viewport[data-orientation="horizontal"] { overflow-y: hidden; }
+.flood-scroll-area__viewport[data-scrollbars="overlay"] { scrollbar-width: none; }
+.flood-scroll-area__viewport[data-scrollbars="overlay"]::-webkit-scrollbar { display: none; width: 0; height: 0; }
+.flood-scroll-area__content { --flood-scroll-content-inline: 0px; --flood-scroll-content-block: 0px; display: flow-root; box-sizing: border-box; min-inline-size: 100%; padding-inline-end: var(--flood-scroll-content-inline); padding-block-end: var(--flood-scroll-content-block); }
+.flood-scroll-area__track { position: absolute; z-index: var(--flood-sys-layer-sticky); touch-action: none; user-select: none; }
+.flood-scroll-area__thumb { border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-scrollbar-thumb); touch-action: none; user-select: none; cursor: default; }
+.flood-scroll-area__thumb:hover, .flood-scroll-area__track[data-dragging="true"] .flood-scroll-area__thumb { background: var(--flood-sys-color-scrollbar-thumb-hover); }
+.flood-root .flood-scroll-area__viewport:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: var(--flood-sys-focus-offset); }
 .flood-root .flood-code-snippet {
   box-sizing: border-box;
   display: flex;
@@ -55,7 +300,7 @@
   color: var(--flood-sys-color-content-default);
 }
 .flood-root .flood-code-snippet__code {
-  flex: 1;
+  flex: 1 1 20ch;
   min-inline-size: 0;
   font-family: var(--flood-sys-font-mono);
   font-size: var(--flood-sys-type-compact-size);
@@ -66,7 +311,7 @@
   overflow-wrap: anywhere;
   user-select: text;
 }
-.flood-root .flood-code-snippet__action { flex: none; }
+.flood-root .flood-code-snippet__action { flex: none; max-inline-size: 100%; }
 .flood-root .flood-surface {
   box-sizing: border-box;
   border-radius: var(--flood-sys-radius-block);
@@ -77,6 +322,8 @@
 .flood-root .flood-divider { border: 0; border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); margin: 0; inline-size: 100%; }
 .flood-root .flood-button {
   display: inline-flex;
+  inline-size: fit-content;
+  max-inline-size: 100%;
   align-items: center;
   justify-content: center;
   min-block-size: var(--flood-control-height);
@@ -109,7 +356,7 @@
   --flood-surface-action-rest: var(--flood-sys-color-action-on-surface-hover);
   --flood-surface-action-hover: var(--flood-sys-color-action-on-surface-pressed);
 }
-.flood-root .flood-button--outline { border-color: var(--flood-sys-color-field-boundary); }
+.flood-root .flood-button--outline { border-color: var(--flood-sys-color-field-border); }
 .flood-root .flood-icon-button { min-inline-size: var(--flood-control-height); padding: var(--flood-sys-space-1); }
 .flood-root .flood-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; inline-size: var(--flood-icon-size); block-size: var(--flood-icon-size); color: inherit; }
 .flood-root .flood-icon > svg { display: block; inline-size: 100%; block-size: 100%; }
@@ -120,7 +367,7 @@
   padding-block: calc((var(--flood-control-height) - var(--flood-control-text) * var(--flood-control-line)) / 2 - var(--flood-sys-stroke-width));
   padding-inline: calc(var(--flood-control-padding) - var(--flood-sys-stroke-width));
   border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-field-border);
-  border-block-end-color: var(--flood-sys-color-field-boundary);
+  box-shadow: none;
   border-radius: var(--flood-sys-radius-field);
   background: var(--flood-sys-color-field-background);
   color: var(--flood-sys-color-field-content);
@@ -132,6 +379,15 @@
 .flood-root .flood-input::placeholder { color: var(--flood-sys-color-field-placeholder); opacity: 1; }
 .flood-root .flood-input[aria-invalid="true"] { border-color: var(--flood-sys-color-feedback-error); }
 .flood-root .flood-input[readonly] { cursor: text; }
+.flood-root .flood-input[readonly]:not(:disabled) { background: var(--flood-sys-color-surface-canvas); }
+.flood-root .flood-input[readonly]:not(:disabled):not(:focus-visible) { border-style: dashed; }
+.flood-root [data-status="error"] { --flood-field-feedback: var(--flood-sys-color-feedback-error); }
+.flood-root [data-status="warning"] { --flood-field-feedback: var(--flood-sys-color-feedback-warning); }
+.flood-root [data-status="success"] { --flood-field-feedback: var(--flood-sys-color-feedback-success); }
+.flood-root [data-status="info"] { --flood-field-feedback: var(--flood-sys-color-feedback-info); }
+.flood-root .flood-input[data-status] { border-color: var(--flood-field-feedback); }
+.flood-root .flood-message { font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); color: var(--flood-field-feedback, var(--flood-sys-color-content-helper)); }
+.flood-root .flood-field[data-status] > .flood-error { color: var(--flood-field-feedback); }
 .flood-root .flood-input:disabled { background: var(--flood-sys-color-field-disabled); color: var(--flood-sys-color-field-disabled-content); border-color: var(--flood-sys-color-field-border); opacity: 1; }
 .flood-root .flood-input:focus-visible {
   outline: none;
@@ -140,27 +396,126 @@
   padding-block: calc((var(--flood-control-height) - var(--flood-control-text) * var(--flood-control-line)) / 2 - var(--flood-sys-focus-width));
   padding-inline: calc(var(--flood-control-padding) - var(--flood-sys-focus-width));
 }
-.flood-root .flood-textarea { min-block-size: calc(var(--flood-control-height) * 3); resize: vertical; }
+.flood-root .flood-select { position: relative; display: block; inline-size: 100%; min-inline-size: 0; color: var(--flood-sys-color-field-content); }
+.flood-root .flood-select__control { appearance: none; padding-inline-end: calc(var(--flood-control-padding) + var(--flood-control-icon) + var(--flood-control-gap) - var(--flood-sys-stroke-width)); cursor: pointer; }
+.flood-root .flood-select__control:focus-visible { padding-inline-end: calc(var(--flood-control-padding) + var(--flood-control-icon) + var(--flood-control-gap) - var(--flood-sys-focus-width)); }
+.flood-root .flood-select:not(.flood-select--listbox)::after {
+  content: "";
+  box-sizing: border-box;
+  pointer-events: none;
+  position: absolute;
+  inset-inline-end: var(--flood-control-padding);
+  inset-block-start: 50%;
+  inline-size: var(--flood-sys-space-2);
+  block-size: var(--flood-sys-space-2);
+  border-right: var(--flood-sys-focus-width) solid currentColor;
+  border-bottom: var(--flood-sys-focus-width) solid currentColor;
+  transform: translateY(-75%) rotate(45deg);
+}
+.flood-root .flood-select:has(select:disabled) { color: var(--flood-sys-color-field-disabled-content); }
+.flood-root .flood-select--listbox .flood-select__control { appearance: auto; padding-inline-end: calc(var(--flood-control-padding) - var(--flood-sys-stroke-width)); }
+.flood-root .flood-select--listbox .flood-select__control:focus-visible { padding-inline-end: calc(var(--flood-control-padding) - var(--flood-sys-focus-width)); }
+.flood-root .flood-select--custom::after { display: none; }
+.flood-root .flood-select[hidden] { display: none; }
+.flood-root .flood-select--custom .flood-select__control { position: relative; text-align: start; font-family: inherit; }
+.flood-root .flood-select--custom .flood-select__control::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; inset-inline-end: var(--flood-control-padding); inset-block-start: 50%; inline-size: var(--flood-sys-space-2); block-size: var(--flood-sys-space-2); border-right: var(--flood-sys-focus-width) solid currentColor; border-bottom: var(--flood-sys-focus-width) solid currentColor; transform: translateY(-75%) rotate(45deg); }
+.flood-root .flood-select__value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.flood-root .flood-select__native[hidden] { display: none; }
+.flood-root .flood-select__menu {
+  --flood-menu-radius: var(--flood-sys-radius-field);
+  --flood-menu-padding: var(--flood-sys-space-1);
+  --flood-menu-stroke: var(--flood-sys-stroke-width);
+  box-sizing: border-box;
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  padding: var(--flood-menu-padding);
+  max-block-size: calc(var(--flood-sys-control-md-height) * 8);
+  overflow: hidden;
+  overscroll-behavior: contain;
+  border: var(--flood-menu-stroke) solid var(--flood-sys-color-border-decorative);
+  border-radius: var(--flood-menu-radius);
+  background: var(--flood-sys-color-surface-overlay);
+  color: var(--flood-sys-color-content-default);
+  font-family: var(--flood-sys-font-sans);
+  font-size: var(--flood-control-text);
+  line-height: var(--flood-control-line);
+  letter-spacing: var(--flood-sys-type-compact-tracking);
+  z-index: var(--flood-sys-layer-popover);
+}
+.flood-root .flood-select__menu::backdrop { background: transparent; pointer-events: none; }
+.flood-root .flood-select__viewport { max-block-size: calc(var(--flood-sys-control-md-height) * 8 - var(--flood-sys-space-1) * 2 - var(--flood-sys-stroke-width) * 2); }
+.flood-root .flood-select__option { display: flex; align-items: center; justify-content: space-between; gap: var(--flood-sys-space-2); min-block-size: var(--flood-sys-control-md-height); padding: var(--flood-sys-space-2) var(--flood-sys-space-3); border-radius: max(0px, calc(var(--flood-menu-radius) - var(--flood-menu-padding) - var(--flood-menu-stroke))); cursor: pointer; box-sizing: border-box; overflow-wrap: anywhere; }
+.flood-root .flood-select__option[data-active="true"] { background: var(--flood-sys-color-selection-background); }
+.flood-root .flood-select__option[aria-disabled="true"] { color: var(--flood-sys-color-field-disabled-content); cursor: not-allowed; }
+.flood-root .flood-select__selected { flex: none; inline-size: var(--flood-sys-control-sm-icon-size); text-align: center; }
+.flood-root .flood-select__group, .flood-root .flood-select__empty { padding: var(--flood-sys-space-2) var(--flood-sys-space-3); font-size: var(--flood-sys-type-label-size); color: var(--flood-sys-color-content-helper); }
+.flood-root .flood-select__validation { display: block; margin-block-start: var(--flood-sys-space-2); color: var(--flood-sys-color-content-helper); font-size: var(--flood-sys-type-helper-size); line-height: var(--flood-sys-type-helper-line-height); }
+.flood-root .flood-textarea { min-block-size: calc(var(--flood-control-height) * 3); resize: none; overflow: auto; }
 .flood-root .flood-field { display: grid; gap: var(--flood-sys-space-2); }
+.flood-root .flood-fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; inline-size: 100%; }
+.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); }
+.flood-root .flood-fieldset__body { clear: both; display: grid; gap: var(--flood-sys-space-3); min-inline-size: 0; }
+.flood-root .flood-choice-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-inline-size: 0; }
+.flood-root .flood-choice-group > .flood-choice { min-block-size: var(--flood-sys-control-sm-height); }
+.flood-root .flood-choice-group[data-orientation="horizontal"] { flex-direction: row; flex-wrap: wrap; column-gap: var(--flood-sys-space-4); }
+.flood-root .flood-fieldset__body:has(> .flood-choice-group) { gap: var(--flood-sys-space-1); }
+.flood-root .flood-fieldset:has(> .flood-fieldset__body > .flood-choice-group) > .flood-legend { margin-block-end: var(--flood-sys-space-1); }
+.flood-root .flood-fieldset:has(> .flood-fieldset__body > .flood-hint) > .flood-legend { margin-block-end: var(--flood-sys-space-1); }
+/* Keep legends in ordinary float/clear layout from their first render.
+   WebKit otherwise retains the native legend row when it becomes absolute.
+   The real legend and its React children remain mounted for group semantics. */
+.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; }
+.flood-root .flood-fieldset:disabled :is(.flood-legend, .flood-label) { color: var(--flood-sys-color-field-disabled-content); }
 .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); }
 .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); }
 .flood-root .flood-hint { color: var(--flood-sys-color-content-helper); }
 .flood-root .flood-error { color: var(--flood-sys-color-content-helper); }
-.flood-root .flood-choice { gap: var(--flood-sys-space-2); min-block-size: var(--flood-sys-control-md-height); 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); }
+.flood-root .flood-choice { display: inline-flex; align-items: center; inline-size: fit-content; max-inline-size: 100%; gap: var(--flood-sys-space-2); min-block-size: var(--flood-sys-control-md-height); 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); }
+.flood-root .flood-choice > span { min-inline-size: 0; }
+.flood-root .flood-switch { justify-content: flex-start; gap: var(--flood-sys-space-2); }
 .flood-root .flood-choice:has(input:disabled) { color: var(--flood-sys-color-field-disabled-content); }
-.flood-root .flood-check { inline-size: var(--flood-sys-size-choice); block-size: var(--flood-sys-size-choice); accent-color: var(--flood-sys-color-action-primary-rest); }
-.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-boundary); border-radius: var(--flood-sys-radius-action); background: var(--flood-sys-color-action-subtle-hover); }
-.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: transform var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing); }
+.flood-root .flood-check {
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  box-sizing: border-box;
+  flex: 0 0 var(--flood-sys-size-choice);
+  inline-size: var(--flood-sys-size-choice);
+  min-inline-size: var(--flood-sys-size-choice);
+  max-inline-size: var(--flood-sys-size-choice);
+  block-size: var(--flood-sys-size-choice);
+  margin: 0;
+  padding: 0;
+  border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-field-border);
+  border-radius: var(--flood-sys-radius-indicator);
+  background: var(--flood-sys-color-field-background);
+  color: var(--flood-sys-color-action-primary-content);
+  accent-color: var(--flood-sys-color-action-primary-rest);
+}
+.flood-root .flood-check:checked, .flood-root .flood-check:indeterminate { background: var(--flood-sys-color-action-primary-rest); border-color: var(--flood-sys-color-action-primary-rest); }
+.flood-root .flood-check::before { content: ""; box-sizing: border-box; opacity: 0; }
+.flood-root .flood-check[type="checkbox"]::before { inline-size: calc(var(--flood-sys-size-choice) * .3); block-size: calc(var(--flood-sys-size-choice) * .55); border-right: var(--flood-sys-focus-width) solid currentColor; border-bottom: var(--flood-sys-focus-width) solid currentColor; transform: translateY(-10%) rotate(45deg); }
+.flood-root .flood-check:checked::before, .flood-root .flood-check:indeterminate::before { opacity: 1; }
+.flood-root .flood-check[type="checkbox"]:indeterminate::before { inline-size: calc(var(--flood-sys-size-choice) * .55); block-size: 0; border: 0; border-block-end: var(--flood-sys-focus-width) solid currentColor; transform: none; }
+.flood-root .flood-check[type="radio"] { border-radius: var(--flood-sys-radius-action); }
+.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; }
+.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; }
+.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); }
+.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); }
 .flood-root .flood-switch-input:checked { background: var(--flood-sys-color-action-primary-rest); border-color: var(--flood-sys-color-action-primary-rest); }
-.flood-root .flood-switch-input:checked::before { transform: translateX(calc(var(--flood-sys-size-switch-width) - var(--flood-sys-size-switch-height))); background: var(--flood-sys-color-action-primary-content); }
-.flood-root .flood-switch-input:dir(rtl):checked::before { transform: translateX(calc(var(--flood-sys-size-switch-height) - var(--flood-sys-size-switch-width))); }
+.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); }
 .flood-root .flood-switch-input:disabled { opacity: 1; border-color: var(--flood-sys-color-field-border); background: var(--flood-sys-color-field-disabled); }
 .flood-root .flood-switch-input:disabled::before { background: var(--flood-sys-color-field-disabled-content); }
 .flood-root .flood-link { font-size: inherit; color: var(--flood-sys-color-content-default); text-underline-offset: var(--flood-sys-space-1); }
+.flood-root .flood-link--button { font-size: var(--flood-control-text); color: var(--flood-action-content); text-decoration: none; }
+.flood-root .flood-link--button[aria-current="page"] { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
 .flood-root :where(.flood-button, .flood-check, .flood-switch-input, .flood-link):focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: var(--flood-sys-focus-offset); }
 .flood-root .flood-spinner { inline-size: var(--flood-control-icon); block-size: var(--flood-control-icon); border-width: var(--flood-sys-focus-width); }
 @media (pointer: coarse) {
+  .flood-root .flood-select__option { min-block-size: max(var(--flood-sys-control-md-height), var(--flood-sys-size-touch)); }
   .flood-root .flood-button, .flood-root .flood-choice, .flood-root .flood-input { min-block-size: max(var(--flood-control-height, var(--flood-sys-control-md-height)), var(--flood-sys-size-touch)); }
+  .flood-root .flood-choice-group > .flood-choice { min-block-size: max(var(--flood-sys-control-sm-height), var(--flood-sys-size-touch)); }
   .flood-root .flood-icon-button { min-inline-size: var(--flood-sys-size-touch); }
   .flood-root .flood-input { font-size: max(var(--flood-control-text), var(--flood-sys-type-body-size)); }
 }
@@ -168,12 +523,24 @@
   .flood-root .flood-button, .flood-root .flood-switch-input::before, .flood-root .flood-spinner { transition-duration: var(--flood-sys-motion-duration-reduced); animation: none; }
 }
 @media (forced-colors: active) {
+  .flood-scroll-area__viewport[data-scrollbars="overlay"] { scrollbar-width: auto; }
+  .flood-scroll-area__viewport[data-scrollbars="overlay"]::-webkit-scrollbar { display: initial; width: auto; height: auto; }
+  .flood-scroll-area__track { display: none; }
+  .flood-scroll-area__content { padding-inline-end: 0; padding-block-end: 0; }
+  .flood-root .flood-scroll-area__viewport:focus-visible { outline-color: Highlight; }
   .flood-root .flood-button { border-color: ButtonText; }
   .flood-root .flood-input { border-color: CanvasText; }
   .flood-root .flood-input:focus-visible { border-color: Highlight; }
   .flood-root :where(.flood-button, .flood-check, .flood-switch-input, .flood-link):focus-visible { outline-color: Highlight; }
   .flood-root .flood-switch-input { appearance: auto; }
   .flood-root .flood-switch-input::before { display: none; }
+  .flood-root .flood-check { appearance: auto; background: Canvas; border-color: CanvasText; color: CanvasText; }
+  .flood-root .flood-check::before { display: none; }
+  .flood-root .flood-select__control { appearance: auto; }
+  .flood-root .flood-select::after { display: none; }
+  .flood-root .flood-select__menu { background: Canvas; color: CanvasText; border-color: CanvasText; }
+  .flood-root .flood-select__option[data-active="true"] { background: Highlight; color: HighlightText; }
+  .flood-root .flood-select--custom .flood-select__control::after { border-color: ButtonText; }
 }
 
 /* Role recipes keep every value in the authored token source. */
@@ -332,3 +699,85 @@
   --flood-action-disabled: var(--flood-sys-color-action-ghost-disabled);
   --flood-action-disabled-content: var(--flood-sys-color-action-ghost-disabled-content);
 }
+
+/* Connected constructs retain native focus and forms; hosts own their actions. */
+.flood-root .flood-button-group { display: inline-flex; align-items: stretch; max-inline-size: 100%; min-inline-size: 0; isolation: isolate; }
+.flood-root .flood-button-group > .flood-button { position: relative; border-radius: 0; min-inline-size: 0; flex-shrink: 1; }
+.flood-root .flood-button-group > .flood-icon-button { min-inline-size: var(--flood-control-height); }
+@media (pointer: coarse) { .flood-root .flood-button-group > .flood-icon-button { min-inline-size: max(var(--flood-control-height), var(--flood-sys-size-touch)); } }
+.flood-root .flood-button-group > .flood-button:focus-visible { z-index: 1; }
+.flood-root .flood-toggle[aria-pressed="true"]:not(:disabled) { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
+.flood-root .flood-toggle-group { inline-size: max-content; max-inline-size: none; }
+.flood-root .flood-toggle-group > .flood-toggle { flex-shrink: 0; white-space: nowrap; }
+@media (forced-colors: active) { .flood-root .flood-toggle[aria-pressed="true"]:not(:disabled) { background: Highlight; color: HighlightText; } }
+.flood-root .flood-button-group[data-orientation="horizontal"] > .flood-button:not([hidden]):not(:nth-last-child(1 of .flood-button:not([hidden]))) { border-inline-end-width: 0; }
+.flood-root .flood-button-group[data-orientation="horizontal"] > .flood-button:not([hidden]) ~ .flood-button:not([hidden]) { border-inline-start-color: var(--flood-sys-color-field-border); }
+.flood-root .flood-button-group[data-orientation="horizontal"] > .flood-button:nth-child(1 of .flood-button:not([hidden])) { border-start-start-radius: var(--flood-sys-radius-field); border-end-start-radius: var(--flood-sys-radius-field); }
+.flood-root .flood-button-group[data-orientation="horizontal"] > .flood-button:nth-last-child(1 of .flood-button:not([hidden])) { border-start-end-radius: var(--flood-sys-radius-field); border-end-end-radius: var(--flood-sys-radius-field); }
+.flood-root .flood-button-group[data-orientation="vertical"] { flex-direction: column; }
+.flood-root .flood-button-group[data-orientation="vertical"] > .flood-button { inline-size: 100%; }
+.flood-root .flood-button-group[data-orientation="vertical"] > .flood-button:not([hidden]):not(:nth-last-child(1 of .flood-button:not([hidden]))) { border-block-end-width: 0; }
+.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); }
+.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); }
+.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); }
+.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); }
+.flood-root .flood-input-group[data-status] { border-color: var(--flood-field-feedback); }
+.flood-root .flood-input-group[data-readonly="true"] { background: var(--flood-sys-color-surface-canvas); border-style: dashed; }
+.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); }
+.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; }
+.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))); }
+.flood-root .flood-input-group > .flood-input:focus-visible { outline: none; border: 0; padding-inline: 0; }
+.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); }
+/* Text edges retain reading padding; nested actions use the same optical inset on every edge. */
+.flood-root .flood-input-group:has(> .flood-input-group__addon--start > .flood-button) { padding-inline-start: calc(var(--flood-group-inset) - var(--flood-group-stroke)); }
+.flood-root .flood-input-group:has(> .flood-input-group__addon--end > .flood-button) { padding-inline-end: calc(var(--flood-group-inset) - var(--flood-group-stroke)); }
+.flood-root .flood-input-group__addon > .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))); }
+@media (pointer: coarse) { .flood-root .flood-input-group { --flood-group-height: max(var(--flood-control-height), calc(var(--flood-sys-size-touch) + 2 * var(--flood-group-inset))); } }
+@media (forced-colors: active) {
+  .flood-root .flood-input-group { border-color: CanvasText; background: Canvas; color: CanvasText; }
+  .flood-root .flood-input-group:has(> .flood-input:focus-visible) { border-color: Highlight; }
+  .flood-root .flood-input-group > .flood-input { border: 0; }
+}
+
+.flood-root :is(.flood-button, .flood-input, .flood-button-group, .flood-input-group)[hidden] { display: none; }
+
+.flood-root .flood-input-group[data-disabled="true"] > .flood-input-group__addon { color: var(--flood-sys-color-field-disabled-content); }
+
+/* The shell and selected segment share concentric geometry; native radios own state. */
+.flood-root .flood-segmented { inline-size: fit-content; max-inline-size: 100%; }
+.flood-root .flood-segmented .flood-choice-group { box-sizing: border-box; inline-size: max-content; flex-wrap: nowrap; align-items: stretch; gap: var(--flood-sys-space-1); padding: calc(var(--flood-sys-space-1) - var(--flood-sys-stroke-width)); 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-surface-default); }
+.flood-root .flood-segmented--full { inline-size: 100%; }
+.flood-root .flood-segmented--full .flood-choice-group { inline-size: 100%; }
+.flood-root .flood-segmented .flood-choice { position: relative; box-sizing: border-box; flex: 1 0 auto; justify-content: center; max-inline-size: none; min-block-size: calc(var(--flood-control-height) - 2 * var(--flood-sys-space-1)); padding-block: max(0px, calc((var(--flood-control-height) - 2 * var(--flood-sys-space-1) - var(--flood-control-text) * var(--flood-control-line)) / 2)); padding-inline: var(--flood-sys-space-3); border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-sys-space-1))); color: var(--flood-sys-color-content-subtle); font-size: var(--flood-control-text); line-height: var(--flood-control-line); font-weight: var(--flood-sys-type-control-weight); letter-spacing: var(--flood-sys-type-control-tracking); cursor: pointer; }
+.flood-root .flood-segmented--full .flood-choice { flex: 1 1 0; min-inline-size: 0; }
+.flood-root .flood-segmented .flood-choice-group[data-orientation="vertical"] > .flood-choice { inline-size: 100%; }
+.flood-root .flood-segmented--icons .flood-choice { padding-inline: var(--flood-sys-space-1); min-inline-size: calc(var(--flood-control-height) - 2 * var(--flood-sys-space-1)); }
+.flood-root .flood-segmented .flood-choice > span { display: inline-flex; align-items: center; justify-content: center; gap: var(--flood-control-gap); }
+.flood-root .flood-segmented .flood-choice > .flood-check { position: absolute; inset: 0; inline-size: 100%; min-inline-size: 0; max-inline-size: none; block-size: 100%; margin: 0; border: 0; opacity: 0; cursor: inherit; }
+.flood-root .flood-segmented .flood-choice > .flood-check::before { display: none; }
+.flood-root .flood-segmented .flood-choice:has(input:checked) { background: var(--flood-sys-color-selection-background); color: var(--flood-sys-color-selection-content); }
+.flood-root .flood-segmented .flood-choice:has(input:focus-visible) { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: 0; }
+.flood-root .flood-segmented .flood-choice:has(input:disabled) { color: var(--flood-sys-color-field-disabled-content); cursor: default; }
+.flood-root .flood-segmented__name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (pointer: coarse) { .flood-root .flood-segmented .flood-choice { min-block-size: max(calc(var(--flood-control-height) - 2 * var(--flood-sys-space-1)), var(--flood-sys-size-touch)); min-inline-size: var(--flood-sys-size-touch); } }
+@media (forced-colors: active) {
+  .flood-root .flood-segmented .flood-choice-group { border-color: CanvasText; }
+  .flood-root .flood-segmented .flood-choice:has(input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
+  .flood-root .flood-segmented .flood-choice:has(input:focus-visible) { outline-color: Highlight; }
+}
+
+.flood-root .flood-choice[hidden] { display: none; }
+
+.flood-root .flood-input-group__addon:has(> .flood-button) { flex: 0 0 auto; max-inline-size: 100%; }
+.flood-root .flood-input-group__addon > .flood-button { white-space: normal; overflow-wrap: normal; flex-shrink: 0; min-inline-size: min-content; }
+.flood-root .flood-connected-scroll .flood-button-group { inline-size: max-content; max-inline-size: none; }
+.flood-root .flood-connected-scroll .flood-button-group > .flood-button { flex-shrink: 0; min-inline-size: min-content; overflow-wrap: normal; white-space: nowrap; }
+.flood-root .flood-connected-scroll .flood-button-group[data-orientation="vertical"] { inline-size: 100%; }
+.flood-root .flood-connected-scroll .flood-button-group[data-orientation="vertical"] > .flood-button { white-space: normal; }
+.flood-scroll-area[hidden], .flood-root .flood-select[hidden] { display: none; }
+
+.flood-root .flood-connected-scroll .flood-button:focus-visible { outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
+
+.flood-root .flood-connected-scroll .flood-button-group > .flood-icon-button { min-inline-size: var(--flood-control-height); }
+@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)); } }
+.flood-root .flood-input-group__addon--end:has(> .flood-button) { margin-inline-start: auto; }