@sjsf/skeleton-theme 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +7 -0
- package/README.md +78 -0
- package/dist/components/button-component.svelte +19 -0
- package/dist/components/button-component.svelte.d.ts +2 -0
- package/dist/components/description-component.svelte +7 -0
- package/dist/components/description-component.svelte.d.ts +2 -0
- package/dist/components/errors-list.svelte +11 -0
- package/dist/components/errors-list.svelte.d.ts +2 -0
- package/dist/components/form-component.svelte +9 -0
- package/dist/components/form-component.svelte.d.ts +2 -0
- package/dist/components/help-component.svelte +7 -0
- package/dist/components/help-component.svelte.d.ts +2 -0
- package/dist/components/index.d.ts +5 -0
- package/dist/components/index.js +17 -0
- package/dist/components/layout-component.svelte +38 -0
- package/dist/components/layout-component.svelte.d.ts +2 -0
- package/dist/components/title-component.svelte +16 -0
- package/dist/components/title-component.svelte.d.ts +2 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +6 -0
- package/dist/preset.d.ts +7 -0
- package/dist/preset.js +14 -0
- package/dist/styles.css +1 -0
- package/dist/widgets/checkbox-widget.svelte +15 -0
- package/dist/widgets/checkbox-widget.svelte.d.ts +2 -0
- package/dist/widgets/checkboxes-widget.svelte +25 -0
- package/dist/widgets/checkboxes-widget.svelte.d.ts +2 -0
- package/dist/widgets/file-widget.svelte +21 -0
- package/dist/widgets/file-widget.svelte.d.ts +2 -0
- package/dist/widgets/index.d.ts +5 -0
- package/dist/widgets/index.js +20 -0
- package/dist/widgets/number-widget.svelte +14 -0
- package/dist/widgets/number-widget.svelte.d.ts +2 -0
- package/dist/widgets/radio-widget.svelte +25 -0
- package/dist/widgets/radio-widget.svelte.d.ts +2 -0
- package/dist/widgets/select-widget.svelte +40 -0
- package/dist/widgets/select-widget.svelte.d.ts +2 -0
- package/dist/widgets/text-widget.svelte +12 -0
- package/dist/widgets/text-widget.svelte.d.ts +2 -0
- package/dist/widgets/textarea-widget.svelte +7 -0
- package/dist/widgets/textarea-widget.svelte.d.ts +2 -0
- package/package.json +85 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
Copyright (c) 2024 Roman Krasilnikov
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
4
|
+
|
|
5
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
6
|
+
|
|
7
|
+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# @sjsf/skeleton-theme
|
|
2
|
+
|
|
3
|
+
The [skeleton](https://github.com/skeletonlabs/skeleton) based theme for [svelte-jsonschema-form](https://github.com/x0k/svelte-jsonschema-form).
|
|
4
|
+
|
|
5
|
+
- [Documentation](https://x0k.github.io/svelte-jsonschema-form/)
|
|
6
|
+
- [Playground](https://x0k.github.io/svelte-jsonschema-form/playground/)
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```shell
|
|
11
|
+
npm install @sjsf/form @sjsf/skeleton-theme
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
### Setup styles
|
|
17
|
+
|
|
18
|
+
There is two ways to setup styles:
|
|
19
|
+
|
|
20
|
+
1. Use tailwindcss config
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
import { skeleton } from '@skeletonlabs/skeleton/plugin';
|
|
24
|
+
import * as themes from '@skeletonlabs/skeleton/themes';
|
|
25
|
+
import forms from '@tailwindcss/forms'
|
|
26
|
+
import { THEME_CONTENT } from '@sjsf/skeleton-theme/preset'
|
|
27
|
+
|
|
28
|
+
/** @type {import('tailwindcss').Config} */
|
|
29
|
+
export default {
|
|
30
|
+
content: ['./src/**/*.{html,js,svelte,ts}', THEME_CONTENT],
|
|
31
|
+
plugins: [
|
|
32
|
+
forms,
|
|
33
|
+
skeleton({
|
|
34
|
+
themes: [/* themes.something */],
|
|
35
|
+
})
|
|
36
|
+
],
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Or with a preset
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
import themePreset from '@sjsf/skeleton-theme/preset'
|
|
44
|
+
|
|
45
|
+
/** @type {import('tailwindcss').Config} */
|
|
46
|
+
export default {
|
|
47
|
+
presets: [themePreset],
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
2. Inject prepared styles (not recommended)
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
// Inject them as you like
|
|
55
|
+
import daisyStyles from "@sjsf/skeleton-theme/styles.css?inline";
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Bundled themes:
|
|
59
|
+
|
|
60
|
+
- cerberus
|
|
61
|
+
- catppuccin
|
|
62
|
+
- pine
|
|
63
|
+
- rose
|
|
64
|
+
|
|
65
|
+
### Apply theme
|
|
66
|
+
|
|
67
|
+
```svelte
|
|
68
|
+
<script lang="ts">
|
|
69
|
+
import { Form } from '@sjsf/form';
|
|
70
|
+
import { theme } from '@sjsf/skeleton-theme';
|
|
71
|
+
</script>
|
|
72
|
+
|
|
73
|
+
<Form {...theme} />
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## License
|
|
77
|
+
|
|
78
|
+
MIT
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { ComponentProps } from '@sjsf/form';
|
|
3
|
+
|
|
4
|
+
const { children, type, attributes, disabled, onclick }: ComponentProps<'button'> = $props();
|
|
5
|
+
|
|
6
|
+
const isSubmit = $derived(type === 'submit');
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<button
|
|
10
|
+
class="btn preset-filled"
|
|
11
|
+
class:preset-filled-primary-500={isSubmit}
|
|
12
|
+
class:w-full={isSubmit}
|
|
13
|
+
type={isSubmit ? 'submit' : 'button'}
|
|
14
|
+
{onclick}
|
|
15
|
+
{...attributes}
|
|
16
|
+
{disabled}
|
|
17
|
+
>
|
|
18
|
+
{@render children()}
|
|
19
|
+
</button>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { ComponentProps } from "@sjsf/form";
|
|
3
|
+
|
|
4
|
+
const { errors, forId }: ComponentProps<"errorsList"> = $props();
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<ui class="text-error-500" data-errors-for={forId}>
|
|
8
|
+
{#each errors as err}
|
|
9
|
+
<li>{err.message}</li>
|
|
10
|
+
{/each}
|
|
11
|
+
</ui>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { FormComponentProps } from '@sjsf/form'
|
|
3
|
+
|
|
4
|
+
let { children, form = $bindable(), onsubmit, attributes }: FormComponentProps = $props();
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<form class="flex flex-col gap-4" {onsubmit} {...attributes} bind:this={form} >
|
|
8
|
+
{@render children?.()}
|
|
9
|
+
</form>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import FormComponent from "./form-component.svelte";
|
|
2
|
+
import ButtonComponent from "./button-component.svelte";
|
|
3
|
+
import LayoutComponent from "./layout-component.svelte";
|
|
4
|
+
import TitleComponent from "./title-component.svelte";
|
|
5
|
+
import DescriptionComponent from "./description-component.svelte";
|
|
6
|
+
import HelpComponent from "./help-component.svelte";
|
|
7
|
+
import ErrorsList from './errors-list.svelte';
|
|
8
|
+
export const registry = {
|
|
9
|
+
form: FormComponent,
|
|
10
|
+
button: ButtonComponent,
|
|
11
|
+
layout: LayoutComponent,
|
|
12
|
+
title: TitleComponent,
|
|
13
|
+
description: DescriptionComponent,
|
|
14
|
+
help: HelpComponent,
|
|
15
|
+
errorsList: ErrorsList
|
|
16
|
+
};
|
|
17
|
+
export const components = (type) => registry[type];
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { ComponentProps } from '@sjsf/form';
|
|
3
|
+
|
|
4
|
+
const { type, children, attributes }: ComponentProps<'layout'> = $props();
|
|
5
|
+
|
|
6
|
+
const isItem = $derived(
|
|
7
|
+
type === 'array-item' || type === 'object-property' || type === 'field-content'
|
|
8
|
+
);
|
|
9
|
+
const isControls = $derived(type === 'array-item-controls');
|
|
10
|
+
const isGrowable = $derived(
|
|
11
|
+
type === 'array-item-content' ||
|
|
12
|
+
type === 'object-property-key-input' ||
|
|
13
|
+
type === 'object-property-content'
|
|
14
|
+
);
|
|
15
|
+
const isField = $derived(type === 'multi-field' || type === 'field');
|
|
16
|
+
const isColumn = $derived(
|
|
17
|
+
type === 'array-field' ||
|
|
18
|
+
type === 'object-field' ||
|
|
19
|
+
type === 'array-items' ||
|
|
20
|
+
type === 'object-properties' ||
|
|
21
|
+
type === 'root-field'
|
|
22
|
+
);
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<div
|
|
26
|
+
class:flex={isItem || isControls || isField || isColumn}
|
|
27
|
+
class:gap-2={isItem || isField}
|
|
28
|
+
class:gap-4={isColumn}
|
|
29
|
+
class:items-start={isItem || isControls}
|
|
30
|
+
class:btn-group={isControls}
|
|
31
|
+
class:preset-outlined-surface-200-800={isControls}
|
|
32
|
+
class:grow={isGrowable}
|
|
33
|
+
class:flex-col={isColumn || isField}
|
|
34
|
+
data-layout={type}
|
|
35
|
+
{...attributes}
|
|
36
|
+
>
|
|
37
|
+
{@render children()}
|
|
38
|
+
</div>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { ComponentProps } from "@sjsf/form";
|
|
3
|
+
|
|
4
|
+
const { title, type, forId, required }: ComponentProps<"title"> = $props();
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
{#if type === "field"}
|
|
8
|
+
<label class="label-text" for={forId}>
|
|
9
|
+
{title}
|
|
10
|
+
{#if required}
|
|
11
|
+
<span>*</span>
|
|
12
|
+
{/if}
|
|
13
|
+
</label>
|
|
14
|
+
{:else}
|
|
15
|
+
<div class="font-bold text-2xl">{title}</div>
|
|
16
|
+
{/if}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const theme: Theme;
|
package/dist/index.js
ADDED
package/dist/preset.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const APP_CONTENT = "./src/**/*.{html,js,svelte,ts}";
|
|
2
|
+
export declare const THEME_CONTENT = "./node_modules/@sjsf/skeleton-theme/dist/**/*.{html,js,svelte,ts}";
|
|
3
|
+
declare const _default: {
|
|
4
|
+
content: string[];
|
|
5
|
+
plugins: any[];
|
|
6
|
+
};
|
|
7
|
+
export default _default;
|
package/dist/preset.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { skeleton } from '@skeletonlabs/skeleton/plugin';
|
|
2
|
+
import * as themes from '@skeletonlabs/skeleton/themes';
|
|
3
|
+
import forms from '@tailwindcss/forms';
|
|
4
|
+
export const APP_CONTENT = './src/**/*.{html,js,svelte,ts}';
|
|
5
|
+
export const THEME_CONTENT = './node_modules/@sjsf/skeleton-theme/dist/**/*.{html,js,svelte,ts}';
|
|
6
|
+
export default {
|
|
7
|
+
content: [APP_CONTENT, THEME_CONTENT],
|
|
8
|
+
plugins: [
|
|
9
|
+
forms,
|
|
10
|
+
skeleton({
|
|
11
|
+
themes: Object.values(themes)
|
|
12
|
+
})
|
|
13
|
+
]
|
|
14
|
+
};
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,input:where(:not([type])):focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=checkbox]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=radio]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}@media (forced-colors: active){[type=checkbox]:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}body{background-color:rgb(var(--body-background-color))}body:where(.dark,.dark *){background-color:rgb(var(--body-background-color-dark))}body{color:rgb(var(--base-font-color))}body:where(.dark,.dark *){color:rgb(var(--base-font-color-dark))}body{font-family:var(--base-font-family);font-size:var(--base-font-size);font-style:var(--base-font-style);font-weight:var(--base-font-weight);line-height:var(--base-line-height);letter-spacing:var(--base-letter-spacing)}::-moz-selection{background-color:rgb(var(--color-primary-500) / .3)}::selection{background-color:rgb(var(--color-primary-500) / .3)}html{-webkit-tap-highlight-color:rgba(128,128,128,.5)}:root{scrollbar-color:rgba(128,128,128,.5) rgba(0,0,0,.1);scrollbar-width:thin}.disabled,button:disabled{pointer-events:none;opacity:.5}:host [data-theme=cerberus]{--space-scale-factor: 1;--type-scale-factor: 1.067;--type-scale-1: calc(.75rem * var(--type-scale-factor));--type-scale-2: calc(.875rem * var(--type-scale-factor));--type-scale-3: calc(1rem * var(--type-scale-factor));--type-scale-4: calc(1.125rem * var(--type-scale-factor));--type-scale-5: calc(1.25rem * var(--type-scale-factor));--type-scale-6: calc(1.5rem * var(--type-scale-factor));--type-scale-7: calc(1.875rem * var(--type-scale-factor));--type-scale-8: calc(2.25rem * var(--type-scale-factor));--type-scale-9: calc(3rem * var(--type-scale-factor));--type-scale-10: calc(3.75rem * var(--type-scale-factor));--type-scale-11: calc(4.5rem * var(--type-scale-factor));--type-scale-12: calc(6rem * var(--type-scale-factor));--type-scale-13: calc(8rem * var(--type-scale-factor));--base-font-color: var(--color-surface-950);--base-font-color-dark: var(--color-surface-50);--base-font-family: system-ui;--base-font-size: inherit;--base-line-height: inherit;--base-font-weight: normal;--base-font-style: normal;--base-letter-spacing: 0em;--heading-font-color: inherit;--heading-font-color-dark: inherit;--heading-font-family: inherit;--heading-font-weight: bold;--heading-font-style: normal;--heading-letter-spacing: inherit;--anchor-font-color: var(--color-primary-500);--anchor-font-color-dark: var(--color-primary-500);--anchor-font-family: inherit;--anchor-font-size: inherit;--anchor-line-height: inherit;--anchor-font-weight: inherit;--anchor-font-style: inherit;--anchor-letter-spacing: inherit;--anchor-text-decoration: none;--anchor-text-decoration-hover: underline;--anchor-text-decoration-active: none;--anchor-text-decoration-focus: none;--body-background-color: var(--color-surface-50);--body-background-color-dark: var(--color-surface-950);--radii-default: 6px;--radii-container: 6px;--border-width-default: 1px;--divide-width-default: 1px;--outline-width-default: 1px;--ring-width-default: 1px;--color-primary-50: 211 229 255;--color-primary-100: 169 206 253;--color-primary-200: 127 182 250;--color-primary-300: 85 159 248;--color-primary-400: 43 135 245;--color-primary-500: 1 112 243;--color-primary-600: 3 97 210;--color-primary-700: 4 83 178;--color-primary-800: 6 68 145;--color-primary-900: 7 54 113;--color-primary-950: 9 39 80;--color-primary-contrast-dark: var(--color-primary-950);--color-primary-contrast-light: var(--color-primary-50);--color-primary-contrast-50: var(--color-primary-contrast-dark);--color-primary-contrast-100: var(--color-primary-contrast-dark);--color-primary-contrast-200: var(--color-primary-contrast-dark);--color-primary-contrast-300: var(--color-primary-contrast-dark);--color-primary-contrast-400: var(--color-primary-contrast-dark);--color-primary-contrast-500: var(--color-primary-contrast-light);--color-primary-contrast-600: var(--color-primary-contrast-light);--color-primary-contrast-700: var(--color-primary-contrast-light);--color-primary-contrast-800: var(--color-primary-contrast-light);--color-primary-contrast-900: var(--color-primary-contrast-light);--color-primary-contrast-950: var(--color-primary-contrast-light);--color-secondary-50: 216 204 241;--color-secondary-100: 197 171 233;--color-secondary-200: 178 138 225;--color-secondary-300: 159 106 218;--color-secondary-400: 140 73 210;--color-secondary-500: 121 40 202;--color-secondary-600: 107 37 182;--color-secondary-700: 93 34 163;--color-secondary-800: 78 31 143;--color-secondary-900: 64 28 124;--color-secondary-950: 50 25 104;--color-secondary-contrast-dark: var(--color-secondary-950);--color-secondary-contrast-light: var(--color-secondary-50);--color-secondary-contrast-50: var(--color-secondary-contrast-dark);--color-secondary-contrast-100: var(--color-secondary-contrast-dark);--color-secondary-contrast-200: var(--color-secondary-contrast-dark);--color-secondary-contrast-300: var(--color-secondary-contrast-dark);--color-secondary-contrast-400: var(--color-secondary-contrast-light);--color-secondary-contrast-500: var(--color-secondary-contrast-light);--color-secondary-contrast-600: var(--color-secondary-contrast-light);--color-secondary-contrast-700: var(--color-secondary-contrast-light);--color-secondary-contrast-800: var(--color-secondary-contrast-light);--color-secondary-contrast-900: var(--color-secondary-contrast-light);--color-secondary-contrast-950: var(--color-secondary-contrast-light);--color-tertiary-50: 255 206 251;--color-tertiary-100: 255 165 226;--color-tertiary-200: 255 124 202;--color-tertiary-300: 255 82 177;--color-tertiary-400: 255 41 153;--color-tertiary-500: 255 0 128;--color-tertiary-600: 228 0 116;--color-tertiary-700: 200 0 104;--color-tertiary-800: 173 0 91;--color-tertiary-900: 145 0 79;--color-tertiary-950: 118 0 67;--color-tertiary-contrast-dark: var(--color-tertiary-950);--color-tertiary-contrast-light: var(--color-tertiary-50);--color-tertiary-contrast-50: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-100: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-200: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-300: var(--color-tertiary-contrast-light);--color-tertiary-contrast-400: var(--color-tertiary-contrast-light);--color-tertiary-contrast-500: var(--color-tertiary-contrast-light);--color-tertiary-contrast-600: var(--color-tertiary-contrast-light);--color-tertiary-contrast-700: var(--color-tertiary-contrast-light);--color-tertiary-contrast-800: var(--color-tertiary-contrast-light);--color-tertiary-contrast-900: var(--color-tertiary-contrast-light);--color-tertiary-contrast-950: var(--color-tertiary-contrast-light);--color-success-50: 170 255 236;--color-success-100: 152 249 228;--color-success-200: 134 244 219;--color-success-300: 116 238 211;--color-success-400: 98 233 202;--color-success-500: 80 227 194;--color-success-600: 65 191 164;--color-success-700: 50 155 133;--color-success-800: 35 118 103;--color-success-900: 20 82 72;--color-success-950: 5 46 42;--color-success-contrast-dark: var(--color-success-950);--color-success-contrast-light: var(--color-success-50);--color-success-contrast-50: var(--color-success-contrast-dark);--color-success-contrast-100: var(--color-success-contrast-dark);--color-success-contrast-200: var(--color-success-contrast-dark);--color-success-contrast-300: var(--color-success-contrast-dark);--color-success-contrast-400: var(--color-success-contrast-dark);--color-success-contrast-500: var(--color-success-contrast-dark);--color-success-contrast-600: var(--color-success-contrast-light);--color-success-contrast-700: var(--color-success-contrast-light);--color-success-contrast-800: var(--color-success-contrast-light);--color-success-contrast-900: var(--color-success-contrast-light);--color-success-contrast-950: var(--color-success-contrast-light);--color-warning-50: 255 239 207;--color-warning-100: 253 228 183;--color-warning-200: 252 217 158;--color-warning-300: 250 207 134;--color-warning-400: 249 196 109;--color-warning-500: 247 185 85;--color-warning-600: 230 163 69;--color-warning-700: 213 142 53;--color-warning-800: 195 120 37;--color-warning-900: 178 99 21;--color-warning-950: 161 77 5;--color-warning-contrast-dark: var(--color-warning-950);--color-warning-contrast-light: var(--color-warning-50);--color-warning-contrast-50: var(--color-warning-contrast-dark);--color-warning-contrast-100: var(--color-warning-contrast-dark);--color-warning-contrast-200: var(--color-warning-contrast-dark);--color-warning-contrast-300: var(--color-warning-contrast-dark);--color-warning-contrast-400: var(--color-warning-contrast-dark);--color-warning-contrast-500: var(--color-warning-contrast-dark);--color-warning-contrast-600: var(--color-warning-contrast-light);--color-warning-contrast-700: var(--color-warning-contrast-light);--color-warning-contrast-800: var(--color-warning-contrast-light);--color-warning-contrast-900: var(--color-warning-contrast-light);--color-warning-contrast-950: var(--color-warning-contrast-light);--color-error-50: 247 212 214;--color-error-100: 246 182 181;--color-error-200: 245 152 149;--color-error-300: 245 123 116;--color-error-400: 244 93 84;--color-error-500: 243 63 51;--color-error-600: 224 50 41;--color-error-700: 205 38 31;--color-error-800: 186 25 20;--color-error-900: 167 13 10;--color-error-950: 148 0 0;--color-error-contrast-dark: var(--color-error-950);--color-error-contrast-light: var(--color-error-50);--color-error-contrast-50: var(--color-error-contrast-dark);--color-error-contrast-100: var(--color-error-contrast-dark);--color-error-contrast-200: var(--color-error-contrast-dark);--color-error-contrast-300: var(--color-error-contrast-dark);--color-error-contrast-400: var(--color-error-contrast-dark);--color-error-contrast-500: var(--color-error-contrast-light);--color-error-contrast-600: var(--color-error-contrast-light);--color-error-contrast-700: var(--color-error-contrast-light);--color-error-contrast-800: var(--color-error-contrast-light);--color-error-contrast-900: var(--color-error-contrast-light);--color-error-contrast-950: var(--color-error-contrast-light);--color-surface-50: 253 253 253;--color-surface-100: 224 224 224;--color-surface-200: 194 194 194;--color-surface-300: 163 163 163;--color-surface-400: 133 133 133;--color-surface-500: 102 102 102;--color-surface-600: 85 85 85;--color-surface-700: 68 68 68;--color-surface-800: 51 51 51;--color-surface-900: 34 34 34;--color-surface-950: 17 17 17;--color-surface-contrast-dark: var(--color-surface-950);--color-surface-contrast-light: var(--color-surface-50);--color-surface-contrast-50: var(--color-surface-contrast-dark);--color-surface-contrast-100: var(--color-surface-contrast-dark);--color-surface-contrast-200: var(--color-surface-contrast-dark);--color-surface-contrast-300: var(--color-surface-contrast-dark);--color-surface-contrast-400: var(--color-surface-contrast-light);--color-surface-contrast-500: var(--color-surface-contrast-light);--color-surface-contrast-600: var(--color-surface-contrast-light);--color-surface-contrast-700: var(--color-surface-contrast-light);--color-surface-contrast-800: var(--color-surface-contrast-light);--color-surface-contrast-900: var(--color-surface-contrast-light);--color-surface-contrast-950: var(--color-surface-contrast-light)}:host [data-theme=catppuccin]{--type-scale-factor: 1.125;--type-scale-1: calc(.75rem * var(--type-scale-factor));--type-scale-2: calc(.875rem * var(--type-scale-factor));--type-scale-3: calc(1rem * var(--type-scale-factor));--type-scale-4: calc(1.125rem * var(--type-scale-factor));--type-scale-5: calc(1.25rem * var(--type-scale-factor));--type-scale-6: calc(1.5rem * var(--type-scale-factor));--type-scale-7: calc(1.875rem * var(--type-scale-factor));--type-scale-8: calc(2.25rem * var(--type-scale-factor));--type-scale-9: calc(3rem * var(--type-scale-factor));--type-scale-10: calc(3.75rem * var(--type-scale-factor));--type-scale-11: calc(4.5rem * var(--type-scale-factor));--type-scale-12: calc(6rem * var(--type-scale-factor));--type-scale-13: calc(8rem * var(--type-scale-factor));--base-font-color: var(--color-surface-700);--base-font-color-dark: var(--color-surface-50);--base-font-family: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;--base-font-size: inherit;--base-line-height: inherit;--base-font-weight: normal;--base-font-style: normal;--base-letter-spacing: 0em;--heading-font-color: var(--color-tertiary-500);--heading-font-color-dark: var(--color-secondary-200);--heading-font-family: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;--heading-font-weight: bolder;--heading-font-style: normal;--heading-letter-spacing: inherit;--anchor-font-color: var(--color-secondary-600);--anchor-font-color-dark: var(--color-tertiary-400);--anchor-font-family: inherit;--anchor-font-size: inherit;--anchor-line-height: inherit;--anchor-font-weight: normal;--anchor-font-style: normal;--anchor-letter-spacing: inherit;--anchor-text-decoration: none;--anchor-text-decoration-hover: underline;--anchor-text-decoration-active: none;--anchor-text-decoration-focus: none;--space-scale-factor: 1;--radii-default: 6px;--radii-container: 12px;--border-width-default: 0px;--divide-width-default: 1px;--outline-width-default: 1px;--ring-width-default: 1px;--body-background-color: 255 255 255;--body-background-color-dark: var(--color-surface-950);--color-primary-50: 235 251 255;--color-primary-100: 211 228 255;--color-primary-200: 187 205 254;--color-primary-300: 162 181 254;--color-primary-400: 138 158 253;--color-primary-500: 114 135 253;--color-primary-600: 110 129 238;--color-primary-700: 106 123 223;--color-primary-800: 101 118 207;--color-primary-900: 97 112 192;--color-primary-950: 93 106 177;--color-primary-contrast-dark: var(--color-primary-950);--color-primary-contrast-light: var(--color-primary-50);--color-primary-contrast-50: var(--color-primary-contrast-dark);--color-primary-contrast-100: var(--color-primary-contrast-dark);--color-primary-contrast-200: var(--color-primary-contrast-dark);--color-primary-contrast-300: var(--color-primary-contrast-dark);--color-primary-contrast-400: var(--color-primary-contrast-light);--color-primary-contrast-500: var(--color-primary-contrast-light);--color-primary-contrast-600: var(--color-primary-contrast-light);--color-primary-contrast-700: var(--color-primary-contrast-light);--color-primary-contrast-800: var(--color-primary-contrast-light);--color-primary-contrast-900: var(--color-primary-contrast-light);--color-primary-contrast-950: var(--color-primary-contrast-light);--color-secondary-50: 245 194 231;--color-secondary-100: 243 179 225;--color-secondary-200: 241 164 220;--color-secondary-300: 238 148 214;--color-secondary-400: 236 133 209;--color-secondary-500: 234 118 203;--color-secondary-600: 207 104 179;--color-secondary-700: 179 89 156;--color-secondary-800: 152 75 132;--color-secondary-900: 124 60 109;--color-secondary-950: 97 46 85;--color-secondary-contrast-dark: var(--color-secondary-950);--color-secondary-contrast-light: var(--color-secondary-50);--color-secondary-contrast-50: var(--color-secondary-contrast-dark);--color-secondary-contrast-100: var(--color-secondary-contrast-dark);--color-secondary-contrast-200: var(--color-secondary-contrast-dark);--color-secondary-contrast-300: var(--color-secondary-contrast-dark);--color-secondary-contrast-400: var(--color-secondary-contrast-dark);--color-secondary-contrast-500: var(--color-secondary-contrast-dark);--color-secondary-contrast-600: var(--color-secondary-contrast-dark);--color-secondary-contrast-700: var(--color-secondary-contrast-light);--color-secondary-contrast-800: var(--color-secondary-contrast-light);--color-secondary-contrast-900: var(--color-secondary-contrast-light);--color-secondary-contrast-950: var(--color-secondary-contrast-light);--color-tertiary-50: 148 226 213;--color-tertiary-100: 123 210 201;--color-tertiary-200: 98 194 189;--color-tertiary-300: 73 178 177;--color-tertiary-400: 48 162 165;--color-tertiary-500: 23 146 153;--color-tertiary-600: 22 130 135;--color-tertiary-700: 20 114 118;--color-tertiary-800: 19 98 100;--color-tertiary-900: 17 82 83;--color-tertiary-950: 16 66 65;--color-tertiary-contrast-dark: var(--color-tertiary-950);--color-tertiary-contrast-light: var(--color-tertiary-50);--color-tertiary-contrast-50: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-100: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-200: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-300: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-400: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-500: var(--color-tertiary-contrast-light);--color-tertiary-contrast-600: var(--color-tertiary-contrast-light);--color-tertiary-contrast-700: var(--color-tertiary-contrast-light);--color-tertiary-contrast-800: var(--color-tertiary-contrast-light);--color-tertiary-contrast-900: var(--color-tertiary-contrast-light);--color-tertiary-contrast-950: var(--color-tertiary-contrast-light);--color-success-50: 166 227 161;--color-success-100: 146 214 137;--color-success-200: 125 200 114;--color-success-300: 105 187 90;--color-success-400: 84 173 67;--color-success-500: 64 160 43;--color-success-600: 57 144 43;--color-success-700: 50 127 42;--color-success-800: 43 111 42;--color-success-900: 36 94 41;--color-success-950: 29 78 41;--color-success-contrast-dark: var(--color-success-950);--color-success-contrast-light: var(--color-success-50);--color-success-contrast-50: var(--color-success-contrast-dark);--color-success-contrast-100: var(--color-success-contrast-dark);--color-success-contrast-200: var(--color-success-contrast-dark);--color-success-contrast-300: var(--color-success-contrast-dark);--color-success-contrast-400: var(--color-success-contrast-dark);--color-success-contrast-500: var(--color-success-contrast-light);--color-success-contrast-600: var(--color-success-contrast-light);--color-success-contrast-700: var(--color-success-contrast-light);--color-success-contrast-800: var(--color-success-contrast-light);--color-success-contrast-900: var(--color-success-contrast-light);--color-success-contrast-950: var(--color-success-contrast-light);--color-warning-50: 249 226 175;--color-warning-100: 244 209 146;--color-warning-200: 239 192 117;--color-warning-300: 233 176 87;--color-warning-400: 228 159 58;--color-warning-500: 223 142 29;--color-warning-600: 199 128 28;--color-warning-700: 174 115 28;--color-warning-800: 150 101 27;--color-warning-900: 125 88 27;--color-warning-950: 101 74 26;--color-warning-contrast-dark: var(--color-warning-950);--color-warning-contrast-light: var(--color-warning-50);--color-warning-contrast-50: var(--color-warning-contrast-dark);--color-warning-contrast-100: var(--color-warning-contrast-dark);--color-warning-contrast-200: var(--color-warning-contrast-dark);--color-warning-contrast-300: var(--color-warning-contrast-dark);--color-warning-contrast-400: var(--color-warning-contrast-dark);--color-warning-contrast-500: var(--color-warning-contrast-dark);--color-warning-contrast-600: var(--color-warning-contrast-light);--color-warning-contrast-700: var(--color-warning-contrast-light);--color-warning-contrast-800: var(--color-warning-contrast-light);--color-warning-contrast-900: var(--color-warning-contrast-light);--color-warning-contrast-950: var(--color-warning-contrast-light);--color-error-50: 243 139 168;--color-error-100: 236 114 146;--color-error-200: 230 89 124;--color-error-300: 223 65 101;--color-error-400: 217 40 79;--color-error-500: 210 15 57;--color-error-600: 188 16 55;--color-error-700: 167 17 52;--color-error-800: 145 19 50;--color-error-900: 124 20 47;--color-error-950: 102 21 45;--color-error-contrast-dark: var(--color-error-950);--color-error-contrast-light: var(--color-error-50);--color-error-contrast-50: var(--color-error-contrast-dark);--color-error-contrast-100: var(--color-error-contrast-dark);--color-error-contrast-200: var(--color-error-contrast-dark);--color-error-contrast-300: var(--color-error-contrast-dark);--color-error-contrast-400: var(--color-error-contrast-dark);--color-error-contrast-500: var(--color-error-contrast-light);--color-error-contrast-600: var(--color-error-contrast-light);--color-error-contrast-700: var(--color-error-contrast-light);--color-error-contrast-800: var(--color-error-contrast-light);--color-error-contrast-900: var(--color-error-contrast-light);--color-error-contrast-950: var(--color-error-contrast-light);--color-surface-50: 220 224 232;--color-surface-100: 204 208 218;--color-surface-200: 188 192 204;--color-surface-300: 172 175 189;--color-surface-400: 156 159 175;--color-surface-500: 140 143 161;--color-surface-600: 118 120 138;--color-surface-700: 96 98 115;--color-surface-800: 74 75 92;--color-surface-900: 52 53 69;--color-surface-950: 30 30 46;--color-surface-contrast-dark: var(--color-surface-950);--color-surface-contrast-light: var(--color-surface-50);--color-surface-contrast-50: var(--color-surface-contrast-dark);--color-surface-contrast-100: var(--color-surface-contrast-dark);--color-surface-contrast-200: var(--color-surface-contrast-dark);--color-surface-contrast-300: var(--color-surface-contrast-dark);--color-surface-contrast-400: var(--color-surface-contrast-dark);--color-surface-contrast-500: var(--color-surface-contrast-dark);--color-surface-contrast-600: var(--color-surface-contrast-dark);--color-surface-contrast-700: var(--color-surface-contrast-light);--color-surface-contrast-800: var(--color-surface-contrast-light);--color-surface-contrast-900: var(--color-surface-contrast-light);--color-surface-contrast-950: var(--color-surface-contrast-light)}:host [data-theme=pine]{--type-scale-factor: 1;--type-scale-1: calc(.75rem * var(--type-scale-factor));--type-scale-2: calc(.875rem * var(--type-scale-factor));--type-scale-3: calc(1rem * var(--type-scale-factor));--type-scale-4: calc(1.125rem * var(--type-scale-factor));--type-scale-5: calc(1.25rem * var(--type-scale-factor));--type-scale-6: calc(1.5rem * var(--type-scale-factor));--type-scale-7: calc(1.875rem * var(--type-scale-factor));--type-scale-8: calc(2.25rem * var(--type-scale-factor));--type-scale-9: calc(3rem * var(--type-scale-factor));--type-scale-10: calc(3.75rem * var(--type-scale-factor));--type-scale-11: calc(4.5rem * var(--type-scale-factor));--type-scale-12: calc(6rem * var(--type-scale-factor));--type-scale-13: calc(8rem * var(--type-scale-factor));--base-font-color: var(--color-surface-950);--base-font-color-dark: var(--color-surface-50);--base-font-family: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;--base-font-size: inherit;--base-line-height: inherit;--base-font-weight: normal;--base-font-style: normal;--base-letter-spacing: 0em;--heading-font-color: var(--color-primary-800);--heading-font-color-dark: var(--color-primary-300);--heading-font-family: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;--heading-font-weight: inherit;--heading-font-style: normal;--heading-letter-spacing: inherit;--anchor-font-color: var(--color-secondary-400);--anchor-font-color-dark: var(--color-secondary-100);--anchor-font-family: inherit;--anchor-font-size: inherit;--anchor-line-height: inherit;--anchor-font-weight: normal;--anchor-font-style: normal;--anchor-letter-spacing: inherit;--anchor-text-decoration: none;--anchor-text-decoration-hover: underline;--anchor-text-decoration-active: none;--anchor-text-decoration-focus: none;--space-scale-factor: 1;--radii-default: 2px;--radii-container: 2px;--border-width-default: 1px;--divide-width-default: 1px;--outline-width-default: 1px;--ring-width-default: 1px;--body-background-color: var(--color-surface-50);--body-background-color-dark: var(--color-surface-950);--color-primary-50: 251 232 208;--color-primary-100: 233 211 181;--color-primary-200: 215 191 154;--color-primary-300: 197 170 128;--color-primary-400: 179 150 101;--color-primary-500: 161 129 74;--color-primary-600: 144 116 66;--color-primary-700: 126 103 58;--color-primary-800: 109 89 49;--color-primary-900: 91 76 41;--color-primary-950: 74 63 33;--color-primary-contrast-dark: 0 0 0;--color-primary-contrast-light: 255 255 255;--color-primary-contrast-50: var(--color-primary-contrast-dark);--color-primary-contrast-100: var(--color-primary-contrast-dark);--color-primary-contrast-200: var(--color-primary-contrast-dark);--color-primary-contrast-300: var(--color-primary-contrast-dark);--color-primary-contrast-400: var(--color-primary-contrast-dark);--color-primary-contrast-500: var(--color-primary-contrast-light);--color-primary-contrast-600: var(--color-primary-contrast-light);--color-primary-contrast-700: var(--color-primary-contrast-light);--color-primary-contrast-800: var(--color-primary-contrast-light);--color-primary-contrast-900: var(--color-primary-contrast-light);--color-primary-contrast-950: var(--color-primary-contrast-light);--color-secondary-50: 232 140 198;--color-secondary-100: 203 116 170;--color-secondary-200: 174 92 143;--color-secondary-300: 144 69 115;--color-secondary-400: 115 45 88;--color-secondary-500: 86 21 60;--color-secondary-600: 82 21 58;--color-secondary-700: 78 21 55;--color-secondary-800: 73 22 53;--color-secondary-900: 69 22 50;--color-secondary-950: 65 22 48;--color-secondary-contrast-dark: 0 0 0;--color-secondary-contrast-light: 255 255 255;--color-secondary-contrast-50: var(--color-secondary-contrast-dark);--color-secondary-contrast-100: var(--color-secondary-contrast-dark);--color-secondary-contrast-200: var(--color-secondary-contrast-dark);--color-secondary-contrast-300: var(--color-secondary-contrast-light);--color-secondary-contrast-400: var(--color-secondary-contrast-light);--color-secondary-contrast-500: var(--color-secondary-contrast-light);--color-secondary-contrast-600: var(--color-secondary-contrast-light);--color-secondary-contrast-700: var(--color-secondary-contrast-light);--color-secondary-contrast-800: var(--color-secondary-contrast-light);--color-secondary-contrast-900: var(--color-secondary-contrast-light);--color-secondary-contrast-950: var(--color-secondary-contrast-light);--color-tertiary-50: 237 237 227;--color-tertiary-100: 217 216 206;--color-tertiary-200: 196 196 184;--color-tertiary-300: 176 175 163;--color-tertiary-400: 155 155 141;--color-tertiary-500: 135 134 120;--color-tertiary-600: 119 118 106;--color-tertiary-700: 103 102 91;--color-tertiary-800: 86 85 77;--color-tertiary-900: 70 69 62;--color-tertiary-950: 54 53 48;--color-tertiary-contrast-dark: 0 0 0;--color-tertiary-contrast-light: 255 255 255;--color-tertiary-contrast-50: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-100: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-200: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-300: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-400: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-500: var(--color-tertiary-contrast-light);--color-tertiary-contrast-600: var(--color-tertiary-contrast-light);--color-tertiary-contrast-700: var(--color-tertiary-contrast-light);--color-tertiary-contrast-800: var(--color-tertiary-contrast-light);--color-tertiary-contrast-900: var(--color-tertiary-contrast-light);--color-tertiary-contrast-950: var(--color-tertiary-contrast-light);--color-success-50: 110 176 180;--color-success-100: 88 160 161;--color-success-200: 67 144 142;--color-success-300: 45 127 122;--color-success-400: 24 111 103;--color-success-500: 2 95 84;--color-success-600: 7 87 78;--color-success-700: 12 79 72;--color-success-800: 16 70 67;--color-success-900: 21 62 61;--color-success-950: 26 54 55;--color-success-contrast-dark: 0 0 0;--color-success-contrast-light: 255 255 255;--color-success-contrast-50: var(--color-success-contrast-dark);--color-success-contrast-100: var(--color-success-contrast-dark);--color-success-contrast-200: var(--color-success-contrast-dark);--color-success-contrast-300: var(--color-success-contrast-light);--color-success-contrast-400: var(--color-success-contrast-light);--color-success-contrast-500: var(--color-success-contrast-light);--color-success-contrast-600: var(--color-success-contrast-light);--color-success-contrast-700: var(--color-success-contrast-light);--color-success-contrast-800: var(--color-success-contrast-light);--color-success-contrast-900: var(--color-success-contrast-light);--color-success-contrast-950: var(--color-success-contrast-light);--color-warning-50: 255 235 204;--color-warning-100: 253 223 177;--color-warning-200: 251 211 149;--color-warning-300: 248 200 122;--color-warning-400: 246 188 94;--color-warning-500: 244 176 67;--color-warning-600: 209 153 62;--color-warning-700: 175 130 57;--color-warning-800: 140 106 52;--color-warning-900: 106 83 47;--color-warning-950: 71 60 42;--color-warning-contrast-dark: var(--color-warning-950);--color-warning-contrast-light: var(--color-warning-50);--color-warning-contrast-50: var(--color-warning-contrast-dark);--color-warning-contrast-100: var(--color-warning-contrast-dark);--color-warning-contrast-200: var(--color-warning-contrast-dark);--color-warning-contrast-300: var(--color-warning-contrast-dark);--color-warning-contrast-400: var(--color-warning-contrast-dark);--color-warning-contrast-500: var(--color-warning-contrast-dark);--color-warning-contrast-600: var(--color-warning-contrast-light);--color-warning-contrast-700: var(--color-warning-contrast-light);--color-warning-contrast-800: var(--color-warning-contrast-light);--color-warning-contrast-900: var(--color-warning-contrast-light);--color-warning-contrast-950: var(--color-warning-contrast-light);--color-error-50: 255 216 209;--color-error-100: 248 196 186;--color-error-200: 241 175 163;--color-error-300: 235 155 141;--color-error-400: 228 134 118;--color-error-500: 221 114 95;--color-error-600: 191 99 83;--color-error-700: 160 84 70;--color-error-800: 130 68 58;--color-error-900: 99 53 45;--color-error-950: 69 38 33;--color-error-contrast-dark: var(--color-error-950);--color-error-contrast-light: var(--color-error-50);--color-error-contrast-50: var(--color-error-contrast-dark);--color-error-contrast-100: var(--color-error-contrast-dark);--color-error-contrast-200: var(--color-error-contrast-dark);--color-error-contrast-300: var(--color-error-contrast-dark);--color-error-contrast-400: var(--color-error-contrast-dark);--color-error-contrast-500: var(--color-error-contrast-light);--color-error-contrast-600: var(--color-error-contrast-light);--color-error-contrast-700: var(--color-error-contrast-light);--color-error-contrast-800: var(--color-error-contrast-light);--color-error-contrast-900: var(--color-error-contrast-light);--color-error-contrast-950: var(--color-error-contrast-light);--color-surface-50: 216 219 210;--color-surface-100: 195 200 187;--color-surface-200: 173 181 164;--color-surface-300: 152 163 140;--color-surface-400: 130 144 117;--color-surface-500: 109 125 94;--color-surface-600: 93 107 80;--color-surface-700: 77 89 66;--color-surface-800: 61 70 52;--color-surface-900: 45 52 38;--color-surface-950: 29 34 24;--color-surface-contrast-dark: var(--color-surface-950);--color-surface-contrast-light: var(--color-surface-50);--color-surface-contrast-50: var(--color-surface-contrast-dark);--color-surface-contrast-100: var(--color-surface-contrast-dark);--color-surface-contrast-200: var(--color-surface-contrast-dark);--color-surface-contrast-300: var(--color-surface-contrast-dark);--color-surface-contrast-400: var(--color-surface-contrast-light);--color-surface-contrast-500: var(--color-surface-contrast-light);--color-surface-contrast-600: var(--color-surface-contrast-light);--color-surface-contrast-700: var(--color-surface-contrast-light);--color-surface-contrast-800: var(--color-surface-contrast-light);--color-surface-contrast-900: var(--color-surface-contrast-light);--color-surface-contrast-950: var(--color-surface-contrast-light)}:host [data-theme=rose]{--space-scale-factor: 1.05;--type-scale-factor: 1.125;--type-scale-1: calc(.75rem * var(--type-scale-factor));--type-scale-2: calc(.875rem * var(--type-scale-factor));--type-scale-3: calc(1rem * var(--type-scale-factor));--type-scale-4: calc(1.125rem * var(--type-scale-factor));--type-scale-5: calc(1.25rem * var(--type-scale-factor));--type-scale-6: calc(1.5rem * var(--type-scale-factor));--type-scale-7: calc(1.875rem * var(--type-scale-factor));--type-scale-8: calc(2.25rem * var(--type-scale-factor));--type-scale-9: calc(3rem * var(--type-scale-factor));--type-scale-10: calc(3.75rem * var(--type-scale-factor));--type-scale-11: calc(4.5rem * var(--type-scale-factor));--type-scale-12: calc(6rem * var(--type-scale-factor));--type-scale-13: calc(8rem * var(--type-scale-factor));--base-font-color: var(--color-surface-950);--base-font-color-dark: var(--color-surface-50);--base-font-family: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;--base-font-size: inherit;--base-line-height: inherit;--base-font-weight: normal;--base-font-style: normal;--base-letter-spacing: 0em;--heading-font-color: var(--color-secondary-900);--heading-font-color-dark: var(--color-secondary-100);--heading-font-family: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;--heading-font-weight: normal;--heading-font-style: normal;--heading-letter-spacing: .025em;--anchor-font-color: var(--color-primary-700);--anchor-font-color-dark: var(--color-primary-300);--anchor-font-family: inherit;--anchor-font-size: inherit;--anchor-line-height: inherit;--anchor-font-weight: normal;--anchor-font-style: normal;--anchor-letter-spacing: inherit;--anchor-text-decoration: none;--anchor-text-decoration-hover: underline;--anchor-text-decoration-active: none;--anchor-text-decoration-focus: none;--body-background-color: var(--color-surface-50);--body-background-color-dark: var(--color-surface-950);--radii-default: 9999px;--radii-container: 24px;--border-width-default: 2px;--ring-width-default: 2px;--outline-width-default: 2px;--divide-width-default: 2px;--color-primary-50: 255 249 255;--color-primary-100: 247 224 238;--color-primary-200: 239 199 222;--color-primary-300: 232 173 205;--color-primary-400: 224 148 189;--color-primary-500: 216 123 172;--color-primary-600: 189 109 152;--color-primary-700: 162 95 132;--color-primary-800: 134 80 111;--color-primary-900: 107 66 91;--color-primary-950: 80 52 71;--color-primary-contrast-dark: var(--color-primary-950);--color-primary-contrast-light: var(--color-primary-50);--color-primary-contrast-50: var(--color-primary-contrast-dark);--color-primary-contrast-100: var(--color-primary-contrast-dark);--color-primary-contrast-200: var(--color-primary-contrast-dark);--color-primary-contrast-300: var(--color-primary-contrast-dark);--color-primary-contrast-400: var(--color-primary-contrast-dark);--color-primary-contrast-500: var(--color-primary-contrast-dark);--color-primary-contrast-600: var(--color-primary-contrast-light);--color-primary-contrast-700: var(--color-primary-contrast-light);--color-primary-contrast-800: var(--color-primary-contrast-light);--color-primary-contrast-900: var(--color-primary-contrast-light);--color-primary-contrast-950: var(--color-primary-contrast-light);--color-secondary-50: 214 199 255;--color-secondary-100: 182 172 246;--color-secondary-200: 151 144 237;--color-secondary-300: 119 117 229;--color-secondary-400: 88 89 220;--color-secondary-500: 56 62 211;--color-secondary-600: 55 60 189;--color-secondary-700: 54 58 167;--color-secondary-800: 54 57 145;--color-secondary-900: 53 55 123;--color-secondary-950: 52 53 101;--color-secondary-contrast-dark: var(--color-secondary-950);--color-secondary-contrast-light: 255 255 255;--color-secondary-contrast-50: var(--color-secondary-contrast-dark);--color-secondary-contrast-100: var(--color-secondary-contrast-dark);--color-secondary-contrast-200: var(--color-secondary-contrast-dark);--color-secondary-contrast-300: var(--color-secondary-contrast-dark);--color-secondary-contrast-400: var(--color-secondary-contrast-dark);--color-secondary-contrast-500: var(--color-secondary-contrast-light);--color-secondary-contrast-600: var(--color-secondary-contrast-light);--color-secondary-contrast-700: var(--color-secondary-contrast-light);--color-secondary-contrast-800: var(--color-secondary-contrast-light);--color-secondary-contrast-900: var(--color-secondary-contrast-light);--color-secondary-contrast-950: var(--color-secondary-contrast-light);--color-tertiary-50: 222 223 247;--color-tertiary-100: 215 214 244;--color-tertiary-200: 207 204 241;--color-tertiary-300: 200 195 238;--color-tertiary-400: 192 185 235;--color-tertiary-500: 185 176 232;--color-tertiary-600: 159 151 201;--color-tertiary-700: 132 127 169;--color-tertiary-800: 106 102 138;--color-tertiary-900: 79 78 106;--color-tertiary-950: 53 53 75;--color-tertiary-contrast-dark: var(--color-tertiary-950);--color-tertiary-contrast-light: 255 255 255;--color-tertiary-contrast-50: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-100: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-200: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-300: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-400: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-500: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-600: var(--color-tertiary-contrast-dark);--color-tertiary-contrast-700: var(--color-tertiary-contrast-light);--color-tertiary-contrast-800: var(--color-tertiary-contrast-light);--color-tertiary-contrast-900: var(--color-tertiary-contrast-light);--color-tertiary-contrast-950: var(--color-tertiary-contrast-light);--color-success-50: 220 244 243;--color-success-100: 203 232 231;--color-success-200: 186 220 220;--color-success-300: 170 208 208;--color-success-400: 153 196 197;--color-success-500: 136 184 185;--color-success-600: 121 161 167;--color-success-700: 105 138 149;--color-success-800: 90 115 130;--color-success-900: 74 92 112;--color-success-950: 59 69 94;--color-success-contrast-dark: var(--color-success-950);--color-success-contrast-light: 255 255 255;--color-success-contrast-50: var(--color-success-contrast-dark);--color-success-contrast-100: var(--color-success-contrast-dark);--color-success-contrast-200: var(--color-success-contrast-dark);--color-success-contrast-300: var(--color-success-contrast-dark);--color-success-contrast-400: var(--color-success-contrast-dark);--color-success-contrast-500: var(--color-success-contrast-dark);--color-success-contrast-600: var(--color-success-contrast-light);--color-success-contrast-700: var(--color-success-contrast-light);--color-success-contrast-800: var(--color-success-contrast-light);--color-success-contrast-900: var(--color-success-contrast-light);--color-success-contrast-950: var(--color-success-contrast-light);--color-warning-50: 249 238 210;--color-warning-100: 250 231 182;--color-warning-200: 251 224 153;--color-warning-300: 252 216 125;--color-warning-400: 253 209 96;--color-warning-500: 254 202 68;--color-warning-600: 219 174 64;--color-warning-700: 184 146 60;--color-warning-800: 150 119 56;--color-warning-900: 115 91 52;--color-warning-950: 80 63 48;--color-warning-contrast-dark: var(--color-warning-950);--color-warning-contrast-light: 255 255 255;--color-warning-contrast-50: var(--color-warning-contrast-dark);--color-warning-contrast-100: var(--color-warning-contrast-dark);--color-warning-contrast-200: var(--color-warning-contrast-dark);--color-warning-contrast-300: var(--color-warning-contrast-dark);--color-warning-contrast-400: var(--color-warning-contrast-dark);--color-warning-contrast-500: var(--color-warning-contrast-dark);--color-warning-contrast-600: var(--color-warning-contrast-light);--color-warning-contrast-700: var(--color-warning-contrast-light);--color-warning-contrast-800: var(--color-warning-contrast-light);--color-warning-contrast-900: var(--color-warning-contrast-light);--color-warning-contrast-950: var(--color-warning-contrast-light);--color-error-50: 242 186 222;--color-error-100: 238 171 199;--color-error-200: 234 155 177;--color-error-300: 231 140 154;--color-error-400: 227 124 132;--color-error-500: 223 109 109;--color-error-600: 198 94 109;--color-error-700: 172 80 108;--color-error-800: 147 65 108;--color-error-900: 121 51 107;--color-error-950: 96 36 107;--color-error-contrast-dark: var(--color-error-950);--color-error-contrast-light: 255 255 255;--color-error-contrast-50: var(--color-error-contrast-dark);--color-error-contrast-100: var(--color-error-contrast-dark);--color-error-contrast-200: var(--color-error-contrast-dark);--color-error-contrast-300: var(--color-error-contrast-dark);--color-error-contrast-400: var(--color-error-contrast-dark);--color-error-contrast-500: var(--color-error-contrast-light);--color-error-contrast-600: var(--color-error-contrast-light);--color-error-contrast-700: var(--color-error-contrast-light);--color-error-contrast-800: var(--color-error-contrast-light);--color-error-contrast-900: var(--color-error-contrast-light);--color-error-contrast-950: var(--color-error-contrast-light);--color-surface-50: 246 243 247;--color-surface-100: 225 217 226;--color-surface-200: 204 191 205;--color-surface-300: 184 165 184;--color-surface-400: 163 139 163;--color-surface-500: 142 113 142;--color-surface-600: 121 97 122;--color-surface-700: 100 81 102;--color-surface-800: 79 66 81;--color-surface-900: 58 50 61;--color-surface-950: 37 34 41;--color-surface-contrast-dark: var(--color-surface-950);--color-surface-contrast-light: var(--color-surface-50);--color-surface-contrast-50: var(--color-surface-contrast-dark);--color-surface-contrast-100: var(--color-surface-contrast-dark);--color-surface-contrast-200: var(--color-surface-contrast-dark);--color-surface-contrast-300: var(--color-surface-contrast-dark);--color-surface-contrast-400: var(--color-surface-contrast-dark);--color-surface-contrast-500: var(--color-surface-contrast-light);--color-surface-contrast-600: var(--color-surface-contrast-light);--color-surface-contrast-700: var(--color-surface-contrast-light);--color-surface-contrast-800: var(--color-surface-contrast-light);--color-surface-contrast-900: var(--color-surface-contrast-light);--color-surface-contrast-950: var(--color-surface-contrast-light)}.btn,.btn-icon{border-radius:var(--radii-default);font-weight:500;text-decoration-line:none;display:inline-flex;align-items:center;justify-content:center;gap:calc(1rem * var(--space-scale-factor));white-space:nowrap;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.btn:hover,.btn-icon:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.btn:hover:where(.dark,.dark *),.btn-icon:hover:where(.dark,.dark *){--tw-brightness: brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.btn{height:calc(2.25rem * var(--space-scale-factor));padding-left:calc(1rem * var(--space-scale-factor));padding-right:calc(1rem * var(--space-scale-factor));padding-top:calc(.5rem * var(--space-scale-factor));padding-bottom:calc(.5rem * var(--space-scale-factor));color:inherit}.btn-group{display:flex;gap:calc(.5rem * var(--space-scale-factor));overflow:hidden;border-radius:var(--radii-container);padding:calc(.5rem * var(--space-scale-factor))}.fieldset,.legend,.label,.input,.textarea,.select{display:block}.input:where(.dark,.dark *)::-webkit-calendar-picker-indicator{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.label{width:100%}.label>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(calc(.25rem * var(--space-scale-factor)) * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(calc(.25rem * var(--space-scale-factor)) * var(--tw-space-y-reverse))}.label-text{font-weight:500;font-size:var(--type-scale-1)}.input,.textarea,.select{overflow:hidden;border-radius:var(--radii-default);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--ring-width-default) + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--color-surface-200) / var(--tw-ring-opacity))}.input:where(.dark,.dark *),.textarea:where(.dark,.dark *),.select:where(.dark,.dark *){--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--color-surface-800) / var(--tw-ring-opacity))}.input:focus-within,.textarea:focus-within,.select:focus-within{--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--color-primary-500) / var(--tw-ring-opacity))}.input:hover,.textarea:hover,.select:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input:disabled,.textarea:disabled,.select:disabled{pointer-events:none;opacity:.5}.input:hover:where(.dark,.dark *),.textarea:hover:where(.dark,.dark *),.select:hover:where(.dark,.dark *){--tw-brightness: brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input,.textarea,.select{width:100%;background-color:transparent;border-style:none;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.select>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(calc(.25rem * var(--space-scale-factor)) * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(calc(.25rem * var(--space-scale-factor)) * var(--tw-space-y-reverse))}.select optgroup>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(calc(.25rem * var(--space-scale-factor)) * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(calc(.25rem * var(--space-scale-factor)) * var(--tw-space-y-reverse))}.select optgroup{font-weight:700}.select optgroup option{margin-left:0;padding-left:0}.select optgroup option:first-of-type{margin-top:calc(.5rem * var(--space-scale-factor))}.select optgroup option:last-child{margin-bottom:calc(.5rem * var(--space-scale-factor))!important}.select option,.input-group option{cursor:pointer;border-radius:var(--radii-default);padding:calc(.5rem * var(--space-scale-factor))}.select:not([size]):not([multiple]) optgroup,.select:not([size]):not([multiple]) option,.input-group optgroup,.input-group option{--tw-bg-opacity: 1;background-color:rgb(var(--color-surface-50) / var(--tw-bg-opacity))}.select:not([size]):not([multiple]) optgroup:where(.dark,.dark *),.select:not([size]):not([multiple]) option:where(.dark,.dark *),.input-group optgroup:where(.dark,.dark *),.input-group option:where(.dark,.dark *){--tw-bg-opacity: 1;background-color:rgb(var(--color-surface-950) / var(--tw-bg-opacity))}.select:not([size]):not([multiple]) optgroup,.select:not([size]):not([multiple]) option,.input-group optgroup,.input-group option{--tw-text-opacity: 1;color:rgb(var(--color-surface-950) / var(--tw-text-opacity))}.select:not([size]):not([multiple]) optgroup:where(.dark,.dark *),.select:not([size]):not([multiple]) option:where(.dark,.dark *),.input-group optgroup:where(.dark,.dark *),.input-group option:where(.dark,.dark *){--tw-text-opacity: 1;color:rgb(var(--color-surface-50) / var(--tw-text-opacity))}.select option:checked{background:rgb(var(--color-primary-500)) linear-gradient(0deg,rgb(var(--color-primary-500)) 0% 100%)}.checkbox,.radio{width:calc(1rem * var(--space-scale-factor));cursor:pointer;border-radius:.125rem;--tw-bg-opacity: 1;background-color:rgb(var(--color-surface-300) / var(--tw-bg-opacity))}.checkbox:where(.dark,.dark *),.radio:where(.dark,.dark *){--tw-bg-opacity: 1;background-color:rgb(var(--color-surface-700) / var(--tw-bg-opacity))}.checkbox,.radio{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--ring-width-default) + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--color-surface-200) / var(--tw-ring-opacity))}.checkbox:where(.dark,.dark *),.radio:where(.dark,.dark *){--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--color-surface-800) / var(--tw-ring-opacity))}.checkbox:focus-within,.radio:focus-within{--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--color-primary-500) / var(--tw-ring-opacity))}.checkbox:hover,.radio:hover{--tw-brightness: brightness(1.05);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.checkbox:focus,.radio:focus{--tw-brightness: brightness(1.05);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.checkbox:checked,.checkbox:indeterminate,.radio:checked{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary-500) / var(--tw-bg-opacity))}.checkbox:checked:hover,.checkbox:indeterminate:hover,.radio:checked:hover{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary-500) / var(--tw-bg-opacity))}.checkbox:checked:focus,.checkbox:indeterminate:focus,.radio:checked:focus{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary-500) / var(--tw-bg-opacity));--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.radio{border-radius:9999px}.input[type=file]{padding:calc(.5rem * var(--space-scale-factor))}.input[type=file]::file-selector-button{display:inline-flex;align-items:center;justify-content:center;gap:calc(1rem * var(--space-scale-factor));white-space:nowrap;border-radius:var(--radii-default);font-weight:500;text-decoration-line:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.input[type=file]::file-selector-button:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input[type=file]:where(.dark,.dark *)::file-selector-button:hover{--tw-brightness: brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input[type=file]::file-selector-button{height:calc(2.25rem * var(--space-scale-factor));padding-left:calc(1rem * var(--space-scale-factor));padding-right:calc(1rem * var(--space-scale-factor));padding-top:calc(.5rem * var(--space-scale-factor));padding-bottom:calc(.5rem * var(--space-scale-factor));color:inherit;margin-right:calc(.5rem * var(--space-scale-factor));border-style:none;--tw-bg-opacity: 1;background-color:rgb(10 10 10 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(250 250 250 / var(--tw-text-opacity))}.input[type=file]:where(.dark,.dark *)::file-selector-button{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(10 10 10 / var(--tw-text-opacity))}.input[type=range]{width:100%;accent-color:rgb(var(--color-surface-900) / 1);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)!important}.input[type=range]:where(.dark,.dark *){accent-color:rgb(var(--color-surface-50) / 1)}.input[type=color]{width:calc(2.5rem * var(--space-scale-factor));height:calc(2.5rem * var(--space-scale-factor));cursor:pointer;overflow:hidden;border-radius:var(--radii-default);border-style:none;-webkit-appearance:none}.input[type=color]::-webkit-color-swatch-wrapper{padding:0}.input[type=color]::-webkit-color-swatch{border-style:none}.input[type=color]::-webkit-color-swatch:hover{--tw-brightness: brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input[type=color]::-moz-color-swatch{border-style:none}.input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'/%3E%3C/svg%3E") no-repeat 50% 50%;pointer-events:none;height:calc(1rem * var(--space-scale-factor));width:calc(1rem * var(--space-scale-factor));border-radius:9999px;background-size:contain;opacity:0}.input[type=search]:where(.dark,.dark *)::-webkit-search-cancel-button{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input[type=search]:focus::-webkit-search-cancel-button{pointer-events:auto;opacity:1}.input:disabled,.textarea:disabled,.select:disabled,.input-group>input:disabled,.input-group>textarea:disabled,.input-group>select:disabled{cursor:not-allowed!important;opacity:.5!important}.input:disabled:hover,.textarea:disabled:hover,.select:disabled:hover,.input-group>input:disabled:hover,.input-group>textarea:disabled:hover,.input-group>select:disabled:hover{--tw-brightness: brightness(1) !important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.input[readonly],.textarea[readonly],.select[readonly]{cursor:not-allowed!important;border-color:transparent!important}.input[readonly]:hover,.textarea[readonly]:hover,.select[readonly]:hover{--tw-brightness: brightness(1) !important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.input::-moz-placeholder,.textarea::-moz-placeholder,.input-group input::-moz-placeholder,.input-group textarea::-moz-placeholder{color:rgb(var(--base-font-color))}.input::placeholder,.textarea::placeholder,.input-group input::placeholder,.input-group textarea::placeholder{color:rgb(var(--base-font-color))}.input:where(.dark,.dark *)::-moz-placeholder,.textarea:where(.dark,.dark *)::-moz-placeholder,.input-group input:where(.dark,.dark *)::-moz-placeholder,.input-group textarea:where(.dark,.dark *)::-moz-placeholder{color:rgb(var(--base-font-color-dark))}.input:where(.dark,.dark *)::placeholder,.textarea:where(.dark,.dark *)::placeholder,.input-group input:where(.dark,.dark *)::placeholder,.input-group textarea:where(.dark,.dark *)::placeholder{color:rgb(var(--base-font-color-dark))}.input::-moz-placeholder,.textarea::-moz-placeholder,.input-group input::-moz-placeholder,.input-group textarea::-moz-placeholder{font-size:1rem;line-height:1.5rem;opacity:.6}.input::placeholder,.textarea::placeholder,.input-group input::placeholder,.input-group textarea::placeholder{font-size:1rem;line-height:1.5rem;opacity:.6}.input:where(.dark,.dark *)::-moz-placeholder,.textarea:where(.dark,.dark *)::-moz-placeholder,.input-group input:where(.dark,.dark *)::-moz-placeholder,.input-group textarea:where(.dark,.dark *)::-moz-placeholder{opacity:.5}.input:where(.dark,.dark *)::placeholder,.textarea:where(.dark,.dark *)::placeholder,.input-group input:where(.dark,.dark *)::placeholder,.input-group textarea:where(.dark,.dark *)::placeholder{opacity:.5}.placeholder{min-height:calc(1rem * var(--space-scale-factor));border-radius:var(--radii-default);background-color:rgb(var(--color-surface-500) / .2)}.fixed{position:fixed}.flex{display:flex}.w-0{width:0px}.w-full{width:100%}.flex-1{flex:1 1 0%}.grow{flex-grow:1}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.gap-2{gap:calc(.5rem * var(--space-scale-factor))}.gap-4{gap:calc(1rem * var(--space-scale-factor))}.gap-8{gap:calc(2rem * var(--space-scale-factor))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(calc(.5rem * var(--space-scale-factor)) * var(--tw-space-x-reverse));margin-left:calc(calc(.5rem * var(--space-scale-factor)) * calc(1 - var(--tw-space-x-reverse)))}.p-8{padding:calc(2rem * var(--space-scale-factor))}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-error-500{--tw-text-opacity: 1;color:rgb(var(--color-error-500) / var(--tw-text-opacity))}.opacity-60{opacity:.6}.preset-filled{--tw-bg-opacity: 1;background-color:rgb(10 10 10 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(250 250 250 / var(--tw-text-opacity))}.preset-filled:where(.dark,.dark *){--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(10 10 10 / var(--tw-text-opacity))}.preset-filled-primary-500{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary-500) / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(var(--color-primary-contrast-500) / var(--tw-text-opacity))}.preset-filled-primary-500:where(.dark,.dark *){--tw-text-opacity: 1;color:rgb(var(--color-primary-contrast-500) / var(--tw-text-opacity))}.preset-outlined-surface-200-800{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--ring-width-default) + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-inset: inset;--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--color-surface-200) / var(--tw-ring-opacity))}.preset-outlined-surface-200-800:where(.dark,.dark *){--tw-ring-opacity: 1;--tw-ring-color: rgb(var(--color-surface-800) / var(--tw-ring-opacity))}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { WidgetProps } from '@sjsf/form';
|
|
3
|
+
|
|
4
|
+
let { config, value = $bindable(), attributes }: WidgetProps<'checkbox'> = $props();
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<label class="flex items-center space-x-2 cursor-pointer">
|
|
8
|
+
<input
|
|
9
|
+
type="checkbox"
|
|
10
|
+
class="checkbox"
|
|
11
|
+
bind:checked={value}
|
|
12
|
+
{...attributes}
|
|
13
|
+
/>
|
|
14
|
+
<p>{config.title}</p>
|
|
15
|
+
</label>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { multipleOptions, indexMapper, type WidgetProps } from '@sjsf/form';
|
|
3
|
+
|
|
4
|
+
let { attributes, value = $bindable(), options }: WidgetProps<'checkboxes'> = $props();
|
|
5
|
+
|
|
6
|
+
const mapped = multipleOptions({
|
|
7
|
+
mapper: () => indexMapper(options),
|
|
8
|
+
value: () => value,
|
|
9
|
+
update: (v) => (value = v),
|
|
10
|
+
});
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
{#each options as option, index (option.value)}
|
|
14
|
+
<label class="flex items-center space-x-2 cursor-pointer">
|
|
15
|
+
<input
|
|
16
|
+
type="checkbox"
|
|
17
|
+
class="checkbox"
|
|
18
|
+
bind:group={mapped.value}
|
|
19
|
+
value={index}
|
|
20
|
+
{...attributes}
|
|
21
|
+
disabled={option.disabled || attributes.disabled}
|
|
22
|
+
/>
|
|
23
|
+
<p>{option.label}</p>
|
|
24
|
+
</label>
|
|
25
|
+
{/each}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { WidgetProps } from '@sjsf/form';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
attributes,
|
|
6
|
+
multiple,
|
|
7
|
+
loading,
|
|
8
|
+
processing,
|
|
9
|
+
value = $bindable()
|
|
10
|
+
}: WidgetProps<'file'> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<input
|
|
14
|
+
type="file"
|
|
15
|
+
bind:files={value}
|
|
16
|
+
{multiple}
|
|
17
|
+
class="input"
|
|
18
|
+
data-loading={loading}
|
|
19
|
+
data-processing={processing}
|
|
20
|
+
{...attributes}
|
|
21
|
+
/>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import TextWidget from './text-widget.svelte';
|
|
2
|
+
import TextareaWidget from './textarea-widget.svelte';
|
|
3
|
+
import NumberWidget from './number-widget.svelte';
|
|
4
|
+
import SelectWidget from './select-widget.svelte';
|
|
5
|
+
import CheckBoxWidget from './checkbox-widget.svelte';
|
|
6
|
+
import RadioWidget from './radio-widget.svelte';
|
|
7
|
+
import CheckboxesWidget from './checkboxes-widget.svelte';
|
|
8
|
+
import FileWidget from './file-widget.svelte';
|
|
9
|
+
export const registry = {
|
|
10
|
+
text: TextWidget,
|
|
11
|
+
textarea: TextareaWidget,
|
|
12
|
+
number: NumberWidget,
|
|
13
|
+
select: SelectWidget,
|
|
14
|
+
checkbox: CheckBoxWidget,
|
|
15
|
+
radio: RadioWidget,
|
|
16
|
+
checkboxes: CheckboxesWidget,
|
|
17
|
+
file: FileWidget,
|
|
18
|
+
};
|
|
19
|
+
// @ts-expect-error TODO: improve `widgets` type
|
|
20
|
+
export const widgets = (type) => registry[type];
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { WidgetProps } from '@sjsf/form';
|
|
3
|
+
|
|
4
|
+
let { value = $bindable(), attributes }: WidgetProps<'number'> = $props();
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<input
|
|
8
|
+
type="number"
|
|
9
|
+
bind:value
|
|
10
|
+
class={attributes.type === 'range'
|
|
11
|
+
? 'range grow w-0'
|
|
12
|
+
: 'input'}
|
|
13
|
+
{...attributes}
|
|
14
|
+
/>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { type WidgetProps, indexMapper, singleOption } from '@sjsf/form';
|
|
3
|
+
|
|
4
|
+
let { attributes, value = $bindable(), options }: WidgetProps<'radio'> = $props();
|
|
5
|
+
|
|
6
|
+
const mapped = singleOption({
|
|
7
|
+
mapper: () => indexMapper(options),
|
|
8
|
+
value: () => value,
|
|
9
|
+
update: (v) => (value = v)
|
|
10
|
+
});
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
{#each options as option, index (option.value)}
|
|
14
|
+
<label class="flex items-center space-x-2 cursor-pointer">
|
|
15
|
+
<input
|
|
16
|
+
type="radio"
|
|
17
|
+
class="radio"
|
|
18
|
+
bind:group={mapped.value}
|
|
19
|
+
value={index}
|
|
20
|
+
{...attributes}
|
|
21
|
+
disabled={option.disabled || attributes.disabled}
|
|
22
|
+
/>
|
|
23
|
+
<p>{option.label}</p>
|
|
24
|
+
</label>
|
|
25
|
+
{/each}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { singleOption, indexMapper, multipleOptions, type WidgetProps } from '@sjsf/form';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
attributes,
|
|
6
|
+
value = $bindable(),
|
|
7
|
+
options,
|
|
8
|
+
multiple,
|
|
9
|
+
config
|
|
10
|
+
}: WidgetProps<'select'> = $props();
|
|
11
|
+
|
|
12
|
+
const mapped = $derived(
|
|
13
|
+
(multiple ? multipleOptions : singleOption)({
|
|
14
|
+
mapper: () => indexMapper(options),
|
|
15
|
+
// @ts-expect-error
|
|
16
|
+
value: () => value,
|
|
17
|
+
update: (v) => (value = v)
|
|
18
|
+
})
|
|
19
|
+
);
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
{#snippet children()}
|
|
23
|
+
{#if !multiple && config.schema.default === undefined}
|
|
24
|
+
<option value={-1}>{attributes.placeholder}</option>
|
|
25
|
+
{/if}
|
|
26
|
+
{#each options as option, index (option.value)}
|
|
27
|
+
<option value={index} disabled={option.disabled}>
|
|
28
|
+
{option.label}
|
|
29
|
+
</option>
|
|
30
|
+
{/each}
|
|
31
|
+
{/snippet}
|
|
32
|
+
{#if multiple}
|
|
33
|
+
<select class="select" bind:value={mapped.value} multiple {...attributes}>
|
|
34
|
+
{@render children()}
|
|
35
|
+
</select>
|
|
36
|
+
{:else}
|
|
37
|
+
<select class="select" bind:value={mapped.value} {...attributes}>
|
|
38
|
+
{@render children()}
|
|
39
|
+
</select>
|
|
40
|
+
{/if}
|
package/package.json
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@sjsf/skeleton-theme",
|
|
3
|
+
"version": "0.2.1",
|
|
4
|
+
"description": "The skeleton based theme for svelte-jsonschema-form",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"theme",
|
|
8
|
+
"skeleton",
|
|
9
|
+
"form"
|
|
10
|
+
],
|
|
11
|
+
"type": "module",
|
|
12
|
+
"files": [
|
|
13
|
+
"dist",
|
|
14
|
+
"!dist/**/*.test.*",
|
|
15
|
+
"!dist/**/*.spec.*"
|
|
16
|
+
],
|
|
17
|
+
"publishConfig": {
|
|
18
|
+
"provenance": true
|
|
19
|
+
},
|
|
20
|
+
"repository": {
|
|
21
|
+
"type": "git",
|
|
22
|
+
"url": "git+https://github.com/x0k/svelte-jsonschema-form.git",
|
|
23
|
+
"directory": "packages/skeleton-theme"
|
|
24
|
+
},
|
|
25
|
+
"bugs": "https://github.com/x0k/svelte-jsonschema-form/issues",
|
|
26
|
+
"homepage": "https://x0k.github.io/svelte-jsonschema-form/",
|
|
27
|
+
"exports": {
|
|
28
|
+
".": {
|
|
29
|
+
"types": "./dist/index.d.ts",
|
|
30
|
+
"svelte": "./dist/index.js"
|
|
31
|
+
},
|
|
32
|
+
"./preset": {
|
|
33
|
+
"types": "./dist/preset.d.ts",
|
|
34
|
+
"default": "./dist/preset.js"
|
|
35
|
+
},
|
|
36
|
+
"./styles.css": "./dist/styles.css"
|
|
37
|
+
},
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"@sjsf/form": "^0.2.1",
|
|
40
|
+
"svelte": "^5.0.0-next.1"
|
|
41
|
+
},
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"@playwright/test": "^1.28.1",
|
|
44
|
+
"@skeletonlabs/skeleton": "3.0.0-next.5",
|
|
45
|
+
"@sveltejs/adapter-auto": "^3.0.0",
|
|
46
|
+
"@sveltejs/kit": "^2.0.0",
|
|
47
|
+
"@sveltejs/package": "^2.0.0",
|
|
48
|
+
"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
|
|
49
|
+
"@tailwindcss/forms": "^0.5.9",
|
|
50
|
+
"@types/eslint": "^9.6.0",
|
|
51
|
+
"ajv": "^8.17.1",
|
|
52
|
+
"autoprefixer": "^10.4.20",
|
|
53
|
+
"eslint": "^9.0.0",
|
|
54
|
+
"eslint-config-prettier": "^9.1.0",
|
|
55
|
+
"eslint-plugin-svelte": "^2.36.0",
|
|
56
|
+
"globals": "^15.0.0",
|
|
57
|
+
"postcss": "^8.4.47",
|
|
58
|
+
"prettier": "^3.1.1",
|
|
59
|
+
"prettier-plugin-svelte": "^3.1.2",
|
|
60
|
+
"publint": "^0.2.0",
|
|
61
|
+
"svelte": "^5.0.0-next.1",
|
|
62
|
+
"svelte-check": "^4.0.0",
|
|
63
|
+
"tailwindcss": "^3.4.13",
|
|
64
|
+
"typescript": "^5.0.0",
|
|
65
|
+
"typescript-eslint": "^8.0.0",
|
|
66
|
+
"vite": "^5.0.11",
|
|
67
|
+
"vitest": "^2.0.0",
|
|
68
|
+
"@sjsf/ajv8-validator": "0.2.1",
|
|
69
|
+
"@sjsf/form": "0.2.1"
|
|
70
|
+
},
|
|
71
|
+
"svelte": "./dist/index.js",
|
|
72
|
+
"types": "./dist/index.d.ts",
|
|
73
|
+
"scripts": {
|
|
74
|
+
"dev": "vite dev",
|
|
75
|
+
"build": "svelte-package && vite build && mv $(find .svelte-kit/output/client/_app/immutable/assets/ -name \"_page*.css\" | head -n 1) dist/styles.css && sed -i 's/:root \\[data-theme=/:host \\[data-theme=/g' dist/styles.css && publint",
|
|
76
|
+
"preview": "vite preview",
|
|
77
|
+
"test": "pnpm run test:unit",
|
|
78
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
79
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
80
|
+
"lint": "prettier --check . && eslint .",
|
|
81
|
+
"format": "prettier --write .",
|
|
82
|
+
"test:integration": "playwright test",
|
|
83
|
+
"test:unit": "vitest"
|
|
84
|
+
}
|
|
85
|
+
}
|