@zylem/ui 0.8.14 → 0.9.1

package/src/components/Dialog/Dialog.tsx

@@ -1,7 +1,7 @@
-import { Dialog as KDialog } from '@kobalte/core';
-import { Show } from 'solid-js';
+import { createUniqueId, onCleanup, onMount, Show } from 'solid-js';
 import type { JSX } from 'solid-js';
-import { createDismissGuard, LayerScope, useLayer } from '../../layers';
+import { Portal } from 'solid-js/web';
+import { LAYER_PORTAL_CLASS, LayerScope, useLayer } from '../../layers';
 import { Button } from '../Button/Button';
 import { WindowControls } from '../WindowControls/WindowControls';
 
@@ -16,7 +16,7 @@ export interface DialogProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   title?: JSX.Element;
-  /** Secondary line under the title. */
+  /** Secondary line under the title. Describes the dialog unless `aria-describedby` says otherwise. */
   subtitle?: JSX.Element;
   /** Content between the titles and the close control, e.g. a search field. */
   headerExtra?: JSX.Element;
@@ -28,72 +28,147 @@ export interface DialogProps {
   class?: string;
   /** Extra class on the body, e.g. to hand scrolling to the content's columns. */
   bodyClass?: string;
+  /** `alertdialog` for an urgent question the user has to answer, such as a confirmation. */
+  role?: 'dialog' | 'alertdialog';
+  /** Names the dialog when it has no `title`. */
+  'aria-label'?: string;
+  /** Id of the element that describes the dialog. */
+  'aria-describedby'?: string;
 }
 
 /**
  * HyperGlass dialog: glass window with a glossy title bar and jewel close
  * control, centered over a dimmed backdrop.
  *
- * The body is a {@link LayerScope}, so overlays opened from inside the dialog
- * stack against the dialog's own content rather than against the page. A tooltip
- * on a dialog field floats over the dialog, but a menu belonging to the page
- * behind still wins — which is what keeps a dialog from leaking overlays across
- * the rest of the app.
+ * A native `<dialog>` opened with `showModal()`: it renders in the top layer,
+ * above everything else on the page, which is inert while it is open. Escape
+ * and a click outside the card ask to close it, and closing hands focus back
+ * to whatever had it before.
+ *
+ * The card shares a {@link LayerScope} with the scope's portal container, so
+ * overlays opened from the dialog render inside the `<dialog>` (outside it they
+ * would be inert) but beside the card rather than in it, where the card's
+ * clipping would cut them off.
  */
 export function Dialog(props: DialogProps) {
   const layer = useLayer('modal');
-  const dismiss = createDismissGuard();
 
   return (
-    <KDialog.Root open={props.open} onOpenChange={props.onOpenChange}>
+    <>
       {/*
         A dialog is controlled and renders no trigger, so it has nothing in the
         page to resolve its tree from. This marker sits where the dialog was
         declared, which is enough to find an enclosing shadow root.
       */}
       <span ref={layer.anchorRef} style={{ display: 'none' }} aria-hidden="true" />
-      <Show when={layer.mount()} keyed>
+      <Show when={props.open && layer.mount()} keyed>
         {(mount) => (
-          <KDialog.Portal mount={mount}>
-            <KDialog.Overlay class="zylem-dialog-overlay" />
-            <div class="zylem-dialog-positioner">
-              <KDialog.Content
-                ref={dismiss.ref}
-                class={props.class ? `zylem-dialog-content ${props.class}` : 'zylem-dialog-content'}
-                data-size={props.size}
-                onInteractOutside={dismiss.onInteractOutside}
-              >
-                <div class="zylem-dialog-header">
-                  <Show when={props.title || props.subtitle}>
-                    <div class="zylem-dialog-titles">
-                      <Show when={props.title}>
-                        <KDialog.Title class="zylem-dialog-title">{props.title}</KDialog.Title>
-                      </Show>
-                      <Show when={props.subtitle}>
-                        <p class="zylem-dialog-subtitle">{props.subtitle}</p>
-                      </Show>
-                    </div>
-                  </Show>
-                  <Show when={props.headerExtra}>
-                    <div class="zylem-dialog-header-extra">{props.headerExtra}</div>
-                  </Show>
-                  <WindowControls onClose={() => props.onOpenChange?.(false)} />
-                </div>
-                <KDialog.Description
-                  as="div"
-                  class={props.bodyClass ? `zylem-dialog-body ${props.bodyClass}` : 'zylem-dialog-body'}
-                >
-                  <LayerScope class="zylem-dialog-scope">{props.children}</LayerScope>
-                </KDialog.Description>
-                <Show when={props.footer}>
-                  <div class="zylem-dialog-footer">{props.footer}</div>
-                </Show>
-              </KDialog.Content>
-            </div>
-          </KDialog.Portal>
+          <Portal mount={mount}>
+            <DialogWindow {...props} />
+          </Portal>
         )}
       </Show>
-    </KDialog.Root>
+    </>
+  );
+}
+
+/** Overlays a click outside the card dismisses on its own, without closing the dialog too. */
+const DISMISSABLE_OVERLAY = '[role="menu"], [role="listbox"], [role="dialog"]';
+
+/** The `<dialog>` itself, mounted for as long as the dialog is open. */
+function DialogWindow(props: DialogProps) {
+  const titleId = createUniqueId();
+  const subtitleId = createUniqueId();
+  let dialog!: HTMLDialogElement;
+  let disposed = false;
+  let pressedBackdrop = false;
+
+  const close = () => props.onOpenChange?.(false);
+  // Outside the card means on the dialog itself or on the positioner filling it.
+  const isBackdrop = (target: EventTarget | null | undefined) =>
+    target === dialog || target === dialog.firstElementChild;
+  const hasOpenOverlay = () =>
+    dialog
+      .querySelector(`.zylem-dialog-positioner > .${LAYER_PORTAL_CLASS}`)
+      ?.querySelector(DISMISSABLE_OVERLAY) != null;
+
+  onMount(() => {
+    // jsdom has no `showModal()`.
+    if (typeof dialog.showModal === 'function') dialog.showModal();
+    else dialog.setAttribute('open', '');
+
+    // Kobalte dismisses an open overlay from a capture listener on `document`,
+    // so this has to run first, on `window`, to still see it open.
+    const onPointerDown = (event: PointerEvent) => {
+      pressedBackdrop = isBackdrop(event.composedPath()[0]) && !hasOpenOverlay();
+    };
+    window.addEventListener('pointerdown', onPointerDown, true);
+    onCleanup(() => window.removeEventListener('pointerdown', onPointerDown, true));
+  });
+
+  onCleanup(() => {
+    disposed = true;
+    // Runs before the portal detaches the element: only a dialog closed while
+    // still in the document returns focus to whatever opened it.
+    if (dialog.open) dialog.close();
+  });
+
+  return (
+    <dialog
+      ref={dialog}
+      class="zylem-dialog"
+      role={props.role}
+      aria-labelledby={props.title ? titleId : undefined}
+      aria-label={props['aria-label']}
+      aria-describedby={props['aria-describedby'] ?? (props.subtitle ? subtitleId : undefined)}
+      onCancel={(event) => {
+        // `open` stays the source of truth: the host closes the dialog.
+        event.preventDefault();
+        close();
+      }}
+      onClose={() => {
+        // The browser closed it anyway, e.g. a second Escape it would not let be prevented.
+        if (!disposed) close();
+      }}
+      onClick={(event) => {
+        if (pressedBackdrop && isBackdrop(event.target)) close();
+        pressedBackdrop = false;
+      }}
+    >
+      <LayerScope class="zylem-dialog-positioner">
+        <div
+          class={props.class ? `zylem-dialog-content ${props.class}` : 'zylem-dialog-content'}
+          data-size={props.size}
+        >
+          <div class="zylem-dialog-header">
+            <Show when={props.title || props.subtitle}>
+              <div class="zylem-dialog-titles">
+                <Show when={props.title}>
+                  <h2 id={titleId} class="zylem-dialog-title">
+                    {props.title}
+                  </h2>
+                </Show>
+                <Show when={props.subtitle}>
+                  <p id={subtitleId} class="zylem-dialog-subtitle">
+                    {props.subtitle}
+                  </p>
+                </Show>
+              </div>
+            </Show>
+            <Show when={props.headerExtra}>
+              <div class="zylem-dialog-header-extra">{props.headerExtra}</div>
+            </Show>
+            <WindowControls onClose={close} closeLabel="Close dialog" />
+          </div>
+          <div class={props.bodyClass ? `zylem-dialog-body ${props.bodyClass}` : 'zylem-dialog-body'}>
+            {props.children}
+          </div>
+          <Show when={props.footer}>
+            <div class="zylem-dialog-footer">{props.footer}</div>
+          </Show>
+        </div>
+      </LayerScope>
+    </dialog>
   );
 }
 
@@ -110,21 +185,27 @@ export interface ConfirmDialogProps {
 
 /**
  * Confirmation dialog built on Dialog — a drop-in replacement for
- * `window.confirm()` flows.
+ * `window.confirm()` flows. An `alertdialog` described by its message; it
+ * opens with focus on Confirm, or on Cancel when the action is destructive.
  */
 export function ConfirmDialog(props: ConfirmDialogProps) {
+  const messageId = createUniqueId();
+
   return (
     <Dialog
       open={props.open}
       onOpenChange={props.onOpenChange}
+      role="alertdialog"
+      aria-describedby={messageId}
       title={props.title ?? 'Confirm'}
       footer={
         <>
-          <Button variant="ghost" onClick={() => props.onOpenChange(false)}>
+          <Button variant="ghost" autofocus={props.danger} onClick={() => props.onOpenChange(false)}>
             {props.cancelLabel ?? 'Cancel'}
           </Button>
           <Button
             variant={props.danger ? 'danger' : 'primary'}
+            autofocus={!props.danger}
             onClick={() => {
               props.onConfirm();
               props.onOpenChange(false);
@@ -135,7 +216,7 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
         </>
       }
     >
-      {props.message}
+      <div id={messageId}>{props.message}</div>
     </Dialog>
   );
 }

package/src/components/FrameStrip/FrameStrip.css.ts

@@ -101,6 +101,7 @@ globalStyle('.zylem-frame-thumb-index', {
   alignItems: 'center',
   justifyContent: 'center',
   flex: '1 1 auto',
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: '11px',
   fontWeight: 600,
   fontVariantNumeric: 'tabular-nums',

package/src/components/FrameStrip/FrameStrip.tsx

@@ -28,7 +28,7 @@ export function FrameStrip(props: FrameStripProps) {
           <span class="zylem-frame-strip-title">{local.title}</span>
         </Show>
       </div>
-      <div class="zylem-frame-strip-row zylem-scroll" role="listbox" aria-label={local.label ?? 'Frames'}>
+      <div class="zylem-frame-strip-row zylem-scroll" role="group" aria-label={local.label ?? 'Frames'}>
         {local.children}
       </div>
     </div>
@@ -51,10 +51,9 @@ export function FrameThumb(props: FrameThumbProps) {
   return (
     <button
       type="button"
-      role="option"
       class={props.class ? `zylem-frame-thumb ${props.class}` : 'zylem-frame-thumb'}
       data-selected={props.selected ? '' : undefined}
-      aria-selected={props.selected ? 'true' : 'false'}
+      aria-pressed={props.selected ? 'true' : 'false'}
       aria-label={props.label ?? `Frame ${props.index}`}
       onClick={props.onClick}
     >

package/src/components/ItemPicker/ItemPicker.tsx

@@ -1,11 +1,14 @@
-import { For, Show, createMemo, createSignal, type JSX } from 'solid-js';
+import { For, Show, createMemo, createSignal, createUniqueId, type JSX } from 'solid-js';
 import { SearchInput } from '../SearchInput/SearchInput';
 import { filterItems, groupItems, type PickerItem } from './filter-items';
 
 export interface ItemPickerProps<T extends PickerItem = PickerItem> {
   items: T[];
   onSelect: (item: T) => void;
-  /** Marked as the current choice. */
+  /**
+   * Marked as the current choice. Given at all (`null` for none), the items
+   * become toggles that expose it as `aria-pressed`.
+   */
   selectedId?: string | null | undefined;
   /** Hide the search field for a list short enough not to need one. */
   searchable?: boolean | undefined;
@@ -34,6 +37,9 @@ export function ItemPicker<T extends PickerItem>(props: ItemPickerProps<T>) {
 
   const searchable = () => props.searchable !== false;
   const groups = createMemo(() => groupItems(filterItems(props.items, query())));
+  /** Items are toggles only when the caller tracks a choice (`null` is "none yet"). */
+  const pressed = (item: T) =>
+    props.selectedId === undefined ? undefined : props.selectedId === item.id;
 
   return (
     <div class={props.class ? `zylem-picker ${props.class}` : 'zylem-picker'}>
@@ -68,37 +74,44 @@ export function ItemPicker<T extends PickerItem>(props: ItemPickerProps<T>) {
         >
           <div class="zylem-picker__groups zylem-scroll">
             <For each={groups()}>
-              {(group) => (
-                <div class="zylem-picker__group">
-                  <h4 class="zylem-picker__group-title">{group.group}</h4>
-                  <For each={group.items}>
-                    {(item) => (
-                      <button
-                        type="button"
-                        class="zylem-picker__item"
-                        disabled={item.disabled}
-                        data-selected={
-                          props.selectedId === item.id ? '' : undefined
-                        }
-                        title={item.description}
-                        onClick={() => props.onSelect(item)}
-                      >
-                        <Show when={item.icon}>
-                          {(icon) => (
-                            <span
-                              class="zylem-picker__item-glyph"
-                              // Markup from the caller's own registry, in the
-                              // caller's own realm; not a new trust boundary.
-                              innerHTML={icon()}
-                            />
-                          )}
-                        </Show>
-                        <span class="zylem-picker__item-label">{item.label}</span>
-                      </button>
-                    )}
-                  </For>
-                </div>
-              )}
+              {(group) => {
+                const titleId = createUniqueId();
+                return (
+                  <div class="zylem-picker__group" role="group" aria-labelledby={titleId}>
+                    <div id={titleId} class="zylem-picker__group-title">
+                      {group.group}
+                    </div>
+                    <For each={group.items}>
+                      {(item) => (
+                        <button
+                          type="button"
+                          class="zylem-picker__item"
+                          disabled={item.disabled}
+                          data-selected={
+                            props.selectedId === item.id ? '' : undefined
+                          }
+                          aria-pressed={pressed(item)}
+                          title={item.description}
+                          onClick={() => props.onSelect(item)}
+                        >
+                          <Show when={item.icon}>
+                            {(icon) => (
+                              <span
+                                class="zylem-picker__item-glyph"
+                                aria-hidden="true"
+                                // Markup from the caller's own registry, in the
+                                // caller's own realm; not a new trust boundary.
+                                innerHTML={icon()}
+                              />
+                            )}
+                          </Show>
+                          <span class="zylem-picker__item-label">{item.label}</span>
+                        </button>
+                      )}
+                    </For>
+                  </div>
+                );
+              }}
             </For>
           </div>
         </Show>

package/src/components/MenuButton/MenuButton.css.ts

@@ -7,15 +7,15 @@ import { vars } from '../../theme.css';
  */
 
 globalStyle('.zylem-menu-button', {
-  position: 'relative',
-  display: 'inline-flex',
-  alignItems: 'stretch',
+	position: 'relative',
+	display: 'inline-flex',
+	alignItems: 'stretch',
 });
 
 globalStyle('.zylem-menu-button__face', {
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
+	display: 'inline-flex',
+	alignItems: 'center',
+	justifyContent: 'center',
 });
 
 /*
@@ -24,23 +24,27 @@ globalStyle('.zylem-menu-button__face', {
  * rhythm.
  */
 globalStyle('.zylem-menu-button__chevron', {
-  position: 'absolute',
-  right: '-2px',
-  bottom: '-2px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: '14px',
-  height: '14px',
-  padding: 0,
-  fontSize: '9px',
-  lineHeight: 1,
-  color: 'rgba(255, 255, 255, 0.75)',
-  background: 'rgba(20, 24, 32, 0.92)',
-  border: '1px solid rgba(255, 255, 255, 0.16)',
-  borderRadius: vars.radii.control,
-  cursor: 'pointer',
-  transition: `color ${vars.motion.fast} ${vars.motion.easeOut}, border-color ${vars.motion.fast} ${vars.motion.easeOut}`,
+	position: 'absolute',
+	right: '-5px',
+	bottom: '-5px',
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	width: '18px',
+	height: '18px',
+	padding: 0,
+	color: vars.colors.text,
+	background: vars.colors.border,
+	border: `0.5px solid ${vars.colors.surface}`,
+	borderRadius: '50%',
+	cursor: 'pointer',
+	transition: `color ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-menu-button__chevron svg', {
+	width: '18px',
+	height: '18px',
+	stroke: 'currentColor',
 });
 
 /*
@@ -49,43 +53,42 @@ globalStyle('.zylem-menu-button__chevron', {
  * control, and lets clicks through to the face beneath.
  */
 globalStyle('.zylem-menu-button__chevron--static', {
-  pointerEvents: 'none',
+	pointerEvents: 'none',
 });
 
 globalStyle('.zylem-menu-button__chevron:hover:not([disabled])', {
-  color: '#fff',
-  borderColor: 'rgba(255, 255, 255, 0.4)',
+	color: '#fff',
 });
 
 globalStyle('.zylem-menu-button__chevron:focus-visible', {
-  outline: 'none',
-  boxShadow: vars.effects.focusRing,
+	outline: 'none',
+	boxShadow: vars.effects.focusRing,
 });
 
 globalStyle('.zylem-menu-button__chevron[disabled]', {
-  opacity: 0.45,
-  cursor: 'not-allowed',
+	opacity: 0.45,
+	cursor: 'not-allowed',
 });
 
 globalStyle('.zylem-menu-button__panel', {
-  zIndex: vars.layers.menu,
-  color: vars.colors.text,
-  fontFamily: vars.typography.fontFamily,
-  borderRadius: vars.radii.panel,
-  border: '1px solid rgba(97, 166, 232, 0.45)',
-  background: vars.material.glassPanelDark,
-  boxShadow: vars.effects.shadowPanel,
-  backdropFilter: `blur(${vars.effects.blurMd}) saturate(1.22)`,
-  outline: 'none',
-  '@supports': {
-    'not (backdrop-filter: blur(1px))': {
-      background: vars.colors.surface,
-    },
-  },
+	zIndex: vars.layers.menu,
+	color: vars.colors.text,
+	fontFamily: vars.typography.fontFamily,
+	borderRadius: vars.radii.panel,
+	border: '1px solid rgba(97, 166, 232, 0.45)',
+	background: vars.material.glassPanelDark,
+	boxShadow: vars.effects.shadowPanel,
+	backdropFilter: `blur(${vars.effects.blurMd}) saturate(1.22)`,
+	outline: 'none',
+	'@supports': {
+		'not (backdrop-filter: blur(1px))': {
+			background: vars.colors.surface,
+		},
+	},
 });
 
 /** Icon glyphs supplied as inline SVG markup rather than components. */
 globalStyle('.zylem-menu-button__face svg', {
-  width: '18px',
-  height: '18px',
+	width: '18px',
+	height: '18px',
 });

package/src/components/MenuButton/MenuButton.tsx

@@ -1,4 +1,5 @@
 import { Popover as KPopover } from '@kobalte/core';
+import CircleChevronDown from 'lucide-solid/icons/circle-chevron-down';
 import { Show, createSignal, type JSX } from 'solid-js';
 import { createDismissGuard, useLayer } from '../../layers';
 import { Tooltip } from '../Tooltip/Tooltip';
@@ -40,9 +41,12 @@ export interface MenuButtonProps {
 
 /**
  * Shown in both modes, because a chevron means "this has a menu" and that is
- * true whether or not the face carries its own action.
+ * true whether or not the face carries its own action. The circle is the icon's
+ * own stroke, so the badge does not draw a second plate behind it.
  */
-const CHEVRON = '▾';
+function MenuChevron() {
+  return <CircleChevronDown aria-hidden="true" />;
+}
 
 /**
  * A toolbar button that owns a menu, optionally split.
@@ -70,11 +74,18 @@ export function MenuButton(props: MenuButtonProps) {
   const isSplit = () => props.onAction !== undefined;
   const tooltipText = () =>
     props.tooltip === null ? null : props.tooltip ?? props.label;
+  /** The menu takes one side of the button, so the label takes the other. */
+  const tooltipPlacement = () =>
+    (props.placement ?? 'bottom-start').startsWith('top') ? 'bottom' : 'top';
 
   /** Wrap in a tooltip only when there is text for one. */
   const described = (content: JSX.Element) => (
     <Show when={tooltipText()} fallback={content} keyed>
-      {(text) => <Tooltip content={text}>{content}</Tooltip>}
+      {(text) => (
+        <Tooltip content={text} placement={tooltipPlacement()}>
+          {content}
+        </Tooltip>
+      )}
     </Show>
   );
 
@@ -107,7 +118,7 @@ export function MenuButton(props: MenuButtonProps) {
                 class="zylem-menu-button__chevron zylem-menu-button__chevron--static"
                 aria-hidden="true"
               >
-                {CHEVRON}
+                <MenuChevron />
               </span>
             </KPopover.Trigger>,
           )}
@@ -130,7 +141,7 @@ export function MenuButton(props: MenuButtonProps) {
             aria-label={`${props.label} options`}
             disabled={props.disabled}
           >
-            <span aria-hidden="true">{CHEVRON}</span>
+            <MenuChevron />
           </KPopover.Trigger>
         </Show>
 
@@ -140,6 +151,7 @@ export function MenuButton(props: MenuButtonProps) {
               <KPopover.Content
                 ref={dismiss.ref}
                 class="zylem-menu-button__panel"
+                aria-label={props.label}
                 onInteractOutside={dismiss.onInteractOutside}
               >
                 {props.menu(() => setOpen(false))}

package/src/components/Menubar/Menubar.css.ts

@@ -33,7 +33,7 @@ globalStyle('.zylem-menubar-trigger', {
 
 globalStyle('.zylem-menubar-trigger:hover', {
 	background: 'rgba(97, 166, 232, 0.12)',
-	color: vars.colors.primaryHover,
+	color: vars.colors.text,
 });
 
 globalStyle('.zylem-menubar-trigger[data-expanded]', {

package/src/components/Mixer/Knob.tsx

@@ -1,4 +1,4 @@
-import { createSignal, Show } from 'solid-js';
+import { createSignal, createUniqueId, Show } from 'solid-js';
 import { clamp } from '../TimelineLanes/lanes-math';
 
 export interface KnobProps {
@@ -11,7 +11,10 @@ export interface KnobProps {
   step?: number;
   /** Double-click resets to this. */
   defaultValue?: number;
+  /** Caption under the knob, which also names it. */
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   /** Readout under the knob; defaults to the value with `step` precision. */
   format?: (value: number) => string;
   /** Draw the arc from the centre (for pan and other ±ranges). */
@@ -48,6 +51,7 @@ export function Knob(props: KnobProps) {
   const max = () => props.max ?? 1;
   const step = () => props.step ?? (max() - min()) / 100;
   const size = () => props.size ?? 36;
+  const labelId = createUniqueId();
   const ratio = () => (max() > min() ? clamp((props.value - min()) / (max() - min()), 0, 1) : 0);
   const angle = () => START_ANGLE + ratio() * SWEEP;
   const zeroAngle = () =>
@@ -147,7 +151,8 @@ export function Knob(props: KnobProps) {
         class="zylem-knob-dial"
         role="slider"
         tabIndex={props.disabled ? -1 : 0}
-        aria-label={props.label}
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={props.label ? undefined : props['aria-label']}
         aria-valuemin={min()}
         aria-valuemax={max()}
         aria-valuenow={props.value}
@@ -180,7 +185,9 @@ export function Knob(props: KnobProps) {
         </svg>
       </div>
       <Show when={props.label}>
-        <span class="zylem-knob-label">{props.label}</span>
+        <span id={labelId} class="zylem-knob-label">
+          {props.label}
+        </span>
       </Show>
       <span class="zylem-knob-value">{readout()}</span>
     </div>