@flood-md/react 0.2.1 → 0.2.3

package/dist/foundations.css

@@ -1,5 +1,72 @@
 @import "@flood-md/tokens/foundations.css";
 
+/* Keep real labels in the accessibility tree while removing their layout box. */
+.flood-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.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 li { display: inline-flex; align-items: center; gap: var(--flood-sys-space-2); min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
+.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 a { 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";
   font-style: normal;
@@ -41,6 +108,45 @@
 .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;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--flood-sys-space-2);
+  min-inline-size: 0;
+  padding: var(--flood-sys-space-3) 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);
+  color: var(--flood-sys-color-content-default);
+}
+.flood-root .flood-code-snippet__code {
+  flex: 1;
+  min-inline-size: 0;
+  font-family: var(--flood-sys-font-mono);
+  font-size: var(--flood-sys-type-compact-size);
+  font-weight: var(--flood-sys-type-compact-weight);
+  line-height: var(--flood-sys-type-compact-line-height);
+  letter-spacing: normal;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  user-select: text;
+}
+.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);
@@ -51,6 +157,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);
@@ -83,7 +191,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%; }
@@ -94,7 +202,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);
@@ -106,6 +214,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;
@@ -114,16 +231,108 @@
   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 { 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 { 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); }
+.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-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 { 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 { 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-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); }
@@ -131,10 +340,14 @@
 .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)); }
 }
@@ -142,15 +355,39 @@
   .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. */
+.flood-root .flood-type--lead {
+  --flood-type-size: var(--flood-sys-type-lead-size);
+  --flood-type-line: var(--flood-sys-type-lead-line-height);
+  --flood-type-tracking: var(--flood-sys-type-lead-tracking);
+  --flood-type-weight: var(--flood-sys-type-lead-weight);
+}
+.flood-root .flood-type--display {
+  --flood-type-size: var(--flood-sys-type-display-size);
+  --flood-type-line: var(--flood-sys-type-display-line-height);
+  --flood-type-tracking: var(--flood-sys-type-display-tracking);
+  --flood-type-weight: var(--flood-sys-type-display-weight);
+}
 .flood-root .flood-type--large {
   --flood-type-size: var(--flood-sys-type-large-size);
   --flood-type-line: var(--flood-sys-type-large-line-height);
@@ -294,3 +531,69 @@
   --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 { --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 0; align-self: stretch; inline-size: 0; min-inline-size: 0; 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; }
+}