hlmnhkl-ui 0.24.0 → 0.27.0

package/README.md

@@ -65,7 +65,7 @@ Setup for other tools: [MCP server](https://ui.hlmnhkl.my/mcp).
 ## What you get
 
 - **The source, not a package.** The command copies plain files into your app. Change anything; there is no update to wait for.
-- **50 free components**, from Button, Dialog, Select and Table to Toast and Retime, one speed setting for every animation. See [COMPONENTS.md](COMPONENTS.md).
+- **63 free components**, from Button, Dialog, Select and Table to Toast and Retime, one speed setting for every animation. See [COMPONENTS.md](COMPONENTS.md).
 - **One look, set by tokens.** Every colour, size and timing comes from one file, `tokens.css`. Colour appears only to mean something: good, caution or bad.
 - **Light and dark.** Dark follows the system, or set `data-theme="dark"` on `<html>`.
 - **Accessible.** Keyboard support per the WAI-ARIA patterns, visible focus, screen reader labels, and reduced motion. On touch screens every control gives at least a 44px target, even the small sizes; only the six PIN boxes and the seven calendar days get narrower when the row has no room, about 36px wide on a 320px phone. CalendarHeatmap's days are small by design, since a year must fit on screen; its month table gives the same numbers at full size.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hlmnhkl-ui",
-  "version": "0.24.0",
+  "version": "0.27.0",
   "description": "React components in a monochrome style. Copy them into your app with npx hlmnhkl-ui add <name>.",
   "license": "MIT",
   "homepage": "https://ui.hlmnhkl.my",

package/scripts/pro-components.json

@@ -37,6 +37,7 @@
   "Navbar",
   "NotificationInbox",
   "OnionSkin",
+  "Parallax",
   "PhoneInput",
   "PinInput",
   "ProgressRing",
@@ -50,12 +51,15 @@
   "RichTextEditor",
   "Route",
   "ScrollDraft",
-  "ScrollRuler",
+  "ScrollExpand",
+  "ScrollStory",
+  "ScrollTone",
+  "ScrollTrack",
   "Sidebar",
   "SignaturePad",
-  "SmoothScroll",
   "SortableList",
   "Sparkline",
+  "StackScroll",
   "Stat",
   "Stepper",
   "SwipeActions",

package/src/components/AlertDialog/AlertDialog.module.css

@@ -0,0 +1,2 @@
+/* Dialog's header leaves room on the right for its close button. An alert dialog has none: Cancel is the way out. */
+.header { padding-right: var(--hl-space-7); }

package/src/components/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import { useId, useRef, type ReactNode } from 'react'
+import { cx } from '../../internal/cx'
+import { useFocusTrap } from '../../internal/focus'
+import { useDismiss, useScrollLock } from '../../internal/layers'
+import { Portal } from '../../internal/Portal'
+import { usePresence } from '../../internal/usePresence'
+import { Button } from '../Button'
+import dialog from '../Dialog/Dialog.module.css'
+import styles from './AlertDialog.module.css'
+
+export type AlertDialogProps = {
+  /** Shows the dialog. You always control it. */
+  open: boolean
+  /** Called with false after Confirm, Cancel or Esc. A tap outside never closes it. */
+  onOpenChange: (open: boolean) => void
+  /** The question, such as "Delete this project?". Also the accessible name. */
+  title: ReactNode
+  /** What happens if they confirm. Read out with the title when the dialog opens. */
+  description: ReactNode
+  /** Extra content under the description, such as a list of what goes away. */
+  children?: ReactNode
+  /** Text of the confirm button. Name the action, such as "Delete project", not "OK". */
+  confirmLabel: string
+  /** Text of the cancel button. */
+  cancelLabel?: string
+  /** Called when they confirm, before the dialog closes. */
+  onConfirm: () => void
+  /** Called when they cancel with the button or Esc, before the dialog closes. */
+  onCancel?: () => void
+  /** "danger" gives the confirm button the solid red look, for actions that destroy something. */
+  tone?: 'default' | 'danger'
+  /** Extra class for the dialog panel. */
+  className?: string
+}
+
+export function AlertDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  confirmLabel,
+  cancelLabel = 'Cancel',
+  onConfirm,
+  onCancel,
+  tone = 'default',
+  className,
+}: AlertDialogProps) {
+  const id = useId()
+  const panelRef = useRef<HTMLDivElement>(null)
+  const cancelRef = useRef<HTMLButtonElement>(null)
+  const { mounted, state } = usePresence(open, 'base')
+
+  const cancel = () => {
+    onCancel?.()
+    onOpenChange(false)
+  }
+
+  useScrollLock(open)
+  useDismiss(open, [panelRef], cancel, { outside: false })
+  // Focus starts on the least destructive choice, so a stray Enter never confirms.
+  useFocusTrap(panelRef, open && mounted, { initialFocus: cancelRef })
+
+  if (!mounted) return null
+  return (
+    <Portal>
+      <div className={dialog.overlay} data-state={state} aria-hidden="true" />
+      <div className={dialog.positioner}>
+        <div
+          ref={panelRef}
+          role="alertdialog"
+          aria-modal="true"
+          aria-labelledby={`${id}-title`}
+          aria-describedby={`${id}-desc`}
+          tabIndex={-1}
+          className={cx(dialog.panel, dialog.sm, className)}
+          data-state={state}
+        >
+          <header className={cx(dialog.header, styles.header)}>
+            <div className={dialog.titles}>
+              <h2 id={`${id}-title`} className={dialog.title}>{title}</h2>
+              <p id={`${id}-desc`} className={dialog.description}>{description}</p>
+            </div>
+          </header>
+          {children && <div className={dialog.body}>{children}</div>}
+          <footer className={dialog.footer}>
+            <Button ref={cancelRef} variant="secondary" onClick={cancel}>
+              {cancelLabel}
+            </Button>
+            <Button
+              variant={tone === 'danger' ? 'danger' : 'primary'}
+              onClick={() => {
+                onConfirm()
+                onOpenChange(false)
+              }}
+            >
+              {confirmLabel}
+            </Button>
+          </footer>
+        </div>
+      </div>
+    </Portal>
+  )
+}

package/src/components/AlertDialog/index.ts

@@ -0,0 +1 @@
+export * from './AlertDialog'

package/src/components/Avatar/Avatar.module.css

@@ -60,34 +60,3 @@
 /* Without colour, status reads by fill: solid, half, hollow. */
 .status[data-status="away"] { background: linear-gradient(90deg, var(--hl-color-fg) 50%, var(--hl-color-bg) 50%); box-shadow: inset 0 0 0 var(--hl-line-thick) var(--hl-color-fg); }
 .status[data-status="offline"] { background: var(--hl-color-bg); box-shadow: inset 0 0 0 var(--hl-line-thick) var(--hl-color-fg-muted); }
-
-.group {
-  display: inline-flex;
-  align-items: center;
-  padding-left: var(--hl-space-3);
-}
-
-.slot {
-  display: inline-flex;
-  margin-left: calc(var(--hl-space-3) * -1);
-  border-radius: var(--hl-radius-full);
-  box-shadow: 0 0 0 var(--hl-line-focus) var(--hl-color-bg);
-  animation: slotIn var(--hl-motion-slow) var(--hl-ease-spring) backwards;
-  animation-delay: calc(var(--i) * var(--hl-motion-stagger) * 2);
-  transition: margin var(--hl-motion-slow) var(--hl-ease-spring), transform var(--hl-motion-base) var(--hl-ease-spring);
-}
-
-@media (hover: hover) {
-  .group:hover .slot { margin-left: calc(var(--hl-space-1) * -1); }
-  .slot:hover { transform: translateY(calc(var(--hl-shift-sm) * -1)); }
-}
-
-.more {
-  background: var(--hl-color-surface);
-  box-shadow: inset 0 0 0 var(--hl-line) var(--hl-color-border-strong);
-  font-size: calc(var(--size) * 0.32);
-}
-
-@keyframes slotIn {
-  from { opacity: 0; transform: translateX(calc(var(--hl-shift-md) * -1)) scale(0.8); }
-}

package/src/components/Avatar/Avatar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Children, useState, type ReactElement, type ReactNode } from 'react'
+import { useState } from 'react'
 import { cx } from '../../internal/cx'
 import styles from './Avatar.module.css'
 
@@ -41,6 +41,10 @@ export function Avatar({ name, src, size = 'md', status, className }: AvatarProp
           src={src}
           alt=""
           data-loaded={state === 'loaded' || undefined}
+          // A server-rendered image can finish before React hydrates, so its load event is gone by then.
+          ref={(img) => {
+            if (img?.complete && state === 'loading') setState(img.naturalWidth ? 'loaded' : 'error')
+          }}
           onLoad={() => setState('loaded')}
           onError={() => setState('error')}
         />
@@ -49,38 +53,3 @@ export function Avatar({ name, src, size = 'md', status, className }: AvatarProp
     </span>
   )
 }
-
-export type AvatarGroupProps = {
-  /** The Avatar elements to stack. */
-  children: ReactNode
-  /** Avatars shown before the "+N" counter. */
-  max?: number
-  /** Size of the "+N" counter. Set it to match the avatars inside. */
-  size?: AvatarProps['size']
-  /** Screen reader name for the group. Undefined says "N people". */
-  label?: string
-  /** Extra class for the root element. */
-  className?: string
-}
-
-export function AvatarGroup({ children, max = 4, size = 'md', label, className }: AvatarGroupProps) {
-  const all = Children.toArray(children) as ReactElement<AvatarProps>[]
-  const shown = all.slice(0, max)
-  const extra = all.length - shown.length
-  return (
-    <div className={cx(styles.group, className)} role="group" aria-label={label ?? `${all.length} people`}>
-      {shown.map((child, i) => (
-        <span key={i} className={styles.slot} style={{ ['--i' as string]: i }}>
-          {child}
-        </span>
-      ))}
-      {extra > 0 && (
-        <span className={styles.slot} style={{ ['--i' as string]: shown.length }}>
-          <span className={cx(styles.root, styles[size], styles.more)} role="img" aria-label={`and ${extra} more`}>
-            <span className={styles.fallback} aria-hidden="true">+{extra}</span>
-          </span>
-        </span>
-      )}
-    </div>
-  )
-}

package/src/components/Avatar/index.ts

@@ -1 +1,3 @@
 export * from './Avatar'
+// AvatarGroup has its own folder now; this keeps old imports from Avatar working.
+export { AvatarGroup, type AvatarGroupProps } from '../AvatarGroup'

package/src/components/AvatarGroup/AvatarGroup.module.css

@@ -0,0 +1,53 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  padding-left: var(--hl-space-3);
+}
+
+/* The slot takes the hover and never moves; only the face inside lifts. A lifted slot would slide out
+   from under the pointer and drop back, and at an overlap two neighbours would take turns. */
+.slot {
+  display: inline-flex;
+  margin-left: calc(var(--hl-space-3) * -1);
+  border-radius: var(--hl-radius-full);
+  animation: slotIn var(--hl-motion-slow) var(--hl-ease-spring) backwards;
+  animation-delay: calc(var(--i) * var(--hl-motion-stagger) * 2);
+  transition: margin var(--hl-motion-slow) var(--hl-ease-spring);
+}
+
+.face {
+  display: inline-flex;
+  border-radius: var(--hl-radius-full);
+  box-shadow: 0 0 0 var(--hl-line-focus) var(--hl-color-bg);
+  transition: transform var(--hl-motion-base) var(--hl-ease-spring);
+}
+
+@media (hover: hover) {
+  .root:hover .slot { margin-left: calc(var(--hl-space-1) * -1); }
+  .slot:hover .face { transform: translateY(calc(var(--hl-shift-sm) * -1)); }
+}
+
+.more {
+  --size: var(--hl-avatar-md);
+  display: inline-grid;
+  place-items: center;
+  width: var(--size);
+  height: var(--size);
+  border-radius: var(--hl-radius-full);
+  background: var(--hl-color-surface);
+  box-shadow: inset 0 0 0 var(--hl-line) var(--hl-color-border-strong), 0 0 0 var(--hl-line-focus) var(--hl-color-bg);
+  color: var(--hl-color-fg);
+  font-size: calc(var(--size) * 0.32);
+  font-weight: var(--hl-weight-medium);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: var(--hl-tracking-tight);
+  user-select: none;
+}
+
+.sm { --size: var(--hl-avatar-sm); }
+.lg { --size: var(--hl-avatar-lg); }
+.xl { --size: var(--hl-avatar-xl); }
+
+@keyframes slotIn {
+  from { opacity: 0; transform: translateX(calc(var(--hl-shift-md) * -1)) scale(0.8); }
+}

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -0,0 +1,43 @@
+import { Children, isValidElement, type ReactElement, type ReactNode } from 'react'
+import { cx } from '../../internal/cx'
+import type { AvatarProps } from '../Avatar'
+import styles from './AvatarGroup.module.css'
+
+export type AvatarGroupProps = {
+  /** The Avatar elements to stack, in order. */
+  children: ReactNode
+  /** Avatars shown before the "+N" counter. */
+  max?: number
+  /** Size of the "+N" counter. Set it to match the avatars inside. */
+  size?: AvatarProps['size']
+  /** What the people are, such as "Project members". Screen readers hear it with every name. */
+  label?: string
+  /** Extra class for the root element. */
+  className?: string
+}
+
+const list = (names: string[]) => (names.length < 2 ? names.join('') : `${names.slice(0, -1).join(', ')} and ${names[names.length - 1]}`)
+
+export function AvatarGroup({ children, max = 4, size = 'md', label, className }: AvatarGroupProps) {
+  const all = Children.toArray(children).filter(isValidElement) as ReactElement<AvatarProps>[]
+  const shown = all.slice(0, max)
+  const extra = all.length - shown.length
+  // The names of the hidden people too, so a screen reader hears everyone the "+N" stands for.
+  const everyone = list(all.map((a) => a.props.name))
+  return (
+    <div className={cx(styles.root, className)} role="group" aria-label={label ? `${label}: ${everyone}` : everyone}>
+      {shown.map((child, i) => (
+        <span key={child.key ?? i} className={styles.slot} style={{ ['--i' as string]: i }}>
+          <span className={styles.face}>{child}</span>
+        </span>
+      ))}
+      {extra > 0 && (
+        <span className={styles.slot} style={{ ['--i' as string]: shown.length }}>
+          <span className={cx(styles.face, styles.more, styles[size])} role="img" aria-label={`${extra} more`} title={list(all.slice(max).map((a) => a.props.name))}>
+            <span aria-hidden="true">+{extra}</span>
+          </span>
+        </span>
+      )}
+    </div>
+  )
+}

package/src/components/AvatarGroup/index.ts

@@ -0,0 +1 @@
+export * from './AvatarGroup'

package/src/components/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,51 @@
+.root {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  isolation: isolate;
+}
+
+.vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+/* Both classes, so these win over each button's own radius whatever order the styles load in. */
+.root.root > * {
+  position: relative;
+  flex: none;
+  margin: 0;
+  border-radius: 0;
+}
+
+/* Neighbours overlap by one line, so two borders read as one. */
+.horizontal.horizontal > * + * { margin-inline-start: calc(var(--hl-line) * -1); }
+.vertical.vertical > * + * { margin-block-start: calc(var(--hl-line) * -1); }
+/* min-width, not width: a button keeps its own size, and the narrower ones grow to the widest. */
+.vertical.vertical > * { min-width: 100%; }
+
+.horizontal.horizontal > :first-child {
+  border-start-start-radius: var(--hl-radius-control);
+  border-end-start-radius: var(--hl-radius-control);
+}
+
+.horizontal.horizontal > :last-child {
+  border-start-end-radius: var(--hl-radius-control);
+  border-end-end-radius: var(--hl-radius-control);
+}
+
+.vertical.vertical > :first-child {
+  border-start-start-radius: var(--hl-radius-md);
+  border-start-end-radius: var(--hl-radius-md);
+}
+
+.vertical.vertical > :last-child {
+  border-end-start-radius: var(--hl-radius-md);
+  border-end-end-radius: var(--hl-radius-md);
+}
+
+/* The hovered and the focused button rise above their neighbours, so the full edge and focus ring show. */
+@media (hover: hover) {
+  .root > :hover { z-index: 1; }
+}
+.root > :focus-visible { z-index: 2; }

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react'
+import { cx } from '../../internal/cx'
+import styles from './ButtonGroup.module.css'
+
+export type ButtonGroupProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+  /** Accessible name for the group, such as "Text alignment". */
+  label: string
+  /** The Button, IconButton or Toggle elements to join. Secondary ones show the shared borders best. */
+  children: ReactNode
+  /** A row, or a column where each button takes the full width. */
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export function ButtonGroup({ label, children, orientation = 'horizontal', className, ...rest }: ButtonGroupProps) {
+  return (
+    <div {...rest} role="group" aria-label={label} className={cx(styles.root, styles[orientation], className)} data-orientation={orientation}>
+      {children}
+    </div>
+  )
+}

package/src/components/ButtonGroup/index.ts

@@ -0,0 +1 @@
+export * from './ButtonGroup'

package/src/components/Card/Card.module.css

@@ -7,7 +7,6 @@
   border-radius: var(--hl-radius-panel);
   background: var(--hl-color-surface);
   box-shadow: var(--hl-shadow-1);
-  overflow: hidden;
   transition:
     transform var(--hl-motion-slow) var(--hl-ease-spring),
     box-shadow var(--hl-motion-slow) var(--hl-ease-out),
@@ -20,6 +19,11 @@
     box-shadow: var(--hl-shadow-3);
     border-color: var(--hl-color-border-strong);
   }
+
+  /* The lift moves the card off a pointer on its lower edge, and it would drop back and lift again.
+     This fills the gap below while it is up: twice the lift, since the spring overshoots. The card
+     does not clip, so the strip can reach out. */
+  .interactive:hover::after { content: ""; position: absolute; inset: 100% 0 calc(var(--hl-shift-sm) * -2); }
 }
 
 .interactive:active { transform: translateY(0) scale(0.995); transition-duration: var(--hl-motion-fast); }
@@ -31,6 +35,7 @@
 .media {
   overflow: hidden;
   border-bottom: var(--hl-line) solid var(--hl-color-border);
+  border-radius: calc(var(--hl-radius-panel) - var(--hl-line)) calc(var(--hl-radius-panel) - var(--hl-line)) 0 0;
 }
 
 .media > * { transition: transform var(--hl-motion-slower) var(--hl-ease-out); }

package/src/components/CheckboxGroup/CheckboxGroup.module.css

@@ -0,0 +1,30 @@
+.group {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.legend {
+  padding: 0;
+  margin-bottom: var(--hl-space-2);
+  font-size: var(--hl-text-sm);
+  font-weight: var(--hl-weight-medium);
+}
+
+.description {
+  margin: 0 0 var(--hl-space-2);
+  font-size: var(--hl-text-sm);
+  color: var(--hl-color-fg-muted);
+}
+
+.items { display: flex; }
+.vertical { flex-direction: column; }
+.horizontal { flex-wrap: wrap; column-gap: var(--hl-space-7); }
+
+/* Native disabled reaches every box, and each Checkbox dims itself; only the group's own text dims
+   here, so no box fades twice. */
+.group[data-disabled] > :is(.legend, .description) { opacity: var(--hl-disabled-opacity); }
+
+/* Each Checkbox's drawn box: red edges on the empty ones, like a RadioGroup with an error. */
+.group[data-invalid] [data-state="off"] { border-color: var(--hl-color-danger); }

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { useId, type ReactNode } from 'react'
+import { cx } from '../../internal/cx'
+import { FieldMessage } from '../../internal/FieldMessage'
+import { useControllable } from '../../internal/useControllable'
+import { Checkbox } from '../Checkbox'
+import styles from './CheckboxGroup.module.css'
+
+export type CheckboxOption = {
+  value: string
+  label: ReactNode
+  description?: ReactNode
+  disabled?: boolean
+}
+
+export type CheckboxGroupProps = {
+  /** Visible name of the group, rendered as the legend. */
+  label: ReactNode
+  /** The boxes, in order. */
+  options: CheckboxOption[]
+  /** Values of the ticked boxes, when you control it. */
+  value?: string[]
+  /** Starting value when you do not control it. */
+  defaultValue?: string[]
+  /** Called when a box is ticked or cleared, with the new list of values in option order. */
+  onValueChange?: (value: string[]) => void
+  /** Muted text under the label, read with the group. */
+  description?: ReactNode
+  /** Error under the boxes. Marks every box invalid and is read with the group. */
+  error?: ReactNode
+  /** Form field name shared by every box. Each ticked box sends its value. */
+  name?: string
+  /** Turns off every box in the group. */
+  disabled?: boolean
+  /** Stacks the boxes or puts them in a row that wraps. */
+  orientation?: 'vertical' | 'horizontal'
+  /** Extra class for the root element. */
+  className?: string
+}
+
+export function CheckboxGroup({
+  label,
+  options,
+  value: valueProp,
+  defaultValue = [],
+  onValueChange,
+  description,
+  error,
+  name,
+  disabled,
+  orientation = 'vertical',
+  className,
+}: CheckboxGroupProps) {
+  const auto = useId()
+  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange)
+  const descId = `${auto}-desc`
+  const errorId = `${auto}-error`
+  const describedBy = [description ? descId : null, error ? errorId : null].filter(Boolean).join(' ')
+  const toggle = (v: string, on: boolean) => {
+    const next = new Set(value)
+    if (on) next.add(v)
+    else next.delete(v)
+    setValue(options.map((o) => o.value).filter((x) => next.has(x)))
+  }
+  return (
+    <fieldset className={cx(styles.group, className)} disabled={disabled} aria-describedby={describedBy || undefined} data-disabled={disabled || undefined} data-invalid={error ? true : undefined}>
+      <legend className={styles.legend}>{label}</legend>
+      {description && <p id={descId} className={styles.description}>{description}</p>}
+      <div className={cx(styles.items, styles[orientation])}>
+        {options.map((o) => (
+          <Checkbox
+            key={o.value}
+            label={o.label}
+            description={o.description}
+            name={name}
+            value={o.value}
+            disabled={o.disabled}
+            checked={value.includes(o.value)}
+            onCheckedChange={(on) => toggle(o.value, on)}
+            aria-invalid={error ? true : undefined}
+          />
+        ))}
+      </div>
+      <FieldMessage helpId={`${auto}-help`} errorId={errorId} error={error} />
+    </fieldset>
+  )
+}

package/src/components/CheckboxGroup/index.ts

@@ -0,0 +1 @@
+export * from './CheckboxGroup'

package/src/components/CodeBlock/CodeBlock.module.css

@@ -0,0 +1,74 @@
+/* One card: a header row (title or tabs, and copy) over the code. */
+.root {
+  min-width: 0;
+  overflow: hidden;
+  border: var(--hl-line) solid var(--hl-color-border);
+  border-radius: var(--hl-radius-md);
+  background: var(--hl-code-bg);
+  color: var(--hl-code-fg);
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--hl-space-3);
+  min-height: var(--hl-control-h-md);
+  padding: 0 var(--hl-space-2) 0 var(--hl-space-4);
+  border-bottom: var(--hl-line) solid var(--hl-color-border);
+}
+
+.title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--hl-font-mono);
+  font-size: var(--hl-text-xs);
+  color: var(--hl-color-fg-subtle);
+}
+
+.copy { flex: none; margin-left: auto; }
+
+.pre {
+  margin: 0;
+  padding: var(--hl-space-4) var(--hl-space-5);
+  overflow-x: auto;
+  font-family: var(--hl-font-mono);
+  font-size: var(--hl-text-sm);
+  line-height: var(--hl-leading-normal);
+  tab-size: 2;
+}
+
+/* The ring goes on the whole block: the root clips its corners, so a ring on the pre would be cut. */
+.pre:focus-visible { outline: none; }
+.root:has(.pre:focus-visible) { box-shadow: var(--hl-focus-ring); }
+
+.pre[data-lines] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--hl-space-5);
+  padding-left: 0;
+}
+
+/* Sticks to the left edge while long lines scroll, and is left out when the code is selected. */
+.gutter {
+  position: sticky;
+  left: 0;
+  padding: 0 var(--hl-space-4) 0 var(--hl-space-5);
+  border-right: var(--hl-line) solid var(--hl-color-border);
+  background: var(--hl-code-bg);
+  color: var(--hl-code-gutter);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+}
+
+.code { font: inherit; }
+
+.keyword { color: var(--hl-code-keyword); font-weight: var(--hl-weight-semibold); }
+.tag { color: var(--hl-code-tag); font-weight: var(--hl-weight-semibold); }
+.attr { color: var(--hl-code-attr); }
+.string { color: var(--hl-code-string); }
+.number { color: var(--hl-code-number); }
+.comment { color: var(--hl-code-comment); font-style: italic; }