@zylem/ui 0.8.14 → 0.9.1

package/src/components/Mixer/Mixer.css.ts

@@ -73,6 +73,7 @@ globalStyle('.zylem-knob-label', {
 });
 
 globalStyle('.zylem-knob-value', {
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: '10px',
   fontVariantNumeric: 'tabular-nums',
   color: vars.colors.text,
@@ -216,6 +217,7 @@ globalStyle('.zylem-mixer-meter-fill', {
 });
 
 globalStyle('.zylem-mixer-readout', {
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: '10px',
   fontVariantNumeric: 'tabular-nums',
   color: vars.colors.textSecondary,
@@ -236,6 +238,25 @@ globalStyle('.zylem-mixer-name', {
   textOverflow: 'ellipsis',
 });
 
+// A selectable strip's name is a button that still reads as the name.
+globalStyle('button.zylem-mixer-name', {
+  appearance: 'none',
+  margin: 0,
+  padding: 0,
+  border: 0,
+  background: 'none',
+  color: 'inherit',
+  fontFamily: 'inherit',
+  lineHeight: 'inherit',
+  cursor: 'inherit',
+});
+
+globalStyle('button.zylem-mixer-name:focus-visible', {
+  outline: 'none',
+  borderRadius: '3px',
+  boxShadow: vars.effects.focusRing,
+});
+
 globalStyle('.zylem-mixer-strip[data-muted] .zylem-mixer-name', {
   color: vars.colors.textSecondary,
 });

package/src/components/Mixer/MixerStrip.tsx

@@ -26,6 +26,7 @@ export interface MixerStripProps {
   /** Wider strip with a stronger label; for the master bus. */
   master?: boolean;
   selected?: boolean;
+  /** Pointer down anywhere on the strip; given, the name is also a button for the keyboard. */
   onSelect?: () => void;
   disabled?: boolean;
   class?: string;
@@ -52,6 +53,7 @@ export function formatPan(value: number): string {
 export function MixerStrip(props: MixerStripProps) {
   const min = () => props.minVolume ?? -60;
   const max = () => props.maxVolume ?? 6;
+  const volumeText = () => formatDb(clamp(props.volume, min(), max()), min());
 
   return (
     <div
@@ -61,6 +63,8 @@ export function MixerStrip(props: MixerStripProps) {
       data-selected={props.selected ? '' : undefined}
       data-disabled={props.disabled ? '' : undefined}
       data-muted={props.muted ? '' : undefined}
+      role="group"
+      aria-label={props.name}
       onPointerDown={() => props.onSelect?.()}
     >
       <Show when={props.pan !== undefined}>
@@ -91,14 +95,13 @@ export function MixerStrip(props: MixerStripProps) {
           disabled={props.disabled}
           onChange={(values) => props.onVolumeChange?.(values[0] ?? min())}
           onChangeEnd={(values) => props.onVolumeCommit?.(values[0] ?? min())}
-          getValueLabel={(params) => formatDb(params.values[0] ?? min(), min())}
         >
           <KSlider.Label class="zylem-fader-sr">{`${props.name} volume`}</KSlider.Label>
           <KSlider.Track class="zylem-fader-track">
             <KSlider.Fill class="zylem-fader-fill" />
             <span class="zylem-fader-zero" aria-hidden="true" />
-            <KSlider.Thumb class="zylem-fader-thumb">
-              <KSlider.Input class="zylem-fader-sr" />
+            <KSlider.Thumb class="zylem-fader-thumb" aria-valuetext={volumeText()}>
+              <KSlider.Input class="zylem-fader-sr" aria-valuetext={volumeText()} />
             </KSlider.Thumb>
           </KSlider.Track>
         </KSlider.Root>
@@ -117,7 +120,7 @@ export function MixerStrip(props: MixerStripProps) {
             class="zylem-track-toggle"
             data-kind="mute"
             aria-pressed={props.muted ? 'true' : 'false'}
-            aria-label={props.muted ? 'Unmute' : 'Mute'}
+            aria-label="Mute"
             title={props.muted ? 'Unmute' : 'Mute'}
             disabled={props.disabled}
             onPointerDown={(event) => event.stopPropagation()}
@@ -132,7 +135,7 @@ export function MixerStrip(props: MixerStripProps) {
             class="zylem-track-toggle"
             data-kind="solo"
             aria-pressed={props.solo ? 'true' : 'false'}
-            aria-label={props.solo ? 'Unsolo' : 'Solo'}
+            aria-label="Solo"
             title={props.solo ? 'Unsolo' : 'Solo'}
             disabled={props.disabled}
             onPointerDown={(event) => event.stopPropagation()}
@@ -142,9 +145,27 @@ export function MixerStrip(props: MixerStripProps) {
           </button>
         </Show>
       </div>
-      <span class="zylem-mixer-name" title={props.name}>
-        {props.name}
-      </span>
+      <Show
+        when={props.onSelect}
+        fallback={
+          <span class="zylem-mixer-name" title={props.name}>
+            {props.name}
+          </span>
+        }
+      >
+        <button
+          type="button"
+          class="zylem-mixer-name"
+          aria-current={props.selected ? 'true' : undefined}
+          title={props.name}
+          onClick={(event) => {
+            // The pointer selected on pointer down; keys and assistive tech click without one.
+            if (event.detail === 0) props.onSelect?.();
+          }}
+        >
+          {props.name}
+        </button>
+      </Show>
     </div>
   );
 }

package/src/components/NumberField/NumberField.css.ts

@@ -3,45 +3,51 @@ import { vars } from '../../theme.css';
 import '../shared/field.css';
 
 globalStyle('.zylem-numberfield-group', {
-  display: 'inline-flex',
-  alignItems: 'stretch',
-  position: 'relative',
-  width: '100%',
+	display: 'inline-flex',
+	alignItems: 'stretch',
+	position: 'relative',
+	width: '100%',
 });
 
 globalStyle('.zylem-numberfield-input', {
-  width: '100%',
-  height: '28px',
-  paddingRight: '26px',
-  fontVariantNumeric: 'tabular-nums',
+	width: '100%',
+	height: '28px',
+	paddingRight: '26px',
+	fontFamily: vars.typography.fontFamilyMono,
+	fontVariantNumeric: 'tabular-nums',
 });
 
 globalStyle('.zylem-numberfield-stepper', {
-  position: 'absolute',
-  right: '3px',
-  width: '20px',
-  height: '11px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  cursor: 'pointer',
-  border: '1px solid rgba(150, 210, 255, 0.4)',
-  borderRadius: '4px',
-  background: vars.material.buttonGlass,
-  color: '#F4FAFF',
-  fontSize: '8px',
-  lineHeight: 1,
-  padding: 0,
-  transition: `filter ${vars.motion.fast} ${vars.motion.easeOut}`,
+	position: 'absolute',
+	right: '3px',
+	width: '20px',
+	height: '9px',
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	cursor: 'pointer',
+	border: '0.5px solid rgba(150, 210, 255, 0.4)',
+	borderRadius: '4px',
+	background: vars.material.buttonGlass,
+	color: '#F4FAFF',
+	lineHeight: 1,
+	padding: 0,
+	transition: `filter ${vars.motion.fast} ${vars.motion.easeOut}`,
 });
 
 globalStyle('.zylem-numberfield-stepper:hover', {
-  filter: 'brightness(1.25)',
+	filter: 'brightness(1.25)',
 });
 
 globalStyle('.zylem-numberfield-stepper:active', {
-  filter: 'brightness(0.85)',
+	filter: 'brightness(0.85)',
 });
 
 globalStyle('.zylem-numberfield-stepper--up', { top: '3px' });
 globalStyle('.zylem-numberfield-stepper--down', { bottom: '3px' });
+
+globalStyle('.zylem-numberfield-stepper svg', {
+	width: '10px',
+	height: '8px',
+	stroke: 'currentColor',
+});

package/src/components/NumberField/NumberField.tsx

@@ -1,8 +1,12 @@
 import { NumberField as KNumberField } from '@kobalte/core';
+import ChevronDown from 'lucide-solid/icons/chevron-down';
+import ChevronUp from 'lucide-solid/icons/chevron-up';
 import { Show } from 'solid-js';
 
 export interface NumberFieldProps {
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   error?: string;
   value?: number;
   onChange?: (value: number) => void;
@@ -45,19 +49,20 @@ export function NumberField(props: NumberFieldProps) {
       <div class="zylem-numberfield-group">
         <KNumberField.Input
           class="zylem-field zylem-numberfield-input"
+          aria-label={props['aria-label']}
           placeholder={props.placeholder}
         />
         <KNumberField.IncrementTrigger
           class="zylem-numberfield-stepper zylem-numberfield-stepper--up"
           aria-label="Increment"
         >
-          ▲
+          <ChevronUp aria-hidden="true" />
         </KNumberField.IncrementTrigger>
         <KNumberField.DecrementTrigger
           class="zylem-numberfield-stepper zylem-numberfield-stepper--down"
           aria-label="Decrement"
         >
-          ▼
+          <ChevronDown aria-hidden="true" />
         </KNumberField.DecrementTrigger>
       </div>
       <Show when={props.error}>

package/src/components/Panel/Panel.css.ts

@@ -65,6 +65,7 @@ globalStyle('.zylem-panel-header', {
 });
 
 globalStyle('.zylem-panel-header-title', {
+  margin: 0,
   fontSize: '11px',
   fontWeight: 700,
   letterSpacing: '0.09em',

package/src/components/Panel/Panel.tsx

@@ -1,10 +1,13 @@
 import { Show, splitProps } from 'solid-js';
 import type { JSX } from 'solid-js';
+import { Heading, type HeadingLevel } from '../shared/Heading';
 
 export interface PanelProps
   extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'title'> {
   /** Optional glossy header title. */
   title?: JSX.Element;
+  /** Heading level of the title (default 2). */
+  headingLevel?: HeadingLevel;
   /** Extra content rendered on the right side of the header. */
   headerActions?: JSX.Element;
   /** Use the brighter window-glass treatment. */
@@ -28,6 +31,7 @@ export interface PanelProps
 export function Panel(props: PanelProps) {
   const [local, rest] = splitProps(props, [
     'title',
+    'headingLevel',
     'headerActions',
     'window',
     'flush',
@@ -51,7 +55,11 @@ export function Panel(props: PanelProps) {
     <div class={classes()} {...rest}>
       <Show when={local.title || local.headerActions}>
         <div class="zylem-panel-header">
-          <span class="zylem-panel-header-title">{local.title}</span>
+          <Show when={local.title} fallback={<span class="zylem-panel-header-title" />}>
+            <Heading level={local.headingLevel ?? 2} class="zylem-panel-header-title">
+              {local.title}
+            </Heading>
+          </Show>
           {local.headerActions}
         </div>
       </Show>

package/src/components/PianoRoll/PianoRoll.tsx

@@ -219,6 +219,7 @@ export function PianoRoll(props: PianoRollProps) {
       tabIndex={0}
       role="application"
       aria-label="Piano roll"
+      aria-disabled={props.disabled ? 'true' : undefined}
       data-disabled={props.disabled ? '' : undefined}
       data-dragging={dragging() ? '' : undefined}
       onKeyDown={handleKeyDown}

package/src/components/Progress/Progress.css.ts

@@ -25,7 +25,7 @@ globalStyle('.zylem-progress-label', {
 globalStyle('.zylem-progress-value', {
   fontSize: `calc(${vars.typography.fontSize} - 2px)`,
   color: vars.colors.primary,
-  fontFamily: vars.typography.fontFamily,
+  fontFamily: vars.typography.fontFamilyMono,
   fontVariantNumeric: 'tabular-nums',
 });
 

package/src/components/Progress/Progress.tsx

@@ -6,6 +6,8 @@ export interface ProgressProps {
   minValue?: number;
   maxValue?: number;
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   showValue?: boolean;
   indeterminate?: boolean;
   class?: string;
@@ -22,6 +24,7 @@ export function Progress(props: ProgressProps) {
       minValue={props.minValue}
       maxValue={props.maxValue}
       indeterminate={props.indeterminate}
+      aria-label={props['aria-label']}
     >
       <Show when={props.label || props.showValue}>
         <div class="zylem-progress-header">

package/src/components/Property/Property.css.ts

@@ -57,13 +57,26 @@ globalStyle('.zylem-property-value', {
   whiteSpace: 'nowrap',
 });
 
+// A button that should read as the value text it stands in for.
 globalStyle('.zylem-property-value--clickable', {
+  appearance: 'none',
+  margin: 0,
+  padding: 0,
+  border: 0,
+  background: 'none',
+  lineHeight: 'inherit',
+  textAlign: 'start',
   cursor: 'pointer',
   textDecoration: 'underline',
   textDecorationStyle: 'dotted',
   textUnderlineOffset: '2px',
 });
 
+globalStyle('.zylem-property-value--clickable:focus-visible', {
+  outline: 'none',
+  boxShadow: vars.effects.focusRing,
+});
+
 globalStyle('.zylem-property-value--clickable:hover', {
   textDecorationStyle: 'solid',
   color: vars.colors.active,

package/src/components/Property/Property.tsx

@@ -107,7 +107,8 @@ export function PropertyRow(props: PropertyRowProps) {
           </span>
         }
       >
-        <span
+        <button
+          type="button"
           class={`zylem-property-value zylem-property-value--clickable ${props.valueClass ?? ''}`}
           onClick={() => {
             const fullValue = display().fullValue;
@@ -116,7 +117,7 @@ export function PropertyRow(props: PropertyRowProps) {
           title="Click to reveal full path"
         >
           {display().element}
-        </span>
+        </button>
       </Show>
     </div>
   );

package/src/components/SearchInput/SearchInput.tsx

@@ -18,7 +18,7 @@ export interface SearchInputProps {
 export function SearchInput(props: SearchInputProps) {
   return (
     <div class={props.class ? `zylem-search ${props.class}` : 'zylem-search'}>
-      <Search class="zylem-search-icon" />
+      <Search class="zylem-search-icon" aria-hidden="true" />
       <input
         type="search"
         ref={props.ref}

package/src/components/Select/Select.css.ts

@@ -20,12 +20,18 @@ globalStyle('.zylem-select-value', {
 });
 
 globalStyle('.zylem-select-icon', {
+  display: 'flex',
   flexShrink: 0,
-  fontSize: '9px',
   color: vars.colors.primary,
   transition: `transform ${vars.motion.fast} ${vars.motion.easeOut}`,
 });
 
+globalStyle('.zylem-select-icon svg', {
+  width: '14px',
+  height: '14px',
+  stroke: 'currentColor',
+});
+
 globalStyle('.zylem-select-trigger[data-expanded] .zylem-select-icon', {
   transform: 'rotate(180deg)',
 });

package/src/components/Select/Select.tsx

@@ -1,4 +1,5 @@
 import { Select as KSelect } from '@kobalte/core';
+import ChevronDown from 'lucide-solid/icons/chevron-down';
 import { Show } from 'solid-js';
 import { createDismissGuard, useLayer } from '../../layers';
 
@@ -13,6 +14,8 @@ export interface SelectProps {
   value?: string;
   onChange?: (value: string | null) => void;
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   placeholder?: string;
   disabled?: boolean;
   name?: string;
@@ -55,12 +58,14 @@ export function Select(props: SelectProps) {
       <KSelect.Trigger
         ref={layer.anchorRef}
         class="zylem-field zylem-select-trigger"
-        aria-label={props.label}
+        aria-label={props['aria-label']}
       >
         <KSelect.Value<SelectOption> class="zylem-select-value">
           {(state) => state.selectedOption()?.label}
         </KSelect.Value>
-        <KSelect.Icon class="zylem-select-icon">▼</KSelect.Icon>
+        <KSelect.Icon class="zylem-select-icon">
+          <ChevronDown aria-hidden="true" />
+        </KSelect.Icon>
       </KSelect.Trigger>
       <Show when={layer.mount()} keyed>
         {(mount) => (

package/src/components/Sidebar/Sidebar.css.ts

@@ -34,6 +34,7 @@ globalStyle('.sidebar-section', {
 });
 
 globalStyle('.sidebar-section-title', {
+  margin: 0,
   padding: `${vars.spacing.sm} ${vars.spacing.md} ${vars.spacing.xs}`,
   fontSize: '10px',
   fontWeight: 700,

package/src/components/Sidebar/Sidebar.tsx

@@ -1,8 +1,15 @@
-import { Show, splitProps } from 'solid-js';
+import { createUniqueId, Show, splitProps } from 'solid-js';
 import type { JSX } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import { Heading, type HeadingLevel } from '../shared/Heading';
 
 export interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
   children?: JSX.Element;
+  /**
+   * Landmark element: `aside` (the default) for a rail beside the main
+   * content, `nav` when the rail is the page's navigation.
+   */
+  as?: 'aside' | 'nav';
   /**
    * Drop the glass surface and trailing border so the list sits inside a
    * panel that already draws them (an inspector rail, a dialog column).
@@ -16,34 +23,43 @@ export interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
  * and `SidebarItem`.
  */
 export function Sidebar(props: SidebarProps) {
-  const [local, rest] = splitProps(props, ['children', 'class', 'borderless']);
+  const [local, rest] = splitProps(props, ['children', 'class', 'borderless', 'as']);
   return (
-    <aside
+    <Dynamic
+      component={local.as ?? 'aside'}
       class={['sidebar', 'zylem-scroll', local.borderless ? 'sidebar--borderless' : '', local.class ?? '']
         .filter(Boolean)
         .join(' ')}
       {...rest}
     >
       {local.children}
-    </aside>
+    </Dynamic>
   );
 }
 
 export interface SidebarSectionProps {
   title?: JSX.Element;
+  /** Heading level of the title (default 2). */
+  headingLevel?: HeadingLevel;
   children?: JSX.Element;
   class?: string;
 }
 
+/** A titled group of items; the title names the group for assistive tech. */
 export function SidebarSection(props: SidebarSectionProps) {
+  const titleId = createUniqueId();
   return (
     <div
       class={
         props.class ? `sidebar-section ${props.class}` : 'sidebar-section'
       }
+      role={props.title ? 'group' : undefined}
+      aria-labelledby={props.title ? titleId : undefined}
     >
       <Show when={props.title}>
-        <div class="sidebar-section-title">{props.title}</div>
+        <Heading level={props.headingLevel ?? 2} id={titleId} class="sidebar-section-title">
+          {props.title}
+        </Heading>
       </Show>
       {props.children}
     </div>
@@ -52,6 +68,7 @@ export function SidebarSection(props: SidebarSectionProps) {
 
 export interface SidebarItemProps
   extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** The current item; exposed as `aria-current="true"`. */
   active?: boolean;
   children?: JSX.Element;
 }
@@ -63,6 +80,7 @@ export function SidebarItem(props: SidebarItemProps) {
       type="button"
       class={local.class ? `sidebar-item ${local.class}` : 'sidebar-item'}
       data-active={local.active ? '' : undefined}
+      aria-current={local.active ? 'true' : undefined}
       {...rest}
     >
       {local.children}

package/src/components/Slider/Slider.css.ts

@@ -31,7 +31,7 @@ globalStyle('.zylem-slider-label', {
 globalStyle('.zylem-slider-value', {
   fontSize: `calc(${vars.typography.fontSize} - 2px)`,
   color: vars.colors.primary,
-  fontFamily: vars.typography.fontFamily,
+  fontFamily: vars.typography.fontFamilyMono,
   fontVariantNumeric: 'tabular-nums',
 });
 

package/src/components/Slider/Slider.tsx

@@ -3,6 +3,8 @@ import { Show } from 'solid-js';
 
 export interface SliderProps {
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   value?: number;
   onChange?: (value: number) => void;
   /**
@@ -48,8 +50,8 @@ export function Slider(props: SliderProps) {
       </Show>
       <KSlider.Track class="zylem-slider-track">
         <KSlider.Fill class="zylem-slider-fill" />
-        <KSlider.Thumb class="zylem-slider-thumb">
-          <KSlider.Input class="zylem-slider-thumb-input" />
+        <KSlider.Thumb class="zylem-slider-thumb" aria-label={props['aria-label']}>
+          <KSlider.Input class="zylem-slider-thumb-input" aria-label={props['aria-label']} />
         </KSlider.Thumb>
       </KSlider.Track>
     </KSlider.Root>

package/src/components/SpriteSizePicker/SpriteSizePicker.css.ts

@@ -20,6 +20,7 @@ globalStyle('.zylem-size-picker-presets', {
 
 globalStyle('.zylem-size-picker-presets .zylem-button', {
   minWidth: '40px',
+  fontFamily: vars.typography.fontFamilyMono,
   fontVariantNumeric: 'tabular-nums',
 });
 
@@ -89,6 +90,7 @@ globalStyle('.zylem-size-picker-readout', {
   position: 'absolute',
   right: vars.spacing.sm,
   bottom: vars.spacing.xs,
+  fontFamily: vars.typography.fontFamilyMono,
   fontSize: `calc(${vars.typography.fontSize} - 2px)`,
   fontVariantNumeric: 'tabular-nums',
   color: vars.colors.primary,

package/src/components/Switch/Switch.tsx

@@ -3,6 +3,8 @@ import { Show } from 'solid-js';
 
 export interface SwitchProps {
   label?: string;
+  /** Accessible name when there is no visible `label`. */
+  'aria-label'?: string;
   checked?: boolean;
   defaultChecked?: boolean;
   onChange?: (checked: boolean) => void;
@@ -24,7 +26,7 @@ export function Switch(props: SwitchProps) {
       disabled={props.disabled}
       name={props.name}
     >
-      <KSwitch.Input class="zylem-switch-input" />
+      <KSwitch.Input class="zylem-switch-input" aria-label={props['aria-label']} />
       <KSwitch.Control class="zylem-switch-control">
         <KSwitch.Thumb class="zylem-switch-thumb" />
       </KSwitch.Control>

package/src/components/Tabs/Tabs.css.ts

@@ -102,11 +102,6 @@ globalStyle('.zylem-tabs-close:hover', {
   color: '#FFF4F2',
 });
 
-globalStyle('.zylem-tabs-close:focus-visible', {
-  outline: 'none',
-  boxShadow: vars.effects.focusRing,
-});
-
 globalStyle('.zylem-tabs-content', {
   flex: 1,
   minHeight: 0,