{"name":"Digitaltableteur design system components","description":"Every non-deprecated component with its props (type, default, required, description), allowed variant values and public links. Generated from the component contracts at build time.","package":{"name":"@digitaltableteur/react","version":"0.9.1","access":"restricted"},"count":196,"sourceFiles":[{"name":"Component contracts (open format index)","url":"https://www.digitaltableteur.com/contracts/v1/index.json"},{"name":"Component index","url":"https://www.digitaltableteur.com/design-system/components.json"},{"name":"Custom elements manifest","url":"https://www.digitaltableteur.com/design-system/custom-elements.json"},{"name":"Design tokens (DTCG)","url":"https://www.digitaltableteur.com/design-system/tokens.json"},{"name":"Component list for agents","url":"https://www.digitaltableteur.com/design-system/llms.txt"}],"specs":[{"name":"Design System Contract 1.0 specification","url":"https://www.digitaltableteur.com/contracts"},{"name":"Design System Contract 1.0 JSON Schema","url":"https://www.digitaltableteur.com/schemas/contract-spec/1.0/contract.schema.json"},{"name":"Design Tokens Format Module 2025.10","url":"https://www.designtokens.org/schemas/2025.10/format.json"}],"implementationSource":"private","components":[{"name":"AboutHero","slug":"about-hero","status":"alpha","group":"marketing","description":"About page hero with studio positioning.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Main title text."},{"name":"subtitle","type":"string","values":null,"default":null,"required":false,"description":"Optional subtitle."},{"name":"background","type":"\"image\" | \"primary\" | \"minimal\" | \"gradient\"","values":["image","primary","minimal","gradient"],"default":"minimal","required":false,"description":"Background variant."},{"name":"backgroundImage","type":"string","values":null,"default":null,"required":false,"description":"Background image URL (for image variant)"},{"name":"backdrop","type":"ReactNode","values":null,"default":null,"required":false,"description":"Decorative layer drawn over the background and under the text. Drags on it pass through the text layer."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"background","values":["image","primary","minimal","gradient"],"default":"minimal"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/about-hero","markdown":"https://www.digitaltableteur.com/design-system/components/about-hero.md","contract":"https://www.digitaltableteur.com/contracts/v1/AboutHero.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/AboutHero.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/about-hero.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"AboutPageContent","slug":"about-page-content","status":"stable","group":"marketing","description":"Full About page body: hero, values sections, stats, a Reliable Partner trust band, manifesto, a tech-stack and package-versions strip and a closing CTA that renders by default.","exported":false,"import":null,"customElement":null,"props":[{"name":"showCTA","type":"boolean","values":null,"default":"true","required":false,"description":"Show the closing CTA section. Defaults to true; pass false to omit it."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."},{"name":"heroBackdrop","type":"ReactNode","values":null,"default":null,"required":false,"description":"Decorative layer behind the hero text (see AboutHero `backdrop`)."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/about-page-content","markdown":"https://www.digitaltableteur.com/design-system/components/about-page-content.md","contract":"https://www.digitaltableteur.com/contracts/v1/AboutPageContent.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/AboutPageContent.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/about-page-content.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Accordion","slug":"accordion","status":"beta","group":"structure","description":"Coordinated disclosure group: single or multiple open sections, animated reveal, keyboard-operable triggers.","exported":true,"import":"import { Accordion } from \"@digitaltableteur/react\";","customElement":"dt-accordion","props":[{"name":"items","type":"AccordionItem[]","values":null,"default":null,"required":true,"description":"Accordion sections (id, title, content, optional disabled)."},{"name":"type","type":"\"single\" | \"multiple\"","values":["single","multiple"],"default":"single","required":false,"description":"\"single\" (default) keeps at most one section open; opening another closes the previous. \"multiple\" lets any number stay open for side-by-side reading."},{"name":"variant","type":"\"contained\" | \"enclosed\" | \"divided\"","values":["contained","enclosed","divided"],"default":"contained","required":false,"description":"\"contained\" (default) is a bordered card group with dividers between rows; \"enclosed\" is the same outer border but seamless inside (no dividers); \"divided\" is flush with hairline separators only, for inline disclosure."},{"name":"defaultOpenId","type":"string","values":null,"default":null,"required":false,"description":"Initially open id (uncontrolled, single)."},{"name":"defaultOpenIds","type":"string[]","values":null,"default":null,"required":false,"description":"Initially open ids (uncontrolled); wins over defaultOpenId when set."},{"name":"openIds","type":"string[]","values":null,"default":null,"required":false,"description":"Controlled open ids. When set, the parent owns open state."},{"name":"onOpenChange","type":"(openIds: string[]) => void","values":null,"default":null,"required":false,"description":"Called with the full set of open ids whenever it changes."},{"name":"headingLevel","type":"2 | 3 | 4 | 5 | 6","values":["2","3","4","5","6"],"default":null,"required":false,"description":"Wraps each trigger in a heading of this level, so the section titles join the page outline (screen reader users list and jump by headings). Pick the level below the heading that introduces the accordion. Unset, triggers are plain buttons."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Optional utility classes on the container."}],"variants":[{"name":"type","values":["single","multiple"],"default":"single"},{"name":"variant","values":["contained","enclosed","divided"],"default":"contained"},{"name":"headingLevel","values":["2","3","4","5","6"],"default":null}],"lookalikes":[{"name":"ExpandableSection","when":"Do not build exclusive groups from several ExpandableSections; that is Accordion's contract."},{"name":"Tabs","when":"Do not use Tabs for non-mutually-exclusive content. Two panels open at once is a job for **Accordion** (in a future `mode=\"multi\"`) or side-by-side layout."}],"invalidCombinations":[{"id":"mutually-exclusive-openIds-defaultOpenIds","level":"MUST NOT","condition":"`openIds` and `defaultOpenIds` set together.","reason":"`openIds` makes the component controlled and `defaultOpenIds` uncontrolled; pass one, not both."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/accordion","markdown":"https://www.digitaltableteur.com/design-system/components/accordion.md","contract":"https://www.digitaltableteur.com/contracts/v1/Accordion.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Accordion.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/accordion.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"AlertBanner","slug":"alert-banner","status":"stable","group":"feedback","description":"Inline alert for info, warning, success, and error feedback.","exported":true,"import":"import { AlertBanner } from \"@digitaltableteur/react\";","customElement":"dt-alert-banner","props":[{"name":"tone","type":"\"info\" | \"success\" | \"warning\" | \"error\"","values":["info","success","warning","error"],"default":"info","required":false,"description":"Semantic tone controlling icon and surface colors."},{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Alert title, rendered as a bold `<strong>` label, not a heading, so it adds nothing to the page outline."},{"name":"description","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Supporting body copy."},{"name":"action","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Optional action slot rendered under the description (e.g. a tertiary Button)."},{"name":"showIcon","type":"boolean","values":null,"default":"true","required":false,"description":"Show the semantic tone icon. The icon is derived from `tone`; set false for a text-only banner."},{"name":"dismissible","type":"boolean","values":null,"default":"false","required":false,"description":"Shows a localized dismiss control when true and onDismiss is set. The banner does not hide itself: remove it in onDismiss. Without onDismiss no control renders and a development warning names the gap. Error banners must not be dismissible."},{"name":"onDismiss","type":"() => void","values":null,"default":null,"required":false,"description":"Called when the user activates the dismiss control. The consumer removes the banner. Required for the control to render."},{"name":"aria-live","type":"\"polite\" | \"assertive\" | \"off\"","values":["polite","assertive","off"],"default":null,"required":false,"description":"Live region politeness for assistive tech (an explicit value wins over the tone default)."},{"name":"focusOnMount","type":"boolean","values":null,"default":"false","required":false,"description":"Moves focus to the banner when it mounts, for form error summaries: keyboard and screen reader users land on the list of problems after a failed submit."}],"variants":[{"name":"tone","values":["info","success","warning","error"],"default":"info"},{"name":"aria-live","values":["polite","assertive","off"],"default":null}],"lookalikes":[{"name":"Card","when":"Do not use the muted variant to encode status; status belongs to AlertBanner or Badge."},{"name":"EmptyState","when":"Do not use EmptyState for errors or loading; AlertBanner owns failures and Skeleton owns loading."},{"name":"Toast","when":"Do not use AlertBanner for transient feedback; it has no auto-dismiss because \"sit here until acknowledged\" is its job. Use Toast for post-action confirmations."},{"name":"ToastStack","when":"Do not use it for persistent or compliance-critical messaging; toasts auto-dismiss (use AlertBanner)"}],"invalidCombinations":[{"id":"alertbanner-dismissible-needs-ondismiss","level":"MUST NOT","condition":"When `dismissible` is set and `onDismiss` is not set, then also set `onDismiss`.","reason":"The banner does not hide itself, so dismissible without onDismiss renders no Close button. Pass a handler that removes the banner, e.g. <AlertBanner dismissible onDismiss={() => setShown(false)} />."},{"id":"alertbanner-error-not-dismissible","level":"MUST NOT","condition":"When `tone` is `error` and `dismissible` is set, then do not set `dismissible`.","reason":"An error banner explains a blocked flow; letting the user hide it strands them. Drop dismissible and keep the banner until the problem is resolved."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/alert-banner","markdown":"https://www.digitaltableteur.com/design-system/components/alert-banner.md","contract":"https://www.digitaltableteur.com/contracts/v1/AlertBanner.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/AlertBanner.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/alert-banner.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ArticleCard","slug":"article-card","status":"beta","group":"content","description":"Blog article teaser card with title, lead, and read time.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"lead","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"link","type":"string","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"readTime","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"No description in the contract."},{"name":"loading","type":"boolean","values":null,"default":"false","required":false,"description":"Show skeleton placeholders while content is loading."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/article-card","markdown":"https://www.digitaltableteur.com/design-system/components/article-card.md","contract":"https://www.digitaltableteur.com/contracts/v1/ArticleCard.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ArticleCard.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/article-card.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ArticleContent","slug":"article-content","status":"stable","group":"content","description":"Reading column for blog article bodies: constrains article markup to a `size` reading measure through Container. The prose typography comes from the ArticleProse sub-part, not from ArticleContent itself.","exported":false,"import":null,"customElement":null,"props":[{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"No description in the contract."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/article-content","markdown":"https://www.digitaltableteur.com/design-system/components/article-content.md","contract":"https://www.digitaltableteur.com/contracts/v1/ArticleContent.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ArticleContent.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/article-content.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ArticleHero","slug":"article-hero","status":"alpha","group":"content","description":"Blog article hero with title, meta, and cover.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Article title."},{"name":"image","type":"{ src: string; alt: string; caption?: string; }","values":null,"default":null,"required":false,"description":"Featured image."},{"name":"author","type":"{ name: string; slug?: string; imageUrl?: string; }","values":null,"default":null,"required":false,"description":"Author information."},{"name":"publishedAt","type":"string","values":null,"default":null,"required":false,"description":"Publication date (ISO string)"},{"name":"readTime","type":"string","values":null,"default":null,"required":false,"description":"Read time (e.g., \"5 min read\")"},{"name":"tags","type":"string[]","values":null,"default":null,"required":false,"description":"Article tags."},{"name":"variant","type":"\"contained\" | \"minimal\" | \"full-width\"","values":["contained","minimal","full-width"],"default":"contained","required":false,"description":"Layout variant."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"variant","values":["minimal","full-width","contained"],"default":"minimal"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/article-hero","markdown":"https://www.digitaltableteur.com/design-system/components/article-hero.md","contract":"https://www.digitaltableteur.com/contracts/v1/ArticleHero.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ArticleHero.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/article-hero.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ArticleLayout","slug":"article-layout","status":"alpha","group":"layout","description":"Blog article page layout shell.","exported":false,"import":null,"customElement":null,"props":[{"name":"nav","type":"ReactNode","values":null,"default":null,"required":false,"description":"Navigation slot (back link, etc.)"},{"name":"hero","type":"ReactNode","values":null,"default":null,"required":true,"description":"Hero section."},{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"Main content area."},{"name":"sidebar","type":"ReactNode","values":null,"default":null,"required":false,"description":"Sidebar content (TOC, etc.)"},{"name":"relatedPosts","type":"ReactNode","values":null,"default":null,"required":false,"description":"Related posts section."},{"name":"showReadingProgress","type":"boolean","values":null,"default":"true","required":false,"description":"Show reading progress indicator."},{"name":"contentRef","type":"RefObject<HTMLElement | null>","values":null,"default":null,"required":false,"description":"Ref for reading progress tracking."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."},{"name":"lang","type":"string","values":null,"default":"en","required":false,"description":"Document language for the article root."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/article-layout","markdown":"https://www.digitaltableteur.com/design-system/components/article-layout.md","contract":"https://www.digitaltableteur.com/contracts/v1/ArticleLayout.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ArticleLayout.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/article-layout.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ArticlePageTemplate","slug":"article-page-template","status":"alpha","group":"layout","description":"Full blog article page template.","exported":false,"import":null,"customElement":null,"props":[{"name":"post","type":"BlogPostEntry","values":null,"default":null,"required":true,"description":"Blog post data."},{"name":"nav","type":"ReactNode","values":null,"default":null,"required":false,"description":"Navigation slot."},{"name":"shareBaseUrl","type":"string","values":null,"default":null,"required":false,"description":"Base URL for share links."},{"name":"showTOC","type":"boolean","values":null,"default":"false","required":false,"description":"Show table of contents."},{"name":"showRelated","type":"boolean","values":null,"default":"true","required":false,"description":"Show related posts."},{"name":"showReadingProgress","type":"boolean","values":null,"default":"true","required":false,"description":"Show reading progress."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/article-page-template","markdown":"https://www.digitaltableteur.com/design-system/components/article-page-template.md","contract":"https://www.digitaltableteur.com/contracts/v1/ArticlePageTemplate.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ArticlePageTemplate.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/article-page-template.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ArticleShareSection","slug":"article-share-section","status":"stable","group":"content","description":"End-of-article share section: X, LinkedIn and Facebook share links plus a copy-link button, under an optional heading.","exported":false,"import":null,"customElement":null,"props":[{"name":"url","type":"string","values":null,"default":null,"required":true,"description":"Article URL to share."},{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Article title for share text."},{"name":"layout","type":"\"horizontal\" | \"vertical\"","values":["horizontal","vertical"],"default":"horizontal","required":false,"description":"Layout direction. Defaults to `horizontal`."},{"name":"showTitle","type":"boolean","values":null,"default":"true","required":false,"description":"Show the translated \"Share this article\" heading, rendered at `headingLevel`. Defaults to `true`."},{"name":"headingLevel","type":"\"2\" | \"3\" | \"4\" | \"5\" | \"6\"","values":["2","3","4","5","6"],"default":"3","required":false,"description":"Heading level of the section title, to fit the page outline. Defaults to `3`."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"layout","values":["horizontal","vertical"],"default":"horizontal"},{"name":"headingLevel","values":["2","3","4","5","6"],"default":"3"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/article-share-section","markdown":"https://www.digitaltableteur.com/design-system/components/article-share-section.md","contract":"https://www.digitaltableteur.com/contracts/v1/ArticleShareSection.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ArticleShareSection.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/article-share-section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"AspectRatio","slug":"aspect-ratio","status":"beta","group":"structure","description":"Layout primitive that locks its children to a fixed width/height ratio (1:1, 4:3, 16:9, …) so media-shaped containers reserve space before content loads.","exported":true,"import":"import { AspectRatio } from \"@digitaltableteur/react\";","customElement":"dt-aspect-ratio","props":[{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"Media or placeholder content inside the ratio box."},{"name":"ratio","type":"\"1:1\" | \"4:3\" | \"16:9\" | \"21:9\" | \"3:2\" | \"2:3\"","values":["1:1","4:3","16:9","21:9","3:2","2:3"],"default":"16:9","required":false,"description":"Width-to-height ratio token."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS class names."}],"variants":[{"name":"ratio","values":["1:1","4:3","16:9","21:9","3:2","2:3"],"default":"16:9"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/aspect-ratio","markdown":"https://www.digitaltableteur.com/design-system/components/aspect-ratio.md","contract":"https://www.digitaltableteur.com/contracts/v1/AspectRatio.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/AspectRatio.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/aspect-ratio.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Author","slug":"author","status":"stable","group":"structure","description":"Compact byline that attributes content to any author: name, avatar (URL or path), optional profile link, and a localized or custom byline prefix; the fuller biography treatment is AuthorBio.","exported":true,"import":"import { Author } from \"@digitaltableteur/react\";","customElement":"dt-author","props":[{"name":"name","type":"string","values":null,"default":null,"required":true,"description":"Author name shown after the byline prefix; also names the avatar and feeds its initials fallback."},{"name":"imageUrl","type":"string | { default: string } | StaticImageData","values":null,"default":null,"required":false,"description":"Avatar image source: a URL, an imported asset path, or static image data. When absent the avatar falls back to initials from `name`."},{"name":"size","type":"AvatarSize","values":null,"default":"md","required":false,"description":"Avatar size, exposed from the Avatar atom: token sizes `sm`/`md`/`lg`/`xl` are canonical; any CSS length string is passed through. Defaults to `md`."},{"name":"profileUrl","type":"string","values":null,"default":null,"required":false,"description":"Optional author profile URL; makes the byline text a link."},{"name":"bylinePrefix","type":"string","values":null,"default":null,"required":false,"description":"Byline prefix before the name. Defaults to the localized \"By\" (fi \"Kirjoittanut\", sv \"Av\"), matching the native dt-author element."}],"variants":[{"name":"size","values":["sm","md","lg","xl"],"default":"md"}],"lookalikes":[{"name":"AuthorBio","when":"Do not use Author for a full biography or social-link block; use AuthorBio instead."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/author","markdown":"https://www.digitaltableteur.com/design-system/components/author.md","contract":"https://www.digitaltableteur.com/contracts/v1/Author.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Author.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/author.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"AuthorBio","slug":"author-bio","status":"stable","group":"structure","description":"Author biography card: avatar, name, role, and markdown bio. Fully input-driven: pass the details directly, or pass slug to resolve them from the site's author registry (direct props override registry fields). Renders nothing when no name resolves (unknown slug or empty input).","exported":true,"import":"import { AuthorBio } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"slug","type":"string","values":null,"default":null,"required":false,"description":"Optional author slug resolved from the site's authors registry; direct props below override the registry fields."},{"name":"name","type":"string","values":null,"default":null,"required":false,"description":"Author name. Required unless `slug` resolves it."},{"name":"imageUrl","type":"string | { default: string } | StaticImageData","values":null,"default":null,"required":false,"description":"Avatar image source: a URL, an imported asset path, or static image data."},{"name":"role","type":"string","values":null,"default":null,"required":false,"description":"Role/title shown under the name (e.g. \"Founder, CEO\")."},{"name":"bio","type":"string","values":null,"default":null,"required":false,"description":"Biography text (markdown). Paragraphs are separated by blank lines; the `compact` variant renders only the first one."},{"name":"email","type":"string","values":null,"default":null,"required":false,"description":"Contact email rendered as a mailto link when `showContact` is set."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional CSS class for styling extension."},{"name":"heading","type":"string","values":null,"default":null,"required":false,"description":"Optional custom heading text (defaults to the author name)"},{"name":"showContact","type":"boolean","values":null,"default":"false","required":false,"description":"Render the author's contact email (mailto) after the bio, if the author has one."},{"name":"profileHref","type":"string","values":null,"default":null,"required":false,"description":"Link the author's name to their profile page (e.g. /blog/authors/<slug>)."},{"name":"variant","type":"\"full\" | \"compact\"","values":["full","compact"],"default":"full","required":false,"description":"Full renders the whole biography (author pages). compact renders only the lead paragraph, for the end of an article. Defaults to full."}],"variants":[{"name":"variant","values":["full","compact"],"default":"full"}],"lookalikes":[{"name":"Author","when":"Do not use Author for a full biography or social-link block; use AuthorBio instead."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/author-bio","markdown":"https://www.digitaltableteur.com/design-system/components/author-bio.md","contract":"https://www.digitaltableteur.com/contracts/v1/AuthorBio.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/AuthorBio.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/author-bio.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Avatar","slug":"avatar","status":"stable","group":"display","description":"Profile image, initials, link, or menu trigger.","exported":true,"import":"import { Avatar } from \"@digitaltableteur/react\";","customElement":"dt-avatar","props":[{"name":"name","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"imageUrl","type":"string | { default: string } | StaticImageData","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"clickable","type":"boolean","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"destinationUrl","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"size","type":"AvatarSize","values":null,"default":"md","required":false,"description":"Avatar size: token sizes `sm`/`md`/`lg`/`xl` (2/2.5/3/4rem) are canonical; any CSS length is accepted as an escape hatch. Default `md`."},{"name":"srcSet","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"sizes","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"loading","type":"\"lazy\" | \"eager\"","values":["lazy","eager"],"default":"lazy","required":false,"description":"No description in the contract."},{"name":"decoding","type":"\"auto\" | \"sync\" | \"async\"","values":["auto","sync","async"],"default":"async","required":false,"description":"No description in the contract."},{"name":"menuItems","type":"AvatarMenuItem[]","values":null,"default":null,"required":false,"description":"When provided, renders an in-place dropdown menu triggered by the avatar."},{"name":"menuLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible label announced for the avatar menu trigger."},{"name":"variant","type":"\"image\" | \"initials\"","values":["image","initials"],"default":"image","required":false,"description":"Controls whether the avatar prefers an image or initials."},{"name":"alt","type":"string","values":null,"default":null,"required":false,"description":"Overrides the image alt text (defaults to `name`). Pass `\"\"` when the name is already printed beside the avatar, so it is not read twice."}],"variants":[{"name":"variant","values":["image","initials"],"default":"image"},{"name":"size","values":["sm","md","lg","xl","2rem","2.5rem","3rem","4rem","5rem","6rem","7rem","8rem"],"default":"md"},{"name":"loading","values":["lazy","eager"],"default":"lazy"},{"name":"decoding","values":["auto","sync","async"],"default":"async"}],"lookalikes":[{"name":"Button","when":"Do not nest an Avatar inside a Button. Pick one; Avatar already owns the click affordance when clickable, and Button owns it when not."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/avatar","markdown":"https://www.digitaltableteur.com/design-system/components/avatar.md","contract":"https://www.digitaltableteur.com/contracts/v1/Avatar.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Avatar.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/avatar.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"AvatarGroup","slug":"avatar-group","status":"beta","group":"display","description":"Overlapping stack of Avatars with a +N overflow bubble.","exported":true,"import":"import { AvatarGroup } from \"@digitaltableteur/react\";","customElement":"dt-avatar-group","props":[{"name":"ariaLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible name for the cluster (e.g. \"Project members\")."},{"name":"max","type":"number","values":null,"default":"4","required":false,"description":"Avatars beyond this count collapse into a \"+N\" bubble."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Size of the overflow bubble; children Avatars should match (sm=2rem, md=2.5rem, lg=3rem)."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"No description in the contract."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/avatar-group","markdown":"https://www.digitaltableteur.com/design-system/components/avatar-group.md","contract":"https://www.digitaltableteur.com/contracts/v1/AvatarGroup.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/AvatarGroup.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/avatar-group.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Badge","slug":"badge","status":"stable","group":"display","description":"Compact status label with an orthogonal variant (visual weight) and tone (semantic colour), a size, and an optional icon.","exported":true,"import":"import { Badge } from \"@digitaltableteur/react\";","customElement":"dt-badge","props":[{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"Label. Rendered exactly as given (never looked up as a translation key), so pass already translated text."},{"name":"variant","type":"\"primary\" | \"secondary\"","values":["primary","secondary"],"default":"primary","required":false,"description":"Visual weight. Defaults to `primary`."},{"name":"tone","type":"\"info\" | \"success\" | \"warning\" | \"error\" | \"neutral\"","values":["info","success","warning","error","neutral"],"default":"neutral","required":false,"description":"Semantic colour, orthogonal to `variant`. When omitted no tone class is applied and no semantic icon is added."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\" | \"xs\"","values":["sm","md","lg","xs"],"default":"md","required":false,"description":"Size. Defaults to `md`."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"removable","type":"boolean","values":null,"default":"false","required":false,"description":"Renders a dismiss control that removes the badge. On dismiss, focus moves to the next focusable element (else the previous one) before the badge unmounts. Defaults to `false`."},{"name":"onRemove","type":"() => void","values":null,"default":null,"required":false,"description":"Called after the badge is dismissed and focus has moved; focus it sets here wins."},{"name":"icon","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Leading icon; a semantic icon is supplied automatically for non-neutral tones."},{"name":"dot","type":"boolean","values":null,"default":"false","required":false,"description":"Render a leading StatusDot instead of the semantic icon, for example on lifecycle badges (alpha/beta/stable/deprecated). The dot paints the badge's own text colour (currentcolor), so on a filled badge it matches the label rather than the tone. An explicit `icon` still wins."},{"name":"square","type":"boolean","values":null,"default":"false","required":false,"description":"Square (non-pill) corners."},{"name":"role","type":"\"status\"","values":null,"default":null,"required":false,"description":"ARIA role. `\"status\"` makes dynamic updates announce via `aria-live=\"polite\"` (e.g. a live notification count). Omit for static decorative badges."},{"name":"href","type":"string","values":null,"default":null,"required":false,"description":"Makes the badge a link, for example a tag that opens a filtered list. It renders through the injected link component (the host's router link, else a plain anchor). A linked badge cannot also be `removable`."}],"variants":[{"name":"variant","values":["primary","secondary"],"default":"primary"},{"name":"tone","values":["neutral","error","warning","success","info"],"default":"neutral"},{"name":"size","values":["xs","sm","md","lg"],"default":"md"}],"lookalikes":[{"name":"Button","when":"Do not use Badge as an interactive action or toggle; use Button for actions and Switch or Checkbox for state."},{"name":"Card","when":"Do not use the muted variant to encode status; status belongs to AlertBanner or Badge."},{"name":"Checkbox","when":"Do not use Badge as an interactive action or toggle; use Button for actions and Switch or Checkbox for state."},{"name":"StatusDot","when":"Do not use StatusDot for counts, filters, or removable chips; Badge owns those surfaces."},{"name":"Switch","when":"Do not use Badge as an interactive action or toggle; use Button for actions and Switch or Checkbox for state."}],"invalidCombinations":[{"id":"badge-link-not-removable","level":"MUST NOT","condition":"When `href` is set and `removable` is set, then do not set `removable`.","reason":"A linked badge is one link; a remove button inside it would nest an interactive control in a link. Use a plain removable badge, or a linked badge without removable."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/badge","markdown":"https://www.digitaltableteur.com/design-system/components/badge.md","contract":"https://www.digitaltableteur.com/contracts/v1/Badge.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Badge.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/badge.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"BlogCategoryFilter","slug":"blog-category-filter","status":"stable","group":"navigation","description":"Single-select tag filter for the blog archive: a labelled group of toggle chips with an implicit All, three visual treatments, optional per-tag counts and an optional collapsed mode.","exported":false,"import":null,"customElement":null,"props":[{"name":"tags","type":"string[]","values":null,"default":null,"required":true,"description":"Array of unique tags."},{"name":"selectedTag","type":"string | null","values":null,"default":null,"required":true,"description":"Currently selected tag (null means \"All\")"},{"name":"onTagChange","type":"(tag: string | null) => void","values":null,"default":null,"required":true,"description":"Callback when tag selection changes."},{"name":"showCounts","type":"boolean","values":null,"default":"false","required":false,"description":"Show post counts per tag."},{"name":"tagCounts","type":"Record<string, number>","values":null,"default":"{}","required":false,"description":"Tag counts object."},{"name":"variant","type":"\"pills\" | \"underline\" | \"minimal\"","values":["pills","underline","minimal"],"default":"pills","required":false,"description":"Style variant."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Size variant."},{"name":"collapsible","type":"boolean","values":null,"default":"false","required":false,"description":"Collapse to the selected chip and a disclosure button; expanding shows every chip and picking one collapses back to it."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"variant","values":["pills","underline","minimal"],"default":"pills"},{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[{"name":"CategoryFilter","when":"Do not use this for generic list pages; that is CategoryFilter."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/blog-category-filter","markdown":"https://www.digitaltableteur.com/design-system/components/blog-category-filter.md","contract":"https://www.digitaltableteur.com/contracts/v1/BlogCategoryFilter.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/BlogCategoryFilter.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/blog-category-filter.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"BlogHero","slug":"blog-hero","status":"alpha","group":"marketing","description":"Hero section for the blog index with a title, subtitle, and optional scroll indicator in full or compact variants.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Hero title - uses i18n key \"blogHeroTitle\" if not provided."},{"name":"subtitle","type":"string","values":null,"default":null,"required":false,"description":"Hero subtitle - uses i18n key \"blogHeroSubtitle\" if not provided."},{"name":"variant","type":"\"full\" | \"compact\"","values":["full","compact"],"default":"compact","required":false,"description":"Hero variant."},{"name":"id","type":"string","values":null,"default":"blog-hero","required":false,"description":"Section ID for anchor navigation."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"variant","values":["full","compact"],"default":"full"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/blog-hero","markdown":"https://www.digitaltableteur.com/design-system/components/blog-hero.md","contract":"https://www.digitaltableteur.com/contracts/v1/BlogHero.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/BlogHero.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/blog-hero.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"BlogIndexContent","slug":"blog-index-content","status":"alpha","group":"content","description":"Blog index main content assembly.","exported":false,"import":null,"customElement":null,"props":[{"name":"postsPerPage","type":"number","values":null,"default":null,"required":false,"description":"Number of posts per page."},{"name":"showHero","type":"boolean","values":null,"default":null,"required":false,"description":"Show hero section."},{"name":"heroVariant","type":"\"full\" | \"compact\"","values":["full","compact"],"default":null,"required":false,"description":"Hero variant."},{"name":"showFilter","type":"boolean","values":null,"default":null,"required":false,"description":"Show filter."},{"name":"filterVariant","type":"\"pills\" | \"underline\" | \"minimal\"","values":["pills","underline","minimal"],"default":null,"required":false,"description":"Filter variant."},{"name":"showPagination","type":"boolean","values":null,"default":null,"required":false,"description":"Show pagination."},{"name":"gridLayout","type":"\"standard\" | \"featured-first\"","values":["standard","featured-first"],"default":null,"required":false,"description":"Grid layout."},{"name":"hideImages","type":"boolean","values":null,"default":null,"required":false,"description":"Hide images in article cards."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"heroVariant","values":["full","compact"],"default":null},{"name":"filterVariant","values":["pills","underline","minimal"],"default":null},{"name":"gridLayout","values":["standard","featured-first"],"default":null}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/blog-index-content","markdown":"https://www.digitaltableteur.com/design-system/components/blog-index-content.md","contract":"https://www.digitaltableteur.com/contracts/v1/BlogIndexContent.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/BlogIndexContent.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/blog-index-content.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"BlogMediaImage","slug":"blog-media-image","status":"stable","group":"media","description":"Blog-optimized responsive image: renders raster sources through next/image and SVG sources as a plain img, with a fill mode (cover/contain fit) and a fluid full-bleed mode for raster images.","exported":false,"import":null,"customElement":"dt-blog-media-image","props":[{"name":"src","type":"string","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"alt","type":"string","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"fill","type":"boolean","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"width","type":"number","values":null,"default":null,"required":false,"description":"Intrinsic width. Raster images without fill fall back to 800 when omitted; SVG sources pass it through as the width attribute."},{"name":"height","type":"number","values":null,"default":null,"required":false,"description":"Intrinsic height. Raster images without fill fall back to 400 when omitted; SVG sources pass it through as the height attribute."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"priority","type":"boolean","values":null,"default":"false","required":false,"description":"No description in the contract."},{"name":"sizes","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"onLoad","type":"() => void","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"onError","type":"() => void","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"fit","type":"\"cover\" | \"contain\"","values":["cover","contain"],"default":"cover","required":false,"description":"Object fit in fill mode only: contain for diagram heroes, cover (the default) for photos. Ignored when fill is not set."},{"name":"fluid","type":"boolean","values":null,"default":"false","required":false,"description":"Raster images without fill only: when true the image spans its container (no max-width cap from the width prop). SVG sources and fill mode ignore it."}],"variants":[{"name":"fit","values":["cover","contain"],"default":"cover"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/blog-media-image","markdown":"https://www.digitaltableteur.com/design-system/components/blog-media-image.md","contract":"https://www.digitaltableteur.com/contracts/v1/BlogMediaImage.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/BlogMediaImage.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/blog-media-image.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"BlogNav","slug":"blog-nav","status":"stable","group":"navigation","description":"Blog article sub-navigation: a back-to-articles action plus previous/next controls for stepping through the article sequence.","exported":false,"import":null,"customElement":"dt-blog-nav","props":[{"name":"currentPath","type":"string","values":null,"default":null,"required":false,"description":"Active route used to compute the prev/next disabled state. Defaults to the current pathname from the router; stories and tests override it to show a given position in the article sequence."},{"name":"pages","type":"readonly BlogNavPage[]","values":null,"default":null,"required":false,"description":"Ordered article paths. Defaults to the bundled legacy sequence."},{"name":"onNavigate","type":"(path: string) => void","values":null,"default":null,"required":false,"description":"Host navigation callback. Defaults to the configured navigation runtime."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disables every action while host navigation is pending."}],"variants":[],"lookalikes":[{"name":"NavLink","when":"Do not use BlogNav as site-wide navigation; use SiteHeader or NavLink instead."},{"name":"SiteHeader","when":"Do not use BlogNav as site-wide navigation; use SiteHeader or NavLink instead."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/blog-nav","markdown":"https://www.digitaltableteur.com/design-system/components/blog-nav.md","contract":"https://www.digitaltableteur.com/contracts/v1/BlogNav.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/BlogNav.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/blog-nav.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"BrandLockup","slug":"brand-lockup","status":"alpha","group":"display","description":"The Digitaltableteur lockup: the mark in its brand disc beside the name in live Satoshi Bold, sized as one unit from the disc height so the parts never drift apart.","exported":false,"import":null,"customElement":null,"props":[{"name":"size","type":"\"sm\" | \"md\" | \"lg\" | \"xl\"","values":["sm","md","lg","xl"],"default":"md","required":false,"description":"Disc height 32, 40, 64 or 80 px; the name and the gap scale with it. Defaults to `\"md\"`."},{"name":"animated","type":"boolean","values":null,"default":"false","required":false,"description":"Pulses the mark's three leading bars while true, driven by the consumer's hover or focus. Defaults to `false`."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Extra class names on the root; set `--brand-lockup-height` here to resize at a breakpoint."}],"variants":[{"name":"size","values":["sm","md","lg","xl"],"default":"md"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/brand-lockup","markdown":"https://www.digitaltableteur.com/design-system/components/brand-lockup.md","contract":"https://www.digitaltableteur.com/contracts/v1/BrandLockup.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/BrandLockup.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/brand-lockup.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Breadcrumb","slug":"breadcrumb","status":"stable","group":"navigation","description":"Navigation trail with current page indication; middle items collapse into an ellipsis menu when the trail overflows or exceeds `maxItems`.","exported":true,"import":"import { Breadcrumb } from \"@digitaltableteur/react\";","customElement":"dt-breadcrumb","props":[{"name":"items","type":"BreadcrumbItem[]","values":null,"default":null,"required":true,"description":"Breadcrumb items in root-to-current order (label, optional href); the last renders as plain text."},{"name":"aria-label","type":"string","values":null,"default":null,"required":false,"description":"Accessible name for the nav landmark. Defaults to the translated \"Breadcrumb\" (`breadcrumb.label`)."},{"name":"underline","type":"\"always\" | \"hover\" | \"none\"","values":["always","hover","none"],"default":"always","required":false,"description":"Underline mode forwarded to the Link for each trail item, the same contract as Link: \"always\" shows the underline permanently, \"hover\" reveals it on hover and keyboard focus, \"none\" omits it. Defaults to `always`."},{"name":"maxItems","type":"number","values":null,"default":null,"required":false,"description":"Static collapse cap. When set to a positive number smaller than the item count, the middle items collapse into an ellipsis menu WITHOUT measuring: the first `maxItems - 2` leading items and the current item stay visible. Leave unset (or 0) for automatic width-based collapse (the default)."},{"name":"collapseLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible name for the ellipsis menu trigger. Defaults to the translated \"Show N hidden breadcrumbs\" (`breadcrumb.showHiddenOne` / `breadcrumb.showHiddenOther`)."},{"name":"homeIcon","type":"boolean","values":null,"default":"false","required":false,"description":"Render the first item as a house icon instead of its text label. The item's label becomes the icon's accessible name, so screen readers still announce it (e.g. \"Home\"). Defaults to `false`."}],"variants":[{"name":"underline","values":["always","hover","none"],"default":"always"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/breadcrumb","markdown":"https://www.digitaltableteur.com/design-system/components/breadcrumb.md","contract":"https://www.digitaltableteur.com/contracts/v1/Breadcrumb.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Breadcrumb.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/breadcrumb.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Button","slug":"button","status":"stable","group":"actions","description":"Primary action control with an orthogonal variant (visual weight) and tone (semantic color) model, loading state, and polymorphic button/link rendering.","exported":true,"import":"import { Button } from \"@digitaltableteur/react\";","customElement":"dt-button","props":[{"name":"submits","type":"boolean","values":null,"default":null,"required":false,"description":"When true, sets `type=\"submit\"`."},{"name":"clickAction","type":"(event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>","values":null,"default":null,"required":false,"description":"Async click handler. `onClick` still fires first if both are provided. While the returned promise is pending, the button shows its `loading` state, sets `aria-busy`, and disables itself (deduping repeat clicks). Rejections are swallowed after clearing the pending state; callers own error UX (e.g. surface a toast from within `clickAction` itself)."},{"name":"href","type":"string","values":null,"default":null,"required":false,"description":"Destination URL. When provided, the button renders as an anchor."},{"name":"target","type":"\"_self\" | \"_blank\" | \"_parent\" | \"_top\"","values":["_self","_blank","_parent","_top"],"default":null,"required":false,"description":"No description in the contract."},{"name":"rel","type":"string | undefined","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"variant","type":"\"primary\" | \"secondary\" | \"tertiary\"","values":["primary","secondary","tertiary"],"default":"primary","required":false,"description":"Visual weight."},{"name":"tone","type":"\"info\" | \"success\" | \"warning\" | \"error\" | \"neutral\"","values":["info","success","warning","error","neutral"],"default":"neutral","required":false,"description":"Semantic color, orthogonal to `variant`."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Size."},{"name":"surface","type":"\"default\" | \"onDark\" | \"onBrand\"","values":["default","onDark","onBrand"],"default":"default","required":false,"description":"Surface the button renders on; prefer this over absolute colors on tinted bands."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disables interaction and dims the control."},{"name":"loading","type":"boolean","values":null,"default":"false","required":false,"description":"Shows a loading state and blocks interaction; sets `aria-busy`."},{"name":"rounded","type":"boolean","values":null,"default":"false","required":false,"description":"Fully rounded (pill) corners."},{"name":"icon","type":"React.ReactNode | string","values":null,"default":null,"required":false,"description":"Leading icon: a React node, a component, or a Phosphor icon name (e.g. `\"arrow-left\"`)."},{"name":"endIcon","type":"React.ReactNode | string","values":null,"default":null,"required":false,"description":"Trailing icon: a React node, a component, or a Phosphor icon name."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Button label."},{"name":"accessibleName","type":"string","values":null,"default":null,"required":false,"description":"Accessible name; required for icon-only buttons. Maps to `aria-label`."},{"name":"accessibleNameRef","type":"string","values":null,"default":null,"required":false,"description":"Id of an element that labels this button. Maps to `aria-labelledby`."},{"name":"accessibleDescription","type":"string","values":null,"default":null,"required":false,"description":"Extra context for assistive tech. Maps to `aria-describedby`."},{"name":"tooltip","type":"string","values":null,"default":null,"required":false,"description":"Native tooltip text (`title`). Becomes the `aria-label` only on icon-only buttons; with visible children the label stays the accessible name."},{"name":"consequence","type":"\"reversible\" | \"irreversible\" | \"external\" | \"financial\" | \"privacy\" | \"identity\"","values":["reversible","irreversible","external","financial","privacy","identity"],"default":null,"required":false,"description":"Class of action this button performs. `irreversible` requires `tone=\"error\"` and an explicit confirmation step; `external` (sends something to someone) requires a review step; `reversible` requires an undo. Rendered as `data-consequence` for tests and audits."}],"variants":[{"name":"variant","values":["primary","secondary","tertiary"],"default":"primary"},{"name":"tone","values":["neutral","error","warning","success","info"],"default":"neutral"},{"name":"surface","values":["default","onDark","onBrand"],"default":"default"},{"name":"size","values":["sm","md","lg"],"default":"md"},{"name":"target","values":["_self","_blank","_parent","_top"],"default":null},{"name":"consequence","values":["reversible","irreversible","external","financial","privacy","identity"],"default":null}],"lookalikes":[{"name":"Avatar","when":"Do not nest an Avatar inside a Button. Pick one; Avatar already owns the click affordance when clickable, and Button owns it when not."},{"name":"Badge","when":"Do not use Badge as an interactive action or toggle; use Button for actions and Switch or Checkbox for state."},{"name":"Checkbox","when":"Do not use Button for an on/off state; use Switch. For multi-select within a group, use Checkbox or CheckboxGroup."},{"name":"CheckboxGroup","when":"Do not use Button for an on/off state; use Switch. For multi-select within a group, use Checkbox or CheckboxGroup."},{"name":"Icon","when":"Do not build icon-only buttons from a bare Icon; use Button with icon and accessibleName so focus, hit target and keyboard activation are owned by the right component."},{"name":"IconButton","when":"Do not use IconButton for primary marketing CTAs; text plus icon is more discoverable, use Button with an icon prop."},{"name":"Link","when":"Do not use Button for pure navigation; if it only takes the user to another page, use Link (Button with href is for action-shaped navigation like Get started)."},{"name":"SlideButton","when":"Do not use it for form submission or in-page actions; use Button, which renders a real button."},{"name":"Switch","when":"Do not use Button for an on/off state; use Switch. For multi-select within a group, use Checkbox or CheckboxGroup."},{"name":"Title","when":"Do not nest a Title inside a Button. Use the Button's text slot directly."}],"invalidCombinations":[{"id":"button-icon-only-needs-name","level":"MUST NOT","condition":"When `icon` is set and `children` is not set, then set one of `accessibleName`, `accessibleNameRef`, `tooltip`, `aria-label`.","reason":"An icon-only button has no accessible name. Add accessibleName, accessibleNameRef, or tooltip, e.g. <Button icon=\"search\" accessibleName=\"Search\" />."},{"id":"button-status-icon-only-needs-name","level":"MUST NOT","condition":"When `tone` is one of `error`, `warning`, `success`, `info` and `icon` is not set and `children` is not set, then set one of `accessibleName`, `accessibleNameRef`, `tooltip`, `aria-label`.","reason":"A tone other than neutral renders its status icon by default, so a Button with a tone and no children is icon-only and needs an accessible name, e.g. <Button tone=\"error\" accessibleName=\"Delete\" />."},{"id":"button-irreversible-needs-error-tone","level":"MUST NOT","condition":"When `consequence` is `irreversible` and `tone` is one of `neutral`, `info`, `success`, `warning`, then do not set `tone`.","reason":"An irreversible action must read as destructive before it is activated. Use tone=\"error\", e.g. <Button consequence=\"irreversible\" tone=\"error\">Delete</Button>."},{"id":"button-irreversible-tone-missing","level":"MUST NOT","condition":"When `consequence` is `irreversible` and `tone` is not set, then also set `tone`.","reason":"An irreversible action defaults to the neutral tone, which hides its consequence. Set tone=\"error\"."},{"id":"mutually-exclusive-href-submits","level":"MUST NOT","condition":"`href` and `submits` set together.","reason":"`href` and `submits` never coexist in a valid ButtonProps branch."},{"id":"mutually-exclusive-clickAction-href","level":"MUST NOT","condition":"`clickAction` and `href` set together.","reason":"`clickAction` and `href` never coexist in a valid ButtonProps branch."},{"id":"requires-target","level":"MUST","condition":"`target` set without `href`.","reason":"Whenever `target` is accepted by ButtonProps, `href` must also be present."},{"id":"requires-rel","level":"MUST","condition":"`rel` set without `href`.","reason":"Whenever `rel` is accepted by ButtonProps, `href` must also be present."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/button","markdown":"https://www.digitaltableteur.com/design-system/components/button.md","contract":"https://www.digitaltableteur.com/contracts/v1/Button.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Button.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/button.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ButtonGroup","slug":"button-group","status":"beta","group":"actions","description":"Groups related Buttons into one attached (segmented) or spaced row.","exported":true,"import":"import { ButtonGroup } from \"@digitaltableteur/react\";","customElement":"dt-button-group","props":[{"name":"ariaLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible name for the group (announced by screen readers)."},{"name":"attached","type":"boolean","values":null,"default":"true","required":false,"description":"Fuse the children into one segmented control surface."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"Buttons / IconButtons of the same variant and size."}],"variants":[],"lookalikes":[{"name":"SegmentedControl","when":"Do not use it for actions or navigation that commits/routes; use `ButtonGroup` or links. Selecting must only change the bound value."},{"name":"SplitButton","when":"Do not put a menu trigger inside; SplitButton owns primary-action + menu."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/button-group","markdown":"https://www.digitaltableteur.com/design-system/components/button-group.md","contract":"https://www.digitaltableteur.com/contracts/v1/ButtonGroup.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ButtonGroup.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/button-group.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Card","slug":"card","status":"stable","group":"structure","description":"Quiet bordered card surface for discrete, self-contained content, including cards with actions composed into footer slots.","exported":true,"import":"import { Card } from \"@digitaltableteur/react\";","customElement":"dt-card","props":[{"name":"variant","type":"\"default\" | \"muted\" | \"transparent\"","values":["default","muted","transparent"],"default":"default","required":false,"description":"Background variant. All variants keep a transparent border so switching never causes layout jitter. - default: surface background with a hairline border - muted: recessed light background, no visible border - transparent: no background, no border; grouping without weight."},{"name":"padding","type":"\"sm\" | \"md\" | \"lg\" | \"none\"","values":["sm","md","lg","none"],"default":"md","required":false,"description":"Internal padding step on the space scale (12/16/24px)"},{"name":"as","type":"\"article\" | \"div\" | \"section\" | \"aside\" | \"li\"","values":["article","div","section","aside","li"],"default":"div","required":false,"description":"Semantic element for the card surface."},{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Optional heading rendered at the top of the card."},{"name":"titleProps","type":"CardTitleProps","values":null,"default":"{}","required":false,"description":"Heading configuration."},{"name":"description","type":"string","values":null,"default":null,"required":false,"description":"Optional supporting line under the title."},{"name":"descriptionProps","type":"CardDescriptionProps","values":null,"default":"{}","required":false,"description":"Description configuration."},{"name":"headerStart","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Leading header region. Defaults to the `title` heading block when omitted."},{"name":"headerEnd","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Trailing header region (badge, metadata, menu). Canonical replacement for `extra`."},{"name":"extra","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"No description in the contract.","deprecated":"Deprecated."},{"name":"footerStart","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Leading footer region; the special/destructive action, pinned left."},{"name":"footerEnd","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Trailing footer region; 1–2 action buttons, pinned right."},{"name":"link","type":"string","values":null,"default":null,"required":false,"description":"Makes the whole card one link to this href."},{"name":"linkLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible name for the link when title alone is ambiguous."},{"name":"loading","type":"boolean","values":null,"default":"false","required":false,"description":"Skeleton loading state: the card is aria-busy and its skeleton is the one status region (\"Loading\")."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[{"name":"variant","values":["default","muted","transparent"],"default":"default"},{"name":"padding","values":["none","sm","md","lg"],"default":"md"},{"name":"as","values":["article","div","section","aside","li"],"default":"div"}],"lookalikes":[{"name":"AlertBanner","when":"Do not use the muted variant to encode status; status belongs to AlertBanner or Badge."},{"name":"Badge","when":"Do not use the muted variant to encode status; status belongs to AlertBanner or Badge."},{"name":"LocationCard","when":"Do not use as a generic 'card with an icon and label'; that is `Card`."},{"name":"Section","when":"Do not wrap page sections or whole forms in cards, and never nest cards in cards; that is Section/Stack territory."},{"name":"SelectableCard","when":"Do not nest buttons or links inside a selectable card; use Card for action-oriented content."},{"name":"Stack","when":"Do not wrap page sections or whole forms in cards, and never nest cards in cards; that is Section/Stack territory."},{"name":"ValueCard","when":"Do not use for content with a primary CTA; that is `ServiceCard` or `Card`."}],"invalidCombinations":[{"id":"card-link-with-footer","level":"MUST NOT","condition":"When `link` is set, then do not set `footerStart` or `footerEnd`.","reason":"`link` is ignored when `footerStart`/`footerEnd` are set: a stretched anchor cannot wrap interactive footer controls. Use a plain card with buttons instead."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/card","markdown":"https://www.digitaltableteur.com/design-system/components/card.md","contract":"https://www.digitaltableteur.com/contracts/v1/Card.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Card.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/card.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"CaseStudySummary","slug":"case-study-summary","status":"alpha","group":"content","description":"Decision-first case study summary: outcome, role, constraints, key decisions and evidence with source labels.","exported":false,"import":null,"customElement":null,"props":[{"name":"outcome","type":"string","values":null,"default":null,"required":true,"description":"What changed because of the work, in one or two sentences."},{"name":"role","type":"string","values":null,"default":null,"required":true,"description":"Role and scope of the engagement."},{"name":"constraints","type":"string[]","values":null,"default":null,"required":true,"description":"What made the problem hard."},{"name":"decisions","type":"CaseStudyDecision[]","values":null,"default":null,"required":true,"description":"The decisions that shaped the result."},{"name":"evidence","type":"CaseStudyEvidence[]","values":null,"default":null,"required":true,"description":"Claims with an explicit source label; nothing is presented unsourced."},{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Section heading. Defaults to the translated \"At a glance\"."},{"name":"maxWidth","type":"\"sm\" | \"md\" | \"lg\" | \"full\" | \"xl\"","values":["sm","md","lg","full","xl"],"default":"lg","required":false,"description":"Maximum content width."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional class name applied to the section root."}],"variants":[{"name":"maxWidth","values":["sm","md","lg","full","xl"],"default":"lg"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/case-study-summary","markdown":"https://www.digitaltableteur.com/design-system/components/case-study-summary.md","contract":"https://www.digitaltableteur.com/contracts/v1/CaseStudySummary.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/CaseStudySummary.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/case-study-summary.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"CategoryFilter","slug":"category-filter","status":"stable","group":"navigation","description":"Filter pill row for list pages (today the work index; the blog archive uses BlogCategoryFilter). Multiple visual treatments (pills, underline, minimal) for different surface densities.","exported":true,"import":"import { CategoryFilter } from \"@digitaltableteur/react\";","customElement":"dt-category-filter","props":[{"name":"categories","type":"CategoryOption[]","values":null,"default":null,"required":true,"description":"Array of category options."},{"name":"activeCategory","type":"string","values":null,"default":null,"required":false,"description":"Currently active category value (single mode)"},{"name":"onCategoryChange","type":"(category: string) => void","values":null,"default":null,"required":false,"description":"Callback when category changes (single mode)"},{"name":"multiple","type":"boolean","values":null,"default":"false","required":false,"description":"Lets several chips stay pressed at once. Pressing a chip toggles it, pressing the `allValue` chip clears the selection, and the collapsible row stays open while picking."},{"name":"activeCategories","type":"string[]","values":null,"default":"[]","required":false,"description":"Pressed values in multiple mode; an empty array presses the `allValue` chip."},{"name":"onCategoriesChange","type":"(categories: string[]) => void","values":null,"default":null,"required":false,"description":"Called with the new pressed values in multiple mode."},{"name":"allValue","type":"string","values":null,"default":"all","required":false,"description":"Value of the chip that clears the selection in multiple mode. Defaults to `\"all\"`."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Size variant."},{"name":"variant","type":"\"pills\" | \"underline\" | \"minimal\"","values":["pills","underline","minimal"],"default":"pills","required":false,"description":"Style variant."},{"name":"collapsible","type":"boolean","values":null,"default":"false","required":false,"description":"Collapse to the active chip and a disclosure button; expanding shows every chip and picking one collapses back to it."},{"name":"disclosureLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible name of the disclosure button; defaults to the translated \"All categories\"."},{"name":"groupLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible name of the filter group; defaults to the translated \"Filter by category\" (`categoryFilterGroupLabel`)."}],"variants":[{"name":"variant","values":["pills","underline","minimal"],"default":"pills"},{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[{"name":"BlogCategoryFilter","when":"Do not use this for generic list pages; that is CategoryFilter."},{"name":"NavLink","when":"Do not use as primary navigation; `CategoryFilter` is a UI control, not a nav surface; use `NavLink` for routes."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/category-filter","markdown":"https://www.digitaltableteur.com/design-system/components/category-filter.md","contract":"https://www.digitaltableteur.com/contracts/v1/CategoryFilter.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/CategoryFilter.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/category-filter.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Center","slug":"center","status":"beta","group":"structure","description":"Centers its children horizontally and vertically inside a relative container. Single-purpose alternative to ad-hoc `flex items-center justify-center` snippets scattered through the codebase.","exported":true,"import":"import { Center } from \"@digitaltableteur/react\";","customElement":"dt-center","props":[{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"Content to center inside the flex container."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS class names (often a height constraint)."},{"name":"as","type":"\"symbol\" | \"object\" | \"image\" | \"form\" | \"slot\" | \"style\" | \"title\" | \"button\" | \"search\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"div\" | \"section\" | \"aside\" | \"li\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"canvas\" | \"caption\" | \"center\" | \"cite\" | \"code\" | \"col\" | \"colgroup\" | \"data\" | \"datalist\" | \"dd\" | \"del\" | \"details\" | \"dfn\" | \"dl\" | \"dt\" | \"em\" | \"embed\" | \"fieldset\" | \"figcaption\" | \"footer\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"head\" | \"header\" | \"hgroup\" | \"hr\" | \"html\" | \"i\" | \"iframe\" | \"input\" | \"ins\" | \"kbd\" | \"keygen\" | \"label\" | \"legend\" | \"map\" | \"mark\" | \"meta\" | \"meter\" | \"nav\" | \"noindex\" | \"noscript\" | \"ol\" | \"optgroup\" | \"output\" | \"p\" | \"param\" | \"picture\" | \"pre\" | \"progress\" | \"q\" | \"rp\" | \"rt\" | \"ruby\" | \"s\" | \"samp\" | \"script\" | \"select\" | \"small\" | \"source\" | \"span\" | \"strong\" | \"sub\" | \"summary\" | \"sup\" | \"template\" | \"tbody\" | \"td\" | \"textarea\" | \"tfoot\" | \"th\" | \"thead\" | \"tr\" | \"track\" | \"u\" | \"ul\" | \"var\" | \"video\" | \"wbr\" | \"webview\" | \"svg\" | \"animate\" | \"animateMotion\" | \"animateTransform\" | \"circle\" | \"clipPath\" | \"defs\" | \"desc\" | \"ellipse\" | \"feBlend\" | \"feColorMatrix\" | \"feComponentTransfer\" | \"feComposite\" | \"feConvolveMatrix\" | \"feDiffuseLighting\" | \"feDisplacementMap\" | \"feDistantLight\" | \"feDropShadow\" | \"feFlood\" | \"feFuncA\" | \"feFuncB\" | \"feFuncG\" | \"feFuncR\" | \"feGaussianBlur\" | \"feImage\" | \"feMerge\" | \"feMergeNode\" | \"feMorphology\" | \"feOffset\" | \"fePointLight\" | \"feSpecularLighting\" | \"feSpotLight\" | \"feTile\" | \"feTurbulence\" | \"filter\" | \"foreignObject\" | \"g\" | \"line\" | \"linearGradient\" | \"marker\" | \"mask\" | \"metadata\" | \"mpath\" | \"path\" | \"pattern\" | \"polygon\" | \"polyline\" | \"radialGradient\" | \"rect\" | \"set\" | \"stop\" | \"textPath\" | \"tspan\" | \"use\" | \"view\"","values":["symbol","object","image","form","slot","style","title","button","search","article","dialog","figure","img","link","main","menu","menuitem","option","switch","table","text","time","div","section","aside","li","a","abbr","address","area","audio","b","base","bdi","bdo","big","blockquote","body","br","canvas","caption","center","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dl","dt","em","embed","fieldset","figcaption","footer","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","input","ins","kbd","keygen","label","legend","map","mark","meta","meter","nav","noindex","noscript","ol","optgroup","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","select","small","source","span","strong","sub","summary","sup","template","tbody","td","textarea","tfoot","th","thead","tr","track","u","ul","var","video","wbr","webview","svg","animate","animateMotion","animateTransform","circle","clipPath","defs","desc","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","set","stop","textPath","tspan","use","view"],"default":"div","required":false,"description":"Polymorphic wrapper element."}],"variants":[{"name":"as","values":["symbol","object","image","form","slot","style","title","button","search","article","dialog","figure","img","link","main","menu","menuitem","option","switch","table","text","time","div","section","aside","li","a","abbr","address","area","audio","b","base","bdi","bdo","big","blockquote","body","br","canvas","caption","center","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dl","dt","em","embed","fieldset","figcaption","footer","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","input","ins","kbd","keygen","label","legend","map","mark","meta","meter","nav","noindex","noscript","ol","optgroup","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","select","small","source","span","strong","sub","summary","sup","template","tbody","td","textarea","tfoot","th","thead","tr","track","u","ul","var","video","wbr","webview","svg","animate","animateMotion","animateTransform","circle","clipPath","defs","desc","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","set","stop","textPath","tspan","use","view"],"default":"div"}],"lookalikes":[{"name":"Container","when":"Do not use Center as a page layout root; that is Container + Section."},{"name":"EmptyState","when":"Use it for single focal content: Spinner, EmptyState, a logo lockup."},{"name":"Section","when":"Do not use Center as a page layout root; that is Container + Section."},{"name":"Spinner","when":"Use it for single focal content: Spinner, EmptyState, a logo lockup."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/center","markdown":"https://www.digitaltableteur.com/design-system/components/center.md","contract":"https://www.digitaltableteur.com/contracts/v1/Center.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Center.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/center.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ChatWidget","slug":"chat-widget","status":"beta","group":"overlay","description":"Collapsible AI assistant with first-interaction transparency, session-only history and streaming replies.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"description","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"endpoint","type":"string","values":null,"default":null,"required":false,"description":"Optional override for the API endpoint. Defaults to VITE_DONNY_CHAT_ENDPOINT, otherwise falls back to the secure proxy or /api/chat."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/chat-widget","markdown":"https://www.digitaltableteur.com/design-system/components/chat-widget.md","contract":"https://www.digitaltableteur.com/contracts/v1/ChatWidget.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ChatWidget.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/chat-widget.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Checkbox","slug":"checkbox","status":"stable","group":"form","description":"Accessible checkbox with label, indeterminate, and size variants.","exported":true,"import":"import { Checkbox } from \"@digitaltableteur/react\";","customElement":"dt-checkbox","props":[{"name":"label","type":"string","values":null,"default":null,"required":false,"description":"Label text displayed next to the checkbox."},{"name":"showLabel","type":"boolean","values":null,"default":"true","required":false,"description":"Whether to show the label text."},{"name":"checked","type":"boolean","values":null,"default":null,"required":false,"description":"Checked state (controlled)."},{"name":"indeterminate","type":"boolean","values":null,"default":"false","required":false,"description":"Indeterminate (mixed) state."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disables interaction and dims the control."},{"name":"defaultChecked","type":"boolean","values":null,"default":null,"required":false,"description":"Initial checked state for uncontrolled use."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Size."},{"name":"onCheckedChange","type":"(checked: boolean) => void","values":null,"default":null,"required":false,"description":"Called with the next checked value when toggled."},{"name":"id","type":"string","values":null,"default":null,"required":false,"description":"Custom ID for the checkbox element; auto-generated when omitted."},{"name":"error","type":"string","values":null,"default":null,"required":false,"description":"Error message under the control; sets aria-invalid and aria-describedby."},{"name":"helperText","type":"string","values":null,"default":null,"required":false,"description":"Supporting text under the control; always rendered, below `error` when both are set."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[{"name":"Badge","when":"Do not use Badge as an interactive action or toggle; use Button for actions and Switch or Checkbox for state."},{"name":"Button","when":"Do not use Button for an on/off state; use Switch. For multi-select within a group, use Checkbox or CheckboxGroup."},{"name":"Radio","when":"Do not render a lone radio; a choice with one option is a Checkbox."},{"name":"RadioGroup","when":"Use RadioGroup when the user picks exactly one option from an exclusive set; Checkbox is an independent yes or no choice."},{"name":"Switch","when":"Do not use a Checkbox for an immediate on/off effect; that is Switch."}],"invalidCombinations":[{"id":"mutually-exclusive-checked-defaultChecked","level":"MUST NOT","condition":"`checked` and `defaultChecked` set together.","reason":"`checked` makes the component controlled and `defaultChecked` uncontrolled; pass one, not both."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/checkbox","markdown":"https://www.digitaltableteur.com/design-system/components/checkbox.md","contract":"https://www.digitaltableteur.com/contracts/v1/Checkbox.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Checkbox.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/checkbox.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"CheckboxGroup","slug":"checkbox-group","status":"stable","group":"form","description":"Grouped checkboxes with optional master checkbox.","exported":true,"import":"import { CheckboxGroup } from \"@digitaltableteur/react\";","customElement":"dt-checkbox-group","props":[{"name":"id","type":"string","values":null,"default":null,"required":false,"description":"Base id for the checkbox inputs. Without one, the group generates a unique base id, so two groups on a page never share checkbox ids."},{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Legend text for the group."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS classes on the group."},{"name":"options","type":"{ label: string; value: string }[]","values":null,"default":"[]","required":true,"description":"Checkbox options (label, value)"},{"name":"showMasterCheckbox","type":"boolean","values":null,"default":"true","required":false,"description":"Shows the select-all master checkbox. Defaults to true."},{"name":"masterLabel","type":"string","values":null,"default":null,"required":false,"description":"Label for the select-all master checkbox."},{"name":"hideLegend","type":"boolean","values":null,"default":"false","required":false,"description":"Keeps the legend as the accessible name but hides it visually, for a group whose section heading already names it."},{"name":"defaultSelected","type":"string[]","values":null,"default":null,"required":false,"description":"Initially selected option values (uncontrolled)"},{"name":"onChange","type":"(selectedOptions: string[]) => void","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[],"lookalikes":[{"name":"Button","when":"Do not use Button for an on/off state; use Switch. For multi-select within a group, use Checkbox or CheckboxGroup."},{"name":"RadioGroup","when":"Do not use it for exclusive choices; that is RadioGroup."},{"name":"SelectableCard","when":"For bare text options without supporting content, use RadioGroup or CheckboxGroup."},{"name":"SelectableCardGroup","when":"Do not use rich cards when plain RadioGroup or CheckboxGroup labels communicate the choices clearly."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/checkbox-group","markdown":"https://www.digitaltableteur.com/design-system/components/checkbox-group.md","contract":"https://www.digitaltableteur.com/contracts/v1/CheckboxGroup.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/CheckboxGroup.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/checkbox-group.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ClientLogoMarquee","slug":"client-logo-marquee","status":"stable","group":"marketing","description":"Animated client logo marquee on the homepage.","exported":false,"import":null,"customElement":null,"props":[{"name":"ariaLabel","type":"string","values":null,"default":null,"required":true,"description":"Accessible name for the marquee section."},{"name":"pauseLabel","type":"string","values":null,"default":null,"required":false,"description":"Label for the control that pauses the marquee. Defaults to the translated homeClientLogosPause label."},{"name":"resumeLabel","type":"string","values":null,"default":null,"required":false,"description":"Label for the control that resumes the marquee. Defaults to the translated homeClientLogosResume label."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS classes on the marquee section."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/client-logo-marquee","markdown":"https://www.digitaltableteur.com/design-system/components/client-logo-marquee.md","contract":"https://www.digitaltableteur.com/contracts/v1/ClientLogoMarquee.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ClientLogoMarquee.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/client-logo-marquee.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Code","slug":"code","status":"beta","group":"display","description":"Inline code for a function name, prop, file path or CLI flag inside prose.","exported":true,"import":"import { Code } from \"@digitaltableteur/react\";","customElement":"dt-code","props":[{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Match the surrounding text: `sm` beside Body xxs/xs, `md` beside s/m, `lg` beside l."}],"variants":[{"name":"size","values":["sm","md","lg","inherit"],"default":"md"}],"lookalikes":[{"name":"CodeBlock","when":"Do not use for a multi-line block or a command meant to be copied; use CodeBlock or Snippet."},{"name":"Kbd","when":"Do not use for keyboard keys; that is Kbd."},{"name":"Snippet","when":"Do not use for a multi-line block or a command meant to be copied; use CodeBlock or Snippet."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/code","markdown":"https://www.digitaltableteur.com/design-system/components/code.md","contract":"https://www.digitaltableteur.com/contracts/v1/Code.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Code.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/code.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"CodeBlock","slug":"code-block","status":"beta","group":"structure","description":"Multi-line source with an optional filename header, line numbers, highlighted, added and removed rows, copy and a caption.","exported":true,"import":"import { CodeBlock } from \"@digitaltableteur/react\";","customElement":"dt-code-block","props":[{"name":"code","type":"string","values":null,"default":null,"required":false,"description":"Source to show. Highlighted at runtime for the common languages; with `language=\"diff\"` the leading +/- of each line become added and removed rows. Pass either `code` or a pre-highlighted Shiki tree as `children`."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"A Shiki `<pre><code>` tree (rehype-pretty-code output). Callouts come from the MDX meta string: a line range highlights, and a range with the id \"added\" or \"removed\" marks a diff."},{"name":"language","type":"string","values":null,"default":null,"required":false,"description":"Language of the code; shown in the header and drives highlighting."},{"name":"filename","type":"string","values":null,"default":null,"required":false,"description":"File name shown in the header. Giving one turns the header on."},{"name":"header","type":"boolean","values":null,"default":"true when `filename` is set","required":false,"description":"Show the header bar."},{"name":"lineNumbers","type":"boolean","values":null,"default":"the Shiki tree's showLineNumbers, else false","required":false,"description":"Number the lines."},{"name":"highlightLines","type":"CodeLineSpec","values":null,"default":null,"required":false,"description":"Lines to highlight: `[2, 3]` or `\"2-3,7\"`. 1-based."},{"name":"addedLines","type":"CodeLineSpec","values":null,"default":null,"required":false,"description":"Lines to mark as added."},{"name":"removedLines","type":"CodeLineSpec","values":null,"default":null,"required":false,"description":"Lines to mark as removed. Copy leaves them out."},{"name":"caption","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Caption under the card."},{"name":"theme","type":"\"light\" | \"terminal\"","values":["light","terminal"],"default":"light","required":false,"description":"`terminal` renders the block in the dark theme on any page. In the high-contrast themes it follows the page so contrast stays at the high-contrast level."},{"name":"wrap","type":"boolean","values":null,"default":"false","required":false,"description":"Wrap long lines instead of scrolling sideways."},{"name":"maxHeight","type":"string | number","values":null,"default":null,"required":false,"description":"Cap the body height (any CSS length, or pixels) and scroll inside it."},{"name":"copyable","type":"boolean","values":null,"default":"true","required":false,"description":"Show the copy button."},{"name":"copyLabel","type":"string","values":null,"default":"\"Copy code\" (translated)","required":false,"description":"Accessible name for the copy button."},{"name":"onCopy","type":"(text: string) => void","values":null,"default":null,"required":false,"description":"Called with the copied text."}],"variants":[{"name":"theme","values":["light","terminal"],"default":"light"}],"lookalikes":[{"name":"Code","when":"Do not use for one identifier inside a sentence; use Code."},{"name":"Snippet","when":"Do not use for a single command the reader pastes into a terminal; use Snippet."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/code-block","markdown":"https://www.digitaltableteur.com/design-system/components/code-block.md","contract":"https://www.digitaltableteur.com/contracts/v1/CodeBlock.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/CodeBlock.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/code-block.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"CodeCopyButton","slug":"code-copy-button","status":"beta","group":"actions","description":"Icon-only copy control for code surfaces: the copy glyph swaps to a check after a successful copy and a live region announces the result.","exported":true,"import":"import { CodeCopyButton } from \"@digitaltableteur/react\";","customElement":"dt-code-copy-button","props":[{"name":"value","type":"string | (() => string)","values":null,"default":null,"required":true,"description":"Text to copy, or a function that returns it at click time."},{"name":"label","type":"string","values":null,"default":"\"Copy code\" (translated)","required":false,"description":"Accessible name."},{"name":"onCopy","type":"(text: string) => void","values":null,"default":null,"required":false,"description":"Called with the copied text after a successful copy."},{"name":"resetAfterMs","type":"number","values":null,"default":"1600","required":false,"description":"How long the check mark stays, in milliseconds."},{"name":"size","type":"\"sm\" | \"md\"","values":["sm","md"],"default":"sm","required":false,"description":"Size token: sm (28px, code surfaces) or md (40px, beside body text)."}],"variants":[{"name":"size","values":["sm","md"],"default":"sm"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/code-copy-button","markdown":"https://www.digitaltableteur.com/design-system/components/code-copy-button.md","contract":"https://www.digitaltableteur.com/contracts/v1/CodeCopyButton.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/CodeCopyButton.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/code-copy-button.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Combobox","slug":"combobox","status":"stable","group":"form","description":"Single-select combobox with portaled dropdown, shared with MultiCombobox.","exported":true,"import":"import { Combobox } from \"@digitaltableteur/react\";","customElement":"dt-combobox","props":[{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Field label; associates the trigger."},{"name":"options","type":"ComboboxOption[]","values":null,"default":null,"required":true,"description":"Selectable options."},{"name":"value","type":"string","values":null,"default":null,"required":true,"description":"Selected option value (controlled); \"\" shows the placeholder."},{"name":"onValueChange","type":"(value: string) => void","values":null,"default":null,"required":true,"description":"Called with the chosen value."},{"name":"id","type":"string","values":null,"default":null,"required":false,"description":"Explicit control id (wires the label); auto-generated when omitted."},{"name":"placeholder","type":"string","values":null,"default":null,"required":false,"description":"Shown when no value is selected."},{"name":"helperText","type":"string","values":null,"default":null,"required":false,"description":"Assistive text below the field."},{"name":"error","type":"string","values":null,"default":null,"required":false,"description":"Error message; renders above the helper line and sets aria-invalid."},{"name":"status","type":"FieldStatus","values":null,"default":null,"required":false,"description":"Semantic state: colours the border and styles statusMessage. `error` overrides it."},{"name":"statusMessage","type":"string","values":null,"default":null,"required":false,"description":"Message under the field for `status`, above the helper line."},{"name":"actions","type":"FieldAction[]","values":null,"default":null,"required":false,"description":"Icon buttons at the end of the label row: each runs an operation or opens a menu."},{"name":"required","type":"boolean","values":null,"default":"false","required":false,"description":"Marks the field required."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disables the control."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Classes on the field wrapper."},{"name":"size","type":"FieldSize","values":null,"default":"md","required":false,"description":"Field size shared by every DS field: 40, 48 or 56px tall."},{"name":"name","type":"string","values":null,"default":null,"required":false,"description":"Submits the value with a surrounding form, through a hidden input."},{"name":"aria-describedby","type":"string","values":null,"default":null,"required":false,"description":"Extra ids the trigger is described by, after the status and helper text."},{"name":"searchable","type":"boolean","values":null,"default":"false","required":false,"description":"Makes the field a text input that filters the list as you type (every typed word matches the start of a word in an option's label or keywords). Use it for long lists, such as time zones or countries; the forwarded ref then points at the input."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[{"name":"MultiCombobox","when":"Do not use it for multiple selection; MultiCombobox owns chips and type-to-filter."},{"name":"TextInput","when":"Do not use Combobox for free text with suggestions; it only emits option values (no free-solo mode). Use TextInput plus your own suggestion list."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/combobox","markdown":"https://www.digitaltableteur.com/design-system/components/combobox.md","contract":"https://www.digitaltableteur.com/contracts/v1/Combobox.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Combobox.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/combobox.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"CommandPalette","slug":"command-palette","status":"beta","group":"navigation","description":"Modal, keyboard-driven command launcher: a search input filters a listbox of commands (matched on label + keywords); Arrow keys move the active option, Enter runs it, Escape closes. Focus is trapped and background scroll locked while open.","exported":true,"import":"import { CommandPalette } from \"@digitaltableteur/react\";","customElement":"dt-command-palette","props":[{"name":"open","type":"boolean","values":null,"default":null,"required":true,"description":"Whether the palette is open (controlled)."},{"name":"onClose","type":"() => void","values":null,"default":null,"required":true,"description":"Called to request close (Escape, overlay click, or after a selection)."},{"name":"items","type":"CommandPaletteItem[]","values":null,"default":null,"required":true,"description":"Commands to show, in order."},{"name":"label","type":"string","values":null,"default":"Command palette","required":false,"description":"Accessible name for the dialog + listbox."},{"name":"placeholder","type":"string","values":null,"default":"Search commands…","required":false,"description":"Search input placeholder."},{"name":"emptyText","type":"string","values":null,"default":"No results","required":false,"description":"Shown when nothing matches."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS class names for the dialog."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/command-palette","markdown":"https://www.digitaltableteur.com/design-system/components/command-palette.md","contract":"https://www.digitaltableteur.com/contracts/v1/CommandPalette.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/CommandPalette.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/command-palette.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ComplianceCard","slug":"compliance-card","status":"beta","group":"structure","description":"Internal audit-checklist card with pass/fail rows and a last-reviewed date; a Storybook and docs tooling surface, not product UI.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"titleIcon","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"rules","type":"ComplianceRule[]","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"lastReviewed","type":"string | Date","values":null,"default":null,"required":false,"description":"Date when compliance was last reviewed (format: YYYY-MM-DD or Date object)"}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/compliance-card","markdown":"https://www.digitaltableteur.com/design-system/components/compliance-card.md","contract":"https://www.digitaltableteur.com/contracts/v1/ComplianceCard.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ComplianceCard.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/compliance-card.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ConfirmPopover","slug":"confirm-popover","status":"alpha","group":"overlay","description":"Asks \"are you sure?\" next to the control that triggered it: a non-modal alertdialog anchored to the trigger with a question, an optional consequence and Cancel / confirm buttons.","exported":false,"import":null,"customElement":null,"props":[{"name":"children","type":"React.ReactElement","values":null,"default":null,"required":true,"description":"The control that opens the confirmation, usually a Button. It keeps its own label and styling."},{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"The question, for example \"Clear the answers in this section?\". Names the dialog. With choices, it asks which one, for example \"What do you want to clear?\"."},{"name":"description","type":"string","values":null,"default":null,"required":false,"description":"What happens if the person confirms; describes the dialog."},{"name":"confirmLabel","type":"string","values":null,"default":null,"required":false,"description":"Label of the confirming button; repeat the action, for example \"Clear answers\". Not used with choices, where each choice has its own."},{"name":"choices","type":"ConfirmPopoverChoice[]","values":null,"default":null,"required":false,"description":"Several actions to pick from first; picking one asks \"are you sure?\" with that choice's question and labels."},{"name":"cancelLabel","type":"string","values":null,"default":"translated \"Cancel\"","required":false,"description":"Label of the cancelling button."},{"name":"tone","type":"\"error\" | \"neutral\"","values":["error","neutral"],"default":"neutral","required":false,"description":"\"error\" for actions that remove or destroy something."},{"name":"onConfirm","type":"(choiceId?: string) => void","values":null,"default":null,"required":true,"description":"Called when the person confirms, with the picked choice's id when there are choices; the popover then closes."},{"name":"onOpenChange","type":"(open: boolean) => void","values":null,"default":null,"required":false,"description":"Called when the popover opens or closes, whichever way."},{"name":"side","type":"\"top\" | \"right\" | \"bottom\" | \"left\"","values":["top","right","bottom","left"],"default":"top","required":false,"description":"Preferred side of the trigger; flips when out of room."},{"name":"align","type":"\"center\" | \"start\" | \"end\"","values":["center","start","end"],"default":"start","required":false,"description":"Alignment along that side. Not used with arrow, which always centres the popover on the trigger."},{"name":"arrow","type":"boolean","values":null,"default":"false","required":false,"description":"Draws a pointer from the middle of the popover's edge to the trigger, like a speech bubble; side picks the edge (top, right, bottom or left) and the popover centres on the trigger. Off by default."},{"name":"shortcut","type":"string[]","values":null,"default":null,"required":false,"description":"Keys that run the action without the popover, one entry per key; shown under the description as keycaps joined by plus signs."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Extra class on the popover surface."}],"variants":[{"name":"tone","values":["neutral","error"],"default":"neutral"},{"name":"side","values":["top","right","bottom","left"],"default":"top"},{"name":"align","values":["center","start","end"],"default":"start"}],"lookalikes":[{"name":"Modal","when":"Do not put forms or long explanations inside; use Modal."}],"invalidCombinations":[{"id":"confirmpopover-arrow-centres","level":"SHOULD NOT","condition":"When `arrow` is set and `align` is one of `start`, `end`, then do not set `align`.","reason":"A speech-bubble pointer sits in the middle of the popover's edge, so the popover centres on the trigger and align is ignored. Drop align, e.g. <ConfirmPopover side=\"left\" arrow />."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/confirm-popover","markdown":"https://www.digitaltableteur.com/design-system/components/confirm-popover.md","contract":"https://www.digitaltableteur.com/contracts/v1/ConfirmPopover.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ConfirmPopover.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/confirm-popover.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ContactForm","slug":"contact-form","status":"beta","group":"form","description":"Full contact form with validation, attachments, and submission flow.","exported":false,"import":null,"customElement":null,"props":[],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/contact-form","markdown":"https://www.digitaltableteur.com/design-system/components/contact-form.md","contract":"https://www.digitaltableteur.com/contracts/v1/ContactForm.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ContactForm.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/contact-form.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ContactFormEditorial","slug":"contact-form-editorial","status":"stable","group":"form","description":"Editorial contact form used on the live contact page: three required fields, nested optional detail sections and toast feedback on submit.","exported":false,"import":null,"customElement":null,"props":[{"name":"calculatorSummary","type":"string","values":null,"default":null,"required":false,"description":"The pricing calculator choice the visitor arrived with, sent with the message."},{"name":"onSuccess","type":"() => void","values":null,"default":null,"required":false,"description":"Called after a successful submit, once the success toast is shown and the form is reset."},{"name":"onError","type":"(error: Error) => void","values":null,"default":null,"required":false,"description":"Called after a failed submit, once the failure is shown: on the refused fields when the server names them, otherwise as an error toast plus a note with the address to write to. A non-Error throw arrives as a synthesized Error(\"Unknown error\")."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Extra class on the form root."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/contact-form-editorial","markdown":"https://www.digitaltableteur.com/design-system/components/contact-form-editorial.md","contract":"https://www.digitaltableteur.com/contracts/v1/ContactFormEditorial.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ContactFormEditorial.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/contact-form-editorial.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ContactHero","slug":"contact-hero","status":"stable","group":"marketing","description":"Contact page hero with headline and supporting copy.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Main title text."},{"name":"subtitle","type":"string","values":null,"default":null,"required":false,"description":"Optional subtitle."},{"name":"background","type":"\"minimal\" | \"gradient\"","values":["minimal","gradient"],"default":"minimal","required":false,"description":"Background variant. Defaults to \"minimal\"."},{"name":"compact","type":"boolean","values":null,"default":"true","required":false,"description":"Use compact height (60-70vh instead of 80vh). Defaults to true; pass false for the 80vh hero."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"background","values":["minimal","gradient"],"default":"minimal"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/contact-hero","markdown":"https://www.digitaltableteur.com/design-system/components/contact-hero.md","contract":"https://www.digitaltableteur.com/contracts/v1/ContactHero.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ContactHero.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/contact-hero.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ContactInquiryPanel","slug":"contact-inquiry-panel","status":"stable","group":"form","description":"Contact page inquiry panel with message and book-a-call tabs wrapping the editorial form.","exported":false,"import":null,"customElement":null,"props":[{"name":"initialMode","type":"\"message\" | \"book\"","values":["message","book"],"default":"message","required":false,"description":"Tab to show; defaults to message. The panel switches to it again whenever the prop value changes after mount."},{"name":"packageId","type":"string","values":null,"default":null,"required":false,"description":"Optional pricing package id for booking prefill."},{"name":"bookingNotes","type":"string","values":null,"default":null,"required":false,"description":"Optional note carried into the booking form, such as the calculator choice."},{"name":"messagePanel","type":"ReactNode","values":null,"default":null,"required":true,"description":"Editorial contact form slot shown on the message tab."},{"name":"bookingConfig","type":"SiteBookingConfig","values":null,"default":null,"required":false,"description":"Booking config used only when packageId is not set; packageId wins and this prop is then ignored. Without either, the site default booking config applies."}],"variants":[{"name":"initialMode","values":["message","book"],"default":"message"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/contact-inquiry-panel","markdown":"https://www.digitaltableteur.com/design-system/components/contact-inquiry-panel.md","contract":"https://www.digitaltableteur.com/contracts/v1/ContactInquiryPanel.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ContactInquiryPanel.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/contact-inquiry-panel.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ContactPageContentEditorial","slug":"contact-page-content-editorial","status":"stable","group":"marketing","description":"Editorial /contact page body: intro copy, address and direct contact lines, the inquiry panel with its form and success state, a New Business block and a pull quote.","exported":false,"import":null,"customElement":null,"props":[{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."},{"name":"initialInquiryMode","type":"\"message\" | \"book\"","values":["message","book"],"default":null,"required":false,"description":"Deep-link from /contact?mode=book."},{"name":"bookingPackageId","type":"string","values":null,"default":null,"required":false,"description":"Deep-link from /contact?package=ux-sprint."},{"name":"bookingConfig","type":"SiteBookingConfig","values":null,"default":null,"required":false,"description":"Server-resolved booking embed config from env vars."},{"name":"calculatorSummary","type":"string","values":null,"default":null,"required":false,"description":"The pricing calculator choice the visitor arrived with, already worded."}],"variants":[{"name":"initialInquiryMode","values":["message","book"],"default":null}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/contact-page-content-editorial","markdown":"https://www.digitaltableteur.com/design-system/components/contact-page-content-editorial.md","contract":"https://www.digitaltableteur.com/contracts/v1/ContactPageContentEditorial.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ContactPageContentEditorial.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/contact-page-content-editorial.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Container","slug":"container","status":"stable","group":"layout","description":"Max-width content wrapper with responsive horizontal padding.","exported":true,"import":"import { Container } from \"@digitaltableteur/react\";","customElement":"dt-container","props":[{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"Page content inside the width constraint."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\"","values":["sm","md","lg","xl","full"],"default":"lg","required":false,"description":"Max-width token. Defaults to `lg`."},{"name":"center","type":"boolean","values":null,"default":"true","required":false,"description":"Center the container horizontally. Defaults to `true`."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Wrapper class names."},{"name":"as","type":"\"symbol\" | \"object\" | \"image\" | \"form\" | \"slot\" | \"style\" | \"title\" | \"button\" | \"search\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"div\" | \"section\" | \"aside\" | \"li\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"canvas\" | \"caption\" | \"center\" | \"cite\" | \"code\" | \"col\" | \"colgroup\" | \"data\" | \"datalist\" | \"dd\" | \"del\" | \"details\" | \"dfn\" | \"dl\" | \"dt\" | \"em\" | \"embed\" | \"fieldset\" | \"figcaption\" | \"footer\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"head\" | \"header\" | \"hgroup\" | \"hr\" | \"html\" | \"i\" | \"iframe\" | \"input\" | \"ins\" | \"kbd\" | \"keygen\" | \"label\" | \"legend\" | \"map\" | \"mark\" | \"meta\" | \"meter\" | \"nav\" | \"noindex\" | \"noscript\" | \"ol\" | \"optgroup\" | \"output\" | \"p\" | \"param\" | \"picture\" | \"pre\" | \"progress\" | \"q\" | \"rp\" | \"rt\" | \"ruby\" | \"s\" | \"samp\" | \"script\" | \"select\" | \"small\" | \"source\" | \"span\" | \"strong\" | \"sub\" | \"summary\" | \"sup\" | \"template\" | \"tbody\" | \"td\" | \"textarea\" | \"tfoot\" | \"th\" | \"thead\" | \"tr\" | \"track\" | \"u\" | \"ul\" | \"var\" | \"video\" | \"wbr\" | \"webview\" | \"svg\" | \"animate\" | \"animateMotion\" | \"animateTransform\" | \"circle\" | \"clipPath\" | \"defs\" | \"desc\" | \"ellipse\" | \"feBlend\" | \"feColorMatrix\" | \"feComponentTransfer\" | \"feComposite\" | \"feConvolveMatrix\" | \"feDiffuseLighting\" | \"feDisplacementMap\" | \"feDistantLight\" | \"feDropShadow\" | \"feFlood\" | \"feFuncA\" | \"feFuncB\" | \"feFuncG\" | \"feFuncR\" | \"feGaussianBlur\" | \"feImage\" | \"feMerge\" | \"feMergeNode\" | \"feMorphology\" | \"feOffset\" | \"fePointLight\" | \"feSpecularLighting\" | \"feSpotLight\" | \"feTile\" | \"feTurbulence\" | \"filter\" | \"foreignObject\" | \"g\" | \"line\" | \"linearGradient\" | \"marker\" | \"mask\" | \"metadata\" | \"mpath\" | \"path\" | \"pattern\" | \"polygon\" | \"polyline\" | \"radialGradient\" | \"rect\" | \"set\" | \"stop\" | \"textPath\" | \"tspan\" | \"use\" | \"view\"","values":["symbol","object","image","form","slot","style","title","button","search","article","dialog","figure","img","link","main","menu","menuitem","option","switch","table","text","time","div","section","aside","li","a","abbr","address","area","audio","b","base","bdi","bdo","big","blockquote","body","br","canvas","caption","center","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dl","dt","em","embed","fieldset","figcaption","footer","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","input","ins","kbd","keygen","label","legend","map","mark","meta","meter","nav","noindex","noscript","ol","optgroup","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","select","small","source","span","strong","sub","summary","sup","template","tbody","td","textarea","tfoot","th","thead","tr","track","u","ul","var","video","wbr","webview","svg","animate","animateMotion","animateTransform","circle","clipPath","defs","desc","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","set","stop","textPath","tspan","use","view"],"default":"div","required":false,"description":"Polymorphic element. Defaults to `div`. Typed as any React ElementType, so the values list is every JSX intrinsic; only container elements (div, main, section, article, aside, header, footer) make sense here."}],"variants":[{"name":"size","values":["sm","md","lg","xl","full"],"default":"lg"},{"name":"as","values":["symbol","object","image","form","slot","style","title","button","search","article","dialog","figure","img","link","main","menu","menuitem","option","switch","table","text","time","div","section","aside","li","a","abbr","address","area","audio","b","base","bdi","bdo","big","blockquote","body","br","canvas","caption","center","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dl","dt","em","embed","fieldset","figcaption","footer","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","input","ins","kbd","keygen","label","legend","map","mark","meta","meter","nav","noindex","noscript","ol","optgroup","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","select","small","source","span","strong","sub","summary","sup","template","tbody","td","textarea","tfoot","th","thead","tr","track","u","ul","var","video","wbr","webview","svg","animate","animateMotion","animateTransform","circle","clipPath","defs","desc","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","set","stop","textPath","tspan","use","view"],"default":"div"}],"lookalikes":[{"name":"Center","when":"Do not use Center as a page layout root; that is Container + Section."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/container","markdown":"https://www.digitaltableteur.com/design-system/components/container.md","contract":"https://www.digitaltableteur.com/contracts/v1/Container.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Container.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/container.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ContentSection","slug":"content-section","status":"alpha","group":"content","description":"Generic content section wrapper for marketing pages.","exported":false,"import":null,"customElement":null,"props":[{"name":"subtitle","type":"string","values":null,"default":null,"required":false,"description":"Subtitle/eyebrow text."},{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Section title."},{"name":"content","type":"ReactNode","values":null,"default":null,"required":false,"description":"Rich text content (optional)"},{"name":"images","type":"ContentImage | ContentImage[]","values":null,"default":null,"required":false,"description":"Single image or array of images."},{"name":"imageLayout","type":"\"single\" | \"none\" | \"grid\" | \"side-by-side\"","values":["single","none","grid","side-by-side"],"default":"none","required":false,"description":"Image layout."},{"name":"background","type":"\"default\" | \"muted\" | \"accent\"","values":["default","muted","accent"],"default":"default","required":false,"description":"Background variant."},{"name":"centered","type":"boolean","values":null,"default":"false","required":false,"description":"Center align text."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."},{"name":"donnyTarget","type":"string","values":null,"default":null,"required":false,"description":"Donny site action target id for this content block."}],"variants":[{"name":"imageLayout","values":["single","none","grid","side-by-side"],"default":"none"},{"name":"background","values":["default","muted","accent"],"default":"default"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/content-section","markdown":"https://www.digitaltableteur.com/design-system/components/content-section.md","contract":"https://www.digitaltableteur.com/contracts/v1/ContentSection.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ContentSection.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/content-section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"CookieConsent","slug":"cookie-consent","status":"beta","group":"overlay","description":"GDPR cookie consent modal and banner wired to site providers.","exported":true,"import":"import { CookieConsent } from \"@digitaltableteur/react\";","customElement":"dt-cookie-consent","props":[{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS classes on the consent banner region."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/cookie-consent","markdown":"https://www.digitaltableteur.com/design-system/components/cookie-consent.md","contract":"https://www.digitaltableteur.com/contracts/v1/CookieConsent.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/CookieConsent.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/cookie-consent.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"CTASection","slug":"cta-section","status":"stable","group":"marketing","description":"Call-to-action band used on marketing pages.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Main headline."},{"name":"description","type":"string","values":null,"default":null,"required":false,"description":"Supporting description."},{"name":"primaryAction","type":"ActionItem","values":null,"default":null,"required":true,"description":"Primary action button."},{"name":"secondaryAction","type":"ActionItem","values":null,"default":null,"required":false,"description":"Secondary action button."},{"name":"background","type":"\"primary\" | \"muted\" | \"dark\" | \"gradient\" | \"brand\"","values":["primary","muted","dark","gradient","brand"],"default":"primary","required":false,"description":"Background style. Defaults to \"primary\". Also sets the button surface: onBrand for brand, onDark for primary, gradient and dark, default for muted. \"dark\" is built from the --color-black and --color-white tokens."},{"name":"align","type":"\"center\" | \"left\"","values":["center","left"],"default":"center","required":false,"description":"Text alignment. Defaults to \"center\"."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."},{"name":"id","type":"string","values":null,"default":null,"required":false,"description":"Section id for navigation; the heading id is derived from it as `${id}-title`. When omitted, a unique id is generated so several CTASections on one page never share section or heading ids."},{"name":"donnyTarget","type":"string","values":null,"default":null,"required":false,"description":"Donny site action target id."}],"variants":[{"name":"align","values":["center","left"],"default":"center"},{"name":"background","values":["primary","muted","dark","gradient","brand"],"default":"primary"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/cta-section","markdown":"https://www.digitaltableteur.com/design-system/components/cta-section.md","contract":"https://www.digitaltableteur.com/contracts/v1/CTASection.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/CTASection.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/cta-section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"DataTable","slug":"data-table","status":"beta","group":"data-display","description":"Accessible data table with typed columns, three-state sortable headings, optional row selection and pagination, and density variants. Composes the Table primitives and the useTable* hooks.","exported":true,"import":"import { DataTable } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"data","type":"Row[]","values":null,"default":null,"required":true,"description":"Table rows."},{"name":"columns","type":"DataTableColumn<Row>[]","values":null,"default":null,"required":true,"description":"Ordered column definitions."},{"name":"getRowId","type":"(row: Row) => string","values":null,"default":null,"required":true,"description":"Stable row identifier."},{"name":"caption","type":"string","values":null,"default":null,"required":true,"description":"Accessible table name rendered as a caption."},{"name":"hideCaption","type":"boolean","values":null,"default":"false","required":false,"description":"Visually hides the caption while retaining the accessible name."},{"name":"sort","type":"DataTableSort | null","values":null,"default":null,"required":false,"description":"Controlled sort state."},{"name":"defaultSort","type":"DataTableSort | null","values":null,"default":"null","required":false,"description":"Initial uncontrolled sort state."},{"name":"onSortChange","type":"(sort: DataTableSort | null) => void","values":null,"default":null,"required":false,"description":"Receives sort changes."},{"name":"selectedRowIds","type":"string[]","values":null,"default":null,"required":false,"description":"Controlled selected row identifiers; enables selection."},{"name":"defaultSelectedRowIds","type":"string[]","values":null,"default":null,"required":false,"description":"Initial uncontrolled selection; also enables selection."},{"name":"onSelectionChange","type":"(rowIds: string[]) => void","values":null,"default":null,"required":false,"description":"Receives selected row identifiers; also enables selection."},{"name":"getRowLabel","type":"(row: Row) => string","values":null,"default":null,"required":false,"description":"Accessible row label used by selection checkboxes."},{"name":"pageSize","type":"number","values":null,"default":null,"required":false,"description":"Rows per page; enables pagination when set."},{"name":"emptyState","type":"React.ReactNode","values":null,"default":"No data","required":false,"description":"Empty-state cell content."},{"name":"striped","type":"boolean","values":null,"default":"false","required":false,"description":"Alternating row surfaces."},{"name":"stickyHeader","type":"boolean","values":null,"default":"false","required":false,"description":"Pin the header row while the body scrolls."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Density scale."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"},{"name":"striped","values":["true","false"],"default":"false"}],"lookalikes":[],"invalidCombinations":[{"id":"mutually-exclusive-sort-defaultSort","level":"MUST NOT","condition":"`sort` and `defaultSort` set together.","reason":"`sort` makes the component controlled and `defaultSort` uncontrolled; pass one, not both."},{"id":"mutually-exclusive-selectedRowIds-defaultSelectedRowIds","level":"MUST NOT","condition":"`selectedRowIds` and `defaultSelectedRowIds` set together.","reason":"`selectedRowIds` makes the component controlled and `defaultSelectedRowIds` uncontrolled; pass one, not both."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/data-table","markdown":"https://www.digitaltableteur.com/design-system/components/data-table.md","contract":"https://www.digitaltableteur.com/contracts/v1/DataTable.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/DataTable.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/data-table.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Designerman","slug":"designerman","status":"beta","group":"marketing","description":"Decorative sprite-sheet mascot animation that adds site personality; not for use inside task flows.","exported":false,"import":null,"customElement":null,"props":[{"name":"spriteSheet","type":"string","values":null,"default":null,"required":true,"description":"Sprite sheet path (e.g. /sprites/designerman.png)"},{"name":"frameWidth","type":"number","values":null,"default":"64","required":false,"description":"Frame width in px."},{"name":"frameHeight","type":"number","values":null,"default":"64","required":false,"description":"Frame height in px."},{"name":"columns","type":"number","values":null,"default":"4","required":false,"description":"Number of columns in the sheet."},{"name":"animations","type":"Partial<Record<AnimationName, AnimationConfig>>","values":null,"default":"{}","required":false,"description":"Optional custom animations."},{"name":"scale","type":"number","values":null,"default":"3","required":false,"description":"Scale multiplier for the sprite."},{"name":"audioSrc","type":"string","values":null,"default":"/designerman.mp3","required":false,"description":"Optional looping audio track."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/designerman","markdown":"https://www.digitaltableteur.com/design-system/components/designerman.md","contract":"https://www.digitaltableteur.com/contracts/v1/Designerman.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Designerman.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/designerman.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"DesignSprintsSection","slug":"design-sprints-section","status":"stable","group":"marketing","description":"Homepage engagements band: heading, intro and a list of engagement-model cards that each link to their /pricing package, followed by one SlideButton to /pricing.","exported":false,"import":null,"customElement":null,"props":[{"name":"id","type":"string","values":null,"default":"design-sprints","required":false,"description":"Section id for anchor linking. Defaults to \"design-sprints\", which existing links point at."},{"name":"donnyTarget","type":"string","values":null,"default":"home.designSprints","required":false,"description":"Donny site action target id. Defaults to \"home.designSprints\"."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/design-sprints-section","markdown":"https://www.digitaltableteur.com/design-system/components/design-sprints-section.md","contract":"https://www.digitaltableteur.com/contracts/v1/DesignSprintsSection.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/DesignSprintsSection.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/design-sprints-section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Display","slug":"display","status":"beta","group":"display","description":"Display-sized heading for marketing hero copy. Larger than the `Title` scale; used sparingly on landing/about/contact heroes where the type itself is the visual.","exported":true,"import":"import { Display } from \"@digitaltableteur/react\";","customElement":"dt-display","props":[{"name":"as","type":"\"div\" | \"h1\" | \"h2\" | \"p\" | \"span\"","values":["div","h1","h2","p","span"],"default":"h1","required":false,"description":"Element to render, defaults to h1."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"Content to display."}],"variants":[{"name":"as","values":["div","h1","h2","p","span"],"default":"h1"}],"lookalikes":[{"name":"Text","when":"Do not stack Display lines to fake a type ladder; hierarchy below the hero belongs to Title and Text."},{"name":"Title","when":"Do not use Display for section headings; that is the Title ladder (levels decoupled from sizes)."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/display","markdown":"https://www.digitaltableteur.com/design-system/components/display.md","contract":"https://www.digitaltableteur.com/contracts/v1/Display.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Display.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/display.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Divider","slug":"divider","status":"stable","group":"structure","description":"Visual separator between sections (horizontal or vertical).","exported":true,"import":"import { Divider } from \"@digitaltableteur/react\";","customElement":"dt-divider","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\"","values":["horizontal","vertical"],"default":"horizontal","required":false,"description":"Horizontal rule or vertical separator."},{"name":"decorative","type":"boolean","values":null,"default":"true","required":false,"description":"When true, removed from accessibility tree (purely visual)"},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional spacing token class; use margin utilities on className."}],"variants":[{"name":"orientation","values":["horizontal","vertical"],"default":"horizontal"}],"lookalikes":[{"name":"Spacer","when":"Do not use dividers as spacing; if you only need distance, use gap or Spacer."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/divider","markdown":"https://www.digitaltableteur.com/design-system/components/divider.md","contract":"https://www.digitaltableteur.com/contracts/v1/Divider.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Divider.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/divider.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"DonnyAvatar","slug":"donny-avatar","status":"stable","group":"display","description":"The assistant's animated avatar with thinking, speaking, and idle mood states, used inside ChatWidget and Donny surfaces.","exported":false,"import":null,"customElement":null,"props":[{"name":"state","type":"\"success\" | \"error\" | \"loading\" | \"idle\" | \"listening\" | \"thinking\" | \"searching\" | \"confused\" | \"handoff\" | \"greeting\" | \"acknowledging\" | \"suggesting\" | \"confident\" | \"curious\" | \"celebrating\" | \"apologetic\" | \"typing\" | \"waving\" | \"remembering\" | \"focused\" | \"playful\" | \"impressed\" | \"skeptical\" | \"sleepy\" | \"sleeping\"","values":["success","error","loading","idle","listening","thinking","searching","confused","handoff","greeting","acknowledging","suggesting","confident","curious","celebrating","apologetic","typing","waving","remembering","focused","playful","impressed","skeptical","sleepy","sleeping"],"default":"idle","required":false,"description":"Current expression or assistant lifecycle state."},{"name":"size","type":"\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"","values":["xs","sm","md","lg","xl"],"default":"md","required":false,"description":"Rendered avatar size: xs 28px (chat toggle), sm 32px, md 48px, lg 64px, xl 96px."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS class."},{"name":"onTransitionEnd","type":"() => void","values":null,"default":null,"required":false,"description":"Called when the state transition animation ends."},{"name":"showLabel","type":"boolean","values":null,"default":"false","required":false,"description":"Shows the current state label for diagnostics."},{"name":"trackMouse","type":"boolean","values":null,"default":"false","required":false,"description":"Makes the eyes follow the pointer."},{"name":"proximitySelectors","type":"string[]","values":null,"default":"[]","required":false,"description":"CSS selectors whose pointer proximity can trigger curious or playful behavior."},{"name":"onProximityChange","type":"(isNearTarget: boolean, targetSelector?: string) => void","values":null,"default":null,"required":false,"description":"Called when proximity to a tracked target changes."},{"name":"proximityThreshold","type":"number","values":null,"default":"150","required":false,"description":"Pointer proximity threshold in pixels (default 150)."},{"name":"enableIdleExpressions","type":"boolean","values":null,"default":"false","required":false,"description":"Enables one randomized idle expression before the avatar settles."},{"name":"idleExpressionInterval","type":"number","values":null,"default":"12000","required":false,"description":"Delay before the one idle expression, in milliseconds (default 12000), randomized by 50 percent."},{"name":"isSpeaking","type":"boolean","values":null,"default":"false","required":false,"description":"Animates the mouth during streaming responses."},{"name":"enableSleepDetection","type":"boolean","values":null,"default":"false","required":false,"description":"Enables sleepy and sleeping states after pointer inactivity."},{"name":"sleepyDelay","type":"number","values":null,"default":"120000","required":false,"description":"Inactivity delay before the sleepy state, in milliseconds (default 120000)."},{"name":"sleepDelay","type":"number","values":null,"default":"150000","required":false,"description":"Inactivity delay before the sleeping state, in milliseconds (default 150000)."},{"name":"decorative","type":"boolean","values":null,"default":"false","required":false,"description":"Sets aria-hidden and removes role and label when a parent control owns the accessible name (e.g. the chat toggle). Otherwise the avatar is an img named by its translated state, such as \"Donny is thinking\"."}],"variants":[{"name":"size","values":["xs","sm","md","lg","xl"],"default":"md"},{"name":"state","values":["success","error","loading","idle","listening","thinking","searching","confused","handoff","greeting","acknowledging","suggesting","confident","curious","celebrating","apologetic","typing","waving","remembering","focused","playful","impressed","skeptical","sleepy","sleeping"],"default":"idle"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/donny-avatar","markdown":"https://www.digitaltableteur.com/design-system/components/donny-avatar.md","contract":"https://www.digitaltableteur.com/contracts/v1/DonnyAvatar.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/DonnyAvatar.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/donny-avatar.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"EmailSignatureGenerator","slug":"email-signature-generator","status":"beta","group":"structure","description":"Interactive tool that turns form inputs into a copyable, email-client-safe HTML signature.","exported":false,"import":null,"customElement":null,"props":[{"name":"companyName","type":"string","values":null,"default":"Digitaltableteur","required":false,"description":"Company name for the signature."},{"name":"companyUrl","type":"string","values":null,"default":"https://digitaltableteur.com","required":false,"description":"Company website URL."},{"name":"logoUrl","type":"string","values":null,"default":"/round.png","required":false,"description":"Company logo URL for preview (relative path works)"},{"name":"logoUrlFull","type":"string","values":null,"default":"https://digitaltableteur.com/round.png","required":false,"description":"Full URL for the logo in generated HTML signature."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/email-signature-generator","markdown":"https://www.digitaltableteur.com/design-system/components/email-signature-generator.md","contract":"https://www.digitaltableteur.com/contracts/v1/EmailSignatureGenerator.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/EmailSignatureGenerator.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/email-signature-generator.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"EmptyState","slug":"empty-state","status":"stable","group":"display","description":"Placeholder block for empty lists, zero search results, and first-run screens.","exported":true,"import":"import { EmptyState } from \"@digitaltableteur/react\";","customElement":"dt-empty-state","props":[{"name":"icon","type":"string","values":null,"default":null,"required":false,"description":"Phosphor icon name rendered decoratively above the title."},{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Short headline stating what is empty."},{"name":"description","type":"string","values":null,"default":null,"required":false,"description":"One or two sentences explaining why, or what to do next."},{"name":"headingLevel","type":"\"h2\" | \"h3\" | \"h4\"","values":["h2","h3","h4"],"default":"h2","required":false,"description":"Heading tag for the title. Defaults to `h2`; set it to fit the page outline."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Size token. Defaults to `md`."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Action slot; typically one primary Button, optionally a secondary."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"},{"name":"headingLevel","values":["h2","h3","h4"],"default":"h2"}],"lookalikes":[{"name":"AlertBanner","when":"Do not use EmptyState for errors or loading; AlertBanner owns failures and Skeleton owns loading."},{"name":"Center","when":"Use it for single focal content: Spinner, EmptyState, a logo lockup."},{"name":"Skeleton","when":"Do not use EmptyState for errors or loading; AlertBanner owns failures and Skeleton owns loading."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/empty-state","markdown":"https://www.digitaltableteur.com/design-system/components/empty-state.md","contract":"https://www.digitaltableteur.com/contracts/v1/EmptyState.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/EmptyState.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/empty-state.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"EngagementPageContent","slug":"engagement-page-content","status":"beta","group":"marketing","description":"One engagement offer page: a breadcrumb back to Pricing, problem, fit signals, scope and limits, steps, deliverables, investment, published proof, an offer FAQ, the procurement FAQ, the other engagements and a booking call to action.","exported":false,"import":null,"customElement":null,"props":[{"name":"engagementId","type":"\"audit\" | \"uxSprint\" | \"liftoff\" | \"aiops\" | \"partnership\" | \"workshop\" | \"designopsPilot\" | \"agentPilot\" | \"dsMcp\" | \"agentWorkforce\"","values":["audit","uxSprint","liftoff","aiops","partnership","workshop","designopsPilot","agentPilot","dsMcp","agentWorkforce"],"default":null,"required":true,"description":"Which engagement to render."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional class name on the root."}],"variants":[{"name":"engagementId","values":["audit","uxSprint","liftoff","aiops","partnership","workshop","designopsPilot","agentPilot","dsMcp","agentWorkforce"],"default":null}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/engagement-page-content","markdown":"https://www.digitaltableteur.com/design-system/components/engagement-page-content.md","contract":"https://www.digitaltableteur.com/contracts/v1/EngagementPageContent.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/EngagementPageContent.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/engagement-page-content.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"EnhancedProjectCard","slug":"enhanced-project-card","status":"stable","group":"marketing","description":"Portfolio project card with image or video media and metadata; video is a paused preview unless autoPlayVideo loops it while on screen.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Project title."},{"name":"slug","type":"string","values":null,"default":null,"required":true,"description":"URL slug for project detail page."},{"name":"thumbnail","type":"string","values":null,"default":null,"required":true,"description":"Thumbnail image URL."},{"name":"videoThumbnail","type":"string | string[]","values":null,"default":null,"required":false,"description":"Video thumbnail: one URL, or several in preference order (for example WebM then MP4). `thumbnail` is its poster. Paused unless `autoPlayVideo`."},{"name":"description","type":"string","values":null,"default":null,"required":false,"description":"Short description."},{"name":"category","type":"string","values":null,"default":null,"required":false,"description":"Project category."},{"name":"tags","type":"string[]","values":null,"default":null,"required":false,"description":"Project tags; only the first three render."},{"name":"aspectRatio","type":"\"video\" | \"square\" | \"portrait\" | \"landscape\"","values":["video","square","portrait","landscape"],"default":"video","required":false,"description":"Image aspect ratio."},{"name":"showCategory","type":"boolean","values":null,"default":"true","required":false,"description":"Show category in caption. Defaults to true."},{"name":"showDescription","type":"boolean","values":null,"default":"true","required":false,"description":"Show description on hover. Defaults to true; when false the description is screen-reader-only and becomes the link's accessible description."},{"name":"autoPlayVideo","type":"boolean","values":null,"default":"false","required":false,"description":"Loop the video like a GIF: muted, inline, playing only while on screen, and never for visitors who prefer reduced motion (they see the poster). Keep such clips short."},{"name":"comingSoon","type":"boolean","values":null,"default":"false","required":false,"description":"Render as a non-interactive teaser with a \"coming soon\" badge over the media."},{"name":"comingSoonLabel","type":"string","values":null,"default":null,"required":false,"description":"Visible badge label for the coming-soon overlay. Defaults to the translated \"Coming soon\" (`workComingSoon`)."},{"name":"contentLanguage","type":"string","values":null,"default":null,"required":false,"description":"BCP 47 language tag for project-authored title and metadata."},{"name":"coverGlow","type":"boolean","values":null,"default":"false","required":false,"description":"Glow the cover in its own colours on hover. Off by default; the work index opts in, other surfaces (home, related work) stay quiet. Default false."},{"name":"priority","type":"boolean","values":null,"default":"false","required":false,"description":"Load the image thumbnail eagerly and preload it (next/image `priority`). Set it only on cards in the first visible row, where the cover is the page's largest paint; everywhere else the default lazy load is right. Default false."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"aspectRatio","values":["video","square","portrait","landscape"],"default":"video"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/enhanced-project-card","markdown":"https://www.digitaltableteur.com/design-system/components/enhanced-project-card.md","contract":"https://www.digitaltableteur.com/contracts/v1/EnhancedProjectCard.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/EnhancedProjectCard.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/enhanced-project-card.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ExpandableSection","slug":"expandable-section","status":"stable","group":"structure","description":"Collapsible content region with a trigger header. Lighter than `Accordion` (which manages a group of expandables); used standalone for a single 'show more' or detail-disclosure section.","exported":true,"import":"import { ExpandableSection } from \"@digitaltableteur/react\";","customElement":"dt-expandable-section","props":[{"name":"collapsedLabel","type":"string","values":null,"default":null,"required":true,"description":"Trigger label when collapsed."},{"name":"expandedLabel","type":"string","values":null,"default":null,"required":false,"description":"Trigger label when expanded (optional, defaults to collapsedLabel)"},{"name":"defaultExpanded","type":"boolean","values":null,"default":"false","required":false,"description":"Whether the section is initially expanded."},{"name":"expanded","type":"boolean","values":null,"default":null,"required":false,"description":"Controlled expanded state."},{"name":"onExpandedChange","type":"(expanded: boolean) => void","values":null,"default":null,"required":false,"description":"Callback when expansion state changes."},{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"Content to reveal."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional className for the container."}],"variants":[],"lookalikes":[{"name":"Accordion","when":"Do not build exclusive groups from several ExpandableSections; that is Accordion's contract."}],"invalidCombinations":[{"id":"mutually-exclusive-expanded-defaultExpanded","level":"MUST NOT","condition":"`expanded` and `defaultExpanded` set together.","reason":"`expanded` makes the component controlled and `defaultExpanded` uncontrolled; pass one, not both."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/expandable-section","markdown":"https://www.digitaltableteur.com/design-system/components/expandable-section.md","contract":"https://www.digitaltableteur.com/contracts/v1/ExpandableSection.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ExpandableSection.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/expandable-section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"FadeIn","slug":"fade-in","status":"beta","group":"utility","description":"Scroll-triggered fade-in animation wrapper (GSAP).","exported":false,"import":null,"customElement":null,"props":[],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/fade-in","markdown":"https://www.digitaltableteur.com/design-system/components/fade-in.md","contract":"https://www.digitaltableteur.com/contracts/v1/FadeIn.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/FadeIn.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/fade-in.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"FieldShell","slug":"field-shell","status":"beta","group":"form","description":"The frame every text and choice field is built on: a label row with icon actions at its end, the control, then a status message and a helper line.","exported":true,"import":"import { FieldShell } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"controlId","type":"string","values":null,"default":null,"required":true,"description":"Id of the control inside; the label, status and helper ids derive from it."},{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Visible field label."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"The control: an input, textarea, select or composite control."},{"name":"status","type":"\"success\" | \"warning\" | \"error\"","values":["success","warning","error"],"default":null,"required":false,"description":"Semantic state; pairs with `statusMessage`."},{"name":"statusMessage","type":"string","values":null,"default":null,"required":false,"description":"Message under the control, styled and announced for `status`."},{"name":"helperText","type":"string","values":null,"default":null,"required":false,"description":"Supporting copy under the control, after the status message."},{"name":"actions","type":"FieldAction[]","values":null,"default":null,"required":false,"description":"Icon buttons at the end of the label row, level with the label."},{"name":"required","type":"boolean","values":null,"default":"false","required":false,"description":"Shows the required marker on the label."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Dims the label and disables every action."},{"name":"hideLabel","type":"boolean","values":null,"default":"false","required":false,"description":"Visually hides the label; it stays the control's accessible name."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Merged onto the field wrapper."}],"variants":[{"name":"status","values":["success","warning","error"],"default":null}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/field-shell","markdown":"https://www.digitaltableteur.com/design-system/components/field-shell.md","contract":"https://www.digitaltableteur.com/contracts/v1/FieldShell.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/FieldShell.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/field-shell.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"FileUpload","slug":"file-upload","status":"stable","group":"form","description":"File picker with size validation and clear control.","exported":true,"import":"import { FileUpload } from \"@digitaltableteur/react\";","customElement":"dt-file-upload","props":[{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Field label."},{"name":"placeholder","type":"string","values":null,"default":null,"required":false,"description":"Placeholder shown when no file is selected."},{"name":"helperText","type":"string","values":null,"default":null,"required":false,"description":"Helper copy below the control."},{"name":"uploadButtonLabel","type":"string","values":null,"default":null,"required":true,"description":"Upload button label."},{"name":"clearButtonLabel","type":"string","values":null,"default":null,"required":false,"description":"Clear/remove button label; the button shows only while a file is set, and activating it moves focus to the upload button."},{"name":"accept","type":"string","values":null,"default":null,"required":false,"description":"Accepted file extensions/MIME types for the native picker."},{"name":"maxSizeInBytes","type":"number","values":null,"default":null,"required":false,"description":"Maximum file size in bytes; checked when a file is picked."},{"name":"sizeErrorMessage","type":"string","values":null,"default":null,"required":false,"description":"Error shown when a picked file exceeds maxSizeInBytes."},{"name":"error","type":"string","values":null,"default":null,"required":false,"description":"External error message; renders above the helper line."},{"name":"value","type":"File | null","values":null,"default":"null","required":false,"description":"Controlled File value."},{"name":"onFileChange","type":"(file: File | null) => void","values":null,"default":null,"required":false,"description":"Called when a file is selected or cleared."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disables the control."},{"name":"required","type":"boolean","values":null,"default":"false","required":false,"description":"Marks the field required."},{"name":"appearance","type":"\"default\" | \"editorial\"","values":["default","editorial"],"default":"default","required":false,"description":"Match FormFieldEditorial / Combobox styling on editorial forms."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[{"name":"appearance","values":["default","editorial"],"default":"default"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/file-upload","markdown":"https://www.digitaltableteur.com/design-system/components/file-upload.md","contract":"https://www.digitaltableteur.com/contracts/v1/FileUpload.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/FileUpload.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/file-upload.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"FilterChip","slug":"filter-chip","status":"stable","group":"form","description":"Single-select filter toggle chip: a button[aria-pressed] with pill, rectangle, underline, and minimal treatments.","exported":true,"import":"import { FilterChip } from \"@digitaltableteur/react\";","customElement":"dt-filter-chip","props":[{"name":"pressed","type":"boolean","values":null,"default":null,"required":true,"description":"Whether this chip's filter is active (rendered as aria-pressed)."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"Chip label (compose counts etc. inline)."},{"name":"variant","type":"\"underline\" | \"minimal\" | \"pill\" | \"rectangle\"","values":["underline","minimal","pill","rectangle"],"default":"pill","required":false,"description":"Visual treatment."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Size token."},{"name":"count","type":"number","values":null,"default":null,"required":false,"description":"Optional count suffix, rendered as \"(n)\"."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS class names."}],"variants":[{"name":"variant","values":["pill","rectangle","underline","minimal"],"default":"pill"},{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[{"name":"MultiCombobox","when":"Do not use FilterChip for multi-select token input; use MultiCombobox."},{"name":"Tabs","when":"Do not use FilterChip as navigation between content panels; use Tabs."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/filter-chip","markdown":"https://www.digitaltableteur.com/design-system/components/filter-chip.md","contract":"https://www.digitaltableteur.com/contracts/v1/FilterChip.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/FilterChip.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/filter-chip.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"FlexBox","slug":"flex-box","status":"beta","group":"layout","description":"Flexbox layout primitive for stacks and rows.","exported":true,"import":"import { FlexBox } from \"@digitaltableteur/react\";","customElement":"dt-flex-box","props":[{"name":"direction","type":"\"row\" | \"row-reverse\" | \"column\" | \"column-reverse\"","values":["row","row-reverse","column","column-reverse"],"default":"row","required":false,"description":"Flex-direction."},{"name":"wrap","type":"\"nowrap\" | \"wrap\" | \"wrap-reverse\"","values":["nowrap","wrap","wrap-reverse"],"default":"nowrap","required":false,"description":"Flex-wrap."},{"name":"justify","type":"\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"space-evenly\"","values":["center","flex-start","flex-end","space-between","space-around","space-evenly"],"default":"flex-start","required":false,"description":"Main-axis distribution."},{"name":"align","type":"\"center\" | \"flex-start\" | \"flex-end\" | \"stretch\" | \"baseline\"","values":["center","flex-start","flex-end","stretch","baseline"],"default":"stretch","required":false,"description":"Cross-axis item alignment."},{"name":"alignContent","type":"\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"stretch\"","values":["center","flex-start","flex-end","space-between","space-around","stretch"],"default":null,"required":false,"description":"Cross-axis line distribution when wrapping."},{"name":"gap","type":"string | number","values":null,"default":null,"required":false,"description":"Shorthand gap (CSS length or number of px)."},{"name":"rowGap","type":"string | number","values":null,"default":null,"required":false,"description":"Row gap override."},{"name":"columnGap","type":"string | number","values":null,"default":null,"required":false,"description":"Column gap override."},{"name":"style","type":"React.CSSProperties","values":null,"default":null,"required":false,"description":"Inline style overrides applied after generated flex declarations."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"Flex items rendered inside the container."}],"variants":[{"name":"align","values":["center","flex-start","flex-end","stretch","baseline"],"default":"stretch"},{"name":"direction","values":["row","row-reverse","column","column-reverse"],"default":"row"},{"name":"wrap","values":["nowrap","wrap","wrap-reverse"],"default":"nowrap"},{"name":"justify","values":["center","flex-start","flex-end","space-between","space-around","space-evenly"],"default":"flex-start"},{"name":"alignContent","values":["center","flex-start","flex-end","space-between","space-around","stretch"],"default":null}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/flex-box","markdown":"https://www.digitaltableteur.com/design-system/components/flex-box.md","contract":"https://www.digitaltableteur.com/contracts/v1/FlexBox.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/FlexBox.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/flex-box.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Footer","slug":"footer","status":"beta","group":"navigation","description":"Legacy pattern-tier footer that hosts the ChatWidget slot; the production Next.js site chrome is SiteFooter.","exported":false,"import":null,"customElement":null,"props":[{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS classes on the footer."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/footer","markdown":"https://www.digitaltableteur.com/design-system/components/footer.md","contract":"https://www.digitaltableteur.com/contracts/v1/Footer.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Footer.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/footer.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"FormField","slug":"form-field","status":"stable","group":"form","description":"Fieldset/legend wrapper for a group of controls (radio sets, checkbox clusters, composite fields), with a group description and a group-level error. Individual controls own their own label, error and helper text.","exported":true,"import":"import { FormField } from \"@digitaltableteur/react\";","customElement":"dt-form-field","props":[{"name":"legend","type":"string","values":null,"default":null,"required":true,"description":"Accessible name for the group of controls, rendered as a `<fieldset>` `<legend>`."},{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"The grouped controls; each keeps its own label."},{"name":"groupDescription","type":"string","values":null,"default":null,"required":false,"description":"Helper text shown under the legend and referenced from the fieldset `aria-describedby`."},{"name":"error","type":"string","values":null,"default":null,"required":false,"description":"Group-level error message shown after the controls as an alert and referenced from the fieldset `aria-describedby`."},{"name":"required","type":"boolean","values":null,"default":null,"required":false,"description":"Appends a visual asterisk to the legend."},{"name":"disabled","type":"boolean","values":null,"default":null,"required":false,"description":"Disables every contained control via the fieldset."},{"name":"hideLegend","type":"boolean","values":null,"default":"false","required":false,"description":"Keeps the legend as the group's accessible name but hides it visually, for a group whose visible heading already names it."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Merged onto the fieldset."}],"variants":[],"lookalikes":[{"name":"GroupLabel","when":"Do not name a radio or checkbox set with as=\"label\"; a label names one control. Use as=\"legend\" inside a fieldset, or FormField."},{"name":"Label","when":"Do not use Label as a heading above multiple controls; use FormField's group mode or a fieldset legend."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/form-field","markdown":"https://www.digitaltableteur.com/design-system/components/form-field.md","contract":"https://www.digitaltableteur.com/contracts/v1/FormField.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/FormField.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/form-field.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"FormFieldEditorial","slug":"form-field-editorial","status":"stable","group":"form","description":"Single field for editorial contact flows: a text, email, tel, textarea or select control on the shared FieldShell label, status and helper chrome.","exported":false,"import":null,"customElement":null,"props":[{"name":"type","type":"\"text\" | \"tel\" | \"email\" | \"textarea\" | \"select\"","values":["text","tel","email","textarea","select"],"default":"text","required":false,"description":"Control to render; defaults to text. select renders Combobox over a hidden native select element that carries the forwarded ref, name, form and disabled, so the value submits with its form, onChange receives a real change event from that select and onBlur fires when focus leaves the field; defaultValue is an uncontrolled initial value. aria-describedby is passed to the Combobox trigger; other select attributes are dropped."},{"name":"children","type":"ReactNode","values":null,"default":null,"required":false,"description":"Option elements for type=\"select\", parsed into Combobox options; an option with an empty value becomes the placeholder."},{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Field label, rendered by the shared FieldShell Label (Combobox label for select)."},{"name":"error","type":"string","values":null,"default":null,"required":false,"description":"Error message."},{"name":"required","type":"boolean","values":null,"default":null,"required":false,"description":"Whether the field is required."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional className."},{"name":"id","type":"string","values":null,"default":null,"required":false,"description":"Field ID. When omitted it is generated from the label: lowercased, accents folded (Sähköposti becomes sahkoposti), spaces hyphenated and letters of any script kept; a label with no letters or digits gets a unique generated id. Two fields with the same label still need an explicit id."},{"name":"helperText","type":"string","values":null,"default":null,"required":false,"description":"Supporting text under the field, linked with aria-describedby (select passes it to Combobox). Use it, for example, to say why a read-only value is fixed."},{"name":"status","type":"FieldStatus","values":null,"default":null,"required":false,"description":"Semantic state: colours the border and styles statusMessage. `error` overrides it."},{"name":"statusMessage","type":"string","values":null,"default":null,"required":false,"description":"Message under the field for `status`, above the helper line."},{"name":"actions","type":"FieldAction[]","values":null,"default":null,"required":false,"description":"Icon buttons at the end of the label row: each runs an operation or opens a menu."}],"variants":[{"name":"type","values":["text","tel","email","textarea","select"],"default":"text"}],"lookalikes":[],"invalidCombinations":[{"id":"requires-children","level":"MUST","condition":"`children` set without `type`.","reason":"Whenever `children` is accepted by FormFieldEditorialProps, `type` must also be present."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/form-field-editorial","markdown":"https://www.digitaltableteur.com/design-system/components/form-field-editorial.md","contract":"https://www.digitaltableteur.com/contracts/v1/FormFieldEditorial.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/FormFieldEditorial.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/form-field-editorial.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Gallery","slug":"gallery","status":"stable","group":"media","description":"Masonry image grid with optional captions that appear on hover and keyboard focus, and a slight scale on hover and focus unless the user prefers reduced motion. Items open nothing. Used on work-detail and editorial pages where the imagery is the primary content.","exported":true,"import":"import { Gallery } from \"@digitaltableteur/react\";","customElement":"dt-gallery","props":[{"name":"images","type":"GalleryImage[]","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"minColumnWidth","type":"number","values":null,"default":"320","required":false,"description":"Accepted for API compatibility but not used: the column count follows fixed breakpoints (1 below 600px, 2 below 900px, 3 below 1200px, then 4)."},{"name":"gutter","type":"number","values":null,"default":"32","required":false,"description":"No description in the contract."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/gallery","markdown":"https://www.digitaltableteur.com/design-system/components/gallery.md","contract":"https://www.digitaltableteur.com/contracts/v1/Gallery.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Gallery.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/gallery.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Grid","slug":"grid","status":"stable","group":"layout","description":"CSS grid layout primitive with scalar and token-breakpoint responsive columns and gaps.","exported":true,"import":"import { Grid } from \"@digitaltableteur/react\";","customElement":"dt-grid","props":[{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"Grid cells (supports span on child props)."},{"name":"columns","type":"number | string","values":null,"default":"1","required":false,"description":"Column count or grid-template-columns string. Defaults to `1`."},{"name":"tabletColumns","type":"number | string","values":null,"default":null,"required":false,"description":"Columns from the tablet breakpoint (768px) up. Numeric counts render as `repeat(n, minmax(0, 1fr))` so cells can shrink below content width."},{"name":"desktopColumns","type":"number | string","values":null,"default":null,"required":false,"description":"Columns from the desktop breakpoint (1024px) up. Falls back to tabletColumns, then columns."},{"name":"wideColumns","type":"number | string","values":null,"default":null,"required":false,"description":"Columns from the wide breakpoint (1440px) up. Falls back through desktopColumns, tabletColumns, columns."},{"name":"ultraColumns","type":"number | string","values":null,"default":null,"required":false,"description":"Columns from the ultra breakpoint (1920px) up. Falls back through wideColumns, desktopColumns, tabletColumns, columns."},{"name":"rows","type":"number | string","values":null,"default":null,"required":false,"description":"Row count or grid-template-rows string."},{"name":"gap","type":"string","values":null,"default":"1rem","required":false,"description":"Grid gap. Defaults to the raw value `1rem`; pass a space token such as var(--space-layout-24) instead."},{"name":"tabletGap","type":"string","values":null,"default":null,"required":false,"description":"Gap from the tablet breakpoint (768px) up."},{"name":"desktopGap","type":"string","values":null,"default":null,"required":false,"description":"Gap from the desktop breakpoint (1024px) up. Falls back to tabletGap, then gap."},{"name":"wideGap","type":"string","values":null,"default":null,"required":false,"description":"Gap from the wide breakpoint (1440px) up. Falls back through desktopGap, tabletGap, gap."},{"name":"ultraGap","type":"string","values":null,"default":null,"required":false,"description":"Gap from the ultra breakpoint (1920px) up. Falls back through wideGap, desktopGap, tabletGap, gap."},{"name":"rowGap","type":"string","values":null,"default":null,"required":false,"description":"Row gap override."},{"name":"colGap","type":"string","values":null,"default":null,"required":false,"description":"Column gap override."},{"name":"align","type":"\"inherit\" | \"center\" | \"flex-start\" | \"flex-end\" | \"stretch\" | \"baseline\" | \"-moz-initial\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | \"end\" | \"self-end\" | \"self-start\" | \"start\" | \"anchor-center\" | \"normal\"","values":["inherit","center","flex-start","flex-end","stretch","baseline","-moz-initial","initial","revert","revert-layer","unset","end","self-end","self-start","start","anchor-center","normal"],"default":"normal","required":false,"description":"Align-items. No default: when omitted Grid sets no align-items, so the CSS initial value (normal) applies."},{"name":"justify","type":"\"inherit\" | \"center\" | \"flex-start\" | \"flex-end\" | \"stretch\" | \"baseline\" | \"-moz-initial\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | \"end\" | \"self-end\" | \"self-start\" | \"start\" | \"anchor-center\" | \"normal\" | \"left\" | \"legacy\" | \"right\"","values":["inherit","center","flex-start","flex-end","stretch","baseline","-moz-initial","initial","revert","revert-layer","unset","end","self-end","self-start","start","anchor-center","normal","left","legacy","right"],"default":null,"required":false,"description":"Justify-items. No default: when omitted Grid sets no justify-items."},{"name":"style","type":"CSSProperties","values":null,"default":"{}","required":false,"description":"No description in the contract."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Grid class names."}],"variants":[{"name":"align","values":["inherit","center","flex-start","flex-end","stretch","baseline","-moz-initial","initial","revert","revert-layer","unset","end","self-end","self-start","start","anchor-center","normal"],"default":"normal"},{"name":"justify","values":["inherit","center","flex-start","flex-end","stretch","baseline","-moz-initial","initial","revert","revert-layer","unset","end","self-end","self-start","start","anchor-center","normal","left","legacy","right"],"default":null}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/grid","markdown":"https://www.digitaltableteur.com/design-system/components/grid.md","contract":"https://www.digitaltableteur.com/contracts/v1/Grid.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Grid.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/grid.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"GridBlock","slug":"grid-block","status":"stable","group":"layout","description":"Responsive grid of case-study content cells with column, gap, spacing and background knobs, used across Work project pages.","exported":false,"import":null,"customElement":null,"props":[{"name":"cells","type":"GridCell[]","values":null,"default":null,"required":true,"description":"Array of grid cells to render."},{"name":"columns","type":"1 | 2 | 3 | 4","values":["1","2","3","4"],"default":"2","required":false,"description":"Number of columns in the grid. Defaults to 2."},{"name":"gap","type":"\"none\" | \"small\" | \"medium\" | \"large\"","values":["none","small","medium","large"],"default":"medium","required":false,"description":"Gap between cells. Defaults to \"medium\"."},{"name":"backgroundColor","type":"\"transparent\" | \"light\" | \"white\"","values":["transparent","light","white"],"default":"transparent","required":false,"description":"Background color variant, applied to the outer element through a CSS Modules class. Defaults to \"transparent\"."},{"name":"maxWidth","type":"\"sm\" | \"md\" | \"lg\" | \"full\" | \"xl\"","values":["sm","md","lg","full","xl"],"default":"md","required":false,"description":"Maximum width constraint passed to the inner PageLayout. Defaults to \"md\"."},{"name":"spacing","type":"\"compact\" | \"default\" | \"comfortable\" | \"spacious\"","values":["compact","default","comfortable","spacious"],"default":"comfortable","required":false,"description":"Spacing variant passed to the inner PageLayout. Defaults to \"comfortable\"."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Additional CSS class on the inner grid <div>, not on the root <section>."},{"name":"as","type":"\"article\" | \"div\" | \"section\"","values":["article","div","section"],"default":"section","required":false,"description":"Outer element. The inner PageLayout wrapper is always a <div>, so sections never nest. Defaults to \"section\"."}],"variants":[{"name":"columns","values":["1","2","3","4"],"default":"2"},{"name":"gap","values":["none","small","medium","large"],"default":"medium"},{"name":"backgroundColor","values":["transparent","light","white"],"default":"transparent"},{"name":"maxWidth","values":["sm","md","lg","full","xl"],"default":"md"},{"name":"spacing","values":["compact","default","comfortable","spacious"],"default":"comfortable"},{"name":"as","values":["article","div","section"],"default":"section"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/grid-block","markdown":"https://www.digitaltableteur.com/design-system/components/grid-block.md","contract":"https://www.digitaltableteur.com/contracts/v1/GridBlock.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/GridBlock.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/grid-block.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"GroupLabel","slug":"group-label","status":"stable","group":"form","description":"The group heading for sets of controls. With `as=\"legend\"` as the first child of a `<fieldset>` it names the group, which is how FormField (and so CheckboxGroup), RadioGroup and the SelectableCard group render it; the default `as=\"label\"` names one control through `htmlFor`.","exported":true,"import":"import { GroupLabel } from \"@digitaltableteur/react\";","customElement":"dt-group-label","props":[{"name":"as","type":"\"label\" | \"legend\"","values":["label","legend"],"default":"label","required":false,"description":"Element to render. legend (first child of a fieldset) names a group of controls; label names one control through htmlFor."},{"name":"htmlFor","type":"string","values":null,"default":null,"required":false,"description":"ID of the control the label names. Required for label; ignored for legend."},{"name":"tooltipText","type":"string","values":null,"default":null,"required":false,"description":"Optional browser tooltip; fallback when title is not set."},{"name":"required","type":"boolean","values":null,"default":"false","required":false,"description":"Shows the required asterisk."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Muted disabled styling."},{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Native title attribute override."}],"variants":[{"name":"as","values":["label","legend"],"default":"label"}],"lookalikes":[{"name":"FormField","when":"Do not name a radio or checkbox set with as=\"label\"; a label names one control. Use as=\"legend\" inside a fieldset, or FormField."},{"name":"Label","when":"Do not use as the label of an ordinary single input; that is `Label`. as=\"label\" is for the primary control of a composite group."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/group-label","markdown":"https://www.digitaltableteur.com/design-system/components/group-label.md","contract":"https://www.digitaltableteur.com/contracts/v1/GroupLabel.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/GroupLabel.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/group-label.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"HelperText","slug":"helper-text","status":"stable","group":"form","description":"Helper or validation copy below form controls. Only the error state carries semantics (role=alert); warning, success and info differ by colour and an icon with no text alternative.","exported":true,"import":"import { HelperText } from \"@digitaltableteur/react\";","customElement":"dt-helper-text","props":[{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"The helper text content to display."},{"name":"id","type":"string","values":null,"default":null,"required":false,"description":"Optional ID for aria-describedby association."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS class name."},{"name":"state","type":"\"info\" | \"success\" | \"warning\" | \"error\"","values":["info","success","warning","error"],"default":null,"required":false,"description":"Semantic state of the helper text (error, warning, success, info). Warning, success and info icons carry a translated text alternative, so the state is not conveyed by colour alone. Default is neutral/no state."}],"variants":[{"name":"state","values":["info","success","warning","error"],"default":null}],"lookalikes":[{"name":"Text","when":"Do not label form fields with Text; use Label (htmlFor) and HelperText (aria-describedby)."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/helper-text","markdown":"https://www.digitaltableteur.com/design-system/components/helper-text.md","contract":"https://www.digitaltableteur.com/contracts/v1/HelperText.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/HelperText.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/helper-text.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"HeroSection","slug":"hero-section","status":"stable","group":"marketing","description":"Full-bleed hero shell with min-height, alignment, and background variants.","exported":false,"import":null,"customElement":null,"props":[{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"Hero content."},{"name":"background","type":"\"image\" | \"transparent\" | \"solid\" | \"gradient\"","values":["image","transparent","solid","gradient"],"default":"transparent","required":false,"description":"Background style variant. Defaults to `transparent`."},{"name":"backgroundImage","type":"string","values":null,"default":null,"required":false,"description":"Background image URL (only used when background=\"image\")"},{"name":"minHeight","type":"\"auto\" | \"hero\" | \"screen\" | \"half\"","values":["auto","hero","screen","half"],"default":"hero","required":false,"description":"Minimum height of the hero section. Defaults to `hero` (75vh); `screen` is 100vh, `half` 50vh, `auto` none."},{"name":"align","type":"\"center\" | \"start\" | \"end\"","values":["center","start","end"],"default":"center","required":false,"description":"Horizontal (cross-axis) alignment of the content. The root is a flex column, so this maps to items-*. Defaults to `center`."},{"name":"justify","type":"\"center\" | \"start\" | \"end\"","values":["center","start","end"],"default":"center","required":false,"description":"Vertical (main-axis) alignment of the content within the min-height. The root is a flex column, so this maps to justify-*. Defaults to `center`."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className for styling extensions."},{"name":"as","type":"\"symbol\" | \"object\" | \"image\" | \"form\" | \"slot\" | \"style\" | \"title\" | \"button\" | \"search\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"div\" | \"section\" | \"aside\" | \"li\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"canvas\" | \"caption\" | \"center\" | \"cite\" | \"code\" | \"col\" | \"colgroup\" | \"data\" | \"datalist\" | \"dd\" | \"del\" | \"details\" | \"dfn\" | \"dl\" | \"dt\" | \"em\" | \"embed\" | \"fieldset\" | \"figcaption\" | \"footer\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"head\" | \"header\" | \"hgroup\" | \"hr\" | \"html\" | \"i\" | \"iframe\" | \"input\" | \"ins\" | \"kbd\" | \"keygen\" | \"label\" | \"legend\" | \"map\" | \"mark\" | \"meta\" | \"meter\" | \"nav\" | \"noindex\" | \"noscript\" | \"ol\" | \"optgroup\" | \"output\" | \"p\" | \"param\" | \"picture\" | \"pre\" | \"progress\" | \"q\" | \"rp\" | \"rt\" | \"ruby\" | \"s\" | \"samp\" | \"script\" | \"select\" | \"small\" | \"source\" | \"span\" | \"strong\" | \"sub\" | \"summary\" | \"sup\" | \"template\" | \"tbody\" | \"td\" | \"textarea\" | \"tfoot\" | \"th\" | \"thead\" | \"tr\" | \"track\" | \"u\" | \"ul\" | \"var\" | \"video\" | \"wbr\" | \"webview\" | \"svg\" | \"animate\" | \"animateMotion\" | \"animateTransform\" | \"circle\" | \"clipPath\" | \"defs\" | \"desc\" | \"ellipse\" | \"feBlend\" | \"feColorMatrix\" | \"feComponentTransfer\" | \"feComposite\" | \"feConvolveMatrix\" | \"feDiffuseLighting\" | \"feDisplacementMap\" | \"feDistantLight\" | \"feDropShadow\" | \"feFlood\" | \"feFuncA\" | \"feFuncB\" | \"feFuncG\" | \"feFuncR\" | \"feGaussianBlur\" | \"feImage\" | \"feMerge\" | \"feMergeNode\" | \"feMorphology\" | \"feOffset\" | \"fePointLight\" | \"feSpecularLighting\" | \"feSpotLight\" | \"feTile\" | \"feTurbulence\" | \"filter\" | \"foreignObject\" | \"g\" | \"line\" | \"linearGradient\" | \"marker\" | \"mask\" | \"metadata\" | \"mpath\" | \"path\" | \"pattern\" | \"polygon\" | \"polyline\" | \"radialGradient\" | \"rect\" | \"set\" | \"stop\" | \"textPath\" | \"tspan\" | \"use\" | \"view\"","values":["symbol","object","image","form","slot","style","title","button","search","article","dialog","figure","img","link","main","menu","menuitem","option","switch","table","text","time","div","section","aside","li","a","abbr","address","area","audio","b","base","bdi","bdo","big","blockquote","body","br","canvas","caption","center","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dl","dt","em","embed","fieldset","figcaption","footer","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","input","ins","kbd","keygen","label","legend","map","mark","meta","meter","nav","noindex","noscript","ol","optgroup","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","select","small","source","span","strong","sub","summary","sup","template","tbody","td","textarea","tfoot","th","thead","tr","track","u","ul","var","video","wbr","webview","svg","animate","animateMotion","animateTransform","circle","clipPath","defs","desc","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","set","stop","textPath","tspan","use","view"],"default":"section","required":false,"description":"Semantic HTML element to render as. Defaults to `section`. Typed as any React ElementType, so the values list is every JSX intrinsic; only section-level elements (section, header, div) make sense here."},{"name":"ariaLabel","type":"string","values":null,"default":null,"required":false,"description":"ARIA label for accessibility."}],"variants":[{"name":"align","values":["center","end","start"],"default":"center"},{"name":"background","values":["image","transparent","solid","gradient"],"default":"transparent"},{"name":"minHeight","values":["auto","hero","screen","half"],"default":"hero"},{"name":"justify","values":["center","start","end"],"default":"center"},{"name":"as","values":["symbol","object","image","form","slot","style","title","button","search","article","dialog","figure","img","link","main","menu","menuitem","option","switch","table","text","time","div","section","aside","li","a","abbr","address","area","audio","b","base","bdi","bdo","big","blockquote","body","br","canvas","caption","center","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dl","dt","em","embed","fieldset","figcaption","footer","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","input","ins","kbd","keygen","label","legend","map","mark","meta","meter","nav","noindex","noscript","ol","optgroup","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","select","small","source","span","strong","sub","summary","sup","template","tbody","td","textarea","tfoot","th","thead","tr","track","u","ul","var","video","wbr","webview","svg","animate","animateMotion","animateTransform","circle","clipPath","defs","desc","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","set","stop","textPath","tspan","use","view"],"default":"section"}],"lookalikes":[],"invalidCombinations":[{"id":"hero-background-image-needs-image-mode","level":"MUST NOT","condition":"When `backgroundImage` is set and `background` is one of `gradient`, `solid`, `transparent`, then do not set `backgroundImage`.","reason":"`backgroundImage` only renders when background=\"image\"; with any other background it is silently dropped."},{"id":"hero-background-image-default-mode","level":"MUST NOT","condition":"When `backgroundImage` is set and `background` is not set, then also set `background`.","reason":"`background` defaults to \"transparent\", which drops `backgroundImage`. Set background=\"image\"."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/hero-section","markdown":"https://www.digitaltableteur.com/design-system/components/hero-section.md","contract":"https://www.digitaltableteur.com/contracts/v1/HeroSection.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/HeroSection.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/hero-section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"HighlightSection","slug":"highlight-section","status":"stable","group":"marketing","description":"Highlight band with variant backgrounds and CTA slots.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Section title/headline."},{"name":"overline","type":"string","values":null,"default":null,"required":false,"description":"Optional overline text above title."},{"name":"description","type":"string","values":null,"default":null,"required":true,"description":"Supporting description text."},{"name":"cta","type":"HighlightSectionCTA | HighlightSectionCTA[]","values":null,"default":null,"required":false,"description":"CTA button configuration (up to 3 items)"},{"name":"variant","type":"\"pattern\" | \"solid\" | \"gradient\" | \"dots\"","values":["pattern","solid","gradient","dots"],"default":"gradient","required":false,"description":"Background variant. Defaults to \"gradient\"."},{"name":"size","type":"\"compact\" | \"comfortable\" | \"spacious\"","values":["compact","comfortable","spacious"],"default":"comfortable","required":false,"description":"Section size (affects padding and spacing). Defaults to \"comfortable\"."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Custom className for additional styling."},{"name":"ariaLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible name for the section. When omitted, the section is named by its own h2 title through aria-labelledby."},{"name":"id","type":"string","values":null,"default":null,"required":false,"description":"Section id for anchor linking. When omitted, a unique id is generated so two instances never share an anchor."},{"name":"donnyTarget","type":"string","values":null,"default":null,"required":false,"description":"Donny site action target id. No data-donny-target is rendered when omitted."}],"variants":[{"name":"variant","values":["pattern","solid","gradient","dots"],"default":"gradient"},{"name":"size","values":["compact","comfortable","spacious"],"default":"comfortable"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/highlight-section","markdown":"https://www.digitaltableteur.com/design-system/components/highlight-section.md","contract":"https://www.digitaltableteur.com/contracts/v1/HighlightSection.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/HighlightSection.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/highlight-section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"HomeHero","slug":"home-hero","status":"stable","group":"marketing","description":"Homepage hero with kinetic title, background, and primary CTA.","exported":false,"import":null,"customElement":null,"props":[{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className for styling."},{"name":"background","type":"ReactNode","values":null,"default":null,"required":false,"description":"Replaces the default animated gradient behind the content. Drags on the background pass through the content layer; only the buttons capture them."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/home-hero","markdown":"https://www.digitaltableteur.com/design-system/components/home-hero.md","contract":"https://www.digitaltableteur.com/contracts/v1/HomeHero.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/HomeHero.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/home-hero.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Icon","slug":"icon","status":"stable","group":"display","description":"Phosphor icon wrapper with size, weight, and motion affordances.","exported":true,"import":"import { Icon } from \"@digitaltableteur/react\";","customElement":"dt-icon","props":[{"name":"name","type":"string","values":null,"default":null,"required":true,"description":"Phosphor icon name. Accepts PascalCase (e.g., \"ShareNetwork\") or slug (\"share-network\")."},{"name":"weight","type":"\"thin\" | \"light\" | \"regular\" | \"bold\" | \"fill\" | \"duotone\"","values":["thin","light","regular","bold","fill","duotone"],"default":null,"required":false,"description":"Optional Phosphor weight override."},{"name":"legacyStyle","type":"\"thin\" | \"light\" | \"regular\" | \"duotone\" | \"solid\" | \"brands\"","values":["thin","light","regular","duotone","solid","brands"],"default":null,"required":false,"description":"Legacy FontAwesome-style weight string kept for backward compatibility."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\" | \"xl\" | \"xs\" | \"2xs\" | \"2xl\"","values":["sm","md","lg","xl","xs","2xs","2xl"],"default":"md","required":false,"description":"A named size from the ladder (2xs to 2xl) or a number of pixels. The type also accepts a number; numeric sizes render at that pixel size without the tokenized size class."},{"name":"color","type":"string","values":null,"default":null,"required":false,"description":"SVG color override; defaults to the inherited current color."},{"name":"rotate","type":"0 | 90 | 180 | 270","values":["0","90","180","270"],"default":null,"required":false,"description":"Quarter-turn rotation applied to the glyph."},{"name":"flip","type":"\"horizontal\" | \"vertical\" | \"both\"","values":["horizontal","vertical","both"],"default":null,"required":false,"description":"Mirror the glyph along one or both axes."},{"name":"spin","type":"boolean","values":null,"default":null,"required":false,"description":"Apply the continuous rotation animation."},{"name":"pulse","type":"boolean","values":null,"default":null,"required":false,"description":"Apply the pulse animation when spin is not active."},{"name":"mirrored","type":"boolean","values":null,"default":null,"required":false,"description":"Use Phosphor's horizontal mirroring."},{"name":"ariaLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible name for a meaningful icon."},{"name":"decorative","type":"boolean","values":null,"default":null,"required":false,"description":"Hide the icon from assistive technology. Defaults to true without ariaLabel; when true it wins over ariaLabel, which is then dropped."}],"variants":[{"name":"size","values":["2xs","xs","sm","md","lg","xl","2xl"],"default":"md"},{"name":"weight","values":["thin","light","regular","bold","fill","duotone"],"default":null},{"name":"legacyStyle","values":["thin","light","regular","duotone","solid","brands"],"default":null},{"name":"rotate","values":["0","90","180","270"],"default":null},{"name":"flip","values":["horizontal","vertical","both"],"default":null}],"lookalikes":[{"name":"Button","when":"Do not build icon-only buttons from a bare Icon; use Button with icon and accessibleName so focus, hit target and keyboard activation are owned by the right component."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/icon","markdown":"https://www.digitaltableteur.com/design-system/components/icon.md","contract":"https://www.digitaltableteur.com/contracts/v1/Icon.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Icon.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/icon.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"IconButton","slug":"icon-button","status":"stable","group":"actions","description":"Icon-only action button. Wraps @dt/Button in its rounded icon-only form with an enforced accessible label, sharing Button's variant (weight) x tone (semantic) matrix and surface awareness.","exported":true,"import":"import { IconButton } from \"@digitaltableteur/react\";","customElement":"dt-icon-button","props":[{"name":"icon","type":"ReactNode | string","values":null,"default":null,"required":true,"description":"Icon glyph: a rendered element (e.g. <CaretRight />) or a Phosphor icon name (e.g. \"x\")."},{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Accessible name when `aria-labelledby` is not set."},{"name":"variant","type":"\"primary\" | \"secondary\" | \"tertiary\"","values":["primary","secondary","tertiary"],"default":"tertiary","required":false,"description":"Visual weight."},{"name":"tone","type":"ButtonProps[\"tone\"]","values":null,"default":"neutral","required":false,"description":"Semantic colour, orthogonal to `variant`."},{"name":"surface","type":"ButtonProps[\"surface\"]","values":null,"default":"default","required":false,"description":"Surface the control sits on; prefer over color overrides on tinted bands."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"No description in the contract."},{"name":"tooltip","type":"string","values":null,"default":null,"required":false,"description":"Native tooltip text shown on hover; the `label` stays the accessible name."}],"variants":[{"name":"variant","values":["primary","secondary","tertiary"],"default":"tertiary"},{"name":"tone","values":["neutral","error","warning","success","info"],"default":"neutral"},{"name":"surface","values":["default","onDark","onBrand"],"default":"default"},{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[{"name":"Button","when":"Do not use IconButton for primary marketing CTAs; text plus icon is more discoverable, use Button with an icon prop."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/icon-button","markdown":"https://www.digitaltableteur.com/design-system/components/icon-button.md","contract":"https://www.digitaltableteur.com/contracts/v1/IconButton.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/IconButton.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/icon-button.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"IconSwap","slug":"icon-swap","status":"alpha","group":"display","description":"Two glyphs in one cell that crossfade with scale and blur when a state flips, such as copy to check, play to pause or sun to moon.","exported":false,"import":null,"customElement":null,"props":[{"name":"icon","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"Glyph shown at rest, such as copy, play or a sun."},{"name":"activeIcon","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"Glyph shown while `active` is true, such as check, pause or a moon."},{"name":"active","type":"boolean","values":null,"default":"false","required":false,"description":"Shows `activeIcon` instead of `icon`. Defaults to `false`."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Extra class names on the root."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/icon-swap","markdown":"https://www.digitaltableteur.com/design-system/components/icon-swap.md","contract":"https://www.digitaltableteur.com/contracts/v1/IconSwap.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/IconSwap.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/icon-swap.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ImagePlaceholder","slug":"image-placeholder","status":"beta","group":"structure","description":"Dimension-labelled placeholder for imagery in layouts, demos, and drafts; swap for real media before shipping.","exported":false,"import":null,"customElement":null,"props":[{"name":"width","type":"number","values":null,"default":null,"required":true,"description":"Width in pixels."},{"name":"height","type":"number","values":null,"default":null,"required":true,"description":"Height in pixels."},{"name":"alt","type":"string","values":null,"default":"Placeholder image","required":false,"description":"Alt text for accessibility."},{"name":"caption","type":"string","values":null,"default":null,"required":false,"description":"Caption text displayed below the image."},{"name":"variant","type":"\"light\" | \"medium\" | \"dark\" | \"gradient\"","values":["light","medium","dark","gradient"],"default":"gradient","required":false,"description":"Background color variant."},{"name":"showDimensions","type":"boolean","values":null,"default":"true","required":false,"description":"Display the dimensions on the placeholder."},{"name":"showIcon","type":"boolean","values":null,"default":"true","required":false,"description":"Display an icon on the placeholder."},{"name":"text","type":"string","values":null,"default":null,"required":false,"description":"Text to display on the placeholder."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Additional CSS class."},{"name":"style","type":"React.CSSProperties","values":null,"default":null,"required":false,"description":"Inline styles."}],"variants":[{"name":"variant","values":["light","medium","dark","gradient"],"default":"light"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/image-placeholder","markdown":"https://www.digitaltableteur.com/design-system/components/image-placeholder.md","contract":"https://www.digitaltableteur.com/contracts/v1/ImagePlaceholder.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ImagePlaceholder.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/image-placeholder.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Kbd","slug":"kbd","status":"stable","group":"display","description":"Inline keyboard-key indicator rendered as a semantic kbd keycap.","exported":true,"import":"import { Kbd } from \"@digitaltableteur/react\";","customElement":"dt-kbd","props":[{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Size token. Defaults to \"md\"."},{"name":"variant","type":"\"primary\" | \"secondary\"","values":["primary","secondary"],"default":"primary","required":false,"description":"Visual style. `primary` is a filled light-gray keycap with a bottom edge that reads like a physical key; `secondary` is the flatter outlined chip. Defaults to \"primary\"."}],"variants":[{"name":"variant","values":["primary","secondary"],"default":"primary"},{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[{"name":"Code","when":"Do not use for keyboard keys; that is Kbd."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/kbd","markdown":"https://www.digitaltableteur.com/design-system/components/kbd.md","contract":"https://www.digitaltableteur.com/contracts/v1/Kbd.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Kbd.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/kbd.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Label","slug":"label","status":"stable","group":"form","description":"Form field label with required, disabled, and tooltip affordances.","exported":true,"import":"import { Label } from \"@digitaltableteur/react\";","customElement":"dt-label","props":[{"name":"htmlFor","type":"string","values":null,"default":null,"required":true,"description":"Id of the form control this label describes."},{"name":"tooltipText","type":"string","values":null,"default":null,"required":false,"description":"Native tooltip text; used as a fallback when `title` is not set."},{"name":"required","type":"boolean","values":null,"default":"false","required":false,"description":"Appends a \"*\" marker plus an sr-only hint, `requiredText` or the translated \"(required)\". It only changes the label text; the control still needs its own required."},{"name":"requiredText","type":"string","values":null,"default":null,"required":false,"description":"Screen-reader hint read after a required label. Defaults to the translated \"(required)\" (`label.required`)."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Dims the label and shows a not-allowed cursor."},{"name":"variant","type":"\"option\" | \"field\"","values":["option","field"],"default":"field","required":false,"description":"`field` names a control above or beside it (semibold); `option` is the text of a checkbox, radio or switch, which reads as plain text."}],"variants":[{"name":"variant","values":["field","option"],"default":"field"}],"lookalikes":[{"name":"FormField","when":"Do not use Label as a heading above multiple controls; use FormField's group mode or a fieldset legend."},{"name":"GroupLabel","when":"Do not use as the label of an ordinary single input; that is `Label`. as=\"label\" is for the primary control of a composite group."},{"name":"Text","when":"Do not label form fields with Text; use Label (htmlFor) and HelperText (aria-describedby)."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/label","markdown":"https://www.digitaltableteur.com/design-system/components/label.md","contract":"https://www.digitaltableteur.com/contracts/v1/Label.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Label.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/label.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"LanguageSwitcher","slug":"language-switcher","status":"stable","group":"navigation","description":"Compact language selector: a current-language trigger that fans out the other locales as a button group.","exported":true,"import":"import { LanguageSwitcher } from \"@digitaltableteur/react\";","customElement":"dt-language-switcher","props":[{"name":"languages","type":"LanguageSwitcherOption[]","values":null,"default":null,"required":true,"description":"Available languages: code (also set as lang), visible label and ariaLabel, the language's own name used in the \"<label>, <name>\" accessible name."},{"name":"currentLang","type":"string","values":null,"default":null,"required":true,"description":"Currently selected language code."},{"name":"onLanguageChange","type":"(code: string) => void","values":null,"default":null,"required":true,"description":"Called with the selected language code."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional classes on the group wrapper."},{"name":"buttonClassName","type":"string","values":null,"default":"shrink-0 whitespace-nowrap px-2.5 py-1.5 text-sm font-heading font-semibold uppercase tracking-widest transition-colors motion-reduce:transition-none cursor-pointer rounded-sm border border-transparent bg-transparent text-muted-foreground hover:text-foreground hover:bg-foreground/5","required":false,"description":"Base class override applied to every language button."},{"name":"activeButtonClassName","type":"string","values":null,"default":"text-foreground hover:text-foreground","required":false,"description":"Class override for the current-language trigger."},{"name":"openTriggerClassName","type":"string","values":null,"default":"bg-foreground/5 border-foreground text-foreground hover:border-foreground","required":false,"description":"Class override for the trigger while the tray is open."},{"name":"floatedButtonClassName","type":"string","values":null,"default":"font-semibold text-foreground/80 hover:text-foreground","required":false,"description":"Class override for the fanned-out tray options."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/language-switcher","markdown":"https://www.digitaltableteur.com/design-system/components/language-switcher.md","contract":"https://www.digitaltableteur.com/contracts/v1/LanguageSwitcher.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/LanguageSwitcher.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/language-switcher.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Lightbox","slug":"lightbox","status":"alpha","group":"media","description":"Modal image viewer with keyboard navigation across a gallery of images.","exported":false,"import":null,"customElement":null,"props":[{"name":"images","type":"LightboxImage[]","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"initialIndex","type":"number","values":null,"default":"0","required":false,"description":"No description in the contract."},{"name":"open","type":"boolean","values":null,"default":"false","required":false,"description":"No description in the contract."},{"name":"onOpenChange","type":"(open: boolean) => void","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[],"lookalikes":[{"name":"Modal","when":"Do not use it for non-image content. It is sized and captioned for images; use `Modal` for arbitrary content."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/lightbox","markdown":"https://www.digitaltableteur.com/design-system/components/lightbox.md","contract":"https://www.digitaltableteur.com/contracts/v1/Lightbox.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Lightbox.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/lightbox.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Link","slug":"link","status":"stable","group":"navigation","description":"Accessible inline link with sm/md/lg/inherit sizes, a focus ring, URL sanitisation, and an optional external-link icon.","exported":true,"import":"import { Link } from \"@digitaltableteur/react\";","customElement":"dt-link","props":[{"name":"size","type":"\"sm\" | \"md\" | \"lg\" | \"inherit\"","values":["sm","md","lg","inherit"],"default":"md","required":false,"description":"Size. Defaults to `md`; `inherit` follows the surrounding text size."},{"name":"underline","type":"\"always\" | \"hover\" | \"none\"","values":["always","hover","none"],"default":"always","required":false,"description":"Underline mode. \"always\" shows it permanently, \"hover\" reveals it on hover and keyboard focus (nav lists like the site footer), \"none\" omits it entirely. Defaults to `always`."}],"variants":[{"name":"size","values":["sm","md","lg","inherit"],"default":"md"},{"name":"underline","values":["always","hover","none"],"default":"always"}],"lookalikes":[{"name":"Button","when":"Do not build button-shaped CTAs from Link; use Button, with href when the destination is a page."},{"name":"NavLink","when":"Do not use NavLink for inline body links; that is Link's job; NavLink's route tracking is navigation-chrome behavior."},{"name":"SocialIconLink","when":"Do not put text children inside; this is icon-only; use Link for labeled links."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/link","markdown":"https://www.digitaltableteur.com/design-system/components/link.md","contract":"https://www.digitaltableteur.com/contracts/v1/Link.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Link.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/link.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"LinkedInQuoteCard","slug":"linked-in-quote-card","status":"beta","group":"structure","description":"Quote card styled like a LinkedIn post for embedding social content in articles without an external embed.","exported":false,"import":null,"customElement":null,"props":[{"name":"quote","type":"string","values":null,"default":null,"required":true,"description":"The quote/post text."},{"name":"name","type":"string","values":null,"default":null,"required":true,"description":"Name of the person."},{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Title/position of the person."},{"name":"company","type":"string","values":null,"default":null,"required":true,"description":"Company name."},{"name":"connectionDegree","type":"string","values":null,"default":"1st","required":false,"description":"Connection degree (e.g., \"1st\", \"2nd\", \"3rd\")"},{"name":"linkedinUrl","type":"string","values":null,"default":null,"required":false,"description":"LinkedIn profile URL (optional)"},{"name":"avatarUrl","type":"string","values":null,"default":null,"required":false,"description":"Avatar image URL (optional)"},{"name":"companyLogoUrl","type":"string","values":null,"default":null,"required":false,"description":"Company logo URL (optional, displayed at bottom)"},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Additional CSS classes."},{"name":"variant","type":"\"muted\" | \"light\" | \"dark\"","values":["muted","light","dark"],"default":"light","required":false,"description":"Background color variant."}],"variants":[{"name":"variant","values":["muted","light","dark"],"default":"muted"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/linked-in-quote-card","markdown":"https://www.digitaltableteur.com/design-system/components/linked-in-quote-card.md","contract":"https://www.digitaltableteur.com/contracts/v1/LinkedInQuoteCard.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/LinkedInQuoteCard.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/linked-in-quote-card.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"List","slug":"list","status":"stable","group":"structure","description":"Typographic list (ul or ol) that renders `items` on the text ladder; size matches the surrounding Text voice, listStyleType styles or removes markers, and spacing owns the inter-item rhythm.","exported":true,"import":"import { List } from \"@digitaltableteur/react\";","customElement":"dt-list","props":[{"name":"items","type":"React.ReactNode[]","values":null,"default":null,"required":true,"description":"Ordered content rendered as one list item per entry."},{"name":"as","type":"\"ol\" | \"ul\"","values":["ol","ul"],"default":"ul","required":false,"description":"Semantic list element."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Additional class name applied to the list element."},{"name":"size","type":"\"xl\" | \"xs\" | \"s\" | \"xxs\" | \"m\" | \"l\" | \"xxl\"","values":["xl","xs","s","xxs","m","l","xxl"],"default":"m","required":false,"description":"Tokenized text size."},{"name":"lineHeight","type":"\"normal\" | \"tight\" | \"snug\" | \"relaxed\" | \"loose\"","values":["normal","tight","snug","relaxed","loose"],"default":null,"required":false,"description":"Optional tokenized line height."},{"name":"style","type":"React.CSSProperties","values":null,"default":null,"required":false,"description":"Inline style merged before the computed marker style: when listStyleType or striped resolves a marker, it overrides style.listStyleType."},{"name":"listStyleType","type":"\"none\" | \"decimal\" | \"circle\" | \"square\" | \"disc\" | \"decimal-leading-zero\" | \"lower-alpha\" | \"upper-alpha\" | \"lower-roman\" | \"upper-roman\" | \"dash\"","values":["none","decimal","circle","square","disc","decimal-leading-zero","lower-alpha","upper-alpha","lower-roman","upper-roman","dash"],"default":null,"required":false,"description":"Native marker style or the custom dash treatment. \"none\" and \"dash\" blank the native marker with a single-space string, not CSS none, so Safari and VoiceOver keep list semantics."},{"name":"spacing","type":"\"normal\" | \"relaxed\" | \"compact\"","values":["normal","relaxed","compact"],"default":"normal","required":false,"description":"Vertical spacing between items."},{"name":"role","type":"string","values":null,"default":null,"required":false,"description":"Optional ARIA role override for specialized list semantics."},{"name":"striped","type":"boolean","values":null,"default":"false","required":false,"description":"Alternate row backgrounds for long lists of multi-line entries; rows get padding and no markers unless listStyleType asks for them. This includes as=\"ol\", so a striped ordered list hides its numbers unless listStyleType is set."}],"variants":[{"name":"size","values":["s","m","l","xxs","xs","xl","xxl"],"default":"m"},{"name":"as","values":["ol","ul"],"default":"ul"},{"name":"lineHeight","values":["normal","tight","snug","relaxed","loose"],"default":null},{"name":"listStyleType","values":["none","decimal","circle","square","disc","decimal-leading-zero","lower-alpha","upper-alpha","lower-roman","upper-roman","dash"],"default":null},{"name":"spacing","values":["normal","relaxed","compact"],"default":"normal"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/list","markdown":"https://www.digitaltableteur.com/design-system/components/list.md","contract":"https://www.digitaltableteur.com/contracts/v1/List.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/List.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/list.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ListItem","slug":"list-item","status":"stable","group":"display","description":"Presentational row for menus, selects, palettes, and lists: leading icon, truncating label, end-aligned meta (text, Badge, Kbd, StatusDot, value), trailing icon, selection check, and a destructive tone. Consumers own semantics.","exported":true,"import":"import { ListItem } from \"@digitaltableteur/react\";","customElement":"dt-list-item","props":[{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"Primary label. Truncates with an ellipsis; never wraps."},{"name":"icon","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Leading icon node; rendered in a fixed gutter so labels column-align."},{"name":"meta","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"End-aligned secondary content: muted small text, Badge, Kbd, StatusDot, or a value. Exposed to AT."},{"name":"trailingIcon","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Trailing icon after meta, always aria-hidden: use it for decorative glyphs such as a chevron. A glyph that carries meaning (an external-link arrow) is hidden from screen readers here, so say it in the label or meta too."},{"name":"selected","type":"boolean","values":null,"default":"false","required":false,"description":"Renders the check indicator in the trailing position. Visual only; semantic selection belongs to the consumer."},{"name":"tone","type":"\"neutral\" | \"destructive\"","values":["neutral","destructive"],"default":"neutral","required":false,"description":"Destructive rows (deletions) use the error color treatment."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Visual disabled treatment via the canonical disabled tokens. The consumer carries aria-disabled."},{"name":"highlighted","type":"boolean","values":null,"default":"false","required":false,"description":"Parent-driven active row (combobox/palette). Radix menus work without it via [data-highlighted]."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[{"name":"tone","values":["neutral","destructive"],"default":"neutral"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/list-item","markdown":"https://www.digitaltableteur.com/design-system/components/list-item.md","contract":"https://www.digitaltableteur.com/contracts/v1/ListItem.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ListItem.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/list-item.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"LocationCard","slug":"location-card","status":"beta","group":"display","description":"Card variant for displaying a single office or service location (address, hours, map link). Visual sibling of `Card` with the location-specific slot order baked in.","exported":false,"import":null,"customElement":null,"props":[{"name":"officeName","type":"string","values":null,"default":null,"required":true,"description":"Office name heading."},{"name":"address","type":"string[]","values":null,"default":null,"required":true,"description":"Address lines."},{"name":"email","type":"string","values":null,"default":null,"required":false,"description":"Contact email."},{"name":"phone","type":"string","values":null,"default":null,"required":false,"description":"Contact phone."},{"name":"variant","type":"\"default\" | \"bordered\" | \"elevated\"","values":["default","bordered","elevated"],"default":"default","required":false,"description":"Card variant."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"variant","values":["default","elevated","bordered"],"default":"default"}],"lookalikes":[{"name":"Card","when":"Do not use as a generic 'card with an icon and label'; that is `Card`."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/location-card","markdown":"https://www.digitaltableteur.com/design-system/components/location-card.md","contract":"https://www.digitaltableteur.com/contracts/v1/LocationCard.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/LocationCard.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/location-card.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Logo","slug":"logo","status":"stable","group":"display","description":"Logo atom; the Digitaltableteur mark by default (monochrome currentColor, square footprint, optional controlled pulse), or any custom PNG/JPEG/SVG logo via src.","exported":true,"import":"import { Logo } from \"@digitaltableteur/react\";","customElement":"dt-logo","props":[{"name":"src","type":"string","values":null,"default":null,"required":false,"description":"Optional image URL (PNG, JPEG, or SVG) rendered instead of the built-in Digitaltableteur mark. `title` becomes the alt text; `animated` and `background` apply to the built-in mark only and are ignored when `src` is set."},{"name":"size","type":"number","values":null,"default":"24","required":false,"description":"Square render box in pixels; any number works. Default 24. The size variant values (16, 24, 40, 64) are the recommended presets, not the only allowed values."},{"name":"animated","type":"boolean","values":null,"default":"false","required":false,"description":"Pulse the three leading bars while true; a controlled signal driven from the consumer's hover/focus state (respects prefers-reduced-motion). Default false."},{"name":"background","type":"boolean","values":null,"default":"false","required":false,"description":"Render the brand lime circle background behind a contrast mark (`--logo-background` / `--logo-color`). Default false."},{"name":"title","type":"string","values":null,"default":"Digitaltableteur","required":false,"description":"Accessible name for the mark. Ignored when `decorative`. Default \"Digitaltableteur\"."},{"name":"decorative","type":"boolean","values":null,"default":"false","required":false,"description":"When true the mark is purely decorative and removed from the accessibility tree. Default false."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional utility/spacing classes."}],"variants":[{"name":"size","values":["16","24","40","64"],"default":"24"}],"lookalikes":[],"invalidCombinations":[{"id":"logo-src-ignores-mark-options","level":"SHOULD NOT","condition":"When `src` is set, then do not set `animated` or `background`.","reason":"`animated` and `background` style the built-in mark only; with `src` set they are ignored."},{"id":"logo-decorative-ignores-title","level":"SHOULD NOT","condition":"When `decorative` is `true`, then do not set `title`.","reason":"A decorative logo is removed from the accessibility tree, so `title` is never announced. Drop `title` or make the logo non-decorative."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/logo","markdown":"https://www.digitaltableteur.com/design-system/components/logo.md","contract":"https://www.digitaltableteur.com/contracts/v1/Logo.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Logo.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/logo.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"MacWindowFrame","slug":"mac-window-frame","status":"beta","group":"structure","description":"Decorative macOS-style window chrome that wraps showcase content such as code demos, screenshots, and portfolio pieces.","exported":true,"import":"import { MacWindowFrame } from \"@digitaltableteur/react\";","customElement":"dt-mac-window-frame","props":[{"name":"titleKey","type":"string","values":null,"default":"macWindowFrame.title","required":false,"description":"Translation key for the window title."},{"name":"actionLabelKey","type":"string","values":null,"default":"macWindowFrame.action","required":false,"description":"Optional label for the action button."},{"name":"onAction","type":"() => void","values":null,"default":null,"required":false,"description":"Called when the action button is pressed."},{"name":"density","type":"\"compact\" | \"comfortable\"","values":["compact","comfortable"],"default":"comfortable","required":false,"description":"Density variant."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"Content to render inside the frame."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Optional className passthrough."}],"variants":[{"name":"density","values":["compact","comfortable"],"default":"compact"}],"lookalikes":[{"name":"Modal","when":"Do not use it as an actual window or dialog; Modal owns focus and dismissal semantics."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/mac-window-frame","markdown":"https://www.digitaltableteur.com/design-system/components/mac-window-frame.md","contract":"https://www.digitaltableteur.com/contracts/v1/MacWindowFrame.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/MacWindowFrame.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/mac-window-frame.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ManifestoSection","slug":"manifesto-section","status":"alpha","group":"content","description":"Long-form manifesto prose section.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Section title."},{"name":"tokens","type":"ManifestoToken[]","values":null,"default":null,"required":true,"description":"Array of manifesto tokens."},{"name":"separator","type":"string","values":null,"default":"×","required":false,"description":"Separator character between phrases."},{"name":"background","type":"\"muted\" | \"transparent\" | \"gradient\"","values":["muted","transparent","gradient"],"default":"transparent","required":false,"description":"Background variant."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"background","values":["muted","transparent","gradient"],"default":"transparent"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/manifesto-section","markdown":"https://www.digitaltableteur.com/design-system/components/manifesto-section.md","contract":"https://www.digitaltableteur.com/contracts/v1/ManifestoSection.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ManifestoSection.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/manifesto-section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"MarkdownMessage","slug":"markdown-message","status":"stable","group":"structure","description":"Markdown renderer (GFM, raw HTML skipped) for chat replies and long-form content; it renders plain HTML elements by default and maps them onto Title, Text and Link only with renderWithDesignSystem.","exported":false,"import":null,"customElement":null,"props":[{"name":"content","type":"string","values":null,"default":null,"required":true,"description":"Markdown source. Rendered through DS typography only when renderWithDesignSystem is set."},{"name":"fallback","type":"string","values":null,"default":null,"required":false,"description":"Plain text shown when content is empty after trimming. There is no parse-failure path."},{"name":"data-role","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"renderWithDesignSystem","type":"boolean","values":null,"default":"false","required":false,"description":"Render markdown using the design system components (Title/Text/Link). Useful for long-form content pages to ensure consistent styling. Defaults to `false`, which renders raw p, h1-h3, a, strong and em elements; code and pre stay plain elements in both modes."},{"name":"designSystemTextSize","type":"DesignSystemTextSize","values":null,"default":"m","required":false,"description":"When `renderWithDesignSystem` is enabled, use this as the base size for paragraph and inline emphasis text (e.g. `p`, `strong`, `em`). Defaults to `m`."},{"name":"density","type":"\"default\" | \"chat\"","values":["default","chat"],"default":"default","required":false,"description":"Compact typography for in-chat assistant replies. Defaults to `default`; `chat` also drops every image."}],"variants":[{"name":"density","values":["default","chat"],"default":"default"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/markdown-message","markdown":"https://www.digitaltableteur.com/design-system/components/markdown-message.md","contract":"https://www.digitaltableteur.com/contracts/v1/MarkdownMessage.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/MarkdownMessage.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/markdown-message.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"MCPActionButton","slug":"mcp-action-button","status":"beta","group":"actions","description":"Button that invokes an MCP tool from chat and docs surfaces and reflects its pending, success, and error state.","exported":false,"import":null,"customElement":null,"props":[{"name":"toolId","type":"string","values":null,"default":null,"required":true,"description":"Identifier for the MCP tool to invoke."},{"name":"payload","type":"Record<string, unknown>","values":null,"default":null,"required":false,"description":"Optional payload for the MCP call."},{"name":"onExecute","type":"(input: { toolId: string; payload?: Record<string, unknown>; }) => Promise<unknown>","values":null,"default":null,"required":false,"description":"Async executor for the MCP action."},{"name":"onResult","type":"(result: unknown) => void","values":null,"default":null,"required":false,"description":"Callback for successful results."},{"name":"onError","type":"(error: unknown) => void","values":null,"default":null,"required":false,"description":"Callback for errors."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Button label override."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/mcp-action-button","markdown":"https://www.digitaltableteur.com/design-system/components/mcp-action-button.md","contract":"https://www.digitaltableteur.com/contracts/v1/MCPActionButton.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/MCPActionButton.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/mcp-action-button.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"MediaPlayer","slug":"media-player","status":"beta","group":"media","description":"Video player with controls over the frame, after streaming players: an optional title at the top left, the time remaining over a hairline progress line with a hover frame preview, and volume, back and forward 10 s, play, captions and full screen. Controls fade while playing and return on pointer, keyboard focus or pause.","exported":true,"import":"import { MediaPlayer } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"sources","type":"MediaPlayerSource[]","values":null,"default":null,"required":true,"description":"Media files in order of preference; the browser plays the first it supports."},{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Accessible name of the media, such as \"Garage Junction radio spot\"."},{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Title shown over the top left of the frame with the controls."},{"name":"subtitle","type":"string","values":null,"default":null,"required":false,"description":"Second line under the title, such as an artist or a date."},{"name":"poster","type":"string","values":null,"default":null,"required":false,"description":"Still image shown before playback starts."},{"name":"descriptionId","type":"string","values":null,"default":null,"required":false,"description":"Id of an element that describes the media; set as aria-describedby on the video."},{"name":"preload","type":"\"none\" | \"metadata\" | \"auto\"","values":["none","metadata","auto"],"default":"metadata","required":false,"description":"How much to load before playback."},{"name":"controlsPosition","type":"\"overlay\" | \"below\"","values":["overlay","below"],"default":"overlay","required":false,"description":"Where the controls sit: over the bottom of the frame on a scrim, or below it, always visible, for artwork whose bottom edge must stay clear."},{"name":"hideSeekPreview","type":"boolean","values":null,"default":"false","required":false,"description":"Hide the frame preview shown above the progress line on mouse hover. The preview loads its own copy of the media on first hover."},{"name":"children","type":"ReactNode","values":null,"default":null,"required":false,"description":"Optional <track> elements; captions or subtitles add a captions toggle."}],"variants":[{"name":"controlsPosition","values":["overlay","below"],"default":"overlay"},{"name":"preload","values":["none","metadata","auto"],"default":"metadata"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/media-player","markdown":"https://www.digitaltableteur.com/design-system/components/media-player.md","contract":"https://www.digitaltableteur.com/contracts/v1/MediaPlayer.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/MediaPlayer.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/media-player.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Menu","slug":"menu","status":"stable","group":"overlay","description":"Radix dropdown-menu primitive set (Menu, Trigger, Content, Item, Sub) shared by Avatar, SplitButton, Breadcrumb and FieldShell.","exported":true,"import":"import { Menu } from \"@digitaltableteur/react\";","customElement":"dt-menu","props":[{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Extra class on the content surface."},{"name":"side","type":"\"top\" | \"right\" | \"bottom\" | \"left\"","values":["top","right","bottom","left"],"default":null,"required":false,"description":"Preferred side relative to the trigger; flips when out of room (fixed collisionPadding of 12px). Defaults to \"bottom\"."},{"name":"align","type":"\"center\" | \"start\" | \"end\"","values":["center","start","end"],"default":"start","required":false,"description":"Alignment along the trigger edge. Defaults to \"start\"."},{"name":"sideOffset","type":"number","values":null,"default":null,"required":false,"description":"Gap in px between the trigger and the content. Defaults to 6."},{"name":"alignOffset","type":"number","values":null,"default":null,"required":false,"description":"Shift in px along the alignment edge (negative moves toward the start). Defaults to 0."}],"variants":[{"name":"align","values":["start","center","end"],"default":"start"},{"name":"side","values":["top","right","bottom","left"],"default":null}],"lookalikes":[{"name":"NavMenuList","when":"Do not reach for Menu to build primary site navigation; navigation is a list of links (NavMenuList), not an actions menu; forcing role=menu onto nav is an a11y regression."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/menu","markdown":"https://www.digitaltableteur.com/design-system/components/menu.md","contract":"https://www.digitaltableteur.com/contracts/v1/Menu.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Menu.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/menu.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Mermaid","slug":"mermaid","status":"alpha","group":"media","description":"Renders a Mermaid diagram with a concise accessible name, prose summary, and visible structured text alternative.","exported":false,"import":null,"customElement":null,"props":[{"name":"chart","type":"string","values":null,"default":null,"required":true,"description":"Mermaid diagram source."},{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Concise meaningful name for the diagram."},{"name":"description","type":"string","values":null,"default":null,"required":true,"description":"Short prose summary of the diagram purpose and relationships."},{"name":"accessibleDetails","type":"ReactNode","values":null,"default":null,"required":true,"description":"Structured or prose equivalent of every material relationship in the diagram."},{"name":"detailsLabel","type":"string","values":null,"default":null,"required":false,"description":"Label for the visible text-alternative disclosure."},{"name":"caption","type":"string","values":null,"default":null,"required":false,"description":"Optional visible figure caption."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional className for the figure."},{"name":"themeColors","type":"MermaidThemeColors","values":null,"default":null,"required":false,"description":"Diagram color overrides: CSS colours or var(--token) references. Defaults to --color-text and --color-border, so diagrams follow the theme."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/mermaid","markdown":"https://www.digitaltableteur.com/design-system/components/mermaid.md","contract":"https://www.digitaltableteur.com/contracts/v1/Mermaid.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Mermaid.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/mermaid.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Modal","slug":"modal","status":"stable","group":"overlay","description":"Modal dialog for confirmations, forms, and focused tasks.","exported":true,"import":"import { Modal } from \"@digitaltableteur/react\";","customElement":"dt-modal","props":[{"name":"severity","type":"\"info\" | \"success\" | \"warning\" | \"error\"","values":["info","success","warning","error"],"default":"info","required":false,"description":"Semantic severity level."},{"name":"isLoading","type":"boolean","values":null,"default":"false","required":false,"description":"Shows loading state with spinner."},{"name":"titleSize","type":"\"sm\" | \"md\" | \"lg\" | \"xl\" | \"xs\" | \"xxs\" | \"xxl\" | \"XXS\" | \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" | \"XXL\"","values":["sm","md","lg","xl","xs","xxs","xxl","XXS","XS","S","M","L","XL","XXL"],"default":"S","required":false,"description":"Title size - supports both modern (sm/md/lg) and legacy (S/M/L) formats."},{"name":"iconSize","type":"IconProps[\"size\"]","values":null,"default":"lg","required":false,"description":"Header icon size on the Icon token scale (default lg for severity dialogs)"},{"name":"isOpen","type":"boolean","values":null,"default":null,"required":true,"description":"Controls visibility."},{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Title shown in header."},{"name":"description","type":"string","values":null,"default":null,"required":false,"description":"Supporting text, wired to aria-describedby (DialogDescription parity)"},{"name":"menu","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Optional contextual menu or extra controls."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Modal content."},{"name":"footer","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Footer content, e.g. actions."},{"name":"onClose","type":"() => void","values":null,"default":null,"required":false,"description":"Close callback."},{"name":"icon","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Optional icon to display in the header."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional className for additional styling on the panel."},{"name":"showFooter","type":"boolean","values":null,"default":"true","required":false,"description":"When false, omit the footer region (e.g. composable dialog bodies)"},{"name":"panelRef","type":"React.Ref<HTMLDivElement>","values":null,"default":null,"required":false,"description":"Ref on the dialog panel for animation hooks."},{"name":"animation","type":"\"none\" | \"scale\" | \"slide\" | \"fade\"","values":["none","scale","slide","fade"],"default":"scale","required":false,"description":"Panel motion: it enters on open and leaves on close, the exit 20% shorter. Reduced motion drops it. Defaults to `scale` (from 0.95)."},{"name":"showCloseIcon","type":"boolean","values":null,"default":"false","required":false,"description":"Show close icon button in header."},{"name":"closeIconName","type":"string","values":null,"default":"x","required":false,"description":"Custom close icon name (defaults to \"x\")"},{"name":"closeButtonLabel","type":"string","values":null,"default":"Close dialog","required":false,"description":"Custom close button aria-label."}],"variants":[{"name":"severity","values":["info","success","warning","error"],"default":"info"},{"name":"titleSize","values":["sm","md","lg","xl","xs","xxs","xxl","XXS","XS","S","M","L","XL","XXL"],"default":"S"},{"name":"animation","values":["none","scale","slide","fade"],"default":"scale"}],"lookalikes":[{"name":"ConfirmPopover","when":"Do not put forms or long explanations inside; use Modal."},{"name":"Lightbox","when":"Do not use it for non-image content. It is sized and captioned for images; use `Modal` for arbitrary content."},{"name":"MacWindowFrame","when":"Do not use it as an actual window or dialog; Modal owns focus and dismissal semantics."},{"name":"Toast","when":"Do not rely on Toast for compliance acknowledgements (cookie consent, legal notices); it auto-dismisses; use AlertBanner or Modal."},{"name":"Tooltip","when":"Do not put interactive content (links, buttons) inside a tooltip; it cannot be reached by keyboard or touch; use a Modal or disclosure instead."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/modal","markdown":"https://www.digitaltableteur.com/design-system/components/modal.md","contract":"https://www.digitaltableteur.com/contracts/v1/Modal.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Modal.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/modal.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"MultiCombobox","slug":"multi-combobox","status":"stable","group":"form","description":"Multi-select combobox with inline chips, type-to-filter dropdown, label, error, and helper text.","exported":true,"import":"import { MultiCombobox } from \"@digitaltableteur/react\";","customElement":"dt-multi-combobox","props":[{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Field label; associates the input."},{"name":"options","type":"MultiComboboxOption[]","values":null,"default":null,"required":true,"description":"Selectable options."},{"name":"value","type":"string[]","values":null,"default":null,"required":true,"description":"Selected values (controlled)"},{"name":"onValueChange","type":"(value: string[]) => void","values":null,"default":null,"required":true,"description":"Called with the next selected values."},{"name":"id","type":"string","values":null,"default":null,"required":false,"description":"Explicit control id (wires the label); auto-generated when omitted."},{"name":"placeholder","type":"string","values":null,"default":null,"required":false,"description":"Shown when nothing is selected."},{"name":"helperText","type":"string","values":null,"default":null,"required":false,"description":"Assistive text below the field."},{"name":"error","type":"string","values":null,"default":null,"required":false,"description":"Error message; renders above the helper line and sets aria-invalid."},{"name":"status","type":"FieldStatus","values":null,"default":null,"required":false,"description":"Semantic state: colours the border and styles statusMessage. `error` overrides it."},{"name":"statusMessage","type":"string","values":null,"default":null,"required":false,"description":"Message under the field for `status`, above the helper line."},{"name":"actions","type":"FieldAction[]","values":null,"default":null,"required":false,"description":"Icon buttons at the end of the label row: each runs an operation or opens a menu."},{"name":"required","type":"boolean","values":null,"default":"false","required":false,"description":"Marks the field required."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disables the control."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Classes on the field wrapper."}],"variants":[],"lookalikes":[{"name":"Combobox","when":"Do not use for single-select; use `Combobox` instead."},{"name":"FilterChip","when":"Do not use FilterChip for multi-select token input; use MultiCombobox."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/multi-combobox","markdown":"https://www.digitaltableteur.com/design-system/components/multi-combobox.md","contract":"https://www.digitaltableteur.com/contracts/v1/MultiCombobox.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/MultiCombobox.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/multi-combobox.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"NavLink","slug":"nav-link","status":"stable","group":"navigation","description":"Navigation anchor primitive for site chrome such as `SiteHeader`, drawers and in-page navs. Renders an underlying `next/link`; on the exact current page it renders a non-focusable `<span aria-current='page'>` instead of a link, and a section link that is an ancestor of the current route gets `aria-current='true'`.","exported":true,"import":"import { NavLink } from \"@digitaltableteur/react\";","customElement":"dt-nav-link","props":[{"name":"href","type":"string","values":null,"default":null,"required":true,"description":"Route path for next/link."},{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"Navigation link label."},{"name":"exact","type":"boolean","values":null,"default":"false","required":false,"description":"Match href exactly for the active state instead of by prefix."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Base class names applied in every state."},{"name":"activeClassName","type":"string","values":null,"default":"text-foreground","required":false,"description":"Class names applied when the route is active."},{"name":"inactiveClassName","type":"string","values":null,"default":"text-muted-foreground hover:text-foreground","required":false,"description":"Class names applied when the route is inactive."},{"name":"onClick","type":"() => void","values":null,"default":null,"required":false,"description":"Called when the link is activated. Fires only for the navigable anchor; the current-page indicator is a non-interactive span and never calls it. Lets containers (the mobile drawer) close as soon as the visitor taps a destination instead of waiting for the route change to land."}],"variants":[],"lookalikes":[{"name":"BlogNav","when":"Do not use BlogNav as site-wide navigation; use SiteHeader or NavLink instead."},{"name":"CategoryFilter","when":"Do not use as primary navigation; `CategoryFilter` is a UI control, not a nav surface; use `NavLink` for routes."},{"name":"Link","when":"Do not use NavLink for inline body links; that is Link's job; NavLink's route tracking is navigation-chrome behavior."},{"name":"Tabs","when":"Do not use tabs for page navigation; that is NavLink in a nav landmark; tabs switch views inside one page."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/nav-link","markdown":"https://www.digitaltableteur.com/design-system/components/nav-link.md","contract":"https://www.digitaltableteur.com/contracts/v1/NavLink.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/NavLink.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/nav-link.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"NavMenuList","slug":"nav-menu-list","status":"beta","group":"navigation","description":"Navigation list for drawer and mobile menus that renders link items and marks the active one from the current route.","exported":true,"import":"import { NavMenuList } from \"@digitaltableteur/react\";","customElement":"dt-nav-menu-list","props":[{"name":"items","type":"NavMenuItem[]","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"onNavigate","type":"() => void","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"activeClassName","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"listClassName","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"itemClassName","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[],"lookalikes":[{"name":"Menu","when":"Do not reach for Menu to build primary site navigation; navigation is a list of links (NavMenuList), not an actions menu; forcing role=menu onto nav is an a11y regression."},{"name":"SiteTree","when":"Do not use as the primary site header navigation; use `NavMenuList` / `SiteHeader` instead."},{"name":"TableOfContents","when":"Do not use for global site navigation; use NavMenuList or SiteTree instead."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/nav-menu-list","markdown":"https://www.digitaltableteur.com/design-system/components/nav-menu-list.md","contract":"https://www.digitaltableteur.com/contracts/v1/NavMenuList.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/NavMenuList.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/nav-menu-list.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"NewsBulletin","slug":"news-bulletin","status":"stable","group":"marketing","description":"Homepage news bulletin strip of topical cards above the footer; when the cards overflow, the track scrolls horizontally with previous and next buttons.","exported":false,"import":null,"customElement":null,"props":[{"name":"items","type":"NewsBulletinItem[]","values":null,"default":null,"required":false,"description":"Bulletin items; defaults to NEWS_BULLETIN_ITEMS."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional wrapper class."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/news-bulletin","markdown":"https://www.digitaltableteur.com/design-system/components/news-bulletin.md","contract":"https://www.digitaltableteur.com/contracts/v1/NewsBulletin.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/NewsBulletin.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/news-bulletin.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"NextLayout","slug":"next-layout","status":"beta","group":"layout","description":"Production app shell: header, main landmark, footer, chat, consent.","exported":false,"import":null,"customElement":null,"props":[{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional class names on the layout wrapper."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"No description in the contract."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/next-layout","markdown":"https://www.digitaltableteur.com/design-system/components/next-layout.md","contract":"https://www.digitaltableteur.com/contracts/v1/NextLayout.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/NextLayout.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/next-layout.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"NextLayoutShell","slug":"next-layout-shell","status":"beta","group":"layout","description":"Production app chrome from NextLayout, wrapping page content with the header, main landmark, footer, and chat widget; mirrors app/layout.tsx.","exported":false,"import":null,"customElement":null,"props":[],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/next-layout-shell","markdown":"https://www.digitaltableteur.com/design-system/components/next-layout-shell.md","contract":"https://www.digitaltableteur.com/contracts/v1/NextLayoutShell.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/NextLayoutShell.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/next-layout-shell.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"OpenHours","slug":"open-hours","status":"beta","group":"structure","description":"Localized opening-hours listing for contact and location surfaces; composes into LocationCard.","exported":false,"import":null,"customElement":null,"props":[{"name":"compact","type":"boolean","values":null,"default":"false","required":false,"description":"No description in the contract."},{"name":"showAllDays","type":"boolean","values":null,"default":"true","required":false,"description":"No description in the contract."},{"name":"highlightToday","type":"boolean","values":null,"default":"true","required":false,"description":"No description in the contract."},{"name":"date","type":"Date","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/open-hours","markdown":"https://www.digitaltableteur.com/design-system/components/open-hours.md","contract":"https://www.digitaltableteur.com/contracts/v1/OpenHours.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/OpenHours.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/open-hours.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"PageLayout","slug":"page-layout","status":"stable","group":"layout","description":"Page-body wrapper with a max-width container, default page margins, an optional grid mode, and a spacing scale.","exported":true,"import":"import { PageLayout } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"Content to be displayed within the layout."},{"name":"maxWidth","type":"\"sm\" | \"md\" | \"lg\" | \"full\" | \"xl\"","values":["sm","md","lg","full","xl"],"default":"lg","required":false,"description":"Maximum width constraint for the content."},{"name":"grid","type":"boolean","values":null,"default":"false","required":false,"description":"Whether to use the 12-column grid system."},{"name":"columns","type":"number","values":null,"default":null,"required":false,"description":"Fixed number of equal columns when grid=true, written as an inline grid-template-columns that replaces the responsive 4/8/12 column ladder grid=true gives on its own. Ignored when grid is false."},{"name":"spacing","type":"\"compact\" | \"default\" | \"comfortable\" | \"spacious\"","values":["compact","default","comfortable","spacious"],"default":"default","required":false,"description":"Vertical spacing between sections."},{"name":"withMargins","type":"boolean","values":null,"default":"true","required":false,"description":"Apply consistent page margins."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Additional CSS class name."},{"name":"as","type":"\"article\" | \"main\" | \"div\" | \"section\"","values":["article","main","div","section"],"default":"div","required":false,"description":"Semantic HTML element to use for the container."},{"name":"role","type":"string","values":null,"default":null,"required":false,"description":"ARIA role for accessibility."},{"name":"ariaLabel","type":"string","values":null,"default":null,"required":false,"description":"ARIA label for accessibility."},{"name":"style","type":"React.CSSProperties","values":null,"default":null,"required":false,"description":"Inline style merged over the grid columns style; caller values win."}],"variants":[{"name":"maxWidth","values":["sm","md","lg","full","xl"],"default":"lg"},{"name":"spacing","values":["compact","default","comfortable","spacious"],"default":"default"},{"name":"as","values":["article","main","div","section"],"default":"div"}],"lookalikes":[],"invalidCombinations":[{"id":"pagelayout-columns-need-grid","level":"MUST NOT","condition":"When `columns` is set and `grid` is not set, then also set `grid`.","reason":"`columns` only applies when `grid` is true; `grid` defaults to false, so the column count is dropped."},{"id":"pagelayout-columns-with-grid-off","level":"MUST NOT","condition":"When `grid` is `false`, then do not set `columns`.","reason":"`columns` only applies when `grid` is true."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/page-layout","markdown":"https://www.digitaltableteur.com/design-system/components/page-layout.md","contract":"https://www.digitaltableteur.com/contracts/v1/PageLayout.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/PageLayout.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/page-layout.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Pagination","slug":"pagination","status":"stable","group":"navigation","description":"Pagination controls for paged lists (article archive, search results). Renders a `<nav>` landmark with previous/next buttons and a row of numbered page buttons (buttons, not links, so pages have no crawlable href); supports ellipsis truncation for long page ranges.","exported":true,"import":"import { Pagination } from \"@digitaltableteur/react\";","customElement":"dt-pagination","props":[{"name":"currentPage","type":"number","values":null,"default":null,"required":true,"description":"Current active page (1-indexed)"},{"name":"totalPages","type":"number","values":null,"default":null,"required":true,"description":"Total number of pages."},{"name":"onPageChange","type":"(page: number) => void","values":null,"default":null,"required":true,"description":"Callback when page changes."},{"name":"siblingCount","type":"number","values":null,"default":"1","required":false,"description":"Number of page buttons to show on each side of current page."},{"name":"label","type":"string","values":null,"default":null,"required":false,"description":"Accessible name of the navigation landmark, for pages with several navs (for example \"Questionnaire pages\"). Defaults to the localized \"Page navigation\"."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/pagination","markdown":"https://www.digitaltableteur.com/design-system/components/pagination.md","contract":"https://www.digitaltableteur.com/contracts/v1/Pagination.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Pagination.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/pagination.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"PersonCard","slug":"person-card","status":"beta","group":"structure","description":"Profile card for a person with avatar, name, role, and links, plus a skeleton loading state for rosters.","exported":false,"import":null,"customElement":"dt-person-card","props":[{"name":"imageSrc","type":"string","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"imageAlt","type":"string","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"imageSrcSet","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"imageSizes","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"name","type":"string","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"email","type":"string","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"linkedinUrl","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"linkedinLabel","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"githubUrl","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"githubLabel","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"facebookUrl","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"facebookLabel","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"twitterUrl","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"twitterLabel","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"dribbbleUrl","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"dribbbleLabel","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"mediumUrl","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"mediumLabel","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"instagramUrl","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"instagramLabel","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"substackUrl","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"substackLabel","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"imageLoading","type":"\"lazy\" | \"eager\"","values":["lazy","eager"],"default":"lazy","required":false,"description":"No description in the contract."},{"name":"imageDecoding","type":"\"auto\" | \"sync\" | \"async\"","values":["auto","sync","async"],"default":"async","required":false,"description":"No description in the contract."},{"name":"loading","type":"boolean","values":null,"default":"false","required":false,"description":"Show skeleton placeholders while content is loading."}],"variants":[{"name":"imageLoading","values":["lazy","eager"],"default":"lazy"},{"name":"imageDecoding","values":["auto","sync","async"],"default":"async"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/person-card","markdown":"https://www.digitaltableteur.com/design-system/components/person-card.md","contract":"https://www.digitaltableteur.com/contracts/v1/PersonCard.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/PersonCard.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/person-card.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"PhoneInput","slug":"phone-input","status":"stable","group":"form","description":"International phone field: country selector + formatted number input with field chrome.","exported":true,"import":"import { PhoneInput } from \"@digitaltableteur/react\";","customElement":"dt-phone-input","props":[{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Label text."},{"name":"value","type":"string","values":null,"default":null,"required":false,"description":"Phone number value (E.164 format)"},{"name":"error","type":"string","values":null,"default":null,"required":false,"description":"Error message; renders above the helper line."},{"name":"status","type":"FieldStatus","values":null,"default":null,"required":false,"description":"Semantic state: colours the border and styles statusMessage. `error` overrides it."},{"name":"statusMessage","type":"string","values":null,"default":null,"required":false,"description":"Message under the field for `status`, above the helper line."},{"name":"actions","type":"FieldAction[]","values":null,"default":null,"required":false,"description":"Icon buttons at the end of the label row: each runs an operation or opens a menu."},{"name":"helperText","type":"string","values":null,"default":null,"required":false,"description":"Helper text below the input."},{"name":"placeholder","type":"string","values":null,"default":null,"required":false,"description":"Placeholder text."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disabled state."},{"name":"required","type":"boolean","values":null,"default":"false","required":false,"description":"Shows the required marker on the label."},{"name":"id","type":"string","values":null,"default":null,"required":false,"description":"Explicit control id (wires the label); auto-generated when omitted."},{"name":"defaultCountry","type":"\"AC\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CF\" | \"CG\" | \"CH\" | \"CI\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CV\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB\" | \"GD\" | \"GE\" | \"GF\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GP\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MF\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NC\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PM\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RE\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SD\" | \"SE\" | \"SG\" | \"SH\" | \"SI\" | \"SJ\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TA\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VA\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WF\" | \"WS\" | \"XK\" | \"YE\" | \"YT\" | \"ZA\" | \"ZM\" | \"ZW\"","values":["AC","AD","AE","AF","AG","AI","AL","AM","AO","AR","AS","AT","AU","AW","AX","AZ","BA","BB","BD","BE","BF","BG","BH","BI","BJ","BL","BM","BN","BO","BQ","BR","BS","BT","BW","BY","BZ","CA","CC","CD","CF","CG","CH","CI","CK","CL","CM","CN","CO","CR","CU","CV","CW","CX","CY","CZ","DE","DJ","DK","DM","DO","DZ","EC","EE","EG","EH","ER","ES","ET","FI","FJ","FK","FM","FO","FR","GA","GB","GD","GE","GF","GG","GH","GI","GL","GM","GN","GP","GQ","GR","GT","GU","GW","GY","HK","HN","HR","HT","HU","ID","IE","IL","IM","IN","IO","IQ","IR","IS","IT","JE","JM","JO","JP","KE","KG","KH","KI","KM","KN","KP","KR","KW","KY","KZ","LA","LB","LC","LI","LK","LR","LS","LT","LU","LV","LY","MA","MC","MD","ME","MF","MG","MH","MK","ML","MM","MN","MO","MP","MQ","MR","MS","MT","MU","MV","MW","MX","MY","MZ","NA","NC","NE","NF","NG","NI","NL","NO","NP","NR","NU","NZ","OM","PA","PE","PF","PG","PH","PK","PL","PM","PR","PS","PT","PW","PY","QA","RE","RO","RS","RU","RW","SA","SB","SC","SD","SE","SG","SH","SI","SJ","SK","SL","SM","SN","SO","SR","SS","ST","SV","SX","SY","SZ","TA","TC","TD","TG","TH","TJ","TK","TL","TM","TN","TO","TR","TT","TV","TW","TZ","UA","UG","US","UY","UZ","VA","VC","VE","VG","VI","VN","VU","WF","WS","XK","YE","YT","ZA","ZM","ZW"],"default":"FI","required":false,"description":"ISO 3166-1 alpha-2 code used when the value has no country prefix."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Field size, matching TextInput; lg is the 3rem height every lg field shares."},{"name":"onChange","type":"(value: string | undefined) => void","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"},{"name":"defaultCountry","values":["AC","AD","AE","AF","AG","AI","AL","AM","AO","AR","AS","AT","AU","AW","AX","AZ","BA","BB","BD","BE","BF","BG","BH","BI","BJ","BL","BM","BN","BO","BQ","BR","BS","BT","BW","BY","BZ","CA","CC","CD","CF","CG","CH","CI","CK","CL","CM","CN","CO","CR","CU","CV","CW","CX","CY","CZ","DE","DJ","DK","DM","DO","DZ","EC","EE","EG","EH","ER","ES","ET","FI","FJ","FK","FM","FO","FR","GA","GB","GD","GE","GF","GG","GH","GI","GL","GM","GN","GP","GQ","GR","GT","GU","GW","GY","HK","HN","HR","HT","HU","ID","IE","IL","IM","IN","IO","IQ","IR","IS","IT","JE","JM","JO","JP","KE","KG","KH","KI","KM","KN","KP","KR","KW","KY","KZ","LA","LB","LC","LI","LK","LR","LS","LT","LU","LV","LY","MA","MC","MD","ME","MF","MG","MH","MK","ML","MM","MN","MO","MP","MQ","MR","MS","MT","MU","MV","MW","MX","MY","MZ","NA","NC","NE","NF","NG","NI","NL","NO","NP","NR","NU","NZ","OM","PA","PE","PF","PG","PH","PK","PL","PM","PR","PS","PT","PW","PY","QA","RE","RO","RS","RU","RW","SA","SB","SC","SD","SE","SG","SH","SI","SJ","SK","SL","SM","SN","SO","SR","SS","ST","SV","SX","SY","SZ","TA","TC","TD","TG","TH","TJ","TK","TL","TM","TN","TO","TR","TT","TV","TW","TZ","UA","UG","US","UY","UZ","VA","VC","VE","VG","VI","VN","VU","WF","WS","XK","YE","YT","ZA","ZM","ZW"],"default":"FI"}],"lookalikes":[{"name":"TextInput","when":"Do not use TextInput type=tel for international audiences; you lose country selection and normalization."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/phone-input","markdown":"https://www.digitaltableteur.com/design-system/components/phone-input.md","contract":"https://www.digitaltableteur.com/contracts/v1/PhoneInput.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/PhoneInput.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/phone-input.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"PixelLoop","slug":"pixel-loop","status":"beta","group":"display","description":"Decorative constellation loop with rounded-dot and 45-degree vector-stroke variants; the glyph pool includes the studio D and T initials.","exported":true,"import":"import { PixelLoop } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Scales the glyphs and the equal space between them."},{"name":"variant","type":"\"dots\" | \"strokes\"","values":["dots","strokes"],"default":"dots","required":false,"description":"Rounded dots or short, round-capped 45-degree strokes."},{"name":"rows","type":"PixelLoopRows","values":null,"default":"2","required":false,"description":"Number of three-cell rows in the field."},{"name":"animate","type":"boolean","values":null,"default":"true","required":false,"description":"Runs the cross-fade cycle. Disable for a deliberate static composition."},{"name":"cycle","type":"boolean","values":null,"default":"false","required":false,"description":"Renders a single glyph cell (one row, one column) that steps through the whole glyph pool one formation at a time. Ignores `rows`."},{"name":"collapsed","type":"boolean","values":null,"default":"false","required":false,"description":"One row only (`rows={1}`): shows just the first cell, and the loop is one cell wide. Turning it false grows the other cells open left to right, so a title that follows the loop slides along with it; instant when the visitor prefers reduced motion. Ignored with `cycle` and more rows."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"},{"name":"variant","values":["dots","strokes"],"default":"dots"},{"name":"rows","values":["1","2","3"],"default":"2"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/pixel-loop","markdown":"https://www.digitaltableteur.com/design-system/components/pixel-loop.md","contract":"https://www.digitaltableteur.com/contracts/v1/PixelLoop.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/PixelLoop.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/pixel-loop.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"PricingCalculator","slug":"pricing-calculator","status":"stable","group":"marketing","description":"Interactive duration × workload pricing calculator for the pricing page.","exported":false,"import":null,"customElement":null,"props":[{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional wrapper class."},{"name":"selectionFromUrl","type":"boolean","values":null,"default":"false","required":false,"description":"Start from the `?duration=6m&days=4` selection in the page URL (the same parameters the calculator's own CTA emits), so a link can arrive with a tier already chosen; `?duration=custom&months=3.5&days=2.5` opens the custom term, and `&budget=40000` adds the budget it was fitted to. Defaults to `false`. A missing or unknown duration keeps the defaults; with a valid preset duration, a days value that matches neither view falls back to the heaviest day option for that duration."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/pricing-calculator","markdown":"https://www.digitaltableteur.com/design-system/components/pricing-calculator.md","contract":"https://www.digitaltableteur.com/contracts/v1/PricingCalculator.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/PricingCalculator.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/pricing-calculator.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"PricingPageContent","slug":"pricing-page-content","status":"stable","group":"marketing","description":"Full pricing page assembly: hero, agency comparison, testimonial, PricingCalculator, deliverables, package tiers, AaaS packages, billing details, Reliable Partner row and procurement FAQ.","exported":false,"import":null,"customElement":null,"props":[{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional wrapper class."},{"name":"heroBackground","type":"ReactNode","values":null,"default":null,"required":false,"description":"Decorative layer on the hero field, under the text. Drags on it pass through the text layer."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/pricing-page-content","markdown":"https://www.digitaltableteur.com/design-system/components/pricing-page-content.md","contract":"https://www.digitaltableteur.com/contracts/v1/PricingPageContent.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/PricingPageContent.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/pricing-page-content.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ProcessBlock","slug":"process-block","status":"stable","group":"structure","description":"Case-study process section that arranges titled phase columns (a heading one level below the section title, h3 by default, and an activity list each, no Card surface) in a grid under a section title and optional description.","exported":true,"import":"import { ProcessBlock } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"phases","type":"ProcessPhase[]","values":null,"default":null,"required":true,"description":"Array of process phases to display."},{"name":"sectionTitle","type":"string","values":null,"default":null,"required":false,"description":"Section title, rendered at headingLevel (h2 by default) and used as the aria-label fallback. Defaults to the translated \"Process\" (`processBlock.title`); pass an empty string to render no title."},{"name":"headingLevel","type":"2 | 3 | 4 | 5","values":["2","3","4","5"],"default":"2","required":false,"description":"Heading level of the section title; phase titles sit one level below it."},{"name":"description","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Optional description or introduction text."},{"name":"backgroundColor","type":"\"transparent\" | \"light\" | \"white\"","values":["transparent","light","white"],"default":"light","required":false,"description":"Background color variant; defaults to light."},{"name":"maxWidth","type":"\"sm\" | \"md\" | \"lg\" | \"full\" | \"xl\"","values":["sm","md","lg","full","xl"],"default":"lg","required":false,"description":"Maximum width constraint; defaults to lg."},{"name":"spacing","type":"\"compact\" | \"default\" | \"comfortable\" | \"spacious\"","values":["compact","default","comfortable","spacious"],"default":"comfortable","required":false,"description":"Spacing variant; defaults to comfortable."},{"name":"columns","type":"2 | 3 | 4","values":["2","3","4"],"default":"4","required":false,"description":"Number of columns (2, 3 or 4); defaults to 4."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Additional CSS class."},{"name":"as","type":"\"article\" | \"div\" | \"section\"","values":["article","div","section"],"default":"section","required":false,"description":"Semantic HTML element to use; defaults to section."},{"name":"ariaLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible label for the section; falls back to sectionTitle."}],"variants":[{"name":"headingLevel","values":["2","3","4","5"],"default":"2"},{"name":"backgroundColor","values":["transparent","light","white"],"default":"light"},{"name":"maxWidth","values":["sm","md","lg","full","xl"],"default":"lg"},{"name":"spacing","values":["compact","default","comfortable","spacious"],"default":"comfortable"},{"name":"columns","values":["2","3","4"],"default":"4"},{"name":"as","values":["article","div","section"],"default":"section"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/process-block","markdown":"https://www.digitaltableteur.com/design-system/components/process-block.md","contract":"https://www.digitaltableteur.com/contracts/v1/ProcessBlock.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ProcessBlock.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/process-block.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ProcurementFaq","slug":"procurement-faq","status":"beta","group":"content","description":"Visible answers for procurement, legal and finance teams: contracting party, supplier verification, invoicing, agreements, ownership, languages, location, accessibility law and AI use.","exported":false,"import":null,"customElement":null,"props":[{"name":"headingLevel","type":"2 | 3","values":["2","3"],"default":"2","required":false,"description":"Heading level of the section title."},{"name":"id","type":"string","values":null,"default":"procurement-faq","required":false,"description":"Section id, for in-page links."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional class name on the section."}],"variants":[{"name":"headingLevel","values":["2","3"],"default":"2"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/procurement-faq","markdown":"https://www.digitaltableteur.com/design-system/components/procurement-faq.md","contract":"https://www.digitaltableteur.com/contracts/v1/ProcurementFaq.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ProcurementFaq.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/procurement-faq.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Progress","slug":"progress","status":"stable","group":"feedback","description":"Linear progress indicator with determinate and indeterminate modes.","exported":true,"import":"import { Progress } from \"@digitaltableteur/react\";","customElement":"dt-progress","props":[{"name":"value","type":"number","values":null,"default":"0","required":false,"description":"Current progress value, scaled against max and clamped to 0..max."},{"name":"max","type":"number","values":null,"default":"100","required":false,"description":"Maximum value."},{"name":"label","type":"string","values":null,"default":null,"required":false,"description":"Accessible name for the progressbar. Defaults to the translated \"Progress\" (`progress.label`)."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Track height token."},{"name":"state","type":"\"info\" | \"success\" | \"warning\" | \"error\" | \"neutral\"","values":["info","success","warning","error","neutral"],"default":"neutral","required":false,"description":"Semantic fill color."},{"name":"indeterminate","type":"boolean","values":null,"default":"false","required":false,"description":"Unknown duration: animates a sweeping bar and drops aria-valuenow."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional utility classes on the root."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"},{"name":"state","values":["info","success","warning","error","neutral"],"default":"neutral"}],"lookalikes":[{"name":"Skeleton","when":"Do not use Progress as a skeleton or layout placeholder; Skeleton owns loading layouts."},{"name":"Spinner","when":"Do not use Spinner for waits you can measure or that routinely exceed a couple of seconds; that is Progress territory."}],"invalidCombinations":[{"id":"progress-indeterminate-ignores-value","level":"SHOULD NOT","condition":"When `indeterminate` is `true`, then do not set `value`.","reason":"An indeterminate bar drops aria-valuenow and ignores `value`. Pass `value` only for determinate progress."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/progress","markdown":"https://www.digitaltableteur.com/design-system/components/progress.md","contract":"https://www.digitaltableteur.com/contracts/v1/Progress.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Progress.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/progress.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ProjectCard","slug":"project-card","status":"stable","group":"content","description":"Basic portfolio project card for the work grid: a clickable thumbnail with title, optional category eyebrow and up to three tags.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Project title."},{"name":"slug","type":"string","values":null,"default":null,"required":true,"description":"URL slug for the project detail page; the card links to `/work/{slug}`."},{"name":"thumbnail","type":"string","values":null,"default":null,"required":true,"description":"Thumbnail image URL."},{"name":"category","type":"string","values":null,"default":null,"required":false,"description":"Project category."},{"name":"tags","type":"string[]","values":null,"default":null,"required":false,"description":"Project tags."},{"name":"aspectRatio","type":"\"video\" | \"square\" | \"portrait\" | \"landscape\"","values":["video","square","portrait","landscape"],"default":"video","required":false,"description":"Image aspect ratio. Defaults to `video`."},{"name":"titlePosition","type":"\"overlay\" | \"below\"","values":["overlay","below"],"default":"overlay","required":false,"description":"Title position: over the image (`overlay`) or beneath it (`below`). Defaults to `overlay`."},{"name":"comingSoon","type":"boolean","values":null,"default":"false","required":false,"description":"Render as a non-interactive teaser with a \"coming soon\" badge over the media. Defaults to `false`."},{"name":"comingSoonLabel","type":"string","values":null,"default":"Coming soon","required":false,"description":"Visible badge label for the coming-soon overlay (pass a translated string). Defaults to the untranslated English \"Coming soon\"."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"aspectRatio","values":["video","square","portrait","landscape"],"default":"video"},{"name":"titlePosition","values":["overlay","below"],"default":"overlay"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/project-card","markdown":"https://www.digitaltableteur.com/design-system/components/project-card.md","contract":"https://www.digitaltableteur.com/contracts/v1/ProjectCard.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ProjectCard.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/project-card.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ProjectDetailLayout","slug":"project-detail-layout","status":"alpha","group":"layout","description":"Case study detail layout shell.","exported":false,"import":null,"customElement":null,"props":[{"name":"nav","type":"ReactNode","values":null,"default":null,"required":false,"description":"Navigation slot (top)"},{"name":"hero","type":"ReactNode","values":null,"default":null,"required":true,"description":"Hero section slot."},{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"Main content sections."},{"name":"cta","type":"ReactNode | null","values":null,"default":null,"required":false,"description":"Call-to-action section slot (between content and related projects). Renders WorkCTA by default. Pass null to suppress."},{"name":"relatedProjects","type":"ReactNode","values":null,"default":null,"required":false,"description":"Related projects section slot."},{"name":"showScrollProgress","type":"boolean","values":null,"default":"true","required":false,"description":"Show scroll progress indicator."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."},{"name":"donnyTarget","type":"string","values":null,"default":null,"required":false,"description":"Donny site action target id for the project article."},{"name":"lang","type":"string","values":null,"default":"en","required":false,"description":"Language of the case-study content."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/project-detail-layout","markdown":"https://www.digitaltableteur.com/design-system/components/project-detail-layout.md","contract":"https://www.digitaltableteur.com/contracts/v1/ProjectDetailLayout.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ProjectDetailLayout.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/project-detail-layout.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ProjectGallery","slug":"project-gallery","status":"stable","group":"media","description":"Responsive case-study image gallery: a labelled list grid of images (captioned ones render as figures) where each thumbnail opens a built-in lightbox unless enableLightbox is false.","exported":false,"import":null,"customElement":null,"props":[{"name":"images","type":"GalleryImage[]","values":null,"default":null,"required":true,"description":"Array of images to display."},{"name":"columns","type":"2 | 3 | 4","values":["2","3","4"],"default":"3","required":false,"description":"Number of columns."},{"name":"gap","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Gap size between images."},{"name":"aspectRatio","type":"\"mixed\" | \"video\" | \"square\"","values":["mixed","video","square"],"default":"mixed","required":false,"description":"Aspect ratio for thumbnails."},{"name":"enableLightbox","type":"boolean","values":null,"default":"true","required":false,"description":"Each thumbnail is a button that opens the shared Lightbox. When false the thumbnails render as plain images with no button."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"columns","values":["2","3","4"],"default":"3"},{"name":"gap","values":["sm","md","lg"],"default":"md"},{"name":"aspectRatio","values":["square","video","mixed"],"default":"mixed"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/project-gallery","markdown":"https://www.digitaltableteur.com/design-system/components/project-gallery.md","contract":"https://www.digitaltableteur.com/contracts/v1/ProjectGallery.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ProjectGallery.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/project-gallery.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ProjectHero","slug":"project-hero","status":"alpha","group":"content","description":"Case study hero with project title and summary.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Project title."},{"name":"description","type":"string","values":null,"default":null,"required":false,"description":"Project description/tagline."},{"name":"image","type":"ProjectHeroImage","values":null,"default":null,"required":false,"description":"Hero image."},{"name":"video","type":"ProjectHeroVideo","values":null,"default":null,"required":false,"description":"Hero video (takes precedence over image when provided)"},{"name":"category","type":"string","values":null,"default":null,"required":false,"description":"Project category."},{"name":"tags","type":"string[]","values":null,"default":null,"required":false,"description":"Project tags."},{"name":"tagHref","type":"(tag: string) => string","values":null,"default":null,"required":false,"description":"Makes each tag a link, for example to the work index filtered by it."},{"name":"moreTags","type":"string[]","values":null,"default":null,"required":false,"description":"More tags, shown after a \"+N more\" chip so the hero stays compact."},{"name":"date","type":"string","values":null,"default":null,"required":false,"description":"Project date/duration."},{"name":"liveUrl","type":"string","values":null,"default":null,"required":false,"description":"Live project URL."},{"name":"variant","type":"\"contained\" | \"full-width\" | \"split\"","values":["contained","full-width","split"],"default":"contained","required":false,"description":"Hero layout variant."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"variant","values":["full-width","contained","split"],"default":"full-width"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/project-hero","markdown":"https://www.digitaltableteur.com/design-system/components/project-hero.md","contract":"https://www.digitaltableteur.com/contracts/v1/ProjectHero.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ProjectHero.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/project-hero.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ProjectList","slug":"project-list","status":"beta","group":"content","description":"A compact project index: one row per project, the whole row a link to its case study. Narrow, a thumbnail, the title and one meta line; wide, aligned columns for project, client, discipline and period.","exported":true,"import":"import { ProjectList } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"items","type":"ProjectListItem[]","values":null,"default":null,"required":true,"description":"Projects in display order; items without href (or marked comingSoon) render as muted teaser rows."},{"name":"ariaLabel","type":"string","values":null,"default":null,"required":true,"description":"Accessible name for the list."},{"name":"comingSoonLabel","type":"string","values":null,"default":null,"required":false,"description":"Label on teaser rows; defaults to the translated \"Coming soon\"."},{"name":"contentLanguage","type":"string","values":null,"default":null,"required":false,"description":"Language of titles and clients when it differs from the page."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional className for the root element."}],"variants":[],"lookalikes":[{"name":"Table","when":"Do not use for tabular data the reader sorts or compares; that is a Table."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/project-list","markdown":"https://www.digitaltableteur.com/design-system/components/project-list.md","contract":"https://www.digitaltableteur.com/contracts/v1/ProjectList.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ProjectList.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/project-list.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ProjectMetaSection","slug":"project-meta-section","status":"alpha","group":"content","description":"Case study metadata (client, role, year).","exported":false,"import":null,"customElement":null,"props":[{"name":"services","type":"string[]","values":null,"default":null,"required":true,"description":"List of services/skills."},{"name":"duration","type":"string","values":null,"default":null,"required":false,"description":"Project duration."},{"name":"tools","type":"ToolItem[]","values":null,"default":null,"required":false,"description":"Tools used."},{"name":"team","type":"TeamMember[]","values":null,"default":null,"required":false,"description":"Team members."},{"name":"client","type":"ClientInfo","values":null,"default":null,"required":false,"description":"Client info."},{"name":"overview","type":"ReactNode","values":null,"default":null,"required":false,"description":"Overview content."},{"name":"background","type":"\"default\" | \"muted\" | \"accent\"","values":["default","muted","accent"],"default":"default","required":false,"description":"Background variant."},{"name":"maxWidth","type":"\"sm\" | \"md\" | \"lg\" | \"full\" | \"xl\"","values":["sm","md","lg","full","xl"],"default":"md","required":false,"description":"Max width constraint for the section."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."},{"name":"donnyTarget","type":"string","values":null,"default":null,"required":false,"description":"Donny site action target id for the overview column."}],"variants":[{"name":"background","values":["default","muted","accent"],"default":"default"},{"name":"maxWidth","values":["sm","md","lg","full","xl"],"default":"md"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/project-meta-section","markdown":"https://www.digitaltableteur.com/design-system/components/project-meta-section.md","contract":"https://www.digitaltableteur.com/contracts/v1/ProjectMetaSection.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ProjectMetaSection.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/project-meta-section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ProjectNav","slug":"project-nav","status":"stable","group":"navigation","description":"Previous/next navigation between case studies, with a back-to-work action, for the foot of work detail pages.","exported":false,"import":null,"customElement":null,"props":[{"name":"currentSlug","type":"string","values":null,"default":null,"required":true,"description":"Current project slug."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[],"lookalikes":[{"name":"SiteHeader","when":"Do not use for site-wide navigation (that is SiteHeader)"}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/project-nav","markdown":"https://www.digitaltableteur.com/design-system/components/project-nav.md","contract":"https://www.digitaltableteur.com/contracts/v1/ProjectNav.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ProjectNav.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/project-nav.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ProofBlock","slug":"proof-block","status":"stable","group":"structure","description":"Metrics band that presents headline numbers with labels under a required title and an optional subtitle and caption, with tight spacing and dark metric cards.","exported":false,"import":null,"customElement":null,"props":[{"name":"ariaLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible name for the proof section landmark."},{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Section heading."},{"name":"subTitle","type":"string","values":null,"default":null,"required":false,"description":"Supporting line under the title."},{"name":"caption","type":"string","values":null,"default":null,"required":false,"description":"Small print in the header, beside the title block and above the metrics grid (source, timeframe)."},{"name":"metrics","type":"ProofMetric[]","values":null,"default":null,"required":true,"description":"Proof metrics: value + label pairs."},{"name":"tight","type":"boolean","values":null,"default":"false","required":false,"description":"Tighten the gap between metric cards. The band padding is unchanged."},{"name":"dark","type":"boolean","values":null,"default":"false","required":false,"description":"Apply the dark treatment to each metric card. The section band itself is unchanged."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS classes on the section."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/proof-block","markdown":"https://www.digitaltableteur.com/design-system/components/proof-block.md","contract":"https://www.digitaltableteur.com/contracts/v1/ProofBlock.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ProofBlock.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/proof-block.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Radio","slug":"radio","status":"beta","group":"form","description":"Single radio option; compose with RadioGroup for sets.","exported":true,"import":"import { Radio } from \"@digitaltableteur/react\";","customElement":"dt-radio","props":[{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Option label."},{"name":"value","type":"string","values":null,"default":null,"required":true,"description":"Submitted value when selected."},{"name":"name","type":"string","values":null,"default":null,"required":true,"description":"Group name; must match siblings to form the exclusive set."},{"name":"checked","type":"boolean","values":null,"default":null,"required":false,"description":"Checked state (controlled); use inside RadioGroup for sets."},{"name":"defaultChecked","type":"boolean","values":null,"default":null,"required":false,"description":"Initial checked state (uncontrolled mode only)"},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disables interaction and dims the control."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\" | \"S\" | \"M\" | \"L\"","values":["sm","md","lg","S","M","L"],"default":"md","required":false,"description":"Control hit area."},{"name":"onCheckedChange","type":"(checked: boolean) => void","values":null,"default":null,"required":false,"description":"Fired with the next checked value when selection changes."},{"name":"showLabel","type":"boolean","values":null,"default":"true","required":false,"description":"Render the visible label."}],"variants":[{"name":"size","values":["sm","md","lg","S","M","L"],"default":"sm"}],"lookalikes":[{"name":"Checkbox","when":"Do not render a lone radio; a choice with one option is a Checkbox."}],"invalidCombinations":[{"id":"mutually-exclusive-checked-defaultChecked","level":"MUST NOT","condition":"`checked` and `defaultChecked` set together.","reason":"`checked` makes the component controlled and `defaultChecked` uncontrolled; pass one, not both."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/radio","markdown":"https://www.digitaltableteur.com/design-system/components/radio.md","contract":"https://www.digitaltableteur.com/contracts/v1/Radio.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Radio.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/radio.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"RadioGroup","slug":"radio-group","status":"beta","group":"form","description":"Accessible radio button group with legend and validation; with startLabel and endLabel it is a rating scale.","exported":true,"import":"import { RadioGroup } from \"@digitaltableteur/react\";","customElement":"dt-radio-group","props":[{"name":"name","type":"string","values":null,"default":null,"required":false,"description":"Native form field name shared by the set; auto-generated when omitted."},{"name":"legend","type":"string","values":null,"default":null,"required":true,"description":"Group label rendered as the fieldset legend."},{"name":"options","type":"RadioGroupOption[]","values":null,"default":null,"required":true,"description":"Radio options; per-option disabled keeps the choice visible."},{"name":"value","type":"string","values":null,"default":null,"required":false,"description":"Controlled selected value; \"\" is treated as absent (uncontrolled)"},{"name":"defaultValue","type":"string","values":null,"default":null,"required":false,"description":"Initial value when uncontrolled."},{"name":"onValueChange","type":"(value: string) => void","values":null,"default":null,"required":false,"description":"Fired with the next value when selection changes."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","values":["horizontal","vertical"],"default":"vertical","required":false,"description":"Stack direction."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\" | \"S\" | \"M\" | \"L\"","values":["sm","md","lg","S","M","L"],"default":"md","required":false,"description":"Radio control size."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disables the whole set."},{"name":"error","type":"string","values":null,"default":null,"required":false,"description":"Error message; announces via role=alert and sets aria-invalid."},{"name":"helperText","type":"string","values":null,"default":null,"required":false,"description":"Helper copy below the group; always rendered, alongside error when both are set."},{"name":"startLabel","type":"string","values":null,"default":null,"required":false,"description":"Anchor shown before the first option, for rating scales (\"Serious\" in Serious 1 to 5 Playful). Announced paired with its option, not on its own."},{"name":"endLabel","type":"string","values":null,"default":null,"required":false,"description":"Anchor shown after the last option; pairs with startLabel."},{"name":"hideLegend","type":"boolean","values":null,"default":"false","required":false,"description":"Keeps the legend as the accessible name but hides it visually."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Merged onto the fieldset."}],"variants":[{"name":"orientation","values":["vertical","horizontal"],"default":"vertical"},{"name":"size","values":["sm","md","lg","S","M","L"],"default":"sm"}],"lookalikes":[{"name":"CheckboxGroup","when":"Do not use it for exclusive choices; that is RadioGroup."},{"name":"Select","when":"Use Select for five or more exclusive options, or when space is tight; RadioGroup is better when all options should stay visible."},{"name":"SelectableCard","when":"For bare text options without supporting content, use RadioGroup or CheckboxGroup."},{"name":"SelectableCardGroup","when":"Do not use rich cards when plain RadioGroup or CheckboxGroup labels communicate the choices clearly."}],"invalidCombinations":[{"id":"mutually-exclusive-value-defaultValue","level":"MUST NOT","condition":"`value` and `defaultValue` set together.","reason":"`value` makes the component controlled and `defaultValue` uncontrolled; pass one, not both."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/radio-group","markdown":"https://www.digitaltableteur.com/design-system/components/radio-group.md","contract":"https://www.digitaltableteur.com/contracts/v1/RadioGroup.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/RadioGroup.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/radio-group.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ReadingProgress","slug":"reading-progress","status":"stable","group":"feedback","description":"Scroll-linked reading progress indicator for long content.","exported":true,"import":"import { ReadingProgress } from \"@digitaltableteur/react\";","customElement":"dt-reading-progress","props":[{"name":"targetRef","type":"RefObject<HTMLElement | null>","values":null,"default":null,"required":true,"description":"Ref to the content container to track."},{"name":"showPercentage","type":"boolean","values":null,"default":"false","required":false,"description":"Show percentage text. Defaults to `false`."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/reading-progress","markdown":"https://www.digitaltableteur.com/design-system/components/reading-progress.md","contract":"https://www.digitaltableteur.com/contracts/v1/ReadingProgress.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ReadingProgress.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/reading-progress.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"RelatedPosts","slug":"related-posts","status":"alpha","group":"navigation","description":"Related blog posts grid at article footer.","exported":false,"import":null,"customElement":null,"props":[{"name":"currentSlug","type":"string","values":null,"default":null,"required":true,"description":"Current article slug to exclude."},{"name":"maxPosts","type":"number","values":null,"default":"3","required":false,"description":"Maximum number of related posts."},{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Section title."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/related-posts","markdown":"https://www.digitaltableteur.com/design-system/components/related-posts.md","contract":"https://www.digitaltableteur.com/contracts/v1/RelatedPosts.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/RelatedPosts.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/related-posts.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"RelatedProjects","slug":"related-projects","status":"alpha","group":"navigation","description":"Related case studies grid at project footer.","exported":false,"import":null,"customElement":null,"props":[{"name":"currentSlug","type":"string","values":null,"default":null,"required":true,"description":"Current project slug (to exclude from results)"},{"name":"maxItems","type":"number","values":null,"default":"2","required":false,"description":"Maximum number of related projects to show."},{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Section title - uses i18n key \"projectRelatedTitle\" if not provided."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/related-projects","markdown":"https://www.digitaltableteur.com/design-system/components/related-projects.md","contract":"https://www.digitaltableteur.com/contracts/v1/RelatedProjects.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/RelatedProjects.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/related-projects.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ReliablePartnerBadge","slug":"reliable-partner-badge","status":"alpha","group":"marketing","description":"Vastuu Group \"Luotettava Kumppani\" trust mark, language-matched, linking to the corresponding Reliable Partner report PDF.","exported":false,"import":null,"customElement":null,"props":[{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Badge height: sm 32px (footer), md 48px, lg 64px."},{"name":"href","type":"string | null","values":null,"default":null,"required":false,"description":"Link target. Omit for the language-matched Reliable Partner report PDF; pass null to render unlinked."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional class name applied to the badge root."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/reliable-partner-badge","markdown":"https://www.digitaltableteur.com/design-system/components/reliable-partner-badge.md","contract":"https://www.digitaltableteur.com/contracts/v1/ReliablePartnerBadge.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ReliablePartnerBadge.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/reliable-partner-badge.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ResizablePanelGroup","slug":"resizable-panel-group","status":"beta","group":"layout","description":"Two-or-more-panel layout with pointer and keyboard-accessible resize separators.","exported":true,"import":"import { ResizablePanelGroup } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"panels","type":"ResizablePanel[]","values":null,"default":null,"required":true,"description":"Two or more ordered panels."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","values":["horizontal","vertical"],"default":"horizontal","required":false,"description":"Resize axis."},{"name":"keyboardStep","type":"number","values":null,"default":"5","required":false,"description":"Keyboard resize increment in percentage points."},{"name":"onSizesChange","type":"(sizes: Record<string, number>) => void","values":null,"default":null,"required":false,"description":"Receives the current percentage per panel id."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[{"name":"orientation","values":["horizontal","vertical"],"default":"horizontal"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/resizable-panel-group","markdown":"https://www.digitaltableteur.com/design-system/components/resizable-panel-group.md","contract":"https://www.digitaltableteur.com/contracts/v1/ResizablePanelGroup.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ResizablePanelGroup.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/resizable-panel-group.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Section","slug":"section","status":"stable","group":"layout","description":"Semantic section wrapper with spacing and background tokens.","exported":true,"import":"import { Section } from \"@digitaltableteur/react\";","customElement":"dt-section","props":[{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"Section content."},{"name":"spacing","type":"\"sm\" | \"md\" | \"lg\" | \"xl\" | \"none\" | \"hero\" | \"follow\"","values":["sm","md","lg","xl","none","hero","follow"],"default":"md","required":false,"description":"Block padding scale."},{"name":"background","type":"\"default\" | \"muted\" | \"accent\" | \"inverse\"","values":["default","muted","accent","inverse"],"default":"default","required":false,"description":"Surface background token."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Section class names."},{"name":"id","type":"string","values":null,"default":null,"required":false,"description":"Section id (anchor target)."},{"name":"spotlightTarget","type":"string","values":null,"default":null,"required":false,"description":"Optional stable selector target for host-app guided navigation."}],"variants":[{"name":"spacing","values":["none","sm","md","lg","xl","hero","follow"],"default":"md"},{"name":"background","values":["default","muted","accent","inverse"],"default":"default"}],"lookalikes":[{"name":"Card","when":"Do not wrap page sections or whole forms in cards, and never nest cards in cards; that is Section/Stack territory."},{"name":"Center","when":"Do not use Center as a page layout root; that is Container + Section."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/section","markdown":"https://www.digitaltableteur.com/design-system/components/section.md","contract":"https://www.digitaltableteur.com/contracts/v1/Section.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Section.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SectionTitle","slug":"section-title","status":"alpha","group":"marketing","description":"The shared section title: a pixel mark that opens at the middle of the viewport, then the heading, left-aligned at one type size per breakpoint.","exported":false,"import":null,"customElement":null,"props":[{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"The title text."},{"name":"id","type":"string","values":null,"default":null,"required":false,"description":"Id on the heading, for aria-labelledby on its section."},{"name":"level","type":"\"2\" | \"3\"","values":["2","3"],"default":"2","required":false,"description":"Heading level."},{"name":"mark","type":"boolean","values":null,"default":"true","required":false,"description":"The pixel mark before the title. Turn it off over artwork, where the dots would not read."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Classes on the row holding the mark and the title."},{"name":"titleClassName","type":"string","values":null,"default":null,"required":false,"description":"Classes on the heading itself."}],"variants":[{"name":"level","values":["2","3"],"default":"2"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/section-title","markdown":"https://www.digitaltableteur.com/design-system/components/section-title.md","contract":"https://www.digitaltableteur.com/contracts/v1/SectionTitle.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SectionTitle.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/section-title.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SecureCVDownload","slug":"secure-cv-download","status":"stable","group":"structure","description":"Gated CV download whose trigger opens a verification modal before the file is served. Renders a fragment: the trigger Button inline plus a portaled Modal, with no wrapper element.","exported":false,"import":null,"customElement":null,"props":[{"name":"buttonText","type":"string","values":null,"default":null,"required":false,"description":"Button text to trigger the modal."},{"name":"buttonVariant","type":"\"info\" | \"success\" | \"warning\" | \"error\" | \"primary\" | \"secondary\" | \"tertiary\"","values":["info","success","warning","error","primary","secondary","tertiary"],"default":"primary","required":false,"description":"Trigger style. primary, secondary and tertiary map to the Button variant; info, success, warning and error render a primary Button with that tone."},{"name":"inverse","type":"boolean","values":null,"default":"false","required":false,"description":"Make the trigger button use inverse styling (white text/border)"}],"variants":[{"name":"buttonVariant","values":["info","success","warning","error","primary","secondary","tertiary"],"default":"primary"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/secure-cv-download","markdown":"https://www.digitaltableteur.com/design-system/components/secure-cv-download.md","contract":"https://www.digitaltableteur.com/contracts/v1/SecureCVDownload.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SecureCVDownload.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/secure-cv-download.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SegmentedControl","slug":"segmented-control","status":"beta","group":"form","description":"Single-select segmented control: a compact, pill-shaped row of mutually exclusive options with one visibly selected, as a radiogroup with roving-tabindex arrow-key navigation. The selection indicator slides between options.","exported":true,"import":"import { SegmentedControl } from \"@digitaltableteur/react\";","customElement":"dt-segmented-control","props":[{"name":"items","type":"SegmentedControlItem[]","values":null,"default":null,"required":true,"description":"Segments to render, in order."},{"name":"value","type":"string","values":null,"default":null,"required":true,"description":"Currently selected value (controlled)."},{"name":"onValueChange","type":"(value: string) => void","values":null,"default":null,"required":true,"description":"Called with the new value when a segment is selected."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Size token."},{"name":"ariaLabel","type":"string","values":null,"default":null,"required":true,"description":"Accessible name for the group (required; announced by screen readers)."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS class names."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[{"name":"ButtonGroup","when":"Do not use it for actions or navigation that commits/routes; use `ButtonGroup` or links. Selecting must only change the bound value."},{"name":"Select","when":"Do not overflow it; if the options do not fit on one line, use `Select`."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/segmented-control","markdown":"https://www.digitaltableteur.com/design-system/components/segmented-control.md","contract":"https://www.digitaltableteur.com/contracts/v1/SegmentedControl.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SegmentedControl.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/segmented-control.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Select","slug":"select","status":"stable","group":"form","description":"Single-choice field that opens the DS option list (a select-only combobox), with labelled options, statuses, label-row actions and size tokens.","exported":true,"import":"import { Select } from \"@digitaltableteur/react\";","customElement":"dt-select","props":[{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Label text displayed above the select dropdown."},{"name":"options","type":"SelectOptionItem[]","values":null,"default":"[]","required":false,"description":"Option objects with value, label, and optional disabled; children override this."},{"name":"helperText","type":"string","values":null,"default":null,"required":false,"description":"Supporting text under the control; always rendered, below `error` when both are set."},{"name":"error","type":"string","values":null,"default":null,"required":false,"description":"Error message under the control; sets aria-invalid and aria-describedby."},{"name":"status","type":"FieldStatus","values":null,"default":null,"required":false,"description":"Semantic state: colours the border and styles statusMessage. `error` overrides it."},{"name":"statusMessage","type":"string","values":null,"default":null,"required":false,"description":"Message under the control for `status`, above the helper line."},{"name":"actions","type":"FieldAction[]","values":null,"default":null,"required":false,"description":"Icon buttons at the end of the label row: each runs an operation or opens a menu."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\" | \"S\" | \"M\" | \"L\"","values":["sm","md","lg","S","M","L"],"default":"md","required":false,"description":"Size variant for select."},{"name":"onValueChange","type":"(value: string) => void","values":null,"default":null,"required":false,"description":"Value change handler (recommended)"},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disables the select."},{"name":"onChange","type":"(value: string) => void","values":null,"default":null,"required":false,"description":"No description in the contract.","deprecated":"Deprecated."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"`<option>` or `SelectOption` children; an option with value \"\" becomes the placeholder."},{"name":"value","type":"string","values":null,"default":null,"required":false,"description":"Selected value (controlled); \"\" shows the placeholder."},{"name":"defaultValue","type":"string","values":null,"default":null,"required":false,"description":"Initial value when uncontrolled."},{"name":"required","type":"boolean","values":null,"default":"false","required":false,"description":"Marks the field required."},{"name":"id","type":"string","values":null,"default":null,"required":false,"description":"Explicit control id (wires the label); auto-generated when omitted."},{"name":"name","type":"string","values":null,"default":null,"required":false,"description":"Submits the value with a surrounding form, through a hidden input."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Classes on the field wrapper."}],"variants":[{"name":"size","values":["sm","md","lg","S","M","L"],"default":"md"}],"lookalikes":[{"name":"RadioGroup","when":"Use Select for five or more exclusive options, or when space is tight; RadioGroup is better when all options should stay visible."},{"name":"SegmentedControl","when":"Do not overflow it; if the options do not fit on one line, use `Select`."},{"name":"SelectOption","when":"Use the Select options array for ordinary flat data; use SelectOption children for explicit declarative composition."},{"name":"TextInput","when":"Do not use Select for a freeform value with suggestions; use TextInput."}],"invalidCombinations":[{"id":"mutually-exclusive-value-defaultValue","level":"MUST NOT","condition":"`value` and `defaultValue` set together.","reason":"`value` makes the component controlled and `defaultValue` uncontrolled; pass one, not both."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/select","markdown":"https://www.digitaltableteur.com/design-system/components/select.md","contract":"https://www.digitaltableteur.com/contracts/v1/Select.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Select.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/select.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SelectableCard","slug":"selectable-card","status":"stable","group":"form","description":"A Card that is one selectable option; grouped into single (radio) or multiple (checkbox) sets via SelectableCardGroup.","exported":true,"import":"import { SelectableCard } from \"@digitaltableteur/react\";","customElement":"dt-selectable-card","props":[{"name":"value","type":"string","values":null,"default":null,"required":true,"description":"Submitted value / selection key."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Per-card disable; the choice stays visible."},{"name":"selected","type":"boolean","values":null,"default":null,"required":false,"description":"Standalone selected state when used outside a SelectableCardGroup."},{"name":"onSelectedChange","type":"(selected: boolean) => void","values":null,"default":null,"required":false,"description":"Standalone change handler when used outside a SelectableCardGroup."}],"variants":[],"lookalikes":[{"name":"Card","when":"Do not nest buttons or links inside a selectable card; use Card for action-oriented content."},{"name":"CheckboxGroup","when":"For bare text options without supporting content, use RadioGroup or CheckboxGroup."},{"name":"RadioGroup","when":"For bare text options without supporting content, use RadioGroup or CheckboxGroup."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/selectable-card","markdown":"https://www.digitaltableteur.com/design-system/components/selectable-card.md","contract":"https://www.digitaltableteur.com/contracts/v1/SelectableCard.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SelectableCard.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/selectable-card.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SelectableCardGroup","slug":"selectable-card-group","status":"beta","group":"form","description":"Selection owner for a set of SelectableCard options, with native fieldset semantics, controlled or uncontrolled state, and single or multiple selection.","exported":true,"import":"import { SelectableCardGroup } from \"@digitaltableteur/react\";","customElement":"dt-selectable-card-group","props":[{"name":"type","type":"\"single\" | \"multiple\"","values":["single","multiple"],"default":null,"required":false,"description":"Selection model: one exclusive value or several independent values."},{"name":"legend","type":"string","values":null,"default":null,"required":true,"description":"Visible fieldset legend and accessible group name."},{"name":"name","type":"string","values":null,"default":null,"required":false,"description":"Shared native radio name; generated when omitted."},{"name":"value","type":"string | string[]","values":null,"default":null,"required":false,"description":"Controlled selection value matching the selection type."},{"name":"defaultValue","type":"string | string[]","values":null,"default":null,"required":false,"description":"Initial selection for uncontrolled use."},{"name":"onValueChange","type":"(value: string | string[]) => void","values":null,"default":null,"required":false,"description":"Receives the next selection after an option is activated."},{"name":"orientation","type":"\"vertical\" | \"horizontal\"","values":["vertical","horizontal"],"default":null,"required":false,"description":"Visual stack direction for the options."},{"name":"disabled","type":"boolean","values":null,"default":null,"required":false,"description":"Disables every option in the fieldset."},{"name":"error","type":"string","values":null,"default":null,"required":false,"description":"Validation message announced below the group."},{"name":"helperText","type":"string","values":null,"default":null,"required":false,"description":"Supporting guidance suppressed while an error is present."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional class name merged onto the fieldset."},{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"SelectableCard options owned by this group."}],"variants":[{"name":"type","values":["single","multiple"],"default":null},{"name":"orientation","values":["vertical","horizontal"],"default":null}],"lookalikes":[{"name":"CheckboxGroup","when":"Do not use rich cards when plain RadioGroup or CheckboxGroup labels communicate the choices clearly."},{"name":"RadioGroup","when":"Do not use rich cards when plain RadioGroup or CheckboxGroup labels communicate the choices clearly."}],"invalidCombinations":[{"id":"mutually-exclusive-value-defaultValue","level":"MUST NOT","condition":"`value` and `defaultValue` set together.","reason":"`value` makes the component controlled and `defaultValue` uncontrolled; pass one, not both."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/selectable-card-group","markdown":"https://www.digitaltableteur.com/design-system/components/selectable-card-group.md","contract":"https://www.digitaltableteur.com/contracts/v1/SelectableCardGroup.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SelectableCardGroup.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/selectable-card-group.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SelectOption","slug":"select-option","status":"stable","group":"form","description":"Typed option child for composing Select choices declaratively; Select reads its value, label, disabled and text children into its own listbox and never mounts the option element.","exported":true,"import":"import { SelectOption } from \"@digitaltableteur/react\";","customElement":"dt-select-option","props":[{"name":"value","type":"string","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"No description in the contract."},{"name":"children","type":"ReactNode","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[],"lookalikes":[{"name":"Select","when":"Use the Select options array for ordinary flat data; use SelectOption children for explicit declarative composition."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/select-option","markdown":"https://www.digitaltableteur.com/design-system/components/select-option.md","contract":"https://www.digitaltableteur.com/contracts/v1/SelectOption.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SelectOption.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/select-option.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SentrySummaryCard","slug":"sentry-summary-card","status":"beta","group":"structure","description":"Internal status card summarizing Sentry issue counts and trends; an ops dashboard surface, not marketing UI.","exported":false,"import":null,"customElement":null,"props":[{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/sentry-summary-card","markdown":"https://www.digitaltableteur.com/design-system/components/sentry-summary-card.md","contract":"https://www.digitaltableteur.com/contracts/v1/SentrySummaryCard.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SentrySummaryCard.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/sentry-summary-card.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ServiceCard","slug":"service-card","status":"stable","group":"marketing","description":"Service tile with icon, title, description, and optional link.","exported":false,"import":null,"customElement":null,"props":[{"name":"icon","type":"ReactNode","values":null,"default":null,"required":false,"description":"Icon element displayed at the top."},{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Card title."},{"name":"description","type":"string","values":null,"default":null,"required":true,"description":"Card description."},{"name":"href","type":"string","values":null,"default":null,"required":false,"description":"Optional link URL."},{"name":"variant","type":"\"minimal\" | \"default\" | \"bordered\" | \"elevated\"","values":["minimal","default","bordered","elevated"],"default":"default","required":false,"description":"Card style variant."},{"name":"iconPosition","type":"\"left\" | \"top\"","values":["left","top"],"default":"top","required":false,"description":"Icon position."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."},{"name":"donnyTarget","type":"string","values":null,"default":null,"required":false,"description":"Donny site action target id when this card is a spotlight anchor."}],"variants":[{"name":"variant","values":["default","elevated","minimal","bordered"],"default":"default"},{"name":"iconPosition","values":["left","top"],"default":"top"}],"lookalikes":[{"name":"ValueCard","when":"Do not use for a value or principle rather than a service offering; that is ValueCard. A service tile without href is supported."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/service-card","markdown":"https://www.digitaltableteur.com/design-system/components/service-card.md","contract":"https://www.digitaltableteur.com/contracts/v1/ServiceCard.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ServiceCard.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/service-card.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ServicesBlock","slug":"services-block","status":"stable","group":"marketing","description":"Case-study engagement overview with services, duration, and tools columns alongside overview copy.","exported":false,"import":null,"customElement":null,"props":[{"name":"services","type":"ServiceItem[]","values":null,"default":"[]","required":false,"description":"List of services provided."},{"name":"duration","type":"string","values":null,"default":null,"required":false,"description":"Project duration or timeline."},{"name":"tools","type":"ToolIcon[]","values":null,"default":"[]","required":false,"description":"Tools or technologies used: an icon plus a name for each."},{"name":"overviewTitle","type":"string","values":null,"default":null,"required":false,"description":"Overview title. Defaults to the translated \"Overview\" (`projectOverviewLabel`)."},{"name":"overview","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"Overview content (can be string or React node for rich content)"},{"name":"servicesTitle","type":"string","values":null,"default":null,"required":false,"description":"Title for the services section. Defaults to the translated \"Services\" (`projectServicesTitle`)."},{"name":"durationTitle","type":"string","values":null,"default":null,"required":false,"description":"Title for the duration section. Defaults to the translated \"Duration\" (`projectDurationLabel`)."},{"name":"toolsTitle","type":"string","values":null,"default":null,"required":false,"description":"Title for the tools section. Defaults to the translated \"Tools\" (`projectToolsLabel`)."},{"name":"maxWidth","type":"\"sm\" | \"md\" | \"lg\" | \"full\" | \"xl\"","values":["sm","md","lg","full","xl"],"default":"md","required":false,"description":"Maximum content width."},{"name":"spacing","type":"\"compact\" | \"default\" | \"comfortable\" | \"spacious\"","values":["compact","default","comfortable","spacious"],"default":"comfortable","required":false,"description":"Vertical spacing."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom CSS class for styling extensions."},{"name":"as","type":"\"article\" | \"div\" | \"section\"","values":["article","div","section"],"default":"section","required":false,"description":"Semantic HTML element to render as (default section)"},{"name":"ariaLabel","type":"string","values":null,"default":null,"required":false,"description":"ARIA label for section."}],"variants":[{"name":"maxWidth","values":["sm","md","lg","full","xl"],"default":"md"},{"name":"spacing","values":["compact","default","comfortable","spacious"],"default":"comfortable"},{"name":"as","values":["article","div","section"],"default":"section"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/services-block","markdown":"https://www.digitaltableteur.com/design-system/components/services-block.md","contract":"https://www.digitaltableteur.com/contracts/v1/ServicesBlock.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ServicesBlock.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/services-block.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ServicesGrid","slug":"services-grid","status":"beta","group":"marketing","description":"Responsive grid that composes ServiceCards for homepage and services sections; it owns layout while the cards own content.","exported":false,"import":null,"customElement":null,"props":[{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/services-grid","markdown":"https://www.digitaltableteur.com/design-system/components/services-grid.md","contract":"https://www.digitaltableteur.com/contracts/v1/ServicesGrid.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ServicesGrid.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/services-grid.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ServicesLedger","slug":"services-ledger","status":"beta","group":"marketing","description":"Services as a ruled ledger: index, offer, description and capabilities per row, with a Human / Machine switch that shows the same offers as plain text.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"description","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"services","type":"ServicesLedgerItem[]","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"machineLinks","type":"ServicesLedgerLink[]","values":null,"default":"[]","required":false,"description":"Machine-readable endpoints listed at the top of the machine view."},{"name":"labels","type":"ServicesLedgerLabels","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"id","type":"string","values":null,"default":"services","required":false,"description":"No description in the contract."},{"name":"donnyTarget","type":"string","values":null,"default":"home.services","required":false,"description":"Donny site action target id for this section."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/services-ledger","markdown":"https://www.digitaltableteur.com/design-system/components/services-ledger.md","contract":"https://www.digitaltableteur.com/contracts/v1/ServicesLedger.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ServicesLedger.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/services-ledger.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ServicesSection","slug":"services-section","status":"stable","group":"marketing","description":"Services grid with icons and copy. It was the homepage services band; ServicesLedger replaced it there.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Section title."},{"name":"description","type":"string","values":null,"default":null,"required":false,"description":"Section description/lead text."},{"name":"services","type":"ServiceItem[]","values":null,"default":null,"required":true,"description":"Array of services to display."},{"name":"columns","type":"2 | 3 | 4","values":["2","3","4"],"default":"3","required":false,"description":"Number of columns (responsive). Defaults to `3`."},{"name":"cardVariant","type":"\"minimal\" | \"default\" | \"bordered\" | \"elevated\"","values":["minimal","default","bordered","elevated"],"default":"default","required":false,"description":"Card style variant. Defaults to `default`."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."},{"name":"id","type":"string","values":null,"default":"services","required":false,"description":"Section ID for navigation. Defaults to `services`, and the heading id derives from it (`{id}-title`), so give each instance on a page its own id."},{"name":"donnyTarget","type":"string","values":null,"default":"home.services","required":false,"description":"Donny site action target id for this section. Defaults to `home.services`."}],"variants":[{"name":"columns","values":["2","3","4"],"default":"3"},{"name":"cardVariant","values":["minimal","default","bordered","elevated"],"default":"default"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/services-section","markdown":"https://www.digitaltableteur.com/design-system/components/services-section.md","contract":"https://www.digitaltableteur.com/contracts/v1/ServicesSection.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ServicesSection.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/services-section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SiteFooter","slug":"site-footer","status":"stable","group":"navigation","description":"Production site footer: address block with a mailto link, Explore and Legal link columns (Legal adds a Cookie preferences button when a CookieConsentProvider is present), social icons, a copyright line and the Reliable Partner badge. Below tablet only the Legal column of the three renders.","exported":false,"import":null,"customElement":null,"props":[{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional wrapper class."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/site-footer","markdown":"https://www.digitaltableteur.com/design-system/components/site-footer.md","contract":"https://www.digitaltableteur.com/contracts/v1/SiteFooter.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SiteFooter.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/site-footer.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SiteHeader","slug":"site-header","status":"stable","group":"navigation","description":"Production site header with logo, primary nav, language switcher, theme toggle, an optional account avatar menu, the mobile drawer and a phone-only subnav portal slot.","exported":false,"import":null,"customElement":null,"props":[{"name":"navItems","type":"NavItem[]","values":null,"default":null,"required":false,"description":"Navigation items (href, label, exact); the site default when unset."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional wrapper class."},{"name":"languageCodes","type":"readonly string[]","values":null,"default":null,"required":false,"description":"Limits the language switchers to these codes, for an area offered in fewer languages than the site (the client intake: EN and FI). All site languages when unset."},{"name":"account","type":"SiteHeaderAccount","values":null,"default":null,"required":false,"description":"The signed-in person in an account area (the client intake): an avatar with their initials that opens a menu of account actions such as signing out. Nothing renders when unset."}],"variants":[],"lookalikes":[{"name":"BlogNav","when":"Do not use BlogNav as site-wide navigation; use SiteHeader or NavLink instead."},{"name":"ProjectNav","when":"Do not use for site-wide navigation (that is SiteHeader)"},{"name":"SiteTree","when":"Do not use as the primary site header navigation; use `NavMenuList` / `SiteHeader` instead."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/site-header","markdown":"https://www.digitaltableteur.com/design-system/components/site-header.md","contract":"https://www.digitaltableteur.com/contracts/v1/SiteHeader.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SiteHeader.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/site-header.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SiteTree","slug":"site-tree","status":"stable","group":"navigation","description":"Hierarchical sitemap with collapsible folder branches and page leaves.","exported":false,"import":null,"customElement":null,"props":[{"name":"nodes","type":"SiteTreeNode[]","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"aria-label","type":"string","values":null,"default":null,"required":false,"description":"Accessible name for the navigation landmark. Defaults to the translated \"Sitemap\" (`sitemapTreeLabel`)."},{"name":"defaultExpandAll","type":"boolean","values":null,"default":"false","required":false,"description":"Expand all branch nodes by default."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[],"lookalikes":[{"name":"NavMenuList","when":"Do not use as the primary site header navigation; use `NavMenuList` / `SiteHeader` instead."},{"name":"SiteHeader","when":"Do not use as the primary site header navigation; use `NavMenuList` / `SiteHeader` instead."},{"name":"TableOfContents","when":"Do not use for global site navigation; use NavMenuList or SiteTree instead."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/site-tree","markdown":"https://www.digitaltableteur.com/design-system/components/site-tree.md","contract":"https://www.digitaltableteur.com/contracts/v1/SiteTree.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SiteTree.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/site-tree.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Skeleton","slug":"skeleton","status":"stable","group":"feedback","description":"Loading placeholder that mirrors the layout of incoming content.","exported":true,"import":"import { Skeleton } from \"@digitaltableteur/react\";","customElement":"dt-skeleton","props":[{"name":"variant","type":"\"text\" | \"circle\" | \"rect\" | \"avatar\" | \"card\"","values":["text","circle","rect","avatar","card"],"default":"text","required":false,"description":"Shape variant. Defaults to `text`."},{"name":"width","type":"number | string","values":null,"default":null,"required":false,"description":"Width (px or %)"},{"name":"height","type":"number | string","values":null,"default":null,"required":false,"description":"Height (px)"},{"name":"lines","type":"number","values":null,"default":"3","required":false,"description":"Number of lines for text variant. Defaults to `3`."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Optional className."},{"name":"label","type":"string","values":null,"default":null,"required":false,"description":"Visually hidden text that names what is loading, read inside the status region. Defaults to the translated busyIndicator.loading string (\"Loading\"). Ignored when decorative."},{"name":"decorative","type":"boolean","values":null,"default":"false","required":false,"description":"Hide this skeleton from assistive tech (aria-hidden, no status region). Use it on every skeleton but one when several sketch one view, or when the surrounding component already announces loading. Defaults to `false`."},{"name":"animate","type":"boolean","values":null,"default":"true","required":false,"description":"Animate shimmer (disabled with prefers-reduced-motion). Defaults to `true`."}],"variants":[{"name":"variant","values":["text","circle","rect","avatar","card"],"default":"text"}],"lookalikes":[{"name":"EmptyState","when":"Do not use EmptyState for errors or loading; AlertBanner owns failures and Skeleton owns loading."},{"name":"Progress","when":"Do not use Skeleton for measurable work (uploads, multi-step jobs); that is Progress territory."},{"name":"Spinner","when":"Do not scatter one spinner per element while a view loads; use a Skeleton layout or one region-level spinner."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/skeleton","markdown":"https://www.digitaltableteur.com/design-system/components/skeleton.md","contract":"https://www.digitaltableteur.com/contracts/v1/Skeleton.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Skeleton.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/skeleton.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SkipLink","slug":"skip-link","status":"stable","group":"navigation","description":"Skip-to-main link shown on keyboard focus.","exported":true,"import":"import { SkipLink } from \"@digitaltableteur/react\";","customElement":"dt-skip-link","props":[{"name":"href","type":"string","values":null,"default":"#main-content","required":false,"description":"Target fragment for the main content region. Defaults to \"#main-content\"."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Visible link text on focus. Defaults to the translated \"Skip to main content\" (`skipToMainContent`)."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional utility classes on the link."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/skip-link","markdown":"https://www.digitaltableteur.com/design-system/components/skip-link.md","contract":"https://www.digitaltableteur.com/contracts/v1/SkipLink.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SkipLink.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/skip-link.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SlideButton","slug":"slide-button","status":"stable","group":"actions","description":"Pill call-to-action whose icon disc slides across the button on hover while the label shifts and the disc rolls a full turn.","exported":true,"import":"import { SlideButton } from \"@digitaltableteur/react\";","customElement":"dt-slide-button","props":[{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Visible, i18n-resolved label. Names the destination, not the gesture."},{"name":"href","type":"string","values":null,"default":null,"required":true,"description":"Destination. Rendered as a real `<a>`, so it is focusable and keyboard-activated."},{"name":"icon","type":"string","values":null,"default":"Lightning","required":false,"description":"Phosphor icon name for the sliding disc."},{"name":"iconSide","type":"\"left\" | \"right\"","values":["left","right"],"default":"left","required":false,"description":"Side the icon rests on before it slides across on hover. \"left\" starts at the leading edge and travels to the trailing edge; \"right\" is the mirror."}],"variants":[{"name":"iconSide","values":["left","right"],"default":"left"}],"lookalikes":[{"name":"Button","when":"Do not use it for form submission or in-page actions; use Button, which renders a real button."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/slide-button","markdown":"https://www.digitaltableteur.com/design-system/components/slide-button.md","contract":"https://www.digitaltableteur.com/contracts/v1/SlideButton.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SlideButton.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/slide-button.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Snippet","slug":"snippet","status":"beta","group":"structure","description":"A copyable shell command with a prompt that stays out of the copy.","exported":true,"import":"import { Snippet } from \"@digitaltableteur/react\";","customElement":"dt-snippet","props":[{"name":"command","type":"string | readonly string[]","values":null,"default":null,"required":true,"description":"The command, or several commands shown one per line. Write the command only: the prompt is chrome and never part of the text."},{"name":"prompt","type":"boolean","values":null,"default":"true","required":false,"description":"Show the `$` prompt before each command. Copy always leaves it out."},{"name":"theme","type":"\"default\" | \"inverted\"","values":["default","inverted"],"default":"default","required":false,"description":"`inverted` renders the snippet in the dark theme on any page, for terminal emphasis. In the high-contrast themes it follows the page so contrast stays at the high-contrast level."},{"name":"copyable","type":"boolean","values":null,"default":"true","required":false,"description":"Show the copy button."},{"name":"copyLabel","type":"string","values":null,"default":"\"Copy code\" (translated)","required":false,"description":"Accessible name for the copy button."},{"name":"onCopy","type":"(text: string) => void","values":null,"default":null,"required":false,"description":"Called with the copied text (commands joined by newlines)."}],"variants":[{"name":"theme","values":["default","inverted"],"default":"default"}],"lookalikes":[{"name":"Code","when":"Do not use for a multi-line block or a command meant to be copied; use CodeBlock or Snippet."},{"name":"CodeBlock","when":"Do not put source files or output in a Snippet; use CodeBlock."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/snippet","markdown":"https://www.digitaltableteur.com/design-system/components/snippet.md","contract":"https://www.digitaltableteur.com/contracts/v1/Snippet.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Snippet.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/snippet.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SocialIconLink","slug":"social-icon-link","status":"alpha","group":"navigation","description":"Icon-only social or profile link with enforced accessible name and external-safety (target=_blank + rel) by default.","exported":false,"import":null,"customElement":null,"props":[{"name":"href","type":"string","values":null,"default":null,"required":true,"description":"Destination URL."},{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Accessible name; required, the control is icon-only."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"The icon. Rendered inside an aria-hidden wrapper so only `label` names the link."},{"name":"variant","type":"\"plain\" | \"chip\"","values":["plain","chip"],"default":"plain","required":false,"description":"Visual treatment: bare glyph (footers) or bordered circular chip (share rows)."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Hit-target size token."},{"name":"external","type":"boolean","values":null,"default":"true","required":false,"description":"Open in a new tab with rel=\"noopener noreferrer\"."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS class names."}],"variants":[{"name":"variant","values":["plain","chip"],"default":"plain"},{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[{"name":"Link","when":"Do not put text children inside; this is icon-only; use Link for labeled links."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/social-icon-link","markdown":"https://www.digitaltableteur.com/design-system/components/social-icon-link.md","contract":"https://www.digitaltableteur.com/contracts/v1/SocialIconLink.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SocialIconLink.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/social-icon-link.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SocialShare","slug":"social-share","status":"stable","group":"structure","description":"Row of social share targets: per-network share deep links plus a native-share or copy-link button, with an optional labelled article-footer variant. The opt-in instagram channel is not a share target: it links to the Digitaltableteur Instagram profile and is named \"Instagram profile\" (contactInstagramLabel).","exported":false,"import":null,"customElement":"dt-social-share","props":[{"name":"url","type":"string","values":null,"default":null,"required":true,"description":"Page URL passed to the share links and the native share sheet, and copied by the copy-link button."},{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Share text for the networks that accept one (twitter, reddit, whatsapp) and the native share sheet."},{"name":"channels","type":"SocialShareChannel[]","values":null,"default":null,"required":false,"description":"Ordered list of network share targets. Defaults to linkedin, twitter, facebook, reddit and whatsapp; instagram is opt-in because it links to the Digitaltableteur profile instead of sharing the page."},{"name":"variant","type":"\"article\" | \"inline\"","values":["article","inline"],"default":"inline","required":false,"description":"`article` adds a labelled section suited to blog post footers."},{"name":"showHeading","type":"boolean","values":null,"default":"false","required":false,"description":"Shows the heading text above the row in the inline variant; defaults to false. The article variant always shows it."},{"name":"heading","type":"string","values":null,"default":null,"required":false,"description":"Section label and visible heading text; an empty or missing value falls back to the translated shareHeading."}],"variants":[{"name":"variant","values":["inline","article"],"default":"inline"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/social-share","markdown":"https://www.digitaltableteur.com/design-system/components/social-share.md","contract":"https://www.digitaltableteur.com/contracts/v1/SocialShare.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SocialShare.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/social-share.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Spacer","slug":"spacer","status":"beta","group":"structure","description":"Empty layout element that injects a fixed gap on a single axis. Used inside flex/grid containers where adding a token-sized gap as a sibling reads cleaner than the gap utility.","exported":true,"import":"import { Spacer } from \"@digitaltableteur/react\";","customElement":"dt-spacer","props":[{"name":"size","type":"\"sm\" | \"md\" | \"lg\" | \"xl\" | \"xs\" | \"2xl\"","values":["sm","md","lg","xl","xs","2xl"],"default":"md","required":false,"description":"Tokenized gap size."},{"name":"axis","type":"\"horizontal\" | \"vertical\"","values":["horizontal","vertical"],"default":"vertical","required":false,"description":"Block (vertical) or inline (horizontal) axis."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional CSS class names."}],"variants":[{"name":"size","values":["sm","md","lg","xl","xs","2xl"],"default":"sm"},{"name":"axis","values":["horizontal","vertical"],"default":"vertical"}],"lookalikes":[{"name":"Divider","when":"Do not use dividers as spacing; if you only need distance, use gap or Spacer."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/spacer","markdown":"https://www.digitaltableteur.com/design-system/components/spacer.md","contract":"https://www.digitaltableteur.com/contracts/v1/Spacer.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Spacer.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/spacer.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Spinner","slug":"spinner","status":"stable","group":"feedback","description":"Indeterminate loading spinner for async UI.","exported":true,"import":"import { Spinner } from \"@digitaltableteur/react\";","customElement":"dt-spinner","props":[{"name":"label","type":"string","values":null,"default":null,"required":false,"description":"Accessible name and announced text (required for standalone spinners). Defaults to the translated \"Loading\" (`busyIndicator.loading`)."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Size token: sm fits inside inputs/buttons, lg reads at region level."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional utility classes on the root."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[{"name":"Center","when":"Use it for single focal content: Spinner, EmptyState, a logo lockup."},{"name":"Progress","when":"Do not use Spinner for waits you can measure or that routinely exceed a couple of seconds; that is Progress territory."},{"name":"Skeleton","when":"Do not scatter one spinner per element while a view loads; use a Skeleton layout or one region-level spinner."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/spinner","markdown":"https://www.digitaltableteur.com/design-system/components/spinner.md","contract":"https://www.digitaltableteur.com/contracts/v1/Spinner.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Spinner.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/spinner.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SplitButton","slug":"split-button","status":"beta","group":"actions","description":"Primary action button paired with a dropdown toggle for related secondary actions, with collision-aware menu placement and optional nested submenus.","exported":true,"import":"import { SplitButton } from \"@digitaltableteur/react\";","customElement":"dt-split-button","props":[{"name":"label","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"Main label rendered on the primary segment."},{"name":"onPrimaryClick","type":"React.MouseEventHandler<HTMLButtonElement>","values":null,"default":null,"required":false,"description":"Primary action invoked when clicking the main segment."},{"name":"options","type":"SplitButtonOption[]","values":null,"default":null,"required":true,"description":"List of alternative actions shown in the dropdown."},{"name":"menuAlign","type":"\"end\" | \"start\"","values":["end","start"],"default":"start","required":false,"description":"Alignment of the dropdown menu along the toggle edge."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disable both segments."},{"name":"toggleLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible label for the dropdown trigger."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional className forwarded to the outer wrapper."}],"variants":[{"name":"variant","values":["primary","secondary","tertiary"],"default":"primary"},{"name":"surface","values":["default","onDark","onBrand"],"default":"default"},{"name":"size","values":["sm","md","lg"],"default":"md"},{"name":"menuAlign","values":["end","start"],"default":"start"}],"lookalikes":[{"name":"ButtonGroup","when":"Do not put a menu trigger inside; SplitButton owns primary-action + menu."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/split-button","markdown":"https://www.digitaltableteur.com/design-system/components/split-button.md","contract":"https://www.digitaltableteur.com/contracts/v1/SplitButton.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SplitButton.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/split-button.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Stack","slug":"stack","status":"stable","group":"layout","description":"Flex stack primitive for vertical and horizontal rhythm.","exported":true,"import":"import { Stack } from \"@digitaltableteur/react\";","customElement":"dt-stack","props":[{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"Stacked children."},{"name":"direction","type":"\"horizontal\" | \"vertical\"","values":["horizontal","vertical"],"default":"vertical","required":false,"description":"Stack axis. Defaults to `vertical`."},{"name":"gap","type":"\"sm\" | \"md\" | \"lg\" | \"xl\" | \"xs\" | \"none\"","values":["sm","md","lg","xl","xs","none"],"default":"md","required":false,"description":"Gap step between items, mapped to Tailwind gap classes (xs 4px, sm 8px, md 16px, lg 24px, xl 32px). Defaults to `md`."},{"name":"align","type":"\"center\" | \"stretch\" | \"end\" | \"start\"","values":["center","stretch","end","start"],"default":"stretch","required":false,"description":"Cross-axis alignment. Defaults to `stretch`."},{"name":"justify","type":"\"center\" | \"end\" | \"start\" | \"between\" | \"around\"","values":["center","end","start","between","around"],"default":"start","required":false,"description":"Main-axis distribution. Defaults to `start`."},{"name":"wrap","type":"boolean","values":null,"default":"false","required":false,"description":"Allow wrapping on horizontal stacks. Defaults to `false`."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Stack class names."},{"name":"as","type":"\"symbol\" | \"object\" | \"image\" | \"form\" | \"slot\" | \"style\" | \"title\" | \"button\" | \"search\" | \"article\" | \"dialog\" | \"figure\" | \"img\" | \"link\" | \"main\" | \"menu\" | \"menuitem\" | \"option\" | \"switch\" | \"table\" | \"text\" | \"time\" | \"div\" | \"section\" | \"aside\" | \"li\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"canvas\" | \"caption\" | \"center\" | \"cite\" | \"code\" | \"col\" | \"colgroup\" | \"data\" | \"datalist\" | \"dd\" | \"del\" | \"details\" | \"dfn\" | \"dl\" | \"dt\" | \"em\" | \"embed\" | \"fieldset\" | \"figcaption\" | \"footer\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"head\" | \"header\" | \"hgroup\" | \"hr\" | \"html\" | \"i\" | \"iframe\" | \"input\" | \"ins\" | \"kbd\" | \"keygen\" | \"label\" | \"legend\" | \"map\" | \"mark\" | \"meta\" | \"meter\" | \"nav\" | \"noindex\" | \"noscript\" | \"ol\" | \"optgroup\" | \"output\" | \"p\" | \"param\" | \"picture\" | \"pre\" | \"progress\" | \"q\" | \"rp\" | \"rt\" | \"ruby\" | \"s\" | \"samp\" | \"script\" | \"select\" | \"small\" | \"source\" | \"span\" | \"strong\" | \"sub\" | \"summary\" | \"sup\" | \"template\" | \"tbody\" | \"td\" | \"textarea\" | \"tfoot\" | \"th\" | \"thead\" | \"tr\" | \"track\" | \"u\" | \"ul\" | \"var\" | \"video\" | \"wbr\" | \"webview\" | \"svg\" | \"animate\" | \"animateMotion\" | \"animateTransform\" | \"circle\" | \"clipPath\" | \"defs\" | \"desc\" | \"ellipse\" | \"feBlend\" | \"feColorMatrix\" | \"feComponentTransfer\" | \"feComposite\" | \"feConvolveMatrix\" | \"feDiffuseLighting\" | \"feDisplacementMap\" | \"feDistantLight\" | \"feDropShadow\" | \"feFlood\" | \"feFuncA\" | \"feFuncB\" | \"feFuncG\" | \"feFuncR\" | \"feGaussianBlur\" | \"feImage\" | \"feMerge\" | \"feMergeNode\" | \"feMorphology\" | \"feOffset\" | \"fePointLight\" | \"feSpecularLighting\" | \"feSpotLight\" | \"feTile\" | \"feTurbulence\" | \"filter\" | \"foreignObject\" | \"g\" | \"line\" | \"linearGradient\" | \"marker\" | \"mask\" | \"metadata\" | \"mpath\" | \"path\" | \"pattern\" | \"polygon\" | \"polyline\" | \"radialGradient\" | \"rect\" | \"set\" | \"stop\" | \"textPath\" | \"tspan\" | \"use\" | \"view\"","values":["symbol","object","image","form","slot","style","title","button","search","article","dialog","figure","img","link","main","menu","menuitem","option","switch","table","text","time","div","section","aside","li","a","abbr","address","area","audio","b","base","bdi","bdo","big","blockquote","body","br","canvas","caption","center","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dl","dt","em","embed","fieldset","figcaption","footer","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","input","ins","kbd","keygen","label","legend","map","mark","meta","meter","nav","noindex","noscript","ol","optgroup","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","select","small","source","span","strong","sub","summary","sup","template","tbody","td","textarea","tfoot","th","thead","tr","track","u","ul","var","video","wbr","webview","svg","animate","animateMotion","animateTransform","circle","clipPath","defs","desc","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","set","stop","textPath","tspan","use","view"],"default":"div","required":false,"description":"Polymorphic element. \"ul\" and \"ol\" get role=\"list\" (unless you pass a role) so Safari/VoiceOver keep list semantics under list-style: none. Defaults to `div`. Typed as any React ElementType, so the values list is every JSX intrinsic; only container or list elements (div, section, nav, ul, ol) make sense here."}],"variants":[{"name":"align","values":["stretch","start","center","end"],"default":"stretch"},{"name":"direction","values":["horizontal","vertical"],"default":"vertical"},{"name":"gap","values":["sm","md","lg","xl","xs","none"],"default":"md"},{"name":"justify","values":["center","end","start","between","around"],"default":"start"},{"name":"as","values":["symbol","object","image","form","slot","style","title","button","search","article","dialog","figure","img","link","main","menu","menuitem","option","switch","table","text","time","div","section","aside","li","a","abbr","address","area","audio","b","base","bdi","bdo","big","blockquote","body","br","canvas","caption","center","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dl","dt","em","embed","fieldset","figcaption","footer","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","input","ins","kbd","keygen","label","legend","map","mark","meta","meter","nav","noindex","noscript","ol","optgroup","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","select","small","source","span","strong","sub","summary","sup","template","tbody","td","textarea","tfoot","th","thead","tr","track","u","ul","var","video","wbr","webview","svg","animate","animateMotion","animateTransform","circle","clipPath","defs","desc","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","set","stop","textPath","tspan","use","view"],"default":"div"}],"lookalikes":[{"name":"Card","when":"Do not wrap page sections or whole forms in cards, and never nest cards in cards; that is Section/Stack territory."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/stack","markdown":"https://www.digitaltableteur.com/design-system/components/stack.md","contract":"https://www.digitaltableteur.com/contracts/v1/Stack.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Stack.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/stack.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"StageList","slug":"stage-list","status":"beta","group":"content","description":"Places entries by the lifecycle stage they belong to, so a reader at any stage finds what applies now. Five layouts over one data model: sheet, rail, index, checklist and cards.","exported":true,"import":"import { StageList } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"items","type":"StageListItem[]","values":null,"default":null,"required":true,"description":"Entries to place by stage; each sits under the first stage it lists."},{"name":"stages","type":"StageListStage[]","values":null,"default":null,"required":true,"description":"Lifecycle stages in order."},{"name":"phases","type":"StageListPhase[]","values":null,"default":null,"required":false,"description":"Groups consecutive stages into phases for the sheet, checklist and cards layouts."},{"name":"variant","type":"\"sheet\" | \"rail\" | \"index\" | \"checklist\" | \"cards\"","values":["sheet","rail","index","checklist","cards"],"default":"sheet","required":false,"description":"Layout of the list."},{"name":"headingLevel","type":"\"2\" | \"3\" | \"4\"","values":["2","3","4"],"default":"3","required":false,"description":"Level of the top headings the list renders."},{"name":"storageKey","type":"string","values":null,"default":null,"required":false,"description":"Checklist only: localStorage key that keeps ticks between visits."},{"name":"indexLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible name for the index layout's overview navigation."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Additional className for the root element."}],"variants":[{"name":"variant","values":["sheet","rail","index","checklist","cards"],"default":"sheet"},{"name":"headingLevel","values":["2","3","4"],"default":"3"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/stage-list","markdown":"https://www.digitaltableteur.com/design-system/components/stage-list.md","contract":"https://www.digitaltableteur.com/contracts/v1/StageList.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/StageList.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/stage-list.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"StatList","slug":"stat-list","status":"beta","group":"display","description":"Key figures as a description list: each item pairs a figure with what it counts, an optional total and a short note.","exported":true,"import":"import { StatList } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"items","type":"StatListItem[]","values":null,"default":null,"required":true,"description":"Figures in reading order."},{"name":"variant","type":"\"card\" | \"rule\"","values":["card","rule"],"default":"rule","required":false,"description":"\"rule\" sets each figure under a hairline, for figures inside running content; \"card\" puts each on a surface tile, for a standalone band."},{"name":"size","type":"\"md\" | \"lg\"","values":["md","lg"],"default":"md","required":false,"description":"Figure size: md for rows of four or more, lg for two or three."},{"name":"align","type":"\"center\" | \"start\"","values":["center","start"],"default":"start","required":false,"description":"Text alignment inside each item."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Merged onto the dl element."}],"variants":[{"name":"variant","values":["rule","card"],"default":"rule"},{"name":"size","values":["md","lg"],"default":"md"},{"name":"align","values":["start","center"],"default":"start"}],"lookalikes":[{"name":"Table","when":"Do not use it for tables of several values per row; use Table."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/stat-list","markdown":"https://www.digitaltableteur.com/design-system/components/stat-list.md","contract":"https://www.digitaltableteur.com/contracts/v1/StatList.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/StatList.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/stat-list.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"StatsSection","slug":"stats-section","status":"alpha","group":"marketing","description":"Metrics/stats grid for case study or about pages.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."},{"name":"stats","type":"StatItem[]","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"background","type":"\"primary\" | \"default\" | \"muted\" | \"accent\"","values":["primary","default","muted","accent"],"default":"muted","required":false,"description":"No description in the contract."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[{"name":"background","values":["primary","default","muted","accent"],"default":"muted"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/stats-section","markdown":"https://www.digitaltableteur.com/design-system/components/stats-section.md","contract":"https://www.digitaltableteur.com/contracts/v1/StatsSection.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/StatsSection.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/stats-section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"StatusDot","slug":"status-dot","status":"stable","group":"feedback","description":"Tiny semantic status indicator: colored dot with visible or sr-only label.","exported":true,"import":"import { StatusDot } from \"@digitaltableteur/react\";","customElement":"dt-status-dot","props":[{"name":"tone","type":"\"info\" | \"success\" | \"warning\" | \"error\" | \"neutral\"","values":["info","success","warning","error","neutral"],"default":"neutral","required":false,"description":"Semantic tone of the status."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Size token."},{"name":"pulse","type":"boolean","values":null,"default":"false","required":false,"description":"Animates a soft pulse for live/ongoing states (respects reduced motion)."},{"name":"label","type":"string","values":null,"default":null,"required":false,"description":"Accessible label when no visible children are given (e.g. \"Online\"). Without children or label the dot carries state by colour alone, so a development warning is logged unless the dot is marked aria-hidden."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Visible label text rendered next to the dot."}],"variants":[{"name":"tone","values":["neutral","success","warning","error","info"],"default":"neutral"},{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[{"name":"Badge","when":"Do not use StatusDot for counts, filters, or removable chips; Badge owns those surfaces."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/status-dot","markdown":"https://www.digitaltableteur.com/design-system/components/status-dot.md","contract":"https://www.digitaltableteur.com/contracts/v1/StatusDot.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/StatusDot.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/status-dot.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"StoryBlock","slug":"story-block","status":"stable","group":"structure","description":"Narrative section for Work case studies with a subtitle and title, rich text, and images arranged by a selectable layout.","exported":false,"import":null,"customElement":null,"props":[{"name":"subtitle","type":"string","values":null,"default":null,"required":false,"description":"Optional subtitle/category label."},{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Main title of the story section."},{"name":"content","type":"React.ReactNode[]","values":null,"default":null,"required":true,"description":"Body content as array of paragraphs or React nodes."},{"name":"images","type":"StoryImage | StoryImage[]","values":null,"default":null,"required":false,"description":"Image or images to display. Without imageLayout they render as single (one image) or grid (several); imageLayout=\"none\" hides them."},{"name":"imageLayout","type":"\"single\" | \"none\" | \"grid\"","values":["single","none","grid"],"default":null,"required":false,"description":"Image layout: \"single\" (1 col), \"grid\" (2 col when there is more than one image) or \"none\" (images hidden). When omitted, passed images render as \"single\" for one image and \"grid\" for several."},{"name":"backgroundColor","type":"\"transparent\" | \"light\" | \"white\"","values":["transparent","light","white"],"default":"transparent","required":false,"description":"Background color variant; defaults to transparent. It colours the root element and never changes which element that is."},{"name":"maxWidth","type":"\"sm\" | \"md\" | \"lg\" | \"full\" | \"xl\"","values":["sm","md","lg","full","xl"],"default":"md","required":false,"description":"Maximum width constraint; defaults to md."},{"name":"spacing","type":"\"compact\" | \"default\" | \"comfortable\" | \"spacious\"","values":["compact","default","comfortable","spacious"],"default":"comfortable","required":false,"description":"Spacing variant; defaults to comfortable."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Additional CSS class."},{"name":"as","type":"\"article\" | \"div\" | \"section\"","values":["article","div","section"],"default":"section","required":false,"description":"Root element, also when a background color is set. The inner PageLayout wrapper is always a <div>, so sections never nest. Defaults to \"section\"."},{"name":"ariaLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible label for the section or article (defaults to the title). Not applied when as=\"div\", since a generic element cannot be named."},{"name":"headingLevel","type":"2 | 3 | 4","values":["2","3","4"],"default":"2","required":false,"description":"Heading level for the section title; visual size is unchanged. Defaults to 2 (a section directly under the page h1); pass 3 or 4 when the block sits under a deeper heading."}],"variants":[{"name":"imageLayout","values":["single","none","grid"],"default":null},{"name":"backgroundColor","values":["transparent","light","white"],"default":"transparent"},{"name":"maxWidth","values":["sm","md","lg","full","xl"],"default":"md"},{"name":"spacing","values":["compact","default","comfortable","spacious"],"default":"comfortable"},{"name":"as","values":["article","div","section"],"default":"section"},{"name":"headingLevel","values":["2","3","4"],"default":"2"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/story-block","markdown":"https://www.digitaltableteur.com/design-system/components/story-block.md","contract":"https://www.digitaltableteur.com/contracts/v1/StoryBlock.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/StoryBlock.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/story-block.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"SummaryList","slug":"summary-list","status":"alpha","group":"display","description":"Questions and their answers as a description list, one row per question with an optional action: for checking answers before submitting and for showing a submitted record.","exported":false,"import":null,"customElement":null,"props":[{"name":"rows","type":"SummaryListRow[]","values":null,"default":null,"required":true,"description":"Rows in order."},{"name":"layout","type":"\"auto\" | \"stacked\"","values":["auto","stacked"],"default":"auto","required":false,"description":"\"auto\" stacks the label above the value in narrow containers and puts them side by side once the list is wide enough (about 40rem)."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Merged onto the dl element."}],"variants":[{"name":"layout","values":["auto","stacked"],"default":"auto"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/summary-list","markdown":"https://www.digitaltableteur.com/design-system/components/summary-list.md","contract":"https://www.digitaltableteur.com/contracts/v1/SummaryList.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/SummaryList.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/summary-list.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Switch","slug":"switch","status":"stable","group":"form","description":"Toggle control with label placement, loading, and helper text.","exported":true,"import":"import { Switch } from \"@digitaltableteur/react\";","customElement":"dt-switch","props":[{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disables interaction and dims the control."},{"name":"loading","type":"boolean","values":null,"default":"false","required":false,"description":"Shows a loading spinner and ignores activation; sets `aria-busy` and `aria-disabled`. The button is not disabled and stays focusable."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Control size."},{"name":"onCheckedChange","type":"(checked: boolean) => void","values":null,"default":null,"required":false,"description":"Called with the next checked value when the switch is toggled."},{"name":"label","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Visible label. Without one, pass `aria-label` or `aria-labelledby`; a switch with no name logs a development warning."},{"name":"labelPlacement","type":"\"left\" | \"right\" | \"top\"","values":["left","right","top"],"default":"right","required":false,"description":"Where the label sits relative to the control."},{"name":"helperText","type":"string","values":null,"default":null,"required":false,"description":"Supporting text rendered beneath the control; always rendered, below `error` when both are set."},{"name":"error","type":"string","values":null,"default":null,"required":false,"description":"Error message beneath the control; sets aria-invalid and aria-describedby."},{"name":"defaultChecked","type":"boolean | undefined","values":null,"default":null,"required":false,"description":"Initial checked state for uncontrolled use. Mutually exclusive with `checked`."},{"name":"checked","type":"boolean","values":null,"default":null,"required":false,"description":"Checked state for controlled use. Mutually exclusive with `defaultChecked`."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"},{"name":"labelPlacement","values":["left","right","top"],"default":"right"}],"lookalikes":[{"name":"Badge","when":"Do not use Badge as an interactive action or toggle; use Button for actions and Switch or Checkbox for state."},{"name":"Button","when":"Do not use Button for an on/off state; use Switch. For multi-select within a group, use Checkbox or CheckboxGroup."},{"name":"Checkbox","when":"Do not use a Switch inside a submitted form for consent; that is Checkbox territory."}],"invalidCombinations":[{"id":"mutually-exclusive-checked-defaultChecked","level":"MUST NOT","condition":"`checked` and `defaultChecked` set together.","reason":"`checked` and `defaultChecked` never coexist in a valid SwitchProps branch."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/switch","markdown":"https://www.digitaltableteur.com/design-system/components/switch.md","contract":"https://www.digitaltableteur.com/contracts/v1/Switch.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Switch.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/switch.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Table","slug":"table","status":"stable","group":"data-display","description":"The composable table root: a scroll wrapper around a semantic table with density, striping, and a sticky header. Compose with the sibling TableRow, TableHeaderCell, and TableCell components. The presentational layer beneath DataTable; pair with the useTable* hooks for behavior.","exported":true,"import":"import { Table } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"caption","type":"string","values":null,"default":null,"required":false,"description":"Accessible table name, rendered as a `<caption>`. Optional only when the table is named by aria-labelledby or aria-label."},{"name":"hideCaption","type":"boolean","values":null,"default":"false","required":false,"description":"Visually hide the caption while keeping the accessible name. Defaults to `false`."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Density scale. Defaults to `md`."},{"name":"striped","type":"boolean","values":null,"default":"false","required":false,"description":"Alternating row surfaces. Defaults to `false`."},{"name":"stickyHeader","type":"boolean","values":null,"default":"false","required":false,"description":"Pin the header row while the table body scrolls. Defaults to `false`."},{"name":"wrapperClassName","type":"string","values":null,"default":null,"required":false,"description":"Class applied to the scroll wrapper."},{"name":"stackOnNarrow","type":"boolean","values":null,"default":"false","required":false,"description":"Below a 40rem container width, stack each body row as a block instead of squeezing columns, with every cell prefixed by its TableCell label. Table sets role=table and the row and cell components add their own roles, so assistive technology keeps table semantics; give thead and tbody role=\"rowgroup\" yourself. Defaults to `false`."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"},{"name":"striped","values":["true","false"],"default":"false"},{"name":"stickyHeader","values":["true","false"],"default":"false"},{"name":"stackOnNarrow","values":["true","false"],"default":"false"}],"lookalikes":[{"name":"ProjectList","when":"Do not use for tabular data the reader sorts or compares; that is a Table."},{"name":"StatList","when":"Do not use it for tables of several values per row; use Table."}],"invalidCombinations":[{"id":"table-needs-name","level":"MUST NOT","condition":"When `caption` is not set, then set one of `aria-labelledby`, `aria-label`.","reason":"A table without a caption has no accessible name. Pass caption, or aria-labelledby pointing at a visible heading, e.g. <Table aria-labelledby=\"usage-heading\">."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/table","markdown":"https://www.digitaltableteur.com/design-system/components/table.md","contract":"https://www.digitaltableteur.com/contracts/v1/Table.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Table.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/table.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"TableCell","slug":"table-cell","status":"stable","group":"data-display","description":"A table data cell (<td>) for the Table family. align controls text alignment; numeric right-aligns with tabular figures so columns line up on the decimal.","exported":true,"import":"import { TableCell } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"align","type":"\"center\" | \"end\" | \"start\"","values":["center","end","start"],"default":"start","required":false,"description":"Cell content alignment. Defaults to \"start\", or \"end\" when numeric is set."},{"name":"numeric","type":"boolean","values":null,"default":"false","required":false,"description":"Right-align and tabular-figure numeric values."},{"name":"label","type":"string","values":null,"default":null,"required":false,"description":"Column name shown before the value when the parent Table stacks rows (stackOnNarrow). Hidden from assistive technology, which reads the column header instead."}],"variants":[{"name":"align","values":["start","center","end"],"default":"start"},{"name":"numeric","values":["true","false"],"default":"false"}],"lookalikes":[{"name":"TableHeaderCell","when":"Do not use it for a header; use TableHeaderCell so column/row context is announced."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/table-cell","markdown":"https://www.digitaltableteur.com/design-system/components/table-cell.md","contract":"https://www.digitaltableteur.com/contracts/v1/TableCell.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/TableCell.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/table-cell.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"TableHeaderCell","slug":"table-header-cell","status":"stable","group":"data-display","description":"A table header cell (<th>). scope=col (default) carries an optional three-state DS-Icon sort control and aria-sort; scope=row marks the identifying cell of a body row so screen readers announce the row context with every other cell.","exported":true,"import":"import { TableHeaderCell } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"align","type":"\"center\" | \"end\" | \"start\"","values":["center","end","start"],"default":"start","required":false,"description":"Cell content alignment."},{"name":"scope","type":"\"row\" | \"col\"","values":["row","col"],"default":"col","required":false,"description":"Header scope. `col` (default) labels a column; `row` makes the cell the accessible name for its row; use it on the identifying cell of each body row so screen readers announce the row context with every other cell."},{"name":"sortable","type":"boolean","values":null,"default":null,"required":false,"description":"Renders the sort button, which calls onSort on click; the consumer owns sortDirection. Column headers only: with scope=\"row\" it is silently ignored and no button renders. Without onSort the button does nothing."},{"name":"sortDirection","type":"\"none\" | \"ascending\" | \"descending\"","values":["none","ascending","descending"],"default":"none","required":false,"description":"Current sort state; drives `aria-sort` and the caret icon. Column headers only; ignored with scope=\"row\"."},{"name":"onSort","type":"() => void","values":null,"default":null,"required":false,"description":"Called when a sortable header is activated."}],"variants":[{"name":"align","values":["start","center","end"],"default":"start"},{"name":"scope","values":["col","row"],"default":"col"},{"name":"sortDirection","values":["none","ascending","descending"],"default":"none"}],"lookalikes":[{"name":"TableCell","when":"Do not use it for a header; use TableHeaderCell so column/row context is announced."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/table-header-cell","markdown":"https://www.digitaltableteur.com/design-system/components/table-header-cell.md","contract":"https://www.digitaltableteur.com/contracts/v1/TableHeaderCell.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/TableHeaderCell.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/table-header-cell.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"TableOfContents","slug":"table-of-contents","status":"alpha","group":"navigation","description":"In-article table of contents for h2/h3 sections, with mobile disclosure and active-section indication.","exported":false,"import":null,"customElement":null,"props":[{"name":"items","type":"TOCItem[]","values":null,"default":null,"required":true,"description":"Array of headings to display."},{"name":"activeId","type":"string | null","values":null,"default":null,"required":false,"description":"Currently active heading ID."},{"name":"sticky","type":"boolean","values":null,"default":"false","required":false,"description":"Make TOC sticky on scroll."},{"name":"onItemClick","type":"(id: string) => void","values":null,"default":null,"required":false,"description":"Callback when item is clicked."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[],"lookalikes":[{"name":"NavMenuList","when":"Do not use for global site navigation; use NavMenuList or SiteTree instead."},{"name":"SiteTree","when":"Do not use for global site navigation; use NavMenuList or SiteTree instead."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/table-of-contents","markdown":"https://www.digitaltableteur.com/design-system/components/table-of-contents.md","contract":"https://www.digitaltableteur.com/contracts/v1/TableOfContents.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/TableOfContents.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/table-of-contents.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"TableRow","slug":"table-row","status":"stable","group":"data-display","description":"A table row (<tr>) for the Table family. Works in <thead> and <tbody>; selected renders the selection surface. Presentational; semantics belong to the surrounding table.","exported":true,"import":"import { TableRow } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"selected","type":"boolean","values":null,"default":"false","required":false,"description":"Renders the selected surface and sets `data-selected`. Visual only."}],"variants":[{"name":"selected","values":["true","false"],"default":"false"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/table-row","markdown":"https://www.digitaltableteur.com/design-system/components/table-row.md","contract":"https://www.digitaltableteur.com/contracts/v1/TableRow.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/TableRow.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/table-row.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Tabs","slug":"tabs","status":"stable","group":"navigation","description":"Tablist navigation with keyboard support, a sliding selection indicator, and per-item icon/count.","exported":true,"import":"import { Tabs } from \"@digitaltableteur/react\";","customElement":"dt-tabs","props":[{"name":"activeTab","type":"string","values":null,"default":null,"required":false,"description":"Active tab key (controlled mode); \"\" is treated as absent."},{"name":"defaultActiveTab","type":"string","values":null,"default":null,"required":false,"description":"Initially active tab key (uncontrolled mode)."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Size. Defaults to `md`."},{"name":"tabs","type":"TabItem[]","values":null,"default":null,"required":true,"description":"Array of tab items with key, label, optional disabled/icon/count."},{"name":"onTabChange","type":"(key: string) => void","values":null,"default":null,"required":false,"description":"Called with the clicked tab's key."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Optional utility classes on the tablist."},{"name":"ariaLabel","type":"string","values":null,"default":"Navigate between tabs","required":false,"description":"Accessible label for the tablist. Defaults to the translated \"Navigate between tabs\" (also used when an empty string is passed)."},{"name":"variant","type":"\"pills\" | \"underline\" | \"default\"","values":["pills","underline","default"],"default":"default","required":false,"description":"Visual style variant. Defaults to `default`."},{"name":"idPrefix","type":"string","values":null,"default":null,"required":false,"description":"Prefix for the tab and panel ids (prefix-tab-key, prefix-tabpanel-key) so two Tabs on one page can share keys. Pass the same value to getTabPanelProps. Omit it for the unprefixed tab-key ids."}],"variants":[{"name":"variant","values":["default","pills","underline"],"default":"default"},{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[{"name":"Accordion","when":"Do not use Tabs for non-mutually-exclusive content. Two panels open at once is a job for **Accordion** (in a future `mode=\"multi\"`) or side-by-side layout."},{"name":"FilterChip","when":"Do not use FilterChip as navigation between content panels; use Tabs."},{"name":"NavLink","when":"Do not use tabs for page navigation; that is NavLink in a nav landmark; tabs switch views inside one page."}],"invalidCombinations":[{"id":"mutually-exclusive-activeTab-defaultActiveTab","level":"MUST NOT","condition":"`activeTab` and `defaultActiveTab` set together.","reason":"`activeTab` makes the component controlled and `defaultActiveTab` uncontrolled; pass one, not both."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/tabs","markdown":"https://www.digitaltableteur.com/design-system/components/tabs.md","contract":"https://www.digitaltableteur.com/contracts/v1/Tabs.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Tabs.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/tabs.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"TaskList","slug":"task-list","status":"alpha","group":"navigation","description":"Navigation rail for a long form done in parts, in any order and over several sessions: each part with its status, the open part with its steps.","exported":false,"import":null,"customElement":null,"props":[{"name":"tasks","type":"TaskListTask[]","values":null,"default":null,"required":true,"description":"Tasks in order. Each has id, label, status, an optional hint and steps, and `unnumbered` to leave a closing task such as \"Check and submit\" without a number."},{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Accessible name of the navigation landmark, for example \"Intake parts\"."},{"name":"currentTaskId","type":"string","values":null,"default":null,"required":false,"description":"The task the person is working on; its steps are listed."},{"name":"currentStepId","type":"string","values":null,"default":null,"required":false,"description":"The step on screen, marked with aria-current=\"step\"."},{"name":"onSelect","type":"(taskId: string, stepId?: string) => void","values":null,"default":null,"required":false,"description":"Called when a task or step is chosen. Every task can be opened, so past steps stay reachable (Baymard: people click step indicators to go back). Tasks with status \"cannotStart\" are not interactive."},{"name":"statusLabels","type":"Partial<Record<TaskListStatus, string>>","values":null,"default":null,"required":false,"description":"Overrides the translated status words."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Merged onto the nav element."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/task-list","markdown":"https://www.digitaltableteur.com/design-system/components/task-list.md","contract":"https://www.digitaltableteur.com/contracts/v1/TaskList.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/TaskList.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/task-list.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"TeamBlock","slug":"team-block","status":"stable","group":"structure","description":"Centred team grid of member cards: an Avatar, the name and the role, plus avatar-size, column and spacing knobs.","exported":false,"import":null,"customElement":null,"props":[{"name":"members","type":"TeamMember[]","values":null,"default":null,"required":true,"description":"Array of team members to display."},{"name":"sectionTitle","type":"string","values":null,"default":null,"required":false,"description":"Section title. Defaults to the translated \"Team\" label (projectTeamLabel); pass \"\" to omit it."},{"name":"description","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Optional description or introduction text."},{"name":"columns","type":"2 | 3 | 4 | 5 | 6","values":["2","3","4","5","6"],"default":"5","required":false,"description":"Number of columns for desktop layout (2-6)"},{"name":"backgroundColor","type":"\"transparent\" | \"light\" | \"white\"","values":["transparent","light","white"],"default":"transparent","required":false,"description":"Background color variant."},{"name":"maxWidth","type":"\"sm\" | \"md\" | \"lg\" | \"full\" | \"xl\"","values":["sm","md","lg","full","xl"],"default":"lg","required":false,"description":"Maximum width constraint."},{"name":"spacing","type":"\"compact\" | \"default\" | \"comfortable\" | \"spacious\"","values":["compact","default","comfortable","spacious"],"default":"comfortable","required":false,"description":"Spacing variant."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Additional CSS class."},{"name":"as","type":"\"article\" | \"div\" | \"section\"","values":["article","div","section"],"default":"section","required":false,"description":"Semantic HTML element to use."},{"name":"ariaLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible label for the section; falls back to sectionTitle."},{"name":"avatarSize","type":"string","values":null,"default":null,"required":false,"description":"Avatar diameter as any CSS length (default 7rem)"}],"variants":[{"name":"columns","values":["2","3","4","5","6"],"default":"5"},{"name":"backgroundColor","values":["transparent","light","white"],"default":"transparent"},{"name":"maxWidth","values":["sm","md","lg","full","xl"],"default":"lg"},{"name":"spacing","values":["compact","default","comfortable","spacious"],"default":"comfortable"},{"name":"as","values":["article","div","section"],"default":"section"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/team-block","markdown":"https://www.digitaltableteur.com/design-system/components/team-block.md","contract":"https://www.digitaltableteur.com/contracts/v1/TeamBlock.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/TeamBlock.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/team-block.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"TerminalCard","slug":"terminal-card","status":"alpha","group":"structure","description":"Card with a primary header band: title and optional meta in the terminal text style (LisaTerminal Paper), body below in a framed light-gray panel.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Card title, set in the terminal text style on the primary header band."},{"name":"meta","type":"string","values":null,"default":null,"required":false,"description":"Short detail at the end of the header band, such as a duration."},{"name":"href","type":"string","values":null,"default":null,"required":false,"description":"Destination. The title becomes a link and its hit area stretches over the whole card; the title stays the link's accessible name."},{"name":"headingLevel","type":"\"2\" | \"3\" | \"4\" | \"5\" | \"6\"","values":["2","3","4","5","6"],"default":null,"required":false,"description":"Renders the title as a heading of this level. Without it the title is plain text, for cards inside a section whose own heading names them."},{"name":"as","type":"\"div\" | \"li\" | \"article\"","values":["div","li","article"],"default":"div","required":false,"description":"Root element: li inside a list, article for a standalone item. Defaults to `div`."},{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":false,"description":"Body content under the header band."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Extra class names on the root."}],"variants":[{"name":"headingLevel","values":["2","3","4","5","6"],"default":null},{"name":"as","values":["div","li","article"],"default":"div"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/terminal-card","markdown":"https://www.digitaltableteur.com/design-system/components/terminal-card.md","contract":"https://www.digitaltableteur.com/contracts/v1/TerminalCard.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/TerminalCard.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/terminal-card.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Testimonial","slug":"testimonial","status":"beta","group":"structure","description":"Attributed quote block for social-proof sections, pairing a quote with the person and their role.","exported":false,"import":null,"customElement":"dt-testimonial","props":[{"name":"quote","type":"string","values":null,"default":null,"required":true,"description":"The testimonial quote text."},{"name":"name","type":"string","values":null,"default":null,"required":true,"description":"Name of the person giving the testimonial."},{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Title/position of the person."},{"name":"company","type":"string","values":null,"default":null,"required":true,"description":"Company name."},{"name":"linkedinUrl","type":"string","values":null,"default":null,"required":false,"description":"LinkedIn URL (optional)"},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Additional CSS classes."},{"name":"avatarUrl","type":"string","values":null,"default":null,"required":false,"description":"Avatar image URL (optional)"}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/testimonial","markdown":"https://www.digitaltableteur.com/design-system/components/testimonial.md","contract":"https://www.digitaltableteur.com/contracts/v1/Testimonial.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Testimonial.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/testimonial.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Text","slug":"text","status":"stable","group":"display","description":"Body and inline typography with size and line-height tokens.","exported":true,"import":"import { Text } from \"@digitaltableteur/react\";","customElement":"dt-text","props":[{"name":"children","type":"React.ReactNode | ReactI18NextChildren | Iterable<ReactI18NextChildren>","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"as","type":"\"div\" | \"cite\" | \"em\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | \"strong\"","values":["div","cite","em","h1","h2","h3","h4","h5","h6","p","span","strong"],"default":"p","required":false,"description":"No description in the contract."},{"name":"size","type":"\"xl\" | \"xs\" | \"s\" | \"xxs\" | \"m\" | \"l\" | \"xxl\"","values":["xl","xs","s","xxs","m","l","xxl"],"default":"m","required":false,"description":"No description in the contract."},{"name":"lineHeight","type":"\"normal\" | \"tight\" | \"snug\" | \"relaxed\" | \"loose\"","values":["normal","tight","snug","relaxed","loose"],"default":null,"required":false,"description":"No description in the contract."},{"name":"flush","type":"boolean","values":null,"default":"false","required":false,"description":"Drop the block margins. Use when the parent owns spacing: a row, a cell, a card or a flex/grid gap."}],"variants":[{"name":"size","values":["xxs","xs","s","m","l","xl","xxl"],"default":"m"},{"name":"as","values":["div","cite","em","h1","h2","h3","h4","h5","h6","p","span","strong"],"default":"p"},{"name":"lineHeight","values":["normal","tight","snug","relaxed","loose"],"default":null}],"lookalikes":[{"name":"Display","when":"Do not stack Display lines to fake a type ladder; hierarchy below the hero belongs to Title and Text."},{"name":"HelperText","when":"Do not label form fields with Text; use Label (htmlFor) and HelperText (aria-describedby)."},{"name":"Label","when":"Do not label form fields with Text; use Label (htmlFor) and HelperText (aria-describedby)."},{"name":"Title","when":"Do not use Text for section headings; headings carry outline semantics Text does not, use Title."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/text","markdown":"https://www.digitaltableteur.com/design-system/components/text.md","contract":"https://www.digitaltableteur.com/contracts/v1/Text.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Text.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/text.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"TextArea","slug":"text-area","status":"stable","group":"form","description":"Multi-line text field with label, error/helper text, and optional animated auto-grow.","exported":true,"import":"import { TextArea } from \"@digitaltableteur/react\";","customElement":"dt-text-area","props":[{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Visible field label."},{"name":"value","type":"string","values":null,"default":"","required":false,"description":"Value synced into the field; typing still works after it is set."},{"name":"error","type":"string","values":null,"default":null,"required":false,"description":"Validation error message; renders above the helper line."},{"name":"status","type":"FieldStatus","values":null,"default":null,"required":false,"description":"Semantic state: colours the border and styles statusMessage. `error` overrides it."},{"name":"statusMessage","type":"string","values":null,"default":null,"required":false,"description":"Message under the field for `status`, above the helper line."},{"name":"actions","type":"FieldAction[]","values":null,"default":null,"required":false,"description":"Icon buttons at the end of the label row: each runs an operation or opens a menu."},{"name":"helperText","type":"string","values":null,"default":null,"required":false,"description":"Helper copy below the field."},{"name":"onChange","type":"(value: string) => void","values":null,"default":null,"required":false,"description":"Change handler receiving the raw string value."},{"name":"animateResize","type":"boolean","values":null,"default":"false","required":false,"description":"Enable smooth animated auto-growing (default: false)"},{"name":"minRows","type":"number","values":null,"default":"2","required":false,"description":"Minimum number of rows when animateResize is enabled."},{"name":"maxRows","type":"number","values":null,"default":"10","required":false,"description":"Maximum number of rows when animateResize is enabled."}],"variants":[],"lookalikes":[{"name":"TextInput","when":"Do not use TextArea for single-line values just to get more width; use TextInput and layout."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/text-area","markdown":"https://www.digitaltableteur.com/design-system/components/text-area.md","contract":"https://www.digitaltableteur.com/contracts/v1/TextArea.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/TextArea.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/text-area.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"TextInput","slug":"text-input","status":"stable","group":"form","description":"Labeled text input with validation, helper text, and size tokens.","exported":true,"import":"import { TextInput } from \"@digitaltableteur/react\";","customElement":"dt-text-input","props":[{"name":"label","type":"string","values":null,"default":null,"required":true,"description":"Visible field label; also feeds the input name (lowercased, spaces to hyphens) unless a name prop is passed."},{"name":"type","type":"\"number\" | \"search\" | \"text\" | \"tel\" | \"email\" | \"date\" | \"time\" | \"password\" | \"datetime-local\" | \"month\" | \"week\"","values":["number","search","text","tel","email","date","time","password","datetime-local","month","week"],"default":null,"required":true,"description":"Native HTML input type. Telephone values format as the user types; telephone and email values validate when the field first loses focus and then live as the value changes. Date/time variants retain the browser's localized picker and ISO-compatible submitted value."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\" | \"S\" | \"M\" | \"L\"","values":["sm","md","lg","S","M","L"],"default":"md","required":false,"description":"Size variant for input. Defaults to `md`."},{"name":"onValueChange","type":"(value: string | number) => void","values":null,"default":null,"required":false,"description":"Value change handler (recommended)"},{"name":"defaultValue","type":"string | number","values":null,"default":null,"required":false,"description":"Initial value for uncontrolled component."},{"name":"value","type":"string | number","values":null,"default":null,"required":false,"description":"Controlled value; an initial \"\" is treated as absent (uncontrolled), later changes always sync in."},{"name":"error","type":"string","values":null,"default":null,"required":false,"description":"Validation error message; renders above the helper line and sets aria-invalid."},{"name":"status","type":"FieldStatus","values":null,"default":null,"required":false,"description":"Semantic state: colours the border and styles statusMessage. `error` overrides it."},{"name":"statusMessage","type":"string","values":null,"default":null,"required":false,"description":"Message under the field for `status`, above the helper line."},{"name":"actions","type":"FieldAction[]","values":null,"default":null,"required":false,"description":"Icon buttons at the end of the label row: each runs an operation or opens a menu."},{"name":"helperText","type":"string","values":null,"default":null,"required":false,"description":"Helper copy below the field."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disables the input. Declared explicitly (not just via the native attribute extension) so the agent-blocks prop extraction sees it."},{"name":"clearable","type":"boolean","values":null,"default":"false","required":false,"description":"Shows a labelled ×-button inside the field chrome while the field has a value; clearing returns focus to the input. Defaults to `false`."},{"name":"onClear","type":"() => void","values":null,"default":null,"required":false,"description":"Called after the clear button empties the field (onValueChange also fires with \"\")"},{"name":"hideLabel","type":"boolean","values":null,"default":"false","required":false,"description":"Visually hides the label (kept in the accessibility tree); use where surrounding design carries the affordance. Defaults to `false`."},{"name":"width","type":"\"full\" | \"2ch\" | \"3ch\" | \"4ch\" | \"5ch\" | \"10ch\" | \"20ch\" | \"30ch\"","values":["full","2ch","3ch","4ch","5ch","10ch","20ch","30ch"],"default":"full","required":false,"description":"Widest the field grows, in characters of the expected answer (after the GOV.UK input widths): \"10ch\" for a code, \"30ch\" for an email address. The field still shrinks with its container. Defaults to `full`."},{"name":"onChange","type":"(value: string | number) => void","values":null,"default":null,"required":false,"description":"No description in the contract.","deprecated":"Deprecated."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"},{"name":"type","values":["number","search","text","tel","email","date","time","password","datetime-local","month","week"],"default":null},{"name":"width","values":["full","2ch","3ch","4ch","5ch","10ch","20ch","30ch"],"default":"full"}],"lookalikes":[{"name":"Combobox","when":"Do not use Combobox for free text with suggestions; it only emits option values (no free-solo mode). Use TextInput plus your own suggestion list."},{"name":"PhoneInput","when":"Do not use TextInput type=tel for international audiences; you lose country selection and normalization."},{"name":"Select","when":"Do not use Select for a freeform value with suggestions; use TextInput."},{"name":"TextArea","when":"Do not build multi-line entry with TextInput; use TextArea."}],"invalidCombinations":[{"id":"mutually-exclusive-value-defaultValue","level":"MUST NOT","condition":"`value` and `defaultValue` set together.","reason":"`value` makes the component controlled and `defaultValue` uncontrolled; pass one, not both."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/text-input","markdown":"https://www.digitaltableteur.com/design-system/components/text-input.md","contract":"https://www.digitaltableteur.com/contracts/v1/TextInput.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/TextInput.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/text-input.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ThemeProvider","slug":"theme-provider","status":"beta","group":"utility","description":"Theme context for light, dark, and high-contrast modes.","exported":true,"import":"import { ThemeProvider } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"Subtree that receives the theme context."},{"name":"forcedTheme","type":"\"light\" | \"dark\" | \"hcb\" | \"hcw\"","values":["light","dark","hcb","hcw"],"default":null,"required":false,"description":"Pin the theme regardless of stored/system preference (e.g. external embeds)."}],"variants":[{"name":"forcedTheme","values":["light","dark","hcb","hcw"],"default":null}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/theme-provider","markdown":"https://www.digitaltableteur.com/design-system/components/theme-provider.md","contract":"https://www.digitaltableteur.com/contracts/v1/ThemeProvider.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ThemeProvider.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/theme-provider.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Timestamp","slug":"timestamp","status":"stable","group":"display","description":"Formats an ISO calendar date, instant, Unix timestamp, or Date into human-readable text: relative for recency, absolute for precision, or auto to switch between them. Date-only values keep their calendar date across runtime timezones, and timeZone is ignored for them.","exported":true,"import":"import { Timestamp } from \"@digitaltableteur/react\";","customElement":"dt-timestamp","props":[{"name":"value","type":"string | number | Date","values":null,"default":null,"required":true,"description":"The date/time to display: ISO 8601 calendar date or instant, Unix seconds, or Date."},{"name":"format","type":"\"auto\" | \"date\" | \"time\" | \"relative\" | \"date_time\" | \"system_date\" | \"system_date_time\" | \"system_time\"","values":["auto","date","time","relative","date_time","system_date","system_date_time","system_time"],"default":"auto","required":false,"description":"Display format."},{"name":"autoThreshold","type":"number","values":null,"default":"604800","required":false,"description":"Seconds after which `auto` switches from relative to date_time."},{"name":"size","type":"\"xs\" | \"s\" | \"xxs\" | \"m\"","values":["xs","s","xxs","m"],"default":"s","required":false,"description":"Text-ladder size."},{"name":"tone","type":"\"default\" | \"muted\"","values":["default","muted"],"default":"muted","required":false,"description":"Color role: body text or muted metadata."},{"name":"showTimezone","type":"boolean","values":null,"default":"false","required":false,"description":"Append the timezone abbreviation (date_time/time/system equivalents)."},{"name":"tooltip","type":"boolean","values":null,"default":"true","required":false,"description":"Full date for relative output: a native tooltip (title) for pointer users plus the same text, visually hidden, inside the <time> for screen readers."},{"name":"live","type":"boolean","values":null,"default":"false","required":false,"description":"Keep relative output ticking while mounted."},{"name":"now","type":"string | number | Date","values":null,"default":null,"required":false,"description":"Reference \"now\" for relative/auto output. Defaults to render time; pass a fixed value in stories/tests for deterministic output."},{"name":"locale","type":"string","values":null,"default":null,"required":false,"description":"Locale override; defaults to the active site language."},{"name":"timeZone","type":"string","values":null,"default":null,"required":false,"description":"IANA time zone for the shown date and time, for example \"Europe/Helsinki\". Defaults to the runtime's zone, which is UTC on a server render: set it when the moment must read the same everywhere (a business's local time). Ignored for a date-only (YYYY-MM-DD) value, which has no time of day and always shows its own calendar date."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Optional className passthrough."}],"variants":[{"name":"size","values":["xxs","xs","s","m"],"default":"s"},{"name":"tone","values":["default","muted"],"default":"muted"},{"name":"format","values":["auto","date","time","relative","date_time","system_date","system_date_time","system_time"],"default":"auto"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/timestamp","markdown":"https://www.digitaltableteur.com/design-system/components/timestamp.md","contract":"https://www.digitaltableteur.com/contracts/v1/Timestamp.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Timestamp.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/timestamp.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Title","slug":"title","status":"stable","group":"display","description":"Semantic heading (h1 to h6) with size and line-height variants; the heading level is independent of the visual size.","exported":true,"import":"import { Title } from \"@digitaltableteur/react\";","customElement":"dt-title","props":[{"name":"children","type":"React.ReactNode | ReactI18NextChildren | Iterable<ReactI18NextChildren>","values":null,"default":null,"required":true,"description":"Heading text."},{"name":"as","type":"\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"","values":["h1","h2","h3","h4","h5","h6"],"default":null,"required":false,"description":"Override the rendered element (h1-h6); wins over level."},{"name":"className","type":"string | undefined","values":null,"default":"","required":false,"description":"Additional CSS class names."},{"name":"unstyled","type":"boolean","values":null,"default":"false","required":false,"description":"When true, only sets the heading tag + className (no Title token typography). Use in patterns/pages that already define font/size in CSS or Tailwind."},{"name":"size","type":"\"xl\" | \"xs\" | \"s\" | \"xxs\" | \"m\" | \"l\" | \"xxl\"","values":["xl","xs","s","xxs","m","l","xxl"],"default":"l","required":false,"description":"Display size token for the heading."},{"name":"level","type":"1 | 2 | 3 | 4 | 5 | 6","values":["1","2","3","4","5","6"],"default":null,"required":false,"description":"Semantic heading level (maps to h1-h6 when as is unset)."},{"name":"lineHeight","type":"\"normal\" | \"tight\" | \"snug\" | \"relaxed\" | \"loose\"","values":["normal","tight","snug","relaxed","loose"],"default":null,"required":false,"description":"Line height variant."},{"name":"flush","type":"boolean","values":null,"default":"false","required":false,"description":"Drop the block margins. Use when the parent owns spacing: a row, a cell, a card or a flex/grid gap."}],"variants":[{"name":"size","values":["xxs","xs","s","m","l","xl","xxl"],"default":"l"},{"name":"as","values":["h1","h2","h3","h4","h5","h6"],"default":null},{"name":"level","values":["1","2","3","4","5","6"],"default":null},{"name":"lineHeight","values":["normal","tight","snug","relaxed","loose"],"default":null}],"lookalikes":[{"name":"Button","when":"Do not nest a Title inside a Button. Use the Button's text slot directly."},{"name":"Display","when":"Do not use Display for section headings; that is the Title ladder (levels decoupled from sizes)."},{"name":"Text","when":"Do not use Text for section headings; headings carry outline semantics Text does not, use Title."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/title","markdown":"https://www.digitaltableteur.com/design-system/components/title.md","contract":"https://www.digitaltableteur.com/contracts/v1/Title.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Title.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/title.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Toast","slug":"toast","status":"stable","group":"feedback","description":"Transient status message with tone, position, and auto-dismiss.","exported":true,"import":"import { Toast } from \"@digitaltableteur/react\";","customElement":"dt-toast","props":[{"name":"open","type":"boolean","values":null,"default":null,"required":false,"description":"Controls visibility."},{"name":"tone","type":"\"info\" | \"success\" | \"warning\" | \"error\" | \"neutral\"","values":["info","success","warning","error","neutral"],"default":"neutral","required":false,"description":"Semantic colour."},{"name":"position","type":"\"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"","values":["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],"default":"bottom-center","required":false,"description":"Position on screen."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Size."},{"name":"message","type":"string","values":null,"default":null,"required":true,"description":"Message text displayed in the toast."},{"name":"duration","type":"number","values":null,"default":"3000","required":false,"description":"Auto-dismiss delay in ms."},{"name":"onClose","type":"() => void","values":null,"default":null,"required":false,"description":"Called when the auto-dismiss timer fires."},{"name":"onDismiss","type":"() => void","values":null,"default":null,"required":false,"description":"Renders a dismiss button that calls this, so a toast can be closed by hand and keyboard users can reach it (focus inside a ToastStack pauses its timers). The button sits outside the live region."},{"name":"dismissLabel","type":"string","values":null,"default":null,"required":false,"description":"Accessible name of the dismiss button. Defaults to the translated \"Dismiss notification\" (`toast.dismiss`)."},{"name":"inline","type":"boolean","values":null,"default":null,"required":false,"description":"Render in normal document flow instead of fixed-positioning itself; a parent (ToastStack) owns placement. `position` is ignored when set."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"},{"name":"tone","values":["neutral","success","error","warning","info"],"default":"neutral"},{"name":"position","values":["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],"default":"bottom-center"}],"lookalikes":[{"name":"AlertBanner","when":"Do not use Toast for persistent status, compliance acknowledgements, or anything the user must read; it disappears on its own. AlertBanner owns those."},{"name":"Modal","when":"Do not rely on Toast for compliance acknowledgements (cookie consent, legal notices); it auto-dismisses; use AlertBanner or Modal."},{"name":"ToastStack","when":"Do not mount two overlapping fixed <Toast /> instances yourself; use ToastStack (or the app ToastProvider) so concurrent messages stack instead of replacing each other."}],"invalidCombinations":[{"id":"toast-inline-ignores-position","level":"SHOULD NOT","condition":"When `inline` is `true`, then do not set `position`.","reason":"An inline toast is placed by its parent (ToastStack); `position` is ignored."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/toast","markdown":"https://www.digitaltableteur.com/design-system/components/toast.md","contract":"https://www.digitaltableteur.com/contracts/v1/Toast.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Toast.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/toast.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ToastStack","slug":"toast-stack","status":"stable","group":"feedback","description":"Docked stack of transient toasts: renders Toast children inline and owns the fixed placement, newest toast nearest the docked edge, so concurrent messages stay visible instead of replacing each other.","exported":true,"import":"import { ToastStack } from \"@digitaltableteur/react\";","customElement":"dt-toast-stack","props":[{"name":"toasts","type":"ToastStackItem[]","values":null,"default":null,"required":true,"description":"Toasts to display, oldest first; new toasts are appended by the caller."},{"name":"position","type":"\"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"","values":["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],"default":"bottom-center","required":false,"description":"Screen corner/edge the stack docks to. Defaults to `bottom-center`."},{"name":"onDismiss","type":"(id: string) => void","values":null,"default":null,"required":false,"description":"Called with the toast id when its auto-dismiss timer fires or its dismiss button is pressed. Timers pause while the pointer is over the stack or focus is inside it."},{"name":"dismissible","type":"boolean","values":null,"default":"false","required":false,"description":"Gives every toast a dismiss button, so it can be closed by hand and keyboard users can reach it (focus inside the stack pauses the timers). Defaults to `false`: the toast is as wide as its message, for short confirmations that auto-dismiss."},{"name":"max","type":"number","values":null,"default":"5","required":false,"description":"Maximum toasts rendered at once. Defaults to `5`. The oldest render; newer ones wait unrendered (their timers only run while rendered), so a burst drains in arrival order."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Optional classes on the stack wrapper."}],"variants":[{"name":"position","values":["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],"default":"bottom-center"}],"lookalikes":[{"name":"AlertBanner","when":"Do not use it for persistent or compliance-critical messaging; toasts auto-dismiss (use AlertBanner)"},{"name":"Toast","when":"Do not mount two overlapping fixed <Toast /> instances yourself; use ToastStack (or the app ToastProvider) so concurrent messages stack instead of replacing each other."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/toast-stack","markdown":"https://www.digitaltableteur.com/design-system/components/toast-stack.md","contract":"https://www.digitaltableteur.com/contracts/v1/ToastStack.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ToastStack.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/toast-stack.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"Tooltip","slug":"tooltip","status":"beta","group":"overlay","description":"Radix tooltip primitive set (Provider, Trigger, Content) for icon hints.","exported":true,"import":"import { Tooltip } from \"@digitaltableteur/react\";","customElement":"dt-tooltip","props":[{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Extra class on the content bubble."},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\"","values":["left","right","top","bottom"],"default":null,"required":false,"description":"Preferred placement relative to the trigger; flips when out of room."},{"name":"sideOffset","type":"number","values":null,"default":null,"required":false,"description":"Gap in px between the trigger and the bubble."},{"name":"children","type":"ReactNode","values":null,"default":null,"required":true,"description":"Hint content; a short phrase, never interactive."},{"name":"shortcut","type":"string[]","values":null,"default":null,"required":false,"description":"Keys held together for the trigger's action, one entry per key; rendered after the label as keycaps joined by plus signs. Modifier symbols (⌘ ⇧ ⌥ ⌃ ⌫ ↵) render as icons with a translated key name for assistive technology."}],"variants":[{"name":"side","values":["left","right","top","bottom"],"default":null}],"lookalikes":[{"name":"Modal","when":"Do not put interactive content (links, buttons) inside a tooltip; it cannot be reached by keyboard or touch; use a Modal or disclosure instead."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/tooltip","markdown":"https://www.digitaltableteur.com/design-system/components/tooltip.md","contract":"https://www.digitaltableteur.com/contracts/v1/Tooltip.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/Tooltip.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/tooltip.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"TransformingActionInput","slug":"transforming-action-input","status":"beta","group":"form","description":"Marketing entry-point input that morphs between surface modes, from a prompt bar into a chat handoff; pairs with ChatWidget.","exported":false,"import":null,"customElement":null,"props":[{"name":"initialMode","type":"\"button\" | \"input\"","values":["button","input"],"default":"button","required":false,"description":"Initial surface mode before transformation."},{"name":"value","type":"string","values":null,"default":null,"required":false,"description":"Optional controlled value."},{"name":"defaultValue","type":"string","values":null,"default":"","required":false,"description":"Default value when uncontrolled."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disabled state for both button and input."},{"name":"actionLabelKey","type":"string","values":null,"default":"transformingActionInput.trigger","required":false,"description":"Translation key for the trigger label."},{"name":"inputLabelKey","type":"string","values":null,"default":"transformingActionInput.label","required":false,"description":"Translation key for the input label."},{"name":"helperTextKey","type":"string","values":null,"default":"transformingActionInput.helper","required":false,"description":"Translation key for helper text below the input."},{"name":"placeholderKey","type":"string","values":null,"default":"transformingActionInput.placeholder","required":false,"description":"Translation key for the placeholder."},{"name":"onChange","type":"(value: string) => void","values":null,"default":null,"required":false,"description":"Triggered when value changes."},{"name":"onSubmit","type":"(value: string) => void","values":null,"default":null,"required":false,"description":"Triggered on submit in input mode."},{"name":"stayInInputMode","type":"boolean","values":null,"default":"false","required":false,"description":"When true, retains the input after submit instead of returning to button mode."},{"name":"className","type":"string","values":null,"default":"","required":false,"description":"Optional className passthrough."}],"variants":[{"name":"initialMode","values":["button","input"],"default":"button"}],"lookalikes":[],"invalidCombinations":[{"id":"mutually-exclusive-value-defaultValue","level":"MUST NOT","condition":"`value` and `defaultValue` set together.","reason":"`value` makes the component controlled and `defaultValue` uncontrolled; pass one, not both."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/transforming-action-input","markdown":"https://www.digitaltableteur.com/design-system/components/transforming-action-input.md","contract":"https://www.digitaltableteur.com/contracts/v1/TransformingActionInput.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/TransformingActionInput.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/transforming-action-input.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"TreeView","slug":"tree-view","status":"beta","group":"navigation","description":"Application tree with hierarchical selection, expansion, roving focus, and arrow-key navigation.","exported":true,"import":"import { TreeView } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"nodes","type":"TreeViewNode[]","values":null,"default":null,"required":true,"description":"Hierarchical nodes."},{"name":"aria-label","type":"string","values":null,"default":null,"required":true,"description":"Accessible name for the tree."},{"name":"selectedId","type":"string | null","values":null,"default":null,"required":false,"description":"Controlled selected node identifier."},{"name":"defaultSelectedId","type":"string | null","values":null,"default":"null","required":false,"description":"Initial uncontrolled selected node identifier."},{"name":"onSelectedIdChange","type":"(id: string) => void","values":null,"default":null,"required":false,"description":"Receives selection changes."},{"name":"expandedIds","type":"string[]","values":null,"default":null,"required":false,"description":"Controlled expanded node identifiers."},{"name":"defaultExpandedIds","type":"string[]","values":null,"default":"[]","required":false,"description":"Initial uncontrolled expanded node identifiers."},{"name":"onExpandedIdsChange","type":"(ids: string[]) => void","values":null,"default":null,"required":false,"description":"Receives expansion changes."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","values":["sm","md","lg"],"default":"md","required":false,"description":"Density scale."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[{"name":"size","values":["sm","md","lg"],"default":"md"}],"lookalikes":[],"invalidCombinations":[{"id":"mutually-exclusive-selectedId-defaultSelectedId","level":"MUST NOT","condition":"`selectedId` and `defaultSelectedId` set together.","reason":"`selectedId` makes the component controlled and `defaultSelectedId` uncontrolled; pass one, not both."},{"id":"mutually-exclusive-expandedIds-defaultExpandedIds","level":"MUST NOT","condition":"`expandedIds` and `defaultExpandedIds` set together.","reason":"`expandedIds` makes the component controlled and `defaultExpandedIds` uncontrolled; pass one, not both."}],"links":{"page":"https://www.digitaltableteur.com/design-system/components/tree-view","markdown":"https://www.digitaltableteur.com/design-system/components/tree-view.md","contract":"https://www.digitaltableteur.com/contracts/v1/TreeView.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/TreeView.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/tree-view.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ValueCard","slug":"value-card","status":"stable","group":"display","description":"Card variant for values / principles grids; icon + title + short description, with the same three visual treatments as `LocationCard`.","exported":true,"import":"import { ValueCard } from \"@digitaltableteur/react\";","customElement":"dt-value-card","props":[{"name":"icon","type":"ReactNode","values":null,"default":null,"required":true,"description":"Decorative icon element. Its wrapper is aria-hidden, so the title carries the announcement."},{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Card title."},{"name":"description","type":"string","values":null,"default":null,"required":true,"description":"Card description."},{"name":"iconClassName","type":"string","values":null,"default":null,"required":false,"description":"Optional className for the icon wrapper."},{"name":"variant","type":"\"default\" | \"bordered\" | \"elevated\"","values":["default","bordered","elevated"],"default":"default","required":false,"description":"Card variant."},{"name":"href","type":"string","values":null,"default":null,"required":false,"description":"Destination. The title becomes a link whose hit area covers the whole card, with the card's hover and focus ring. Without it the card is static and has no hover, so it never looks clickable."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"variant","values":["default","elevated","bordered"],"default":"default"}],"lookalikes":[{"name":"Card","when":"Do not use for content with a primary CTA; that is `ServiceCard` or `Card`."},{"name":"ServiceCard","when":"Do not use for content with a primary CTA; that is `ServiceCard` or `Card`."}],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/value-card","markdown":"https://www.digitaltableteur.com/design-system/components/value-card.md","contract":"https://www.digitaltableteur.com/contracts/v1/ValueCard.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ValueCard.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/value-card.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"ValuesSection","slug":"values-section","status":"alpha","group":"marketing","description":"Studio values section for about page.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":true,"description":"Section title."},{"name":"subtitle","type":"string","values":null,"default":null,"required":false,"description":"Optional subtitle/intro text."},{"name":"values","type":"ValueItem[]","values":null,"default":null,"required":true,"description":"Array of values to display."},{"name":"cardVariant","type":"\"default\" | \"bordered\" | \"elevated\" | \"terminal\"","values":["default","bordered","elevated","terminal"],"default":"bordered","required":false,"description":"Card variant. `terminal` renders each value as a TerminalCard: title and `meta` in the header band, description below."},{"name":"background","type":"\"default\" | \"muted\" | \"accent\"","values":["default","muted","accent"],"default":"default","required":false,"description":"Background variant."},{"name":"columns","type":"\"two\" | \"three\"","values":["two","three"],"default":"three","required":false,"description":"Responsive grid column preset."},{"name":"backgroundImage","type":"string","values":null,"default":null,"required":false,"description":"Full-bleed image behind the section (a public URL). The heading and intro sit on plates in the primary colour with inverted text."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[{"name":"columns","values":["two","three"],"default":"three"},{"name":"cardVariant","values":["default","bordered","elevated","terminal"],"default":"bordered"},{"name":"background","values":["default","muted","accent"],"default":"default"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/values-section","markdown":"https://www.digitaltableteur.com/design-system/components/values-section.md","contract":"https://www.digitaltableteur.com/contracts/v1/ValuesSection.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/ValuesSection.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/values-section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"VirtualList","slug":"virtual-list","status":"beta","group":"data-display","description":"Fixed-height windowed list with overscan and explicit assistive-technology position metadata.","exported":true,"import":"import { VirtualList } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"items","type":"Item[]","values":null,"default":null,"required":true,"description":"Complete item collection."},{"name":"itemHeight","type":"number","values":null,"default":null,"required":true,"description":"Fixed item height in pixels."},{"name":"height","type":"number","values":null,"default":null,"required":true,"description":"Visible viewport height in pixels."},{"name":"getItemKey","type":"(item: Item, index: number) => React.Key","values":null,"default":null,"required":true,"description":"Stable item key."},{"name":"getItemProps","type":"(item: Item, index: number) => VirtualListItemContent","values":null,"default":null,"required":true,"description":"Maps an item to its VirtualListItem chrome (label via `children`, plus optional `icon`, `meta`, `trailingIcon`, `selected`, `tone`). VirtualList injects the position (`posInSet`/`setSize`) and windowing style."},{"name":"aria-label","type":"string","values":null,"default":null,"required":true,"description":"Accessible list name."},{"name":"overscan","type":"number","values":null,"default":"3","required":false,"description":"Extra rows rendered before and after the viewport."},{"name":"initialScrollOffset","type":"number","values":null,"default":"0","required":false,"description":"Initial scroll offset in pixels."},{"name":"onRangeChange","type":"(range: VirtualListRange) => void","values":null,"default":null,"required":false,"description":"Receives the rendered index range."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/virtual-list","markdown":"https://www.digitaltableteur.com/design-system/components/virtual-list.md","contract":"https://www.digitaltableteur.com/contracts/v1/VirtualList.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/VirtualList.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/virtual-list.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"VirtualListItem","slug":"virtual-list-item","status":"beta","group":"data-display","description":"A single windowed list row: owns the role=listitem semantics with aria-posinset/aria-setsize position metadata, and composes ListItem for its chrome (leading icon, truncating label, end meta, trailing icon, selected check, destructive tone). Rendered by VirtualList.","exported":true,"import":"import { VirtualListItem } from \"@digitaltableteur/react\";","customElement":null,"props":[{"name":"posInSet","type":"number","values":null,"default":null,"required":true,"description":"1-based position within the full collection (`aria-posinset`)."},{"name":"setSize","type":"number","values":null,"default":null,"required":true,"description":"Total item count in the full collection (`aria-setsize`)."},{"name":"style","type":"React.CSSProperties","values":null,"default":null,"required":false,"description":"Positioning style supplied by VirtualList (transform + block-size)."}],"variants":[{"name":"tone","values":["neutral","destructive"],"default":"neutral"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/virtual-list-item","markdown":"https://www.digitaltableteur.com/design-system/components/virtual-list-item.md","contract":"https://www.digitaltableteur.com/contracts/v1/VirtualListItem.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/VirtualListItem.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/virtual-list-item.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"VisuallyHidden","slug":"visually-hidden","status":"stable","group":"utility","description":"Screen-reader-only content that is always visually hidden; it has no focus reveal. Renders a span by default.","exported":true,"import":"import { VisuallyHidden } from \"@digitaltableteur/react\";","customElement":"dt-visually-hidden","props":[{"name":"children","type":"React.ReactNode","values":null,"default":null,"required":true,"description":"No description in the contract."},{"name":"as","type":"\"div\" | \"h2\" | \"p\" | \"span\"","values":["div","h2","p","span"],"default":"span","required":false,"description":"Element to render (default span)"},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"No description in the contract."}],"variants":[{"name":"as","values":["div","h2","p","span"],"default":"span"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/visually-hidden","markdown":"https://www.digitaltableteur.com/design-system/components/visually-hidden.md","contract":"https://www.digitaltableteur.com/contracts/v1/VisuallyHidden.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/VisuallyHidden.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/visually-hidden.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"WipBadge","slug":"wip-badge","status":"beta","group":"feedback","description":"Storybook-only maturity badge for non-stable components.","exported":false,"import":null,"customElement":null,"props":[{"name":"status","type":"\"alpha\" | \"beta\" | \"stable\" | \"deprecated\"","values":["alpha","beta","stable","deprecated"],"default":"alpha","required":false,"description":"No description in the contract."},{"name":"variant","type":"\"canvas\" | \"docs\"","values":["canvas","docs"],"default":"canvas","required":false,"description":"No description in the contract."}],"variants":[{"name":"variant","values":["canvas","docs"],"default":"canvas"},{"name":"status","values":["alpha","beta","stable","deprecated"],"default":"alpha"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/wip-badge","markdown":"https://www.digitaltableteur.com/design-system/components/wip-badge.md","contract":"https://www.digitaltableteur.com/contracts/v1/WipBadge.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/WipBadge.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/wip-badge.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"WorkCTA","slug":"work-cta","status":"alpha","group":"marketing","description":"Work page closing CTA band.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Override the default title."},{"name":"description","type":"string","values":null,"default":null,"required":false,"description":"Override the default description."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/work-cta","markdown":"https://www.digitaltableteur.com/design-system/components/work-cta.md","contract":"https://www.digitaltableteur.com/contracts/v1/WorkCTA.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/WorkCTA.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/work-cta.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"WorkHero","slug":"work-hero","status":"alpha","group":"marketing","description":"Work index hero with portfolio positioning copy.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Hero title - uses i18n key \"workTitle\" if not provided."},{"name":"description","type":"string","values":null,"default":null,"required":false,"description":"Hero description - uses i18n key \"workDescription\" if not provided."},{"name":"id","type":"string","values":null,"default":"work-hero","required":false,"description":"Section ID for anchor navigation."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/work-hero","markdown":"https://www.digitaltableteur.com/design-system/components/work-hero.md","contract":"https://www.digitaltableteur.com/contracts/v1/WorkHero.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/WorkHero.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/work-hero.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"WorkMagneticField","slug":"work-magnetic-field","status":"stable","group":"marketing","description":"Homepage work grid with magnetic hover on up to three project cards.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Section title."},{"name":"projects","type":"ProjectItem[]","values":null,"default":null,"required":true,"description":"Projects to display. Only the first three render; passing more logs a development warning."},{"name":"showViewAll","type":"boolean","values":null,"default":"true","required":false,"description":"Show \"View all work\" link (default true)"},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."},{"name":"id","type":"string","values":null,"default":"work","required":false,"description":"Section ID for navigation (default \"work\"); also prefixes the title id."},{"name":"donnyTarget","type":"string","values":null,"default":"home.work","required":false,"description":"Donny site action target id (default \"home.work\")"},{"name":"contentLanguage","type":"string","values":null,"default":"en","required":false,"description":"BCP 47 language of the project titles and metadata, set as `lang` on each card. Project copy is authored in English."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/work-magnetic-field","markdown":"https://www.digitaltableteur.com/design-system/components/work-magnetic-field.md","contract":"https://www.digitaltableteur.com/contracts/v1/WorkMagneticField.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/WorkMagneticField.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/work-magnetic-field.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"WorkNav","slug":"work-nav","status":"stable","group":"navigation","description":"Work section sub-navigation: a back-to-index action plus previous/next controls for stepping through the portfolio case studies.","exported":false,"import":null,"customElement":"dt-work-nav","props":[{"name":"currentPath","type":"string","values":null,"default":null,"required":false,"description":"Active route used to compute the prev/next disabled state. Defaults to the current pathname from the router; stories and tests override it to show a given position in the work sequence."},{"name":"pages","type":"readonly WorkNavPage[]","values":null,"default":null,"required":false,"description":"Ordered case-study paths. Defaults to the published project catalog in its display order."},{"name":"onNavigate","type":"(path: string) => void","values":null,"default":null,"required":false,"description":"Host navigation callback. Defaults to the configured navigation runtime."},{"name":"disabled","type":"boolean","values":null,"default":"false","required":false,"description":"Disables every action while host navigation is pending. Defaults to `false`."}],"variants":[],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/work-nav","markdown":"https://www.digitaltableteur.com/design-system/components/work-nav.md","contract":"https://www.digitaltableteur.com/contracts/v1/WorkNav.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/WorkNav.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/work-nav.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]},{"name":"WorkPreviewSection","slug":"work-preview-section","status":"stable","group":"marketing","description":"Plain project-card preview section with a title, three layouts and an optional view-all link to /work.","exported":false,"import":null,"customElement":null,"props":[{"name":"title","type":"string","values":null,"default":null,"required":false,"description":"Section title."},{"name":"projects","type":"ProjectItem[]","values":null,"default":null,"required":true,"description":"Array of projects to display."},{"name":"layout","type":"\"grid\" | \"asymmetric\" | \"featured\"","values":["grid","asymmetric","featured"],"default":"grid","required":false,"description":"Grid layout style. Defaults to \"grid\", which shows every project; \"asymmetric\" and \"featured\" show at most three."},{"name":"showViewAll","type":"boolean","values":null,"default":"true","required":false,"description":"Show \"View all work\" link (hidden below tablet). Defaults to true."},{"name":"className","type":"string","values":null,"default":null,"required":false,"description":"Custom className."},{"name":"id","type":"string","values":null,"default":"work","required":false,"description":"Section ID for navigation. Defaults to \"work\" and also forms the heading id that names the section."},{"name":"contentLanguage","type":"string","values":null,"default":"en","required":false,"description":"BCP 47 language of the project titles and tags, set as lang on the featured layout's EnhancedProjectCard copy. Defaults to \"en\" (project content is English); pass the page language for localized project data."}],"variants":[{"name":"layout","values":["grid","asymmetric","featured"],"default":"grid"}],"lookalikes":[],"invalidCombinations":[],"links":{"page":"https://www.digitaltableteur.com/design-system/components/work-preview-section","markdown":"https://www.digitaltableteur.com/design-system/components/work-preview-section.md","contract":"https://www.digitaltableteur.com/contracts/v1/WorkPreviewSection.contract.json"},"sourceFiles":[{"name":"Contract","url":"https://www.digitaltableteur.com/contracts/v1/WorkPreviewSection.contract.json"},{"name":"Reference (Markdown)","url":"https://www.digitaltableteur.com/design-system/components/work-preview-section.md"}],"specs":[{"name":"Design System Contract 1.0","url":"https://www.digitaltableteur.com/contracts"}]}],"deprecated":[{"name":"CodeBlockWindow","contract":"https://www.digitaltableteur.com/contracts/v1/CodeBlockWindow.contract.json"},{"name":"CodeSnippet","contract":"https://www.digitaltableteur.com/contracts/v1/CodeSnippet.contract.json"},{"name":"CVDownloadSection","contract":"https://www.digitaltableteur.com/contracts/v1/CVDownloadSection.contract.json"},{"name":"Hero","contract":"https://www.digitaltableteur.com/contracts/v1/Hero.contract.json"},{"name":"ProjectDetailTemplate","contract":"https://www.digitaltableteur.com/contracts/v1/ProjectDetailTemplate.contract.json"}],"notComponents":[{"name":"Roadmap","note":"There is no Roadmap component. No contract, export or variant exists under that name. Roadmap names the design system's planning document, which is not a UI component.","page":"https://www.digitaltableteur.com/design-system/components/roadmap"}]}