@writedocs/generator 0.4.8 → 0.4.10

package/src/components/ApiReferencePanel.astro

@@ -15,6 +15,7 @@ import {
   findOperationFile,
   type OpenApiOperation,
 } from '../lib/openapi-render';
+import { parseOpenApiRef } from '../lib/openapi-ref.js';
 import { loadDocsConfig, resolveCodeblockTheme } from '../lib/config';
 import ApiLangSelect from './ApiLangSelect.astro';
 
@@ -64,8 +65,11 @@ const SNIPPET_THEMES = resolveCodeblockTheme(docsConfig);
 // writedocs' CORS proxy - see PROXY_BASE_URL in the <script> below.
 const proxyEnabled = docsConfig.api.proxy;
 
-const [method = '', urlPath = ''] = operation.trim().split(/\s+/, 2);
-const opFile = findOperationFile(contentDir, method, urlPath);
+// "METHOD /path", or Mintlify's "spec.json METHOD /path" - see lib/openapi-ref.js.
+const ref = parseOpenApiRef(operation);
+const method = ref?.method ?? '';
+const urlPath = ref?.path ?? '';
+const opFile = ref ? findOperationFile(contentDir, method, urlPath, ref.spec) : null;
 const op: OpenApiOperation | null = opFile ? JSON.parse(fs.readFileSync(opFile, 'utf-8')) : null;
 
 // ApiPlayground.astro (rendered in the article column) already shows a

package/src/components/AppIcon.astro

@@ -7,7 +7,7 @@
 // and Card.astro (the two places writedocs.json icon strings get rendered)
 // don't each need their own copy of the resolveIcon() call + branch.
 import { Icon } from 'astro-icon/components';
-import { resolveIcon } from '../lib/config';
+import { resolveIcon, iconExists } from '../lib/config';
 
 interface Props {
   icon?: string;
@@ -21,7 +21,19 @@ interface Props {
   style?: string;
 }
 const { icon, class: className = 'wd-icon', style } = Astro.props as Props;
-const resolved = icon ? resolveIcon(icon) : null;
+// An icon name no installed collection has renders nothing, with a warning
+// (once per name - a sidebar icon renders on every page), instead of
+// failing the whole build the way astro-icon does on a missing name.
+// `writedocs validate` lists the same names ahead of time.
+let resolved = icon ? resolveIcon(icon) : null;
+if (icon && resolved?.kind === 'iconify' && !iconExists(icon)) {
+  const warned: Set<string> = ((globalThis as any).__wdWarnedIcons ??= new Set());
+  if (!warned.has(icon)) {
+    warned.add(icon);
+    console.warn(`[writedocs] unknown icon "${icon}" - no installed icon set has it, so it's left out.`);
+  }
+  resolved = null;
+}
 ---
 {resolved && (
   resolved.kind === 'iconify' ? (

package/src/components/Badge.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // A small inline label - status indicators, version tags, "Beta"/"New"
 // markers - modeled on Mintlify's own Badge
 // (https://www.mintlify.com/docs/components/badge). Renders as an
@@ -42,6 +43,7 @@ const shapeClass = shape === 'pill' ? 'pill' : 'rounded';
     `wd-badge-${shapeClass}`,
     stroke && 'wd-badge-stroke',
     disabled && 'wd-badge-disabled',
+    extraClasses(Astro.props),
   ]}
 >
   {icon && <AppIcon icon={icon} class="wd-badge-icon" />}<slot />

package/src/components/Callout.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // See src/components/{Note,Tip,Warning,Danger,Info,Check}.astro - one thin
 // wrapper per `type` below, each just `<Callout type="x">` under the
 // hood, so a page can write either `<Callout type="info">` or the
@@ -51,7 +52,7 @@ function slugify(value: string): string {
 const titleId = title ? (_titleId ?? slugify(title)) : undefined;
 ---
 
-<div class:list={["wd-callout", `wd-callout-${type}`, { "wd-callout-titled": Boolean(title) }]} style={accentStyle}>
+<div class:list={["wd-callout", `wd-callout-${type}`, { "wd-callout-titled": Boolean(title) }, extraClasses(Astro.props)]} style={accentStyle}>
   <AppIcon icon={icon ?? icons[type]} class="wd-callout-icon" />
   <div class="wd-callout-content">
     {

package/src/components/Card.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 import AppIcon from './AppIcon.astro';
 
 // Three visual variants, chosen by which optional prop is set - never more
@@ -42,7 +43,7 @@ const KNOWN_METHODS = ['get', 'post', 'put', 'patch', 'delete'];
 const methodLower = method?.toLowerCase();
 const methodClass = methodLower && KNOWN_METHODS.includes(methodLower) ? methodLower : 'other';
 ---
-<Tag class:list={['wd-card', { 'wd-card-horizontal': horizontal, 'wd-card-has-arrow': arrow && href }]} href={href}>
+<Tag class:list={['wd-card', { 'wd-card-horizontal': horizontal, 'wd-card-has-arrow': arrow && href }, extraClasses(Astro.props)]} href={href}>
   {img && <img src={img} alt="" class="wd-card-image" />}
   {!img && <AppIcon icon={icon} class="wd-card-icon" style={iconStyle} />}
   <div class="wd-card-text">

package/src/components/CardGroup.astro

@@ -1,10 +1,11 @@
 ---
+import { extraClasses } from './class-names';
 interface Props {
   cols?: number;
 }
 const { cols = 2 } = Astro.props as Props;
 ---
-<div class="wd-card-group" style={`--wd-cols: ${cols}`}>
+<div class:list={["wd-card-group", extraClasses(Astro.props)]} style={`--wd-cols: ${cols}`}>
   <slot />
 </div>
 <style>

package/src/components/Check.astro

@@ -10,4 +10,4 @@ interface Props {
 }
 const { title, _titleId } = Astro.props as Props;
 ---
-<Callout type="check" title={title} _titleId={_titleId}><slot /></Callout>
+<Callout type="check" title={title} _titleId={_titleId} class={Astro.props.class} className={Astro.props.className}><slot /></Callout>

package/src/components/CodeBlock.astro

@@ -0,0 +1,94 @@
+---
+// Mintlify's <CodeBlock> - a code block from props instead of a ``` fence,
+// for code a page builds up in a component. Renders through the same Shiki
+// setup and the same writedocs:code-block transformer as a fenced block
+// (see astro.config.mjs's markdown.shikiConfig), so title, icon, line
+// numbers, wrap, copy button, expandable, highlight and focus all look and
+// behave the same.
+//
+// The code is the component's children (or a `code` prop). Mintlify's
+// `highlight`/`focus` are stringified arrays ("[1,3,4]"); ranges like
+// "1-3" work too.
+import { Code } from 'astro:components';
+import { extraClasses } from './class-names';
+import {
+  transformerMetaHighlight,
+  transformerMetaWordHighlight,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight,
+  transformerNotationFocus,
+  transformerNotationDiff,
+  transformerNotationErrorLevel,
+} from '@shikijs/transformers';
+import { codeBlockTransformer } from '../lib/shiki-code-block.js';
+import { loadDocsConfig, resolveCodeblockTheme } from '../lib/config';
+
+interface Props {
+  language?: string;
+  filename?: string;
+  icon?: string;
+  lines?: boolean;
+  wrap?: boolean;
+  nocopy?: boolean;
+  expandable?: boolean;
+  highlight?: string | number[];
+  focus?: string | number[];
+  code?: string;
+}
+const { language = 'text', filename, icon, lines, wrap, nocopy, expandable, highlight, focus, code: codeProp } = Astro.props as Props;
+
+// Slot content arrives as rendered HTML text - undo its entity escaping.
+function unescape(html: string): string {
+  return html
+    .replace(/<[^>]+>/g, '')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&#x27;/g, "'")
+    .replace(/&amp;/g, '&');
+}
+const code = (codeProp ?? unescape(await Astro.slots.render('default'))).replace(/^\n+|\s+$/g, '');
+
+const ranges = (value: string | number[] | undefined) =>
+  value === undefined ? '' : (Array.isArray(value) ? value.join(',') : String(value).replace(/[\[\]\s]/g, ''));
+const quoted = (value: string) => `"${value.replace(/"/g, "'")}"`;
+const meta = [
+  filename ? `title=${quoted(filename)}` : '',
+  icon ? `icon=${quoted(icon)}` : '',
+  lines ? 'lines' : '',
+  wrap ? 'wrap' : '',
+  nocopy ? 'nocopy' : '',
+  expandable ? 'expandable' : '',
+  ranges(highlight) ? `highlight={${ranges(highlight)}}` : '',
+  ranges(focus) ? `focus={${ranges(focus)}}` : '',
+]
+  .filter(Boolean)
+  .join(' ');
+
+const contentDir = process.env.WRITEDOCS_CONTENT_DIR || process.cwd();
+const themes = resolveCodeblockTheme(loadDocsConfig(contentDir));
+const transformers = [
+  transformerMetaHighlight(),
+  transformerMetaWordHighlight(),
+  transformerNotationHighlight(),
+  transformerNotationWordHighlight(),
+  transformerNotationFocus(),
+  transformerNotationDiff(),
+  transformerNotationErrorLevel(),
+  codeBlockTransformer(),
+];
+const extras = extraClasses(Astro.props);
+---
+{
+  // The block's own root (.wd-code-block) is built by the Shiki transformer,
+  // so `className`/`class` goes on a wrapper around it - only when given, so
+  // a plain CodeBlock renders exactly like a fenced block.
+  extras.length > 0 ? (
+    <div class:list={extras}>
+      <Code code={code} lang={language as any} meta={meta} themes={themes} transformers={transformers} />
+    </div>
+  ) : (
+    <Code code={code} lang={language as any} meta={meta} themes={themes} transformers={transformers} />
+  )
+}

package/src/components/CodeGroup.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // `dropdown` is only ever passed down from RequestExample/
 // ResponseExample.astro today (CodeGroup itself is never used with it
 // directly in any fixture/doc) - kept as a real prop rather than a
@@ -9,7 +10,7 @@ interface Props {
 }
 const { dropdown = false } = Astro.props as Props;
 ---
-<div class="wd-codegroup" data-dropdown={dropdown ? "true" : undefined}>
+<div class:list={["wd-codegroup", extraClasses(Astro.props)]} data-dropdown={dropdown ? "true" : undefined}>
   <slot />
 </div>
 <script>

package/src/components/Color.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Mintlify's <Color> - a palette of <Color.Item> swatches. `variant`:
 //   compact (default) - one grid of swatches.
 //   table             - <Color.Row title="..."> rows, each a titled line of
@@ -10,7 +11,7 @@ interface Props {
 }
 const { variant = 'compact' } = Astro.props as Props;
 ---
-<div class:list={['wd-color', `wd-color-${variant}`]}><slot /></div>
+<div class:list={['wd-color', `wd-color-${variant}`, extraClasses(Astro.props)]}><slot /></div>
 <script>
   // Click (or Enter/Space) on a swatch copies the value currently shown -
   // for a light/dark pair, the one matching the site's theme right now.

package/src/components/ColorItem.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Mintlify's <Color.Item name="..." value="..."> - one swatch. `value` is
 // any CSS color, or { light, dark } for a theme-aware pair: the swatch and
 // the value text switch with the site's theme toggle ([data-theme] on
@@ -15,7 +16,7 @@ const themed = typeof value === 'object' && value !== null && light !== dark;
 const style = light ? `--wd-swatch-light: ${light}; --wd-swatch-dark: ${dark ?? light}` : undefined;
 ---
 <div
-  class="wd-color-item"
+  class:list={['wd-color-item', extraClasses(Astro.props)]}
   data-light={light}
   data-dark={dark}
   role={light ? 'button' : undefined}

package/src/components/ColorRow.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Mintlify's <Color.Row title="..."> - one titled row inside
 // <Color variant="table">. `title` takes inline Markdown.
 import { inlineMarkdown } from '../lib/inline-markdown.js';
@@ -7,7 +8,7 @@ interface Props {
 }
 const { title } = Astro.props as Props;
 ---
-<div class="wd-color-row">
+<div class:list={['wd-color-row', extraClasses(Astro.props)]}>
   <div class="wd-color-row-title" set:html={inlineMarkdown(title ?? '')} />
   <div class="wd-color-row-items"><slot /></div>
 </div>

package/src/components/Column.astro

@@ -0,0 +1,19 @@
+---
+import { extraClasses } from './class-names';
+// Mintlify's <Column> - one cell of a <Columns> grid, for arbitrary content
+// (text, a code block) side by side rather than Cards. Just a grid item:
+// <Columns>/CardGroup.astro lays its children out, this only keeps the
+// cell's content together and trims the outer margins of what's inside.
+---
+<div class:list={['wd-column', extraClasses(Astro.props)]}><slot /></div>
+<style>
+  .wd-column {
+    min-width: 0;
+  }
+  .wd-column > :global(:first-child) {
+    margin-top: 0;
+  }
+  .wd-column > :global(:last-child) {
+    margin-bottom: 0;
+  }
+</style>

package/src/components/Columns.astro

@@ -8,4 +8,4 @@ interface Props {
 }
 const { cols } = Astro.props as Props;
 ---
-<CardGroup cols={cols}><slot /></CardGroup>
+<CardGroup cols={cols} class={Astro.props.class} className={Astro.props.className}><slot /></CardGroup>

package/src/components/Danger.astro

@@ -9,4 +9,4 @@ interface Props {
 }
 const { title, _titleId } = Astro.props as Props;
 ---
-<Callout type="danger" title={title} _titleId={_titleId}><slot /></Callout>
+<Callout type="danger" title={title} _titleId={_titleId} class={Astro.props.class} className={Astro.props.className}><slot /></Callout>

package/src/components/Expandable.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // The collapsible "Show/Hide properties" wrapper that pairs with
 // Parameter for nested object properties - modeled directly on
 // Mintlify's own Expandable (https://www.mintlify.com/docs/components/
@@ -25,7 +26,7 @@ interface Props {
 const { title = "properties", defaultOpen = true } = Astro.props as Props;
 ---
 
-<details class="wd-expandable" open={defaultOpen}>
+<details class:list={["wd-expandable", extraClasses(Astro.props)]} open={defaultOpen}>
   <summary>
     <svg class="wd-expandable-chevron" width="11" height="11" viewBox="0 0 10 10" aria-hidden="true">
       <path

package/src/components/Frame.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // A generic "put a rounded, bordered card around this" wrapper -
 // deliberately different from Image (a specific <img> with its own
 // src/srcDark/size handling): Frame wraps *arbitrary* slot content - a
@@ -21,7 +22,7 @@ interface Props {
 const { caption, hint } = Astro.props as Props;
 ---
 
-<figure class="wd-frame">
+<figure class:list={["wd-frame", extraClasses(Astro.props)]}>
   {hint && <p class="wd-frame-hint">{hint}</p>}
   <div class="wd-frame-content">
     <slot />

package/src/components/GitHubRepo.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Mintlify's <GitHub.Repo repo="owner/name" variant="inset|flat"> - a card
 // linking to a public GitHub repository. Attached as GitHub.Repo in
 // components/compound.ts. `repo` is an "owner/name" slug or a full
@@ -27,7 +28,7 @@ const valid = /^[\w.-]+\/[\w.-]+$/.test(slug);
 ---
 {valid && (
   <a
-    class:list={['wd-github-repo', `wd-github-repo-${variant}`]}
+    class:list={['wd-github-repo', `wd-github-repo-${variant}`, extraClasses(Astro.props)]}
     href={`https://github.com/${slug}`}
     target="_blank"
     rel="noopener noreferrer"

package/src/components/Hint.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Inline, text-level component - unlike every other built-in here
 // (Callout, Card, Accordion, ...), which are all block-level and get
 // their own line, a Hint sits mid-sentence: `word <Hint tip="...">this
@@ -28,7 +29,7 @@ const { tip, headline, cta, href } = Astro.props as Props;
 const hasLink = Boolean(cta && href);
 ---
 
-<span class:list={["wd-hint", { "wd-hint-rich": Boolean(headline) || hasLink }]} tabindex="0">
+<span class:list={["wd-hint", { "wd-hint-rich": Boolean(headline) || hasLink }, extraClasses(Astro.props)]} tabindex="0">
   <span class="wd-hint-trigger"><slot /></span>
   <span class="wd-hint-tooltip" role="tooltip">
     {headline && <span class="wd-hint-headline">{headline}</span>}

package/src/components/Icon.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Renders either a real icon (via `icon`) or a custom image (via
 // `src`) inline with surrounding text - modeled on Mintlify's own Icon
 // (https://www.mintlify.com/docs/components/icons), which documents
@@ -42,9 +43,9 @@ const iconStyle =
 
 {
   src ? (
-    <img src={src} alt={alt} class="wd-icon-image" style={`height:${height}`} />
+    <img src={src} alt={alt} class:list={["wd-icon-image", extraClasses(Astro.props)]} style={`height:${height}`} />
   ) : icon ? (
-    <AppIcon icon={icon} class="wd-icon-inline" style={iconStyle} />
+    <AppIcon icon={icon} class={["wd-icon-inline", ...extraClasses(Astro.props)].join(" ")} style={iconStyle} />
   ) : null
 }
 <style>

package/src/components/Image.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Block-level (own line, centered) - unlike Hint (inline/text-level),
 // this is meant to be dropped in on its own the way Callout/Card are.
 //
@@ -65,7 +66,7 @@ const sizeStyle = size ? `--wd-image-size:${size}` : undefined;
 ---
 
 <figure
-  class:list={["wd-image-figure", caption && "wd-image-figure-framed", srcDark && "wd-image-has-dark"]}
+  class:list={["wd-image-figure", caption && "wd-image-figure-framed", srcDark && "wd-image-has-dark", extraClasses(Astro.props)]}
   style={sizeStyle}
 >
   <img src={src} alt={alt} class="wd-image wd-image-light" nozoom={noZoom || undefined} />

package/src/components/Info.astro

@@ -9,4 +9,4 @@ interface Props {
 }
 const { title, _titleId } = Astro.props as Props;
 ---
-<Callout type="info" title={title} _titleId={_titleId}><slot /></Callout>
+<Callout type="info" title={title} _titleId={_titleId} class={Astro.props.class} className={Astro.props.className}><slot /></Callout>

package/src/components/Note.astro

@@ -9,4 +9,4 @@ interface Props {
 }
 const { title, _titleId } = Astro.props as Props;
 ---
-<Callout type="note" title={title} _titleId={_titleId}><slot /></Callout>
+<Callout type="note" title={title} _titleId={_titleId} class={Astro.props.class} className={Astro.props.className}><slot /></Callout>

package/src/components/Panel.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Mintlify's <Panel> - content pinned to the right-hand column on desktop,
 // in place of the table of contents. It's the same docking
 // RequestExample/ResponseExample already use (initExamplePanels() in
@@ -8,4 +9,4 @@
 // with no table-of-contents column (any mode but `default`), the Panel
 // stays where it is in the page.
 ---
-<div class="wd-example-panel wd-panel"><slot /></div>
+<div class:list={["wd-example-panel wd-panel", extraClasses(Astro.props)]}><slot /></div>

package/src/components/Parameter.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // The name+type+description row used throughout API reference content -
 // modeled directly on Mintlify's own ParamField/ResponseField
 // (https://www.mintlify.com/docs/components/expandables), which this
@@ -38,7 +39,7 @@ const { name, type, required = false, default: defaultValue, deprecated = false,
 const hasDefault = defaultValue !== undefined && defaultValue !== null && defaultValue !== "";
 ---
 
-<div class:list={["wd-parameter", { "wd-parameter-deprecated": deprecated }]}>
+<div class:list={["wd-parameter", { "wd-parameter-deprecated": deprecated }, extraClasses(Astro.props)]}>
   <div class="wd-parameter-head">
     {pre.map((label) => <span class="wd-parameter-label">{label}</span>)}
     <span class="wd-parameter-name">{name}</span>

package/src/components/Prompt.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Mintlify's <Prompt> - a ready-made AI prompt: a card showing
 // `description` (inline Markdown) and an optional icon, with actions to
 // copy the prompt or open it in Cursor. The prompt itself is the slot; it's
@@ -27,7 +28,7 @@ const { description, icon, actions = ['copy'], _text } = Astro.props as Props;
 const cursorHref = _text ? `https://cursor.com/link/prompt?text=${encodeURIComponent(_text)}` : null;
 const showCursor = actions.includes('cursor') && cursorHref !== null && cursorHref.length <= 10000;
 ---
-<div class="wd-prompt">
+<div class:list={["wd-prompt", extraClasses(Astro.props)]}>
   <div class="wd-prompt-head">
     {icon && <AppIcon icon={icon} class="wd-prompt-icon" />}
     {description && <div class="wd-prompt-description" set:html={inlineMarkdown(description)} />}

package/src/components/RequestExample.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Pins its code example(s) in the right sidebar - in place of the page's
 // normal table of contents - on desktop; falls back to a plain in-place
 // CodeGroup on narrower viewports where that sidebar column doesn't
@@ -26,7 +27,7 @@ interface Props {
 }
 const { dropdown = false } = Astro.props as Props;
 ---
-<div class="wd-example-panel wd-request-example">
+<div class:list={["wd-example-panel wd-request-example", extraClasses(Astro.props)]}>
   <CodeGroup dropdown={dropdown}>
     <slot />
   </CodeGroup>

package/src/components/ResponseExample.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // See RequestExample.astro's own comment - identical in every respect
 // except the marker class (wd-response-example vs wd-request-example),
 // which src/scripts/example-panels.ts uses to always dock Response
@@ -12,7 +13,7 @@ interface Props {
 }
 const { dropdown = false } = Astro.props as Props;
 ---
-<div class="wd-example-panel wd-response-example">
+<div class:list={["wd-example-panel wd-response-example", extraClasses(Astro.props)]}>
   <CodeGroup dropdown={dropdown}>
     <slot />
   </CodeGroup>

package/src/components/Searchbar.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Wraps a GFM table (or any other block-level slot content, though a
 // table is the intended/primary use case) with a text input above it
 // that live-filters rows by their own text content - "let users filter
@@ -21,7 +22,7 @@ interface Props {
 const { placeholder = "Search..." } = Astro.props as Props;
 ---
 
-<div class="wd-searchbar">
+<div class:list={["wd-searchbar", extraClasses(Astro.props)]}>
   <input type="text" class="wd-searchbar-input" placeholder={placeholder} aria-label={placeholder} />
   <div class="wd-searchbar-content">
     <slot />

package/src/components/Step.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 import AppIcon from './AppIcon.astro';
 // `icon`, `stepNumber` and `titleSize` are Mintlify's. `icon` replaces the
 // number in the step's circle. `stepNumber` sets this step's number; the
@@ -15,7 +16,7 @@ const { title, icon, stepNumber, titleSize = 'p' } = Astro.props as Props;
 const style = typeof stepNumber === 'number' ? `counter-set: wd-step ${stepNumber - 1}` : undefined;
 const TitleTag = titleSize === 'h2' || titleSize === 'h3' ? titleSize : 'p';
 ---
-<div class:list={['wd-step', { 'wd-step-has-icon': Boolean(icon) }]} style={style}>
+<div class:list={['wd-step', { 'wd-step-has-icon': Boolean(icon) }, extraClasses(Astro.props)]} style={style}>
   {icon && <AppIcon icon={icon} class="wd-step-icon" />}
   {
     title &&

package/src/components/Steps.astro

@@ -1,4 +1,7 @@
-<div class="wd-steps"><slot /></div>
+---
+import { extraClasses } from './class-names';
+---
+<div class:list={["wd-steps", extraClasses(Astro.props)]}><slot /></div>
 <style is:global>
   .wd-steps {
     counter-reset: wd-step;

package/src/components/Tab.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 import AppIcon from './AppIcon.astro';
 // `icon` is Mintlify's: shown before the title in the tab's button. The
 // button is built client-side by Tabs.astro, which moves this hidden,
@@ -9,7 +10,7 @@ interface Props {
 }
 const { title, icon } = Astro.props as Props;
 ---
-<div class="wd-tab" data-title={title}>
+<div class:list={["wd-tab", extraClasses(Astro.props)]} data-title={title}>
   {icon && <span class="wd-tab-icon-src" hidden><AppIcon icon={icon} class="wd-tabs-btn-icon" /></span>}
   <slot />
 </div>

package/src/components/Tabs.astro

@@ -1,11 +1,12 @@
 ---
+import { extraClasses } from './class-names';
 // `defaultTabIndex` is Mintlify's: which tab (0-based) starts selected.
 interface Props {
   defaultTabIndex?: number;
 }
 const { defaultTabIndex = 0 } = Astro.props as Props;
 ---
-<div class="wd-tabs" data-default-index={defaultTabIndex}>
+<div class:list={["wd-tabs", extraClasses(Astro.props)]} data-default-index={defaultTabIndex}>
   <slot />
 </div>
 <script>

package/src/components/Tile.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Mintlify's <Tile> - a visual preview (the slot, usually an image or a
 // light/dark image pair) on a patterned background, with a title and
 // description under it. Usually laid out in a <Columns> grid. `title`
@@ -13,7 +14,7 @@ interface Props {
 const { href, title, description } = Astro.props as Props;
 const Tag = href ? 'a' : 'div';
 ---
-<Tag class="wd-tile" href={href}>
+<Tag class:list={["wd-tile", extraClasses(Astro.props)]} href={href}>
   <div class="wd-tile-preview"><slot /></div>
   {title && <div class="wd-tile-title" set:html={inlineMarkdown(title)} />}
   {description && <div class="wd-tile-description">{description}</div>}

package/src/components/Tip.astro

@@ -9,4 +9,4 @@ interface Props {
 }
 const { title, _titleId } = Astro.props as Props;
 ---
-<Callout type="tip" title={title} _titleId={_titleId}><slot /></Callout>
+<Callout type="tip" title={title} _titleId={_titleId} class={Astro.props.class} className={Astro.props.className}><slot /></Callout>

package/src/components/TreeFile.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Mintlify's <Tree.File name="..."> - see Tree.astro. `highlight` marks it
 // as the active item.
 import AppIcon from './AppIcon.astro';
@@ -8,7 +9,7 @@ interface Props {
 }
 const { name, highlight = false } = Astro.props as Props;
 ---
-<li class:list={['wd-tree-item', 'wd-tree-file', { 'wd-tree-highlight': highlight }]} role="treeitem" tabindex="-1">
+<li class:list={['wd-tree-item', 'wd-tree-file', { 'wd-tree-highlight': highlight }, extraClasses(Astro.props)]} role="treeitem" tabindex="-1">
   <span class="wd-tree-row">
     <span class="wd-tree-chevron wd-tree-chevron-spacer" aria-hidden="true"></span>
     <AppIcon icon="lucide:file" class="wd-tree-icon" />

package/src/components/TreeFolder.astro

@@ -1,4 +1,5 @@
 ---
+import { extraClasses } from './class-names';
 // Mintlify's <Tree.Folder name="..."> - see Tree.astro. `defaultOpen`
 // starts it expanded; `openable={false}` makes it a fixed, non-toggling
 // folder (shown open or closed per `defaultOpen`); `highlight` marks it as
@@ -13,7 +14,7 @@ interface Props {
 const { name, defaultOpen = false, openable = true, highlight = false } = Astro.props as Props;
 ---
 <li
-  class:list={['wd-tree-item', 'wd-tree-folder', { 'wd-tree-highlight': highlight, 'wd-tree-static': !openable }]}
+  class:list={['wd-tree-item', 'wd-tree-folder', { 'wd-tree-highlight': highlight, 'wd-tree-static': !openable }, extraClasses(Astro.props)]}
   role="treeitem"
   aria-expanded={defaultOpen ? 'true' : 'false'}
   tabindex="-1"