ਤਰਜੀਹ ਸਹਾਇਕ

ਤੁਸੀਂ ਕੀ ਬਣਾਓਗੇ

ਇੱਕ ਸੈਟਿੰਗ ਪੈਨਲ ਜਿੱਥੇ ਵਰਤੋਂਕਾਰ ਆਪਣੀ ਭਾਸ਼ਾ ਅਤੇ ਲਿਖਤ ਦਾ ਆਕਾਰ ਚੁਣਦੇ ਹਨ — ਚੋਣਾਂ ਜੋ ਪੂਰੇ ਦਸਤਾਵੇਜ਼ ਉੱਤੇ ਲਾਗੂ ਹੁੰਦੀਆਂ ਹਨ, ਮੁਲਾਕਾਤਾਂ ਵਿਚਕਾਰ ਕਾਇਮ ਰਹਿੰਦੀਆਂ ਹਨ ਅਤੇ ਤੁਹਾਨੂੰ ਦੋ ਕੰਪੋਨੈਂਟ ਅਤੇ ਕੁਝ ਸਤਰਾਂ CSS ਦੀ ਕੀਮਤ ਪੈਂਦੀ ਹੈ। ਲਗਭਗ 15 ਮਿੰਟ।

ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ

ਪਹਿਲਾਂ ਪੂਰਾ ਕਰੋ ਫ਼੍ਰੇਮਵਰਕ ਟਿਊਟੋਰਿਅਲ ਆਪਣੇ ਸਟੈਕ ਲਈ। ਹੇਠਲੇ ਨਮੂਨੇ Svelte ਦੇ ਹਨ; React, Vue, Angular, HTML, Nunjucks ਅਤੇ Blazor ਸਹਾਇਕ ਇਕਰਾਰ-ਦਰ-ਇਕਰਾਰ ਮੇਲ ਖਾਂਦੇ ਹਨ।

ਉਹ ਆਕਾਰ ਜੋ ਉਹ ਸਾਂਝਾ ਕਰਦੇ ਹਨ

• ਇੱਕ ਹੈੱਡਲੈੱਸ ਆਈਕਨ ਬਟਨ ਜੋ WAI-ARIA APG ਲਿਸਟਬਾਕਸ ਖੋਲ੍ਹਦਾ ਹੈ (ਜਾਂ date-time-picker ਲਈ ਮਿਤੀ-ਚੋਣਕਾਰ ਡਾਇਲਾਗ) — ਕੋਈ ਮੂਲ <select>ਨਹੀਂ, ਤਾਂ ਜੋ ਹਰ ਫ਼੍ਰੇਮਵਰਕ ਨੂੰ ਇੱਕੋ ਜਿਹਾ ਕੀਬੋਰਡ ਵਿਹਾਰ ਅਤੇ ਸਟਾਈਲਿੰਗ ਹੁੱਕ ਮਿਲਣ।
• ਹਰ ਪੈਕੇਜ ਲਈ ਇੱਕ ਕਲਾਸ ਹੁੱਕ (.locale-picker, .text-size-picker, .share-picker, .date-time-picker), ਜ਼ੀਰੋ CSS ਭੇਜਿਆ ਜਾਂਦਾ ਹੈ।
• SSR-ਸੁਰੱਖਿਅਤ: DOM ਲਿਖਤਾਂ ਸਿਰਫ਼ mount/effect ਜੀਵਨ-ਚੱਕਰ ਵਿੱਚ ਹੁੰਦੀਆਂ ਹਨ।
• i18n-ਸਾਫ਼: ਵਰਤੋਂਕਾਰ ਨੂੰ ਦਿਸਦੀ ਹਰ ਸਤਰ ਇੱਕ prop ਹੈ।
• Svelte (ਮਿਆਰੀ), React, Vue, Angular, HTML ਕਸਟਮ ਐਲੀਮੈਂਟ, Nunjucks ਅਤੇ Blazor ਲਈ ਉਪਲਬਧ — ਹਰ ਇੱਕ ਵਿੱਚ ਇੱਕੋ ਇਕਰਾਰ।

theme-picker, locale-picker ਅਤੇ text-size-picker ਹਰ ਇੱਕ ਇੱਕ ਵਰਤੋਂਕਾਰ ਤਰਜੀਹ ਦਾ ਸ਼ੁਰੂ ਤੋਂ ਅੰਤ ਤੱਕ ਮਾਲਕ ਹੈ (ਚੋਣ, DOM ਉੱਤੇ ਲਾਗੂ ਕਰਨਾ, ਚੋਣਵਾਂ localStorage ਸਥਿਰਤਾ storageKey prop ਰਾਹੀਂ)। share-picker ਅਤੇ date-time-picker ਕਿਸਮ ਵਿੱਚ ਵੱਖਰੇ ਹਨ: share-picker ਇੱਕ ਕਾਰਵਾਈ ਦਾ ਮਾਲਕ ਹੈ — ਇਹ ਦਸਤਾਵੇਜ਼ ਉੱਤੇ ਕੁਝ ਲਾਗੂ ਨਹੀਂ ਕਰਦਾ ਅਤੇ ਕੁਝ ਸਾਂਭਦਾ ਨਹੀਂ — ਅਤੇ date-time-picker ਇੱਕ ਫ਼ਾਰਮ ਮੁੱਲਦਾ ਮਾਲਕ ਹੈ, ਕਿਉਂਕਿ ਫ਼ਾਰਮ ਵਿੱਚ ਮਿਤੀ ਡੇਟਾ ਹੈ, ਤਰਜੀਹ ਨਹੀਂ।

locale-picker — ਭਾਸ਼ਾ ਅਤੇ ਦਿਸ਼ਾ

ਵਰਤੋਂਕਾਰ ਨੂੰ ਇੱਕ ਲੋਕੇਲ ਚੁਣਨ ਦਿੰਦਾ ਹੈ, ਫਿਰ ਲਿਖਦਾ ਹੈ lang ਅਤੇ dir ਦਸਤਾਵੇਜ਼ ਦੀ ਜੜ੍ਹ ਉੱਤੇ ਤਾਂ ਜੋ ਤੁਹਾਡੀ i18n ਲਾਇਬ੍ਰੇਰੀ, ਤੁਹਾਡੀ CSS ਅਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਸਾਰੇ ਪਿੱਛੇ ਚੱਲਣ। ਅਰਬੀ, ਇਬਰਾਨੀ ਅਤੇ ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਲਿਖੀਆਂ ਹੋਰ ਲਿਪੀਆਂ ਲਈ RTL ਆਪਣੇ-ਆਪ ਪਛਾਣਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਸਿਰਫ਼ ਸੰਕੇਤ ਦੇਣ ਉੱਤੇ ਕੇਂਦਰਿਤ ਹੈ — ਅਨੁਵਾਦ ਤੁਹਾਡੀ i18n ਲਾਇਬ੍ਰੇਰੀ ਸੰਭਾਲਦੀ ਹੈ।

<script>
  import LocalePicker from "@lilydesignsystem/svelte-locale-picker";

  let locale = $state("en-US");
</script>

<LocalePicker
  label="Language"
  locales={["en-US", "fr", "ar", "he", "ja"]}
  bind:value={locale}
  storageKey="my-app-locale"
/>

ਚੋਣਾਂ ਨੂੰ ਲੋਕੇਲ ਨਾਵਾਂ ਦੀ ਇੱਕ ਅੰਦਰੂਨੀ ਸਾਰਣੀ ਤੋਂ ਲੇਬਲ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ (ਇਸ ਰਾਹੀਂ ਓਵਰਰਾਈਡ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ localeLabels), ਹਰ ਚੋਣ ਆਪਣਾ lang ਗੁਣ ਰੱਖਦੀ ਹੈ ਤਾਂ ਜੋ ਸਕ੍ਰੀਨ ਰੀਡਰ "Français" ਨੂੰ ਫ਼ਰਾਂਸੀਸੀ ਵਿੱਚ ਉਚਾਰਨ, ਅਤੇ ਅੰਡਰਸਕੋਰ ਵਾਲੇ ਕੋਡ ਜਿਵੇਂ en_US ਬਿਨਾਂ ਨੁਕਸਾਨ BCP 47 ਵਿੱਚ ਅਤੇ ਵਾਪਸ ਬਦਲੇ ਜਾਂਦੇ ਹਨ en-US। ਜੋੜੋ onChange (ਜਾਂ ਬੰਨ੍ਹੇ ਮੁੱਲ) ਨੂੰ i18next, Paraglide, vue-i18n ਜਾਂ ਜੋ ਵੀ ਤੁਸੀਂ ਵਰਤਦੇ ਹੋ।

text-size-picker — ਪਾਠਕ ਦੁਆਰਾ ਕਾਬੂ ਕੀਤਾ ਆਕਾਰ

ਪਹੁੰਚਯੋਗਤਾ ਦੀ ਜਿੱਤ ਜੋ ਮਿੰਟਾਂ ਵਿੱਚ ਹੁੰਦੀ ਹੈ: ਸਹਾਇਕ ਦਸਤਾਵੇਜ਼ ਦੀ ਜੜ੍ਹ ਉੱਤੇ data-text-size="{slug}" ਸੈੱਟ ਕਰਦਾ ਹੈ ਅਤੇ ਤੁਹਾਡੀ CSS ਹਰ ਮੁੱਲ ਨੂੰ ਇੱਕ ਆਕਾਰ ਨਾਲ ਜੋੜਦੀ ਹੈ।

<script>
  import TextSizePicker from "@lilydesignsystem/svelte-text-size-picker";
</script>

<TextSizePicker
  label="Text size"
  sizes={["small", "medium", "large", "x-large"]}
  storageKey="my-app-text-size"
/>

:root[data-text-size="small"]   { font-size: 87.5%; }
:root[data-text-size="medium"]  { font-size: 100%; }
:root[data-text-size="large"]   { font-size: 112.5%; }
:root[data-text-size="x-large"] { font-size: 125%; }

ਆਪਣਾ ਲੇਆਉਟ ਇਸ ਵਿੱਚ ਮਾਪੋ rem ਅਤੇ ਪੂਰੀ ਐਪ ਵਰਤੋਂਕਾਰ ਦੀ ਚੋਣ ਨਾਲ ਵਧਦੀ-ਘਟਦੀ ਹੈ। ਲੇਬਲ slugs ਤੋਂ ਵੱਡੇ ਪਹਿਲੇ ਅੱਖਰ ਨਾਲ ਬਣਦੇ ਹਨ ("X Large") ਜਾਂ ਇਸ ਨਾਲ ਓਵਰਰਾਈਡ ਹੁੰਦੇ ਹਨ sizeLabels.

share-picker — ਇਹ ਪੰਨਾ ਭੇਜੋ

ਇੱਕ ਇਕੱਲੇ ਗਲਿਫ਼ ਵਾਲਾ ਬਟਨ ਜੋ ਜਿੱਥੇ ਹੋਵੇ ਉੱਥੇ ਡਿਵਾਈਸ ਦੀ ਮੂਲ ਸਾਂਝਾ ਕਰਨ ਵਾਲੀ ਸ਼ੀਟ ਖੋਲ੍ਹਦਾ ਹੈ, ਅਤੇ ਨਹੀਂ ਤਾਂ ਤੁਹਾਡੇ ਦਿੱਤੇ ਟਿਕਾਣਿਆਂ ਦੀ ਸੂਚੀ ਉੱਤੇ ਆ ਜਾਂਦਾ ਹੈ, ਨਾਲ URL ਕਾਪੀ ਕਰਨ ਦੀ ਕਾਰਵਾਈ। ਇਹ ਕੋਈ ਸੋਸ਼ਲ-ਨੈੱਟਵਰਕ URL ਨਹੀਂ ਭੇਜਦਾ — ਕਿਹੜੇ ਨੈੱਟਵਰਕ ਤੁਹਾਡੇ ਉਤਪਾਦ ਵਿੱਚ ਹੋਣ, ਇਹ ਤੁਹਾਡਾ ਫ਼ੈਸਲਾ ਹੈ, ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਦਾ ਨਹੀਂ।

<script>
  import SharePicker from "@lilydesignsystem/svelte-share-picker";

  const targets = [
    { id: "mastodon", label: "Mastodon",
      href: (url, title) => `https://mastodon.social/share?text=${encodeURIComponent(title)}%20${encodeURIComponent(url)}` },
    { id: "email", label: "Email",
      href: (url, title) => `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(url)}`, newTab: false },
  ];
</script>

<SharePicker
  label="Share this page"
  title="An article worth reading"
  {targets}
  copyLabel="Copy link"
  copiedLabel="Link copied"
/>

url ਦਾ ਮੂਲ ਮੁੱਲ ਹੈ location.hrefਇਸ ਲਈ ਆਮ ਮਾਮਲੇ ਵਿੱਚ ਕਿਸੇ ਜੋੜ-ਤੋੜ ਦੀ ਲੋੜ ਨਹੀਂ। ਇੱਕ ਰਾਹ ਇਸ ਨਾਲ ਮਜਬੂਰ ਕਰੋ strategy="list" ਜਾਂ strategy="native" ਜਦੋਂ ਟੈਸਟਾਂ ਜਾਂ ਸਕ੍ਰੀਨਸ਼ਾਟਾਂ ਲਈ ਪਲੇਟਫ਼ਾਰਮਾਂ ਵਿੱਚ ਇਕਸਾਰ ਵਿਹਾਰ ਚਾਹੀਦਾ ਹੋਵੇ।

date-time-picker — ਇੱਕ ਮਿਤੀ, ਇੱਕ ਸਮਾਂ, ਜਾਂ ਦੋਵੇਂ

ਇੱਕ ਲਿਖਤ ਖੇਤਰ ਜਿਸ ਵਿੱਚ ਤੁਸੀਂ ਟਾਈਪ ਕਰ ਸਕਦੇ ਹੋ, ਨਾਲ ਇੱਕ ਆਈਕਨ ਬਟਨ ਜੋ WAI-ARIA APG ਮਿਤੀ-ਚੋਣਕਾਰ ਡਾਇਲਾਗ ਖੋਲ੍ਹਦਾ ਹੈ। ਬਣਤਰ ਤੋਂ ਹੀ ਲੋਕੇਲ ਮੁਤਾਬਕ ਸਹੀ — ਮਹੀਨਿਆਂ ਦੇ ਨਾਮ, ਹਫ਼ਤੇ ਦੇ ਦਿਨਾਂ ਦੇ ਨਾਮ, ਹਫ਼ਤੇ ਦਾ ਪਹਿਲਾ ਦਿਨ ਅਤੇ 12 ਜਾਂ 24 ਘੰਟੇ ਦੀ ਘੜੀ ਸਭ ਇੱਥੋਂ ਆਉਂਦੇ ਹਨ Intl — ਅਤੇ ਮੁੱਲ ਹਮੇਸ਼ਾ ਕ੍ਰਮ-ਯੋਗ, ਸਮਾਂ-ਖੇਤਰ-ਰਹਿਤ ISO ਸਤਰ ਹੁੰਦਾ ਹੈ: "2026-03-15" ਲਈ mode="date", "09:30" ਲਈ mode="time", "2026-03-15T09:30" ਲਈ mode="datetime".

<script>
  import DateTimePicker from "@lilydesignsystem/svelte-date-time-picker";

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

<DateTimePicker
  inputId="appointment"
  name="appointment"
  label="Choose an appointment date"
  locale="en-GB"
  bind:value={appointment}
  labels={{
    previousYear: "Previous year",
    previousMonth: "Previous month",
    nextMonth: "Next month",
    nextYear: "Next year",
    confirm: "OK",
    cancel: "Cancel",
  }}
/>

ISO ਮੁੱਲ ਉਹੀ ਹੈ ਜੋ <input type="date"> ਭੇਜਦਾ ਹੈ, ਇਸ ਲਈ ਤੁਸੀਂ ਆਪਣੇ ਬੈਕਐਂਡ ਨੂੰ ਛੂਹੇ ਬਿਨਾਂ ਮੂਲ ਕੰਟਰੋਲ ਅੰਦਰ ਜਾਂ ਬਾਹਰ ਬਦਲ ਸਕਦੇ ਹੋ।

motion-picker — ਘਟਾਈ ਹਰਕਤ ਦਾ ਸਤਿਕਾਰ ਕਰੋ

ਸਹਾਇਕ ਦਸਤਾਵੇਜ਼ ਦੀ ਜੜ੍ਹ ਉੱਤੇ data-motion="{slug}" ਸੈੱਟ ਕਰਦਾ ਹੈ। ਇਸਦਾ ਪਹਿਲਾ ਮੁੱਲ ਮਿਲਣ ਵਾਲੇ ਦੇ ਆਪਰੇਟਿੰਗ ਸਿਸਟਮ ਦੀ prefers-reduced-motion ਸੈਟਿੰਗ ਤੋਂ ਆਉਂਦਾ ਹੈ — ਹਮੇਸ਼ਾ, ਬਿਨਾਂ ਕਿਸੇ ਚੋਣ-ਫ਼ਲੈਗ ਦੇ, ਕਿਉਂਕਿ ਹਰਕਤ ਇੱਕ ਅਸਲੀ ਪਹੁੰਚਯੋਗਤਾ ਦੀ ਲੋੜ ਹੈ (WCAG 2.3.3)। ਤੁਹਾਡੀ CSS ਅਤੇ ਸਕ੍ਰਿਪਟਾਂ ਤੈਅ ਕਰਦੀਆਂ ਹਨ ਕਿ ਕੀ ਦਬਾਇਆ ਜਾਵੇ।

<script>
  import MotionPicker from "@lilydesignsystem/svelte-motion-picker";
</script>

<MotionPicker
  label="Motion"
  motions={["no-preference", "reduce"]}
  storageKey="my-app-motion"
/>

:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

search-picker — ਇੱਕ ਖੋਜ ਡੱਬਾ ਜੋ ਰਾਹ ਵਿੱਚ ਨਹੀਂ ਆਉਂਦਾ

ਇੱਕ ਆਈਕਨ ਬਟਨ ਜੋ ਖੋਜ ਖੇਤਰ ਖੋਲ੍ਹਦਾ ਹੈ। Return ਦਬਾਉਣ ਨਾਲ, ਜਾਂ ਖੇਤਰ ਦੇ ਨਾਲ ਵਾਲੇ ⏎ ਬਟਨ ਨਾਲ, ਇੱਕ ਸਾਦੀ GET ਬੇਨਤੀ ਰਾਹੀਂ ਇੱਥੇ ਜਾਂਦਾ ਹੈ /?<text> (ਲਿਖਤ ਛਾਂਟੀ ਅਤੇ URI-ਏਨਕੋਡ ਕੀਤੀ ਜਾਂਦੀ ਹੈ; ਖਾਲੀ ਪੁੱਛਗਿੱਛ ਕਿਤੇ ਨਹੀਂ ਜਾਂਦੀ)। ਇਸਦੇ ਤਿੰਨ ਪਹੁੰਚਯੋਗ ਨਾਮ ਲਾਜ਼ਮੀ ਹਨ, ਕਿਉਂਕਿ ਸਹਾਇਕ ਅੰਗਰੇਜ਼ੀ ਨਹੀਂ ਭੇਜਦਾ।

<script>
  import SearchPicker from "@lilydesignsystem/svelte-search-picker";
  import { goto } from "$app/navigation";
</script>

<SearchPicker
  label="Search this site"
  inputLabel="Search terms"
  submitLabel="Search"
  placeholder="Search…"
  action="/search"
  navigate={(href) => goto(href)}
/>

action ਰਾਹ ਬਦਲਦਾ ਹੈ (/search?foo), ਅਤੇ navigate ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਐਪ ਦੇ ਅੰਦਰ ਰੱਖਦਾ ਹੈ; ਇਸ ਤੋਂ ਬਿਨਾਂ ਸਹਾਇਕ ਇਹ ਸੱਦਦਾ ਹੈ location.assign.

picker-bar — ਪੂਰੀ ਹੈੱਡਰ ਕਤਾਰ ਇੱਕੋ ਵਾਰ

picker-bar ਖੋਜ, ਥੀਮ, ਲੋਕੇਲ, ਲਿਖਤ ਆਕਾਰ ਅਤੇ ਸਾਂਝਾ ਕਰਨਾ ਇੱਕ ਕਤਾਰ ਵਿੱਚ ਦਿਖਾਉਂਦਾ ਹੈ, ਹਵਾਲਾ ਥੀਮਾਂ ਦੇ ਪੂਰੇ ਸੈੱਟ ਅਤੇ ਸੱਤ-ਪੜਾਅ ਲਿਖਤ ਪੈਮਾਨੇ ਨੂੰ ਪਹਿਲਾਂ ਤੋਂ ਜੋੜ ਕੇ। ਹਰ ਪਹੁੰਚਯੋਗ ਨਾਮ ਇੱਕ ਲਾਜ਼ਮੀ labels ਵਸਤੂ ਵਿੱਚ ਆਉਂਦਾ ਹੈ।

<script>
  import PickerBar from "@lilydesignsystem/svelte-picker-bar";
</script>

<PickerBar
  labels={{
    search: "Search", searchInput: "Search terms", searchSubmit: "Search",
    theme: "Theme", locale: "Language", textSize: "Text size", share: "Share",
  }}
  themesUrl="/themes/"
  locales={["en", "fr", "es"]}
  shareTargets={targets}
/>

ਕਿਸੇ ਵੀ ਲਪੇਟੇ ਚੋਣਕਾਰ ਤੱਕ ਇਸ ਨਾਲ ਪਹੁੰਚੋ searchProps, themeProps, localeProps, textSizeProps ਅਤੇ shareProps.

ਟੂਲਟਿੱਪ ਅੰਦਰੋਂ ਮੌਜੂਦ ਹਨ

ਹਰ ਚੋਣਕਾਰ ਆਪਣਾ ਲੇਬਲ ਇੱਕ ਟੂਲਟਿੱਪ ਵਿੱਚ ਦਿਖਾਉਂਦਾ ਹੈ ਜਦੋਂ ਪੁਆਇੰਟਰ ਉਸਦੇ ਬਟਨ ਉੱਤੇ ਰੁਕਦਾ ਹੈ ਜਾਂ ਬਟਨ ਉੱਤੇ ਕੀਬੋਰਡ ਫੋਕਸ ਹੁੰਦਾ ਹੈ। ਟੂਲਟਿੱਪ ਉਦੋਂ ਤੱਕ ਰਹਿੰਦੀ ਹੈ ਜਦੋਂ ਪੁਆਇੰਟਰ ਉਸ ਉੱਤੇ ਜਾਂਦਾ ਹੈ, Escape ਇਸਨੂੰ ਬੰਦ ਕਰਦਾ ਹੈ ਭਾਵੇਂ ਫੋਕਸ ਕਿਤੇ ਵੀ ਹੋਵੇ, ਅਤੇ ਜਦੋਂ ਚੋਣਕਾਰ ਦਾ ਪੌਪਅੱਪ ਖੁੱਲ੍ਹਾ ਹੋਵੇ ਇਹ ਕਦੇ ਨਹੀਂ ਦਿਖਦੀ। ਇਹ ਬਟਨ ਦੇ ਪਹੁੰਚਯੋਗ ਨਾਮ ਵਾਲੀ ਹੀ ਲਿਖਤ ਰੱਖਦੀ ਹੈ, ਇਸ ਲਈ ਨਾ ਕੁਝ ਸੰਰਚਿਤ ਕਰਨਾ ਹੈ ਨਾ ਦੋ ਵਾਰ ਅਨੁਵਾਦ ਕਰਨਾ; ਹਵਾਲਾ ਥੀਮ ਇਸਨੂੰ ਸਟਾਈਲ ਕਰਦੇ ਹਨ।

ਇੱਕ ਥਾਂ ਸੈਟਿੰਗ ਪੈਨਲ

ਚਾਰ ਤਰਜੀਹ ਸਹਾਇਕ ਕੁਦਰਤੀ ਤੌਰ ਉੱਤੇ ਮਿਲ ਜਾਂਦੇ ਹਨ:

<fieldset class="fieldset">
  <legend>Preferences</legend>
  <ThemePicker    label="Theme"     themesUrl="/themes/" themes={themes} storageKey="pref-theme" />
  <LocalePicker   label="Language"  locales={locales}    storageKey="pref-locale" />
  <TextSizePicker label="Text size" sizes={sizes}        storageKey="pref-text-size" />
  <MotionPicker   label="Motion"    motions={motions}    storageKey="pref-motion" />
</fieldset>

ਇਹ ਕਿੱਥੋਂ ਮਿਲਦੇ ਹਨ

# one directory per package in the monorepo, e.g.
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-theme-picker
# or lily-design-system-react-theme-picker, -vue- / -angular- / -html- / -web-components- / -nunjucks- / -blazor-

ਹਰ ਪੈਕੇਜ ਦੀ ਆਪਣੀ spec ਹੈ, spec ਦੀਆਂ ਧਾਰਾਵਾਂ ਨਾਲ ਜੁੜੇ ਟੈਸਟ, ਚੱਲਣਯੋਗ ਉਦਾਹਰਨਾਂ (SSR ਕੁੱਕੀ ਪੈਟਰਨਾਂ ਸਮੇਤ), ਅਤੇ ਬਿਲਡ + ਪ੍ਰਕਾਸ਼ਨ ਪਾਈਪਲਾਈਨ। Svelte ਪੈਕੇਜ ਮਿਆਰੀ ਹਨ; ਸ਼ੱਕ ਹੋਵੇ ਤਾਂ ਉਨ੍ਹਾਂ ਦੇ ਇਕਰਾਰ ਜਿੱਤਦੇ ਹਨ।

ਅਗਲੇ ਕਦਮ

• ਕੰਪੋਨੈਂਟ ਕੈਟਾਲਾਗ — ਪੂਰੇ 571 ਕੰਪੋਨੈਂਟਾਂ ਦਾ ਹਵਾਲਾ।
• ਮਦਦ — ਸਮੱਸਿਆ-ਨਿਵਾਰਨ ਅਤੇ FAQ।
• Lily ਕਿਉਂ — ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਹਮਾਇਤ ਕਿਵੇਂ ਕਰੀਏ।

ਰਾਹ ਵਿੱਚ ਸਵਾਲ ਹਨ? ਮਦਦ ਪੰਨਾ ਜਵਾਬਾਂ ਨਾਲ ਭਰਿਆ ਹੈ — ਅਤੇ ਜੇ ਕੋਈ ਕਦਮ ਹੋਰ ਸਾਫ਼ ਹੋ ਸਕਦਾ ਹੈ, ਸਾਨੂੰ ਦੱਸੋ ਅਤੇ ਅਸੀਂ ਖ਼ੁਸ਼ੀ ਨਾਲ ਟਿਊਟੋਰਿਅਲ ਸੁਧਾਰਾਂਗੇ।