@passui/react 0.1.39 → 0.1.40

package/dist/types/src/components/code-block/code-block.d.ts

@@ -1,10 +1,13 @@
 import { type ComponentProps, type ReactNode } from "react";
-export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children"> {
+export type CodeBlockSize = "sm" | "md" | "lg";
+export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children" | "size"> {
     code: string;
     /** Supply a highlighter's rendered pre/code element; source remains the fallback. */
     children?: ReactNode;
     /** Show a nonselectable line gutter. @default true */
     lineNumbers?: boolean;
+    /** Code font size, padding and line gutter scale. @default "md" */
+    size?: CodeBlockSize;
 }
 /** Code presentation without shipping a highlighter or formatter to consumers. */
-export declare function CodeBlock({ code, children, lineNumbers, className, ...props }: CodeBlockProps): import("react").JSX.Element;
+export declare function CodeBlock({ code, children, lineNumbers, size, className, ...props }: CodeBlockProps): import("react").JSX.Element;

package/dist/types/src/components/one-time-code/one-time-code.d.ts

@@ -1,6 +1,7 @@
 import { type InputHTMLAttributes, type Ref } from "react";
 export type OneTimeCodeStatus = "idle" | "verifying" | "success" | "error";
 export type OneTimeCodeFormat = "numeric" | "alphanumeric";
+export type OneTimeCodeSize = "sm" | "md" | "lg";
 export interface OneTimeCodeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "maxLength" | "size"> {
     label: string;
     value: string;
@@ -16,8 +17,10 @@ export interface OneTimeCodeProps extends Omit<InputHTMLAttributes<HTMLInputElem
     status?: OneTimeCodeStatus;
     /** Localized verification feedback announced without reading decorative cells. */
     statusLabel?: string;
+    /** Cell height, digit text scale and check icon size. @default "md" */
+    size?: OneTimeCodeSize;
 }
 /** Normalize common numeric keyboards and optional ASCII letters in one native field. */
 export declare function normalizeCode(value: string, length: number, format?: OneTimeCodeFormat): string;
 /** Six cells, one field: paste, autofill, selection and Backspace stay native. */
-export declare function OneTimeCode({ label, value, onChange, onComplete, length, format, ref, status, statusLabel, className, disabled, id: suppliedId, ...props }: OneTimeCodeProps): import("react").JSX.Element;
+export declare function OneTimeCode({ label, value, onChange, onComplete, length, format, ref, status, statusLabel, size, className, disabled, id: suppliedId, ...props }: OneTimeCodeProps): import("react").JSX.Element;

package/dist/types/src/components/popover/popover.d.ts

@@ -1,6 +1,7 @@
 import { type HTMLMotionProps } from "motion/react";
 import { type ReactNode, type RefObject } from "react";
 export type PopoverOrigin = "top-left" | "top-right";
+export type PopoverSize = "sm" | "md";
 export interface PopoverProps extends Omit<HTMLMotionProps<"div">, "children"> {
     open: boolean;
     children?: ReactNode;
@@ -8,6 +9,8 @@ export interface PopoverProps extends Omit<HTMLMotionProps<"div">, "children"> {
     origin?: PopoverOrigin;
     /** Trigger whose shape the popover uses during its opening and closing motion. */
     anchorRef?: RefObject<HTMLElement | null>;
+    /** Surface corner radius. @default "md" */
+    size?: PopoverSize;
 }
 /**
  * A glass surface that springs open from its anchor. Position it with

package/dist/types/src/components/search-list/search-list.d.ts

@@ -1,7 +1,10 @@
 import { type ComponentProps } from "react";
-export declare function SearchList({ loop, open, onKeyDown, className, ...props }: ComponentProps<"div"> & {
+export type SearchListSize = "sm" | "md" | "lg";
+export declare function SearchList({ loop, open, size, onKeyDown, className, ...props }: ComponentProps<"div"> & {
     loop?: boolean;
     open?: boolean;
+    /** Field, item and heading density. @default "md" */
+    size?: SearchListSize;
 }): import("react").JSX.Element;
 export declare function SearchListField({ value, onValueChange, className, ...props }: Omit<ComponentProps<"input">, "value" | "onChange"> & {
     value?: string;

package/dist/types/src/components/sidebar/sidebar.d.ts

@@ -12,8 +12,13 @@ export interface SidebarItemContentProps {
     active?: boolean;
     children: ReactNode;
 }
-export declare function SidebarSection({ title, children }: SidebarSectionProps): import("react").JSX.Element;
+export declare function SidebarSection({ title, children, size, }: SidebarSectionProps & {
+    size?: SidebarSize;
+}): import("react").JSX.Element;
 /** Classes for a sidebar row; apply to the app's router link. */
 export type SidebarDensity = "regular" | "compact";
-export declare function sidebarItemClass(active?: boolean, density?: SidebarDensity): string;
-export declare function SidebarItemContent({ icon, count, active, children }: SidebarItemContentProps): import("react").JSX.Element;
+export type SidebarSize = "sm" | "md" | "lg";
+export declare function sidebarItemClass(active?: boolean, density?: SidebarDensity, size?: SidebarSize): string;
+export declare function SidebarItemContent({ icon, count, active, size, children, }: SidebarItemContentProps & {
+    size?: SidebarSize;
+}): import("react").JSX.Element;

package/dist/types/src/components/slosh-slider/slosh-slider.d.ts

@@ -1,3 +1,4 @@
+export type SloshSliderSize = "sm" | "md" | "lg";
 export interface SloshSliderProps {
     label: string;
     value?: number;
@@ -11,8 +12,10 @@ export interface SloshSliderProps {
     tilt?: number;
     /** Track corner, from square to a pill, 0–20. @default 20 */
     corner?: number;
+    /** Track height and knob scale. @default "md" */
+    size?: SloshSliderSize;
     disabled?: boolean;
     className?: string;
     formatValue?: (value: number) => string;
 }
-export declare function SloshSlider({ label, value, defaultValue, onChange, viscosity, momentum, tilt, corner, disabled, className, formatValue, }: SloshSliderProps): import("react").JSX.Element;
+export declare function SloshSlider({ label, value, defaultValue, onChange, viscosity, momentum, tilt, corner, size, disabled, className, formatValue, }: SloshSliderProps): import("react").JSX.Element;

package/dist/types/src/components/tooltip/tooltip-host.d.ts

@@ -1,3 +1,4 @@
+export type TooltipSize = "sm" | "md" | "lg";
 /**
  * Tooltips for any element with `data-tooltip`, on devices that can hover.
  * One listener for the whole app: a short delay before the first, then

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@passui/react",
-    "version": "0.1.39",
+    "version": "0.1.40",
     "description": "Passui: native React controls, design tokens, presentation and appearance.",
     "license": "MIT",
     "repository": {

package/src/components/code-block/code-block.tsx

@@ -1,12 +1,16 @@
 import { Fragment, type ComponentProps, type ReactNode } from "react"
 import { cn } from "../../lib/class-names"
 
-export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children"> {
+export type CodeBlockSize = "sm" | "md" | "lg"
+
+export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children" | "size"> {
     code: string
     /** Supply a highlighter's rendered pre/code element; source remains the fallback. */
     children?: ReactNode
     /** Show a nonselectable line gutter. @default true */
     lineNumbers?: boolean
+    /** Code font size, padding and line gutter scale. @default "md" */
+    size?: CodeBlockSize
 }
 
 /** Code presentation without shipping a highlighter or formatter to consumers. */
@@ -14,6 +18,7 @@ export function CodeBlock({
     code,
     children,
     lineNumbers = true,
+    size = "md",
     className,
     ...props
 }: CodeBlockProps) {
@@ -23,6 +28,7 @@ export function CodeBlock({
             {...props}
             className={cn("passui-code-block", className)}
             data-line-numbers={lineNumbers || undefined}
+            data-size={size}
         >
             {children ?? (
                 <pre>

package/src/components/one-time-code/one-time-code.tsx

@@ -11,6 +11,18 @@ import { cn } from "../../lib/class-names"
 
 export type OneTimeCodeStatus = "idle" | "verifying" | "success" | "error"
 export type OneTimeCodeFormat = "numeric" | "alphanumeric"
+export type OneTimeCodeSize = "sm" | "md" | "lg"
+
+const checkSizes: Record<OneTimeCodeSize, number> = {
+    sm: 20,
+    md: 24,
+    lg: 28,
+}
+const statusText: Record<OneTimeCodeSize, string> = {
+    sm: "mt-1.5 text-caption2",
+    md: "mt-2 text-footnote",
+    lg: "mt-2.5 text-subheadline",
+}
 export interface OneTimeCodeProps
     extends Omit<
         InputHTMLAttributes<HTMLInputElement>,
@@ -30,6 +42,8 @@ export interface OneTimeCodeProps
     status?: OneTimeCodeStatus
     /** Localized verification feedback announced without reading decorative cells. */
     statusLabel?: string
+    /** Cell height, digit text scale and check icon size. @default "md" */
+    size?: OneTimeCodeSize
 }
 
 /** Normalize common numeric keyboards and optional ASCII letters in one native field. */
@@ -60,6 +74,7 @@ export function OneTimeCode({
     ref,
     status = "idle",
     statusLabel,
+    size = "md",
     className,
     disabled,
     id: suppliedId,
@@ -85,6 +100,7 @@ export function OneTimeCode({
         <div
             className={cn("passui-one-time-code not-typeset", className)}
             data-status={status}
+            data-size={size}
             style={{ "--otp-length": count, "--otp-middle": (count - 1) / 2 } as CSSProperties}
         >
             <svg aria-hidden="true" width="0" height="0" className="absolute">
@@ -139,7 +155,11 @@ export function OneTimeCode({
                         </span>
                     ))}
                 </div>
-                <CheckIcon aria-hidden="true" className="passui-otp-check" size={24} />
+                <CheckIcon
+                    aria-hidden="true"
+                    className="passui-otp-check"
+                    size={checkSizes[size]}
+                />
                 <input
                     {...props}
                     ref={(node) => {
@@ -186,7 +206,7 @@ export function OneTimeCode({
                     id={`${id}-status`}
                     role="status"
                     className={cn(
-                        "mt-2 text-footnote",
+                        statusText[size],
                         status === "error" ? "text-danger" : "text-label-secondary"
                     )}
                 >

package/src/components/popover/popover.tsx

@@ -19,6 +19,12 @@ import {
 import { fitPopover, type PopoverFit } from "./popover-fit"
 
 export type PopoverOrigin = "top-left" | "top-right"
+export type PopoverSize = "sm" | "md"
+
+const surfaceRadius: Record<PopoverSize, string> = {
+    sm: "rounded-3xl",
+    md: "rounded-5xl",
+}
 
 export interface PopoverProps extends Omit<HTMLMotionProps<"div">, "children"> {
     open: boolean
@@ -27,6 +33,8 @@ export interface PopoverProps extends Omit<HTMLMotionProps<"div">, "children"> {
     origin?: PopoverOrigin
     /** Trigger whose shape the popover uses during its opening and closing motion. */
     anchorRef?: RefObject<HTMLElement | null>
+    /** Surface corner radius. @default "md" */
+    size?: PopoverSize
 }
 
 /**
@@ -42,6 +50,7 @@ export function Popover({ open, ...props }: PopoverProps) {
 function OpenPopover({
     origin = "top-left",
     anchorRef,
+    size = "md",
     className,
     style,
     children,
@@ -259,7 +268,8 @@ function OpenPopover({
                 anchorRef
                     ? "isolate [&>:not([data-popover-surface])]:opacity-[var(--popover-content-opacity)]"
                     : "glass-menu",
-                "absolute z-40 rounded-5xl outline-none",
+                "absolute z-40 outline-none",
+                surfaceRadius[size],
                 className
             )}
             {...props}
@@ -272,7 +282,10 @@ function OpenPopover({
                     onAnimationComplete={() => {
                         if (reveal) setSettled(true)
                     }}
-                    className="glass-menu pointer-events-none absolute top-0 left-0 -z-10 rounded-5xl"
+                    className={cn(
+                        "glass-menu pointer-events-none absolute top-0 left-0 -z-10",
+                        surfaceRadius[size]
+                    )}
                     style={{ width: "100%", height: "100%" }}
                     initial={reducedMotion || !reveal ? false : reveal}
                     animate={

package/src/components/search-list/search-list.tsx

@@ -10,6 +10,24 @@ import {
 } from "react"
 import { cn } from "../../lib/class-names"
 
+export type SearchListSize = "sm" | "md" | "lg"
+
+const fieldSizes: Record<SearchListSize, string> = {
+    sm: "min-h-8 w-full rounded-full border border-separator bg-fill/60 px-3 text-caption text-label outline-none focus-visible:ring-2 focus-visible:ring-accent-text/50",
+    md: "min-h-11 w-full rounded-full border border-separator bg-fill/60 px-4 text-subheadline text-label outline-none focus-visible:ring-2 focus-visible:ring-accent-text/50",
+    lg: "min-h-13 w-full rounded-full border border-separator bg-fill/60 px-5 text-body text-label outline-none focus-visible:ring-2 focus-visible:ring-accent-text/50",
+}
+const headingSizes: Record<SearchListSize, string> = {
+    sm: "px-1.5 py-1.5 text-caption2 font-medium text-label-tertiary",
+    md: "px-2 py-2 text-caption font-medium text-label-tertiary",
+    lg: "px-2.5 py-2.5 text-subheadline font-medium text-label-tertiary",
+}
+const itemSizes: Record<SearchListSize, string> = {
+    sm: "flex min-h-8 w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-footnote text-label hover:bg-fill aria-selected:bg-fill [@media(pointer:coarse)]:min-h-10",
+    md: "flex min-h-9 w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-subheadline text-label hover:bg-fill aria-selected:bg-fill [@media(pointer:coarse)]:min-h-11",
+    lg: "flex min-h-11 w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-body text-label hover:bg-fill aria-selected:bg-fill [@media(pointer:coarse)]:min-h-13",
+}
+
 type SearchState = {
     query: string
     setQuery: (query: string) => void
@@ -18,6 +36,7 @@ type SearchState = {
     open: boolean
     visible: number
     register: (id: string, visible: boolean | null) => void
+    size: SearchListSize
 }
 const SearchContext = createContext<SearchState | null>(null)
 function useSearch() {
@@ -29,12 +48,15 @@ function useSearch() {
 export function SearchList({
     loop = true,
     open = true,
+    size = "md",
     onKeyDown,
     className,
     ...props
 }: ComponentProps<"div"> & {
     loop?: boolean
     open?: boolean
+    /** Field, item and heading density. @default "md" */
+    size?: SearchListSize
 }) {
     const [query, setQuery] = useState("")
     const updateQuery = useCallback((next: string) => {
@@ -73,6 +95,7 @@ export function SearchList({
                 open,
                 visible: Object.values(results).filter(Boolean).length,
                 register,
+                size,
             }}
         >
             <div
@@ -148,10 +171,7 @@ export function SearchListField({
                 search.setQuery(event.target.value)
                 onValueChange?.(event.target.value)
             }}
-            className={cn(
-                "min-h-11 w-full rounded-full border border-separator bg-fill/60 px-4 text-subheadline text-label outline-none focus-visible:ring-2 focus-visible:ring-accent-text/50",
-                className
-            )}
+            className={cn(fieldSizes[search.size], className)}
         />
     )
 }
@@ -179,6 +199,7 @@ export function SearchListGroup({
 }: ComponentProps<"div"> & {
     heading?: React.ReactNode
 }) {
+    const search = useSearch()
     const id = useId()
     return (
         // biome-ignore lint/a11y/useSemanticElements: Listbox option groups are not form fieldsets.
@@ -189,7 +210,7 @@ export function SearchListGroup({
             aria-labelledby={heading ? id : undefined}
         >
             {heading && (
-                <div id={id} className="px-2 py-2 text-caption font-medium text-label-tertiary">
+                <div id={id} className={headingSizes[search.size]}>
                     {heading}
                 </div>
             )}
@@ -231,10 +252,7 @@ export function SearchListItem({
             data-search-result=""
             aria-selected={search.active === id}
             data-selected={search.active === id ? "true" : undefined}
-            className={cn(
-                "flex min-h-9 w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-subheadline text-label hover:bg-fill aria-selected:bg-fill [@media(pointer:coarse)]:min-h-11",
-                className
-            )}
+            className={cn(itemSizes[search.size], className)}
             onMouseDown={(event) => {
                 props.onMouseDown?.(event)
                 if (!event.defaultPrevented) event.preventDefault()

package/src/components/sidebar/sidebar.tsx

@@ -16,14 +16,15 @@ export interface SidebarItemContentProps {
     children: ReactNode
 }
 
-export function SidebarSection({ title, children }: SidebarSectionProps) {
+export function SidebarSection({
+    title,
+    children,
+    size = "md",
+}: SidebarSectionProps & { size?: SidebarSize }) {
     const headingId = useId()
     return (
         <section aria-labelledby={headingId} className="flex flex-col gap-0.5">
-            <h2
-                id={headingId}
-                className="px-2.5 pb-1.5 text-caption font-semibold text-label-tertiary"
-            >
+            <h2 id={headingId} className={sidebarHeadingSizes[size]}>
                 {title}
             </h2>
             {children}
@@ -33,20 +34,46 @@ export function SidebarSection({ title, children }: SidebarSectionProps) {
 
 /** Classes for a sidebar row; apply to the app's router link. */
 export type SidebarDensity = "regular" | "compact"
+export type SidebarSize = "sm" | "md" | "lg"
 
-export function sidebarItemClass(active?: boolean, density: SidebarDensity = "regular"): string {
+const sidebarItemSizes: Record<SidebarSize, string> = {
+    sm: "min-h-8 rounded-lg px-2 py-1 text-footnote [@media(pointer:coarse)]:min-h-10",
+    md: "rounded-2xl px-2.5 py-[7px] text-subheadline",
+    lg: "rounded-2xl px-3 py-2.5 text-body [@media(pointer:coarse)]:min-h-13",
+}
+const sidebarHeadingSizes: Record<SidebarSize, string> = {
+    sm: "px-2 pb-1 text-caption2 font-semibold text-label-tertiary",
+    md: "px-2.5 pb-1.5 text-caption font-semibold text-label-tertiary",
+    lg: "px-3 pb-2 text-subheadline font-semibold text-label-tertiary",
+}
+const sidebarCountSizes: Record<SidebarSize, string> = {
+    sm: "text-caption2 tabular-nums",
+    md: "text-footnote tabular-nums",
+    lg: "text-subheadline tabular-nums",
+}
+
+export function sidebarItemClass(
+    active?: boolean,
+    density: SidebarDensity = "regular",
+    size?: SidebarSize
+): string {
+    const resolved = size ?? (density === "compact" ? "sm" : "md")
     return cn(
         "group flex w-full items-center gap-2.5 text-label no-underline transition-colors duration-fast focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
-        density === "compact"
-            ? "min-h-8 rounded-lg px-2 py-1 text-footnote [@media(pointer:coarse)]:min-h-10"
-            : "rounded-2xl px-2.5 py-[7px] text-subheadline",
+        sidebarItemSizes[resolved],
         active
             ? "bg-fill font-medium"
             : "font-normal text-label-secondary hover:bg-fill/70 hover:text-label"
     )
 }
 
-export function SidebarItemContent({ icon, count, active, children }: SidebarItemContentProps) {
+export function SidebarItemContent({
+    icon,
+    count,
+    active,
+    size = "md",
+    children,
+}: SidebarItemContentProps & { size?: SidebarSize }) {
     return (
         <>
             {icon && (
@@ -63,7 +90,7 @@ export function SidebarItemContent({ icon, count, active, children }: SidebarIte
             {count !== undefined && (
                 <span
                     className={cn(
-                        "text-footnote tabular-nums",
+                        sidebarCountSizes[size],
                         active ? "text-accent-text" : "text-label-tertiary"
                     )}
                 >

package/src/components/slosh-slider/slosh-slider.tsx

@@ -5,6 +5,8 @@ import { cn } from "../../lib/class-names"
 import { clampRange as clamp } from "../../lib/range-value"
 import { stepLiquid } from "./liquid-step"
 
+export type SloshSliderSize = "sm" | "md" | "lg"
+
 export interface SloshSliderProps {
     label: string
     value?: number
@@ -18,6 +20,8 @@ export interface SloshSliderProps {
     tilt?: number
     /** Track corner, from square to a pill, 0–20. @default 20 */
     corner?: number
+    /** Track height and knob scale. @default "md" */
+    size?: SloshSliderSize
     disabled?: boolean
     className?: string
     formatValue?: (value: number) => string
@@ -44,6 +48,7 @@ export function SloshSlider({
     momentum = 55,
     tilt = 45,
     corner = 20,
+    size = "md",
     disabled = false,
     className,
     formatValue,
@@ -169,6 +174,7 @@ export function SloshSlider({
         <div
             className={cn("passui-slosh-slider not-typeset", disabled && "opacity-40", className)}
             style={{ "--slosh-radius": `${clamp(corner, 0, 20)}px` } as CSSProperties}
+            data-size={size}
         >
             {/* Nothing but the track: the liquid is the value's motion, not a
             second numeric readout that lags and overshoots beside it. */}

package/src/components/tooltip/tooltip-host.tsx

@@ -1,6 +1,15 @@
 import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 import { spring } from "../../motion/transitions"
 import { useEffect, useId, useState } from "react"
+import { cn } from "../../lib/class-names"
+
+export type TooltipSize = "sm" | "md" | "lg"
+
+const tooltipClasses: Record<TooltipSize, string> = {
+    sm: "pointer-events-none fixed z-[80] max-w-[200px] rounded-md bg-inverse px-2 py-1 text-center text-caption2 leading-tight font-medium text-on-inverse shadow-lg",
+    md: "pointer-events-none fixed z-[80] max-w-[240px] rounded-md bg-inverse px-2.5 py-1.5 text-center text-caption leading-tight font-medium text-on-inverse shadow-lg",
+    lg: "pointer-events-none fixed z-[80] max-w-[280px] rounded-md bg-inverse px-3 py-2 text-center text-footnote leading-tight font-medium text-on-inverse shadow-lg",
+}
 
 interface Tip {
     text: string
@@ -8,6 +17,7 @@ interface Tip {
     y: number
     /** Shown above the element when there's no room below. */
     above: boolean
+    size: TooltipSize
 }
 
 const DELAY = 450
@@ -45,11 +55,14 @@ export function TooltipHost() {
             if (!text) return
             const rect = element.getBoundingClientRect()
             const above = rect.bottom + 40 > window.innerHeight
+            const sizeAttr = element.getAttribute("data-tooltip-size")
+            const size: TooltipSize = sizeAttr === "sm" || sizeAttr === "lg" ? sizeAttr : "md"
             setTip({
                 text,
                 x: rect.left + rect.width / 2,
                 y: above ? rect.top - MARGIN : rect.bottom + MARGIN,
                 above,
+                size,
             })
             lastShown = Date.now()
         }
@@ -121,7 +134,7 @@ export function TooltipHost() {
                     id={tooltipId}
                     key={tip.text + tip.x}
                     role="tooltip"
-                    className="pointer-events-none fixed z-[80] max-w-[240px] rounded-md bg-inverse px-2.5 py-1.5 text-center text-caption leading-tight font-medium text-on-inverse shadow-lg"
+                    className={cn(tooltipClasses[tip.size])}
                     style={{
                         left: Math.min(Math.max(tip.x, 128), window.innerWidth - 128),
                         top: tip.y,

package/src/styles/code-block.css

@@ -24,6 +24,18 @@
         user-select: none;
     }
     .passui-code-block:not([data-line-numbers]) pre { padding-inline-start: 1rem; }
+    .passui-code-block[data-size="sm"] pre {
+        padding-block: 0.75rem;
+        font-size: var(--text-caption);
+        line-height: 1.6;
+    }
+    .passui-code-block[data-size="sm"][data-line-numbers] .line::before { width: 2.5rem; margin-inline-end: 1rem; }
+    .passui-code-block[data-size="lg"] pre {
+        padding-block: 1.25rem;
+        font-size: var(--text-subheadline);
+        line-height: 1.8;
+    }
+    .passui-code-block[data-size="lg"][data-line-numbers] .line::before { width: 3.5rem; margin-inline-end: 1.5rem; }
     .passui-code-block .shiki, .passui-code-block .shiki span { color: var(--shiki-light); background: transparent !important; }
     @media (prefers-color-scheme: dark) {
         .passui-code-block .shiki, .passui-code-block .shiki span { color: var(--shiki-dark); }

package/src/styles/motion-controls.css

@@ -80,6 +80,10 @@
     .passui-one-time-code:is([data-status="verifying"], [data-status="success"]) .passui-otp-capsule { opacity: 1; transform: translateX(-50%) scaleX(1); }
     .passui-one-time-code:is([data-status="verifying"], [data-status="success"]) .passui-otp-digits { opacity: 0; }
     .passui-otp-check { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--color-on-accent); opacity: 0; pointer-events: none; }
+    .passui-one-time-code[data-size="sm"] .passui-otp-row { height: 2.5rem; }
+    .passui-one-time-code[data-size="sm"] .passui-otp-digit { font-size: var(--text-title); }
+    .passui-one-time-code[data-size="lg"] .passui-otp-row { height: 3.5rem; }
+    .passui-one-time-code[data-size="lg"] .passui-otp-digit { font-size: var(--text-title2); }
     .passui-one-time-code[data-status="success"] .passui-otp-check { opacity: 1; transition: opacity 160ms 240ms; }
     /* A wrong code shivers, then drains right to left. Selecting the single
        input afterward lets the next keystroke replace it without a trap. */
@@ -129,6 +133,10 @@
             calc(100% - var(--slosh-lean, 0px)) 100%, 0 100%);
     }
     .passui-slosh-track:dir(rtl) .passui-slosh-fill { transform: scaleX(-1); }
+    .passui-slosh-slider[data-size="sm"] .passui-slosh-track { height: 2rem; }
+    .passui-slosh-slider[data-size="sm"] .passui-slosh-knob { top: 4px; bottom: 4px; }
+    .passui-slosh-slider[data-size="lg"] .passui-slosh-track { height: 3rem; }
+    .passui-slosh-slider[data-size="lg"] .passui-slosh-knob { top: 8px; bottom: 8px; width: 4px; margin-inline-start: -2px; }
     .passui-slosh-knob {
         position: absolute;
         top: 6px;