Lily Design System™

Dyskans Svelte

Lyverva Svelte Lily yw an gwrians kenedhlek: runes Svelte 5, perthynasow tyskys, lesans rest-prop, ha kesyanns diwo-fordh gans bind:value.

Pyth a wrewgh drehevel

Furv kestava byghan — mewnos gans lavell, botton danvon, kesyanns diwo-fordh, hwedhel klavyer ha skrin-redyer gwir — kynsa noeth, ena stylys, yn a-dro dhe 10 mynysenn.

Kyns dalleth

Ty a'n jeves othom a git, Node 22 po nowodhyes, ha pnpm 10 po nowodhyes. Raglen Svelte 5 vyth a ober — app nowydh npx sv create yw lowr.

Kamm 1 — Kevewgh an koodh

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-headless
pnpm install
pnpm test        # vitest — thousands of component cases
pnpm run storybook   # browse all 571 components

An darnow a drig yn src/lib/components/{Name}/, unn kuntelleth dre bub darn gans an restren .svelte , y brovow, y stories, ha'y dhogynnans ryb ryb. Kopiewgh an kuntellethow a'n jeves othom dhe'th app, po dhelyewgh orth an gwithva hag enporthewgh yn tevri.

Kamm 2 — Dha dharn kynsa

<script>
  import Button from "#lib/components/Button/Button.svelte";

  function save() { console.log("saved"); }
</script>

<Button onclick={save}>Save</Button>

Dyskwedh <button class="button" type="button">. An perthynasow yw tyskys: type, disabled, pressed (a dhyskwedh aria-pressed rag bottonow-gwrians), label ( aria-label gorholans), ha peub perthynas ekstra a lesans war an wreydh.

Kamm 3 — Kesstrewewgh furv byghan

<script>
  import Form from "#lib/components/Form/Form.svelte";
  import Field from "#lib/components/Field/Field.svelte";
  import TextInput from "#lib/components/TextInput/TextInput.svelte";
  import Button from "#lib/components/Button/Button.svelte";

  let name = $state("");
</script>

<Form label="Contact form" onsubmit={handleSubmit}>
  <Field label="Full name" required>
    <TextInput id="name" label="Full name" bind:value={name} required />
  </Field>
  <Button type="submit">Save</Button>
</Form>

Field a gemmer an label avel perthynas y honan yn le darn lavell nessys — passewgh hi unnweyth, war Fieldha TextInputkehevelys war label a re an hanow hedhesys. TextInput's value yw $bindable perthynas rune, rag henna bind:value a re dhis kesyanns diwo-fordh yn unnweyth.

Gwiriys 2026-08-29: an snippet ewn ma a veu kesolyes dre svelte/server ha gwiriys rag unn, kevrys yn ewn <label for> — kynsa towl a nesas dyvers Label a-berth Field, a dhyskwedhas dew lavell (unn gwag) drefen Field seulajys a dhyskwedh y honan dhiworth an label perthynas. An fordh furv-kestava kesstrewys yw an keth patrom, previys gans e2e ha axe gwir.

Hwithrewgh dha oberenn: kerdhewgh an app ha'n furv a hevel plen — yn ewn herwydh bryntyans: an stylyans yw hwath a-rag. Gwaskewgh Tab: fokus a wayn dres pub kontroll, an lavell yw displetys, ha'n danvon a ober. An hwedhel yw gwrys; an semlant yw dhiso ha henna yw nessa.

Kamm 4 — Stylyewgh

Pubtra a-ugh a vydh dyskwedhys avel strewyans pur, parys rag dha stilyow. Stylyewgh an krogow klass — .button, .text-input, .label, .field — yn dha folen-stil bydhek, po kevrewgh tebel parys yn app.html: 

<link rel="stylesheet" href="/themes/dark.css" />

Gwrians dre bub ensampel a gerdh dre an class perthynas, neb yw keworrys dhe'n krok selys: <Button class="wide"> a dhyskwedh class="button wide".

Kamm 5 — Gwelewgh pubtra ow ’oberi

An App ensampel SvelteKit yw an keth rolyans stylys yn tien, gans displetyansow bew, previow Playwright e2e, ha linenn-selys hedhesadewder axe-core: 

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-sveltekit-examples
pnpm install && pnpm run dev

Kammow nessa

Govynnow war an fordh? An folen skoodhya yw leun a worthebow — ha mar pe kamm moy splann, leverewgh dhyn ha ni a wellha an dyskans yn lowen.