@umami/shiso 1.17.0 → 1.19.0

package/src/components/LanguageSwitcher.tsx

@@ -1,20 +1,28 @@
 import { useLocation, useNavigate } from 'react-router';
-import { Check, ChevronRight } from '@/components/icons';
+import { ChevronRight } from '@/components/icons';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { getLanguageScopes } from '@/lib/docs-config';
 import { getLanguageName, isValidLocale } from '@/lib/locale';
-import { docsSite, getScopeByPathname } from '@/lib/site-config';
+import {
+  docsSite,
+  getScopeByPathname,
+  getStandaloneCounterpart,
+  getStandalonePage,
+} from '@/lib/site-config';
 
 /**
  * Language selector for multi-language sites. Each option is a language's
- * landing scope — its default version — so switching languages always lands
- * on that language's default-version first page. Hidden languages never
+ * landing scope — its default version — so switching languages lands on that
+ * language's default-version first page. On a standalone page (e.g. a home
+ * page) it lands on the same page in the chosen language when one exists.
+ * Hidden languages never
  * appear as options. Each language is shown by its native name, e.g. "ja"
  * as "日本語".
  */
@@ -23,6 +31,7 @@ export function LanguageSwitcher() {
   const navigate = useNavigate();
   const current = getScopeByPathname(pathname);
   const options = getLanguageScopes(docsSite);
+  const standalone = getStandalonePage(pathname);
 
   if (!current.language || (options.length < 2 && !current.hidden)) {
     return null;
@@ -31,35 +40,35 @@ export function LanguageSwitcher() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
-        render={
-          <Button
-            variant="outline"
-            className="h-auto gap-1.5 rounded-md bg-card px-2.5 py-1.5 text-sm font-medium text-foreground"
-          />
-        }
+        render={<Button variant="outline" />}
+        aria-label={`Language: ${getLanguageName(current.language)}`}
       >
         {getLanguageName(current.language)}
         <ChevronRight className="size-3.5 rotate-90 text-muted-foreground" />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="min-w-32">
-        {options.map(scope => (
-          <DropdownMenuItem
-            key={scope.id}
-            onClick={() => {
-              if (scope.language !== current.language) {
-                navigate(scope.firstPageUrl);
-              }
-            }}
-          >
-            <span
-              className="grow"
-              lang={isValidLocale(scope.language) ? scope.language : undefined}
-            >
-              {scope.language ? getLanguageName(scope.language) : null}
-            </span>
-            {scope.language === current.language ? <Check className="size-3.5" /> : null}
-          </DropdownMenuItem>
-        ))}
+        <DropdownMenuRadioGroup
+          value={current.language}
+          onValueChange={language => {
+            const scope = options.find(option => option.language === language);
+            if (scope && scope.language !== current.language) {
+              const counterpart =
+                standalone && scope.language
+                  ? getStandaloneCounterpart(standalone, scope.language)
+                  : null;
+
+              navigate(counterpart?.path || scope.firstPageUrl);
+            }
+          }}
+        >
+          {options.map(scope => (
+            <DropdownMenuRadioItem key={scope.id} value={scope.language}>
+              <span lang={isValidLocale(scope.language) ? scope.language : undefined}>
+                {scope.language ? getLanguageName(scope.language) : null}
+              </span>
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/src/components/OpenApiOperation.tsx

@@ -1,18 +1,28 @@
+import { ApiPlayground } from '@/components/ApiPlayground';
 import { CodeBlock } from '@/components/CodeBlock';
 import { Badge } from '@/components/docs/Badge';
 import { CodeGroup } from '@/components/docs/CodeGroup';
 import { Expandable } from '@/components/docs/Expandable';
 import { PropertiesTable } from '@/components/docs/PropertiesTable';
-import { operationParameterSections, operationSections, statusColor } from '@/lib/openapi';
-import type { NormalizedOperation, SchemaNode } from '@/lib/types';
+import { useLabels } from '@/lib/label-context';
+import {
+  operationParameterSections,
+  operationSections,
+  securityFieldName,
+  securityForLocation,
+  statusColor,
+} from '@/lib/openapi';
+import type { NormalizedOperation, SchemaNode, SecurityScheme, ThemeLabels } from '@/lib/types';
+import { securityPlaceholder } from '../../scripts/lib/request-samples.mjs';
 
 function FieldChildren({ node }: { node: SchemaNode }) {
+  const labels = useLabels();
   return (
     <>
       {node.description}
       {node.enum && node.enum.length > 0 && (
         <div className="mt-1">
-          Options:{' '}
+          {labels.fieldOptions}{' '}
           {node.enum.map((value, index) => (
             <span key={value}>
               {index > 0 && ', '}
@@ -25,12 +35,14 @@ function FieldChildren({ node }: { node: SchemaNode }) {
   );
 }
 
-function schemaDetails(node: SchemaNode) {
+function schemaDetails(node: SchemaNode, labels: ThemeLabels) {
   if (!node.children?.length) return undefined;
 
   return (
     <Expandable
-      title={node.type === 'oneOf' || node.type === 'anyOf' ? 'Allowed types' : 'properties'}
+      title={
+        node.type === 'oneOf' || node.type === 'anyOf' ? labels.allowedTypes : labels.properties
+      }
     >
       <SchemaTable nodes={node.children} />
     </Expandable>
@@ -38,6 +50,7 @@ function schemaDetails(node: SchemaNode) {
 }
 
 function SchemaTable({ nodes }: { nodes: SchemaNode[] }) {
+  const labels = useLabels();
   return (
     <PropertiesTable>
       {nodes.map(node => (
@@ -48,7 +61,7 @@ function SchemaTable({ nodes }: { nodes: SchemaNode[] }) {
           required={node.required}
           deprecated={node.deprecated}
           default={node.default}
-          details={schemaDetails(node)}
+          details={schemaDetails(node, labels)}
         >
           <FieldChildren node={node} />
         </PropertiesTable.Row>
@@ -99,25 +112,63 @@ function HighlightedCode({
   );
 }
 
+/** How a credential is sent, e.g. "Bearer <token>" or "<api-key>". */
+function credentialExample(scheme: SecurityScheme): string {
+  const placeholder = securityPlaceholder(scheme);
+  if (scheme.type === 'apiKey') return placeholder;
+  const prefix =
+    scheme.type === 'http' && scheme.scheme && scheme.scheme !== 'bearer'
+      ? scheme.scheme.charAt(0).toUpperCase() + scheme.scheme.slice(1)
+      : 'Bearer';
+  return `${prefix} ${placeholder}`;
+}
+
 export interface OpenApiOperationProps {
   operation: NormalizedOperation;
+  /** Renders the "Try it" panel ahead of the reference; carries the proxy setting. */
+  playground?: { proxy?: string } | false;
 }
 
 /** The generated reference for one API operation, rendered under the page body. */
-export function OpenApiOperation({ operation }: OpenApiOperationProps) {
-  const sections = new Map(operationSections(operation).map(entry => [entry.name, entry.id]));
+export function OpenApiOperation({
+  operation,
+  playground: requested = false,
+}: OpenApiOperationProps) {
+  const labels = useLabels();
+  // Webhooks describe requests the API sends, so there is nothing to try.
+  const playground = operation.webhook ? false : requested;
+  const options = { playground: !!playground };
+  const sectionEntries = operationSections(operation, labels, options);
+  // Ids come from the untranslated names so anchors are stable across locales.
+  const sections = new Map(
+    operationSections(operation, undefined, options).map(entry => [entry.name, entry.id]),
+  );
+  const parameterSections = operationParameterSections(operation, labels);
+  const parameterOffset = playground ? 1 : 0;
 
   return (
     <div className="docs-markdown">
-      {operationParameterSections(operation).map(({ location, name }) => (
+      {playground && (
+        <section>
+          <h2 id={sections.get('Try it')}>{labels.apiPlayground}</h2>
+          <ApiPlayground operation={operation} proxy={playground.proxy} />
+        </section>
+      )}
+      {parameterSections.map(({ location, name }, index) => (
         <section key={location}>
-          <h2 id={sections.get(name)}>{name}</h2>
+          <h2 id={sectionEntries[index + parameterOffset].id}>{name}</h2>
           <PropertiesTable>
-            {location === 'header' && operation.security.length > 0 && (
-              <PropertiesTable.Row name="Authorization" type="string" required>
-                Authentication credentials, e.g. <code>Bearer &lt;token&gt;</code>.
+            {securityForLocation(operation, location).map(scheme => (
+              <PropertiesTable.Row
+                key={`security:${scheme.name}`}
+                name={securityFieldName(scheme)}
+                type="string"
+                required
+              >
+                {scheme.description || labels.apiCredentials}{' '}
+                <code>{credentialExample(scheme)}</code>.
               </PropertiesTable.Row>
-            )}
+            ))}
             {operation.parameters[location].map(parameter => (
               <PropertiesTable.Row
                 key={parameter.name}
@@ -126,7 +177,7 @@ export function OpenApiOperation({ operation }: OpenApiOperationProps) {
                 required={parameter.required}
                 deprecated={parameter.deprecated}
                 default={parameter.default}
-                details={schemaDetails(parameter)}
+                details={schemaDetails(parameter, labels)}
               >
                 <FieldChildren node={parameter} />
               </PropertiesTable.Row>
@@ -136,12 +187,14 @@ export function OpenApiOperation({ operation }: OpenApiOperationProps) {
       ))}
       {operation.requestBody && (
         <section>
-          <h2 id={sections.get('Request body')}>Request body</h2>
+          <h2 id={sections.get(operation.webhook ? 'Payload' : 'Request body')}>
+            {operation.webhook ? labels.apiPayload : labels.apiRequestBody}
+          </h2>
           <SchemaFields node={operation.requestBody.schema} />
           {operation.requestBody.example && (
             <HighlightedCode
               language="json"
-              title="Example request"
+              title={labels.apiExampleRequest}
               html={operation.requestBody.exampleHtml}
               source={operation.requestBody.example}
             />
@@ -150,7 +203,7 @@ export function OpenApiOperation({ operation }: OpenApiOperationProps) {
       )}
       {operation.responses.length > 0 && (
         <section>
-          <h2 id={sections.get('Responses')}>Responses</h2>
+          <h2 id={sections.get('Responses')}>{labels.apiResponses}</h2>
           {operation.responses.map(response => (
             <div key={response.status} className="mt-6 first:mt-0">
               <div className="flex items-center gap-2">
@@ -165,7 +218,7 @@ export function OpenApiOperation({ operation }: OpenApiOperationProps) {
               {response.example && (
                 <HighlightedCode
                   language="json"
-                  title={`${response.status} example`}
+                  title={labels.apiExampleResponse.replace('{status}', () => response.status)}
                   html={response.exampleHtml}
                   source={response.example}
                 />
@@ -176,7 +229,7 @@ export function OpenApiOperation({ operation }: OpenApiOperationProps) {
       )}
       {operation.samples.length > 0 && (
         <section>
-          <h2 id={sections.get('Code samples')}>Code samples</h2>
+          <h2 id={sections.get('Code samples')}>{labels.apiCodeSamples}</h2>
           <CodeGroup>
             {operation.samples.map(sample => (
               <HighlightedCode

package/src/components/OpenApiSchema.tsx

@@ -0,0 +1,97 @@
+import { CodeBlock } from '@/components/CodeBlock';
+import { Expandable } from '@/components/docs/Expandable';
+import { PropertiesTable } from '@/components/docs/PropertiesTable';
+import { useLabels } from '@/lib/label-context';
+import { schemaSections } from '@/lib/openapi';
+import type { SchemaNode, SchemaPage, ThemeLabels } from '@/lib/types';
+
+function FieldChildren({ node }: { node: SchemaNode }) {
+  const labels = useLabels();
+  return (
+    <>
+      {node.description}
+      {node.enum && node.enum.length > 0 && (
+        <div className="mt-1">
+          {labels.fieldOptions}{' '}
+          {node.enum.map((value, index) => (
+            <span key={value}>
+              {index > 0 && ', '}
+              <code>{value}</code>
+            </span>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
+
+function SchemaTable({ nodes, labels }: { nodes: SchemaNode[]; labels: ThemeLabels }) {
+  return (
+    <PropertiesTable>
+      {nodes.map(node => (
+        <PropertiesTable.Row
+          key={node.name || node.type}
+          name={node.name || node.type}
+          type={node.type}
+          required={node.required}
+          deprecated={node.deprecated}
+          default={node.default}
+          details={
+            node.children?.length ? (
+              <Expandable
+                title={
+                  node.type === 'oneOf' || node.type === 'anyOf'
+                    ? labels.allowedTypes
+                    : labels.properties
+                }
+              >
+                <SchemaTable nodes={node.children} labels={labels} />
+              </Expandable>
+            ) : undefined
+          }
+        >
+          <FieldChildren node={node} />
+        </PropertiesTable.Row>
+      ))}
+    </PropertiesTable>
+  );
+}
+
+export interface OpenApiSchemaProps {
+  page: SchemaPage;
+}
+
+/** The generated reference for one named component schema. */
+export function OpenApiSchema({ page }: OpenApiSchemaProps) {
+  const labels = useLabels();
+  const sections = new Map(schemaSections(page, labels).map(entry => [entry.id, entry.name]));
+  const properties = sections.get('properties');
+  const example = sections.get('example');
+
+  return (
+    <div className="docs-markdown">
+      {properties && (
+        <section>
+          <h2 id="properties">{properties}</h2>
+          <SchemaTable nodes={page.schema.children ?? []} labels={labels} />
+        </section>
+      )}
+      {example && page.example && (
+        <section>
+          <h2 id="example">{example}</h2>
+          <CodeBlock data-language="json" data-title={page.name}>
+            {page.exampleHtml ? (
+              <code
+                className="language-json"
+                // biome-ignore lint/security/noDangerouslySetInnerHtml: build-time generated markup from the project's own OpenAPI spec.
+                dangerouslySetInnerHTML={{ __html: page.exampleHtml }}
+              />
+            ) : (
+              <code className="language-json">{page.example}</code>
+            )}
+          </CodeBlock>
+        </section>
+      )}
+    </div>
+  );
+}

package/src/components/PageActions.tsx

@@ -90,7 +90,7 @@ export function PageActions({
               rel="noopener noreferrer"
               className="ml-auto inline-flex shrink-0 items-center gap-1.5 text-right no-underline hover:text-primary"
             >
-              {site.editLink?.label || 'Edit this page'}
+              {site.editLink?.label || site.labels.editPage}
               <ExternalLink size={14} aria-hidden="true" />
             </a>
           )}
@@ -103,11 +103,11 @@ export function PageActions({
           data-pagefind-ignore
         >
           <fieldset
-            aria-label={feedback.prompt || 'Was this page helpful?'}
+            aria-label={feedback.prompt || site.labels.feedbackPrompt}
             className="flex flex-wrap items-center gap-2"
           >
             <span className="mr-2 text-muted-foreground">
-              {feedback.prompt || 'Was this page helpful?'}
+              {feedback.prompt || site.labels.feedbackPrompt}
             </span>
             {[true, false].map(helpful => (
               <button
@@ -118,14 +118,15 @@ export function PageActions({
                 onClick={() => void submit(helpful)}
                 className="rounded-md border border-border px-3 py-1.5 text-foreground hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-default disabled:opacity-60 aria-pressed:border-primary aria-pressed:text-primary"
               >
-                {helpful ? feedback.helpfulLabel || 'Yes' : feedback.unhelpfulLabel || 'No'}
+                {helpful
+                  ? feedback.helpfulLabel || site.labels.feedbackYes
+                  : feedback.unhelpfulLabel || site.labels.feedbackNo}
               </button>
             ))}
           </fieldset>
           <div role="status" aria-live="polite" className="text-muted-foreground">
-            {status === 'success' && (feedback.successMessage || 'Thanks for your feedback!')}
-            {status === 'error' &&
-              (feedback.errorMessage || 'Could not send feedback. Please try again.')}
+            {status === 'success' && (feedback.successMessage || site.labels.feedbackSuccess)}
+            {status === 'error' && (feedback.errorMessage || site.labels.feedbackError)}
           </div>
         </div>
       )}

package/src/components/SideNav.tsx

@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { flattenNav, isNodeHidden } from '@/lib/docs-config';
-import { methodColor } from '@/lib/openapi';
+import { methodBadgeText, methodColor } from '@/lib/openapi';
 import type { DocsTab, NavGroupNode, NavNode } from '@/lib/types';
 import { cn } from '@/lib/utils';
 
@@ -281,7 +281,7 @@ function NavNodes({
               size="xs"
               className="w-10 shrink-0 justify-center whitespace-nowrap font-mono"
             >
-              {method === 'DELETE' ? 'DEL' : method}
+              {methodBadgeText(method)}
             </MethodBadge>
           ) : null}
           {label}

package/src/components/docs/Changelog.tsx

@@ -7,6 +7,7 @@ import {
   useMemo,
 } from 'react';
 import { useSearchParams } from 'react-router';
+import { useLabels } from '@/lib/label-context';
 import { Badge } from './Badge';
 import { styles } from './styles';
 import { Update } from './Update';
@@ -73,6 +74,7 @@ function updateInfo(children: React.ReactNode): Map<string, UpdateChildInfo> {
  * Pages without any tagged updates render as a plain list.
  */
 export function Changelog({ children }: ChangelogProps) {
+  const labels = useLabels();
   const [searchParams, setSearchParams] = useSearchParams();
 
   const allTags = useMemo(() => {
@@ -144,7 +146,7 @@ export function Changelog({ children }: ChangelogProps) {
   return (
     <div className={styles.changelog}>
       {/* biome-ignore lint/a11y/useSemanticElements: toggle-button group labelled for the filter */}
-      <div className={styles.changelogFilters} role="group" aria-label="Filter updates by tag">
+      <div className={styles.changelogFilters} role="group" aria-label={labels.filterUpdates}>
         {allTags.map(tag => {
           const active = selectedSet.has(tag.toLowerCase());
           return (
@@ -164,13 +166,11 @@ export function Changelog({ children }: ChangelogProps) {
         })}
         {selected.length > 0 ? (
           <button type="button" onClick={clear} className={styles.changelogClear}>
-            Clear
+            {labels.clear}
           </button>
         ) : null}
       </div>
-      {visibleUpdates === 0 ? (
-        <p className={styles.changelogEmpty}>No updates match the selected tags.</p>
-      ) : null}
+      {visibleUpdates === 0 ? <p className={styles.changelogEmpty}>{labels.noUpdates}</p> : null}
       {filtered}
     </div>
   );

package/src/components/docs/CodeGroup.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { useMemo, useState } from 'react';
 import { TabsContent, TabsList, Tabs as TabsPrimitive, TabsTrigger } from '@/components/ui/tabs';
+import { useLabels } from '@/lib/label-context';
 import { styles } from './styles';
 import { findCodeLanguage, findCodeTitle, slugify, toElementArray } from './utils';
 
@@ -9,6 +10,7 @@ export interface CodeGroupProps {
 }
 
 export function CodeGroup({ children }: CodeGroupProps) {
+  const labels = useLabels();
   const blocks = useMemo(() => {
     const counts = new Map<string, number>();
 
@@ -55,7 +57,7 @@ export function CodeGroup({ children }: CodeGroupProps) {
       <TabsList
         variant="line"
         className="h-9 w-full justify-start gap-5 overflow-x-auto overflow-y-hidden rounded-none px-3 py-0 shadow-[inset_0_-1px_0_var(--border)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-        aria-label="Code snippets"
+        aria-label={labels.codeSnippets}
       >
         {blocks.map(block => (
           <TabsTrigger

package/src/components/docs/Mermaid.tsx

@@ -1,4 +1,5 @@
 import { type ReactNode, useEffect, useId, useRef, useState } from 'react';
+import { useLabels } from '@/lib/label-context';
 import { styles } from './styles';
 
 export type MermaidPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
@@ -63,6 +64,7 @@ export function Mermaid({
   placement = 'bottom-right',
   children,
 }: MermaidProps) {
+  const labels = useLabels();
   const source = mermaidSource(chart, children);
   const containerRef = useRef<HTMLDivElement>(null);
   const svgHostRef = useRef<HTMLDivElement>(null);
@@ -129,29 +131,29 @@ export function Mermaid({
             // biome-ignore lint/security/noDangerouslySetInnerHtml: mermaid generates this SVG from the page's own diagram source.
             dangerouslySetInnerHTML={{ __html: svg }}
             role="img"
-            aria-label={title ? String(title) : 'Diagram'}
+            aria-label={title ? String(title) : labels.diagram}
           />
         ) : (
-          <pre className={styles.mermaidFallback} title="Diagram source">
+          <pre className={styles.mermaidFallback} title={labels.diagramSource}>
             {source}
           </pre>
         )}
-        {error ? <p className={styles.mermaidError}>Could not render this diagram.</p> : null}
+        {error ? <p className={styles.mermaidError}>{labels.diagramError}</p> : null}
         {showControls && svg && !error ? (
           <div className={`${styles.mermaidControls} ${PLACEMENT_CLASS[placement]}`}>
             <button
               type="button"
-              aria-label="Zoom out"
+              aria-label={labels.zoomOut}
               onClick={() => setZoom(z => Math.max(0.5, +(z - 0.25).toFixed(2)))}
             >
               −
             </button>
-            <button type="button" aria-label="Reset view" onClick={() => setZoom(1)}>
+            <button type="button" aria-label={labels.resetView} onClick={() => setZoom(1)}>
               ⟳
             </button>
             <button
               type="button"
-              aria-label="Zoom in"
+              aria-label={labels.zoomIn}
               onClick={() => setZoom(z => Math.min(2.5, +(z + 0.25).toFixed(2)))}
             >
               +

package/src/components/docs/PropertiesTable.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { useLabels } from '@/lib/label-context';
 import { Badge } from './Badge';
 import { decodeHtmlEntities, toElementArray } from './utils';
 
@@ -27,6 +28,7 @@ function displayValue(value: PropertiesTableRowProps['type']): string | undefine
 }
 
 export function PropertiesTable({ children }: PropertiesTableProps) {
+  const labels = useLabels();
   const rows = toElementArray<PropertiesTableRowProps>(children);
 
   if (!rows.length) {
@@ -40,9 +42,9 @@ export function PropertiesTable({ children }: PropertiesTableProps) {
       <table className="m-0 table-fixed [overflow-wrap:anywhere]">
         <thead>
           <tr>
-            <th className="w-[30%]">Name</th>
-            <th className="w-[15%]">Type</th>
-            <th>Description</th>
+            <th className="w-[30%]">{labels.fieldName}</th>
+            <th className="w-[15%]">{labels.fieldType}</th>
+            <th>{labels.fieldDescription}</th>
           </tr>
         </thead>
         <tbody>{rows}</tbody>
@@ -60,6 +62,7 @@ function PropertiesTableRow({
   children,
   details,
 }: PropertiesTableRowProps) {
+  const labels = useLabels();
   const defaultValue = displayValue(value);
 
   return (
@@ -70,17 +73,19 @@ function PropertiesTableRow({
             {name}
             {required ? (
               <Badge size="sm" tone="primary">
-                required
+                {labels.fieldRequired}
               </Badge>
             ) : null}
-            {deprecated ? <Badge size="sm">deprecated</Badge> : null}
+            {deprecated ? <Badge size="sm">{labels.fieldDeprecated}</Badge> : null}
           </span>
         </td>
         <td>{displayValue(type)}</td>
         <td className="[&_p]:m-0">
           {children}
           {defaultValue ? (
-            <span className="mt-1 block text-muted-foreground">Default: {defaultValue}</span>
+            <span className="mt-1 block text-muted-foreground">
+              {labels.fieldDefault} {defaultValue}
+            </span>
           ) : null}
         </td>
       </tr>

package/src/components/docs/Tabs.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { useEffect, useMemo, useState } from 'react';
 import { TabsContent, TabsList, Tabs as TabsPrimitive, TabsTrigger } from '@/components/ui/tabs';
+import { useLabels } from '@/lib/label-context';
 import { slugify, toElementArray } from './utils';
 
 interface TabChildProps {
@@ -18,6 +19,7 @@ export interface TabsProps {
 }
 
 export function Tabs({ children, group }: TabsProps) {
+  const labels = useLabels();
   const tabs = useMemo(() => {
     const counts = new Map<string, number>();
 
@@ -94,7 +96,7 @@ export function Tabs({ children, group }: TabsProps) {
       <TabsList
         variant="line"
         className="w-full justify-start gap-5 overflow-x-auto overflow-y-hidden p-0 shadow-[inset_0_-1px_0_var(--border)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-        aria-label="Content tabs"
+        aria-label={labels.contentTabs}
       >
         {tabs.map(tab => (
           <TabsTrigger