{ "kit": "2.0.3", "generated": "2026-09-07", "count": 64, "components": [ { "name": "IngotAccentSwatches", "display": "AccentSwatches", "tag": ".swatches", "status": "beta", "version": "1.3", "tokens": [ "--accent", "--ink", "--border-strong" ], "classNameNote": { "cs": "Bere `className`, ale jen na rozvržení — šířku, mezery, umístění v mřížce. Vzhled drží primitivum.", "en": "Takes `className`, but for layout only — width, spacing, placement in a grid. The look stays with the primitive." }, "summary": { "cs": "Volba akcentové rodiny — pět puntíků, každý obarvený tokenem, který nabízí. Žádný hex v kódu.", "en": "The accent-family picker — five dots, each painted by the token it offers. No hex in the code." }, "avoidWhen": { "cs": [ "Vybírá se z pojmenovaných možností, které nejsou barvy. Na to je IngotSegmented nebo IngotSelect.", "Má se ukázat, JAK rodina vypadá napříč tokeny. To je ukázka palety v průvodci Základy, ne přepínač." ], "en": [ "The options are named things that are not colours. That is IngotSegmented or IngotSelect.", "The point is to show HOW a family looks across tokens. That is the palette demo in the Basics guide, not a picker." ] }, "a11y": { "cs": [ "Puntíky jsou přepínače v pojmenované skupině, takže se mezi nimi chodí šipkami a odečítač hlásí, který je vybraný.", "Terč je 28×28, i když tečka zůstává 18×18 — sáhnout se musí dát prstem. Zvětšit kolečko by rozbilo lištu, proto roste plocha kolem něj.", "Vybraný puntík má prstenec v barvě inkoustu, ne v barvě rodiny: prstenec ve vlastní barvě není proti tečce, kterou obkružuje, vidět." ], "en": [ "The dots are radios in a named group, so arrow keys move between them and a screen reader announces which is selected.", "The target is 28×28 even though the dot stays 18×18 — it has to be reachable with a finger. Growing the circle would break the bar, so the area around it grows instead.", "The selected dot has an ink-coloured ring, not a family-coloured one: a ring in its own colour is invisible against the dot it circles." ] }, "props": [ { "name": "value", "type": "AccentChoice", "required": true }, { "name": "onChange", "type": "(choice: AccentChoice) => void", "required": true }, { "name": "groupLabel", "type": "string", "required": true }, { "name": "optionLabel", "type": "(choice: AccentChoice) => string", "required": true }, { "name": "disabled", "type": "boolean", "required": false }, { "name": "className", "type": "string", "required": false } ], "page": { "cs": "https://ingot.forgmatic.com/komponenty/accent-swatches", "en": "https://ingot.forgmatic.com/en/komponenty/accent-swatches" } }, { "name": "IngotActionBar", "display": "ActionBar", "tag": ".actionbar", "status": "beta", "version": "1.0", "tokens": [ "--surface", "--border", "--ink-3", "--warn", "--s-3", "--s-4" ], "classNameNote": { "cs": "Bere `className`, ale jen na umístění — kde v obsahu stojí. Ne na vzhled: lišta akcí, která vypadá na každé obrazovce jinak, přestane být tím místem, kde uživatel akce hledá.", "en": "Takes `className`, but only for placement — where in the content it stands. Not for the look: an action bar that looks different on every screen stops being the place a user goes to look for actions." }, "summary": { "cs": "Lišta pod dlouhým formulářem: to, kvůli čemu čtenář přišel, je v dosahu i po devátém poli. Přilepená, ne plovoucí — nic nezakrývá.", "en": "The bar under a long form: what the reader came to do, still in reach after the ninth field. Sticky, not floating — it covers nothing." }, "avoidWhen": { "cs": [ "Krátký formulář, který se vejde na obrazovku. Přilepená lišta pod ním je rám kolem tlačítka, které bylo vidět celou dobu.", "Akce nad seznamem — filtry, hromadné operace, „Nový záznam“. To je IngotToolbar a stojí nad daty, ne pod nimi.", "Potvrzení v modálním okně. To má vlastní patičku a vlastní pravidla fokusu — IngotModal, IngotConfirm." ], "en": [ "A short form that fits on the screen. A sticky bar under it is a frame around a button that was visible the whole time.", "Actions above a list — filters, bulk operations, \"New record\". That is IngotToolbar and it stands above the data, not below it.", "A confirmation in a dialog. That has its own footer and its own focus rules — IngotModal, IngotConfirm." ] }, "a11y": { "cs": [ "Lišta nezakrývá nic, protože je sticky, ne fixed: zůstává v toku dokumentu, takže si na konci obsahu vezme vlastní výšku a při rolování jede po spodní hraně. Plovoucí lišta by potřebovala změřit svou výšku, přidat ji kontejneru jako odsazení a hlídat `resize` — tři věci, z nichž jedna je vždycky špatně na obrazovce, kterou nikdo nezkoušel.", "Stav nenese jen barva: tečka je dekorace (aria-hidden) a to, co znamená, stojí vedle ní slovem. Odečítač přečte větu, ne „tečka“.", "Lišta si nebere fokus a nemá past. Je to poslední blok obsahu, takže ji klávesnice potká na konci — tam, kde ji potká i oko." ], "en": [ "The bar covers nothing because it is sticky, not fixed: it stays in the document's flow, so it takes its own height at the end of the content and rides the bottom edge while there is more to scroll. A floating bar would need its height measured, that height added to the container as padding, and a watch on `resize` — three things, one of which is always wrong on the screen nobody tested.", "The state is not carried by colour: the dot is decoration (aria-hidden) and what it means stands beside it in words. A screen reader reads the sentence, not \"dot\".", "The bar takes no focus and traps none. It is the last block of the content, so the keyboard meets it at the end — where the eye meets it too." ] }, "props": [ { "name": "primary", "type": "ReactNode", "required": true }, { "name": "secondary", "type": "ReactNode", "required": false }, { "name": "status", "type": "ReactNode", "required": false }, { "name": "dirty", "type": "boolean", "required": false }, { "name": "onSave", "type": "() => void", "required": false }, { "name": "className", "type": "string", "required": false }, { "name": "testId", "type": "string", "required": false } ], "page": { "cs": "https://ingot.forgmatic.com/komponenty/action-bar", "en": "https://ingot.forgmatic.com/en/komponenty/action-bar" } }, { "name": "IngotAppFrame", "display": "AppFrame", "tag": ".appframe", "status": "beta", "version": "1.0", "tokens": [ "--bg", "--frame", "--s-4", "--s-5" ], "classNameNote": { "cs": "Bere `className`, ale jen na svislý rytmus — odsazení shora a zdola. Šířku ne: ta je celý smysl tohoto primitiva, a kdyby ji brala zvenčí, vrátí se stav, kvůli kterému vzniklo.", "en": "Takes `className`, but only for vertical rhythm — padding above and below. Not width: width is the whole point of this primitive, and taking it from outside would restore the state it was made to end." }, "summary": { "cs": "Rám celé obrazovky: lišta nahoře, šířka, kam obsah smí, a okraje vedle něj. Šířka je token, ne číslo v každé aplikaci.", "en": "The frame of a whole screen: the bar at the top, the width the content may reach, and the margins beside it. The width is a token, not a number each application repeats." }, "avoidWhen": { "cs": [ "Uvnitř jiného rámu. Dva rámy nad sebou znamenají dvoje okraje a obsah, který začíná jinde, než čtenář čeká podle lišty.", "Šířka jednoho bloku uvnitř stránky. Čtecí šířka dlouhého textu je IngotPageLayout s width=\"reading\".", "Modální okno nebo boční panel. Ty mají vlastní šířku a stojí nad rámem, ne v něm." ], "en": [ "Inside another frame. Two frames stacked mean two sets of margins and content that starts somewhere other than the bar led the reader to expect.", "The width of one block inside a page. The reading width of long prose is IngotPageLayout with width=\"reading\".", "A modal or a side panel. Those carry their own width and stand above the frame, not inside it." ] }, "a11y": { "cs": [ "Rám nekreslí orientační bod. Lišta si svůj nav nese sama a main patří obrazovce — rám neví, který z jeho potomků je hlavní obsah, a hádat by znamenalo dát odečítači špatnou mapu stránky.", "Přilepená lišta má z-30: pod překryvy (modál, panel, toast) a nad vším, co kreslí stránka. Lišta, za kterou zmizí otevřený popover, je horší než lišta, která se nelepí vůbec." ], "en": [ "The frame draws no landmark. The bar carries its own nav and main belongs to the screen — the frame does not know which of its children is the main content, and guessing would hand a screen reader the wrong map of the page.", "The sticky bar sits at z-30: below the overlays (modal, drawer, toast) and above everything a page draws. A bar an open popover disappears behind is worse than one that does not stick at all." ] }, "props": [ { "name": "children", "type": "ReactNode", "required": true }, { "name": "width", "type": "\"app\" | \"full\"", "required": false, "values": [ "app", "full" ] }, { "name": "bar", "type": "ReactNode", "required": false }, { "name": "className", "type": "string", "required": false }, { "name": "testId", "type": "string", "required": false } ], "extraProps": [ { "name": "INGOT_FRAME_ROW", "props": [ { "name": "INGOT_FRAME_ROW", "type": "string", "required": false } ] } ], "page": { "cs": "https://ingot.forgmatic.com/komponenty/app-frame", "en": "https://ingot.forgmatic.com/en/komponenty/app-frame" } }, { "name": "IngotAttentionPanel", "display": "AttentionPanel", "tag": ".attention", "status": "beta", "version": "1.1", "tokens": [ "--ink", "--bg", "--warn", "--r-lg", "--shadow-md" ], "classNameNote": { "cs": "`className` nebere. Vypadá stejně na každé obrazovce; rozvržení patří obalu kolem něj.", "en": "Does not take `className`. It looks the same on every screen; layout belongs to the wrapper around it." }, "summary": { "cs": "Tmavý panel „co po tobě obrazovka chce teď“ v hlavě přehledu. Jediné místo, kde je karta tmavší než pozadí — signál, který drží, jen dokud je vzácný.", "en": "The dark “what this screen wants from you now” panel at the head of an overview. The one place where a card is darker than the page — a signal that holds only while it stays rare." }, "avoidWhen": { "cs": [ "Druhý tmavý blok na téže stránce — dva panely nejsou dva signály, ale druhé pozadí. Další sdělení patří do Card nebo metrik.", "Chybová nebo výstražná hláška k akci, která právě proběhla — na to je toast a inline text, ne plocha přes půl obrazovky.", "Marketingové zvýraznění („novinka!“). Panel znamená práci, která čeká; cokoli jiného ho ředí." ], "en": [ "A second dark block on the same page — two panels are not two signals but a second background. Further messages belong in Card or the metrics.", "An error or warning for an action that just ran — that is a toast and inline text, not half a screen of surface.", "Marketing emphasis (“new!”). The panel means work that waits; anything else dilutes it." ] }, "a11y": { "cs": [ "Panel je section pojmenovaná nadpisem — pro odečítač orientační bod, ne jen tmavý div.", "Kreslí se tokeny --ink/--bg, takže v tmavém režimu se obrátí a kontrast textu drží v obou motivech sám od sebe.", "Naléhavost nese text a počty, ne barva sama — panel je signál polohou a plochou i pro toho, kdo barvy nevidí." ], "en": [ "The panel is a section named by its heading — a landmark for a screen reader, not just a dark div.", "It is drawn with the --ink/--bg tokens, so it inverts in dark mode and text contrast holds in both themes by itself.", "Urgency is carried by text and counts, not by colour alone — the panel signals by position and surface even to someone who does not see colour." ] }, "props": [ { "name": "title", "type": "string", "required": true }, { "name": "children", "type": "ReactNode", "required": true }, { "name": "aside", "type": "ReactNode", "required": false }, { "name": "testId", "type": "string", "required": false } ], "page": { "cs": "https://ingot.forgmatic.com/komponenty/attention-panel", "en": "https://ingot.forgmatic.com/en/komponenty/attention-panel" } }, { "name": "IngotAvatar", "display": "Avatar", "tag": ".avatar", "status": "beta", "version": "1.1", "tokens": [ "--ink", "--bg", "--font-mono" ], "classNameNote": { "cs": "Bere `className`, ale jen na okraje a zarovnání. Velikost je `size` a barva je pevná — kolečko, které má na každé obrazovce jinou velikost, přestane být tím, podle čeho čtenář pozná člověka.", "en": "Takes `className`, but only for margins and alignment. The size is `size` and the colour is fixed — a circle that is a different size on every screen stops being the thing a reader recognises a person by." }, "summary": { "cs": "Člověk, jak malý člověk bývá: iniciály, nebo jeho obrázek. Iniciály dodává volající.", "en": "A person, as small as a person gets: initials, or their picture. The initials come from the caller." }, "avoidWhen": { "cs": [ "Ikona nebo logo. To je IngotIcon — avatar znamená „člověk“ a kolečko s piktogramem to tvrdí o něčem, co člověk není.", "Stav nebo počet v kolečku. Stav je IngotBadge, počet IngotCountPill.", "Avatar jako tlačítko. Kolečko nic neovládá — obal ho udělá klikatelným, když má být klikatelný, a nese pak vlastní jméno i fokus." ], "en": [ "An icon or a logo. That is IngotIcon — an avatar means \"a person\", and a circle with a pictogram claims that about something that is not one.", "A state or a count in a circle. A state is IngotBadge, a count is IngotCountPill.", "An avatar as a button. The circle operates nothing — a wrapper makes it clickable where it should be, and then carries its own name and its own focus." ] }, "a11y": { "cs": [ "Kolečko je jeden prvek se jménem (role=\"img\" + aria-label), ne jméno na obrázku uvnitř nepojmenované krabice. Odečítač pak přečte člověka jednou — ať se obrázek načetl, nebo ne.", "Obrázek uvnitř má alt=\"\" a aria-hidden: jméno nese obal a druhé by ho zopakovalo.", "Iniciály nejsou barevně odlišené podle člověka. Barva jako jediný nositel identity je přesně to, co WCAG zakazuje — a v kitu, kde si akcent vybírá uživatel, by navíc znamenala pokaždé jinou paletu." ], "en": [ "The circle is one named element (role=\"img\" + aria-label), not a name on a picture inside an unnamed box. A screen reader then reads the person once — whether the image loaded or not.", "The image inside carries alt=\"\" and aria-hidden: the wrapper holds the name and a second one would repeat it.", "The initials are not colour-coded per person. Colour as the sole carrier of identity is exactly what WCAG forbids — and in a kit where the user picks the accent it would mean a different palette every time." ] }, "props": [ { "name": "initials", "type": "string", "required": true }, { "name": "label", "type": "string", "required": true }, { "name": "src", "type": "string", "required": false }, { "name": "size", "type": "\"sm\" | \"md\"", "required": false, "values": [ "sm", "md" ] }, { "name": "decorative", "type": "boolean", "required": false }, { "name": "className", "type": "string", "required": false }, { "name": "testId", "type": "string", "required": false } ], "page": { "cs": "https://ingot.forgmatic.com/komponenty/avatar", "en": "https://ingot.forgmatic.com/en/komponenty/avatar" } }, { "name": "IngotBadge", "display": "Badge", "tag": ".badge", "status": "stable", "version": "1.2", "tokens": [ "--surface-2", "--border", "--ink", "--ink-2", "--accent-ink", "--accent-bg", "--accent-border", "--ok", "--ok-bg", "--ok-border", "--warn", "--warn-bg", "--warn-border", "--danger", "--danger-bg", "--danger-border", "--font-mono", "--r-xs" ], "classNameNote": { "cs": "`className` nebere schválně: `bg-*` zvenčí by tiše přebilo tón a dvě různá sdělení by se kreslila stejně.", "en": "Deliberately does not take `className`: a `bg-*` from outside would quietly override the tone and two different messages would look alike." }, "summary": { "cs": "Stavový štítek: stav entity jedním slovem, mono a verzálkami. Pojmenovává stav, ne akci.", "en": "A status badge: the state of an entity in one word, mono and upper-case. It names a state, not an action." }, "avoidWhen": { "cs": [ "Je to počet. Odznak s číslem je jiné primitivum s jinou specifikací: kulatý, práh 99+, povinný popisek pro odečítač, nula se nekreslí — a kit ho zatím nemá. Číslo není stav a plést je znamená, že jednou přibude štítek, který svítí pořád.", "Má se na to dát kliknout. Filtr, který jde zapnout, je chip a musí být tlačítko s fokusem a klávesovou obsluhou. Štítek je text, ne ovládací prvek — onClick na něm proto nenajdeš.", "Na jeden řádek tabulky by jich šlo víc než jeden. Dva štítky vedle sebe se čtou jako jeden složený stav, který nikdo nedefinoval; slož je do jednoho slova, nebo ten druhý dej do sloupce.", "Sdělení je věta, ne stav. Verzálky ji udělají nečitelnou a IngotEmptyState nebo obyčejný odstavec ji unesou líp." ], "en": [ "It is a count. A badge with a number is a different primitive with a different specification: round, a 99+ threshold, a mandatory screen-reader label, zero is not drawn — and the kit does not have it yet. A number is not a state, and confusing the two ends with a badge that is always lit.", "It is meant to be clicked. A filter you can switch on is a chip and has to be a button, with focus and keyboard handling. A badge is text, not a control — which is why it has no onClick.", "More than one of them could end up in a single table row. Two badges side by side read as one compound state nobody defined; fold them into one word, or move the second into a column of its own.", "The message is a sentence, not a state. Upper case makes it unreadable, and IngotEmptyState or an ordinary paragraph carries it better." ] }, "a11y": { "cs": [ "Barva význam nenese nikdy sama. Text je povinný právě proto, že barva je pro část čtenářů neviditelná a v tisku zmizí úplně.", "Všech šest tónů drží kontrast textu proti vlastnímu pozadí nad 4,5 : 1 ve světlém i tmavém motivu. Není to slib v próze — měří se to nad skutečnými hodnotami tokenů.", "Štítek není interaktivní: nemá roli, fokus ani klávesovou obsluhu. Kdyby ji dostal, musel by být tlačítkem — a to už je chip, ne štítek.", "dot je aria-hidden. Tečka, kterou by odečítač přečetl, by hlásila znak navíc, ne stav." ], "en": [ "Colour never carries the meaning on its own. The text is required precisely because colour is invisible to some readers and disappears entirely in print.", "All six tones keep the text above 4.5 : 1 against their own background in both light and dark. That is not a promise in prose — it is measured against the real token values.", "The badge is not interactive: no role, no focus, no keyboard handling. If it had them it would have to be a button — and that is a chip, not a badge.", "dot is aria-hidden. A dot a screen reader would read out announces an extra character, not a state." ] }, "props": [ { "name": "children", "type": "ReactNode", "required": true }, { "name": "tone", "type": "neutral | ok | warn | danger | accent | ink", "required": false }, { "name": "dot", "type": "boolean", "required": false }, { "name": "testId", "type": "string", "required": false } ], "page": { "cs": "https://ingot.forgmatic.com/komponenty/badge", "en": "https://ingot.forgmatic.com/en/komponenty/badge" } }, { "name": "IngotBreadcrumbs", "display": "Breadcrumbs", "tag": ".crumbs", "status": "stable", "version": "1.2", "tokens": [ "--ink", "--ink-3", "--ink-4", "--font-mono" ], "classNameNote": { "cs": "`className` nebere. Vypadá stejně na každé obrazovce; rozvržení patří obalu kolem něj.", "en": "Does not take `className`. It looks the same on every screen; layout belongs to the wrapper around it." }, "summary": { "cs": "Drobečky nad hlavičkou stránky — kde jsem a jak zpátky. V aplikaci bez bočního menu nesou celou orientaci do hloubky.", "en": "Breadcrumbs above the page header — where I am and how to get back. In an application without a side menu they carry all the orientation in depth." }, "avoidWhen": { "cs": [ "Kořenová stránka sekce. Jediný článek neřekne nic, co by hlavička neřekla líp — komponenta proto pro méně než dva články vrátí null a lišta se nekreslí vůbec.", "Navigace mezi sourozenci — záložky nad obsahem, přepínač pohledů. Drobečky vedou nahoru, ne do stran; na kroky vedle je IngotTabs.", "Náhrada hlavního menu. Drobečky říkají, kde stojíš, ne kam se dá jít — sekce aplikace patří do IngotTopNav." ], "en": [ "The root page of a section. A single crumb says nothing the header does not say better — so for fewer than two crumbs the component returns null and no trail is drawn at all.", "Navigating between siblings — tabs above the content, a view switcher. Breadcrumbs lead upwards, not sideways; steps to the side are IngotTabs.", "A replacement for the main menu. Breadcrumbs say where you stand, not where you can go — the application's sections belong to IngotTopNav." ] }, "a11y": { "cs": [ "Poslední článek není odkaz. Je to místo, kde stojíš, a odkaz sám na sebe je slib prokliku, který nikam nevede. Komponenta ho vykreslí jako text, i kdyby href dostala.", "Ten poslední článek nese aria-current=\"page\", takže odečítač aktuální stránku pojmenuje, místo aby ji jen tiše přečetl jako další text v řadě.", "Oddělovač je lomítko a je aria-hidden — je to kresba mezi články, ne slovo, které má někdo slyšet dvacetkrát za cestu.", "Celek je nav se seznamem uvnitř, takže se dá přeskočit jedním krokem; label je proto povinný, ne doplňkový." ], "en": [ "The last crumb is not a link. It is the place where you stand, and a link to itself is a promise of a click-through that leads nowhere. The component renders it as text even if it was given an href.", "That last crumb carries aria-current=\"page\", so a screen reader names the current page instead of quietly reading it as one more piece of text in the row.", "The separator is a slash and it is aria-hidden — it is a mark between crumbs, not a word anyone should hear twenty times along the path.", "The whole is a nav with a list inside, so it can be skipped in one step; that is why label is required, not optional." ] }, "props": [ { "name": "items", "type": "readonly IngotCrumb[]", "required": true }, { "name": "label", "type": "string", "required": true }, { "name": "testId", "type": "string", "required": false } ], "extraProps": [ { "name": "IngotCrumb", "props": [ { "name": "label", "type": "string", "required": true }, { "name": "href", "type": "string", "required": false } ] } ], "page": { "cs": "https://ingot.forgmatic.com/komponenty/breadcrumbs", "en": "https://ingot.forgmatic.com/en/komponenty/breadcrumbs" } }, { "name": "Button", "display": "Button", "tag": ".btn", "status": "stable", "version": "1.5", "tokens": [ "--bg", "--surface", "--surface-2", "--border-strong", "--ink", "--ink-2", "--ink-4", "--accent", "--accent-ink", "--ok", "--danger", "--r-md" ], "classNameNote": { "cs": "Bere `className` (a další atributy tlačítka) na rozvržení — šířku a zarovnání. Vzhled určují `variant` a `size`.", "en": "Takes `className` (and the other button attributes) for layout — width and alignment. `variant` and `size` decide the look." }, "summary": { "cs": "Tlačítko se sedmi variantami, a s as=\"a\" i odkaz, který tak vypadá. Varianta nese význam akce, ne barvu — a v tmavém režimu drží kontrast, který opsané třídy ztrácejí.", "en": "The button, in seven variants — and with as=\"a\" a link that looks like one. A variant carries the meaning of the action, not a colour, and in dark mode it holds a contrast that copied classes lose." }, "avoidWhen": { "cs": [ "Je to odkaz uvnitř věty. Ten se sází jako text, ne jako tlačítko: as=\"a\" dává odkazu tvar tlačítka a ten uprostřed odstavce trhá řádek.", "Chceš jinou barvu, než která z variant vychází. Barva tady není volba, ale význam; nová potřeba je nová varianta, ne className." ], "en": [ "It is a link inside a sentence. That is set as text, not as a button: as=\"a\" gives a link the shape of a button, and that shape tears a line of prose apart.", "You want a colour other than the one the variant gives. Colour here is not a choice but a meaning; a new need is a new variant, not a className." ] }, "a11y": { "cs": [ "type je vždycky \"button\", pokud neřekneš jinak. Bez toho tlačítko uvnitř formuláře formulář odešle — chyba, která se projeví až v provozu a jen někdy.", "loading nasadí aria-busy a tlačítko zamkne, takže dvojklik nespustí mutaci dvakrát.", "Fokus kreslí prstenec 2px v barvě --accent s odsazením 2px. outline: none na tlačítku nikdy — kdo ovládá aplikaci klávesnicí, tím přijde o jedinou informaci, kde se nachází.", "iconOnly bez aria-label (nebo aria-labelledby) je chyba — ve vývojovém režimu na ni tlačítko upozorní do konzole. Popisek začíná slovesem: „Smazat řádek“, ne „Koš“.", "Klikatelná plocha má být nejméně 32×32 px, na dotykovém zařízení 44×44 px. Velikost sm je 28 px, a patří proto do hustých míst ovládaných myší — typicky do řádku tabulky. Na dotyk sáhni po md a výš.", "🚨 Varianty danger, accent a ok mají v tmavém režimu výjimku: tmavá paleta ty tokeny zesvětluje, aby se daly číst jako text, a bílý text na nich klesá pod kontrastní minimum WCAG AA. Popisek se proto invertuje na barvu pozadí stránky. Kdo si tlačítko opíše, tuhle výjimku neopíše — a v tmavém režimu vyrobí nečitelné tlačítko.", "as=\"a\" vykreslí opravdový odkaz, ne tlačítko, které naviguje. Odečítač ho hlásí jako odkaz, do pořadí tabulátoru se dostane přes href a Enter ho následuje — nic z toho tlačítko ve tvaru odkazu neumí. Proto je href povinný, a ne nepovinný." ], "en": [ "type is always \"button\" unless you say otherwise. Without that, a button inside a form submits the form — a bug that shows up in production and only sometimes.", "loading sets aria-busy and locks the button, so a double click cannot fire the mutation twice.", "Focus draws a 2px ring in --accent with a 2px offset. Never outline: none on a button — anyone driving the application from the keyboard loses the only clue to where they are.", "iconOnly without an aria-label (or aria-labelledby) is a bug — in development mode the button says so in the console. The label starts with a verb: “Delete row”, not “Bin”.", "The clickable area should be at least 32×32 px, and 44×44 px on touch. The sm size is 28 px, so it belongs in dense, pointer-driven places — a table row, typically. For touch, reach for md or larger.", "🚨 The danger, accent and ok variants carry a dark-mode exception: the dark palette lightens those tokens so they stay readable as text, and white text on them drops below the WCAG AA contrast minimum. The label therefore inverts to the page background colour. Anyone copying the button will not copy that exception — and ships an unreadable button in dark mode.", "as=\"a\" renders a real link, not a button that navigates. A screen reader announces it as a link, it enters the tab order through href and Enter follows it — which is exactly what a button shaped like a link cannot do. That is also why href is required rather than optional." ] }, "props": [ { "name": "as", "type": "\"button\" | \"a\"", "required": false, "values": [ "button", "a" ] }, { "name": "href", "type": "string", "required": false }, { "name": "variant", "type": "\"primary\" | \"accent\" | \"ok\" | \"secondary\" | \"ghost\" | \"danger\" | \"inverse\"", "required": false, "values": [ "primary", "accent", "ok", "secondary", "ghost", "danger", "inverse" ] }, { "name": "size", "type": "\"sm\" | \"md\" | \"lg\"", "required": false, "values": [ "sm", "md", "lg" ] }, { "name": "iconOnly", "type": "boolean", "required": false }, { "name": "loading", "type": "boolean", "required": false }, { "name": "leadingIcon", "type": "ReactNode", "required": false }, { "name": "trailingIcon", "type": "ReactNode", "required": false }, { "name": "disabled", "type": "boolean", "required": false } ], "page": { "cs": "https://ingot.forgmatic.com/komponenty/button", "en": "https://ingot.forgmatic.com/en/komponenty/button" } }, { "name": "IngotCallout", "display": "Callout", "tag": ".callout", "status": "beta", "version": "2.0", "tokens": [ "--accent", "--accent-bg", "--accent-border", "--ok", "--ok-bg", "--ok-border", "--warn", "--warn-bg", "--warn-border", "--danger", "--danger-bg", "--danger-border", "--ink", "--ink-2", "--r-lg" ], "classNameNote": { "cs": "`className` nebere. Tón určuje plochu, rám i ikonu; kdyby šly přepsat zvenčí, varování by v jedné aplikaci vypadalo třemi způsoby — přesně to, co tohle primitivum ruší.", "en": "Does not take `className`. The tone decides the surface, the border and the icon; if they could be overridden from outside, one warning would look three ways in one application — exactly what this primitive exists to end." }, "summary": { "cs": "Podbarvený blok s poznámkou, varováním nebo důsledkem u obsahu, ke kterému patří. Tón určuje i to, jestli ho odečítač ohlásí.", "en": "A tinted block with a note, a warning or a consequence, next to the content it belongs to. The tone also decides whether a screen reader announces it." }, "avoidWhen": { "cs": [ "Text je nápověda k celé obrazovce a řídí ho volba účtu — to je IngotPageHint.", "Blok má otevírat přehled a nést, co čeká na akci — to je IngotAttentionPanel, a na stránce smí být jeden.", "Zpráva je výsledek akce, který nemá zastavit práci — to je toast.", "Chyba patří ke konkrétnímu poli. Ta patří k němu, ne do bloku nahoře." ], "en": [ "The text is help for the whole screen and is driven by an account preference — that is IngotPageHint.", "The block should open an overview and carry what awaits action — that is IngotAttentionPanel, and a page may hold one.", "The message is the result of an action and must not stop the work — that is a toast.", "The error belongs to one field. It belongs at the field, not in a block at the top." ] }, "a11y": { "cs": [ "warn a danger nesou role=\"alert\" — odečítač je ohlásí, jakmile se objeví. info a ok se čtou v pořadí, v jakém stojí na stránce.", "Blok, který křičí pokaždé, je blok, který se lidé naučí přeskakovat: proto alert jen u dvou tónů ze čtyř.", "Barva není jediný signál — každý tón má vlastní ikonu a text říká totéž slovy." ], "en": [ "warn and danger carry role=\"alert\" — a screen reader announces them as they appear. info and ok are read in the order they stand on the page.", "A block that shouts every time is a block people learn to skip: hence the alert on two tones out of four.", "Colour is not the only signal — each tone has its own icon and the text says the same thing in words." ] }, "props": [ { "name": "tone", "type": "Extract", "required": false }, { "name": "title", "type": "ReactNode", "required": false }, { "name": "children", "type": "ReactNode", "required": true }, { "name": "actions", "type": "ReactNode", "required": false }, { "name": "testId", "type": "string", "required": false } ], "page": { "cs": "https://ingot.forgmatic.com/komponenty/callout", "en": "https://ingot.forgmatic.com/en/komponenty/callout" } }, { "name": "Card", "display": "Card", "tag": ".card", "status": "stable", "version": "2.1", "tokens": [ "--bg", "--surface", "--surface-2", "--border", "--border-strong", "--ink", "--r-md", "--shadow-sm", "--shadow-lg" ], "classNameNote": { "cs": "Bere `className` na rozvržení — mezery a umístění karty. Rám, rádius a stín drží primitivum.", "en": "Takes `className` for layout — spacing and placement of the card. The frame, radius and shadow stay with the primitive." }, "summary": { "cs": "Plocha, na které obsah stojí — ne rámeček, který se kreslí kolem něj. Umí se zvednout při najetí a jednou za obrazovku se obrátit do tmavé.", "en": "The surface content sits on — not a border drawn around it. It can lift on hover, and once per screen it can invert to dark." }, "avoidWhen": { "cs": [ "Karta by obsahovala jedinou další kartu. Vnořené plochy čtenáři neřeknou nic navíc a odsazení se sčítá, dokud obsah nezmizí uprostřed.", "Chceš jen odsazení. Na to je className na obalu; karta navíc kreslí okraj a pozadí, které tam nikdo nechtěl." ], "en": [ "The card would contain a single other card. Nested surfaces tell the reader nothing extra, and the padding compounds until the content is lost in the middle.", "You only want padding. That is a className on a wrapper; a card also draws a border and a background nobody asked for." ] }, "a11y": { "cs": [ "Karta je
, ne
: vizuální plocha sama o sobě není orientační bod a odečítač by hlásil oblasti, které nikam nevedou. Potřebuješ-li osnovu, obal kartu IngotSection.", "CardTitle je nadpis vizuálně, ne významově. Když má opravdu být v osnově stránky, patří dovnitř skutečný nadpis přes IngotSection.", "Kontrast okraje i pozadí drží tokeny, takže karta funguje ve světlém i tmavém režimu bez zásahu. Uvnitř tone=\"dark\" ale nepiš barvy textu natvrdo — obrácená plocha si barvu předává děděním a text-ink na ní zmizí.", "🚨 Klikatelná karta je nebo