@mdbase-dev/ui 0.1.0-beta.126 → 0.1.0-beta.147

package/css/controls.css

@@ -598,6 +598,31 @@ textarea.mdbase-field {
   outline-offset: 2px;
 }
 
+/* Checkbox row: the label is the 44px target; the box keeps its size. */
+.mdbase-check {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 44px;
+  cursor: pointer;
+}
+
+.mdbase-check:has(.mdbase-checkbox:disabled) {
+  cursor: not-allowed;
+}
+
+.mdbase-check-group {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.mdbase-check-group > legend {
+  margin-bottom: var(--space-2);
+  padding: 0;
+}
+
 @media (pointer: coarse) {
   /* Expand the hit target, not the visual control or its containing row. */
   .mdbase-checkbox::before,
@@ -677,7 +702,7 @@ textarea.mdbase-field {
 }
 
 @keyframes mdbase-popover-in {
-  from { opacity: 0; transform: translateY(-3px); }
+  from { transform: translateY(-3px); }
 }
 
 /* Save notices: small, quiet, and gone once there is nothing to act on. */

package/css/screens.css

@@ -17,6 +17,12 @@
   text-align: center;
 }
 
+.mdbase-opening .wordmark-mark > .mdbase-mark {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .mdbase-opening-message p,
 .mdbase-opening-message small {
   display: block;
@@ -38,18 +44,54 @@
   color: var(--color-danger);
 }
 
+/* The launch screen: the mark the flock flies onto, then the quiet line. */
+.mdbase-opening-launch-mark {
+  display: block;
+  width: 42px;
+  height: 42px;
+  margin-bottom: var(--space-2);
+}
+
+.mdbase-opening-launch-mark .mdbase-mark {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* While the flock flies, the canvas draws the mark; the real one takes over when it lands. */
+.mdbase-opening-launch[data-entrance="flying"] .mdbase-opening-launch-mark {
+  visibility: hidden;
+}
+
+.mdbase-opening-launch-text {
+  transition: opacity var(--motion-slow) var(--ease-out);
+}
+
+.mdbase-opening-launch[data-entrance="flying"] .mdbase-opening-launch-text {
+  opacity: 0;
+}
+
+.mdbase-opening-flock {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+}
+
 /* Before a collection is open. */
 .mdbase-connect-screen {
   min-height: 100%;
   display: grid;
   place-items: center;
-  padding: 32px;
+  /* The extra bottom padding lifts short content slightly above centre; tall
+   * content just grows downward, so the top never clips (no negative margin). */
+  padding: 32px 32px calc(32px + 8vh);
   background: var(--color-canvas);
 }
 
 .mdbase-connect-screen section {
   width: min(100%, 520px);
-  margin-top: -4vh;
 }
 
 .mdbase-connect-screen h1 {

package/dist/AppSwitcher.js

@@ -1,4 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { i18n as _i18n } from "@lingui/core";
+import { useLocaleRevision } from "./i18n.js";
 import { useId, useRef, useState } from "react";
 import { mdbaseAppHref, withAppUrls } from "./apps.js";
 import { MdbaseAppMark, Wordmark } from "./brand.js";
@@ -13,39 +15,191 @@ let entrancePlayed = false;
  * Its mark shows the page's activity (see `mark-activity`): progress, then a held loop,
  * then `motion`. Without a `motion` it plays `keys-first` the first time it appears.
  */
-export function AppSwitcher({ current, urls = {}, motion }) {
-    const menuId = useId();
-    const triggerRef = useRef(null);
-    const [open, setOpen] = useState(false);
-    const [entrance] = useState(() => {
-        if (motion || entrancePlayed || typeof window === "undefined")
-            return undefined;
-        entrancePlayed = true;
-        return "keys-first";
-    });
-    const activity = useMdbaseMarkActivity();
-    const close = (refocus) => {
-        setOpen(false);
-        if (refocus)
-            triggerRef.current?.focus();
-    };
-    return _jsxs(_Fragment, { children: [_jsxs("button", { ref: triggerRef, type: "button", className: "mdbase-app-switcher", "aria-label": `mdbase ${current}: open this collection in another app`, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? menuId : undefined, title: "Open in another mdbase app", onClick: () => (open ? close(false) : setOpen(true)), onKeyDown: (event) => {
-                    if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
-                        event.preventDefault();
-                        setOpen(true);
-                    }
-                }, children: [_jsx(Wordmark, { app: current, motion: activity.busy ?? motion ?? entrance, signal: activity.signal, progress: activity.progress }), _jsx("svg", { className: "mdbase-app-switcher-chevron", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "m7 10 5 5 5-5" }) })] }), open ? _jsx(AppMenu, { id: menuId, apps: withAppUrls(urls), current: current, triggerRef: triggerRef, onClose: close }) : null] });
+export function AppSwitcher({
+  current,
+  urls = {},
+  motion
+}) {
+  useLocaleRevision();
+  const menuId = useId();
+  const triggerRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [entrance] = useState(() => {
+    if (motion || entrancePlayed || typeof window === "undefined") return undefined;
+    entrancePlayed = true;
+    return "keys-first";
+  });
+  const activity = useMdbaseMarkActivity();
+  const close = refocus => {
+    setOpen(false);
+    if (refocus) triggerRef.current?.focus();
+  };
+  return _jsxs(_Fragment, {
+    children: [_jsxs("button", {
+      ref: triggerRef,
+      type: "button",
+      className: "mdbase-app-switcher",
+      "aria-label": _i18n._(
+      /** i18n */
+      {
+        id: "54P3Y1",
+        message: "mdbase {current}: open this collection in another app",
+        values: {
+          current: current
+        }
+      }),
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": open ? menuId : undefined,
+      title: _i18n._(
+      /** i18n */
+      {
+        id: "38fGkV",
+        message: "Open in another mdbase app"
+      }),
+      onClick: () => open ? close(false) : setOpen(true),
+      onKeyDown: event => {
+        if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+          event.preventDefault();
+          setOpen(true);
+        }
+      },
+      children: [_jsx(Wordmark, {
+        app: current,
+        motion: activity.busy ?? motion ?? entrance,
+        signal: activity.signal,
+        progress: activity.progress
+      }), _jsx("svg", {
+        className: "mdbase-app-switcher-chevron",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: _jsx("path", {
+          d: "m7 10 5 5 5-5"
+        })
+      })]
+    }), open ? _jsx(AppMenu, {
+      id: menuId,
+      apps: withAppUrls(urls),
+      current: current,
+      triggerRef: triggerRef,
+      onClose: close
+    }) : null]
+  });
 }
-function AppMenu({ id, apps, current, triggerRef, onClose }) {
-    const menuRef = useRef(null);
-    useMenuPopover(menuRef, triggerRef, onClose, { width: 320, focus: 'a[role="menuitem"]' });
-    const heading = new URL(location.href).searchParams.has("collection") ? "Open this collection in" : "mdbase apps";
-    return _jsxs("div", { ref: menuRef, id: id, className: "mdbase-menu", popover: "manual", role: "menu", "aria-label": heading, tabIndex: -1, onKeyDown: (event) => moveMenuFocus(event, menuRef.current), children: [_jsx("div", { className: "mdbase-menu-heading", role: "presentation", children: heading }), _jsx("div", { className: "mdbase-menu-list", children: apps.map((app) => _jsx(AppItem, { app: app, current: app.id === current, onOpen: () => onClose(false) }, app.id)) }), _jsx("p", { className: "mdbase-menu-note", children: "Opens in a new tab" })] });
+function AppMenu({
+  id,
+  apps,
+  current,
+  triggerRef,
+  onClose
+}) {
+  useLocaleRevision();
+  const menuRef = useRef(null);
+  useMenuPopover(menuRef, triggerRef, onClose, {
+    width: 320,
+    focus: 'a[role="menuitem"]'
+  });
+  const heading = new URL(location.href).searchParams.has("collection") ? _i18n._(
+  /** i18n */
+  {
+    id: "xxbaLR",
+    message: "Open this collection in"
+  }) : _i18n._(
+  /** i18n */
+  {
+    id: "vDwCOr",
+    message: "mdbase apps"
+  });
+  return _jsxs("div", {
+    ref: menuRef,
+    id: id,
+    className: "mdbase-menu",
+    popover: "manual",
+    role: "menu",
+    "aria-label": heading,
+    tabIndex: -1,
+    onKeyDown: event => moveMenuFocus(event, menuRef.current),
+    children: [_jsx("div", {
+      className: "mdbase-menu-heading",
+      role: "presentation",
+      children: heading
+    }), _jsx("div", {
+      className: "mdbase-menu-list",
+      children: apps.map(app => _jsx(AppItem, {
+        app: app,
+        current: app.id === current,
+        onOpen: () => onClose(false)
+      }, app.id))
+    }), _jsx("p", {
+      className: "mdbase-menu-note",
+      children: _i18n._(
+      /** i18n */
+      {
+        id: "XDzAnp",
+        message: "Opens in a new tab"
+      })
+    })]
+  });
 }
-function AppItem({ app, current, onOpen }) {
-    const copy = _jsxs(_Fragment, { children: [_jsx(MdbaseAppMark, { app: app.id, className: "mdbase-app-menu-mark" }), _jsxs("span", { className: "mdbase-menu-copy", children: [_jsx("strong", { children: app.name }), _jsx("small", { children: app.description })] })] });
-    if (current) {
-        return _jsxs("div", { className: "mdbase-menu-item is-current", role: "menuitem", "aria-current": "page", "aria-disabled": "true", tabIndex: -1, children: [copy, _jsx("span", { className: "mdbase-app-menu-current", children: "Current" })] });
-    }
-    return _jsxs("a", { className: "mdbase-menu-item", role: "menuitem", href: mdbaseAppHref(app.url, location.href), target: "_blank", rel: "noopener", onClick: onOpen, children: [copy, _jsx("svg", { className: "mdbase-app-menu-external", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M10 5.5H5.5v13h13V14M13.5 5.5h5v5M18.5 5.5 11 13" }) }), _jsx("span", { className: "mdbase-visually-hidden", children: " (opens in a new tab)" })] });
+function AppItem({
+  app,
+  current,
+  onOpen
+}) {
+  useLocaleRevision();
+  const copy = _jsxs(_Fragment, {
+    children: [_jsx(MdbaseAppMark, {
+      app: app.id,
+      className: "mdbase-app-menu-mark"
+    }), _jsxs("span", {
+      className: "mdbase-menu-copy",
+      children: [_jsx("strong", {
+        children: app.name
+      }), _jsx("small", {
+        children: app.description
+      })]
+    })]
+  });
+  if (current) {
+    return _jsxs("div", {
+      className: "mdbase-menu-item is-current",
+      role: "menuitem",
+      "aria-current": "page",
+      "aria-disabled": "true",
+      tabIndex: -1,
+      children: [copy, _jsx("span", {
+        className: "mdbase-app-menu-current",
+        children: _i18n._(
+        /** i18n */
+        {
+          id: "Hp1l6f",
+          message: "Current"
+        })
+      })]
+    });
+  }
+  return _jsxs("a", {
+    className: "mdbase-menu-item",
+    role: "menuitem",
+    href: mdbaseAppHref(app.url, location.href),
+    target: "_blank",
+    rel: "noopener",
+    onClick: onOpen,
+    children: [copy, _jsx("svg", {
+      className: "mdbase-app-menu-external",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: _jsx("path", {
+        d: "M10 5.5H5.5v13h13V14M13.5 5.5h5v5M18.5 5.5 11 13"
+      })
+    }), _jsxs("span", {
+      className: "mdbase-visually-hidden",
+      children: ["  ", _i18n._(
+      /** i18n */
+      {
+        id: "75iTY6",
+        message: "(opens in a new tab)"
+      })]
+    })]
+  });
 }

package/dist/Checkbox.d.ts

@@ -0,0 +1,14 @@
+import type { InputHTMLAttributes, JSX, ReactNode } from "react";
+type InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "className" | "children">;
+/** A native checkbox and its text in one label: the row is the 44px target,
+ * the box keeps its own size. */
+export declare function Checkbox({ children, ...input }: InputAttributes & {
+    readonly children: ReactNode;
+}): JSX.Element;
+/** Related checkboxes under a legend, without the browser's fieldset outline. */
+export declare function CheckboxGroup({ legend, disabled, children }: {
+    readonly legend: ReactNode;
+    readonly disabled?: boolean | undefined;
+    readonly children: ReactNode;
+}): JSX.Element;
+export {};

package/dist/Checkbox.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** A native checkbox and its text in one label: the row is the 44px target,
+ * the box keeps its own size. */
+export function Checkbox({
+  children,
+  ...input
+}) {
+  return _jsxs("label", {
+    className: "mdbase-check",
+    children: [_jsx("input", {
+      ...input,
+      type: "checkbox",
+      className: "mdbase-checkbox"
+    }), _jsx("span", {
+      children: children
+    })]
+  });
+}
+/** Related checkboxes under a legend, without the browser's fieldset outline. */
+export function CheckboxGroup({
+  legend,
+  disabled,
+  children
+}) {
+  return _jsxs("fieldset", {
+    className: "mdbase-check-group",
+    disabled: disabled,
+    children: [_jsx("legend", {
+      children: legend
+    }), children]
+  });
+}

package/dist/CommandPalette.d.ts

@@ -3,7 +3,7 @@ export interface Command {
     readonly id: string;
     readonly label: string;
     readonly detail?: string | undefined;
-    /** Commands show under their group's heading, in the order the groups first appear. */
+    /** Stable group ID; headings follow first appearance and may be presented by groupLabel. */
     readonly group: string;
     readonly keywords?: string | undefined;
     /** For example "mod+shift+f"; see shortcutLabel. */
@@ -27,11 +27,13 @@ export declare function matchingCommands(commands: readonly Command[], query: st
  * Find or run anything: every mdbase app opens it with Mod+K. Typing filters commands; the
  * arrows move, Enter runs, Shift+Enter runs a command's alternate, Escape closes.
  */
-export declare function CommandPalette({ open, commands, onClose, label, placeholder, showAll }: {
+export declare function CommandPalette({ open, commands, onClose, label, placeholder, showAll, groupLabel }: {
     readonly open: boolean;
     readonly commands: readonly Command[];
     readonly onClose: () => void;
     readonly label?: string | undefined;
     readonly placeholder?: string | undefined;
     readonly showAll?: readonly string[] | undefined;
+    /** Presentation only: translate headings without changing group or showAll IDs. */
+    readonly groupLabel?: ((group: string) => string) | undefined;
 }): JSX.Element | null;