lutra 0.1.67 → 0.1.69

package/dist/components/Popover.svelte

@@ -3,8 +3,24 @@
 	import { BROWSER } from "esm-env";
 
 	/**
-	 * A base popover component using the Popover API and CSS Anchor Positioning.
-	 * Use this as a foundation for dropdowns, tooltips, contextual help, etc.
+	 * @description
+	 * A base popover component using the native Popover API and CSS Anchor Positioning.
+	 * Use as a foundation for dropdowns, tooltips, contextual help, etc.
+	 * Supports trigger snippets, external anchors, placement with fallbacks, and light dismiss.
+	 * @cssprop --popover-background - Background color. (Default: var(--surface-background))
+	 * @cssprop --popover-border - Border shorthand. (Default: var(--surface-border))
+	 * @cssprop --popover-border-radius - Border radius. (Default: var(--surface-border-radius))
+	 * @cssprop --popover-shadow - Box shadow. (Default: var(--surface-shadow))
+	 * @cssprop --popover-width - Width of the popover. (Default: max-content)
+	 * @cssprop --popover-max-width - Maximum width. (Default: calc(100vw - 2rem))
+	 * @cssprop --popover-max-height - Maximum height. (Default: calc(100vh - 2rem))
+	 * @example
+	 * <Popover placement="bottom-start">
+	 *     {#snippet trigger({ toggle, triggerAttrs })}
+	 *         <button {...triggerAttrs}>Open</button>
+	 *     {/snippet}
+	 *     <p>Popover content</p>
+	 * </Popover>
 	 */
 	let {
 		open = $bindable(false),
@@ -218,23 +234,34 @@
 	}
 
 	.Popover:popover-open {
-		animation: popover-show 0.15s ease-out;
+		opacity: 1;
+		translate: 0 0;
+		transition:
+			opacity var(--transition-duration-fast) ease-out,
+			translate var(--transition-duration-fast) ease-out,
+			display var(--transition-duration-fast) allow-discrete;
 	}
 
-	@keyframes popover-show {
-		from {
+	.Popover:not(:popover-open) {
+		opacity: 0;
+		translate: 0 calc(-1 * var(--space-xxs));
+		transition:
+			opacity var(--transition-duration-fast) ease-in,
+			translate var(--transition-duration-fast) ease-in,
+			display var(--transition-duration-fast) allow-discrete;
+	}
+
+	@starting-style {
+		.Popover:popover-open {
 			opacity: 0;
-			transform: translateY(-4px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
+			translate: 0 calc(-1 * var(--space-xxs));
 		}
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.Popover:popover-open {
-			animation: none;
+		.Popover:popover-open,
+		.Popover:not(:popover-open) {
+			transition: none;
 		}
 	}
 </style>

package/dist/components/TabbedContent.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { setContext, type Snippet } from "svelte";
     import type { TabbedContentItem } from "./MenuTypes.js";
 	import Tabs from "./Tabs.svelte";

package/dist/components/TabbedContentItem.svelte

@@ -1,15 +1,29 @@
 <script lang="ts">
 	import { getContext, type Snippet } from "svelte";
 
+    /**
+     * @description
+     * A single tab panel within a TabbedContent. Registers itself with the parent TabbedContent via context.
+     * @example
+     * <TabbedContent>
+     *     <TabbedContentItem label="First">
+     *         <p>First tab content</p>
+     *     </TabbedContentItem>
+     * </TabbedContent>
+     */
     let {
         id,
         label,
         href,
         children,
     }: {
+        /** Unique identifier for this tab. Defaults to a slug of `label`. */
         id?: string;
+        /** The label displayed in the tab bar. */
         label: string;
+        /** Optional URL hash for this tab. */
         href?: string;
+        /** The content of this tab panel. */
         children: Snippet;
     } = $props();
 

package/dist/components/TabbedContentItem.svelte.d.ts

@@ -1,8 +1,12 @@
 import { type Snippet } from "svelte";
 type $$ComponentProps = {
+    /** Unique identifier for this tab. Defaults to a slug of `label`. */
     id?: string;
+    /** The label displayed in the tab bar. */
     label: string;
+    /** Optional URL hash for this tab. */
     href?: string;
+    /** The content of this tab panel. */
     children: Snippet;
 };
 declare const TabbedContentItem: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/Table.svelte

@@ -1,6 +1,16 @@
 <script lang="ts">
     import { getContext, type Snippet } from "svelte";
 
+    /**
+     * @description
+     * A table wrapper that provides containment, rounding, hover highlights, and zebra striping.
+     * Styling is provided by the table tokens in the CSS layer. The `contained` prop can be set via context.
+     * @example
+     * <Table contained rounded hoverable>
+     *     <thead><tr><th>Name</th><th>Value</th></tr></thead>
+     *     <tbody><tr><td>Alpha</td><td>1</td></tr><tr><td>Beta</td><td>2</td></tr></tbody>
+     * </Table>
+     */
     let {
         colored,
         contained,
@@ -10,12 +20,19 @@
         fullWidth,
         children,
     }: {
+        /** Enable alternating row background colors. */
         colored?: boolean;
+        /** Wrap the table in a border. Inherits from `lutra.table.contained` or `lutra.contained` context. */
         contained?: boolean;
+        /** Round the corners of the container when contained. */
         rounded?: boolean;
+        /** Apply a negative inline margin to align table borders with surrounding content. */
         hang?: boolean;
+        /** Highlight rows on hover. */
         hoverable?: boolean;
+        /** Force the table to full width. */
         fullWidth?: boolean;
+        /** Table content (thead, tbody, etc.). */
         children: Snippet;
     } = $props();
 
@@ -39,3 +56,55 @@
         {@render children()}
     </table>
 </div>
+
+<style>
+    .table-container {
+        overflow: clip;
+    }
+    .table-container.contained {
+        border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
+    }
+    .table-container.rounded {
+        border-radius: var(--table-border-radius);
+    }
+    .table-container.hang {
+        margin-inline: calc(-1 * var(--table-cell-padding-inline));
+    }
+    table {
+        border-collapse: collapse;
+        width: 100%;
+    }
+    :global(th),
+    :global(td) {
+        padding-block: var(--table-cell-padding-block);
+        padding-inline: var(--table-cell-padding-inline);
+        text-align: start;
+        vertical-align: top;
+        color: var(--table-cell-color);
+    }
+    .contained :global(th),
+    .contained :global(td) {
+        border: none;
+    }
+    table:not(.contained) :global(th),
+    table:not(.contained) :global(td) {
+        border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
+    }
+    :global(th) {
+        background-color: var(--table-header-background);
+        color: var(--table-header-color);
+        font-weight: var(--table-header-font-weight);
+    }
+    :global(tbody tr) {
+        background-color: var(--table-row-background);
+    }
+    .colored :global(tbody tr:nth-child(even)) {
+        background-color: var(--table-row-background-even);
+    }
+    .hoverable :global(tbody tr:hover) {
+        background-color: var(--table-row-background-hover);
+    }
+    .fullWidth {
+        width: 100%;
+    }
+</style>

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

@@ -1,11 +1,18 @@
 import { type Snippet } from "svelte";
 type $$ComponentProps = {
+    /** Enable alternating row background colors. */
     colored?: boolean;
+    /** Wrap the table in a border. Inherits from `lutra.table.contained` or `lutra.contained` context. */
     contained?: boolean;
+    /** Round the corners of the container when contained. */
     rounded?: boolean;
+    /** Apply a negative inline margin to align table borders with surrounding content. */
     hang?: boolean;
+    /** Highlight rows on hover. */
     hoverable?: boolean;
+    /** Force the table to full width. */
     fullWidth?: boolean;
+    /** Table content (thead, tbody, etc.). */
     children: Snippet;
 };
 declare const Table: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/Tabs.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { browser } from "$app/environment";
-	import { page } from "$app/stores";
+	import { BROWSER } from 'esm-env';
+	import { page } from "$app/state";
 	import type { TabItem } from "./MenuTypes.js";
 	import { onMount } from "svelte";
 
@@ -8,6 +8,19 @@
      * @description
      * A tabbed navigation menu used to navigate between pages or sections of content.
      * Clicking a tab will change the URL or trigger a JavaScript event.
+     * @cssprop --tab-background-color - Background color of the tab bar. (Default: var(--menu-background-color))
+     * @cssprop --tab-background-color-hover - Background color of a tab on hover. (Default: var(--menu-background-color-hover))
+     * @cssprop --tab-background-color-active - Background color of the active tab. (Default: var(--background-selected))
+     * @cssprop --tab-text-color - Text color of tabs. (Default: var(--menu-text-color))
+     * @cssprop --tab-text-color-active - Text color of the active tab. (Default: var(--text-color-heading))
+     * @cssprop --tab-border-size - Border width. (Default: var(--menu-border-size))
+     * @cssprop --tab-border-style - Border style. (Default: var(--menu-border-style))
+     * @cssprop --tab-border-color - Border color. (Default: var(--menu-border-color))
+     * @cssprop --tab-border-radius - Border radius when rounded. (Default: var(--menu-border-radius))
+     * @cssprop --tab-gap - Gap between tabs when not contained. (Default: var(--space-md))
+     * @cssprop --tab-padding - Padding of each tab. (Default: var(--space-sm) var(--space-xs))
+     * @cssprop --tab-font-size - Font size of each tab label. (Default: var(--font-size-sm))
+     * @cssprop --tab-letter-spacing - Letter spacing of each tab label. (Default: -0.05ch)
      * @example
      * <Tabs contained rounded items={[
      *     {
@@ -58,21 +71,15 @@
 
     let activeIndex = $derived.by(() => {
         return items.findIndex((item, index) => {
-            console.log(item.href);
             if(!item.href) return false;
-            // check if href ends in *
             if(item.href.endsWith('*')) {
-                return $page.url.pathname.startsWith(item.href.slice(0, -1));
+                return page.url.pathname.startsWith(item.href.slice(0, -1));
             } else {
-                return $page.url.pathname.endsWith(item.href);
+                return page.url.pathname.endsWith(item.href);
             }
         })
     });
 
-    $effect(() => {
-        console.log(activeIndex);
-    });
-
     let loaded = $state(false);
 
     onMount(async () => {
@@ -81,7 +88,7 @@
     });
 
     let underlineStyle = $derived.by(() => {
-        if(browser && underline && loaded) {
+        if(BROWSER && underline && loaded) {
             let active = items[activeIndex];
             let activeElement: HTMLElement | null = document.querySelector(`#${id} li[data-index="${activeIndex}"]`);
             if(activeElement) {
@@ -126,15 +133,14 @@
 <style>
     .Tabs {
         display: flex;
-        z-index: 2;
-        background: var(--menu-bg);
+        background: var(--tab-background-color, var(--menu-background-color));
         overflow: clip;
     }
     .Tabs.contained {
-        border: var(--menu-border);
+        border: var(--tab-border-size, var(--menu-border-size)) var(--tab-border-style, var(--menu-border-style)) var(--tab-border-color, var(--menu-border-color));
     }
     .Tabs.rounded {
-        border-radius: var(--border-radius);
+        border-radius: var(--tab-border-radius, var(--menu-border-radius));
     }
     menu, li {
         list-style: none;
@@ -148,9 +154,9 @@
         align-items: center;
         justify-content: flex-start;
         padding: 0;
-        gap: var(--gap, 1rem);
+        gap: var(--tab-gap, var(--space-md));
         inline-size: 100%;
-        border-block-end: var(--menu-border);
+        border-block-end: var(--tab-border-size, var(--menu-border-size)) var(--tab-border-style, var(--menu-border-style)) var(--tab-border-color, var(--menu-border-color));
     }
     .Tabs.contained menu {
         gap: 0;
@@ -161,15 +167,15 @@
     a,
     button {
         display: block;
-        padding: var(--padding, 0.75rem 0.5rem);
-        color: var(--menu-text);
-        transition: all var(--menu-trans);
-        font-weight: 500;
-        font-size: var(--font-size, 0.9em);
-        letter-spacing: -0.05ch;
+        padding: var(--tab-padding, var(--space-sm) var(--space-xs));
+        color: var(--tab-text-color, var(--menu-text-color));
+        transition: all var(--transition-duration-fast);
+        font-weight: var(--font-weight-normal);
+        font-size: var(--tab-font-size, var(--font-size-sm));
+        letter-spacing: var(--tab-letter-spacing, -0.05ch);
         background: transparent;
         border: none;
-        border-block-end: 2px solid transparent;
+        border-block-end: var(--border-size-thick) solid transparent;
         cursor: pointer;
         text-decoration: none;
     }
@@ -178,7 +184,7 @@
     }
     .Tabs.contained li {
         flex-grow: 1;
-        border-inline-end: var(--menu-border);
+        border-inline-end: var(--tab-border-size, var(--menu-border-size)) var(--tab-border-style, var(--menu-border-style)) var(--tab-border-color, var(--menu-border-color));
         flex-basis: auto;
     }
     .Tabs.contained menu li:last-of-type {
@@ -189,28 +195,30 @@
         flex-grow: 1;
         inline-size: 100%;
         text-align: center;
-        padding-block-start: calc(0.75rem + 3px);
-        color: var(--menu-text);
-        font-weight: 600;
+        padding-block-start: calc(var(--space-sm) + var(--border-size-thick));
+        color: var(--tab-text-color, var(--menu-text-color));
+        font-weight: var(--font-weight-medium);
     }
     a:hover,
-    button:hover {
-        color: color-mix(in hsl shorter hue, var(--menu-text) var(--mix-amount), var(--mix-target));
-        background-color: color-mix(in hsl shorter hue, var(--menu-bg) var(--mix-amount), var(--mix-target));
+    button:hover,
+    a:focus-visible,
+    button:focus-visible {
+        background-color: var(--tab-background-color-hover, var(--menu-background-color-hover));
+        outline: none;
     }
     li[aria-current="page"] a,
     li[aria-current="page"] button {
-        background: var(--menu-bg-active);
-        color: var(--menu-text-active);
+        background: var(--tab-background-color-active, var(--background-selected));
+        color: var(--tab-text-color-active, var(--text-color-heading));
         opacity: 1;
     }
     .Underline {
-        height: 2px;
-        background-color: var(--menu-text-active);
+        height: var(--border-size-thick);
+        background-color: var(--tab-text-color-active, var(--text-color-heading));
         position: absolute;
         bottom: 0;
         left: 0;
-        transition: all 0.2s ease-out;
+        transition: all var(--transition-duration-fast) ease-out;
         opacity: 0;
     }
 </style>

package/dist/components/Tag.svelte

@@ -7,6 +7,8 @@
      * A tag is a small piece of information that can be used to categorize or label an item. You can pick between `rounded`, `pill` or `rectangle` shapes. The font size and padding are relative to the parent element by default.
      * Changing the font size without changing the padding will cause padding to be scaled with the font size. This can be changed by setting the `--padding` CSS prop.
      * You can pass a `href` to make the tag a link, or an `onclick` function to make it a button. If you pass a `href`, you can also pass a `target` to specify the target of the link.
+     * @cssprop --prefix-padding - The padding of the prefix content. (Default: var(--space-xxs))
+     * @cssprop --suffix-padding - The padding of the suffix content. (Default: var(--space-xxs))
      * @cssprop --font-size - The font size of the tag. (Default: 1em)
      * @cssprop --font-weight - The font weight of the tag. (Default: 500)
      * @cssprop --padding - The padding of the tag. (Default: 0.25em 0.5em)
@@ -26,6 +28,8 @@
         href,
         target,
         children,
+        prefix,
+        suffix
     }: { 
         /** Use a mono-spaced font for the tag. */
         code?: boolean;
@@ -41,6 +45,10 @@
         target?: string;
         /** The content of the tag. */
         children: Snippet;
+        /** Prefix content, to display before the tag. */
+        prefix?: string | Snippet;
+        /** Suffix content, to display after the tag. */
+        suffix?: string | Snippet;
     } = $props();
     let isSet = $derived(color ? isStatusColor(color) : true);
 </script>
@@ -51,30 +59,61 @@
     </em>
 {/snippet}
 
+{#snippet _prefix()}
+    {#if prefix}
+        <span class="Prefix">
+            {#if typeof prefix === 'string'}
+                {prefix}
+            {:else}
+                {@render prefix()}
+            {/if}
+        </span>
+    {/if}
+{/snippet}
+
+{#snippet _suffix()}
+    {#if suffix}
+        <span class="Suffix">
+            {#if typeof suffix === 'string'}
+                {suffix}
+            {:else}
+                {@render suffix()}
+            {/if}
+        </span>
+    {/if}
+{/snippet}
+
 {#if href}
     <a {href} {target} class:code class="Tag Link {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+'-background)'}; --textColor: {!isSet ? color : 'var(--status-'+color+'-color)'};" onclick={onclick}>
+        {@render _prefix()}
         {@render content()}
+        {@render _suffix()}
     </a>
 {:else if onclick}
     <button type="button" class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+'-background)'}; --textColor: {!isSet ? color : 'var(--status-'+color+'-color)'};" onclick={onclick}>
+        {@render _prefix()}
         {@render content()}
+        {@render _suffix()}
     </button>
 {:else}
     <span class:code class="Tag {shape}" style="--bgColor: {!isSet ? color : 'var(--status-'+color+'-background)'}; --textColor: {!isSet ? color : 'var(--status-'+color+'-color)'};">
+        {@render _prefix()}
         {@render content()}
+        {@render _suffix()}
     </span>
 {/if}
 
 <style>
     .Tag {
         display: inline-flex;
+        align-items: center;
         padding: var(--padding, 0.5em 0.5em);
-        font-weight: var(--font-weight, 500);
+        font-weight: var(--font-weight, var(--font-weight-normal));
         background: var(--bgColor);
-        border-radius: var(--border-radius);
+        border-radius: var(--border-radius-base);
         font-size: var(--font-size, 0.85em);
         vertical-align: var(--vertical-align, baseline);
-        border: 1px solid color-mix(in srgb, var(--bgColor) 95%, var(--mix-target, black) 5%);
+        border: var(--border-size-thin) solid color-mix(in oklch, var(--bgColor) 95%, var(--mix-target, black) 5%);
     }
     .Tag.rectangle {
         border-radius: 0;
@@ -87,26 +126,27 @@
         padding: var(--padding, 0.15em 0.35em);
         font-size: 1em;
         line-height: 1em;
-        background: var(--bg, var(--bg-subtle));
-        color: var(--textColor);
-        border: var(--border, var(--border-subtle));
+        background: var(--code-background);
+        color: var(--textColor, var(--code-color));
+        border: var(--code-border-size) var(--code-border-style) var(--code-border-color);
     }
     em {
         font-style: normal;
-        left: 50%;
         text-box: trim-both cap alphabetic;
-        position: relative;
-        display: block;
-        transform: translateX(-50%);
+    }
+    .Prefix {
+        padding-inline-end: var(--prefix-padding, var(--space-xxs));
+    }
+    .Suffix {
+        padding-inline-start: var(--suffix-padding, var(--space-xxs));
     }
     a:hover, button:hover {
-        --bgColor2: color-mix(in srgb, var(--bgColor) 87%, white 13%);
-        background-color: var(--bgColor2);
+        background-color: color-mix(in oklch, var(--bgColor) 87%, white 13%);
         cursor: pointer;
     }
     @media (prefers-contrast: more) {
         .Tag {
-            border: 1px solid color-mix(in srgb, var(--bgColor) 50%, var(--mix-target, black) 50%);
+            border: var(--border-size-thin) solid color-mix(in oklch, var(--bgColor) 50%, var(--mix-target, black) 50%);
         }
         em {
             opacity: 0.99;

package/dist/components/Tag.svelte.d.ts

@@ -15,6 +15,10 @@ type $$ComponentProps = {
     target?: string;
     /** The content of the tag. */
     children: Snippet;
+    /** Prefix content, to display before the tag. */
+    prefix?: string | Snippet;
+    /** Suffix content, to display after the tag. */
+    suffix?: string | Snippet;
 };
 declare const Tag: import("svelte").Component<$$ComponentProps, {}, "">;
 type Tag = ReturnType<typeof Tag>;