lutra 0.0.13 → 0.0.15

package/dist/form/FieldSection.svelte

@@ -1,4 +1,4 @@
-<script>import H5 from "../typo/H5.svelte";
+<script lang="ts">import H5 from "../typo/H5.svelte";
 import P from "../typo/P.svelte";
 let {
   title,
@@ -7,7 +7,7 @@ let {
 } = $props();
 </script>
 
-<div class="FieldSection">
+<div class="FieldSection" class:noTitle={!!title && !!description}>
     {#if title || description}
         <div class="FieldSectionTitle">
             {#if title}
@@ -35,65 +35,38 @@ let {
     .FieldSection {
         padding: 0;
         display: grid;
-        gap: 0rem;
         grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        padding: calc(var(--fcc) * 3em);
     }
-    .FieldSection .FieldSectionTitle {
+    .FieldSectionTitle {
         display: flex;
         flex-direction: column;
-        grid-column: 0 / 1;
         background-color: var(--base);
-        gap: 0.25rem;
-        padding: 1em 1.5em;
-        border-bottom: var(--border);
+        gap: 1.25em;
+        text-wrap: balance;
     }
     .FieldSection:not(:first-child) {
         border-top: calc(var(--fcc) * var(--border-size)) var(--border-style) var(--border-color);
     }
-    .FieldSection .FieldSectionFields {
-        padding: calc(var(--padding, 1.5em) * var(--fcc));
-        grid-column: 1 / -1;
+    .FieldSectionFields {
         display: grid;
-        gap: 1.5rem;
+        gap: var(--gap, 1.5em);
     }
-    @container (min-width: 600px) {
-        .FieldSection {
-            gap: 3rem;
-            padding: calc(2rem * var(--fcc));
-            /*grid-template-columns: 1fr;*/
-            border-bottom: 1px dotted var(--border-light);
-            margin-bottom: 3rem;
-            border-radius: 0;
-        }
-        .FieldSection:has(.FieldSectionTitle) {
-            /*grid-template-columns: minmax(180px, 1fr) 3fr;*/
-        }
-        .FieldSection:last-child {
-            border-bottom: none;
-            margin-bottom: 0;
-        }
-        .FieldSection:not(:first-child) {
-            border-top: 0;
-            padding-top: 0;
-        }
-        .FieldSection .FieldSectionTitle {
-            gap: 1rem;
-            padding: 0;
-            background-color: transparent;
-            border-bottom: none;
-        }
-        .FieldSection .FieldSectionFields {
-            padding: 0;
-        }
+    .FieldSection.noTitle .FieldSectionFields {
+        grid-column: 1 / -1;
     }
-    @container (min-width: 1024px) {
+    @container (max-width: 640px) {
         .FieldSection {
-            /*grid-template-columns: minmax(300px, 1fr) 3fr;*/
-            padding: calc(3rem * var(--fcc));
+            padding: 2em;
+        }
+        .FieldSectionTitle {
+            gap: 0.5em;
+            padding-block-end: 1.5em;
         }
-        .FieldSection:not(:first-child) {
-            border-top: 0;
-            padding-top: 0;
+        .FieldSectionTitle,
+        .FieldSectionFields {
+            grid-column: 1 / -1;
         }
     }
 </style>

package/dist/form/Fieldset.svelte

@@ -1,4 +1,5 @@
-<script>let {
+<script lang="ts">let {
+  fullWidth,
   description,
   contained,
   rounded,
@@ -13,7 +14,7 @@ let smColumns = columnsArray[2] || mdColumns;
 </script>
 
 <div class="FieldsetContainer">
-    <fieldset class:rounded class:contained class="cols-{columns}" style="--lg-cols: {lgColumns}; --md-cols: {mdColumns}; --sm-cols: {smColumns}">
+    <fieldset class:fullWidth class:rounded class:contained class="cols-{columns}" style="--lg-cols: {lgColumns}; --md-cols: {mdColumns}; --sm-cols: {smColumns}">
         {#if legend}
             <legend>
                 {#if typeof legend === 'string'}
@@ -40,15 +41,19 @@ let smColumns = columnsArray[2] || mdColumns;
     }
     fieldset {
         display: grid;
+        width: var(--width, fit-content);
         grid-template-columns: repeat(var(--lg-cols), 1fr);
-        gap: 1rem;
+        gap: var(--gap, 1.5em);
     }
     legend {
-        margin-bottom: 1.5rem;
+        font-weight: 500;
         font-size: var(--font-size, 1em);
     }
     fieldset.contained {
-        padding: 2rem;
+        padding: 1.5em;
+    }
+    fieldset.fullWidth {
+        width: 100%;
     }
     @container(max-width: 960px) {
         fieldset {

package/dist/form/Fieldset.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
 declare const __propDef: {
     props: {
+        /** Whether the fieldset should be full width. */
+        fullWidth?: boolean | undefined;
         /** The description of the fieldset. */
         description?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";

package/dist/form/Form.svelte

@@ -1,4 +1,4 @@
-<script>import { enhance } from "$app/forms";
+<script lang="ts">import { enhance } from "$app/forms";
 import UiContent from "../layout/UIContent.svelte";
 import { Bodyguard } from "@auth70/bodyguard";
 import { onMount, setContext } from "svelte";

package/dist/form/Input.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext } from "svelte";
+<script lang="ts">import { getContext } from "svelte";
 import { createId } from "../utils/id.js";
 import Copy from "../icons/Copy.svelte";
 import Done from "../icons/Done.svelte";
@@ -54,6 +54,7 @@ let {
   required,
   results,
   shape = "rounded",
+  size,
   src,
   step,
   tabindex,
@@ -148,6 +149,7 @@ function copy(e) {
     {readonly}
     required={required || field?.required}
     {results}
+    {size}
     {src}
     {step}
     {tabindex}
@@ -162,55 +164,32 @@ function copy(e) {
     {id}
     {label}
     {labelTip}
+    contained={type === "checkbox" || type === "radio" ? false : true}
     direction={(type === "checkbox" || type === "radio") ? 'row' : 'column'}
     {field}
     {issue}
+    {prefix}
+    {suffix}
 >
 
     {#if type === "checkbox" || type === "radio"}
         {@render input()}
     {:else}
 
-        <div
-            class="Field {type}"
-            class:hasPrefix={!!prefix}
-            class:hasSuffix={!!suffix}
-            class:invalid={field?.tainted && issue?.code}
-        >
-            {#if prefix}
-                <div class="Fix Prefix">
-                    {#if typeof prefix === 'string'}
-                        {prefix}
-                    {:else}
-                        {@render prefix()}
-                    {/if}
-                </div>
-            {/if}
-
-            {@render input()}
+        {@render input()}
 
-            {#if copyable}
-                <Tooltip tip={copyTitle} open={copyTooltipOpen}>
-                    <IconButton icon={copyBtnIcon} onclick={copy} disabled={copyTooltipOpen} />
-                </Tooltip>
-            {/if}
-        
-            {#if type === "password" && viewable}
-                <Tooltip tip={viewTitle}>
-                    <IconButton icon={viewBtnIcon} onclick={view} />
-                </Tooltip>
-            {/if}
+        {#if copyable}
+            <Tooltip tip={copyTitle} open={copyTooltipOpen}>
+                <IconButton icon={copyBtnIcon} onclick={copy} disabled={copyTooltipOpen} />
+            </Tooltip>
+        {/if}
+    
+        {#if type === "password" && viewable}
+            <Tooltip tip={viewTitle}>
+                <IconButton icon={viewBtnIcon} onclick={view} />
+            </Tooltip>
+        {/if}
 
-            {#if suffix}
-                <div class="Fix Suffix">
-                    {#if typeof suffix === 'string'}
-                        {suffix}
-                    {:else}
-                        {@render suffix()}
-                    {/if}
-                </div>
-            {/if}
-        </div>
     {/if}
 </FieldContent>
 
@@ -239,7 +218,7 @@ function copy(e) {
     .Fix {
         display: flex;
         align-items: center;
-        padding-inline: 0.75em;
+        padding-inline: 0.65em;
         font-size: 1em;
         line-height: 1.5;
         color: var(--text-subtle);

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

@@ -97,6 +97,8 @@ declare const __propDef: {
         results?: number | undefined;
         /** The shape of the input element. */
         shape?: "default" | "circle" | "rounded" | "pill" | undefined;
+        /** The size of the input element. */
+        size?: number | undefined;
         /** Source URL for the image type. */
         src?: string | undefined;
         /** Spellcheck the input. */

package/dist/form/InputLength.svelte

@@ -1,4 +1,4 @@
-<script>let {
+<script lang="ts">let {
   value,
   maxlength
 } = $props();

package/dist/form/Label.svelte

@@ -1,4 +1,4 @@
-<script>import ContextTip from "../display/ContextTip.svelte";
+<script lang="ts">import ContextTip from "../display/ContextTip.svelte";
 let {
   id,
   label,
@@ -22,5 +22,6 @@ let {
 <style>
     label {
         cursor: var(--cursor, default);
+        text-wrap: balance;
     }
 </style>

package/dist/form/Select.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext } from "svelte";
+<script lang="ts">import { getContext } from "svelte";
 import Label from "./Label.svelte";
 import { createId } from "../utils/id.js";
 import Copy from "../icons/Copy.svelte";

package/dist/grid/Column.svelte

@@ -1,4 +1,4 @@
-<script>import { setContext } from "svelte";
+<script lang="ts">import { setContext } from "svelte";
 let { children } = $props();
 </script>
 

package/dist/grid/Grid.svelte

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

package/dist/grid/Row.svelte

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

package/dist/icons/Alert.svelte

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0,0,256,256">
-    <g fill="currentColor" transform="translate(7.98665,7.9375) scale(16,16)"><path d="M7.5,1.00781c-0.54297,0 -1.08594,0.25781 -1.39453,0.77344l-5.87891,9.82422c-0.625,1.03906 0.17578,2.39453 1.39063,2.39453h11.76172c1.21875,0 2.01953,-1.35547 1.39844,-2.39453l-5.88281,-9.82422c-0.30859,-0.51562 -0.85156,-0.77344 -1.39453,-0.77344zM7.5,1.99219c0.20703,0 0.41406,0.10156 0.53906,0.30469l5.87891,9.82031c0.24609,0.41016 -0.02734,0.88281 -0.53906,0.88281h-11.76172c-0.50781,0 -0.78125,-0.47266 -0.53516,-0.88281l5.87891,-9.82031c0.125,-0.20312 0.33203,-0.30469 0.53906,-0.30469zM6.99219,5v5h1v-5zM6.99219,11v1h1v-1z"></path></g>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M7.999,1.063C7.419,1.063 6.84,1.339 6.51,1.889L0.232,12.38C-0.435,13.489 0.42,14.937 1.717,14.937L14.277,14.937C15.578,14.937 16.433,13.489 15.77,12.38L9.488,1.889C9.159,1.339 8.579,1.063 7.999,1.063ZM7.999,2.114C8.22,2.114 8.441,2.223 8.575,2.44L14.852,12.926C15.115,13.364 14.823,13.869 14.277,13.869L1.717,13.869C1.175,13.869 0.883,13.364 1.146,12.926L7.423,2.44C7.557,2.223 7.778,2.114 7.999,2.114ZM7.457,11.733L7.457,12.801L8.525,12.801L8.525,11.733L7.457,11.733ZM7.457,5.326L7.457,10.665L8.525,10.665L8.525,5.326L7.457,5.326Z" />
 </svg>

package/dist/icons/Copy.svelte

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="currentColor" d="M 2.5 1 C 1.675781 1 1 1.675781 1 2.5 L 1 10.5 C 1 11.324219 1.675781 12 2.5 12 L 4 12 L 4 12.5 C 4 13.324219 4.675781 14 5.5 14 L 13.5 14 C 14.324219 14 15 13.324219 15 12.5 L 15 4.5 C 15 3.675781 14.324219 3 13.5 3 L 12 3 L 12 2.5 C 12 1.675781 11.324219 1 10.5 1 Z M 2.5 2 L 10.5 2 C 10.78125 2 11 2.21875 11 2.5 L 11 10.5 C 11 10.78125 10.78125 11 10.5 11 L 2.5 11 C 2.21875 11 2 10.78125 2 10.5 L 2 2.5 C 2 2.21875 2.21875 2 2.5 2 Z M 12 4 L 13.5 4 C 13.78125 4 14 4.21875 14 4.5 L 14 12.5 C 14 12.78125 13.78125 13 13.5 13 L 5.5 13 C 5.21875 13 5 12.78125 5 12.5 L 5 12 L 10.5 12 C 11.324219 12 12 11.324219 12 10.5 Z"></path>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M1.714,0.571C0.772,0.571 0,1.344 0,2.286L0,11.429C0,12.371 0.772,13.143 1.714,13.143L3.429,13.143L3.429,13.714C3.429,14.656 4.201,15.429 5.143,15.429L14.286,15.429C15.228,15.429 16,14.656 16,13.714L16,4.571C16,3.629 15.228,2.857 14.286,2.857L12.571,2.857L12.571,2.286C12.571,1.344 11.799,0.571 10.857,0.571L1.714,0.571ZM12.571,4L14.286,4C14.607,4 14.857,4.25 14.857,4.571L14.857,13.714C14.857,14.036 14.607,14.286 14.286,14.286L5.143,14.286C4.821,14.286 4.571,14.036 4.571,13.714L4.571,13.143L10.857,13.143C11.799,13.143 12.571,12.371 12.571,11.429L12.571,4ZM1.714,1.714L10.857,1.714C11.179,1.714 11.429,1.964 11.429,2.286L11.429,11.429C11.429,11.75 11.179,12 10.857,12L1.714,12C1.393,12 1.143,11.75 1.143,11.429L1.143,2.286C1.143,1.964 1.393,1.714 1.714,1.714Z" />
 </svg>

package/dist/icons/Done.svelte

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="currentColor" d="M 14.5 2.792969 L 5.5 11.792969 L 1.851563 8.148438 L 1.5 7.792969 L 0.792969 8.5 L 1.148438 8.851563 L 5.5 13.207031 L 15.207031 3.5 Z"></path>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M15.215,2.22L5.225,12.21L1.175,8.165L0.785,7.77L0,8.555L0.395,8.945L5.225,13.78L16,3.005L15.215,2.22Z" />
 </svg>

package/dist/icons/Error.svelte

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0,0,256,256">
-    <g fill="currentColor" transform="translate(8,8) scale(16,16)"><path d="M7.5,1c-3.58203,0 -6.5,2.91797 -6.5,6.5c0,3.58203 2.91797,6.5 6.5,6.5c3.58203,0 6.5,-2.91797 6.5,-6.5c0,-3.58203 -2.91797,-6.5 -6.5,-6.5zM7.5,2c3.04297,0 5.5,2.45703 5.5,5.5c0,3.04297 -2.45703,5.5 -5.5,5.5c-3.04297,0 -5.5,-2.45703 -5.5,-5.5c0,-3.04297 2.45703,-5.5 5.5,-5.5zM5.5,4.79297l-0.70703,0.70703l0.35547,0.35156l1.64453,1.64844l-1.64453,1.64844l-0.35547,0.35156l0.70703,0.70703l0.35156,-0.35547l1.64844,-1.64453l1.64844,1.64453l0.35156,0.35547l0.70703,-0.70703l-0.35547,-0.35156l-1.64453,-1.64844l1.64453,-1.64844l0.35547,-0.35156l-0.70703,-0.70703l-0.35156,0.35547l-1.64844,1.64453l-1.64844,-1.64453z"></path></g>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M8,0.004C7.721,0.004 7.446,0.108 7.234,0.316L0.316,7.234C-0.1,7.655 -0.1,8.346 0.316,8.767L7.234,15.684C7.655,16.105 8.346,16.105 8.767,15.684L15.684,8.767C16.101,8.35 16.101,7.655 15.684,7.234L8.767,0.316C8.555,0.108 8.28,0.004 8,0.004ZM8.009,1.071L14.93,7.992C14.938,8 14.938,8.005 14.93,8.013L8.009,14.93C8,14.938 7.996,14.938 7.988,14.93L1.075,8.013C1.062,8 1.058,8 1.071,7.992L7.988,1.075C8,1.062 8,1.058 8.009,1.071ZM7.467,10.667L7.467,11.734L8.534,11.734L8.534,10.667L7.467,10.667ZM7.467,4.267L7.467,9.601L8.534,9.601L8.534,4.267L7.467,4.267Z" />
 </svg>

package/dist/icons/Help.svelte

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0,0,256,256">
-    <g fill="currentColor" transform="translate(8,8) scale(16,16)"><path d="M7.5,1c-3.58203,0 -6.5,2.91797 -6.5,6.5c0,3.58203 2.91797,6.5 6.5,6.5c3.58203,0 6.5,-2.91797 6.5,-6.5c0,-3.58203 -2.91797,-6.5 -6.5,-6.5zM7.5,2c3.04297,0 5.5,2.45703 5.5,5.5c0,3.04297 -2.45703,5.5 -5.5,5.5c-3.04297,0 -5.5,-2.45703 -5.5,-5.5c0,-3.04297 2.45703,-5.5 5.5,-5.5zM7.55859,4c-1.21094,0.07031 -2.19922,1.08594 -2.19922,2.32031h1c0,-0.8125 0.70313,-1.44922 1.5625,-1.30078c0.61328,0.10547 1.09766,0.70703 1.07813,1.33984c-0.01562,0.55469 -0.33984,0.90625 -0.81641,1.11719c-0.29687,0.13281 -0.57812,0.25781 -0.81641,0.50781c-0.23828,0.25 -0.36719,0.62109 -0.36719,1.01563h1c0,-0.22656 0.03125,-0.26172 0.09375,-0.32812c0.05859,-0.0625 0.22266,-0.16016 0.49219,-0.28125c0.74609,-0.32422 1.38672,-1.03906 1.41406,-2c0.03516,-1.13672 -0.78125,-2.16406 -1.91016,-2.35937c-0.17969,-0.02734 -0.35937,-0.03906 -0.53125,-0.03125zM7,10v1h1v-1z"></path></g>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M8,0C3.591,0 0,3.591 0,8C0,12.409 3.591,16 8,16C12.409,16 16,12.409 16,8C16,3.591 12.409,0 8,0ZM8,1.231C11.745,1.231 14.769,4.255 14.769,8C14.769,11.745 11.745,14.769 8,14.769C4.255,14.769 1.231,11.745 1.231,8C1.231,4.255 4.255,1.231 8,1.231ZM7.385,11.077L7.385,12.308L8.615,12.308L8.615,11.077L7.385,11.077ZM8.072,3.692C6.582,3.779 5.365,5.029 5.365,6.548L6.596,6.548C6.596,5.548 7.462,4.764 8.519,4.947C9.274,5.077 9.87,5.817 9.846,6.596C9.827,7.279 9.428,7.712 8.841,7.971C8.476,8.135 8.13,8.288 7.837,8.596C7.543,8.904 7.385,9.361 7.385,9.846L8.615,9.846C8.615,9.567 8.654,9.524 8.731,9.442C8.803,9.365 9.005,9.245 9.337,9.096C10.255,8.697 11.043,7.817 11.077,6.635C11.12,5.236 10.115,3.971 8.726,3.731C8.505,3.697 8.284,3.683 8.072,3.692Z" />
 </svg>

package/dist/icons/Hide.svelte

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0,0,256,256">
-    <g fill="currentColor" transform="translate(8,8) scale(16,16)"><path d="M1.72656,1.02344l-0.70312,0.70313l2.30078,2.30469c-2.22656,1.23047 -3.10547,3.15234 -3.15625,3.26953l-0.08594,0.19922l0.08594,0.19922c0.07422,0.17578 1.93359,4.30078 7.33203,4.30078c0.18359,0 0.34766,-0.02344 0.52344,-0.03125c0.00391,0 0.00781,0 0.00781,0c1.02734,-0.05859 1.92188,-0.25 2.68359,-0.54687l2.55469,2.55859l0.71094,-0.71094l-2.29687,-2.29297l-0.68359,-0.68359l-0.0625,-0.05859l-2.08594,-2.09375l-1.99219,-1.99219l-1.44531,-1.44141l-0.34375,-0.34375l-0.78906,-0.78516zM7.5,3c-0.55469,0 -1.05859,0.05469 -1.53906,0.13281l0.92969,0.92969c0.19922,-0.03516 0.39844,-0.0625 0.60938,-0.0625c1.92969,0 3.5,1.57031 3.5,3.5c0,0.21094 -0.02734,0.41016 -0.0625,0.60938l0.8125,0.8125c0.14844,-0.44922 0.25,-0.92187 0.25,-1.42187c0,-0.98437 -0.32812,-1.89062 -0.86719,-2.63281c1.60938,0.86719 2.41797,2.14063 2.68359,2.63281c-0.19531,0.36328 -0.69531,1.16016 -1.58984,1.89844l0.71094,0.71094c1.30469,-1.11328 1.85547,-2.31641 1.89453,-2.41016l0.08984,-0.19922l-0.08984,-0.19922c-0.07422,-0.17578 -1.93359,-4.30078 -7.33203,-4.30078zM3.86719,4.88281c-0.53906,0.73828 -0.86719,1.63672 -0.86719,2.61719c0,0.98438 0.32813,1.89063 0.86719,2.62891c-1.60937,-0.86328 -2.41797,-2.13672 -2.68359,-2.62891c0.26563,-0.49219 1.08203,-1.75 2.68359,-2.61719zM4.71875,5.42188l1.4375,1.44531c-0.08984,0.19141 -0.15625,0.40234 -0.15625,0.63281c0,0.82813 0.67188,1.5 1.5,1.5c0.23047,0 0.44141,-0.06641 0.63281,-0.15625l1.44531,1.4375c-0.58203,0.44141 -1.29297,0.71875 -2.07812,0.71875c-1.92969,0 -3.5,-1.57031 -3.5,-3.5c0,-0.78516 0.27734,-1.49609 0.71875,-2.07812z"></path></g>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M1.773,1.015L1.015,1.773L3.496,4.258C1.095,5.585 0.147,7.657 0.093,7.783L0,7.998L0.093,8.213C0.173,8.402 2.177,12.85 7.998,12.85C8.196,12.85 8.373,12.824 8.562,12.816L8.571,12.816C9.678,12.753 10.643,12.546 11.464,12.226L14.218,14.985L14.985,14.218L12.509,11.746L11.772,11.009L11.704,10.946L9.455,8.689L7.307,6.541L5.378,4.616L4.528,3.769L1.773,1.015ZM4.999,5.757L6.549,7.316C6.452,7.522 6.381,7.749 6.381,7.998C6.381,8.891 7.105,9.615 7.998,9.615C8.246,9.615 8.474,9.544 8.68,9.447L10.238,10.997C9.611,11.472 8.844,11.772 7.998,11.772C5.917,11.772 4.224,10.078 4.224,7.998C4.224,7.151 4.523,6.385 4.999,5.757ZM4.081,5.176C3.5,5.972 3.146,6.941 3.146,7.998C3.146,9.059 3.5,10.036 4.081,10.832C2.346,9.902 1.474,8.529 1.188,7.998C1.474,7.467 2.354,6.111 4.081,5.176ZM7.998,3.146C7.4,3.146 6.857,3.205 6.339,3.289L7.341,4.292C7.556,4.254 7.77,4.224 7.998,4.224C10.078,4.224 11.772,5.917 11.772,7.998C11.772,8.225 11.742,8.44 11.704,8.655L12.58,9.531C12.74,9.047 12.85,8.537 12.85,7.998C12.85,6.937 12.496,5.959 11.915,5.159C13.65,6.094 14.522,7.467 14.808,7.998C14.598,8.39 14.058,9.249 13.094,10.045L13.86,10.811C15.267,9.611 15.861,8.314 15.903,8.213L16,7.998L15.903,7.783C15.823,7.594 13.818,3.146 7.998,3.146Z" />
 </svg>

package/dist/icons/Info.svelte

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0,0,256,256">
-    <g fill="currentColor" transform="translate(8,8) scale(16,16)"><path d="M7.5,1c-3.58203,0 -6.5,2.91797 -6.5,6.5c0,3.58203 2.91797,6.5 6.5,6.5c3.58203,0 6.5,-2.91797 6.5,-6.5c0,-3.58203 -2.91797,-6.5 -6.5,-6.5zM7.5,2c3.04297,0 5.5,2.45703 5.5,5.5c0,3.04297 -2.45703,5.5 -5.5,5.5c-3.04297,0 -5.5,-2.45703 -5.5,-5.5c0,-3.04297 2.45703,-5.5 5.5,-5.5zM7,4v1h1v-1zM7,6v5h1v-5z"></path></g>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M8,0C3.591,0 0,3.591 0,8C0,12.409 3.591,16 8,16C12.409,16 16,12.409 16,8C16,3.591 12.409,0 8,0ZM8,1.231C11.745,1.231 14.769,4.255 14.769,8C14.769,11.745 11.745,14.769 8,14.769C4.255,14.769 1.231,11.745 1.231,8C1.231,4.255 4.255,1.231 8,1.231ZM7.385,6.154L7.385,12.308L8.615,12.308L8.615,6.154L7.385,6.154ZM7.385,3.692L7.385,4.923L8.615,4.923L8.615,3.692L7.385,3.692Z" />
 </svg>

package/dist/icons/Link.svelte

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="currentColor" d="M 11.378906 1 C 10.683594 1 10.027344 1.273438 9.539063 1.765625 L 7.730469 3.570313 C 7.082031 4.21875 6.851563 5.128906 7.039063 5.972656 L 8.039063 4.976563 C 8.109375 4.71875 8.238281 4.476563 8.4375 4.277344 L 10.246094 2.46875 C 10.550781 2.167969 10.953125 2 11.378906 2 C 11.808594 2 12.210938 2.167969 12.53125 2.488281 C 12.835938 2.792969 13.003906 3.195313 13.003906 3.625 C 13.003906 4.050781 12.835938 4.457031 12.53125 4.757813 L 10.726563 6.566406 C 10.535156 6.757813 10.292969 6.886719 10.039063 6.957031 L 9.027344 7.96875 C 9.210938 8.011719 9.398438 8.035156 9.59375 8.035156 C 10.289063 8.035156 10.941406 7.765625 11.433594 7.273438 L 13.238281 5.46875 C 14.253906 4.449219 14.257813 2.796875 13.222656 1.765625 C 12.730469 1.273438 12.078125 1 11.378906 1 Z M 9.492188 4.996094 C 9.363281 5 9.242188 5.054688 9.148438 5.148438 L 5.148438 9.148438 C 4.953125 9.339844 4.953125 9.660156 5.148438 9.855469 C 5.34375 10.050781 5.660156 10.050781 5.859375 9.855469 L 9.859375 5.855469 C 10.007813 5.710938 10.050781 5.492188 9.96875 5.300781 C 9.890625 5.109375 9.699219 4.988281 9.492188 4.996094 Z M 5.414063 6.964844 C 4.71875 6.964844 4.066406 7.234375 3.574219 7.726563 L 1.765625 9.535156 C 0.75 10.550781 0.75 12.203125 1.785156 13.238281 C 2.292969 13.746094 2.960938 14 3.625 14 C 4.292969 14 4.960938 13.746094 5.46875 13.238281 L 7.273438 11.433594 C 7.925781 10.78125 8.15625 9.871094 7.96875 9.03125 L 6.96875 10.027344 C 6.898438 10.28125 6.769531 10.523438 6.570313 10.722656 L 4.761719 12.53125 C 4.136719 13.15625 3.113281 13.15625 2.472656 12.511719 C 2.167969 12.207031 2.003906 11.804688 2.003906 11.375 C 2.003906 10.949219 2.167969 10.546875 2.472656 10.242188 L 4.28125 8.433594 C 4.476563 8.238281 4.71875 8.105469 4.976563 8.03125 L 5.980469 7.03125 C 5.796875 6.992188 5.609375 6.964844 5.414063 6.964844 Z"></path>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M5.428,7.337C4.572,7.337 3.768,7.669 3.162,8.275L0.935,10.502C-0.316,11.753 -0.316,13.787 0.959,15.062C1.584,15.687 2.407,16 3.225,16C4.047,16 4.87,15.687 5.495,15.062L7.717,12.84C8.521,12.036 8.805,10.916 8.574,9.881L7.342,11.108C7.256,11.421 7.097,11.719 6.852,11.964L4.624,14.191C3.855,14.961 2.595,14.961 1.806,14.167C1.43,13.792 1.228,13.297 1.228,12.768C1.228,12.243 1.43,11.748 1.806,11.373L4.033,9.145C4.273,8.905 4.572,8.741 4.889,8.65L6.125,7.419C5.899,7.37 5.668,7.337 5.428,7.337ZM10.45,4.912C10.291,4.917 10.142,4.985 10.026,5.1L5.101,10.026C4.86,10.261 4.86,10.656 5.101,10.896C5.341,11.137 5.731,11.137 5.976,10.896L10.902,5.971C11.085,5.793 11.137,5.523 11.036,5.288C10.94,5.052 10.705,4.903 10.45,4.912ZM12.773,-0.008C11.917,-0.008 11.109,0.328 10.507,0.934L8.28,3.157C7.482,3.955 7.198,5.076 7.429,6.115L8.66,4.888C8.747,4.571 8.906,4.273 9.151,4.027L11.378,1.8C11.753,1.43 12.249,1.223 12.773,1.223C13.302,1.223 13.798,1.43 14.192,1.824C14.567,2.199 14.774,2.695 14.774,3.224C14.774,3.748 14.567,4.249 14.192,4.619L11.97,6.846C11.734,7.082 11.436,7.241 11.123,7.327L9.877,8.573C10.103,8.626 10.334,8.655 10.575,8.655C11.431,8.655 12.234,8.323 12.84,7.717L15.063,5.494C16.313,4.239 16.318,2.204 15.043,0.934C14.437,0.328 13.634,-0.008 12.773,-0.008Z" style="fill-rule:nonzero;"/>
 </svg>

package/dist/icons/MenuBurger.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M16,14.049L0,14.049L0,16L16,16L16,14.049ZM16,7.025L0,7.025L0,8.975L16,8.975L16,7.025ZM16,0L0,0L0,1.951L16,1.951L16,0Z"/>
+</svg>

package/dist/icons/MenuBurger.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  MenuBurgerProps */
+/** @typedef {typeof __propDef.events}  MenuBurgerEvents */
+/** @typedef {typeof __propDef.slots}  MenuBurgerSlots */
+export default class MenuBurger extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MenuBurgerProps = typeof __propDef.props;
+export type MenuBurgerEvents = typeof __propDef.events;
+export type MenuBurgerSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/MenuDots.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M8,12.029C9.096,12.029 9.986,12.918 9.986,14.014C9.986,15.11 9.096,16 8,16C6.904,16 6.014,15.11 6.014,14.014C6.014,12.918 6.904,12.029 8,12.029ZM8,6.014C9.096,6.014 9.986,6.904 9.986,8C9.986,9.096 9.096,9.986 8,9.986C6.904,9.986 6.014,9.096 6.014,8C6.014,6.904 6.904,6.014 8,6.014ZM8,0C9.096,0 9.986,0.89 9.986,1.986C9.986,3.082 9.096,3.971 8,3.971C6.904,3.971 6.014,3.082 6.014,1.986C6.014,0.89 6.904,0 8,0Z"/>
+</svg>

package/dist/icons/MenuDots.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  MenuDotsProps */
+/** @typedef {typeof __propDef.events}  MenuDotsEvents */
+/** @typedef {typeof __propDef.slots}  MenuDotsSlots */
+export default class MenuDots extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MenuDotsProps = typeof __propDef.props;
+export type MenuDotsEvents = typeof __propDef.events;
+export type MenuDotsSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/Show.svelte

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0,0,256,256">
-    <g fill="currentColor" transform="translate(8.03125,-8) scale(16,16)"><path d="M7.5,4c-5.39453,0 -7.45312,4.28906 -7.45312,4.28906l-0.10156,0.21094l0.10156,0.21094c0,0 2.05859,4.28906 7.45313,4.28906c5.39453,0 7.45313,-4.28906 7.45313,-4.28906l0.09766,-0.21094l-0.09766,-0.21094c0,0 -2.05859,-4.28906 -7.45312,-4.28906zM7.5,5c1.9375,0 3.5,1.5625 3.5,3.5c0,1.9375 -1.5625,3.5 -3.5,3.5c-1.9375,0 -3.5,-1.5625 -3.5,-3.5c0,-1.9375 1.5625,-3.5 3.5,-3.5zM3.94141,5.77734c-0.58203,0.75781 -0.94141,1.69531 -0.94141,2.72266c0,1.02734 0.35938,1.96484 0.94141,2.72266c-1.91797,-0.95312 -2.69922,-2.46875 -2.82422,-2.72266c0.125,-0.25391 0.90625,-1.76953 2.82422,-2.72266zM11.05859,5.77734c1.91797,0.95313 2.69922,2.46875 2.82422,2.72266c-0.125,0.25391 -0.90625,1.76953 -2.82422,2.72266c0.58203,-0.75781 0.94141,-1.69531 0.94141,-2.72266c0,-1.02734 -0.35937,-1.96484 -0.94141,-2.72266zM7.5,7c-0.82812,0 -1.5,0.67188 -1.5,1.5c0,0.82813 0.67188,1.5 1.5,1.5c0.82813,0 1.5,-0.67187 1.5,-1.5c0,-0.82812 -0.67187,-1.5 -1.5,-1.5z"></path></g>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M8.002,3.217C2.269,3.217 0.081,7.776 0.081,7.776L-0.027,8L0.081,8.224C0.081,8.224 2.269,12.783 8.002,12.783C13.736,12.783 15.924,8.224 15.924,8.224L16.027,8L15.924,7.776C15.924,7.776 13.736,3.217 8.002,3.217ZM8.002,4.28C10.061,4.28 11.722,5.941 11.722,8C11.722,10.059 10.061,11.72 8.002,11.72C5.943,11.72 4.282,10.059 4.282,8C4.282,5.941 5.943,4.28 8.002,4.28ZM4.22,5.106C3.601,5.912 3.219,6.908 3.219,8C3.219,9.092 3.601,10.088 4.22,10.894C2.181,9.881 1.351,8.27 1.218,8C1.351,7.73 2.181,6.119 4.22,5.106ZM11.784,5.106C13.823,6.119 14.653,7.73 14.786,8C14.653,8.27 13.823,9.881 11.784,10.894C12.403,10.088 12.785,9.092 12.785,8C12.785,6.908 12.403,5.912 11.784,5.106ZM8.002,6.406C7.122,6.406 6.408,7.12 6.408,8C6.408,8.88 7.122,9.594 8.002,9.594C8.882,9.594 9.596,8.88 9.596,8C9.596,7.12 8.882,6.406 8.002,6.406Z" />
 </svg>

package/dist/icons/Success.svelte

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0,0,256,256">
-    <g fill="currentColor" transform="translate(8,8) scale(16,16)"><path d="M7.5,1c-3.58203,0 -6.5,2.91797 -6.5,6.5c0,3.58203 2.91797,6.5 6.5,6.5c3.58203,0 6.5,-2.91797 6.5,-6.5c0,-3.58203 -2.91797,-6.5 -6.5,-6.5zM7.5,2c3.04297,0 5.5,2.45703 5.5,5.5c0,3.04297 -2.45703,5.5 -5.5,5.5c-3.04297,0 -5.5,-2.45703 -5.5,-5.5c0,-3.04297 2.45703,-5.5 5.5,-5.5zM10.14453,5.14844l-3.64453,3.64453l-1.64844,-1.64453l-0.70312,0.70313l2.35156,2.35547l4.35547,-4.35547z"></path></g>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M8,0C3.591,0 0,3.591 0,8C0,12.409 3.591,16 8,16C12.409,16 16,12.409 16,8C16,3.591 12.409,0 8,0ZM8,1.231C11.745,1.231 14.769,4.255 14.769,8C14.769,11.745 11.745,14.769 8,14.769C4.255,14.769 1.231,11.745 1.231,8C1.231,4.255 4.255,1.231 8,1.231ZM11.255,5.106L6.769,9.591L4.74,7.567L3.875,8.433L6.769,11.332L12.13,5.971L11.255,5.106Z" />
 </svg>

package/dist/icons/Warning.svelte

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0,0,256,256">
-    <g fill="currentColor" transform="translate(8,8) scale(16,16)"><path d="M7.5,1c-3.58203,0 -6.5,2.91797 -6.5,6.5c0,3.58203 2.91797,6.5 6.5,6.5c3.58203,0 6.5,-2.91797 6.5,-6.5c0,-3.58203 -2.91797,-6.5 -6.5,-6.5zM7.5,2c3.04297,0 5.5,2.45703 5.5,5.5c0,3.04297 -2.45703,5.5 -5.5,5.5c-3.04297,0 -5.5,-2.45703 -5.5,-5.5c0,-3.04297 2.45703,-5.5 5.5,-5.5zM7,4v5h1v-5zM7,10v1h1v-1z"></path></g>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+    <path fill="currentColor" d="M7.999,1.063C7.419,1.063 6.84,1.339 6.51,1.889L0.232,12.38C-0.435,13.489 0.42,14.937 1.717,14.937L14.277,14.937C15.578,14.937 16.433,13.489 15.77,12.38L9.488,1.889C9.159,1.339 8.579,1.063 7.999,1.063ZM7.999,2.114C8.22,2.114 8.441,2.223 8.575,2.44L14.852,12.926C15.115,13.364 14.823,13.869 14.277,13.869L1.717,13.869C1.175,13.869 0.883,13.364 1.146,12.926L7.423,2.44C7.557,2.223 7.778,2.114 7.999,2.114ZM7.457,11.733L7.457,12.801L8.525,12.801L8.525,11.733L7.457,11.733ZM7.457,5.326L7.457,10.665L8.525,10.665L8.525,5.326L7.457,5.326Z" />
 </svg>

package/dist/layout/Layout.svelte

@@ -1,4 +1,4 @@
-<script>import "../style.css";
+<script lang="ts">import "../style.css";
 import Theme from "./Theme.svelte";
 let {
   theme,

package/dist/layout/LayoutFooter.svelte

@@ -1,4 +1,4 @@
-<script>let {
+<script lang="ts">let {
   copyright
 } = $props();
 </script>

package/dist/layout/LayoutGrid.svelte

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

package/dist/layout/LayoutHeader.svelte

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

package/dist/layout/PageContent.svelte

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

package/dist/layout/Theme.svelte

@@ -1,4 +1,4 @@
-<script>import { browser } from "$app/environment";
+<script lang="ts">import { browser } from "$app/environment";
 import { getContext, setContext } from "svelte";
 let {
   theme,
@@ -112,10 +112,9 @@ setContext("theme", theme);
         --menu-bg-active: var(--l-menu-bg-active);
         --menu-bg-hover: var(--l-menu-bg-hover);
         --menu-border: var(--l-menu-border);
-        --menu-link: var(--l-menu-link);
-        --menu-link-hover: var(--l-menu-link-hover);
-        --menu-link-active: var(--l-menu-link-active);
-        --menu-link-active-hover: var(--l-menu-link-active-hover);
+        --menu-text: var(--l-menu-text);
+        --menu-text-subtle: var(--l-menu-text-subtle);
+        --menu-text-active: var(--l-menu-text-active);
         /* status */
         --status-default: var(--l-status-default);
         --status-ok: var(--l-status-ok);
@@ -207,8 +206,9 @@ setContext("theme", theme);
         --menu-bg: var(--d-menu-bg);
         --menu-bg-active: var(--d-menu-bg-active);
         --menu-border: var(--d-menu-border);
-        --menu-link: var(--d-menu-link);
-        --menu-link-active: var(--d-menu-link-active);
+        --menu-text: var(--d-menu-text);
+        --menu-text-subtle: var(--d-menu-text-subtle);
+        --menu-text-active: var(--d-menu-text-active);
         /* status */
         --status-default: var(--d-status-default);
         --status-ok: var(--d-status-ok);