@yewdiel21/motion-kit 0.17.0 → 0.19.0

package/src/components/select/engine.ts

@@ -4,6 +4,7 @@ import { createScope } from '../../core/scope';
 import { inert, type Instance } from '../../core/types';
 import { press } from '../../motion/micro';
 import { createMenu } from '../menu/engine';
+import { createScrollArea } from '../scroll-area/engine';
 
 /*
  * Select: one choice from a list, opened as the kit's menu (it grows out of its
@@ -12,8 +13,9 @@ import { createMenu } from '../menu/engine';
  * step: forms post it and its `change` listeners keep working) or builds one from
  * `options`. The chosen label slides in out of a blur, the chevron turns, typing
  * a letter on the closed button picks the next option that starts with it, and
- * ↓ ↑ Enter Space open the menu. Changes made to the select's options (by the app)
- * show up on their own.
+ * ↓ ↑ Enter Space open the menu. A long list scrolls under the kit's scroll-area
+ * bar (no system bar on the menu's rounded edge) with its edges fading out.
+ * Changes made to the select's options (by the app) show up on their own.
  */
 
 export interface SelectOption {
@@ -121,6 +123,10 @@ export function createSelect(root: HTMLElement | null, options: SelectOptions =
   dialog.className = 'mk-dialog mk-menu mk-select-menu';
   dialog.dataset.mkSelectMenu = '';
   dialog.setAttribute('aria-label', options.label ?? 'Opciones');
+  // The items scroll inside a list, so the bar rides over the menu instead of cutting its rounded edge.
+  const list = document.createElement('div');
+  list.dataset.mkSelectList = '';
+  dialog.append(list);
   root.append(dialog);
   made.push(dialog);
   scope.attr(root, 'data-mk-ready', '');
@@ -161,7 +167,7 @@ export function createSelect(root: HTMLElement | null, options: SelectOptions =
         nodes.push(heading, ...[...child.children].filter((node): node is HTMLOptionElement => node instanceof HTMLOptionElement).map(item));
       } else if (child instanceof HTMLOptionElement) nodes.push(item(child));
     }
-    dialog.replaceChildren(...nodes);
+    list.replaceChildren(...nodes);
   };
 
   const placeholderText = () => options.placeholder ?? choices().find((option) => option.value === '')?.text ?? 'Elige…';
@@ -201,13 +207,19 @@ export function createSelect(root: HTMLElement | null, options: SelectOptions =
     root.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { value } }));
   };
 
+  // The menu's children must be its items: the bar stays out of assistive tech (the list scrolls with the keys).
+  const area = createScrollArea(dialog, { viewport: list, axis: 'y', focusable: false, decorative: true });
   const menu = createMenu(dialog, {
     triggers: false,
-    onOpen: markItems,
+    onOpen: () => {
+      markItems();
+      area.refresh();
+    },
     onClose: () => trigger.setAttribute('aria-expanded', 'false'),
     onSelect: (value) => choose(value, true),
   });
   scope.add(() => menu.destroy());
+  scope.add(() => area.destroy());
   // The menu's own selection stays inside: listeners on the select hear its change.
   scope.on(dialog, 'mk:select', (event) => event.stopPropagation());
 

package/src/components/select/select.css

@@ -72,20 +72,38 @@ mk-select {
   transform: rotate(180deg);
 }
 
-/* The menu: like the panels of the data table (surface-1, a hairline, 8 px items). */
+/* The menu: like the panels of the data table (surface-1, a hairline, 8 px items). The items scroll in a list with the
+   kit's scroll-area bar, kept clear of the rounded corners; the system bar never shows. */
 .mk-dialog.mk-select-menu {
   --mk-dialog-bg: var(--mk-surface-1);
   --mk-dialog-radius: 16px;
   --mk-dialog-shadow: 0 0 0 1px var(--mk-outline-soft), 0 16px 48px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
-  gap: 0.125rem;
+  --mk-scroll-inset: 10px;
   min-width: max(10rem, var(--mk-select-width, 0px));
   max-height: min(20rem, 60dvh);
-  padding: 0.375rem;
-  overflow-y: auto;
+  padding: 0;
+  overflow: hidden;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
 }
 
+.mk-dialog.mk-select-menu [data-mk-select-list] {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-height: 0;
+  padding: 0.375rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* A long list leaves the bar its own lane. */
+.mk-dialog.mk-select-menu[data-mk-overflow-y] [data-mk-select-list] {
+  padding-inline-end: 0.875rem;
+}
+
 .mk-dialog.mk-select-menu [data-mk-item] {
   flex: none;
   gap: 0.625rem;
@@ -133,3 +151,19 @@ mk-select {
     transition: none;
   }
 }
+
+/* Inside a kit field the trigger takes the field's height, radius, fill and type. */
+.mk-field :is(.mk-select, mk-select) {
+  display: flex;
+  width: 100%;
+}
+
+.mk-field [data-mk-select-trigger] {
+  height: auto;
+  min-height: 56px;
+  padding: 0 14px 0 16px;
+  border-radius: var(--mk-field-radius);
+  background: var(--mk-field-bg);
+  font-family: var(--md-sys-typescale-body-large-font);
+  font-size: var(--md-sys-typescale-body-large-size);
+}