badge
ui-componentParva tessera ad genus, statum vel categoriam notandam.
Chiralkit / UI Kit
ChiralUI Specs
Contractus qui ChiralUI componunt explora: tokens communes, primitivas, exemplaria, enantiomeros, facultates et compositiones.
Anulus 0
Tokens
Valores visuales communes quibus omnia UI modula utuntur. CSS custom properties earumque valores praesentes directe ex @chiralkit/tokens inspice.
Stratum tokens inspicere
Stratum atomi eligere
Valores puri sine contextu, ut paletta colorum et scalae spatii typographiaeque. Definiunt qui valores adsint, non quod munus gerant.
Munera significativa, ut superficies, textus et nota, valores puros ad intentionem interfaciei referunt. Themata haec munera mutare possunt, paletta primitiva immutata manente.
Valores componentium et statuum describunt quomodo instrumenta in statibus ordinario, superposito, focus, activo et inhibito respondeant; sensum fundamentalem ex tokens semanticis trahunt.
Atomum carbonii, unitas ex qua omnes anuli sequentes construuntur. Sex protones eius 0 insculptum habent: stratum tokenum primitivorum. Sex neutrones 1 insculptum habent: stratum semanticum. Sex electrones quoque 1 insculptum habent: stratum interactionis. Duo 1 forma et alveo sub atomo distinguuntur, ubi relationes hoc ordine currunt: primitivum → semanticum → interactio. Thema munera semantica tantum redistribuit; valores primitivi iidem manent.
Omnes declarationes tokens generatas inspice
Colores et focus
| CSS custom property | Valor fontis |
|---|---|
--ds-color-primary | var(--ds-semantic-color-brand) |
--ds-color-primary-hover | var(--ds-semantic-color-brand-hover) |
--ds-color-secondary | var(--ds-semantic-color-secondary) |
--ds-color-secondary-hover | var(--ds-semantic-color-secondary-hover) |
--ds-color-text-on-primary | var(--ds-semantic-color-text-on-primary) |
--ds-color-text-on-secondary | var(--ds-semantic-color-text-on-secondary) |
--ds-color-focus | var(--ds-interactive-button-focus) |
Intervalla
| CSS custom property | Valor fontis |
|---|---|
--ds-spacing-xs | var(--ds-primitive-spacing-xs) |
--ds-spacing-sm | var(--ds-primitive-spacing-sm) |
--ds-spacing-md | var(--ds-primitive-spacing-md) |
--ds-spacing-lg | var(--ds-primitive-spacing-lg) |
--ds-spacing-xl | var(--ds-primitive-spacing-xl) |
Radius
| CSS custom property | Valor fontis |
|---|---|
--ds-radius-sm | var(--ds-primitive-radius-sm) |
--ds-radius-md | var(--ds-primitive-radius-md) |
Typographia
| CSS custom property | Valor fontis |
|---|---|
--ds-font-family | var(--ds-primitive-font-family) |
--ds-font-size-md | var(--ds-primitive-font-size-md) |
Anulus 1a
Primitivae
Elementa UI independentia contractibus componentium definita: props, eventus, slots, status et ratio accessibilitatis.
Anatomiam figurae inspicere
Partem figurae eligere
Carbonium centrale ex anulo 0 servatum. Greges amino et carboxylo coniungit et duo hydrogenia residui fert.
Nitrogenium et hydrogenia ei coniuncta finem aminum glycini constituunt. In catena hic finis cum residuo priore vinculo peptidico iungitur.
Carbonium carbonylum et duo oxygenia finem carboxyli glycini constituunt. Cum proximo grege amino iunctum aquam emittit atque vinculum peptidicum format.
Molecula glycini: atomum carbonii, quale in anulo 0 est, cum atomis nitrogenii, oxygenii et hydrogenii in unum aminoacidum coniunctum.
button
ui-componentButton fundamentale design system — variantes primary/secondary cum statu disabled.
card
ui-componentSuperficies marginata et rotundata ad contenta congreganda — sine props, unico default slot, sine role ARIA. Qui eo utuntur structuram titulorum suam intus componunt.
checkbox
ui-component<input type="checkbox"> nativum ut custom element design system involutum — props checked/indeterminate ad DOM transmittuntur, dsChange novum statum booleanum emittit. Speciem checkbox quam browser praebet servat, ut mores AT et modi forced-colors conserventur.
code-block
ui-componentCodicis capsa cum titulo linguae et button ad exscribendum insito.
dialog
ui-componentElementum <dialog> nativum ut custom element design system involutum — showModal() machinam statuum modalem (focus trap, Escape ad claudendum, fundum inertem, return-focus) per suggestum browser praebet, non ARIA ab integro aedificatam. Props: open, label|labelledBy, describedBy. Eventus: dsOpen, dsClose.
input
ui-component<input> nativum ut custom element design system involutum — genera text/email/password/search/tel/url/number sustinet, invalid+describedBy ad status erroris, et in omni ictu clavis dsInput cum valore praesenti emittit.
loader
ui-componentIndex onerationis indefinitus ex path logo chiralkit factus — duae partes speculares circa centrum anuli oscillant.
select
ui-component<select> nativum ut custom element design system involutum — optiones per prop traduntur, dsChange cum novo valore emittit.
textarea
ui-component<textarea> nativum ut custom element design system involutum — campus textus plurium versuum cum prop rows, invalid+describedBy ad status erroris, et eventus dsInput in omni ictu clavis emissus.
Anulus 1b
Exemplaria
Exemplaria interactionis ex primitivis composita et reutilizabilia, cum contractibus explicitis status, eventuum et accessibilitatis.
Anatomiam figurae inspicere
Partem figurae eligere
Quodque residuum una unitas glycini est. Eadem unitate repetita, molecula anuli 1a in longiorem sceletum polypeptidicum crescit.
Haec vincula carbonium carboxyli unius residui cum nitrogenio sequentis coniungunt. Quodque vinculum aquā emissa formatur.
Catena polypeptidica: quinque moleculae glycini ex anulo 1a vinculis peptidicis continuatae, quorum unumquodque unam moleculam aquae emittit.
tabs
ui-componentExemplar WAI-ARIA Tabs (ab integro aedificatum) — tablist tantum, cum roving tabindex, navigatione per claves sagittarum, Home/End et activatione automatica. Qui eo utitur tabpanels suos in light DOM reddit et visibilitatem in dsChange commutat. shadow:false, ut ids tabs e tabpanels per aria-labelledby attingi possint.
tooltip
ui-componentExemplar WAI-ARIA Tooltip (ab integro aedificatum) — primum Element child eius qui utitur ut trigger involvit; in hover aperitur (cum openDelay) et in focus statim; Escape dimittitur, trigger focum servante; in blur aut in mouseleave germano clauditur. shadow:false, ut aria-describedby in trigger id tooltip attingere possit.
Anulus 2
Enantiomeri
Paria UI structuram et axem specularem nominatum communicant, muneribus oppositis in eodem substrato intra unum systema. Solae variantes vel similitudo visualis par non constituunt.
Anatomiam figurae inspicere
Partem figurae eligere
Forma L in proteinis viventibus adhibita. Dispositio circa carbonium alpha ei formam chiralem dat.
Planum unam dispositionem in alteram reflectit. Rotatio structuras superponere non potest; ideo enantiomera sunt.
Forma L-alanini in speculo visa. Eadem atomia et vincula habet, sed chiralitatem contrariam.
Duae moleculae alanini, utraque glycinum anuli 1a, uno hydrogenio radice methylica substituto. Quod hydrogenium substituitur, id manum decernit: L et D imagines speculares sunt trans planum quod inter eas iacet, nec ulla rotatio alteram alteri exacte superponit.
figure-canvas
ui-componentSpatium figurarum iterabile cum zoom, inspectione et rotatione horizontali per tractum optionali.
Anulus 3
Facultates
Facultates usoris contractus anulorum inferiorum in facultatem cohaerentem componunt.
Anatomiam figurae inspicere
Partem figurae eligere
Anulus c in membrana cum stipite centrali γ vertitur. Protonum fluxus per F₀ hanc rotationem impellit et cum capite catalytico coniungit.
Caput α₃β₃ circa stipitem rotantem immotum manet. Subunitates β motu relativo utuntur ad ATP formandum.
Membrana rotorem F₀ ancorat et protonum gradientem, qui vim rotationi praebet, separat.
ATP synthase, motor molecularis ex solis catenis proteinicis manus L (anulus 2) constructus. Anulus subunitatum in membrana vertitur et stipitem centralem intra caput agit, quod stipes lateralis immotum tenet.
Nulla UI modula facultatum adhuc in registro sunt. Hic anulus ordinem facultatum describit; exempla non registrata non enumerat.
Anulus 5
Compositiones
Compositiones paginarum et applicationum contractus anulorum inferiorum componunt. Contractus layout regiones, regiones necessarias, variantes et usum tokens definiunt.
Anatomiam figurae inspicere
Partem figurae eligere
Nucleus materiam geneticam cellulae in conclavi membrana circumdato servat; hic ut corpus porosum ostenditur.
Mitochondrion membranam interiorem plicatam atque ATP synthases anuli 3 continet, quae protonum gradientem cum ATP productione copulant.
Lipidum finis flexibilis cellulam claudit atque interius ab ambitu separat.
Fluidum organella circumdans moleculas et catenas liberas continet, ex prioribus anulis molecularibus constructas.
Cellula sectione aperta, ex omnibus quae infra sunt constructa: nucleus, catenae proteinicae liberae et aminoacida ex anulis 1a ad 2, et mitochondrion cuius membrana interior motores anuli 3 continet.
app-shell
ui-layoutGeometria applicationis nulli framework addicta, cum rail primario et rail secundario, utroque optionali, circa regionem principalem necessariam.
headerprimarymainsecondaryfooterGradus 1 / 6