@swr-data-lab/components 1.13.0 → 1.13.2

package/dist/DesignTokens/Tokens.js

@@ -0,0 +1,171 @@
+const shades = {
+    violet: {
+        light5: '#f3eefa',
+        light4: '#e5dbf5',
+        light3: '#d4c5ee',
+        light2: '#bba4e5',
+        light1: '#9670db',
+        base: '#8257D1',
+        dark1: '#7f4cdf',
+        dark2: '#6830cf',
+        dark3: '#441993',
+        dark4: '#301268',
+        dark5: '#1D0B40'
+    },
+    red: {
+        light5: '#ffcfcc',
+        light4: '#FFB9A8',
+        light3: '#FF9B82',
+        light2: '#FF7957',
+        light1: '#FF4D20',
+        base: '#E92F02',
+        dark1: '#C52A04',
+        dark2: '#A22406',
+        dark3: '#801F09',
+        dark4: '#5F1A0B',
+        dark5: '#3F150D'
+    },
+    teal: {
+        light5: '#E5FBFF',
+        light4: '#B9EDF6',
+        light3: '#8CDEEC',
+        light2: '#5BCFE1',
+        light1: '#26BED6',
+        base: '#07ABC5',
+        dark1: '#0698B0',
+        dark2: '#04859C',
+        dark3: '#037389',
+        dark4: '#016275',
+        dark5: '#005163'
+    },
+    yellow: {
+        light1: '#FFFDB2',
+        light2: '#FEF67C',
+        light3: '#FDEF3E',
+        light4: '#FAE617',
+        light5: '#F5DF13',
+        base: '#EFD710',
+        dark1: '#E3CA0D',
+        dark2: '#DCC10A',
+        dark3: '#D1B406',
+        dark4: '#C9AC03',
+        dark5: '#C2A300'
+    },
+    forest: {
+        light5: '#EFFBE9',
+        light4: '#CEE9D1',
+        light3: '#ADD6BA',
+        light2: '#8CC4A3',
+        light1: '#6BB28B',
+        base: '#499F73',
+        dark1: '#278D5B',
+        dark2: '#137848',
+        dark3: '#0C643A',
+        dark4: '#06502D',
+        dark5: '#003D20'
+    },
+    pink: {
+        light5: '#FFCCF5',
+        light4: '#FFADE7',
+        light3: '#FF8CD7',
+        light2: '#FF66C6',
+        light1: '#FF30AC',
+        base: '#E9028D',
+        dark1: '#C7047F',
+        dark2: '#A50771',
+        dark3: '#830963',
+        dark4: '#620B55',
+        dark5: '#400E47'
+    },
+    orange: {
+        light5: '#FFEECC',
+        light4: '#FFD584',
+        light3: '#FFBA35',
+        light2: '#F4A101',
+        light1: '#DA8F03',
+        base: '#C17D05',
+        dark1: '#A86C07',
+        dark2: '#905B09',
+        dark3: '#794B0B',
+        dark4: '#623B0D',
+        dark5: '#4C2C0F'
+    },
+    plum: {
+        light5: '#F1CCFF',
+        light4: '#E9AEFF',
+        light3: '#E08EFF',
+        light2: '#D76CFF',
+        light1: '#CB42FF',
+        base: '#B600FB',
+        dark1: '#9903D4',
+        dark2: '#7C05AE',
+        dark3: '#610889',
+        dark4: '#450A65',
+        dark5: '#400E47'
+    },
+    apple: {
+        light5: '#EFFBEA',
+        light4: '#C5F0B1',
+        light3: '#98E472',
+        light2: '#65D62B',
+        light1: '#5BC128',
+        base: '#53AD26',
+        dark1: '#4A9825',
+        dark2: '#438523',
+        dark3: '#3B7122',
+        dark4: '#335E20',
+        dark5: '#2C4C1F'
+    },
+    blue: {
+        light5: '#CCDCFF',
+        light4: '#B1C5F9',
+        light3: '#97AEF2',
+        light2: '#7D97EC',
+        light1: '#6280E5',
+        base: '#4768DF',
+        dark1: '#2F51D2',
+        dark2: '#2A3FAC',
+        dark3: '#262D87',
+        dark4: '#211C64',
+        dark5: '#1D0B40'
+    },
+    gray: {
+        light5: 'hsl(225, 2%, 95%)',
+        light3: 'hsl(225, 2%, 77%)',
+        base: 'hsl(227, 2%, 50%)',
+        dark2: 'hsl(236, 2%, 38%)',
+        dark3: 'hsl(236, 2%, 32%)',
+        dark4: 'hsl(236, 2%, 22%)',
+        dark5: 'hsl(236, 2%, 5%)'
+    }
+};
+const scales = {
+    red_blue: [...Object.values(shades.red).reverse(), ...Object.values(shades.blue)],
+    red_violet: [...Object.values(shades.red).reverse(), ...Object.values(shades.violet)],
+    violet_teal: [...Object.values(shades.violet).reverse(), ...Object.values(shades.teal)],
+    orange_teal: [...Object.values(shades.orange).reverse(), ...Object.values(shades.teal)],
+    red_forest: [...Object.values(shades.red).reverse(), ...Object.values(shades.forest)],
+    red_apple: [...Object.values(shades.red).reverse(), ...Object.values(shades.apple)],
+    red_teal: [...Object.values(shades.red).reverse(), ...Object.values(shades.violet)],
+    violet_orange: [...Object.values(shades.violet).reverse(), ...Object.values(shades.orange)],
+    orange_blue: [...Object.values(shades.orange).reverse(), ...Object.values(shades.blue)],
+    teal_pink: [...Object.values(shades.teal).reverse(), ...Object.values(shades.pink)],
+    blue_pink: [...Object.values(shades.blue).reverse(), ...Object.values(shades.pink)],
+    apple_plum: [...Object.values(shades.apple).reverse(), ...Object.values(shades.plum)],
+    forest_plum: [...Object.values(shades.forest).reverse(), ...Object.values(shades.plum)]
+};
+const typography = {
+    wide: {
+        sizes: {
+            'fs-small-3': '0.75rem',
+            'fs-small-2': '0.875rem',
+            'fs-small-1': '1rem',
+            'fs-base': '1.25rem',
+            'fs-large-1': '1.5rem',
+            'fs-large-2': '2rem',
+            'fs-large-3': '2.5rem',
+            'fs-large-4': '3.5rem'
+        }
+    }
+};
+export { shades, scales, typography };

package/dist/DesignTokens/index.d.ts

@@ -0,0 +1,8 @@
+import DesignTokens from './DesignTokens.svelte';
+export namespace tokens {
+    export { shades };
+    export { scales };
+}
+import { shades } from './Tokens';
+import { scales } from './Tokens';
+export { DesignTokens };

package/{src → dist}/FormLabel/FormLabel.svelte

@@ -1,12 +1,5 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface FormLabelProps {
-		as?: string;
-		htmlFor?: string;
-		children?: Snippet;
-	}
-	let { as = 'label', htmlFor, children }: FormLabelProps = $props();
+<script lang="ts">let { as = 'label', htmlFor, children } = $props();
+export {};
 </script>
 
 {#if as == 'legend'}

package/dist/FormLabel/FormLabel.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface FormLabelProps {
+    as?: string;
+    htmlFor?: string;
+    children?: Snippet;
+}
+declare const FormLabel: import("svelte").Component<FormLabelProps, {}, "">;
+type FormLabel = ReturnType<typeof FormLabel>;
+export default FormLabel;

package/dist/FormLabel/index.js

@@ -0,0 +1,2 @@
+import FormLabel from './FormLabel.svelte';
+export default FormLabel;

package/{src → dist}/Headline/Headline.svelte

@@ -1,10 +1,5 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface HeadlineProps {
-		children?: Snippet;
-	}
-	let { children }: HeadlineProps = $props();
+<script lang="ts">let { children } = $props();
+export {};
 </script>
 
 <h2 class="container">

package/dist/Headline/Headline.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface HeadlineProps {
+    children?: Snippet;
+}
+declare const Headline: import("svelte").Component<HeadlineProps, {}, "">;
+type Headline = ReturnType<typeof Headline>;
+export default Headline;

package/dist/Headline/index.js

@@ -0,0 +1,2 @@
+import Headline from './Headline.svelte';
+export default Headline;

package/dist/HighlightCard/HighlightCard.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">import Card from '../Card/Card.svelte';
+let { topline, value, unit, subline } = $props();
+</script>
+
+<Card>
+	<div class="card-wrapper">
+		{#if topline}
+			<div class="top">
+				{@html topline}
+			</div>
+		{/if}
+		<div class="middle">
+			<span class="underline">
+				{value}
+			</span>
+			{unit}
+		</div>
+		{#if subline}
+			<div class="bottom">
+				{@html subline}
+			</div>
+		{/if}
+	</div>
+</Card>
+
+<style>.card-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 200px;
+}
+
+.top {
+  display: flex;
+  align-items: flex-end;
+  flex: 1;
+}
+
+.middle {
+  font-size: var(--fs-large-4);
+  font-weight: 700;
+  padding-bottom: 0.2em;
+}
+
+.bottom {
+  display: flex;
+  align-items: flex-start;
+  flex: 1;
+}
+
+.underline {
+  width: fit-content;
+  background: linear-gradient(to bottom, transparent 90%, var(--red-base) 90%);
+}</style>

package/dist/HighlightCard/HighlightCard.svelte.d.ts

@@ -0,0 +1,9 @@
+interface HighlightCardProps {
+    topline?: string;
+    value?: string;
+    unit?: string;
+    subline?: string;
+}
+declare const HighlightCard: import("svelte").Component<HighlightCardProps, {}, "">;
+type HighlightCard = ReturnType<typeof HighlightCard>;
+export default HighlightCard;

package/dist/HighlightCard/index.d.ts

@@ -0,0 +1,2 @@
+export default HighlightCard;
+import HighlightCard from './HighlightCard.svelte';

package/dist/Input/Input.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">import FormLabel from '../FormLabel/FormLabel.svelte';
+export let label = '';
+export let name = '';
+export let placeholder = '';
+export let value = '';
+</script>
+
+<div class="container">
+	<FormLabel htmlFor={name}>{label}</FormLabel>
+	<input {name} type="text" {placeholder} bind:value />
+</div>
+
+<style>input {
+  font-family: var(--swr-sans);
+  font-size: 1.1rem;
+  line-height: 1.45;
+  letter-spacing: 0.0045em;
+  height: 2.5em;
+  width: 100%;
+  border: 1px solid currentColor;
+  border-radius: var(--br-small);
+  background: transparent;
+  padding: 0 0.5em;
+  padding-top: 0.1em;
+  color: currentColor;
+  margin: 0;
+  display: block;
+  text-size-adjust: none;
+}
+input:focus-visible {
+  outline: 4px solid rgba(255, 255, 255, 0.4);
+}</style>

package/dist/Input/Input.svelte.d.ts

@@ -0,0 +1,23 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Input: $$__sveltets_2_IsomorphicComponent<{
+    label?: string;
+    name?: string;
+    placeholder?: string;
+    value?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Input = InstanceType<typeof Input>;
+export default Input;

package/dist/Input/index.d.ts

@@ -0,0 +1,2 @@
+export default Input;
+import Input from './Input.svelte';

package/dist/Logotype/Logotype.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Logotype;
+type Logotype = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Logotype: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Middot/Middot.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Middot;
+type Middot = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Middot: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Middot/index.d.ts

@@ -0,0 +1,2 @@
+export default Middot;
+import Middot from './Middot.svelte';

package/dist/Note/Note.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">let { children } = $props();
+export {};
+</script>
+
+<div class="container">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>.container {
+  font-family: var(--swr-sans);
+  font-size: var(--fs-small-2);
+  line-height: 1.4;
+  letter-spacing: 0.001em;
+  color: var(--gray-base);
+}
+.container :global(*) {
+  color: inherit;
+}
+.container :global(p) {
+  margin-bottom: 0.5em;
+}
+.container :global(a):hover, .container :global(a):focus-visible,
+.container :global(summary):hover,
+.container :global(summary):focus-visible {
+  color: var(--gray-dark-3);
+}</style>

package/dist/Note/Note.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface NoteProps {
+    children?: Snippet;
+}
+declare const Note: import("svelte").Component<NoteProps, {}, "">;
+type Note = ReturnType<typeof Note>;
+export default Note;

package/dist/Note/index.js

@@ -0,0 +1,2 @@
+import Note from './Note.svelte';
+export default Note;

package/dist/Select/Select.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">import Select from 'svelte-select';
+import {} from './Select.types';
+let { inputId = 'select', placeholder = 'Bitte auswählen', items = [], groupBy, groupHeaderSelectable = false, clearable = true, value = $bindable(undefined) } = $props();
+const groupByFn = groupBy || ((item) => item.group);
+</script>
+
+<div class="container">
+	<Select
+		{items}
+		groupBy={items.length > 0 && items.every((item) => item.group) ? groupByFn : undefined}
+		id={inputId}
+		{placeholder}
+		{groupHeaderSelectable}
+		{clearable}
+		class="container"
+		bind:value
+	>
+		<div class="item" slot="item" let:item>
+			<slot name="item" {item}>
+				{item.label}
+			</slot>
+		</div>
+		<div class="selection" slot="selection" let:selection>
+			<slot name="selection" {selection}>
+				{selection.label}
+			</slot>
+		</div>
+	</Select>
+</div>
+
+<style>.item {
+  font-family: var(--swr-sans);
+  color: var(--violet-dark-5);
+}
+
+.selection {
+  font-family: var(--swr-sans);
+  color: var(--violet-dark-5);
+}</style>

package/dist/Select/Select.svelte.d.ts

@@ -0,0 +1,4 @@
+import Select from 'svelte-select';
+declare const Select: any;
+type Select = InstanceType<typeof Select>;
+export default Select;

package/{src/Select/Select.types.ts → dist/Select/Select.types.d.ts}

@@ -4,5 +4,4 @@ interface SelectItem {
     group?: string;
     details?: any;
 }
-
-export { type SelectItem }
+export { type SelectItem };

package/dist/Select/Select.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Select/index.d.ts

@@ -0,0 +1,2 @@
+export default Select;
+import Select from './Select.svelte';

package/dist/Switcher/Switcher.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">import FormLabel from '../FormLabel/FormLabel.svelte';
+let { label, options, size = 'default', value = $bindable(null) } = $props();
+const groupId = $props.id();
+const groupName = 'select-' + groupId;
+function optionToID(o) {
+    return `${groupName}-option-${o.replace(/ /g, '-').toLowerCase()}`;
+}
+</script>
+
+<fieldset class="container" class:small={size === 'small'}>
+	<FormLabel as="legend">{label}</FormLabel>
+	<ul>
+		{#each options as o (o)}
+			<li class:is-selected={o === value}>
+				<label for={optionToID(o)}>
+					{o}
+				</label>
+				<input id={optionToID(o)} name={groupName} value={o} type="radio" bind:group={value} />
+			</li>
+		{/each}
+	</ul>
+</fieldset>
+
+<style>fieldset {
+  border: 0;
+  font-family: var(--swr-sans);
+}
+
+ul {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  border: 1px solid currentColor;
+  background: white;
+  border-radius: var(--br-small);
+}
+@media (min-width: 425px) {
+  ul {
+    flex-flow: row;
+  }
+}
+ul:focus-within, ul:active {
+  outline: 2px solid var(--blue-light-2);
+}
+
+li {
+  display: contents;
+}
+li:last-child label {
+  border-right: 0;
+  border-bottom: 0;
+}
+
+input {
+  position: absolute;
+  left: -999px;
+}
+
+.small label {
+  font-size: var(--fs-small-1);
+  height: 2.25em;
+  padding: 0 0.65em;
+}
+
+label {
+  font-size: var(--fs-base);
+  line-height: 1;
+  white-space: nowrap;
+  padding: 0 1em;
+  cursor: pointer;
+  margin: 0;
+  align-items: center;
+  display: flex;
+  color: currentColor;
+  position: relative;
+  transition: var(--fast);
+  text-underline-offset: 0.2em;
+  border-bottom: 1px solid currentColor;
+  height: 2.25em;
+}
+@media (min-width: 425px) {
+  label {
+    justify-content: center;
+    padding: 0 1em;
+    flex-basis: 0;
+    flex-grow: 1;
+    border-right: 1px solid currentColor;
+    border-bottom: 0;
+  }
+}
+@media (min-width: 425px) {
+  label {
+    height: 2.5em;
+  }
+}
+label:hover, label:focus-visible {
+  text-decoration: underline;
+}
+.is-selected label {
+  background: rgb(247, 247, 247);
+  font-weight: 600;
+  box-shadow: inset 5px 0px 0 0 var(--violet-dark-5);
+}
+@media (min-width: 425px) {
+  .is-selected label {
+    box-shadow: inset 0 -3px 0 0 var(--violet-dark-5);
+  }
+}</style>

package/dist/Switcher/Switcher.svelte.d.ts

@@ -0,0 +1,21 @@
+interface SwitcherProps {
+    /**
+     * Human-readable label
+     */
+    label: string;
+    /**
+     * Available options
+     */
+    options: string[];
+    /**
+     * Display size
+     */
+    size?: 'default' | 'small';
+    /**
+     * The currently-selected option
+     */
+    value: string | null;
+}
+declare const Switcher: import("svelte").Component<SwitcherProps, {}, "value">;
+type Switcher = ReturnType<typeof Switcher>;
+export default Switcher;

package/dist/Switcher/index.d.ts

@@ -0,0 +1,2 @@
+export default Switcher;
+import Switcher from "./Switcher.svelte";