@flood-md/react 0.2.8 → 0.2.9

package/README.md

@@ -6,9 +6,12 @@ HTML semantics and refs, no third-party component library or Tailwind dependency
 Named imports support tree shaking in optimizing ES-module bundlers. Import the
 shared stylesheet explicitly; styles are not split by component.
 
-This package documents the **0.2.8** source API. Keep Flood package versions aligned and follow the guide matching
+This package documents the **0.2.9** source API. Keep Flood package versions aligned and follow the guide matching
 your installed declarations; source changes do not modify an existing npm release.
 
+Version 0.2.9 improves constrained file rows, Drawer readability and Select pointer
+focus without changing public signatures or token values.
+
 Version 0.2.8 adds TimePicker, DateTimeRangePicker, unified Calendar day/month/year views,
 HoverCard, ColorSwatch, ColorPicker, TreeSelect,
 DateTimePicker, DataList, DataListItem, CheckCard, RadioCard, DataTable, FileItem/FileList, FileMeta, UploadItem/UploadList and ImagePreview. Color values are opaque RGB hex; TreeSelect selects one item;

package/dist/foundations.css

@@ -892,7 +892,7 @@
 }
 
 /* Drawer keeps the modal runtime; only geometry and body containment differ. */
-.flood-root .flood-drawer { --flood-drawer-size: 26rem; --flood-drawer-x: 0%; --flood-drawer-y: 0%; position: fixed; inset: 0; margin: 0; box-sizing: border-box; display: grid; grid-template-areas: "header" "description" "body" "footer"; grid-template-rows: auto auto minmax(0, 1fr) auto; inline-size: min(var(--flood-drawer-size), 100vw); max-inline-size: 100vw; block-size: 100dvh; max-block-size: 100dvh; border-radius: 0; overflow: hidden; padding-block-start: max(var(--flood-sys-space-4), env(safe-area-inset-top)); padding-block-end: max(var(--flood-sys-space-6), env(safe-area-inset-bottom)); }
+.flood-root .flood-drawer { --flood-drawer-size: 26rem; --flood-drawer-x: 0%; --flood-drawer-y: 0%; position: fixed; inset: 0; margin: 0; box-sizing: border-box; display: grid; grid-template-areas: "header" "description" "body" "footer"; grid-template-rows: auto auto minmax(calc(min(8rem, 30dvh) + var(--flood-sys-space-4)), 1fr) auto; inline-size: min(var(--flood-drawer-size), 100vw); max-inline-size: 100vw; block-size: 100dvh; max-block-size: 100dvh; border-radius: 0; overflow: auto; container-type: inline-size; container-name: flood-drawer; padding-inline: min(var(--flood-sys-space-6), 5vi); padding-block-start: max(min(var(--flood-sys-space-4), 4dvh), env(safe-area-inset-top)); padding-block-end: max(min(var(--flood-sys-space-6), 4dvh), env(safe-area-inset-bottom)); }
 .flood-root .flood-drawer[data-size="sm"] { --flood-drawer-size: 20rem; }
 .flood-root .flood-drawer[data-size="lg"] { --flood-drawer-size: 34rem; }
 .flood-root .flood-drawer[data-side="end"] { inset-inline-start: auto; inset-inline-end: 0; border-start-start-radius: var(--flood-sys-radius-block); border-end-start-radius: var(--flood-sys-radius-block); --flood-drawer-x: 100%; }
@@ -906,7 +906,7 @@
 .flood-root .flood-drawer > .flood-overlay-description { grid-area: description; }
 .flood-root .flood-drawer__body { grid-area: body; min-block-size: 0; min-inline-size: 0; margin-block-start: var(--flood-sys-space-4); }
 .flood-root .flood-drawer .flood-overlay-body { margin: 0; }
-.flood-root .flood-drawer__footer { grid-area: footer; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--flood-sys-space-2); margin-block-start: var(--flood-sys-space-4); padding-block-start: var(--flood-sys-space-4); border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); }
+.flood-root .flood-drawer__footer { grid-area: footer; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--flood-sys-space-2); margin-block-start: min(var(--flood-sys-space-4), 2dvh); padding-block-start: min(var(--flood-sys-space-4), 2dvh); border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); }
 .flood-root .flood-drawer__footer > * { max-inline-size: 100%; }
 @keyframes flood-drawer-enter { from { transform: translate(var(--flood-drawer-x), var(--flood-drawer-y)); } to { transform: translate(0, 0); } }
 @media (prefers-reduced-motion: no-preference) { .flood-root .flood-drawer[open] { animation: flood-drawer-enter var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing); } }
@@ -915,6 +915,9 @@
 .flood-root .flood-drawer > .flood-overlay-header { position: relative; padding-inline-end: calc(max(var(--flood-sys-control-sm-height), var(--flood-sys-size-touch)) + var(--flood-sys-space-2)); align-items: flex-start; }
 .flood-root .flood-drawer > .flood-overlay-header > .flood-overlay-close { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
 .flood-root .flood-drawer > .flood-overlay-description { margin-block-start: var(--flood-sys-space-1); padding-inline-end: calc(max(var(--flood-sys-control-sm-height), var(--flood-sys-size-touch)) + var(--flood-sys-space-2)); }
+@container flood-drawer (max-width:20rem) {
+  .flood-root .flood-drawer > .flood-overlay-description { padding-inline-end: 0; }
+}
 
 /* Floating surfaces use a distinct material; modal surfaces retain their fill. */
 .flood-root :is(.flood-overlay-panel, .flood-select__menu) { background: var(--flood-sys-color-surface-floating); border-color: var(--flood-sys-color-border-floating); box-shadow: 0 var(--flood-sys-effect-floating-shadow-offset) var(--flood-sys-effect-floating-shadow-blur) var(--flood-sys-color-shadow-floating); }
@@ -1487,13 +1490,14 @@
 .flood-root .flood-data-table__footer nav { margin-inline-start:auto; max-inline-size:100%; }
 @media(forced-colors:active) { .flood-root .flood-data-table tr[data-selected] { outline:1px solid Highlight; } }
 
-.flood-root .flood-file-list { box-sizing:border-box; padding-inline:var(--flood-sys-space-4); border:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius:var(--flood-sys-radius-field); background:var(--flood-sys-color-surface-default); }
+.flood-root .flood-file-list { box-sizing:border-box; padding-inline:var(--flood-sys-space-4); border:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius:var(--flood-sys-radius-field); background:var(--flood-sys-color-surface-default); container-type:inline-size; container-name:flood-files; }
 .flood-root .flood-file-item__thumbnail { display:grid; place-items:center; flex:none; inline-size:var(--flood-sys-control-md-height); block-size:var(--flood-sys-control-md-height); border-radius:var(--flood-sys-radius-action); color:var(--flood-sys-color-content-subtle); overflow:hidden; background:var(--flood-sys-color-field-background); }
 .flood-root .flood-file-item__thumbnail img { display:block; inline-size:100%; block-size:100%; object-fit:cover; }
 .flood-root .flood-file-item__name { overflow-wrap:anywhere; }
 .flood-root .flood-file-item__heading { display:flex; align-items:center; flex-wrap:wrap; gap:var(--flood-sys-space-1) var(--flood-sys-space-2); min-inline-size:0; }
 .flood-root .flood-file-item__heading>.flood-file-item__name { min-inline-size:0; }
-.flood-root .flood-file-meta { flex:none; white-space:nowrap; color:var(--flood-sys-color-content-subtle); font-weight:400; }
+.flood-root .flood-file-meta { flex:0 1 auto; max-inline-size:100%; flex-wrap:wrap; white-space:normal; overflow-wrap:anywhere; color:var(--flood-sys-color-content-subtle); font-weight:400; }
+.flood-root .flood-file-meta>span { min-inline-size:0; }
 .flood-root .flood-file-item .flood-data-list-item__trailing { flex:none; max-inline-size:none; }
 .flood-root .flood-upload-item .flood-data-list-item__copy { align-self:center; }
 .flood-root .flood-upload-item__status-row { display:flex; align-items:center; gap:var(--flood-sys-space-2); min-inline-size:0; }
@@ -1509,6 +1513,14 @@
 .flood-root .flood-image-preview__caption { margin-block-start:var(--flood-sys-space-2); font-size:var(--flood-sys-type-compact-size); line-height:var(--flood-sys-type-compact-line-height); color:var(--flood-sys-color-content-subtle); }
 .flood-root .flood-image-preview__actions { display:flex; justify-content:flex-end; margin-block-start:var(--flood-sys-space-4); }
 @media(max-width:30rem){.flood-root .flood-file-list>.flood-file-item { flex-wrap:nowrap; }.flood-root .flood-file-item__thumbnail{inline-size:var(--flood-sys-control-sm-height);block-size:var(--flood-sys-control-sm-height);}}
+@container flood-files (max-width:16rem){
+ .flood-root .flood-file-list>.flood-file-item:not([hidden]) { display:grid; grid-template-columns:minmax(0,1fr); }
+ .flood-root .flood-file-item .flood-data-list-item__trailing { justify-content:flex-start; }
+ .flood-root .flood-file-item .flood-data-list-item__actions { flex-wrap:wrap; }
+ .flood-root .flood-upload-item__status-row { flex-wrap:wrap; }
+ .flood-root .flood-upload-item__status-row[data-progress]>.flood-status-indicator { flex:0 1 auto; min-inline-size:0; white-space:normal; }
+ .flood-root .flood-upload-item .flood-indicator { flex-basis:100%; }
+}
 
 .flood-root .flood-time-picker__panel { inline-size:min(var(--flood-time-picker-width,22rem),var(--flood-overlay-available-width,calc(100dvw - 1rem))); padding:var(--flood-sys-space-1); }
 .flood-root .flood-time-picker__scroll { max-block-size:min(15rem,calc(var(--flood-overlay-available-height,60dvh) - 1rem)); }

package/dist/select.js

@@ -269,11 +269,22 @@ export const SingleSelect = /* @__PURE__ */ forwardRef(function SingleSelect({ c
             commit(index); }, children: [_jsx("span", { children: choice.label }), _jsx("span", { className: "flood-select__selected", "aria-hidden": "true", children: choice.value === currentValue ? "✓" : "" })] }, `${index}-${choice.value}`);
     return _jsxs("span", { className: `flood-select flood-select--custom flood-control--${controlSize}`, dir: nativeProps.dir, lang: nativeProps.lang, hidden: nativeProps.hidden, children: [_jsx("button", { ...visibleAttributes, ref: trigger, id: triggerId, type: "button", role: "combobox", disabled: disabled, tabIndex: nativeProps.tabIndex, accessKey: nativeProps.accessKey, dir: nativeProps.dir, lang: nativeProps.lang, hidden: nativeProps.hidden, className: ["flood-input flood-select__control", `flood-control--${controlSize}`, className].filter(Boolean).join(" "), style: style, title: title, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": descriptions, "data-status": resolveFieldStatus(status, invalid || Boolean(validation), ariaInvalid), "aria-invalid": invalid || status === "error" || ariaInvalid || Boolean(validation) || undefined, "aria-required": required || undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": menuId, "aria-activedescendant": open && active >= 0 && choices[active] && !choices[active].hidden ? `${menuId}-${active}` : undefined, onFocus: (event) => { if (onFocus)
                     mirror(new FocusEvent("focusin", { bubbles: true, relatedTarget: event.relatedTarget })); }, onBlur: (event) => { if (onBlur)
-                    mirror(new FocusEvent("focusout", { bubbles: true, relatedTarget: event.relatedTarget })); }, onClick: () => { if (onClick && !mirror(new MouseEvent("click", { bubbles: true, cancelable: true })))
-                    return; if (open)
-                    setOpen(false);
-                else
-                    openMenu(); }, onKeyUp: (event) => { if (onKeyUp)
+                    mirror(new FocusEvent("focusout", { bubbles: true, relatedTarget: event.relatedTarget })); }, onMouseDown: (event) => {
+                    // Keep an already-focused combobox from blurring to the page before
+                    // Safari's click. Activation below owns focus; touch scrolling is native.
+                    if (event.button === 0)
+                        event.preventDefault();
+                }, onClick: (event) => {
+                    // Safari does not give buttons mouse focus. The combobox must own keys
+                    // before opening; focus first so a host click callback can still move it.
+                    event.currentTarget.focus({ preventScroll: true });
+                    if (onClick && !mirror(new MouseEvent("click", { bubbles: true, cancelable: true })))
+                        return;
+                    if (open)
+                        setOpen(false);
+                    else
+                        openMenu();
+                }, onKeyUp: (event) => { if (onKeyUp)
                     mirror(new KeyboardEvent("keyup", { key: event.key, bubbles: true, cancelable: true })); }, onKeyDown: (event) => {
                     if (onKeyDown && !mirror(new KeyboardEvent("keydown", { key: event.key, code: event.code, bubbles: true, cancelable: true, ctrlKey: event.ctrlKey, shiftKey: event.shiftKey, altKey: event.altKey, metaKey: event.metaKey }))) {
                         event.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flood-md/react",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "type": "module",
   "description": "Original Flood components for React and Next.js.",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "dependencies": {
-    "@flood-md/tokens": "0.2.8"
+    "@flood-md/tokens": "0.2.9"
   },
   "publishConfig": {
     "access": "public"