@flood-md/react 0.2.3 → 0.2.4

package/dist/foundations.css

@@ -1,7 +1,169 @@
 @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 { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.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); }
@@ -19,7 +181,9 @@
 .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 { 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); }
@@ -31,7 +195,7 @@
 .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 (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; }
 }
@@ -67,6 +231,7 @@
 .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;
@@ -135,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);
@@ -289,14 +454,18 @@
 .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-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); }
@@ -332,11 +501,10 @@
 .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 { 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); }
@@ -552,12 +720,12 @@
 .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 { 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 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 { 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. */
@@ -597,3 +765,19 @@
   .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; }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type InputHTMLAttributes, type TextareaHTMLAttributes, type SelectHTMLAttributes, type AnchorHTMLAttributes, type ReactNode, type HTMLAttributes, type LabelHTMLAttributes, type FieldsetHTMLAttributes, type RefCallback, type RefObject } from "react";
+import { type ButtonHTMLAttributes, type InputHTMLAttributes, type TextareaHTMLAttributes, type SelectHTMLAttributes, type AnchorHTMLAttributes, type ReactNode, type HTMLAttributes, type CSSProperties, type LabelHTMLAttributes, type FieldsetHTMLAttributes, type RefCallback, type RefObject, type TableHTMLAttributes, type ImgHTMLAttributes } from "react";
 export type ControlSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "solid" | "subtle" | "outline" | "ghost";
@@ -7,6 +7,102 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export type FieldStatus = "error" | "warning" | "success" | "info";
+export type ContentSize = "sm" | "md" | "lg";
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+    size?: ContentSize;
+}
+/** @since 0.2.4 */
+export declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;
+export interface ToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+    label: string;
+    orientation?: "horizontal" | "vertical";
+    loop?: boolean;
+}
+/** @since 0.2.4 */
+export declare const Toolbar: import("react").ForwardRefExoticComponent<ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
+export type DataDensity = "compact" | "comfortable";
+export interface DescriptionItem {
+    id: string;
+    term: string;
+    description: ReactNode;
+}
+export interface DescriptionListProps extends Omit<HTMLAttributes<HTMLDListElement>, "children"> {
+    items: readonly DescriptionItem[];
+    layout?: "inline" | "stacked";
+    density?: DataDensity;
+    dividers?: boolean;
+}
+/** @since 0.2.4 */
+export declare const DescriptionList: import("react").ForwardRefExoticComponent<DescriptionListProps & import("react").RefAttributes<HTMLDListElement>>;
+export interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, "children"> {
+    caption: string;
+    children: ReactNode;
+    hideCaption?: boolean;
+    density?: DataDensity;
+    striped?: boolean;
+    scrollLabel?: string;
+}
+/** @since 0.2.4 */
+export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
+export type SemanticTone = "neutral" | "accent" | "error" | "warning" | "success" | "info";
+export type BadgeTone = SemanticTone;
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: ContentSize;
+    tone?: BadgeTone;
+    variant?: "subtle" | "outline";
+}
+/** @since 0.2.4 */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children" | "role" | "aria-label" | "aria-hidden"> {
+    size?: ContentSize;
+    label?: string;
+    decorative?: boolean;
+}
+/** @since 0.2.4 */
+export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children" | "role" | "tabIndex" | "aria-label" | "aria-hidden"> {
+    shape?: "text" | "rounded" | "circle";
+    width?: CSSProperties["width"];
+    height?: CSSProperties["height"];
+    animate?: boolean;
+}
+/** @since 0.2.4 */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children" | "role" | "aria-label" | "aria-hidden"> {
+    name: string;
+    src?: string;
+    fallback?: string;
+    size?: ContentSize;
+    shape?: "circle" | "rounded";
+    decorative?: boolean;
+}
+/** @since 0.2.4 */
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> {
+    label: string;
+    value?: number;
+    max?: number;
+    valueText?: string;
+    size?: ContentSize;
+    tone?: SemanticTone;
+    hideLabel?: boolean;
+}
+/** @since 0.2.4 */
+export declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface MeterProps extends Omit<ProgressProps, "value"> {
+    value: number;
+    min?: number;
+}
+/** @since 0.2.4 */
+export declare const Meter: import("react").ForwardRefExoticComponent<MeterProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "role" | "aria-live"> {
+    title?: string;
+    tone?: "neutral" | FieldStatus;
+    icon?: ReactNode;
+    announcement?: "off" | "polite" | "assertive";
+}
+/** @since 0.2.4 */
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface TabItem {
     value: string;
     label: string;
@@ -54,6 +150,35 @@ export declare const Pagination: import("react").ForwardRefExoticComponent<Pagin
 export interface OverlayTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     ref: RefCallback<HTMLButtonElement>;
 }
+export interface MenuActionItem {
+    id: string;
+    type?: "item";
+    label: string;
+    icon?: ReactNode;
+    shortcut?: string;
+    disabled?: boolean;
+    tone?: "default" | "danger";
+}
+export interface MenuSeparator {
+    id: string;
+    type: "separator";
+}
+export type MenuItem = MenuActionItem | MenuSeparator;
+export interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> {
+    label: string;
+    trigger: (props: OverlayTriggerProps) => ReactNode;
+    items: readonly MenuItem[];
+    onAction?: (id: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    controlSize?: "sm" | "md" | "lg" | "xl";
+}
+/** @since 0.2.4 */
+export declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "content" | "title" | "role"> {
     content: string;
     trigger: (props: OverlayTriggerProps) => ReactNode;
@@ -183,7 +308,10 @@ export declare const Select: import("react").ForwardRefExoticComponent<SelectPro
 export interface ChoiceProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
     label: ReactNode;
 }
-export declare const Checkbox: import("react").ForwardRefExoticComponent<ChoiceProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface CheckboxProps extends ChoiceProps {
+    indeterminate?: boolean;
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
 export declare const Radio: import("react").ForwardRefExoticComponent<ChoiceProps & import("react").RefAttributes<HTMLInputElement>>;
 export declare const Switch: import("react").ForwardRefExoticComponent<ChoiceProps & import("react").RefAttributes<HTMLInputElement>>;
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
@@ -288,6 +416,66 @@ export interface SurfaceProps extends HTMLAttributes<HTMLDivElement> {
     padding?: Space;
 }
 export declare const Surface: import("react").ForwardRefExoticComponent<SurfaceProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    size?: "sm" | "md" | "lg" | "full";
+    gutter?: Space;
+}
+/** Centered content with logical gutters; max width includes padding. @since 0.2.4 */
+export declare const Container: import("react").ForwardRefExoticComponent<ContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    columns?: 1 | 2 | 3 | 4 | 6 | 12;
+    minItemWidth?: string;
+    gap?: Space;
+}
+/** Auto-fit by default; explicit columns retain their count at every width. @since 0.2.4 */
+export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface VisuallyHiddenProps extends HTMLAttributes<HTMLElement> {
+    as?: "span" | "div";
+    focusable?: boolean;
+}
+/** Nonvisual content, with optional reveal when a descendant receives focus. @since 0.2.4 */
+export declare const VisuallyHidden: import("react").ForwardRefExoticComponent<VisuallyHiddenProps & import("react").RefAttributes<HTMLElement>>;
+export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    ratio?: number;
+}
+/** Reserve media geometry. Child content may overflow rather than being clipped. @since 0.2.4 */
+export declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "alt"> {
+    alt: string;
+    fit?: "cover" | "contain";
+}
+/** Native image semantics, explicit alternative text and bounded media fitting. @since 0.2.4 */
+export declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+export interface ListProps extends Omit<HTMLAttributes<HTMLUListElement | HTMLOListElement>, "role"> {
+    ordered?: boolean;
+    start?: number;
+    reversed?: boolean;
+    marker?: boolean;
+    gap?: Space;
+}
+/** Native list items supplied by the host; hidden markers retain list semantics. @since 0.2.4 */
+export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children"> {
+    title: string;
+    description?: ReactNode;
+    icon?: ReactNode;
+    actions?: ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    density?: "compact" | "comfortable";
+}
+/** Static empty content, not loading, an error boundary or a live announcement. @since 0.2.4 */
+export declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    footer?: ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    density?: "compact" | "comfortable";
+    elevation?: "default" | "raised";
+}
+/** A structured content surface, not an interactive wrapper. @since 0.2.4 */
+export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface IconSlotProps extends HTMLAttributes<HTMLSpanElement> {
     size?: ControlSize;
     label?: string;
@@ -301,6 +489,7 @@ export declare const IconButton: import("react").ForwardRefExoticComponent<IconB
 export declare const Divider: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>;
 export interface CodeSnippetProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     code: string;
+    codeDirection?: "ltr" | "rtl" | "auto";
     action?: ReactNode;
 }
 /** Selectable code with an optional host-owned action; no clipboard side effects. */