@zylem/ui 0.8.9 → 0.8.11

package/src/components/PianoRoll/PianoRoll.tsx

@@ -0,0 +1,353 @@
+import { createMemo, createSignal, For, Index, Show } from 'solid-js';
+import { clamp } from '../TimelineLanes/lanes-math';
+import {
+  cellStart,
+  isBlackKey,
+  type PianoRollNote,
+  pitchName,
+  pitchToRow,
+  resolveNoteDrag,
+  rowToPitch,
+} from './piano-roll-math';
+
+export type { PianoRollNote } from './piano-roll-math';
+
+const DEFAULT_PPB = 36;
+const DEFAULT_ROW = 14;
+const KEYS_WIDTH = 56;
+const END_PADDING = 24;
+const VELOCITY_HEIGHT = 48;
+
+export interface PianoRollProps {
+  notes: readonly PianoRollNote[];
+  /** Clip length in beats. */
+  length: number;
+  beatsPerBar?: number;
+  pixelsPerBeat?: number;
+  rowHeight?: number;
+  /** Lowest visible pitch (default C2 = 36). */
+  minPitch?: number;
+  /** Highest visible pitch (default C7 = 96). */
+  maxPitch?: number;
+  /** Grid snap in beats (default a sixteenth). */
+  snap?: number;
+  /** Duration of notes added by double-click, in beats (default one beat). */
+  newNoteDuration?: number;
+  playhead?: number;
+  selectedIds?: readonly string[];
+  onSelect?: (ids: string[]) => void;
+  /** Double-click on an empty cell. */
+  onAddNote?: (note: { pitch: number; start: number; duration: number }) => void;
+  /** Fires continuously while notes are dragged, with the changed notes. */
+  onChangeNotes?: (notes: PianoRollNote[]) => void;
+  /** Fires once when a drag or a keyboard edit ends, with the changed notes. */
+  onCommitNotes?: (notes: PianoRollNote[]) => void;
+  /** Delete / Backspace with a selection. */
+  onDeleteNotes?: (ids: string[]) => void;
+  /** Clicking a key on the left, for auditioning. */
+  onPreviewPitch?: (pitch: number) => void;
+  /** Show the velocity lane under the grid. */
+  showVelocity?: boolean;
+  disabled?: boolean;
+  class?: string;
+}
+
+/**
+ * Piano roll: pitch rows against a beat grid. Double-click adds a note, drag
+ * moves (pitch and time), the right edge trims, Delete removes, arrows nudge
+ * and transpose, and the optional velocity lane edits loudness per note.
+ */
+export function PianoRoll(props: PianoRollProps) {
+  const ppb = () => props.pixelsPerBeat ?? DEFAULT_PPB;
+  const rowHeight = () => props.rowHeight ?? DEFAULT_ROW;
+  const minPitch = () => props.minPitch ?? 36;
+  const maxPitch = () => props.maxPitch ?? 96;
+  const snap = () => props.snap ?? 0.25;
+  const bpb = () => props.beatsPerBar ?? 4;
+  const rows = () => Math.max(1, maxPitch() - minPitch() + 1);
+  const gridWidth = () => props.length * ppb() + END_PADDING;
+  const gridHeight = () => rows() * rowHeight();
+  const selected = createMemo(() => new Set(props.selectedIds ?? []));
+  const [dragging, setDragging] = createSignal(false);
+  let grid: HTMLDivElement | undefined;
+  let root: HTMLDivElement | undefined;
+
+  const pointerCell = (event: PointerEvent | MouseEvent) => {
+    if (!grid) return null;
+    const rect = grid.getBoundingClientRect();
+    const beats = (event.clientX - rect.left) / ppb();
+    const row = Math.floor((event.clientY - rect.top) / rowHeight());
+    return {
+      start: cellStart(beats, snap(), props.length),
+      pitch: clamp(rowToPitch(row, maxPitch()), minPitch(), maxPitch()),
+    };
+  };
+
+  const select = (ids: string[]) => props.onSelect?.(ids);
+
+  const beginNoteDrag = (note: PianoRollNote, mode: 'move' | 'resize') => (event: PointerEvent) => {
+    if (event.button !== 0) return;
+    event.stopPropagation();
+    root?.focus({ preventScroll: true });
+    let ids: string[];
+    if (event.shiftKey) {
+      ids = selected().has(note.id)
+        ? [...selected()].filter((id) => id !== note.id)
+        : [...selected(), note.id];
+    } else {
+      ids = selected().has(note.id) ? [...selected()] : [note.id];
+    }
+    select(ids);
+    if (props.disabled) return;
+    event.preventDefault();
+    const target = event.currentTarget as HTMLElement;
+    target.setPointerCapture?.(event.pointerId);
+    const idSet = new Set(ids);
+    const origin = props.notes.filter((candidate) => idSet.has(candidate.id));
+    const originX = event.clientX;
+    const originY = event.clientY;
+    let last: PianoRollNote[] = origin;
+    let moved = false;
+    setDragging(true);
+    const move = (moveEvent: PointerEvent) => {
+      moved = true;
+      last = resolveNoteDrag({
+        mode,
+        deltaBeats: (moveEvent.clientX - originX) / ppb(),
+        deltaRows: (moveEvent.clientY - originY) / rowHeight(),
+        origin,
+        length: props.length,
+        minPitch: minPitch(),
+        maxPitch: maxPitch(),
+        snap: snap(),
+      });
+      props.onChangeNotes?.(last);
+    };
+    const stop = () => {
+      target.removeEventListener('pointermove', move);
+      target.removeEventListener('pointerup', stop);
+      target.removeEventListener('pointercancel', stop);
+      target.releasePointerCapture?.(event.pointerId);
+      setDragging(false);
+      if (moved) props.onCommitNotes?.(last);
+    };
+    target.addEventListener('pointermove', move);
+    target.addEventListener('pointerup', stop);
+    target.addEventListener('pointercancel', stop);
+  };
+
+  const beginVelocityDrag = (note: PianoRollNote) => (event: PointerEvent) => {
+    if (event.button !== 0 || props.disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (!selected().has(note.id)) select([note.id]);
+    const target = event.currentTarget as HTMLElement;
+    const lane = target.parentElement!;
+    target.setPointerCapture?.(event.pointerId);
+    let last = note;
+    const apply = (moveEvent: PointerEvent) => {
+      const rect = lane.getBoundingClientRect();
+      const velocity = clamp(1 - (moveEvent.clientY - rect.top) / rect.height, 0.05, 1);
+      last = { ...note, velocity: Math.round(velocity * 100) / 100 };
+      props.onChangeNotes?.([last]);
+    };
+    apply(event);
+    const stop = () => {
+      target.removeEventListener('pointermove', apply);
+      target.removeEventListener('pointerup', stop);
+      target.removeEventListener('pointercancel', stop);
+      target.releasePointerCapture?.(event.pointerId);
+      props.onCommitNotes?.([last]);
+    };
+    target.addEventListener('pointermove', apply);
+    target.addEventListener('pointerup', stop);
+    target.addEventListener('pointercancel', stop);
+  };
+
+  const handleGridDoubleClick = (event: MouseEvent) => {
+    if (props.disabled || event.target !== grid) return;
+    const cell = pointerCell(event);
+    if (!cell) return;
+    const duration = Math.min(props.newNoteDuration ?? 1, Math.max(snap(), props.length - cell.start));
+    props.onAddNote?.({ pitch: cell.pitch, start: cell.start, duration });
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (props.disabled) return;
+    const ids = [...selected()];
+    if (event.key === 'Escape') {
+      select([]);
+      return;
+    }
+    if (ids.length === 0) return;
+    if (event.key === 'Delete' || event.key === 'Backspace') {
+      event.preventDefault();
+      props.onDeleteNotes?.(ids);
+      return;
+    }
+    const arrows: Record<string, { beats: number; rows: number }> = {
+      ArrowLeft: { beats: -snap(), rows: 0 },
+      ArrowRight: { beats: snap(), rows: 0 },
+      ArrowUp: { beats: 0, rows: event.shiftKey ? -12 : -1 },
+      ArrowDown: { beats: 0, rows: event.shiftKey ? 12 : 1 },
+    };
+    const arrow = arrows[event.key];
+    if (!arrow) return;
+    event.preventDefault();
+    const idSet = new Set(ids);
+    const origin = props.notes.filter((note) => idSet.has(note.id));
+    props.onCommitNotes?.(
+      resolveNoteDrag({
+        mode: 'move',
+        deltaBeats: arrow.beats,
+        deltaRows: arrow.rows,
+        origin,
+        length: props.length,
+        minPitch: minPitch(),
+        maxPitch: maxPitch(),
+        snap: snap(),
+      }),
+    );
+  };
+
+  const rowIndexes = createMemo(() => Array.from({ length: rows() }, (_, index) => index));
+
+  return (
+    <div
+      ref={root}
+      class={props.class ? `zylem-piano-roll ${props.class}` : 'zylem-piano-roll'}
+      tabIndex={0}
+      role="application"
+      aria-label="Piano roll"
+      data-disabled={props.disabled ? '' : undefined}
+      data-dragging={dragging() ? '' : undefined}
+      onKeyDown={handleKeyDown}
+    >
+      <div
+        class="zylem-piano-roll-scroll"
+        style={{
+          '--zylem-pr-ppb': `${ppb()}px`,
+          '--zylem-pr-bar': `${ppb() * bpb()}px`,
+          '--zylem-pr-snap': `${ppb() * snap()}px`,
+          '--zylem-pr-row': `${rowHeight()}px`,
+        }}
+      >
+        <div
+          class="zylem-piano-roll-content"
+          style={{ width: `${KEYS_WIDTH + gridWidth()}px`, height: `${gridHeight()}px` }}
+        >
+          <div class="zylem-piano-roll-keys" style={{ width: `${KEYS_WIDTH}px` }}>
+            <Index each={rowIndexes()}>
+              {(row) => {
+                const pitch = () => rowToPitch(row(), maxPitch());
+                return (
+                  <button
+                    type="button"
+                    class="zylem-piano-roll-key"
+                    style={{ height: `${rowHeight()}px` }}
+                    data-black={isBlackKey(pitch()) ? '' : undefined}
+                    data-c={pitch() % 12 === 0 ? '' : undefined}
+                    aria-label={pitchName(pitch())}
+                    tabIndex={-1}
+                    disabled={props.disabled}
+                    onPointerDown={(event) => {
+                      event.preventDefault();
+                      props.onPreviewPitch?.(pitch());
+                    }}
+                  >
+                    <Show when={pitch() % 12 === 0}>
+                      <span>{pitchName(pitch())}</span>
+                    </Show>
+                  </button>
+                );
+              }}
+            </Index>
+          </div>
+          <div
+            ref={grid}
+            class="zylem-piano-roll-grid"
+            style={{ width: `${gridWidth()}px`, height: `${gridHeight()}px` }}
+            onPointerDown={(event) => {
+              if (event.target === grid && !event.shiftKey) select([]);
+              root?.focus({ preventScroll: true });
+            }}
+            onDblClick={handleGridDoubleClick}
+          >
+            <Index each={rowIndexes()}>
+              {(row) => (
+                <div
+                  class="zylem-piano-roll-row"
+                  style={{ top: `${row() * rowHeight()}px`, height: `${rowHeight()}px` }}
+                  data-black={isBlackKey(rowToPitch(row(), maxPitch())) ? '' : undefined}
+                  data-c={rowToPitch(row(), maxPitch()) % 12 === 0 ? '' : undefined}
+                />
+              )}
+            </Index>
+            <div class="zylem-piano-roll-end" style={{ left: `${props.length * ppb()}px` }} />
+            <For each={props.notes}>
+              {(note) => (
+                <div
+                  class="zylem-piano-roll-note"
+                  role="button"
+                  tabIndex={-1}
+                  aria-label={`${pitchName(note.pitch)} at beat ${note.start + 1}`}
+                  aria-pressed={selected().has(note.id) ? 'true' : 'false'}
+                  data-selected={selected().has(note.id) ? '' : undefined}
+                  style={{
+                    left: `${note.start * ppb()}px`,
+                    top: `${pitchToRow(note.pitch, maxPitch()) * rowHeight()}px`,
+                    width: `${Math.max(3, note.duration * ppb() - 1)}px`,
+                    height: `${rowHeight() - 1}px`,
+                    '--zylem-pr-velocity': String(note.velocity ?? 0.8),
+                  }}
+                  onPointerDown={beginNoteDrag(note, 'move')}
+                >
+                  <Show when={note.duration * ppb() > 28}>
+                    <span class="zylem-piano-roll-note-label">{pitchName(note.pitch)}</span>
+                  </Show>
+                  <div
+                    class="zylem-piano-roll-note-handle"
+                    onPointerDown={beginNoteDrag(note, 'resize')}
+                  />
+                </div>
+              )}
+            </For>
+            <Show when={props.playhead !== undefined}>
+              <div
+                class="zylem-piano-roll-playhead"
+                style={{ left: `${(props.playhead ?? 0) * ppb()}px` }}
+                aria-hidden="true"
+              />
+            </Show>
+          </div>
+        </div>
+        <Show when={props.showVelocity}>
+          <div
+            class="zylem-piano-roll-velocity"
+            style={{ width: `${KEYS_WIDTH + gridWidth()}px`, height: `${VELOCITY_HEIGHT}px` }}
+          >
+            <div class="zylem-piano-roll-velocity-label" style={{ width: `${KEYS_WIDTH}px` }}>
+              Vel
+            </div>
+            <div class="zylem-piano-roll-velocity-lane" style={{ width: `${gridWidth()}px` }}>
+              <For each={props.notes}>
+                {(note) => (
+                  <div
+                    class="zylem-piano-roll-velocity-bar"
+                    data-selected={selected().has(note.id) ? '' : undefined}
+                    style={{
+                      left: `${note.start * ppb()}px`,
+                      height: `${Math.round((note.velocity ?? 0.8) * 100)}%`,
+                    }}
+                    title={`Velocity ${Math.round((note.velocity ?? 0.8) * 100)}`}
+                    onPointerDown={beginVelocityDrag(note)}
+                  />
+                )}
+              </For>
+            </div>
+          </div>
+        </Show>
+      </div>
+    </div>
+  );
+}

package/src/components/PianoRoll/piano-roll-math.ts

@@ -0,0 +1,89 @@
+import { clamp, snapTime } from '../TimelineLanes/lanes-math';
+
+export interface PianoRollNote {
+  id: string;
+  /** MIDI pitch, 0–127. */
+  pitch: number;
+  /** Beats from the clip start. */
+  start: number;
+  /** Beats. */
+  duration: number;
+  /** 0–1; defaults to 0.8 when absent. */
+  velocity?: number;
+}
+
+const NOTE_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'] as const;
+
+/** `60` → `C4`. */
+export function pitchName(pitch: number): string {
+  const index = ((Math.round(pitch) % 12) + 12) % 12;
+  return `${NOTE_NAMES[index]}${Math.floor(Math.round(pitch) / 12) - 1}`;
+}
+
+export function isBlackKey(pitch: number): boolean {
+  const index = ((Math.round(pitch) % 12) + 12) % 12;
+  return index === 1 || index === 3 || index === 6 || index === 8 || index === 10;
+}
+
+/** Highest pitch is the top row. */
+export function pitchToRow(pitch: number, maxPitch: number): number {
+  return maxPitch - pitch;
+}
+
+export function rowToPitch(row: number, maxPitch: number): number {
+  return maxPitch - row;
+}
+
+export interface NoteDragOptions {
+  mode: 'move' | 'resize';
+  /** Pointer travel in beats. */
+  deltaBeats: number;
+  /** Pointer travel in rows (positive = down = lower pitch). */
+  deltaRows: number;
+  /** The notes being dragged, as they were when the drag began. */
+  origin: readonly PianoRollNote[];
+  /** Clip length in beats. */
+  length: number;
+  minPitch: number;
+  maxPitch: number;
+  snap?: number;
+  minDuration?: number;
+}
+
+/**
+ * Where a set of notes lands after a drag. Moves shift every note by the same
+ * snapped amount, clamped so the group stays inside the clip and the pitch
+ * range; resizes change every note's duration by the same snapped amount.
+ */
+export function resolveNoteDrag(options: NoteDragOptions): PianoRollNote[] {
+  const { origin, length, minPitch, maxPitch } = options;
+  if (origin.length === 0) return [];
+  const snap = options.snap;
+  if (options.mode === 'resize') {
+    const minDuration = Math.max(options.minDuration ?? snap ?? 0.0625, 0.0001);
+    const delta = snapTime(options.deltaBeats, snap);
+    return origin.map((note) => ({
+      ...note,
+      duration: clamp(note.duration + delta, minDuration, Math.max(minDuration, length - note.start)),
+    }));
+  }
+  const first = origin.reduce((min, note) => Math.min(min, note.start), Number.POSITIVE_INFINITY);
+  const last = origin.reduce((max, note) => Math.max(max, note.start + note.duration), 0);
+  const lowest = origin.reduce((min, note) => Math.min(min, note.pitch), Number.POSITIVE_INFINITY);
+  const highest = origin.reduce((max, note) => Math.max(max, note.pitch), Number.NEGATIVE_INFINITY);
+  const rawShift = snapTime(first + options.deltaBeats, snap) - first;
+  const shift = clamp(rawShift, -first, Math.max(-first, length - last));
+  const rawTranspose = -Math.round(options.deltaRows);
+  const transpose = clamp(rawTranspose, minPitch - lowest, maxPitch - highest);
+  return origin.map((note) => ({
+    ...note,
+    start: note.start + shift,
+    pitch: note.pitch + transpose,
+  }));
+}
+
+/** Snaps a beat position down to the grid so a new note starts on the cell under the pointer. */
+export function cellStart(beats: number, snap: number | undefined, length: number): number {
+  const grid = snap && snap > 0 ? snap : 0.25;
+  return clamp(Math.floor(beats / grid + 1e-9) * grid, 0, Math.max(0, length - grid));
+}

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

@@ -17,7 +17,7 @@ globalStyle('.zylem-property-list', {
 globalStyle('.zylem-property-row', {
   minHeight: '30px',
   display: 'grid',
-  gridTemplateColumns: '112px 1fr',
+  gridTemplateColumns: 'var(--zylem-property-label-width, 112px) minmax(0, 1fr)',
   alignItems: 'center',
   gap: vars.spacing.sm,
   padding: `${vars.spacing.xs} ${vars.spacing.sm}`,

package/src/components/Property/Property.tsx

@@ -4,6 +4,8 @@ import type { JSX } from 'solid-js';
 export interface PropertyListProps {
   children: JSX.Element;
   class?: string;
+  /** Width of the label column (default `112px`); narrow it for slim inspectors. */
+  labelWidth?: string;
 }
 
 /**
@@ -17,6 +19,7 @@ export function PropertyList(props: PropertyListProps) {
           ? `zylem-property-list ${props.class}`
           : 'zylem-property-list'
       }
+      style={props.labelWidth ? { '--zylem-property-label-width': props.labelWidth } : undefined}
     >
       {props.children}
     </div>

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

@@ -19,6 +19,14 @@ globalStyle('.sidebar', {
   },
 });
 
+globalStyle('.sidebar--borderless', {
+  height: 'auto',
+  overflow: 'visible',
+  background: 'none',
+  borderRight: 'none',
+  backdropFilter: 'none',
+});
+
 globalStyle('.sidebar-section', {
   display: 'flex',
   flexDirection: 'column',

package/src/components/Sidebar/Sidebar.tsx

@@ -3,6 +3,12 @@ import type { JSX } from 'solid-js';
 
 export interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
   children?: JSX.Element;
+  /**
+   * Drop the glass surface and trailing border so the list sits inside a
+   * panel that already draws them (an inspector rail, a dialog column).
+   * It also stops filling its container, so it stacks with siblings.
+   */
+  borderless?: boolean;
 }
 
 /**
@@ -10,10 +16,12 @@ export interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
  * and `SidebarItem`.
  */
 export function Sidebar(props: SidebarProps) {
-  const [local, rest] = splitProps(props, ['children', 'class']);
+  const [local, rest] = splitProps(props, ['children', 'class', 'borderless']);
   return (
     <aside
-      class={local.class ? `sidebar zylem-scroll ${local.class}` : 'sidebar zylem-scroll'}
+      class={['sidebar', 'zylem-scroll', local.borderless ? 'sidebar--borderless' : '', local.class ?? '']
+        .filter(Boolean)
+        .join(' ')}
       {...rest}
     >
       {local.children}

package/src/components/Slider/Slider.tsx

@@ -5,6 +5,11 @@ export interface SliderProps {
   label?: string;
   value?: number;
   onChange?: (value: number) => void;
+  /**
+   * Fires once when a drag or key press finishes, with the final value. Lets
+   * an editor record one undo step per gesture while `onChange` previews.
+   */
+  onCommit?: (value: number) => void;
   minValue?: number;
   maxValue?: number;
   step?: number;
@@ -23,6 +28,7 @@ export function Slider(props: SliderProps) {
       class={props.class ? `zylem-slider-root ${props.class}` : 'zylem-slider-root'}
       value={props.value !== undefined ? [props.value] : undefined}
       onChange={(values) => props.onChange?.(values[0])}
+      onChangeEnd={(values) => props.onCommit?.(values[0])}
       minValue={props.minValue}
       maxValue={props.maxValue}
       step={props.step}

package/src/components/SpriteSizePicker/SpriteSizePicker.tsx

@@ -12,8 +12,15 @@ export interface SpriteSizePickerProps {
   presets?: readonly number[];
   /** Smallest dimension reachable by dragging or typing. */
   min?: number;
-  /** Largest dimension; also sets the size of the 1:1 preview stage. */
+  /** Largest dimension; also sets the size of the 1:1 preview stage unless `stageSize` is given. */
   max?: number;
+  /**
+   * Side of the square preview stage in pixels. Defaults to `max`, which is
+   * right when the limit is small; a picker allowing 1024px sprites sets this
+   * so the stage still fits a dialog. Sprites larger than the stage are shown
+   * cropped at 1:1 with the readout carrying the true size.
+   */
+  stageSize?: number;
   /** Drag increment in source pixels. */
   step?: number;
   /** Render Width / Height number fields under the preview. */
@@ -87,7 +94,11 @@ export function SpriteSizePicker(props: SpriteSizePickerProps) {
     event.preventDefault();
   };
 
-  const stageSize = () => `${max() + STAGE_GUTTER}px`;
+  const stage = () => props.stageSize ?? max();
+  const stageSize = () => `${stage() + STAGE_GUTTER}px`;
+  // The frame is the sprite at 1:1, cropped to the stage when it outgrows it.
+  const frameWidth = () => Math.min(props.width, stage());
+  const frameHeight = () => Math.min(props.height, stage());
 
   return (
     <div class={props.class ? `zylem-size-picker ${props.class}` : 'zylem-size-picker'}>
@@ -109,9 +120,9 @@ export function SpriteSizePicker(props: SpriteSizePickerProps) {
       <div class="zylem-size-picker-stage" style={{ width: stageSize(), height: stageSize() }}>
         <div
           class="zylem-size-picker-frame"
-          style={{ width: `${props.width}px`, height: `${props.height}px` }}
+          style={{ width: `${frameWidth()}px`, height: `${frameHeight()}px` }}
         >
-          <PixelGrid width={props.width} height={props.height} checkerCell={4} />
+          <PixelGrid width={frameWidth()} height={frameHeight()} checkerCell={4} />
           <div
             class="zylem-size-picker-handle"
             data-edge="right"

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

@@ -59,6 +59,54 @@ globalStyle('.zylem-tabs-trigger[data-disabled]', {
   cursor: 'not-allowed',
 });
 
+globalStyle('.zylem-tabs-trigger-label', {
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+// Unsaved marker: a small live dot.
+globalStyle('.zylem-tabs-dirty', {
+  flex: 'none',
+  width: '6px',
+  height: '6px',
+  borderRadius: '50%',
+  background: vars.colors.active,
+  boxShadow: vars.effects.glowActive,
+});
+
+// Close affordance: flat at rest, accent on hover (like the window close).
+globalStyle('.zylem-tabs-close', {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: 'none',
+  width: '16px',
+  height: '16px',
+  marginRight: `calc(${vars.spacing.xs} * -1)`,
+  borderRadius: '4px',
+  color: vars.colors.textSecondary,
+  cursor: 'pointer',
+  transition: `background ${vars.motion.fast} ${vars.motion.easeOut}, color ${vars.motion.fast} ${vars.motion.easeOut}`,
+});
+
+globalStyle('.zylem-tabs-close svg', {
+  width: '11px',
+  height: '11px',
+  stroke: 'currentColor',
+});
+
+globalStyle('.zylem-tabs-close:hover', {
+  background: vars.colors.accent,
+  color: '#FFF4F2',
+});
+
+globalStyle('.zylem-tabs-close:focus-visible', {
+  outline: 'none',
+  boxShadow: vars.effects.focusRing,
+});
+
 globalStyle('.zylem-tabs-content', {
   flex: 1,
   minHeight: 0,