Welcome to your library project
2 |Create your package using @sveltejs/package and preview/showcase your work with SvelteKit
3 |Visit kit.svelte.dev to read the documentation
4 | -------------------------------------------------------------------------------- /packages/theme/src/global/duration.ts: -------------------------------------------------------------------------------- 1 | export const durations = { 2 | 'ultra-fast': '50ms', 3 | 'faster': '100ms', 4 | 'fast': '150ms', 5 | 'normal': '200ms', 6 | 'slow': '300ms', 7 | 'slower': '400ms', 8 | 'ultra-slow': '500ms', 9 | } 10 | -------------------------------------------------------------------------------- /packages/core/src/lib/dialog/types.ts: -------------------------------------------------------------------------------- 1 | import type { HTMLAttributes } from 'svelte/elements'; 2 | 3 | export type DialogType = 'modal' | 'non-modal' | 'alert'; 4 | 5 | export type DialogProps = HTMLAttributes
9 |
11 |
--------------------------------------------------------------------------------
/packages/core/playwright.config.ts:
--------------------------------------------------------------------------------
1 | import type { PlaywrightTestConfig } from '@playwright/test';
2 |
3 | const config: PlaywrightTestConfig = {
4 | webServer: {
5 | command: 'npm run build && npm run preview',
6 | port: 4173
7 | },
8 | testDir: 'tests',
9 | testMatch: /(.+\.)?(test|spec)\.[jt]s/
10 | };
11 |
12 | export default config;
13 |
--------------------------------------------------------------------------------
/packages/core/src/app.d.ts:
--------------------------------------------------------------------------------
1 | // See https://kit.svelte.dev/docs/types#app
2 | // for information about these interfaces
3 | declare global {
4 | namespace App {
5 | // interface Error {}
6 | // interface Locals {}
7 | // interface PageData {}
8 | // interface PageState {}
9 | // interface Platform {}
10 | }
11 | }
12 |
13 | export {};
14 |
--------------------------------------------------------------------------------
/packages/core/src/lib/icons/arrow-up-regular.svelte:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/packages/core/src/lib/icons/checkmark-circle-filled.svelte:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/packages/core/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | storybook-static
3 |
4 | # Output
5 | .output
6 | .vercel
7 | /.svelte-kit
8 | /build
9 | /dist
10 |
11 | # OS
12 | .DS_Store
13 | Thumbs.db
14 |
15 | # Env
16 | .env
17 | .env.*
18 | !.env.example
19 | !.env.test
20 |
21 | # Vite
22 | vite.config.js.timestamp-*
23 | vite.config.ts.timestamp-*
24 |
25 | *storybook.log
--------------------------------------------------------------------------------
/packages/theme/svelte.config.js:
--------------------------------------------------------------------------------
1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
2 |
3 | /** @type {import('@sveltejs/kit').Config} */
4 | const config = {
5 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
6 | // for more information about preprocessors
7 | preprocess: vitePreprocess()
8 | };
9 |
10 | export default config;
11 |
--------------------------------------------------------------------------------
/packages/themes/svelte.config.js:
--------------------------------------------------------------------------------
1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
2 |
3 | /** @type {import('@sveltejs/kit').Config} */
4 | const config = {
5 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
6 | // for more information about preprocessors
7 | preprocess: vitePreprocess()
8 | };
9 |
10 | export default config;
11 |
--------------------------------------------------------------------------------
/packages/core/src/lib/dialog/dialog-header.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 | %sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/core/src/lib/button/menu-button/menu-button-item.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
5 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/packages/core/src/lib/button/compound-button/index.ts:
--------------------------------------------------------------------------------
1 | import { default as CompoundButtonRoot } from './compound-button-root.svelte';
2 | import { default as CompoundButtonBody } from './compound-button-body.svelte';
3 | import { default as CompoundButtonSecondaryContent } from './compound-button-secondary-content.svelte';
4 |
5 | export const CompoundButton = {
6 | Root: CompoundButtonRoot,
7 | Body: CompoundButtonBody,
8 | SecondaryContent: CompoundButtonSecondaryContent
9 | };
10 |
--------------------------------------------------------------------------------
/packages/core/src/lib/dialog/dialog-actions.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
14 |
16 |
--------------------------------------------------------------------------------
/packages/core/src/lib/field/field-message-success.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
15 |
17 | {/if}
18 |
19 |
24 |
--------------------------------------------------------------------------------
/packages/tailwindcss/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES6", // Or another suitable ECMAScript target
4 | "module": "ESNext", // Or your preferred module system (e.g., 'ES2020', 'ESNext')
5 | "declaration": true, // This is the key to generate .d.ts files
6 | "outDir": "./dist", // Optional: Specify the output directory
7 | "rootDir": "./src", // Optional: Specify where your source .ts files live
8 | "moduleResolution": "Bundler",
9 | "skipLibCheck": true
10 | },
11 | "include": ["./src/**/*.ts", "./src/**/*.js"], // Make sure it includes the path to your TypeScript source files
12 | "exclude": ["./node_modules"]
13 | }
14 |
--------------------------------------------------------------------------------
/packages/core/src/lib/app/root-backdrop-layer.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
25 |
27 |
--------------------------------------------------------------------------------
/packages/core/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | export * from './app';
2 | export * from './avatar';
3 | export * from './button';
4 | export * from './checkbox';
5 | export * from './dropdown';
6 | export * from './menu';
7 | export * from './combobox';
8 | export * from './input';
9 | export * from './icon';
10 | export * from './text';
11 | export * from './label';
12 | export * from './tooltip';
13 | export * from './card';
14 | export * from './divider';
15 | // export * from './theme'
16 | export * from './switch';
17 | export * from './radio';
18 | export * from './slider';
19 | export * from './dialog';
20 | export * from './accordion';
21 | export * from './link';
22 | export * from './spinner';
23 | export * from './field';
24 | export * from './layout';
25 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | parser: '@typescript-eslint/parser',
4 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:storybook/recommended', "plugin:svelte/recommended"],
5 | plugins: ['@typescript-eslint'],
6 | ignorePatterns: ['*.cjs'],
7 | overrides: [{
8 | files: ["*.svelte"],
9 | parser: "svelte-eslint-parser",
10 | parserOptions: {
11 | parser: "@typescript-eslint/parser",
12 | },
13 | }],
14 | settings: {
15 | 'svelte3/typescript': () => require('typescript')
16 | },
17 | parserOptions: {
18 | sourceType: 'module',
19 | ecmaVersion: 2020
20 | },
21 | env: {
22 | browser: true,
23 | es2017: true,
24 | node: true
25 | }
26 | };
27 |
--------------------------------------------------------------------------------
/packages/core/src/lib/radio/context.ts:
--------------------------------------------------------------------------------
1 | import { getContext, setContext } from 'svelte';
2 | import { type Writable } from 'svelte/store';
3 | import type { Layout } from './types';
4 |
5 | const key = 'fui_radio_group_context';
6 |
7 | export type RadioGroupContext = {
8 | disabled$: Writable
13 | ![]()
14 |
16 |
17 |
36 |
--------------------------------------------------------------------------------
/packages/core/src/lib/field/context.ts:
--------------------------------------------------------------------------------
1 | import { getContext, setContext } from 'svelte';
2 | import { type Writable, writable } from 'svelte/store';
3 | import type { FieldState } from './types,';
4 |
5 | export const SVELTE_FUI_FIELD_CONTEXT_KEY = 'svelte-fui-field-context-key';
6 |
7 | export type FieldContext = {
8 | state$: Writable
12 |
14 |
25 |
26 |
28 |
29 |
27 |
28 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/core/src/lib/button/types.ts:
--------------------------------------------------------------------------------
1 | import type { HTMLAttributes } from 'svelte/elements';
2 |
3 | export type ButtonShape = 'rounded' | 'circular' | 'square';
4 | export type ButtonAppearance = 'subtle' | 'outline' | 'secondary' | 'primary' | 'transparent';
5 | export type ButtonSize = 'sm' | 'md' | 'lg';
6 |
7 | export type ButtonProps = HTMLAttributes
35 |
37 |
38 |
40 |
--------------------------------------------------------------------------------
/packages/theme/src/sharedColorNames.ts:
--------------------------------------------------------------------------------
1 | /* Names of colors used in shared color palette alias tokens for status. */
2 | export const statusSharedColorNames = ['red', 'green', 'darkOrange', 'yellow', 'berry', 'lightGreen', 'marigold'] as const;
3 |
4 | /* Names of colors used in shared color palette alias tokens for persona. */
5 | export const personaSharedColorNames = [
6 | 'darkRed',
7 | 'cranberry',
8 | 'pumpkin',
9 | 'peach',
10 | 'gold',
11 | 'brass',
12 | 'brown',
13 | 'forest',
14 | 'seafoam',
15 | 'darkGreen',
16 | 'lightTeal',
17 | 'teal',
18 | 'steel',
19 | 'blue',
20 | 'royalBlue',
21 | 'cornflower',
22 | 'navy',
23 | 'lavender',
24 | 'purple',
25 | 'grape',
26 | 'lilac',
27 | 'pink',
28 | 'magenta',
29 | 'plum',
30 | 'beige',
31 | 'mink',
32 | 'platinum',
33 | 'anchor'
34 | ] as const;
35 |
36 | /* Names of colors not used in alias tokens but produced by token pipeline as global color tokens. */
37 | export const unusedSharedColorNames = [
38 | 'burgundy',
39 | 'bronze',
40 | 'orange',
41 | 'darkBrown',
42 | 'lime',
43 | 'darkTeal',
44 | 'cyan',
45 | 'lightBlue',
46 | 'darkBlue',
47 | 'darkPurple',
48 | 'orchid',
49 | 'hotPink',
50 | 'silver',
51 | 'charcoal'
52 | ] as const;
53 |
--------------------------------------------------------------------------------
/packages/theme/src/global/fonts.ts:
--------------------------------------------------------------------------------
1 | export const fontSizes = {
2 | 'base-100': '10px',
3 | 'base-200': '12px',
4 | 'base-300': '14px',
5 | 'base-400': '16px',
6 | 'base-500': '20px',
7 | 'base-600': '24px',
8 | 'hero-700': '28px',
9 | 'hero-800': '32px',
10 | 'hero-900': '40px',
11 | 'hero-1000': '68px',
12 | };
13 |
14 | export const lineHeights = {
15 | 'base-100': '14px',
16 | 'base-200': '16px',
17 | 'base-300': '20px',
18 | 'base-400': '22px',
19 | 'base-500': '28px',
20 | 'base-600': '32px',
21 |
22 | 'hero-700': '36px',
23 | 'hero-800': '40px',
24 | 'hero-900': '52px',
25 | 'hero-1000': '92px',
26 | };
27 |
28 | export const fontWeights = {
29 | 'regular': '400',
30 | 'medium': '500',
31 | 'semibold': '600',
32 | 'bold': '700',
33 | };
34 |
35 | export const fontFamilies = {
36 | 'base':
37 | "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
38 | 'monospace': "Consolas, 'Courier New', Courier, monospace",
39 | 'numeric':
40 | "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
41 | };
42 |
--------------------------------------------------------------------------------
/packages/theme/src/global/colorPalette.ts:
--------------------------------------------------------------------------------
1 | import {
2 | anchor,
3 | beige,
4 | berry,
5 | blue,
6 | brass,
7 | brown,
8 | cornflower,
9 | cranberry,
10 | darkGreen,
11 | darkOrange,
12 | darkRed,
13 | forest,
14 | gold,
15 | grape,
16 | green,
17 | lavender,
18 | lightGreen,
19 | lightTeal,
20 | lilac,
21 | magenta,
22 | marigold,
23 | mink,
24 | navy,
25 | peach,
26 | pink,
27 | platinum,
28 | plum,
29 | pumpkin,
30 | purple,
31 | red,
32 | royalBlue,
33 | seafoam,
34 | steel,
35 | teal,
36 | yellow
37 | } from './colors';
38 | import type { PersonaSharedColors, StatusSharedColors } from '../types';
39 |
40 | export const statusSharedColors: StatusSharedColors = {
41 | red,
42 | green,
43 | darkOrange,
44 | yellow,
45 | berry,
46 | lightGreen,
47 | marigold
48 | };
49 |
50 | export const personaSharedColors: PersonaSharedColors = {
51 | darkRed,
52 | cranberry,
53 | pumpkin,
54 | peach,
55 | gold,
56 | brass,
57 | brown,
58 | forest,
59 | seafoam,
60 | darkGreen,
61 | lightTeal,
62 | teal,
63 | steel,
64 | blue,
65 | royalBlue,
66 | cornflower,
67 | navy,
68 | lavender,
69 | purple,
70 | grape,
71 | lilac,
72 | pink,
73 | magenta,
74 | plum,
75 | beige,
76 | mink,
77 | platinum,
78 | anchor
79 | };
80 |
--------------------------------------------------------------------------------
/packages/tailwindcss/README.md:
--------------------------------------------------------------------------------
1 | # @svelte-fui/tailwindcss
2 |
3 | This project's Tailwind CSS preset for the Fluent Design System makes it simple to create modern, accessible, and customizable user interfaces. This integration enables developers to construct the desired look and feel without spending hours writing code. Using Tailwind's predefined classes, developers can readily modify the application's colors, fonts, sizes, and other design elements.
4 |
5 |
6 | # Usage
7 |
8 | First, install `@svelte-fui/tailwindcss`:
9 |
10 | ```shell
11 | // pnpm
12 | pnpm install @svelte-fui/tailwindcss
13 |
14 | //npm
15 | npm install @svelte-fui/tailwindcss
16 | ```
17 |
18 | Then, you add it to your tailwindcss's presets array:
19 |
20 | ```js
21 | // tailwindcss.config.js
22 |
23 | import { fuiPreset } from '@svelte-fui/tailwindcss';
24 |
25 | /** @type {import('tailwindcss').Config} */
26 | export default {
27 | presets: [fuiPreset],
28 | content: ['./src/**/*.{html,js,svelte, stories.svelte, ts}']
29 | };
30 | ```
31 |
32 | ```html
33 |
36 |
37 | This a simple label
39 |
40 |
37 |
39 |
40 |
49 |
--------------------------------------------------------------------------------
/packages/theme/src/global/brandColors.ts:
--------------------------------------------------------------------------------
1 | import type { BrandVariants } from '../types';
2 |
3 | export const brandWeb: BrandVariants = {
4 | '10': `#061724`,
5 | '20': `#082338`,
6 | '30': `#0a2e4a`,
7 | '40': `#0c3b5e`,
8 | '50': `#0e4775`,
9 | '60': `#0f548c`,
10 | '70': `#115ea3`,
11 | '80': `#0f6cbd`,
12 | '90': `#2886de`,
13 | '100': `#479ef5`,
14 | '110': `#62abf5`,
15 | '120': `#77b7f7`,
16 | '130': `#96c6fa`,
17 | '140': `#b4d6fa`,
18 | '150': `#cfe4fa`,
19 | '160': `#ebf3fc`,
20 | };
21 |
22 | export const brandTeams: BrandVariants = {
23 | '10': `#2b2b40`,
24 | '20': `#2f2f4a`,
25 | '30': `#333357`,
26 | '40': `#383966`,
27 | '50': `#3d3e78`,
28 | '60': `#444791`,
29 | '70': `#4f52b2`,
30 | '80': `#5b5fc7`,
31 | '90': `#7579eb`,
32 | '100': `#7f85f5`,
33 | '110': `#9299f7`,
34 | '120': `#aab1fa`,
35 | '130': `#b6bcfa`,
36 | '140': `#c5cbfa`,
37 | '150': `#dce0fa`,
38 | '160': `#e8ebfa`,
39 | };
40 |
41 | export const brandOffice: BrandVariants = {
42 | '10': `#29130b`,
43 | '20': `#4d2415`,
44 | '30': `#792000`,
45 | '40': `#99482b`,
46 | '50': `#a52c00`,
47 | '60': `#c33400`,
48 | '70': `#e06a3f`,
49 | '80': `#d83b01`,
50 | '90': `#dd4f1b`,
51 | '100': `#fe7948`,
52 | '110': `#ff865a`,
53 | '120': `#ff9973`,
54 | '130': `#e8825d`,
55 | '140': `#ffb498`,
56 | '150': `#f4beaa`,
57 | '160': `#f9dcd1`,
58 | };
59 |
--------------------------------------------------------------------------------
/packages/core/src/lib/text/text.stories.svelte:
--------------------------------------------------------------------------------
1 |
19 |
20 |
39 |
40 |
43 | This is an example of the Text component's usage.
44 |
45 |
29 |
31 | {:else}
32 | {placeholder}
30 |
43 | Loding Data...
44 |
45 |
43 |
47 |
44 |
46 |
44 |
46 |
43 |
49 |
10 |
22 |
24 |
25 |
66 |
--------------------------------------------------------------------------------
/packages/core/src/lib/spinner/spinner-default-icon.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
73 |
--------------------------------------------------------------------------------
/packages/core/src/lib/field/field-message.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 | {#if open}
14 |
20 | {/if}
21 |
22 |
59 |
--------------------------------------------------------------------------------
/packages/core/src/lib/switch/switch.stories.svelte:
--------------------------------------------------------------------------------
1 |
19 |
20 |
39 |
40 |
43 |
57 |
44 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
74 |
76 | Hello World ! Svelte is more than a Framework !
75 |
43 |
61 |
44 |
45 |
47 | Arabic
48 | English
49 | Spanish
50 | Italian
51 | Frensh
52 |
53 |
54 |
55 |
59 |
60 |
79 |
80 |
81 |
79 |
80 |
81 |
82 | Hello from the other side! [slotted]
83 |
84 |
85 |
61 |
77 |
62 |
76 |
63 |
65 |
66 |
67 | Text
68 |
69 |
70 |
72 |
73 | Text
74 |
75 |
60 |
62 | Hello World!
61 |
81 | Apple
82 | Orange
83 | Banana
84 | Pear
85 |
86 |
70 |
71 |
72 |
74 |
--------------------------------------------------------------------------------
/packages/core/src/lib/radio/radio-group.stories.svelte:
--------------------------------------------------------------------------------
1 |
49 |
50 |
72 |
73 |
76 |
77 | console.log(e)}>Apple
78 | console.log(e)}>Orange
79 | console.log(e)}>Banana
80 | console.log(e)}>Pear
81 |
82 |
83 |
55 |
57 | {/if}
58 |
59 |
89 |
91 | {/if}
92 |
74 |
76 |
86 |
88 |
89 |
93 |
--------------------------------------------------------------------------------
/packages/core/src/lib/app/root.svelte:
--------------------------------------------------------------------------------
1 |
61 |
62 |
63 | {#await tick() then _}
64 |
65 |
72 |
73 |
93 |
--------------------------------------------------------------------------------
/packages/core/src/lib/input/input-element.svelte:
--------------------------------------------------------------------------------
1 |
60 |
61 |
86 |
--------------------------------------------------------------------------------
/packages/core/src/lib/combobox/combobox-root.svelte:
--------------------------------------------------------------------------------
1 |
76 |
77 | {}}>
78 |
88 |
90 |
--------------------------------------------------------------------------------
/packages/core/src/lib/dropdown/dropdown-item.svelte:
--------------------------------------------------------------------------------
1 |
55 |
56 |
71 |
72 |
86 |
--------------------------------------------------------------------------------
/packages/core/src/lib/field/field.svelte:
--------------------------------------------------------------------------------
1 |
60 |
61 |
62 |
63 |
65 |
66 |
99 |
--------------------------------------------------------------------------------
/packages/core/src/lib/button/menu-button/menu-button.stories.svelte:
--------------------------------------------------------------------------------
1 |
45 |
46 |
65 |
66 |
69 |
90 |
70 |
71 |
72 |
73 | {#if hover}
74 |
79 |
81 |
82 |
83 | Item 1
84 | Item 2
85 | Item 3
86 |
87 |
88 |
89 | New
80 |
75 |
76 |
77 |
79 |
80 | Secondary content
82 |
83 |
84 |
85 |
86 |
87 |
89 |
90 |
91 | Example
81 |
81 |
82 | 
87 | Alert in Teams when a new document is uploaded in channel
88 | By Microsoft
89 |
90 |
91 |
93 |
94 |
95 |
87 | {
71 | referenceElement = new_reference;
72 | },
73 | onChange: (params) => {
74 | dx = params.dx;
75 | dy = params.dy;
76 | },
77 | onMount: () => {
78 | mounted = true;
79 | }
80 | }}
81 | use:clickOutside={{
82 | callback: onclick_outside,
83 | exclude: [referenceElement ?? '', '']
84 | }}
85 | >
86 | {#if mounted}
87 |
90 | {/if}
91 |
92 |
97 |
--------------------------------------------------------------------------------
/packages/core/README.md:
--------------------------------------------------------------------------------
1 | # @svelte-fui/core
2 |
3 | Contains all the necessary UI component of the Fluent Design System (Still under development)
4 |
5 | # Usage
6 |
7 | Add @fluentui/react-components to a project:
8 |
9 | ```shell
10 | // pnpm
11 | pnpm install @svelte-fui/core
12 |
13 | //npm
14 | npm install @svelte-fui/core
15 | ```
16 |
17 | To use Fluent design for Sveltekit app you have to make `App` component at the top level route, ex: `/routes/+layout.svelte`
18 |
19 | ```html
20 |
29 |
30 |
71 |
72 |
73 | ```
74 | # Use Pre-Defined Themes
75 |
76 | ```bash
77 | // pnpm
78 | pnpm install @svelte-fui/themes
79 |
80 | //npm
81 | npm install @svelte-fui/themes
82 | ```
83 | ```html
84 |
106 |
107 |
67 |
94 |
68 |
69 |
70 |
80 |
81 |
90 |
91 |
92 |
93 |
47 |
48 |
49 |
55 |
86 |
56 |
57 |
58 |
59 |
61 |
62 | An input with a decorative icon in the
64 |
65 | before slot.
63 |
66 |
67 |
68 |
69 |
71 |
72 | An input with a button in the
74 |
75 | after slot.
73 |
76 |
77 |
78 | $
79 | .00
80 |
81 | An input with a presentational value in the
85 | before slot and another presentational value in the after slot.
84 |
73 |
83 |
74 |
101 |
75 |
76 |
77 | This an error message
78 |
79 |
80 |
81 |
82 | This a warning message
83 |
84 |
85 |
86 |
87 | This a success message
88 |
89 |
90 |
91 |
92 | This a simple message
93 |
94 |
95 |
96 |
97 | This an info message
98 |
99 |
100 |
78 |
105 |
79 |
80 |
81 |
82 | {#if data}
83 | {data.lang}
84 | {:else}
85 | Select a language
86 | {/if}
87 |
88 |
90 |
91 |
92 |
93 | {#each languages as item (item.id)}
94 | {item.lang}
95 | {/each}
96 |
97 |
98 |
99 |
104 |
100 | Selected language:
101 | {language}
102 |
103 |