lutra 0.0.12 → 0.0.15

package/dist/data/Stat.svelte

@@ -1,4 +1,4 @@
-<script>import { getStatusColorVar, isStatusColor } from "../utils/color.js";
+<script lang="ts">import { getStatusColorVar, isStatusColor } from "../utils/color.js";
 import { isSnippet } from "../utils/isSnippet.js";
 let {
   title,

package/dist/display/Avatar.svelte

@@ -1,4 +1,4 @@
-<script>import { hexRelativeLuminance, stringToColor } from "../utils/color.js";
+<script lang="ts">import { hexRelativeLuminance, stringToColor } from "../utils/color.js";
 const {
   src,
   name = "N/A",

package/dist/display/Badge.svelte

@@ -1,4 +1,4 @@
-<script>import { isStatusColor } from "../utils/color.js";
+<script lang="ts">import { isStatusColor } from "../utils/color.js";
 let {
   count,
   max = 99,

package/dist/display/Callout.svelte

@@ -1,4 +1,4 @@
-<script>import Icon from "./Icon.svelte";
+<script lang="ts">import Icon from "./Icon.svelte";
 import Alert from "../icons/Alert.svelte";
 import Info from "../icons/Info.svelte";
 import Success from "../icons/Success.svelte";
@@ -39,7 +39,7 @@ if (!icon) {
 
 <div class="Callout {type}" class:hasIcon={!!icon} class:contained class:rounded class:dismissable>
     {#if icon}
-        <Icon {icon} width="1.5rem" />
+        <Icon {icon} --icon-width="1.5rem" --icon-height="1.5rem" />
     {/if}
     <div class="CalloutText">
         <PageContent>
@@ -49,7 +49,7 @@ if (!icon) {
     {#if dismissable}
         <div class="Dismiss">
             <Tooltip tip="Dismiss">
-                <button class="CalloutDismiss" aria-label="Dismiss callout">
+                <button type="button" class="CalloutDismiss" aria-label="Dismiss callout">
                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M1 1L15 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                         <path d="M1 15L15 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

package/dist/display/Code.svelte

@@ -1,4 +1,4 @@
-<script>import Copy from "../icons/Copy.svelte";
+<script lang="ts">import Copy from "../icons/Copy.svelte";
 import Done from "../icons/Done.svelte";
 import IconButton from "./IconButton.svelte";
 import Tooltip from "./Tooltip.svelte";

package/dist/display/ContextTip.svelte

@@ -1,4 +1,4 @@
-<script>import Tooltip from "./Tooltip.svelte";
+<script lang="ts">import Tooltip from "./Tooltip.svelte";
 import Help from "../icons/Help.svelte";
 import Icon from "./Icon.svelte";
 let {
@@ -7,17 +7,21 @@ let {
 </script>
 
 <Tooltip {tip}>
-    <button onclick={(e) => e.preventDefault()}>
-        <Icon icon={Help} />
-    </button>
+    <a href="#foo" onclick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
+        <Icon icon={Help} --icon-width="16px" --icon-height="16px" --cursor="help" />
+    </a>
 </Tooltip>
 
 <style>
-    button {
+    a {
         border-radius: 50%;
+        color: var(--text);
+        height: 16px;
+        width: 16px;
+        display: inline-block;
     }
-    button:focus,
-    button:active {
-        outline-offset: -3px;
+    a:focus,
+    a:active {
+        outline-offset: -2px;
     }
 </style>

package/dist/display/Details.svelte

@@ -1,4 +1,4 @@
-<script>let {
+<script lang="ts">let {
   summary,
   contained,
   rounded,

package/dist/display/Hero.svelte

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

package/dist/display/Icon.svelte

@@ -1,4 +1,4 @@
-<script>import { isComponent, isSnippet } from "../utils/isSnippet.js";
+<script lang="ts">import { isComponent, isSnippet } from "../utils/isSnippet.js";
 let {
   icon,
   alt
@@ -17,19 +17,26 @@ let {
 
 <style>
     .Icon {
-        display: inline-flex;
+        display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1em;
-        width: var(--icon-width, var(--font-size, 1em));
-        height: var(--icon-height, var(--font-size, 1em));
+        width: max(
+            var(--icon-width,
+                var(--icon-height, 1rem)
+            ), 16px);
+        height: max(
+            var(--icon-height,
+                var(--icon-width, 1rem)
+            ), 16px);
         overflow: clip;
-        vertical-align: var(--vertical-align, baseline);
+        vertical-align: var(--vertical-align, text-bottom);
         cursor: var(--cursor, default);
     }
+    img,
     .Icon :global(svg) {
         width: 100%;
         height: 100%;
-        display: inline-block;
+        display: block;
     }
 </style>

package/dist/display/IconButton.svelte

@@ -1,10 +1,9 @@
-<script>import Icon from "./Icon.svelte";
+<script lang="ts">import Icon from "./Icon.svelte";
 import { fade, fly, slide } from "svelte/transition";
 import { popBezier, popBezierInverse } from "../utils/transitions.js";
 import { cubicIn, cubicOut } from "svelte/easing";
 let {
   icon,
-  hang,
   disabled,
   children,
   onclick
@@ -15,7 +14,7 @@ let {
     <span class="IconMask">
         {#key icon}
             <span class="IconContent" in:fly={{ duration: 250, y: -32, easing: popBezier }} out:fly={{ duration: 250, y: 32, easing: popBezierInverse }}>
-                <Icon {icon} />
+                <Icon {icon} --cursor="pointer" />
                 {#if children}
                     {@render children()}
                 {/if}
@@ -25,11 +24,11 @@ let {
 {/snippet}
 
 {#if onclick}
-    <button {disabled} class="IconButton" class:hang {onclick}>
+    <button type="button" {disabled} class="IconButton" {onclick}>
         {@render inside()}
     </button>
 {:else}
-    <span class="IconButton" class:hang>
+    <span class="IconButton">
         {@render inside()}
     </span>
 {/if}
@@ -41,14 +40,15 @@ let {
         color: inherit;
         opacity: 1;
         background-color: var(--field-bg);
-        transition: background-color 0.1s;
+        transition: background-color 0.04s;
+        border-radius: var(--field-radius);
+    }
+    .IconButton:hover {
+        background-color: var(--menu-bg-hover);
     }
     .IconButton:active {
         scale: 1;
     }
-    .IconButton.hang {
-        margin-inline-start: calc(-1 * var(--padding, 0.75rem));
-    }
     button.IconButton {
         border: none;
         background: none;

package/dist/display/IconButton.svelte.d.ts

@@ -4,8 +4,6 @@ declare const __propDef: {
     props: {
         /** The icon to display. */
         icon: string | ComponentType;
-        /** Whether the button should hang to the inline start to line up with other elements. The amount of hanging is the same as the padding. */
-        hang?: boolean | undefined;
         /** The children to display. */
         children?: ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";

package/dist/display/Image.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">let {
+  aspectRatio,
+  fit,
+  src,
+  srcset,
+  alt,
+  width,
+  height,
+  style,
+  class: className
+} = $props();
+if (!src && srcset) {
+  const [src1, src2] = srcset.split(", ");
+  src = src1.split(" ")[0];
+}
+if (!style) {
+  style = `aspect-ratio: ${aspectRatio};`;
+} else {
+  style += ` aspect-ratio: ${aspectRatio};`;
+}
+</script>
+
+<img
+    src={src}
+    srcset={srcset}
+    alt={alt}
+    width={width}
+    height={height}
+    style={style}
+    class="{className} {fit}"
+/>
+
+<style>
+    img {
+        display: inline-block;
+        vertical-align: middle;
+    }
+    img.cover { object-fit: cover; }
+    img.contain { object-fit: contain; }
+    img.scale-down { object-fit: scale-down; }
+</style>

package/dist/display/Image.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        aspectRatio?: string | undefined;
+        fit?: "cover" | "contain" | "scale-down" | undefined;
+        src?: string | undefined;
+        srcset?: string | undefined;
+        alt?: string | undefined;
+        width?: string | undefined;
+        height?: string | undefined;
+        style?: string | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ImageProps = typeof __propDef.props;
+export type ImageEvents = typeof __propDef.events;
+export type ImageSlots = typeof __propDef.slots;
+export default class Image extends SvelteComponent<ImageProps, ImageEvents, ImageSlots> {
+}
+export {};

package/dist/display/Indicator.svelte

@@ -1,4 +1,4 @@
-<script>import { isStatusColor, StatusColors } from "../utils/color.js";
+<script lang="ts">import { isStatusColor, StatusColors } from "../utils/color.js";
 let {
   color = "default",
   motion,

package/dist/display/Inset.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">let {
+  children
+} = $props();
+</script>
+
+<div class="Inset">
+    {@render children()}
+</div>
+
+<style>
+    .Inset {
+        margin-block: calc(var(--inset-block, 0) * -1);
+        margin-inline: calc(var(--inset-inline, 0) * -1);
+    }
+    .Inset > * {
+        display: block;
+    }
+</style>

package/dist/display/Inset.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InsetProps = typeof __propDef.props;
+export type InsetEvents = typeof __propDef.events;
+export type InsetSlots = typeof __propDef.slots;
+export default class Inset extends SvelteComponent<InsetProps, InsetEvents, InsetSlots> {
+}
+export {};

package/dist/display/Popup.svelte

@@ -1,4 +1,4 @@
-<script>import UiContent from "../layout/UIContent.svelte";
+<script lang="ts">import UiContent from "../layout/UIContent.svelte";
 import { slidefade } from "../utils/transitions.js";
 import { attr } from "../utils/attr.js";
 let {

package/dist/display/Popup.svelte.d.ts

@@ -5,9 +5,7 @@ declare const __propDef: {
         /** The content of the popup */
         content: Snippet<[close: () => void]>;
         /** Snippet containing the trigger element */
-        trigger: (this: void, attrs: (node: Element) => void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
+        trigger: Snippet<[attrs: (node: Element) => void]>;
         /** Triggers the popup on hover (and keyboard focus) instead of click */
         hover?: boolean | undefined;
         /** The shape of the popup */

package/dist/display/Table.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">let {
+  colored,
+  contained,
+  rounded,
+  hoverable,
+  hang,
+  fullWidth,
+  children
+} = $props();
+</script>
+
+<table
+    class:colored
+    class:contained
+    class:rounded
+    class:hang
+    class:fullWidth
+    class:hoverable
+>
+    {@render children()}
+</table>

package/dist/display/Table.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+declare const __propDef: {
+    props: {
+        colored?: boolean | undefined;
+        contained?: boolean | undefined;
+        rounded?: boolean | undefined;
+        hang?: boolean | undefined;
+        hoverable?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+        children: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
+}
+export {};

package/dist/display/Tag.svelte

@@ -1,4 +1,4 @@
-<script>import { isStatusColor } from "../utils/color.js";
+<script lang="ts">import { isStatusColor } from "../utils/color.js";
 let {
   code,
   color = "default",
@@ -22,7 +22,7 @@ let isSet = $derived(color ? isStatusColor(color) : true);
         {@render content()}
     </a>
 {:else if onclick}
-    <button class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+')'};" onclick={onclick}>
+    <button type="button" class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+')'};" onclick={onclick}>
         {@render content()}
     </button>
 {:else}

package/dist/display/Tooltip.svelte

@@ -1,4 +1,4 @@
-<script>import Theme from "../layout/Theme.svelte";
+<script lang="ts">import Theme from "../layout/Theme.svelte";
 let {
   children,
   tip,
@@ -32,9 +32,8 @@ const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toS
 <style>
     .Tooltip {
         position: relative;
-        height: 100%;
         display: inline-flex;
-        align-items: center;
+        vertical-align: var(--vertical-align, text-bottom);
     }
     .TooltipContainer {
         position: absolute;
@@ -58,8 +57,8 @@ const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toS
         border-left: var(--border-subtle);
         border-right: var(--border-subtle);
         display: block;
-        font-size: max(0.85rem, 12px);
-        line-height: 1.4;
+        font-size: max(0.75rem, 11px);
+        line-height: 1.35;
         font-weight: 500;
         color: var(--text);
         max-width: clamp(5ch, 100%, 35ch);
@@ -72,6 +71,10 @@ const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toS
     .TooltipContent :global(b) {
         font-weight: 700;
     }
+    .TooltipTrigger {
+        display: inline-flex;
+        align-items: center;
+    }
     .Tooltip:has(.TooltipTrigger:hover):not(.open) .TooltipContainer {
         animation: fadeIn 0.2s var(--delay, 0.5s) ease-in-out forwards;
     }

package/dist/display/index.d.ts

@@ -10,4 +10,5 @@ export { default as IconButton } from './IconButton.svelte';
 export { default as Indicator } from './Indicator.svelte';
 export { default as Popup } from './Popup.svelte';
 export { default as Tag } from './Tag.svelte';
+export { default as Table } from './Table.svelte';
 export { default as Tooltip } from './Tooltip.svelte';

package/dist/display/index.js

@@ -10,4 +10,5 @@ export { default as IconButton } from './IconButton.svelte';
 export { default as Indicator } from './Indicator.svelte';
 export { default as Popup } from './Popup.svelte';
 export { default as Tag } from './Tag.svelte';
+export { default as Table } from './Table.svelte';
 export { default as Tooltip } from './Tooltip.svelte';

package/dist/form/Button.svelte

@@ -1,4 +1,4 @@
-<script>import Icon from "../display/Icon.svelte";
+<script lang="ts">import Icon from "../display/Icon.svelte";
 let {
   href,
   type = "button",

package/dist/form/FieldActions.svelte

@@ -1,24 +1,45 @@
-<script>let {
+<script lang="ts">let {
+  align = "end",
   children
 } = $props();
 </script>
 
-<div class="FieldActions">
-    {@render children()}
+<div class="FieldActions {align}">
+    <div class="Actions">
+        {@render children()}
+    </div>
 </div>
 
 <style>
     .FieldActions {
+        display: grid;
+        background: color-mix(in srgb, var(--bg-subtle) calc(var(--fcc) * 100%), transparent);
+        padding: calc(1.5em * var(--fcc)) calc(3em * var(--fcc));
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+    }
+    .Actions {
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         gap: 1.35em;
-        background: color-mix(in srgb, var(--bg-subtle) calc(var(--fcc) * 100%), transparent);
-        padding: calc(1.5em * var(--fcc)) calc(1.5em * var(--fcc));
+        grid-column: 2 / -1;
+    }
+    .FieldActions.start .Actions {
+        justify-content: start;
+        grid-column: 1 / -1;
+    }
+    .FieldActions.middle .Actions {
+        justify-content: center;
+        grid-column: 1 / -1;
+    }
+    .FieldActions.end .Actions {
+        justify-content: end;
+        grid-column: 1 / -1;
     }
     @container (max-width: 400px) {
-        .FieldActions {
+        .Actions {
             flex-direction: column;
         }
     }

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
 declare const __propDef: {
     props: {
+        align?: "middle" | "justified" | "start" | "end" | undefined;
         children: Snippet;
     };
     events: {

package/dist/form/FieldContainer.svelte

@@ -1,4 +1,4 @@
-<script>let {
+<script lang="ts">let {
   children,
   contained
 } = $props();
@@ -12,8 +12,9 @@
     .FieldContainer {
         container-type: inline-size;
         display: grid;
-        gap: 1.5em;
-        grid-template-columns: 1fr;
+        row-gap: 1.5em;
+        column-gap: 3em;
+        grid-template-columns: minmax(25ch, 35%) minmax(min-content, 1fr);
         border-radius: var(--border-radius);
     }
     .FieldContainer.contained {

package/dist/form/FieldContent.svelte

@@ -1,4 +1,4 @@
-<script>import Label from "./Label.svelte";
+<script lang="ts">import Label from "./Label.svelte";
 import FieldError from "./FieldError.svelte";
 let {
   id,
@@ -16,21 +16,55 @@ let {
 } = $props();
 </script>
 
+{#snippet _prefix()}
+    <div class="Fix Prefix">
+        {#if typeof prefix === 'string'}
+            {prefix}
+        {:else}
+            {@render prefix()}
+        {/if}
+    </div>
+{/snippet}
+
+{#snippet _suffix()}
+    <div class="Fix Suffix">
+        {#if typeof suffix === 'string'}
+            {suffix}
+        {:else}
+            {@render suffix()}
+        {/if}
+    </div>
+{/snippet}
 
 <div class="FieldContent {type} {direction}" class:contained>
     <Label {label} tip={labelTip} {id} />
     {#if contained}
-        <div class="Field">
+        <div
+            class="Field"
+            class:hasPrefix={prefix}
+            class:hasSuffix={suffix}
+            class:invalid={field?.tainted && issue?.code}
+        >
             {#if prefix}
-                <div class="Fix Prefix">{prefix}</div>
+                {@render _prefix()}
             {/if}
+
             {@render children()}
+
             {#if suffix}
-                <div class="Fix Suffix">{suffix}</div>
+                {@render _suffix()}
             {/if}
         </div>
     {:else}
+        {#if prefix}
+            {@render _prefix()}
+        {/if}
+
         {@render children()}
+
+        {#if suffix}
+            {@render _suffix()}
+        {/if}
     {/if}
 
     {#if field?.tainted && issue?.code}
@@ -45,12 +79,21 @@ let {
         flex-direction: column;
         font-size: var(--font-size, 1em);
     }
+    .FieldContent.row {
+        flex-direction: row-reverse;
+        justify-content: start;
+        align-items: center;
+        flex-shrink: 0;
+    }
     .Field {
         background-color: var(--field-bg);
-        border: var(--border-size) var(--border-style) var(--border-color);
+        border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
         border-radius: var(--field-radius);
         display: flex;
-        padding-inline: 0.15em;
+    }
+    .Field:has(input:user-invalid),
+    .Field.invalid {
+        border-color: var(--field-border-color-error);
     }
     .Field > *:not(input) {
         flex-grow: 0;
@@ -73,21 +116,16 @@ let {
     .Field:has(input:focus-visible) {
         outline: var(--focus-outline);
     }
-    .Field.hasPrefix input {
+    .Field:has(input:focus-visible:user-invalid),
+    .Field.invalid:has(input:focus-visible) {
+        outline-color: var(--focus-color-error); 
+    }
+    .Field.hasPrefix :global(input) {
         padding-inline-start: 0.35em;
     }
-    /**
-     * Buttons
-     */
     .Field :global(button:focus-visible) {
         outline: var(--focus-outline);
         outline-offset: 3px;
         border-radius: calc(var(--field-radius) - 2px);
     }
-    /**
-     * Row
-     */ 
-    .FieldContent.row {
-        flex-direction: row;
-    }
 </style>

package/dist/form/FieldError.svelte

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