;
20 | };
21 |
22 | export {
23 | Root,
24 | //
25 | Root as Textarea,
26 | type TextareaEvents,
27 | type FormTextareaEvent
28 | };
29 |
--------------------------------------------------------------------------------
/src/lib/components/ui/tooltip/index.ts:
--------------------------------------------------------------------------------
1 | import { Tooltip as TooltipPrimitive } from 'bits-ui';
2 | import Content from './tooltip-content.svelte';
3 |
4 | const Provider = TooltipPrimitive.Provider;
5 | const Root = TooltipPrimitive.Root;
6 | const Trigger = TooltipPrimitive.Trigger;
7 | const Arrow = TooltipPrimitive.Arrow;
8 | const Portal = TooltipPrimitive.Portal;
9 |
10 | export {
11 | Arrow,
12 | Content,
13 | Portal,
14 | Provider,
15 | Root,
16 | Root as Tooltip,
17 | Arrow as TooltipArrow,
18 | Content as TooltipContent,
19 | Portal as TooltipPortal,
20 | Provider as TooltipProvider,
21 | Trigger as TooltipTrigger,
22 | Trigger
23 | };
24 |
--------------------------------------------------------------------------------
/src/lib/components/ui/window/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Window } from './window.svelte';
2 |
--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | // place files you want to import through the `$lib` alias in this folder.
2 |
--------------------------------------------------------------------------------
/src/lib/stores.ts:
--------------------------------------------------------------------------------
1 | import { writable } from 'svelte/store';
2 |
3 | function create_command_store(initial_state: boolean) {
4 | const command = writable(initial_state);
5 |
6 | function toggle() {
7 | command.update((n) => !n);
8 | }
9 |
10 | return {
11 | ...command,
12 | toggle
13 | };
14 | }
15 |
16 | export const command_open_state = create_command_store(false);
17 |
--------------------------------------------------------------------------------
/src/routes/avatar/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Avatar';
5 | const description =
6 | 'Avatars represent a user or a team. Stacked avatars represent a group of people';
7 |
8 | const pageMetaTags = Object.freeze({
9 | title,
10 | description,
11 | openGraph: {
12 | title,
13 | description
14 | }
15 | }) satisfies MetaTagsProps;
16 |
17 | return {
18 | pageMetaTags,
19 | title,
20 | description
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/avatar/placeholder.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
7 | RH
9 |
10 |
11 |
12 | DG
14 |
15 |
16 |
17 | SH
19 |
20 |
--------------------------------------------------------------------------------
/src/routes/badge/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Badge';
5 | const description =
6 | 'A label that emphasizes an element that requires attention, or helps categorize with other similar elements.';
7 |
8 | const pageMetaTags = Object.freeze({
9 | title,
10 | description,
11 | openGraph: {
12 | title,
13 | description
14 | }
15 | }) satisfies MetaTagsProps;
16 |
17 | return {
18 | pageMetaTags,
19 | title,
20 | description
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/badge/sizes.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | small
7 |
8 |
9 | medium
10 |
11 |
12 | large
13 |
14 |
--------------------------------------------------------------------------------
/src/routes/book/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Book';
5 | const description = 'A responsive book component.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/book/custom-color.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
10 |
--------------------------------------------------------------------------------
/src/routes/book/custom-illustration.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
11 |
--------------------------------------------------------------------------------
/src/routes/book/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
10 |
--------------------------------------------------------------------------------
/src/routes/book/width.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
10 |
--------------------------------------------------------------------------------
/src/routes/brands/+page.svelte:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/routes/button/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Button';
5 | const description =
6 | 'Trigger an action or event, such as submitting a form or displaying a dialog.';
7 |
8 | const pageMetaTags = Object.freeze({
9 | title,
10 | description,
11 | openGraph: {
12 | title,
13 | description
14 | }
15 | }) satisfies MetaTagsProps;
16 |
17 | return {
18 | pageMetaTags,
19 | title,
20 | description
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/button/affix-and-suffix.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 | Upload
8 | Upload
9 | Upload
10 |
11 |
--------------------------------------------------------------------------------
/src/routes/button/disabled.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Upload
7 | Upload
8 | Upload
9 |
10 |
--------------------------------------------------------------------------------
/src/routes/button/loading.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Upload
7 | Upload
8 | Upload
9 |
10 |
--------------------------------------------------------------------------------
/src/routes/button/rounded.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Upload
7 | Upload
8 | Upload
9 |
10 |
--------------------------------------------------------------------------------
/src/routes/button/sizes.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Upload
7 | Upload
8 | Upload
9 |
10 |
--------------------------------------------------------------------------------
/src/routes/button/variants.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Upload
7 | Upload
8 | Upload
9 | Upload
10 |
11 |
--------------------------------------------------------------------------------
/src/routes/calendar/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Calendar';
5 | const description = 'Displays a calendar from which users can select a date or range of dates.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/calendar/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
8 |
--------------------------------------------------------------------------------
/src/routes/calendar/presets.svelte:
--------------------------------------------------------------------------------
1 |
27 |
28 |
29 |
31 |
--------------------------------------------------------------------------------
/src/routes/calendar/range-calendar.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
14 |
--------------------------------------------------------------------------------
/src/routes/checkbox/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Checkbox';
5 | const description = 'A control that toggles between two options, checked or unchecked.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/checkbox/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Option 1
6 |
--------------------------------------------------------------------------------
/src/routes/checkbox/disabled.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Disabled
7 | Disabled Checked
8 | Disabled Indeterminate
9 |
10 |
--------------------------------------------------------------------------------
/src/routes/checkbox/indeterminate.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | Option 2
6 |
--------------------------------------------------------------------------------
/src/routes/choicebox/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Choicebox';
5 | const description =
6 | 'A larger form of Radio or Checkbox, where the user has a larger tap target and more details.';
7 |
8 | const pageMetaTags = Object.freeze({
9 | title,
10 | description,
11 | openGraph: {
12 | title,
13 | description
14 | }
15 | }) satisfies MetaTagsProps;
16 |
17 | return {
18 | pageMetaTags,
19 | title,
20 | description
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/choicebox/disabled.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
13 |
16 |
17 |
18 |
26 |
27 |
--------------------------------------------------------------------------------
/src/routes/choicebox/multi-select.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
9 |
--------------------------------------------------------------------------------
/src/routes/choicebox/single-select.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
9 |
--------------------------------------------------------------------------------
/src/routes/code-block/+page.svelte:
--------------------------------------------------------------------------------
1 | code-block
2 |
--------------------------------------------------------------------------------
/src/routes/collapse/+page.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
16 |
18 |
19 |
20 |
22 |
23 |
24 |
26 |
27 |
--------------------------------------------------------------------------------
/src/routes/collapse/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Collapse';
5 | const description =
6 | 'A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.';
7 |
8 | const pageMetaTags = Object.freeze({
9 | title,
10 | description,
11 | openGraph: {
12 | title,
13 | description
14 | }
15 | }) satisfies MetaTagsProps;
16 |
17 | return {
18 | pageMetaTags,
19 | title,
20 | description
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/collapse/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Question A
8 |
9 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
10 | labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
11 | laboris nisi ut aliquip ex ea commodo consequat.
12 |
13 |
14 |
15 | Question B
16 |
17 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
18 | pariatur.
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/routes/collapse/expanded.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Question A
8 |
9 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
10 | labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
11 | laboris nisi ut aliquip ex ea commodo consequat.
12 |
13 |
14 |
15 | Question B
16 |
17 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
18 | pariatur.
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/routes/collapse/small.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Question A
8 |
9 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
10 | labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
11 | laboris nisi ut aliquip ex ea commodo consequat.
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/routes/colors/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Colors';
5 | const description = 'Learn how to work with our color system. Right click to copy raw values.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/colors/borders.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
16 | New Project
17 |
18 |
--------------------------------------------------------------------------------
/src/routes/colors/demo.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
20 | {@render children()}
21 |
22 |
--------------------------------------------------------------------------------
/src/routes/colors/description-list.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 | {#each items as { title, description, color }}
11 |
12 |
{title}
14 | {description}
15 |
16 | {/each}
17 |
18 |
--------------------------------------------------------------------------------
/src/routes/colors/scales.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 | {#each Object.entries(scales) as [scale, colors]}
8 |
9 | {@render color_scale({ scale, colors })}
10 |
11 | {/each}
12 |
13 |
14 | {#snippet color_scale({ scale, colors }: { scale: string; colors: string[] })}
15 | {scale}
16 |
17 | {#each colors as color}
18 |
19 |
21 | {/each}
22 |
23 | {/snippet}
24 |
--------------------------------------------------------------------------------
/src/routes/combobox/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Combobox';
5 | const description = 'Filters large lists to selectable options based on the matching query.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/combobox/custom-empty-message.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
12 |
16 |
--------------------------------------------------------------------------------
/src/routes/context-menu/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Context Menu';
5 | const description =
6 | 'Displays a brief heading and subheading to communicate any additional information or context a user needs to continue.';
7 |
8 | const pageMetaTags = Object.freeze({
9 | title,
10 | description,
11 | openGraph: {
12 | title,
13 | description
14 | }
15 | }) satisfies MetaTagsProps;
16 |
17 | return {
18 | pageMetaTags,
19 | title,
20 | description
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/context-menu/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
9 | Right click
10 |
11 |
12 | Item one
13 | Item two
14 | Item three
15 | Item four
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/routes/context-menu/disabled-items.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
9 | Right click
10 |
11 |
12 | Item one
13 | Item two
14 | Item three
15 | Item four
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/routes/description/+page.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
14 |
15 |
--------------------------------------------------------------------------------
/src/routes/description/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Description';
5 | const description =
6 | 'Displays a brief heading and subheading to communicate any additional information or context a user needs to continue.';
7 |
8 | const pageMetaTags = Object.freeze({
9 | title,
10 | description,
11 | openGraph: {
12 | title,
13 | description
14 | }
15 | }) satisfies MetaTagsProps;
16 |
17 | return {
18 | pageMetaTags,
19 | title,
20 | description
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/description/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
13 |
18 |
20 |
21 |
22 |
24 |
25 |
--------------------------------------------------------------------------------
/src/routes/drawer/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Drawer';
5 | const description = 'Display content in a separate view from the existing context.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/drawer/custom-height.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Open
9 |
10 |
11 | A drawer title
12 |
13 | Drawer body
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/routes/drawer/default.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Open
9 |
10 |
11 | A drawer title
12 |
13 | Drawer body
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/routes/empty-state/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Empty State';
5 | const description =
6 | 'Fill spaces when no content has been added yet, or is temporarily empty due to the nature of the feature and should be designed to prevent confusion.';
7 |
8 | const pageMetaTags = Object.freeze({
9 | title,
10 | description,
11 | openGraph: {
12 | title,
13 | description
14 | }
15 | }) satisfies MetaTagsProps;
16 |
17 | return {
18 | pageMetaTags,
19 | title,
20 | description
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/empty-state/blank-slate.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
14 | Primary Action
15 |
17 |
--------------------------------------------------------------------------------
/src/routes/error/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Error';
5 | const description =
6 | 'Good error design is clear, useful, and friendly. Designing concise and accurate error messages unblocks users and builds trust by meeting people where they are.';
7 |
8 | const pageMetaTags = Object.freeze({
9 | title,
10 | description,
11 | openGraph: {
12 | title,
13 | description
14 | }
15 | }) satisfies MetaTagsProps;
16 |
17 | return {
18 | pageMetaTags,
19 | title,
20 | description
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/error/custom-label.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | This email address is already in use.
6 |
--------------------------------------------------------------------------------
/src/routes/error/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | This email address is already in use.
6 |
--------------------------------------------------------------------------------
/src/routes/error/sizes.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | This email is in use.
7 | This email is in use.
8 | This email is in use.
9 |
10 |
--------------------------------------------------------------------------------
/src/routes/error/with-an-error-property.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
13 |
14 |
16 |
17 |
18 |
20 |
21 |
--------------------------------------------------------------------------------
/src/routes/feedback/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Feedback';
5 | const description = 'Gather text feedback with an associated emotion.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/feedback/default.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
9 |
10 | This example is hidden because it is intended for only desktop.
11 |
12 |
--------------------------------------------------------------------------------
/src/routes/feedback/inline.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
13 |
--------------------------------------------------------------------------------
/src/routes/gauge/custom-color-range.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 | {#each Object.entries(colors) as c}
20 | {@const [value, _] = c}
21 |
24 |
--------------------------------------------------------------------------------
/src/routes/gauge/custom-secondary-color.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
12 |
--------------------------------------------------------------------------------
/src/routes/gauge/default-color-scale.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
10 |
--------------------------------------------------------------------------------
/src/routes/gauge/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
11 |
--------------------------------------------------------------------------------
/src/routes/gauge/label.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
14 |
--------------------------------------------------------------------------------
/src/routes/grid/+page.svelte:
--------------------------------------------------------------------------------
1 | grid
2 |
--------------------------------------------------------------------------------
/src/routes/icons/+page.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
11 |
--------------------------------------------------------------------------------
/src/routes/icons/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Icons';
5 | const description = 'A collection of icons used across Vercel products. Right click to copy.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/icons/transition.ts:
--------------------------------------------------------------------------------
1 | import { quintInOut } from 'svelte/easing';
2 | import { crossfade } from 'svelte/transition';
3 |
4 | export const [send, receive] = crossfade({
5 | duration: (d) => Math.sqrt(d * 200),
6 |
7 | fallback(node, _) {
8 | const style = getComputedStyle(node);
9 | const transform = style.transform === 'none' ? '' : style.transform;
10 |
11 | return {
12 | duration: 600,
13 | easing: quintInOut,
14 | css: (t) => `
15 | transform: ${transform} scale(${t});
16 | opacity: ${t}
17 | `
18 | };
19 | }
20 | });
21 |
--------------------------------------------------------------------------------
/src/routes/input/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Input';
5 | const description = 'Retrieve text input from a user.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/input/affix-and-suffix.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
20 |
--------------------------------------------------------------------------------
/src/routes/input/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
10 |
--------------------------------------------------------------------------------
/src/routes/input/disabled.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
9 |
--------------------------------------------------------------------------------
/src/routes/input/label.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
8 |
--------------------------------------------------------------------------------
/src/routes/input/search.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
15 |
16 |
18 |
19 |
20 |
22 |
23 |
24 |
26 |
27 |
--------------------------------------------------------------------------------
/src/routes/keyboard-input/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Keyboard Input';
5 | const description = 'Display keyboard input that triggers an action.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/keyboard-input/combination.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
13 |
14 |
16 |
17 |
18 |
20 |
21 |
--------------------------------------------------------------------------------
/src/routes/loading-dots/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Loading Dots';
5 | const description = 'Indicate an action running in the background.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/loading-dots/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
9 |
--------------------------------------------------------------------------------
/src/routes/loading-dots/with-text.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Loading
7 |
8 |
--------------------------------------------------------------------------------
/src/routes/menu/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Menu';
5 | const description =
6 | 'Dropdown menu opened via button. Supports typeahead and keyboard navigation.';
7 |
8 | const pageMetaTags = Object.freeze({
9 | title,
10 | description,
11 | openGraph: {
12 | title,
13 | description
14 | }
15 | }) satisfies MetaTagsProps;
16 |
17 | return {
18 | pageMetaTags,
19 | title,
20 | description
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/menu/custom-trigger.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 | M
11 |
12 |
13 |
14 |
15 | One
16 | Two
17 | Three
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/routes/menu/default.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | {#snippet child({ props })}
9 | Actions
10 | {/snippet}
11 |
12 |
13 |
14 | One
15 | Two
16 | Three
17 | Error
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/routes/menu/disabled-items.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Actions
9 |
10 |
11 | One
12 | Two
13 | Three
14 | Error
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/routes/menu/link-items.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 | {#snippet child({ props })}
15 | Actions
16 | {/snippet}
17 |
18 |
19 |
20 | {#each links as { href, label }}
21 |
22 | {#snippet child({ props })}
23 | {label}
24 | {/snippet}
25 |
26 | {/each}
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/src/routes/menu/menu-position.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Left Start
9 |
10 |
11 | One
12 | Two
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/routes/modal/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Modal';
5 | const description =
6 | 'Display popup content that requires attention or provides additional information.';
7 |
8 | const pageMetaTags = Object.freeze({
9 | title,
10 | description,
11 | openGraph: {
12 | title,
13 | description
14 | }
15 | }) satisfies MetaTagsProps;
16 |
17 | return {
18 | pageMetaTags,
19 | title,
20 | description
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/modal/default.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Open Modal
9 |
10 |
11 |
12 | Create Token
13 |
14 |
15 | Enter a unique name for your token to differentiate it from other tokens and then select the
16 | scope.
17 |
18 |
19 |
20 | Some content contained within the modal.
21 |
22 |
23 | Submit
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/src/routes/modal/disabled-actions.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Open Modal
9 |
10 |
11 |
12 | Modal
13 | This is a modal.
14 |
15 |
16 | Some content contained within the modal.
17 |
18 |
19 | Submit
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/routes/modal/single-button.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Open Modal
9 |
10 |
11 |
12 | Create Token
13 |
14 |
15 | Some content contained within the modal.
16 |
17 |
19 |
20 |
--------------------------------------------------------------------------------
/src/routes/note/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Note';
5 | const description = 'Display text that requires attention or provides additional information.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/note/action.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | This note details some information.
9 | {#snippet action()}
10 | Upgrade
11 | {/snippet}
12 |
13 |
14 | This note details a large amount information that could potentially wrap into two or more lines,
15 | forcing the height of the Note to be larger.
16 | {#snippet action()}
17 | Upgrade
18 | {/snippet}
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/routes/note/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | A small note.
7 | A default note.
8 | A large note.
9 |
10 |
--------------------------------------------------------------------------------
/src/routes/note/disabled.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | This note details a warning.
10 | {#snippet action()}
11 | Upgrade
12 | {/snippet}
13 |
14 |
15 | This filled note details some success information. Check
16 | Upgrade
19 | {/snippet}
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/routes/pagination/+page.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
14 |
15 |
--------------------------------------------------------------------------------
/src/routes/pagination/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Pagination';
5 | const description = 'Navigate to the previous or next page.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/pagination/default.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
17 |
27 |
28 |
29 | Increase
30 | Decrease
31 |
32 |
6 | Option 1
7 | Option 2
8 |
9 |
--------------------------------------------------------------------------------
/src/routes/radio/radio-disabled.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Option 1
7 | Option 2
8 |
9 |
--------------------------------------------------------------------------------
/src/routes/radio/radio-required.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
16 |
--------------------------------------------------------------------------------
/src/routes/radio/radio-standalone.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Option 1
7 |
9 |
--------------------------------------------------------------------------------
/src/routes/scroller/+page.svelte:
--------------------------------------------------------------------------------
1 | scroller
2 |
--------------------------------------------------------------------------------
/src/routes/select/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Select';
5 | const description = 'Display a dropdown list of items.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/select/disabled.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Disabled with placeholder
7 |
8 | Disabled
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/routes/show-more/+page.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
14 |
15 |
--------------------------------------------------------------------------------
/src/routes/show-more/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Show more';
5 | const description = 'Styling component to show expanded or collapsed content.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/show-more/default.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
6 |
12 |
--------------------------------------------------------------------------------
/src/routes/skeleton/wrapping-children.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | Hidden by skeleton
9 |
10 |
11 |
12 | Not hidden by skeleton
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/routes/snippet/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Snippet';
5 | const description = 'Display a snippet of copyable code for the command line.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/snippet/callback.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | alert('You copied the text!')}
7 | text="pnpm create svelte@latest"
8 | class="w-[300px]"
9 | />
10 |
--------------------------------------------------------------------------------
/src/routes/snippet/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
10 |
--------------------------------------------------------------------------------
/src/routes/spinner/+page.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
16 |
17 |
18 |
20 |
21 |
--------------------------------------------------------------------------------
/src/routes/spinner/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Spinner';
5 | const description =
6 | 'Indicate an action running in the background. Unlike the loading dots, this should generally be used to indicate loading feedback in response to a user action, like for buttons, pagination, etc.';
7 |
8 | const pageMetaTags = Object.freeze({
9 | title,
10 | description,
11 | openGraph: {
12 | title,
13 | description
14 | }
15 | }) satisfies MetaTagsProps;
16 |
17 | return {
18 | pageMetaTags,
19 | title,
20 | description
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/spinner/custom-size.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | stack
2 |
--------------------------------------------------------------------------------
/src/routes/status-dot/+page.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
16 |
17 |
18 |
20 |
21 |
--------------------------------------------------------------------------------
/src/routes/status-dot/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Status Dot';
5 | const description = 'Display an indicator of deployment status.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/status-dot/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
12 |
--------------------------------------------------------------------------------
/src/routes/status-dot/label.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
12 |
--------------------------------------------------------------------------------
/src/routes/switch/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Switch';
5 | const description = 'Displays a boolean value.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/switch/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
9 |
--------------------------------------------------------------------------------
/src/routes/switch/disabled.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
9 |
--------------------------------------------------------------------------------
/src/routes/switch/sizes.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
11 |
--------------------------------------------------------------------------------
/src/routes/table/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Table';
5 | const description = 'A semantic HTML table component';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/table/basic-table.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 | Col 1
9 | Col 2
10 | Col 3
11 |
12 |
13 |
14 |
15 | Value 1.1
16 | Value 1.2
17 | Value 1.3
18 |
19 |
20 | Value 2.1
21 | Value 2.2
22 | Value 2.3
23 |
24 |
25 | Value 3.1
26 | Value 3.2
27 | Value 3.3
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/src/routes/table/striped-table.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 | Col 1
9 | Col 2
10 | Col 3
11 |
12 |
13 |
14 |
15 | Value 1.1
16 | Value 1.2
17 | Value 1.3
18 |
19 |
20 | Value 2.1
21 | Value 2.2
22 | Value 2.3
23 |
24 |
25 | Value 3.1
26 | Value 3.2
27 | Value 3.3
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/src/routes/tabs/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Tabs';
5 | const description = 'Display tab content.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/tabs/default.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 | {#each tabs as { value }}
14 | {value}
15 | {/each}
16 |
17 |
18 | {#each tabs as { content, value }}
19 | {content}
20 | {/each}
21 |
22 |
--------------------------------------------------------------------------------
/src/routes/tabs/disable-specific-tabs.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 | {#each tabs as { title, value, disabled, tooltip }}
14 | {title}
15 | {/each}
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/routes/tabs/secondary.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 | {#each tabs as { title, value }}
14 | {title}
15 | {/each}
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/routes/tabs/with-icons.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 | {#each tabs as { title, value, icon }}
15 | {title}
16 | {/each}
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/routes/text/+page.svelte:
--------------------------------------------------------------------------------
1 | text
2 |
--------------------------------------------------------------------------------
/src/routes/textarea/+page.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
16 |
17 |
18 |
20 |
21 |
--------------------------------------------------------------------------------
/src/routes/textarea/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Textarea';
5 | const description = 'Retrieve multi-line user input.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/textarea/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
9 |
--------------------------------------------------------------------------------
/src/routes/textarea/disabled.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
10 |
--------------------------------------------------------------------------------
/src/routes/theme-switcher/+page.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
14 |
15 |
--------------------------------------------------------------------------------
/src/routes/theme-switcher/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Theme Switcher';
5 | const description = 'Component that allows users to switch between light and dark themes.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/theme-switcher/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | toast
2 |
--------------------------------------------------------------------------------
/src/routes/toggle/+page.svelte:
--------------------------------------------------------------------------------
1 | toggle
2 |
--------------------------------------------------------------------------------
/src/routes/tooltip/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Tooltip';
5 | const description =
6 | 'A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.';
7 |
8 | const pageMetaTags = Object.freeze({
9 | title,
10 | description,
11 | openGraph: {
12 | title,
13 | description
14 | }
15 | }) satisfies MetaTagsProps;
16 |
17 | return {
18 | pageMetaTags,
19 | title,
20 | description
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/routes/tooltip/custom-content.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | {#each sides as side}
10 |
11 | {side}
12 |
13 | The Evil Rabbit Jumped over the Fence .
14 |
15 |
16 | {/each}
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/routes/tooltip/default.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 | {#each tooltips as { side, content }}
15 |
16 | {side}
17 |
18 | {content}
19 |
20 |
21 | {/each}
22 |
24 |
--------------------------------------------------------------------------------
/src/routes/tooltip/no-delay.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 | {#each tooltips as { side, content }}
15 |
16 |
17 | {side}
18 |
19 |
20 | {content}
21 |
22 |
23 | {/each}
24 |
26 |
--------------------------------------------------------------------------------
/src/routes/tooltip/other.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 | No tip indicator
9 | The Evil Rabbit Jumped over the Fence.
10 |
11 |
12 |
13 | No center text
14 |
15 | The Evil Rabbit Jumped over the Fence multiple times.
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/routes/window/+page.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
14 |
15 |
--------------------------------------------------------------------------------
/src/routes/window/+page.ts:
--------------------------------------------------------------------------------
1 | import type { MetaTagsProps } from 'svelte-meta-tags';
2 |
3 | export function load() {
4 | const title = 'Window';
5 | const description = 'Display content inside of a generic window frame.';
6 |
7 | const pageMetaTags = Object.freeze({
8 | title,
9 | description,
10 | openGraph: {
11 | title,
12 | description
13 | }
14 | }) satisfies MetaTagsProps;
15 |
16 | return {
17 | pageMetaTags,
18 | title,
19 | description
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/routes/window/default.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
9 |
10 |
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shyakadavis/geist/d569656166e838b82759e7845b4261283be65f14/static/favicon.png
--------------------------------------------------------------------------------
/static/og.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shyakadavis/geist/d569656166e838b82759e7845b4261283be65f14/static/og.jpg
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-static';
2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors
7 | // for more information about preprocessors
8 | preprocess: vitePreprocess(),
9 |
10 | kit: {
11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
12 | // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters.
14 | adapter: adapter()
15 | },
16 | vitePlugin: { inspector: true }
17 | };
18 |
19 | export default config;
20 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true,
12 | "moduleResolution": "bundler"
13 | }
14 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
15 | // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
16 | //
17 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18 | // from the referenced tsconfig.json - TypeScript does not merge them in
19 | }
20 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import svg from '@poppanator/sveltekit-svg';
2 | import { sveltekit } from '@sveltejs/kit/vite';
3 | import { defineConfig } from 'vite';
4 |
5 | export default defineConfig({
6 | plugins: [sveltekit(), svg()]
7 | });
8 |
--------------------------------------------------------------------------------