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

package/src/css/floating.css

@@ -54,6 +54,313 @@
   flex-direction: column;
 }
 
+/* ------------------------------------------------------------------------------
+   FULLSCREEN OVERLAY — phone / touch presentation
+   Set by JS (setPresentation('fullscreen'), driven by the element's
+   environmentChanged hook) INSTEAD of anchoring the panel. The panel becomes a
+   fixed, full-viewport sheet with its own search + close header, so the input it
+   would otherwise float beneath is fully covered. `dvh` tracks the mobile URL bar.
+   ------------------------------------------------------------------------------ */
+/* Phone-view scaling. Every size is calc(N × --ms-rem), but a custom property bakes
+   its var(--ms-rem) at its DECLARATION site — the semantic vars are declared at :host
+   (10px), so overriding --ms-rem on the panel alone does NOT re-scale them. So we both
+   (a) set the panel's --ms-rem to --ms-fullscreen-rem, and (b) RE-DECLARE the shared
+   option/checkbox/group vars here in the panel scope, with the same formulas as
+   variables.css, so their var(--ms-rem) now resolves to the enlarged value. Overlay-
+   only --ms-fullscreen-* vars already derive from --ms-fullscreen-rem at :host, and
+   JS-driven row heights (virtual/fixed) are scaled to match in code. */
+.ms__dropdown--fullscreen,
+.ms__selected-popover--fullscreen {
+  --ms-rem: var(--ms-fullscreen-rem);
+  --ms-option-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
+  --ms-option-gap: calc(0.8 * var(--ms-rem));
+  --ms-option-title-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+  --ms-option-subtitle-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
+  --ms-option-icon-font-size: calc(var(--base-font-size-base, 1.6) * var(--ms-rem));
+  --ms-checkbox-size: calc(1.6 * var(--ms-rem));
+  --ms-group-label-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
+  --ms-group-label-padding: calc(0.4 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
+  /* Reclaim horizontal space for labels: tighter indent than the floating default
+     (--ms-tree-base-indent 0.75rem / --ms-tree-indent 1.25rem in tree.css). */
+  --ms-tree-base-indent: var(--ms-fullscreen-tree-base-indent);
+  --ms-tree-indent: var(--ms-fullscreen-tree-indent);
+}
+
+/* Bigger, dropdown-like selected-item rows in the phone overlay. The badge sizing
+   vars are declared at :host against the base --ms-rem (baked at 10px), so without
+   this they'd keep base-size text/padding inside the enlarged sheet and read as
+   cramped. Re-declaring them here — where --ms-rem is --ms-fullscreen-rem — scales
+   the pill height, text, padding and remove button up with the rest of the overlay.
+   The row height is also mirrored in JS (scaledBadgeHeight → --ms-badge-height-virtual)
+   for the virtual list, so both paths agree. */
+.ms__selected-popover--fullscreen {
+  --ms-badge-gap: calc(0.8 * var(--ms-rem));
+  --ms-badge-height: calc(4.2 * var(--ms-rem));
+  --ms-badge-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+  --ms-badge-text-padding: 0 calc(1.2 * var(--ms-rem));
+  --ms-badge-remove-width: calc(3.6 * var(--ms-rem));
+  --ms-badge-remove-icon-size: calc(1.2 * var(--ms-rem));
+  --ms-badge-remove-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+}
+
+/* Action buttons (Select All / Clear All / custom) scale up in the overlay too — their
+   sizing vars are baked at :host against the base --ms-rem, so re-declare them here
+   (where --ms-rem is --ms-fullscreen-rem) for a comfortable touch target. Dropdown-only:
+   the selected-items popover has no actions row. */
+.ms__dropdown--fullscreen {
+  --ms-actions-gap: calc(0.4 * var(--ms-rem));
+  --ms-actions-padding: calc(0.8 * var(--ms-rem));
+  --ms-action-btn-padding: calc(0.6 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
+  --ms-action-btn-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+}
+
+.ms__dropdown--fullscreen {
+  position: fixed;
+  /* top/left only — NOT `inset: 0`. `inset` also sets `bottom: 0`, and a fixed box with
+     both `top` and `bottom` constrained ignores its `height`. observeKeyboardInset()
+     shrinks the sheet above the soft keyboard by writing `height` (+ `top`), so a pinned
+     `bottom` would silently defeat it — the list and bottom actions would stay behind the
+     keyboard. With only top/left pinned, height governs and the keyboard reflow works. */
+  top: 0;
+  inset-inline-start: 0;
+  width: 100vw;
+  max-width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  border: none;
+  border-radius: 0;
+  background: var(--ms-fullscreen-bg);
+  color: var(--ms-fullscreen-text-color);
+  z-index: var(--ms-z-index-fullscreen);
+}
+
+.ms__dropdown--fullscreen .ms__dropdown-inner {
+  /* The panel is a full-height flex column; the list fills the space under the header. */
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  max-height: none;
+  /* The .ms__options child is the sole scroller in fullscreen (flex-fill + overflow-y
+     below). The base rule makes THIS element scroll too; two nested scrollers let the
+     last row get trapped in the outer one (partially visible, unreachable). Clip here so
+     scrolling happens in exactly one place. */
+  overflow: hidden;
+}
+
+/* The options list fills the sheet between the header and any actions row, scrolling
+   within the panel instead of at a fixed height — for BOTH the virtual list (its
+   inline maxHeight is dropped in fullscreen, see renderDropdownVirtual) and the plain
+   non-virtual list (small selections). Without flex-fill, a short non-virtual list
+   sits content-height at the top and a bottom actions row floats mid-sheet with empty
+   space beneath it. */
+.ms__dropdown--fullscreen .ms__options {
+  flex: 1 1 0;
+  min-height: 0;
+  height: auto;
+  max-height: none;
+  overflow-y: auto;
+  /* Breathing room so the last row always clears the sheet's (or keyboard's) bottom edge
+     instead of sitting flush against it, half-cut. */
+  padding-bottom: var(--ms-option-gap);
+}
+
+/* Pin the action row (Select All / Clear / custom) so it never shrinks and stays docked
+   at the bottom of the sheet. Once observeKeyboardInset() shrinks the panel above the
+   soft keyboard, only .ms__options scrolls — the actions stay reachable above the keys. */
+.ms__dropdown--fullscreen .ms__actions {
+  flex: 0 0 auto;
+}
+
+/* Shared fullscreen header bar — ONE treatment for both the dropdown (search
+   field) and the selected-items popover (title). Same padding, height, border, and
+   close button, so the two mobile overlays are visually identical. The popover's
+   header/close reuse their own class names but adopt these rules under
+   `--fullscreen`, and the selectors are listed together so there's one source of
+   truth (no drift between the two headers). */
+.ms__fullscreen-header,
+.ms__selected-popover--fullscreen .ms__selected-popover-header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  /* Wrap lets the navigate-mode match navigator (flex-basis 100%) drop onto its own
+     row under the search box while search + close stay on the first row. */
+  flex-wrap: wrap;
+  gap: var(--ms-fullscreen-header-gap);
+  min-height: var(--ms-fullscreen-header-min-height);
+  padding: var(--ms-fullscreen-header-padding);
+  background: var(--ms-fullscreen-header-bg);
+  border-bottom: var(--ms-fullscreen-header-border);
+}
+
+/* Match navigator (navigate searchMode only): result count on the lead edge, round
+   prev/next buttons on the trailing edge, forced onto its own full-width row. Hidden
+   inline (display:none) by JS until there's a search term. */
+.ms__fullscreen-nav {
+  flex: 0 0 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ms-fullscreen-nav-gap);
+  padding-top: var(--ms-fullscreen-nav-padding-top);
+}
+
+.ms__fullscreen-nav-count {
+  font-size: var(--ms-fullscreen-nav-count-font-size);
+  color: var(--ms-fullscreen-nav-count-color);
+}
+
+.ms__fullscreen-nav-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--ms-fullscreen-nav-gap);
+}
+
+.ms__fullscreen-nav-btn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ms-fullscreen-nav-btn-size);
+  height: var(--ms-fullscreen-nav-btn-size);
+  padding: 0;
+  color: var(--ms-fullscreen-nav-btn-color);
+  background: var(--ms-fullscreen-nav-btn-bg);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.ms__fullscreen-nav-btn:hover:not(:disabled) {
+  background: var(--ms-fullscreen-nav-btn-bg-hover);
+}
+
+.ms__fullscreen-nav-btn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.ms__fullscreen-nav-btn::before {
+  content: "";
+  display: block;
+  width: var(--ms-fullscreen-nav-btn-icon-size);
+  height: var(--ms-fullscreen-nav-btn-icon-size);
+  background-color: currentColor;
+  -webkit-mask: var(--ms-icon-chevron) center / contain no-repeat;
+          mask: var(--ms-icon-chevron) center / contain no-repeat;
+}
+
+/* Chevron points up by default; the "next" (down) button flips it vertically. */
+.ms__fullscreen-nav-btn--next::before {
+  transform: scaleY(-1);
+}
+
+/* The leading element (search field or title) fills the bar, pushing the close
+   button to the trailing edge in both overlays. */
+.ms__fullscreen-header > .ms__fullscreen-search,
+.ms__selected-popover--fullscreen .ms__selected-popover-header > span {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Popover title typography in fullscreen (matches a header title, not the small
+   floating-popover label). */
+.ms__selected-popover--fullscreen .ms__selected-popover-header {
+  font-size: var(--ms-fullscreen-title-font-size);
+  font-weight: var(--ms-fullscreen-title-font-weight);
+  color: var(--ms-fullscreen-text-color);
+}
+
+.ms__fullscreen-search {
+  font-family: inherit;
+  font-size: var(--ms-fullscreen-search-font-size);
+  color: inherit;
+  background: transparent;
+  border: var(--ms-fullscreen-search-border);
+  border-radius: var(--ms-fullscreen-search-border-radius);
+  padding: var(--ms-fullscreen-search-padding);
+}
+
+.ms__fullscreen-search:focus {
+  outline: none;
+  border: var(--ms-input-border-focus);
+}
+
+/* Shared close button — identical big, round, mask-icon ✕ in both overlays. */
+.ms__fullscreen-close,
+.ms__selected-popover--fullscreen .ms__selected-popover-close {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ms-fullscreen-close-size);
+  height: var(--ms-fullscreen-close-size);
+  padding: 0;
+  color: var(--ms-fullscreen-close-color);
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.ms__fullscreen-close:hover,
+.ms__selected-popover--fullscreen .ms__selected-popover-close:hover {
+  background: var(--ms-fullscreen-close-bg-hover);
+  color: var(--ms-fullscreen-close-color);
+}
+
+.ms__fullscreen-close::before,
+.ms__selected-popover--fullscreen .ms__selected-popover-close::before {
+  content: "";
+  display: block;
+  width: var(--ms-fullscreen-close-icon-size);
+  height: var(--ms-fullscreen-close-icon-size);
+  background-color: currentColor;
+  -webkit-mask: var(--ms-icon-remove) center / contain no-repeat;
+          mask: var(--ms-icon-remove) center / contain no-repeat;
+}
+
+/* Truncated-label reveal — a circled "i" at the trailing edge of a fullscreen row
+   whose label is clipped. Fullscreen-only markup (the renderer emits it only for the
+   overlay), and CSS keeps it hidden until JS tags the row .ms__option--truncated
+   (measured per render). Tapping it reveals the full label — the touch-friendly
+   substitute for the hover option tooltip, which never fires on touch. */
+.ms__dropdown--fullscreen .ms__option-info {
+  flex: 0 0 auto;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--ms-fullscreen-info-size);
+  height: var(--ms-fullscreen-info-size);
+  margin-inline-start: var(--ms-option-gap);
+  padding: 0;
+  color: var(--ms-fullscreen-info-color);
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.ms__dropdown--fullscreen .ms__option--truncated .ms__option-info {
+  display: inline-flex;
+}
+
+@media (hover: hover) {
+  .ms__dropdown--fullscreen .ms__option-info:hover {
+    background: var(--ms-fullscreen-info-bg-hover);
+  }
+}
+
+.ms__dropdown--fullscreen .ms__option-info::before {
+  content: "";
+  display: block;
+  width: var(--ms-fullscreen-info-icon-size);
+  height: var(--ms-fullscreen-info-icon-size);
+  background-color: currentColor;
+  -webkit-mask: var(--ms-icon-info) center / contain no-repeat;
+          mask: var(--ms-icon-info) center / contain no-repeat;
+}
+
 /* Inner scrolling container — clips scrollbar to rounded corners */
 .ms__dropdown-inner {
   flex: 1;
@@ -150,6 +457,64 @@
   visibility: visible;
 }
 
+/* Truncated-label reveal fired from inside the fullscreen overlay — lift it above
+   the overlay (10001), which the plain option tooltip (10000) would sit behind. */
+.ms__option-tooltip--fullscreen {
+  z-index: var(--ms-z-index-fullscreen-tooltip);
+}
+
+/* ==============================================================================
+   TRANSIENT MESSAGE / TOAST (showMessage)
+   ==============================================================================
+   Rendered above the panel so a veto reason (or any consumer feedback) is visible
+   in BOTH presentations: anchored under the control when floating (position set by
+   floating-ui), pinned to the bottom-centre of the viewport — above the sheet — when
+   fullscreen. One shows at a time; tap to dismiss. */
+.ms__message {
+  position: fixed;
+  z-index: var(--ms-message-z-index);
+  box-sizing: border-box;
+  max-width: var(--ms-message-max-width);
+  padding: var(--ms-message-padding);
+  font-family: inherit;
+  font-size: var(--ms-message-font-size);
+  font-weight: var(--ms-message-font-weight);
+  line-height: var(--ms-line-height-normal);
+  color: var(--ms-message-color);
+  background: var(--ms-message-bg);
+  border: var(--ms-message-border);
+  border-radius: var(--ms-message-border-radius);
+  box-shadow: var(--ms-message-shadow);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--ms-transition-normal) ease;
+  /* The one tap-highlight declaration NOT covered by :host (base.css): the message can
+     be reparented to document.body, outside the shadow subtree, so it sets its own. */
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ms__message--visible {
+  opacity: 1;
+}
+
+.ms__message--info    { background: var(--ms-message-info-bg);    color: var(--ms-message-info-color); }
+.ms__message--warning { background: var(--ms-message-warning-bg); color: var(--ms-message-warning-color); }
+.ms__message--error   { background: var(--ms-message-error-bg);   color: var(--ms-message-error-color); }
+.ms__message--success { background: var(--ms-message-success-bg); color: var(--ms-message-success-color); }
+
+/* Fullscreen: bottom-centre of the viewport, above the overlay. Its sizing vars are
+   --ms-rem-based (baked at :host), so rescale the key ones here against
+   --ms-fullscreen-rem to match the enlarged phone view. */
+.ms__message--fullscreen {
+  left: 50%;
+  right: auto;
+  bottom: var(--ms-message-fullscreen-offset);
+  transform: translateX(-50%);
+  max-width: min(var(--ms-message-max-width), calc(100vw - 4 * var(--ms-fullscreen-rem)));
+  padding: calc(1.0 * var(--ms-fullscreen-rem)) calc(1.4 * var(--ms-fullscreen-rem));
+  font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-fullscreen-rem));
+}
+
 /* ==============================================================================
    SELECTED-ITEMS POPOVER
    ==============================================================================
@@ -182,6 +547,37 @@
   max-height: none;
 }
 
+/* ------------------------------------------------------------------------------
+   FULLSCREEN OVERLAY — phone / touch presentation (mirrors the dropdown overlay).
+   Set by JS (setPresentation('fullscreen')) instead of anchoring. The popover
+   already renders its own header + close button, so it just becomes a fixed,
+   full-viewport sheet. Declared AFTER --virtual so its `display:flex` wins the
+   large-selection (virtual) case; the virtual body flexes to fill (its inline
+   height is dropped in fullscreen — see renderSelectedPopoverVirtual).
+   ------------------------------------------------------------------------------ */
+.ms__selected-popover--fullscreen {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  max-width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  border: none;
+  border-radius: 0;
+  overflow: hidden;
+  background: var(--ms-fullscreen-bg);
+  color: var(--ms-fullscreen-text-color);
+  z-index: var(--ms-z-index-fullscreen);
+}
+
+.ms__selected-popover--fullscreen .ms__selected-popover-body {
+  flex: 1 1 0;
+  min-height: 0;
+  max-height: none;
+}
+
 .ms__selected-popover-header {
   display: flex;
   align-items: center;
@@ -261,6 +657,10 @@
   width: 100%;
   min-height: fit-content; /* Allow badges to expand based on content */
   line-height: var(--ms-line-height-relaxed); /* Override line-height: 1 to allow multi-line content */
+  /* The body is a flex column; without this, badges shrink (flex-shrink defaults to 1)
+     toward their min-content height once the list overflows — so rows visibly get
+     shorter as you select more. Pin the height and let the body scroll instead. */
+  flex-shrink: 0;
 }
 
 .ms__selected-popover-body .ms__badge-text {

package/src/css/options.css

@@ -98,11 +98,19 @@
      not a text-selection one — stop the browser from highlighting the label. */
   user-select: none;
   -webkit-user-select: none;
+  /* Tap-highlight flash is suppressed once for the whole component on :host (base.css) —
+     an inherited property, so it reaches this row without a per-element declaration. */
 }
 
-.ms__option:hover {
-  background: var(--ms-option-bg-hover);
-  color: var(--ms-option-color-hover, inherit);
+/* Hover states are gated to real pointing devices. On touch, `:hover` "sticks"
+   after a tap until the next tap elsewhere, so a tapped row (or a tap on its info
+   affordance) would stay highlighted as if selected. `@media (hover: hover)` keeps
+   hover on mouse/trackpad and drops it on touch (phones, the fullscreen overlay). */
+@media (hover: hover) {
+  .ms__option:hover {
+    background: var(--ms-option-bg-hover);
+    color: var(--ms-option-color-hover, inherit);
+  }
 }
 
 .ms__option--focused {
@@ -115,15 +123,17 @@
 .ms__option--matched {
   background: var(--ms-option-bg-matched);
   color: var(--ms-option-color-matched, inherit);
-  border-left: var(--ms-option-border-matched);
+  border-inline-start: var(--ms-option-border-matched); /* leading-edge accent bar; flips in RTL */
 }
 
 .ms__option--selected {
   background: var(--ms-option-bg-selected);
 }
 
-.ms__option--selected:hover {
-  background: var(--ms-option-bg-selected-hover, var(--ms-option-bg-selected));
+@media (hover: hover) {
+  .ms__option--selected:hover {
+    background: var(--ms-option-bg-selected-hover, var(--ms-option-bg-selected));
+  }
 }
 
 .ms__option--disabled {
@@ -137,9 +147,11 @@
 }
 
 /* Focused + Hover */
-.ms__option--focused:hover {
-  background: var(--ms-option-bg-focused-hover);
-  color: var(--ms-option-color-focused-hover, var(--ms-option-color-focused, var(--ms-option-text-color)));
+@media (hover: hover) {
+  .ms__option--focused:hover {
+    background: var(--ms-option-bg-focused-hover);
+    color: var(--ms-option-color-focused-hover, var(--ms-option-color-focused, var(--ms-option-text-color)));
+  }
 }
 
 /* Matched + Hover */
@@ -158,7 +170,7 @@
 /* Selected + Matched */
 .ms__option--selected.ms__option--matched {
   background: var(--ms-option-bg-selected-matched);
-  border-left: var(--ms-option-border-matched);
+  border-inline-start: var(--ms-option-border-matched); /* leading-edge accent bar; flips in RTL */
 }
 
 /* Disabled + Selected */
@@ -195,9 +207,9 @@
   flex-shrink: 0;
   position: relative;
   margin-top: var(--ms-checkbox-margin-top);
-  margin-right: var(--ms-checkbox-margin-right);
+  margin-inline-end: var(--ms-checkbox-margin-right);
   margin-bottom: var(--ms-checkbox-margin-bottom);
-  margin-left: var(--ms-checkbox-margin-left);
+  margin-inline-start: var(--ms-checkbox-margin-left);
   width: var(--ms-checkbox-size);
   height: var(--ms-checkbox-size);
   transform: scale(var(--ms-checkbox-scale));
@@ -346,16 +358,20 @@
 }
 
 /* Title color states (for solid background themes) */
-.ms__option:hover .ms__option-title {
-  color: var(--ms-option-title-color-hover, var(--ms-option-title-color));
+@media (hover: hover) {
+  .ms__option:hover .ms__option-title {
+    color: var(--ms-option-title-color-hover, var(--ms-option-title-color));
+  }
 }
 
 .ms__option--selected .ms__option-title {
   color: var(--ms-option-title-color-selected, var(--ms-option-title-color));
 }
 
-.ms__option--selected:hover .ms__option-title {
-  color: var(--ms-option-title-color-selected-hover, var(--ms-option-title-color-selected, var(--ms-option-title-color)));
+@media (hover: hover) {
+  .ms__option--selected:hover .ms__option-title {
+    color: var(--ms-option-title-color-selected-hover, var(--ms-option-title-color-selected, var(--ms-option-title-color)));
+  }
 }
 
 /* Highlight matched text */
@@ -374,16 +390,20 @@
 }
 
 /* Subtitle color states (for solid background themes) */
-.ms__option:hover .ms__option-subtitle {
-  color: var(--ms-option-subtitle-color-hover, var(--ms-option-subtitle-color));
+@media (hover: hover) {
+  .ms__option:hover .ms__option-subtitle {
+    color: var(--ms-option-subtitle-color-hover, var(--ms-option-subtitle-color));
+  }
 }
 
 .ms__option--selected .ms__option-subtitle {
   color: var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color));
 }
 
-.ms__option--selected:hover .ms__option-subtitle {
-  color: var(--ms-option-subtitle-color-selected-hover, var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color)));
+@media (hover: hover) {
+  .ms__option--selected:hover .ms__option-subtitle {
+    color: var(--ms-option-subtitle-color-selected-hover, var(--ms-option-subtitle-color-selected, var(--ms-option-subtitle-color)));
+  }
 }
 
 /* ==============================================================================