@keenmate/web-multiselect 2.0.0-rc03 → 2.0.0-rc05

package/README.md

@@ -21,75 +21,35 @@ Reads `--base-*` variables from the page if [`@keenmate/theme-designer`](https:/
 - Custom rendering callbacks for options, badges, and group headers.
 - Form integration via standard hidden inputs (FormData-compatible).
 
-## What's New in v2.0.0-rc03
-
-**Full-screen dropdown on phones (`mobile-presentation`).** On a phone, a dropdown
-that floats next to the input fights the on-screen keyboard. `<web-multiselect>`
-now detects phones and, by default (`mobile-presentation="auto"`), presents the
-open dropdown as a **full-screen overlay** with its own search field and close (✕)
-button — while desktop and tablets keep the familiar floating panel, unchanged. A
-"phone" is a touch-primary device whose **shorter** viewport side is `< 600px`
-(the Material `sw600dp` line), so a phone in **landscape** still gets the overlay
-and tablets never do. The **selected-items popover** goes full-screen on phones
-too, with a matching header. The phone view is scaled up ~1.2× for comfortable
-touch targets via the `--ms-fullscreen-rem` knob (default `12px` vs the base
-`--ms-rem: 10px`) — one value grows rows, text, checkboxes, header and search
-together. Override the mode per instance with `mobile-presentation="floating"`
-(anchored panel everywhere) or `"fullscreen"` (force the overlay on any device —
-handy for previews). Theme it with the new `--ms-fullscreen-*` CSS variables.
-
-```html
-<!-- auto (default): full-screen on phones, floating on desktop/tablet -->
-<web-multiselect mobile-presentation="auto"></web-multiselect>
-
-<!-- never go full-screen -->
-<web-multiselect mobile-presentation="floating"></web-multiselect>
-
-<!-- always full-screen (preview the mobile view on desktop) -->
-<web-multiselect mobile-presentation="fullscreen"></web-multiselect>
-```
-
-This is powered by device/viewport/orientation detection in
-[`@keenmate/web-components-core`](https://www.npmjs.com/package/@keenmate/web-components-core)
-(via `BlissElement`'s `environmentChanged` hook), which this release pins at
-**1.0.0-rc06** — rc04 also **dropped `loglevel`** as a transitive runtime
-dependency. The floating dropdown additionally gains a viewport-width safety cap so
-a wide panel can't overflow the screen edge.
-
-**Right-to-left, done properly — including runtime switching.** Give the element (or
-any ancestor) `dir="rtl"` and the whole component mirrors: the toggle and in-input
-counter move to the left, checkboxes sit on the right of each row, badges reverse,
-and the full-screen overlay mirrors too (search/close swap sides, the match
-navigator flips). RTL is now built on CSS **logical properties** driven by the
-inherited direction, which fixes cases that silently never worked before — the
-dropdown, hint, and selected-popover live in the shadow root, so the old `.ms--rtl`
-override rules never reached them. And flipping `dir` at runtime — an app-wide
-language switch — re-mirrors the live picker without a rebuild (via core rc06's new
-`directionChanged` hook).
-
-**Friendlier phone browsing.** The full-screen sheet opens with the **keyboard
-closed** by default, so you can scan long lists and reach the bottom action buttons
-before typing (opt into immediate type-to-filter with `fullscreen-autofocus="true"`).
-The phone **Back gesture** now closes the sheet instead of navigating the page away.
-In `search-mode="navigate"`, an on-screen **match navigator** (an `N of M` count plus
-prev/next buttons) stands in for the desktop `Ctrl`+`Arrow` match-stepping that touch
-can't do — and the focused match now stays visible above the keyboard instead of
-scrolling behind it. Tapping an option no longer pops the keyboard mid-browse.
-
-See `CHANGELOG.md` for the full list.
-
-## What's New in v2.0.0-rc02
-
-**Form association restored for host frameworks (`el.form`).** Selecting inside a
-`<web-multiselect>` that lives in a `<form>` again delivers changes to frameworks
-that resolve the parent form via `event.target.form` — most notably Phoenix
-LiveView's `phx-change` delegation, which silently dropped changes in rc01.
-`<web-multiselect>` is a form-associated custom element, so it now exposes a real
-`el.form` / `event.target.form` like a native control. (rc01 had hardened its
-internal `ElementInternals` handle to a true `#private` field, which killed the
-`.form` that host-framework wrappers read.) The fix lives upstream in
-[`@keenmate/web-components-core`](https://www.npmjs.com/package/@keenmate/web-components-core)
-1.0.0-rc02 (the `el.form` getter), which this release pins.
+## What's New in v2.0.0-rc05
+
+- **Full-screen overlays — content no longer clipped under landscape system bars** — Rotating a phone to landscape with the full-screen dropdown (or the selected-items popover) open used to push the search field and option rows *under* the Android navigation bar and camera cutout — the field looked "too wide for the screen" and each row's leading edge was hidden. Cause: the sheets are `width: 100vw` (the full physical width) with no safe-area handling. They now set `box-sizing: border-box` and inset their content box by `env(safe-area-inset-{top,right,bottom,left})` on all four edges — the background stays edge-to-edge (full-bleed, no corner gaps) while the header · list · actions column is pulled into the visible region, and the fullscreen toast lifts above the bottom safe area. `env()` resolves to `0` unless the host page opts into edge-to-edge, so this is a no-op on non-cutout / letterboxed pages — a fix where needed, never a regression. Consumer note: for the insets to engage the host page must set `<meta name="viewport" content="… viewport-fit=cover">` (the mobile examples/tests now do).
+
+## What's New in v2.0.0-rc04
+
+**Phone search — one-tap clear and a keyboard that gets out of the way** — The
+full-screen search sheet gained the two things it was missing on touch. A clear button
+now sits at the trailing edge of the search field (a distinct Lucide `search-x` glyph,
+so it doesn't read as a second close ✕) to wipe the term in one tap and restore the full
+list. And the soft keyboard, which used to stay pinned open once you focused the field,
+now tucks away on the three natural "done typing" gestures — scrolling the list, tapping
+an option, or pressing Enter/Search — while never dismissing itself mid-type from a
+programmatic scroll-to-match.
+
+**A close button you can make your own** — The full-screen close ✕ is now a themeable
+chip: the new `--ms-fullscreen-close-bg`, `--ms-fullscreen-close-border`, and
+`--ms-fullscreen-close-border-radius` variables turn the bare glyph into a bordered
+button (à la a command-palette close) while the defaults keep it a plain round ✕. Its
+tap target was also fixed — the previously-dead padding around the button in the sheet's
+top-trailing corner (the natural place to reach) now dismisses the sheet, without ever
+stealing taps from the first option row or the search field.
+
+**Right presentation on every device, via core rc07** — This release pins
+`@keenmate/web-components-core` at `1.0.0-rc07` and adopts its reworked
+`resolvePresentation` / `classifyDevice` API. Behavior is unchanged — full-screen on
+phones, floating on tablet and desktop — with one refinement from the new capability
+gate: a narrowed desktop window (fine pointer, hover) now stays `desktop` and keeps its
+floating dropdown at any width, instead of ever flipping to the full-screen sheet.
 
 See `CHANGELOG.md` for the full list.
 

package/custom-elements.json

@@ -487,6 +487,15 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "fullscreenSearchClear",
+              "type": {
+                "text": "HTMLButtonElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "fullscreenNav",
@@ -2132,6 +2141,28 @@
               },
               "description": "Sync the fullscreen match navigator (navigate mode only) with the current search\r\nstate: hide it until there's a term, then show \"N of M\" while a match is focused\r\n(or \"M matches\" / \"No matches\"), and disable the prev/next buttons when there's\r\nnothing to step through. No-op when the navigator isn't built (floating panel,\r\nfilter mode, or search disabled)."
             },
+            {
+              "kind": "method",
+              "name": "updateFullscreenSearchClear",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Show the fullscreen search's inline clear (✕) only while the field has text.\r\nNo-op when the button isn't built (floating panel, readonly/hidden search)."
+            },
+            {
+              "kind": "method",
+              "name": "clearFullscreenSearch",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Clear the fullscreen search term via the same path a keystroke takes, then\r\nrefocus the field so the user can keep typing. Touch has no keyboard Escape,\r\nso this button is the on-screen way to reset a search."
+            },
             {
               "kind": "method",
               "name": "positionHint",

package/dist/index.d.ts

@@ -777,6 +777,7 @@ export declare class WebMultiSelect<T = any> {
     private presentationMode;
     private fullscreenHeader;
     private fullscreenSearchInput;
+    private fullscreenSearchClear;
     private fullscreenNav;
     private fullscreenNavCount;
     private fullscreenNavPrev;
@@ -1175,6 +1176,17 @@ export declare class WebMultiSelect<T = any> {
      * filter mode, or search disabled).
      */
     private updateFullscreenNav;
+    /**
+     * Show the fullscreen search's inline clear (✕) only while the field has text.
+     * No-op when the button isn't built (floating panel, readonly/hidden search).
+     */
+    private updateFullscreenSearchClear;
+    /**
+     * Clear the fullscreen search term via the same path a keystroke takes, then
+     * refocus the field so the user can keep typing. Touch has no keyboard Escape,
+     * so this button is the on-screen way to reset a search.
+     */
+    private clearFullscreenSearch;
     private positionHint;
     private parseInitialSelection;
     /**