lutra 0.0.13 → 0.0.16

package/dist/nav/NavMenu.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">import { page } from "$app/stores";
+import UiContent from "../layout/UIContent.svelte";
+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>
+
+<UiContent>
+    <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>
+</UiContent>
+
+<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-text);
+    }
+    a:hover, span:hover {
+        background: var(--menu-bg-hover);
+        color: var(--menu-text-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-text-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-text);
+    }
+    /** 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-text-active);
+    }
+    ul > li[aria-current="page"] a:hover {
+        color: var(--menu-text-active-hover);
+    }
+</style>

package/dist/nav/NavMenu.svelte.d.ts

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

package/dist/nav/TabbedContent.svelte

@@ -1,4 +1,4 @@
-<script>import { page } from "$app/stores";
+<script lang="ts">import { page } from "$app/stores";
 import Tabs from "./Tabs.svelte";
 const {
   items,

package/dist/nav/Tabs.svelte

@@ -1,4 +1,4 @@
-<script>const {
+<script lang="ts">const {
   items,
   underline,
   contained,
@@ -17,7 +17,7 @@ function onClickButton(event, item, index) {
                         {item.label}
                     </a>
                 {:else if item.onclick}
-                    <button draggable="false" onclick={(event) => onClickButton(event, item, index)}>
+                    <button type="button" draggable="false" onclick={(event) => onClickButton(event, item, index)}>
                         {item.label}
                     </button>
                 {/if}
@@ -66,7 +66,7 @@ function onClickButton(event, item, index) {
     button {
         display: block;
         padding: 0.75rem 0.5rem;
-        color: var(--menu-link);
+        color: var(--menu-text);
         transition: all var(--menu-trans);
         font-weight: 500;
         letter-spacing: -0.05ch;
@@ -90,25 +90,25 @@ function onClickButton(event, item, index) {
         inline-size: 100%;
         text-align: center;
         padding-block-start: calc(0.75rem + 3px);
-        color: var(--menu-link);
+        color: var(--menu-text);
         font-weight: 600;
     }
     a:hover,
     button:hover {
         background: var(--menu-bg-hover);
-        color: var(--menu-link-hover);
+        color: var(--menu-text-hover);
     }
     li[aria-current="page"] a,
     li[aria-current="page"] button {
         background: var(--menu-bg-active);
-        color: var(--menu-link-active);
+        color: var(--menu-text-active);
         opacity: 1;
-        border-block-end: 2px solid var(--menu-link-active);
+        border-block-end: 2px solid var(--menu-text-active);
     }
     .Underline {
         inline-size: 0px;
         block-size: 2px;
-        background-color: var(--menu-link-active);
+        background-color: var(--menu-text-active);
         position: absolute;
         bottom: 0;
         left: 0;

package/dist/nav/index.d.ts

@@ -2,3 +2,5 @@ export { default as Breadcrumb } from './Breadcrumb.svelte';
 export { default as Menu } from './Menu.svelte';
 export { default as TabbedContent } from './TabbedContent.svelte';
 export { default as Tabs } from './Tabs.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export type { BreadcrumbItem, MenuItem as MenuItemType, TabItem, TabbedContentItem } from './MenuTypes.js';

package/dist/nav/index.js

@@ -2,3 +2,4 @@ export { default as Breadcrumb } from './Breadcrumb.svelte';
 export { default as Menu } from './Menu.svelte';
 export { default as TabbedContent } from './TabbedContent.svelte';
 export { default as Tabs } from './Tabs.svelte';
+export { default as MenuItem } from './MenuItem.svelte';

package/dist/style.css

@@ -54,7 +54,7 @@
     --l-focus-outline: var(--focus-size) solid var(--l-focus-color);
     /* text */
     --l-text: hsl(240, 2%, 20%);
-    --l-text-subtle: hsl(240, 2%, 44%);
+    --l-text-subtle: hsl(240, 2%, 50%);
     --l-text-highlight: hsl(206, 99%, 47%);
     --l-text-heading: hsl(240, 3%, 12%);
     --l-text-link: hsl(215, 70%, 55%);
@@ -118,10 +118,9 @@
     --l-menu-bg-active: hsl(215, 25%, 90%);
     --l-menu-bg-hover: hsl(215, 20%, 95%);
     --l-menu-border: var(--l-border-subtle);
-    --l-menu-link: #666;
-    --l-menu-link-hover: #333;
-    --l-menu-link-active: #333;
-    --l-menu-link-active-hover: #333;
+    --l-menu-text: var(--text);
+    --l-menu-text-subtle: var(--text-subtle);
+    --l-menu-text-active: hsl(240, 2%, 15%);
     /* status colors */
     --l-status-default: hsl(215, 20%, 85%);
     --l-status-ok: #28a745;
@@ -216,10 +215,8 @@
     --d-menu-bg-active: #444;
     --d-menu-bg-hover: #444;
     --d-menu-border: var(--d-border-subtle);
-    --d-menu-link: #ccc;
-    --d-menu-link-hover: #fff;
-    --d-menu-link-active: #fff;
-    --d-menu-link-active-hover: #fff;
+    --d-menu-text: #ccc;
+    --d-menu-text-active: #fff;
     /* status colors */
     --d-status-default: hsl(215, 10%, 25%);
     --d-status-ok: #4caf50;
@@ -255,8 +252,8 @@ body {
     -moz-osx-font-smoothing: grayscale;
     scrollbar-width: thin;
     font-kerning: auto;
-    scrollbar-gutter: stable both-edges;
     min-width: 280px;
+    scrollbar-gutter: stable both-edges;
 }
 
 body * {
@@ -378,6 +375,12 @@ code, pre {
     font-weight: 400;
 }
 
+hr {
+    border: 0;
+    border-top: var(--border);
+    box-sizing: content-box;
+}
+
 /**
  * Links
  */
@@ -438,10 +441,10 @@ input:user-invalid:focus-visible {
 }
 
 select {
-    padding-right: 2em;
+    padding-right: 2.25em;
     appearance: none;
-    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjc1LDAsMCwxLDAsMCkiPgogICAgICAgIDxwYXRoIGQ9Ik0xNiwwTDAsMEw4LDhMMTYsMFoiLz4KICAgIDwvZz4KPC9zdmc+Cg==') calc(100% - 0.65em) 50% no-repeat;
-    background-size: 10px;
+    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjc1LDAsMCwxLDAsMCkiPgogICAgICAgIDxwYXRoIGQ9Ik0xNiwwTDAsMEw4LDhMMTYsMFoiLz4KICAgIDwvZz4KPC9zdmc+Cg==') calc(100% - 0.75em) 50% no-repeat;
+    background-size: 12px;
 }
 
 input[type="submit"],
@@ -719,8 +722,9 @@ button:active,
     table {
         margin-block: 1.5em;
         border-collapse: collapse;
+        font-size: var(--font-size, 1em);
     }
-    table.full {
+    table.fullWidth {
         width: 100%;
     }
     table.contained {
@@ -737,18 +741,21 @@ button:active,
     table.rounded {
         border-radius: var(--border-radius);
         overflow: clip;
-        border-collapse: separate;
         border-spacing: 0;
     }
-    th {
+    tr {
+        border-block-end: var(--border-subtle);
     }
     th,
     td {
-        padding: var(--padding, 0.5rem 0.75rem);
+        font-size: 1em;
+        line-height: 1.5;
+        padding: var(--padding, 0.5em 0.75em);
         text-align: start;
-        border-inline-end: var(--border-subtle);
-        border-block-end: var(--border-subtle);
-        font-size: var(--font-size, 1em);
+    }
+    td.actions {
+        min-width: 0px;
+        width: 0px;
     }
     table.hang th:first-of-type,
     table.hang td:first-of-type {
@@ -764,15 +771,20 @@ button:active,
     }
     th {
         font-weight: 700;
-        border-block-end: var(--border);
-        border-inline-end: var(--border);
     }
-    table.color tr:nth-child(2n) {
+    table.colored tbody tr:nth-child(2n) {
         background-color: var(--bg-subtle);
     }
-    table tr:last-child td {
+    table.contained th,
+    table.contained td {
+        border-inline-end: var(--border-subtle);
+    }
+    table tbody tr:last-of-type {
         border-block-end: none;
     }
+    table thead tr {
+        background-color: var(--bg-subtle);
+    }
 
     /** Forms */
     fieldset label,

package/dist/typo/Clamp.svelte

@@ -1,4 +1,4 @@
-<script>import { setContext } from "svelte";
+<script lang="ts">import { setContext } from "svelte";
 let {
   children,
   inline,

package/dist/typo/H.svelte

@@ -1,6 +1,7 @@
-<script>import {} from "svelte";
+<script lang="ts">import {} from "svelte";
 let {
   children,
+  lang,
   level = 1,
   center = false,
   subtle = false,
@@ -9,7 +10,7 @@ let {
 const Tag = `h${level}`;
 </script>
 
-<svelte:element this={Tag} class:subtle class:hr class:center class="H Level-{level}">
+<svelte:element this={Tag} class:subtle class:hr class:center class="H Level-{level}" {lang}>
     {@render children()}
 </svelte:element>
 

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

@@ -3,6 +3,8 @@ import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
         children: Snippet;
+        /** Language of the element */
+        lang?: string | undefined;
         /** The level of the heading. */
         level?: 5 | 3 | 2 | 1 | 4 | 6 | undefined;
         /** Center the text. */

package/dist/typo/H1.svelte

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

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

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         /** Center the text. */
         center?: boolean | undefined;
+        /** Language of the element */
+        lang?: string | undefined;
         /** Add a horizontal rule below the text. */
         hr?: boolean | undefined;
         /** Make the text subtle. */

package/dist/typo/H2.svelte

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

package/dist/typo/H2.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         /** Center the text. */
         center?: boolean | undefined;
+        /** Language of the element */
+        lang?: string | undefined;
         /** Add a horizontal rule below the text. */
         hr?: boolean | undefined;
         /** Make the text subtle. */

package/dist/typo/H3.svelte

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

package/dist/typo/H3.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         /** Center the text. */
         center?: boolean | undefined;
+        /** Language of the element */
+        lang?: string | undefined;
         /** Add a horizontal rule below the text. */
         hr?: boolean | undefined;
         /** Make the text subtle. */

package/dist/typo/H4.svelte

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

package/dist/typo/H4.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         /** Center the text. */
         center?: boolean | undefined;
+        /** Language of the element */
+        lang?: string | undefined;
         /** Add a horizontal rule below the text. */
         hr?: boolean | undefined;
         /** Make the text subtle. */

package/dist/typo/H5.svelte

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

package/dist/typo/H5.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         /** Center the text. */
         center?: boolean | undefined;
+        /** Language of the element */
+        lang?: string | undefined;
         /** Add a horizontal rule below the text. */
         hr?: boolean | undefined;
         /** Make the text subtle. */

package/dist/typo/H6.svelte

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

package/dist/typo/H6.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         /** Center the text. */
         center?: boolean | undefined;
+        /** Language of the element */
+        lang?: string | undefined;
         /** Add a horizontal rule below the text. */
         hr?: boolean | undefined;
         /** Make the text subtle. */

package/dist/typo/P.svelte

@@ -1,6 +1,7 @@
-<script>import {} from "svelte";
+<script lang="ts">import {} from "svelte";
 let {
   center = false,
+  lang,
   subtle = false,
   strong = false,
   children
@@ -12,6 +13,7 @@ let {
     class:subtle
     class:center
     class:strong
+    {lang}
 >
     {@render children()}
 </p>

package/dist/typo/P.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         /** Center the text. */
         center?: boolean | undefined;
+        /** Language of the element */
+        lang?: string | undefined;
         /** Make the text subtle. */
         subtle?: boolean | undefined;
         /** Make the text strong. */

package/dist/utils/StringOrComponentOrSnippet.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import { isComponent, isSnippet } from "./isSnippet.js";
+let {
+  content
+} = $props();
+</script>
+
+{#if typeof content === 'string'}
+    {content}
+{:else if isComponent(content)}
+    <svelte:component this={content} />
+{:else if isSnippet(content)}
+    {@render content()}
+{/if}

package/dist/utils/StringOrComponentOrSnippet.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentType, Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        content: string | ComponentType | Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StringOrComponentOrSnippetProps = typeof __propDef.props;
+export type StringOrComponentOrSnippetEvents = typeof __propDef.events;
+export type StringOrComponentOrSnippetSlots = typeof __propDef.slots;
+export default class StringOrComponentOrSnippet extends SvelteComponent<StringOrComponentOrSnippetProps, StringOrComponentOrSnippetEvents, StringOrComponentOrSnippetSlots> {
+}
+export {};