lutra 0.0.1

package/dist/Navigation/Menu.svelte

@@ -0,0 +1,180 @@
+<script>import { page } from "$app/stores";
+let {
+  items
+} = $props();
+function parseHref(href) {
+  if (!href)
+    return {
+      href: void 0,
+      exact: false
+    };
+  if (href.endsWith("*")) {
+    return {
+      href: href.slice(0, -1),
+      exact: false
+    };
+  }
+  return {
+    href,
+    exact: true
+  };
+}
+function parseLinks(items2) {
+  return items2.map((item) => {
+    if (item.href) {
+      return {
+        ...item,
+        ...parseHref(item.href)
+      };
+    }
+    if (!item.children)
+      return item;
+    return {
+      ...item,
+      children: parseLinks(item.children)
+    };
+  });
+}
+const parsedItems = parseLinks(items);
+</script>
+
+<nav>
+    <ul>
+        {#snippet link(i)}
+            <li aria-current={i.exact ? ($page?.url?.pathname === i.href ? 'page' : undefined) : ($page?.url?.pathname?.startsWith(i.href) ? 'page' : undefined)}>
+                {#if i.href}
+                    <a href={i.href}>
+                        {#if i.icon}
+                            <svelte:component this={i.icon} />
+                        {/if}
+                        {i.label}
+                    </a>
+                {:else}
+                    <span>
+                        {#if i.icon}
+                            <svelte:component this={i.icon} />
+                        {/if}
+                        {i.label}
+                    </span>
+                {/if}
+                {#if i.children}
+                    <ul>
+                        {#each i.children as child}
+                            {@render link(child)}
+                        {/each}
+                    </ul>
+                {/if}
+            </li>
+        {/snippet}
+        {#each parsedItems as item, index}
+            {@render link(item)}
+        {/each}
+    </ul>
+</nav>
+
+<style>
+    nav {
+    }
+    ul {
+        display: flex;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    a, span {
+        display: flex;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        text-decoration: none;
+        font-weight: 500;
+        color: var(--menu-link);
+    }
+    a:hover, span:hover {
+        background: var(--menu-bg-hover);
+        color: var(--menu-link-hover);
+    }
+    /** loop */
+    ul > li > ul {
+        display: none;
+        position: absolute;
+        flex-direction: column;
+        top: 100%;
+        left: 0;
+        background: var(--menu-bg);
+        border: var(--menu-border);
+    }
+    ul > li:hover > ul,
+    ul > li:focus-within > ul {
+        display: flex;
+    }
+    ul > li:hover,
+    ul > li:focus-within {
+        background: var(--menu-bg-hover);
+    }
+    ul > li:hover > a,
+    ul > li:focus-within > a,
+    ul > li:hover > span,
+    ul > li:focus-within > span {
+        color: var(--menu-link-hover);
+    }
+
+    ul > li {
+        border-block-end: var(--menu-border);
+        position: relative;
+        white-space: nowrap;
+    }
+    ul > li:last-child {
+        border-block-end: none;
+    }
+    ul > li > ul {
+        left: 100%;
+        top: -1px;
+    }
+    ul > li:has(ul) > a {
+        padding-inline-end: 2rem;
+    }
+    ul > li:has(ul) > a::after {
+        content: "▶";
+        padding-inline-start: 0.5rem;
+        font-size: 9px;
+        position: absolute;
+        right: 0.75rem;
+        color: var(--menu-link);
+    }
+    /** top level */
+    nav > ul {
+        flex-direction: row;
+        gap: 1px;
+        position: relative;
+    }
+    nav > ul > li {
+        border-block-end: none;
+    }
+    nav > ul > li > a {
+        border-radius: var(--border-radius);
+    }
+    nav > ul > li > a:hover {
+        border-radius: var(--border-radius);
+    }
+    nav > ul > li > ul {
+        top: 100%;
+        left: 0;
+        background: var(--menu-bg);
+        border: var(--menu-border);
+        filter: drop-shadow(0 0.25rem 0.5rem var(--shadow));
+    }
+    nav > ul > li:has(ul) > a {
+        padding: 0.75rem 1rem;
+    }
+    nav > ul > li:has(ul) > a::after {
+        content: "";
+        padding: 0;
+    }
+    ul > li[aria-current="page"] a {
+        background: var(--menu-bg-active);
+        color: var(--menu-link-active);
+    }
+    ul > li[aria-current="page"] a:hover {
+        color: var(--menu-link-active-hover);
+    }
+</style>

package/dist/Navigation/Menu.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { MenuItem } from "./MenuTypes.svelte.js";
+declare const __propDef: {
+    props: {
+        /** Menu items to display */
+        items: MenuItem[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuProps = typeof __propDef.props;
+export type MenuEvents = typeof __propDef.events;
+export type MenuSlots = typeof __propDef.slots;
+export default class Menu extends SvelteComponent<MenuProps, MenuEvents, MenuSlots> {
+}
+export {};

package/dist/Navigation/MenuTypes.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentType, Snippet } from "svelte";
+export type MenuItem = {
+    /** Text label of the item to display to the user. */
+    label: string;
+    /** Path or URL to use for the menu item. If the href ends with a star (*), it will match any path that starts with the given path. This allows for nested active menu items. */
+    href?: string;
+    /** Icon to display. Pass either a Svelte Component or an URL. Use the Icon component to recolor your icons according to the user theme. */
+    icon?: string | ComponentType;
+    /** Menu item children. Pass an array of menu items to create a nested menu. */
+    children?: MenuItem[];
+};
+export type TabItem = {
+    /** Text label of the item to display to the user. */
+    label: string;
+    /** Path or URL to use for the item. If the href ends with a star (*), it will match any path that starts with the given path. This allows for nested active items. */
+    href: string;
+    /** Click event handler. */
+    onclick?: (event: MouseEvent, item: TabItem, index: number) => void;
+    /** If true, overrides the currently selected item. */
+    active?: boolean;
+};
+export type TabbedContentItem = {
+    /** Text label of the item to display to the user. */
+    label: string;
+    /** URL hash to use for the item. */
+    hash?: string;
+    /** Content to display when the item is selected. */
+    content: Snippet;
+};
+export type BreadcrumbItem = {
+    /** Text label of the item to display to the user. */
+    label: string;
+    /** Icon to display. Pass either a Svelte Component or an URL. Use the Icon component to recolor your icons according to the user theme. */
+    icon?: string | ComponentType;
+    /** Path or URL to use for the breadcrumb item. */
+    href?: string;
+};

package/dist/Navigation/MenuTypes.svelte.js

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

package/dist/Navigation/TabbedContent.svelte

@@ -0,0 +1,43 @@
+<script>import { page } from "$app/stores";
+import Tabs from "./Tabs.svelte";
+const {
+  items,
+  contained,
+  rounded
+} = $props();
+function formatHash(hash) {
+  hash = hash.toLowerCase().replace(/\s/g, "-");
+  if (!hash.startsWith("#")) {
+    hash = `#${hash}`;
+  }
+  return hash;
+}
+;
+let itemsWithHref = $derived(items.map((item, index) => {
+  const href = item.hash ? formatHash(item.hash) : `#${item.label.toLowerCase().replace(/\s/g, "-")}`;
+  return {
+    content: item.content,
+    label: item.label,
+    href,
+    active: $page.url?.hash === href
+  };
+}));
+let activeItem = $derived(itemsWithHref.find((item) => item.active) || itemsWithHref[0]);
+let activeContent = $derived(activeItem?.content);
+</script>
+
+<div>
+    <Tabs items={itemsWithHref} {contained} {rounded} />
+
+    {#if activeContent}
+        {@render activeContent()}
+    {/if}
+</div>
+
+<style>
+    div {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap, 1.5rem);
+    }
+</style>

package/dist/Navigation/TabbedContent.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { TabbedContentItem } from "./MenuTypes.svelte.js";
+declare const __propDef: {
+    props: {
+        /** Tab items to display. */
+        items: TabbedContentItem[];
+        /** Contain the element in a box. */
+        contained?: boolean | undefined;
+        /** Round the corners of the element if contained. */
+        rounded?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TabbedContentProps = typeof __propDef.props;
+export type TabbedContentEvents = typeof __propDef.events;
+export type TabbedContentSlots = typeof __propDef.slots;
+export default class TabbedContent extends SvelteComponent<TabbedContentProps, TabbedContentEvents, TabbedContentSlots> {
+}
+export {};

package/dist/Navigation/Tabs.svelte

@@ -0,0 +1,118 @@
+<script>const {
+  items,
+  underline,
+  contained,
+  rounded
+} = $props();
+function onClickButton(event, item, index) {
+}
+</script>
+
+<nav class="Tabs" class:contained class:rounded>
+    <menu>
+        {#each items as item, index}
+            <li data-index={index} aria-current={item.active ? 'page' : undefined}>
+                {#if item.href}
+                    <a draggable="false" href={item.href}>
+                        {item.label}
+                    </a>
+                {:else if item.onclick}
+                    <button draggable="false" onclick={(event) => onClickButton(event, item, index)}>
+                        {item.label}
+                    </button>
+                {/if}
+            </li>
+        {/each}
+        <div class="Underline"></div>
+    </menu>
+</nav>
+
+<style>
+    .Tabs {
+        display: flex;
+        z-index: 2;
+        background: var(--menu-bg);
+        overflow: clip;
+    }
+    .Tabs.contained {
+        border: var(--menu-border);
+    }
+    .Tabs.rounded {
+        border-radius: var(--border-radius);
+    }
+    menu, li {
+        list-style: none;
+        margin: 0;
+    }
+    menu {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        padding: 0;
+        gap: 1rem;
+        inline-size: 100%;
+        border-block-end: var(--menu-border);
+    }
+    .Tabs.contained menu {
+        gap: 0;
+        flex-grow: 1;
+        justify-content: stretch;
+        border-block-end: 0;
+    }
+    a,
+    button {
+        display: block;
+        padding: 0.75rem 0.5rem;
+        color: var(--menu-link);
+        transition: all var(--menu-trans);
+        font-weight: 500;
+        letter-spacing: -0.05ch;
+        background: transparent;
+        border: none;
+        border-block-end: 2px solid transparent;
+        cursor: pointer;
+        text-decoration: none;
+    }
+    .Tabs.contained li {
+        flex-grow: 1;
+        border-inline-end: var(--menu-border);
+        flex-basis: auto;
+    }
+    .Tabs.contained menu li:last-of-type {
+        border-inline-end: 0;
+    }
+    .Tabs.contained a,
+    .Tabs.contained button {
+        flex-grow: 1;
+        inline-size: 100%;
+        text-align: center;
+        padding-block-start: calc(0.75rem + 3px);
+        color: var(--menu-link);
+        font-weight: 600;
+    }
+    a:hover,
+    button:hover {
+        background: var(--menu-bg-hover);
+        color: var(--menu-link-hover);
+    }
+    li[aria-current="page"] a,
+    li[aria-current="page"] button {
+        background: var(--menu-bg-active);
+        color: var(--menu-link-active);
+        opacity: 1;
+        border-block-end: 2px solid var(--menu-link-active);
+    }
+    .Underline {
+        inline-size: 0px;
+        block-size: 2px;
+        background-color: var(--menu-link-active);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        transition: all 0.3s ease-in-out;
+        opacity: 0;
+    }
+</style>

package/dist/Navigation/Tabs.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { TabItem } from "./MenuTypes.svelte.js";
+declare const __propDef: {
+    props: {
+        /** Tab items to display. */
+        items: TabItem[];
+        /** Underline the active tab. The underline will slide to the selected tab unless reduced motion is enabled. */
+        underline?: boolean | undefined;
+        /** Contain the element in a box. */
+        contained?: boolean | undefined;
+        /** Round the corners of the element if contained. */
+        rounded?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};

package/dist/Pages/LoginPage.svelte

@@ -0,0 +1,32 @@
+<script>import Logo from "../../components/Logo.svelte";
+import Icon from "../Display/Icon.svelte";
+import Button from "../Form/Button.svelte";
+import FieldActions from "../Form/FieldActions.svelte";
+import FieldContainer from "../Form/FieldContainer.svelte";
+import FieldSection from "../Form/FieldSection.svelte";
+import Fieldset from "../Form/Fieldset.svelte";
+import Form from "../Form/Form.svelte";
+import Input from "../Form/Input.svelte";
+import PageContent from "../Layout/PageContent.svelte";
+import H1 from "../Typography/H1.svelte";
+</script>
+
+<PageContent center middle pad --max-inline-size="420px">
+    <H1 center>
+        Log in
+    </H1>
+    <Form>
+        <FieldContainer contained --font-size="1.25em">
+            <FieldSection>
+                <Fieldset>
+                    <Input type="email" autocomplete="email" placeholder="Email" name="email" />
+                    <Input type="password" name="password" placeholder="Your password" />
+                </Fieldset>
+            </FieldSection>
+            <FieldActions>
+                <Button type="submit">Log in</Button>
+                <a href="/forgot-password">Forgot your password?</a>
+            </FieldActions>
+        </FieldContainer>
+    </Form>
+</PageContent>

package/dist/Pages/LoginPage.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LoginPageProps = typeof __propDef.props;
+export type LoginPageEvents = typeof __propDef.events;
+export type LoginPageSlots = typeof __propDef.slots;
+export default class LoginPage extends SvelteComponent<LoginPageProps, LoginPageEvents, LoginPageSlots> {
+}
+export {};

package/dist/Typography/Clamp.svelte

@@ -0,0 +1,25 @@
+<script>import { setContext } from "svelte";
+let {
+  children,
+  inline,
+  block,
+  clip
+} = $props();
+</script>
+
+<div class="Clamp" class:clip style="{inline ? '--clampInline: '+inline : ''} {block ? '--clampBlock: '+block : ''}">
+    {@render children()}
+</div>
+
+<style>
+    .Clamp {
+        max-inline-size: var(--clampInline, inherit);
+        max-block-size: var(--clampBlock, inherit);
+    }
+    .Clamp.clip {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        container-type: inline-size;
+    }
+</style>

package/dist/Typography/Clamp.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        children: Snippet;
+        /** Clamp in the logical inline direction */
+        inline?: string | undefined;
+        /** Clamp in the logical block direction */
+        block?: string | undefined;
+        /** Clip the text */
+        clip?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ClampProps = typeof __propDef.props;
+export type ClampEvents = typeof __propDef.events;
+export type ClampSlots = typeof __propDef.slots;
+export default class Clamp extends SvelteComponent<ClampProps, ClampEvents, ClampSlots> {
+}
+export {};

package/dist/Typography/H.svelte

@@ -0,0 +1,51 @@
+<script>import {} from "svelte";
+let {
+  children,
+  level = 1,
+  center = false,
+  subtle = false,
+  hr = false
+} = $props();
+const Tag = `h${level}`;
+</script>
+
+<svelte:element this={Tag} class:subtle class:hr class:center class="H Level-{level}">
+    {@render children()}
+</svelte:element>
+
+<style> 
+    .center {
+        text-align: center;
+    }
+    .subtle {
+        color: var(--text-subtle);
+    }
+    .hr {
+        border-block-end: var(--border);
+    }
+    .Level-1.hr {
+        padding-block-end: 2rem;
+        margin-block-end: 1rem;
+        border-block-end: var(--border);
+    }
+    .Level-2.hr {
+        padding-block-end: 1.5rem;
+        margin-block-end: 0.75rem;
+    }
+    .Level-3.hr {
+        padding-block-end: 1rem;
+        margin-block-end: 0.5rem;
+    }
+    .Level-4.hr {
+        padding-block-end: 0.75rem;
+        margin-block-end: 0.75rem;
+    }
+    .Level-5.hr {
+        padding-block-end: 0.75rem;
+        margin-block-end: 0.25rem;
+    }
+    .Level-6.hr {
+        padding-block-end: 0.5rem;
+        margin-block-end: 0.25rem;
+    }
+</style>

package/dist/Typography/H.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        children: Snippet;
+        /** The level of the heading. */
+        level?: 5 | 3 | 2 | 1 | 4 | 6 | undefined;
+        /** Center the text. */
+        center?: boolean | undefined;
+        /** Make the text subtle. */
+        subtle?: boolean | undefined;
+        /** Add a horizontal rule below the text. */
+        hr?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HProps = typeof __propDef.props;
+export type HEvents = typeof __propDef.events;
+export type HSlots = typeof __propDef.slots;
+export default class H extends SvelteComponent<HProps, HEvents, HSlots> {
+}
+export {};

package/dist/Typography/H1.svelte

@@ -0,0 +1,14 @@
+<script>import {} from "svelte";
+import H from "./H.svelte";
+let {
+  center = false,
+  hr = false,
+  subtle = false,
+  children
+} = $props();
+</script>
+
+
+<H level={1} center={center} hr={hr} subtle={subtle}>
+    {@render children()}
+</H>

package/dist/Typography/H1.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Center the text. */
+        center?: boolean | undefined;
+        /** Add a horizontal rule below the text. */
+        hr?: boolean | undefined;
+        /** Make the text subtle. */
+        subtle?: boolean | undefined;
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type H1Props = typeof __propDef.props;
+export type H1Events = typeof __propDef.events;
+export type H1Slots = typeof __propDef.slots;
+export default class H1 extends SvelteComponent<H1Props, H1Events, H1Slots> {
+}
+export {};

package/dist/Typography/H2.svelte

@@ -0,0 +1,13 @@
+<script>import {} from "svelte";
+import H from "./H.svelte";
+let {
+  center = false,
+  hr = false,
+  subtle = false,
+  children
+} = $props();
+</script>
+
+<H level={2} center={center} hr={hr} subtle={subtle}>
+    {@render children()}
+</H>