@usefidel/design-system 0.16.0 → 0.18.0

package/dist/index.css

@@ -1519,6 +1519,15 @@
 .fds-dot--danger {
   background: var(--color-destructive, #eb2d2d);
 }
+.fds-tag__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-text-secondary, #525252);
+}
+.fds-tag__icon > svg {
+  width: 14px;
+  height: 14px;
+}
 
 /* src/components/MultiSelect/multi-select.css */
 .fds-multiselect {
@@ -1915,6 +1924,103 @@
   filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.13));
 }
 
+/* src/components/Callout/callout.css */
+.fds-callout {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+  border: 1px solid var(--fds-callout-border);
+  border-radius: var(--radius-lg, 12px);
+  background: var(--fds-callout-bg);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  color: var(--color-text, #171717);
+}
+.fds-callout__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: flex-start;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md, 8px);
+  background: var(--color-bg, #ffffff);
+  color: var(--fds-callout-icon);
+}
+.fds-callout__icon > svg {
+  width: 16px;
+  height: 16px;
+}
+.fds-callout__body {
+  flex: 1;
+  min-width: 0;
+}
+.fds-callout__title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  margin: 0;
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 20px;
+  font-weight: var(--font-weight-semibold, 600);
+}
+.fds-callout__aside {
+  display: inline-flex;
+}
+.fds-callout__text {
+  margin-top: 2px;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--color-text-secondary, #525252);
+}
+.fds-callout__action {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+}
+@media (max-width: 480px) {
+  .fds-callout {
+    flex-wrap: wrap;
+  }
+  .fds-callout__action {
+    flex-basis: 100%;
+    padding-left: 46px;
+  }
+}
+.fds-callout--neutral {
+  --fds-callout-bg: var(--color-surface-subtle, #fafafa);
+  --fds-callout-border: var(--color-border, #e5e5e5);
+  --fds-callout-icon: var(--color-text-secondary, #525252);
+}
+.fds-callout--accent {
+  --fds-callout-bg: var(--color-accent-subtle, #fff7ed);
+  --fds-callout-border: var(--color-accent-muted, #fdba74);
+  --fds-callout-icon: var(--color-accent, #ea580c);
+}
+.fds-callout--info {
+  --fds-callout-bg: var(--color-info-surface, #eff6ff);
+  --fds-callout-border: var(--color-info, #93c5fd);
+  --fds-callout-icon: var(--color-info-strong, #2563eb);
+}
+.fds-callout--success {
+  --fds-callout-bg: var(--color-success-bg, #f0fdf4);
+  --fds-callout-border: var(--color-success, #86efac);
+  --fds-callout-icon: var(--color-success-text, #15803d);
+}
+.fds-callout--warning {
+  --fds-callout-bg: var(--color-warning-bg, #fffbeb);
+  --fds-callout-border: var(--color-warning-border, #fcd34d);
+  --fds-callout-icon: var(--color-warning-text, #92400e);
+}
+.fds-callout--danger {
+  --fds-callout-bg: var(--color-error-bg, #fef2f2);
+  --fds-callout-border: var(--color-error-border, #fecaca);
+  --fds-callout-icon: var(--color-destructive, #eb2d2d);
+}
+
 /* src/components/Skeleton/skeleton.css */
 .fds-skeleton {
   display: block;
@@ -1952,3 +2058,374 @@
     animation: none;
   }
 }
+
+/* src/components/Card/card.css */
+.fds-card {
+  box-sizing: border-box;
+  border-radius: var(--radius-2xl, 16px);
+  color: var(--color-text, #171717);
+}
+.fds-card--subtle {
+  background: var(--color-surface-subtle, #fafafa);
+  border: 1px solid var(--color-border-light, #f5f5f5);
+}
+.fds-card--default {
+  background: var(--color-bg, #ffffff);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-xl, 12px);
+}
+.fds-card--plain {
+  background: var(--color-bg, #ffffff);
+  border: 1px solid transparent;
+  border-radius: var(--radius-xl, 12px);
+}
+.fds-card--pad-none {
+  padding: 0;
+}
+.fds-card--pad-md {
+  padding: var(--spacing-6, 24px);
+}
+.fds-card--pad-lg {
+  padding: var(--spacing-10, 40px) var(--spacing-12, 48px);
+}
+@media (max-width: 600px) {
+  .fds-card--pad-lg {
+    padding: var(--spacing-6, 24px);
+  }
+}
+
+/* src/components/Stat/stat.css */
+.fds-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1, 4px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+}
+.fds-stat__label {
+  margin: 0;
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 20px;
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-secondary, #525252);
+}
+.fds-stat__value {
+  margin: 0;
+  font-size: var(--font-size-display-md, 36px);
+  line-height: 44px;
+  font-weight: var(--font-weight-semibold, 600);
+  letter-spacing: -0.02em;
+  color: var(--color-text, #171717);
+  font-variant-numeric: tabular-nums;
+}
+.fds-stat__detail {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2, 8px);
+  margin-top: var(--spacing-3, 12px);
+}
+
+/* src/components/Checkbox/checkbox.css */
+.fds-checkbox {
+  display: inline-flex;
+  position: relative;
+}
+.fds-checkbox__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.fds-checkbox__input:disabled {
+  cursor: not-allowed;
+}
+.fds-checkbox__control {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-2, 8px);
+  cursor: pointer;
+}
+.fds-checkbox__box {
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 3px;
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-sm, 4px);
+  background: var(--color-bg, #ffffff);
+  color: var(--color-bg, #ffffff);
+  transition: background-color var(--duration-quick, 150ms) ease, border-color var(--duration-quick, 150ms) ease;
+}
+.fds-checkbox__control:not(:has(.fds-checkbox__text)) .fds-checkbox__box {
+  margin-top: 0;
+}
+.fds-checkbox__tick,
+.fds-checkbox__dash {
+  grid-area: 1 / 1;
+  width: 10px;
+  height: 10px;
+  visibility: hidden;
+}
+.fds-checkbox__input:checked ~ .fds-checkbox__control .fds-checkbox__box,
+.fds-checkbox__input:indeterminate ~ .fds-checkbox__control .fds-checkbox__box {
+  background: var(--color-text, #171717);
+  border-color: var(--color-text, #171717);
+}
+.fds-checkbox__input:checked:not(:indeterminate) ~ .fds-checkbox__control .fds-checkbox__tick {
+  visibility: visible;
+}
+.fds-checkbox__input:indeterminate ~ .fds-checkbox__control .fds-checkbox__dash {
+  visibility: visible;
+}
+.fds-checkbox__input:hover:not(:disabled):not(:checked) ~ .fds-checkbox__control .fds-checkbox__box {
+  border-color: var(--color-text-secondary, #525252);
+}
+.fds-checkbox__input:focus-visible ~ .fds-checkbox__control .fds-checkbox__box {
+  outline: 2px solid var(--color-focus, #ea580c);
+  outline-offset: 2px;
+}
+.fds-checkbox[data-disabled] .fds-checkbox__box {
+  opacity: 0.5;
+}
+.fds-checkbox[data-disabled] .fds-checkbox__label,
+.fds-checkbox[data-disabled] .fds-checkbox__description {
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-checkbox__text {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.fds-checkbox__label {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 22px;
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+}
+.fds-checkbox__description {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 22px;
+  color: var(--color-text-secondary, #525252);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-checkbox__box {
+    transition: none;
+  }
+}
+
+/* src/components/Radio/radio.css */
+.fds-radio {
+  display: inline-flex;
+  position: relative;
+}
+.fds-radio__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.fds-radio__input:disabled {
+  cursor: not-allowed;
+}
+.fds-radio__control {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-2, 8px);
+  cursor: pointer;
+}
+.fds-radio__circle {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 3px;
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-bg, #ffffff);
+  transition: border-color var(--duration-quick, 150ms) ease, border-width var(--duration-quick, 150ms) ease;
+}
+.fds-radio__control:not(:has(.fds-radio__text)) .fds-radio__circle {
+  margin-top: 0;
+}
+.fds-radio__input:checked ~ .fds-radio__control .fds-radio__circle {
+  border: 5px solid var(--color-text, #171717);
+}
+.fds-radio__input:hover:not(:disabled):not(:checked) ~ .fds-radio__control .fds-radio__circle {
+  border-color: var(--color-text-secondary, #525252);
+}
+.fds-radio__input:focus-visible ~ .fds-radio__control .fds-radio__circle {
+  outline: 2px solid var(--color-focus, #ea580c);
+  outline-offset: 2px;
+}
+.fds-radio[data-disabled] .fds-radio__circle {
+  opacity: 0.5;
+}
+.fds-radio[data-disabled] .fds-radio__label,
+.fds-radio[data-disabled] .fds-radio__description {
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-radio__text {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.fds-radio__label {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 22px;
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+}
+.fds-radio__description {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 22px;
+  color: var(--color-text-secondary, #525252);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-radio__circle {
+    transition: none;
+  }
+}
+
+/* src/components/Accordion/accordion.css */
+.fds-accordion {
+  box-sizing: border-box;
+  background: var(--color-bg, #ffffff);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-xl, 12px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  color: var(--color-text, #171717);
+}
+.fds-accordion + .fds-accordion {
+  margin-top: var(--spacing-3, 12px);
+}
+.fds-accordion__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+  padding: 0 var(--spacing-4, 16px) 0 0;
+}
+.fds-accordion__trigger {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+  padding: var(--spacing-4, 16px);
+  margin: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--radius-xl, 12px);
+}
+.fds-accordion__trigger:focus-visible {
+  outline: 2px solid var(--color-focus, #ea580c);
+  outline-offset: -2px;
+}
+.fds-accordion__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  flex-shrink: 0;
+}
+.fds-accordion__chevron {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-text-secondary, #525252);
+  cursor: pointer;
+  transition: transform var(--duration-quick, 150ms) ease;
+}
+.fds-accordion[data-open] .fds-accordion__chevron {
+  transform: rotate(180deg);
+}
+.fds-accordion__body {
+  padding: 0 var(--spacing-4, 16px) var(--spacing-4, 16px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-accordion__chevron {
+    transition: none;
+  }
+}
+
+/* src/components/StepList/step-list.css */
+.fds-steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 12px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+}
+.fds-steps__step {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+  min-height: 54px;
+  padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-lg, 8px);
+  background: var(--color-surface-subtle, #fafafa);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 20px;
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-steps__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.fds-steps__step--done {
+  background: var(--color-text, #171717);
+  border-color: var(--color-text, #171717);
+  color: var(--color-bg, #ffffff);
+  font-weight: var(--font-weight-medium, 500);
+}
+.fds-steps__step--active {
+  background: var(--color-surface, #f5f5f5);
+  color: var(--color-text, #171717);
+  font-weight: var(--font-weight-medium, 500);
+}
+.fds-steps__step--failed {
+  background: var(--color-error-bg, #fef2f2);
+  border-color: var(--color-error-border, #fecaca);
+  color: var(--color-error-text, #991b1b);
+  font-weight: var(--font-weight-medium, 500);
+}
+.fds-steps__spinner {
+  animation: fds-steps-spin 1.2s linear infinite;
+}
+@keyframes fds-steps-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.fds-steps__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-steps__spinner {
+    animation: none;
+  }
+}

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link'
 /** High-contrast near-black, for a page's main create action ("New comparison"). */
@@ -26,6 +26,25 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare function Button({ variant, size, leftIcon, rightIcon, type, className, children, ...rest }: ButtonProps): react.JSX.Element;
 
+interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Where the link goes. */
+    href: string;
+    /** Visual style. @default 'primary' */
+    variant?: ButtonVariant;
+    /** Size step. @default 'medium' */
+    size?: ButtonSize;
+    /** Optional leading icon (rendered in a 20px slot). */
+    leftIcon?: ReactNode;
+    /** Optional trailing icon (rendered in a 20px slot). */
+    rightIcon?: ReactNode;
+}
+/**
+ * A link that looks like a Button. Use it when the action navigates (to a
+ * page or another site) rather than doing something on this page, so the
+ * browser keeps link behaviour: open in a new tab, copy link, status bar URL.
+ */
+declare function ButtonLink({ variant, size, leftIcon, rightIcon, className, children, ...rest }: ButtonLinkProps): react.JSX.Element;
+
 interface MismatchProperty {
     /** Property label, e.g. "color", "font-size". */
     label: string;
@@ -443,6 +462,8 @@ declare function Badge({ tone, icon, className, children, ...rest }: BadgeProps)
 interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     /** Colour of the leading dot. Leave out for no dot. */
     dot?: Tone;
+    /** Leading icon, drawn at 14px, e.g. a repository or branch mark. */
+    icon?: ReactNode;
     children: ReactNode;
 }
 /**
@@ -450,7 +471,7 @@ interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * optional coloured dot. Measured from Figma "✅Project" comparison-type chip
  * (node 231:59808).
  */
-declare function Tag({ dot, className, children, ...rest }: TagProps): react.JSX.Element;
+declare function Tag({ dot, icon, className, children, ...rest }: TagProps): react.JSX.Element;
 
 interface MultiSelectOption {
     value: string;
@@ -536,6 +557,28 @@ declare function StackedCardsIllustration({ className }: {
     className?: string;
 }): react.JSX.Element;
 
+/** Colour role. `accent` is the brand tint, for a prompt to act (an upgrade, a next step). */
+type CalloutTone = Tone | 'accent';
+interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Colour role. @default 'neutral' */
+    tone?: CalloutTone;
+    /** Leading icon, drawn at 16px in a 32px tile. */
+    icon?: ReactNode;
+    /** One-line heading. */
+    title: ReactNode;
+    /** Shown after the title, e.g. a Badge. */
+    titleAside?: ReactNode;
+    /** Supporting text under the title. */
+    children?: ReactNode;
+    /** Trailing action(s), e.g. a ButtonLink. Moves under the text on phones. */
+    action?: ReactNode;
+}
+/**
+ * Fidel design-system Callout: a tinted row that tells the reader something
+ * about the page they are on and, optionally, what to do about it.
+ */
+declare function Callout({ tone, icon, title, titleAside, children, action, className, ...rest }: CalloutProps): react.JSX.Element;
+
 type SkeletonShape = 'rect' | 'text' | 'circle';
 interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /** rect: a block. text: line(s) at text height. circle: an avatar or icon. @default 'rect' */
@@ -562,4 +605,105 @@ interface SkeletonGroupProps extends HTMLAttributes<HTMLDivElement> {
 /** Wraps a skeleton layout and announces it once as loading (role="status"). */
 declare function SkeletonGroup({ label, className, children, ...rest }: SkeletonGroupProps): react.JSX.Element;
 
-export { AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, TabNav, type TabNavProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };
+/** Surface colour. `subtle` is the grey panel, `default` white with a border, `plain` white without one. */
+type CardTone = 'subtle' | 'default' | 'plain';
+type CardPadding = 'none' | 'md' | 'lg';
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** @default 'default' */
+    tone?: CardTone;
+    /** Inner spacing: 24px (`md`) or 40px (`lg`, 24px on phones). @default 'md' */
+    padding?: CardPadding;
+    children?: ReactNode;
+}
+/**
+ * Fidel design-system Card: a rounded surface that groups related content.
+ * It has no layout of its own; put anything inside. Measured from Figma
+ * "Integrations" frames (nodes 231:66631, 231:67267, 231:67335).
+ */
+declare function Card({ tone, padding, className, children, ...rest }: CardProps): react.JSX.Element;
+
+interface StatProps extends HTMLAttributes<HTMLDivElement> {
+    /** What the number counts, e.g. "Tokens found". */
+    label: ReactNode;
+    /** The figure itself. */
+    value: ReactNode;
+    /** Detail under the figure, e.g. a row of Tags. */
+    children?: ReactNode;
+}
+/**
+ * Fidel design-system Stat: a caption, a large figure and optional detail.
+ * Has no surface; wrap it in a Card. Measured from Figma "Design System
+ * connected" (node 231:67335).
+ */
+declare function Stat({ label, value, children, className, ...rest }: StatProps): react.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Text beside the box. Without one, pass `aria-label`. */
+    label?: ReactNode;
+    /** Secondary line under the label. */
+    description?: ReactNode;
+    /** Shows a dash for "some of these"; screen readers announce it as mixed. */
+    indeterminate?: boolean;
+}
+/**
+ * Fidel design-system Checkbox. Renders a native checkbox, visually hidden
+ * over a drawn box, so checked/indeterminate/disabled/focus come from the
+ * input itself and every standard input attribute passes through. Built like
+ * Toggle; checked is ink-filled to match the Integrations frames.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Text beside the circle. Without one, pass `aria-label`. */
+    label?: ReactNode;
+    /** Secondary line under the label. */
+    description?: ReactNode;
+}
+/**
+ * Fidel design-system Radio: one choice of several. Give every Radio in a
+ * set the same `name`, and wrap the set in a `role="radiogroup"` element (or
+ * a fieldset) with a label. Built like Checkbox: a native input over a drawn
+ * circle, ink-filled when chosen.
+ */
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Header content, always visible. Clicking it opens and closes the body. */
+    summary: ReactNode;
+    /**
+     * Controls in the header that do their own thing, e.g. a Retry button.
+     * Kept outside the toggle so they stay separate keyboard stops.
+     */
+    actions?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Body, shown while open. */
+    children?: ReactNode;
+}
+/**
+ * Fidel design-system Accordion: one row that expands to show more. Stack
+ * several for a list. The header is a button with `aria-expanded`; the
+ * chevron on the right points down when closed and up when open.
+ */
+declare function Accordion({ summary, actions, open: openProp, defaultOpen, onOpenChange, children, className, ...rest }: AccordionProps): react.JSX.Element;
+
+type StepStatus = 'done' | 'active' | 'pending' | 'failed';
+interface Step {
+    id: string;
+    label: ReactNode;
+    status: StepStatus;
+}
+interface StepListProps extends Omit<HTMLAttributes<HTMLOListElement>, 'children'> {
+    steps: Step[];
+}
+/**
+ * Fidel design-system StepList: an ordered list of steps, each done, in
+ * progress, not started or failed. The in-progress step is marked
+ * `aria-current="step"`. Measured from Figma "Scanning" (node 231:67267).
+ */
+declare function StepList({ steps, className, ...rest }: StepListProps): react.JSX.Element;
+
+export { Accordion, type AccordionProps, AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, Radio, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, type Step, StepList, type StepListProps, type StepStatus, TabNav, type TabNavProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };